@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;600;700&display=swap');
:root { --ink:#17211b; --paper:#e8efe4; --acid:#d9ff4f; --coral:#ff755f; --line:#9ca99a; --muted:#667469; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(135deg, #e8efe4 0%, #d6e2d1 55%, #f4e8d8 100%); font-family:'Space Grotesk', sans-serif; }
main { width:min(1120px, 100%); margin:auto; padding:2.5rem 5vw 5rem; }
.brand { display:flex; align-items:center; gap:.7rem; font:500 13px 'DM Mono', monospace; letter-spacing:.08em; text-transform:uppercase; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--ink); color:var(--acid); font:700 13px 'Space Grotesk'; }
h1 { margin:5rem 0 2.5rem; max-width:760px; font-size:clamp(3.5rem, 8vw, 7.5rem); line-height:.88; letter-spacing:-.05em; }
h1 em { color:var(--coral); font-style:normal; }
.panel { max-width:960px; }
.panel > h3 { margin-top:2.5rem; }
.hidden { display:none; }
button { border:2px solid var(--ink); background:var(--acid); color:var(--ink); padding:.75rem 1rem; font:600 13px 'Space Grotesk'; cursor:pointer; }
button:hover { background:var(--coral); }
.button-secondary { background:transparent; }.button-danger { margin-top:2rem; background:transparent; color:var(--coral); }
.switch { margin:0 0 1.5rem; font:12px 'DM Mono'; cursor:pointer; }.switch input { appearance:none; min-width:42px; width:42px; height:24px; flex:0 0 42px; margin:0; padding:0; border:2px solid var(--ink); border-radius:999px; background:transparent; position:relative; cursor:pointer; }.switch input::after { content:''; position:absolute; width:14px; height:14px; top:3px; left:3px; border-radius:50%; background:var(--ink); transition:transform .15s ease, background .15s ease; }.switch input:checked { background:var(--coral); }.switch input:checked::after { transform:translateX(18px); background:var(--paper); }
.links { margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); }.links h2 { margin-bottom:.5rem; }.links p { max-width:54ch; color:var(--muted); }.links label { margin-top:1rem; }.links input { min-width:0; }.links button { flex:0 0 auto; }
.status { min-height:1.2em; color:var(--ink); font:12px 'DM Mono'; }.status.error { color:var(--coral); }
label, form { display:flex; gap:.75rem; margin-top:1.25rem; align-items:center; flex-wrap:wrap; }
input { min-width:220px; flex:1; border:0; border-bottom:2px solid var(--ink); padding:.75rem 0; background:transparent; font:16px 'Space Grotesk'; outline:0; }
.now { margin:1.5rem 0 2rem; padding:1.25rem; background:var(--ink); color:var(--paper); min-height:140px; display:flex; flex-direction:column; justify-content:space-between; }.now span { color:var(--acid); font:12px 'DM Mono'; }.now h2 { margin:0; font-size:clamp(1.7rem, 4vw, 2.7rem); }
#player { width:100%; aspect-ratio:16/9; background:#111; margin-bottom:1rem; }.controls { display:flex; gap:.5rem; margin-bottom:1rem; align-items:center; flex-wrap:wrap; }.controls button { background:transparent; color:var(--ink); }.volume { margin:0 0 0 auto; font:12px 'DM Mono'; }.volume input { min-width:140px; }
#results { margin:0; }
.kiosk-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(220px, 280px); gap:1.5rem; align-items:start; }.kiosk-stage { min-width:0; }.kiosk-now { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:1rem; min-height:112px; }.kiosk-now .qr-wrap { flex:0 0 120px; margin:0; flex-direction:column; align-items:center; text-align:center; }.qr-wrap { display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; font:12px 'DM Mono'; }.qr-wrap img { width:72px; height:72px; image-rendering:pixelated; }.qr-wrap span { font:10px 'DM Mono'; }.kiosk-video { width:100%; aspect-ratio:16/9; background:#111; }.kiosk-video iframe { width:100%; height:100%; border:0; }.kiosk-queue { min-width:0; height:calc(100vh - 310px); overflow:hidden; }.kiosk-queue h3 { margin-top:0; }.kiosk-queue-item { margin-bottom:1rem; }.kiosk-queue-item strong, .kiosk-queue-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.kiosk-thumb { position:relative; aspect-ratio:16/9; margin-bottom:.4rem; background:#c4d2bb; }.kiosk-thumb img { width:100%; height:100%; object-fit:cover; display:block; }.kiosk-thumb span { position:absolute; left:.55rem; bottom:.55rem; min-width:2.1rem; padding:.35rem .5rem; background:var(--acid); color:var(--ink); font:700 18px 'DM Mono'; line-height:1; text-align:center; }
.kiosk-controls { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }.kiosk-controls .status { min-height:0; }
ol { padding:0; list-style:none; }.queue-item { display:grid; grid-template-columns:2rem 96px 1fr auto; gap:1rem; align-items:center; border-bottom:1px solid var(--line); padding:.75rem 0; }.thumb { width:96px; height:64px; object-fit:cover; background:#c4d2bb; }.vote { background:transparent; border:1px solid var(--ink); padding:.4rem .6rem; white-space:nowrap; }.vote.selected { background:var(--coral); }
.search-result { grid-template-columns:96px 1fr auto; }
small { font-family:'DM Mono'; color:#55645a; }
@media (max-width:700px) { main { padding:1.5rem 1.25rem 3rem; }.kiosk-grid { grid-template-columns:1fr; }.kiosk-queue { height:auto; }.kiosk-now { align-items:flex-start; }.kiosk-now .qr-wrap { flex-basis:80px; }.kiosk-now .qr-wrap img { width:56px; height:56px; }.qr-wrap { margin-top:1rem; }.queue-item { grid-template-columns:1.5rem 64px 1fr auto; gap:.6rem; }.thumb { width:64px; height:48px; }.volume { margin-left:0; } }
@media (min-width:900px) and (orientation:landscape) { body.kiosk-mode { overflow:hidden; } body.kiosk-mode main { width:100%; max-width:none; padding:2vh 4vw; } body.kiosk-mode .brand { display:none; } body.kiosk-mode #landing { display:none; } body.kiosk-mode #kiosk { max-width:none; } body.kiosk-mode .kiosk-now { min-height:82px; margin:0 0 1rem; } body.kiosk-mode .kiosk-grid { grid-template-columns:minmax(0, 1fr) 260px; height:calc(100vh - 190px); } body.kiosk-mode .kiosk-video { max-height:calc(100vh - 190px); } body.kiosk-mode .kiosk-queue { height:100%; } }