:root {
    --bg: #050505; --panel: #111; --text: #fff;
    --red: #ff0055; --green: #00ffaa; --gold: #ffcc00; --blue: #00ccff;
    --font-header: 'Luckiest Guy', cursive;
    --font-body: 'Nunito', sans-serif;
}

* { box-sizing: border-box; touch-action: manipulation; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); overflow: hidden; width: 100vw; height: 100dvh; overscroll-behavior: none;}

.hidden { display: none !important; }
.hidden-ui { display: none; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; align-items: center; }
.w-full { width: 100%; }

/* FONTS */
h1, h2, h3, .btn-action, .btn-host, .title-text, .cycler-box { font-family: var(--font-header); letter-spacing: 1px; }

.question-text { font-family: 'Nunito', Arial, sans-serif !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase; color: var(--gold); }

.text-gold { color: var(--gold); } .text-red { color: var(--red); } .text-aaa { color: #aaa; }
.fs-30 { font-size: 3rem; } .fs-12 { font-size: 1.2rem; }
.mb-20 { margin-bottom: 20px; } .mt-20 { margin-top: 20px; }
.w-200 { width: 200px; } .w-100 { width: 100px; } .flex-1 { flex: 1; } .fw-bold { font-weight: bold; }
.bg-overlay { background: rgba(0,0,0,0.9); }

/* LOGIN */
.login-container { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.input-box { padding: 15px; font-size: 1.5rem; font-weight: bold; border-radius: 50px; border: 2px solid var(--red); background: #000; color: white; text-align: center; width: 80%; max-width: 300px; margin-bottom: 20px; box-shadow: 0 0 15px var(--red); font-family: var(--font-body); text-transform: uppercase; }
.input-box:focus { outline: none; border-color: var(--gold); }

/* BUTTONS */
.btn { padding: 15px 30px; font-size: 1.2rem; border: none; border-radius: 50px; font-weight: bold; cursor: pointer; transition: transform 0.1s; color: black; text-transform: uppercase; font-family: var(--font-header); letter-spacing: 1px; }
.btn:active { transform: scale(0.95); }
.btn-gold { background: var(--gold); box-shadow: 0 0 15px var(--gold); }
.btn-green { background: var(--green); box-shadow: 0 0 15px var(--green); }
.btn-red { background: var(--red); box-shadow: 0 0 15px var(--red); }

/* HOST LAYOUT */
body.host-client { display: grid; grid-template-columns: 25% 75%; grid-template-rows: 100%; height: 100dvh; }

.sidebar { background: var(--panel); border-right: 2px solid #333; padding: 10px; display: flex; flex-direction: column; align-items: center; overflow:hidden;}
.main { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #222 0%, #000 100%); }

/* CYCLER BOX */
.cycler-box { font-size: clamp(3rem, 8vmin, 6rem); font-weight: 900; color: var(--red); border: 5px solid var(--red); padding: 40px; border-radius: 20px; background: #111; box-shadow: 0 0 50px var(--red); min-width: 50%; text-align: center; text-transform: uppercase; }

/* CARDS */
.q-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: clamp(20px, 4vh, 40px); border-radius: 20px; width: 80%; max-width: 800px; text-align: center; border: 2px solid var(--blue); box-shadow: 0 0 30px var(--blue); display:flex; flex-direction:column; justify-content:center;}
.q-text { font-size: clamp(2rem, 5vh, 4rem); font-weight: 900; margin-bottom: 2vh; text-shadow: 0 0 10px black; word-break: break-word;}
.q-opt { font-size: clamp(1.2rem, 3vmin, 2rem); margin: 1.5vh; padding: 1.5vh; background: rgba(0,0,0,0.5); border: 1px solid #555; border-radius: 10px; color: #ddd; font-family: var(--font-body); font-weight: bold; }

/* PLAYER LIST */
.player-list { width: 100%; flex: 1 1 auto; overflow-y: auto; margin-top: 20px; border-top: 1px solid #333; }
.p-row { padding: 15px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: bold; }
.p-row.hotseat { background: var(--red); color: black; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }

/* PLAYER UI */
body.player-client { display: flex; flex-direction: column; padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)); text-align: center; justify-content: center; }
.status-msg { font-size: clamp(2rem, 5vh, 3rem); margin-bottom: 4vh; color: var(--gold); text-shadow: 0 0 10px var(--gold); font-family: var(--font-header); letter-spacing: 1px;}
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vh, 20px); width: 100%; flex: 1 1 auto;}

/* FIX: Readable Player Buttons */
.opt-btn { background: #222; border: 2px solid #555; color: white; font-size: clamp(1rem, 3vh, 1.5rem); border-radius: 15px; padding: clamp(15px, 3vh, 30px) 10px; cursor: pointer; transition: all 0.1s; font-family: 'Nunito', Arial, sans-serif !important; font-weight: 900 !important; letter-spacing: 1px !important; text-transform: uppercase !important; display:flex; flex-direction:column; align-items:center; justify-content:center; word-break: break-word;}
.opt-btn:active { transform: scale(0.95); border-color: white; }
.opt-btn.btn-green { background: var(--green); color: black; border-color: white; }
.opt-btn.btn-red { background: var(--red); color: white; border-color: white; }
.gap-20 { gap: 20px;}

.fs-btn { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); color: white; border: 1px solid white; padding: 5px 10px; font-size: 0.8rem; cursor: pointer; z-index: 999; }

.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); font-family: var(--font-header); }

@media (orientation: portrait) { body.host-client #landscape-warning { display: flex !important; } body.host-client .host-ui-wrap { display: none !important; } }