/* Family Fortunes - AUTHENTIC Dot Matrix Board Style */
/* Black background, yellow LED text - exactly like the TV show */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Orbitron:wght@400;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --board-black: #000000;
    --led-yellow: #ffcc00;
    --led-yellow-dim: #665500;
    --led-green: #00ff00;
    --led-red: #ff0000;
    --text-white: #ffffff;
    --gold: #ffd700;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'VT323', 'Courier New', monospace;
    background: #000;
    color: var(--text-white);
}

.hidden { display: none !important; }

/* ============================================
   START SCREEN
   ============================================ */
#start-screen {
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.start-content {
    text-align: center;
}

.logo-container {
    margin-bottom: 3vh;
}

.game-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 7vh;
    font-weight: 900;
    color: var(--led-yellow);
    text-shadow: 0 0 20px var(--led-yellow), 0 0 40px var(--led-yellow);
    letter-spacing: 0.8vw;
    line-height: 1.1;
}

.logo-fortunes {
    font-size: 9vh;
    color: var(--led-yellow);
    text-shadow: 0 0 30px var(--led-yellow), 0 0 60px var(--led-yellow);
}

.team-setup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    margin-bottom: 3vh;
}

.team-input-box {
    background: #111;
    border: 3px solid var(--led-yellow);
    padding: 1.5vh 2vw;
}

.team-input-box label {
    display: block;
    font-family: 'VT323', monospace;
    font-size: 2.8vh;
    color: var(--led-yellow);
    margin-bottom: 0.8vh;
}

.team-input-box input {
    width: 18vw;
    padding: 1vh 1vw;
    font-family: 'VT323', monospace;
    font-size: 3vh;
    text-align: center;
    text-transform: uppercase;
    background: #000;
    border: 2px solid #333;
    color: var(--led-yellow);
    outline: none;
}

.team-input-box input:focus {
    border-color: var(--led-yellow);
}

.vs-divider {
    font-family: 'VT323', monospace;
    font-size: 4vh;
    font-weight: 900;
    color: var(--led-red);
    text-shadow: 0 0 20px var(--led-red);
}

#start-game-btn {
    padding: 1.8vh 5vw;
    font-family: 'VT323', monospace;
    font-size: 3.5vh;
    font-weight: 700;
    background: var(--led-yellow);
    border: none;
    color: #000;
    cursor: pointer;
    text-transform: uppercase;
}

#start-game-btn:hover {
    background: #ffdd44;
    box-shadow: 0 0 30px var(--led-yellow);
}

.pack-selector {
    margin-bottom: 2vh;
    text-align: center;
}

.pack-selector label {
    display: block;
    font-family: 'VT323', monospace;
    font-size: 2.4vh;
    color: var(--led-yellow);
    margin-bottom: 0.8vh;
}

.pack-selector select {
    padding: 1vh 1.5vw;
    font-family: 'VT323', monospace;
    font-size: 2.4vh;
    background: #000;
    border: 2px solid #333;
    color: var(--led-yellow);
    cursor: pointer;
    outline: none;
    min-width: 22vw;
}

.pack-selector select:focus {
    border-color: var(--led-yellow);
}

.pack-selector select option {
    background: #000;
    color: var(--led-yellow);
}

.instructions {
    margin-top: 1.5vh;
    font-size: 2.2vh;
    color: #666;
}

/* ============================================
   GAME SCREEN
   ============================================ */
#game-screen {
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    flex-direction: column;
    padding: 0.5vh 1vw;
}

/* SCOREBOARD */
#scoreboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8vh;
    margin-bottom: 0.3vh;
}

.team-panel {
    background: #000;
    border: 3px solid var(--led-yellow);
    padding: 0.4vh 3vw;
    min-width: 20vw;
    text-align: center;
}

.team-panel.active-team {
    border-color: var(--led-green);
    box-shadow: 0 0 20px var(--led-green);
}

.team-name-display {
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    color: var(--led-yellow);
    text-shadow: 0 0 10px var(--led-yellow);
}

.team-score-display {
    font-family: 'VT323', monospace;
    font-size: 5vh;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
}

