@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#09080f;--panel:#14101e;--field:#1e162b;--line:#30233f;--text:#f7f4fc;--muted:#a49bb2;--a:#ff3979;--b:#9758ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px 'DM Sans',system-ui,sans-serif;line-height:1.55}body[data-theme="halloween"]{--a:#ff8a36;--b:#a565ed}body[data-theme="ocean"]{--a:#28cbe0;--b:#5577ff}body[data-theme="summer"]{--a:#ffb347;--b:#ff5088}.glow{position:fixed;z-index:-1;top:-260px;left:calc(50% - 350px);width:700px;height:550px;background:radial-gradient(ellipse,#57204b22,transparent 65%);pointer-events:none}main{max-width:510px;margin:auto;padding:25px 22px 50px}header{display:flex;align-items:center;justify-content:space-between;margin:0 0 32px;gap:10px}.brand{font:900 30px 'Outfit',sans-serif;letter-spacing:-1.5px;text-decoration:none;color:white;white-space:nowrap}.brand i{color:var(--a);font-style:normal}.brand small{font:500 9px 'DM Sans',sans-serif;letter-spacing:1px;color:var(--muted);display:block;margin-top:-7px}nav{display:flex;gap:15px;align-items:center;font-size:12px}a{color:var(--text);text-decoration:none}a:hover{text-decoration:underline}h1{font:800 34px/1.15 'Outfit',system-ui;letter-spacing:-.8px;margin:0 0 14px}h1 em{font-style:normal;background:linear-gradient(100deg,var(--a),var(--b));background-clip:text;color:transparent}h2{font:700 21px 'Outfit',sans-serif;margin:0 0 16px}h3{font:600 17px 'Outfit',sans-serif;margin:0 0 5px}p{margin:0 0 20px}.muted,.lead{color:var(--muted)}.lead{font-size:15px;margin-bottom:24px}.card{background:var(--panel);border:1px solid var(--line);border-radius:19px;padding:20px;margin:16px 0;box-shadow:0 6px 30px #0001}.join{padding:16px}.row{display:flex;gap:9px;align-items:center}.row>*{min-width:0}.grow{flex:1}.wrap{flex-wrap:wrap}label,.label{display:block;font-size:13px;color:var(--muted);margin:16px 0 6px}label:first-child{margin-top:0}input,select{font:inherit;border:1px solid var(--line);background:var(--field);border-radius:14px;color:var(--text);padding:15px;width:100%;outline:none}input:focus,select:focus{border-color:var(--b);box-shadow:0 0 0 3px #9758ff20}input::placeholder{color:#83798f}button,.button{cursor:pointer;font:700 14px 'DM Sans',sans-serif;border:1px solid var(--line);color:var(--text);border-radius:13px;background:var(--field);padding:12px 15px;transition:filter .15s,transform .15s}button:hover,.button:hover{filter:brightness(1.18);text-decoration:none}button:active{transform:scale(.98)}button:disabled{opacity:.45;cursor:default}.primary{background:linear-gradient(105deg,var(--a),var(--b));color:white;border:0;box-shadow:0 5px 23px #ff39791c}.full{width:100%;display:block;text-align:center;margin-top:20px;padding:17px}.codeinput{font:800 24px 'Outfit',sans-serif;letter-spacing:8px;text-align:center;text-transform:uppercase}.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.kind{text-align:left;padding:13px 11px}.kind span{display:block;font-size:21px;margin-bottom:6px}.kind small{display:block;font-size:10px;font-weight:400;color:var(--muted);line-height:1.4}.selected{border-color:var(--a);background:color-mix(in srgb,var(--a) 13%,var(--panel))}.avatar{font-size:26px;min-width:52px;height:52px;padding:0;border-radius:50%;border-color:var(--a)}.chips{display:flex;gap:7px}.chips button{flex:1;padding:10px}.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0}.toggle input{accent-color:var(--a);width:21px;height:21px}.toggle small{color:var(--muted);display:block;font-size:11px}.theme{margin-top:15px}.features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0}.feature{padding:16px;border:1px solid var(--line);border-radius:15px}.feature span{font-size:24px}.feature strong{display:block;margin-top:4px}.feature p{font-size:12px;color:var(--muted);margin:4px 0 0}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:700;color:var(--a);margin:30px 0 12px}.pill{border:1px solid var(--line);border-radius:30px;padding:5px 10px;font-size:11px;color:var(--muted)}footer{max-width:510px;margin:0 auto;padding:20px 22px 30px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:13px 22px;border-radius:14px;background:#352442;border:1px solid #6b487d;max-width:90vw;z-index:10;display:none;box-shadow:0 10px 50px #0007}.roomhead h1{font-size:28px;margin-bottom:8px}.bigcode{font:800 28px 'Outfit';letter-spacing:5px;color:var(--a)}.tabs{display:flex;gap:6px;position:sticky;top:0;z-index:2;padding:12px 0;background:var(--bg)}.tabs button{flex:1;padding:11px 7px;font-size:12px}.song{display:flex;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.song:last-child{border:0}.song img{width:48px;height:48px;border-radius:10px;object-fit:cover}.song strong{display:block;font-size:13px}.song small{display:block;font-size:11px;color:var(--muted)}.song .grow{overflow:hidden;overflow-wrap:anywhere}.song button{padding:8px 11px}.now{display:flex;gap:15px;align-items:center;margin-bottom:15px}.now img{width:82px;height:82px;border-radius:15px}.now h2{margin:0 0 4px;font-size:20px}.now p{color:var(--muted);font-size:12px;margin:0}.empty{text-align:center;color:var(--muted);padding:25px 8px}.empty span{display:block;font-size:35px;margin-bottom:8px}.notice{font-size:11px;color:var(--muted);line-height:1.6;background:#ffffff04;border-radius:10px;padding:10px;margin:12px 0}.messages p{padding:10px 0;border-bottom:1px solid var(--line);margin:0;overflow-wrap:anywhere}.messages b{color:var(--a);font-size:12px;display:block}.error{color:#ff97af}.reaction{font-size:24px;padding:7px;flex:1}#media{max-width:466px;margin:-25px auto 30px;border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:15px}#media audio{width:100%}#youtube iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px}#mediaInfo{font-size:11px;color:var(--muted);margin:8px 0}#external{font-size:12px;display:block;margin-top:9px}#enableSound{width:100%}.tv main{max-width:1000px}.tv .roomhead h1{font-size:42px}.tv .now h2{font-size:36px}.tv .now img{width:150px;height:150px}.tv #media{max-width:956px}.tv #youtube iframe{max-height:55vh}.tv footer{max-width:956px}.invite{word-break:break-all;font-size:12px}.offline{background:#5d3823;color:#ffdeb6;border-radius:10px;padding:10px;font-size:12px}dialog{border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--text);max-width:400px;width:90%}dialog::backdrop{background:#0009}.avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.avatars button{font-size:24px;padding:6px}.volume{accent-color:var(--a);padding:0}.status{color:var(--muted);font-size:11px}.hidden{display:none!important}@media(max-width:420px){main{padding:20px 16px 35px}h1{font-size:31px}.card{padding:16px}.kind{padding:11px 8px}nav{gap:10px}#media{margin-left:16px;margin-right:16px}.tv .roomhead h1{font-size:30px}.tv .now h2{font-size:24px}.tv .now img{width:80px;height:80px}footer span{display:none}}

