*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#050505;color:#f3e6d8;font-family:'Rubik',system-ui,sans-serif;line-height:1.5}
body{background:#050505 radial-gradient(ellipse at top,#2a1200 0%,#050505 60%)}
.glow{font-family:'Creepster',cursive;color:#ff8c1a;text-shadow:0 0 8px #ff7b00,0 0 20px #ff5e00;letter-spacing:2px;font-weight:400}
.bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.6rem 1rem;background:rgba(5,5,5,.9);border-bottom:1px solid #3a1a00;position:sticky;top:0;z-index:5}
.bar a,.bar button{color:#ffb15c;text-decoration:none;font:700 .95rem 'Rubik',sans-serif;background:none;border:0;cursor:pointer;padding:.3rem .5rem;border-radius:8px}
.bar a:hover,.bar button:hover{background:#2a1200;color:#fff}
.bar .home{font-family:'Creepster',cursive;font-size:1.4rem;font-weight:400;letter-spacing:1px}
.bar .sp{flex:1}
.onair{display:inline-flex;align-items:center;gap:.35rem;background:#d0142a;color:#fff;font-weight:900;font-size:.8rem;padding:.15rem .55rem;border-radius:6px;letter-spacing:1px}
.onair i{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.ttl{font-weight:700;color:#f3e6d8}
main{max-width:1400px;margin:0 auto;padding:1rem}
.stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 0 30px rgba(255,110,0,.35);border:2px solid #3a1a00}
.stage canvas{display:block;width:100%;height:100%}
.stage:fullscreen{border-radius:0;border:0;display:flex;align-items:center;justify-content:center}
.stage:fullscreen canvas{width:min(100vw,177.78vh);height:min(56.25vw,100vh)}
.info{max-width:900px;margin:1.6rem auto 2rem}
.info h1{font-size:clamp(2rem,6vw,3.4rem);margin-bottom:.4rem}
.info p,.info li{margin:.5rem 0}
.info ul,.info ol{padding-left:1.4rem}
.info code{background:#1a0d00;border:1px solid #3a1a00;padding:.05rem .35rem;border-radius:6px;color:#ffcf99;word-break:break-all}
.info details{margin-top:1rem;background:#120800;border:1px solid #3a1a00;border-radius:12px;padding:.8rem 1rem}
.info summary{cursor:pointer;font-weight:700;color:#ffb15c}
.fine{font-size:.85rem;opacity:.75}
/* OBS / stream mode: nothing but the scene, edge to edge */
html.obs,html.obs body{background:transparent!important;overflow:hidden;width:100%;height:100%}
html.obs .bar,html.obs .info{display:none!important}
html.obs main{max-width:none;padding:0;margin:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
html.obs .stage{border:0;border-radius:0;box-shadow:none;background:transparent;width:min(100vw,177.78vh);height:min(56.25vw,100vh);aspect-ratio:auto}
html.obs,html.obs *{cursor:none!important}
@media (max-width:600px){.bar .ttl{display:none}main{padding:.4rem}}
.host,.namebox{max-width:900px;margin:1.2rem auto 0;background:#120800;border:1px solid #3a1a00;border-radius:12px;padding:1rem}
.host h2{font-size:1.1rem;color:#ffb15c;margin-bottom:.5rem}
.namebox h2{font-size:1.8rem;margin-bottom:.4rem}
.row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0}
.row input{flex:1;min-width:200px;background:#000;border:2px solid #ff7b00;border-radius:10px;color:#fff;padding:.55rem .8rem;font:1rem 'Rubik',sans-serif}
.row button,.host button,.share{background:#ff7b00;color:#140800;border:0;border-radius:10px;padding:.5rem .9rem;font:700 .95rem 'Rubik',sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
.row button:hover,.share:hover{background:#ffa040}
.host #qClear{background:#3a1a00;color:#ffb15c;padding:.2rem .6rem;font-size:.8rem}
html.obs .host,html.obs .namebox{display:none!important}

/* fullscreen: native + iPhone pseudo-fullscreen fallback */
.stage:-webkit-full-screen{border-radius:0;border:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.stage:-webkit-full-screen canvas{width:min(100vw,177.78vh);height:min(56.25vw,100vh)}
.stage:fullscreen{width:100%;height:100%;aspect-ratio:auto}
.stage.pseudo-fs{position:fixed;inset:0;z-index:9999;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;background:#000;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.stage.pseudo-fs canvas{width:min(100vw,177.78vh);height:min(56.25vw,100vh);width:min(100vw,177.78dvh);height:min(56.25vw,100dvh)}
html.fs-lock,html.fs-lock body{overflow:hidden;height:100%;overscroll-behavior:none}
.fs-exit{display:none;position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:3;background:rgba(10,4,0,.75);color:#ffb15c;border:2px solid #ff7b00;border-radius:999px;padding:.45rem .9rem;font:700 .9rem 'Rubik',sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.fs-on .fs-exit{display:block}
html.obs .fs-exit{display:none!important}
.fs-hint{display:none;position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(10,4,0,.75);color:#ffcf99;border:1px solid #5a2a00;border-radius:999px;padding:.35rem .8rem;font:600 .8rem 'Rubik',sans-serif;white-space:nowrap;pointer-events:none;animation:fshint 4s ease forwards}
@media (orientation:portrait) and (max-width:700px){html.fs-on .fs-hint{display:block}}
@keyframes fshint{0%,70%{opacity:1}100%{opacity:0}}