:root { 
    --bg-body: radial-gradient(circle at center, #232334 0%, #050505 100%);
    --bg-card: rgba(30,30,30,0.9); 
    --bg-panel: rgba(20,20,20,0.6);
    --text-main: #fff; 
    --text-muted: #aaa;
    --neon-pink: #ff007f; 
    --neon-cyan: #00f3ff; 
    --neon-green: #39ff14; 
    --neon-yellow: #ffd700;
    --font-main: 'Outfit', sans-serif;
    --modal-bg: rgba(20,20,20,0.95);
    --btn-icon-bg: rgba(255,255,255,0.1);
}
body.light-mode {
    --bg-body: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    --bg-card: rgba(255,255,255,0.92); --bg-panel: rgba(255,255,255,0.85); --text-main: #000000; --text-muted: #333;
    --neon-pink: #d63384; --neon-cyan: #0dcaf0; --neon-green: #198754; --neon-yellow: #e0a800;
    --modal-bg: rgba(255,255,255,0.95); --btn-icon-bg: rgba(0,0,0,0.1);
}
body { font-family: var(--font-main); background: var(--bg-body); color: var(--text-main); margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; user-select: none; -webkit-user-select: none; transition: background 0.5s ease; }

#top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; padding: 5px 15px; width: 100%; box-sizing: border-box; gap: 20px; z-index: 20000; position: relative; }
#header-right { display: flex; align-items: center; gap: 15px; position: relative; } .header-actions { display: flex; gap: 15px; }
.icon-btn { cursor: pointer; font-size: 1.1rem; display:flex; align-items:center; justify-content:center; width: 32px; height: 32px; border-radius: 12px; background: var(--btn-icon-bg); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(5px); transition: all 0.2s; color: var(--text-main); padding: 0; }
.icon-btn:hover { transform: scale(1.1); background: var(--neon-pink); border-color: var(--neon-pink); color: white; }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10001; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-content { background: var(--modal-bg); padding: 25px; border-radius: 20px; width: 90%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: var(--text-main); animation: popIn 0.3s ease; }
.modal-header { font-size: 1.2rem; font-weight: 800; display: flex; justify-content: space-between; margin-bottom: 20px; border-bottom: 1px solid var(--text-muted); padding-bottom: 10px; }
.close-modal { cursor: pointer; color: var(--neon-pink); }
.setting-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.volume-slider-wrapper { display: flex; align-items: center; gap: 10px; width: 60%; }

#global-timer-bar { position:fixed; top:0; left:0; height:6px; width:0%; background:linear-gradient(90deg, var(--neon-pink), var(--neon-yellow)); z-index:2000; box-shadow:0 0 15px var(--neon-pink); transition: width 0.1s linear; }
#loader-wrapper { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:9999; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px; }
.loader-record { width:120px; height:120px; background:radial-gradient(circle, #111 0%, #333 35%, #000 36%, #111 100%); border-radius:50%; border:2px solid #333; animation:spin 1s linear infinite; position:relative; box-shadow:0 0 30px var(--neon-pink); margin: 0 auto; }
.loader-record::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; background:linear-gradient(45deg, var(--neon-pink), var(--neon-cyan)); border-radius:50%; }
.loader-text { font-size:1.2rem; letter-spacing:3px; animation:colorCycle 2s infinite; text-align:center; font-weight: 800; text-transform:uppercase; margin-top:20px; }

.app-container { width:100%; max-width:420px; padding:10px; box-sizing:border-box; display:flex; flex-direction:column; min-height:100vh; }
.btn { border:none; color:white; padding:15px; font-size:1.1rem; cursor:pointer; border-radius:12px; margin:5px 0; width:100%; font-weight:800; text-transform:uppercase; transition:all 0.2s; font-family: var(--font-main); }
.btn:active { transform:scale(0.98); } .btn-primary { background: linear-gradient(45deg, var(--neon-pink), #a00050); box-shadow:0 4px 15px rgba(255,0,127,0.4); } 
.btn-secondary { background:rgba(120,120,120,0.2); border:1px solid rgba(255,255,255,0.2); backdrop-filter: blur(5px); color: var(--text-main); }
.input-field { padding:15px; font-size:1.1rem; border-radius:12px; border:1px solid #444; background:rgba(0,0,0,0.2); color:var(--text-main); width:100%; text-align:center; box-sizing:border-box; font-family: var(--font-main); outline:none; transition: border 0.3s; }
.input-field:focus { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,243,255,0.3); }
.logo-small { color:var(--neon-pink); font-size:1.5rem; letter-spacing:1px; margin:0; text-shadow:0 0 10px var(--neon-pink); font-weight: 800; margin-right: auto; }
.code-pill { background:var(--btn-icon-bg); padding:4px 12px; border-radius:15px; font-size:0.9rem; border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(5px); height: 32px; display: flex; align-items: center; box-sizing: border-box; }
.code-label { color:var(--text-muted); font-size:0.7rem; margin-right:3px; }
#lobby-code-display { color:var(--neon-cyan); font-weight:800; font-family:monospace; font-size:1.1rem; }
#view-start, #view-create { flex-grow:1; display:flex; align-items:center; }
.lobby-card { background:var(--bg-card); padding:30px 20px; border-radius:20px; border:1px solid rgba(255,255,255,0.1); width:100%; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,0.5); backdrop-filter: blur(10px); }
.setup-group { margin-bottom:15px; text-align:left; } .setup-group label { color:var(--text-muted); font-size:0.9rem; margin-left:10px; }
.game-dashboard-layout { display: flex; flex-direction: column; width: 100%; gap: 10px; }
.col-stage { order: 1; } .col-grid { order: 2; } .col-sidebar { order: 3; }
.game-center { display:flex; flex-direction:column; align-items:center; margin-bottom:15px; position:relative; margin-top: 10px; }

#spinner-container { position: relative; }
#center-timer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; font-weight: 800; color: #fff; z-index: 20; text-shadow: 0 0 10px #000; pointer-events: none; }
.record-vinyl { width:140px; height:140px; background:#111; border-radius:50%; position:relative; box-shadow:0 5px 25px rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; transition:transform 1s ease-out, box-shadow 0.3s, border-color 0.3s; overflow:hidden; border: 4px solid rgba(255,255,255,0.05); will-change: transform; }

.record-vinyl.glow-pink { box-shadow: 0 0 40px var(--neon-pink); border-color: var(--neon-pink); }
.record-vinyl.glow-cyan { box-shadow: 0 0 40px var(--neon-cyan); border-color: var(--neon-cyan); }
.record-vinyl.glow-green { box-shadow: 0 0 40px var(--neon-green); border-color: var(--neon-green); }
.record-vinyl.glow-yellow { box-shadow: 0 0 40px var(--neon-yellow); border-color: var(--neon-yellow); }

.record-vinyl.spinning { animation:spin 1s linear infinite; }
.record-vinyl.playing-spin { animation: spin 4s linear infinite; }
.record-vinyl.clickable { cursor:pointer; animation:pulseRecord 2s infinite; }
@keyframes spin { 100% { transform:rotate(360deg); } } @keyframes spinReverse { 100% { transform:rotate(-360deg); } } @keyframes pulseRecord { 0% { transform:scale(1); } 50% { transform:scale(1.03); } 100% { transform:scale(1); } }
@keyframes typingPulse { 0% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-3px); opacity: 1; } 100% { transform: translateY(0); opacity: 0.6; } }

.grooves { position:absolute; top:0; left:0; right:0; bottom:0; border-radius:50%; background:repeating-radial-gradient(#111 0,#111 2px,#222 3px,#222 4px); opacity:0.6; pointer-events:none; z-index:1; }
.record-label { width:60px; height:60px; border-radius:50%; background:#333; display:flex; align-items:center; justify-content:center; text-align:center; z-index:2; padding:3px; border:2px solid rgba(255,255,255,0.1); }
#spin-text { font-weight:800; font-size:0.8rem; color:white; line-height:1.1; }
.record-vinyl.spinning .record-label { animation:spinReverse 1s linear infinite; }
#album-art { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; border-radius:50%; opacity:0.8; z-index:0; display: none; }
#album-art.show-cover { display: block; }
#category-full-text { min-height:1.2rem; margin-top:15px; color:var(--neon-cyan); font-weight:800; font-size:0.9rem; text-align:center; text-shadow:0 0 10px rgba(0,243,255,0.5); }
#song-reveal-info { margin-top:5px; text-align:center; animation:popIn 0.5s ease; width:100%; }
#smart-solution-box { background:var(--neon-pink); color:white; padding:3px 10px; border-radius:15px; display:inline-block; font-weight:bold; margin-bottom:4px; font-size:0.9rem; box-shadow: 0 0 10px var(--neon-pink); }
#reveal-artist { color:var(--text-main); font-weight:800; font-size:1.1rem; }
#reveal-title { color:var(--text-muted); font-style:italic; font-size:0.9rem; }
#reveal-year { color:var(--neon-yellow); font-weight:bold; font-size:0.9rem; margin-top:2px; border:1px solid var(--neon-yellow); display:inline-block; padding:1px 6px; border-radius:8px; }
#game-status-line { text-align:center; height:18px; margin-bottom:10px; } 
#game-status { color:var(--text-muted); font-size:0.85rem; } .active-turn { color:var(--neon-pink); font-weight:bold; }

/* BINGO CARD */
.bingo-container { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:320px; margin:0 auto; background:rgba(100,100,100,0.1); padding:10px; border-radius:15px; backdrop-filter: blur(5px); height: 100%; box-sizing: border-box; }
.bingo-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; position:relative; font-weight:bold; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.2); text-shadow: 0 0 2px rgba(0,0,0,0.5); }
.bingo-cell.marked::after { content:"✕"; font-size:2.5rem; color:rgba(0,0,0,0.6); font-family:sans-serif; line-height:1; }
.bingo-cell.pending-mark::after { content:"✕"; font-size:2rem; color:rgba(255,255,255,0.8); animation: pulseMark 1s infinite; }
.bingo-cell.dimmed { filter: grayscale(100%) brightness(0.4); opacity: 0.5; }
.bingo-cell.highlight-blink { filter: grayscale(0%) brightness(1.2); opacity: 1; box-shadow: 0 0 15px currentColor; z-index: 10; transform: scale(1.05); }
.bingo-container.scanning-active .bingo-cell { filter: grayscale(100%) brightness(0.4); opacity: 0.4; transition: transform 0.1s, filter 0.1s; }
.bingo-container.scanning-active .bingo-cell.disco-flash { filter: grayscale(0%) brightness(1.5); opacity: 1; transform: scale(1.1); box-shadow: 0 0 25px currentColor; z-index: 10; }

.color-pink { background: linear-gradient(135deg, #ff5f6d, #ffc371); color: var(--neon-pink); } 
.color-cyan { background: linear-gradient(135deg, #00c6ff, #0072ff); color: var(--neon-cyan); } 
.color-green { background: linear-gradient(135deg, #11998e, #38ef7d); color: var(--neon-green); } 
.color-yellow { background: linear-gradient(135deg, #f7971e, #ffd200); color: var(--neon-yellow); } 
.color-rainbow { background:linear-gradient(45deg,red,blue); }
.bingo-cell.disabled { opacity:0.2; cursor:default; filter:grayscale(100%); }

.player-card { background:rgba(100,100,100,0.1); padding:10px 15px; border-radius:12px; font-size:0.95rem; color:var(--text-muted); border:1px solid rgba(100,100,100,0.2); display:flex; flex-direction:column; gap:5px; transition: all 0.3s; position:relative; margin-bottom: 5px; }
.player-row-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.player-info-left { display: flex; align-items: center; gap: 8px; }
.player-card b { color:var(--text-main); font-weight: 600; font-size: 1.05rem; }
.player-answer-row { font-size: 0.9rem; color: var(--text-main); background:rgba(0,0,0,0.3); padding: 6px 10px; border-radius: 12px; margin-top: 2px; position: relative; width: 100%; box-sizing: border-box; }
.player-answer-text { color: var(--neon-cyan); font-weight: bold; }
.player-answer-locked { color: var(--text-muted); font-style: italic; display: flex; align-items: center; gap: 5px; }
.dj-icon { font-size: 1.1rem; margin-left: 5px; animation: pulseRecord 1s infinite; }
.typing-icon { font-size: 1.1rem; margin-left: 5px; animation: typingPulse 0.8s infinite ease-in-out; display: inline-block; color: var(--neon-yellow); }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; box-shadow: 0 0 5px currentColor; }
.status-green { background:var(--neon-green); color: var(--neon-green); } .status-yellow { background:var(--neon-yellow); color:var(--neon-yellow); } .status-red { background:#dc3545; color:#dc3545; }
.distance-badge { font-size: 0.9rem; color: #fff; background: rgba(0,0,0,0.6); border-radius: 8px; padding: 5px 10px; border: 1px solid rgba(255,255,255,0.2); font-weight: bold; min-width: 30px; text-align: center; margin-left: auto; }
.dist-close { color: var(--neon-yellow); border-color: var(--neon-yellow); animation: pulseRecord 2s infinite; }
.dist-very-close { color: #000; background: var(--neon-pink); border-color: var(--neon-pink); font-weight: bold; animation: pulseRecord 1s infinite; }

/* CHAT STYLES (DESKTOP FIXED VISIBLE) */
#chat-section { display: flex !important; flex-direction: column; height: 300px; flex-shrink: 0; background: rgba(0,0,0,0.2); border-top: 1px solid rgba(150,150,150,0.1); padding: 10px; margin-top: auto; }
.chat-header { font-size: 0.9rem; color: var(--neon-cyan); font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid rgba(150,150,150,0.1); padding-bottom: 5px; }
#chat-messages { flex-grow: 1; overflow-y: auto; font-size: 0.85rem; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.chat-msg { background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 8px; color: var(--text-muted); }
.chat-msg b { color: var(--text-main); }
.chat-input-row { display: flex; flex-direction: column; gap: 5px; }
.reaction-buttons { display: flex; justify-content: space-between; gap: 5px; margin-bottom: 5px; }
.reaction-buttons button { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; cursor: pointer; font-size: 1.2rem; flex: 1; transition: transform 0.1s; padding: 5px 0; }
.reaction-buttons button:hover { transform: scale(1.1); background: rgba(255,255,255,0.2); }
#chat-input, #mobile-chat-input { background: rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.3); padding: 8px; border-radius: 10px; color: white; width: 100%; box-sizing: border-box; }
#send-btn { background: var(--neon-pink); border: none; color: white; border-radius: 8px; padding: 0 15px; cursor: pointer; }

/* LOGO MENU */
#logo-menu { position: absolute; top: 100%; left: 0; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; padding: 10px; min-width: 150px; z-index: 99999; box-shadow: 0 10px 30px rgba(0,0,0,0.5); backdrop-filter: blur(10px); animation: popIn 0.2s ease; display: none; }
#logo-menu.visible { display: block; }
.menu-item { padding: 8px 12px; cursor: pointer; color: var(--text-main); border-radius: 8px; transition: background 0.2s; font-size: 0.9rem; }
.menu-item:hover { background: rgba(255,255,255,0.1); }

/* MOBILE CHAT PREVIEW (NEW) */
#mobile-chat-preview { display: none; position: absolute; top: 100%; right: 0; width: 250px; pointer-events: none; z-index: 19000; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding-top: 10px; }
.mobile-chat-preview-msg { background: rgba(0,0,0,0.8); color: white; padding: 8px 12px; border-radius: 15px; font-size: 0.85rem; backdrop-filter: blur(5px); animation: slideInRight 0.3s ease; max-width: 90%; word-wrap: break-word; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.6); }
.mobile-chat-preview-msg b { color: var(--neon-cyan); margin-right: 5px; }
@keyframes slideInRight { 0% { transform: translateX(20px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

/* MOBILE DROPDOWN (TOP RIGHT) */
#mobile-chat-dropdown { position: absolute; top: 60px; right: 0; width: 320px; height: 50vh; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.2); border-radius: 15px; z-index: 20000; padding: 15px; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.9); backdrop-filter: blur(20px); animation: slideDown 0.3s ease; }
@keyframes slideDown { 0% { transform: translateY(-10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

.mobile-chat-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; color: var(--neon-cyan); border-bottom: 1px solid rgba(150,150,150,0.2); padding-bottom: 10px; }
#mobile-chat-body { flex-grow: 1; overflow-y: auto; margin-bottom: 10px; display: flex; flex-direction: column; gap: 5px; }
.mobile-chat-footer { display: flex; flex-direction: column; gap: 8px; }

/* MOBILE SPECIFIC */
@media (max-width: 1024px) {
    #mobile-chat-preview { display: flex; }
    #mobile-chat-toggle { display: flex; }
    #chat-section { display: none !important; }
}
@media (min-width: 1025px) {
    #mobile-chat-toggle, #mobile-chat-preview, #mobile-chat-dropdown { display: none !important; }
}

/* FLYING EMOJIS */
#flying-emojis-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99999; overflow: hidden; }
.flying-emoji { position: absolute; font-size: 3rem; animation: flyUp 3s linear forwards; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
@keyframes flyUp { 0% { transform: translateY(100vh) scale(0.5); opacity: 1; } 100% { transform: translateY(-10vh) scale(1.2) rotate(360deg); opacity: 0; } }

#input-area { width:90%; margin: 10px auto; }
#answer-input { border: 2px solid var(--neon-cyan); box-shadow: 0 0 15px rgba(0,243,255,0.2); padding: 12px; font-size:1.1rem; border-radius: 20px; }
#volume-controls { width:80%; max-width:250px; margin:5px auto 10px auto; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.1); padding:8px 15px; border-radius:30px; border:1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px); }
input[type=range] { width:100%; height:4px; background:rgba(150,150,150,0.5); border-radius:5px; outline:none; -webkit-appearance:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; background:var(--neon-pink); border-radius:50%; cursor:pointer; box-shadow: 0 0 10px var(--neon-pink); }
#winner-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); z-index:10000; display:flex; align-items:center; justify-content:center; flex-direction:column; backdrop-filter: blur(20px); }
.winner-content { text-align:center; animation:popIn 0.5s ease; }
#live-log-container { width:100%; max-width:360px; margin:5px auto; background:rgba(0,0,0,0.3); border-radius:10px; border:1px solid rgba(150,150,150,0.2); overflow:hidden; }
.log-header { background:rgba(150,150,150,0.1); padding:8px 12px; font-size:0.8rem; color:var(--text-main); display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:bold; }
.log-body-collapsed { display:none; } .log-body-expanded { display:block; }
#game-log-content { max-height:120px; overflow-y:auto; padding:5px; font-size:0.75rem; text-align:left; }
.log-entry { margin-bottom:3px; border-bottom:1px solid rgba(150,150,150,0.1); padding:4px; color:var(--text-muted); }
.log-entry span { color:var(--neon-cyan); font-weight:bold; }
#host-approval-container { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); width:90%; max-width:400px; z-index:9000; }
.approval-card { background:var(--bg-card); border:1px solid var(--neon-yellow); border-radius:20px; padding:15px; box-shadow:0 0 30px rgba(255,215,0,0.2); text-align:center; animation:popIn 0.3s ease; backdrop-filter: blur(10px); }
.approval-card h3 { margin:0 0 10px 0; color:var(--neon-yellow); font-size:1.1rem; text-transform:uppercase; letter-spacing:1px; }
.approval-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; background:rgba(255,255,255,0.05); padding:10px; border-radius:10px; border: 1px solid rgba(255,255,255,0.1); }
.approval-info { text-align:left; font-size:0.9rem; }
.approval-actions { display:flex; gap:8px; }
.btn-approve { background:var(--neon-green); border:none; color:black; border-radius:8px; width:40px; height:40px; font-size:1.2rem; cursor:pointer; font-weight:bold; transition: transform 0.1s; }
.btn-reject { background:var(--neon-pink); border:none; color:white; border-radius:8px; width:40px; height:40px; font-size:1.2rem; cursor:pointer; font-weight:bold; transition: transform 0.1s; }
.btn-approve:hover, .btn-reject:hover { transform: scale(1.1); }
@media (max-width: 768px) { #volume-controls { display: none !important; } }
@keyframes colorCycle { 0%{color:var(--neon-pink);} 50%{color:var(--neon-cyan);} 100%{color:var(--neon-pink);} }
@keyframes popIn { 0%{transform:scale(0);} 80%{transform:scale(1.1);} 100%{transform:scale(1);} }
.hidden { display:none !important; }

/* DESKTOP LAYOUT (FIXED SPLIT) */
@media (min-width: 1024px) {
    .app-container { max-width: 1800px; padding: 40px; justify-content: center; align-items: center; }
    #view-start, #view-create { width: 100%; justify-content: center; }
    .lobby-card { max-width: 600px; padding: 50px; background: var(--bg-card); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px rgba(0,0,0,0.5); border-radius: 30px; }
    .setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .full-width { grid-column: span 2; }
    .input-field { background: rgba(0,0,0,0.1); border-color: rgba(150,150,150,0.2); transition: all 0.3s; }
    .input-field:focus { background: rgba(0,0,0,0.2); border-color: var(--neon-cyan); transform: translateY(-2px); }
    .game-dashboard-layout { display: grid; grid-template-columns: 460px 1fr 460px; gap: 30px; height: 90vh; width: 100%; max-width: 1800px; align-items: stretch; }
    .col-grid { order: 1; background: var(--bg-panel); border: 1px solid rgba(150, 150, 150, 0.1); backdrop-filter: blur(15px); border-radius: 25px; padding: 20px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-height: 85vh; align-self: center; min-height: 60vh; }
    .col-grid .panel-header { font-size: 1.4rem; margin-bottom: 25px; color: var(--neon-pink); text-align: center; letter-spacing: 3px; font-weight: 800; border-bottom: 1px solid rgba(150,150,150,0.2); padding-bottom: 15px; }
    .bingo-container { max-width: 100%; gap: 12px; padding: 15px; background: transparent; backdrop-filter: none; }
    .bingo-cell { border-radius: 15px; font-size: 1.2rem; } .bingo-cell.marked::after { font-size: 4rem; }
    .col-stage { order: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }
    .record-vinyl { width: 340px; height: 340px; background: radial-gradient(circle, #111 0%, #111 35%, #000 36%, #333 36.5%, #111 37%, #111 100%); box-shadow: 0 0 80px rgba(255, 0, 127, 0.15); border: 4px solid rgba(255,255,255,0.05); will-change: transform; }
    .record-vinyl::after { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; border-radius:50%; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 100%); pointer-events: none; }
    .grooves { background: repeating-radial-gradient(#111 0, #111 2px, #222 3px, #222 4px); opacity: 0.8; }
    .record-label { width: 130px; height: 130px; font-size: 1.8rem; z-index: 5; }
    #spin-text { font-size: 1.8rem; }
    #category-full-text { font-size: 2rem; margin-top: 35px; text-transform: uppercase; letter-spacing: 2px; height: 50px; }
    #smart-solution-box { font-size: 1.4rem; padding: 10px 25px; background: var(--neon-pink); box-shadow: 0 0 20px var(--neon-pink); border: none; }
    #reveal-artist { font-size: 2.8rem; margin-top: 15px; text-shadow: 0 0 10px rgba(0,0,0,0.2); }
    #reveal-title { font-size: 1.8rem; color: var(--text-muted); }
    #reveal-year { font-size: 1.4rem; padding: 5px 15px; margin-top: 15px; }
    #input-area { width: 450px; margin-top: 50px; }
    #answer-input { font-size: 1.4rem; padding: 18px; border-radius: 50px; text-align: center; }
    #volume-controls { display: flex !important; width: 50%; margin-top: 30px; background: rgba(0,0,0,0.5); position: static; transform: none; }
    .col-sidebar { order: 3; background: var(--bg-panel); border: 1px solid rgba(150, 150, 150, 0.1); backdrop-filter: blur(15px); border-radius: 25px; padding: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-height: 85vh; align-self: center; height: 85vh; }
    .col-sidebar .panel-header { background: rgba(150,150,150,0.05); padding: 25px; text-align: center; font-weight: 800; color: var(--neon-cyan); border-bottom: 1px solid rgba(150,150,150,0.2); letter-spacing: 2px; font-size: 1.4rem; }
    .player-list-vertical { padding: 20px 25px 5px 25px; gap: 10px; overflow-y: auto; flex: 1; min-height: 0; }
    .player-card { padding: 12px 18px; background: rgba(0,0,0,0.2); border: 1px solid rgba(150,150,150,0.1); border-radius: 12px; font-size: 1rem; }
    .player-card b { font-size: 1.1rem; }
    .sidebar-footer { background: transparent; border-top: none; padding: 10px 20px; flex-shrink: 0; }
    .live-log-container { background: rgba(0,0,0,0.2); border: none; }
    #game-log-content { max-height: 100px; font-size: 0.85rem; }
}