/* Same navy + mint look as the explainer page, kept calm: tiers sit close together, misses are quiet dots, mint is for what matters. */
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(/fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:500;font-display:swap;src:url(/fonts/figtree-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url(/fonts/figtree-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme: dark;
  --navy:#001E40; --navy-2:#062a52; --navy-3:#0b3664;
  --mint:#ADECD2; --splash:#8FB4C9; --text:#E6F5EF; --muted:#9DBFBD; --warn:#F2B880; --bad:#F09A9A;
  --line:rgba(173,236,210,.15);
  --t0:#0a2b51; --t1:#0d3159; --t2:#123962; --t3:#19446f; --t4:#24547f;
  --f-display:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--navy);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--mint);color:var(--navy)}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
h1,h2,h3{font-family:var(--f-display);text-transform:uppercase;line-height:.95;margin:0;font-weight:900}
p{margin:0}
a{color:var(--mint);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
.loading{padding:40px 20px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* Buttons and fields */
.btn{border:0;border-radius:999px;padding:9px 18px;font-weight:700;cursor:pointer;background:var(--navy-3);color:var(--text);transition:background .15s}
.btn:hover{background:#114479}
.btn.primary{background:var(--mint);color:var(--navy)}
.btn.primary:hover{background:#c4f3df}
.btn.quiet{background:transparent;color:var(--muted);padding:6px 10px}
.btn.quiet:hover{color:var(--text);background:var(--navy-2)}
.btn.danger{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px rgba(240,154,154,.5)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:5px 12px;font-size:.85rem}
input[type=text],input[type=password],input[type=url],input[type=datetime-local],select,textarea{
  width:100%;background:#03284c;border:1px solid var(--line);border-radius:10px;padding:9px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--mint)}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.5}
label{display:grid;gap:6px;font-size:.9rem;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.err{color:var(--bad);font-size:.9rem;min-height:1.2em}
dialog .err:empty{display:none}

/* Login */
.login{min-height:100vh;display:grid;place-content:center;gap:18px;padding:24px 16px;max-width:420px;margin:0 auto}
.login img{width:64px;height:auto}
.login h1{font-size:clamp(3rem,14vw,4.5rem)}
.login h1 span,.top h1 span{color:var(--mint)}
.login form{display:grid;gap:10px;margin-top:6px}

/* Shell */
.shell{max-width:1180px;margin:0 auto;padding:20px 20px 64px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top img{width:36px;height:auto}
.top h1{font-size:1.9rem}
.top .sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--navy-2);font-size:.85rem;font-weight:700}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--mint)}
.status{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;padding:14px 0;border-block:1px solid var(--line)}
.status .phase{font-weight:700;color:var(--mint)}
.status .score{display:flex;gap:22px;margin-left:auto;font-size:.95rem}
.status .score b{font-family:var(--f-display);font-size:1.5rem;margin-right:4px;color:var(--text)}
.banner{padding:12px 16px;border-radius:12px;background:var(--navy-2);font-size:.95rem}
.banner.win{background:rgba(173,236,210,.12);color:var(--mint);font-weight:700}

/* Boards */
.boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
.bcol{display:grid;gap:12px;min-width:0}
.bhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.bhead h2{font-size:1.7rem}
.bhead .muted{font-size:.85rem}
svg.board{display:block;width:100%;height:auto;aspect-ratio:1;overflow:visible;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.board .tile{transition:filter .12s, opacity .2s}
.board .tile[data-t="0"]{fill:var(--t0)} .board .tile[data-t="1"]{fill:var(--t1)} .board .tile[data-t="2"]{fill:var(--t2)}
.board .tile[data-t="3"]{fill:var(--t3)} .board .tile[data-t="4"]{fill:var(--t4)} .board .tile[data-t="x"]{fill:var(--t1)}
.board.click .tile{cursor:pointer}
.board.click .tile:hover{filter:brightness(1.4)}
.board .tile.dim{opacity:.3}
.board .tl{fill:var(--text);opacity:.6;font:700 .24px var(--f-body);text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:opacity .2s}
.board .tl[data-t="4"]{fill:var(--mint);opacity:.9}
.board .tl.dim{opacity:.12}
.board .tile.kfocus{stroke:var(--mint);stroke-width:.06;filter:brightness(1.3)}
svg.board:focus{outline:none}
svg.board:focus-visible{outline:2px solid var(--mint);outline-offset:6px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.board .coord{fill:var(--muted);opacity:.8;font:500 .3px var(--f-body);text-anchor:middle;dominant-baseline:central}
.board .ship,.board .mark,.board .hitbg,.board .miss,.board .pend,.board .sel{pointer-events:none}
.board .fp rect{fill-opacity:.1;stroke-opacity:.3}
.board .wp{filter:url(#bbShadow)}
.board .hitbg{fill:#0a2c55;stroke:rgba(173,236,210,.6);stroke-width:.03}
.board .miss{fill:var(--splash);opacity:.8}
.board .pend{fill:none;stroke:var(--mint);stroke-width:.05;stroke-dasharray:.14 .1;animation:pend 1.6s ease-in-out infinite}
@keyframes pend{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .board .pend{animation:none} *{scroll-behavior:auto !important} }
.board .sel{fill:rgba(173,236,210,.25);stroke:var(--mint);stroke-width:.06}
.board .ghost{opacity:.75}
.board .ghost.bad .fp rect{fill:var(--bad);fill-opacity:.35;stroke:var(--bad);stroke-opacity:.9}
.board .ship.sunk .fp rect{fill-opacity:.2;stroke-opacity:.6}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:.82rem;color:var(--muted)}
.legend > span{display:inline-flex;align-items:center;gap:7px}
.scale{display:flex;gap:2px}
.scale button{width:22px;height:18px;padding:0;border:0;cursor:pointer;font-size:.68rem;font-weight:700;color:var(--muted);transition:color .15s, box-shadow .15s}
.scale button:first-child{border-radius:4px 0 0 4px}
.scale button:last-child{border-radius:0 4px 4px 0}
.scale button:hover,.scale button.on{color:var(--mint);box-shadow:inset 0 0 0 1.5px var(--mint)}
.legend svg{display:block;flex:none}
.legend .scale button{color:var(--text)}
.board .art{pointer-events:none}
.board.pics .tl{stroke:var(--navy);stroke-width:.07;paint-order:stroke;stroke-linejoin:round;opacity:.9}
.board.pics .tl.dim{opacity:.12}
.board .missbg{fill:var(--navy);opacity:.6;pointer-events:none}
.board .art image{transition:opacity .2s}
.board .art image.dim{opacity:.15}
.board .art image{filter:drop-shadow(0 .02px .03px rgba(0,8,20,.7))}

/* Item pictures switch */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--muted);font-size:.82rem;user-select:none}
.legend .switch{margin-left:auto}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .knob{position:relative;width:32px;height:18px;border-radius:999px;background:var(--navy-3);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s}
.switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .2s var(--ease, ease), background .2s}
.switch input:checked + .knob{background:rgba(173,236,210,.25)}
.switch input:checked + .knob::after{transform:translateX(14px);background:var(--mint)}
.switch input:focus-visible + .knob{outline:2px solid var(--mint);outline-offset:2px}
.switch:hover{color:var(--text)}
.tgroup li .pic{width:22px;height:22px;flex:none;align-self:center}
.tgroup li .pic img{display:block;width:22px;height:22px;object-fit:contain}
.ipreview{display:flex;flex-wrap:wrap;gap:6px 14px;min-height:30px;align-items:center}
.ipv{display:inline-flex;align-items:center;gap:6px;font-size:.82rem}
.ipv img{width:26px;height:26px;object-fit:contain}
.ipv.none img{display:none}
.ipv.none::after{content:"no picture for this name";color:var(--warn);font-size:.75rem}
.counts .switch{margin-left:auto}

/* Side panels */
.panel{display:grid;gap:14px;align-content:start}
.panel h2{font-size:1.7rem}
.shiplist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.shiplist button{border:0;background:var(--navy-2);border-radius:10px;padding:8px 10px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;cursor:pointer;transition:background .15s}
.shiplist button:hover{background:var(--navy-3)}
.shiplist button.held{box-shadow:inset 0 0 0 2px var(--mint)}
.shiplist button.placed{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.shiplist svg{width:30px;height:24px}
.shiplist b{font-size:.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shiplist small{font-size:.78rem;color:var(--muted)}
.shiplist .ok{color:var(--mint)}
.checks{display:grid;gap:6px;font-size:.9rem}
.checks .count{display:flex;gap:18px}
.checks .count b.over{color:var(--bad)}
.checks ul{margin:0;padding-left:18px;color:var(--warn)}
[hidden]{display:none !important}
.holdbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:50px;padding:8px 10px;border-radius:12px;background:rgba(173,236,210,.1)}
.holdbar .grow{flex:1;min-width:120px;font-size:.9rem}
.kbd{font-size:.75rem;padding:1px 6px;border-radius:4px;background:var(--navy-3);color:var(--muted)}

.tasks{padding-top:20px;border-top:1px solid var(--line)}
.tasks summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;cursor:pointer;list-style:none}
.tasks summary::-webkit-details-marker{display:none}
.tasks summary h3{font-size:1.3rem}
.tasks summary h3::before{content:"";display:inline-block;width:7px;height:7px;margin:0 12px 3px 2px;border-right:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg);transition:transform .15s}
.tasks[open] summary h3::before{transform:rotate(45deg)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px 32px;margin-top:16px;align-items:start}
.tgroup h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:.95rem}
.tgroup h4 .muted{margin-left:auto;font-weight:500}
.tchip{display:inline-grid;place-items:center;width:22px;height:20px;border-radius:4px;font-size:.72rem;color:var(--text)}
.tgroup ul{list-style:none;margin:0;padding:0;display:grid}
.tgroup li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid rgba(173,236,210,.07);font-size:.88rem}
.tgroup li b{width:30px;flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.tgroup li .grow{flex:1;min-width:0}
.tgroup li:hover{background:rgba(173,236,210,.05)}
.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-top:24px;border-top:1px solid var(--line)}
.info h3{font-size:1.3rem;margin-bottom:10px}
.list{display:grid;gap:2px;font-size:.9rem;max-height:420px;overflow:auto}
.list > div{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(173,236,210,.07)}
.list .t{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums;flex:none;width:44px}
.list .grow{flex:1;min-width:0}
.tag{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--navy-3);color:var(--muted);flex:none}
.tag.hit{background:var(--mint);color:var(--navy)}
.tag.wait{background:rgba(242,184,128,.15);color:var(--warn)}
.tag.no{background:rgba(240,154,154,.12);color:var(--bad)}
.lb{width:100%;border-collapse:collapse;font-size:.9rem}
.lb th{text-align:left;font-weight:500;color:var(--muted);font-size:.8rem;padding:4px 0}
.lb td{padding:5px 0;border-top:1px solid rgba(173,236,210,.07)}
.lb td.n,.lb th.n{text-align:right;font-variant-numeric:tabular-nums}
.empty{color:var(--muted);font-size:.9rem}
.pw{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--navy-2);padding:2px 8px;border-radius:6px;color:var(--mint)}

