/* Lane Splitter in the shared arcade cabinet (arcade-game.css). The road is a 720×820 canvas plus overlay layer, scaled by game.mjs. */
body.ch-game .ch-stage { max-width: 860px; margin: 10px auto; padding: 0 12px; gap: 8px; }
body.ch-game .ch-topbar { padding: 7px 12px; gap: 12px; }
body.ch-game .ch-hint { padding: 0; }
body.ch-game .ch-bezel { padding: 10px; box-sizing: border-box; width: 100%; max-width: calc(var(--board-width, 720px) + 20px); margin-left: auto; margin-right: auto; }
.ch-bezel .ch-coin { display: none; }
.ch-bezel #game-container { width: var(--board-width, 100%); max-width: 100%; max-height: none; margin: 0 auto; position: relative; overflow: hidden; border-radius: 8px; z-index: 1; }
#layer { position: absolute; top: 0; left: 0; width: 720px; height: 820px; transform-origin: top left; z-index: 2; }
.ch-bezel #game-container canvas { width: 100%; height: 100%; max-height: none; border-radius: 0; outline: none; touch-action: none; image-rendering: auto; background: #394c37; }

/* In-road readouts: speed, distance and the close-pass chain on a dark dash strip. */
.dash { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 24px 16px; background: linear-gradient(180deg, rgba(18,10,5,0), rgba(18,10,5,0.86) 45%); pointer-events: none; }
.dash small { display: block; font: 500 12px/1 var(--ch-mono); letter-spacing: 0.18em; color: var(--ch-ink3); margin-bottom: 6px; }
.dash b { font: 600 34px/1 var(--ch-mono); color: var(--ch-ink); font-variant-numeric: tabular-nums; }
.dash .mid { text-align: center; }
.dash .mid b { font-size: 24px; color: var(--ch-ink2); }
.dash .right { text-align: right; }
.dash .right b { color: var(--ch-amber); }
#callout { position: absolute; top: 34px; left: 0; right: 0; text-align: center; font: 700 30px/1.2 var(--ch-display); color: #8ff0a8; text-shadow: 0 2px 6px #000, 0 0 18px rgba(0,0,0,0.6); pointer-events: none; }

/* Start / drive-again panel over the road. */
#menu { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; text-align: center; color: var(--ch-ink); background: radial-gradient(ellipse at 50% 34%, rgba(42,26,14,0.82), rgba(10,6,3,0.95) 72%); }
#menu[hidden] { display: none; }
.m-kicker { font: 500 15px/1 var(--ch-mono); letter-spacing: 0.24em; color: var(--ch-amber); }
.m-title { margin: 0; font: 800 82px/0.95 var(--ch-display); letter-spacing: -0.02em; color: var(--ch-ink); text-shadow: 0 0 34px rgba(255,90,44,0.35); }
.m-tag { margin: 0 0 8px; font: 500 22px/1.45 var(--ch-font); color: var(--ch-ink2); }
#start { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; padding: 18px 44px; border-radius: 999px; background: var(--ch-ember); color: #fff; font: 700 32px/1 var(--ch-display); letter-spacing: 0.02em; box-shadow: 0 14px 34px -10px rgba(255,90,44,0.75), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform .12s; }
#start:hover { transform: translateY(-2px); }
#start:focus-visible { outline: 3px solid var(--ch-amber); outline-offset: 4px; }
.m-keys { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 34px; margin: 18px 0 0; font: 500 17px/1.3 var(--ch-font); color: var(--ch-ink2); }
.m-keys div { display: flex; align-items: center; gap: 10px; }
.m-keys dt, .m-keys dd { margin: 0; }
.m-keys kbd { display: inline-block; padding: 3px 9px; margin-right: 4px; font: 500 15px/1.3 var(--ch-mono); background: rgba(216,156,86,0.1); border: 1px solid var(--ch-line); border-bottom-width: 2px; border-radius: 5px; color: var(--ch-ink); }
.m-touch { display: none; margin: 4px 0 0; font: 500 19px/1.4 var(--ch-font); color: var(--ch-ink2); }
@media (hover: none) and (pointer: coarse) { .m-keys { display: none; } .m-touch { display: block; } }

/* Touch pad: steering on the left, pedals on the right. */
body.ch-game .ch-touch-group { flex: 1 1 0; flex-wrap: nowrap; }
body.ch-game .ch-touch-btn { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 19px; }
@media (max-width: 760px) {
    body.ch-game .ch-stage { padding: 0 8px; margin: 8px auto; }
    body.ch-game .ch-topbar { gap: 6px 10px; }
    body.ch-game .ch-hint { display: none; }
}

/* Small motion cues preserve a clear road and respect reduced-motion preferences. */
.chain-meter{height:4px;width:150px;margin-top:8px;background:#ffffff25;overflow:hidden;border-radius:3px}.chain-meter i{display:block;width:100%;height:100%;background:#8ff0a8;transform-origin:left center;transform:scaleX(0)}
.dash .right b{color:#8ff0a8}.dash .mid small{color:#dce9df;font-size:11px;letter-spacing:.1em}
#effects{border:1px solid #9bac9b70;border-radius:20px;padding:8px 18px;background:#13241d;color:#cbe4d4;font:600 13px var(--ch-mono);cursor:pointer}
#menu{animation:menu-in .22s ease-out}#menu .m-keys{margin-top:10px}
@keyframes menu-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#menu{animation:none}#start{transition:none}}
@media(max-width:760px){#effects{min-height:84px;min-width:270px;font-size:24px}#start{min-height:96px}.m-keys{display:none}.m-touch{display:block;font-size:25px}}