/* Ship Sinker: the harbour (lobby and pages) and the boards (the HUD over the 3D scene).
   It shares the site's dark glass and gold with the clubhouse and the pool room, with a
   little more navy. */
:root {
  --glass: rgba(9, 12, 17, 0.66);
  --line: rgba(220, 232, 255, 0.12);
  --ink: #ecebe6;
  --mute: #a3a7ad;
  --gold: #d9b26b;
  --gold-2: #f1d59a;
  --tile: rgba(11, 14, 20, 0.84);
  --hit: #ff6a3d;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #040506; color-scheme: dark; overflow: hidden; color: var(--ink); font-family: var(--font); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
#hud[hidden] { display: none; }
#hud button, #hud .menu-list, #hud .over, #hud .chat, #hud input { pointer-events: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.gu-nav { background: linear-gradient(180deg, #040506f2, #080a0ecc); border-bottom-color: rgba(217,178,107,0.18); }
.nogl { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink); font-size: 16px; line-height: 1.6; }

/* ================================================================ the harbour (lobby) */
/* the dimming over the scene is on the lobby layer itself, so it is there from the first frame */
#lobby { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at 50% 40%, rgba(4,5,8,0.12), rgba(4,5,8,0.82) 70%), linear-gradient(180deg, rgba(4,5,8,0.55), rgba(4,5,8,0.18) 40%, rgba(4,5,8,0.78)); }
.lobby { min-height: 100%; padding: calc(84px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
.lobby-main { width: min(1040px, 100%); margin: 0 auto; }
.segs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.segs.wrap { flex-wrap: wrap; border-radius: 16px; }
.seg { appearance: none; border: 0; background: transparent; color: var(--ink); padding: 7px 14px; border-radius: 999px; font-size: 13px; text-decoration: none; }
.seg[aria-pressed=true] { background: rgba(217,178,107,0.2); color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(217,178,107,0.55); }
.seg:focus-visible, .go:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.go { appearance: none; display: inline-block; margin-top: 12px; padding: 11px 22px; border-radius: 10px; border: 0; font-size: 15px; font-weight: 600; text-decoration: none;
  color: #1d150a; background: linear-gradient(180deg, #f1d59a, #c99b4f); box-shadow: 0 6px 18px rgba(201,155,79,0.25); }
.go:hover { filter: brightness(1.06); }
.go:disabled { opacity: .55; cursor: progress; }
.go.quiet { background: transparent; color: var(--gold-2); border: 1px solid rgba(217,178,107,0.45); box-shadow: none; }
.go.quiet:hover { background: rgba(217,178,107,0.12); }
.go.small { margin: 0; padding: 7px 14px; font-size: 13px; }
.go.danger { background: linear-gradient(180deg, #f0a58b, #c8553a); color: #1c0905; box-shadow: 0 6px 18px rgba(200,85,58,0.25); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #d6d4cc; margin: 10px 0 2px; line-height: 1.4; }
.check input { margin-top: 2px; accent-color: var(--gold); }
.pulse { animation: pulse 2.4s ease-in-out infinite; color: var(--mute) !important; }
@keyframes pulse { 50% { opacity: .45; } }
@media (max-width: 820px) { .lobby { padding-top: calc(76px + env(safe-area-inset-top, 0px)); } }

/* ================================================================ the harbour's pages */
.ships-page { padding-bottom: 24px; }
.ships-page .chandlery { font: 400 34px/1.1 var(--gu-serif); color: #f6ecd8; margin: 34px 0 6px; }
.shop-section { margin: 0 0 14px; }
.shop-section h2 { font: 400 26px/1.1 var(--gu-serif); color: #f6ecd8; margin: 0 0 4px; }
.shop-section > .fine { margin: 0 0 12px; color: var(--mute); font-size: 13px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.shop-item { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(11,14,20,0.84); border: 1px solid rgba(217,178,107,0.18); }
.shop-item.on { border-color: rgba(217,178,107,0.6); box-shadow: inset 0 0 0 1px rgba(217,178,107,0.25); }
.shop-text strong { display: block; font-size: 15px; color: #f6ecd8; }
.shop-text span { display: block; font-size: 13px; color: var(--mute); line-height: 1.45; margin-top: 2px; }
.shop-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.shop-act small { color: var(--mute); font-size: 12px; }
.shop-act .using { color: var(--gold-2); font-size: 13px; letter-spacing: .06em; }
.shop-act .go:disabled { opacity: .45; cursor: not-allowed; }
.swatch { border-radius: 10px; position: relative; overflow: hidden; }
/* a ship side-on on a strip of sea */
.swatch-fleet { height: 56px; background: linear-gradient(180deg, #0c1a2c 0 62%, #07111d 62%); }
.swatch-fleet .hull { position: absolute; left: 10%; right: 8%; top: 46%; height: 20%; background: linear-gradient(180deg, var(--hull) 0 62%, var(--boot) 62%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 4% 100%); }
.swatch-fleet.dazzle .hull { background: repeating-linear-gradient(115deg, var(--hull) 0 10px, var(--trim) 10px 18px); }
.swatch-fleet .house { position: absolute; left: 36%; width: 24%; top: 28%; height: 18%; background: var(--hull); filter: brightness(1.25); border-top: 3px solid var(--deck); }
.swatch-fleet .gun { position: absolute; left: 66%; width: 16%; top: 40%; height: 3px; background: var(--trim); }
.swatch-sea { height: 56px; border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(ellipse at 35% 30%, var(--shallow), var(--deep)); background-blend-mode: soft-light, soft-light, normal; }
.swatch-pegs { height: 56px; display: flex; align-items: center; justify-content: center; gap: 18px; background: #0b1420; }
.swatch-pegs i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 -3px 4px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.5); }
.swatch-pegs .hit { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), transparent 45%), var(--hit); }
.swatch-pegs .miss { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), transparent 45%), var(--miss); }
.swatch-pegs.glow i { box-shadow: 0 0 12px var(--hit), inset 0 -3px 4px rgba(0,0,0,.3); }
.swatch-pegs.glow .miss { box-shadow: 0 0 12px var(--miss), inset 0 -3px 4px rgba(0,0,0,.3); }
.page-toast { position: fixed; z-index: 7; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  padding: 9px 18px; border-radius: 999px; background: rgba(11,14,20,0.94); border: 1px solid rgba(217,178,107,0.35); color: var(--gold-2); font-size: 14px; transition: opacity .25s, transform .25s; }
.page-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================================================================ at the boards */
.menu-wrap { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); z-index: 4; }
.burger { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 46px; height: 46px; padding: 0 13px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.burger span { display: block; height: 2px; border-radius: 1px; background: var(--ink); }
.burger[aria-expanded=true] { border-color: rgba(217,178,107,0.6); }
.burger.unread::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.menu-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 8px; min-width: 190px; border-radius: 12px; background: rgba(9,11,15,0.95); border: 1px solid var(--line); }
.menu-list button { text-align: left; padding: 11px 14px; border-radius: 9px; border: 0; background: transparent; font-size: 14px; }
.menu-list button:hover, .menu-list button:focus-visible { background: rgba(217,178,107,0.12); outline: 0; }
.menu-list .danger { color: #ffc2ae; }

.score { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 6px; align-items: stretch; z-index: 3; }
.side { min-width: 210px; padding: 8px 12px 9px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, box-shadow .3s; }
.side.turn { border-color: rgba(217,178,107,0.7); box-shadow: 0 0 0 1px rgba(217,178,107,0.25), 0 0 22px rgba(217,178,107,0.15); }
.side .who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.side .who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.side .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.side.turn .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.side .away { color: #f0b39f; font-size: 11px; }
.side .fleet { display: flex; gap: 4px; margin: 6px 0 3px; align-items: center; }
.side .ico { display: block; height: 7px; width: calc(var(--len) * 7px); border-radius: 2px 5px 5px 2px; background: #c7ccd4; position: relative; }
.side.you .ico { background: #9fb4cc; }
.side .ico.sunk { background: rgba(255,106,61,0.25); }
.side .ico.sunk::after { content: ""; position: absolute; left: -2px; right: -2px; top: 3px; height: 1.5px; background: var(--hit); transform: rotate(-8deg); }
.side .acc { font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.clock { align-self: flex-end; padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.clock.mine { color: var(--gold-2); border-color: rgba(217,178,107,0.5); }
.clock.low { color: #ffd0bd; border-color: rgba(220,90,60,0.7); background: rgba(80,20,10,0.6); }

.dock { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3; }
.status { max-width: 100%; padding: 8px 16px; border-radius: 18px;
  font-size: 14px; color: #dcdad3; background: var(--glass); border: 1px solid var(--line); text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.status:empty { display: none; }
.place-bar, .fire-bar { display: flex; gap: 10px; }
.place-bar .go, .fire-bar .go { margin: 0; white-space: nowrap; }
.place-bar .go.quiet { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fire-bar .fire { padding: 13px 28px; font-size: 16px; letter-spacing: .04em; background: linear-gradient(180deg, #ffb48a, #d8562d); color: #210904; box-shadow: 0 8px 24px rgba(216,86,45,0.35); }

.banner { position: absolute; top: 24%; left: 50%; transform: translate(-50%, -8px) scale(.96); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  font: 400 clamp(30px, 6vw, 56px)/1.05 var(--gu-serif); text-align: center; color: #f6ecd8; text-shadow: 0 4px 30px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); max-width: 90vw; }
.banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.banner.hit { color: #ffc49a; }
.banner.sunk { color: #ffb070; letter-spacing: .01em; }
.banner.lost { color: #ff9f8a; }
.banner.miss { color: #cfe3f2; font-size: clamp(24px, 4vw, 38px); }
.toast { position: absolute; top: calc(78px + env(safe-area-inset-top, 0px)); left: 50%; transform: translate(-50%, -8px); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  padding: 9px 16px; border-radius: 999px; background: rgba(9,11,15,0.92); border: 1px solid rgba(217,178,107,0.35); color: var(--gold-2); font-size: 14px; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.coord { position: fixed; left: 0; top: 0; padding: 3px 8px; border-radius: 6px; background: rgba(9,11,15,0.88); border: 1px solid rgba(217,178,107,0.45); color: var(--gold-2); font: 600 13px var(--font); pointer-events: none; }

.over { position: absolute; inset: 0; display: flex; overflow-y: auto; padding: 16px 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.2), rgba(0,0,0,0.6)); z-index: 5; }
.over .card, .handover .card { margin: auto; width: min(520px, calc(100vw - 32px)); padding: 28px 30px 24px; border-radius: 18px; background: rgba(10,13,18,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(217,178,107,0.28); box-shadow: 0 30px 80px rgba(0,0,0,.6); text-align: center; }
.over h2, .handover h2 { font: 400 34px/1.1 var(--gu-serif); margin: 4px 0 10px; color: #f6ecd8; }
.over p, .handover p { color: #d6d4cc; line-height: 1.55; font-size: 15px; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.result.lost .eyebrow { color: #f0a58b; }
.over .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.over .tally { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 6px; }
.over .tally div { padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.over .tally dt { font-size: 11px; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; }
.over .tally dd { margin: 4px 0 0; font-size: 17px; color: #f6ecd8; }
.over .earned { list-style: none; margin: 10px 0 4px; padding: 10px 14px; border-radius: 12px; background: rgba(217,178,107,0.1); border: 1px solid rgba(217,178,107,0.3); color: var(--gold-2); font-size: 14px; }
.over .earned li { margin: 3px 0; }
.over .earned li:first-child { font-weight: 700; font-size: 17px; }
.result .medal { width: 64px; height: 64px; margin: -6px auto 8px; display: grid; place-items: center; border-radius: 50%; font-size: 30px;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #d9a54e 55%, #8a5d1f); color: #2a1a06; box-shadow: 0 6px 24px rgba(217,165,78,0.45), inset 0 -3px 6px rgba(0,0,0,0.3); }
.result.won .medal { animation: medal 1.1s cubic-bezier(.2,1.6,.4,1) both; }
.result.lost .medal { background: radial-gradient(circle at 35% 30%, #c9ced6, #6b7380 55%, #2c3139); color: #10141a; box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
@keyframes medal { from { transform: scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.result.won .card { border-color: rgba(217,178,107,0.6); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(217,178,107,0.18); }
.over .go.big { padding: 13px 26px; font-size: 16px; }
.over .row.links { margin-top: 14px; gap: 18px; }
.over .link { border: 0; background: none; padding: 4px 2px; color: var(--gold-2); font-size: 14px; text-decoration: underline; text-decoration-color: rgba(241,213,154,0.4); text-underline-offset: 3px; }
.over .link:hover { text-decoration-color: currentColor; }
.after-bar { display: flex; gap: 10px; }
.after-bar .go { margin: 0; white-space: nowrap; }
.after-bar .go.quiet { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }
.over.help .card { text-align: left; }
.over.help h3 { margin: 18px 0 6px; font-size: 14px; color: var(--gold-2); letter-spacing: .08em; text-transform: uppercase; }
.over.help ul { margin: 0; padding-left: 18px; color: #d6d4cc; line-height: 1.55; font-size: 14px; }
.over.help .go { display: block; margin: 18px auto 0; }
.over.ask { z-index: 6; }
.handover { position: absolute; inset: 0; display: flex; z-index: 6; pointer-events: auto;
  background: radial-gradient(ellipse at 50% 40%, #0c1626, #030406) #030406; }
.handover .card { background: rgba(14,18,26,0.92); }

.chat { position: absolute; left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(70px + env(safe-area-inset-top, 0px)); width: min(320px, calc(100vw - 24px)); max-height: 44vh; display: flex; flex-direction: column;
  border-radius: 12px; background: rgba(9,11,15,0.92); border: 1px solid var(--line); overflow: hidden; z-index: 4; }
.chat header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--gold-2); }
.chat-close { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--mute); }
.chat-log { list-style: none; margin: 0; padding: 10px 12px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.45; user-select: text; }
.chat-log li { margin: 4px 0; overflow-wrap: anywhere; }
.chat-log b { color: var(--gold-2); font-weight: 600; }
.chat-log li.mine b { color: var(--mute); }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--ink); font: 13px var(--font); }

/* phones: a smaller scoreboard, room for the thumb */
@media (max-width: 640px), (max-height: 520px) {
  .side { min-width: 0; padding: 6px 10px 7px; }
  .side .who { font-size: 13px; }
  .side .who strong { max-width: 110px; }
  .side .ico { height: 6px; width: calc(var(--len) * 5.5px); }
  .side .acc { display: none; }
  .status { font-size: 13px; padding: 7px 13px; }
  .place-bar { gap: 8px; }
  .place-bar .go { padding: 10px 14px; font-size: 14px; }
  .over h2, .handover h2 { font-size: 28px; }
  .over .card, .handover .card { padding: 22px 20px 20px; }
}
@media (max-height: 520px) {
  .score { flex-direction: row; align-items: flex-start; }
  .banner { top: 18%; }
}
/* portrait phones: the two fleets side by side in one row beside the menu button */
@media (max-width: 560px) and (orientation: portrait) {
  .score { left: calc(66px + env(safe-area-inset-left, 0px)); flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .side { flex: 1 1 0; min-width: 0; padding: 6px 9px; }
  .side .who strong { max-width: 100%; }
  .side .ico { height: 5px; width: calc(var(--len) * 4.5px); }
  .side .fleet { gap: 3px; margin: 5px 0 0; }
  .clock { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .toast, .banner, .side { transition: none; } }