.center-panel {
    text-align: center;
}

.round-display {
    font-family: 'VT323', monospace;
    font-size: 2.8vh;
    color: var(--led-yellow);
    text-shadow: 0 0 10px var(--led-yellow);
}

/* QUESTION BAR */
#question-bar {
    background: #000;
    border: 2px solid var(--led-yellow);
    padding: 0.5vh 1.5vw;
    margin-bottom: 0.3vh;
    text-align: center;
}

.question-prefix {
    font-family: 'VT323', monospace;
    font-size: 1.8vh;
    color: var(--led-yellow);
    opacity: 0.6;
    margin-bottom: 0.2vh;
}

.question-text {
    font-family: 'VT323', monospace;
    font-size: 3vh;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
    text-transform: uppercase;
}

/* ============================================
   THE MAIN BOARD - Authentic Dot Matrix
   ============================================ */
#main-board {
    flex: 1;
    display: flex;
    gap: 0.8vw;
    margin-bottom: 0.3vh;
    min-height: 0;
}

.board-frame {
    flex: 1;
    background: #000;
    border: 4px solid var(--led-yellow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Board Header */
.board-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5vw;
    padding: 0.4vh 1.5vw;
    background: #000;
    border-bottom: 2px solid var(--led-yellow);
}

.answer-count {
    font-family: 'VT323', monospace;
    font-size: 4vh;
    color: var(--led-yellow);
    text-shadow: 0 0 20px var(--led-yellow);
}

.header-text {
    font-family: 'VT323', monospace;
    font-size: 3vh;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
}

.question-mark {
    font-family: 'VT323', monospace;
    font-size: 4vh;
    color: var(--led-yellow);
    text-shadow: 0 0 20px var(--led-yellow);
    animation: pulse-glow 1.5s infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Answer Rows - AUTHENTIC DOT MATRIX */
.answers-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #000;
    min-height: 0;
}

.answer-row {
    flex: 1;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #222;
    padding: 0 0.5vw;
    background: #000;
    min-height: 0;
}

.answer-row:last-child {
    border-bottom: none;
}

.answer-row.revealed {
    background: #0a0a00;
}

.answer-row.revealed::before {
    content: '▶';
    position: absolute;
    left: 0.3vw;
    font-family: 'VT323', monospace;
    font-size: 2vh;
    color: var(--led-yellow);
    text-shadow: 0 0 10px var(--led-yellow);
}

.row-number {
    width: 3.5vw;
    font-family: 'VT323', monospace;
    font-size: 3.5vh;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
    text-align: center;
    margin-left: 0.5vw;
}

.answer-text-container {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 1vw;
    position: relative;
}

.answer-hidden {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Hidden answer - just dim yellow dashes like real dot matrix */
.answer-hidden-dots {
    font-family: 'VT323', monospace;
    font-size: 3vh;
    color: var(--led-yellow-dim);
    letter-spacing: 0.3vw;
}

.answer-hidden-dots::before {
    content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
}

.dot {
    display: none;
}

.answer-revealed {
    font-family: 'VT323', monospace;
    font-size: 3.5vh;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow), 0 0 30px rgba(255,204,0,0.5);
    text-transform: uppercase;
    letter-spacing: 0.4vw;
    word-spacing: 0.8vw;
    display: none;
}

.answer-row.revealed .answer-hidden {
    display: none;
}

.answer-row.revealed .answer-revealed {
    display: block;
    animation: text-reveal 0.3s ease;
}

@keyframes text-reveal {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.answer-points {
    width: 7vw;
    font-family: 'VT323', monospace;
    font-size: 3.5vh;
    text-align: right;
    padding-right: 1vw;
}

.answer-points .points-value {
    display: none;
}

.answer-points .points-hidden {
    color: var(--led-yellow-dim);
}

.answer-points .points-hidden::before {
    content: '■ ■';
}

.answer-points .points-dot {
    display: none;
}

.answer-row.revealed .answer-points .points-value {
    display: block;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
    animation: points-pop 0.3s ease;
}

.answer-row.revealed .answer-points .points-hidden {
    display: none;
}

@keyframes points-pop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Board Footer - TOTAL */
.board-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4vh 1.5vw;
    background: #000;
    border-top: 2px solid var(--led-yellow);
}

.total-label {
    font-family: 'VT323', monospace;
    font-size: 3vh;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
}

.total-score {
    font-family: 'VT323', monospace;
    font-size: 4vh;
    color: var(--led-yellow);
    text-shadow: 0 0 20px var(--led-yellow);
    min-width: 8vw;
    text-align: right;
}

/* Strikes Panel */
.strikes-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8vh;
    padding: 0 0.3vw;
}

