/* The in-game HUD in the start menu's design language (2026-10-11, owner: "implement
   the new design also in the in game stuff"): the score plates as the menu's seat
   cards, the turn banner as a key in the shooter's colour, and one bottom dock --
   pause, camera and quick chat as square toy keys on one side, the car stepper on
   the other, the power meter and the hint between them.

   The car stepper (app/bowlingPick.js #carPick) was two round arrows at the middle
   of the screen's edges: over the table, out of thumb reach, and reading as a
   page carousel. It is one key now, [‹ car ›], in the dock's corner opposite the
   system keys (Settings > Controls side mirrors both). Label-free as the owner
   asked on 2026-10-07; the car glyph between the arrows says what they step.

   Loaded after interface.css, so these rules win at equal specificity; the old
   rules there still lay out what is not restyled here. Colours are written out
   (menu.css's tokens live on #menu and .ui, which the HUD is not). */

/* ---------- the score plates and the turn banner ---------- */
.top{gap:10px;padding:calc(env(safe-area-inset-top) + 12px) max(14px,env(safe-area-inset-right)) 30px max(14px,env(safe-area-inset-left))}
.plate,.plate.p2{clip-path:none;border:0;border-radius:16px;padding:9px 14px 10px;transform-origin:top left;
  background:radial-gradient(120% 150% at 0% 0%,color-mix(in srgb,var(--player) 40%,transparent),transparent 62%),linear-gradient(180deg,rgba(29,42,63,.94),rgba(17,25,39,.94));
  box-shadow:inset 0 0 0 1px rgba(214,226,250,.16),inset 0 3px 0 var(--player),0 4px 0 #04070c,0 10px 20px rgba(0,0,0,.4);
  opacity:.62;filter:saturate(.55);transform:scale(.95)}
.plate.p2{transform-origin:top right;
  background:radial-gradient(120% 150% at 100% 0%,color-mix(in srgb,var(--player) 40%,transparent),transparent 62%),linear-gradient(180deg,rgba(29,42,63,.94),rgba(17,25,39,.94))}
