.controller-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:.65rem;padding-bottom:max(.65rem,env(safe-area-inset-bottom));overflow:hidden}
.controller-header{flex:none;gap:.5rem;padding:.3rem 0 .6rem;flex-wrap:wrap}.controller-header .brand img{width:32px;height:32px}.controller-header .brand strong{font-size:1rem}.controller-header>span{font-size:.75rem}
#control-dashboard{flex:1;min-height:0;display:flex;flex-direction:column}#control-dashboard[hidden],.controller-panel[hidden]{display:none}
.controller-tabs{position:static;flex:none;grid-template-columns:repeat(6,minmax(0,1fr));gap:.25rem;padding:.35rem 0}.controller-tabs button{padding:.65rem .1rem;font-size:.75rem;border-radius:10px}.controller-tabs span{min-width:18px;height:18px;margin-left:2px;font-size:.7rem}
.controller-panel{flex:1;min-height:0;overflow:auto;padding:.7rem .2rem;overscroll-behavior:contain}.controller-panel>h1{font-size:clamp(1.7rem,6vw,2.4rem);margin:.3rem 0 1rem}.controller-stats{margin:.7rem 0}.controller-stats span{padding:.65rem;font-size:.85rem}.controller-stats b{font-size:1.6rem}.controller-next{min-height:72px;padding:1rem;box-shadow:none;font-size:1.2rem}.controller-hint{font-size:.85rem}.master-cue{margin:.7rem 0;padding:.65rem}.master-cue p{font-size:.9rem}.jury-empty{padding:2rem .5rem}.jury-card{padding:.8rem}.jury-card blockquote{font-size:1.25rem}.jury-actions button{min-height:64px}
#control-error{flex:none;margin:.3rem 0;font-size:.85rem;max-height:4em;overflow:auto}#control-error:empty{display:none}#control-login{overflow:auto;min-height:0}
#host-scan-video{width:100%;max-height:25dvh;object-fit:cover;border-radius:12px}#host-scan-form{display:grid;gap:.5rem;margin-top:.7rem}#host-scan-result{padding:1rem;border-radius:14px;font-weight:800}#host-scan-result:empty{display:none}#host-scan-result[data-ok="true"]{background:#116d37;color:white;border:3px solid #67ff9e}#host-scan-result[data-ok="false"]{background:#911d35;color:white;border:3px solid #ff889c}
#remote-dj-cue{padding:.8rem;background:#ffffff12;border-radius:12px;font-weight:800}#remote-dj-playlist{padding-left:1.5rem}#remote-dj-playlist li{margin:.6rem 0}