.strike-box {
    width: 5vw;
    height: 6vh;
    background: #000;
    border: 3px solid var(--led-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.strike-x {
    font-family: 'VT323', monospace;
    font-size: 5vh;
    color: #220000;
    transition: all 0.2s;
}

.strike-box.active .strike-x {
    color: var(--led-red);
    text-shadow: 0 0 30px var(--led-red), 0 0 60px var(--led-red);
    animation: strike-flash 0.4s ease;
}

@keyframes strike-flash {
    0% { transform: scale(0); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* ============================================
   CONTROL PANEL
   ============================================ */
#control-panel {
    background: #111;
    border: 2px solid #333;
    padding: 0.5vh 1.5vw;
}

.input-section {
    display: flex;
    gap: 0.8vw;
    margin-bottom: 0.5vh;
}

#answer-input {
    flex: 1;
    padding: 0.6vh 1.5vw;
    font-family: 'VT323', monospace;
    font-size: 2.8vh;
    background: #000;
    border: 2px solid #444;
    color: var(--led-yellow);
    outline: none;
    text-transform: uppercase;
}

#answer-input:focus {
    border-color: var(--led-yellow);
}

#answer-input::placeholder {
    color: #444;
    text-transform: none;
}

#check-btn {
    padding: 0.6vh 2vw;
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    background: var(--led-green);
    border: none;
    color: #000;
    cursor: pointer;
    text-transform: uppercase;
}

#check-btn:hover {
    box-shadow: 0 0 20px var(--led-green);
}

.button-row {
    display: flex;
    gap: 0.6vw;
    justify-content: center;
}

.ctrl-btn {
    padding: 0.5vh 1.2vw;
    font-family: 'VT323', monospace;
    font-size: 2vh;
    background: #222;
    border: 2px solid #444;
    color: var(--text-white);
    cursor: pointer;
    text-transform: uppercase;
}

.ctrl-btn:hover {
    border-color: var(--led-yellow);
}

.strike-btn {
    background: #220000;
    border-color: var(--led-red);
    color: var(--led-red);
}

.team1-award {
    background: #002200;
    border-color: var(--led-green);
}

.team2-award {
    background: #000022;
    border-color: #6666ff;
}

.team-label {
    font-size: 1.4vh;
    display: block;
}

.turn-indicator {
    text-align: center;
    margin-top: 0.4vh;
    font-family: 'VT323', monospace;
    font-size: 2.2vh;
    color: var(--led-yellow);
    text-shadow: 0 0 10px var(--led-yellow);
}

#steal-text {
    color: var(--led-red);
    text-shadow: 0 0 15px var(--led-red);
    animation: steal-flash 0.5s infinite;
}

@keyframes steal-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ============================================
   HOST PANEL
   ============================================ */
#host-panel {
    position: fixed;
    bottom: 7vh;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    border: 1px solid #333;
    padding: 0.6vh 1.5vw;
    z-index: 100;
}

.host-title {
    font-family: 'VT323', monospace;
    font-size: 1.6vh;
    color: #555;
    text-align: center;
    margin-bottom: 0.3vh;
}

#host-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8vw;
    justify-content: center;
    font-family: 'VT323', monospace;
    font-size: 1.8vh;
    color: #666;
}

#host-answers span.revealed {
    color: #333;
    text-decoration: line-through;
}

/* ============================================
   OVERLAYS
   ============================================ */
