@font-face{font-family:Baloo;src:url('./fonts/baloo-bhaijaan-2-arabic-800-normal.woff2');font-weight:800;font-display:swap}
@font-face{font-family:Baloo;src:url('./fonts/baloo-bhaijaan-2-arabic-600-normal.woff2');font-weight:600;font-display:swap}
:root{--ink:#123d50;--ocean:#073a4c;--cream:#fff4d8;--mint:#acede0;--gold:#ffd166;--coral:#f28d76}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Baloo,Arial,sans-serif;background:var(--ocean);color:var(--cream);touch-action:none;user-select:none;-webkit-user-select:none}button{font:inherit;border:0;cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none}button:focus-visible{outline:4px solid white;outline-offset:5px}button:active{translate:0 3px}button:disabled{opacity:.4;cursor:default}button svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}#stage{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.screen{position:fixed;inset:0;pointer-events:none;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center}.screen>*{pointer-events:auto}
#boot,#fatal{position:fixed;inset:0;z-index:50;background:var(--ocean);display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:20px}.loader{height:58px;width:58px;border:5px solid #27788a;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{rotate:360deg}}#fatal button{padding:12px 28px;border-radius:20px;background:var(--gold);color:var(--ink)}
.icon-button{width:54px;height:54px;border-radius:19px;background:#0d4e62;color:var(--cream);border:1px solid #387284;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #032f40;font-size:30px}.corner{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:5}
#home{justify-content:space-between;padding-top:7vh;padding-bottom:5vh}.heading{text-align:center}.eyebrow{display:inline-block;color:var(--mint);font-size:14px;letter-spacing:.3px}.heading h1{font-size:clamp(58px,9.5vw,108px);line-height:.88;letter-spacing:-2px;margin:25px 0 20px;text-shadow:0 6px 0 #073245;font-weight:800}.heading em{color:var(--gold);font-style:normal}.heading p{margin:0;font-size:18px;color:#c3e3dc}.home-bottom{width:min(320px,100%);text-align:center}.primary{background:var(--gold);color:var(--ink);padding:15px 28px;min-height:62px;width:100%;border-radius:23px;box-shadow:0 6px 0 #be984b;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:14px}.mini-info{display:flex;justify-content:center;align-items:center;gap:17px;color:#b2dbd8;font-size:15px;margin-top:20px}.mini-info i{width:4px;height:4px;background:var(--gold);border-radius:50%}
.sheet{background:#083c4e;overflow-y:auto;touch-action:pan-y;pointer-events:auto;padding-top:78px}.setup-wrap{width:min(540px,100%);text-align:center;margin:auto}.setup-wrap h2{font-size:34px;margin:2px 0 18px}.language{display:flex;background:#073245;border-radius:19px;padding:5px;gap:6px}.language button{flex:1;padding:11px 6px;background:transparent;color:#b8dbdc;font-size:20px;border-radius:15px}.language .selected{background:var(--mint);color:var(--ink)}.setup-note{font-size:16px;margin:16px 0 12px;color:#acd7d7}.letters{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.letters button{min-width:0;width:100%;padding:0;height:48px;border-radius:13px;background:#15566a;color:#b9dddd;font-size:28px;display:flex;align-items:center;justify-content:center;border:2px solid #297184}.letters button.selected{background:var(--gold);color:var(--ink);border-color:#ffe5a6;box-shadow:0 3px 0 #b89446}.text-button{background:none;color:#b4e4e0;font-size:17px;padding:14px}.setup-wrap .primary{margin:8px 0 18px}.mission{position:absolute;top:max(21px,env(safe-area-inset-top));left:50%;translate:-50% 0;text-align:center;padding:10px 16px;background:#0d4e62;border:1px solid #397d89;border-radius:22px;box-shadow:0 4px 0 #033447;min-width:168px;pointer-events:none}.mission>span{font-size:19px}.pearls{display:flex;direction:rtl;justify-content:center;gap:6px;margin-top:5px}.pearls i{width:10px;height:10px;border:1.5px solid #93d0c9;border-radius:50%;background:#195b6c}.pearls i.collected{background:var(--gold);border-color:#ffeabe;box-shadow:0 0 7px #ffe3a377}.zone-pill{position:absolute;top:119px;left:50%;translate:-50% 0;display:flex;gap:10px;align-items:center;color:#c0e3db;font-size:12px;padding:4px 12px;background:#0b4b5b;border-radius:20px;pointer-events:none}.zone-pill span:first-child{font-size:15px;color:var(--gold)}.hint{position:absolute;bottom:140px;left:50%;translate:-50% 0;padding:9px 14px;border:1px solid #528c8e;border-radius:20px;background:#0d4e62;color:#e3f1e8;font-size:16px;text-align:center;white-space:nowrap;display:flex;gap:8px;align-items:center;pointer-events:none;transition:opacity .5s}.hint.fade{opacity:0}.touch-icon{color:var(--gold);font-size:27px;animation:tap 1.3s ease-in-out infinite}@keyframes tap{50%{translate:0 5px}}.bottom-hud{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;direction:ltr;justify-content:space-between;align-items:flex-end;pointer-events:none}.bottom-hud>*{pointer-events:auto}.sonar{width:94px;height:104px;background:var(--gold);color:var(--ink);border:3px solid #ffe7af;border-radius:32px;box-shadow:0 7px 0 #b6944a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:20px}.sonar svg{width:39px;height:39px;stroke-width:2}.sonar svg path:first-child{fill:currentColor;stroke:none}.rescue-count{direction:rtl;display:flex;gap:7px;align-items:center;background:#0d4e62;border:1px solid #34768a;border-radius:18px;padding:7px 12px;font-size:14px;color:#bfe2dc}.rescue-count b{font-size:23px;color:var(--cream)}.rescue-count svg{width:23px;height:23px;fill:#f58a82;stroke:none}.overlay{background:#042e40c9;justify-content:center;pointer-events:auto}.dialog{width:min(430px,100%);padding:30px 24px;background:#0d4e62;border:2px solid #468c93;border-radius:36px;text-align:center;box-shadow:0 10px 0 #032f40}.dialog h2{font-size:32px;line-height:1.3;margin:13px 0 22px}.dialog p{color:#c2e2da;font-size:18px}.secondary{background:transparent;color:#c7e4dc;font-size:19px;padding:16px 20px;margin-top:5px}.end-orb{font-size:72px;color:var(--gold);line-height:1.1}.result-stats{display:flex;justify-content:center;gap:20px;margin:18px 0 23px}.result-stats span{color:#bfded7}.result-stats b{display:block;color:var(--gold);font-size:27px}#announcement{position:fixed;top:27%;left:50%;translate:-50% -10px;pointer-events:none;background:#fff2d8;color:#194455;border-radius:23px;padding:12px 25px;font-size:25px;text-align:center;box-shadow:0 5px 0 #799f9e;opacity:0;transition:opacity .3s,translate .3s;white-space:nowrap;z-index:7}#announcement.show{opacity:1;translate:-50% 0}
@media(min-width:900px){#home{align-items:flex-end;padding:9vh 12vw}.heading{text-align:right}.heading h1{font-size:100px}.home-bottom{width:280px}.heading p{max-width:290px;font-size:19px}}
@media(max-height:520px){#home{padding:24px 10vw;align-items:flex-end}.heading{text-align:right}.heading h1{font-size:51px;margin:13px 0 9px}.heading p{font-size:14px}.eyebrow{font-size:12px}.home-bottom{width:240px}.primary{min-height:49px;padding:9px 22px;font-size:23px}.mini-info{margin-top:10px;font-size:12px}.sheet{padding-top:22px}.setup-wrap{max-width:570px}.setup-wrap h2{font-size:25px;margin:0 0 7px}.language button{padding:4px;font-size:17px}.letters{grid-template-columns:repeat(14,minmax(0,1fr));gap:5px}.letters button{height:37px;font-size:23px}.setup-note{margin:8px 0}.text-button{padding:7px}.mission{top:12px;padding:4px 14px}.mission>span{font-size:16px}.zone-pill{left:100px;top:22px;translate:0;flex-direction:column;gap:0}.sonar{width:80px;height:83px;border-radius:25px;font-size:17px}.hint{bottom:28px;font-size:15px}.dialog{padding:17px 24px}.dialog h2{font-size:25px;margin:5px 0 10px}.dialog p{margin:6px 0;font-size:16px}.end-orb{font-size:40px}.result-stats{margin:8px 0}.result-stats b{font-size:22px}}
@media(prefers-reduced-motion:reduce){.touch-icon{animation:none}}

.mini-info{color:#e0f5e5}.heading p{color:#e0f2e9}