:root{color-scheme:dark;--bg:#090c1e;--panel:#171b35;--panel2:#1e2547;--line:#394166;--ink:#f6f6ff;--muted:#b2bddf;--gold:#ffcc56;--teal:#4ce1c9;--purple:#a78cff;--pink:#f57ba7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{position:relative}.glow-background{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 650px 420px at 78% 8%,#29206466,transparent),radial-gradient(ellipse 630px 490px at 9% 70%,#102f4d88,transparent);z-index:-1}button,input,select{font:inherit}button{cursor:pointer;border:0;font-weight:800}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:hover:not(:disabled){filter:brightness(1.10)}.bar{height:84px;max-width:1200px;margin:auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between}.brand img{display:block;width:min(290px,57vw);height:65px;object-fit:contain;object-position:left}.quiet,.ghost{color:var(--ink);border:1px solid var(--line);background:#252947;padding:12px 17px;border-radius:12px}.quiet{background:transparent}.primary{background:linear-gradient(125deg,var(--gold),#ff9f52);color:#211722;padding:15px 26px;border-radius:13px;box-shadow:0 5px 20px #ffa04225}.secondary{background:#394781;color:var(--ink);padding:14px 20px;border-radius:13px}.danger{background:#682f49;color:#fff;border-radius:12px;padding:12px 16px}.wide{width:100%}main{max-width:1160px;padding:18px 24px 70px;margin:0 auto}.center{text-align:center}.hero{max-width:650px;margin:6vh auto 20px}.hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.06;letter-spacing:-.04em;margin:.3em 0}.hero p{color:var(--muted);font-size:1.18rem}.kicker{color:var(--teal);font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:900}.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}.action{padding:25px 20px;min-height:160px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(145deg,#25294d,#151a35);text-align:left;color:var(--ink);display:flex;flex-direction:column;gap:10px}.action strong{font-size:1.27rem}.action span{color:var(--muted);font-size:.95rem;font-weight:500}.action .sym{font-size:1.75rem}.panel{background:linear-gradient(135deg,#171d39ed,#11162eeb);border:1px solid var(--line);border-radius:22px;padding:24px;margin:16px 0}.panel h2,.panel h3{margin:0 0 8px}.panel p{color:var(--muted)}.pagehead{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:10px 0 22px}.pagehead h1{margin:0;font-size:clamp(1.8rem,4vw,2.6rem)}.pagehead p{color:var(--muted);margin:6px 0 0}.modegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.mode{border:2px solid #394166;background:#1c2445;color:#f5f5ff;border-radius:15px;padding:17px;text-align:left;min-height:107px}.mode strong{display:block;margin:6px 0;font-size:1.08rem}.mode small{font-size:.85rem;line-height:1.3;display:block;font-weight:450;color:var(--muted)}.mode.selected{border-color:var(--gold);background:#3a3149;box-shadow:0 0 0 1px var(--gold)}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:flex;flex-direction:column;gap:6px;color:var(--ink);font-weight:750;font-size:.9rem}.field input,.field select{width:100%;padding:13px;border-radius:10px;border:1px solid var(--line);color:var(--ink);background:var(--panel2)}.field select option{background:#191b35}.switchrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.switchrow label{display:flex;align-items:center;gap:7px;font-weight:750}.switchrow input{accent-color:#ffcc56;width:18px;height:18px}.footactions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin:19px 0}.subtle{color:var(--muted);font-size:.9rem}.playerrow{display:grid;grid-template-columns:1fr minmax(140px,190px) auto;gap:10px;margin:9px 0}.playerrow button{padding:10px}.pill{border-radius:20px;background:#2b355a;color:#fff;padding:7px 13px;font-size:.85rem;font-weight:800;display:inline-block}.pill.gold{background:#75572c;color:#fff0bb}.tabs{display:flex;gap:7px;flex-wrap:wrap}.tabs button{border:1px solid var(--line);background:#202644;color:var(--ink);padding:9px 15px;border-radius:11px}.tabs button.selected{border-color:var(--gold);background:#484062}.lobbycode{font-size:clamp(2.3rem,6vw,4rem);font-weight:950;letter-spacing:.13em;color:var(--gold);margin:10px 0}.roster{display:flex;gap:10px;flex-wrap:wrap}.roster span{background:#293256;padding:9px 13px;border-radius:14px}.arena{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px}.arena-main{min-width:0}.arena-side .panel{margin:0 0 14px}.score-row{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#222a49;padding:12px;border-radius:11px;margin:8px 0}.score-row.active{border:1px solid var(--gold)}.score-row b{font-size:1.1rem}.score-row small{color:var(--muted)}.game-title{font-size:clamp(1.65rem,3.5vw,2.3rem);margin:5px 0 15px}.battle-header{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.wheelbox{width:min(400px,80vw);height:min(400px,80vw);margin:0 auto;position:relative}.wheel{width:100%;height:100%;border-radius:50%;border:10px solid #d9d6f9;box-shadow:0 0 0 8px #353861,0 15px 55px #0007;transition:transform 1.25s cubic-bezier(.12,.78,.3,1);position:relative;overflow:hidden}.wheel-label{position:absolute;left:50%;top:50%;transform-origin:0 0;font-size:19px;text-shadow:0 2px 6px #000;font-weight:900}.wheelpointer{position:absolute;z-index:4;left:50%;top:-18px;transform:translateX(-50%);width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:35px solid var(--gold);filter:drop-shadow(0 2px 4px #000)}.wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;border:5px solid #b8b9ef;border-radius:50%;background:#171c39;min-height:94px;min-width:94px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#fff;box-shadow:0 5px 20px #0008}.wheel-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:22px 0}.legend{display:inline-flex;padding:5px 9px;border:1px solid #545879;border-radius:30px;font-size:.76rem;align-items:center;gap:7px}.dot{width:9px;height:9px;border-radius:50%}.question{font-size:clamp(1.4rem,3vw,2rem);line-height:1.25;max-width:750px;margin:17px auto}.qphoto{max-width:min(520px,100%);max-height:300px;object-fit:contain;margin:4px auto 16px;display:block;border-radius:12px;background:#fff;border:3px solid #5e658e}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:15px}.choice{min-height:70px;background:#252e53;border:2px solid #4e5880;color:#fff;border-radius:14px;padding:14px;font-size:1.05rem;line-height:1.28;text-align:left}.choice.active{background:#504776;border-color:var(--gold)}.choice.correct{background:#195b4e;border-color:#5cffe1}.choice.wrong{background:#653448;border-color:#ff92a6}.count{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:900;color:var(--gold)}.explain{background:#23364a;border:1px solid #557878;padding:17px;border-radius:14px;margin-top:15px}.explain h3{color:var(--teal)}.phasehead{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.phasehead h2{margin:0}.challenge{border:2px solid #7064aa;background:#25264a;padding:18px;border-radius:17px}.challenge h2{color:var(--gold)}.challenge li{margin:7px 0}.champ{background:linear-gradient(90deg,#725123,#47345d);border:1px solid #d5ad6c;border-radius:12px;padding:12px 18px;font-weight:900;text-align:center;margin:12px 0}.trophies{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}.trophy{font-size:1.1rem;opacity:.24;filter:grayscale(1)}.trophy.won{opacity:1;filter:none}.note{font-size:.87rem;color:var(--muted)}.board{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:14px}.winner{font-size:clamp(2.2rem,6vw,4rem);color:var(--gold);line-height:1.12}.smallbuttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:12px;background:#51412d;color:#fff;font-weight:750;z-index:30;display:none;box-shadow:0 7px 25px #0007}.toast.show{display:block}.loading{display:inline-block;width:18px;height:18px;border:3px solid #777;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:850px){.modegrid{grid-template-columns:repeat(2,minmax(0,1fr))}.arena{grid-template-columns:1fr}.arena-side{display:grid;grid-template-columns:1fr 1fr;gap:10px}.arena-side .panel{margin:0}.bar{height:78px}}@media(max-width:600px){main{padding:10px 13px 45px}.bar{padding:8px 14px}.brand img{height:60px}.actions,.formgrid,.modegrid{grid-template-columns:1fr}.action{min-height:113px;padding:18px}.panel{padding:17px;border-radius:17px}.playerrow{grid-template-columns:1fr 130px auto}.playerrow input{min-width:0}.choices{grid-template-columns:1fr}.arena-side{grid-template-columns:1fr}.phasehead .count{font-size:1.5rem}.pagehead{margin:0 0 14px}.hero{margin:20px auto}.hero h1{font-size:2.35rem}.wheelbox{width:min(310px,75vw);height:min(310px,75vw)}.wheel-center{min-height:78px;min-width:78px;font-size:1rem}.choice{min-height:59px}}

/* BrainBrawl gameplay polish: uses existing official BrainBrawl assets. */
:root{--gold:#ffbe50;--teal:#4fe8f4;--line:#3a4d77;--panel:#141e35;--panel2:#202b48}
.glow-background{background:radial-gradient(ellipse 780px 500px at 90% 12%,#144c7266,transparent 76%),radial-gradient(ellipse 850px 590px at 6% 85%,#3a193d5c,transparent 78%),linear-gradient(145deg,#090d1d,#0b1224 56%,#080a17)}
main{position:relative;isolation:isolate}
main:has(.modegrid)::before{content:"";position:absolute;pointer-events:none;z-index:-1;top:12px;right:1vw;width:min(35vw,360px);aspect-ratio:1;background:url('images/brainbrawl-icon-512.png') center/contain no-repeat;opacity:.065;filter:drop-shadow(0 0 35px #24bce7)}
.pagehead h1{letter-spacing:-.025em;text-shadow:0 2px 18px #00cfff25}
.panel{background:linear-gradient(140deg,#192442ee,#11172bed);border-color:#3e5079;box-shadow:0 14px 34px #0002,inset 0 1px #ffffff10}
.mode{position:relative;border-color:#374c76;background:linear-gradient(145deg,#25385a,#151d37);transition:transform .2s,border-color .2s,box-shadow .2s}
.mode:hover:not(:disabled){transform:translateY(-2px);border-color:#30c7e0;box-shadow:0 10px 22px #0003}
.mode.selected{background:linear-gradient(140deg,#4f3b39,#242643);border-color:#ffbe50;box-shadow:0 0 0 1px #ffbe50aa,0 0 28px #ff971d25}
.mode>span{font-size:1.65rem;filter:drop-shadow(0 3px 9px #0005)}
.primary{background:linear-gradient(130deg,#ffca54,#ff9347);box-shadow:0 7px 28px #ffa52a2a;transition:transform .2s,box-shadow .2s}
.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 9px 25px #ff9b3a55}
.field select,.field input{border-color:#516387;background:#1c2a45}
.scoreboard h3{letter-spacing:.01em}
.trophygroup{padding:12px 0;border-top:1px solid #ffffff13}
.trophyheader{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.91rem}
.trophyheader strong{font-variant-numeric:tabular-nums;color:var(--gold)}
.trophy-meter{height:6px;background:#222c4e;border-radius:50px;overflow:hidden;margin:9px 0 12px}
.trophy-meter span{display:block;height:100%;background:linear-gradient(90deg,#11c7e3,#ffc051);border-radius:50px;transition:width .3s}
.trophies{gap:7px;margin:0 0 5px}
.trophy{font-size:1.26rem;opacity:.25;filter:grayscale(1)}
.trophy.won{opacity:1;filter:none;filter:drop-shadow(0 0 6px #ffd18475)}
.trophygoal{color:#c7d9f0;font-size:.74rem;line-height:1.4;margin-top:6px}
.wheelbox{width:min(440px,80vw);height:min(440px,80vw);filter:drop-shadow(0 12px 26px #0009)}
.wheel{border:12px solid #c9e8fa;box-shadow:0 0 0 7px #1c3a65,0 0 0 12px #cc8b48,0 0 45px #118dc547,0 22px 50px #000a;transition:transform 1.25s cubic-bezier(.10,.76,.22,1);will-change:transform}
.wheel::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#06152d14 20%,transparent 34%,#ffffff18 95%),repeating-conic-gradient(from 0deg,#0000000e 0deg 1deg,transparent 1deg 40deg);pointer-events:none}
.wheel-symbol{position:absolute;transform:translate(-50%,-50%);font-size:clamp(1.3rem,3.1vw,2.5rem);z-index:1;filter:drop-shadow(0 1px 3px #071022dd);text-shadow:0 2px 4px #0007;user-select:none}
.wheel-center{height:108px;width:108px;min-height:0;min-width:0;border:5px solid #a7dafa;background:radial-gradient(circle,#23324b,#080e20);box-shadow:0 0 0 5px #14223c,0 6px 20px #000b}
.wheel-center img{width:87%;height:87%;object-fit:contain;filter:drop-shadow(0 1px 8px #21e0ff55)}
.wheelpointer{border-left-width:20px;border-right-width:20px;border-top-width:43px;filter:drop-shadow(0 3px 5px #000)}
.legend{background:#151e36b3;border-color:#4c5779;color:#e4edff}
.finale-alert{border-radius:18px;border:2px solid #ffc259;padding:22px 24px;margin:5px 0 24px;text-align:center;background:radial-gradient(ellipse at top,#fba73c36,#50335545 65%,#1d1f38);box-shadow:0 0 32px #f5a43a26}
.finale-alert .kicker{color:#ffce74}
.finale-alert h2{font-size:clamp(2.1rem,5vw,3.5rem);color:#ffcb62;letter-spacing:.04em;margin:7px 0}
.finale-alert p{max-width:560px;margin:8px auto 14px;color:#fff0cf;font-size:1.05rem;line-height:1.5}
.finale-alert strong{color:#fff;font-size:1rem}
.finale-intro{color:#dcecf8!important;margin:4px 0 20px!important;font-size:1.05rem}
.milestone{background:#4b3c24;border:1px solid #ffc35f;border-radius:14px;padding:13px 16px;margin-bottom:15px;color:#fff1c9;font-weight:800;text-align:center}
.results-panel{max-width:900px;margin:25px auto;padding:38px 28px 44px;border-color:#a97a45;box-shadow:0 0 65px #ffae3a19;background:radial-gradient(ellipse at top,#2c3355,#141d35 60%,#10152b)}
.result-logo{width:120px;height:120px;object-fit:contain;margin:16px auto 0;filter:drop-shadow(0 0 24px #18bcf79c)}
.victory-reason{max-width:600px;margin:22px auto 18px;background:#182844;border:1px solid #54698b;padding:16px 23px;border-radius:14px}
.victory-reason strong{color:#ffc763}
.victory-reason p{color:#f1f5ff;font-size:1rem;line-height:1.5;margin:8px 0 0}
.result-scores{max-width:510px;margin:22px auto 25px}
.result-scores .score-row.active{background:linear-gradient(90deg,#5f4b35,#292f4f);border:1px solid #ffa847}
@media(max-width:600px){.wheelbox{width:min(340px,76vw);height:min(340px,76vw)}.wheel-center{height:78px;width:78px}.wheel-symbol{font-size:1.55rem}.results-panel{padding:27px 16px}.finale-alert{padding:17px 12px}.trophyheader{font-size:.9rem}}