/* Game Night — Night City HUD (2077-inspired, not candy neon) */
:root {
    --nc-bg: #070806;
    --nc-bg-2: #10110c;
    --nc-panel: rgba(12, 13, 8, 0.92);
    --nc-yellow: #fcee0a;
    --nc-yellow-dim: #b9ad12;
    --nc-cyan: #29f1ff;
    --nc-red: #ff003c;
    --nc-green: #3dff8a;
    --nc-ink: #0a0a08;
    --nc-text: #e8e4d4;
    --nc-muted: #8a8674;
    --nc-line: rgba(252, 238, 10, 0.28);
    --nc-line-hard: #fcee0a;
    --nc-font: 'Rajdhani', 'Share Tech Mono', sans-serif;
    --nc-mono: 'Share Tech Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(252, 238, 10, 0.06), transparent 55%),
        radial-gradient(900px 500px at 0% 100%, rgba(41, 241, 255, 0.05), transparent 50%),
        var(--nc-bg);
    color: var(--nc-text);
    font-family: var(--nc-font);
    letter-spacing: 0.04em;
}

body.scanline::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.14) 0px,
        rgba(0, 0, 0, 0.14) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.35;
}

body.scanline::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: rgba(252, 238, 10, 0.18);
    animation: nc-scan 5.5s linear infinite;
    pointer-events: none;
    z-index: 999;
}

@keyframes nc-scan {
    0% { top: -4%; }
    100% { top: 104%; }
}

.mono { font-family: var(--nc-mono); }

.hidden { display: none !important; }

.neon-blue { color: var(--nc-cyan); text-shadow: 0 0 12px rgba(41, 241, 255, 0.35); }
.neon-pink { color: var(--nc-yellow); text-shadow: 0 0 10px rgba(252, 238, 10, 0.35); }
.neon-green { color: var(--nc-green); text-shadow: 0 0 10px rgba(61, 255, 138, 0.3); }
.neon-yellow { color: var(--nc-yellow); text-shadow: 0 0 10px rgba(252, 238, 10, 0.4); }

.glass, .hud-panel {
    background: var(--nc-panel);
    border: 1px solid var(--nc-line);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    backdrop-filter: blur(8px);
}

.neon-border, .neon-border-pink {
    border: 1px solid var(--nc-line) !important;
    box-shadow: none;
}

.hud-kicker {
    font-family: var(--nc-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--nc-yellow-dim);
    text-transform: uppercase;
}

.brand-mark {
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.brand-mark .accent { color: var(--nc-yellow); }

.hud-btn, button.hud-btn {
    font-family: var(--nc-font);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--nc-yellow);
    color: var(--nc-ink);
    border: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.hud-btn:hover { filter: brightness(1.08); }
.hud-btn:disabled { filter: grayscale(0.4) brightness(0.7); cursor: not-allowed; }
.hud-btn.ghost {
    background: transparent;
    color: var(--nc-yellow);
    border: 1px solid var(--nc-line-hard);
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.game-tile {
    background: var(--nc-bg-2);
    border: 1px solid var(--nc-line);
    color: var(--nc-text);
    text-align: left;
    padding: 14px 14px 12px;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    min-height: 128px;
    transition: border-color 0.15s, background 0.15s;
}
.game-tile:hover { border-color: var(--nc-yellow); }
.game-tile.selected {
    border-color: var(--nc-yellow);
    background: rgba(252, 238, 10, 0.08);
}
.game-tile .tile-icon {
    width: 36px;
    height: 36px;
    color: var(--nc-yellow);
    margin-bottom: 10px;
}
.game-tile .tile-icon svg { width: 36px; height: 36px; display: block; }
.game-tile .tile-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.game-tile .tile-desc {
    font-family: var(--nc-mono);
    font-size: 11px;
    color: var(--nc-muted);
    margin-top: 4px;
    letter-spacing: 0.04em;
}
.game-tile.sibling { opacity: 0.85; }
.game-tile.sibling .tile-icon { color: var(--nc-cyan); }

.theme-chip {
    display: inline-block;
    padding: 6px 12px;
    margin: 4px;
    background: var(--nc-bg-2);
    border: 1px solid #2a2c20;
    cursor: pointer;
    font-size: 0.8rem;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.theme-chip.active {
    background: var(--nc-yellow);
    color: var(--nc-ink);
    border-color: var(--nc-yellow);
    font-weight: 700;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #222418;
}
.setting-row label { font-size: 0.85rem; color: var(--nc-muted); }
.setting-row select, .setting-row textarea, input[type="password"], input[type="text"], textarea, select {
    background: #0c0d0a;
    border: 1px solid #2f3224;
    color: var(--nc-text);
    padding: 6px 8px;
    font-family: var(--nc-mono);
    border-radius: 0;
}

.answer-card { transition: background 0.25s ease, border-color 0.25s ease; }
.answer-card.correct {
    background: rgba(61, 255, 138, 0.18) !important;
    border-color: var(--nc-green) !important;
}
.answer-card.wrong { opacity: 0.4; }

.player-badge.answered {
    background: rgba(61, 255, 138, 0.2) !important;
    color: #fff;
    border-color: var(--nc-green) !important;
}

.timer-ring {
    width: 120px;
    height: 120px;
    border-radius: 0;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    border: 3px solid #2a2c20;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timer-ring.urgent {
    border-color: var(--nc-red);
}

.game-code {
    font-size: 3.5rem;
    letter-spacing: 0.3em;
    cursor: pointer;
}
.copy-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--nc-yellow);
    color: var(--nc-ink);
    padding: 8px 20px;
    font-weight: 700;
    z-index: 9999;
}

#host-controls {
    position: fixed;
    bottom: 12px;
    left: 12px;
    transform: none;
    z-index: 10070;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    max-width: calc(100vw - 24px);
}
#host-controls.hidden { display: none; }
#host-controls button {
    font-family: var(--nc-mono);
    font-size: 13px;
    padding: 6px 14px;
    border: 1px solid #3a3c2c;
    background: var(--nc-bg-2);
    color: var(--nc-text);
    cursor: pointer;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