.qr{display:block;width:190px;height:190px;margin:16px auto;border-radius:12px;background:white;padding:6px}dialog{text-align:center}
.game-card{border-color:color-mix(in srgb,var(--b) 55%,var(--line));background:linear-gradient(145deg,var(--panel),#1a1127)}.game-kinds{display:grid;grid-template-columns:1fr;gap:8px}.game-kinds button{text-align:left;padding:14px}.game-kinds small{float:right;color:var(--muted);font-weight:400;font-size:11px}.game-setting{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;font-size:13px}.game-setting small{display:block;color:var(--muted);font-size:10px}.game-setting output{min-width:35px;text-align:center;font-weight:700;font-size:16px}.game-setting button{padding:8px 12px;min-width:39px}.game-clock{margin-left:auto;color:var(--a);font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}.game-question{font-size:26px;line-height:1.25;overflow-wrap:anywhere;margin-bottom:14px}.game-answers{display:grid;gap:9px;margin:18px 0}.game-answer{display:flex;align-items:center;gap:11px;text-align:left;min-height:53px;overflow-wrap:anywhere}.game-answer>span:first-child{background:#ffffff0b;border-radius:8px;padding:4px 8px}.game-answer:disabled{opacity:1;cursor:default}.game-answer.correct{border-color:#59d6a2;background:#163b2a;color:#b6ffdb}.game-feedback{font-size:13px;color:var(--muted);margin:14px 0}.game-reveal{border-radius:12px;padding:13px;background:#60488c30;font-weight:700}.game-board{margin-top:18px}.score-row{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.score-row .grow{overflow-wrap:anywhere}.score-row strong{white-space:nowrap}.game-stop{font-size:12px;color:var(--muted);margin-top:20px}.game-stop summary{cursor:pointer}.game-banner{border-color:var(--b);margin:12px 0}.yes-result{display:flex;align-items:center;gap:20px;margin:25px 0}.yes-result strong{font:800 64px 'Outfit',sans-serif;color:var(--a)}.tabs{scroll-margin-top:10px}.tabs button{padding:11px 5px;font-size:11px}.tv .game-question{font-size:40px}.tv .game-answers{grid-template-columns:1fr 1fr}.tv .game-card{padding:30px}.tv .game-answer{font-size:22px}.tv .game-clock{font-size:30px}.tv .game-card .status{font-size:16px}.tv .game-feedback{font-size:18px}.game-card button:focus-visible{outline:3px solid var(--b);outline-offset:3px}@media(max-width:420px){.game-question{font-size:23px}.game-setting{font-size:12px}.game-kinds small{font-size:10px}.tv .game-question{font-size:25px}.tv .game-answers{grid-template-columns:1fr}.tv .game-card{padding:16px}}
textarea{font:inherit;display:block;width:100%;min-height:110px;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:13px;padding:13px;resize:vertical}details{margin-top:15px}summary{cursor:pointer;font-weight:700}.hub-nav,.feature-menu{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.hub-nav .button,.feature-menu button{text-align:center;font-size:13px;padding:14px 9px}.room-logo{max-width:160px;max-height:100px;object-fit:contain;margin:14px 0}.broadcast{position:sticky;top:0;z-index:4;border:1px solid var(--a);background:var(--panel);padding:15px;border-radius:14px;margin:14px 0;font-weight:700;overflow-wrap:anywhere}.pair-code{font:800 64px 'Outfit',sans-serif;letter-spacing:9px;text-align:center;color:var(--a)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.stats-grid div{background:var(--field);padding:15px;border-radius:12px}.stats-grid strong{display:block;font:700 28px 'Outfit',sans-serif;color:var(--a)}.stats-grid span{font-size:12px;color:var(--muted)}.profile-picture{width:70px;height:70px;min-width:70px;display:grid;place-items:center;background:var(--field);border-radius:50%;font-size:30px;overflow:hidden}.profile-picture img{width:100%;height:100%;object-fit:cover}.chat-message{background:var(--field);padding:10px;border-radius:10px;overflow-wrap:anywhere}.karaoke-live{text-align:center}.karaoke-live>div{white-space:pre-wrap;font-size:28px;font-weight:700;overflow-wrap:anywhere}.invitation-message{white-space:pre-wrap;overflow-wrap:anywhere}.tabs{display:grid;grid-template-columns:repeat(3,1fr)}.song{flex-wrap:wrap}.song .grow{min-width:110px}.tv .karaoke-live>div{font-size:42px}@media(max-width:420px){.pair-code{font-size:44px;letter-spacing:5px}.hub-nav{grid-template-columns:1fr 1fr}.karaoke-live>div{font-size:22px}.tv .karaoke-live>div{font-size:28px}}

/* Responsive phones, tablets and living-room screens. Keep content scrollable. */
html{ -webkit-text-size-adjust:100%;scroll-padding-top:100px }
body{min-width:0;overflow-wrap:anywhere}
main{width:100%;max-width:680px;padding:clamp(16px,3vw,32px);padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(40px,env(safe-area-inset-bottom))}
header{flex-wrap:wrap}header nav{flex-wrap:wrap;justify-content:flex-end}header nav span{white-space:nowrap}
input,select,textarea{min-width:0;max-width:100%;font-size:16px}button,.button{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}a,button,input,select,textarea,summary{scroll-margin:100px 0 24px}
:focus-visible{outline:3px solid #e8c8ff;outline-offset:4px}
img,video,iframe,audio{max-width:100%}.now>div{min-width:0}.now img,.song img{flex-shrink:0}.card,.feature,section,form{min-width:0}.row.wrap>*{max-width:100%}
.chips{flex-wrap:wrap}.chips button{flex:1 1 48px}.game-setting{flex-wrap:wrap}.game-setting>.row{flex-shrink:0}.game-kinds small{float:none;display:block;margin-top:4px}.tabs{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:max(8px,env(safe-area-inset-top))}.tabs button{min-width:0}
.qr{width:clamp(144px,38vw,240px);height:auto;aspect-ratio:1}.pair-code{font-size:clamp(32px,10vw,72px);letter-spacing:clamp(2px,1vw,9px)}
#media{width:calc(100% - 32px);max-width:648px;margin:0 auto 30px}#youtube iframe{display:block;height:auto;aspect-ratio:16/9}#toast{bottom:max(18px,env(safe-area-inset-bottom));max-height:45dvh;overflow:auto}
footer{max-width:680px;flex-wrap:wrap;padding-bottom:max(24px,env(safe-area-inset-bottom))}dialog{max-height:85vh;max-height:85dvh;overflow:auto}
@media(max-width:359px){header{gap:14px}header nav{width:100%;justify-content:space-between}.card{padding:13px}.kinds{grid-template-columns:1fr}.kind span{display:inline;margin-right:8px}.kind small{font-size:12px}.features,.hub-nav,.feature-menu,.stats-grid{grid-template-columns:1fr}.now{gap:10px}.now img{width:64px;height:64px}.song .grow{min-width:85px}.reaction{font-size:20px;padding:5px}.avatars{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px){main:not(.tv main){padding-top:36px}.features{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tv main{max-width:1800px;font-size:clamp(16px,1.4vw,28px);padding:clamp(20px,4vw,80px)}
.tv header .brand{font-size:clamp(30px,3vw,56px)}.tv header nav{font-size:clamp(13px,1.2vw,24px)}
.tv .roomhead h1{font-size:clamp(28px,3.4vw,68px)}.tv .bigcode{font-size:clamp(26px,3vw,60px)}.tv .now h2{font-size:clamp(24px,2.8vw,56px)}.tv .now p,.tv .notice,.tv .status,.tv .song strong,.tv .song small,.tv .pill{font-size:clamp(14px,1.15vw,24px)}
.tv .now img{width:clamp(70px,12vw,220px);height:clamp(70px,12vw,220px)}.tv .game-question{font-size:clamp(25px,3vw,64px)}.tv .game-answer{font-size:clamp(18px,1.8vw,36px)}.tv .game-card{padding:clamp(16px,2.4vw,48px)}.tv .game-clock{font-size:clamp(24px,2.5vw,48px)}.tv .karaoke-live>div{font-size:clamp(26px,3vw,64px)}
.tv #media,.tv footer{max-width:1640px;width:calc(100% - clamp(40px,8vw,160px))}.tv #youtube iframe{max-height:none}.tv .qr{width:clamp(160px,18vw,320px)}.tv button,.tv .button{font-size:clamp(14px,1.2vw,24px)}
@media(min-width:1100px){.tv .game-answers{grid-template-columns:repeat(2,minmax(0,1fr))}.tv #roomPanel .song{padding:18px 0}.tv #roomPanel .song img{width:72px;height:72px}}
@media(max-width:600px){.tv .game-answers{grid-template-columns:1fr}.tv .now{align-items:flex-start}.tv .game-card{padding:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.join .row>input{flex:1;width:0}.join .row>button{flex-shrink:0;white-space:nowrap}

.join-input{font-size:16px;letter-spacing:0}.recent-room{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}.recent-room span{min-width:0}.recent-room strong,.recent-room small{display:block}.recent-room small{font-size:12px;color:var(--muted)}

.karaoke-live #karaokeLyricsNext{font-size:clamp(16px,2vw,30px);margin:18px 0 0;white-space:pre-wrap}#retryPlayer{margin:12px 0;width:100%}

#youtube iframe{min-height:200px}#youtube{min-width:0;max-width:100%}