.plate::after,.plate.p2::after{content:none}
.plate.active,.plate.p2.active{opacity:1;filter:none;transform:none;
  background:radial-gradient(130% 160% at 0% 0%,color-mix(in srgb,var(--player) 62%,transparent),transparent 66%),linear-gradient(180deg,rgba(29,42,63,.96),rgba(17,25,39,.96));
  box-shadow:inset 0 0 0 2.5px var(--player),0 0 0 4px color-mix(in srgb,var(--player) 30%,transparent),0 4px 0 #04070c,0 12px 26px rgba(0,0,0,.45)}
.plate.p2.active{background:radial-gradient(130% 160% at 100% 0%,color-mix(in srgb,var(--player) 62%,transparent),transparent 66%),linear-gradient(180deg,rgba(29,42,63,.96),rgba(17,25,39,.96))}
.plate .who{font:600 11px/1.2 var(--disp);letter-spacing:.16em;color:color-mix(in srgb,var(--player) 45%,#fff);text-shadow:none}
.plate .num{font:800 italic 42px/.95 var(--disp);letter-spacing:-.02em;color:#f5f1e8;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.plate.active .num{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 16px color-mix(in srgb,var(--player) 70%,transparent)}
.plate .profile-avatar{border-radius:50%}
/* the banner: a key in the shooter's colour, the menu's depth under it */
#banner{clip-path:none;border-radius:14px;padding:9px 20px 11px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--turn,#25344d) 74%,#fff) 0%,var(--turn,#25344d) 52%,color-mix(in srgb,var(--turn,#25344d) 80%,#000) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 2px 0 rgba(255,255,255,.3),0 5px 0 color-mix(in srgb,var(--turn,#25344d) 40%,#000),0 12px 24px rgba(0,0,0,.45)}
.top.over #banner{background:linear-gradient(180deg,#25344d,#172235);box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),0 5px 0 #04070c}
#banner .b1{font:800 italic 19px/1.05 var(--disp);letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.25)}
#banner .b2{font:600 11px/1.2 var(--disp);letter-spacing:.16em;margin-top:4px;opacity:.85}
#bannerClock.urgent{border-radius:6px}

/* ---------- the bottom dock ---------- */
/* the keys: square toy keys, the menu's plate look */
#bPause,#bCamMode,#qcBtn,#bReplayLast{width:48px;height:48px;border:0;border-radius:14px;bottom:calc(14px + env(safe-area-inset-bottom));color:#f5f1e8;
  background:linear-gradient(180deg,#25344d,#172235);
  box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),inset 0 2px 0 rgba(255,255,255,.14),0 4px 0 #04070c,0 8px 16px rgba(0,0,0,.45);
  transition:transform .09s,box-shadow .09s,filter .15s}
#bPause:active,#bCamMode:active,#qcBtn:active,#bReplayLast:active{transform:translateY(3px);background:linear-gradient(180deg,#25344d,#172235);
  box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),inset 0 2px 0 rgba(255,255,255,.14),0 1px 0 #04070c}
#bPause svg,#bCamMode svg,#bReplayLast svg{fill:#f5f1e8}
/* in a row: pause in the corner, the camera beside it, quick chat (online) next, then replay
   (owner, 2026-10-11: the replay key belongs in the bottom bar with the others, not above it) */
#bPause{left:max(14px,env(safe-area-inset-left))}
#bCamMode{left:calc(max(14px,env(safe-area-inset-left)) + 58px)}
#qcBtn{left:calc(max(14px,env(safe-area-inset-left)) + 116px)}
#bReplayLast{position:fixed;z-index:4;left:calc(max(14px,env(safe-area-inset-left)) + 116px);
  min-height:0;padding:0;display:grid;place-items:center;pointer-events:auto}
#bReplayLast svg{width:26px;height:26px}
.qcOn #bReplayLast{left:calc(max(14px,env(safe-area-inset-left)) + 174px)}
/* the camera key shows which of the three cameras is on: 1 whole table, 2 follow car, 3 aim lock */
#bCamMode svg{width:30px;height:30px}
#bCamMode .camNum{font:800 9.5px var(--disp);fill:#172235}
/* the camera following the car: the menu's amber, the key that is "on" */
#bCamMode.on{background:linear-gradient(180deg,#ffd781,#ff9b3d);
  box-shadow:inset 0 0 0 1px rgba(255,236,190,.6),inset 0 2px 0 rgba(255,255,255,.3),0 4px 0 #b0560f,0 8px 16px rgba(0,0,0,.45)}
#bCamMode.on svg{fill:#2a1406}
#bCamMode.on .camNum{fill:#ffd781}
#bCamMode.aimlock{box-shadow:inset 0 0 0 3px #101722,inset 0 0 0 5px #fff,0 4px 0 #b0560f,0 8px 16px rgba(0,0,0,.45)}
.derby-controls-left #bPause{left:auto;right:max(14px,env(safe-area-inset-right))}
.derby-controls-left #bCamMode{left:auto;right:calc(max(14px,env(safe-area-inset-right)) + 58px)}
.derby-controls-left #qcBtn{left:auto;right:calc(max(14px,env(safe-area-inset-right)) + 116px)}
.derby-controls-left #bReplayLast{left:auto;right:calc(max(14px,env(safe-area-inset-right)) + 116px)}
.derby-controls-left .qcOn #bReplayLast{right:calc(max(14px,env(safe-area-inset-right)) + 174px)}
#qcSheet{bottom:calc(76px + env(safe-area-inset-bottom))}

/* the car stepper: one key, two halves, a car between them */
#carPick{inset:auto;left:auto;top:auto;right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;align-items:center;height:48px;border-radius:14px;
  background:linear-gradient(180deg,#25344d,#172235);
  box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),inset 0 2px 0 rgba(255,255,255,.14),0 4px 0 #04070c,0 8px 16px rgba(0,0,0,.45);
  transform:translateY(8px);transition:opacity .2s,transform .2s}
#carPick.show{transform:none}
#carPick button,#carPick .prev,#carPick .next{position:relative;left:auto;right:auto;top:auto;margin:0;width:48px;height:48px;border:0;border-radius:14px;
  background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#carPick button svg{width:22px;height:22px;stroke:#f5f1e8;stroke-width:3}
#carPick button:active{transform:translateY(2px);background:rgba(255,255,255,.08);border:0}
#carPick .next{order:2}
#carPick::after{content:'';order:1;flex:0 0 auto;width:26px;height:26px;background:#ffad47;pointer-events:none;
  -webkit-mask:var(--car-glyph) center/contain no-repeat;mask:var(--car-glyph) center/contain no-repeat;
  --car-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 15.2 4 9.6A2.2 2.2 0 0 1 6.1 8h7.8a2.2 2.2 0 0 1 1.6.7l3 3.1H20a2 2 0 0 1 2 2v1.4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z'/%3E%3Ccircle cx='7' cy='17' r='2.6'/%3E%3Ccircle cx='17' cy='17' r='2.6'/%3E%3C/svg%3E")}