#strike-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.big-x {
    font-family: 'VT323', monospace;
    font-size: 50vh;
    color: var(--led-red);
    text-shadow: 0 0 100px var(--led-red), 0 0 200px var(--led-red);
    animation: big-x-anim 0.6s ease;
}

@keyframes big-x-anim {
    0% { transform: scale(0) rotate(-90deg); }
    60% { transform: scale(1.2) rotate(0deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.uh-uh {
    font-family: 'VT323', monospace;
    font-size: 10vh;
    color: var(--led-red);
    text-shadow: 0 0 30px var(--led-red);
}

#correct-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 20, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.good-answer {
    font-family: 'VT323', monospace;
    font-size: 12vh;
    color: var(--led-green);
    text-shadow: 0 0 50px var(--led-green), 0 0 100px var(--led-green);
    animation: good-answer-anim 0.5s ease;
}

@keyframes good-answer-anim {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* PERFECT ROUND */
#perfect-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#perfect-overlay.show {
    opacity: 1;
}

#perfect-overlay.hidden {
    display: none;
}

.perfect-content {
    text-align: center;
}

.perfect-stars {
    font-size: 8vh;
    color: var(--led-yellow);
    text-shadow: 0 0 30px var(--led-yellow);
}

.perfect-text {
    font-family: 'VT323', monospace;
    font-size: 14vh;
    color: var(--led-green);
    text-shadow: 0 0 50px var(--led-green), 0 0 100px var(--led-green);
    margin: 1vh 0;
}

.perfect-subtext {
    font-family: 'VT323', monospace;
    font-size: 6vh;
    color: var(--led-yellow);
    text-shadow: 0 0 25px var(--led-yellow);
}

#double-indicator {
    position: fixed;
    top: 9vh;
    right: 1vw;
    background: var(--led-red);
    padding: 0.6vh 1.2vw;
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    color: #000;
    z-index: 100;
    animation: double-pulse 0.8s infinite;
}

@keyframes double-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#mute-indicator {
    position: fixed;
    top: 9vh;
    left: 1vw;
    background: #666;
    padding: 0.6vh 1.2vw;
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    color: #fff;
    z-index: 100;
}

.score-updated {
    animation: score-pulse 0.4s ease-out;
}

@keyframes score-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Host Prompt */
#host-prompt {
    position: fixed;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    border: 3px solid var(--led-yellow);
    padding: 1.2vh 3vw;
    font-family: 'VT323', monospace;
    font-size: 3.5vh;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
    text-align: center;
    z-index: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#host-prompt.show {
    opacity: 1;
}

/* ============================================
   GAME OVER SCREEN
   ============================================ */
#gameover-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.gameover-content {
    text-align: center;
}

.gameover-title {
    font-family: 'VT323', monospace;
    font-size: 10vh;
    color: var(--led-yellow);
    text-shadow: 0 0 40px var(--led-yellow);
    margin-bottom: 3vh;
}

.final-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    margin-bottom: 3vh;
}

.final-team-box {
    background: #000;
    border: 3px solid var(--led-yellow);
    padding: 1.5vh 3vw;
}

.final-name {
    font-family: 'VT323', monospace;
    font-size: 3vh;
    color: var(--led-yellow);
    margin-bottom: 0.8vh;
}

.final-score {
    font-family: 'VT323', monospace;
    font-size: 10vh;
    color: var(--led-yellow);
    text-shadow: 0 0 30px var(--led-yellow);
}

.final-vs {
    font-family: 'VT323', monospace;
    font-size: 5vh;
    color: var(--led-red);
    text-shadow: 0 0 20px var(--led-red);
}

.winner-announcement {
    font-family: 'VT323', monospace;
    font-size: 6vh;
    color: var(--led-green);
    text-shadow: 0 0 30px var(--led-green);
    margin-bottom: 2vh;
}

.prize-box {
    border: 2px solid var(--led-yellow);
    padding: 1.5vh 3vw;
    margin-bottom: 2vh;
    display: inline-block;
}

.prize-label {
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    color: var(--led-yellow);
    margin-bottom: 0.5vh;
}

