:root{--primary:#6553e8;--primary-dark:#4634bd;--cyan:#36c9c6;--success:#19a56f;--danger:#d63d55;--gold:#ffbf3f;--surface:#fff;--ink:#17203a;--muted:#68708a;--line:#e7e8f1;--soft:#f5f5fb;--shadow:0 20px 55px rgba(34,28,88,.13)}
html{scroll-behavior:smooth}body{background:radial-gradient(circle at 8% 10%,rgba(114,91,238,.09),transparent 24%),radial-gradient(circle at 90% 90%,rgba(54,201,198,.09),transparent 25%),#f6f7fb}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{box-shadow:0 5px 22px rgba(31,31,70,.05)}.topbar nav,.topbar nav form{display:flex;align-items:center;margin:0}.nav-link{border:0;background:transparent;color:var(--primary);font-weight:800;cursor:pointer;padding:8px}.btn{transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn.danger{color:#fff;background:var(--danger);border-color:var(--danger)}.light-btn{margin-top:20px;background:#fff;color:var(--primary-dark);border:0}.alert{margin-bottom:18px;border:1px solid transparent}.alert.success{background:#eaf9f1;color:#176b49;border-color:#bce8d0}.alert.error{background:#fff0f2;color:#a7273b;border-color:#ffc7d0}
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.action-card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px;color:var(--ink);box-shadow:0 8px 25px rgba(36,32,82,.06);transition:.18s ease}.action-card:hover{transform:translateY(-3px);border-color:#b9b1f7;box-shadow:0 15px 35px rgba(61,48,150,.12)}.action-card>span{grid-row:1/3;font-size:28px}.action-card b{font-size:15px}.action-card small{color:var(--muted);margin-top:3px}
.availability-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 19px;margin:14px 0;border-radius:16px;border:1px solid}.availability-panel>div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px}.availability-panel small{grid-column:2;color:var(--muted);margin-top:3px}.availability-panel.open{background:#edfbf5;border-color:#b8ead3}.availability-panel.closed{background:#fff7ed;border-color:#f4d5ad}.availability-dot{width:11px;height:11px;border-radius:50%;background:#e18c25;box-shadow:0 0 0 5px rgba(225,140,37,.12)}.availability-panel.open .availability-dot{background:var(--success);box-shadow:0 0 0 5px rgba(25,165,111,.12)}.report-link{background:#343048}.renew-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 19px;margin:14px 0 22px;background:#fff;border:1px dashed #b9b1e9;border-radius:16px}.renew-panel>div{display:flex;align-items:center;gap:12px}.renew-panel>div>span{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;background:#efecff;color:var(--primary);font-size:24px;font-weight:900}.renew-panel>div>div{display:flex;flex-direction:column;gap:3px}.renew-panel small{color:var(--muted)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-heading h2,.section-heading p{margin:0}.count-pill{padding:7px 11px;background:#ece9ff;color:var(--primary-dark);font-weight:900;border-radius:999px}.attempt-actions{display:flex;gap:8px}.table-scroll{overflow-x:auto}.attempts-panel table{width:100%;border-collapse:collapse;min-width:650px}.attempts-panel th,.attempts-panel td{padding:13px 10px 13px 8px;border-bottom:1px solid var(--line);text-align:left}.attempts-panel th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.attempts-panel td:first-child{display:flex;flex-direction:column;gap:3px}.attempts-panel td small{color:var(--muted)}.status-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}.status-badge.done{background:#e9f9f1;color:#147149}.status-badge.active{background:#fff5da;color:#8a5d00}
.history-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.history-card{display:flex;justify-content:space-between;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--soft)}.history-card:hover,.history-card.selected{border-color:var(--primary);background:#f0edff}.history-card>div{display:flex;flex-direction:column;gap:3px}.history-card>div:last-child{text-align:right}.history-card small{color:var(--muted)}
.game-page{overflow-x:hidden}.join-screen{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(140deg,#38248f,#6551dc 52%,#9b5de3)}.join-screen::before,.join-screen::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);animation:float-orb 10s ease-in-out infinite}.join-screen::before{width:430px;height:430px;left:-130px;top:-140px;background:rgba(58,226,209,.22)}.join-screen::after{width:360px;height:360px;right:-100px;bottom:-100px;background:rgba(255,190,77,.18);animation-delay:-4s}.game-top,.live-top{display:flex;align-items:center;justify-content:space-between}.sound-toggle,.fullscreen-btn{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.13);backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer}.join-card{animation:card-in .55s cubic-bezier(.2,.8,.2,1);border:1px solid rgba(255,255,255,.6)}.preview-badge{display:block;width:max-content;max-width:100%;margin:0 auto 18px;padding:7px 11px;border-radius:999px;background:#fff4ce;color:#805b00;font-size:11px;font-weight:900;letter-spacing:.08em}.form-error{min-height:22px;margin:10px 0 0;color:#b42318;font-weight:700}
.game-head{position:relative;z-index:2}.timers{justify-self:end;display:flex;align-items:center;gap:13px}.timers small{font-weight:900;color:var(--primary);white-space:nowrap}.timer{transition:transform .2s ease}.progress-track{height:6px;background:#e7e5f5;overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--primary));transition:width .45s ease}.question-stage{animation:question-in .38s ease}.answer{position:relative;overflow:hidden;transition:transform .16s ease,filter .2s ease,opacity .2s ease}.answer::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 45%);pointer-events:none}.answer:hover{transform:translateY(-4px) scale(1.005)}.answer.selected{animation:answer-pick .25s ease}.answer.correct{animation:answer-correct .55s ease}.answer.wrong{animation:answer-wrong .35s ease}
.result-screen{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(151,121,255,.55),transparent 35%),linear-gradient(145deg,#25186e,#6545d1)}.result-card{position:relative;z-index:2;animation:result-in .7s cubic-bezier(.16,1,.3,1)}.result-face{filter:drop-shadow(0 12px 22px rgba(0,0,0,.28));animation:trophy-pop .9s cubic-bezier(.2,1.4,.35,1)}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;left:var(--x);top:-20px;width:10px;height:18px;border-radius:2px;background:var(--color);animation:confetti-fall var(--duration) var(--delay) ease-in forwards}
.report-hero{padding-bottom:100px;background:radial-gradient(circle at 20% 15%,rgba(69,220,202,.24),transparent 23%),linear-gradient(145deg,#2c1d7e,#674ed8)}.live-top{margin-bottom:30px}.live-top>div{display:flex;gap:8px}.live-indicator{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.13);font-size:12px;font-weight:900;letter-spacing:.13em}.live-indicator i{width:8px;height:8px;background:#57e9a9;border-radius:50%;box-shadow:0 0 0 5px rgba(87,233,169,.17);animation:live-pulse 1.5s infinite}.live-content{max-width:1180px;margin:-65px auto 50px;padding:0 20px}.live-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:18px}.podium.has-update .podium-card{animation:podium-in .35s ease both}.live-page .leaderboard table{min-width:580px}.live-page .leaderboard tbody tr.is-new{animation:row-in .35s ease}.active-panel h2{margin-top:0}.active-player{padding:12px 0;border-bottom:1px solid var(--line)}.active-player>div:first-child{display:flex;justify-content:space-between;gap:10px}.active-player span{color:var(--muted);font-size:13px}.mini-progress{height:7px;margin-top:9px;background:#ececf3;border-radius:99px;overflow:hidden}.mini-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--primary));border-radius:inherit;transition:width .5s ease}
@keyframes float-orb{50%{transform:translate(40px,25px) scale(1.08)}}@keyframes card-in{from{opacity:0;transform:translateY(24px) scale(.98)}}@keyframes question-in{from{opacity:0;transform:translateY(15px)}}@keyframes answer-pick{50%{transform:scale(.97)}}@keyframes answer-correct{50%{filter:brightness(1.25);transform:scale(1.025)}}@keyframes answer-wrong{25%,75%{transform:translateX(-7px)}50%{transform:translateX(7px)}}@keyframes result-in{from{opacity:0;transform:translateY(30px) scale(.92)}}@keyframes trophy-pop{0%{opacity:0;transform:scale(.2) rotate(-20deg)}70%{transform:scale(1.15) rotate(5deg)}}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(var(--spin));opacity:.15}}@keyframes live-pulse{50%{opacity:.5;box-shadow:0 0 0 9px rgba(87,233,169,0)}}@keyframes podium-in{from{opacity:0;transform:translateY(14px)}}@keyframes row-in{from{opacity:0;transform:translateX(-8px)}}
@media(max-width:900px){.action-grid,.history-list{grid-template-columns:1fr}.live-grid{grid-template-columns:1fr}.availability-panel,.renew-panel{align-items:flex-start;flex-direction:column}.availability-panel form,.availability-panel .btn,.renew-panel form,.renew-panel .btn{width:100%}}
@media(max-width:760px){.timers{gap:8px}.timers small{font-size:11px}.game-top{align-items:flex-start}.sound-toggle{font-size:12px}.live-top{align-items:flex-start}.live-top>div{flex-direction:column}.live-page .podium{flex-direction:column}.live-page .podium-card{width:100%;order:initial}.section-heading{align-items:flex-start;flex-direction:column}.section-heading>.btn{width:100%}.history-card{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}