@media(hover:hover){#carPick button:hover{background:rgba(255,255,255,.06)}}
.derby-controls-left #carPick{right:auto;left:max(14px,env(safe-area-inset-left))}

/* the power meter and the hint, between the two sides of the dock */
.bottom{gap:8px;padding:28px max(196px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(196px,env(safe-area-inset-left));
  background:linear-gradient(transparent,rgba(8,12,19,.82))}
#powerWrap{height:12px;border:0;border-radius:999px;transform:none;background:#090e17;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6),inset 0 0 0 1px rgba(214,226,250,.22),0 3px 0 #04070c}
#power{border-radius:999px;background:linear-gradient(90deg,#ffe2a0,#ffad47 45%,#ff7a3d 75%,#ef453e);box-shadow:0 0 12px rgba(255,150,60,.45)}
#powerWrap.full{box-shadow:inset 0 0 0 1.5px #fff2a3,0 0 18px rgba(255,212,84,.7),0 3px 0 #04070c;animation:hud-power-ready .42s ease-in-out infinite alternate}
@keyframes hud-power-ready{from{transform:scaleX(1)}to{transform:scaleX(1.025)}}
@media(prefers-reduced-motion:reduce){#powerWrap.full{animation:none}}
#cancelZone{border-radius:999px 0 0 999px}
.hint{font:600 11.5px/1.4 var(--disp);letter-spacing:.1em;color:#bcc7d8;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* Throw in, Replay: the menu's keys */
.btns{gap:8px}
.btns button{min-height:44px;padding:0 18px;border:0;border-radius:12px;font:800 italic 16px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:#f5f1e8;
  background:linear-gradient(180deg,#25344d,#172235);
  box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),inset 0 2px 0 rgba(255,255,255,.14),0 4px 0 #04070c,0 8px 16px rgba(0,0,0,.45)}
.btns button:active{transform:translateY(3px);box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),0 1px 0 #04070c}
#bThrowIn{background:linear-gradient(180deg,#ffd781,#ff9b3d);color:#2a1406;
  box-shadow:inset 0 0 0 1px rgba(255,236,190,.6),inset 0 2px 0 rgba(255,255,255,.3),0 4px 0 #b0560f,0 8px 16px rgba(0,0,0,.45)}
/* a phone held upright: the dock is the bottom row, the meter and the hint sit above it */
@media (max-width:599px){
  .bottom{padding:24px 16px calc(14px + 48px + 14px + env(safe-area-inset-bottom))}
  .hint{font-size:11px}
  /* the score plates fill their columns and keep the names readable (owner, 2026-10-11: the
     plates looked wrong on a phone -- the roomy desktop padding and letter-spacing above
     cut "Player 2" down to "PLAYE...") */
  .top{gap:6px;padding:calc(env(safe-area-inset-top) + 10px) max(10px,env(safe-area-inset-right)) 24px max(10px,env(safe-area-inset-left))}
  .plate,.plate.p2{width:100%;padding:7px 10px 8px;border-radius:14px}
  .plate .who{font-size:10px;letter-spacing:.06em}
  .plate .num{font-size:34px}
  .plate.active,.plate.p2.active{box-shadow:inset 0 0 0 2px var(--player),0 4px 0 #04070c,0 10px 20px rgba(0,0,0,.4)}
  #banner{padding:8px 12px 10px;border-radius:12px}
  #banner .b1{font-size:15px}
  #banner .b2{font-size:10px;letter-spacing:.1em}
}

/* ---------- the replay player ---------- */
.hlBtn{min-height:40px;padding:0 14px;border:0;border-radius:12px;font:800 italic 14px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;
  color:#f5f1e8;background:linear-gradient(180deg,#25344d,#172235);
  box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),inset 0 2px 0 rgba(255,255,255,.14),0 3px 0 #04070c}
.hlBtn:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),0 1px 0 #04070c}
.hlPlayBtn{color:#2a1406;background:linear-gradient(180deg,#ffd781,#ff9b3d);
  box-shadow:inset 0 0 0 1px rgba(255,236,190,.6),inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 #b0560f}
.hlPlayerBar{border:0;border-radius:18px;padding:12px 14px;gap:10px;
  background:linear-gradient(180deg,rgba(29,42,63,.96),rgba(16,24,38,.96));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.16),inset 0 3px 0 #ffad47,0 6px 0 #04070c,0 18px 36px rgba(0,0,0,.6)}
.hlBtn:hover{filter:brightness(1.12);background:linear-gradient(180deg,#25344d,#172235);border:0}
.hlPlayBtn:hover{background:linear-gradient(180deg,#ffd781,#ff9b3d);color:#2a1406}
.hlCamBtn.on{color:#2a1406;background:linear-gradient(180deg,#fff6e2,#f0d7a6);box-shadow:inset 0 1px 0 #fff,0 3px 0 #a77a3c;border:0}
.hlCloseBtn,.hlCloseBtn:hover{color:#ffb3a8;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,122,107,.5);border:0}
.hlTime{font:800 13px/1 var(--disp);color:#ffad47}
.hlSlider{height:8px;border-radius:999px;background:#090e17;box-shadow:inset 0 0 0 1px rgba(214,226,250,.22)}
.hlSlider:hover{background:#0d1420}
.hlSlider::-webkit-slider-thumb{width:20px;height:20px;border:0;background:linear-gradient(180deg,#ffd781,#ff9b3d);box-shadow:0 0 0 3px rgba(8,12,19,.9),0 2px 0 #b0560f}
.hlSlider::-moz-range-thumb{width:20px;height:20px;border:0;background:linear-gradient(180deg,#ffd781,#ff9b3d);box-shadow:0 0 0 3px rgba(8,12,19,.9)}
@media(max-width:480px){.hlBtn{min-height:36px;padding:0 9px;font-size:12px}}

/* ---------- cards over the table: the hazard intro, the online badge, the Solo bar, quick chat ---------- */
/* The first-time card (app/hazardIntro.js), one look for Bowling's threats,
   a new table and a new mode: the menu's sheet (navy plate under an amber
   line), an amber kicker plate like the threat machine's "TTDD LANE SHOW"
   plate, the name in italic capitals, cream picture tiles framed in amber
   like the machine's cards, and the amber toy key (.btn--play, from menu.css
   through the card's `ui` class). */
#hazardIntro{padding:14px 16px 14px;border:0;border-radius:var(--r-4,22px);color:var(--text);font:400 var(--fs-3)/1.35 var(--font-body);text-align:left;
  background:linear-gradient(180deg,rgba(29,42,63,.97),rgba(16,24,38,.97));
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.16),inset 0 3px 0 var(--amber),0 6px 0 var(--plate-edge),0 18px 36px rgba(0,0,0,.55)}
#hazardIntro .hiTitle{display:inline-flex;align-items:center;padding:5px 10px;border-radius:var(--r-pill);background:var(--inset);
  box-shadow:inset 0 0 0 1px rgba(255,173,71,.55);color:var(--amber);font:700 var(--fs-1)/1 var(--font-disp);letter-spacing:.2em;text-transform:uppercase}
#hazardIntro .hiHead{margin:8px 0 0;font:800 italic var(--fs-7)/1 var(--font-disp);letter-spacing:.01em;text-transform:uppercase;color:var(--text);
  text-shadow:0 2px 0 var(--plate-edge)}
#hazardIntro ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
#hazardIntro li{display:flex;gap:12px;align-items:center}
#hazardIntro .hiIcon{flex:0 0 48px;height:48px;display:grid;place-items:center;border-radius:var(--r-2);
  background:linear-gradient(180deg,#fff8e6,#f1ddb0);box-shadow:inset 0 0 0 2px #e8ad49,0 0 12px rgba(255,173,71,.3),0 3px 0 var(--plate-edge)}
#hazardIntro .hiIcon svg{width:38px;height:38px}
#hazardIntro .hiText{display:flex;flex-direction:column;gap:2px;min-width:0}
#hazardIntro .hiText b{font:800 italic var(--fs-4)/1.1 var(--font-disp);letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
#hazardIntro .hiLine{font:500 var(--fs-3)/1.3 var(--font-body);color:var(--text-2)}
#hazardIntro .hiTip{font:700 italic var(--fs-2)/1.2 var(--font-disp);letter-spacing:.04em;text-transform:uppercase;color:var(--amber-hi)}
#hazardIntro .hiTip::before{content:'';display:inline-block;width:10px;height:2px;margin:0 6px 3px 0;vertical-align:middle;background:var(--amber)}
#hazardIntro .hiOk{display:flex;margin:14px 0 0 auto}
/* OB4: the strip -- a mode, table or threat card that never holds the turn: same plate, no tips, no key, no taps, gone after 4 s */
#hazardIntro.hi-strip{padding:8px 12px 9px;pointer-events:none;border-radius:var(--r-3,16px)}
#hazardIntro.hi-strip .hiTitle{padding:3px 8px;font-size:11px}
#hazardIntro.hi-strip .hiHead{display:inline-block;margin:0 0 0 8px;font-size:var(--fs-5,18px);vertical-align:middle}
#hazardIntro.hi-strip ul{margin:7px 0 0;gap:5px}
#hazardIntro.hi-strip .hiIcon{flex-basis:32px;height:32px}
#hazardIntro.hi-strip .hiIcon svg{width:26px;height:26px}
#hazardIntro.hi-strip .hiText b{font-size:var(--fs-3,14px)}
#hazardIntro.hi-strip .hiLine{font-size:var(--fs-2,13px);line-height:1.2}
#hazardIntro.hi-strip :is(.hiTip,.hiOk){display:none}
#challengeHud{border:0!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(29,42,63,.95),rgba(16,24,38,.95))!important;
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.16),inset 0 3px 0 #ffad47,0 4px 0 #04070c}
#challengeHud b{color:#ffad47!important;font:800 italic 16px/1.1 var(--disp)}
#netBadge{border-radius:999px}
#qcSheet{border:0;border-radius:18px;background:linear-gradient(180deg,rgba(29,42,63,.97),rgba(16,24,38,.97));
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.16),inset 0 3px 0 #ffad47,0 6px 0 #04070c,0 18px 36px rgba(0,0,0,.55)}
#qcSheet .qcPhrases button,#qcSheet .qcMute{border:0;border-radius:12px;font:800 italic 13px/1.1 var(--disp);color:#f5f1e8;
  background:linear-gradient(180deg,#25344d,#172235);box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),0 3px 0 #04070c}
#qcBtn svg{fill:none;stroke:#f5f1e8}
/* the replay's symbol keys (restart, play/pause, speed) stay upright */
#bHlRestart,.hlPlayBtn,.hlSpeedBtn{font-style:normal;min-width:44px}
/* Bowling's scorecard (tap the banner) */
#scoreCardSheet{border:0;border-radius:18px;padding:14px;background:linear-gradient(180deg,rgba(29,42,63,.98),rgba(16,24,38,.98));
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.16),inset 0 3px 0 #ffad47,0 6px 0 #04070c,0 18px 40px rgba(0,0,0,.6)}
#scoreCardSheet .scorecard{border-radius:12px;overflow:hidden}
#scoreCardSheet .scorecard th,#scoreCardSheet .scorecard td{border-color:rgba(179,197,232,.12)}
#scoreCardSheet .scorecard thead th{font:600 11px/1.2 var(--disp);letter-spacing:.14em;color:#8f9fb6}
#scoreCardSheet .scClose{min-height:46px;border:0;border-radius:12px;font:800 italic 16px/1 var(--disp);text-transform:uppercase;color:#f5f1e8;
  background:linear-gradient(180deg,#25344d,#172235);box-shadow:inset 0 0 0 1px rgba(214,226,250,.18),0 4px 0 #04070c}

/* ---------- the coach of the first matches (app/coach.js): Bowling's hand, a ring, one line ---------- */
#coach{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
#coach.show{opacity:1}
#coach.show .ccText{transform:translateX(-50%)}   /* the line rises 6px into place as the coach fades in */
#coach .ccHand,#coach .ccTrail,#coach .ccRing{display:none;position:absolute;left:var(--hx,50%);top:var(--hy,50%)}
#coach .ccHand{width:44px;height:44px;margin:-6px 0 0 -18px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
#coach .ccRing{width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;box-shadow:0 0 0 3px var(--amber,#ffad47),0 0 18px rgba(255,173,71,.6);animation:ccPulse 1.4s ease-out infinite}
#coach .ccTrail{width:4px;height:90px;margin-left:-2px;border-radius:2px;background:linear-gradient(rgba(255,214,90,.9),rgba(255,214,90,0));transform-origin:top;animation:btTrail 2.2s cubic-bezier(.4,0,.2,1) infinite}
#coach.cc-press :is(.ccHand,.ccRing),#coach.cc-drag :is(.ccHand,.ccTrail),#coach.cc-sweep .ccHand{display:block}
#coach.cc-press .ccHand{animation:ccTap 1.4s ease-in-out infinite}
#coach.cc-drag .ccHand{animation:btDrag 2.2s cubic-bezier(.4,0,.2,1) infinite}
#coach.cc-sweep .ccHand{animation:ccSweep 2.6s ease-in-out infinite}
#coach .ccText{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 96px);transform:translate(-50%,6px);transition:transform var(--dur-2) var(--ease-out);
  width:max-content;max-width:calc(100vw - 32px);padding:10px 18px;border-radius:999px;color:#f5f1e8;text-align:center;
  background:linear-gradient(180deg,rgba(29,42,63,.96),rgba(16,24,38,.96));
  box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.6),0 4px 0 #04070c,0 10px 22px rgba(0,0,0,.5);font:800 italic 16px/1.2 var(--disp);letter-spacing:.02em;text-transform:uppercase}
/* the camera tutorial (K1-K5): two dots for pinch / pan, a hand on the wheel, a hand tapping twice, a progress hint and Skip */
#coach .ccDot{display:none;position:absolute;left:var(--hx,50%);top:var(--hy,50%);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:rgba(255,255,255,.85);box-shadow:0 0 0 3px rgba(20,23,29,.7),0 3px 8px rgba(0,0,0,.5)}
#coach.cc-pinch :is(.ccDotA,.ccDotB),#coach.cc-pan :is(.ccDotA,.ccDotB){display:block}
#coach.cc-pinch .ccDotA{animation:ccPinchA 1.8s ease-in-out infinite}
#coach.cc-pinch .ccDotB{animation:ccPinchB 1.8s ease-in-out infinite}
#coach.cc-pan .ccDotA{animation:ccPanA 2s ease-in-out infinite}
#coach.cc-pan .ccDotB{animation:ccPanB 2s ease-in-out infinite}
#coach.cc-wheel .ccHand,#coach.cc-dtap .ccHand{display:block}
#coach.cc-wheel .ccHand{animation:ccWheel 1.6s ease-in-out infinite}
#coach.cc-dtap .ccHand{animation:ccDTap 1.8s ease-in-out infinite}
#coach.cc-dtap.ringed .ccRing{display:block}
/* the control tips (K6 the camera key, K7 the car arrows): the ring pulses on the button, the line closes on a tap */
#coach.cc-tip .ccRing{display:block}
#coach.show.cc-tip .ccText{pointer-events:auto;cursor:pointer}
#coach .ccSkip{display:none;position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 156px);transform:translateX(-50%);min-height:44px;min-width:88px;padding:0 22px;
  border:0;border-radius:999px;color:#f5f1e8;font:800 italic 14px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(37,52,77,.96),rgba(22,32,48,.96));box-shadow:inset 0 0 0 1.5px rgba(214,226,250,.3),0 3px 0 #04070c}
#coach.show.cam .ccSkip{display:block;pointer-events:auto}
#coach.still :is(.ccDotA,.ccDotB){animation:none}
#coach.still.cc-pinch .ccDotA{transform:translateX(-22px)}
#coach.still.cc-pinch .ccDotB{transform:translateX(22px)}
@keyframes ccPinchA{0%{transform:translateX(-70px)}60%,100%{transform:translateX(-16px)}}
@keyframes ccPinchB{0%{transform:translateX(70px)}60%,100%{transform:translateX(16px)}}
@keyframes ccPanA{0%{transform:translateX(-70px)}100%{transform:translateX(40px)}}
@keyframes ccPanB{0%{transform:translateX(-30px)}100%{transform:translateX(80px)}}
@keyframes ccWheel{0%,100%{transform:translateY(24px)}50%{transform:translateY(-24px)}}
@keyframes ccDTap{0%,60%,100%{transform:translate(10px,14px) scale(1)}10%,30%{transform:translate(4px,6px) scale(.88)}20%,40%{transform:translate(10px,14px) scale(1)}}
#coach.still :is(.ccHand,.ccRing,.ccTrail){animation:none}
#coach.still.cc-drag .ccHand{transform:translateY(60px)}
@keyframes ccPulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.3);opacity:.35}}
@keyframes ccTap{0%,100%{transform:translate(10px,14px) scale(1)}45%{transform:translate(4px,6px) scale(.88)}55%{transform:translate(4px,6px) scale(.88)}}
@keyframes ccSweep{0%{transform:translateX(-90px);opacity:0}15%{opacity:1}75%{transform:translateX(90px);opacity:1}100%{transform:translateX(90px);opacity:0}}
/* the coach speaks for the how-to line while it is on */
body.coaching .bottom .hint{visibility:hidden}
#coach.show.rule .ccText{pointer-events:auto;cursor:pointer}   /* a rules line closes on a tap (the message hold ends with it) */
@media(max-height:480px){#coach .ccText{top:calc(env(safe-area-inset-top) + 70px)}}

/* OB3 (onboarding redo): the ghost line of C3 (green when the shot would knock a car off), a ring alone for a mode's lesson, and the
   comic stamps of the rules and the first-time lessons (app/lessonStamps.js). Screen furniture: only the stamp layer exists, no taps. */
#coach .ccGhost{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#coach.cc-ghost.hasGhost .ccGhost{display:block}
#coach .ccGhostLine{stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:2 13;opacity:.9;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
#coach .ccGhostEnd{fill:rgba(255,255,255,.3);stroke:#fff;stroke-width:3}
#coach.green .ccGhostLine{stroke:#5dff8a}
#coach.green .ccGhostEnd{fill:rgba(93,255,138,.35);stroke:#5dff8a}
#coach.green .ccText{box-shadow:inset 0 0 0 1.5px #5dff8a,0 4px 0 #04070c,0 10px 22px rgba(0,0,0,.5)}
#coach.cc-ring .ccRing{display:block}
#coach .ccText:empty{display:none}
#lessonStamps{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}
#lessonStamps .lessonStamp.small{top:17%;font-size:clamp(26px,8.4vw,52px);-webkit-text-stroke:6px #2a0716}
#lessonStamps .lessonStamp.big{top:17%;font-size:clamp(44px,14vw,92px)}
#lessonStamps .lessonStamp small{display:block;margin-top:8px;font:800 italic clamp(15px,4.4vw,22px)/1.1 var(--disp);-webkit-text-stroke:0;color:#fff4d6;text-shadow:0 2px 0 #2a0716,0 0 12px #000a;text-align:center}
@media(max-height:480px){#lessonStamps .lessonStamp{top:22%}}

/* Name-plate frames (app/collection.js, src/collectionCore.js): a ring and a small mark on the local player's plate only.
   Pure CSS, view-only, nothing to replay (the HUD is not part of a turn). */
#plate0.plateFx-checker,#plate1.plateFx-checker,.plateChip.plateFx-checker{box-shadow:inset 0 0 0 2px #e9eef5,0 0 0 2px #0a1017;background-image:repeating-conic-gradient(rgba(255,255,255,.12) 0 25%,transparent 0 50%);background-size:12px 12px}
#plate0.plateFx-flame,#plate1.plateFx-flame,.plateChip.plateFx-flame{box-shadow:inset 0 0 0 2px #ff7a3c,0 0 14px rgba(255,104,57,.55)}
#plate0.plateFx-crown,#plate1.plateFx-crown,.plateChip.plateFx-crown{box-shadow:inset 0 0 0 2px #b8c4d6,0 0 12px rgba(170,200,255,.45)}
#plate0.plateFx-crown .who::before,#plate1.plateFx-crown .who::before{content:"\1F451\00a0"}
#plate0.plateFx-family,#plate1.plateFx-family,.plateChip.plateFx-family{box-shadow:inset 0 0 0 2px #6fd6a0,0 0 12px rgba(111,214,160,.4)}
#plate0.plateFx-family .who::before,#plate1.plateFx-family .who::before{content:"\1F3E0\00a0"}
#plate0.plateFx-heart,#plate1.plateFx-heart,.plateChip.plateFx-heart{box-shadow:inset 0 0 0 2px #ff6f9c}
#plate0.plateFx-puddle,#plate1.plateFx-puddle,.plateChip.plateFx-puddle{box-shadow:inset 0 0 0 2px #5aa9e6}
#plate0.plateFx-sun,#plate1.plateFx-sun,.plateChip.plateFx-sun{box-shadow:inset 0 0 0 2px #ff9a3c}
#plate0.plateFx-wave,#plate1.plateFx-wave,.plateChip.plateFx-wave{box-shadow:inset 0 0 0 2px #2fc4d6}
#plate0.plateFx-trophy,#plate1.plateFx-trophy,.plateChip.plateFx-trophy{box-shadow:inset 0 0 0 2px #c3ccd8}
#plate0.plateFx-leaf,#plate1.plateFx-leaf,.plateChip.plateFx-leaf{box-shadow:inset 0 0 0 2px #8bbf4c}
#plate0.plateFx-harvest,#plate1.plateFx-harvest,.plateChip.plateFx-harvest{box-shadow:inset 0 0 0 2px #b4632d}
#plate0.plateFx-star,#plate1.plateFx-star,.plateChip.plateFx-star{box-shadow:inset 0 0 0 2px #9cb7ff}
#plate0.plateFx-pumpkin,#plate1.plateFx-pumpkin,.plateChip.plateFx-pumpkin{box-shadow:inset 0 0 0 2px #e05a10}
#plate0.plateFx-snow,#plate1.plateFx-snow,.plateChip.plateFx-snow{box-shadow:inset 0 0 0 2px #cfe6ff}
#plate0.plateFx-meadow,#plate1.plateFx-meadow,.plateChip.plateFx-meadow{box-shadow:inset 0 0 0 2px #2f9e55}
#plate0.plateFx-lagoon,#plate1.plateFx-lagoon,.plateChip.plateFx-lagoon{box-shadow:inset 0 0 0 2px #0f8a9d}

/* the rank line under a player's name (app/masteryUi.js drawRank): the badge chip, "Lv 12 · Title" */
.plate .rank{display:flex;align-items:center;gap:4px;margin-top:1px;font:600 10px/1.2 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#d7dde2;white-space:nowrap;overflow:hidden}
.plate .rank[hidden]{display:none}
.rkBadge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:10px;line-height:1;box-shadow:inset 0 0 0 1.5px #0007}
.rkBadge.t1{background:#b87333}.rkBadge.t2{background:#c0c7cf}.rkBadge.t3{background:#f2b632}.rkBadge.t4{background:#7fd6d0}.rkBadge.t5{background:#9fc8ff}
@media (max-width:560px){.plate .rank{font-size:9px}}

/* The Replay button's hint (app/replayHint.js): a glow on the button, a small arrow above it, one small bubble the first time.
   Nothing covers the table; only the first-time bubble takes a tap (to close itself). */
@keyframes rh-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,173,71,.0),0 0 10px 2px rgba(255,173,71,.55)}50%{box-shadow:0 0 0 6px rgba(255,173,71,.18),0 0 18px 6px rgba(255,173,71,.85)}}
@keyframes rh-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
#bReplayLast.replayGlow{animation:rh-glow 1s ease-in-out infinite;box-shadow:0 0 18px 5px rgba(255,173,71,.8)}
#replayHint{position:fixed;z-index:9;pointer-events:none}
#replayHint.arrow{left:0;width:0}
#replayHint .rhTip{position:absolute;left:var(--ax);bottom:-2px;transform:translateX(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:15px solid #ffad47;filter:drop-shadow(0 2px 0 #2a1406);animation:rh-bob .6s ease-in-out infinite}
#replayHint.lesson{max-width:200px;pointer-events:auto;padding:8px 11px 14px;border-radius:12px;background:#0e1720f5;border:1px solid #ffffff2e;border-left:3px solid #ffad47;box-shadow:0 8px 25px #0005}
#replayHint.lesson .rhTip{bottom:-13px;left:calc(var(--ax) - var(--bx, 0px))}
#replayHint .rhText{display:block;font:800 italic 13px/1.2 var(--disp);color:#f5f1e8}
#replayHint.still .rhTip{animation:none}
.derby-reduced-motion #replayHint .rhTip{animation:none}
.derby-reduced-motion #bReplayLast.replayGlow{animation:none}
@media(prefers-reduced-motion:reduce){#replayHint .rhTip,#bReplayLast.replayGlow{animation:none}}
/* A name plate drawn small (the Garage's Plates tab, the result sheet's player names): the HUD ring above, plus the same mark on the
   frames that have one. */
.plateChip{display:inline-block;max-width:100%;padding:3px 10px;border-radius:8px;background:rgba(10,16,23,.72);color:#fff;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.plateChip.plateFx-crown::before{content:"\1F451\00a0"}
.plateChip.plateFx-family::before{content:"\1F3E0\00a0"}
.plateChip.plateFx-plain{box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}