/* ============================================================
   CLOSE CALL — CRT arcade cabinet aesthetic
   Midnight synthwave: deep indigo room, neon coral / cyan / amber
   ============================================================ */

:root {
  --bg-room:    #050409;
  --bezel:      #16102a;
  --ink:        #e8e4ff;
  --dim:        #8d83b8;
  --neon-red:   #ff3b5c;
  --neon-cyan:  #2ce8f5;
  --neon-amber: #ffb02e;
  --neon-green: #39ff88;
  --panel-bg:   rgba(10, 7, 22, 0.92);
  --mono: "Lucida Console", "OCR A Extended", Consolas, "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, #150e2e 0%, var(--bg-room) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  color: var(--ink);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}

/* ===== The cabinet screen ===== */
#stage {
  position: relative;
  width: min(96vw, calc(94vh * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 4px solid var(--bezel);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px #2a1f4d,
    0 0 60px rgba(255, 59, 92, 0.10),
    0 0 120px rgba(44, 232, 245, 0.07),
    0 30px 80px rgba(0, 0, 0, 0.8),
    inset 0 0 80px rgba(0, 0, 10, 0.5);
  background: #0a0716;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
}

/* ===== CRT dressing ===== */
#scanlines {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.16) 0px,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  animation: crt-flicker 4s infinite steps(1);
  z-index: 40;
}

@keyframes crt-flicker {
  0%, 92%, 100% { opacity: 0.85; }
  93%           { opacity: 0.70; }
  94%           { opacity: 0.88; }
}

#vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, rgba(2, 0, 12, 0.55) 100%);
  z-index: 41;
}

.hidden { display: none !important; }

/* ============================================================
   HUD
   ============================================================ */
#hud {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 20;
  text-shadow: 0 0 8px rgba(44, 232, 245, 0.35), 0 2px 0 rgba(0, 0, 0, 0.6);
}

.hud-block { position: absolute; top: 18px; }
.hud-left   { left: 24px; }
.hud-center { left: 50%; transform: translateX(-50%); text-align: center; }
.hud-right  { right: 24px; text-align: right; }

.hud-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--dim);
}

.hud-big {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1.1;
  color: var(--ink);
}

#hud-time.low {
  color: var(--neon-red);
  animation: blink-fast 0.5s infinite steps(2);
}

#hud-dist.near { color: var(--neon-red); text-shadow: 0 0 12px rgba(255, 59, 92, 0.8); }

#hud-score.pulse { animation: score-pulse 0.45s ease-out; }
@keyframes score-pulse {
  0%   { transform: scale(1);    color: var(--ink); }
  30%  { transform: scale(1.35); color: var(--neon-cyan); text-shadow: 0 0 24px var(--neon-cyan); }
  100% { transform: scale(1); }
}

/* combo chip — heats up with the multiplier */
.combo-chip {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  font-size: 13px;
  letter-spacing: 2px;
  border: 1px solid var(--dim);
  color: var(--dim);
  border-radius: 3px;
}
.combo-chip.c2 { color: var(--neon-cyan);  border-color: var(--neon-cyan);  box-shadow: 0 0 10px rgba(44,232,245,.35); }
.combo-chip.c3 { color: var(--neon-green); border-color: var(--neon-green); box-shadow: 0 0 12px rgba(57,255,136,.4); }
.combo-chip.c4 { color: var(--neon-amber); border-color: var(--neon-amber); box-shadow: 0 0 14px rgba(255,176,46,.45); }
.combo-chip.c5 {
  color: var(--neon-red); border-color: var(--neon-red);
  box-shadow: 0 0 18px rgba(255,59,92,.6);
  animation: blink-fast 0.6s infinite steps(2);
}

/* traffic-light state dots */
.light-dots {
  display: inline-flex;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: rgba(5, 3, 14, 0.7);
  border: 1px solid #2a1f4d;
  border-radius: 20px;
}
.light-dots .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #241b3e;
}
.light-dots[data-state="red"]    .dot.red    { background: var(--neon-red);   box-shadow: 0 0 12px var(--neon-red); }
.light-dots[data-state="yellow"] .dot.yellow { background: var(--neon-amber); box-shadow: 0 0 12px var(--neon-amber); }
.light-dots[data-state="green"]  .dot.green  { background: var(--neon-green); box-shadow: 0 0 12px var(--neon-green); }

