:root{--yellow:#ffdf58;--ink:#151515}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--yellow);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.stage{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate;padding:40px 18px}.camera{position:absolute;z-index:-1;width:920px;max-width:none;height:auto;left:calc(50% - 110px);top:calc(50% - 570px);color:#a88a14;opacity:.27;transform:rotate(-12deg);pointer-events:none}.content{width:min(100%,640px);display:flex;flex-direction:column;align-items:center;gap:28px}.brand{display:flex;align-items:center;justify-content:center;gap:15px;width:100%}.brand h1{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(48px,9vw,84px);line-height:1;letter-spacing:-.065em;margin:0;font-weight:700}.clapper{width:clamp(56px,10vw,96px);height:auto;flex:none;transform:rotate(-9deg)}.entry{width:min(100%,530px);background:var(--ink);border-radius:32px;padding:clamp(24px,5vw,42px);box-shadow:0 18px 35px rgba(0,0,0,.08)}label{display:block;color:#fff;font-size:13px;font-weight:800;letter-spacing:.18em;margin-bottom:18px}.field{background:#fff;border-radius:17px;display:flex;align-items:center;padding:9px 9px 9px 20px;gap:12px}.field input{min-width:0;width:100%;border:0;outline:0;font:500 clamp(30px,6vw,48px)/1.2 Arial,Helvetica,sans-serif;letter-spacing:.13em;color:var(--ink);background:transparent;font-variant-numeric:tabular-nums}.field input::placeholder{color:#aaa}.field input::-webkit-inner-spin-button,.field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field input[type=number]{-moz-appearance:textfield}.field button{border:0;border-radius:50%;width:66px;height:66px;flex:none;background:var(--yellow);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .15s}.field button:hover{transform:scale(1.06);background:#ffe982}.field button:focus-visible,.field input:focus-visible{outline:3px solid #c39700;outline-offset:3px}.field button svg{width:31px;height:31px}.credit{margin:-12px 0 0;color:#696047;font-size:13px;font-style:italic;font-weight:400;letter-spacing:.015em;text-align:center}.error{min-height:1.3em;margin:12px 0 0;color:#ffb8b8;font-size:13px}@media(max-width:600px){.camera{width:850px;left:calc(50% - 80px);top:calc(50% - 490px);opacity:.22}.content{gap:24px}.brand{gap:8px}.brand h1{font-size:clamp(43px,10vw,66px)}.clapper{width:clamp(47px,12vw,70px)}.entry{border-radius:26px}.field button{width:56px;height:56px}}

body{font-family:'Space Grotesk',Arial,sans-serif}.options{display:grid;gap:14px;width:min(100%,530px)}.option{display:block;text-decoration:none;text-align:center;background:#151515;color:white;padding:25px 18px;border-radius:25px;font-weight:700;font-size:21px;box-shadow:0 18px 35px rgba(0,0,0,.08)}.option.alt{background:white;color:#151515}.option small{display:block;font-size:13px;font-weight:400;margin-top:5px}.sub{font-size:17px;text-align:center;margin:0}.status{font-size:15px;line-height:1.5;text-align:center}.code{font-size:clamp(55px,10vw,105px);font-weight:700;letter-spacing:.13em;text-align:center;font-variant-numeric:tabular-nums}.panel{width:min(100%,530px);background:#151515;color:white;border-radius:28px;padding:25px;text-align:center}.panel input{font:700 35px 'Space Grotesk',sans-serif;letter-spacing:.18em;text-align:center;width:100%;padding:12px;border:0;border-radius:12px}.action{border:0;border-radius:14px;background:#ffdf58;color:#151515;padding:16px 24px;font:700 17px 'Space Grotesk',sans-serif;cursor:pointer;margin-top:15px}.link{color:inherit}.room{font-size:24px;font-weight:700}.tiny{font-size:13px;opacity:.8}.hidden{display:none!important}

/* Compact phone join screen; other pages remain unchanged. */
.join-stage{padding:20px 16px;min-height:100svh}
.join-content{gap:17px;width:min(100%,440px)}
.join-panel{padding:23px 22px;border-radius:25px;width:100%}
.join-panel .room{font-size:21px;line-height:1.25;margin:0 0 17px}
.join-panel #joinform input{font-size:27px}
.join-panel #connected>.action#scan{display:block;width:100%;margin:0 auto 18px}
.join-panel .manual-label{font-size:13px;opacity:.85;margin:4px 0 9px}
.join-panel .compact-send input{font-size:21px;letter-spacing:.06em;padding:10px 12px;border-radius:10px}
.join-panel .compact-send .action{font-size:15px;padding:12px 22px;margin-top:10px}
.join-panel #leave{display:block;margin:24px auto 0;background:transparent;color:#ffdf58;border:1px solid #ffdf58;padding:9px 16px;font-size:13px;font-weight:500}
.join-panel .status{margin:10px 0 0;font-size:13px;color:#ffb8b8}
.join-content .credit{margin:0;font-size:12px}
@media(max-width:600px){.join-stage{padding:18px 14px}.join-content{gap:16px}.join-content .brand h1{font-size:clamp(40px,10vw,59px)}.join-content .clapper{width:clamp(43px,11vw,62px)}.join-panel{padding:20px 19px}.join-stage .camera{top:calc(50% - 450px)}}
@media(max-height:730px){.join-stage{padding-block:12px}.join-content{gap:10px}.join-panel{padding-block:16px}.join-panel .room{margin-bottom:12px}.join-panel #connected>.action#scan{margin-bottom:12px}.join-panel #leave{margin-top:15px}}

/* TV lobby: one concise instruction beneath the code. */
.tv-instruction{font-size:clamp(15px,2.4vw,19px);line-height:1.4;margin:14px 0 0}

/* Mobile viewport containment and compact layout — all navigation screens */
html{width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:clip}
.stage{width:100%;max-width:100%;overflow:hidden;min-width:0}
.content,.brand,.panel,.entry,.options,.field{min-width:0;max-width:100%}
.brand h1{min-width:0;white-space:nowrap}
.code{max-width:100%;letter-spacing:.045em;font-size:clamp(34px,9vw,100px);overflow-wrap:normal;white-space:nowrap}
.panel input,.field input{max-width:100%;min-width:0}
@media(max-width:600px){
 .stage{min-height:100svh;padding:16px 14px;align-content:center}
 .content{width:100%;gap:14px}
 .brand{gap:7px}
 .brand h1{font-size:clamp(34px,10.5vw,58px)}
 .clapper{width:clamp(37px,11vw,61px)}
 .camera{width:650px;max-width:none;left:calc(50% - 45px);top:calc(50% - 390px)}
 .sub{font-size:14px}
 .options{gap:10px}
 .option{padding:15px 12px;border-radius:17px;font-size:17px}
 .option small{font-size:11px;line-height:1.35}
 .panel{padding:18px 14px;border-radius:21px}
 .entry{padding:19px 16px;border-radius:22px}
 .field{padding:7px 7px 7px 13px}
 .field input{font-size:clamp(23px,7vw,34px)}
 .field button{width:48px;height:48px}
 .field button svg{width:25px;height:25px}
 .code{font-size:clamp(33px,9vw,62px);letter-spacing:.035em}
 .room{font-size:19px}
 .action{padding:12px 18px;font-size:15px;margin-top:12px}
 .panel input{font-size:clamp(22px,7vw,30px);padding:10px}
 .credit{font-size:11px;margin:0}
 .join-stage{padding:12px 14px}
 .join-content{gap:12px}
 .join-panel{padding:17px 14px}
 .join-panel .room{font-size:18px;margin-bottom:12px}
 .join-panel #connected>.action#scan{margin-bottom:12px}
 .join-panel .manual-label{font-size:12px}
 .join-panel .compact-send input{font-size:18px}
 .join-panel #leave{margin-top:14px}
 .tv-instruction{font-size:14px}
}
@media(max-width:370px){.stage{padding-inline:10px}.brand h1{font-size:10vw}.clapper{width:10vw}.code{font-size:8.5vw}}
@media(max-height:690px) and (max-width:600px){.content{gap:9px}.option{padding-block:11px}.panel{padding-block:13px}.entry{padding-block:13px}}