/* Tactile remote: a quiet display, brightly coloured controls and a fixed mode row. */
.controller-body{background:radial-gradient(ellipse at top,#392657,#100919 75%)}
.controller-shell{max-width:520px;background:linear-gradient(155deg,#30253e,#1b1328 55%,#231831);border:1px solid #ffffff1f;box-shadow:inset 0 1px 0 #ffffff24,0 20px 70px #0007}
.controller-tabs{background:transparent;gap:.4rem;padding:.4rem 0 .85rem}
.controller-tabs button{--key:#c7ff28;position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;min-height:72px;border:1px solid color-mix(in srgb,var(--key) 50%,transparent);border-radius:16px;background:linear-gradient(#ffffff10,#0002),color-mix(in srgb,var(--key) 14%,#21172e);color:#fff;box-shadow:0 4px 0 #0c0714,inset 0 1px 0 #ffffff25;font-size:.72rem;touch-action:manipulation}
.controller-tabs button[data-tab="jury"]{--key:#ffc24b}.controller-tabs button[data-tab="players"]{--key:#4de2d2}.controller-tabs button[data-tab="dj"]{--key:#c49aff}.controller-tabs button[data-tab="access"]{--key:#79bfff}
.controller-tabs button i{font-style:normal;font-size:1.45rem;color:var(--key);line-height:1.1}
.controller-tabs button.active{background:var(--key);color:#21132c;border-color:var(--key);box-shadow:0 4px 0 color-mix(in srgb,var(--key) 45%,#160d20),0 0 16px color-mix(in srgb,var(--key) 16%,transparent)}
.controller-tabs button.active i{color:#21132c}.controller-tabs button:active{transform:translateY(3px);box-shadow:0 1px 0 #0c0714}
.controller-tabs [data-jury-count]{position:absolute;top:-5px;right:-3px;border:2px solid #21172e;min-width:21px;height:21px}
.controller-panel{padding:.6rem .3rem 1rem}
#navigate-panel>.eyebrow{font-size:.68rem;letter-spacing:.15em;color:#a99bbd;margin:.1rem 0 .4rem}
#current-stage{padding:1rem;border:1px solid #75618a;border-radius:16px;background:linear-gradient(150deg,#100d1b,#251b32);color:#ddffe9;box-shadow:inset 0 3px 10px #0007;text-wrap:balance;font-size:clamp(1.5rem,6vw,2rem);min-height:75px;display:flex;align-items:center;margin:0 0 .6rem}
.controller-stats{gap:.5rem}.controller-stats span{background:#110c1c;border-color:#ffffff12;border-radius:12px;font-size:.78rem}.controller-stats b{color:#7deed7;font-size:1.6rem}
.controller-next{position:relative;min-height:100px!important;margin:1rem 0 .5rem;border:1px solid #e4ff8c;border-radius:24px;background:linear-gradient(155deg,#deff76,#b9f312);box-shadow:0 7px 0 #567509,inset 0 2px 0 #ffffffa0;color:#172306;font-size:1.4rem!important;justify-content:center;gap:1rem;text-align:center;touch-action:manipulation}
.controller-next span{display:grid;place-items:center;width:42px;height:42px;background:#20320017;border-radius:50%;font-size:1.7rem}.controller-next:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 #567509}.controller-next:disabled{filter:saturate(.25);opacity:.55;box-shadow:0 3px 0 #46502b}
.controller-force-jury{width:100%;padding:.8rem;border-radius:15px;background:#583048;color:#ffd1df;border:1px solid #bc6285;margin:.8rem 0}
.remote-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.remote-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:125px;background:linear-gradient(145deg,#64eddb,#2ac5b8);color:#082c2b;border:1px solid #aefff1;border-radius:22px;box-shadow:0 5px 0 #12635c;font-weight:850;touch-action:manipulation}
.remote-actions button i{font-size:2.2rem;line-height:1;font-style:normal}.remote-actions #manage-teams{background:linear-gradient(145deg,#c7acff,#9b73e4);border-color:#dfccff;color:#271140;box-shadow:0 5px 0 #51377f}.remote-actions button:active{transform:translateY(3px);box-shadow:none}
#host-camera{width:100%;min-height:65px;background:linear-gradient(145deg,#a6d5ff,#61a9f0);color:#122c49;border:1px solid #d4eaff;border-radius:18px;box-shadow:0 4px 0 #315880;font-weight:850}
#host-scan-form button{min-height:58px;border-radius:18px}.jury-actions button{border-radius:20px;box-shadow:inset 0 2px 0 #ffffff50,0 4px 0 #0006}.jury-actions button:active{transform:translateY(3px);box-shadow:none}
.controller-shell button:focus-visible,.controller-shell summary:focus-visible{outline:3px solid white;outline-offset:4px}
@media(min-width:560px){.controller-shell{border-radius:32px;height:calc(100dvh - 24px);margin:12px auto;padding:1rem}}
@media(max-height:700px){.controller-tabs button{min-height:60px;padding:.4rem .1rem}.controller-next{min-height:78px!important;margin:.65rem 0 .5rem}.master-cue{padding:.5rem;margin:.5rem 0}.master-cue p{font-size:.8rem}.controller-stats span{padding:.5rem}#current-stage{min-height:60px;padding:.7rem}}
/* Fixed primary action, physically separated from tabs and secondary actions. */
#navigate-panel{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
#navigate-panel[hidden]{display:none}
.navigation-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 .2rem 1rem}
.navigation-primary{flex:none;padding:24px .2rem 6px;background:linear-gradient(180deg,#1c152600,#1c1526 24px)}
.controller-body #control-error:empty{display:none}
.navigation-primary .controller-next{width:100%;min-height:64px!important;margin:0;padding:12px 16px;border-radius:18px;font-size:1.2rem!important;line-height:1.25;box-shadow:0 4px 0 #567509}
.navigation-primary .controller-next span{width:32px;height:32px;font-size:1.35rem}
.navigation-primary .controller-next.is-waiting::after{font-size:1.2rem}
.navigation-primary .navigation-wait{min-height:1.4em;margin-bottom:8px;font-size:.8rem}
.navigation-content .controller-force-jury{width:auto;min-height:44px;font-size:.8rem;padding:.6rem .8rem;background:#35263e;color:#efc3d1;border-color:#775267;margin:.6rem 0}
.navigation-content .controller-hint{font-size:.75rem;margin:.6rem 0}
@media(max-height:650px){.navigation-primary{padding-top:16px}.navigation-primary .controller-next{min-height:60px!important}.navigation-content #current-stage{font-size:1.4rem;min-height:54px;padding:.65rem}}

/* The selected tab and its panel form one continuous coloured surface. */
#control-dashboard{--tab-accent:#c7ff28;--tab-surface:#29321c}
#control-dashboard[data-active-tab="jury"]{--tab-accent:#ffc24b;--tab-surface:#3b2e1e}
#control-dashboard[data-active-tab="players"]{--tab-accent:#4de2d2;--tab-surface:#173633}
#control-dashboard[data-active-tab="dj"]{--tab-accent:#c49aff;--tab-surface:#322440}
#control-dashboard[data-active-tab="access"]{--tab-accent:#79bfff;--tab-surface:#1b3046}
.controller-tabs{gap:4px;padding:7px 0 0;align-items:stretch;isolation:isolate}
.controller-tabs button{border-radius:14px 14px 0 0;box-shadow:none;min-height:68px;border-bottom:0;background:#ffffff07;color:#c8bfd4;margin:0 0 0;padding:.6rem .1rem .7rem}
.controller-tabs button.active{z-index:1;background:var(--tab-surface);color:var(--tab-accent);border:1px solid color-mix(in srgb,var(--tab-accent) 42%,#48354c);border-top:3px solid var(--tab-accent);border-bottom:0;box-shadow:0 2px 0 var(--tab-surface)}
.controller-tabs button.active i{color:var(--tab-accent)}
.controller-tabs button:active{transform:none;box-shadow:none}
.controller-panel{background:var(--tab-surface);border:1px solid color-mix(in srgb,var(--tab-accent) 42%,#48354c);border-radius:0 0 20px 20px;padding:1rem .7rem}
#navigate-panel{padding:.8rem .6rem 0}
.navigation-primary{background:var(--tab-surface)}
.controller-panel>h1{color:var(--tab-accent)}
.controller-tabs button:focus-visible{outline-offset:-5px}
@media(max-height:700px){.controller-tabs button{min-height:58px;padding:.4rem .1rem .5rem}.controller-panel{padding:.7rem .55rem}#navigate-panel{padding:.6rem .45rem 0}}

/* Clearer colour families across modes, controls and fields. */
#control-dashboard{--tab-surface:#303e17}
#control-dashboard[data-active-tab="jury"]{--tab-surface:#513719}
#control-dashboard[data-active-tab="players"]{--tab-surface:#12433d}
#control-dashboard[data-active-tab="dj"]{--tab-surface:#432759}
#control-dashboard[data-active-tab="access"]{--tab-surface:#183d60}
.controller-tabs button:not(.active){background:color-mix(in srgb,var(--key) 23%,#17111f);border-color:color-mix(in srgb,var(--key) 65%,#17111f);color:color-mix(in srgb,var(--key) 40%,white)}
.controller-tabs button.active{border-top-width:4px}
.controller-panel input,.controller-panel select{background:color-mix(in srgb,var(--tab-surface) 80%,#05050a);color:#fff;border:1px solid color-mix(in srgb,var(--tab-accent,#65ff96) 65%,#21152b);border-radius:14px;padding:.8rem;width:100%}
.controller-panel input:focus-visible{outline:2px solid var(--tab-accent);outline-offset:3px}
.controller-panel .remote-actions button,.controller-panel .remote-actions #manage-teams,#host-camera,#host-scan-form button{background:linear-gradient(140deg,color-mix(in srgb,var(--tab-accent) 75%,white),var(--tab-accent));color:#101c27;border-color:color-mix(in srgb,var(--tab-accent) 55%,white);box-shadow:0 4px 0 color-mix(in srgb,var(--tab-accent) 30%,#10121b)}
.controller-stats span,#remote-dj-cue,.jury-card{background:color-mix(in srgb,var(--tab-surface) 70%,#0c0912);border-color:color-mix(in srgb,var(--tab-accent) 38%,transparent)}
.controller-stats b,.jury-card header,.controller-panel summary{color:var(--tab-accent)}
.jury-card blockquote{border-left-color:var(--tab-accent)}
#access-panel>p:first-of-type{margin-bottom:1.1rem}
#host-camera{margin:0 0 20px;min-height:58px}
#host-scan-frame,.cast-scan-frame{position:relative;isolation:isolate;aspect-ratio:1;width:100%;overflow:hidden;border-radius:20px;border:2px solid color-mix(in srgb,var(--tab-accent,#65ff96) 65%,transparent);background:#090f17;margin:0 0 20px}
#host-scan-frame[hidden]{display:none}
#host-scan-frame #host-scan-video,.cast-scan-frame video{display:block;width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0}
.scan-guide{position:absolute;inset:13%;border:2px solid #96ffb999;border-radius:16px;overflow:hidden;pointer-events:none}
.scan-line{position:absolute;left:0;right:0;top:0;height:3px;background:#65ff96;box-shadow:0 0 14px 4px #55ff8b80;display:none}
#host-scan-frame[data-scanning="true"] .scan-line,.cast-scan-frame[data-scanning="true"] .scan-line{display:block;animation:ticket-scan-sweep 2.4s ease-in-out infinite alternate}
.scan-camera-label{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;padding:6px 8px;border-radius:8px;background:#06150dd9;color:#dbffe6;font-size:.72rem;pointer-events:none}
@keyframes ticket-scan-sweep{from{top:3%}to{top:96%}}
.manual-ticket{margin:8px 0 0}.manual-ticket>summary{font-size:.8rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 0;min-height:40px}
#host-scan-form{gap:12px;margin:10px 0 6px}#host-scan-form button{margin-top:4px}
#host-scan-result{margin:0 0 18px}
@media(prefers-reduced-motion:reduce){#host-scan-frame[data-scanning="true"] .scan-line,.cast-scan-frame[data-scanning="true"] .scan-line{animation:none;top:50%}}
.spotify-preview{margin-top:1.2rem;padding:1rem;border:1px solid var(--tab-accent);border-radius:18px;background:#190e2780}.spotify-preview h2{font-size:1.15rem;margin:0 0 .5rem}.spotify-preview p{font-size:.85rem;line-height:1.5}.spotify-preview a{display:block;text-align:center;text-decoration:none;background:var(--tab-accent);color:#20102e;padding:1rem;border-radius:14px;font-weight:850}.spotify-return{color:#a6f6cd}.spotify-return:empty{display:none}

.remote-demo-actions{display:flex;flex-wrap:wrap;gap:12px}.remote-demo-actions button{min-height:44px}.remote-demo-actions [aria-pressed=true]{outline:2px solid var(--tab-accent)}#remote-round-demo{margin:16px 0;padding:16px;border:1px solid var(--tab-accent);border-radius:14px}#remote-round-demo[hidden]{display:none}

#control-dashboard[data-active-tab="rounds"]{--tab-accent:#ff9fb4;--tab-surface:#432636}.controller-tabs button[data-tab="rounds"]{--key:#ff9fb4}.remote-round-jump{display:block;width:100%;text-align:left;margin:.6rem 0;padding:.85rem;border:1px solid #d78198;border-radius:.75rem;background:#ffffff0d;color:#fff}.remote-round-jump[aria-current="step"]{border:2px solid #ff9fb4;background:#ff9fb425}#remote-reset-session{border:2px solid #ff7195;border-radius:1rem;background:#71293e;color:#fff;padding:1rem;font-weight:800;width:100%}#remote-round-error{color:#ffb4c6}@media(max-width:380px){.controller-tabs button{font-size:.65rem}}

#control-dashboard[data-connection-ready="false"] .controller-panel button{pointer-events:none;opacity:.5}
.controller-tabs button[hidden]{display:none}.controller-tabs:has([data-tab="pranks"]:not([hidden])){grid-template-columns:repeat(7,minmax(52px,1fr));overflow-x:auto}.controller-tabs button[data-tab="pranks"]{--key:#95e7ff}#pranks-panel label{display:grid;gap:8px;margin:16px 0}#pranks-panel label[hidden]{display:none}#pranks-panel select{width:100%;min-height:48px;padding:10px;border-radius:12px;font:inherit}#prank-freeze{width:100%;margin-top:12px}
.helpline-host{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #ffffff40}#pranks-panel .helpline-person{display:flex;align-items:center;gap:10px;padding:10px;background:#ffffff10;border-radius:12px}#pranks-panel .helpline-person input{width:24px;height:24px;flex:none}#helpline-callback{display:block;width:100%;margin-top:12px}