#hud-speed {
  position: absolute;
  right: 36px; bottom: 96px;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--neon-cyan);
  text-shadow: 0 0 14px rgba(44, 232, 245, 0.6);
}
#hud-speed .kmh { font-size: 13px; margin-left: 6px; color: var(--dim); }

/* speed-bonus territory: amber when hot, pulsing red at full speed */
#hud-speed.hot {
  color: var(--neon-amber);
  text-shadow: 0 0 16px rgba(255, 176, 46, 0.7);
}
#hud-speed.max {
  color: var(--neon-red);
  text-shadow: 0 0 18px rgba(255, 59, 92, 0.85);
  animation: blink-fast 0.5s infinite steps(2);
}

#hud-mode {
  position: absolute;
  left: 50%; top: 76px;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--neon-amber);
  border: 1px dashed rgba(255, 176, 46, 0.5);
  padding: 3px 12px;
}

/* turbo gauge — bottom-left, three pips that drain as you spend them */
#hud-turbo {
  position: absolute;
  left: 24px; bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#hud-turbo .turbo-label {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--dim);
}
#hud-turbo .turbo-pips { display: flex; gap: 7px; }
#hud-turbo .turbo-pips i {
  width: 26px; height: 9px;
  border-radius: 2px;
  transform: skewX(-18deg);
  background: #241b3e;
  border: 1px solid #2a1f4d;
  transition: background 0.15s, box-shadow 0.15s;
}
#hud-turbo .turbo-pips i.on {
  background: var(--neon-amber);
  border-color: var(--neon-amber);
  box-shadow: 0 0 10px rgba(255, 176, 46, 0.6);
}
#hud-turbo.active .turbo-pips i.on {
  background: var(--neon-red);
  border-color: var(--neon-red);
  box-shadow: 0 0 14px rgba(255, 59, 92, 0.85);
}
#hud-turbo.active .turbo-label {
  color: var(--neon-red);
  text-shadow: 0 0 10px rgba(255, 59, 92, 0.7);
}

/* ============================================================
   Feedback messages ("PERFECT STOP!" etc.)
   ============================================================ */
#feedback-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 25;
}

.fb {
  position: absolute;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  animation: fb-pop 1.5s cubic-bezier(0.16, 1.4, 0.3, 1) forwards;
}
.fb .fb-main {
  font-size: 46px;
  font-weight: bold;
  letter-spacing: 6px;
}
.fb .fb-sub {
  margin-top: 4px;
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--ink);
  opacity: 0.9;
}

@keyframes fb-pop {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  12%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  20%  { transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; }
  100% { transform: translate(-50%, -62%) scale(1); opacity: 0; }
}

.fb-perfect .fb-main {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 40px var(--neon-cyan), 3px 3px 0 var(--neon-red);
}
.fb-close .fb-main {
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green), 0 0 30px rgba(57, 255, 136, 0.7);
}
.fb-good .fb-main {
  color: var(--ink);
  text-shadow: 0 0 16px rgba(232, 228, 255, 0.7);
}
.fb-yellow .fb-main {
  color: var(--neon-amber);
  text-shadow: 0 0 10px var(--neon-amber), 0 0 30px rgba(255, 176, 46, 0.6);
}
.fb-dim .fb-main {
  font-size: 30px;
  color: var(--dim);
  text-shadow: 0 0 10px rgba(141, 131, 184, 0.6);
}
.fb-bad .fb-main {
  color: var(--neon-red);
  text-shadow: 0 0 12px var(--neon-red), 0 0 50px var(--neon-red);
  animation: bad-shudder 0.3s linear 2;
}
.fb-go .fb-main {
  color: var(--neon-amber);
  text-shadow: 0 0 14px var(--neon-amber), 3px 3px 0 var(--neon-red);
}

