/* Shit Seas: one canvas sea, DOM screens and HUD over it. */
:root {
  --ink: #1d140b;
  --ink-2: #3a2614;
  --paper: #fbefd2;
  --paper-2: #f0dcae;
  --mustard: #f5b82e;
  --mustard-d: #a86f0c;
  --poo: #7a4b25;
  --poo-d: #3e2512;
  --sea: #2c6e63;
  --red: #e0533d;
  --green: #5fbf4a;
  --green-d: #2f7d27;
  --display: 'Lilita One', 'Arial Black', Impact, sans-serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #1d140b; overscroll-behavior: none; }
body { color: var(--paper); font: 15px/1.4 var(--ui); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
svg { fill: currentColor; }

.ss { position: fixed; inset: 0; overflow: hidden; }
#ss-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ── buttons ─────────────────────────────────────────────── */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 8px 18px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink);
  font: 20px/1 var(--display); letter-spacing: .3px; box-shadow: 0 5px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.ss-btn svg { width: 22px; height: 22px; flex: none; }
.ss-btn:hover { filter: brightness(1.06); }
.ss-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.ss-btn:focus-visible, .ss-chip:focus-visible, .ss-round:focus-visible, .ss-weapon:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ss-btn--go { background: var(--mustard); }
.ss-btn--quit { background: #f3c9b9; }
.ss-btn--big { justify-content: flex-start; width: 100%; min-height: 62px; padding: 8px 16px 8px 10px; text-align: left; }
.ss-btn--big b { display: block; font-size: 24px; font-weight: 400; }
.ss-btn--big small { display: block; margin-top: 3px; font: 600 12px/1.2 var(--ui); opacity: .72; letter-spacing: 0; }
.ss-btn--big svg { width: 40px; height: 40px; padding: 7px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.ss-btn-face { flex: none; width: 42px; height: 42px; border: 3px solid var(--ink); border-radius: 50%; background: var(--face) center/cover #888; }
.ss-live { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); }
.ss-live::before, .ss-live::after { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: #ff5a4a; }
.ss-live::after { animation: ss-ping 1.6s ease-out infinite; }
@keyframes ss-ping { from { transform: scale(1); opacity: .9 } to { transform: scale(2.6); opacity: 0 } }

.ss-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px;
  border: 2px solid #fbefd266; border-radius: 999px; background: #1d140bb3; color: var(--paper);
  font: 700 13px var(--ui); backdrop-filter: blur(4px);
}
.ss-chip svg { width: 17px; height: 17px; }
.ss-chip:hover { border-color: var(--paper); }

.ss-round {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.ss-round svg { width: 22px; height: 22px; }
.ss-round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ss-round[aria-pressed=true] { background: var(--mustard); }

/* ── screens ─────────────────────────────────────────────── */
.ss-screen {
  position: absolute; inset: 0; z-index: 20; display: none; padding: 16px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  overflow-y: auto; overscroll-behavior: contain;
}
.ss-screen.is-on { display: flex; }
.ss-head { display: flex; align-items: center; gap: 14px; width: 100%; }
.ss-head h2 { margin: 0; font: 34px/1 var(--display); color: var(--paper); text-shadow: 0 3px 0 var(--ink), 0 0 18px #0008; }
.ss-head-note { margin-left: auto; font: 700 14px var(--ui); color: var(--paper-2); }

/* title */
.ss-title { align-items: center; justify-content: space-between; gap: 28px; padding-left: max(5vw, calc(16px + var(--safe-l))); padding-right: max(5vw, calc(16px + var(--safe-r))); background: linear-gradient(90deg, #1d140bcc, #1d140b33 46%, #1d140b00 60%, #1d140b8c); }
.ss-title-logo { max-width: 52%; }
.ss-kicker { margin: 0 0 4px; font: 800 13px var(--ui); letter-spacing: 3px; text-transform: uppercase; color: var(--paper-2); }
.ss-logo { margin: 0; font: 400 clamp(64px, 12vw, 150px)/.86 var(--display); letter-spacing: -1px; }
.ss-logo span { display: block; transform-origin: 50% 80%; }
.ss-logo-a { color: var(--mustard); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink), 0 10px 22px #000a; animation: ss-bob 3.6s ease-in-out infinite; }
.ss-logo-b { margin-left: .5em; color: #9ed36b; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink), 0 10px 22px #000a; animation: ss-bob 3.6s -1.8s ease-in-out infinite; }
@keyframes ss-bob { 0%, 100% { transform: rotate(-3deg) translateY(0) } 50% { transform: rotate(2deg) translateY(-6px) } }
.ss-tag { margin: 14px 0 0; max-width: 26em; font: 700 16px/1.35 var(--ui); color: var(--paper); text-shadow: 0 2px 6px #000; }
.ss-title-menu { display: grid; gap: 12px; width: min(340px, 42vw); }
.ss-title-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ss-back { position: absolute; left: calc(14px + var(--safe-l)); bottom: calc(10px + var(--safe-b)); padding: 8px 4px; color: var(--paper-2); font: 700 13px var(--ui); text-decoration: none; text-shadow: 0 1px 4px #000; }
.ss-back:hover { color: #fff; }

/* voyage chart */
.ss-voyage { flex-direction: column; gap: 10px; background: radial-gradient(ellipse at 50% 40%, #1d140b55, #1d140bcc); }
.ss-chart { position: relative; flex: 1 1 auto; min-height: 180px; border: 3px solid var(--ink); border-radius: 18px; background: #e9d3a0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23b8955a' stroke-width='1' opacity='.35'/%3E%3C/svg%3E"); box-shadow: inset 0 0 40px #a87a3a88, 0 6px 0 var(--ink); overflow: hidden; }
.ss-chart svg.ss-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-stop { position: absolute; display: grid; justify-items: center; gap: 2px; width: 92px; margin: -36px 0 0 -46px; padding: 0; border: 0; background: none; color: var(--ink); text-align: center; }
.ss-stop-face { position: relative; width: 56px; height: 56px; border: 3px solid var(--ink); border-radius: 50%; background: var(--face) center/cover #888; box-shadow: 0 4px 0 var(--ink); transition: transform .2s; }
.ss-stop b { font: 14px/1.05 var(--display); }
.ss-stop small { font: 700 10px/1.1 var(--ui); opacity: .7; }
.ss-stop.is-done .ss-stop-face { filter: grayscale(1) brightness(.85); }
.ss-stop.is-done .ss-stop-face::after { content: ''; position: absolute; inset: -6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23c62f1f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.ss-stop.is-next .ss-stop-face { transform: scale(1.18); animation: ss-pulse 1.4s ease-in-out infinite; }
.ss-stop.is-locked { opacity: .55; }
.ss-stop.is-locked .ss-stop-face { filter: blur(2px) grayscale(.6); }
@keyframes ss-pulse { 0%, 100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 0 #f5b82eaa } 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 12px #f5b82e00 } }
.ss-boat { position: absolute; width: 46px; height: 46px; margin: -62px 0 0 -23px; border: 3px solid var(--ink); border-radius: 50%; background: url(/TomGames/tombirds/img/face-tom.webp) center/cover; box-shadow: 0 3px 0 var(--ink); transition: left 1.1s cubic-bezier(.5, 0, .3, 1), top 1.1s cubic-bezier(.5, 0, .3, 1); z-index: 2; animation: ss-boat 1.8s ease-in-out infinite; }
@keyframes ss-boat { 50% { transform: translateY(-5px) rotate(4deg) } }
.ss-voyage-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-voyage-foot .ss-btn--go { margin-left: auto; min-width: 170px; font-size: 22px; }
.ss-perks { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-perk-pill { padding: 4px 10px; border-radius: 999px; background: #fbefd2e6; color: var(--ink); font: 800 11px var(--ui); }

/* perk pick */
.ss-perk { flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #1d140bd9; text-align: center; }
.ss-perk h2 { margin: 0; font: 40px/1 var(--display); color: var(--mustard); text-shadow: 0 4px 0 var(--ink); }
.ss-perk-sub { margin: 0 0 10px; color: var(--paper-2); font-weight: 700; }
.ss-perk-cards { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ss-perk-card {
  display: grid; justify-items: center; align-content: start; gap: 8px; width: 190px; min-height: 210px; padding: 16px 14px;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 6px 0 var(--ink);
  animation: ss-card-in .5s cubic-bezier(.2, 1.5, .4, 1) backwards; transition: transform .15s;
}
.ss-perk-card:nth-child(2) { animation-delay: .1s; }
.ss-perk-card:nth-child(3) { animation-delay: .2s; }
.ss-perk-card:hover { transform: translateY(-6px) rotate(-1deg); }
.ss-perk-card img, .ss-perk-card .ss-perk-icon { width: 74px; height: 74px; object-fit: contain; }
.ss-perk-card b { font: 21px/1.05 var(--display); }
.ss-perk-card span { font: 600 13px/1.35 var(--ui); opacity: .8; }
@keyframes ss-card-in { from { transform: translateY(80px) rotate(8deg) scale(.6); opacity: 0 } }

/* crew pick */
.ss-crew { flex-direction: column; gap: 14px; background: #1d140bc4; }
.ss-crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; width: 100%; max-width: 980px; margin: auto; }
.ss-crew-card {
  display: grid; justify-items: center; gap: 8px; padding: 14px 10px 12px; border: 3px solid var(--ink); border-radius: 18px;
  background: var(--paper); color: var(--ink); box-shadow: 0 6px 0 var(--ink); text-align: center; transition: transform .15s;
}
.ss-crew-card:hover { transform: translateY(-4px); }
.ss-crew-card[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.ss-crew-faces { display: flex; }
.ss-crew-faces i { width: 50px; height: 50px; margin: 0 -7px; border: 3px solid var(--ink); border-radius: 50%; background: var(--face) center/cover #888; }
.ss-crew-faces i:nth-child(2) { position: relative; z-index: 1; transform: translateY(-6px) scale(1.12); }
.ss-crew-card b { font: 21px/1 var(--display); color: var(--team); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.ss-crew-card small { font: 700 11px/1.25 var(--ui); opacity: .72; }

/* online */
.ss-online { flex-direction: column; gap: 12px; background: #1d140bcc; }
.ss-online-body { display: grid; gap: 12px; width: min(420px, 100%); margin: auto; }
.ss-field { display: grid; gap: 4px; font: 800 12px var(--ui); letter-spacing: 1px; text-transform: uppercase; color: var(--paper-2); }
.ss-field input, .ss-join input {
  width: 100%; min-height: 46px; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink);
  font: 700 17px var(--ui); letter-spacing: 0; text-transform: none; -webkit-user-select: text; user-select: text;
}
.ss-join { display: flex; gap: 10px; }
.ss-join input { flex: 1; font: 24px var(--display); letter-spacing: 6px; text-transform: uppercase; text-align: center; }
.ss-online-note { margin: 0; color: var(--paper-2); font-size: 12px; text-align: center; }
.ss-online-note.is-error { color: #ffb4a3; font-weight: 700; }

/* waiting */
.ss-wait { align-items: center; justify-content: center; background: #1d140bcc; }
.ss-wait-card { display: grid; justify-items: center; gap: 10px; width: min(420px, 100%); text-align: center; }
.ss-wait-card h2 { margin: 0; font: 32px/1.05 var(--display); color: var(--mustard); text-shadow: 0 3px 0 var(--ink); }
.ss-wait-card p { margin: 0; color: var(--paper-2); font-weight: 700; }
.ss-wait-raft { display: flex; gap: 4px; padding: 6px; animation: ss-boat 1.6s ease-in-out infinite; }
.ss-wait-raft i { width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 50%; background: radial-gradient(circle, #e2b06c 0 30%, #b9803e 31% 45%, #e2b06c 46% 60%, #7a4b25 61%); }
.ss-code { display: grid; justify-items: center; gap: 6px; padding: 12px 18px; border: 3px dashed var(--paper-2); border-radius: 16px; }
.ss-code span { font: 800 11px var(--ui); letter-spacing: 2px; text-transform: uppercase; color: var(--paper-2); }
.ss-code b { font: 54px/1 var(--display); letter-spacing: 10px; color: #fff; }

/* versus */
.ss-vs { align-items: center; justify-content: center; gap: 4vw; background: radial-gradient(circle at 50% 50%, #f5b82e55, #1d140be6 60%); overflow: hidden; }
.ss-vs-side { display: grid; justify-items: center; gap: 6px; text-align: center; }
.ss-vs-side--l { animation: ss-vs-l .55s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.ss-vs-side--r { animation: ss-vs-r .55s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.ss-vs-faces { display: flex; align-items: flex-end; }
.ss-vs-faces i { width: 74px; height: 74px; margin: 0 -10px; border: 4px solid var(--ink); border-radius: 50%; background: var(--face) center/cover #888; box-shadow: 0 5px 0 var(--ink); }
.ss-vs-faces i:first-child { position: relative; z-index: 1; order: 2; width: 116px; height: 116px; }
.ss-vs-faces i:nth-child(2) { order: 1; }
.ss-vs-faces i:nth-child(n+3) { order: 3; }
.ss-vs-side b { font: 34px/1 var(--display); color: var(--team); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.ss-vs-side small { font: 800 13px var(--ui); color: var(--paper-2); letter-spacing: 1px; text-transform: uppercase; }
.ss-vs-mark { font: 96px/1 var(--display); color: var(--red); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); animation: ss-slam .5s .45s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.ss-vs-place { position: absolute; left: 0; right: 0; bottom: calc(18px + var(--safe-b)); margin: 0; text-align: center; font: 22px var(--display); color: var(--paper); text-shadow: 0 3px 0 var(--ink); animation: ss-fade .4s .9s backwards; }
.ss-vs-place small { display: block; margin: 6px auto 0; padding: 0 16px; max-width: 640px; font: 600 16px/1.35 var(--ui); color: var(--mustard); text-shadow: 0 2px 0 var(--ink); }
@keyframes ss-vs-l { from { transform: translateX(-60vw) rotate(-14deg) } }
@keyframes ss-vs-r { from { transform: translateX(60vw) rotate(14deg) } }
@keyframes ss-slam { from { transform: scale(5) rotate(-20deg); opacity: 0 } }
@keyframes ss-fade { from { opacity: 0; transform: translateY(10px) } }

/* panels */
.ss-pause, .ss-help, .ss-result { align-items: center; justify-content: center; background: #1d140b99; backdrop-filter: blur(3px); }
.ss-panel {
  display: grid; gap: 10px; width: min(340px, 100%); margin: auto; padding: 20px; border: 4px solid var(--ink); border-radius: 22px;
  background: var(--paper); color: var(--ink); box-shadow: 0 8px 0 var(--ink), 0 20px 50px #000a; text-align: center;
  animation: ss-pop .38s cubic-bezier(.2, 1.5, .4, 1) backwards;
}
.ss-panel h2 { margin: 0 0 4px; font: 38px/1 var(--display); }
.ss-panel--wide { width: min(560px, 100%); }
.ss-panel--result { width: min(470px, 100%); }
@keyframes ss-pop { from { transform: scale(.6) translateY(30px); opacity: 0 } }
.ss-help-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; font-size: 14px; }
.ss-help-list b { display: inline-block; min-width: 92px; font: 17px var(--display); }
.ss-res-kicker { margin: 0; font: 800 12px var(--ui); letter-spacing: 2px; text-transform: uppercase; opacity: .65; }
.ss-res-faces { display: flex; justify-content: center; gap: 4px; }
.ss-res-faces i { width: 46px; height: 46px; border: 3px solid var(--ink); border-radius: 50%; background: var(--face) center/cover #888; }
.ss-res-faces i.is-down { filter: grayscale(1); opacity: .6; }
.ss-res-lines { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; margin: 4px 0; font-size: 14px; text-align: left; }
.ss-res-lines dt { opacity: .75; }
.ss-res-lines dd { margin: 0; font-weight: 800; text-align: right; }
.ss-res-lines .is-total { padding-top: 6px; border-top: 2px solid #1d140b33; font: 24px var(--display); opacity: 1; }
.ss-res-rank { min-height: 1.2em; margin: 0; font: 700 13px var(--ui); color: var(--poo); }
.ss-res-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* wipe: a brown wave crosses between screens */
.ss-wipe { position: absolute; inset: 0 -40% 0 auto; z-index: 90; width: 140%; color: #5a3519; pointer-events: none; transform: translateX(100%); }
.ss-wipe svg { width: 100%; height: 100%; display: block; filter: drop-shadow(-12px 0 0 #8a5a2b) drop-shadow(-12px 0 0 #3e2512); }
.ss-wipe.is-in { transition: transform .42s cubic-bezier(.7, 0, .3, 1); transform: translateX(-12%); pointer-events: all; }
.ss-wipe.is-out { transition: transform .42s cubic-bezier(.7, 0, .3, 1); transform: translateX(-120%); }

/* ── HUD ─────────────────────────────────────────────────── */
.ss-hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.ss-hud[hidden] { display: none; }
.ss-hud button { pointer-events: auto; }
.ss-hud-top { position: absolute; top: 8px; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); display: flex; align-items: flex-start; gap: 10px; }
.ss-side { display: flex; gap: 6px; flex: 1 1 0; min-width: 0; }
.ss-side--r { justify-content: flex-end; }
.ss-mate { position: relative; display: grid; justify-items: center; gap: 3px; width: 46px; transition: transform .25s, opacity .3s; }
.ss-mate i { width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 50%; background: var(--face) center/cover #888; box-shadow: 0 0 0 2px var(--team); }
.ss-mate span { position: relative; width: 40px; height: 7px; border: 2px solid var(--ink); border-radius: 4px; background: #00000080; overflow: hidden; }
.ss-mate span::after { content: ''; position: absolute; inset: 0; width: var(--hp, 100%); background: var(--bar, #6fd24f); transition: width .4s; }
.ss-mate.is-turn { transform: translateY(3px) scale(1.14); }
.ss-mate.is-turn i { box-shadow: 0 0 0 3px #fff, 0 0 14px 4px var(--team); }
.ss-mate.is-down { opacity: .45; }
.ss-mate.is-down i { filter: grayscale(1); }
.ss-mate.is-hit i { animation: ss-shake .35s; }
@keyframes ss-shake { 20% { transform: translateX(-4px) rotate(-8deg) } 50% { transform: translateX(4px) rotate(6deg) } 80% { transform: translateX(-2px) } }

.ss-wind { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: center; gap: 0 6px; min-width: 104px; padding: 4px 10px 5px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.ss-wind-label { grid-column: 1 / -1; font: 800 9px var(--ui); letter-spacing: 2px; text-transform: uppercase; opacity: .6; }
.ss-wind-arrows { display: flex; height: 18px; color: var(--sea); }
.ss-wind-arrows svg { width: 13px; height: 18px; margin: 0 -2px; animation: ss-gust 1.2s ease-in-out infinite; }
.ss-wind-arrows svg:nth-child(2) { animation-delay: .12s; }
.ss-wind-arrows svg:nth-child(3) { animation-delay: .24s; }
.ss-wind-arrows svg:nth-child(4) { animation-delay: .36s; }
.ss-wind-arrows svg:nth-child(5) { animation-delay: .48s; }
.ss-wind-arrows.is-left svg { transform: scaleX(-1); }
.ss-wind.is-strong .ss-wind-arrows { color: var(--red); }
@keyframes ss-gust { 50% { opacity: .35 } }
.ss-wind b { font: 22px/1 var(--display); }
.ss-clock { grid-column: 1 / -1; font: 800 11px var(--ui); }
.ss-clock.is-low { color: var(--red); animation: ss-gust .5s infinite; }

.ss-tray { position: absolute; left: 50%; bottom: calc(8px + var(--safe-b)); display: flex; gap: 6px; padding: 6px; border: 3px solid var(--ink); border-radius: 18px; background: #fbefd2f0; box-shadow: 0 4px 0 var(--ink); transform: translateX(-50%); pointer-events: auto; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
.ss-tray.is-away { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.ss-weapon { position: relative; display: grid; place-items: center; width: 50px; height: 50px; padding: 4px; border: 3px solid transparent; border-radius: 13px; background: #fff8; }
.ss-weapon img { width: 34px; height: 34px; object-fit: contain; pointer-events: none; }
.ss-weapon em { position: absolute; right: -5px; top: -7px; min-width: 21px; padding: 1px 5px; border: 2px solid var(--ink); border-radius: 10px; background: var(--mustard); color: var(--ink); font: 13px/1.1 var(--display); font-style: normal; }
.ss-weapon.is-on { border-color: var(--ink); background: var(--mustard); transform: translateY(-4px); box-shadow: 0 4px 0 var(--ink); }
.ss-weapon[disabled] { opacity: .3; cursor: default; }
.ss-weapon .ss-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; padding: 4px 9px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 700 11px var(--ui); white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .15s; }
@media (hover: hover) { .ss-weapon:hover .ss-tip { opacity: 1; } }

.ss-hint { position: absolute; left: 50%; bottom: calc(96px + var(--safe-b)); margin: 0; padding: 6px 14px; border-radius: 999px; background: #1d140bc0; color: var(--paper); font: 700 13px var(--ui); white-space: nowrap; transform: translateX(-50%); transition: opacity .3s; }
.ss-hint:empty { opacity: 0; }

/* turn banner */
.ss-banner { position: absolute; left: 0; right: 0; top: 34%; z-index: 30; pointer-events: none; display: none; }
.ss-banner.is-on { display: block; }
.ss-banner-strip { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 20px; background: linear-gradient(90deg, transparent, var(--team, #f5b82e) 18%, var(--team, #f5b82e) 82%, transparent); border-block: 4px solid var(--ink); animation: ss-strip 1.5s cubic-bezier(.3, 0, .2, 1) forwards; }
.ss-banner-face { width: 64px; height: 64px; border: 4px solid var(--ink); border-radius: 50%; background: var(--face) center/cover #888; box-shadow: 0 4px 0 var(--ink); }
.ss-banner small { display: block; font: 800 12px var(--ui); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.ss-banner b { display: block; font: 40px/1 var(--display); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
@keyframes ss-strip { 0% { transform: translateX(110%) skewX(-12deg) } 22% { transform: translateX(0) skewX(-6deg) } 78% { transform: translateX(0) skewX(-6deg); opacity: 1 } 100% { transform: translateX(-110%) skewX(-12deg); opacity: .4 } }

/* stamps: GAGGED!, OVERBOARD!, … */
.ss-stamp { position: absolute; left: 50%; top: 28%; z-index: 31; pointer-events: none; font: 64px/1 var(--display); color: var(--mustard); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); white-space: nowrap; opacity: 0; transform: translate(-50%, -50%); }
.ss-stamp.is-on { animation: ss-stamp 1.3s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.ss-stamp.is-red { color: #ff7a63; }
.ss-stamp.is-blue { color: #8fd5ff; }
.ss-stamp.is-green { color: #b7f06b; }
@keyframes ss-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(3.2) rotate(-14deg) } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-7deg) } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(-7deg) } 100% { opacity: 0; transform: translate(-50%, -70%) scale(.9) rotate(-7deg) } }

/* ── phones on their side ────────────────────────────────── */
@media (max-height: 500px) {
  .ss-screen { padding-top: 10px; padding-bottom: calc(10px + var(--safe-b)); }
  .ss-btn { min-height: 40px; font-size: 17px; }
  .ss-btn--big { min-height: 52px; }
  .ss-btn--big b { font-size: 20px; }
  .ss-btn--big small { font-size: 11px; }
  .ss-btn--big svg, .ss-live, .ss-btn-face { width: 34px; height: 34px; }
  .ss-live::before, .ss-live::after { inset: 11px; }
  .ss-title-menu { gap: 8px; }
  .ss-logo { font-size: clamp(54px, 15vh, 96px); }
  .ss-tag { margin-top: 8px; font-size: 13px; }
  .ss-kicker { font-size: 11px; }
  .ss-head h2 { font-size: 26px; }
  .ss-round { width: 38px; height: 38px; }
  .ss-round svg { width: 19px; height: 19px; }
  .ss-chip { min-height: 32px; padding: 4px 11px; font-size: 12px; }
  .ss-stop { width: 80px; margin: -30px 0 0 -40px; }
  .ss-stop-face { width: 44px; height: 44px; }
  .ss-stop b { font-size: 12px; }
  .ss-stop small { font-size: 9px; }
  .ss-perk h2 { font-size: 30px; }
  .ss-perk-sub { margin-bottom: 4px; font-size: 13px; }
  .ss-perk-card { width: 170px; min-height: 0; padding: 10px; gap: 4px; }
  .ss-perk-card img, .ss-perk-card .ss-perk-icon { width: 52px; height: 52px; }
  .ss-perk-card b { font-size: 18px; }
  .ss-perk-card span { font-size: 12px; }
  .ss-crew-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .ss-crew-card { padding: 10px 6px; gap: 4px; }
  .ss-crew-faces i { width: 36px; height: 36px; margin: 0 -6px; border-width: 2px; }
  .ss-crew-card b { font-size: 16px; }
  .ss-crew-card small { font-size: 10px; }
  .ss-online-body { gap: 8px; }
  .ss-field input, .ss-join input { min-height: 40px; }
  .ss-vs-faces i { width: 54px; height: 54px; }
  .ss-vs-faces i:first-child { width: 84px; height: 84px; }
  .ss-vs-side b { font-size: 26px; }
  .ss-vs-mark { font-size: 70px; }
  .ss-panel { gap: 7px; padding: 14px 16px; }
  .ss-panel h2 { font-size: 30px; }
  .ss-panel .ss-btn { min-height: 38px; }
  .ss-help-list { gap: 4px; font-size: 12.5px; }
  .ss-help-list b { min-width: 78px; font-size: 15px; }
  .ss-res-lines { font-size: 12.5px; }
  .ss-res-lines .is-total { font-size: 20px; }
  .ss-res-faces i { width: 36px; height: 36px; }
  .ss-hud-top { top: 6px; }
  .ss-mate { width: 38px; }
  .ss-mate i { width: 32px; height: 32px; border-width: 2px; }
  .ss-mate span { width: 32px; height: 6px; }
  .ss-wind { min-width: 88px; padding: 2px 8px 3px; }
  .ss-wind b { font-size: 18px; }
  .ss-weapon { width: 44px; height: 44px; }
  .ss-weapon img { width: 28px; height: 28px; }
  .ss-hint { bottom: calc(78px + var(--safe-b)); font-size: 12px; }
  .ss-banner-face { width: 48px; height: 48px; }
  .ss-banner b { font-size: 30px; }
  .ss-stamp { font-size: 46px; }
}
@media (max-width: 700px) {
  .ss-title { flex-direction: column; justify-content: center; gap: 14px; text-align: center; }
  .ss-title-logo { max-width: none; }
  .ss-logo-b { margin-left: 0; }
  .ss-title-menu { width: min(340px, 100%); }
  .ss-crew-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-logo span, .ss-boat, .ss-wait-raft, .ss-stop.is-next .ss-stop-face, .ss-wind-arrows svg { animation: none; }
}