@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Press+Start+2P&display=swap";:root{--c64-blue:#4040b0;--c64-blue-dark:#2a2a7a;--c64-blue-light:#6060d0;--c64-cream:#b0b0d0;--c64-white:#e8e8f0;--c64-border:#7070a0;--stripe-1:#f03070;--stripe-2:#f0a000;--stripe-3:#f0f000;--stripe-4:#30d060;--stripe-5:#30c0f0;--stripe-6:#c030f0;--action-primary:#f03070;--action-confirm:#30d060;--action-warn:#f0a000;--action-danger:#f03070;--overlay-scanline:#0000000a;--surface-inset:#1e1e5a;--display-font:"C64 Pro Mono", "Press Start 2P", "Courier New", monospace;--ui-font:"Outfit", sans-serif;color:var(--c64-cream);background:var(--c64-blue);font-family:var(--ui-font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--c64-blue);margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:var(--c64-white)}.app-shell,.display-shell,.screen{background:var(--c64-blue);min-height:100svh;color:var(--c64-cream)}.app-shell{padding:0 clamp(16px,3vw,32px) 32px}.display-shell{--display-gutter:20px;--display-side-width:clamp(220px, 17vw, 300px);--display-stage-width:calc(100vw - var(--display-side-width) - (var(--display-gutter) * 3));position:relative;overflow:hidden}.display-shell:before{z-index:10;pointer-events:none;content:"";opacity:.6;background:repeating-linear-gradient(to bottom, var(--overlay-scanline) 0, var(--overlay-scanline) 1px, transparent 1px, transparent 3px);position:fixed;inset:0}.center-screen{text-align:center;align-content:center;place-items:center;gap:24px;padding:32px;display:grid}.stripe-band{grid-template-columns:repeat(6,1fr);height:8px;margin-inline:calc(-1*clamp(16px,3vw,32px));display:grid}.display-shell .stripe-band{height:12px;margin:0}.stripe-band span{display:block}.stripe-band-footer{position:fixed;bottom:0;left:0;right:0}.stripe-band-footer span{animation:1.8s linear infinite stripePulse}.stripe-band-footer span:nth-child(2){animation-delay:.12s}.stripe-band-footer span:nth-child(3){animation-delay:.24s}.stripe-band-footer span:nth-child(4){animation-delay:.36s}.stripe-band-footer span:nth-child(5){animation-delay:.48s}.stripe-band-footer span:nth-child(6){animation-delay:.6s}h1,h2,h3,.display-font,.loading{color:var(--c64-white);font-family:var(--display-font);letter-spacing:.05em;margin:0;font-weight:400;line-height:1.2}h1{font-size:clamp(1.8rem,5vw,4rem)}h2{font-size:1.05rem}h3{font-size:clamp(1.2rem,3vw,2rem)}p{margin:0}label{color:var(--c64-white);text-transform:uppercase;gap:8px;font-size:.78rem;font-weight:700;display:grid}input,select,textarea{border:1px solid var(--c64-border);width:100%;color:var(--c64-white);background:var(--surface-inset);border-radius:0;outline:none;padding:12px 14px;font-size:16px}input:focus,select:focus,textarea:focus{border-color:var(--stripe-5)}button{border:1px solid var(--c64-border);color:var(--c64-white);background:var(--c64-blue-light);text-transform:uppercase;border-radius:0;padding:10px 12px;font-size:.78rem;font-weight:700}button:hover{border-color:var(--c64-white)}button:disabled{cursor:wait;opacity:.65}.primary,.confirm,.warn,.danger,.ready-button{border-color:var(--c64-white);color:#101040}.primary,.ready-button{background:var(--action-primary)}.confirm{background:var(--action-confirm)}.warn{background:var(--action-warn)}.danger{background:var(--action-danger)}.ghost{background:0 0}.wide{width:100%}.eyebrow{color:var(--stripe-5);text-transform:uppercase;font-size:.76rem;font-weight:700}.muted{color:var(--c64-cream)}.form-error{border:1px solid var(--stripe-1);color:var(--c64-white);background:var(--surface-inset);padding:10px}.app-header{justify-content:space-between;align-items:center;gap:24px;padding:24px 0;display:flex}.app-header nav,.panel-header,.row-actions,.control-grid,.host-tools{flex-wrap:wrap;gap:8px;display:flex}.manage-grid{grid-template-columns:minmax(320px,1.3fr) minmax(280px,1fr) minmax(260px,.8fr);align-items:start;gap:16px;display:grid}.panel,.join-card,.ready-card{border:1px solid var(--c64-border);background:var(--c64-blue-dark);padding:18px}.panel-header{justify-content:space-between;align-items:center;min-width:0}.panel-header h2{overflow-wrap:anywhere;min-width:0}.stripe-divider{background:linear-gradient(to right, var(--stripe-1) 0 16.66%, var(--stripe-2) 16.66% 33.33%, var(--stripe-3) 33.33% 50%, var(--stripe-4) 50% 66.66%, var(--stripe-5) 66.66% 83.33%, var(--stripe-6) 83.33% 100%);height:4px;margin:14px 0}.queue-list,.history-list,.analytics{gap:10px;display:grid}.queue-row{border:1px solid var(--c64-border);background:var(--surface-inset);border-left:6px solid #0000;grid-template-columns:34px 34px auto minmax(0,1fr);align-items:start;gap:12px;min-height:76px;padding:12px;display:grid}.queue-row.singing{border-left-color:var(--stripe-1)}.queue-row.ready{border-left-color:var(--stripe-5)}.drag-handle{width:30px;color:var(--stripe-3);background:0 0;padding-inline:0}.queue-rank{color:var(--c64-white);text-align:center;font-weight:700}.queue-main{gap:4px;min-width:0;display:grid}.queue-main strong,.singer-row strong{min-width:0;color:var(--c64-white);overflow-wrap:anywhere;word-break:normal}.queue-main span,.queue-main em,.singer-row span{color:var(--c64-cream);overflow-wrap:anywhere;font-size:.9rem}.pill{border:1px solid var(--c64-border);color:var(--stripe-3);text-transform:uppercase;justify-self:start;padding:4px 8px;font-size:.75rem;font-weight:700}.queue-row>.pill{grid-column:4}.row-actions{grid-column:4;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));width:100%;min-width:0;display:grid}.row-actions button{overflow-wrap:anywhere;min-width:0;padding-inline:8px}.avatar{border:2px solid var(--c64-border);display:block}.avatar-small{width:44px;height:44px}.avatar-medium{width:64px;height:64px}.avatar-large{width:clamp(92px,16vw,140px);height:clamp(92px,16vw,140px)}.avatar-pair{align-items:center;display:flex}.avatar-pair .avatar+.avatar{margin-left:-12px}.avatar-pair.large{justify-content:center}.now-card{border:1px solid var(--c64-border);background:var(--surface-inset);justify-items:start;gap:14px;min-width:0;padding:18px;display:grid}.now-card .avatar-pair{justify-self:center}.now-card h3,.now-card p,.active-request-card h3,.active-request-card p{overflow-wrap:anywhere;min-width:0;max-width:100%}.host-tools{margin-top:14px}.host-tools label{flex:220px}.qr-box{border:1px solid var(--c64-border);background:var(--surface-inset);grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-width:0;margin-top:14px;padding:12px;display:grid}.qr-box>div{min-width:0}.qr-box a{overflow-wrap:anywhere;word-break:break-word;max-width:100%;display:block}.qr-box img{background:var(--c64-white);width:112px;height:112px}.singer-row{border:1px solid var(--c64-border);background:var(--surface-inset);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;display:grid}.singer-row>div{min-width:0}.analytics{border-top:1px solid var(--c64-border);margin-top:14px;padding-top:14px}.stat-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.stat-grid span{border:1px solid var(--c64-border);background:var(--surface-inset);padding:10px}.stat-grid strong{color:var(--c64-white);font-size:1.5rem;display:block}.join-shell{place-items:center;padding-bottom:48px;display:grid}.join-card{width:min(680px,100%)}.join-card form,.song-form{gap:14px;margin-top:18px;display:grid}.avatar-preview{place-items:center;display:grid}.avatar-row{gap:8px;display:grid}.avatar-row>span{color:var(--c64-white);text-transform:uppercase;font-size:.78rem;font-weight:700}.avatar-row>div{gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.avatar-row button.active,.partner-grid button.selected{border-color:var(--stripe-1);box-shadow:inset 0 0 0 2px var(--stripe-1)}.guest-hero{grid-template-columns:auto 1fr;align-items:center;gap:18px;padding:24px 0;display:grid}.position{color:var(--stripe-3);font-size:1.2rem;font-weight:700}.notice,.ready-card{margin-bottom:16px}.notice{border:1px solid var(--stripe-2);color:#101040;background:var(--stripe-2);padding:12px;font-weight:700}.ready-card{gap:10px;display:grid}.active-request-card{border:1px solid var(--c64-border);border-left:6px solid var(--stripe-5);background:var(--surface-inset);gap:8px;padding:14px;display:grid}.ready-button{min-height:64px;box-shadow:0 6px 0 var(--surface-inset), 6px 6px 0 var(--c64-white);font-family:var(--display-font);font-size:.85rem}.ready-button:active{box-shadow:0 3px 0 var(--surface-inset), 3px 3px 0 var(--c64-white);transform:translateY(3px)}.check-row{align-items:center;gap:10px;display:flex}.check-row input{width:auto}.duet-sheet{border:1px solid var(--c64-border);background:var(--surface-inset);gap:10px;padding:12px;display:grid}.partner-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}.partner-grid button{justify-items:center;gap:8px;display:grid}.reaction-bar{background:var(--surface-inset);grid-template-columns:repeat(6,1fr);gap:6px;margin-inline:calc(-1*clamp(16px,3vw,32px));padding:8px;display:grid;position:sticky;bottom:0;left:0;right:0}.reaction-bar button{min-height:54px;font-size:1.35rem}.guest-queue-panel{margin-top:16px}.guest-queue-list{gap:10px;display:grid}.guest-queue-row{border:1px solid var(--c64-border);background:var(--surface-inset);border-left:6px solid #0000;grid-template-columns:30px auto 1fr auto;align-items:center;gap:10px;padding:10px;display:grid}.guest-queue-row.self{border-left-color:var(--stripe-3)}.guest-queue-row strong{color:var(--c64-white);display:block}.guest-queue-row span{color:var(--c64-cream)}.display-state,.display-playing{min-height:calc(100svh - 24px)}.display-state{padding:48px calc(var(--display-side-width) + 64px) 48px 48px;text-align:center;align-content:center;place-items:center;gap:24px;display:grid}.display-state h1{text-shadow:0 0 20px var(--stripe-5), 0 0 60px var(--stripe-1);font-size:clamp(4rem,10vw,8rem)}.display-state h2{font-size:clamp(1.5rem,4vw,3rem)}.display-playing{background:#000;position:relative}.youtube-frame,.youtube-frame>div,.youtube-frame iframe{width:var(--display-stage-width);height:calc(100svh - 24px)}.youtube-frame iframe{border:0}.youtube-fallback{inset:12px calc(var(--display-side-width) + (var(--display-gutter) * 2)) 24px var(--display-gutter);z-index:4;border:1px solid var(--c64-border);border-left:8px solid var(--stripe-2);text-align:center;background:#1e1e5af0;align-content:center;place-items:center;gap:18px;padding:32px;display:grid;position:fixed}.youtube-fallback button{border:1px solid var(--c64-border);color:#101040;background:var(--stripe-2);padding:12px 16px;font-weight:700;text-decoration:none}.youtube-warning{top:28px;left:var(--display-gutter);z-index:5;max-width:min(620px, calc(var(--display-stage-width) - 40px));border:1px solid var(--c64-border);border-left:8px solid var(--stripe-2);color:var(--c64-white);background:#1e1e5adb;padding:10px 14px;font-weight:700;position:fixed}.custom-video-card{width:var(--display-stage-width);background:var(--c64-blue);text-align:center;align-content:center;place-items:center;gap:24px;height:calc(100svh - 24px);padding:48px;display:grid}.custom-video-card h1{font-size:clamp(3rem,8vw,7rem)}.reaction-rail{top:80px;right:calc(var(--display-side-width) + 32px);z-index:6;pointer-events:none;width:180px;position:fixed;bottom:24px;overflow:hidden}.reaction-rail span{font-size:clamp(2rem,4vw,3.5rem);animation:2.2s ease-out forwards floatReaction;position:absolute;bottom:0}.hero-pair{justify-content:center}.type-on span:after{content:"";background:var(--c64-white);width:.55em;height:.9em;margin-left:.15em;animation:.8s step-end infinite blink;display:inline-block}.qr-box.tv{grid-template-columns:1fr;justify-items:center;width:min(320px,80vw)}.qr-box.tv img{width:240px;height:240px}.display-side-panel{right:var(--display-gutter);z-index:8;width:var(--display-side-width);border:1px solid var(--c64-border);border-left:8px solid var(--stripe-5);color:var(--c64-white);background:linear-gradient(180deg, var(--c64-blue-dark), var(--surface-inset));grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:12px;display:grid;position:fixed;top:24px;bottom:24px}.display-side-current,.display-side-queue,.display-side-join{border:1px solid var(--c64-border);background:#1e1e5a9e;gap:8px;min-width:0;padding:10px;display:grid}.display-side-current{border-left:6px solid var(--stripe-1)}.display-side-current strong,.display-side-current span,.display-side-queue-row span{overflow-wrap:anywhere;min-width:0}.display-side-current strong{color:var(--c64-white);font-family:var(--display-font);font-size:clamp(.78rem,.95vw,1rem)}.display-side-current span{color:var(--c64-cream)}.display-side-label{color:var(--stripe-3);font-family:var(--display-font);font-size:clamp(.62rem,.75vw,.8rem)}.display-side-queue{align-content:start;overflow:hidden}.display-side-queue>div{gap:8px;display:grid;overflow:hidden}.display-side-queue-row{border:1px solid var(--c64-border);background:#6060d040;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:8px;display:grid}.display-side-queue-row.next{border-color:var(--stripe-5)}.display-side-queue-row strong{color:var(--stripe-5)}.display-side-join{border-top:6px solid var(--stripe-5);font-family:var(--display-font);justify-items:center;font-size:.7rem}.display-side-join img{width:min(150px, calc(var(--display-side-width) - 48px));height:min(150px, calc(var(--display-side-width) - 48px));background:var(--c64-white)}.mobile-tabs{display:none}@keyframes stripePulse{0%,to{opacity:.45}50%{opacity:1}}@keyframes floatReaction{0%{opacity:0;transform:translateY(0)translate(0)rotate(-6deg)}15%{opacity:1}to{opacity:0;transform:translateY(-100%)translate(-28px)rotate(10deg)}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@media (width<=1023px){.app-shell{padding-bottom:88px}.app-header{flex-direction:column;align-items:flex-start}.manage-grid{display:block}.mobile-hidden{display:none}.mobile-visible{display:block}.mobile-tabs{z-index:20;border-top:1px solid var(--c64-border);background:var(--surface-inset);grid-template-columns:repeat(3,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.mobile-tabs button{background:0 0;border:0;border-top:4px solid #0000}.mobile-tabs button.active{border-top-color:var(--stripe-1);color:var(--c64-white)}.queue-row{grid-template-columns:28px 28px auto minmax(0,1fr);gap:8px}.queue-row .pill,.queue-row .row-actions{grid-column:1/-1}.row-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.guest-hero{text-align:center;grid-template-columns:1fr;justify-items:center}}