/* 🦖 Rex Run – ergänzt arcade-ui.css */

.rr-menu { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 1000px; }
.rr-menu .card { max-width: none; }
.rr-menu .hero-emoji { transform: scaleX(-1); }
.menu-actions .btn small { opacity: 0.7; font-weight: 600; }
.rr-modehint { font-size: 0.82rem; margin: 0.75rem 0 1.25rem; }

.rr-best { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
.rr-best > div { padding: 0.8rem; border-radius: var(--radius-sm); background: rgba(0,0,0,0.25); border: 1px solid var(--stroke); }
.rr-best strong { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--gold); }

.rr-help { display: grid; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); text-align: left; }
kbd { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 6px; border: 1px solid var(--stroke); background: var(--glass); font: 600 0.75rem var(--font); color: var(--text); }
.rr-guest { font-size: 0.82rem; margin-top: 1rem; }
.rr-guest a { color: var(--gold); }

.rr-tabs { display: flex; gap: 0.3rem; }
.rr-tab { padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--stroke); background: var(--glass); cursor: pointer; font-size: 0.82rem; font-weight: 700; }
.rr-tab.active { background: linear-gradient(135deg, var(--gold), var(--orange)); color: #1a1000; border-color: transparent; }
.rr-list { list-style: none; display: grid; gap: 0.4rem; counter-reset: rank; }
.rr-list li:not(.empty) { counter-increment: rank; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--stroke); }
.rr-list li:not(.empty)::before { content: counter(rank) "."; font-weight: 800; color: var(--muted); }
.rr-list li:nth-child(1)::before { content: "🥇"; }
.rr-list li:nth-child(2)::before { content: "🥈"; }
.rr-list li:nth-child(3)::before { content: "🥉"; }
.rr-list li.me { border-color: rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.1); }
.rr-list .pts { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold); }
.rr-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#gameScreen { justify-content: flex-start; }
.rr-stage { position: relative; width: 100%; max-width: 1000px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--stroke); box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; }
#game { display: block; width: 100%; aspect-ratio: 800 / 240; cursor: pointer; }
.rr-hint { font-size: 0.8rem; margin-top: 0.75rem; text-align: center; }

.rr-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 11, 26, 0.55); backdrop-filter: blur(3px); animation: screenIn 0.25s ease; }
.rr-overlay-card { text-align: center; padding: 1rem 1.5rem; }
.rr-ov-title { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); }
.rr-ov-score { font-size: 3rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; background: linear-gradient(135deg, var(--gold), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rr-ov-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.9rem; flex-wrap: wrap; }
.rr-ov-actions small { opacity: 0.7; }

/* Beide Knöpfe rechts: links unten läuft Rex, den soll kein Daumen verdecken */
.rr-touch { display: none; position: absolute; right: 0.6rem; bottom: 0.6rem; gap: 0.5rem; pointer-events: none; }
.rr-touch-btn { pointer-events: auto; width: 60px; height: 60px; opacity: 0.8; border-radius: 50%; border: 1px solid var(--stroke); background: rgba(255,255,255,0.12); font-size: 1.5rem; color: var(--text); backdrop-filter: blur(6px); touch-action: none; }
.rr-touch-btn.down { background: rgba(255, 210, 63, 0.35); }
@media (pointer: coarse) { .rr-touch { display: flex; } }

@media (max-width: 820px) {
    .rr-menu { grid-template-columns: 1fr; }
    .rr-ov-score { font-size: 2.2rem; }
}
/* Querformat auf dem Handy: Spielfeld so groß wie möglich */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
    .topbar { display: none; }
    .container { padding: 0.4rem; min-height: 100vh; }
    .rr-hint { display: none; }
    .rr-stage { max-width: calc((100vh - 1rem) * 800 / 240); }
}