:root{
  --bg:#0b1018;--panel:#131b27;--panel2:#182230;--line:#2a3545;--text:#f7f8fb;--muted:#a9b3c3;
  --yellow:#ffd20a;--yellow2:#ffb703;--red:#e5260a;--red2:#ff472b;--blue:#0b4b92;--blue2:#176bb8;
  --green:#2dc66f;--danger:#ff5c5c;--shadow:0 22px 70px rgba(0,0,0,.38);--radius:22px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 12% 0,#17263c 0,transparent 33%),radial-gradient(circle at 95% 15%,#3b170d 0,transparent 27%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.hidden{display:none!important}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
.quizTopbar{height:74px;padding:0 max(20px,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(8,12,19,.83);backdrop-filter:blur(14px);position:sticky;top:0;z-index:40}.portalBrand img{height:34px;display:block}.quizBtn{border:0;border-radius:14px;padding:13px 20px;font-weight:800;letter-spacing:.01em;transition:.18s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.quizBtn:hover{transform:translateY(-1px)}.quizBtn.primary{background:linear-gradient(135deg,var(--yellow),var(--yellow2));color:#251a00;box-shadow:0 10px 28px rgba(255,183,3,.2)}.quizBtn.secondary{background:linear-gradient(135deg,var(--red2),var(--red));color:#fff}.quizBtn.ghost{background:#151d2a;color:#eef3fb;border:1px solid #314052}.quizBtn.danger{background:#401d25;color:#ffb5bd;border:1px solid #6c2734}.quizBtn.small{padding:9px 13px;border-radius:11px;font-size:.87rem}.quizBtn.full{width:100%;grid-column:1/-1}.quizBtn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.quizHome,.quizRoomView{width:min(1280px,calc(100% - 32px));margin:0 auto}.quizHero{min-height:620px;display:grid;grid-template-columns:1.25fr .75fr;gap:46px;align-items:center;padding:70px 0;position:relative}.quizGlow{position:absolute;width:420px;height:420px;background:rgba(255,210,10,.12);filter:blur(90px);border-radius:50%;left:-140px;top:80px;pointer-events:none}.quizHeroCopy{position:relative;z-index:1}.quizEyebrow,.quizSectionHead span,.quizModalTitle span{display:block;font-size:.77rem;letter-spacing:.19em;font-weight:900;color:var(--yellow);text-transform:uppercase}.quizLogo{width:min(560px,100%);height:250px;object-fit:contain;object-position:left center;margin:12px 0 6px}.quizHero h1{font-size:clamp(2rem,4vw,4rem);line-height:.98;margin:8px 0 20px;max-width:800px}.quizHero p{font-size:1.07rem;line-height:1.72;color:#c6ced9;max-width:760px}.quizHeroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.catalogSummary{margin-top:18px;color:#aeb8c7;font-size:.92rem}.catalogSummary strong{color:#fff}.quizHow{background:linear-gradient(160deg,rgba(27,38,55,.95),rgba(16,23,34,.95));border:1px solid rgba(255,210,10,.22);border-radius:30px;padding:34px;box-shadow:var(--shadow);position:relative;overflow:hidden}.quizHow:before{content:"";position:absolute;inset:0 0 auto auto;width:150px;height:150px;background:linear-gradient(135deg,rgba(229,38,10,.22),transparent);border-radius:0 0 0 100%}.shieldBadge{width:120px;height:120px;border-radius:28px;background:#fff;display:grid;place-items:center;padding:9px;box-shadow:0 10px 35px rgba(0,0,0,.28);transform:rotate(-3deg)}.shieldBadge img{width:100%;height:100%;object-fit:contain}.quizHow h2{font-size:1.65rem;margin:24px 0 16px}.quizHow ol{padding-left:22px;margin:0;color:#bac5d5;line-height:1.85}.quizHow li::marker{color:var(--yellow);font-weight:900}
.quizSection{padding:58px 0}.quizSectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}.quizSectionHead.centered{text-align:center;justify-content:center}.quizSectionHead h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:5px 0 0}.quizSectionHead p{color:var(--muted);margin:8px 0 0}.categoryCards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.categoryCards article{background:linear-gradient(160deg,#15202f,#111923);border:1px solid #29384a;border-radius:22px;padding:24px;min-height:238px;position:relative;overflow:hidden}.categoryCards article:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-35px;bottom:-35px;background:rgba(255,210,10,.08)}.catIcon{font-size:2.2rem}.categoryCards h3{font-size:1.18rem;margin:14px 0 9px}.categoryCards p{color:#aab5c4;line-height:1.55;font-size:.92rem}.categoryCards b{position:absolute;bottom:20px;color:var(--yellow);font-size:.85rem}.quizRoomList{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.quizPublicCard{background:#121b28;border:1px solid #29384a;border-radius:18px;padding:20px}.quizPublicCard .roomCode{color:var(--yellow);font-weight:900;letter-spacing:.1em}.quizPublicCard h3{margin:8px 0 12px}.publicMeta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.publicMeta span,.tag,.phasePill{font-size:.74rem;font-weight:800;border-radius:999px;padding:6px 9px;background:#202c3b;color:#cdd6e4;border:1px solid #304157}.quizEmpty{padding:24px;border:1px dashed #364456;border-radius:16px;color:#8997aa;text-align:center;grid-column:1/-1}
.quizModal{position:fixed;inset:0;background:rgba(3,6,10,.8);backdrop-filter:blur(8px);z-index:90;display:grid;place-items:center;padding:22px;overflow:auto}.quizModalPanel{width:min(760px,100%);background:#111a26;border:1px solid #334153;border-radius:26px;padding:28px;box-shadow:var(--shadow);position:relative;max-height:calc(100vh - 44px);overflow:auto}.quizModalPanel.wide{width:min(920px,100%)}.quizModalPanel.narrow{width:min(520px,100%)}.quizModalClose{position:absolute;right:18px;top:16px;border:0;background:#202c3a;color:#fff;border-radius:50%;width:38px;height:38px;font-size:1.45rem}.quizModalTitle{display:flex;align-items:center;gap:17px;margin-bottom:23px}.quizModalTitle img{width:74px;height:74px;object-fit:contain;background:#fff;border-radius:17px;padding:5px}.quizModalTitle h2{margin:3px 0 0}.quizFormGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.quizFormGrid.one{grid-template-columns:1fr}.quizFormGrid label{display:flex;flex-direction:column;gap:7px;font-weight:750;font-size:.9rem}.quizFormGrid label small{font-weight:500;color:#8491a2}.quizFormGrid input,.quizFormGrid select{width:100%;background:#0c131d;border:1px solid #334357;color:#fff;border-radius:12px;padding:12px 13px;outline:none}.quizFormGrid input:focus,.quizFormGrid select:focus{border-color:#e4ba00;box-shadow:0 0 0 3px rgba(255,210,10,.1)}.quizFormGrid .full,.categoryField{grid-column:1/-1}.quizCheck{flex-direction:row!important;align-items:center!important}.quizCheck input{width:auto}.categoryField{border:1px solid #334153;border-radius:16px;padding:15px}.categoryField legend{padding:0 8px;color:#dce3ed;font-weight:800}.categoryChecks{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.categoryCheck{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:9px!important;padding:10px 12px;background:#17212e;border-radius:12px}.categoryCheck input{width:auto}.categoryCheck small{color:var(--yellow)!important}.categoryActions{margin-top:10px;display:flex;gap:14px}.linkBtn{border:0;background:transparent;color:#ffd84a;padding:0;font-weight:800}.quizCodeInput{text-transform:uppercase;letter-spacing:.15em;font-weight:900}
.quizRoomView{padding:26px 0 70px}.roomHeader{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.roomHeaderLeft{display:flex;align-items:center;gap:16px}.roomHeaderLeft img{width:105px;height:72px;object-fit:contain;background:#101722;border-radius:16px}.roomHeader h1{font-size:1.45rem;margin:0}.roomHeader p{margin:5px 0 0;color:#99a7b9}.hostActions{display:flex;gap:9px;flex-wrap:wrap}.roomGrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.quizPanel{background:linear-gradient(165deg,#131d2a,#101720);border:1px solid #2c394a;border-radius:22px;padding:22px;box-shadow:0 12px 38px rgba(0,0,0,.2)}.panelTitle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.panelTitle h3{margin:0}.subtle{color:#91a0b4}.settingGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.settingGrid label{display:flex;flex-direction:column;gap:6px;color:#bac5d3;font-size:.84rem;font-weight:700}.settingGrid input,.settingGrid select,.lobbyIdentity input,.lobbyIdentity select{background:#0d141e;border:1px solid #324052;color:#fff;border-radius:10px;padding:10px}.lobbyIdentity{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-bottom:18px}.playerGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.playerCard{display:flex;align-items:center;gap:10px;background:#182332;border:1px solid #2c3a4c;border-radius:14px;padding:10px}.playerCard.teamA{border-left:4px solid var(--red2)}.playerCard.teamB{border-left:4px solid #2b7fe0}.playerAvatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#27364a;color:#fff;font-weight:900}.playerCard span{min-width:0;flex:1}.playerCard b,.playerCard small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playerCard small{font-size:.72rem;color:#8795a7;margin-top:2px}.playerCard strong{font-size:.82rem;color:var(--yellow)}.lobbyFooter{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}.lobbyFooter .statusText{color:#99a6b7;font-size:.9rem}
.gameStage{min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.stageGlow{position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(255,210,10,.08);filter:blur(60px)}.stageInner{width:min(850px,100%);position:relative;z-index:1}.phaseTop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.phasePill{background:#271f07;color:#ffe37a;border-color:#604e0a}.scoreBadge{background:#203045;border:1px solid #36506d;border-radius:999px;padding:7px 11px;font-weight:900;color:#dce9fb}.countdownNumber{font-size:clamp(5rem,16vw,11rem);line-height:1;font-weight:1000;color:var(--yellow);text-shadow:0 10px 35px rgba(255,183,3,.25)}.countdownLabel{font-size:1.15rem;color:#a8b4c5;margin-top:10px}.questionCategory{font-size:.78rem;color:var(--yellow);font-weight:900;letter-spacing:.12em;text-transform:uppercase}.questionText{font-size:clamp(1.7rem,4vw,3.25rem);line-height:1.12;margin:14px auto 22px;max-width:850px}.questionImageWrap{width:min(520px,100%);height:250px;margin:0 auto 20px;padding:14px;background:#fff;border-radius:20px;box-shadow:0 12px 35px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}.questionImageWrap img{max-width:100%;max-height:100%;object-fit:contain}.bigTimer{font-size:2.15rem;font-weight:1000;color:#fff;margin:8px 0}.timerBar{height:9px;border-radius:99px;background:#263344;overflow:hidden;margin:0 auto 22px;max-width:620px}.timerBar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--yellow),var(--red2));transition:width .1s linear}.choiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choiceBtn{min-height:84px;border:1px solid #39506b;background:#17283b;color:#fff;border-radius:16px;padding:15px;text-align:left;font-size:1rem;font-weight:850;transition:.15s}.choiceBtn:nth-child(2){background:#3b1b21;border-color:#77323d}.choiceBtn:nth-child(3){background:#263313;border-color:#4d6722}.choiceBtn:nth-child(4){background:#2e2041;border-color:#5a397e}.choiceBtn:hover{transform:translateY(-2px);filter:brightness(1.12)}.answerForm{display:flex;gap:10px;max-width:680px;margin:0 auto}.answerInput{flex:1;min-width:0;background:#0b121c;border:2px solid #3b4a5c;color:#fff;border-radius:14px;padding:14px 16px;font-size:1.05rem;outline:none}.answerInput:focus{border-color:var(--yellow)}.answerFeedback{max-width:620px;margin:14px auto 0;padding:15px;border-radius:14px;background:#182536;border:1px solid #31445b}.answerFeedback.ok{border-color:#27744a;background:#132b21}.answerFeedback.bad{border-color:#6d353b;background:#2e171a}.answerFeedback b{font-size:1.45rem;margin-right:8px}.answerStatusList{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:18px}.answerStatusList span{padding:6px 9px;background:#1c2735;border-radius:999px;color:#8997a9;font-size:.75rem}.answerStatusList span.done{color:#bff1d4;background:#173426}.revealAnswer{font-size:clamp(2rem,5vw,4.2rem);font-weight:1000;color:var(--yellow);margin:16px 0 8px}.sourceRef{color:#8796a9;font-size:.82rem;margin:6px 0 18px}.answerResults{display:grid;gap:8px;max-width:680px;margin:18px auto 0;text-align:left}.answerResult{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#182432}.answerResult.ok{border-left:4px solid var(--green)}.answerResult.bad{border-left:4px solid var(--danger)}.answerResult span b,.answerResult span small{display:block}.answerResult span small{color:#8fa0b3;margin-top:2px}.answerResult>strong{color:var(--yellow)}.finalHero{text-align:center;padding:50px 25px}.trophy{font-size:5rem}.winnerName{font-size:clamp(2rem,5vw,4rem);font-weight:1000;color:var(--yellow);margin:10px 0}.teamScoreCards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}.teamScore{padding:13px;border-radius:14px;background:#182432;border:1px solid #324155}.teamScore.a{border-left:4px solid var(--red2)}.teamScore.b{border-left:4px solid #2b7fe0}.teamScore small,.teamScore strong,.teamScore span{display:block}.teamScore strong{font-size:1.6rem}.ranking{display:grid;gap:7px}.rankRow{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:8px;background:#182432;border-radius:12px;padding:9px}.rankPos{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#243449;color:#dfe9f6}.rankRow:first-child .rankPos{background:var(--yellow);color:#1a1600}.historyList{display:grid;gap:8px}.historyItem{padding:10px 11px;background:#172330;border-radius:11px}.historyItem b,.historyItem small{display:block}.historyItem small{color:#8797aa;margin-top:3px}.categoryMini{display:flex;gap:6px;flex-wrap:wrap}.categoryMini span{font-size:.73rem;background:#1d2938;border:1px solid #304156;border-radius:999px;padding:5px 8px;color:#aab7c8}
.quizToast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);z-index:130;padding:12px 18px;border-radius:12px;background:#173025;color:#d9f7e6;border:1px solid #2a714a;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 12px 40px rgba(0,0,0,.3);max-width:min(520px,calc(100% - 30px));text-align:center}.quizToast.show{opacity:1;transform:translate(-50%,0)}.quizToast.error{background:#351a1d;border-color:#79343b;color:#ffd8dc}
@media(max-width:980px){.quizHero{grid-template-columns:1fr;padding:48px 0}.quizHow{max-width:720px}.categoryCards{grid-template-columns:1fr 1fr}.quizRoomList{grid-template-columns:1fr 1fr}.roomGrid{grid-template-columns:1fr}.roomGrid aside{order:-1}.roomHeader{align-items:flex-start}.roomHeaderLeft img{width:88px}.gameStage{min-height:520px}}
@media(max-width:680px){.quizHome,.quizRoomView{width:min(100% - 20px,1280px)}.quizTopbar{height:64px;padding:0 12px}.portalBrand img{height:28px}.quizHero{padding:28px 0 36px;gap:25px}.quizLogo{height:190px}.quizHero h1{font-size:2.25rem}.quizHow{padding:24px}.categoryCards,.quizRoomList{grid-template-columns:1fr}.quizSection{padding:36px 0}.quizSectionHead{align-items:flex-start}.quizFormGrid{grid-template-columns:1fr}.quizFormGrid .full,.categoryField{grid-column:auto}.categoryChecks{grid-template-columns:1fr}.quizModal{padding:10px}.quizModalPanel{padding:20px 16px;border-radius:20px}.quizModalTitle{padding-right:35px}.quizModalTitle img{width:58px;height:58px}.roomHeader{flex-direction:column}.roomHeaderLeft{width:100%}.roomHeaderLeft img{width:78px;height:62px}.hostActions{width:100%}.hostActions .quizBtn{flex:1}.quizPanel{padding:15px;border-radius:18px}.settingGrid,.playerGrid,.teamScoreCards,.choiceGrid{grid-template-columns:1fr}.lobbyIdentity{grid-template-columns:1fr}.lobbyFooter{align-items:stretch;flex-direction:column}.lobbyFooter .quizBtn{width:100%}.phaseTop{align-items:flex-start}.questionText{font-size:1.65rem}.questionImageWrap{height:210px}.answerForm{flex-direction:column}.answerForm .quizBtn{width:100%}.gameStage{min-height:560px}.answerResult{grid-template-columns:30px 1fr auto}.quizHow ol{padding-left:19px}}
