:root{--red:#E10600;--ink:#111;--paper:#fff;--muted:#9a948c}
html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Poppins,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;cursor:none}
*{box-sizing:border-box}
.stage{position:fixed;inset:0;background:#000}
.screen{position:absolute;inset:0}
[hidden]{display:none!important}

/* pairing */
.pair{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;background:var(--ink);text-align:center;padding:6vh 6vw}
.pair-brand{display:flex;align-items:center;gap:1.2vw;font-weight:600;font-size:3.2vh;letter-spacing:.01em}
.pair-brand .mark{width:3.6vh;height:3.6vh;border-radius:22%;background:var(--red);display:inline-block}
.pair-lead{font-size:3.4vh;max-width:70vw;margin:0;color:#ddd;font-weight:400}
.pair-lead b{color:#fff;font-weight:600}
.code{display:flex;gap:1.6vw}
.code span{display:flex;align-items:center;justify-content:center;width:9vw;height:14vh;border:3px solid #333;border-radius:1.2vh;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10vh;font-weight:600;background:#1a1a1a}
.pair-sub{font-size:2.6vh;color:var(--muted);margin:0}
.pair-alt{margin-top:1vh}
.tvbtn{font:inherit;font-size:2.6vh;font-weight:600;padding:1.6vh 3.2vw;border:2px solid #444;background:#1a1a1a;color:#fff;border-radius:1vh;cursor:pointer}
.tvbtn:focus,.tvbtn:focus-visible{outline:none;border-color:var(--red);box-shadow:0 0 0 .6vh rgba(225,6,0,.35)}
.tvbtn.primary{background:var(--red);border-color:var(--red)}
.claim{display:flex;flex-direction:column;align-items:center;gap:2vh;width:min(70vw,900px)}
.claim label{font-size:2.8vh;color:#ddd}
.claim input{font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:7vh;text-transform:uppercase;letter-spacing:.14em;text-align:center;width:100%;padding:1.4vh 2vw;border:3px solid #444;border-radius:1.2vh;background:#1a1a1a;color:#fff}
.claim input:focus{outline:none;border-color:var(--red)}
.claim-actions{display:flex;gap:2vw}
.claim-msg{min-height:3vh;font-size:2.4vh;color:#ffb3b0;margin:0}
.pair-foot{position:absolute;bottom:2vh;font-size:1.8vh;color:#555;margin:0}

/* player */
.play{background:#000}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.show{opacity:1}
.slide img,.slide video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.slide.cover img,.slide.cover video{object-fit:cover}
.builtin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:8vh 8vw;background:var(--ink);color:#fff}
.builtin .brandline{position:absolute;top:6vh;left:8vw;display:flex;align-items:center;gap:1vw;font-size:2.8vh;font-weight:600;color:#ddd}
.builtin .brandline i{width:3vh;height:3vh;border-radius:22%;background:var(--red);display:inline-block}
.builtin h1{font-size:9vh;line-height:1.05;margin:0 0 2vh;font-weight:700;max-width:80vw;text-wrap:balance}
.builtin p{font-size:3.6vh;color:#cfcac4;margin:0;max-width:70vw;font-weight:400}
.builtin.clock h1{font-size:22vh;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.builtin.clock p{font-size:4vh}
.builtin .bar{position:absolute;left:0;right:0;bottom:0;height:1.4vh;background:var(--red)}
.builtin.message{background:#fff;color:var(--ink)}
.builtin.message .brandline{color:#444}
.builtin.message p{color:#555}

/* portrait */
.portrait .builtin h1{font-size:7vw}.portrait .builtin p{font-size:3vw}.portrait .code span{width:13vw;height:16vw;font-size:9vw}

/* dark (closed) */
.dark{background:#000}

/* badge: tiny, owner-only hint */
.badge{position:absolute;right:1.2vw;bottom:1.2vh;display:flex;align-items:center;gap:.6vw;font-size:1.6vh;color:#777;background:rgba(0,0,0,.55);padding:.6vh 1vw;border-radius:1vh}
.badge .b-dot{width:1.2vh;height:1.2vh;border-radius:50%;background:#c9a227}

body.cut .slide{transition:none}
.builtin.badge{background:var(--red)}.builtin.badge h1{color:#fff}.builtin.badge p{color:#fde8e8}.builtin.badge .brandline{color:#fff}.builtin.badge .brandline i{background:#fff}.builtin.badge .bar{background:#fff}
.builtin .brandline img{height:4vh;width:auto;max-width:30vw}