/* =========================================
   MATH WIZARD — FANTASY RPG GAME INTERFACE
   ========================================= */
:root { --ink:#f7f2ff; --muted:#b7acd5; --purple:#8b5cf6; --blue:#4cc9f0; --gold:#ffd166; --emerald:#2dd4a3; --danger:#ff5c7c; --panel:rgba(25,13,61,.88); --line:rgba(190,167,255,.23); }
* { box-sizing:border-box; }
html { min-height:100%; background:#12082e; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 50% -15%,#5b35a4 0,#21104d 39%,#100622 87%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Noto Sans Thai",sans-serif; }
button,a { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.game-shell { width:min(1180px,100%); min-height:100vh; margin:auto; padding:18px clamp(14px,3vw,34px) 30px; overflow:hidden; }

/* Header and combat HUD */
.game-header { display:grid; grid-template-columns:minmax(130px,1fr) auto minmax(130px,1fr); align-items:center; gap:18px; min-height:72px; }
.back-link { display:inline-flex; align-items:center; gap:7px; width:max-content; color:#d9caff; text-decoration:none; font-size:.9rem; font-weight:700; transition:transform .2s,color .2s; }
.back-link:hover { color:#fff; transform:translateX(-3px); }
.game-brand { display:flex; align-items:center; gap:10px; text-align:left; }
.game-brand>span { display:grid; width:39px; height:39px; place-items:center; border:1px solid rgba(255,219,125,.6); border-radius:12px; color:var(--gold); background:rgba(255,209,102,.13); box-shadow:0 0 18px rgba(255,209,102,.25); font-size:1.45rem; }
.game-brand h1 { margin:0; color:#fff; font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(1.15rem,2vw,1.45rem); letter-spacing:.02em; }
.game-brand p { margin:2px 0 0; color:var(--muted); font-size:.72rem; }
.hud { display:flex; justify-content:flex-end; gap:7px; }
.hud-item { min-width:61px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; text-align:center; background:rgba(15,7,42,.48); }
.hud-item span { display:block; color:#c7bbdf; font-size:.59rem; font-weight:700; letter-spacing:.06em; }
.hud-item strong { color:#fff; font-size:.93rem; font-variant-numeric:tabular-nums; }
.mana-hud strong { color:#7ee7ff; }.icon-button { justify-self:end; display:grid; width:37px; height:37px; place-items:center; padding:0; border:1px solid var(--line); border-radius:10px; color:#fff; background:rgba(15,7,42,.48); }

/* Battleground */
.battle-area { position:relative; display:grid; grid-template-columns:1fr minmax(170px,.62fr) 1fr; align-items:end; min-height:360px; margin:13px 0 18px; padding:42px 5% 22px; border:1px solid rgba(186,153,255,.23); border-radius:25px; overflow:hidden; isolation:isolate; background:linear-gradient(180deg,rgba(82,52,160,.31),rgba(14,37,66,.66)),radial-gradient(ellipse at 50% 97%,#174c55 0,transparent 55%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px rgba(2,0,16,.28); }
.battle-area::before { position:absolute; z-index:-2; inset:0; content:""; opacity:.78; background-image:radial-gradient(circle at 12% 19%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 83% 26%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 44% 12%,#a4efff 0 1px,transparent 2px),radial-gradient(circle at 64% 41%,#fff 0 .9px,transparent 1.5px),radial-gradient(circle at 21% 55%,#e7dcff 0 1px,transparent 1.7px); background-size:170px 123px,211px 155px,147px 110px,253px 167px,192px 131px; animation:stars-drift 28s linear infinite; }
.battle-area::after { position:absolute; z-index:-1; right:-14%; bottom:-60%; left:-14%; height:70%; border-radius:50% 50% 0 0; content:""; background:radial-gradient(ellipse,#2e9074 0,rgba(21,87,81,.56) 37%,transparent 69%); }
.sky-stars { position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(148,223,255,.08) 48%,transparent 60%); }
.castle { position:absolute; z-index:-1; bottom:32px; width:120px; height:110px; opacity:.48; filter:drop-shadow(0 0 10px #8c6aff); background:linear-gradient(90deg,#25164d 0 28%,#3b2871 28% 72%,#25164d 72%); clip-path:polygon(0 100%,0 28%,15% 28%,15% 0,28% 22%,41% 0,55% 22%,68% 0,82% 28%,100% 28%,100% 100%); }.castle-left{left:2%;}.castle-right{right:2%;transform:scaleX(-1);}
.battle-status { position:absolute; top:15px; left:50%; z-index:4; width:max-content; max-width:82%; padding:7px 14px; border:1px solid rgba(219,207,255,.32); border-radius:99px; transform:translateX(-50%); color:#e9e2ff; background:rgba(25,11,61,.55); text-align:center; font-size:.77rem; font-weight:700; }
.combatant { position:relative; z-index:2; min-width:0; }.player-side { justify-self:start; }.monster-side { justify-self:end; }
.combatant-top { display:flex; justify-content:space-between; gap:8px; width:min(250px,100%); margin-bottom:6px; color:#cfc5ea; font-size:.66rem; font-weight:800; letter-spacing:.06em; }.combatant-top strong { color:#fff; letter-spacing:0; font-variant-numeric:tabular-nums; }.monster-name { margin-left:auto; }.monster-name span { color:#ffcedc; }
.health-track { width:min(250px,100%); height:10px; padding:2px; border:1px solid rgba(255,255,255,.16); border-radius:99px; overflow:hidden; background:rgba(7,4,29,.62); }.monster-health { margin-left:auto; }.health-fill { width:100%; height:100%; border-radius:99px; transition:width .45s ease; }.player-health .health-fill{background:linear-gradient(90deg,#42dcaa,#b6ffbd);box-shadow:0 0 9px #4ee5a8;}.monster-health .health-fill{background:linear-gradient(90deg,#ff597d,#ffb46b);box-shadow:0 0 9px #ff6a82;}

/* Apprentice wizard made entirely from CSS */
.wizard-character { position:relative; width:170px; height:211px; margin:9px auto 0; transform-origin:bottom center; animation:wizard-idle 3.7s ease-in-out infinite; }.wizard-hat { position:absolute; z-index:3; top:18px; left:57px; width:68px; height:75px; border:3px solid #c7a8ff; border-radius:66% 14% 42% 14%; transform:rotate(-8deg) skew(-9deg); background:linear-gradient(125deg,#653bb5,#26115c 70%); box-shadow:inset 12px 4px 12px rgba(176,130,255,.35),0 0 14px #8a63e5; }.wizard-hat::before { position:absolute; bottom:-8px; left:-15px; width:91px; height:18px; border:3px solid #c7a8ff; border-radius:50%; content:""; background:#412184; }.wizard-head { position:absolute; z-index:2; top:75px; left:70px; width:42px; height:47px; border:2px solid #ffd2bb; border-radius:43% 45% 49% 48%; background:#f7b998; }.wizard-head::after { position:absolute; top:20px; left:10px; width:5px; height:5px; border-radius:50%; content:""; background:#3a164b; box-shadow:17px 0 #3a164b; }.wizard-body { position:absolute; z-index:1; bottom:24px; left:42px; width:96px; height:91px; overflow:hidden; border:3px solid #aa8bff; border-radius:49% 52% 18% 18%; background:linear-gradient(100deg,#4d29a1,#1b0d51); }.wizard-body::before { position:absolute; top:11px; left:40px; width:18px; height:18px; border:2px solid var(--gold); border-radius:50%; content:""; box-shadow:0 0 12px #ffe387; }.wizard-body i { position:absolute; top:15px; right:-17px; width:60px; height:88px; border-radius:55% 0 50% 0; background:#271160; transform:rotate(12deg); }.wizard-wand { position:absolute; z-index:4; top:113px; right:22px; width:61px; height:8px; border-radius:99px; transform:rotate(-39deg); background:linear-gradient(90deg,#9c5d26,#ffe19a 58%,#fff); box-shadow:28px -22px 13px 2px #79e3ff; }.wizard-wand::after { position:absolute; top:-15px; right:-5px; content:"✦"; color:#baf4ff; font-size:27px; text-shadow:0 0 12px #a1f3ff; animation:wand-glow 1.2s ease-in-out infinite alternate; }.wizard-aura { position:absolute; z-index:-1; bottom:1px; left:28px; width:116px; height:92px; border-radius:50%; filter:blur(12px); background:rgba(111,70,255,.48); }.magic-circle { position:absolute; z-index:-1; bottom:0; left:24px; display:grid; width:123px; height:36px; place-items:center; border:2px solid #8eeeff; border-radius:50%; color:#d6f8ff; box-shadow:0 0 17px #3fd5fa,inset 0 0 12px #3fd5fa; transform:perspective(80px) rotateX(63deg); animation:circle-rotate 5s linear infinite; }.magic-circle::before,.magic-circle::after { position:absolute; width:72%; height:72%; border:1px solid currentColor; border-radius:50%; content:""; }.magic-circle::after { width:35%;height:35%; }

/* Dynamic SVG monster */
.monster-character { position:relative; width:183px; height:218px; margin:8px auto 0; transform-origin:bottom center; filter:drop-shadow(0 11px 12px rgba(0,0,0,.32)); animation:monster-idle 3.3s ease-in-out infinite; }.monster-character svg { width:100%; height:100%; overflow:visible; }.monster-character .monster-glow { filter:drop-shadow(0 0 10px var(--monster-glow,#6ff)); }.monster-character.is-hit { animation:monster-hit .48s ease both; }.wizard-character.is-hit { animation:player-hit .48s ease both; }

/* Spell effects */
.spell-stage { position:relative; z-index:5; align-self:center; height:165px; pointer-events:none; }.spell-circle { position:absolute; top:39px; left:50%; display:grid; width:102px; height:102px; place-items:center; border:2px solid #9fefff; border-radius:50%; opacity:0; transform:translateX(-50%) scale(.25) rotate(0); color:#dbfbff; box-shadow:0 0 19px #56d9ff,inset 0 0 18px #5c7dff; }.spell-circle::before,.spell-circle::after { position:absolute; width:77%; height:77%; border:1px solid currentColor; border-radius:50%; content:""; }.spell-circle::after { width:42%;height:42%; }.spell-circle span { position:absolute; font-size:1.25rem; }.spell-circle span:nth-child(1){top:6px}.spell-circle span:nth-child(2){right:7px;bottom:9px}.spell-circle span:nth-child(3){bottom:6px;left:7px}.spell-circle.active { animation:cast-circle .57s ease-out both; }.spell-circle.combo { color:#ffe593; box-shadow:0 0 25px #ffba4a,inset 0 0 19px #e66eff; }.spell-projectile { position:absolute; top:80px; left:31%; width:17px; height:17px; border-radius:50%; opacity:0; background:#9ff6ff; box-shadow:0 0 11px 7px #49c7ff,0 0 36px 16px rgba(111,82,255,.74); }.spell-projectile.fire{background:#fff0a3;box-shadow:0 0 12px 8px #ff7b21,0 0 35px 17px rgba(255,61,50,.72)}.spell-projectile.lightning{background:#fff;box-shadow:0 0 13px 7px #f7ef69,0 0 32px 16px #4fcbff}.spell-projectile.ice{background:#e9ffff;box-shadow:0 0 11px 8px #64e2ff,0 0 30px 16px #858cff}.spell-projectile.wind{background:#d6ffdc;box-shadow:0 0 11px 8px #57edaf,0 0 30px 16px #4edbf1}.spell-projectile.holy{background:#fff9cf;box-shadow:0 0 12px 8px #ffdc5b,0 0 33px 18px #fff}.spell-projectile.meteor{background:#fff5bb;box-shadow:0 0 16px 10px #ff6541,0 0 42px 24px #c73edc}.spell-projectile.active { animation:projectile-fly .5s ease-in both; }.spell-burst { position:absolute; top:58px; right:8%; width:72px; height:72px; border:3px solid #ffeff0; border-radius:50%; opacity:0; background:radial-gradient(circle,#fff 0 8%,#ffbd6c 16%,#e64da7 37%,transparent 70%); box-shadow:0 0 32px 14px #ff83ca; }.spell-burst.active { animation:burst .52s ease-out both; }.damage-number { position:absolute; top:48px; right:3%; opacity:0; color:#fff; font-size:clamp(1.55rem,3vw,2.35rem); font-weight:900; font-style:italic; text-shadow:0 2px 0 #4d1e72,0 0 13px #ffd66a; }.damage-number.active{animation:damage-float .9s ease-out both}.damage-number.critical{color:#ffe065;font-size:clamp(2rem,4vw,3rem);text-shadow:0 2px #a9343b,0 0 20px #ff4d85}.screen-flash { animation:screen-flash .36s ease; }.critical-flash { animation:critical-flash .55s ease; }

/* Question book */
.challenge-panel { position:relative; padding:clamp(18px,3vw,27px); border:1px solid rgba(191,168,255,.34); border-radius:23px; background:linear-gradient(112deg,rgba(39,20,82,.96),rgba(15,24,68,.94)); box-shadow:0 18px 39px rgba(4,0,22,.3),inset 0 1px rgba(255,255,255,.1); }.challenge-topline { display:flex; align-items:center; justify-content:space-between; gap:15px; }.section-kicker { margin:0 0 3px; color:#bb9dff; font-size:.64rem; font-weight:900; letter-spacing:.13em; }.challenge-panel h2 { margin:0; font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(1.16rem,2.3vw,1.5rem); }.timer-box { display:grid; grid-template-columns:auto auto; align-items:end; column-gap:5px; padding:5px 9px; border:1px solid rgba(122,223,255,.34); border-radius:10px; background:rgba(12,8,40,.46); }.timer-box span { grid-column:1 / -1; color:#aebce3; font-size:.61rem; font-weight:800; }.timer-box strong { color:#82eaff; font-size:1.25rem; font-variant-numeric:tabular-nums; }.timer-box small { padding-bottom:3px; color:#9ea7d2; font-size:.61rem; }.timer-box.danger { border-color:#ff6984; background:rgba(145,22,55,.3); animation:danger-pulse .6s ease-in-out infinite alternate; }.timer-box.danger strong { color:#ff7d96; }.timer-track { height:6px; margin:12px 0; border-radius:99px; overflow:hidden; background:#0b0628; }.timer-fill { width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5cf1e0,#6faaff); transition:width .1s linear,background .25s; }.timer-fill.danger { background:linear-gradient(90deg,#ff466d,#ffac62); }
.difficulty-switch { display:flex; gap:8px; margin-bottom:14px; }.difficulty-button { flex:1; padding:7px 9px; border:1px solid rgba(194,177,255,.22); border-radius:9px; color:#c9bfdf; background:rgba(8,4,35,.35); font-size:.75rem; font-weight:800; transition:.2s; }.difficulty-button small { display:block; margin-top:1px; color:#897da7; font-size:.6rem; }.difficulty-button:hover:not(:disabled),.difficulty-button.is-active { border-color:#a987ff; color:#fff; background:rgba(125,76,222,.33); box-shadow:0 0 12px rgba(150,98,255,.2); }.difficulty-button:disabled { cursor:not-allowed; opacity:.52; }
.question-text { min-height:50px; margin:9px 0 15px; color:#fff9da; text-align:center; font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(1.28rem,3.6vw,2rem); font-weight:700; }.answer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.answer-button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:55px; padding:8px; border:1px solid rgba(190,171,255,.35); border-radius:12px; color:#f7f4ff; background:linear-gradient(145deg,rgba(108,65,190,.36),rgba(19,10,60,.7)); font-size:clamp(.9rem,2vw,1.06rem); font-weight:800; transition:transform .15s,border-color .15s,background .15s; }.answer-button b { display:grid; width:20px; height:20px; place-items:center; border-radius:50%; color:#24104f; background:#cdbbff; font-size:.65rem; }.answer-button:hover:not(:disabled) { border-color:#99efff; background:linear-gradient(145deg,rgba(117,92,236,.67),rgba(40,24,99,.9)); transform:translateY(-3px); }.answer-button:disabled { cursor:not-allowed; opacity:.6; }.answer-button.is-correct { border-color:#64f1b3; background:#176d5c; }.answer-button.is-wrong { border-color:#ff6985; background:#7d244b; }
.skill-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:17px; padding-top:15px; border-top:1px solid rgba(202,187,255,.15); }.skill-bar>p { margin:0; color:#d6ceec; font-size:.76rem; font-weight:800; }.skill-bar>p span { display:block; margin-top:2px; color:#8d81ab; font-size:.63rem; font-weight:500; }.skill-list { display:flex; gap:7px; }.skill-button { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:5px; padding:7px 9px; border:1px solid rgba(204,189,255,.22); border-radius:9px; color:#fff; background:rgba(8,4,35,.43); font-size:.68rem; transition:.18s; }.skill-button span { grid-row:span 2; font-size:1.1rem; }.skill-button b { text-align:left; }.skill-button small { color:#a9a0bf; font-size:.58rem; }.skill-button:hover:not(:disabled){transform:translateY(-2px);}.skill-button.fire:hover:not(:disabled){border-color:#ff974f;box-shadow:0 0 12px #a84a42}.skill-button.lightning:hover:not(:disabled){border-color:#ffef5b;box-shadow:0 0 12px #5c76e8}.skill-button.meteor:hover:not(:disabled){border-color:#ff7c71;box-shadow:0 0 12px #c94b7f}.skill-button:disabled{cursor:not-allowed;opacity:.45}.keyboard-hint { margin:12px 0 0; color:#9286b0; text-align:center; font-size:.67rem; }kbd { padding:1px 4px; border:1px solid #71648d; border-radius:4px; color:#ded5f4; background:#211442; font-family:inherit; }

/* Modal and persistent records */
.modal-layer { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; backdrop-filter:blur(8px); background:rgba(8,3,25,.67); transition:opacity .25s; }.modal-layer.is-visible { opacity:1; pointer-events:auto; }.modal-card { width:min(460px,100%); padding:28px; border:1px solid rgba(219,196,255,.48); border-radius:23px; background:linear-gradient(145deg,#3c1d79,#171044); box-shadow:0 25px 65px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.14); text-align:center; }.modal-emblem { display:grid; width:67px; height:67px; margin:0 auto 13px; place-items:center; border:1px solid #ffe391; border-radius:22px; color:#ffe274; background:radial-gradient(circle,#9361df,#301363); box-shadow:0 0 23px rgba(255,210,98,.37); font-size:2.3rem; }.modal-card h2 { margin:4px 0 10px; font-family:Georgia,"Noto Serif Thai",serif; font-size:1.65rem; }.modal-card>p:not(.section-kicker) { margin:0; color:#d4cae8; line-height:1.65; font-size:.91rem; }.modal-actions { display:flex; justify-content:center; gap:9px; margin-top:20px; }.primary-action,.secondary-action { min-width:146px; padding:11px 16px; border-radius:11px; text-decoration:none; font-weight:800; }.primary-action { border:1px solid #ffe69b; color:#35205f; background:linear-gradient(135deg,#fff0a5,#ffc85c); box-shadow:0 5px 15px rgba(255,194,77,.25); }.primary-action:hover { filter:brightness(1.07); transform:translateY(-2px); }.secondary-action { border:1px solid rgba(220,204,255,.36); color:#e7ddff; background:rgba(15,7,50,.5); }.modal-rewards { display:flex; justify-content:center; gap:9px; margin-top:16px; }.reward { padding:7px 10px; border:1px solid rgba(255,226,126,.36); border-radius:9px; color:#ffe8a6; background:rgba(255,201,82,.1); font-size:.78rem; font-weight:800; }.stats-button { margin-top:16px; padding:3px; border:0; color:#bca9e9; background:transparent; text-decoration:underline; font-size:.74rem; }.stats-panel { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; text-align:left; }.stat { padding:7px; border-radius:8px; background:rgba(9,4,38,.34); }.stat span { display:block; color:#a99dbd; font-size:.56rem; }.stat strong { color:#fff5c6; font-size:.83rem; }

/* Motion */
@keyframes stars-drift{to{background-position:170px 123px,-211px 155px,147px -110px,-253px 167px,192px -131px}}@keyframes wizard-idle{50%{transform:translateY(-5px) rotate(-1deg)}}@keyframes monster-idle{50%{transform:translateY(-7px) rotate(1deg)}}@keyframes wand-glow{to{transform:scale(1.25);opacity:.72}}@keyframes circle-rotate{to{transform:perspective(80px) rotateX(63deg) rotate(360deg)}}@keyframes cast-circle{20%{opacity:1;transform:translateX(-50%) scale(1) rotate(100deg)}100%{opacity:0;transform:translateX(-50%) scale(1.45) rotate(270deg)}}@keyframes projectile-fly{5%{opacity:1;transform:scale(.5)}80%{opacity:1;transform:translateX(240%) scale(1.3)}100%{opacity:0;transform:translateX(285%) scale(.1)}}@keyframes burst{15%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(1.65)}}@keyframes damage-float{20%{opacity:1;transform:translateY(0) scale(1.05)}100%{opacity:0;transform:translateY(-55px) scale(.82)}}@keyframes monster-hit{20%,60%{transform:translateX(-12px)}40%,80%{transform:translateX(12px)}100%{transform:translateX(0)}}@keyframes player-hit{20%,60%{transform:translateX(12px)}40%,80%{transform:translateX(-12px)}100%{transform:translateX(0)}}@keyframes screen-flash{40%{filter:brightness(1.75)}}@keyframes critical-flash{40%{filter:brightness(2) saturate(1.6);background-color:rgba(255,188,78,.22)}}@keyframes danger-pulse{to{box-shadow:0 0 14px rgba(255,62,99,.65)}}

@media (max-width:800px){.game-header{grid-template-columns:1fr auto;}.game-brand{order:-1;}.hud{grid-column:1/-1;grid-row:2;justify-content:center;}.icon-button{grid-column:2;grid-row:1}.battle-area{min-height:305px;padding-right:3%;padding-left:3%;}.wizard-character{transform:scale(.84);transform-origin:bottom left; margin-right:-21px;}.monster-character{transform:scale(.84);transform-origin:bottom right;margin-left:-21px}.spell-stage{min-width:90px}.skill-bar{align-items:flex-start;flex-direction:column;}.skill-list{width:100%;}.skill-button{flex:1;}}
@media (max-width:570px){.game-shell{padding:12px 10px 22px}.back-link span{display:none}.game-header{gap:7px}.hud-item{min-width:53px;padding:5px}.hud-item span{font-size:.53rem}.battle-area{grid-template-columns:1fr 82px 1fr;min-height:265px;padding-top:38px;border-radius:18px}.combatant-top{display:block;text-align:center}.combatant-top strong{display:block;margin-top:2px}.monster-name{text-align:center}.health-track{height:8px}.wizard-character{transform:scale(.65);margin:-16px -30px -19px}.monster-character{transform:scale(.65);margin:-15px -31px -19px}.castle{bottom:12px;transform:scale(.63)}.castle-right{transform:scaleX(-1) scale(.63)}.spell-stage{height:120px}.spell-circle{top:27px;width:75px;height:75px}.spell-burst{top:41px;right:-4px;width:52px;height:52px}.answer-grid{grid-template-columns:repeat(2,1fr)}.answer-button{min-height:48px}.difficulty-button{padding:6px 3px}.skill-button{padding:6px 5px;column-gap:3px}.skill-button b{font-size:.61rem}.skill-button small{font-size:.5rem}.keyboard-hint{display:none}.modal-card{padding:24px 18px}.stats-panel{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}}