/* ── Touch Controls (mobile only) ── */
.touch-controls {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 50;
}

.touch-left, .touch-right {
    position: absolute;
    bottom: 24px;
    display: flex;
    gap: 12px;
    pointer-events: auto;
}

.touch-left {
    left: 20px;
}

.touch-right {
    right: 20px;
}

.touch-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.4);
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: background 0.1s, border-color 0.1s;
}

.touch-btn.pressed {
    background: rgba(207, 75, 60, 0.6);
    border-color: #CF4B3C;
    color: #fff;
}

.touch-steer-left,
.touch-steer-right {
    font-size: 24px;
}

.touch-gas {
    background: rgba(0, 150, 0, 0.3);
    border-color: rgba(0, 200, 0, 0.5);
}
.touch-gas.pressed {
    background: rgba(0, 180, 0, 0.6);
    border-color: #00cc00;
}

.touch-brake {
    background: rgba(200, 0, 0, 0.25);
    border-color: rgba(200, 0, 0, 0.4);
}
.touch-brake.pressed {
    background: rgba(200, 0, 0, 0.6);
    border-color: #cc0000;
}

.touch-item {
    background: rgba(200, 150, 0, 0.25);
    border-color: rgba(200, 150, 0, 0.4);
}
.touch-item.pressed {
    background: rgba(200, 150, 0, 0.6);
    border-color: #ddaa00;
}

/* ── Landscape hint (portrait warning) ── */
.landscape-hint {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #0C0C0C;
    z-index: 10000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.landscape-hint-icon {
    font-size: 64px;
    animation: rotate-hint 1.5s ease-in-out infinite;
}

@keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}

.landscape-hint-text {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    padding: 0 24px;
}

@media (orientation: portrait) and (max-width: 1024px) {
    .landscape-hint { display: flex; }
}

/* ── Responsive: smaller screens ── */
@media (max-width: 900px) {
    /* Title screen */
    .menu-title { font-size: 42px; }
    .menu-subtitle { font-size: 13px; margin-bottom: 30px; }
    .menu-logo { width: 80px; }
    .menu-btn { padding: 12px 28px; font-size: 16px; min-width: 200px; }
    .menu-btn-secondary { padding: 10px 24px; font-size: 14px; min-width: 180px; }

    /* Select screens */
    .select-title { font-size: 24px; margin-bottom: 20px; }
    .select-cards { flex-wrap: wrap; gap: 10px; }
    .select-card { width: 160px; }
    .card-name { font-size: 14px; }
    .card-body { padding: 10px; }
    .card-preview { height: 100px; }
    .select-confirm-btn { padding: 12px 28px; font-size: 16px; min-width: 200px; }

    /* HUD */
    .hud-lap { font-size: 18px; top: 8px; left: 10px; }
    .hud-leaderboard { top: 8px; right: 10px; }
    .leaderboard-row { font-size: 11px; }
    .hud-energy-bar { width: 130px; height: 16px; }
    .hud-energy-label { font-size: 11px; }
    .hud-speed { font-size: 22px; bottom: 180px; right: 10px; }
    .hud-powerup-slot { width: 46px; height: 46px; bottom: 100px; font-size: 9px; }
    .hud-minimap { bottom: 40px; right: 10px; }
    .countdown-overlay { font-size: 72px; }

    /* Results */
    .results-title { font-size: 28px; }
    .results-row { padding: 8px 14px; }
    .results-btn { padding: 12px 28px; font-size: 16px; }

    /* Pause */
    .pause-title { font-size: 32px; }
    .pause-btn { padding: 10px 28px; font-size: 14px; min-width: 180px; }

    /* Tutorial */
    .tutorial-box { padding: 24px 20px; max-width: 90vw; }
    .tutorial-title { font-size: 24px; margin-bottom: 16px; }

    /* Settings */
    .settings-box { padding: 24px 20px; min-width: auto; width: 90vw; }
    .settings-title { font-size: 24px; }
    .settings-quality-btn { padding: 10px 16px; font-size: 13px; }
}

@media (max-width: 600px) {
    .menu-title { font-size: 32px; }
    .select-cards { flex-direction: column; align-items: center; }
    .select-card { width: 85vw; }
    .touch-btn { width: 60px; height: 60px; font-size: 12px; }
    .touch-steer-left, .touch-steer-right { font-size: 20px; }
}