:root{--game-width: min(100vw - 20px, 520px);--keyboard-bottom-space: clamp(18px, 4dvh, 40px);--board-width: min(var(--game-width), calc((100dvh - 230px - var(--keyboard-bottom-space)) * .8));--tile-gap: clamp(4px, calc(var(--board-width) * .015), 8px);--tile-size: calc((var(--board-width) - (var(--tile-gap) * 4)) / 5);--key-height: clamp(30px, calc((100dvh - var(--board-width) - 210px - var(--keyboard-bottom-space)) / 3), 52px);--key-gap: clamp(3px, calc(var(--game-width) * .012), 6px);color:#f4f4f5;background:#111317;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100dvh;overflow:hidden;background:radial-gradient(circle at top,rgba(49,60,74,.48),transparent 34rem),#111317}button{font:inherit}.app{display:grid;min-height:100dvh;padding:max(16px,env(safe-area-inset-top)) 10px max(16px,env(safe-area-inset-bottom));place-items:start center}.game{display:grid;width:var(--game-width);max-height:calc(100dvh - 32px);align-content:start}.game-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(6px,1.3dvh,14px)}.eyebrow{margin:0 0 4px;color:#a8adb7;font-size:clamp(.65rem,1.4dvh,.78rem);font-weight:700;text-transform:uppercase}h1{margin:0;font-size:clamp(1.55rem,4.4dvh,2.7rem);line-height:1}.reset-button,.key{border:0;border-radius:8px;color:#f4f4f5;cursor:pointer;font-weight:800;transition:transform .12s ease,background .12s ease,border-color .12s ease}.reset-button:active,.key:active{transform:translateY(1px) scale(.98)}.reset-button{flex:0 0 auto;padding:clamp(7px,1.1dvh,11px) clamp(9px,2vw,14px);border:1px solid #3b414d;background:#1d232d;font-size:clamp(.74rem,1.6dvh,.9rem)}.reset-button:hover{background:#29313d}.message{min-height:clamp(18px,2.4dvh,26px);margin:0 0 clamp(6px,1.4dvh,14px);color:#cfd3dc;font-size:clamp(.78rem,1.8dvh,.96rem);font-weight:700;text-align:center}.message.won{color:#7fdc93}.message.lost{color:#ffb4a9}.hormuz-card{position:relative;display:grid;width:var(--game-width);justify-items:center;gap:clamp(8px,1.5dvh,14px);margin:0 auto clamp(10px,2dvh,18px);overflow:hidden;border:1px solid #2b3440;border-radius:8px;background:#10151cb8;padding:clamp(10px,1.8dvh,16px)}.hormuz-map{position:relative;z-index:1;display:block;width:100%;aspect-ratio:16 / 9;border-radius:8px;overflow:hidden;background:#0b2236}.hormuz-map img,.map-overlay{position:absolute;inset:0;width:100%;height:100%}.hormuz-map img{object-fit:cover;object-position:50% 77%}.rocket{--rocket-start-x: 642px;--rocket-start-y: 116px;font-size:34px;transform-box:fill-box;transform-origin:center}.rocket text{dominant-baseline:central;text-anchor:middle}.rocket.armed{animation:rocket-shake .18s linear infinite}.rocket.launching{animation:rocket-launch .85s cubic-bezier(.2,.8,.2,1) both}.toll-arrow{filter:drop-shadow(0 0 10px rgba(127,220,147,.5)) drop-shadow(0 8px 12px rgba(0,0,0,.35));opacity:0;transform-box:fill-box;transform-origin:center;animation:toll-arrow-pop .52s cubic-bezier(.18,.9,.2,1.2) .36s both}.toll-arrow-sign{fill:#14482deb;stroke:#b6ffd0;stroke-width:4}.toll-arrow-shaft,.toll-arrow-head{fill:none;stroke:#7fdc93;stroke-linecap:round;stroke-linejoin:round;stroke-width:8}.toll-arrow-head{fill:#7fdc93;stroke-width:4}.ship{filter:drop-shadow(0 7px 10px rgba(0,0,0,.36));transition:transform .42s cubic-bezier(.2,.85,.25,1)}.ship-trail{fill:none;opacity:0;stroke:#3a98bf7a;stroke-linecap:round;stroke-linejoin:round;stroke-width:18;transition:opacity .18s ease}.ship-trail.visible{opacity:1}.ship-trail.blocked{stroke:#ff6d646b}.radar-ring{display:none;fill:none;stroke:#7fdc93c7;stroke-width:4;transform-box:fill-box;transform-origin:center}.ship.beeping .radar-ring{display:block;animation:radar-beep 1.1s ease-out infinite}.ship-body{fill:#f8d66d;stroke:#fff4bd;stroke-width:3}.ship-cabin{fill:#27303a}.ship-wake{fill:none;stroke:#ffffffb8;stroke-linecap:round;stroke-width:4}.ship.won .ship-body{fill:#7fdc93;stroke:#d8ffe0}.ship.lost .ship-body{opacity:.35;fill:#4c5665;stroke:#9aa4b2}.ship.lost .ship-cabin,.ship.lost .ship-wake{opacity:.2}.ship-explosion,.blast{transform-box:fill-box;transform-origin:center}.blast.core{fill:#fff3a3;animation:blast-core .9s ease-out .65s both}.blast.glow{fill:#ff5e3680;animation:blast-glow .9s ease-out .65s both}.blast-flame{fill:#ff8a2a;stroke:#fff3a3;stroke-linejoin:round;stroke-width:4;transform-box:fill-box;transform-origin:center;animation:blast-flame .9s ease-out .65s both}.smoke{fill:#99a2afc7;transform-box:fill-box;transform-origin:center}.smoke-one{animation:smoke-one 1.2s ease-out .7s both}.smoke-two{animation:smoke-two 1.2s ease-out .7s both}.smoke-three{animation:smoke-three 1.2s ease-out .7s both}@keyframes radar-beep{0%{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(1.7)}}.guess-counter{position:relative;z-index:1;margin:0;color:#cfd3dc;font-size:clamp(.8rem,1.8dvh,.98rem);font-weight:800;text-align:center}.guess-strip{--dynamic-tile-size: clamp( 42px, calc((var(--board-width) - (var(--tile-gap) * var(--tile-gap-count))) / var(--answer-length)), 64px );position:relative;z-index:1;display:grid;width:100%;grid-template-columns:repeat(var(--answer-length),var(--dynamic-tile-size));gap:var(--tile-gap);justify-content:center}.guess-strip .tile{width:var(--dynamic-tile-size);height:var(--dynamic-tile-size)}.hormuz-card .message{position:relative;z-index:1;margin:0}.board-shell{position:relative;width:var(--board-width);min-height:calc((var(--tile-size) * 6) + (var(--tile-gap) * 5));margin:0 auto clamp(8px,1.6dvh,18px)}.board{position:relative;z-index:1;display:grid;gap:var(--tile-gap);width:var(--board-width)}.row{display:grid;grid-template-columns:repeat(5,var(--tile-size));gap:var(--tile-gap)}.tile{display:grid;aspect-ratio:1;border:2px solid #343a46;border-radius:6px;background:#171b22;color:#f8fafc;font-size:clamp(1.2rem,calc(var(--tile-size) * .56),2.8rem);font-weight:900;line-height:1;place-items:center;text-transform:uppercase}.tile.filled{border-color:#596171}.correct{border-color:#538d4e;background:#538d4e}.present{border-color:#b59f3b;background:#b59f3b}.absent{border-color:#3a3a3c;background:#3a3a3c}.answer-reveal{position:relative;z-index:1;display:grid;min-height:calc((var(--tile-size) * 6) + (var(--tile-gap) * 5));align-content:center;justify-items:center;padding:clamp(16px,5dvh,36px) 12px;text-align:center}.answer-reveal p{margin:0 0 10px;color:#bcefc8;font-size:clamp(.85rem,2dvh,1rem);font-weight:900;text-transform:uppercase}.answer-reveal strong{color:#fff;font-size:clamp(2.8rem,calc(var(--board-width) * .22),6rem);font-weight:950;line-height:.9;text-shadow:0 0 26px rgba(127,220,147,.4),0 8px 28px rgba(0,0,0,.4)}.failed-reveal{position:relative;z-index:1;display:grid;min-height:calc((var(--tile-size) * 6) + (var(--tile-gap) * 5));align-content:center;justify-items:center;overflow:hidden;border:2px solid rgba(255,180,169,.28);border-radius:8px;background:linear-gradient(rgba(255,180,169,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,180,169,.13) 1px,transparent 1px),#171b22cc;background-size:var(--tile-size) var(--tile-size);text-align:center}.failed-reveal:before{position:absolute;inset:12%;border-radius:999px;background:#a72f2f3d;content:"";filter:blur(24px)}.failed-reveal strong{position:relative;z-index:2;color:#fff;font-size:clamp(2.4rem,calc(var(--board-width) * .18),5rem);font-weight:950;line-height:.9;text-shadow:0 0 24px rgba(255,80,80,.5),0 8px 28px rgba(0,0,0,.5)}.failure-x{position:absolute;inset:14%;z-index:1}.failure-x:before,.failure-x:after{position:absolute;top:50%;left:50%;width:118%;height:clamp(12px,calc(var(--tile-size) * .18),28px);border-radius:8px;background:#ff5050d1;content:"";transform-origin:center;box-shadow:0 0 28px #ff505057}.failure-x:before{transform:translate(-50%,-50%) rotate(45deg)}.failure-x:after{transform:translate(-50%,-50%) rotate(-45deg)}.keyboard{display:grid;gap:var(--key-gap);width:var(--game-width);padding-bottom:var(--keyboard-bottom-space)}.keyboard-row{display:flex;justify-content:center;gap:var(--key-gap)}.key{min-width:0;height:var(--key-height);flex:1 1 0;max-width:calc((var(--game-width) - (var(--key-gap) * 9)) / 10);padding:0 4px;background:#818895;font-size:clamp(.68rem,calc(var(--key-height) * .32),1rem);text-transform:uppercase}.key:hover{background:#9aa1ac}.key.correct,.key.present,.key.absent{color:#fff}.action-key{max-width:calc((var(--game-width) - (var(--key-gap) * 9)) / 10 * 1.55);font-size:clamp(.58rem,calc(var(--key-height) * .25),.82rem)}@media(max-height:680px){:root{--keyboard-bottom-space: clamp(14px, 3dvh, 28px);--board-width: min(var(--game-width), calc((100dvh - 208px - var(--keyboard-bottom-space)) * .76));--key-height: clamp(28px, calc((100dvh - var(--board-width) - 190px - var(--keyboard-bottom-space)) / 3), 44px)}.eyebrow{display:none}}@keyframes rocket-shake{0%{transform:translate(var(--rocket-start-x),var(--rocket-start-y)) rotate(-42deg)}25%{transform:translate(calc(var(--rocket-start-x) + 2px),calc(var(--rocket-start-y) - 1px)) rotate(-47deg)}50%{transform:translate(calc(var(--rocket-start-x) - 1px),calc(var(--rocket-start-y) + 2px)) rotate(-39deg)}75%{transform:translate(calc(var(--rocket-start-x) + 1px),calc(var(--rocket-start-y) + 1px)) rotate(-45deg)}to{transform:translate(var(--rocket-start-x),var(--rocket-start-y)) rotate(-42deg)}}@keyframes rocket-launch{0%{opacity:1;transform:translate(var(--rocket-start-x),var(--rocket-start-y)) rotate(-42deg) scale(1)}72%{opacity:1;transform:translate(calc(var(--rocket-start-x) * .32 + var(--rocket-end-x) * .68),calc(var(--rocket-start-y) * .32 + var(--rocket-end-y) * .68)) rotate(-122deg) scale(1.08)}to{opacity:0;transform:translate(var(--rocket-end-x),var(--rocket-end-y)) rotate(-138deg) scale(.45)}}@keyframes toll-arrow-pop{0%{opacity:0;transform:scale(.45) translateY(8px)}70%{opacity:1;transform:scale(1.08) translateY(0)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes blast-core{0%{opacity:0;transform:scale(.2)}28%{opacity:1;transform:scale(1.35)}to{opacity:0;transform:scale(.75)}}@keyframes blast-glow{0%{opacity:0;transform:scale(.2)}38%{opacity:1;transform:scale(1.65)}to{opacity:0;transform:scale(2.15)}}@keyframes blast-flame{0%{opacity:0;transform:scale(.25) rotate(-8deg)}26%{opacity:1;transform:scale(1.05) rotate(9deg)}to{opacity:0;transform:scale(.55) rotate(26deg)}}@keyframes smoke-one{0%{opacity:0;transform:translate(0) scale(.3)}35%{opacity:.9}to{opacity:.35;transform:translate(-18px,-30px) scale(1.9)}}@keyframes smoke-two{0%{opacity:0;transform:translate(0) scale(.3)}35%{opacity:.85}to{opacity:.3;transform:translate(20px,-34px) scale(2)}}@keyframes smoke-three{0%{opacity:0;transform:translate(0) scale(.3)}35%{opacity:.8}to{opacity:.28;transform:translate(8px,24px) scale(1.75)}}@media(prefers-reduced-motion:reduce){.blast,.blast-flame,.toll-arrow,.smoke{animation:none}}