/* SINK OR SHOUT on the shared engine: the inside of a leaky 1950s submarine. Sea-green enamel panels with brass rivets,
   brass and steel controls, an amber order slip, teal water rising over the screen, red alarm light when it gets bad.
   Titan One for the big words, Saira Stencil One for the stencilled control names, Barlow Condensed for reading.
   Scoped to html[data-game="sos"] and .sos (sos-prefixed classes). */
@import url('https://fonts.googleapis.com/css2?family=Titan+One&family=Saira+Stencil+One&family=Barlow+Condensed:wght@500;600;700;800&display=swap');

html[data-game="sos"] {
  --deep: #041619; --deep-2: #0a2a2c; --enamel: #1f5a52; --enamel-d: #123c37; --brass: #d9a441; --brass-l: #fff1b8; --brass-d: #6b4a12;
  --amber: #f2a516; --alarm: #e5432b; --foam: #d9fffa; --teal: #2fb8a6; --ink-dark: #0b1312;
  --stencil: 'Saira Stencil One', 'Impact', sans-serif; --display2: 'Titan One', 'Arial Black', sans-serif; --cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  /* the engine's lobby palette, in sub colours */
  --ink-2: #0c2b2b; --ink-3: #12403d; --paper: #f3e9cc; --paper-2: #e3d2a3; --paper-ink: #0b1312;
  --pink: #e5432b; --pink-deep: #9b2414; --blue: #1f5a52; --blue-deep: #123c37; --yellow: #f2a516; --yellow-deep: #8f5f00;
  --orange: #f2a516; --mint: #2fb8a6; --good: #2fb8a6; --bad: #e5432b;
  --display: 'Titan One', 'Arial Black', sans-serif;
  background: var(--deep);
}
html[data-game="sos"] body { background: url('/sos/art/hull.webp') center / cover no-repeat fixed, var(--deep); }
html[data-game="sos"] .studio { background: transparent; }
html[data-game="sos"] .h1, html[data-game="sos"] .h2, html[data-game="sos"] .h3, html[data-game="sos"] .display { font-family: var(--display2); font-weight: 400; text-transform: none; letter-spacing: .01em; }
html[data-game="sos"] .btn { font-family: var(--cond); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
html[data-game="sos"] .sos-homelogo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
html[data-game="sos"] .sos-homelogo img { width: min(46vw, 230px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); animation: sosBob 4s ease-in-out infinite; }
html[data-game="sos"] .sos-homelogo.tv img { width: min(20vw, 300px); }
html[data-game="sos"] .sos-lobbycard { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
html[data-game="sos"] .sos-lobby-art { width: 96px; grid-row: span 2; animation: sosBob 4s ease-in-out infinite; }
html[data-game="sos"] .sos-lobby-plan { font-weight: 700; margin-top: 4px; }
@keyframes sosBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

/* ---------------------------------------------------------------- the wordmark: SINK or SHOUT, S·O·S under it */
.sos-logo { display: grid; justify-items: center; line-height: .86; font-family: var(--display2); }
.sos-logo span { display: block; }
.sos-l1, .sos-l2 { font-size: clamp(52px, 17vw, 96px); color: var(--brass-l); text-shadow: 0 3px 0 var(--brass-d), 0 6px 0 #2a1b04, 0 0 30px rgba(47, 184, 166, .45); letter-spacing: .02em; }
.sos-l2 { color: var(--amber); }
.sos-or { font: 400 clamp(20px, 6vw, 30px)/1 var(--stencil); color: var(--foam); margin: 2px 0 4px; opacity: .85; }
.sos-sos { font: 400 15px/1 var(--stencil); letter-spacing: .5em; color: var(--teal); margin-top: 10px; animation: sosBlink 2.4s steps(1) infinite; }
@keyframes sosBlink { 0%, 60% { opacity: 1; } 61%, 70% { opacity: .2; } 71% { opacity: 1; } }
.sos-logo.small .sos-l1, .sos-logo.small .sos-l2 { font-size: 34px; } .sos-logo.small .sos-or { font-size: 14px; } .sos-logo.small .sos-sos { display: none; }
.tv .sos-l1, .tv .sos-l2 { font-size: clamp(70px, 8vw, 140px); }

/* ---------------------------------------------------------------- base */
.sos [hidden], .sos-overlay[hidden], .sos-banner[hidden], .sos-dark[hidden], .sos-tvbanner[hidden] { display: none !important; }
.sos { font: 600 17px/1.3 var(--cond); color: var(--foam); -webkit-tap-highlight-color: transparent; }
.sos button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.sos button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.sos h2 { margin: 0; font: 400 34px/1.05 var(--display2); color: var(--brass-l); text-shadow: 0 3px 0 #000; }
.sos p { margin: 0; }
.sos-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.sos-col { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; position: relative; z-index: 1; }
.sos-title { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.sos-titleart { position: absolute; inset: 0; background: url('/sos/art/title.webp') center 70% / cover no-repeat; animation: sosDrift 14s ease-in-out infinite alternate; }
.sos-titleart::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(4, 22, 25, .2), rgba(4, 22, 25, .1) 40%, rgba(4, 22, 25, .75)); }
@keyframes sosDrift { from { transform: scale(1.05) translateY(-1%); } to { transform: scale(1.12) translateY(2%); } }
.sos-tag { font: 700 22px/1.2 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--foam); }
.sos-card { position: relative; width: min(100%, 460px); display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; padding: 22px 18px;
  background: linear-gradient(180deg, #1f5a52, #123c37); border-radius: 22px; border: 3px solid var(--brass); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), 0 24px 60px -18px #000; }
.sos-kicker { font: 400 13px/1 var(--stencil); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); }
.sos-sub { color: #bfe6df; }

/* ---------------------------------------------------------------- the phone: HUD, slip, deck */
.sos-play { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px; background: url('/sos/art/hull.webp') center / cover, var(--deep); }
.sos-hud { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 4px 6px; flex: none; position: relative; z-index: 6; }
.sos-hud-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sos-lv { font: 400 18px/1 var(--display2); color: var(--ink-dark); background: var(--amber); border-radius: 8px; padding: 6px 8px 5px; box-shadow: 0 2px 0 #8f5f00; }
.sos-hud-n { display: grid; line-height: 1.05; min-width: 0; }
.sos-lname { font: 800 15px/1.1 var(--cond); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sos-depth { font: 400 12px/1 var(--stencil); color: #8fd6cb; letter-spacing: .1em; }
.sos-prog { position: relative; height: 18px; border-radius: 9px; background: #06201f; border: 2px solid var(--brass); overflow: hidden; min-width: 60px; }
.sos-prog i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #22a090, #7cf0d6); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.sos-progtxt { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 var(--cond); color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: .06em; }
.sos-wg { display: flex; align-items: center; gap: 4px; font: 800 15px/1 var(--cond); }
.sos-drop { width: 12px; height: 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(#bff, #2fb8a6); display: inline-block; clip-path: polygon(50% 0, 100% 62%, 85% 92%, 50% 100%, 15% 92%, 0 62%); }
.danger .sos-wg { color: #ff8f7c; animation: sosPulse .7s ease-in-out infinite; }
@keyframes sosPulse { 50% { transform: scale(1.12); } }

.sos-slipwrap { position: relative; flex: none; height: clamp(92px, 17vh, 140px); z-index: 7; }
.sos-slip { position: absolute; inset: 0; border-radius: 16px; padding: 10px 14px 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: hidden;
  background: linear-gradient(180deg, #fff6d8, #f0dca0); color: #1b1408; border: 3px solid var(--brass); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), 0 10px 22px -8px #000; }
.sos-slip::before { content: ''; position: absolute; left: 50%; top: -1px; width: 70px; height: 9px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: var(--brass-d); opacity: .5; }
.sos-sliptext { font: 400 clamp(22px, 6.6vw, 32px)/1.05 var(--display2); text-align: center; text-wrap: balance; letter-spacing: .01em; }
.sos-sliptext.dim { font: 700 19px/1.2 var(--cond); color: #6b5a2a; }
.sos-hint { font: 700 14px/1 var(--cond); text-align: center; color: #9b2414; text-transform: uppercase; letter-spacing: .05em; animation: sosBlink 1.6s steps(1) infinite; }
.sos-timer { height: 12px; border-radius: 6px; background: #3b2d0c; overflow: hidden; flex: none; }
.sos-timer i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #f2a516, #ffd36b); }
.sos-slip.hurry { animation: sosHurry .18s linear infinite; }
.sos-slip.hurry .sos-timer i { background: linear-gradient(90deg, #e5432b, #ff8f7c); }
@keyframes sosHurry { 25% { transform: translateX(-2px) rotate(-.4deg); } 75% { transform: translateX(2px) rotate(.4deg); } }
.sos-slip.drop { animation: sosDrop .55s cubic-bezier(.2, 1.5, .45, 1) both; }
@keyframes sosDrop { from { transform: translateY(-120%) rotate(-3deg); } to { transform: none; } }
.sos-slip.ghost { pointer-events: none; z-index: 2; }
.sos-slip.ghost.stamped { animation: sosFlyUp .85s cubic-bezier(.5, 0, .7, .2) forwards; }
.sos-slip.ghost.sunk { animation: sosSinkSlip .85s ease-in forwards; background: linear-gradient(180deg, #a7d6cf, #4a8c84); }
@keyframes sosFlyUp { 0%, 35% { transform: none; } 100% { transform: translateY(-140%) rotate(6deg); opacity: 0; } }
@keyframes sosSinkSlip { to { transform: translateY(160%) rotate(-12deg) scale(.8); opacity: 0; filter: blur(3px); } }
.sos-stamp { position: absolute; left: 50%; top: 50%; font: 400 46px/1 var(--display2); color: #1d8a63; border: 5px solid #1d8a63; border-radius: 12px; padding: 4px 14px; transform: translate(-50%, -50%) rotate(-12deg);
  animation: sosStamp .3s cubic-bezier(.3, 1.8, .5, 1) both; background: rgba(255, 255, 255, .55); }
@keyframes sosStamp { from { transform: translate(-50%, -50%) rotate(-12deg) scale(2.4); opacity: 0; } }
.sos-slip.captain { justify-content: flex-start; background: linear-gradient(180deg, #fff1b8, #e9c46a); }
.sos-slip.listen { background: linear-gradient(180deg, #d6ece8, #a7cfc8); }
.sos-capt { display: flex; align-items: center; gap: 8px; justify-content: center; font: 800 17px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.sos-hat { width: 30px; height: 20px; background: #1b1408; clip-path: polygon(8% 100%, 92% 100%, 100% 70%, 78% 62%, 72% 0, 28% 0, 22% 62%, 0 70%); position: relative; }
.sos-hat::after { content: ''; position: absolute; left: 40%; top: 22%; width: 20%; height: 22%; background: var(--amber); border-radius: 50%; }
.sos-board { display: grid; gap: 3px; overflow: hidden; }
.sos-brow { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: baseline; font: 700 15px/1.1 var(--cond); }
.sos-bname { font-weight: 800; color: #6b4a12; }
.sos-btext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sos-bbar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #3b2d0c; overflow: hidden; }
.sos-bbar i { display: block; height: 100%; transform-origin: left; background: var(--amber); }
.sos-brow.hurry .sos-bbar i { background: var(--alarm); }
.sos-slipwrap:has(.captain) { height: clamp(150px, 30vh, 230px); }

.sos-deck { position: relative; flex: 1; min-height: 0; } /* no stacking context: the hazards sit above the water, the panel below */
.sos-panel { position: absolute; inset: 0; z-index: 3; border-radius: 20px; padding: 10px; background: url('/sos/art/panel.webp') center / cover, var(--enamel);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 40px rgba(0, 0, 0, .45), 0 14px 30px -10px #000; transition: filter .3s; }
.sos-panel.locked .sos-tile { pointer-events: none; }
.sos-panel.grabbed { filter: saturate(.5) brightness(.75); }
.sos-panel.grabbed .sos-tile { pointer-events: none; }
.sos-grid { height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr)); gap: 8px; }
.sos-grid.odd > .sos-tile:last-child { grid-column: 1 / -1; }
.sos-tile { position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; border-radius: 14px; padding: 6px 6px 4px;
  background: linear-gradient(180deg, rgba(10, 40, 37, .55), rgba(5, 25, 23, .7)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 3px 8px rgba(0, 0, 0, .35); }
.sos-rivet { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff1b8, #b5832a 55%, #4a3208); }
.sos-rivet.tl { left: 5px; top: 5px; } .sos-rivet.tr { right: 5px; top: 5px; } .sos-rivet.bl { left: 5px; bottom: 5px; } .sos-rivet.br { right: 5px; bottom: 5px; }
.sos-plate { flex: none; display: grid; place-items: center; min-height: 34px; margin: 0 8px; padding: 3px 6px; border-radius: 6px; background: linear-gradient(180deg, #f3e9cc, #d8c58e); box-shadow: 0 2px 0 #6b5a2a; }
.sos-name { font: 400 clamp(13px, 3.9vw, 18px)/1 var(--stencil); color: #1b1408; text-align: center; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
.sos-name.m-flip { display: inline-block; transform: rotate(180deg); }
.sos-name.m-mirror { display: inline-block; transform: scaleX(-1); }
.sos-ctl { position: relative; flex: 1; min-height: 0; margin-top: 4px; }
.sos-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; overflow: visible; cursor: pointer; }
.sv-lbl { font: 400 11px var(--stencil); fill: #f6e7b8; letter-spacing: .1em; }
.sv-num { font: 700 14px var(--cond); fill: #f6e7b8; }
.t-lever .sv-num { font-size: 18px; } .t-slider .sv-num { font-size: 16px; } .t-dial .sv-num { font-size: 13px; }

/* control motion */
.sos-svg .cap { transform-origin: 50px 50px; transition: transform .07s; }
.t-guard .sos-svg .cap { transform-origin: 50px 64px; }
.sos-svg .cap.down { transform: scale(.9) translateY(2px); filter: brightness(.85); }
.sos-svg .bat { transform-origin: 50px 62px; transition: transform .14s cubic-bezier(.3, 1.7, .5, 1); }
.sos-svg:not(.is-on) .bat { transform: scaleY(-1); }
.sos-svg .lamp { fill: #2a1a14; transition: fill .15s; }
.sos-svg.is-on .lamp { fill: #7cff6b; filter: drop-shadow(0 0 4px #7cff6b); }
.sos-svg .knob.snap { transition: transform .16s cubic-bezier(.3, 1.6, .5, 1); }
.sos-svg .knob.held { filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 220, 120, .6)); }
.sos-svg .cover { transform-origin: 50px 34px; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.sos-svg.open .cover { transform: scaleY(-.35); }
.sos-svg.taut .link { stroke: #fff1b8; }
.sos-tile.spun { animation: sosSpun .4s ease-out; }
@keyframes sosSpun { 30% { box-shadow: 0 0 0 4px #2fb8a6, 0 0 28px #2fb8a6; } }

/* tiles coming and going */
.sos-tile.deal { animation: sosDeal .5s cubic-bezier(.2, 1.4, .45, 1) both; }
@keyframes sosDeal { from { transform: translateY(-40px) rotate(-6deg) scale(.85); opacity: 0; } }
.sos-tile.arrive { animation: sosArrive .7s cubic-bezier(.2, 1.6, .45, 1) both; box-shadow: 0 0 0 3px var(--amber), 0 0 26px rgba(242, 165, 22, .8); }
.sos-tile.arrive::after { content: 'NEW!'; position: absolute; right: -4px; top: -8px; font: 400 13px/1 var(--display2); color: #1b1408; background: var(--amber); padding: 4px 7px; border-radius: 6px; transform: rotate(8deg); }
@keyframes sosArrive { from { transform: translateY(-120%) rotate(18deg) scale(.6); } }
.flyaway { animation: sosFlyAway 1s cubic-bezier(.4, -.3, .7, .4) forwards; pointer-events: none; }
@keyframes sosFlyAway { to { transform: translate(60vw, -90vh) rotate(260deg) scale(.5); opacity: .4; } }
.sos-tile.pulse-good { animation: sosGood .5s ease-out; }
@keyframes sosGood { 0% { box-shadow: 0 0 0 0 #7cf0d6; } 40% { box-shadow: 0 0 0 5px #7cf0d6, 0 0 30px #7cf0d6; } }

/* ---------------------------------------------------------------- hazards on the panel */
.sos-hzlayer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.sos-hzlayer > * { pointer-events: auto; }
.sos-leak { position: absolute; width: 104px; height: 104px; transform: translate(-50%, -50%); display: grid; place-items: center; touch-action: none; animation: sosPop .35s cubic-bezier(.3, 1.8, .5, 1); }
.sos-leak img { width: 74px; height: 74px; filter: drop-shadow(0 4px 6px #000); pointer-events: none; }
.sos-leakring { position: absolute; inset: 0; border-radius: 50%; display: grid; place-content: center; text-align: center; pointer-events: none; }
.sos-leakring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 4px dashed #ffe7a3; animation: sosRing 1.4s linear infinite; }
.sos-leakring b { font: 400 18px/1 var(--display2); color: #fff; text-shadow: 0 2px 0 #000; } .sos-leakring small { font: 700 11px/1 var(--cond); color: #ffe7a3; text-transform: uppercase; }
.sos-leak.held .sos-leakring::before { border: 5px solid #7cf0d6; animation: none; box-shadow: 0 0 24px #7cf0d6; }
.sos-leak.held .sos-leakring b, .sos-leak.held .sos-leakring small { opacity: 0; }
.sos-leak.patched { animation: sosPatched .6s ease-in forwards; }
@keyframes sosRing { to { transform: rotate(360deg); } }
@keyframes sosPop { from { transform: translate(-50%, -50%) scale(0); } }
@keyframes sosPatched { to { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
.sos-kraken { position: absolute; inset: -6px; border-radius: 20px; overflow: hidden; touch-action: none; }
.sos-kraken img { position: absolute; bottom: -12%; height: 105%; filter: drop-shadow(0 8px 14px #000); pointer-events: none; animation: sosTentIn .6s cubic-bezier(.2, 1.3, .4, 1) both, sosWiggle 1.6s ease-in-out .6s infinite; transform-origin: 50% 100%; }
.sos-kraken .t1 { left: -14%; } .sos-kraken .t2 { right: -16%; transform: scaleX(-1); animation-delay: .15s, .8s; } .sos-kraken .t3 { left: 26%; height: 70%; animation-delay: .3s, 1s; }
.sos-kraken.hit img { animation: sosRecoil .25s ease-out; }
.sos-kraken.gone img { animation: sosTentOut .7s ease-in forwards; }
@keyframes sosTentIn { from { transform: translateY(100%) rotate(-10deg); } }
@keyframes sosWiggle { 50% { transform: rotate(5deg) translateY(-2%); } }
@keyframes sosRecoil { 40% { transform: translateY(12%) rotate(-8deg) scale(.95); } }
@keyframes sosTentOut { to { transform: translateY(120%); } }
.sos-krakentxt { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; display: grid; gap: 6px; justify-items: center; pointer-events: none; width: 86%; }
.sos-krakentxt b { font: 400 44px/1 var(--display2); color: #e8b4ff; text-shadow: 0 4px 0 #2b0b3d, 0 0 30px #a24bff; animation: sosPulse .6s ease-in-out infinite; }
.sos-krakentxt span { font: 800 19px/1.1 var(--cond); text-transform: uppercase; background: rgba(0, 0, 0, .6); padding: 6px 10px; border-radius: 8px; }
.sos-pips { display: flex; gap: 5px; } .sos-pips i { width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 2px solid #e8b4ff; } .sos-pips i.on { background: #e8b4ff; }
.sos-dock { position: absolute; inset: 8% 6%; border-radius: 22px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 18px;
  background: linear-gradient(180deg, rgba(18, 60, 55, .97), rgba(6, 30, 28, .97)); border: 4px solid var(--amber); box-shadow: 0 20px 60px #000; animation: sosPop2 .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sosPop2 { from { transform: scale(.6); opacity: 0; } }
.sos-dock > b { font: 400 40px/1 var(--display2); color: var(--amber); text-shadow: 0 3px 0 #000; }
.sos-dock p { font: 700 20px/1.2 var(--cond); } .sos-dock strong { color: #fff; font-size: 24px; }
.sos-dockt { font: 400 18px/1 var(--stencil); color: #8fd6cb; }
.sos-bump { width: 160px; height: 160px; border-radius: 50%; display: grid; place-content: center; text-align: center; touch-action: none; background: radial-gradient(circle at 38% 32%, #ffe7a3, #f2a516 55%, #7a4a00); color: #1b1408;
  box-shadow: 0 8px 0 #5a3600, 0 18px 30px #000; animation: sosBumpBob 1s ease-in-out infinite; }
.sos-bump:active { transform: translateY(6px); box-shadow: 0 2px 0 #5a3600; }
.sos-bump b { font: 400 34px/1 var(--display2); } .sos-bump small { font: 700 12px/1.1 var(--cond); text-transform: uppercase; max-width: 120px; }
@keyframes sosBumpBob { 50% { transform: scale(1.05); } }
.sos-dock.bumped .sos-bump { filter: grayscale(.6); animation: none; }
.sos-dock.bumped > b::after { content: ' · waiting…'; font-size: 20px; }
.sos-dock.gone { animation: sosOut .45s ease-in forwards; }
@keyframes sosOut { to { transform: scale(.8); opacity: 0; } }

/* wrong moves and jams */
.sos-tile.pulse-bad { animation: sosBad .45s ease-out; }
@keyframes sosBad { 0% { box-shadow: 0 0 0 0 #e5432b; } 20% { transform: translateX(-5px) rotate(-1deg); box-shadow: 0 0 0 5px #e5432b, 0 0 26px #e5432b; } 45% { transform: translateX(5px) rotate(1deg); } 70% { transform: translateX(-3px); } }
.sos-panel.jammed { filter: grayscale(.8) brightness(.55); }
.sos-panel.jammed .sos-tile { pointer-events: none; }
.sos-jam { position: absolute; inset: 22% 10%; border-radius: 22px; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; pointer-events: auto;
  background: repeating-linear-gradient(-45deg, rgba(242, 165, 22, .95) 0 18px, rgba(27, 20, 8, .95) 18px 36px); border: 4px solid #1b1408; box-shadow: 0 20px 50px #000; animation: sosJam .35s cubic-bezier(.3, 1.8, .5, 1), sosRattle .15s linear .35s 6; }
.sos-jam b { font: 400 46px/1 var(--display2); color: #fff; text-shadow: 0 4px 0 #000, 0 0 20px #e5432b; background: #1b1408; padding: 6px 14px; border-radius: 10px; }
.sos-jam span { font: 800 20px/1 var(--cond); text-transform: uppercase; color: #1b1408; background: #f2a516; padding: 4px 10px; border-radius: 6px; }
.sos-jam small { font: 400 22px/1 var(--display2); color: #fff; background: #1b1408; padding: 4px 10px; border-radius: 6px; }
.sos-spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff6c0; box-shadow: 0 0 12px 4px #ffd36b; animation: sosSpark .5s steps(2) infinite; }
.sos-spark.s1 { left: 8%; top: 12%; } .sos-spark.s2 { right: 10%; top: 30%; animation-delay: .17s; } .sos-spark.s3 { left: 30%; bottom: 10%; animation-delay: .33s; }
@keyframes sosJam { from { transform: scale(1.6) rotate(-6deg); opacity: 0; } }
@keyframes sosSpark { 50% { opacity: 0; transform: scale(1.8); } }
.sos-bn.jm { background: rgba(27, 20, 8, .95); color: #f2a516; }

/* crew banners: one line over the HUD, so the order and the panel stay readable */
.sos-banner { position: absolute; left: 8px; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 4px); z-index: 8; display: grid; gap: 4px; pointer-events: none; }
.sos-bn { border-radius: 12px; padding: 7px 10px; background: rgba(229, 67, 43, .96); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); animation: sosBanner .35s cubic-bezier(.3, 1.6, .5, 1); }
.sos-bn b { font: 400 17px/1.05 var(--display2); text-align: center; } .sos-bn span { font: 800 16px/1 var(--cond); background: rgba(0, 0, 0, .25); padding: 3px 7px; border-radius: 6px; }
.sos-bn.rattle { background: rgba(242, 165, 22, .97); color: #1b1408; animation: sosBanner .35s cubic-bezier(.3, 1.6, .5, 1), sosRattle .12s linear infinite; }
.sos-bn.kr { background: rgba(122, 44, 170, .96); } .sos-bn.lk { background: rgba(31, 90, 82, .96); }
.sos-tapfast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 12px 26px; border-radius: 999px; background: linear-gradient(180deg, #ffd36b, #f2a516) !important; color: #1b1408 !important; box-shadow: 0 6px 0 #8f5f00, 0 14px 30px #000; touch-action: none; animation: sosPop2 .3s cubic-bezier(.3, 1.6, .5, 1), sosRattle .14s linear infinite; z-index: 3; }
.sos-tapfast b { font: 400 26px/1 var(--display2); } .sos-tapfast small { font: 700 12px/1 var(--cond); text-transform: uppercase; }
@keyframes sosBanner { from { transform: translateY(-30px) scale(.9); opacity: 0; } }
@keyframes sosRattle { 25% { transform: translate(-2px, 1px) rotate(-.6deg); } 75% { transform: translate(2px, -1px) rotate(.6deg); } }

/* lights out: dark everywhere except a torch round the finger */
.sos-dark { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(circle 95px at var(--tx, 50%) var(--ty, 70%), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .25) 60%, rgba(1, 4, 5, .96) 100%); animation: sosFlicker .9s steps(2) 1; }
@keyframes sosFlicker { 0%, 30%, 60% { opacity: 1; } 15%, 45% { opacity: .3; } }

/* the water and the alarm */
.sos-water { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.sos-play.danger::after { content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none; box-shadow: inset 0 0 90px 20px rgba(229, 67, 43, .55); animation: sosAlarm 1.1s ease-in-out infinite; }
@keyframes sosAlarm { 50% { opacity: .25; } }
.sos-play.redflash::before { content: ''; position: absolute; inset: 0; z-index: 11; pointer-events: none; background: rgba(229, 67, 43, .35); animation: sosFlash .5s ease-out forwards; }
@keyframes sosFlash { to { opacity: 0; } }

/* ---------------------------------------------------------------- the cards between dives */
.sos-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(2, 14, 16, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); overflow-y: auto; }
.sos-overlay.brief { background: linear-gradient(rgba(2, 14, 16, .85), rgba(2, 14, 16, .35) 55%, rgba(2, 14, 16, .1)); place-items: start center; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
.sos-overlay.out { animation: sosOverlayOut .4s ease-in forwards; }
@keyframes sosOverlayOut { to { opacity: 0; transform: translateY(-30px); } }
.sos-overlay .sos-card { animation: sosCardIn .5s cubic-bezier(.2, 1.4, .45, 1) both; }
@keyframes sosCardIn { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.sos-depthbig { font: 400 42px/1 var(--display2); color: var(--amber); text-shadow: 0 3px 0 #000; }
.sos-new { display: grid; gap: 8px; text-align: left; }
.sos-hzcard { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; background: rgba(0, 0, 0, .3); border-radius: 12px; padding: 10px; animation: sosCardIn .5s .25s cubic-bezier(.2, 1.4, .45, 1) both; }
.sos-hzcard b { font: 400 19px/1.1 var(--display2); color: var(--brass-l); } .sos-hzcard p { font: 600 16px/1.2 var(--cond); color: #cfeee8; }
.sos-hzi { width: 46px; height: 46px; border-radius: 12px; background: var(--amber) center / 70% no-repeat; display: block; }
.sos-hzi.leak, .sos-hzi.order { background-image: url('/sos/art/hole.webp'); background-size: 90%; background-color: #1f5a52; }
.sos-hzi.kraken { background-image: url('/sos/art/tentacle.webp'); background-color: #3d1655; }
.sos-hzi.rattle { background: repeating-linear-gradient(90deg, #f2a516 0 8px, #1b1408 8px 12px); }
.sos-hzi.loose { background: radial-gradient(circle at 40% 40%, #fff1b8, #b5832a 55%, #4a3208) center / 50% 50% no-repeat, #1f5a52; }
.sos-hzi.dock { background: radial-gradient(circle, #f2a516 0 30%, #1b1408 31% 38%, #f2a516 39%); }
.sos-hzi.captain { background: #1b1408; clip-path: polygon(8% 90%, 92% 90%, 100% 70%, 78% 62%, 72% 10%, 28% 10%, 22% 62%, 0 70%); }
.sos-hzi.lights { background: radial-gradient(circle at 50% 60%, #fff6c0 0 20%, #000 60%); }
.sos-hzi.mirror { background: linear-gradient(90deg, #f3e9cc 50%, #1b1408 50%); }
.sos-cdrow { font: 700 20px/1 var(--cond); text-transform: uppercase; letter-spacing: .06em; color: #cfeee8; }
.sos-cd { font: 400 30px/1 var(--display2); color: var(--amber); }
.sos-bail { display: flex; gap: 8px; align-items: center; justify-content: center; font: 700 18px/1 var(--cond); }
.sos-mvp { font: 700 20px/1.2 var(--cond); } .sos-mvp b { color: var(--amber); }
.sos-per { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sos-per span { background: rgba(0, 0, 0, .3); border-radius: 999px; padding: 5px 11px; font: 700 15px/1 var(--cond); } .sos-per span.me { outline: 2px solid var(--amber); } .sos-per em { color: #ff8f7c; font-style: normal; }
.sos-drink { background: var(--alarm); border-radius: 14px; padding: 12px; display: grid; gap: 4px; animation: sosPulse 1s ease-in-out infinite; }
.sos-drink b { font: 400 24px/1.05 var(--display2); } .sos-drink.me b { font-size: 32px; }
.sos-next { display: grid; gap: 3px; background: rgba(0, 0, 0, .3); border-radius: 12px; padding: 10px; }
.sos-next b { font: 400 21px/1.1 var(--display2); color: var(--brass-l); } .sos-next span { color: var(--amber); font-weight: 800; }
.sos-skip { padding: 15px 18px !important; border-radius: 14px !important; background: linear-gradient(180deg, #ffd36b, #f2a516) !important; color: #1b1408 !important; font: 400 22px/1 var(--display2) !important; box-shadow: 0 5px 0 #8f5f00; }
.sos-skip small { font: 700 15px var(--cond); }
.sos-skip:disabled { filter: grayscale(.7) brightness(.8); }
.sos-ghost { padding: 12px 16px !important; border-radius: 12px !important; border: 2px solid var(--brass) !important; }
.sos-wait { color: #8fd6cb; }
.sos-card.sunk { background: linear-gradient(180deg, #0c2b2b, #02090a); border-color: #5a7f7a; }
.sos-card.sunk h2 { font-size: 64px; color: #ff8f7c; animation: sosPulse 1s ease-in-out infinite; }
.sos-sinksub { display: grid; place-items: center; }
.sos-sinksub img { width: 170px; animation: sosSinking 5s ease-in forwards; filter: drop-shadow(0 10px 18px #000); }
@keyframes sosSinking { to { transform: translateY(140px) rotate(28deg); opacity: .3; filter: blur(2px); } }
.sos-record { background: var(--amber); color: #1b1408; border-radius: 12px; padding: 10px; display: grid; gap: 2px; animation: sosPulse 1s ease-in-out 3; }
.sos-record b { font: 400 24px/1 var(--display2); } .sos-record.old { background: rgba(0, 0, 0, .3); color: #cfeee8; animation: none; }
.sos-awards { display: grid; gap: 8px; }
.sos-award { display: grid; gap: 2px; background: rgba(0, 0, 0, .3); border-radius: 12px; padding: 10px; animation: sosCardIn .5s cubic-bezier(.2, 1.4, .45, 1) both; }
.sos-award b { font: 400 20px/1 var(--display2); color: var(--amber); } .sos-award small { color: #8fd6cb; }
.sos-final .sos-card { gap: 14px; }
.sos-table { width: 100%; border-collapse: collapse; font: 700 17px/1.2 var(--cond); }
.sos-table th { font: 400 12px var(--stencil); color: var(--amber); letter-spacing: .1em; padding: 4px; } .sos-table td { padding: 6px 4px; border-top: 1px solid rgba(255, 255, 255, .12); }
.sos-table td:first-child { text-align: left; } .sos-table tr.me td { color: var(--amber); }
.sos-awardline { display: grid; gap: 4px; } .sos-awardline b { color: var(--amber); }
.sos-btns { display: grid; gap: 10px; }

/* ---------------------------------------------------------------- the TV: a porthole on the sub */
.sos-tvroot { position: absolute; inset: 0; overflow: hidden; background: #041619; }
.sos-sea { position: absolute; inset: 0; width: 100%; height: 100%; }
.sos-port { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 74% at 50% 52%, transparent 0 82%, rgba(0, 0, 0, .55) 92%, #000 100%); }
.sos-tvsub { position: absolute; left: 50%; top: 52%; width: min(44vw, 640px); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); will-change: transform; transition: opacity .5s; }
.sos-tvtent { position: absolute; left: 38%; bottom: -10%; height: 85%; animation: sosTentIn .8s cubic-bezier(.2, 1.3, .4, 1) both, sosWiggle 1.6s ease-in-out .8s infinite; transform-origin: 50% 100%; filter: drop-shadow(0 10px 20px #000); }
.sos-tvtop { position: absolute; left: 3vw; top: 3vh; display: flex; align-items: center; gap: 2vw; }
.sos-tvlvl { display: grid; gap: 4px; font: 700 2.2vw/1 var(--cond); text-transform: uppercase; }
.sos-tvlvl b { font: 400 1.6vw/1 var(--stencil); color: var(--amber); letter-spacing: .2em; } .sos-tvdepth { font: 400 3.4vw/1 var(--display2); color: var(--brass-l); text-shadow: 0 3px 0 #000; }
.sos-gauge { position: absolute; right: 3vw; top: 12vh; bottom: 18vh; width: 6vw; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 6px; }
.sos-gtube { position: relative; width: 3.4vw; border-radius: 2vw; border: .35vw solid var(--brass); background: rgba(0, 0, 0, .5); overflow: hidden; }
.sos-gtube i { position: absolute; inset: 0; transform-origin: bottom; transform: scaleY(0); background: linear-gradient(#7cf0d6, #1f5a52); transition: transform .6s cubic-bezier(.2, 1.3, .4, 1); }
.danger .sos-gtube i { background: linear-gradient(#ff8f7c, #9b2414); animation: sosAlarm 1s ease-in-out infinite; }
.sos-gauge b { font: 400 2.4vw/1 var(--display2); } .sos-gauge small { font: 400 1vw var(--stencil); color: #8fd6cb; letter-spacing: .2em; text-transform: uppercase; }
.sos-tvprog { position: absolute; left: 20vw; right: 20vw; bottom: 13vh; height: 3.2vh; border-radius: 2vh; border: .3vw solid var(--brass); background: rgba(0, 0, 0, .5); overflow: hidden; }
.sos-tvprog i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #22a090, #7cf0d6); transition: transform .6s cubic-bezier(.2, 1.4, .4, 1); }
.sos-tvprog span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.5vw/1 var(--cond); text-shadow: 0 2px 3px #000; }
.sos-tvcrew { position: absolute; left: 3vw; right: 3vw; bottom: 3vh; display: flex; justify-content: center; gap: 1vw; }
.sos-tvc { min-width: 10vw; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; background: rgba(0, 0, 0, .55); border: 2px solid rgba(217, 164, 65, .6); border-radius: 12px; padding: 8px 12px; font: 700 1.5vw/1 var(--cond); }
.sos-tvc span { color: var(--amber); } .sos-tvc i { grid-column: 1 / -1; height: .6vh; border-radius: 1vh; background: var(--amber); transform-origin: left; }
.sos-tvc.hurry i { background: var(--alarm); } .sos-tvc.idle i { opacity: .2; }
.sos-tvbanner { position: absolute; left: 50%; top: 13vh; transform: translateX(-50%); padding: 1.4vh 3vw; border-radius: 2vh; background: rgba(229, 67, 43, .95); font: 400 3vw/1.05 var(--display2); text-align: center; animation: sosBanner .4s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 2vh 4vh #000; max-width: 80vw; }
.sos-tvroot.dark .sos-sea { filter: brightness(.12); } .sos-tvroot.dark .sos-tvsub { filter: brightness(.4) drop-shadow(0 0 30px #ffd36b); }
.sos-tvroot.danger::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 18vh 4vh rgba(229, 67, 43, .5); animation: sosAlarm 1.1s ease-in-out infinite; }
.sos-overlay.tv .sos-card { width: min(60vw, 900px); padding: 4vh 3vw; gap: 2vh; font-size: 2vw; }
.sos-overlay.tv h2 { font-size: 5vw; } .sos-overlay.tv .sos-depthbig { font-size: 4vw; } .sos-overlay.tv .sos-hzcard b { font-size: 2vw; } .sos-overlay.tv .sos-hzcard p { font-size: 1.6vw; } .sos-overlay.tv .sos-hzcard { grid-template-columns: 5vw 1fr; } .sos-overlay.tv .sos-hzi { width: 5vw; height: 5vw; }

@media (prefers-reduced-motion: reduce) { .sos * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media (max-height: 640px) { .sos-name { font-size: 12px; } .sos-plate { min-height: 26px; } .sos-slipwrap { height: 84px; } .sos-sliptext { font-size: 21px; } }