/* ===== RESET & BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    overflow: hidden;
    font-family: 'Georgia', serif;
    background: #1a0e08;
    color: #e8d5b0;
    user-select: none;
    height: 100vh;
    width: 100vw;
}

/* ===== SZENE (Bar & Wald) ===== */
.scene {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transition: background 1.2s ease;
}

/* --- BAR MODUS --- */
.scene.bar-mode {
    background: linear-gradient(180deg,
        #0d0805 0%, #1a0e08 15%, #2a1a10 40%, #1e1209 70%, #150d06 100%);
}
.scene.bar-mode::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 120px,
            rgba(0,0,0,0.15) 120px, rgba(0,0,0,0.15) 122px),
        repeating-linear-gradient(0deg,
            transparent 0px, transparent 40px,
            rgba(0,0,0,0.05) 40px, rgba(0,0,0,0.05) 41px);
    pointer-events: none;
    z-index: 1;
}

/* --- WALD MODUS --- */
.scene.forest-mode {
    background: linear-gradient(180deg,
        #1a3a2a 0%, #0d2818 15%, #15351f 35%, #1a4025 55%, #0f2a16 75%, #0a1e10 100%);
}
.scene.forest-mode::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 80px,
            rgba(0,40,0,0.08) 80px, rgba(0,40,0,0.08) 82px),
        repeating-linear-gradient(180deg,
            transparent 0px, transparent 60px,
            rgba(0,20,0,0.04) 60px, rgba(0,20,0,0.04) 61px);
    pointer-events: none;
    z-index: 1;
}

/* ===== BAR DEKO ===== */
.bar-decor { transition: opacity 0.8s ease; }
.forest-mode .bar-decor { opacity: 0; pointer-events: none; }
.bar-mode .bar-decor { opacity: 1; }

/* ===== WALD DEKO ===== */
.forest-decor { transition: opacity 0.8s ease; position: absolute; z-index: 3; }
.bar-mode .forest-decor { opacity: 0; pointer-events: none; }
.forest-mode .forest-decor { opacity: 1; }