.prize-text {
    font-family: 'VT323', monospace;
    font-size: 3vh;
    color: var(--led-yellow);
}

#replay-btn {
    padding: 1.5vh 4vw;
    font-family: 'VT323', monospace;
    font-size: 3vh;
    background: var(--led-yellow);
    border: none;
    color: #000;
    cursor: pointer;
    text-transform: uppercase;
}

#replay-btn:hover {
    box-shadow: 0 0 30px var(--led-yellow);
}

/* ============================================
   HELP OVERLAY
   ============================================ */
#help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
}

.help-box {
    background: #000;
    border: 3px solid var(--led-yellow);
    padding: 2vh 3vw;
    max-width: 60vw;
}

.help-box h2 {
    font-family: 'VT323', monospace;
    font-size: 3.5vh;
    color: var(--led-yellow);
    text-align: center;
    margin-bottom: 1.5vh;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6vh 2vw;
    margin-bottom: 1.5vh;
}

.help-item {
    font-family: 'VT323', monospace;
    font-size: 2.2vh;
    color: var(--led-yellow);
}

.help-item kbd {
    display: inline-block;
    background: #222;
    border: 1px solid var(--led-yellow);
    padding: 0.2vh 0.6vw;
    margin-right: 0.6vw;
    font-family: 'VT323', monospace;
    color: var(--led-yellow);
    min-width: 2.5vw;
    text-align: center;
}

.help-box h3 {
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    color: var(--led-green);
    margin: 1.5vh 0 0.8vh;
    text-align: center;
    border-top: 1px solid var(--led-yellow);
    padding-top: 1vh;
}

.scoring-rules {
    font-family: 'VT323', monospace;
    font-size: 2vh;
    color: #aaa;
    line-height: 1.5;
    margin-bottom: 1.5vh;
}

.scoring-rules strong {
    color: var(--led-yellow);
}

#close-help {
    display: block;
    margin: 0 auto;
    padding: 0.8vh 2.5vw;
    font-family: 'VT323', monospace;
    font-size: 2.2vh;
    background: var(--led-yellow);
    border: none;
    color: #000;
    cursor: pointer;
}

/* ============================================
   BIG MONEY ROUND
   ============================================ */
#bigmoney-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3500;
}

.bigmoney-content {
    text-align: center;
    width: 90vw;
    max-width: 900px;
}

.bigmoney-header {
    margin-bottom: 2vh;
}

.bigmoney-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 8vh;
    font-weight: 900;
    color: var(--led-yellow);
    text-shadow: 0 0 30px var(--led-yellow), 0 0 60px var(--led-yellow);
    animation: bigmoney-pulse 1s infinite;
}

@keyframes bigmoney-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.bigmoney-team {
    font-family: 'VT323', monospace;
    font-size: 4vh;
    color: var(--led-green);
    text-shadow: 0 0 20px var(--led-green);
    margin: 1vh 0;
}

.bigmoney-target {
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    color: var(--led-yellow);
    opacity: 0.8;
}

.bigmoney-player-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    margin: 2vh 0;
    padding: 1vh 2vw;
    background: #111;
    border: 2px solid var(--led-yellow);
}

.player-label {
    font-family: 'VT323', monospace;
    font-size: 4vh;
    color: var(--led-green);
    text-shadow: 0 0 15px var(--led-green);
}

.player-time {
    font-family: 'VT323', monospace;
    font-size: 6vh;
    color: var(--led-yellow);
    text-shadow: 0 0 20px var(--led-yellow);
    min-width: 3vw;
}

.player-time.warning {
    color: var(--led-red);
    text-shadow: 0 0 20px var(--led-red);
    animation: time-flash 0.5s infinite;
}

@keyframes time-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.bigmoney-question-box {
    background: #000;
    border: 3px solid var(--led-yellow);
    padding: 2vh 2vw;
    margin: 2vh 0;
}

.bigmoney-q-number {
    font-family: 'VT323', monospace;
    font-size: 2vh;
    color: var(--led-yellow);
    opacity: 0.6;
    margin-bottom: 1vh;
}

