:root {
    --c1: #1d4926;
    --c2: #95b46a;
    --c3: #c44f69;
    --c4: #7153a2;
    --c5: #ffcc00;
    --c6: #65b6df;
    --fg: white;
    --bg: var(--c1);
    --accent: var(--c2);
    --wrong: var(--c3);
    --correct: var(--c2);
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: center; padding: 0; background: var(--bg); color: var(--fg); min-height: -webkit-fill-available; margin: 0; }
html { height: -webkit-fill-available; }
.hidden { display: none !important; }
a { color: var(--accent); -webkit-tap-highlight-color: transparent; }

h2, .screen-title { color: var(--c5); font-size: 40px; margin: 12px 0; }

.btn { padding: 24px 48px; font-size: 32px; cursor: pointer; background: var(--c4); color: white; border: none; border-radius: 14px; font-weight: bold; text-decoration: none; display: inline-block; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:hover { opacity: 0.9; }
.btn-green { background: var(--c2); color: var(--bg); }
.btn-red { background: var(--c3); color: white; }

ul { list-style: none; padding: 0; justify-content: center; align-items: center; flex-wrap: wrap; }
ul#player-list { display: flex; }
li { display: inline-block; margin: 4px; padding: 12px 16px; background: rgba(255,255,255,0.1); border-radius: 8px; font-size: 20px; }

/* ── Timer bar ── */
.timer-bar { width: 100%; height: 18px; background: rgba(255,255,255,0.2); border-radius: 9px; margin: 8px 0; overflow: hidden; position: relative; }
.timer-fill { height: 100%; background: var(--c5); border-radius: 9px; transition: width 0.1s linear; width: 100%; }

/* ── Code display ── */
#code { font-family: monospace; font-size: 72px; font-weight: bold; letter-spacing: 12px; color: var(--c5); }
#game-code-bar { font-size: 32px; font-weight: bold; letter-spacing: 8px; color: var(--c5); margin-bottom: 8px; }

/* ── Question screen — fills viewport ── */
.question-screen-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: 10px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.question-screen-layout > * { flex-shrink: 0; }

/* ── Answer grid — fills remaining height ── */
.answer-grid {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}
.answer-btn {
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 16px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 0;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.answer-btn:nth-child(1) { background: var(--c3); }
.answer-btn:nth-child(2) { background: var(--c6); }
.answer-btn:nth-child(3) { background: var(--c5); }
.answer-btn:nth-child(4) { background: var(--c2); }
.answer-btn:active { opacity: 0.85; }
.answer-btn.disabled { opacity: 0.5; pointer-events: none; -webkit-pointer-events: none; }
.answer-btn.correct { outline: 4px solid white; box-shadow: 0 0 15px rgba(255,255,255,0.5); }
.answer-btn.wrong { opacity: 0.4; }

/* ── Feedback ── */
.feedback-msg { font-size: 38px; font-weight: bold; margin: 8px 0; }
.feedback-correct { color: var(--correct); }
.feedback-wrong { color: var(--wrong); }
.points-earned { font-size: 30px; color: var(--c5); margin: 4px 0; }

/* ── Input fields ── */
input[type=text], input[type=number] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 22px;
    font-size: 32px;
    border-radius: 12px;
    border: 3px solid var(--accent);
    background: rgba(255,255,255,0.1);
    color: white;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    outline: none;
}
input[type=text]::placeholder { color: rgba(255,255,255,0.5); text-transform: none; }
input:focus { border-color: var(--c5); }

/* ── Podium ── */
.podium { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; gap: 14px; margin: 20px auto; max-width: 600px; }
.podium-spot { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.podium-name { font-weight: bold; margin-bottom: 4px; font-size: 22px; }
.podium-score { font-size: 18px; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.podium-block { width: 150px; border-radius: 12px 12px 0 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 52px; font-weight: bold; color: white; box-shadow: 0 8px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02); }
.podium-1 .podium-block { background: linear-gradient(135deg, var(--c5), #e6b800); height: 180px; }
.podium-2 .podium-block { background: linear-gradient(135deg, #bdc3c7, #95a5a6); height: 130px; }
.podium-3 .podium-block { background: linear-gradient(135deg, var(--c6), #4a9cc4); height: 90px; }

.rest-players { max-height: 250px; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 16px auto; max-width: 500px; }
.rest-players ul { display: block; }
.rest-players li { display: block; margin: 6px 0; padding: 14px; background: rgba(255,255,255,0.1); border-radius: 8px; font-size: 22px; }

/* ── Correct answer reveal ── */
.correct-reveal, .correct-answer-reveal { font-size: 24px; color: var(--correct); font-weight: bold; margin: 8px 0; }

/* ── Lobby settings (host) ── */
.lobby-settings { max-width: 500px; margin: 16px auto; }
.lobby-settings label { display: block; font-size: 20px; color: rgba(255,255,255,0.6); margin-top: 12px; }
.lobby-settings select, .lobby-settings input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 14px;
    font-size: 22px;
    border-radius: 8px;
    border: 2px solid var(--accent);
    background: rgba(255,255,255,0.1);
    color: white;
    width: 100%;
    outline: none;
}
.lobby-settings select option { background: var(--bg); }
.lobby-settings input[type=range] { padding: 0; accent-color: var(--c5); }
#timer-display { color: var(--c5); font-weight: bold; font-size: 26px; }

/* ── Answer distribution (host results) ── */
.answer-dist { max-width: 500px; margin: 16px auto; box-shadow: 0 8px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02); padding: 15px; border-radius: 15px; }
.dist-bar { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 8px 0; text-align: left; border-radius: 5px; }
.dist-label { width: 130px; font-size: 18px; color: rgba(255,255,255,0.8); text-align: right; padding-right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-track { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; height: 36px; background: rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden; position: relative; }
.dist-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding-left: 10px; font-size: 18px; font-weight: bold; color: white; }
.dist-fill.correct-answer { outline: 3px solid white; }
.dist-bar:nth-child(1) .dist-fill { background: var(--c3); }
.dist-bar:nth-child(2) .dist-fill { background: var(--c6); }
.dist-bar:nth-child(3) .dist-fill { background: var(--c5); color: var(--bg); }
.dist-bar:nth-child(4) .dist-fill { background: var(--c2); color: var(--bg); }
.dist-bar:has(div.correct-answer) { border: 4px solid white; }
/* Fallback for Safari < 15.4 which doesn't support :has() */
.dist-bar.dist-correct { border: 4px solid white; }

/* ── Player list + kick (host) ── */
.player-list-item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 10px; font-size: 24px; }
.kick-btn { background: var(--c3); color: white; border: none; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: 18px; -webkit-tap-highlight-color: transparent; }

/* ── Results actions (host) ── */
.results-actions { display: -webkit-box; display: -webkit-flex; display: flex; gap: 14px; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

/* ── Index page ── */
.btn-host { background: var(--c4); color: white; padding: 28px 56px; font-size: 36px; margin: 24px; border-radius: 14px; }
.btn-join { background: var(--c2); color: var(--bg); padding: 28px 56px; font-size: 36px; margin: 24px; border-radius: 14px; }

/* ── Mute toggle (host) ── */
#mute-btn { position: fixed; top: 12px; right: 12px; z-index: 100; background: rgba(255,255,255,0.15); border: none; color: white; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#mute-btn:hover { background: rgba(255,255,255,0.25); }
#mute-btn svg { display: block; }