/* CLOSED CASKET alpha. Paper, tape, rubber stamps, sodium light.
 * Fonts are self-hosted (SIL OFL 1.1, see /fonts). No CDN calls. Code: 0BSD. */
@font-face { font-family: "IM Fell English SC"; src: url("../fonts/IMFeENsc28P.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bungee"; src: url("../fonts/Bungee-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  --night: #0d1424; --deep: #080c17; --sodium: #ffb347; --teal: #3fd0c9; --pink: #ff6fae;
  --bone: #efe6d2; --paper2: #e6dcc4; --ink: #1b1b1f; --muted: #6b6560; --wine: #8c2f4b;
  --cap: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--deep); color: var(--bone); overflow: hidden;
  font-family: "Courier Prime", "Courier New", monospace; -webkit-tap-highlight-color: transparent; }
body { touch-action: manipulation; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
canvas#game { position: fixed; inset: 0; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.screen { position: absolute; inset: 0; display: none; align-items: flex-start; justify-content: flex-start; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow: auto; }
.screen.on { display: flex; }
.screen > :not(.sticky):not(.soon) { margin: auto; } /* centered, but never clipped when taller than the screen */
@media (max-height: 520px) { #version { display: none; } } /* the title stamp still shows version + protocol */
[hidden] { display: none !important; }
h1, h2, h3 { font-family: "IM Fell English SC", Georgia, serif; font-weight: 400; margin: 0 0 .4em; letter-spacing: .01em; }
h2 small, h3 small { font-family: "Courier Prime", monospace; font-size: .55em; color: var(--muted); }
.small { font-size: 14px; } .muted { color: var(--muted); font-size: 14px; } small { font-size: .75em; opacity: .85; }

/* ---------- paper cards */
.card { position: relative; background: var(--bone); color: var(--ink); padding: 26px 30px 22px; max-width: 560px; width: 100%;
  border: 2px solid var(--ink); border-radius: 3px 5px 4px 6px / 6px 3px 5px 4px; box-shadow: 6px 7px 0 rgba(0,0,0,.55);
  transform: rotate(-.4deg); max-height: calc(100vh - 24px); overflow: auto; }
.card.wide { max-width: 900px; }
.card.memo { background-color: var(--bone);
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(63,120,160,.18) 31px 32px); background-position: 0 14px; }
.card.memo::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: rgba(200,60,90,.3); }
.tape { position: absolute; top: -12px; left: 50%; width: 120px; height: 26px; margin-left: -60px; background: rgba(255,179,71,.6);
  transform: rotate(2deg); border-left: 2px dotted rgba(0,0,0,.08); border-right: 2px dotted rgba(0,0,0,.08); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.row.center { justify-content: center; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .cols, .cols3 { grid-template-columns: 1fr; gap: 10px; } .card { padding: 18px 16px; } }

/* ---------- buttons: index cards with a wobbly underline */
.btn { font: 700 16px "Courier Prime", monospace; color: var(--ink); background: var(--paper2); border: 2px solid var(--ink);
  border-radius: 4px 2px 5px 3px; padding: 10px 16px; min-height: 44px; min-width: 44px; cursor: pointer; position: relative;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .06s; }
.btn:nth-child(odd) { transform: rotate(.35deg); } .btn:nth-child(even) { transform: rotate(-.4deg); }
.btn:hover, .btn:focus-visible { background: #fff6dd; outline: none; }
.btn:hover::after, .btn:focus-visible::after { content: ""; position: absolute; left: 10px; right: 14px; bottom: 5px; height: 3px;
  background: var(--wine); border-radius: 2px; transform: rotate(-.6deg) skewX(-20deg); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.big { font-size: 19px; padding: 13px 22px; background: var(--sodium); }
.btn.small { font-size: 14px; padding: 8px 12px; }
.btn.tiny { font-size: 12px; padding: 3px 8px; min-height: 30px; box-shadow: 2px 2px 0 var(--ink); }
.btn.feedback { background: #d7ecea; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn small { font-weight: 400; }

/* ---------- title */
.title-wrap { display: flex; flex-direction: column; align-items: center; max-width: 640px; width: 100%; text-align: center; }
.neon-sign { font: 26px Bungee, sans-serif; color: var(--pink); text-shadow: 0 0 6px rgba(255,111,174,.7); padding: 6px 14px;
  border: 3px solid #2a3048; background: rgba(8,12,23,.85); transform: rotate(-1.2deg); }
.neon-sign span { display: block; font: 13px "Courier Prime", monospace; color: var(--teal); text-shadow: none; letter-spacing: .2em; text-transform: uppercase; }
.logo { font-size: clamp(46px, 9vw, 92px); color: var(--bone); margin: 10px 0 0; line-height: .95;
  text-shadow: 3px 3px 0 var(--wine), 6px 6px 0 rgba(0,0,0,.6); transform: rotate(.6deg); }
.tagline { max-width: 520px; margin: 8px auto 14px; color: #d8cfba; font-size: 16px; text-shadow: 0 1px 2px #000; }
.tagline em { color: var(--sodium); font-style: normal; }
.menu { display: flex; flex-direction: column; gap: 10px; width: min(420px, 100%); }
.menu-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.sticky { position: absolute; right: 24px; bottom: 54px; width: 220px; background: #f7e27a; color: var(--ink); padding: 12px 14px; font-size: 13px;
  transform: rotate(3deg); box-shadow: 4px 5px 0 rgba(0,0,0,.45); text-align: left; }
.sticky b { display: block; font-size: 12px; letter-spacing: .08em; }
@media (max-width: 1000px), (max-height: 560px) { .sticky { display: none; } }
/* "coming soon" sticker: hand-cut paper, marker heading, a strip of tape. No date, no countdown. */
.soon { position: absolute; left: 26px; bottom: 58px; width: 200px; background: #efe6d2; color: var(--ink); padding: 14px 14px 12px; text-align: left;
  transform: rotate(-4deg); box-shadow: 4px 5px 0 rgba(0,0,0,.45); border: 2px solid var(--ink); font-size: 13px; line-height: 1.25;
  clip-path: polygon(0 3%, 6% 0, 40% 2%, 72% 0, 100% 3%, 98% 40%, 100% 78%, 97% 100%, 60% 98%, 24% 100%, 2% 97%, 0 60%); }
.soon b { display: block; font: 15px/1.05 "Bungee", sans-serif; color: var(--wine); letter-spacing: .02em; margin-bottom: 6px; }
.soon-tape { position: absolute; top: -6px; left: 50%; width: 70px; height: 16px; margin-left: -35px; background: rgba(255,179,71,.75); transform: rotate(3deg); }
@media (max-width: 1000px), (max-height: 560px) {
  .soon { left: max(10px, env(safe-area-inset-left)); top: 10px; bottom: auto; width: 150px; padding: 9px 10px 8px; font-size: 11px; transform: rotate(-3deg); }
  .soon b { font-size: 12px; margin-bottom: 3px; }
  .soon-more { display: none; }
}
@media (max-height: 520px) {
  .logo { font-size: 44px; } .neon-sign { font-size: 18px; } .tagline { display: none; }
  .menu { display: grid; grid-template-columns: 1fr 1fr; width: min(640px, 100%); gap: 8px; }
  .menu-row { grid-column: 1 / -1; } .btn.big { font-size: 16px; padding: 10px 14px; }
}
.ver-stamp { display: inline-block; margin: 2px 0 4px; padding: 2px 10px; border: 2px solid var(--sodium); color: var(--sodium); font: 700 13px "Courier Prime", monospace; letter-spacing: .12em; transform: rotate(-1.5deg); }
.update { color: #ff6fae !important; font-weight: 700; border: 2px dashed #ff6fae; padding: 8px 10px; background: rgba(255,111,174,.08); }
#version-mini { display: none; position: absolute; left: 50%; top: 3px; transform: translateX(-50%); font-size: 10px; color: #9aa0b5; pointer-events: none; z-index: 14; letter-spacing: .08em; }
body.in-game #version { display: none; } body.in-game #version-mini { display: block; }
body.in-game #subs { top: 96px; bottom: auto; }
body.touch-on.in-game #subs { top: 74px; left: max(14px, env(safe-area-inset-left)); bottom: auto; width: min(360px, 40vw); }
body.touch-on #subs .line { font-size: calc(12.5px * var(--cap)); padding: 4px 8px; }
body.touch-on #subs .line:nth-last-child(n+3) { display: none; }
body.touch-on #prompt { right: auto; left: 50%; transform: translateX(-50%); top: 62px; width: min(380px, 44vw); }
body.touch-on #prompt .card { padding: 6px 10px; font-size: 12px; }
body.touch-on #prompt .ask { margin: 2px 0 4px; }
body.touch-on #prompt .opt { font-size: 12px; margin: 4px 0; padding: 4px 8px; min-height: 44px; }
body.touch-on #tut { top: 70px; max-width: 46vw; font-size: 13px; }
#version { position: absolute; left: 12px; bottom: 8px; font-size: 12px; color: #9aa0b5; pointer-events: none; text-shadow: 0 1px 0 #000; }

/* ---------- forms */
.check { display: flex; gap: 10px; align-items: center; margin: 8px 0; min-height: 36px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--wine); }
.slider { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 10px 0; min-height: 40px; }
.slider input[type=range] { width: 50%; accent-color: var(--wine); height: 30px; }
select, .code-input { font: 700 16px "Courier Prime", monospace; border: 2px solid var(--ink); background: #fffaf0; color: var(--ink); padding: 8px; min-height: 44px; }
.code-input { width: 11ch; letter-spacing: .25em; text-transform: uppercase; font-size: 22px; text-align: center; user-select: text; -webkit-user-select: text; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.seg.col { flex-direction: column; }
.seg label { display: flex; gap: 6px; align-items: center; border: 2px solid var(--ink); padding: 8px 12px; min-height: 44px; cursor: pointer; background: #fffaf0; }
.seg input { accent-color: var(--wine); }
.status { min-height: 1.4em; font-weight: 700; color: var(--wine); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); margin-bottom: 10px; }
.tab { font: 700 15px "Courier Prime", monospace; background: var(--paper2); border: 2px solid var(--ink); border-bottom: 0; padding: 8px 12px; min-height: 44px; cursor: pointer; color: var(--ink); }
.tab.on { background: #fffaf0; position: relative; top: 2px; }
.tabpane { display: none; } .tabpane.on { display: block; }
.keys { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 10px; align-items: center; font-size: 14px; }
.keys .hd { font-weight: 700; border-bottom: 1px solid var(--ink); }
.keys button { min-width: 84px; }

/* ---------- online + lobby */
.room-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.room-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-bottom: 1px dashed var(--ink); padding: 8px 0; }
.room-list .rn { font-weight: 700; } .room-list .rm { font-size: 13px; color: var(--muted); }
.code-big { font: 54px Bungee, sans-serif; text-align: center; letter-spacing: .12em; color: var(--ink); margin: 8px 0; user-select: text; -webkit-user-select: text; }
.crew { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.crew li { border: 2px solid var(--ink); padding: 8px 10px; background: #fffaf0; display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 52px; }
.crew .sw { font-size: 22px; width: 28px; text-align: center; -webkit-text-stroke: 1px var(--ink); }
.crew .who { flex: 1; } .crew .who b { display: block; } .crew .who span { font-size: 13px; color: var(--muted); }
body:not(.is-host) .host-only { display: none !important; }
body.is-host .guest-only { display: none !important; }

/* ---------- board */
.board { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; max-width: 1100px; width: 100%; align-items: start; }
@media (max-width: 860px) { .board { grid-template-columns: 1fr; gap: 12px; } }
.contracts { padding-left: 22px; margin: 0; }
.contracts li { margin: 0 0 12px; } .contracts b { font-family: "IM Fell English SC", serif; font-size: 18px; }
.contracts .meta { font-size: 13px; color: var(--muted); }
.contracts .tag { display: inline-block; border: 1.5px solid var(--ink); padding: 0 6px; font-size: 12px; margin-right: 4px; }
.contracts li.done { opacity: .5; text-decoration: line-through; }
.prep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.prep-item { text-align: left; font: 14px "Courier Prime", monospace; background: #fffaf0; border: 2px solid var(--ink); padding: 8px 10px; cursor: pointer; min-height: 64px; color: var(--ink); }
.prep-item b { display: block; } .prep-item.on { background: var(--sodium); } .prep-item.locked { opacity: .45; cursor: not-allowed; }
.prep-item .cost { float: right; font-weight: 700; } .prep-item.warn b { color: var(--wine); }
.crew-roles { margin-top: 10px; font-size: 14px; }

/* ---------- drop-off */
.dropcard { max-width: 520px; }
.stamp { position: absolute; right: 18px; top: 18px; font: 24px Bungee, sans-serif; color: var(--wine); border: 4px solid var(--wine); padding: 4px 10px;
  transform: rotate(-12deg); opacity: .85; mix-blend-mode: multiply; }
.ledger { list-style: none; padding: 0; } .ledger li { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--ink); padding: 4px 0; }

/* ---------- report */
.report-wrap { display: flex; gap: 20px; align-items: center; max-width: 1100px; width: 100%; justify-content: center; }
#report-canvas { height: min(88vh, 760px); width: auto; max-width: 62vw; box-shadow: 8px 8px 0 rgba(0,0,0,.6); }
.report-side { display: flex; flex-direction: column; gap: 10px; width: 260px; }
.unlocks { background: #f7e27a; color: var(--ink); padding: 10px 12px; font-size: 14px; transform: rotate(1.5deg); box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.unlocks:empty { display: none; }
@media (max-width: 760px) { .report-wrap { flex-direction: row; } #report-canvas { height: 84vh; max-width: 55vw; } .report-side { width: 40vw; } }

/* ---------- locker / credits */
.picks { display: flex; flex-direction: column; gap: 6px; }
.pick { text-align: left; font: 14px "Courier Prime", monospace; border: 2px solid var(--ink); background: #fffaf0; padding: 8px; min-height: 44px; cursor: pointer; color: var(--ink); }
.pick.on { background: var(--sodium); font-weight: 700; } .pick.locked { opacity: .4; cursor: not-allowed; }
.unlock-list { columns: 2; font-size: 13px; } .unlock-list li.got { text-decoration: line-through; color: var(--muted); }
.scroll { max-height: calc(100vh - 30px); }
#credits-body h3 { margin-top: 14px; } #credits-body p, #credits-body li { font-size: 14px; }
#credits-body pre { white-space: pre-wrap; font-size: 11px; background: #fffaf0; border: 1px solid var(--ink); padding: 8px; max-height: 180px; overflow: auto; user-select: text; }

/* ---------- overlays */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,12,23,.72); z-index: 30; padding: 12px; }
#caption { position: absolute; left: 0; right: 0; top: 22%; text-align: center; pointer-events: none; z-index: 20; opacity: 0; }
#caption.show { opacity: 1; }
#caption .cap-main { display: inline-block; font: calc(clamp(30px, 6.2vw, 74px) * var(--cap)) Bungee, sans-serif; color: var(--bone); background: var(--ink);
  padding: 6px 18px 2px; transform: rotate(-2.5deg); box-shadow: 6px 6px 0 var(--wine); line-height: 1.1; max-width: 92vw; }
#caption.pop .cap-main { animation: stamp .35s cubic-bezier(.2,1.6,.4,1); }
body.reduce-motion #caption.pop .cap-main { animation: none; }
#caption .cap-sub { margin: 14px auto 0; max-width: 680px; font: 700 calc(18px * var(--cap)) "Courier Prime", monospace; color: var(--ink); background: var(--bone); padding: 6px 10px; display: inline-block; transform: rotate(.8deg); }
#caption .cap-sub:empty { display: none; }
@keyframes stamp { from { transform: rotate(-8deg) scale(1.6); opacity: 0; } to { transform: rotate(-2.5deg) scale(1); opacity: 1; } }
#subs { position: absolute; left: 14px; bottom: 120px; width: min(520px, 60vw); pointer-events: none; z-index: 15; display: flex; flex-direction: column; gap: 6px; }
#subs .line { background: rgba(8,12,23,.88); color: var(--bone); border-left: 5px solid var(--teal); padding: 6px 10px; font-size: calc(15px * var(--cap)); }
#subs .line b { color: var(--teal); margin-right: 6px; font-size: .85em; letter-spacing: .05em; }
#subs .line.k-cargo { border-left-color: var(--pink); } #subs .line.k-cargo b { color: var(--pink); }
#subs .line.k-crew { border-left-color: var(--sodium); } #subs .line.k-crew b { color: var(--sodium); }
body.no-subs #subs { display: none; }
#toasts { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; align-items: center; pointer-events: none; z-index: 16; }
#toasts .t { background: var(--bone); color: var(--ink); border: 2px solid var(--ink); padding: 4px 10px; font-weight: 700; font-size: calc(15px * var(--cap)); box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
#tut { position: absolute; left: 50%; top: 96px; transform: translateX(-50%) rotate(-.8deg); background: #f7e27a; color: var(--ink); padding: 10px 16px;
  max-width: min(640px, 90vw); font: 700 calc(17px * var(--cap)) "Courier Prime", monospace; box-shadow: 4px 4px 0 rgba(0,0,0,.5); z-index: 17; pointer-events: none; }
#tut::before { content: "DALE'S TRAINING NOTE"; display: block; font-size: 11px; letter-spacing: .12em; color: var(--wine); }
#prompt { position: absolute; right: 16px; top: 90px; width: min(420px, 46vw); z-index: 18; }
#prompt .card { padding: 14px 16px; transform: rotate(.6deg); }
#prompt .who { font: 13px Bungee, sans-serif; color: var(--wine); }
#prompt .ask { font-weight: 700; margin: 4px 0 8px; }
#prompt .opt { display: block; width: 100%; text-align: left; margin: 6px 0; font-size: 14px; }
#prompt .timer { height: 6px; background: var(--wine); transition: width .2s linear; }
#prompt .notyou { font-size: 13px; color: var(--muted); }
#walkie { position: absolute; right: 16px; bottom: 120px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; z-index: 15; }
#walkie .w { background: var(--ink); color: var(--bone); padding: 6px 10px; border: 2px solid; font-weight: 700; font-size: calc(15px * var(--cap)); }
#spectate { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); background: var(--ink); color: var(--sodium); padding: 6px 12px; font-weight: 700; z-index: 16; pointer-events: none; }
#hud-btns { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 84px; display: none; flex-direction: column; gap: 8px; z-index: 19; }
body.in-game #hud-btns { display: flex; }
.hbtn { width: 48px; height: 48px; font: 700 15px "Courier Prime", monospace; background: var(--bone); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.5); cursor: pointer; }

/* ---------- touch */
#touch { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 12; }
body.touch-on.in-game #touch { display: block; }
#t-stick { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 150px; height: 150px; border-radius: 50%; border: 3px dashed rgba(239,230,210,.5); background: rgba(8,12,23,.35); pointer-events: auto; touch-action: none; }
#t-stick .t-hint { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font: 700 10px "Courier Prime", monospace; color: rgba(239,230,210,.6); pointer-events: none; }
#t-knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(239,230,210,.85); border: 3px solid var(--ink); }
#t-talk { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 144px; display: flex; gap: 8px; pointer-events: auto; }
body.touch-on #hb-emote { display: none; }
body.drive-driver #t-right { grid-template-columns: auto auto auto; }
#t-right { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; gap: 12px; align-items: end; pointer-events: auto; }
.tbtn { width: 74px; height: 74px; border-radius: 50%; font: 700 12px "Courier Prime", monospace; background: rgba(239,230,210,.88); color: var(--ink); border: 3px solid var(--ink); touch-action: none; -webkit-tap-highlight-color: transparent; padding: 0; line-height: 1.05; }
.tbtn.big { width: 100px; height: 100px; font-size: 15px; background: rgba(255,179,71,.92); }
.tbtn.mini { width: 56px; height: 48px; border-radius: 10px; font-size: 12px; }
.tbtn.ctx { background: rgba(63,208,201,.95); box-shadow: 0 0 0 4px rgba(63,208,201,.35); }
.tbtn.urgent { background: rgba(255,111,174,.95); box-shadow: 0 0 0 5px rgba(255,111,174,.4); }
body.photo .tbtn.ctx, body.photo .tbtn.urgent { box-shadow: none; }
.tbtn.down { transform: scale(.94); background: #fff; }
#t-gas, #t-brake { display: none; }
body.drive-driver #t-gas, body.drive-driver #t-brake { display: block; }
body.drive-driver #t-steady { display: none; }
body.drive-driver.ctx-act #t-action { display: block; }
body.drive-driver:not(.ctx-act) #t-action { visibility: hidden; }
body.touch-on #subs { bottom: 196px; left: 190px; width: min(380px, 40vw); }
body.touch-on #walkie { bottom: 240px; }
body.touch-on .hbtn { width: 52px; height: 52px; }
/* every tap target on a touch device is at least 44 css px */
body.touch-dev button, body.touch-dev select, body.touch-dev input[type=checkbox] + span, body.touch-dev .btn { min-height: 44px; min-width: 44px; }
body.touch-dev input[type=range] { height: 44px; }
body.touch-dev input[type=checkbox] { width: 26px; height: 26px; }
body.touch-dev label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }

/* emote / ping wheel: a ring of quick lines around a close button */
#emotes { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 25; }
#emotes .wheel-bg { position: absolute; left: -230px; top: -150px; width: 460px; height: 300px; border-radius: 50%; background: rgba(8,12,23,.78); border: 2px dashed rgba(239,230,210,.4); }
#emotes button { position: absolute; transform: translate(-50%, -50%); font: 700 13px "Courier Prime", monospace; min-height: 44px; min-width: 96px; max-width: 150px; padding: 6px 10px; white-space: normal; }
#emotes button.close { min-width: 64px; min-height: 64px; border-radius: 50%; background: var(--ink); color: var(--bone); }
@media (max-height: 420px) { #emotes { transform: scale(.82); } }
#rotate { position: absolute; inset: 0; background: var(--deep); color: var(--bone); display: none; align-items: center; justify-content: center; text-align: center; z-index: 100; font-size: 20px; }
#rotate .phone { font-size: 70px; transform: rotate(90deg); margin-bottom: 12px; color: var(--sodium); }
@media (orientation: portrait) { body.touch-dev #rotate { display: flex; } }

/* colorblind extra cues */
body.cb .prep-item.on { outline: 3px dashed var(--ink); outline-offset: -6px; }
body.cb .prep-item.on b::before { content: "✓ "; }
#report-crew { width: 100%; height: auto; max-height: 24vh; border: 2px solid #2a3048; image-rendering: auto; }

/* ---------- crew radio */
.radio-box { border: 2px dashed rgba(42,48,72,.5); padding: 8px 10px; margin: 8px 0; }
.radio-box .row { gap: 8px; flex-wrap: wrap; align-items: center; }
.crew .vc { font-size: 12px; margin-left: 6px; }
.crew .vc.talk { color: #c0306a; font-weight: 700; }
.crew input[type=range].pvol { width: 80px; min-height: 44px; }
#t-ptt { display: none; }
body.voice-ptt.touch-on #t-ptt { display: inline-flex; }
body.voice-talking #t-ptt { background: #ff6fae; }

/* dispatcher VO subtitle (one line at a time, cue by cue) */
#vosub { position: absolute; left: 50%; transform: translateX(-50%); bottom: 74px; max-width: min(760px, 76vw); z-index: 16; pointer-events: none;
  background: rgba(8,12,23,.92); color: var(--bone); border: 2px solid var(--teal); border-radius: 4px; padding: 7px 14px; font-size: calc(16px * var(--cap)); text-align: center; }
#vosub b { color: var(--teal); margin-right: 8px; font-size: .82em; letter-spacing: .08em; }
body.touch-on #vosub { bottom: max(34px, env(safe-area-inset-bottom)); font-size: calc(12.5px * var(--cap)); max-width: 46vw; padding: 4px 9px; }