.bigmoney-question {
    font-family: 'VT323', monospace;
    font-size: 4vh;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
    text-transform: uppercase;
    letter-spacing: 0.3vw;
}

.bigmoney-input-section {
    display: flex;
    gap: 1vw;
    justify-content: center;
    margin: 2vh 0;
}

#bigmoney-input {
    width: 50vw;
    padding: 1.2vh 2vw;
    font-family: 'VT323', monospace;
    font-size: 3vh;
    background: #000;
    border: 2px solid var(--led-yellow);
    color: var(--led-yellow);
    text-transform: uppercase;
    outline: none;
}

#bigmoney-input:focus {
    box-shadow: 0 0 20px var(--led-yellow);
}

#bigmoney-input.duplicate-warning {
    border-color: var(--led-red);
    box-shadow: 0 0 20px var(--led-red);
    animation: shake 0.3s ease-in-out;
}

#bigmoney-input.duplicate-warning::placeholder {
    color: var(--led-red);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

#bigmoney-submit {
    padding: 1.2vh 3vw;
    font-family: 'VT323', monospace;
    font-size: 3vh;
    background: var(--led-green);
    border: none;
    color: #000;
    cursor: pointer;
}

#bigmoney-submit:hover {
    box-shadow: 0 0 20px var(--led-green);
}

.bigmoney-answers-display {
    min-height: 15vh;
    padding: 1vh;
}

.bigmoney-answer-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5vh 2vw;
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    border-bottom: 1px solid #333;
}

.bigmoney-answer-row .answer-text {
    color: var(--led-yellow);
    text-transform: uppercase;
    letter-spacing: 0.2vw;
}

.bigmoney-answer-row .answer-points {
    color: var(--led-green);
    text-shadow: 0 0 10px var(--led-green);
}

.bigmoney-answer-row.duplicate {
    color: var(--led-red);
}

.bigmoney-answer-row.duplicate .answer-text {
    color: var(--led-red);
    text-decoration: line-through;
}

.bigmoney-answer-row.duplicate .answer-points {
    color: var(--led-red);
    text-shadow: 0 0 10px var(--led-red);
}

.bigmoney-score-box {
    display: flex;
    justify-content: space-around;
    padding: 1.5vh 2vw;
    background: #111;
    border: 2px solid var(--led-yellow);
    margin: 2vh 0;
}

.bigmoney-score-box .score-label {
    font-family: 'VT323', monospace;
    font-size: 2vh;
    color: var(--led-yellow);
    opacity: 0.7;
}

.bigmoney-score-box .score-value {
    font-family: 'VT323', monospace;
    font-size: 5vh;
    color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
    display: block;
}

.bigmoney-total-score .score-value {
    color: var(--led-green);
    text-shadow: 0 0 20px var(--led-green);
    font-size: 6vh;
}

.bigmoney-controls {
    margin-top: 2vh;
}

.bigmoney-btn {
    padding: 1.5vh 4vw;
    font-family: 'VT323', monospace;
    font-size: 3vh;
    background: var(--led-yellow);
    border: none;
    color: #000;
    cursor: pointer;
    margin: 0 1vw;
}

.bigmoney-btn:hover {
    box-shadow: 0 0 30px var(--led-yellow);
}

/* Big Money Results */
#bigmoney-results {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3600;
}

.bigmoney-results-content {
    text-align: center;
}

.results-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 8vh;
    font-weight: 900;
    color: var(--led-green);
    text-shadow: 0 0 40px var(--led-green), 0 0 80px var(--led-green);
    margin-bottom: 2vh;
}

.results-title.failed {
    color: var(--led-red);
    text-shadow: 0 0 40px var(--led-red);
}

.results-score {
    margin: 2vh 0;
}

.results-score span:first-child {
    font-family: 'VT323', monospace;
    font-size: 15vh;
    color: var(--led-yellow);
    text-shadow: 0 0 30px var(--led-yellow);
    display: block;
}

.results-label {
    font-family: 'VT323', monospace;
    font-size: 4vh;
    color: var(--led-yellow);
    opacity: 0.7;
}

