@import url('/style.css') layer(legacy);

/* Arcade shell. Legacy layout stays in a lower layer for older room modes. */
:root{--ink:#f6f3ec;--muted:#a7a6bf;--purple:#bda5ff;--line:#34334e;--surface:#222239;--bg:#151525;--lime:#d3f66b;--violet:#bda5ff;--coral:#ff967f;--sky:#8bd8f5;--yellow:#ffdb83;--dark:#17172b;font-family:Manrope,system-ui,sans-serif;color-scheme:dark}
body[data-ui]{background:#151525;color:var(--ink);min-height:100dvh;background-image:radial-gradient(ellipse at 75% 5%,#6546ba20,transparent 50%);font-family:Manrope,system-ui,sans-serif}
body[data-ui] button,body[data-ui] input,body[data-ui] select,body[data-ui] textarea{font-family:inherit}
[hidden]{display:none!important}
button{background:var(--lime);color:var(--dark);border:2px solid var(--dark);border-radius:14px;font-weight:800;box-shadow:0 4px 0 #090915;min-height:46px;transition:transform .16s,box-shadow .16s,background .16s}
button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 #090915}
button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #090915}
button:disabled{opacity:.5}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--sky);outline-offset:4px}
.ghost{background:#33324d;color:#efebff;border:1px solid #54516c;box-shadow:none}
.small{min-height:44px;padding:9px 13px;font-size:12px}
input,textarea,select{background:#19192b;color:var(--ink);border:1px solid #55516b;border-radius:12px;min-height:48px;padding:13px 15px}
input::placeholder,textarea::placeholder{color:#7f7d99}
input:focus,textarea:focus,select:focus{border-color:var(--violet);box-shadow:0 0 0 3px #bda5ff20}
label{color:#bcb8d2;font-size:11px;letter-spacing:.04em}
h1,h2,h3{font-family:'Bricolage Grotesque',Manrope,system-ui,sans-serif;color:var(--ink)}
.eyebrow{color:var(--violet);font-size:10px;letter-spacing:.14em;font-weight:800}
.muted,small{color:var(--muted)}
body>header{height:82px;max-width:1220px;padding:0 38px;gap:16px;border-bottom:1px solid #ffffff0a}
.logo{color:#faf8ed;font-family:'Bricolage Grotesque',sans-serif;font-size:30px;letter-spacing:-1.8px;gap:10px}
.logoMark{width:34px;height:34px;color:#17172b;background:var(--lime);border-radius:50%;border:2px dashed #25263a;outline:2px solid var(--lime);outline-offset:1px;font-size:25px;transform:rotate(-12deg)}
#roomLabel{font-size:10px;color:#b8b2ce;font-weight:700;letter-spacing:.1em}
.headerBalance{margin-left:10px;font-size:14px;font-weight:850;color:var(--lime);white-space:nowrap}
main{max-width:1200px;margin:auto;padding:42px 38px 30px}
body>footer{max-width:1124px;margin:10px auto;padding:23px 0;border-top:1px solid #39364d;color:#918ba6;font-size:9px;letter-spacing:.13em;display:flex;justify-content:space-between}

/* The landing screen has one selected action, with help available on demand. */
#home{text-align:left;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.85fr);align-items:center;gap:44px;padding:26px 0 40px}
#home .homeMinimalHero{margin:0;max-width:none;text-align:left}
.arcadeHero{position:relative;min-height:460px;display:flex;flex-direction:column;justify-content:center}
.arcadeHeroCopy{position:relative;z-index:2}
.arcadeHeroEyebrow{font-size:10px;letter-spacing:.2em;font-weight:800;color:#b2a7ce;display:flex;align-items:center;gap:9px}
.arcadeHeroEyebrow:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #d3f66b13}
#home .pleyHeadline{display:block;margin:17px 0 14px;text-align:left;line-height:1}
#home .pleyWordmark{display:flex;gap:0;align-items:center;justify-content:flex-start;font-size:clamp(96px,11vw,154px);line-height:.95;letter-spacing:-.08em;font-weight:900;color:#faf6e9;overflow:visible}
#home .pleyWordmark>span{display:inline-block}
#home .pleyLetter1{color:var(--lime)}#home .pleyLetter2{color:var(--violet)}#home .pleyLetter3{color:var(--coral)}
.arcadeHeroTagline{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;letter-spacing:-1.2px;line-height:1.15;font-weight:750;max-width:370px;margin:20px 0 12px;color:#f7f3eb}
.arcadeHeroDescription{font-size:13px;line-height:1.8;color:#aca5c0;max-width:330px}
.arcadeHeroArt{height:170px;position:relative;margin-top:24px;width:330px;transform:rotate(-4deg)}
.heroQuestionCard{position:absolute;width:190px;min-height:128px;border:3px solid #111124;border-radius:15px;padding:16px;background:var(--violet);box-shadow:6px 6px 0 #08081a;color:#211b3a;left:45px;top:8px;transform:rotate(-5deg)}
.heroCardBack{background:var(--coral);transform:rotate(9deg);left:66px;top:13px}
.heroCardLabel{display:block;font-size:8px;font-weight:900;letter-spacing:.12em}
.heroCardQuestion{display:block;font-size:20px;font-weight:900;margin:9px 0}
.heroCardAnswers{display:flex;gap:5px}.heroCardAnswers span{border:1px solid #5a467a;padding:5px 8px;border-radius:5px;font-size:10px;font-weight:800}.heroCardAnswers span:last-child{background:var(--lime)}
.heroChipStack{position:absolute;left:240px;top:50px;width:65px;height:80px;transform:rotate(14deg)}
.heroChip{position:absolute;display:grid;place-items:center;width:57px;height:57px;border-radius:50%;border:5px dashed #27213d;outline:2px solid #171427;box-shadow:0 5px 0 #0a0a18;font-size:26px;font-weight:900;color:#23203a}
.heroChipLime{background:var(--lime);top:28px}.heroChipCoral{background:var(--coral);top:14px}.heroChipViolet{background:var(--violet);top:0}
.heroSpark{position:absolute;font-size:36px;color:var(--yellow)}.heroSparkOne{left:8px;top:30px;transform:rotate(10deg)}.heroSparkTwo{right:5px;top:0;font-size:24px;color:var(--sky)}
.homeConsole{background:#222239;border:1px solid #4a415f;border-radius:24px;padding:11px 11px 0;box-shadow:10px 12px 0 #0d0d1c;position:relative}
.homeConsole:before{content:'PLAYER SELECT';position:absolute;top:-10px;right:26px;color:var(--dark);background:var(--coral);border:2px solid var(--dark);padding:4px 11px;border-radius:5px;font-size:8px;letter-spacing:.15em;font-weight:900;transform:rotate(4deg)}
.homeModeTabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#151525;border:1px solid #39324c;padding:5px;border-radius:15px;margin-bottom:5px}
.homeModeTabs button{background:transparent;color:#a49db9;border:0;border-radius:10px;box-shadow:none;font-size:12px;min-height:42px;padding:10px}
.homeModeTabs button[aria-selected=true]{background:var(--violet);color:#211b35;box-shadow:0 2px 0 #080815}
#home .panels{display:block;max-width:none;text-align:left}
#home .panel{border:0;border-radius:15px;background:transparent;padding:27px 20px 24px;box-shadow:none;transform:none}
#home .panel:hover{transform:none;box-shadow:none;border:0}
#home .panel h2{font-size:28px;letter-spacing:-1px;margin:10px 0;color:#fff9ee;line-height:1.16}
#home .panel p{font-size:12px;line-height:1.65;color:#aaa3bf;margin:0 0 20px;max-width:310px}
.coralDot{color:var(--coral)}
#home label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin:18px 0 8px;color:#b6adc9}
#home input{background:#171728;color:#fff8ee;border:1px solid #56506c;border-radius:11px;min-height:52px}
#home #joinCode{font-size:24px;letter-spacing:.22em;font-weight:850}
#home #joinBtn,#home #createBtn{display:flex;justify-content:space-between;align-items:center;min-height:53px;width:100%;margin:24px 0 15px;background:var(--lime);color:#1d2430;border:2px solid #101020;box-shadow:0 4px 0 #0b0b19;border-radius:11px;font-size:14px;padding:12px 18px}
#home #createBtn{background:var(--coral)}
.joinFootnote{display:block;text-align:center;font-size:9px;color:#a59bb8}
#home .hostPanel small{font-size:10px;color:#aca5bf}
.homeRulesToggle{background:transparent;color:#9e95b4;box-shadow:none;border:0;border-top:1px solid #3d3651;border-radius:0;display:block;width:100%;padding:17px 8px;font-size:10px;text-align:center}
.homeRulesToggle strong{color:#d6c7ff;margin-left:5px}
#home .rules{grid-column:1/-1;width:100%;max-width:680px;margin:12px auto;text-align:left;background:#242238;border:1px solid #514765;border-radius:22px;padding:25px}
#home .rules h2{color:#fbf7ed}
.rulesDeckCard,.rulesDeckTone0{background:var(--violet);color:#24203e;border:2px solid #151526;box-shadow:5px 5px 0 #111121}
.rulesDeckTone1{background:var(--sky)}.rulesDeckTone2{background:var(--yellow)}
.rulesDeckCard h3,.rulesDeckCard p{color:#26203d}.rulesDeckBadge{color:#48405e}.rulesDeckNumber{color:#30244915}
.rulesDeckBack{background:var(--coral);border-color:#151525}.rulesDeckTop,.rulesDeckHint{color:#b7abce}.rulesDeckArrow{background:var(--violet);color:#24203e;border-color:#191427}.rulesDeckDots button span{background:#756686}.rulesDeckDots button[aria-current] span{background:var(--lime)}
.penaltyExplainer{color:#b4a9c8;border-color:#514765;background:transparent}.penaltyExplainer p{font-size:12px;line-height:1.7}

/* A viewport shell keeps navigation and game context in place. */
body[data-session=true]{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column}
body[data-session=true]>header{flex:0 0 64px;min-height:64px;height:64px;width:100%;max-width:1120px;padding:0 28px;margin:0 auto}
body[data-session=true]>main{flex:1;min-height:0;max-width:1120px;width:100%;padding:0 28px;margin:0 auto;display:flex}
body[data-session=true]>footer{display:none}
#game{width:100%;min-height:0;display:flex;flex-direction:column}
.appShell{display:flex;flex-direction:column;flex:1;min-height:0}
.arenaTopline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 2px 13px;font-size:9px;letter-spacing:.1em;color:#9c95b0;font-weight:700}
.liveConnection{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:0;color:#afa6c2;white-space:nowrap}
.liveConnection i{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px #d3f66b0a}
.liveConnection[data-connected=false] i{background:var(--coral)}
.appViewport{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5f537c transparent;padding:0 0 24px;scroll-padding-top:10px}
.appScreen{min-height:100%;padding:8px 3px 24px;outline:none;max-width:890px;margin:0 auto}
.playMeta{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:5px 0 22px}
.playMeta h1,.screenHeading h1{font-size:40px;letter-spacing:-1.7px;line-height:1.1;margin:8px 0 0;color:#faf6ec}
.screenHeading{margin:8px 0 25px}.screenHeading p{font-size:12px;color:#a39bb7;line-height:1.7;margin:12px 0 0}
.bottomNav{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 12px max(8px,env(safe-area-inset-bottom));max-width:540px;width:100%;align-self:center;border:1px solid #474059;border-bottom:0;background:#222137eF;border-radius:22px 22px 0 0;box-shadow:0 -10px 35px #10101d55;z-index:20;gap:8px;backdrop-filter:blur(18px)}
.bottomNav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;border-radius:12px;background:transparent;color:#9188a9;box-shadow:none;min-height:53px;font-size:10px;padding:7px;position:relative}
.bottomNav button svg{width:21px;height:21px}.bottomNav button[aria-selected=true]{color:var(--lime);background:#d3f66b0c}.bottomNav button[aria-selected=true] i{position:absolute;top:0;right:22%;width:4px;height:4px;background:var(--lime);border-radius:50%}
#liveLayout{display:none!important}
#questionCard{background:radial-gradient(ellipse at 100% 0%,#7a55b014,transparent 52%),radial-gradient(ellipse at 0% 100%,#a6d5420c,transparent 48%),linear-gradient(145deg,#111119 0%,#050507 60%,#0b0b11 100%);color:#f6f3ec;border:1px solid #4b4864;border-radius:23px;padding:27px;box-shadow:0 5px 0 #080815;position:relative;overflow:visible;order:initial}
#questionCard .questionContent{margin-bottom:24px}
#questionText{font-family:'Bricolage Grotesque',Manrope,sans-serif;font-size:clamp(22px,2.4vw,29px);font-weight:700;line-height:1.45;letter-spacing:-.6px;color:#f6f3ec;margin:14px 0 0;overflow-wrap:anywhere}
#qCategoryDisplay{color:#bbb6cf;font-size:9px;letter-spacing:.15em;display:flex;align-items:center;gap:7px}
#qCategoryDisplay:before{content:'✦';color:#ffdb83;font-size:14px}
.questionImage{max-height:220px;display:block;max-width:100%;object-fit:contain;margin:15px auto 0}
#questionProgress,#roundRibbon,#phaseRail,#info,#roundHighlight{display:none}
.timeTrack{height:4px;top:0;left:24px;right:24px;overflow:hidden;border-radius:0 0 4px 4px;background:#3b3654}
#timeFill{background:#a47af3;transition:transform .1s linear}
#timerSlot .timerRow{display:block;background:#29263f;border:1px solid #615176;border-radius:15px;padding:9px 16px;margin:0;min-width:95px;box-shadow:0 3px 0 #0c0c1b}
#timerSlot .timerRow>div:first-child{display:flex;flex-direction:column;gap:3px;align-items:center}
#timerSlot #clockLabel{font-size:7px;letter-spacing:.07em;color:#b8a8cf;max-width:100px;text-align:center}
#timerSlot .clock{color:var(--yellow);font-size:31px;font-family:'Bricolage Grotesque',sans-serif;line-height:1;font-weight:800}
#speedReward{display:none}
#game #options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:0}
#game #options button{--answer:#ffe09a;--answer-dark:#715019;display:flex;align-items:center;text-align:left;gap:13px;background:var(--answer);color:#25203a;border:2px solid #0b0b18;border-radius:13px;padding:15px;min-height:79px;font-size:17px;font-weight:700;line-height:1.45;box-shadow:0 4px 0 #0b0b18;opacity:1;position:relative;transition:transform .16s,box-shadow .16s,opacity .18s}
#game #options button:nth-child(2){--answer:#b8e3f6;--answer-dark:#215d81}
#game #options button:nth-child(3){--answer:#ffc7b2;--answer-dark:#903a26}
#game #options button:nth-child(4){--answer:#b7edce;--answer-dark:#235c40}
#game #options .answerLetter{width:32px;height:32px;min-width:32px;border-radius:9px;background:#ffffff75;color:var(--answer-dark);border:1px solid #ffffffa0;font-size:15px;font-weight:900;display:grid;place-items:center}
#game #options button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 0 #0b0b18;border-color:#0b0b18}
#game #options button:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #0b0b18}
#game #options button.selected{outline:3px solid #f6f3ec;outline-offset:3px;border-color:#0b0b18;box-shadow:0 4px 0 #0b0b18}
#game #options[data-answer-state=saved] button:not(.selected),#game #options[data-answer-state=saving] button:not(.selected){opacity:.48;box-shadow:0 2px 0 #0b0b18}
#game #options button.correct{border-color:#426526;background:#d7ee9f;opacity:1;box-shadow:0 4px 0 #426526}
#game #options button.correct .answerCheck{color:#37611e}.answerCheck{margin-left:auto}
#answerStatus{min-height:0;font-size:11px;color:#c0bbd2;margin:20px 0 0;line-height:1.65;font-weight:600}
#answerStatus:empty{display:none}
#answerStatus[data-state=ready]{background:transparent;color:#c0bbd2}
#answerStatus[data-state=saving],#answerStatus[data-state=error]{background:#3e3025;color:#ffe09a;border:1px solid #8b6c3d}
#answerStatus[data-state=saved]{padding:11px 13px;border:1px solid #789c57;background:#28382c;color:#d7ee9f;border-radius:9px}
#retryAnswer{margin-top:12px;background:#5e398d;color:#fff;border-color:#3a215b;box-shadow:none}
.questionEnter{animation:questionArrives .28s ease-out}
@keyframes questionArrives{from{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.roundRecap{margin-top:19px;padding:17px 18px;border:1px solid #5e4d7e;background:#2d2546;border-radius:16px;display:flex;align-items:center;gap:13px}
.roundRecap>span{display:grid;place-items:center;width:35px;height:35px;background:var(--lime);color:#263624;border-radius:50%;font-size:23px;flex-shrink:0}
.roundRecap>div{flex:1}.roundRecap strong{font-size:14px;color:#efe4ff}.roundRecap p{margin:6px 0 0;color:#bbb0cd;font-size:11px;line-height:1.7}.roundRecap button{font-size:10px;white-space:nowrap}
.solutionDetails{margin:15px 0;border:1px solid #51435f;border-radius:14px;background:#242237;color:#e4d9f5;padding:0;overflow:hidden}
.solutionDetails>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;padding:16px 18px;min-height:50px;font-weight:750;font-size:13px;color:#dfd2f4}
.solutionDetails>summary::-webkit-details-marker{display:none}.solutionDetails[open]>summary{border-bottom:1px solid #51435f}
#solutionSlot{padding:6px 20px 20px}.result{background:transparent;border:0;padding:0;margin:8px 0 0;color:#e8e1f2;font-size:13px;line-height:1.8}.result h3{color:var(--lime);font-size:18px;line-height:1.6;margin:12px 0}.result>.eyebrow{display:none}.result details{font-size:11px}.result details summary{color:#bcb0d1;cursor:pointer}.personalResult{color:var(--lime);border-color:#544360}
#questionSource{color:#a396ba;font-size:10px;margin:12px 0}#questionSource a{color:var(--sky)}
.nextRoundHint{text-align:center;color:#a194b4;font-size:11px;margin:22px 0}
.studentLobby{background:#242239;border:1px solid #4b415f;border-radius:24px;text-align:center;padding:33px 24px;position:relative;overflow:hidden}
.lobbyChip{display:grid;place-items:center;background:var(--lime);color:#252333;width:76px;height:76px;margin:0 auto 24px;border:8px dashed #49552c;outline:4px solid var(--lime);outline-offset:2px;border-radius:50%;font-size:47px;font-weight:900;transform:rotate(-12deg);box-shadow:0 8px 0 #10121e}
.studentLobby h2{font-size:29px;margin:12px 0}.studentLobby>p{color:#ada2c0;font-size:12px;line-height:1.8}.lobbyFriends{display:flex;justify-content:center;align-items:center;gap:15px;margin:24px 0;font-size:11px;color:#c5bbd6}.lobbyAvatars{display:flex;padding-left:6px}.miniAvatar{display:grid;place-items:center;width:34px;height:34px;background:var(--avatar);border:3px solid #242239;color:#272137;border-radius:50%;margin-left:-6px;font-size:10px;font-weight:800}
.lobbyFacts{display:flex;gap:12px;justify-content:center}.lobbyFacts>span{display:flex;flex-direction:column;gap:5px;background:#171727;border:1px solid #3e3653;border-radius:12px;padding:13px 24px;font-size:9px;color:#aba0bc}.lobbyFacts strong{font-size:23px;color:#e3d6f4;font-family:'Bricolage Grotesque',sans-serif}.studentLobby .stayNote{font-size:10px;max-width:310px;margin:24px auto 0}.stayNote button{background:none;border:0;box-shadow:none;padding:3px 0;min-height:30px;font-size:10px;color:var(--violet)}

/* The table is a destination, never a frame around the question. */
#pokerHUD{background:#211f36;border:1px solid #514463;border-radius:22px;padding:20px;order:initial;box-shadow:none}
.tableHeading{padding:0;margin:0 0 15px}.tableHeading .eyebrow{color:#b7a2d8}.tableHeading p{font-size:10px;color:#9e90b4;margin:6px 0 0}.tablePager{gap:6px}.tablePager button{background:#3d3153;color:#d3bdf0;min-height:38px;box-shadow:none;border:1px solid #6f588c;padding:7px 11px}.tablePager span{font-size:10px;color:#b7a3ce}
.pokerTable{position:relative;height:430px;min-height:0;padding:0;display:block;margin:0;width:100%;background:radial-gradient(ellipse,#7e4bc21a,transparent 70%)}
.tableFelt{position:absolute;inset:55px 70px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:0;width:auto;min-height:0;padding:25px;border:12px solid #655079;border-radius:48%;background:radial-gradient(ellipse at 50% 35%,#563e7a,#302344);box-shadow:0 0 0 2px #9c7bb5,0 0 0 8px #272035,0 14px 0 8px #111121,inset 0 0 60px #1b122d75}
.tableFelt:before{content:'';position:absolute;inset:15px;border:1px dashed #a78bbb66;border-radius:48%;pointer-events:none}
.tableFelt:after{content:'PLEY';position:absolute;top:19%;left:0;right:0;text-align:center;font-size:26px;letter-spacing:.2em;color:#c8a6f125;font-weight:900;font-family:'Bricolage Grotesque',sans-serif;pointer-events:none}
#tableQuestionSpot{display:none}
.tablePot{display:flex;flex-direction:column;gap:3px;position:relative;z-index:1}.tablePot>span:first-child{font-size:8px;letter-spacing:.15em;color:#c2a6de}.tablePot strong{font-size:40px;line-height:1.1;color:var(--yellow);font-weight:900}.tablePot .potChips{display:block;color:#d3f66b;font-size:20px;letter-spacing:-4px}.tablePot small{font-size:8px;color:#b99bcc}
#potDetails{color:#c2a9d4;font-size:9px;line-height:1.6;text-align:center;max-width:200px;margin:0;z-index:1}
.tableSeats{position:absolute;inset:0;display:block;pointer-events:none}
.pokerTable .tableSeat{position:absolute!important;transform:translate(-50%,-50%)!important;inset:auto;display:flex;align-items:center;flex-direction:column;justify-content:center;width:94px;min-height:92px;background:#27223c;border:1px solid #6b5582;border-radius:13px!important;color:#f0e3ff;padding:8px!important;gap:3px;box-shadow:0 5px 0 #10101d;pointer-events:auto}
.pokerTable .mySeat{border:2px solid var(--lime);background:#302c43}.pokerTable .winnerSeat{box-shadow:0 0 22px #d3f66b30,0 5px 0 #10101d}
.seatAvatar{width:30px;height:30px;border:2px solid #ffffff88;border-radius:50%;font-size:10px;display:grid;place-items:center;font-weight:900;color:#fff}
.seatName{font-size:9px;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#ece2fa}.seatChips{font-size:14px;color:var(--yellow)}.seatStatus{font-size:7px;color:#b8a3cd}.seatPaid{display:none}
.tableSeat.inactiveSeat{opacity:.5}#coinLayer{position:absolute;inset:0;pointer-events:none;z-index:5}.flyingCoin{color:var(--yellow)}
#myDashboard{background:#302740;border:1px solid #645176;border-radius:14px;padding:16px;margin:22px 0 0;color:#e4d2f2;gap:12px}#myDashboardName{color:#e9d9f5;font-size:13px}#myDashboardStatus{color:#bba7ce;font-size:10px}.myBalance strong{color:var(--lime);font-size:24px}.myBalance small{font-size:8px;color:#b09dc5}.myBalance>span{color:#a994c2;font-size:9px}
#chipActivity{font-size:10px;color:#b6a2ca;margin:12px 0 0}.seatDetails{background:#30243f;border:1px solid #624c79;color:#dec9ef}.seatDetails>strong{color:var(--yellow)}.seatDetails p{color:#b9a0cd}
.returnToPlay{background:var(--violet);width:100%;max-width:400px;display:block;margin:22px auto 0}
body[data-role=host] #tableSeats{display:none}.tablePager:has(button[disabled]+span+button[disabled]){visibility:hidden}

/* Rankings and secondary tools are readable, separate screens. */
#liveLeaderboard{position:static;background:#242137;border:1px solid #524365;padding:24px;border-radius:20px;display:block}
#liveLeaderboard>.eyebrow{color:#b5a0d0}#liveLeaderboard>h3{font-size:23px;color:#f3e9fd;margin:10px 0 16px}#playerCount{background:#443553;color:#dfc9f7}
#players{display:block}.player{color:#e2d5ef;border-color:#463850;padding:15px 0;font-size:13px}.player strong{color:var(--lime)}.playerStats{color:#ab97bf;font-size:10px}
.hostLeaderboard{display:none}body[data-role=host][data-mode=poker] .hostLeaderboard{display:block}body[data-role=host][data-mode=poker] #players{display:none}
.hostLeaderboardHint,.hostLeaderboardColumns{color:#ab96be;border-color:#463650;font-size:10px}.hostLeaderboardRows{max-height:none;overflow:visible;padding:0}
.hostRankRow{background:transparent;color:#eddef7;border:0;border-bottom:1px solid #493855;box-shadow:none;border-radius:0;min-height:68px;padding:12px 0}.hostRankIdentity strong{color:#e5d2f3}.hostRankIdentity small{color:#a890be}.hostRankChips{color:var(--lime)}.hostRankPosition{color:#c9b1dd}
.roundProgress{border-color:#51405d;color:#bba5cc;font-size:10px}.roundProgress progress{accent-color:var(--violet);background:#3c2e4e}
#roundLeaderboard{display:block;background:transparent;border:0;color:#e9d8f5;padding:18px;margin:0}#roundLeaderboard>p{color:#bba4ce;font-size:11px}#roundLeaderboard>strong{font-size:14px}.payoutOrder{background:#2c243b;color:#bda3d5;padding:10px 14px;font-size:11px}.rankRow{border-color:#52415e;color:#e3cfee;font-size:12px}.myRank{background:#3b2d4d}.gain{color:#bde780}.loss{color:#ffa38c}
.finalResults{background:radial-gradient(ellipse at top,#5c398466,transparent 70%),#252039;border:1px solid #7c5994;border-radius:22px;padding:35px 24px;color:#e8d9f8}.finalResults h2{font-size:36px;color:#eaf4bb}.finalResults h3{color:#dcc8ee}.finalResults p{color:#bba4d0}.finalResults .crown{font-size:48px}.finalResults table{background:transparent;color:#e4d5ef}.finalResults th,.finalResults td{border-color:#4a355c;padding:15px 10px}.finalResults th{color:#a896be}.finalResults .winningRow{background:#c4e97b20;color:#e7f8bc}
.roomDetailsSlot .top{background:#292238;border:1px solid #564265;border-radius:17px;padding:20px;margin:0 0 18px;display:block}.roomDetailsSlot .top h2{font-size:19px;display:block;color:#e8d8f7}.roomDetailsSlot .top .eyebrow{display:block}.roomDetailsSlot .top p{display:block;font-size:12px;color:#b6a0c9}.roomDetailsSlot .top strong{color:var(--lime)}.roomDetailsSlot .gameBadges{display:flex;margin:12px 0 0;flex-wrap:wrap}.pill{background:#534067;color:#ebd8fd;font-size:9px}.scorePill{background:#cee485;color:#2d3320;font-size:10px}
.gameRules{background:#272238;border:1px solid #514060;border-radius:14px;padding:16px;margin:15px 0}.gameRules summary{color:#dfccec;cursor:pointer;font-size:13px}#gameRules ol{display:block}#gameRules li{background:transparent;border-color:#514060;color:#bca6ce;border-radius:12px;padding:16px 16px 16px 56px;font-size:11px}#gameRules li strong{color:#e2cdf2}#gameRules li:before{background:#443152;color:#c9a9e3;left:12px;top:16px}
#fairPlayNotice{display:block;background:#3e2d30;border:1px solid #835b4a;color:#eacaac;border-radius:13px;font-size:11px;padding:16px;line-height:1.7}#fairPlayNotice p{color:#c8a896;font-size:11px;margin:8px 0 0}
#disqualifiedNotice{background:#543035;color:#ffcebf;border:1px solid #b56e68;border-radius:14px;margin-top:20px;padding:16px;font-size:12px}
.scoringCard{background:#2b2539;color:#cbb5dc;border:1px solid #51405d;border-radius:14px;padding:18px;font-size:12px;margin-top:15px}.scoringCard strong{color:#e2cbed}.scoringCard b{color:var(--lime)}.scoringCard small{color:#b39bc4}
.moreActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.moreActions button{flex:1;font-size:12px;min-height:48px}.leaveGame{color:var(--coral);border-color:#875c6d;background:#392532}
#connection{color:#9b87ac;font-size:10px;line-height:1.7;margin:20px 0 0}
.installCard{background:#262238;border:1px solid #4e3b60;padding:18px;border-radius:15px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}.installCard>div{flex:1}.installCard strong{font-size:13px}.installCard p{font-size:11px;color:#ac97c0;line-height:1.7;margin:6px 0 0}.installCard button{font-size:11px}

/* Host setup retains the same editors; only one step is shown at a time. */
.hostSetup{background:#242137;border:1px solid #514262;border-radius:21px;padding:24px;margin:0;box-shadow:none}.setupHeading{gap:12px;margin-bottom:22px}.setupHeading h2{color:#f1e3fa;font-size:28px;margin:10px 0}.setupHeading p{color:#b19ac4;font-size:12px}.setupCount{background:#473655;color:#e0c4f5;border-color:#735787;font-size:10px}
.hostSetupTabs{background:#191725;border:1px solid #473451;border-radius:12px;padding:5px;gap:4px}.hostSetupTabs button{background:transparent;color:#a88fbd;border:0;box-shadow:none;font-size:11px;min-height:44px;padding:9px}.hostSetupTabs button[aria-selected=true]{background:var(--violet);color:#29203c}.hostSetupTabs button span{background:#ffffff22;color:inherit;border:0}
#hostSetup .hostSectionIntro h3,#hostControls .hostLiveHeading h3{color:#ead7f8;font-size:20px}.hostSectionIntro p,.hostLiveHeading p{color:#af96c3;font-size:11px;line-height:1.7}
.setupChoices{gap:10px}.setupChoices .setupChoice{background:#2d263e;color:#ecd9fb;border:1px solid #5d4371;border-radius:13px;padding:16px;box-shadow:0 3px 0 #110e1c;gap:8px;min-height:145px}.setupChoice>span{color:var(--coral);font-size:9px;letter-spacing:.1em}.setupChoice strong{font-size:14px;color:#eedcfc}.setupChoice small{font-size:10px;line-height:1.6;color:#af96c6}.setupChoices .setupChoice.selected{background:#49365c;border-color:#ba95de;box-shadow:0 0 0 1px #ba95de}.setupStatus{color:#b5a0c8;font-size:11px;line-height:1.7}
.setupReview{background:#211b2d;border:1px solid #4b365a;border-radius:13px;padding:16px}.setupSectionTitle strong{color:#dcc1ed}.setupSectionTitle span{color:#aa8cbd}.setupReview[open] .setupSectionTitle{border-color:#4c355b}.questionItem{border-color:#4b355b;color:#e0c7ee;font-size:12px}.questionReview summary{color:#b491d2}.questionReview p{color:#c6a6dc}.questionReview p:last-child{background:#30233f;color:#c5a4d8}.questionItem button{background:#4a335d;color:#e7c9f6;font-size:10px;min-height:36px;padding:7px 11px}
.hostSetup #editor,.hostSetup #importPanel,.hostSetup #settingsPanel,#hostControls #editor,#hostControls #importPanel,#hostControls #settingsPanel{background:#272034;border:1px solid #564065;border-radius:14px;color:#d1b6e2;padding:16px;font-size:12px}.editor p,.editor small,.hostSetup .editor>p:first-child{color:#b99dcf;font-size:11px}.editor label{color:#c5a9d9}.editor details{border-color:#59416c}.editor .preview{background:#352444;color:#e3c5f3;border-color:#664b76}.previewOption{background:#48325a;color:#e4c8f5}.texFormatGuide{background:#2e223b;border-color:#574067}.texFormatGuide summary{color:#caabdf}.texFormatGuide pre{background:#1d1629;color:#ceb3e1}.texFormatGuide p,#importStatus{color:#bca0d0}
.hostStepFooter{border-color:#50375f;gap:12px}.hostStepFooter button{font-size:12px;min-height:46px}.hostStepFooter .ghost{color:#d8bae9;background:#3d2c4e}.hostLaunchSummary span{background:#3a294b;color:#d3b3ea;border-color:#68457b}.setupRosterRow{background:#2e223d;border-color:#553a67;color:#d6bce7}.setupRosterRow span{color:#badf7a}
.invite{background:#30233f;color:#dcc2ef;border-color:#634677;border-radius:15px;padding:22px}.invite h3{color:#ecd4fb}.invite p,.invite small{color:#b79aca}.inviteCode{color:var(--lime);font-size:40px}.invite img{background:#fff;border-radius:14px;padding:10px;width:190px;height:190px}
.setupStart{border-color:#50355f}.setupStart strong{color:#e5c8f5}.setupStart small{color:#b59ac7}.setupStart #startBtn{background:var(--lime);color:#253025;border:2px solid #151120;border-radius:12px;font-size:13px}
#hostResponseMonitor{position:static;background:#2a2339;color:#dbc3ee;border:1px solid #574067;border-radius:15px;padding:18px;margin-top:20px;box-shadow:none;order:initial}.responseTop .eyebrow{color:#b297cd}.responseTop strong{color:var(--lime);font-size:27px}.responseTop p{color:#bca1ce;font-size:10px}.liveDot{background:var(--lime)}.hostResponseMonitor progress{background:#493355;accent-color:var(--violet)}.hostResponseMonitor progress::-webkit-progress-bar{background:#493355}.hostResponseMonitor progress::-webkit-progress-value{background:var(--violet)}.hostResponseMonitor summary{color:#b79bcd;font-size:11px}.responseStudent{background:#3c2c4d;border-color:#644575;color:#dab8ef}.responseStudent small{color:#b897cc}.responseStudent.answered{background:#364433;border-color:#64794e}.responseHistory{border-color:#624272}.responseHistory span{background:#3c284c;color:#c2a0d7}.responseHistory .current{background:#695080;color:#efe0f8}.tabReviewCard{background:#50333c;border-color:#935d6c;color:#f1c5d1}
.hostDock{position:sticky;bottom:0;background:#242035f5;border:1px solid #5e4674;padding:13px;border-radius:16px;margin-top:15px;z-index:7;backdrop-filter:blur(12px);box-shadow:0 -6px 18px #17112666;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#hostFlowActions{display:flex;flex:1;gap:8px;flex-wrap:wrap}#hostFlowActions button{flex:1;min-width:180px;font-size:12px;min-height:46px}#hostTimerGroup{background:none;border:0;padding:0;flex:0 1 auto}#hostTimerGroup>h4,#hostTimerGroup>p{display:none}#hostTimerGroup>div{display:flex;gap:7px}#hostTimerGroup button{font-size:10px;padding:10px 12px;min-height:44px}
#hostControls{background:#292036;border:1px solid #5a3c6d;border-radius:15px;padding:18px;order:initial}#hostControls .actionbar{display:none}.hostUpcomingTiming,.hostLibrarySection{background:#2e223d;border-color:#5c4070;color:#dcc1ed}.hostUpcomingTiming h4{color:#e3c6f4}.hostUpcomingTiming p{color:#b598c8}.hostLibrarySection summary{color:#d8b9ee}.hostLibrarySection small{color:#ac8cc3}.hostLiveHeading{margin-bottom:15px}.hostLiveHeading .eyebrow{color:#bb98d9}.hostLiveHeading #focusBtn{font-size:10px}.focus-mode #appShell{display:flex}.focus-mode #hostControls{display:block}
.decisionPanel{background:#e9ddff;border:1px solid #b392dd;color:#3b2a51;margin:20px 0}.decisionPanel h3,.decisionPanel p{color:#48335f}.betAmountPanel{background:#dac9f3;border-color:#ab8acc}.betAmountPanel label,.betAmountPanel #betRiskSummary{color:#533e6c}

/* A short stage change, driven only by a server-confirmed result. */
.revealDialog{color:#fff2e5;background:radial-gradient(ellipse at 50% 40%,#51346d,#1b182d 75%);border:1px solid #9874ad;border-radius:26px;padding:24px;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 30px);overflow:auto;box-shadow:0 30px 120px #000a;margin:auto}
.revealDialog::backdrop{background:#080815dc;backdrop-filter:blur(8px)}
.revealTop{display:flex;align-items:center;justify-content:space-between;gap:12px}.revealTop .eyebrow{font-size:8px;color:#baa1d1}.revealTop button{background:#443051;color:#e3c6f8;font-size:10px;border-color:#76518c;min-height:40px;padding:8px 12px;box-shadow:none}
.revealCopy{text-align:center;margin-top:20px}.revealLabel{color:var(--lime);font-size:8px;font-weight:800;letter-spacing:.18em}.revealCopy h2{color:#fff4e9;font-size:34px;line-height:1.1;letter-spacing:-1.2px;margin:12px 0}.revealCopy>strong{display:block;color:var(--lime);font-size:28px;font-weight:900;letter-spacing:-.5px}.revealCopy>strong[data-positive=false]{color:var(--coral)}.revealCopy p{color:#bfa5d4;font-size:11px;line-height:1.7;max-width:340px;margin:10px auto 0}
.revealTable{height:290px;position:relative;margin:23px 10px 15px}.revealFelt{position:absolute;inset:36px 42px;border:10px solid #7f5b97;border-radius:48%;background:radial-gradient(ellipse,#6d3c89,#392347);box-shadow:0 0 0 2px #b58ac8,0 8px 0 6px #130d24,inset 0 0 40px #20112b;display:flex;justify-content:center;align-items:center}.revealFelt:before{content:'';position:absolute;inset:11px;border:1px dashed #c48fd066;border-radius:48%}.revealFelt>span{position:absolute;top:15%;font-family:'Bricolage Grotesque',sans-serif;letter-spacing:.18em;font-size:20px;font-weight:900;color:#dab3e92a}.revealPot{display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1}.revealPot small{color:#d2a9e1;letter-spacing:.12em;font-size:7px}.revealPot strong{font-size:30px;color:var(--yellow);font-weight:900;line-height:1.1}
.illustratedChips{display:flex;margin-top:4px}.illustratedChips i{display:block;background:var(--lime);border:3px dashed #56673a;border-radius:50%;width:24px;height:24px;box-shadow:0 3px 0 #293924;margin-left:-7px}.illustratedChips i:nth-child(2){background:var(--coral);border-color:#924c46}.illustratedChips i:nth-child(3){background:var(--violet);border-color:#694b8a}
.revealSeat{position:absolute;transform:translate(-50%,-50%);width:88px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#e9d0f9;z-index:3}.revealAvatar{width:35px;height:35px;display:grid;place-items:center;border:3px solid #372442;border-radius:50%;outline:1px solid #9b77b0;font-size:11px;font-weight:900;color:#29203d;box-shadow:0 3px 0 #110d20}.revealSeat>span:nth-child(2){font-size:9px;font-weight:700;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#21182e;padding:3px 6px;border-radius:4px}.revealSeat>strong{font-size:11px;background:#261c32;border:1px solid #624777;padding:3px 8px;border-radius:5px;color:#cfb3e3}.revealSeat>strong.earned{color:var(--lime);border-color:#7d9460}.revealSeat.isMe .revealAvatar{outline:2px solid var(--lime)}
#revealCoins{position:absolute;inset:0;pointer-events:none;z-index:4}.revealFlyingChip{position:absolute;top:50%;left:50%;width:23px;height:23px;background:var(--yellow);border:3px dashed #8a6c3e;border-radius:50%;color:#4a3822;display:grid;place-items:center;font-size:12px;font-weight:900;opacity:0;box-shadow:0 2px 0 #594626;animation:revealChipFlight 1s cubic-bezier(.2,.65,.3,1) both}
@keyframes revealChipFlight{0%{opacity:0;transform:translate(calc(var(--from-x) - 11px),calc(var(--from-y) - 11px)) scale(.6) rotate(-80deg)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(calc(var(--to-x) - 11px),calc(var(--to-y) - 11px)) scale(1) rotate(100deg)}}
.revealFooter{text-align:center;font-size:9px;color:#937ba5;letter-spacing:.03em}.revealCountdown{height:3px;border-radius:2px;background:var(--violet);max-width:130px;margin:15px auto 0;transform-origin:left;animation:revealDuration 5.2s linear both}@keyframes revealDuration{to{transform:scaleX(0)}}
#toast{background:#e1d3f5;color:#2d233c;border:1px solid #ac8bca;box-shadow:0 8px 30px #09061755;bottom:100px;font-size:12px;border-radius:12px;z-index:60}

@media(min-width:1000px){.appScreen{padding-inline:12px}#screenPlay{max-width:850px}.playMeta{margin-top:8px;margin-bottom:25px}#questionCard{padding:33px}.questionContent{max-width:720px}#game #options button{min-height:88px;padding:19px}.bottomNav{margin-top:8px}.pokerTable{height:460px}.tableFelt{inset:65px 100px}.studentLobby{padding:42px}.lobbyChip{margin-top:8px}}
@media(max-width:760px){
 body>header{height:66px;padding:0 23px}.logo{font-size:27px}.logoMark{width:29px;height:29px;font-size:23px}main{padding:26px 23px 20px}body>footer{margin:8px 23px;padding:18px 0;font-size:7px;letter-spacing:.05em}
 #home{display:block;padding:0 0 12px}.arcadeHero{min-height:0;margin-bottom:25px}.arcadeHeroEyebrow{font-size:8px;letter-spacing:.17em}#home .pleyHeadline{margin:16px 0 10px}#home .pleyWordmark{font-size:100px;letter-spacing:-.085em}.arcadeHeroTagline{font-size:26px;margin:16px 0 8px;max-width:100%;letter-spacing:-1px}.arcadeHeroDescription{font-size:11px;line-height:1.7;margin-bottom:0;max-width:320px}.arcadeHeroArt{display:none}.homeConsole{padding:9px 9px 0;border-radius:21px;box-shadow:5px 6px 0 #0c0c1b}#home .panel{padding:20px 15px 17px}#home .panel h2{font-size:26px}#home .panel p{font-size:11px;margin-bottom:16px}.homeModeTabs button{font-size:11px;min-height:40px}#home label{margin-top:15px}#home input{min-height:48px}#home #joinBtn{margin:20px 0 12px;min-height:50px}#home .rules{padding:20px;margin-top:25px}.homeRulesToggle{padding:14px 0;font-size:9px}
 body[data-session=true]>header{height:56px;min-height:56px;flex-basis:56px;padding:0 19px;gap:10px}body[data-session=true]>main{padding:0 15px}#roomLabel{font-size:8px;letter-spacing:.04em}.headerBalance{font-size:12px;margin-left:0}.arenaTopline{font-size:8px;padding:12px 3px 8px;letter-spacing:.06em}.liveConnection{font-size:8px;gap:5px}.appViewport{padding-bottom:12px}.appScreen{padding:8px 2px 20px}.playMeta{gap:10px;margin:5px 0 18px}.playMeta .eyebrow{font-size:8px;letter-spacing:.12em}.playMeta h1,.screenHeading h1{font-size:29px;letter-spacing:-1.1px;margin-top:7px}.screenHeading{margin-top:7px;margin-bottom:22px}.screenHeading p{font-size:11px;margin-top:8px}
 #timerSlot .timerRow{min-width:72px;padding:8px 11px;border-radius:12px}#timerSlot #clockLabel{font-size:6px;max-width:70px}#timerSlot .clock{font-size:27px}#questionCard{padding:21px 17px;border-radius:19px;box-shadow:0 4px 0 #080815}#qCategoryDisplay{font-size:8px;letter-spacing:.1em}#questionText{font-size:21px;line-height:1.45;margin-top:12px;letter-spacing:-.4px}#questionCard .questionContent{margin-bottom:20px}.questionImage{max-height:180px}
 #game #options{grid-template-columns:1fr;gap:11px}#game #options button{font-size:15px;min-height:59px;padding:11px 13px;gap:11px;border-radius:11px;box-shadow:0 3px 0 #0b0b18}#game #options .answerLetter{width:29px;height:29px;min-width:29px;font-size:13px;border-radius:7px}#answerStatus{margin-top:18px;font-size:10px;line-height:1.6}#answerStatus[data-state=saved]{padding:9px 11px}.timeTrack{left:18px;right:18px;height:3px}
 .bottomNav{max-width:none;margin:0 -15px;width:calc(100% + 30px);border-radius:19px 19px 0 0;gap:8px;padding:7px 16px max(8px,env(safe-area-inset-bottom))}.bottomNav button{min-height:49px;font-size:9px;gap:4px}.bottomNav button svg{width:20px;height:20px}.roundRecap{padding:14px 13px;gap:9px;flex-wrap:wrap}.roundRecap>span{width:30px;height:30px;font-size:20px}.roundRecap strong{font-size:12px}.roundRecap p{font-size:10px}.roundRecap button{margin-left:39px;min-height:34px;font-size:9px;padding:7px 11px}.solutionDetails>summary{font-size:12px;padding:14px}.result h3{font-size:16px}.result{font-size:12px}#solutionSlot{padding:5px 16px 16px}
 .studentLobby{padding:30px 16px 23px;border-radius:19px}.studentLobby h2{font-size:25px}.studentLobby>p{font-size:11px}.lobbyChip{width:65px;height:65px;font-size:40px;border-width:7px}.lobbyFacts{gap:9px}.lobbyFacts>span{padding:13px 18px;font-size:8px}.lobbyFacts strong{font-size:23px}.lobbyFriends{margin:20px 0;font-size:10px}.studentLobby .stayNote{font-size:9px;margin-top:20px}
 #pokerHUD{padding:13px;border-radius:19px}.tableHeading .eyebrow{font-size:8px;letter-spacing:.1em}.tableHeading p{font-size:9px;max-width:190px}.tablePager button{padding:6px 9px;min-height:36px}.tablePager span{font-size:9px}.pokerTable{height:370px;display:block}.tableFelt{inset:65px 25px;border-width:9px;padding:20px 22px;border-radius:46%;box-shadow:0 0 0 2px #9c7bb5,0 0 0 5px #272035,0 10px 0 5px #111121,inset 0 0 40px #1b122d75}.tableFelt:before{inset:10px}.tableFelt:after{font-size:23px;top:17%}.tablePot strong{font-size:34px}.tablePot>span:first-child{font-size:7px}#potDetails{font-size:8px;max-width:165px}.tableSeats{display:block;position:absolute;inset:0}.pokerTable .tableSeat{width:78px;min-height:83px;padding:7px 4px!important;border-radius:10px!important;gap:2px}.seatAvatar{width:27px;height:27px;font-size:9px}.seatName{font-size:8px}.seatChips{font-size:12px}.seatStatus{font-size:7px}#myDashboard{padding:13px 11px;gap:8px}.myBalance strong{font-size:21px}.myBalance small{font-size:7px}#myDashboardName{font-size:11px}#myDashboardStatus{font-size:9px}.myBalance>span{font-size:8px}.returnToPlay{min-height:48px;font-size:12px}
 #liveLeaderboard{padding:20px 17px}#liveLeaderboard>h3{font-size:23px}.player{font-size:12px}.playerStats{font-size:9px}.hostRankRow{min-height:64px;padding:10px 0}.hostRankIdentity strong{font-size:12px}.hostRankIdentity small{font-size:9px}.hostRankChips{font-size:13px}.hostRankAvatar{width:28px;height:28px}.finalResults{padding:28px 17px}.finalResults h2{font-size:29px}
 .hostSetup{padding:18px 14px;border-radius:18px}.setupHeading h2{font-size:24px}.setupHeading p{font-size:10px}.setupCount{font-size:9px;padding:7px 9px}.hostSetupTabs button{font-size:10px;padding:8px 5px}.hostSetupTabs button span{display:none}.setupChoices{grid-template-columns:1fr;gap:9px}.setupChoices .setupChoice{min-height:0;display:grid;grid-template-columns:64px 1fr;gap:5px 9px;text-align:left;padding:13px}.setupChoice>span{grid-row:1/3;align-self:center;font-size:8px}.setupChoice strong{font-size:12px}.setupChoice small{font-size:9px;line-height:1.6}.setupStatus{font-size:10px}.setupReview{padding:13px}.setupSectionTitle strong{font-size:12px}.questionItem{font-size:11px}.setupStart #startBtn{width:100%;font-size:12px}.hostLaunchSummary{gap:6px}.hostLaunchSummary span{font-size:9px}.invite{padding:17px}.invite img{width:165px;height:165px}.hostStepFooter button{font-size:11px}
 #hostResponseMonitor{padding:15px;margin-top:17px}.responseTop strong{font-size:23px}.responseTop p{font-size:9px;max-width:110px}.responseTop .eyebrow{font-size:8px}.hostDock{padding:11px;gap:9px}#hostFlowActions{width:100%;flex-basis:100%}#hostFlowActions button{font-size:11px;min-height:44px}#hostTimerGroup{width:100%}#hostTimerGroup>div{justify-content:stretch}#hostTimerGroup button{flex:1;font-size:10px;min-height:40px}.moreActions button{font-size:10px}.roomDetailsSlot .top{padding:17px}.roomDetailsSlot .top h2{font-size:18px}#hostControls{padding:15px}.hostLiveHeading{flex-wrap:wrap}.hostLiveHeading #focusBtn{min-height:38px}.installCard{padding:15px}.installCard p{font-size:10px}
 .revealDialog{padding:17px;border-radius:21px;width:calc(100vw - 20px);max-height:calc(100dvh - 24px)}.revealCopy{margin-top:24px}.revealCopy h2{font-size:29px;letter-spacing:-1px}.revealCopy>strong{font-size:26px}.revealCopy p{font-size:10px;max-width:270px}.revealTable{height:280px;margin:24px 0 18px}.revealFelt{inset:38px 25px;border-width:8px}.revealSeat{width:73px}.revealSeat>span:nth-child(2){max-width:73px;font-size:8px}.revealSeat>strong{font-size:10px}.revealAvatar{width:32px;height:32px;font-size:10px}.revealPot strong{font-size:28px}.revealFelt>span{font-size:18px}.revealFooter{font-size:8px}
}
@media(max-width:380px){#home .pleyWordmark{font-size:85px}.arcadeHeroTagline{font-size:23px}.playMeta h1{font-size:25px}.playMeta{gap:6px}#questionText{font-size:19px}#questionCard{padding:19px 14px}#game #options button{font-size:14px;padding:10px;min-height:54px}.pokerTable{height:345px}.tableFelt{inset:62px 17px}.pokerTable .tableSeat{width:70px}.revealTable{height:245px}.revealCopy h2{font-size:25px}.revealCopy>strong{font-size:24px}}
@media(max-height:720px) and (max-width:760px){.arenaTopline{padding-top:8px;padding-bottom:4px}.playMeta{margin:2px 0 13px}.playMeta h1{font-size:26px}#questionCard{padding:17px 14px}#questionCard .questionContent{margin-bottom:16px}#questionText{font-size:19px;line-height:1.4}#game #options{gap:9px}#game #options button{min-height:53px;padding:10px 12px;font-size:14px}#answerStatus{margin-top:14px}.revealCopy{margin-top:14px}.revealTable{height:240px;margin:16px 0}.revealCopy h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.revealFlyingChip,.revealCountdown{display:none!important}.questionEnter{opacity:1;transform:none}}

#home .pleyWordmark{width:100%;min-height:0;justify-self:start;padding:0}
.arcadeHeroTagline{display:block}

body[data-ui]{--ink:#f6f3ec;--muted:#a7a6bf;--purple:#bda5ff;--line:#34334e;--surface:#222239;--bg:#151525}

/* Keep all four choices on the phone screen; long questions scroll in their own reading area. */
@media(max-width:760px){
 body[data-role=student][data-ruleset=equal-share][data-game-phase=answer]:not([data-long-options=true]) #screenPlay{height:100%;min-height:0;padding-bottom:8px;display:flex;flex-direction:column}
 body[data-role=student][data-ruleset=equal-share][data-game-phase=answer]:not([data-long-options=true]) #questionSlot{flex:1;min-height:0;display:flex}
 body[data-role=student][data-ruleset=equal-share][data-game-phase=answer]:not([data-long-options=true]) #questionCard{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 15px}
 body[data-role=student][data-ruleset=equal-share][data-game-phase=answer]:not([data-long-options=true]) #questionContent{flex:1;min-height:65px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9385bb #35334b;padding:0 4px 8px 0;margin-bottom:15px}
 body[data-role=student][data-ruleset=equal-share][data-game-phase=answer]:not([data-long-options=true]) #game #options{flex:0 0 auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 body[data-role=student][data-ruleset=equal-share][data-game-phase=answer]:not([data-long-options=true]) #game #options button{min-height:67px;padding:11px 9px;gap:8px;font-size:15px}
 body[data-role=student][data-ruleset=equal-share][data-game-phase=answer]:not([data-long-options=true]) #game #options .answerLetter{width:24px;height:26px;min-width:24px;font-size:12px}
 body[data-role=student][data-ruleset=equal-share][data-game-phase=answer] #answerStatus{font-size:10px;margin-top:15px;flex-shrink:0}
 body[data-role=student][data-game-phase=answer] .playMeta{flex-shrink:0}
 .scrollableQuestion{background:none;-webkit-mask-image:linear-gradient(#000 0%,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(#000 0%,#000 calc(100% - 12px),transparent 100%);padding-bottom:20px}
 .scrollableQuestion #qCategoryDisplay:after{content:'SCROLL TO READ ↓';font-size:6px;letter-spacing:.04em;margin-left:auto;color:#b6afca}
}

#pastQuestionSlot{padding:15px}#pastQuestionSlot #questionCard{box-shadow:none;border-radius:13px;padding:20px}
@media(max-width:760px){
 #screenTable .screenHeading{margin-bottom:16px}#screenTable .screenHeading p{display:none}
 #screenTable .pokerTable{height:clamp(250px,45dvh,370px)}#screenTable #myDashboard,#screenTable .returnToPlay{display:none}
 .revealTable{margin-bottom:32px}#pastQuestionSlot{padding:10px}#pastQuestionSlot #questionCard{padding:17px 13px}
}

#playHeading:focus{outline:none}

.hostDock{position:relative;bottom:auto;flex:0 0 auto;max-width:866px;width:100%;align-self:center;margin:0 0 12px;padding:12px;box-shadow:0 -8px 25px #11111e99}
#monitorSlot:not([hidden]){margin-bottom:18px}#monitorSlot #hostResponseMonitor{margin-top:0}
#hostSetup .setupHeading>div{display:none}#hostSetup .setupHeading{justify-content:flex-end;margin-bottom:12px}
#hostSetup .hostStepFooter{position:sticky;bottom:0;background:#242137;padding:13px 0 0;margin-top:16px;z-index:2}
@media(max-width:760px){.hostDock{margin:0 0 8px;border-radius:13px;padding:9px;gap:7px}#hostFlowActions button{min-height:42px}#hostTimerGroup button{min-height:36px;font-size:10px}.hostSetup .setupHeading{display:none}.hostSetupTabs{margin-bottom:18px}.hostSectionIntro{margin-bottom:14px}.hostSectionIntro h3{font-size:18px!important}.hostSectionIntro p{font-size:10px!important}.setupChoices .setupChoice{padding:12px;min-height:66px}.hostSetup .setupStatus{font-size:10px;margin:15px 0}.setupReview{margin:14px 0}}

.homeInstall{font-size:10px;min-height:36px;box-shadow:none;background:#29243c;color:#c9b7e8;border:1px solid #514466;border-radius:9px;padding:8px 12px}
body[data-session=true] .homeInstall{display:none}
.rankRow .gain,.rankRow .loss{background:transparent}
.focus-mode #questionText{font-size:clamp(24px,3vw,40px)}
@media(max-width:760px){.homeInstall{font-size:9px;min-height:34px;padding:7px 10px}.focus-mode #questionText{font-size:23px}}

/* Entry is a single compact form, sized to the available phone viewport. */
body[data-ui]:not([data-session=true]) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
}
body[data-ui]:not([data-session=true]) > header {
  flex: 0 0 64px;
  height: 64px;
  min-height: 64px;
  width: 100%;
  max-width: 468px;
  padding: 0 24px;
  margin: 0 auto;
  border: 0;
}
body[data-ui]:not([data-session=true]) > main {
  flex: 1;
  min-height: min-content;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 16px 24px 32px;
  margin: 0 auto;
}
#home { display: block; width: 100%; max-width: 420px; padding: 0; margin: 0; }
#home .homeConsole { padding: 8px; border-radius: 20px; box-shadow: 0 5px 0 #0d0d1c; }
#home .homeConsole::before { content: none; }
#home .homeModeTabs { margin: 0; }
#home .panel { padding: 12px 16px 8px; }
#home label { margin: 16px 0 8px; }
#home input { font-size: 16px; }
#home #joinBtn { margin: 24px 0 12px; justify-content: center; }
#home #createBtn { margin: 12px 0; justify-content: center; }
#home .hostPanel { min-height: 262px; }
.entryTitle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-height: 600px) {
  body[data-ui]:not([data-session=true]) > header { flex-basis: 52px; min-height: 52px; height: 52px; }
  body[data-ui]:not([data-session=true]) > main { padding-block: 8px 16px; }
  #home .panel { padding-top: 5px; }
  #home label { margin-top: 10px; }
  #home #joinBtn { margin-top: 16px; }
}

/* One result at a time: a quiet success state or the worked solution. */
body[data-role=student][data-game-phase=result] #playMeta { display: none; }
body[data-role=student][data-game-phase=result] #screenPlay { display: flex; flex-direction: column; min-height: 100%; padding-top: 14px; }
.studentResult { background: #faf7ee; color: #25233c; border-radius: 20px; padding: 24px; }
.studentResult h2 { color: #25233c; font-size: 24px; line-height: 1.4; letter-spacing: -.4px; margin: 0 0 22px; }
.studentResult #resultExplanation { font-size: 16px; line-height: 1.8; margin: 0; overflow-wrap: anywhere; }
.studentResult :focus { outline: none; }
body[data-result-view=correct] .studentResult, body[data-result-view=waiting] .studentResult { background: transparent; flex: 1; display: grid; place-items: center; text-align: center; padding: 24px 12px; }
#resultWait { max-width: 420px; }
#studentResultTitle { color: #faf7ee; font-size: clamp(28px, 7vw, 40px); line-height: 1.12; letter-spacing: -1px; margin: 24px 0 16px; }
#studentResultMessage { color: #c5bed8; font-size: 16px; line-height: 1.6; margin: 0; }
.resultSuccessIcon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--lime); color: #25233c; font-size: 38px; font-weight: 800; margin: 0 auto; }
@media(max-width:760px){ .studentResult { padding: 22px 19px; } .studentResult h2 { font-size: 22px; } .studentResult #resultExplanation { font-size: 15px; line-height: 1.75; } }

/* A slow rim light adds motion at the perimeter, leaving the reading area still. */
@property --question-edge-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
#questionCard {
  isolation: isolate;
  border-color: #444052;
  box-shadow: 0 5px 0 #030306, 0 0 28px #bda5ff0d, inset 0 1px 0 #ffffff05;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #questionCard::before, #questionCard::after {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  #questionCard::before {
    z-index: 2;
    background: conic-gradient(from var(--question-edge-angle, 0deg), transparent 0deg 32deg, #bda5ff22 60deg, #bda5ff 83deg, #fff6ff 90deg, #bda5ff55 102deg, transparent 130deg 220deg, #d3f66b55 250deg, #f5ffd5 266deg, #d3f66b66 280deg, transparent 310deg 360deg);
    animation: questionEdgeSweep 10s linear infinite;
  }
  #questionCard::after {
    z-index: -1;
    inset: -2px;
    padding: 2px;
    background: linear-gradient(135deg, #bda5ff77, transparent 42% 58%, #d3f66b66);
    filter: blur(8px);
    opacity: .5;
  }
}
@keyframes questionEdgeSweep { to { --question-edge-angle: 360deg; } }
body:not([data-game-phase=answer]) #questionCard::before,
body[data-play-state=paused] #questionCard::before,
body[data-answer-state=saved] #questionCard::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  #questionCard::before { animation: none; --question-edge-angle: 35deg; }
}

/* Compact game chrome reserves the screen for the current question. */
body[data-session=true] > header { gap: 18px; }
.headerStats { display: flex; align-items: center; gap: 16px; margin-left: auto; flex: 0 0 auto; }
.headerStat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 52px; }
.headerStat > small { color: #aaa3be; font-size: 7px; line-height: 1; letter-spacing: .12em; font-weight: 800; }
.headerStats #roomLabel { margin: 0; font-size: 12px; color: #e3deef; letter-spacing: .04em; white-space: nowrap; }
.headerStats #roomLabel::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 5px 2px 0; border-radius: 50%; background: var(--lime); }
.headerStats #roomLabel[data-connected=false]::before { background: var(--coral); }
.headerStats .headerBalance { margin: 0; font-size: 16px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.headerStats #timerSlot { min-width: 50px; padding: 6px 10px; background: #29263f; border: 1px solid #59506d; border-radius: 10px; gap: 2px; }
.headerStats #timerSlot .timerRow { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.headerStats #timerSlot .timerRow > div:first-child { gap: 0; }
.headerStats #timerSlot .clock { font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; }
.headerStats #clockLabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-compact-question=true] #playMeta, body[data-compact-question=true] #qCategoryDisplay { display: none; }
body[data-compact-question=true] .appViewport { padding-top: 8px; padding-bottom: 8px; }
body[data-compact-question=true] #screenPlay { padding-top: 0; }
body[data-compact-question=true] #questionText { margin-top: 0; }
#questionText[data-question-index]:not([data-question-index=''])::before { content: attr(data-question-index); display: inline-block; vertical-align: middle; margin: 0 9px 3px 0; padding: 4px 6px; border: 1px solid #8e7542; border-radius: 6px; background: #ffdb8317; color: var(--yellow); font: 800 11px/1.2 Manrope,system-ui,sans-serif; letter-spacing: .02em; white-space: nowrap; }
body[data-role=student] #answerStatus[data-state=ready] { display: none; }
.playBasics { color: #c5bed8; font-size: 13px; line-height: 1.7; margin: 12px 0 20px; }
.connectionAlert { flex: 0 0 auto; margin: 4px 0 8px; padding: 8px 12px; background: #3e3025; border: 1px solid #8b6c3d; border-radius: 8px; color: #ffe09a; font-size: 11px; }
#roomDetailsSlot .arenaTopline { padding: 12px 0; }
@media(max-width:760px){
 body[data-session=true] > header { gap: 10px; padding-inline: 15px; }
 body[data-session=true] > header .logo { font-size: 24px; gap: 7px; }
 body[data-session=true] > header .logoMark { width: 27px; height: 27px; font-size: 22px; }
 .headerStats { gap: 12px; }
 .headerStat { min-width: 45px; }
 .headerStats #roomLabel { font-size: 10px; }
 .headerStats .headerBalance { font-size: 14px; }
 .headerStats #timerSlot { min-width: 44px; padding: 5px 8px; }
 .headerStats #timerSlot .clock { font-size: 21px; }
}
@media(max-width:360px){
 body[data-session=true] > header .logo { font-size: 0; gap: 0; }
 .headerStats { gap: 9px; }
 .headerStats .headerBalance { font-size: 13px; }
}

/* Keep host preparation and live settings on the arcade's dark surfaces. */
#settingsPanel label:has(input[type="checkbox"]){background:#352840;border-color:#715783;color:#f0e6f7;accent-color:#d3f66b}
#settingsPanel input[type="checkbox"]{accent-color:#d3f66b;color-scheme:dark}
#settingsPanel #settingsStatus{background:#352840;border:1px solid #715783;color:#e0cdec;border-radius:10px;padding:12px}
#hostSetup .setupStart{background:#30233f;border-color:#715783;color:#f0e6f7}
#hostSetup .setupStart strong{color:#f0e6f7}
#hostSetup .setupStart small{color:#d4bedf}
#settingsPanel input:disabled{opacity:1;color:#cdbbd8;-webkit-text-fill-color:#cdbbd8}

/* Everyone learns from a reveal, including correct and unanswered players. */
body[data-result-view=correct] .studentResult,body[data-result-view=waiting] .studentResult{display:block}
body[data-result-view=correct] #resultWait,body[data-result-view=waiting] #resultWait{margin:0 auto 24px}
body[data-result-view=correct] #resultStudy,body[data-result-view=waiting] #resultStudy{width:100%;max-width:760px;margin:24px auto 0;padding:24px;border-radius:18px;background:#faf7ee;color:#25233c;text-align:left}