.menu-game-tagline { max-width: 340px; min-height: 48px; margin: 12px 0 0; text-align: center; font: 14px/1.6 var(--mono); color: var(--cream60); visibility: hidden; }
.game-lobby:has([onclick="selectArcadeGame('track')"].menu-active) .menu-game-tagline { visibility: visible; }
body[data-screen='screen-track-it'] .topbar .arcade-brand-button { display: flex !important; }
#track-react-root { width: 100%; max-width: 1100px; margin: 16px auto; color: var(--cream); }
.track-game { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--ink); color: var(--cream); font-family: var(--mono); }
.track-hud { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font: 14px/1.5 var(--mono); }
.track-hud > div:first-child { flex-basis: 100%; color: var(--lav); }
.track-hud > div:last-child { color: var(--human); }
.track-legend { flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; color: var(--cream60); }
.track-hud > div:first-child { color: var(--machine); }
.track-stage { position: relative; display: grid; place-items: center; height: clamp(220px, 55dvh, 600px); min-width: 0; }
.tracking-canvas { display: block; max-width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: none; outline: 1px solid var(--cream14); }
.tracking-canvas.is-locked { outline: 2px solid var(--lav); }
/* Safari may suspend display:none video; keep the muted source rendered beneath the canvas. */
.track-video-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.track-countdown { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink); color: var(--cream); text-align: center; }
.track-countdown[data-phase='countdown'] { pointer-events: none; }
.track-countdown > div { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.track-countdown > div > div:first-child { font: 40px/1.5 var(--pixel); color: var(--lav); }
.track-countdown p { margin: 0; font: 14px/1.6 var(--mono); }
.track-countdown .mbtn { min-height: 48px; font: 14px/1.5 var(--pixel); }
.track-touch-controls { display: none; }
#track-react-root .track-result { position: fixed !important; inset: auto 0 0 !important; z-index: 1000; display: flex !important; justify-content: center; background: var(--ink) !important; overflow-y: auto; max-height: 80dvh; padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--cream40); }
#track-react-root .track-result-panel { width: min(680px, 100%) !important; padding: 20px !important; background: var(--ink) !important; border: 0 !important; color: var(--cream); }
.track-result-raccoon { display: block; width: 64px; height: 64px; margin: 0 auto 12px; image-rendering: pixelated; }
#track-react-root .track-result-title { font: 18px/1.6 var(--pixel) !important; text-align: center; }
#track-react-root .track-result-title span { color: var(--lav) !important; }
#track-react-root .track-result-panel div { font-size: 14px !important; letter-spacing: 0 !important; }
#track-react-root .track-result-panel .track-honesty { font: 14px/1.6 var(--mono); color: var(--cream60); }
.track-honesty summary { padding: 8px 0; cursor: pointer; }
.track-honesty p { margin: 8px 0; }
#track-react-root .track-result-panel button { position: sticky; bottom: 0; width: 100%; background: var(--lav) !important; color: var(--ink) !important; text-shadow: none !important; font: 14px/1.6 var(--pixel) !important; letter-spacing: 0 !important; min-height: 48px; }
.track-final-honesty { max-width: 680px; margin: 28px auto 0; text-align: left; color: var(--cream60); font: 14px/1.6 var(--mono); }
@media (pointer: coarse), (max-width: 700px) {
  .track-touch-controls { display: flex; flex-direction: column; gap: 8px; }
  .track-touch-controls p { font: 14px/1.5 var(--mono); color: var(--cream60); margin: 0; }
  .track-touchpad { display: grid; place-items: center; height: clamp(100px, 17dvh, 150px); border: 1px dashed var(--lav); background: var(--lav-dim); color: var(--lav); touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
  .track-touchpad span { pointer-events: none; font: 14px/1.5 var(--mono); }
  .track-game[data-phase='result'] .track-touch-controls { visibility: hidden; }
}
@media (max-width: 700px) {
  #track-react-root { margin: 12px auto; }
  .track-stage { height: clamp(180px, 34dvh, 340px); }
  .track-result-raccoon { display: none; }
  #track-react-root .track-result-panel { padding: 16px 20px !important; }
  .menu-game-tagline { max-width: 300px; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .track-stage { height: 30dvh; }
  .track-countdown > div { gap: 8px; padding: 8px; }
  .track-countdown > div > div:first-child { font-size: 28px; }
  .track-touchpad { height: 88px; }
  .track-hud { gap: 4px; }
}