.results-prize {
    font-family: 'VT323', monospace;
    font-size: 5vh;
    color: var(--led-green);
    text-shadow: 0 0 20px var(--led-green);
    margin: 2vh 0;
    padding: 1.5vh 3vw;
    border: 3px solid var(--led-green);
    display: inline-block;
}

.results-prize.consolation {
    color: var(--led-yellow);
    border-color: var(--led-yellow);
    text-shadow: 0 0 15px var(--led-yellow);
}

.results-breakdown {
    margin: 2vh 0;
    font-family: 'VT323', monospace;
    font-size: 2vh;
    color: #666;
}

#bigmoney-continue {
    padding: 1.5vh 5vw;
    font-family: 'VT323', monospace;
    font-size: 3vh;
    background: var(--led-yellow);
    border: none;
    color: #000;
    cursor: pointer;
    margin-top: 2vh;
}

#bigmoney-continue:hover {
    box-shadow: 0 0 30px var(--led-yellow);
}

/* ============================================
   MULTIPLAYER MODE STYLES
   ============================================ */

/* Multiplayer Section on Start Screen */
.multiplayer-section {
    margin-top: 3vh;
    padding-top: 2vh;
}

.mp-divider {
    position: relative;
    text-align: center;
    margin-bottom: 2vh;
}

.mp-divider span {
    background: #000;
    padding: 0 2vw;
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    color: #666;
    position: relative;
    z-index: 1;
}

.mp-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: #444;
}

.mp-btn {
    padding: 1.5vh 4vw;
    font-family: 'VT323', monospace;
    font-size: 2.8vh;
    background: transparent;
    border: 2px solid var(--led-green);
    color: var(--led-green);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.2vw;
    transition: all 0.2s;
}

.mp-btn:hover {
    background: var(--led-green);
    color: #000;
    box-shadow: 0 0 30px var(--led-green);
}

.mp-hint {
    font-family: 'VT323', monospace;
    font-size: 2vh;
    color: #666;
    margin-top: 1vh;
}

/* Room Code Panel */
#room-code-panel {
    position: fixed;
    top: 2vh;
    right: 2vw;
    z-index: 100;
}

.room-code-box {
    background: #000;
    border: 3px solid var(--led-green);
    padding: 1.5vh 2.5vw;
    text-align: center;
}

.room-code-label {
    font-family: 'VT323', monospace;
    font-size: 1.8vh;
    color: var(--led-green);
    opacity: 0.7;
    margin-bottom: 0.5vh;
}

.room-code-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 5vh;
    font-weight: 900;
    color: var(--led-green);
    text-shadow: 0 0 20px var(--led-green);
    letter-spacing: 0.5vw;
}

.room-code-url {
    font-family: 'VT323', monospace;
    font-size: 1.6vh;
    color: #888;
    margin-top: 0.8vh;
}

.room-code-url strong {
    color: var(--led-yellow);
}

/* Player Lobby */
#player-lobby {
    position: fixed;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid var(--led-yellow);
    padding: 1.5vh 3vw;
    max-width: 80vw;
    z-index: 100;
}

.lobby-title {
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    color: var(--led-yellow);
    text-align: center;
    margin-bottom: 1.5vh;
    text-shadow: 0 0 10px var(--led-yellow);
}

.lobby-teams {
    display: flex;
    gap: 3vw;
    justify-content: center;
    align-items: flex-start;
}

.lobby-team {
    min-width: 15vw;
}

.lobby-team-name {
    font-family: 'VT323', monospace;
    font-size: 2.2vh;
    text-align: center;
    padding-bottom: 0.5vh;
    margin-bottom: 0.5vh;
    border-bottom: 1px solid;
}

.team1-lobby .lobby-team-name {
    color: #4a90d9;
    border-color: #4a90d9;
}

.team2-lobby .lobby-team-name {
    color: #e94e77;
    border-color: #e94e77;
}

.lobby-player-list {
    list-style: none;
    font-family: 'VT323', monospace;
    font-size: 2vh;
    color: var(--led-yellow);
    text-align: center;
}

.lobby-player-list li {
    padding: 0.3vh 0;
}