/* Ref */
.tabs{display:flex;gap:4px;padding:4px;background:var(--navy-2);border-radius:999px;width:max-content;max-width:100%;overflow:auto}
.tabs button{border:0;background:transparent;color:var(--muted);font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--text)}
.tabs button.on{background:rgba(173,236,210,.12);color:var(--mint)}
.tabs .count{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--warn);color:var(--navy);font-size:.75rem}
.queue{display:grid;gap:10px;max-width:760px}
.qcard{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:var(--navy-2)}
.qcard .head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.qcard .tile{font-family:var(--f-display);font-size:1.5rem}
.qcard .task{font-size:1.05rem;font-weight:700}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
.card{display:grid;gap:14px;padding:18px;border-radius:16px;background:var(--navy-2);align-content:start}
.card h3{font-size:1.3rem}
.form{display:grid;gap:12px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;gap:10px;align-items:center;color:var(--text)}
.pwrow{display:grid;grid-template-columns:150px minmax(0,1fr) auto auto;gap:8px;align-items:center}

/* Ref board editor */
.seg{display:inline-flex;gap:4px;padding:4px;background:var(--navy-2);border-radius:999px;justify-self:start}
.seg button{border:0;background:transparent;color:var(--muted);font-weight:700;padding:7px 16px;border-radius:999px;cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button.on{background:rgba(173,236,210,.12);color:var(--mint)}
.panel h3{font-size:1.5rem}
.rgroup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.rgroup button{display:grid;justify-items:center;gap:2px;border:0;border-radius:10px;padding:8px 2px 7px;background:var(--c);color:var(--muted);font-size:.72rem;cursor:pointer;transition:box-shadow .15s, color .15s}
.rgroup button b{font-size:1.05rem;color:var(--text)}
.rgroup button:hover{color:var(--text)}
.rgroup button.on{box-shadow:inset 0 0 0 2px var(--mint);color:var(--mint)}
.rgroup button.on b{color:var(--mint)}
.counts{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.85rem;font-variant-numeric:tabular-nums}
.counts > span{display:inline-flex;align-items:center;gap:6px}
.warnc{color:var(--warn)}
.savebar{padding-top:6px}
.paste{border-top:1px solid var(--line);padding-top:12px}
.paste summary{cursor:pointer;color:var(--mint);font-weight:700;font-size:.9rem}
.paste[open] summary{margin-bottom:12px}
.paste > *:not(summary){margin-bottom:10px}
svg.board.paint{touch-action:none;cursor:crosshair}
svg.board.paint .tile{cursor:crosshair}

/* Tooltip, toast, dialog */
.tip{position:fixed;z-index:20;max-width:260px;padding:7px 10px 8px;border-radius:9px;background:var(--text);color:var(--navy);pointer-events:none;box-shadow:0 6px 16px rgba(0,8,20,.5);line-height:1.25;font-size:.85rem}
.tip small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#3d6475;margin-bottom:2px}
.tip b{display:block}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;padding:10px 18px;border-radius:999px;background:var(--text);color:var(--navy);font-weight:700;font-size:.9rem;box-shadow:0 8px 24px rgba(0,8,20,.5);max-width:calc(100vw - 32px)}
.toast.bad{background:var(--bad)}
dialog{border:0;border-radius:18px;padding:0;background:var(--navy-2);color:var(--text);width:min(440px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(0,10,25,.7)}
dialog{overscroll-behavior:contain;max-height:calc(100dvh - 32px);overflow:auto}

/* Fingers need bigger targets than a mouse */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn.sm,.btn.quiet{min-height:40px}
  .scale button{width:30px;height:28px}
  .tabs button{padding:11px 16px}
  .shiplist button{min-height:44px}
}
dialog form{display:grid;gap:14px;padding:22px}
dialog h3{font-size:2rem}
dialog .task{font-size:1.1rem;font-weight:700}
dialog .row{justify-content:flex-end;margin-top:4px}

@media (max-width:900px){
  .boards,.grid2{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
  .boards .enemyfirst,.boards .placefirst{order:-1}
  .status .score{margin-left:0}
}
@media (max-width:480px){
  .shell{padding-inline:16px}
  .shiplist button{grid-template-columns:24px minmax(0,1fr);padding:7px 8px;gap:8px}
  .shiplist small{display:none}
  .shiplist button.placed b::after{content:" ✓";color:var(--mint)}
  .pwrow{grid-template-columns:1fr auto auto}
  .pwrow > span{grid-column:1/-1}
  .form .two{grid-template-columns:1fr}
}