@font-face { font-family: 'Luckiest Guy'; src: url('assets/luckiest-guy-v25-latin-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('assets/nunito-v32-latin-regular.woff2') format('woff2'); font-display: swap; }

:root {
    --bg: #0f0518; --card: #1f1130; --text: #fff; --gold: #ffd700;
    --primary: #d4a017; --green: #2dc937; --danger: #ff4444;
    --font-header: 'Luckiest Guy', cursive; --font-body: 'Nunito', sans-serif;
}

/* 1. ABSOLUTE VIEWPORT CONTAINMENT */
html, body { margin: 0; padding: 0; width: 100vw; height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-body); overflow: hidden; text-align: center; overscroll-behavior: none; }
audio { display: none; }
h1, h2, h3, .btn-action, .btn-host, .status-label, .round-label { font-family: var(--font-header); letter-spacing: 1px; }

/* DOUBLE DOWN GLOW */
.double-down-glow { box-shadow: inset 0 0 30px #ffaa00; animation: pulse-glow-edge 1s infinite alternate; }
@keyframes pulse-glow-edge { 0% { box-shadow: inset 0 0 20px #ff4444; } 100% { box-shadow: inset 0 0 60px #ffaa00; } }

.text-gold { color: var(--gold); } .text-primary { color: var(--primary); } .text-aaa { color: #aaa; } .text-white { color: white; }
.w-full { width: 100%; } .h-full { height: 100%; } .text-left { text-align: left; }
.flex-between { display: flex; justify-content: space-between; align-items: center; } 
.flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content:center; width: 100%; height:100%; min-width: 0; min-height: 0; }
.mb-20 { margin-bottom: 20px; } .bg-red { background: linear-gradient(45deg, #880000, #ff0000) !important; }

/* CORE CONTAINER - ALWAYS 100% HEIGHT, NO OVERFLOW */
.container { height: 100dvh; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2dvh 4vw; box-sizing: border-box; min-width: 0; min-height: 0; }

.btn-action, .btn-host { padding: clamp(8px, 1.5vh, 12px) 20px; font-size: clamp(0.9rem, 2vh, 1.2rem); font-family: var(--font-header); letter-spacing: 1px; background: linear-gradient(45deg, #b8860b, #ffd700); color: #1a1000; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 15px rgba(212,175,55,0.4); transition: transform 0.1s, opacity 0.2s; white-space: normal; word-break: break-word; width: 100%; box-sizing: border-box; display: block; text-align: center; touch-action: manipulation; flex-shrink: 0; }
.btn-action:active, .btn-host:active { transform: scale(0.95); }
.btn-action:disabled, .btn-host:disabled { opacity: 0.5; cursor: not-allowed; }

.input-box { font-size: 1.8rem; font-weight: 700; letter-spacing: 2px; padding: 15px; border-radius: 12px; border: 3px solid transparent; text-align: center; width: 85%; max-width: 400px; min-width: 0; margin-bottom: 20px; background: #333; color: white; font-family: var(--font-body); transition: border 0.3s; text-transform: uppercase; word-break: break-word; }
.input-box:focus { outline: none; border-color: var(--gold); }

/* =========================================
   PLAYER PHONE UI (PORTRAIT FLUID STACK) 
========================================= */
#p-game { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }

.question-text { font-family: var(--font-body); font-size: clamp(1.1rem, 3.5vh, 1.8rem); font-weight: 800; color: #fff; line-height: 1.3; text-align: center; margin: 0; padding: 0 10px; word-break: break-word; min-width: 0; flex-shrink: 0; }

.p-stack { display: flex; flex-direction: column; gap: clamp(6px, 1.5vh, 12px); width: 100%; max-width: 400px; padding: 0 8px; box-sizing: border-box; min-width: 0; min-height: 0; flex: 1 1 auto; justify-content: center; margin-top: 2vh; }

.p-btn { font-family: var(--font-body); font-size: clamp(1rem, 2.5vh, 1.4rem); font-weight: 700; background: linear-gradient(135deg, #2a1a4e, #3d2270); color: #fff; border: 2px solid rgba(255,215,0,0.35); border-radius: 14px; padding: clamp(10px, 2vh, 18px) 12px; cursor: pointer; text-align: center; line-height: 1.2; word-break: break-word; transition: transform 0.12s, background 0.15s, opacity 0.2s; box-shadow: 0 4px 14px rgba(0,0,0,0.5); display: flex; flex-direction:column; align-items: center; justify-content: center; touch-action: manipulation; flex: 1 1 auto; min-height: 0; max-height: 18vh; }
.p-btn.dimmed { opacity: 0.35; pointer-events: none; }
.p-btn.locked-in { background: linear-gradient(135deg, #0d3b1b, #1e5c2f) !important; border-color: var(--green) !important; box-shadow: 0 0 15px rgba(45,201,55,0.5); opacity: 1 !important; transform: scale(0.98); }

.btn-double { font-family: var(--font-header); font-size: clamp(0.9rem, 2vh, 1.1rem); letter-spacing: 1px; background: linear-gradient(45deg, #1a4a1a, #2dc937); color: #fff; border: 2px solid #2dc937; border-radius: 50px; padding: clamp(6px, 1.5vh, 10px) 28px; cursor: pointer; transition: transform 0.12s, background 0.15s; white-space: nowrap; touch-action: manipulation; flex-shrink: 0; }
.btn-double:active { transform: scale(0.95); }
.btn-double.active { background: linear-gradient(45deg, #cc7700, #ffaa00); border-color: #ffaa00; box-shadow: 0 3px 18px rgba(255,170,0,0.5); animation: pulse-glow 0.8s infinite alternate; }
.btn-double.used { opacity: 0.35; pointer-events: none; }
.btn-double.hidden { display: none !important; }

/* =========================================
   HOST TV UI (LANDSCAPE FLUID SPLIT) 
========================================= */
.host-grid-container { display: flex; width: 100vw; height: 100dvh; overflow: hidden; flex-direction: row; }

/* Left Panel - Status & Buttons */
#panel-left { flex: 0 0 clamp(180px, 20vw, 250px); height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: rgba(0,0,0,0.6); border-right: 2px solid #333; z-index: 20; padding: 2vh 1vw; box-sizing: border-box; justify-content: space-evenly; align-items: center; }
#box-status { display: flex; flex-direction: column; align-items: center; justify-content: center; width:100%; flex: 1; min-height: 0; gap: 2vh; }
.squircle-timer { font-size: clamp(2rem, 5vh, 4rem); color: var(--gold); border: clamp(2px, 0.5vh, 4px) solid var(--gold); border-radius: 20%; width: clamp(60px, 15vh, 100px); height: clamp(60px, 15vh, 100px); display: flex; align-items: center; justify-content: center; background: #000; font-family: var(--font-header); flex-shrink: 0; }
.status-label { font-size: clamp(1rem, 2.5vh, 1.5rem); color: #aaa; flex-shrink: 0; }
.player-count { font-size: clamp(0.9rem, 2vh, 1.2rem); color: var(--green); font-weight: bold; flex-shrink: 0; }

/* Right Panel - Game Stage */
#panel-right { flex: 1; min-width: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 10; }
#box-header { height: clamp(60px, 12vh, 100px); display: flex; align-items: center; justify-content: center; border-bottom: 2px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.4); overflow: hidden; flex-shrink: 0; padding: 0 15px; }
#box-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; }
#game-stage { flex: 1; padding: 2vh 3vw; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; width: 100%; min-height: 0; }

.host-q-text { font-size: clamp(1.5rem, 5vmin, 3rem); font-family: var(--font-body); font-weight: 900; text-shadow: 2px 2px 5px black; text-align: center; width: 100%; flex-shrink: 0; word-break: break-word; }
.vote-counter-text { font-size: clamp(2rem, 8vmin, 5rem); font-family: var(--font-header); color: var(--gold); animation: pulse-glow 1s infinite alternate; text-shadow: 0 5px 15px rgba(0,0,0,0.5); flex-shrink: 0; }

/* The Dynamic Shrinkable TV Bars */
.bars-container { display: flex; flex-direction: column; gap: clamp(4px, 1.5vh, 15px); width: 95%; max-width: 1200px; flex: 1 1 auto; justify-content: center; min-height: 0; }
.bar-row { display: flex; flex-direction: column; gap: 2px; text-align: left; flex: 1; min-height: 0; justify-content: center; }
.bar-label { font-family: var(--font-body); font-weight: 800; font-size: clamp(1rem, 3.5vmin, 2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color:white; flex-shrink: 0; }
.bar-track { background: #333; border-radius: 8px; overflow: hidden; height: clamp(20px, 6vh, 60px); flex-shrink: 0; }
.bar-fill { height: 100%; min-width: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: flex-end; padding-right: 15px; font-family: var(--font-header); font-size: clamp(1rem, 4vh, 2rem); color: #000; transition: width 2s cubic-bezier(0.25, 1, 0.5, 1); }
.bar-fill.c1 { background: linear-gradient(90deg, #d4a017, #ffd700); } .bar-fill.c2 { background: linear-gradient(90deg, #0077cc, #00aaff); } .bar-fill.c3 { background: linear-gradient(90deg, #aa0077, #ff44cc); } .bar-fill.c4 { background: linear-gradient(90deg, #007733, #2dc937); }

/* SEAMLESS STOCK MARKET TICKER CLONE FIX */
.ticker-wrap { width: 100%; height: 100%; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; }
.ticker-move { display: flex; width: max-content; }
.ticker-move.scrolling { animation: seamless-scroll 20s linear infinite; }
@keyframes seamless-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-inner { display: flex; gap: 15px; padding-right: 15px; }

.lb-pill { background: rgba(0,0,0,0.6); padding: 8px 16px; border-radius: 50px; border: 1px solid var(--gold); font-weight: bold; font-size: clamp(1rem, 2.5vh, 1.4rem); display: flex; white-space: nowrap; flex-shrink: 0; align-items: center; gap: 6px; backdrop-filter: blur(5px); }
.lb-pill.top { border-color: var(--green); color: var(--green); }
.lb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12ch; flex-shrink: 1; min-width: 0; color:white; }
.lb-score { color: var(--green); margin-left: auto; font-family: var(--font-header); letter-spacing: 1px; font-weight: 700; }

/* OVERLAYS */
.shame-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; border-radius: 12px; }
.shame-title { font-family: var(--font-header); font-size: clamp(2rem, 8vmin, 6rem); color: var(--danger); letter-spacing: 2px; margin-bottom: 1vh; text-shadow: 0 0 20px var(--danger); text-align: center; }
.shame-name { font-family: var(--font-header); font-size: clamp(2rem, 8vmin, 6rem); color: var(--gold); text-align: center; word-break: break-word; padding: 0 10px; }
.shame-opt { font-family: var(--font-body); font-weight: 800; font-size: clamp(1.2rem, 4vmin, 2rem); color: #aaa; margin-top: 1vh; text-align: center; padding: 0 10px; }
.explode-anim { animation: explode 0.5s ease-out forwards; }
@keyframes explode { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; text-shadow: 0 0 40px var(--danger); } }

.floating-score { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-header); font-weight: 800; font-size: clamp(3rem, 10vh, 6rem); text-shadow: 0 5px 15px rgba(0,0,0,0.8); pointer-events: none; z-index: 9999; animation: floatUpText 2s forwards; }
@keyframes floatUpText { 0% { opacity: 0; transform: translate(-50%, -20%) scale(0.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 80% { opacity: 1; transform: translate(-50%, -70%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -100%) scale(1); } }

.restart-warning-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 8000; display: flex; align-items: center; justify-content: center; }
.warning-box { background: #222; padding: 30px; border-radius: 15px; border: 3px solid var(--danger); text-align: center; box-shadow: 0 0 50px rgba(255,0,0,0.5); width: clamp(280px, 80vw, 500px); }
.winner-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.winner-title { font-size: clamp(3rem, 10vmin, 8rem); color: var(--gold); margin: 0; font-family: var(--font-header); text-align: center; }
.winner-name { font-size: clamp(2rem, 8vmin, 6rem); color: white; margin-top: 2vh; font-family: var(--font-header); word-break: break-word; text-align: center; }

.lobby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 15vw, 150px), 1fr)); gap: clamp(5px, 1.5vh, 15px); width: 100%; overflow-y: auto; height: 100%; padding-right: 10px; align-content: start; }
.lobby-card { background: rgba(0,0,0,0.6); padding: clamp(8px, 1.5vh, 15px); border-radius: 8px; font-weight: bold; font-size: clamp(0.9rem, 2.5vh, 1.3rem); display: flex; justify-content: center; align-items: center; border: 1px solid #444; backdrop-filter: blur(5px); word-break: break-word; text-align: center; }

.emoji-btn { cursor: pointer; opacity: 0.4; transition: transform 0.2s, opacity 0.2s, border 0.2s; padding-bottom: 5px; user-select: none; }
.emoji-btn.selected { opacity: 1; transform: scale(1.3); border-bottom: 3px solid var(--gold); }
@keyframes pulse-glow { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
#btn-fullscreen { position: fixed; top: 10px; left: 10px; z-index: 9999; background: none; border: 1px solid #555; color: #aaa; width: 40px; height: 40px; border-radius: 8px; font-size: 1.3rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.orientation-warning { position: fixed; inset: 0; background: var(--bg); z-index: 99999; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.orientation-warning h1 { font-size: 5rem; margin: 0 0 20px 0; } .orientation-warning h2 { font-size: 2rem; color: var(--gold); }

/* Landscape mode enforcement for Host */
@media (orientation: portrait) { 
    body.host-client #landscape-warning { display: flex !important; } 
    body.host-client .host-ui-wrap, body.host-client .host-grid-container { display: none !important; } 
}

.show-flex { display: flex !important; } .hidden { display: none !important; } .hidden-ui { display: none; }