.lobby-player-list .no-players {
    color: #555;
    font-style: italic;
}

.lobby-player-list .polish-player::after {
    content: ' 🇵🇱';
}

.lobby-player-list .disconnected {
    color: #666;
    text-decoration: line-through;
}

.lobby-vs {
    font-family: 'VT323', monospace;
    font-size: 3vh;
    color: var(--led-red);
    align-self: center;
}

.lobby-status {
    font-family: 'VT323', monospace;
    font-size: 1.8vh;
    color: #666;
    text-align: center;
    margin-top: 1vh;
}

/* Multiplayer Game Controls */
#mp-game-controls {
    margin-top: 1vh;
    padding-top: 1vh;
    border-top: 1px solid #333;
}

.mp-buzzer-section {
    display: flex;
    gap: 1vw;
    justify-content: center;
    margin-bottom: 1vh;
}

.mp-ctrl-btn {
    padding: 0.8vh 2vw;
    font-family: 'VT323', monospace;
    font-size: 2vh;
    border: 2px solid;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.mp-ctrl-btn.buzzer-open {
    border-color: var(--led-green);
    color: var(--led-green);
}

.mp-ctrl-btn.buzzer-open:hover {
    background: var(--led-green);
    color: #000;
}

.mp-ctrl-btn.buzzer-open.active {
    background: var(--led-green);
    color: #000;
    animation: buzzer-open-pulse 0.5s infinite;
}

@keyframes buzzer-open-pulse {
    0%, 100% { box-shadow: 0 0 10px var(--led-green); }
    50% { box-shadow: 0 0 25px var(--led-green); }
}

.mp-ctrl-btn.buzzer-clear {
    border-color: var(--led-yellow);
    color: var(--led-yellow);
}

.mp-ctrl-btn.buzzer-clear:hover {
    background: var(--led-yellow);
    color: #000;
}

/* Buzzer Indicator */
#buzzer-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    padding: 1vh 2vw;
    background: rgba(0, 255, 0, 0.1);
    border: 2px solid var(--led-green);
    animation: buzzer-glow 0.5s infinite;
}

@keyframes buzzer-glow {
    0%, 100% { box-shadow: 0 0 10px var(--led-green); }
    50% { box-shadow: 0 0 30px var(--led-green); }
}

#buzzer-indicator .buzzer-icon {
    font-size: 3vh;
    animation: bell-shake 0.3s infinite;
}

@keyframes bell-shake {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

#buzzer-indicator .buzzer-name {
    font-family: 'VT323', monospace;
    font-size: 3.5vh;
    color: var(--led-green);
    text-shadow: 0 0 15px var(--led-green);
    font-weight: bold;
}

#buzzer-indicator .buzzed-text {
    font-family: 'VT323', monospace;
    font-size: 2.5vh;
    color: var(--led-yellow);
}

/* Multiplayer help items */
.help-item.mp-help {
    color: var(--led-green);
}

.help-item.mp-help kbd {
    border-color: var(--led-green);
    color: var(--led-green);
}

/* Connection status indicators */
.connection-status {
    position: fixed;
    top: 1vh;
    left: 1vw;
    font-family: 'VT323', monospace;
    font-size: 1.8vh;
    padding: 0.5vh 1vw;
    border-radius: 3px;
    z-index: 1000;
}

.connection-status.connected {
    background: rgba(0, 255, 0, 0.2);
    color: var(--led-green);
    border: 1px solid var(--led-green);
}

.connection-status.disconnected {
    background: rgba(255, 0, 0, 0.2);
    color: var(--led-red);
    border: 1px solid var(--led-red);
    animation: disconnect-pulse 1s infinite;
}

@keyframes disconnect-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* TTS indicator */
#tts-indicator {
    position: fixed;
    top: 1vh;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--led-yellow);
    padding: 0.5vh 2vw;
    font-family: 'VT323', monospace;
    font-size: 2vh;
    color: var(--led-yellow);
    z-index: 500;
    display: none;
}

#tts-indicator.speaking {
    display: block;
    animation: tts-pulse 0.5s infinite;
}

@keyframes tts-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}