:root{--bg:#090e21;--panel:#141c33;--panel-light:#1b2540;--stroke:#303b56;--muted:#a6afc8;--white:#f5f7ff;--lime:#d2ff62;--violet:#9b84ff;--pink:#ff7193;--cyan:#7de9ee;--shadow:0 20px 80px #01071865;box-sizing:border-box}
*{box-sizing:inherit}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;letter-spacing:-.012em;overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.46;cursor:not-allowed;transform:none!important}
a{color:inherit}
.glow{pointer-events:none;position:fixed;z-index:-1;filter:blur(82px);border-radius:50%;opacity:.2}
.glow-one{background:#6042d3;width:460px;height:460px;top:-180px;right:-80px}
.glow-two{background:#334987;width:420px;height:420px;bottom:-240px;left:-100px}
.site-shell{width:min(1080px,calc(100% - 36px));min-height:100vh;margin:auto;display:flex;flex-direction:column}
.header{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff16}
.brand{text-decoration:none;display:inline-flex;align-items:center;gap:11px}
.brand-mark{font-size:27px;width:41px;height:41px;border-radius:12px;display:grid;place-items:center;background:var(--lime);color:#0d1329;transform:rotate(-8deg);box-shadow:0 3px 24px #d2ff6230}
.brand-name{font-size:15px;font-weight:900;letter-spacing:.02em;line-height:1.15;max-width:150px}
.brand-name strong{display:block;color:var(--lime)}
.header-right{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.connection-dot{width:8px;height:8px;background:#fbbe54;border-radius:100%;box-shadow:0 0 0 4px #fbbe5422}
.connection-dot.online{background:var(--lime);box-shadow:0 0 0 4px #c9ff6122}
.pill{font-size:10px;font-weight:800;padding:6px 9px;border:1px solid #64739761;border-radius:99px;letter-spacing:.06em}
main{flex:1;padding:34px 0 42px}.footer{min-height:55px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #ffffff16;color:#66718c;font-size:10px;font-weight:850;letter-spacing:.17em}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--lime);font-weight:900}
h1,h2,h3,p{margin:0}h1{font-size:clamp(43px,6vw,76px);font-weight:950;line-height:1.05;letter-spacing:-.055em}h1 em{font-style:normal;color:var(--lime)}h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.045em}h3{font-size:17px;letter-spacing:-.02em}
.hero{display:grid;grid-template-columns:1fr .94fr;gap:36px;align-items:center;padding-top:42px}
.hero-text{display:flex;flex-direction:column;align-items:start;gap:19px}
.hero-text p{font-size:16px;color:var(--muted);line-height:1.75;max-width:500px}
.hero-highlight{display:flex;flex-wrap:wrap;gap:10px}
.hero-highlight span{border:1px solid #ffffff20;background:#fff1;border-radius:24px;padding:8px 11px;color:#cbd4ee;font-size:12px;font-weight:700}
.intro-card,.card,.score-card,.challenge-card,.result-card{background:linear-gradient(145deg,#18213a,#11182d);border:1px solid var(--stroke);border-radius:20px;box-shadow:var(--shadow)}
.intro-card{padding:26px;display:flex;flex-direction:column;gap:14px}
.intro-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:5px}.intro-heading h2{font-size:21px}
.field-label{font-size:11px;color:#b0bbd5;letter-spacing:.09em;font-weight:850;text-transform:uppercase;margin:5px 0 4px;display:block}
.text-field{display:block;width:100%;height:50px;padding:0 15px;background:#0d1429;border:1px solid #3b4662;border-radius:11px;color:#f5f7ff;outline:none}
.text-field:focus{border-color:var(--lime);box-shadow:0 0 0 3px #d2ff621d}
.text-field::placeholder{color:#697592}
.button{border:0;border-radius:11px;min-height:48px;padding:0 18px;font-weight:850;transition:.18s transform,.18s filter;white-space:nowrap}
.button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.06)}
.button-primary{background:var(--lime);color:#151d2c}
.button-secondary{background:#283550;color:#f1f4ff;border:1px solid #435171}
.button-outline{background:#0c1427;border:1px solid #5a698d;color:var(--white)}
.button-ghost{background:#242f4a;color:#cbd3e9}
.button-wide{width:100%}
.button-row{display:flex;gap:10px;flex-wrap:wrap}
.or-separator{display:flex;align-items:center;gap:10px;color:#7583a0;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.or-separator:before,.or-separator:after{content:"";flex:1;height:1px;background:#35435f}
.join-row{display:flex;gap:9px}.join-row input{min-width:0;flex:1;text-transform:uppercase;letter-spacing:.12em;font-weight:850}.join-row button{flex:0 0 auto}
.caption{font-size:12px;color:#8492ae;line-height:1.5}.mini-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:36px}.rule{background:#121c32a6;border:1px solid #293552;padding:18px;border-radius:15px}.rule .number{display:inline-block;color:var(--lime);font-size:25px;font-weight:950;margin-bottom:10px}.rule p{color:var(--muted);font-size:13px;margin-top:7px;line-height:1.6}
.section-title{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}.section-title p{color:var(--muted);margin-top:6px;line-height:1.6;font-size:14px}
.label-accent{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.lobby-layout,.arena-layout{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:18px;align-items:start}
.card{padding:25px}.room-code-box{border:1px dashed #7b94b4;background:#111f35;border-radius:17px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px;margin:18px 0}
.room-code{font-weight:950;font-size:clamp(30px,5vw,48px);letter-spacing:.16em;color:var(--lime);line-height:1}
.room-code-label{font-size:11px;color:#a9b6d2;font-weight:850;letter-spacing:.12em;margin-bottom:8px}
.room-code-box .button{min-height:41px}
.player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.player-tile{padding:12px;border-radius:12px;background:#192740;border:1px solid #334360;display:flex;align-items:center;gap:11px;min-width:0}
.avatar{width:40px;height:40px;border-radius:12px;flex:0 0 40px;background:#9b84ff2b;border:1px solid #9b84ff65;color:#d5caff;display:grid;place-items:center;font-size:15px;font-weight:950}
.player-info{min-width:0;flex:1}.player-name{font-size:14px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-subtitle{font-size:11px;margin-top:5px;color:#95a5c3}
.stock{color:var(--pink);letter-spacing:.1em;font-size:17px}.stock-empty{color:#53607a}
.side-stack{display:flex;flex-direction:column;gap:16px}.side-stack .card{padding:20px}
.info-kv{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #ffffff13;font-size:13px}.info-kv:last-child{border:0}.info-kv span:first-child{color:var(--muted)}
.note{background:#d2ff6212;border:1px solid #d2ff6232;color:#dee9c6;padding:13px 15px;border-radius:12px;font-size:12px;line-height:1.6}
.game-status{display:inline-flex;gap:8px;align-items:center;background:#292144;border:1px solid #5f4c83;border-radius:99px;padding:8px 12px;color:#d5c4fc;font-size:11px;font-weight:900;letter-spacing:.08em}
.challenge-card{padding:28px}
.challenge-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.category-chip{color:#ccbbff;border:1px solid #6d57b3;background:#6452a424;border-radius:99px;padding:8px 12px;font-size:11px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}
.timer{text-align:right;color:var(--lime);font-weight:950;font-variant-numeric:tabular-nums;font-size:28px;letter-spacing:.005em}
.timer.warning{color:var(--pink)}.timer-caption{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.12em;text-align:right;margin-top:1px}
.timer-track{background:#35415c;height:8px;overflow:hidden;border-radius:99px;margin:15px 0 25px}.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#9b84ff,var(--lime));border-radius:99px;transition:width .16s linear}.timer-fill.warning{background:var(--pink)}
.challenge-copy{text-align:center;margin:28px auto 20px;max-width:600px}.question-label{font-size:11px;font-weight:900;color:#98a4c0;letter-spacing:.2em;text-transform:uppercase}.challenge-prompt{margin:15px 0 11px;font-size:clamp(21px,3vw,31px);font-weight:900;line-height:1.25;letter-spacing:-.035em}.letters{font-size:clamp(31px,6vw,58px);font-weight:1000;color:var(--lime);letter-spacing:.15em;margin-top:25px;word-break:break-all;text-align:center;text-shadow:0 0 40px #d2ff6225}
.input-answer{display:flex;gap:10px;max-width:490px;margin:25px auto 6px}.input-answer .text-field{flex:1;min-width:0}.answer-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:28px}.option{border:1px solid #52617e;background:#23304c;color:#f7f8ff;border-radius:12px;padding:15px;font-weight:750;text-align:left;min-height:58px;white-space:normal}.option:hover:not(:disabled){border-color:var(--lime);background:#303e50}.option span{display:inline-flex;width:26px;height:26px;border-radius:7px;background:#ffffff15;align-items:center;justify-content:center;margin-right:8px;font-size:12px;color:var(--lime)}
.answer-feedback{text-align:center;color:#a3b3d3;font-size:13px;margin-top:16px;min-height:20px}.answer-feedback.good{color:var(--lime)}.answer-feedback.bad{color:var(--pink)}
.waiting-answer{text-align:center;padding:22px 14px;margin-top:20px;background:#d2ff6210;border:1px solid #d2ff6239;border-radius:14px;color:var(--lime);font-size:15px;font-weight:750}
.score-card{padding:20px}.score-title{display:flex;justify-content:space-between;align-items:center;font-weight:900;margin-bottom:14px}.score-title small{color:var(--muted);font-size:11px}
.score-row{padding:13px 0;display:flex;gap:10px;align-items:center;border-top:1px solid #ffffff16}.score-row .avatar{width:36px;height:36px;flex:0 0 36px}.score-row.eliminated{opacity:.45}.score-row .player-info{min-width:0}.score-row .player-name{font-size:13px}.score-row .stock{white-space:nowrap;font-size:15px}.status-solving{color:#f1c683!important}.status-done{color:var(--lime)!important}.status-out{color:var(--pink)!important}
.result-banner{border-radius:15px;padding:18px;background:#a9ff6714;border:1px solid #b8f7803f;margin:17px 0;color:#e4ffd0}.result-banner.negative{background:#ff71931a;border-color:#ff719343;color:#ffcedd}.result-banner h3{margin-bottom:7px}.result-banner p{font-size:13px;line-height:1.65}
.answer-reveal{display:grid;place-items:center;padding:26px;border:1px solid #3d4d6b;background:#0d172c;border-radius:14px;text-align:center;margin:18px 0}.answer-reveal small{color:#9aa8c4;text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:11px}.answer-reveal strong{font-size:30px;color:var(--lime);margin-top:8px}
.outcome-list{display:grid;gap:8px}.outcome-row{background:#212e48;border-radius:10px;padding:11px 13px;display:flex;justify-content:space-between;gap:8px;font-size:13px}.outcome-row strong{font-size:12px}
.winner-card{text-align:center;padding:56px 25px;background:radial-gradient(circle at 50% 0%,#505d403f,transparent 65%),linear-gradient(145deg,#1c2739,#111829);border:1px solid #9db96770;border-radius:22px;box-shadow:var(--shadow)}.trophy{font-size:76px;filter:drop-shadow(0 8px 25px #f3e66b70)}.winner-card h1{font-size:clamp(33px,5vw,57px);margin:16px auto 10px}.winner-card .win-name{color:var(--lime)}.winner-card p{color:var(--muted);line-height:1.7;max-width:490px;margin:13px auto 27px}.winner-stats{display:flex;justify-content:center;gap:22px;margin:25px 0}.winner-stats span{color:#a9b7d4;font-size:12px}.winner-stats strong{display:block;color:var(--white);font-size:25px}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,25px);background:#283653;border:1px solid #637390;border-radius:12px;color:white;font-weight:750;font-size:13px;padding:13px 20px;z-index:20;opacity:0;transition:.2s;max-width:min(90vw,500px);text-align:center;pointer-events:none}.toast.show{transform:translate(-50%,0);opacity:1}
.loading{margin:90px auto;text-align:center;color:var(--muted);font-weight:750}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:25px;padding-top:16px}.intro-card{max-width:590px}.lobby-layout,.arena-layout{grid-template-columns:1fr}.side-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.footer{font-size:9px}.mini-rules{margin-top:28px}}
@media(max-width:520px){.site-shell{width:min(100% - 24px,1080px)}.header{min-height:73px}.brand-name{font-size:12px}.brand-mark{width:35px;height:35px;font-size:24px}.header-right{gap:6px}.header-right .pill{display:none}main{padding-top:18px}.hero-text{gap:14px}.hero-text p{font-size:14px}.intro-card,.card,.challenge-card{padding:17px}.room-code-box{padding:15px}.room-code{letter-spacing:.11em}.player-grid,.answer-options,.mini-rules{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr}.footer{font-size:8px}.challenge-copy{margin:20px auto 14px}.letters{letter-spacing:.08em}.input-answer{flex-direction:column}.input-answer .button{width:100%}.winner-card{padding:40px 15px}}
@media(max-width:520px){.input-answer .text-field{flex:0 0 50px;min-height:50px;width:100%}}

/* Version 0.2: visible room exits and distinct win/loss results */
.heading-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.button-small{min-height:36px;padding:0 12px;font-size:11px}
.defeat-card{background:radial-gradient(circle at 50% 0%,#72435a35,transparent 65%),linear-gradient(145deg,#1c2739,#111829);border-color:#a2698070}
.defeat-card .win-name{color:#ff9fb4}
.defeat-card .trophy{filter:none}
@media(max-width:520px){.heading-actions{width:100%;justify-content:space-between}.winner-card .button-row{flex-direction:column}.winner-card .button-row button{width:100%}}

/* Version 0.3: persistent post-match lobby */
.postmatch-banner{display:flex;align-items:center;gap:22px;background:radial-gradient(circle at 10% 0%,#6c81482b,transparent 70%),#1c2739;border:1px solid #8fae6580;border-radius:20px;padding:25px;margin-bottom:32px}
.postmatch-banner.defeat-card{border-color:#a2698070;background:radial-gradient(circle at 10% 0%,#b04c6526,transparent 70%),#1c2739}
.postmatch-banner.waiting-banner{border-color:#7f83d977;background:radial-gradient(circle at 10% 0%,#756be927,transparent 70%),#1c2739}
.postmatch-banner>div:nth-child(2){flex:1}.postmatch-banner h2{font-size:clamp(20px,3vw,28px);margin:9px 0}.postmatch-banner p{font-size:13px;line-height:1.6;color:var(--muted)}
.postmatch-icon{font-size:48px}.postmatch-stats,.champion-line{color:var(--lime);font-size:12px;font-weight:800;margin-top:14px}.postmatch-banner .button{white-space:nowrap}
.player-tile .remove-player{font-size:10px;min-height:32px;padding:0 7px;border-color:#b46b7a80;color:#ffc8d1}
@media(max-width:660px){.postmatch-banner{flex-wrap:wrap;padding:18px;gap:12px}.postmatch-banner>div:nth-child(2){flex-basis:calc(100% - 70px)}.postmatch-banner .button{width:100%}}
@media(max-width:520px){.player-tile .remove-player{font-size:9px;padding:0 6px}}

/* v0.4: clearly distinguish an interrupted connection from an active round. */
.connection-banner{padding:12px 16px;margin-top:14px;background:#392b28;border:1px solid #b9835e;border-radius:12px;color:#ffe2b9;font-size:13px;line-height:1.55;font-weight:700}
.connection-banner[hidden]{display:none!important}
.connection-wait{background:#392b28;border-color:#b9835e;color:#ffe2b9}

/* Version 0.5: difficulty progression is visible at a glance. */
.challenge-labels{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.difficulty-chip{border-radius:99px;padding:8px 12px;font-size:11px;font-weight:900;letter-spacing:.08em;border:1px solid transparent}
.difficulty-easy{color:#d2ff62;background:#d2ff6217;border-color:#d2ff6250}
.difficulty-medium{color:#ffd785;background:#ffd78516;border-color:#ffd78560}
.difficulty-hard{color:#ff9fb4;background:#ff9fb417;border-color:#ff9fb45c}
@media(max-width:520px){.challenge-labels{gap:6px}.difficulty-chip{padding:7px 10px;font-size:10px}}

/* v0.6: casual matchmaking */
.quick-play{margin-top:22px;padding:20px;border-radius:16px;border:1px solid #d2ff6250;background:#d2ff6209}
.quick-play h3{margin:7px 0 9px;font-size:20px}
.quick-play .caption{margin-bottom:15px}
.mode-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0 19px}
.mode-choice{background:#263451;color:#d7dff2;border:1px solid #53627a;border-radius:11px;font-weight:900;cursor:pointer;padding:14px 8px;min-height:48px;font-size:12px}
.mode-choice.selected,.mode-choice:focus-visible{background:#d2ff621c;color:#d2ff62;border-color:#d2ff62;outline:none}
.quick-play select{margin:8px 0 16px;cursor:pointer;background:#0d152b;color:#f8fafc}
.quick-play select option{background:#0d152b;color:#f8fafc}
.casual-activity{color:#a5b5d0;margin-top:14px;font-size:11px;line-height:1.5;text-align:center}
.queue-panel{text-align:center}
.queue-panel .player-grid,.queue-panel .section-title{text-align:left}
.search-pulse{font-size:58px;filter:drop-shadow(0 0 25px #d2ff625e);margin:12px auto 16px;animation:queue-breathe 2s infinite ease-in-out}
.queue-panel h2{font-size:30px;margin-bottom:8px}
.queue-panel>p{line-height:1.7}
.queue-countdown{margin-top:24px;border:1px solid #d2ff623b;color:#d2ff62;border-radius:12px;padding:15px 12px;background:#d2ff620d;font-weight:800;font-size:14px}
@keyframes queue-breathe{50%{transform:scale(1.08);filter:drop-shadow(0 0 33px #d2ff62a0)}}
@media(max-width:520px){.quick-play{padding:16px}.mode-pills{gap:7px}.mode-choice{font-size:11px;padding:11px 5px}}
@media(prefers-reduced-motion:reduce){.search-pulse{animation:none}}

/* Version 0.6.1 — server-timed start countdown and accessible sound toggle */
.sound-toggle{border:1px solid #66758d;color:#f2f6fd;background:#1b2942;border-radius:99px;padding:8px 11px;font:800 10px/1.2 inherit;letter-spacing:.035em;cursor:pointer;min-height:38px;white-space:nowrap}
.sound-toggle[aria-pressed="false"]{color:#aab6cf;border-color:#47536d}
.sound-toggle:focus-visible{outline:2px solid #d2ff62;outline-offset:3px}
.count-card{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:405px;background:radial-gradient(circle at center 35%,#243e50,#17243b 65%)}
.count-kicker{font-size:11px;letter-spacing:.17em;color:#d2ff62;font-weight:900}
.count-card h2{font-size:clamp(20px,4vw,30px);margin:14px 0 3px;letter-spacing:.09em;color:#fff}
.count-number{font-size:clamp(110px,21vw,180px);font-weight:950;line-height:1.3;color:#d2ff62;text-shadow:0 0 45px #d2ff6250;font-variant-numeric:tabular-nums}
.count-subtitle{color:#c4d1e6;font-size:13px;line-height:1.5;max-width:300px}
.count-track{width:min(100%,290px);margin-top:24px;background:#475a70;border-radius:9px;height:6px;overflow:hidden}
.count-fill{background:#d2ff62;border-radius:9px;height:100%;transition:width .15s linear}
.round-live{position:relative}
.go-overlay{position:absolute;inset:0;z-index:3;background:#0b1327f5;border-radius:14px;color:#d2ff62;display:flex;justify-content:center;align-items:center;font-size:clamp(70px,20vw,150px);font-weight:950;text-shadow:0 0 60px #d2ff6288;pointer-events:none;animation:go-reveal .7s both}
@keyframes go-reveal{0%{opacity:1;letter-spacing:-.15em}70%{opacity:1;letter-spacing:.02em}100%{opacity:0;letter-spacing:.1em}}
@media(max-width:640px){.header-right{gap:6px;flex-wrap:wrap;justify-content:flex-end}.sound-toggle{padding:8px;font-size:10px}.count-card{min-height:360px;padding:20px}}
@media(prefers-reduced-motion:reduce){.count-fill{transition:none}.go-overlay{animation:none;opacity:1}}

/* v0.7: original brain logo and brain-shaped rank medallions */
.brand-mark{transform:none;box-shadow:0 3px 24px #d2ff6240;overflow:hidden}
.brand-mark .header-brain{width:100%;height:100%;object-fit:contain;transform:scale(1.14);display:block}
.rank-medal{width:45px;height:45px;object-fit:contain;flex-shrink:0}
.rank-label{font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--lime)}
.rank-mini{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800}
.rank-mini .rank-medal{width:25px;height:25px}
.account-panel,.ranked-panel{background:#15223d;border:1px solid #36465f;border-radius:15px;padding:17px;margin-top:18px}
.account-panel h3,.ranked-panel h3{margin:0 0 8px}
.account-panel p,.ranked-panel p{color:#aabbcf;line-height:1.55;font-size:12px}
.account-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.account-actions button{flex:1 1 auto}
.account-fields{display:grid;gap:10px;margin-top:12px}
.account-fields .text-field{min-height:43px}
.account-status{display:flex;align-items:center;gap:10px}
.account-status p{margin:4px 0 0}
.ranked-panel{border-color:#d2ff625c;background:linear-gradient(125deg,#253549,#152137)}
.ranked-panel .button{margin-top:9px}
.leaderboard-list{display:grid;gap:7px;margin-top:12px}
.leaderboard-row{display:flex;align-items:center;gap:9px;padding:8px;background:#0b152b;border-radius:9px}
.leaderboard-row .name{flex:1;min-width:0;overflow-wrap:anywhere}
.leaderboard-row .rank-medal{width:28px;height:28px}
.ranked-result{padding:14px;border:1px solid #627f9d;border-radius:12px;margin-top:14px;background:#121f37;color:#d2ff62;font-weight:800;text-align:center}
.ranked-result.negative{color:#ff92ac;border-color:#a96270}
.ranked-row{display:inline-flex;align-items:center;gap:6px;color:#cdd6eb}
.ranked-row img{width:24px;height:24px}
@media(max-width:520px){.brand-mark img{transform:scale(1.08)}.account-panel,.ranked-panel{padding:13px}}

/* v0.7.1 — title screen, original soundtrack, and independent audio mixer */
[hidden]{display:none!important}
.title-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow-y:auto;background:radial-gradient(ellipse at 50% 15%,#233355 0%,#10152d 46%,#070c1d 90%);isolation:isolate;padding:28px 18px}
.title-stars{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 14% 16%,#d2ff6266 0 2px,transparent 3px),radial-gradient(circle at 77% 30%,#b3a1fb80 0 2px,transparent 3px),radial-gradient(circle at 86% 68%,#d2ff6270 0 2px,transparent 3px),radial-gradient(circle at 22% 83%,#5dc4f480 0 2px,transparent 3px);pointer-events:none}
.title-content{width:min(100%,700px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:17px;position:relative}
.title-kicker{color:var(--lime);font-size:clamp(9px,1.5vw,13px);letter-spacing:.23em;font-weight:900}
.title-logo{width:min(76vw,400px);max-height:43vh;object-fit:contain;filter:drop-shadow(0 18px 50px #b8ff653d);animation:logo-rise 1.2s ease-out both}
.title-motto{font-size:clamp(27px,5.2vw,47px);line-height:1.1;letter-spacing:-.05em}
.title-motto span{color:var(--lime)}
.title-content>p:not(.title-audio-note){color:#b4c1da;font-size:clamp(12px,2vw,16px);line-height:1.5}
.title-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:7px}
.title-enter{min-width:220px;font-size:15px;box-shadow:0 8px 40px #d2ff6240}
.title-preview{color:#e4f2ff;min-width:195px;border:1px solid #6d7da0;background:#18243a}
.title-audio-note{color:#a6b4ce;font-size:12px;line-height:1.4}
.title-edition{font-size:10px;letter-spacing:.16em;color:#7f8fa9;font-weight:850;margin-top:12px}
@keyframes logo-rise{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.title-return{border:1px solid #62729170;background:#1b27413d;color:#aebcda;border-radius:20px;padding:8px 14px;font-size:11px;font-weight:850;letter-spacing:.075em}
.title-return:hover{border-color:var(--lime);color:var(--lime)}
.audio-settings{border:1px solid #64758a66;background:#17213b;border-radius:15px;padding:19px;margin-top:10px;display:grid;gap:10px;max-width:480px;align-self:flex-end;width:100%;box-shadow:var(--shadow)}
.audio-settings h2{font-size:20px}.audio-settings label{display:flex;justify-content:space-between;gap:12px;color:#c8d4e8;font-weight:850;font-size:13px}
.audio-settings input[type=range]{width:100%;accent-color:var(--lime);height:28px;cursor:pointer}.audio-settings p{font-size:11px;color:#9eacca}
.sound-toggle{font-family:inherit;font-size:10px}
@media(max-width:720px){.header{flex-wrap:wrap;padding:12px 0;gap:8px}.header-right{margin-left:auto;justify-content:flex-end;flex-wrap:wrap}.header-right .sound-toggle{min-height:36px;padding:7px;font-size:10px}.mixer-toggle{min-width:auto}.title-logo{width:min(80vw,300px);max-height:40vh}.title-actions{flex-direction:column;width:100%}.title-actions .button{width:min(95%,330px)}.audio-settings{max-width:100%}}
@media(prefers-reduced-motion:reduce){.title-logo{animation:none}}

/* v0.7.3: account username replaces guest nickname input when authenticated. */

/* Version 0.8 — Ranked history, personal statistics, and richer brain leaderboard. */
.account-tools{display:flex;gap:8px;flex-wrap:wrap}
.account-tools .button{flex:1 1 145px}
.competitive-heading{font-size:11px;letter-spacing:.12em;color:#d2ff62;font-weight:900;margin:18px 0 11px}
.enhanced-leaderboard .name{min-width:0;flex:1;overflow-wrap:anywhere}
.enhanced-leaderboard .name small{display:block;font-size:10px;color:#a3b3ca;font-weight:500;margin-top:4px;line-height:1.35}
.enhanced-leaderboard{gap:7px}
.performance-section{margin:20px 0 6px;border:1px solid #465674;background:#141e33;border-radius:13px;padding:15px}
.performance-section h3{font-size:14px;margin:0 0 14px;letter-spacing:.06em}
.performance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:23px}
.performance-stat{background:#0d1527;border:1px solid #354563;border-radius:9px;padding:11px 7px;min-width:0;text-align:center}
.performance-stat strong{display:block;font-size:19px;color:#d2ff62;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.performance-stat span{display:block;margin-top:4px;color:#adbcd3;font-size:10px;line-height:1.3}
.history-heading{margin-top:17px!important}
.match-history-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.match-history-row{display:flex;gap:10px;align-items:center;padding:10px 8px;border:1px solid #33445e;border-radius:9px}
.history-result{font-size:10px;font-weight:900;min-width:32px}
.history-win{color:#d2ff62}
.history-loss{color:#ff9fb4}
.history-opponent{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px;font-weight:800}
.history-opponent small{display:block;font-size:10px;color:#a6b4c9;font-weight:400;margin-top:4px}
.match-history-row strong{white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}
@media(min-width:600px){.performance-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:420px){.performance-section{padding:10px}.match-history-row{gap:6px}.enhanced-leaderboard{gap:5px}}

/* v0.8 competitive panels: signal which collapsible section is open. */
.account-tools .button[aria-expanded="true"]{border-color:#d2ff62;color:#d2ff62;background:rgba(210,255,98,.08)}

/* v0.8.1 PWA: touch-friendly install button and standalone safe-area layout. */
.install-app{background:#d2ff62;color:#10152a;border:1px solid #d2ff62;border-radius:99px;padding:9px 12px;font-weight:900;font-size:11px;white-space:nowrap}
.install-app:focus-visible{outline:2px solid white;outline-offset:3px}
.install-guide{background:#17233d;border:1px solid #667a9d;color:#e3ebfa;padding:11px 14px;border-radius:11px;font-size:12px;line-height:1.5;margin:10px 0 0}
.header-right{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:520px){.install-app{font-size:10px;padding:8px 10px}.header-right{gap:6px}.install-guide{font-size:12px}}
@media(display-mode:standalone){
  .site-shell{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .header{padding-top:env(safe-area-inset-top,0px)}
  .footer{padding-bottom:env(safe-area-inset-bottom,0px)}
  .title-screen{padding-top:max(28px,env(safe-area-inset-top,0px));padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
}