.gb-intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:grid;place-content:center;justify-items:center;gap:22px;background:var(--gb-night);color:var(--gb-ink);transition:opacity .35s ease}.gb-intro.out{opacity:0}.gb-intro-mark{position:relative;width:min(42vw,200px)}.gb-intro-mark svg{display:block;width:100%;height:auto}.gb-intro-ghost{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0}.gb-intro-ghost.teal{color:var(--gb-teal)}.gb-intro.run .gb-intro-ghost.teal{animation:gb-ghost-t .9s steps(1,end) both}.gb-intro-ghost.purple{color:var(--gb-purple)}.gb-intro.run .gb-intro-ghost.purple{animation:gb-ghost-p .9s steps(1,end) both}.gb-intro:not(.run) .gb-intro-mark,.gb-intro:not(.run) .gb-intro-tag,.gb-intro:not(.run) .gb-intro-scan{visibility:hidden}.gb-intro.run .gb-intro-main{animation:gb-main .9s steps(1,end) both}.gb-intro-tag{font-family:var(--gb-mono);font-size:12px;letter-spacing:.42em;padding-left:.42em;color:var(--gb-gold)}.gb-intro.run .gb-intro-tag{animation:gb-tag .5s 1s ease-out both}.gb-intro-scan{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px)}.gb-intro.run .gb-intro-scan{animation:gb-scan .9s linear both}@keyframes gb-main{0%{opacity:0}10%{opacity:1;clip-path:inset(10% 0 55% 0);transform:translate(6px)}22%{clip-path:inset(60% 0 8% 0);transform:translate(-8px)}34%{clip-path:inset(0 0 0 0);transform:translate(3px)}46%{clip-path:inset(30% 0 40% 0);transform:translate(-4px)}58%{clip-path:inset(0);transform:none;opacity:.6}70%,to{opacity:1;clip-path:inset(0);transform:none}}@keyframes gb-ghost-t{0%{opacity:0}10%{opacity:.9;transform:translate(-9px,2px);clip-path:inset(0 0 60% 0)}26%{transform:translate(7px,-3px);clip-path:inset(45% 0 10% 0)}42%{transform:translate(-4px);clip-path:inset(20% 0 30% 0)}58%{transform:translate(-3px);clip-path:inset(0)}74%,to{opacity:0}}@keyframes gb-ghost-p{0%{opacity:0}14%{opacity:.9;transform:translate(9px,-2px);clip-path:inset(50% 0 0 0)}30%{transform:translate(-6px,3px);clip-path:inset(5% 0 60% 0)}46%{transform:translate(5px);clip-path:inset(35% 0 20% 0)}62%{transform:translate(3px);clip-path:inset(0)}78%,to{opacity:0}}@keyframes gb-tag{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes gb-scan{0%,70%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.gb-intro *,.gb-intro-main,.gb-intro-ghost{animation-duration:.01s!important;animation-delay:0s!important}}:root{--gb-night: #1f044a;--gb-abyss: #170336;--gb-deep: #280659;--gb-royal: #341671;--gb-violet: #4a2e85;--gb-purple: #8429f5;--gb-purple-d: #6a18d4;--gb-teal: #00ddbd;--gb-teal-d: #06a892;--gb-teal-ink: #06231f;--gb-gold: #fcc060;--gb-gold-ink: #2a1c00;--gb-coral: #ff6b82;--gb-ink: #ffffff;--gb-ink-2: #c8c4db;--gb-ink-3: #a1a1c2;--gb-ink-4: #6b5fa0;--gb-line: rgba(185, 169, 230, .16);--gb-line-strong: rgba(185, 169, 230, .35);--gb-font: "Montserrat", "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--gb-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace}:root{--abyss: var(--gb-abyss);--deep: var(--gb-night);--panel: rgba(40, 6, 89, .8);--panel-solid: var(--gb-deep);--panel-2: var(--gb-royal);--line: var(--gb-line);--line-strong: var(--gb-line-strong);--text: var(--gb-ink);--muted: var(--gb-ink-3);--accent: var(--gb-teal);--accent-2: var(--gb-purple);--accent-ink: var(--gb-teal-ink);--fire: #ff8a4c;--hit: var(--gb-coral);--good: var(--gb-teal);--warn: var(--gb-gold);--radius: 18px;--display: var(--gb-font);--body: var(--gb-font);--mono: var(--gb-mono);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--text);font-family:var(--body);background:radial-gradient(1200px 600px at 80% -10%,rgba(132,41,245,.18),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(0,221,189,.1),transparent 60%),linear-gradient(180deg,var(--deep),var(--abyss));background-attachment:fixed;-webkit-tap-highlight-color:transparent}#app{max-width:1120px;margin:0 auto;padding:12px 16px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;min-height:100dvh}h1,h2,.btn,.tab,.player b,.chip,.prompt{font-family:var(--display);font-weight:800}.round,.stats b{font-family:var(--mono);font-variant-numeric:tabular-nums}h1{margin:0;font-size:clamp(30px,7vw,46px);font-weight:900;line-height:1.02;letter-spacing:-.5px;text-transform:uppercase}h1 span{color:var(--accent);text-shadow:0 0 24px rgba(0,221,189,.45)}h2{margin:0;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:2px}p{margin:0;color:var(--muted);line-height:1.5}.hint{font-size:13px;color:var(--muted)}.center{text-align:center;align-items:center}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.spread{justify-content:space-between}.topbar{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:2px;color:var(--text)}.brand b{color:var(--accent);margin-left:4px}.logo{width:30px;height:28px;color:var(--text)}.brand .sep{width:1px;height:22px;background:var(--line-strong)}.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);display:grid;place-items:center;cursor:pointer}.icon-btn svg{width:22px;height:22px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 40px -24px #000c}input{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line-strong);background:#17033699;color:var(--text);font-size:17px;font-family:var(--display);letter-spacing:1px}input:focus{outline:2px solid var(--accent);outline-offset:1px}.field-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.btn{font-size:16px;font-weight:600;letter-spacing:1px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--text);border-radius:12px;padding:12px 16px;cursor:pointer;transition:transform .08s ease,box-shadow .2s ease}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.35;cursor:default}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);border-color:transparent;box-shadow:0 8px 24px -8px #00ddbdb3}.btn.big{padding:16px;font-size:19px;text-transform:uppercase;letter-spacing:3px}.btn.grow{flex:1}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--hit);color:#fff;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;max-width:calc(100% - 32px);box-shadow:0 12px 30px -10px #ff6b82b3;animation:rise .25s ease-out;z-index:10}.hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;padding:6px 0}.hero p{margin-top:10px;max-width:46ch}.radar{position:relative;width:min(62vw,240px);aspect-ratio:1;margin:0 auto;border-radius:50%;border:2px solid rgba(0,221,189,.4);background:radial-gradient(circle,transparent 32%,rgba(0,221,189,.18) 33%,transparent 34%),radial-gradient(circle,transparent 62%,rgba(0,221,189,.18) 63%,transparent 64%),linear-gradient(#00ddbd24,#00ddbd24) center / 1px 100% no-repeat,linear-gradient(#00ddbd24,#00ddbd24) center / 100% 1px no-repeat,radial-gradient(circle,#341671e6,#170336f2);box-shadow:0 0 60px -10px #00ddbd73,inset 0 0 40px #0009;overflow:hidden}.radar.small{width:120px}.radar-sweep{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(0,221,189,.55),rgba(0,221,189,0) 70deg,transparent 360deg);animation:spin 3s linear infinite}.blip{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--hit);box-shadow:0 0 14px var(--hit);animation:blip 3s ease-out infinite}.blip.d2{animation-delay:1.1s;background:var(--accent);box-shadow:0 0 14px var(--accent)}.blip.d3{animation-delay:2s}.bots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.bot-card{text-align:left;border:1px solid var(--line);background:linear-gradient(160deg,#8429f51f,#17033666);color:var(--text);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .2s,transform .08s}.bot-card:hover{border-color:var(--accent)}.bot-card:active{transform:scale(.97)}.bot-card b{font-family:var(--display);font-size:18px;letter-spacing:1px}.bot-card small{color:var(--muted);font-size:12px}.pips{display:flex;gap:4px}.pips i{width:14px;height:4px;border-radius:2px;background:#a1a1c240}.pips i.on{background:var(--accent);box-shadow:0 0 8px #00ddbd99}.rules .rule{display:flex;gap:12px;align-items:flex-start}.rule-icon{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center}.rule-icon svg{width:22px;height:22px}.rule-icon.fire,.tab.fire.active{color:var(--fire);background:#ff6b3d24}.rule-icon.sonar,.tab.sonar.active{color:var(--accent);background:#00ddbd24}.rule-icon.shift,.tab.shift.active{color:var(--good);background:#00ddbd24}.rules b{color:var(--text)}.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.player{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px}.player b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.5px}.player.them{justify-content:flex-end}.lamp{flex:none;width:10px;height:10px;border-radius:50%;background:#a1a1c24d;transition:all .2s}.player.ready .lamp{background:var(--good);box-shadow:0 0 10px var(--good)}.round{text-align:center;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);min-width:120px}.timer{margin-top:6px;height:5px;border-radius:3px;background:#a1a1c22e;overflow:hidden}.timer>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 10px var(--accent);transition:width .15s linear}.timer>div.low{background:linear-gradient(90deg,#ff4d6d,var(--warn));box-shadow:0 0 10px var(--hit)}.battle{display:grid;gap:14px}.board-wrap{position:relative;border-radius:14px;overflow:hidden;width:100%;max-width:min(100%,calc(100dvh - 230px));margin:0 auto}@media (min-width: 720px){.mine-card .board-wrap{max-width:min(100%,calc(52dvh - 120px))}}.board{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;touch-action:manipulation}.board.enemy{filter:drop-shadow(0 0 18px rgba(132,41,245,.15))}.sweep{position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;background:conic-gradient(from 0deg,rgba(0,221,189,.16),transparent 50deg,transparent 360deg);animation:spin 6s linear infinite;pointer-events:none;mix-blend-mode:screen;z-index:1}.board .grid{stroke:#b9a9e617;stroke-width:.25;fill:none}.board .lbl{font-family:var(--display);font-size:3.4px;fill:var(--muted);text-anchor:middle}.hit-area{fill:transparent;cursor:crosshair;transition:fill .12s}.armed.fire .hit-area:hover{fill:#ff6b3d38}.armed.sonar .hit-area:hover{fill:#00ddbd40}.armed.shift .hit-area{cursor:pointer}.armed.shift .hit-area:hover{fill:#00ddbd33}.sonar-preview{fill:#00ddbd1a;stroke:var(--accent);stroke-width:.5;stroke-dasharray:2 1.4;pointer-events:none}.ship{transition:opacity .2s}.ship.selected path:nth-of-type(2){stroke:var(--accent);stroke-width:.9}.ship.selected{filter:drop-shadow(0 0 3px rgba(0,221,189,.9))}.ship.ghost{opacity:.45;pointer-events:none}.ship.ghost path:nth-of-type(2){stroke:var(--good);stroke-dasharray:1.5 1}.ship.wreck{opacity:.92}.ship-wake{animation:wake 2.4s ease-in-out infinite}.flame-core{transform-box:fill-box;transform-origin:50% 100%;animation:flicker .5s ease-in-out infinite alternate}.flame.small{opacity:.75}.flame.small .flame-core{transform:scale(.75)}.splash.stale{opacity:.32}.sonar-area rect{fill:#00ddbd0f;stroke:var(--accent);stroke-width:.45;stroke-dasharray:2 1.2}.sonar-area.old rect{fill:none;opacity:.35}.sonar-area.stale{opacity:.45}.sonar-area.enemy-ping rect{fill:#fcc0601a;stroke:var(--warn);animation:pulse-stroke 1.4s ease-in-out infinite}.sonar-badge circle{fill:var(--accent);filter:drop-shadow(0 0 2px rgba(0,221,189,.9))}.sonar-area.old .sonar-badge circle{fill:#00ddbd8c}.sonar-badge text{font-family:var(--display);font-size:4.2px;font-weight:700;fill:var(--accent-ink);text-anchor:middle}.reticle circle,.reticle path{fill:none;stroke:var(--fire);stroke-width:.7;stroke-linecap:round}.reticle{animation:lock .9s ease-in-out infinite}.shift-arrow{cursor:pointer}.shift-arrow circle{fill:var(--good);stroke:#06231f99;stroke-width:.4;filter:drop-shadow(0 0 2px rgba(0,221,189,.9));transition:transform .1s}.shift-arrow path{fill:#032a1c;pointer-events:none}.shift-arrow:hover circle{transform:scale(1.12)}.fx *{transform-box:fill-box;transform-origin:center;pointer-events:none}.fx-core{animation:boom .65s ease-out forwards}.fx-ring{fill:none;stroke:var(--warn);stroke-width:.8;animation:ring .7s ease-out forwards}.fx-boom.big .fx-ring{stroke:var(--hit);stroke-width:1.4;animation-duration:1s}.fx-spark{stroke:#ffd88f;stroke-width:.6;stroke-linecap:round;animation:spark .6s ease-out forwards}.fx-ripple{fill:none;stroke:#e6e1ffd9;stroke-width:.6;animation:ring .8s ease-out forwards}.fx-ripple.d2{animation-delay:.18s;opacity:0}.fx-wave{fill:url(#g-sonar);stroke:var(--accent);stroke-width:.5;opacity:0;animation:sonar 1.1s ease-out forwards}.fx-sonar.enemy .fx-wave{stroke:var(--warn)}.fx-wave.d2{animation-delay:.25s}.fx-wave.d3{animation-delay:.5s}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:14px;border:1px solid var(--line);background:#17033673;color:var(--muted);font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .15s}.tab svg{width:24px;height:24px}.tab.active{border-color:currentColor;box-shadow:0 0 18px -6px currentColor}.tab:disabled{opacity:.4;cursor:default}.tab em{position:absolute;top:6px;right:8px;font-style:normal;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;background:#fcc0602e;color:var(--warn)}.prompt{text-align:center;font-size:15px;letter-spacing:1px;color:var(--muted);min-height:22px}.prompt.live{color:var(--text)}.report{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.chip{font-size:13px;letter-spacing:.5px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#17033680;color:var(--muted);animation:rise .3s ease-out}.chip.good{color:var(--good);border-color:#00ddbd66}.chip.bad{color:var(--hit);border-color:#ff6b8273}.chip.info{color:var(--accent);border-color:#00ddbd66}.chip.warn{color:var(--warn);border-color:#fcc06066}.fleet{display:flex;gap:6px;align-items:center}.mini-ship path{fill:var(--accent)}.mini-ship.down path{fill:var(--hit);opacity:.4}.result{text-align:center;align-items:center;padding:26px 16px}.result .emblem svg{width:96px;height:96px;animation:float 3s ease-in-out infinite}.result.win h1{color:#fcc060;text-shadow:0 0 30px rgba(252,192,96,.5)}.result.lose h1{color:var(--hit)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:380px}.stats div{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:12px;background:#17033680;border:1px solid var(--line)}.stats b{font-size:24px}.stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.result .row{width:100%;max-width:380px}@media (max-width: 719px){.mine-card .board-wrap{max-width:78%;margin:0 auto;width:100%}}@media (min-width: 720px){.hero{grid-template-columns:280px 1fr}.radar{width:260px}#app>.card:not(.result),#app>.hero{width:100%}.battle{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"enemy controls" "enemy mine";align-items:start}.enemy-card{grid-area:enemy}.controls{grid-area:controls}.mine-card{grid-area:mine}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blip{0%,to{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.2)}60%{opacity:.3}}@keyframes rise{0%{opacity:0;transform:translateY(6px)}}@keyframes flicker{0%{transform:scale(.92,.88)}to{transform:scale(1.06,1.1)}}@keyframes wake{50%{opacity:.35}}@keyframes boom{0%{transform:scale(.2);opacity:1}60%{transform:scale(1.7);opacity:.9}to{transform:scale(2.1);opacity:0}}@keyframes ring{0%{transform:scale(.15);opacity:1}to{transform:scale(1.2);opacity:0}}@keyframes spark{0%{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}@keyframes sonar{0%{transform:scale(.05);opacity:.9}to{transform:scale(1);opacity:0}}@keyframes pulse-stroke{50%{stroke-opacity:.35}}@keyframes lock{50%{opacity:.45}}@keyframes float{50%{transform:translateY(-6px)}}.identity{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.identity .field-label{flex-basis:100%}.identity>b{font-size:20px;font-weight:800}.rating-chip{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px}.rating-chip b{color:var(--warn);font-variant-numeric:tabular-nums}.rating-delta{display:flex;justify-content:center;gap:28px;margin:4px 0 10px}.rating-delta>div{display:grid;justify-items:center;gap:2px}.rating-delta span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.rating-delta b{font-family:var(--mono);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}.rating-delta b.up{color:var(--good)}.rating-delta b.down{color:var(--hit)}.rating-delta small{font-family:var(--mono);color:var(--muted)}.rating-delta.pending{font-size:13px;color:var(--muted)}