.game-view { min-height: 100vh; min-height: 100dvh; }
.game-view::before {
  content: ""; position: fixed; inset: 78px 0 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,8,18,.82), transparent 18%, transparent 82%, rgba(7,8,18,.82));
}
.game-overlay { position: fixed; inset: 78px 0 0; pointer-events: none; }
.game-overlay button { pointer-events: auto; }
.track-meta {
  position: absolute; top: 22px; left: 26px; display: flex; gap: 7px; flex-wrap: wrap;
}
.track-meta span {
  padding: 7px 10px; border: 1px solid var(--edge); border-radius: 999px; color: var(--muted);
  background: rgba(10,12,24,.64); backdrop-filter: blur(12px); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em;
}
.track-meta span:first-child { color: var(--cyan); }
.judgement {
  position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%);
  font-weight: 900; font-size: clamp(1.8rem, 5vw, 4rem); letter-spacing: -.04em;
  text-transform: uppercase; opacity: 0; text-shadow: 0 0 24px currentColor;
}
.judgement.show { animation: judge .48s ease-out; }
@keyframes judge {
  0% { opacity: 0; transform: translate(-50%,-45%) scale(.75); }
  24% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%,-60%) scale(.96); }
}
.countdown {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 900; color: var(--cyan); text-shadow: 0 0 48px rgba(184,132,255,.5);
}
.key-hints {
  position: absolute; bottom: 74px; left: 50%; width: min(56vw, 640px); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
}
.key-hints span {
  text-align: center; color: rgba(255,255,255,.66); font: 800 .72rem ui-monospace, monospace;
  transition: transform .08s, color .08s;
}
.key-hints span.active { color: white; transform: translateY(4px); }
.touch-lanes { display: none; }
.transport {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px;
  padding: 6px; border: 1px solid var(--edge); border-radius: 13px; background: rgba(8,10,20,.74); backdrop-filter: blur(14px);
}
.transport button { min-width: 70px; min-height: 34px; padding: 0 10px; font-size: .59rem; text-transform: uppercase; letter-spacing: .065em; }
@media (max-width: 720px) {
  .game-view::before, .game-overlay { inset-block-start: calc(68px + env(safe-area-inset-top)); }
  .track-meta { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); top: 10px; gap: 5px; }
  .track-meta span { padding: 6px 8px; font-size: .52rem; }
  body[data-view="game"] .session-stats {
    position: fixed; z-index: 24; top: calc(78px + env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
    display: flex; gap: 12px; padding: 7px 9px; border: 1px solid var(--edge); border-radius: 10px;
    background: rgba(10,12,24,.7); backdrop-filter: blur(12px); pointer-events: none;
  }
  body[data-view="game"] .session-stats > div { min-width: 48px; }
  body[data-view="game"] .session-stats > div:nth-child(n+3) { display: none; }
  body[data-view="game"] .session-stats span { font-size: .48rem; }
  body[data-view="game"] .session-stats strong { margin-top: 2px; font-size: .68rem; }
  .key-hints { display: none; }
  .transport {
    width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    justify-content: center; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
    bottom: calc(6px + env(safe-area-inset-bottom)); padding: 5px;
  }
  .transport button { min-width: 0; min-height: 38px; padding: 0 5px; font-size: .54rem; }
}

@media (hover: none) and (pointer: coarse), (max-width: 720px) {
  .game-overlay { touch-action: none; }
  .touch-lanes {
    position: absolute; left: 50%; bottom: calc(94px + env(safe-area-inset-bottom));
    width: min(86vw, 640px); height: 88px; transform: translateX(-50%);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; pointer-events: auto;
  }
  .touch-lanes button {
    min-width: 0; padding: 0; border-radius: 13px; border-color: rgba(255,255,255,.24);
    background: linear-gradient(180deg, rgba(28,18,48,.7), rgba(10,9,22,.92));
    box-shadow: inset 0 1px rgba(255,255,255,.08); touch-action: none; user-select: none;
  }
  .touch-lanes button:nth-child(1) { --lane: #60a5fa; }
  .touch-lanes button:nth-child(2) { --lane: #a78bfa; }
  .touch-lanes button:nth-child(3) { --lane: #e879f9; }
  .touch-lanes button:nth-child(4) { --lane: #fb7185; }
  .touch-lanes button::before {
    content: ""; display: block; width: 34%; height: 4px; margin: 0 auto 10px;
    border-radius: 99px; background: var(--lane); box-shadow: 0 0 14px var(--lane);
  }
  .touch-lanes button span { color: rgba(255,255,255,.72); font: 800 .65rem ui-monospace, monospace; }
  .touch-lanes button.active {
    border-color: var(--lane); transform: translateY(3px);
    background: color-mix(in srgb, var(--lane) 26%, rgba(10,9,22,.94));
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 721px) {
  .touch-lanes { bottom: calc(68px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px), (max-height: 620px) {
  .touch-lanes { height: 70px; bottom: calc(92px + env(safe-area-inset-bottom)); }
  .track-meta span:nth-child(3), .track-meta span:nth-child(4) { display: none; }
}