/* V0.9.0 — functioning dashboard, not a screenshot as background. */
:root{--navy:#12345c;--ink:#142a4b;--blue:#1787e1;--cloud:#ecf5fe;--edge:#e1eaf5;--radius:19px}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#dceefd 0,#f1f7ff 170px,#e9f3fc 100%);color:var(--ink)}
.game-topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:87px;padding:12px max(26px,calc((100vw - 1440px)/2));background:linear-gradient(105deg,#102f53 0%,#163a68 51%,#0e2b50 100%);box-shadow:0 6px 24px #122e5025;color:#fff}
.brand{display:flex;align-items:center;min-width:0;gap:13px;text-decoration:none;color:white}.brand-shield{display:grid;place-items:center;width:53px;height:58px;flex-shrink:0;clip-path:polygon(50% 0,100% 15%,95% 73%,50% 100%,5% 73%,0 15%);background:linear-gradient(125deg,#f1b943,#df4439 38%,#1466a9 85%);box-shadow:0 2px 8px #fff6;outline:1px solid white;font-size:30px}.brand-title{font-size:27px;font-weight:900;letter-spacing:.02em;white-space:nowrap}.brand-separator{color:#93b9db;font-weight:300}.version-pill{border-radius:100px;padding:7px 12px;background:#ffffff25;font-size:13px;font-weight:750;white-space:nowrap}.top-nav{display:flex;align-self:stretch;align-items:stretch;gap:18px;min-width:0}.nav-action{appearance:none;min-width:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#c7dbf4;text-decoration:none;border:0;border-bottom:4px solid transparent;background:transparent;border-radius:0;padding:3px 8px 4px;font-size:13px;font-weight:800}.nav-action.active,.nav-action:hover,.nav-action:focus-visible{color:#fff;border-bottom-color:#2eb1fa}.nav-emoji{font-size:30px;line-height:1.05;color:inherit}.header-profile{flex:0 0 auto;border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:9px;font-weight:850;font-size:15px}.header-profile img{width:42px;height:42px;object-fit:contain;border-radius:50%;background:#c9eeff;border:3px solid #93c1e3}.header-profile:hover{color:#bfe7ff}
.page{width:min(1400px,calc(100% - 36px));margin:20px auto 26px}.home{display:block}.dashboard-grid{display:grid;grid-template-columns:minmax(270px,1.01fr) minmax(480px,1.68fr) minmax(280px,1.04fr);gap:15px;align-items:stretch}.profile-column,.games-column,.side-column{min-width:0}.profile-column,.side-column{display:flex;flex-direction:column;gap:15px}.profile-column>.growth-card,.side-column>.leaderboard-card,.side-column>.summary{background:#fff;border:1px solid #e5edf7;border-radius:19px;box-shadow:0 5px 15px #25477114,0 22px 40px #183c5510}.profile-column .growth-card{padding:0;flex:1;overflow:hidden}.growth-hero{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:23px 18px 12px;position:relative;background:radial-gradient(circle at 50% 15%,#c7e8fe 0,#eaf5fd 47%,white 84%)}
.growth-hero:before{content:"";position:absolute;bottom:0;inset-inline:0;height:105px;opacity:.25;pointer-events:none;background:linear-gradient(180deg,transparent,#93bfd833)}
.growth-person{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;position:relative}.growth-person>small{display:none}.growth-person>strong{font-size:29px;font-weight:950;line-height:1.16;color:#102e55;max-width:100%;overflow-wrap:anywhere}.avatar-button{width:186px;height:186px;flex:none}.avatar-exp-ring{width:176px;height:176px;background:conic-gradient(#168fe4 var(--exp-percent,0%),#dde8f2 0);box-shadow:0 0 0 6px #ffffffcc}.avatar-exp-ring:before{width:156px;height:156px;background:#fff}.avatar-exp-ring img{width:145px;height:145px;object-fit:cover;background:#eaf6ff}.avatar-edit{right:5px;bottom:10px;width:39px;height:39px;border:3px solid white;background:#2283d8;font-size:20px;box-shadow:0 4px 12px #3876bd55}
.equipped-title{border:0;background:linear-gradient(110deg,#fff0cb,#ffe1a0);padding:9px 19px;color:#745018;font-size:14px;box-shadow:0 2px 8px #d1a45223}.level-label{display:flex;flex-direction:column;gap:7px;align-items:center;width:100%;max-width:275px}.level-label span:first-child{font-size:17px;font-weight:900;color:#fff;background:#1d87d9;border-radius:100px;padding:4px 17px;order:-1;box-shadow:0 4px 8px #2779d133}.level-label span:last-child{font-size:14px;font-weight:850;color:#1d3551;order:1}.growth-person p{font-size:12px;color:#6d83a0;font-weight:650}
/* real dynamic XP ring stays on avatar; the subtle bar under title is driven by same --exp-percent */
.growth-person:after{content:"";display:block;width:min(210px,85%);height:9px;border-radius:99px;background:linear-gradient(90deg,#269bee var(--exp-percent,0%),#dfebf4 0);margin:1px auto 0;order:2}
.growth-actions{display:flex;justify-content:center;border:0;margin:0;padding:8px 10px 15px;background:white}.growth-actions #switchProfile{background:#eff6ff;color:#1c609c;border-radius:12px;padding:9px 22px;min-height:38px}.growth-actions #savedHint{display:none}
.avatar-gallery{padding:18px 15px;background:#fff;border-top:1px solid #e7edf5}.avatar-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:13px}.avatar-gallery-head h3{margin:0;font-size:17px;color:#173a62}.avatar-gallery-head span{font-size:10px;color:#8294a6}.avatar-inline-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.avatar-inline-item{display:grid;place-items:center;border:2px solid transparent;background:#f1f8ff;border-radius:50%;width:100%;aspect-ratio:1;padding:2px;cursor:pointer;transition:.15s}.avatar-inline-item:hover,.avatar-inline-item:focus-visible{transform:translateY(-2px);border-color:#90c9f3}.avatar-inline-item.active{border-color:#138ce5;background:#d9f1ff;box-shadow:0 0 0 2px #d2e9fb}.avatar-inline-item img{width:100%;height:100%;object-fit:contain}.edit-character{width:100%;border:0;background:linear-gradient(100deg,#2778c9,#156ac0);border-radius:12px;color:#fff;font-weight:900;padding:12px;margin-top:12px;box-shadow:0 5px 12px #1779bd33}.edit-character:hover{filter:brightness(1.08)}
/* Four fully-clickable HTML game cards; images only illustrate them. */
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:14px;height:100%}.mode{display:flex;flex-direction:column;min-height:0;height:100%;padding:8px;background:white;border:1px solid #e2edf7;border-radius:19px;box-shadow:0 5px 14px #24476c10,0 19px 32px #1d47621a;overflow:hidden;gap:0;text-align:left;color:#142e52}.mode:hover,.mode:focus-visible{transform:translateY(-3px);box-shadow:0 10px 25px #14375e25;border-color:#98c7ec;outline-offset:2px}.mode-image{width:100%;height:36%;min-height:136px;flex:0 0 auto;display:block;overflow:hidden;border-radius:14px 14px 5px 5px}.mode-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.mode-details{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:13px 14px 14px;gap:7px;width:100%;border-radius:0 0 13px 13px}.mode-name{font-size:27px;letter-spacing:.02em;color:#162d51;font-weight:950;line-height:1.2}.mode-description{font-size:14px;line-height:1.6;color:#345371;font-weight:550}.mode-badge{font-size:11px;line-height:1.4;padding:3px 9px;color:#4888ab;background:#ffffff88}.mode-cta{border:0;border-radius:100px;width:calc(100% - 26px);margin:0 auto 13px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:47px;font-size:18px;font-weight:900;box-shadow:0 5px 10px #104d8523;color:white}.mode-cta>span{font-size:21px}.mode-blind .mode-details{background:#e9faf2}.mode-blind .mode-cta{background:linear-gradient(180deg,#16b86e,#03914e)}.mode-route .mode-details{background:#fff4e4}.mode-route .mode-cta{background:linear-gradient(180deg,#ff8a2e,#ed681c)}.mode-easy .mode-details{background:#e8f4ff}.mode-easy .mode-cta{background:linear-gradient(180deg,#178dea,#0770c6)}.mode-mixed .mode-details{background:#f1eaff}.mode-mixed .mode-cta{background:linear-gradient(180deg,#9862e5,#743cce)}
/* Desktop right column */
.side-column>.leaderboard-card{padding:17px 18px;min-height:360px}.leaderboard-head h3{font-size:21px;color:#153456}.leaderboard-head .board-local{font-size:12px;font-weight:750;background:#eaf4fc;color:#47769a}.leaderboard-rows{margin-top:15px;gap:0}.leaderboard-person{background:transparent;border-top:1px solid #e8eef5;border-radius:0;padding:14px 3px;gap:10px}.leaderboard-person.top1{background:#fffaf0;border-radius:10px}.leaderboard-rank{min-width:32px;font-size:26px;color:#e0a620;font-weight:950}.leaderboard-person img{width:52px;height:52px}.leaderboard-info strong{font-size:17px;color:#102b4b}.leaderboard-info small{font-size:12px;color:#6f83a0;background:#edf5ff;border-radius:100px;padding:3px 7px;display:inline-block;margin-top:3px}.leaderboard-level{font-size:17px;color:#132c51}.leaderboard-meter{height:6px;background:#e0e9f3;border-radius:90px;margin-top:6px;overflow:hidden}.leaderboard-meter span{display:block;height:100%;background:linear-gradient(90deg,#2fa0f9,#2a77d0);border-radius:99px}.top1 .leaderboard-meter span{background:linear-gradient(90deg,#f9c642,#eda622)}
.side-column>.summary{padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}.summary .stat-heading{grid-column:1/-1;padding:3px;border:none;background:transparent;box-shadow:none}.stat-heading h3{font-size:21px;color:#153456;margin:0 0 5px}.summary>div:not(.stat-heading){border:1px solid #e0eaf5;border-radius:13px;padding:17px 10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:108px;gap:5px;text-align:center;box-shadow:0 2px 5px #204a6920}.summary small{font-size:13px;font-weight:600;color:#70839b}.summary strong{font-size:29px;font-weight:950;color:#152d53}.summary small[hidden]{display:none}.side-column .score-toolbar{margin:0;padding:0}.side-column .score-toolbar #resetScores{width:100%;min-height:49px;border:0;border-radius:12px;font-size:15px;color:#fff;background:linear-gradient(95deg,#ff666b,#ed414e);box-shadow:0 5px 12px #ff5d6330}
/* Accessible, fully functional controls in a compact settings area */
.training-settings{margin:16px 0 0;border:1px solid #e1eaf5;border-radius:20px;background:#fff;box-shadow:0 9px 22px #26496911;padding:18px 20px 14px;scroll-margin-top:25px}.setting-title{display:flex;gap:15px;align-items:center;margin:0 0 15px}.setting-title h2{font-size:21px;margin:0;color:#15375b}.setting-title p{font-size:13px;color:#7890a5;margin:0}.quick-settings{display:grid;grid-template-columns:minmax(250px,.95fr) minmax(320px,1.15fr) minmax(230px,.75fr);gap:14px;align-items:center}.area-summary{border:1px solid #dfebf6;display:flex;gap:9px;align-items:center;min-width:0;padding:9px 10px;border-radius:11px}.area-summary label{font-size:14px;color:#244362;font-weight:800;white-space:nowrap}.area-summary select{flex:1;min-width:0;padding:9px 6px;border:0;border-radius:8px;color:#204668;background:#f1f7ff;cursor:pointer;font-weight:750}.compact-question-count{display:flex;gap:9px;margin:0;align-items:center;border:1px solid #dfebf6;border-radius:11px;padding:10px;flex-wrap:wrap}.compact-question-count label{font-size:14px;white-space:nowrap}.compact-question-count input{min-width:65px;width:70px;flex:0 0 70px;padding:7px 6px;text-align:center;background:#edf6ff;color:#1d5082;border:0;border-radius:8px;font-weight:850}.compact-question-count small{display:none}.count-icon{font-size:21px;color:#0a81d5}.count-presets{display:flex;gap:4px;margin-left:auto}.count-presets button{min-height:34px;min-width:37px;font-size:12px;white-space:nowrap;padding:4px 6px;border:1px solid #d5e4f2;border-radius:10px;background:#fff;color:#28547d;font-weight:800}.count-presets button.active,.count-presets button:hover{background:#2083df;border-color:#2083df;color:white}.main-start{width:100%;min-height:56px;border:0;border-radius:13px;background:linear-gradient(95deg,#1596f2,#086dc8);color:#fff;font-size:19px;font-weight:950;box-shadow:0 5px 15px #007bd23b}.main-start:hover{filter:brightness(1.08)}
.training-settings .village-selector{padding:12px 14px 10px;margin:15px 0 0;box-shadow:none;border:1px dashed #c9dceb;background:#fafcff;border-radius:12px}.training-settings .village-selector-head{display:flex;justify-content:space-between;align-items:center}.training-settings .village-selector-head h3{font-size:14px;margin:0}.training-settings .village-selector-head p{margin:0;font-size:11px}.toggle-village{border:1px solid #b9d7f0;background:#eef7ff;border-radius:9px;color:#1a6caa;padding:8px 10px;font-size:13px;font-weight:850;white-space:nowrap}.village-selector.is-collapsed .village-presets,.village-selector.is-collapsed .village-options,.village-selector.is-collapsed .village-notice{display:none}.village-selector:not(.is-collapsed) .village-presets{margin-top:16px}.training-settings>.footnote{margin:8px 0 0;font-size:11px;color:#91a2b3}.footer{display:flex;justify-content:space-between;gap:15px;padding:16px max(22px,calc((100vw - 1400px)/2));background:linear-gradient(90deg,#f5fbff,#dceefe);color:#62819e;font-weight:750;font-size:12px}
/* Existing quiz dialogs and route work remains unmodified, just visually harmonized */
.quiz,.finished{margin-top:24px}.question-card,.finished{box-shadow:0 14px 35px #1d48621a}.quiz-bar{margin:5px 0 16px}.back-home-button{border:0;background:#217fc9;color:white}.question-card h2{color:#153655}.choice:hover:not(:disabled){transform:translateY(-1px)}.quiz-actions .primary,.finished .primary{background:linear-gradient(110deg,#1387dd,#0867b7)}
@media(max-width:1250px){.brand-title{font-size:22px}.dashboard-grid{grid-template-columns:minmax(250px,.95fr) minmax(440px,1.6fr) minmax(255px,1fr);gap:10px}.page{width:calc(100% - 28px)}.mode-image{min-height:115px}.mode-name{font-size:23px}.mode-description{font-size:13px}.quick-settings{grid-template-columns:minmax(170px,1fr) minmax(300px,1.4fr)}.main-start{grid-column:1/-1}.top-nav{gap:7px}.nav-action{min-width:59px}.header-profile{gap:4px}}
@media(max-width:990px){.game-topbar{flex-wrap:wrap;gap:12px;padding:12px 18px}.brand{flex:1}.top-nav{order:3;width:100%;justify-content:space-around;min-height:60px;background:#0f3158;border-radius:12px}.dashboard-grid{grid-template-columns:minmax(250px,.9fr) minmax(400px,1.5fr)}.side-column{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:start}.side-column .score-toolbar{grid-column:1/-1}.mode-grid{min-height:710px}.growth-person>strong{font-size:25px}}
@media(max-width:700px){.game-topbar{gap:8px;padding:8px 12px}.brand-shield{height:39px;width:36px;font-size:22px}.brand-title{font-size:17px}.brand-separator{display:none}.version-pill{font-size:10px;padding:5px 7px}.header-profile img{height:34px;width:34px}.header-profile span#headerProfileName{font-size:12px}.top-nav{min-height:51px}.nav-action{font-size:11px;min-width:0;flex:1}.nav-emoji{font-size:23px}.page{width:calc(100% - 20px);margin:12px auto}.dashboard-grid{grid-template-columns:1fr;gap:12px}.profile-column .growth-card{padding:0}.growth-hero{padding:19px 12px 10px;gap:8px}.growth-person>strong{font-size:26px}.avatar-button{width:145px;height:145px}.avatar-exp-ring{height:137px;width:137px}.avatar-exp-ring:before{height:119px;width:119px}.avatar-exp-ring img{height:108px;width:108px}.avatar-edit{height:33px;width:33px}.avatar-gallery{padding:15px}.avatar-inline-list{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}.avatar-inline-item{border-width:1px}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:0}.mode{padding:5px;border-radius:14px;height:auto;min-height:280px}.mode-image{height:124px;min-height:0;flex:none}.mode-details{padding:10px;gap:6px}.mode-name{font-size:19px}.mode-description{font-size:12px;line-height:1.45}.mode-badge{font-size:9px;padding:2px 5px}.mode-cta{width:calc(100% - 13px);margin-bottom:8px;min-height:38px;font-size:13px;padding:5px}.side-column{display:flex;grid-column:auto}.side-column>.leaderboard-card{min-height:0}.side-column>.summary{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-settings{grid-template-columns:1fr;gap:10px}.main-start{grid-column:auto}.setting-title{flex-wrap:wrap;gap:5px}.training-settings{padding:16px 11px}.training-settings .village-selector-head h3{font-size:13px}.training-settings .village-selector-head p{font-size:10px}.compact-question-count{flex-wrap:wrap}.count-presets{margin-left:0}.footer{flex-direction:column;align-items:center;text-align:center;gap:4px}.mode-image img{object-position:center}.growth-actions{padding-bottom:10px}.avatar-gallery-head span{display:none}}
@media(max-width:380px){.brand-title{font-size:15px}.mode-name{font-size:17px}.mode-description{font-size:11px}.mode-image{height:105px}.mode{min-height:265px}.count-presets{width:100%;justify-content:space-between}.header-profile span#headerProfileName{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.mode>.mode-cta{color:#fff!important}.mode>.mode-details>.mode-description{color:#315171}.mode>.mode-details>.mode-badge{color:#457995}
/* Mobile tap targets and full-width secondary panels */
.growth-actions #savedHint{display:inline;font-size:11px;color:#a04740}
@media(max-width:700px){.side-column{align-items:stretch}.avatar-inline-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.avatar-inline-item{min-height:48px;border-width:2px}}