/* Bäume */
.tree {
    position: absolute;
    bottom: 70px;
    z-index: 2;
}
.tree-trunk {
    width: 20px;
    margin: 0 auto;
    background: linear-gradient(90deg, #3a2510, #5a3a1a, #3a2510);
    border-radius: 3px;
}
.tree-crown {
    border-radius: 50% 50% 45% 45%;
}
.tree.t1 { left: 30px; }
.tree.t1 .tree-trunk { height: 80px; }
.tree.t1 .tree-crown { width: 90px; height: 110px; background: radial-gradient(ellipse, #2a5a20 30%, #1a4015 70%, #0d2a0a); margin-left: -35px; }
.tree.t2 { left: 140px; }
.tree.t2 .tree-trunk { height: 60px; width: 16px; }
.tree.t2 .tree-crown { width: 70px; height: 85px; background: radial-gradient(ellipse, #336028 30%, #1f4518 70%, #0e2d0b); margin-left: -27px; }
.tree.t3 { right: 40px; }
.tree.t3 .tree-trunk { height: 90px; width: 22px; }
.tree.t3 .tree-crown { width: 100px; height: 120px; background: radial-gradient(ellipse, #2e5522 30%, #1b4216 70%, #0f3010); margin-left: -39px; }
.tree.t4 { right: 160px; }
.tree.t4 .tree-trunk { height: 50px; width: 14px; }
.tree.t4 .tree-crown { width: 60px; height: 70px; background: radial-gradient(ellipse, #3a6830 30%, #24501c 70%, #133a0e); margin-left: -23px; }

/* Wald-Himmel */
.forest-sky {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 180px;
    background: linear-gradient(180deg,
        #0a1520 0%, #152a3a 30%, #1a3a2a 70%, transparent 100%);
    z-index: 1;
}
.forest-stars {
    position: absolute;
    top: 0; left: 0; right: 0; height: 150px;
    z-index: 1;
}
.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Wald-Boden */
.forest-ground {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 85px;
    background: linear-gradient(180deg, #1a3a15, #15301a 40%, #102510);
    z-index: 2;
}
.forest-ground::before {
    content: '';
    position: absolute;
    top: -5px; left: 0; right: 0;
    height: 10px;
    background: linear-gradient(90deg,
        #2a5a20, #1a4015, #2a5a20, #1a4015, #2a5a20);
    border-radius: 50%;
    filter: blur(3px);
}

/* Mond */
.moon {
    position: absolute;
    top: 35px;
    right: 100px;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 35% 35%, #ffffdd, #ddddaa 60%, #bbbb88);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255,255,200,0.3), 0 0 80px rgba(255,255,200,0.1);
    z-index: 2;
}

/* Glühwürmchen */
.firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(200,255,100,0.8);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(200,255,100,0.6), 0 0 12px rgba(200,255,100,0.3);
    animation: fireflyFloat linear infinite;
    z-index: 4;
}
@keyframes fireflyFloat {
    0% { transform: translate(0,0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translate(40px,-60px); opacity: 0.7; }
    90% { opacity: 1; }
    100% { transform: translate(-20px,-120px); opacity: 0; }
}

/* Wald Dartscheibe-Ständer */
.board-stand {
    position: absolute;
    z-index: 3;
}
.forest-mode .board-stand { opacity: 1; }
.bar-mode .board-stand { opacity: 0; }

/* ===== BELEUCHTUNG ===== */
.bar-light {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse at center top,
        rgba(255,200,100,0.25) 0%, rgba(255,180,80,0.12) 30%,
        rgba(255,160,60,0.05) 50%, transparent 70%);
    pointer-events: none;
    z-index: 2;
}
.forest-mode .bar-light {
    background: radial-gradient(ellipse at center top,
        rgba(200,255,200,0.08) 0%, rgba(150,220,150,0.04) 40%, transparent 70%);
}

/* Lampe */
.lamp {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.lamp .fixture { width: 120px; height: 8px; background: linear-gradient(180deg, #3a2a1a, #2a1a0a); border-radius: 4px; margin: 0 auto; }
.lamp .cord { width: 2px; height: 35px; background: #222; margin: 0 auto; }
.lamp .shade {
    width: 140px; height: 45px;
    background: linear-gradient(180deg, #4a3520, #3a2510);
    border-radius: 0 0 70px 70px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 5px 40px rgba(255,180,80,0.5), 0 10px 80px rgba(255,150,50,0.3);
}
.lamp .shade::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 10%; width: 80%; height: 4px;
    background: rgba(255,200,120,0.8);
    border-radius: 50%;
    filter: blur(2px);
}
.lamp .glow {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 300px; height: 600px;
    background: radial-gradient(ellipse at top center,
        rgba(255,200,120,0.15) 0%, rgba(255,180,80,0.08) 40%, transparent 70%);
    pointer-events: none;
}

/* Wald: Lampe ausblenden, Mondlicht statt */
.forest-mode .lamp { opacity: 0; transition: opacity 0.8s; }
.bar-mode .lamp { opacity: 1; transition: opacity 0.8s; }

/* ===== WANDDEKO ===== */
.wall-decor { position: absolute; z-index: 3; }
.chalkboard {
    left: 60px; top: 80px;
    width: 160px; height: 220px;
    background: #1a2a1a;
    border: 8px solid #3a2510;
    border-radius: 3px;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; align-items: center;
    padding: 10px;
}
.chalkboard h3 {
    font-family: 'Courier New', monospace;
    color: #ccc; font-size: 13px;
    text-align: center; opacity: 0.9; margin-bottom: 8px;
}
.chalkboard .scores-list {
    font-family: 'Courier New', monospace;
    font-size: 11px; color: #aaa;
    text-align: center; line-height: 1.8;
}

/* Neon Sign */
.neon-sign {
    right: 50px; top: 60px;
    font-family: 'Brush Script MT', cursive;
    font-size: 36px; color: #ff4444;
    text-shadow:
        0 0 7px #ff4444, 0 0 10px #ff4444,
        0 0 21px #ff4444, 0 0 42px #ff0000, 0 0 82px #ff0000;
    animation: neonFlicker 3s infinite alternate;
}
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.7; }
}

/* Regale / Flaschen */
.shelf { position: absolute; z-index: 3; }
.shelf-board {
    width: 100%; height: 6px;
    background: linear-gradient(180deg, #5a3a20, #3a2010);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.bottles {
    display: flex; gap: 8px;
    justify-content: center; align-items: flex-end;
    padding: 0 5px 4px;
}
.bottle {
    width: 14px;
    border-radius: 3px 3px 5px 5px;
    position: relative;
}
.bottle::before {
    content: '';
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 8px;
    border-radius: 2px 2px 0 0;
    background: inherit;
    filter: brightness(0.8);
}

/* ===== DARTSCHEIBE ===== */
.dartboard-area {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}
.dartboard-mount {
    width: 380px; height: 380px;
    background: radial-gradient(circle, #2a1a10 48%, #3a2515 50%, #2a1a10 52%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow:
        0 0 0 8px #3a2510, 0 0 0 12px #2a1a0a,
        0 5px 30px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,0,0,0.3);
    position: relative;
}
#dartCanvas {
    border-radius: 50%;
    cursor: crosshair;
}

/* ===== FADENKREUZ ===== */
.crosshair {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    display: none;
}
.crosshair-v, .crosshair-h { position: absolute; background: rgba(255,50,50,0.6); }
.crosshair-v { width: 1px; height: 24px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.crosshair-h { width: 24px; height: 1px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.crosshair-dot {
    position: absolute; width: 4px; height: 4px;
    background: rgba(255,50,50,0.8); border-radius: 50%;
    left: 50%; top: 50%; transform: translate(-50%,-50%);
}

/* ===== DART IM BOARD ===== */
.dart-in-board {
    position: absolute;
    pointer-events: none;
    z-index: 15;
    transition: opacity 0.3s;
}

/* ===== HUD ===== */
.hud {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(180deg, transparent, rgba(10,5,2,0.9) 40%);
    z-index: 20;
    display: flex; justify-content: center; align-items: flex-end;
    padding-bottom: 15px; gap: 30px;
}
.forest-mode .hud {
    background: linear-gradient(180deg, transparent, rgba(5,15,5,0.9) 40%);
}

.player-panel {
    background: linear-gradient(135deg, rgba(60,40,20,0.9), rgba(40,25,12,0.95));
    border: 1px solid rgba(180,140,80,0.3);
    border-radius: 10px;
    padding: 12px 24px; text-align: center;
    min-width: 180px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.player-panel.active {
    border-color: rgba(255,200,100,0.6);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4), 0 0 20px rgba(255,180,80,0.15);
}
.player-panel .name {
    font-size: 12px; text-transform: uppercase;
    letter-spacing: 2px; color: #b89860; margin-bottom: 4px;
}
.player-panel .score {
    font-size: 36px; font-weight: bold; color: #f0d890;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.player-panel .round-score {
    font-size: 11px; color: #998060; margin-top: 2px;
}

.game-info {
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    gap: 8px; padding-bottom: 5px;
}
.darts-left { display: flex; gap: 6px; }
.dart-icon {
    width: 6px; height: 28px;
    background: linear-gradient(180deg, #888, #bbb 40%, #c42 50%, #c42);
    border-radius: 1px 1px 3px 3px;
    opacity: 0.3; transition: opacity 0.3s;
}
.dart-icon.available { opacity: 1; }

/* ===== HIT ANZEIGE ===== */
.hit-display {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    z-index: 50;
    font-size: 48px; font-weight: bold;
    color: #ffd700;
    text-shadow:
        0 0 10px rgba(255,215,0,0.8), 0 0 20px rgba(255,200,0,0.4),
        0 2px 4px rgba(0,0,0,0.8);
    pointer-events: none; opacity: 0;
    transition: all 0.4s ease-out;
}
.hit-display.show {
    opacity: 1;
    animation: hitPop 0.6s ease-out;
}
@keyframes hitPop {
    0% { transform: translate(-50%,-50%) scale(0.5); opacity: 0; }
    50% { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* ===== POWER BAR ===== */
.power-bar-container {
    position: absolute;
    right: 40px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 300px;
    background: rgba(30,20,10,0.8);
    border: 1px solid rgba(180,140,80,0.3);
    border-radius: 15px;
    z-index: 20; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.power-bar-fill {
    width: 100%;
    background: linear-gradient(0deg, #44aa44, #aacc44 50%, #cc4444);
    border-radius: 0 0 15px 15px;
    transition: height 0.05s;
    height: 0%;
}
.power-label {
    position: absolute; top: -25px; left: 50%;
    transform: translateX(-50%);
    font-size: 10px; letter-spacing: 1px;
    color: #998060; white-space: nowrap;
}

/* ===== BODEN ===== */
.floor {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(180deg, #2a1a0a, #1e1209);
    z-index: 2;
}
.floor::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, rgba(180,140,80,0.2), transparent);
}
.forest-mode .floor { display: none; }

.oche {
    position: absolute;
    bottom: 75px; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 4px;
    background: rgba(200,170,100,0.4);
    border-radius: 2px; z-index: 3;
    box-shadow: 0 0 10px rgba(200,170,100,0.2);
}
.forest-mode .oche {
    bottom: 80px;
    background: rgba(150,120,60,0.3);
}

/* ===== TOOLBAR (Ton, Pause, Szene) ===== */
.toolbar {
    position: absolute;
    top: 15px; right: 15px;
    display: flex; gap: 8px;
    z-index: 50;
}
.toolbar-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(180,140,80,0.3);
    background: rgba(40,25,12,0.85);
    color: #e8d5b0;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
    backdrop-filter: blur(4px);
}
.toolbar-btn:hover {
    border-color: rgba(255,200,100,0.6);
    box-shadow: 0 0 12px rgba(255,180,80,0.2);
    transform: scale(1.1);
}
.toolbar-btn.active {
    background: rgba(100,70,30,0.9);
    border-color: #f0d890;
}

/* ===== PAUSE OVERLAY ===== */
.pause-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 150;
    display: none;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 20px;
    backdrop-filter: blur(4px);
}
.pause-overlay.show { display: flex; }
.pause-overlay h1 {
    font-size: 52px; color: #f0d890;
    letter-spacing: 6px;
    text-shadow: 0 0 20px rgba(255,200,100,0.4);
}
.pause-overlay .pause-info {
    color: #998060; font-size: 14px; letter-spacing: 2px;
}
.pause-btn-resume {
    background: linear-gradient(135deg, #8a6030, #6a4520);
    color: #f0d890;
    border: 1px solid rgba(240,216,144,0.4);
    padding: 12px 40px; border-radius: 8px;
    cursor: pointer; font-family: 'Georgia', serif;
    font-size: 16px; letter-spacing: 2px;
    transition: all 0.3s;
}
.pause-btn-resume:hover {
    box-shadow: 0 0 20px rgba(255,180,80,0.3);
    transform: translateY(-2px);
}

/* ===== START SCREEN ===== */
.start-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,5,2,0.97);
    z-index: 200;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
}
.start-screen.hidden { display: none; }
.start-screen h1 {
    font-size: 52px; color: #f0d890;
    text-shadow: 0 0 10px rgba(255,200,100,0.5), 0 4px 8px rgba(0,0,0,0.5);
    letter-spacing: 4px;
}
.start-screen h2 {
    font-size: 16px; color: #998060;
    letter-spacing: 3px; font-weight: normal;
}

.menu-section {
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
    margin-top: 10px;
}
.menu-section label {
    font-size: 12px; color: #b89860;
    letter-spacing: 2px; text-transform: uppercase;
}

.game-mode-select { display: flex; gap: 12px; }
.mode-btn {
    background: linear-gradient(135deg, rgba(60,40,20,0.9), rgba(40,25,12,0.95));
    border: 1px solid rgba(180,140,80,0.3);
    color: #e8d5b0;
    padding: 12px 24px; border-radius: 8px;
    cursor: pointer; font-family: 'Georgia', serif;
    font-size: 15px; letter-spacing: 1px;
    transition: all 0.3s;
}
.mode-btn:hover {
    border-color: rgba(255,200,100,0.6);
    box-shadow: 0 0 20px rgba(255,180,80,0.2);
    transform: translateY(-2px);
}
.mode-btn.selected {
    border-color: #f0d890;
    background: linear-gradient(135deg, rgba(100,70,30,0.9), rgba(70,45,22,0.95));
}

/* Turnier Setup */
.tournament-setup {
    display: none;
    flex-direction: column;
    align-items: center; gap: 10px;
    background: rgba(40,25,12,0.6);
    border: 1px solid rgba(180,140,80,0.2);
    border-radius: 10px;
    padding: 15px 25px;
    margin-top: 5px;
}
.tournament-setup.show { display: flex; }
.tournament-setup label { font-size: 11px; color: #b89860; letter-spacing: 1px; }
.tournament-setup input {
    background: rgba(30,18,8,0.8);
    border: 1px solid rgba(180,140,80,0.25);
    color: #e8d5b0;
    padding: 6px 12px; border-radius: 5px;
    font-family: 'Georgia', serif; font-size: 13px;
    width: 160px; text-align: center;
}
.tournament-setup input::placeholder { color: #665540; }
.player-inputs { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.add-player-btn {
    background: none;
    border: 1px dashed rgba(180,140,80,0.3);
    color: #b89860;
    padding: 4px 14px; border-radius: 5px;
    cursor: pointer; font-family: 'Georgia', serif;
    font-size: 12px; transition: all 0.3s;
}
.add-player-btn:hover { border-color: #f0d890; color: #f0d890; }

/* Turnier Bracket */
.bracket-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,5,2,0.95);
    z-index: 180;
    display: none;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 20px;
}
.bracket-overlay.show { display: flex; }
.bracket-overlay h2 {
    font-size: 28px; color: #f0d890;
    letter-spacing: 3px;
}
.bracket-display {
    display: flex; gap: 40px;
    align-items: center;
}
.bracket-round {
    display: flex; flex-direction: column; gap: 20px;
    align-items: center;
}
.bracket-round-title {
    font-size: 11px; color: #998060;
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 5px;
}
.bracket-match {
    background: rgba(40,25,12,0.8);
    border: 1px solid rgba(180,140,80,0.2);
    border-radius: 6px;
    padding: 8px 16px;
    min-width: 140px; text-align: center;
}
.bracket-match.active {
    border-color: #f0d890;
    box-shadow: 0 0 15px rgba(255,180,80,0.2);
}
.bracket-match .bm-player {
    padding: 3px 0; font-size: 13px; color: #e8d5b0;
}
.bracket-match .bm-player.winner { color: #ffd700; font-weight: bold; }
.bracket-match .bm-player.loser { color: #665540; text-decoration: line-through; }
.bracket-match .bm-vs {
    font-size: 10px; color: #665540; letter-spacing: 2px;
}
.bracket-continue-btn {
    background: linear-gradient(135deg, #8a6030, #6a4520);
    color: #f0d890;
    border: 1px solid rgba(240,216,144,0.4);
    padding: 10px 30px; border-radius: 8px;
    cursor: pointer; font-family: 'Georgia', serif;
    font-size: 14px; letter-spacing: 2px;
    transition: all 0.3s;
}
.bracket-continue-btn:hover {
    box-shadow: 0 0 20px rgba(255,180,80,0.3);
    transform: translateY(-2px);
}

.start-btn {
    background: linear-gradient(135deg, #8a6030, #6a4520);
    color: #f0d890;
    border: 2px solid rgba(240,216,144,0.5);
    padding: 14px 50px; border-radius: 8px;
    cursor: pointer; font-family: 'Georgia', serif;
    font-size: 20px; letter-spacing: 3px;
    transition: all 0.3s; margin-top: 5px;
}
.start-btn:hover {
    box-shadow: 0 0 30px rgba(255,180,80,0.3);
    transform: translateY(-2px);
}

/* ===== WIN SCREEN ===== */
.win-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,5,2,0.92);
    z-index: 200;
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 15px;
}
.win-screen.show { display: flex; }
.win-screen h1 {
    font-size: 42px; color: #ffd700;
    text-shadow: 0 0 20px rgba(255,215,0,0.5);
    letter-spacing: 4px;
}
.win-screen p { font-size: 18px; color: #b89860; }

/* ===== AUTO-SWITCH OVERLAY ===== */
.switch-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    display: none;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    backdrop-filter: blur(2px);
}
.switch-overlay.show { display: flex; }
.switch-overlay .round-summary {
    font-size: 14px; color: #b89860; letter-spacing: 1px;
}
.switch-overlay h2 {
    font-size: 32px; color: #f0d890;
    letter-spacing: 3px;
}

/* ===== AMBIENT PARTICLES ===== */
.particle {
    position: absolute;
    background: rgba(255,200,100,0.1);
    border-radius: 50%;
    pointer-events: none; z-index: 1;
    animation: float linear infinite;
}
@keyframes float {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .dartboard-mount { width: 280px; height: 280px; }
    .chalkboard { display: none; }
    .neon-sign { font-size: 24px; right: 20px; top: 30px; }
    .player-panel .score { font-size: 28px; }
    .toolbar { top: 10px; right: 10px; }
    .toolbar-btn { width: 36px; height: 36px; font-size: 15px; }
}