@keyframes bad-shudder {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ============================================================
   Practice hint bar
   ============================================================ */
#hint {
  position: absolute;
  left: 50%; bottom: 132px;
  transform: translateX(-50%);
  z-index: 22;
  pointer-events: none;
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--neon-amber);
  background: rgba(8, 5, 18, 0.85);
  border: 1px solid rgba(255, 176, 46, 0.55);
  border-radius: 4px;
  padding: 9px 22px;
  text-shadow: 0 0 10px rgba(255, 176, 46, 0.5);
  box-shadow: 0 0 24px rgba(255, 176, 46, 0.12);
}
#hint::after {
  content: "▌";
  animation: blink-fast 0.9s infinite steps(2);
  margin-left: 6px;
}

/* ============================================================
   Overlays (title / tutorial / game over)
   ============================================================ */
.overlay {
  position: absolute; inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(ellipse 90% 80% at 50% 40%, rgba(10, 6, 26, 0.55) 0%, rgba(5, 3, 14, 0.88) 100%);
  text-align: center;
}

/* big chromatic-aberration title */
.game-title {
  position: relative;
  font-size: 84px;
  letter-spacing: 14px;
  color: var(--ink);
  text-shadow:
    0 0 18px rgba(232, 228, 255, 0.45),
    -3px 0 0 rgba(44, 232, 245, 0.85),
    3px 0 0 rgba(255, 59, 92, 0.85);
  animation: title-hum 3.2s infinite;
}
.game-title.small { font-size: 56px; letter-spacing: 10px; }

@keyframes title-hum {
  0%, 100% { text-shadow: 0 0 18px rgba(232,228,255,.45), -3px 0 0 rgba(44,232,245,.85), 3px 0 0 rgba(255,59,92,.85); }
  48%      { text-shadow: 0 0 26px rgba(232,228,255,.6),  -4px 0 0 rgba(44,232,245,.95), 4px 0 0 rgba(255,59,92,.95); }
  50%      { text-shadow: 0 0 10px rgba(232,228,255,.3),  -2px 1px 0 rgba(44,232,245,.7), 2px -1px 0 rgba(255,59,92,.7); }
}

.tagline {
  font-size: 15px;
  letter-spacing: 8px;
  color: var(--neon-amber);
  text-shadow: 0 0 12px rgba(255, 176, 46, 0.5);
}

.press-start {
  font-size: 17px;
  letter-spacing: 4px;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(44, 232, 245, 0.6);
}

.blink { animation: blink-soft 1.2s infinite steps(2); }
@keyframes blink-soft { 50% { opacity: 0.25; } }
@keyframes blink-fast { 50% { opacity: 0.2; } }

/* ===== start-menu mode selector ===== */
.mode-select {
  display: flex;
  gap: 22px;
  justify-content: center;
}
.mode-card {
  cursor: pointer;
  width: 210px;
  padding: 18px 20px 16px;
  background: rgba(10, 7, 22, 0.7);
  border: 2px solid #2a1f4d;
  border-radius: 6px;
  text-align: center;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.mode-card:hover { transform: translateY(-2px); border-color: var(--dim); }
.mode-card .mode-name {
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--ink);
}
.mode-card .mode-sub {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--neon-amber);
}
.mode-card .mode-desc {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 1px;
  color: var(--dim);
}
.mode-card.selected {
  border-color: var(--neon-cyan);
  background: rgba(44, 232, 245, 0.08);
  box-shadow: 0 0 26px rgba(44, 232, 245, 0.25), inset 0 0 30px rgba(44, 232, 245, 0.05);
  transform: translateY(-2px);
}
.mode-card.selected .mode-name {
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(44, 232, 245, 0.6);
}

.controls-grid {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--dim);
}

kbd {
  font-family: inherit;
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  margin: 0 2px;
  border: 1px solid #3b2d66;
  border-bottom-width: 3px;
  border-radius: 4px;
  background: #140e2a;
  color: var(--ink);
  font-size: 12px;
}

.footer-note {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--dim);
  opacity: 0.8;
}