#host-controls button#btn-menu {
    border-color: var(--nc-yellow);
    color: var(--nc-yellow);
}
#host-controls button.active-ctrl {
    border-color: var(--nc-red);
    background: var(--nc-red);
    color: #fff;
}

.dj-slider { -webkit-appearance: none; background: #222418; height: 6px; outline: none; }
.dj-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--nc-yellow); cursor: pointer; }
.dj-transport, .dj-src-btn {
    background: #10110c;
    border: 1px solid #2f3224;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--nc-text);
    font-family: var(--nc-mono);
    font-size: 12px;
}
.dj-transport:hover, .dj-src-btn:hover { border-color: var(--nc-yellow); color: var(--nc-yellow); }
.dj-src-btn.active, .dj-transport.active { border-color: var(--nc-yellow); color: var(--nc-yellow); }

#settings-panel, #nav-confirm, #phone-confirm {
    position: fixed;
    inset: 0;
    z-index: 10060;
    background: rgba(7, 8, 6, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 5vw;
}
#settings-panel { z-index: 10020; }
#settings-panel.hidden, #nav-confirm.hidden, #phone-confirm.hidden { display: none; }

#phone-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 80;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(transparent, rgba(7, 8, 6, 0.96) 30%);
}
#phone-nav.hidden { display: none; }
#phone-nav button {
    flex: 1;
    min-height: 48px;
}

@keyframes popIn { 0% { transform: scale(.92); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
.pop-in { animation: popIn .35s ease-out forwards; }
@keyframes fadeSlideUp { 0% { transform: translateY(20px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
.fade-up { animation: fadeSlideUp .4s ease-out forwards; }
.pulse-glow { box-shadow: none; }

.draw-stage {
    background: #0b0c09;
    border: 1px solid var(--nc-line);
    width: 100%;
    max-width: 920px;
    height: min(58vh, 560px);
    display: block;
    margin: 0 auto;
    touch-action: none;
}

.outburst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    text-align: left;
}
.outburst-item {
    border: 1px solid #2a2c20;
    padding: 12px 14px;
    min-height: 52px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.outburst-item.found {
    border-color: var(--nc-green);
    color: var(--nc-green);
}
.outburst-item.blank { color: var(--nc-muted); }

.controller-btn {
    min-height: 64px;
    font-size: 1.05rem;
    width: 100%;
    margin-bottom: 8px;
    background: #12140e;
    border: 1px solid #2f3224;
    color: var(--nc-text);
    font-weight: 700;
    padding: 12px 16px;
    text-align: left;
    font-family: var(--nc-font);
    letter-spacing: 0.06em;
}
.controller-btn:active { transform: scale(.98); }
.controller-btn.selected { background: var(--nc-yellow); color: var(--nc-ink); border-color: var(--nc-yellow); }
.controller-btn.correct-fb { background: rgba(61, 255, 138, 0.2); border-color: var(--nc-green); }
.controller-btn.wrong-fb { background: rgba(255, 0, 60, 0.2); border-color: var(--nc-red); }
.controller-btn.disabled { opacity: .5; pointer-events: none; }

.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-option {
    font-size: 1.8rem;
    padding: 10px;
    background: #10110c;
    border: 1px solid #2a2c20;
    cursor: pointer;
    text-align: center;
}
.avatar-option.selected { border-color: var(--nc-yellow); background: rgba(252, 238, 10, 0.12); }

.score-display {
    background: #10110c;
    border: 1px solid #2a2c20;
    padding: 6px 12px;
    font-size: 0.9rem;
}

.phone-canvas {
    width: 100%;
    height: 280px;
    background: #0b0c09;
    border: 1px solid var(--nc-line);
    touch-action: none;
}

#spotify-qr-modal.hidden { display: none !important; }

@media (min-width: 1100px) {
    body {
        padding: 3.5vh 4.5vw 8vh;
        font-size: 18px;
    }
    .hud-btn, button.hud-btn {
        min-height: 56px;
        font-size: 22px;
        padding: 12px 28px;
    }
    .game-tile {
        min-height: 150px;
        padding: 18px;
    }
    .game-tile:focus, .hud-btn:focus, .dj-src-btn:focus, #host-controls button:focus, a.game-tile:focus {
        outline: 3px solid var(--nc-yellow);
        outline-offset: 3px;
    }
    .dj-src-btn, .dj-transport {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }
    #unmute-btn { min-height: 56px; font-size: 20px; }
    input, select, textarea { font-size: 20px !important; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    body.scanline::after, body.scanline::before { animation: none; }
}