@font-face{font-family:"Oswald";src:url(fonts/oswald.woff2) format("woff2");font-weight:200 700;font-display:swap}
:root{--bg:#041330;--bg2:#0a2a55;--panel:rgba(10,36,74,.82);--line:rgba(110,200,255,.22);--ink:#eaf4ff;--mut:#9fb7d6;--cyan:#3fd6ff;--hit:#ff5a36;--ok:#2fd27a;--bad:#ff4d5e;--gold:#ffc93c;--r:16px;
--head:"Oswald","Arial Narrow",Impact,sans-serif;--body:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden}
[hidden]{display:none!important}
.sea-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 700px at 70% -10%,#12407a 0,transparent 60%),radial-gradient(900px 600px at -10% 110%,#0b3b6b 0,transparent 60%),linear-gradient(180deg,#05183a,#03102a)}
.sea-bg::after{content:"";position:absolute;inset:0;opacity:.35;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at 50% 40%,#000 0,transparent 75%);-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0,transparent 75%)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.screen.center{align-items:center;justify-content:center;padding:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(6px)}
h1,h2{font-family:var(--head);font-weight:600;letter-spacing:.02em;margin:0 0 14px}
h2{font-size:24px;text-transform:uppercase;color:#cfe7ff}
.muted{color:var(--mut)}
.big-text{font-size:20px}
.err{color:var(--bad);min-height:1.3em;font-weight:600}
.logo{font-family:var(--head);font-weight:700;font-size:26px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.logo em{font-style:normal;color:var(--cyan)}
.logo .anchor{color:var(--gold)}
.logo.big{font-size:40px;margin-bottom:6px}
.logo.small{font-size:22px}
.btn{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:12px;padding:12px 18px;font-weight:600;font-size:17px;min-height:48px;transition:transform .08s,background .2s}
.btn:hover{background:rgba(255,255,255,.12)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#ffb23c,#ff7a1a);border-color:#ffb23c;color:#1d0e00;box-shadow:0 8px 24px rgba(255,140,30,.35)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent}
.btn.xl{font-family:var(--head);font-size:24px;letter-spacing:.04em;text-transform:uppercase;padding:14px 30px;min-height:64px;border-radius:14px}
.btn.ok{background:linear-gradient(180deg,#36e08a,#1fae62);border-color:#36e08a;color:#022312}
.btn.bad{background:linear-gradient(180deg,#ff6a77,#e23446);border-color:#ff6a77;color:#2b0006}
input[type=text],input[type=password],select,textarea{width:100%;background:rgba(0,10,30,.55);border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:12px 14px;font:inherit;font-size:18px;min-height:50px}
textarea{min-height:230px;resize:vertical;font-family:Consolas,"Cascadia Mono",Menlo,monospace;font-size:15px;line-height:1.5}
select{appearance:auto}
code{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px;font-family:Consolas,Menlo,monospace;color:#bfe9ff}
.hint{color:var(--mut);font-size:15px;line-height:1.5;margin:10px 0 0}
.hint.ok{color:var(--ok);min-height:1.2em;margin-top:4px}
.qstat{font-weight:600;color:#cfe7ff;margin:10px 0}
.qstat .warn{color:var(--gold);font-weight:500}
.field{margin-bottom:18px}
.field>label{display:block;font-weight:600;color:#cfe7ff;margin-bottom:8px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row>input,.row>select{flex:1 1 200px;width:auto}
.center-row{justify-content:center}
/* topbar */
.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;background:rgba(3,14,36,.75);border-bottom:1px solid var(--line);min-height:64px;position:relative;z-index:5}
.tb-right{margin-left:auto;display:flex;gap:6px}
.icon-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;height:52px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:22px;line-height:1}
.icon-btn small{font-size:11px;color:var(--mut);margin-top:3px;font-weight:600;letter-spacing:.03em}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}
.icon-btn.off{opacity:.55}
.turn-banner{flex:1;text-align:center;font-family:var(--head);font-size:26px;letter-spacing:.03em;text-transform:uppercase;font-weight:600;color:#fff}
.turn-banner .tn{color:var(--tc,#fff);text-shadow:0 0 18px var(--tc)}
/* setup */
.setup-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;padding:20px;max-width:1280px;width:100%;margin:0 auto}
.seg{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;width:max-content;max-width:100%}
.seg button{border:0;background:transparent;padding:12px 18px;min-height:50px;font-weight:600;font-size:17px;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--cyan);color:#022036}
.tname{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tname .dot{width:22px;height:22px;flex:none}
.dot{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--tc);box-shadow:0 0 12px var(--tc)}
.switch,.field>label.switch{display:flex;align-items:center;gap:12px;font-weight:600;margin:8px 0;cursor:pointer;color:var(--ink)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .sw{width:52px;height:30px;border-radius:15px;background:rgba(255,255,255,.15);position:relative;flex:none;transition:background .2s}
.switch .sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s}
.switch input:checked+.sw{background:var(--ok)}
.switch input:checked+.sw::after{left:25px}
.switch input:focus-visible+.sw{outline:3px solid var(--gold)}
.setup-actions{display:flex;gap:14px;justify-content:center;padding:0 20px 28px;flex-wrap:wrap}
.gate-card{width:min(460px,100%);text-align:center;display:flex;flex-direction:column;gap:14px}
.gate-card input{text-align:center;font-size:22px}
/* arena & boards */
.arena{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;padding:14px 16px 16px;min-height:0}
.boards{display:flex;gap:22px;justify-content:center;align-items:flex-start}
.panel{flex:1 1 0;min-width:0;max-width:calc(100vh - 210px);background:var(--panel);border:2px solid var(--line);border-radius:var(--r);padding:10px 12px 10px;transition:opacity .3s,border-color .3s,box-shadow .3s}
.boards.n3 .panel,.boards.n4 .panel{max-width:calc(100vh - 230px)}
.panel.target{border-color:var(--hit);box-shadow:0 0 0 2px rgba(255,90,54,.25),0 0 40px rgba(255,90,54,.35)}
.panel.own{opacity:.55}
.panel.out{opacity:.45;filter:grayscale(.6)}
.ph{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-height:34px}
.ph h3{font-family:var(--head);font-size:24px;margin:0;font-weight:600;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tc)}
.ph .tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.1);color:var(--mut);white-space:nowrap}
.panel.target .ph .tag{background:var(--hit);color:#fff}
.stats{margin-left:auto;display:flex;gap:12px;font-size:15px;color:var(--mut);white-space:nowrap}
.stats b{font-family:var(--head);font-size:22px;color:#fff;font-weight:600;margin-right:2px}
.grid{--n:8;position:relative;isolation:isolate;display:grid;width:100%;aspect-ratio:1;grid-template-columns:.55fr repeat(var(--n),1fr);grid-template-rows:.55fr repeat(var(--n),1fr);gap:0}
.lab{display:flex;align-items:center;justify-content:center;font-family:var(--head);color:var(--mut);font-size:clamp(11px,1.4vw,17px)}
.cell{position:relative;border:0;padding:0;margin:0;background:linear-gradient(135deg,#0f4a86,#0b3a6d);box-shadow:inset 0 0 0 .5px rgba(150,215,255,.28);min-width:0;min-height:0;cursor:default}
.cell::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.08),transparent 60%)}
.grid.target .cell:not(.hit):not(.miss){cursor:crosshair}
.grid.target .cell:not(.hit):not(.miss):hover,.grid.target .cell:not(.hit):not(.miss):focus-visible{background:rgba(255,90,54,.35);box-shadow:inset 0 0 0 2px var(--hit);outline:none}
.grid.target .cell:not(.hit):not(.miss):hover::after{content:"";position:absolute;inset:18%;border:2px solid #fff;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,transparent 9%)}
.cell.miss::after{content:"";position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#b9d4ea 60%,#7fa3c2);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.cell.hit{background:radial-gradient(circle,#5a1408 0,#2b0c07 70%)}
.cell.hit::after{content:"";position:absolute;z-index:3;inset:14%;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 70%,#fff4a8 0,#ffc23a 22%,#ff6a1a 48%,rgba(220,30,10,.9) 66%,transparent 72%);animation:flick .5s infinite alternate ease-in-out;filter:drop-shadow(0 0 6px rgba(255,120,30,.9))}
@keyframes flick{from{transform:scale(.9) translateY(2%)}to{transform:scale(1.07) translateY(-3%)}}
.ship{pointer-events:none;z-index:1;padding:3px;display:flex}
.ship svg{width:100%;height:100%;display:block;overflow:visible}
.ship .hl{fill:#8fa6bd;stroke:#22364b;stroke-width:3}
.ship .dk{fill:#b8c9d9}
.ship .st{fill:#647b92;stroke:#2a3f55;stroke-width:2}
.ship .br{fill:#dfe9f2}
.ship .tu{fill:#4b6178}
.ship .bl{stroke:#4b6178;stroke-width:7;stroke-linecap:round}
.ship .rw{fill:#5d6f80}
.ship .ln{stroke:#e6eef5;stroke-width:3;stroke-dasharray:14 10}
.ship.sunk{z-index:4;filter:drop-shadow(0 0 6px rgba(255,70,20,.95)) drop-shadow(0 0 2px #000)}
.ship.sunk .hl{fill:#3b3f46;stroke:#120c0b}
.ship.sunk .dk{fill:#545a62}.ship.sunk .st,.ship.sunk .tu,.ship.sunk .rw{fill:#2b2f35}.ship.sunk .br{fill:#6b7179}.ship.sunk .bl{stroke:#2b2f35}
.ship.ghost{opacity:.55}
.sweep{pointer-events:none;z-index:2;overflow:hidden;position:relative}
.sweep::before{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,rgba(63,214,255,.0) 0deg,rgba(63,214,255,0) 300deg,rgba(63,214,255,.28) 360deg);border-radius:50%;animation:spin 4s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.fleet{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:8px;align-items:center;min-height:26px}
.mini{display:inline-flex;height:24px}
.mini svg{height:100%;width:auto}
.mini .hl{fill:#8fa6bd;stroke:#22364b;stroke-width:4}.mini .dk{fill:#b8c9d9}.mini .st{fill:#647b92}.mini .tu{fill:#4b6178}.mini .bl{stroke:#4b6178;stroke-width:7}.mini .rw{fill:#5d6f80}.mini .ln{display:none}.mini .br{fill:#dfe9f2}
.mini.gone{opacity:.35;position:relative}
.mini.gone::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:3px;background:var(--hit);transform:rotate(-8deg)}
/* fx */
.fx{pointer-events:none;z-index:6;position:relative}
.fx i{position:absolute;left:50%;top:50%;border-radius:50%}
.fx.boom .f1{width:260%;height:260%;margin:-130% 0 0 -130%;background:radial-gradient(circle,#fff 0,#ffe27a 20%,#ff8a1a 45%,rgba(255,60,10,.6) 60%,transparent 70%);animation:flash .7s ease-out forwards}
.fx.boom .f2{width:100%;height:100%;margin:-50% 0 0 -50%;border:4px solid #ffb23c;animation:ring .8s ease-out forwards}
.fx.boom .p{width:16%;height:16%;margin:-8% 0 0 -8%;background:#ffd04a;box-shadow:0 0 8px #ff7a1a;animation:shard .8s ease-out forwards}
.fx.splash .f2{width:100%;height:100%;margin:-50% 0 0 -50%;border:3px solid #cfeaff;animation:ring 1s ease-out forwards}
.fx.splash .f3{width:100%;height:100%;margin:-50% 0 0 -50%;border:2px solid #9fd2ff;animation:ring 1s .18s ease-out forwards;opacity:0}
.fx.splash .p{width:12%;height:12%;margin:-6% 0 0 -6%;background:#e6f6ff;animation:drop .7s ease-out forwards}
@keyframes flash{0%{transform:scale(.2);opacity:1}60%{opacity:1}100%{transform:scale(1.2);opacity:0}}
@keyframes ring{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes shard{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
@keyframes drop{0%{transform:translate(0,0);opacity:1}50%{transform:translate(calc(var(--dx)*.6),calc(var(--dy)*.8 - 120%))}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
/* question layer */
.qlayer{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,10,28,.62);backdrop-filter:blur(4px)}
.qcard{width:min(1040px,100%);max-height:100%;overflow:auto;border:2px solid var(--tc);box-shadow:0 0 60px color-mix(in srgb,var(--tc) 35%,transparent),0 30px 80px rgba(0,0,0,.5);animation:pop .3s ease-out}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.qhead{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.qteam{font-family:var(--head);font-size:26px;text-transform:uppercase;letter-spacing:.04em;color:var(--tc);font-weight:600}
.qnum{margin-left:auto;color:var(--mut);font-weight:600}
.qtext{font-size:clamp(26px,3.6vw,52px);font-weight:700;line-height:1.2;margin:6px 0 22px;text-wrap:balance}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;min-height:78px;border-radius:14px;border:2px solid var(--line);background:rgba(255,255,255,.06);font-size:clamp(20px,2.3vw,32px);font-weight:600;transition:transform .08s,background .2s}
.opt:hover{background:rgba(255,255,255,.12)}
.opt:active{transform:scale(.98)}
.opt .k{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:24px;background:var(--kc);color:#03122a}
.opt:nth-child(1){--kc:#3fd6ff}.opt:nth-child(2){--kc:#ffc93c}.opt:nth-child(3){--kc:#9cff6b}.opt:nth-child(4){--kc:#ff8bd0}.opt:nth-child(5){--kc:#c3a6ff}.opt:nth-child(6){--kc:#ff9a5c}
.opt.right{background:rgba(47,210,122,.25);border-color:var(--ok)}
.opt.wrong{background:rgba(255,77,94,.25);border-color:var(--bad)}
.opt.dim{opacity:.45}
.opts.locked .opt{cursor:default}
.opt.static{cursor:default}
.judge{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.judge .btn{min-width:240px;font-size:30px;min-height:84px}
.qfoot{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}
.qfoot .grow{flex:1}
.reveal{font-size:22px;color:var(--gold);font-weight:700}
.result{display:flex;align-items:center;gap:18px;margin-top:18px;padding:16px 20px;border-radius:14px;flex-wrap:wrap;animation:pop .25s ease-out}
.result.good{background:rgba(47,210,122,.16);border:1px solid var(--ok)}
.result.no{background:rgba(255,77,94,.14);border:1px solid var(--bad)}
.result .rt{font-family:var(--head);font-size:clamp(30px,3.4vw,46px);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.result.good .rt{color:var(--ok)}.result.no .rt{color:var(--bad)}
.result .rs{color:var(--mut);font-size:19px}
.result .btn{margin-left:auto}
.aimhint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:8;background:rgba(255,90,54,.95);color:#fff;font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:20px;padding:8px 22px;border-radius:999px;box-shadow:0 8px 30px rgba(255,90,54,.5);white-space:nowrap;animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.05)}}
.banner{position:fixed;left:50%;top:50%;z-index:60;transform:translate(-50%,-50%);font-family:var(--head);text-transform:uppercase;text-align:center;pointer-events:none;padding:22px 46px;border-radius:18px;background:linear-gradient(180deg,rgba(255,90,54,.96),rgba(190,30,10,.96));box-shadow:0 0 80px rgba(255,80,30,.7);animation:bannerIn 2.2s ease-out forwards}
.banner b{display:block;font-size:clamp(48px,7vw,96px);line-height:1;letter-spacing:.05em}
.banner span{display:block;font-size:clamp(20px,2.4vw,32px);margin-top:8px;letter-spacing:.04em}
.banner.blue{background:linear-gradient(180deg,rgba(40,140,230,.96),rgba(10,70,150,.96));box-shadow:0 0 60px rgba(60,160,255,.6)}
@keyframes bannerIn{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}15%{transform:translate(-50%,-50%) scale(1.1);opacity:1}25%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.03)}}
.toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:55;background:#0b2a55;border:1px solid var(--cyan);padding:10px 20px;border-radius:999px;font-weight:700;font-size:18px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
/* placement */
.place-wrap{display:flex;gap:22px;padding:18px;justify-content:center;align-items:flex-start;flex:1}
.place-board{flex:1 1 0;max-width:calc(100vh - 110px);background:var(--panel);border:2px solid var(--line);border-radius:var(--r);padding:12px}
.place-board .cell{cursor:pointer}
.place-board .cell.pv{background:rgba(63,214,255,.45)}
.place-board .cell.pv.badpv{background:rgba(255,77,94,.45)}
.place-side{width:390px;flex:none}
.place-ships{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
.pship{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:rgba(255,255,255,.04);text-align:left;font-weight:600;font-size:17px}
.pship.sel{border-color:var(--cyan);background:rgba(63,214,255,.14)}
.pship.done{opacity:.55}
.pship .mini{height:20px}
.pship .st2{margin-left:auto;font-size:14px;color:var(--mut);white-space:nowrap}
.cover-card{text-align:center;width:min(640px,100%);display:flex;flex-direction:column;align-items:center;gap:8px}
.cover-card h2{font-size:38px;color:#fff}
.radar{width:140px;height:140px;border-radius:50%;border:2px solid var(--cyan);position:relative;overflow:hidden;margin-bottom:12px;background:radial-gradient(circle,transparent 0 30%,rgba(63,214,255,.25) 31% 32%,transparent 33% 62%,rgba(63,214,255,.25) 63% 64%,transparent 65%),#04213f}
.radar i{position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 290deg,rgba(63,214,255,.55) 360deg);animation:spin2 2.5s linear infinite;border-radius:50%}
@keyframes spin2{to{transform:rotate(360deg)}}
/* win */
.winlayer{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,8,24,.72);backdrop-filter:blur(5px)}
.win-card{width:min(860px,100%);text-align:center;border:2px solid var(--gold);box-shadow:0 0 80px rgba(255,201,60,.35);animation:pop .4s ease-out;max-height:100%;overflow:auto}
.trophy{font-size:84px;line-height:1;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}
.win-card h1{font-size:clamp(44px,6vw,76px);margin:8px 0 4px;color:var(--gold);text-transform:uppercase}
.win-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:18px 0 22px}
.wst{min-width:170px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:2px solid var(--tc)}
.wst h4{margin:0 0 6px;font-family:var(--head);font-size:22px;color:var(--tc);font-weight:600}
.wst div{color:var(--mut);font-size:16px;line-height:1.6}
.wst b{color:#fff}
#confetti{position:fixed;inset:0;z-index:80;pointer-events:none;width:100vw;height:100vh}
.lookbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:30}
/* responsive */
@media (max-width:900px){
 .setup-grid{grid-template-columns:minmax(0,1fr);padding:12px}
 .seg button{padding:12px 14px}
 .boards{flex-direction:column;align-items:stretch;gap:14px}
 .panel,.boards.n3 .panel,.boards.n4 .panel{max-width:none}
 .place-wrap{flex-direction:column;align-items:stretch}
 .place-board{max-width:none}.place-side{width:auto}
 .opts{grid-template-columns:1fr}
 .arena{justify-content:flex-start;padding:10px}
 .qlayer{position:fixed;top:0;align-items:flex-start;overflow:auto}
 .aimhint{position:fixed;bottom:12px;font-size:15px;white-space:normal;text-align:center;width:max-content;max-width:92vw;padding:8px 16px}
 .qteam{font-size:20px;flex:1;min-width:0}
 .qhead .dot{display:none}
 .qnum{margin-left:0;flex-basis:100%}
}
@media (max-width:640px){
 .topbar{flex-wrap:wrap;gap:8px;padding:8px 10px}
 .logo.small .logo-txt{display:none}
 .turn-banner{order:3;flex-basis:100%;font-size:20px}
 .icon-btn{min-width:48px;height:46px;font-size:19px}
 .icon-btn small{font-size:10px}
 .judge .btn{min-width:0;flex:1;font-size:22px;white-space:nowrap;padding:12px}
 .result .btn{margin-left:0;width:100%}
 .stats{gap:8px;font-size:13px}.stats b{font-size:18px}
 .ph h3{font-size:20px}
 .btn.xl{font-size:20px;padding:12px 20px}
}
@media (max-height:760px) and (min-width:901px){
 .topbar{min-height:56px;padding:6px 16px}
 .panel{max-width:calc(100vh - 175px)}
 .boards.n3 .panel,.boards.n4 .panel{max-width:calc(100vh - 190px)}
 .arena{padding:8px 14px 12px}
}

@media (min-width:901px){.aimhint{display:none!important}}
.turn-banner .sub{color:#cfe7ff;font-weight:500}