/* decorative animated traffic light on the title screen */
.deco-light {
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  background: #0c0820;
  border: 2px solid #241b3e;
  border-radius: 30px;
}
.deco-light i {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #1c1535;
}
.deco-light .r { animation: cyc-r 4.5s infinite steps(1); }
.deco-light .y { animation: cyc-y 4.5s infinite steps(1); }
.deco-light .g { animation: cyc-g 4.5s infinite steps(1); }
@keyframes cyc-g { 0%, 44%  { background: var(--neon-green); box-shadow: 0 0 16px var(--neon-green); } 45%, 100% { background: #1c1535; box-shadow: none; } }
@keyframes cyc-y { 45%, 59% { background: var(--neon-amber); box-shadow: 0 0 16px var(--neon-amber); } 0%, 44%, 60%, 100% { background: #1c1535; box-shadow: none; } }
@keyframes cyc-r { 60%, 99% { background: var(--neon-red);   box-shadow: 0 0 16px var(--neon-red); }   0%, 59%, 100% { background: #1c1535; box-shadow: none; } }

/* ===== tutorial panel ===== */
.panel {
  position: relative;
  width: min(580px, 84%);
  padding: 36px 44px 30px;
  background: var(--panel-bg);
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 30px rgba(44, 232, 245, 0.18), inset 0 0 50px rgba(44, 232, 245, 0.05);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  text-align: left;
}

.panel-step {
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--neon-amber);
  margin-bottom: 12px;
}

.panel h2 {
  font-size: 27px;
  letter-spacing: 4px;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(44, 232, 245, 0.5);
  margin-bottom: 16px;
}

.panel p {
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 1px;
  color: var(--ink);
  min-height: 80px;
}
.panel p em { color: var(--neon-amber); font-style: normal; }
.panel p strong { color: var(--neon-red); font-weight: bold; }

.panel-hint {
  position: absolute;
  right: 44px; bottom: 12px;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--dim);
}

/* ===== buttons ===== */
.neon-btn {
  pointer-events: auto;
  cursor: pointer;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 4px;
  color: var(--neon-cyan);
  background: transparent;
  border: 2px solid var(--neon-cyan);
  padding: 10px 30px;
  border-radius: 3px;
  transition: all 0.12s ease-out;
  text-shadow: 0 0 8px rgba(44, 232, 245, 0.5);
}
.neon-btn:hover {
  background: var(--neon-cyan);
  color: #06040f;
  box-shadow: 0 0 26px rgba(44, 232, 245, 0.7);
  text-shadow: none;
}
.neon-btn:active { transform: scale(0.96); }

/* ===== game-over stats ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 220px));
  gap: 14px 40px;
}
.stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid #2a1f4d;
  padding-bottom: 6px;
}
.stat-label { font-size: 12px; letter-spacing: 3px; color: var(--dim); }
.stat-val {
  font-size: 26px;
  font-weight: bold;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(44, 232, 245, 0.5);
}
.stat-val.danger { color: var(--neon-red); text-shadow: 0 0 10px rgba(255, 59, 92, 0.5); }

/* ============================================================
   Mobile-first: touch controls, full-bleed layout, rotate prompt
   ============================================================ */
body { overscroll-behavior: none; }
#stage { touch-action: none; }
.overlay, .neon-btn { touch-action: manipulation; }
.touch-only { display: none; }

/* ===== on-screen driving controls ===== */
#touch-controls {
  position: absolute; inset: 0;
  z-index: 26;
  display: none;            /* enabled only for coarse pointers, below */
  pointer-events: none;
}
.tc-cluster {
  position: absolute;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.tc-steer { left: calc(16px + env(safe-area-inset-left, 0px)); }
.tc-drive { right: calc(16px + env(safe-area-inset-right, 0px)); }

.tc-btn {
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--ink);
  background: rgba(10, 7, 22, 0.5);
  border: 2px solid #3b2d66;
  border-radius: 14px;
  width: 84px; height: 84px;
  text-shadow: 0 0 8px rgba(44, 232, 245, 0.35);
}
.tc-arrow { font-size: 28px; }
.tc-gas   { border-color: rgba(57, 255, 136, 0.55);  color: var(--neon-green); }
.tc-brake { border-color: rgba(255, 59, 92, 0.55);   color: var(--neon-red); }
.tc-turbo {
  width: 72px; height: 58px;
  font-size: 11px;
  border-color: rgba(255, 176, 46, 0.55);
  color: var(--neon-amber);
}
.tc-btn.held {
  background: rgba(44, 232, 245, 0.18);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 18px rgba(44, 232, 245, 0.4);
}

/* ===== small screens: edge-to-edge cabinet, tighter type ===== */
@media (max-width: 920px), (max-height: 560px) {
  #stage {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  #game { object-fit: contain; }

  .overlay { gap: 12px; padding: 10px; }
  .game-title { font-size: clamp(30px, 9vw, 56px); letter-spacing: 8px; }
  .game-title.small { font-size: clamp(24px, 7vw, 40px); letter-spacing: 6px; }
  .tagline { font-size: 11px; letter-spacing: 5px; }
  .press-start { font-size: 13px; letter-spacing: 3px; }
  .mode-select { gap: 12px; }
  .mode-card { width: 158px; padding: 10px 12px; }
  .mode-card .mode-name { font-size: 16px; letter-spacing: 3px; }
  .mode-card .mode-sub { font-size: 10px; }
  .mode-card .mode-desc { margin-top: 6px; font-size: 10px; }
  .footer-note { display: none; }
  .deco-light { padding: 6px 12px; }
  .deco-light i { width: 14px; height: 14px; }

  .hud-block { top: 10px; }
  .hud-left  { left: 14px; }
  .hud-right { right: 14px; }
  .hud-big { font-size: 24px; }
  .combo-chip { font-size: 11px; }
  #hud-mode { top: 54px; font-size: 10px; letter-spacing: 3px; }
  #hud-speed { font-size: 28px; right: 18px; }

  .fb .fb-main { font-size: 30px; letter-spacing: 3px; }
  .fb .fb-sub { font-size: 14px; letter-spacing: 2px; }
  .fb-dim .fb-main { font-size: 20px; }
  #hint { font-size: 12px; letter-spacing: 1px; bottom: 124px; padding: 7px 12px; }

  .panel { width: min(560px, 92%); padding: 18px 22px 16px; }
  .panel h2 { font-size: 18px; letter-spacing: 3px; margin-bottom: 8px; }
  .panel p { font-size: 12px; line-height: 1.6; min-height: 58px; }
  .panel-step { font-size: 10px; margin-bottom: 6px; }
  .neon-btn { margin-top: 10px; font-size: 13px; padding: 8px 22px; }

  .stats { grid-template-columns: repeat(2, minmax(120px, 180px)); gap: 8px 22px; }
  .stat-val { font-size: 18px; }
  .stat-label { font-size: 10px; letter-spacing: 2px; }
}

/* ===== coarse pointers: show touch controls, hide keyboard hints ===== */
@media (pointer: coarse) {
  .desktop-only { display: none !important; }
  .touch-only { display: block; }
  #touch-controls:not(.hidden) { display: block; }
  /* lift the bottom HUD clear of the buttons */
  #hud-speed { right: 18px; bottom: 134px; }
  #hud-turbo { left: 18px; bottom: 134px; }
  #hint { bottom: 170px; }
}

/* ===== portrait phones: ask for landscape ===== */
#rotate-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, #150e2e 0%, var(--bg-room) 70%);
  text-align: center;
}
.rotate-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rotate-card .rotate-icon {
  font-size: 64px;
  color: var(--neon-cyan);
  text-shadow: 0 0 18px rgba(44, 232, 245, 0.6);
  animation: rotate-hint 2.4s infinite;
}
.rotate-card p { font-size: 18px; letter-spacing: 6px; color: var(--ink); }
.rotate-card span { font-size: 10px; letter-spacing: 3px; color: var(--dim); }
@keyframes rotate-hint {
  0%, 25%   { transform: rotate(0deg); }
  55%, 100% { transform: rotate(90deg); }
}
@media (pointer: coarse) and (orientation: portrait) {
  #rotate-overlay { display: flex; }
}