main{max-width:560px;margin:auto;padding:16px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
header>a{display:inline-flex;align-items:center;min-height:44px}
.tools{display:flex;gap:8px;align-items:center}
h1{font-size:2.6rem;margin:3px 0 8px}h2{font-size:1.25rem;margin:0 0 10px}
.heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.eyebrow{font-size:.65rem;letter-spacing:.1em;color:var(--lg-muted);font-weight:800}
#setup{max-width:540px;margin:16px auto}
.opts label{display:block;font-weight:800;margin:14px 0 6px}
.opts select{width:100%;min-height:46px;border:1px solid var(--lg-line);border-radius:12px;background:var(--lg-cream);color:var(--lg-ink);padding:8px 10px;font:inherit;font-weight:700}
.opts p{margin:6px 0 0;font-size:.85rem}
#resume-box{margin-top:16px}#resume-info{margin:8px 0 0;font-size:.85rem}
#status{background:var(--lg-pink);border-radius:16px;padding:14px;font-weight:800;min-height:50px}
#result{margin:12px 0;text-align:center}#result h2{font-size:2rem}
.reveal-note{font-size:.9rem;margin:8px 0 14px;min-height:1.4em}.reveal-note.bad{color:var(--lg-bad);font-weight:800}
.board-card{margin:12px 0;padding:14px 8px}
.board-card h2,.board-card>p,.board-card>.lg-row,#placement{padding:0 6px}
#help{line-height:1.5;margin:0 0 10px}
.ships{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ship-chip{min-height:44px;padding:6px 10px;font-size:.85rem}
.ship-chip[aria-pressed=true]{background:var(--lg-pink);border:2px solid var(--lg-rose)}
.ship-chip .pips{letter-spacing:1px;font-size:.7rem}
.grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;margin:10px auto;user-select:none;-webkit-user-select:none}
.c{aspect-ratio:1;min-width:0;padding:0;border:1px solid var(--lg-line);border-radius:4px;background:var(--lg-white);color:var(--lg-ink);font:inherit;font-weight:800;font-size:clamp(11px,3.6vw,18px);line-height:1;display:flex;align-items:center;justify-content:center;position:relative}
.c:disabled{opacity:1}
.c:focus-visible{outline:3px solid var(--lg-rose);outline-offset:1px;z-index:2}
.c.ship{background:var(--lg-pink);border-color:var(--lg-rose);touch-action:none}
.c.sel{box-shadow:inset 0 0 0 3px var(--lg-rose)}
.c.hit{background:var(--lg-rose);color:var(--lg-on-rose);border-color:var(--lg-rose)}
.c.sunk{background:var(--lg-bad);color:var(--lg-cream);border:2px solid var(--lg-ink)}
.c.miss{background:var(--lg-tint-3);color:var(--lg-muted)}
.c.reveal{background:transparent;border:2px dashed var(--lg-p2);color:var(--lg-p2)}
.c.last::after{content:'';position:absolute;inset:1px;border:2px solid var(--lg-leaf);border-radius:3px;pointer-events:none}
.c.pick{box-shadow:inset 0 0 0 3px var(--lg-warn);background:var(--lg-tint-2)}
.c.preview{background:var(--lg-tint-2);box-shadow:inset 0 0 0 2px var(--lg-leaf)}
.c.badpreview{background:var(--lg-tint-1);box-shadow:inset 0 0 0 2px var(--lg-bad)}
#fire-row{margin:6px 0 0}#fire-row .lg-button{flex:1 1 140px}
#aim-info,#last-shot{min-height:1.5em;margin:8px 0 0;line-height:1.4}
.map-card{padding:14px;margin:12px 0}
.overview{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:1px;max-width:240px;margin:auto}
.pixel{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--lg-cream);border:1px solid var(--lg-line);font-size:clamp(8px,2.4vw,13px);font-weight:800;border-radius:2px;color:var(--lg-ink);position:relative}
.pixel.ship{background:var(--lg-pink)}
.pixel.hit{background:var(--lg-rose);color:var(--lg-on-rose)}
.pixel.sunk{background:var(--lg-bad);color:var(--lg-cream)}
.pixel.miss{background:var(--lg-tint-3);color:var(--lg-muted)}
.pixel.last::after{content:'';position:absolute;inset:0;border:2px solid var(--lg-leaf)}
.sunk-line{font-size:.8rem;margin:10px 0 0;line-height:1.5}
.legend{font-size:.8rem;text-align:center;line-height:1.8}
.lg-key{white-space:nowrap;margin:0 4px}
.footnote{font-size:.85rem;color:var(--lg-muted);line-height:1.6}
.lg-row{gap:8px;margin-bottom:10px}.lg-row .lg-button{padding:10px 12px}
#game>.lg-button{margin-bottom:24px}
.cover{position:fixed;inset:0;z-index:60;background:var(--lg-cream);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.cover[hidden]{display:none}
.cover-box{max-width:360px}.cover-icon{font-size:4rem;margin:0 0 8px}.cover-box h2{font-size:1.8rem}.cover-box .lg-button{width:100%;margin-top:18px;min-height:56px;font-size:1.1rem}
#howto ol{padding-left:20px;line-height:1.55}
@media(max-width:420px){main{padding:12px}.map-card{padding:10px}.heading{align-items:flex-start}.heading .lg-chip{white-space:nowrap}h1{font-size:2.2rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.map-card .sunk{font-size:.85rem;margin:8px 0 0}#howto-open{min-width:46px;padding:8px 14px}.c[aria-disabled=true]{cursor:default}
/* ---- sea-chart look: tinted water, coordinate axes, enamel ship cells ---- */
.ocean{display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:16px auto;gap:3px;align-items:stretch}
.ocean>.grid,.ocean>.overview{grid-column:2;grid-row:2;margin:0}
.axis{display:grid;font:800 .68rem/1 'Nunito',system-ui,sans-serif;color:var(--lg-muted);text-align:center;align-items:center;user-select:none}
.axis-x{grid-column:2;grid-row:1;grid-template-columns:repeat(10,minmax(0,1fr))}
.axis-y{grid-column:1;grid-row:2;grid-template-rows:repeat(10,minmax(0,1fr))}
.c{background:color-mix(in srgb,var(--lg-p2) 8%,var(--lg-white));border-color:color-mix(in srgb,var(--lg-p2) 22%,var(--lg-line));transition:background-color .12s}
.c:not([aria-disabled=true]):hover{background:color-mix(in srgb,var(--lg-p2) 22%,var(--lg-white));cursor:crosshair}
.c.ship{background:linear-gradient(180deg,var(--lg-pink),color-mix(in srgb,var(--lg-rose) 18%,var(--lg-pink)))}
.c.miss,.pixel.miss{background:color-mix(in srgb,var(--lg-p2) 22%,var(--lg-white))}
.pixel{background:color-mix(in srgb,var(--lg-p2) 8%,var(--lg-white));border-color:color-mix(in srgb,var(--lg-p2) 22%,var(--lg-line))}
.pixel.ship{background:linear-gradient(180deg,var(--lg-pink),color-mix(in srgb,var(--lg-rose) 18%,var(--lg-pink)))}
.fleet-h{margin:0 0 6px;font-weight:800;font-size:.85rem}.fleet-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fleet-chip{font-size:.75rem;font-weight:800;padding:4px 8px;border-radius:99px;background:var(--lg-pink);color:var(--lg-ink);letter-spacing:.02em}
.fleet-chip.down{background:var(--lg-tint-3);color:var(--lg-muted);text-decoration:line-through}
.shotlog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:.82rem}
.shotlog li{padding:5px 9px;border-radius:9px;background:var(--lg-cream);border:1px solid var(--lg-line)}
.shotlog li.hit{border-color:var(--lg-rose)}.shotlog li.sunk{border-color:var(--lg-bad);font-weight:800}.shotlog li.miss{color:var(--lg-muted)}
.bs-right h2,.bs-center h2{font-size:1.05rem;margin:0 0 8px}
kbd{font:700 .78rem 'Nunito',system-ui,sans-serif;border:1px solid var(--lg-line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:var(--lg-white)}
.keys{font-size:.8rem;line-height:1.7;margin:0}
.lg-button:not(:disabled):hover{border-color:var(--lg-rose)}.lg-button:not(:disabled):active{transform:translateY(1px)}
/* phones and tablets: one column, same order as before (the rails dissolve into the flow) */
@media(max-width:999px){
  .bs-stage{display:flex;flex-direction:column}
  .bs-stage>aside,.bs-stage>.bs-center,.boards{display:contents}
  .heading{order:1}#status{order:2}#result{order:3}#help{order:4}#placement{order:5}.board-card{order:6}#fire-row{order:7}#aim-info{order:8}#last-shot{order:9}#own-card{order:10}
  .bs-right>*{order:11}.bs-right>.footnote{order:12}.bs-right>a{order:13}
  .boards .board-card,.boards .map-card{margin:12px 0}
}
@media(min-width:1000px){
  :root{--lg-topbar:84px;--lg-stage-max:1760px}
  :root:has(.lg-roomchip){--lg-topbar:130px}
  main{max-width:1800px;padding:10px 16px}
  header{min-height:44px}
  .setup-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;max-width:1120px;margin:12px auto 0;align-items:start}
  .setup-wrap #setup,.setup-wrap .lg-lobby{margin:0;max-width:none}
  .lg-lobby>a,.lg-lobby>p.lg-muted{display:none}
  .lg-lobby label{margin-top:12px}
  #game .heading{margin-top:0;flex-direction:column;align-items:flex-start;gap:8px}
  #game h1{font-size:2rem;margin:2px 0 0}
  .bs-stage{--stage-h:calc(100dvh - var(--lg-topbar) - 16px);grid-template-columns:300px minmax(0,1fr) 280px}
  #status{padding:10px 12px;min-height:0;font-size:.95rem}
  .bs-left #result{margin:0;padding:14px}.bs-left #result h2{font-size:1.5rem}
  .bs-left .ships{flex-direction:row}.bs-left .ship-chip{flex:1 1 calc(50% - 6px);justify-content:flex-start;min-height:40px;padding:4px 8px}
  #help{margin:0;font-size:.88rem}
  .boards{display:flex;gap:18px;width:100%;align-items:center;justify-content:center}
  .boards>.lg-card{flex:1 1 0;min-width:0;margin:0;padding:14px 12px}
  .ocean{width:min(100%,calc(var(--stage-h) - 96px));margin:0 auto}
  .placing #own-card{display:none}
  .placing .boards>.board-card{flex:0 1 auto;width:min(100%,calc(var(--stage-h) - 40px))}
  .placing .ocean{width:min(100%,calc(var(--stage-h) - 96px))}
  .map-card .sunk{display:none}
  .overview{max-width:none}.pixel{font-size:clamp(9px,1.4vw,18px)}
  .c{font-size:clamp(11px,1.6vw,22px)}
  .bs-center{overflow:visible}
  .bs-right .legend{text-align:left;font-size:.76rem;margin:0}
  .bs-right .footnote{margin:0;font-size:.78rem}
  .bs-log{min-height:0}
  #fire-row{margin:0}
  #game>.lg-button{margin:0}
}
@media(min-width:1000px) and (max-height:900px){.bs-stage #status{font-size:.9rem}.bs-left .ship-chip{min-height:36px}}
@media(min-width:1000px){
  .lg-rail>*{flex-shrink:0}
  .bs-stage{grid-template-columns:270px minmax(0,1fr) 250px;padding:0;gap:20px}
  .eyebrow{display:none}
  #game .heading{flex-direction:row;align-items:center;flex-wrap:wrap}
  .bs-left .lg-row{gap:6px;margin-bottom:0}.bs-left .lg-row .lg-button{flex:1 1 auto;padding:8px 10px;min-height:40px}
  .bs-left .ships{margin-bottom:8px;gap:5px}.bs-left .ship-chip{flex:1 1 100%;min-height:36px}
  .bs-left{gap:12px}
  #aim-info{display:none}
}
@media(min-width:1000px){
  main{max-width:2000px}:root{--lg-stage-max:1900px}
  .placing #last-shot{display:none}
  .placing .bs-right>section{display:none}
  .bs-left .keys{margin-top:auto}
  #help{font-size:.84rem;line-height:1.4}
}
@media(min-width:1000px){
  .setup-wrap .lg-lobby{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-content:start}
  .lg-lobby>h1,.lg-lobby>.lg-status,.lg-lobby>.lg-invite{grid-column:1/-1}
  .lg-lobby>label,.lg-lobby>.lg-avatars{grid-column:1}
  .lg-lobby>.lg-row{grid-column:2;grid-row:2/4;align-content:start}
  .lg-lobby>.lg-join{grid-column:2;grid-row:4}
  .lg-lobby>.lg-status{justify-self:start}
}