:root {
  --ink:#2a2350; --cream:#fffaf0; --gold:#ffc01e; --gold-deep:#d99500;
  --blue:#2f7bff; --grass:#7ed957; --muted:#625e77; --line:#d2e2e9;
  font-family:Nunito,system-ui,sans-serif; color:var(--ink); font-synthesis:none;
  text-rendering:optimizeLegibility;
}
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:#eef9fd; }
button,input { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex="0"]:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
#app:focus { outline:none; }
h1,h2,h3,p { margin:0; }
h1,h2,h3,.brand-name,.equation,.island-number { font-family:Fredoka,Nunito,system-ui,sans-serif; font-weight:600; }
a { color:inherit; }
svg { display:block; }
.icon { display:inline-block; width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
.game-shell { max-width:1280px; margin:auto; padding:0 40px; }
.topbar { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:2px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border:3px solid var(--ink); border-radius:16px; background:var(--gold); box-shadow:0 4px 0 var(--gold-deep); font:600 30px Fredoka,sans-serif; transform:rotate(-5deg); }
.brand-name { font-size:24px; line-height:1.15; letter-spacing:-.5px; }
.brand small { display:block; font:900 10px Nunito,sans-serif; letter-spacing:1.4px; color:var(--muted); text-transform:uppercase; margin-top:4px; }
.top-actions { display:flex; gap:12px; }
.sound-toggle { display:grid; place-items:center; width:44px; height:44px; border:2px solid var(--ink); border-radius:14px; background:white; box-shadow:0 3px 0 #d2dce5; }
#app { padding:32px 0 12px; }
.page-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:32px; margin-bottom:28px; align-items:center; }
.eyebrow { grid-column:1; display:block; font-size:10px; font-weight:900; letter-spacing:1.7px; line-height:1.5; color:#36717d; margin-bottom:8px; }
.page-heading h1 { grid-column:1; font-size:clamp(34px,4vw,46px); line-height:1.1; letter-spacing:-1.1px; }
.page-heading p { grid-column:1; color:var(--muted); font-size:14px; line-height:1.65; font-weight:700; margin-top:10px; max-width:620px; }
.study-entry { grid-column:2; grid-row:1/4; align-self:center; white-space:nowrap; }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:12px 18px; border:3px solid var(--ink); border-radius:15px; background:var(--gold); box-shadow:0 5px 0 var(--gold-deep); font-size:14px; font-weight:900; line-height:1.3; text-decoration:none; transition:transform .12s,box-shadow .12s,background .12s; }
.primary-button:hover:not(:disabled) { background:#ffd04c; }
.secondary-button { background:white; box-shadow:0 5px 0 #d2d7e1; }
.secondary-button:hover { background:#f8fbff; }
.primary-button:active:not(:disabled),.secondary-button:active { transform:translateY(4px); box-shadow:0 1px 0 #c9bd98; }
.primary-button:disabled { background:#e5e6e4; box-shadow:0 5px 0 #c8cad0; color:#767384; }
.adventure-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
.map-panel { position:relative; border:3px solid var(--ink); border-radius:28px; background:linear-gradient(170deg,#c4edf6,#b0e1ed 65%,#c4edf6); overflow:hidden; box-shadow:0 6px 0 #cfdee7; }
.map-panel:before,.map-panel:after { content:''; position:absolute; pointer-events:none; width:480px; height:480px; border:2px solid #ffffff65; border-radius:50%; left:-380px; top:250px; box-shadow:0 0 0 30px #ffffff12,0 0 0 65px #ffffff0e; }
.map-panel:after { left:auto; right:-380px; top:690px; }
.map-topline { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 22px 18px; color:#366a77; font-size:11px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; }
.map-topline>span { display:flex; align-items:center; gap:8px; }
.map-topline>span:last-child { border:1px solid #fff9; background:#ffffff85; padding:6px 11px; border-radius:20px; letter-spacing:0; text-transform:none; }
.island-map { position:relative; width:100%; max-width:760px; height:1120px; margin:auto; isolation:isolate; }
.route-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.island-node { position:absolute; width:164px; display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-53px); z-index:2; }
.island-button { position:relative; width:150px; height:110px; padding:0; border:0; background:transparent; overflow:visible; transition:transform .15s ease; }
.island-art { width:150px; height:110px; overflow:visible; }
.island-button:not(:disabled):hover { transform:translateY(-4px); }
.island-button:not(:disabled):active { transform:translateY(2px); }
.island-button[data-state=locked] { filter:saturate(.6); }
.island-button[aria-pressed=true]:before { content:''; position:absolute; inset:12px 2px 15px; border:2px dashed #fff; outline:4px solid #ffffff40; border-radius:50%; pointer-events:none; }
.island-button:focus-visible { outline:3px solid var(--blue); outline-offset:4px; border-radius:40%; }
.island-number { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); font-size:32px; line-height:1; text-shadow:0 2px 0 #ffffff85; }
.island-button[data-state=locked] .island-number { color:#3f565b; }
.island-status { position:absolute; right:7px; top:18px; display:grid; place-items:center; width:25px; height:25px; background:#fffaf0; border:2px solid var(--ink); border-radius:50%; }
.island-status .icon { width:13px; height:13px; }
.island-button[data-state=complete] .island-status { background:var(--gold); }
.island-flag { position:absolute; top:-6px; right:12px; color:var(--ink); }
.island-flag .icon { width:28px; height:32px; }
.island-stars { display:flex; gap:3px; height:18px; margin-top:-1px; }
.island-stars .icon { width:17px; height:17px; }
.earned { color:#d99300; }
.empty { color:#7798a0; opacity:.5; }
.island-label { display:block; font-size:13px; font-weight:900; line-height:1.35; text-align:center; margin-top:5px; color:#304957; white-space:nowrap; padding:3px 7px; border-radius:9px; background:#c0e9f2; }
.chapter-label { position:absolute; transform:translateX(-50%); white-space:nowrap; font-size:9px; font-weight:900; letter-spacing:1.2px; color:#386b77; background:#ffffff80; border:1px solid #ffffffa0; border-radius:20px; padding:6px 12px; }
.map-decoration { position:absolute; pointer-events:none; z-index:-1; opacity:.65; }
.map-decoration.cloud { width:65px; height:19px; border-radius:30px; background:#ffffffa6; }
.map-decoration.cloud:before,.map-decoration.cloud:after { content:''; position:absolute; bottom:5px; left:11px; width:25px; height:25px; background:#ffffffa6; border-radius:50%; }
.map-decoration.cloud:after { left:28px; width:32px; height:32px; }
.map-decoration.wave { color:#fff; font-size:23px; letter-spacing:3px; }
.map-decoration.compass { color:#fff; font-size:48px; }
.journey-panel { position:sticky; top:24px; display:flex; flex-direction:column; gap:20px; }
.quest-card,.progress-card,.tip-card { border:3px solid var(--ink); border-radius:24px; padding:24px; background:var(--cream); box-shadow:0 5px 0 #d2dce5; }
.quest-card { position:relative; overflow:hidden; }
.quest-card:before { content:''; position:absolute; right:-30px; top:-35px; width:118px; height:118px; border-radius:50%; background:#ffe59470; pointer-events:none; }
.quest-kicker { position:relative; display:block; color:#78602c; font-size:10px; font-weight:900; letter-spacing:1.15px; line-height:1.5; }
.level-badge { display:inline-flex; align-items:center; gap:7px; margin:19px 0 18px; padding:7px 10px; border:2px solid var(--ink); border-radius:11px; background:var(--gold); box-shadow:0 3px 0 var(--gold-deep); font-size:12px; font-weight:900; }
.level-badge .icon { width:17px; height:17px; }
.quest-card h2 { font-size:28px; line-height:1.15; letter-spacing:-.35px; }
.quest-card p { margin-top:10px; color:var(--muted); font-size:13px; line-height:1.6; font-weight:700; }
.facts { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 24px; }
.facts span { display:flex; align-items:center; gap:5px; background:white; border:1px solid #e7dfcb; border-radius:9px; padding:7px; font-size:10px; font-weight:900; }
.facts .icon { width:16px; height:16px; }
.quest-card .primary-button { width:100%; }
.quest-card .unlock-rule { margin-top:18px; font-size:12px; line-height:1.65; }
.best-score { padding-top:12px; border-top:1px solid #e5dece; }
.progress-card { background:white; }
.progress-card h3,.tip-card h3 { display:flex; gap:8px; align-items:center; font-size:19px; line-height:1.3; margin-bottom:18px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:15px; color:var(--muted); font-size:12px; font-weight:800; }
.stat-row strong { color:var(--ink); font:600 22px Fredoka,sans-serif; white-space:nowrap; }
.stat-row small { font-size:14px; color:var(--muted); }
.progress-track { height:12px; overflow:hidden; border:2px solid var(--ink); background:#e9eef3; border-radius:8px; margin:12px 0 18px; }
.progress-track>span { display:block; height:100%; background:var(--grass); border-radius:6px; }
.progress-card>p { padding-top:16px; margin-top:16px; border-top:1px solid #e5e9ef; font-size:11px; color:var(--muted); font-weight:700; line-height:1.6; }
.tip-card { display:flex; gap:10px; background:#e1f1e5; border:2px solid #9ab9a6; box-shadow:none; }
.tip-card>.icon { color:#37834b; margin-top:2px; }
.tip-card h3 { font-size:17px; margin-bottom:8px; }
.tip-card p { font-size:12px; line-height:1.7; color:#41604b; font-weight:700; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; font-size:11px; line-height:1.6; color:#647383; font-weight:700; }
.site-footer a { text-underline-offset:3px; }
.play-layout { max-width:620px; width:100%; margin:auto; }
.play-topline { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; font-size:13px; text-align:right; }
.question-card,.result-card { border:3px solid var(--ink); border-radius:28px; background:var(--cream); box-shadow:0 6px 0 #d2dce5; text-align:center; padding:28px 38px; }
.question-meta { display:flex; justify-content:space-between; gap:16px; font-size:12px; font-weight:900; color:var(--muted); }
.question-dots { display:flex; justify-content:center; gap:8px; margin:22px 0; }
.question-dots>span { width:12px; height:12px; border:2px solid var(--ink); border-radius:50%; background:#e7e9e5; }
.question-dots>span[data-state=correct] { background:var(--grass); }
.question-dots>span[data-state=wrong] { background:#ff9292; }
.question-dots>span[data-state=current] { background:var(--gold); box-shadow:0 0 0 3px #ffe38d; }
.equation { font-size:58px; line-height:1.25; letter-spacing:-1px; margin:4px 0 20px; }
.equation>span { color:#726685; }
.answer-display { display:block; width:100%; max-width:360px; min-width:0; height:72px; margin:auto; border:3px solid var(--ink); border-radius:17px; padding:7px 18px; background:white; box-shadow:0 4px 0 #e0dbc9; font:600 39px Fredoka,sans-serif; text-align:center; }
.feedback { display:flex; justify-content:center; align-items:center; gap:8px; min-height:68px; padding:10px 0; font-size:14px; font-weight:800; line-height:1.5; }
.feedback[data-kind=correct] { color:#2d7b40; }
.feedback[data-kind=wrong] { flex-direction:column; gap:2px; color:#a93143; }
.feedback[data-kind=wrong]>span { font-size:12px; }
.numpad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:360px; margin:0 auto 22px; }
.numpad button { height:54px; border:3px solid var(--ink); border-radius:14px; background:white; box-shadow:0 4px 0 #d9d6df; font:600 27px Fredoka,sans-serif; }
.numpad button:hover:not(:disabled) { background:#fff1c4; }
.numpad button:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px 0 #d9d6df; }
.numpad button:disabled { opacity:.45; }
.question-card>.primary-button { width:100%; max-width:360px; }
.keyboard-hint { color:var(--muted); font-size:11px; font-weight:700; margin-top:20px; line-height:1.5; }
.result-medal { display:grid; place-items:center; width:84px; height:84px; border:3px solid var(--ink); border-radius:26px; background:var(--gold); box-shadow:0 5px 0 var(--gold-deep); margin:0 auto 22px; transform:rotate(-5deg); }
.result-medal .icon { width:46px; height:46px; }
.result-stars { display:flex; justify-content:center; gap:10px; margin-bottom:20px; }
.result-stars .icon { width:33px; height:33px; }
.result-card h1 { font-size:34px; line-height:1.15; }
.result-card>p { margin:14px auto 0; max-width:410px; color:var(--muted); font-size:14px; font-weight:700; line-height:1.65; }
.result-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0; }
.result-stats>div { background:white; border:2px solid #e5dece; border-radius:16px; padding:16px; }
.result-stats strong { display:block; font:600 30px Fredoka,sans-serif; }
.result-stats small { font-size:18px; color:var(--muted); }
.result-stats span { display:block; margin-top:5px; color:var(--muted); font-size:12px; font-weight:800; }
.result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:24px; }
.result-actions>.primary-button { width:100%; }
.review-list { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:16px; background:#fff; border:2px solid #e5dece; border-radius:16px; }
.review-list h3 { flex-basis:100%; font-size:18px; margin-bottom:4px; }
.review-list>span { padding:7px 10px; border-radius:8px; background:#f4f7fa; font-size:14px; font-weight:700; }
.exit-dialog { width:calc(100% - 32px); max-width:430px; padding:28px; border:3px solid var(--ink); border-radius:24px; background:var(--cream); color:var(--ink); }
.exit-dialog::backdrop { background:#191c3f70; backdrop-filter:blur(3px); }
.exit-dialog h2 { font-size:27px; }
.exit-dialog p { margin-top:14px; color:var(--muted); font-size:14px; font-weight:700; line-height:1.6; }
.study-layout { max-width:960px; margin:auto; min-width:0; }
.study-layout>h1 { margin-top:24px; font-size:36px; line-height:1.2; }
.study-layout>p { font-size:14px; line-height:1.65; font-weight:700; color:var(--muted); margin:10px 0 24px; }
.study-card { min-width:0; border:3px solid var(--ink); border-radius:24px; padding:26px; background:var(--cream); box-shadow:0 5px 0 #d2dce5; margin-bottom:26px; }
.study-card h2 { font-size:27px; margin-bottom:10px; }
.study-card>p { font-size:13px; font-weight:700; color:var(--muted); line-height:1.65; margin:10px 0 18px; }
.study-table-wrap { width:100%; overflow:auto; border:2px solid var(--ink); border-radius:15px; background:white; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#93b4c4 #e4f0f5; }
.study-table { width:100%; min-width:510px; border-collapse:separate; border-spacing:0; table-layout:fixed; text-align:center; font-size:17px; font-weight:800; }
.study-table caption { padding:12px; background:#f5f9fb; font-size:12px; color:var(--muted); }
.study-table th,.study-table td { height:45px; padding:7px 4px; border-right:1px solid #dedee5; border-bottom:1px solid #dedee5; }
.study-table th { font:600 19px Fredoka,sans-serif; background:#ffdf73; }
.study-table th:first-child { position:sticky; left:0; border-right:2px solid var(--ink); }
.study-table thead th { border-bottom:2px solid var(--ink); }
.study-table tr:nth-child(even) td { background:#f0f7fa; }
.study-table tr:hover td { background:#fff4ce; }
.study-table td:hover { background:#ffdf73!important; }
.study-table tr:last-child>* { border-bottom:0; }
.study-table tr>:last-child { border-right:0; }
.study-tabs { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:9px; margin:22px 0 28px; }
.study-tabs button { padding:6px; font:600 20px Fredoka,sans-serif; border-width:2px; border-radius:12px; min-height:46px; }
.study-toolbar { margin:18px 0 24px; }
.study-facts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.study-fact { min-height:80px; padding:12px 6px; border:2px solid #cfdce0; border-radius:15px; background:white; font:500 20px Fredoka,sans-serif; white-space:nowrap; }
.study-fact[aria-pressed=true] { background:#ebf5e9; border-color:#c7dbc3; }
.study-fact:hover { background:#fff1c4; border-color:#d4b75d; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1000px) {
  .game-shell { padding:0 28px; }
  .adventure-layout { grid-template-columns:minmax(0,1fr) 290px; gap:20px; }
  .quest-card,.progress-card,.tip-card { padding:20px; }
  .island-node { width:142px; transform:translate(-50%,-46px); }
  .island-button,.island-art { width:130px; height:95px; }
  .island-number { font-size:29px; }
  .island-label { font-size:12px; }
}
@media(max-width:900px) {
  .adventure-layout { display:flex; flex-direction:column; gap:22px; }
  .journey-panel { display:contents; }
  .quest-card { order:1; width:100%; display:grid; grid-template-columns:1fr 240px; gap:0 24px; align-items:center; }
  .quest-kicker,.quest-card h2,.quest-card>p:not(.unlock-rule),.quest-card .level-badge { grid-column:1; }
  .quest-card .level-badge { justify-self:start; margin:14px 0; }
  .quest-card .facts { grid-column:2; grid-row:1/3; margin:0 0 12px; }
  .quest-card .primary-button { grid-column:2; grid-row:3; }
  .quest-card .unlock-rule { grid-column:2; grid-row:4/6; }
  .map-panel { order:2; width:100%; }
  .progress-card { order:3; width:100%; }
  .tip-card { order:4; width:100%; }
  .island-node { width:164px; transform:translate(-50%,-53px); }
  .island-button,.island-art { width:150px; height:110px; }
  .island-label { font-size:13px; }
  .study-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .game-shell { padding:0 16px; }
  .topbar { min-height:78px; }
  .brand-mark { width:40px; height:40px; border-radius:13px; font-size:26px; }
  .brand-name { font-size:21px; }
  .brand small { font-size:8px; letter-spacing:1.2px; }
  #app { padding-top:24px; }
  .page-heading { display:block; margin-bottom:24px; }
  .page-heading h1 { font-size:35px; }
  .eyebrow { font-size:9px; letter-spacing:1.25px; }
  .page-heading p { font-size:13px; }
  .study-entry { margin-top:17px; font-size:13px; }
  .quest-card { display:block; padding:20px; }
  .quest-card h2 { font-size:27px; }
  .quest-card .level-badge { margin:14px 0; }
  .quest-card .facts { margin:16px 0 20px; }
  .quest-card .unlock-rule { margin-top:16px; }
  .quest-card,.progress-card,.tip-card { border-radius:22px; }
  .map-panel { border-radius:24px; }
  .map-topline { margin:17px 15px 16px; font-size:10px; }
  .island-map { height:1120px; }
  .island-node { width:128px; transform:translate(-50%,-38px); }
  .island-button,.island-art { width:108px; height:79px; }
  .island-number { font-size:27px; }
  .island-status { right:1px; top:7px; width:22px; height:22px; }
  .island-status .icon { width:11px; height:11px; }
  .island-flag { top:-12px; right:4px; }
  .island-flag .icon { width:24px; height:28px; }
  .island-stars { margin-top:2px; }
  .island-stars .icon { width:16px; height:16px; }
  .island-label { font-size:11px; padding:3px 5px; }
  .chapter-label { font-size:8px; letter-spacing:1px; padding:5px 9px; }
  .map-decoration.cloud { transform:scale(.75); }
  .map-decoration.compass { font-size:32px; }
  .site-footer { flex-direction:column; gap:8px; text-align:center; padding:24px 0; font-size:10px; }
  .play-topline { gap:12px; font-size:11px; margin-bottom:20px; }
  .play-topline .secondary-button { font-size:12px; min-height:44px; padding:10px 12px; flex-shrink:0; }
  .question-card,.result-card { padding:22px 18px; border-radius:24px; }
  .equation { font-size:46px; margin-bottom:16px; }
  .question-dots { gap:7px; margin:20px 0; }
  .answer-display { height:62px; font-size:35px; }
  .feedback { min-height:62px; font-size:12px; }
  .numpad { gap:10px; margin-bottom:20px; }
  .numpad button { height:51px; font-size:25px; }
  .keyboard-hint { display:none; }
  .result-card h1 { font-size:29px; }
  .result-card>p { font-size:13px; }
  .result-actions { flex-direction:column; }
  .result-stats { gap:10px; }
  .result-stats>div { padding:14px 8px; }
  .result-stats strong { font-size:28px; }
  .study-layout>h1 { font-size:30px; margin-top:22px; }
  .study-layout>p { font-size:13px; margin-bottom:22px; }
  .study-card { padding:18px; border-radius:22px; }
  .study-card h2 { font-size:25px; }
  .study-card>p { font-size:12px; }
  .study-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); margin:20px 0 26px; }
  .study-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .study-fact { min-height:72px; font-size:19px; }
  .study-table { font-size:15px; }
}
@media(max-width:370px) {
  .game-shell { padding:0 12px; }
  .page-heading h1 { font-size:32px; }
  .island-node { width:116px; }
  .island-label { font-size:10px; }
  .question-card { padding:20px 14px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}
/* The welcome and timed-round scenes share the same illustrated island world. */
.game-shell { position:relative; z-index:1; }
.scene-backdrop { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .3s; }
.scene-backdrop>svg { width:100%; height:100%; }
body[data-screen=home] .scene-backdrop,body[data-screen=play] .scene-backdrop,body[data-screen=ready] .scene-backdrop,body[data-screen=result] .scene-backdrop { opacity:1; }
body[data-screen=home] .topbar,body[data-screen=play] .topbar,body[data-screen=ready] .topbar,body[data-screen=result] .topbar { border-bottom-color:#54798122; }
.welcome-layout { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; min-height:calc(100svh - 230px); column-gap:12px; }
.welcome-copy { position:relative; z-index:1; padding:25px 0 20px; }
.welcome-copy .eyebrow { font-size:11px; color:#4b777b; letter-spacing:1.5px; margin-bottom:18px; }
.welcome-copy h1 { font-size:clamp(46px,5.1vw,70px); line-height:1.03; letter-spacing:-1.8px; text-shadow:0 3px 0 #ffffff85; }
.welcome-copy h1>span { color:#ad6b04; }
.welcome-copy>p { max-width:390px; font-size:17px; font-weight:700; line-height:1.7; color:#536577; margin-top:23px; }
.welcome-actions { display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-top:30px; }
.welcome-actions button { min-height:56px; min-width:256px; font-size:16px; padding:14px 22px; border-radius:17px; }
.welcome-actions .secondary-button { background:#ffffffbf; }
.welcome-note { margin-top:22px; font-size:12px; font-weight:800; color:#506974; line-height:1.6; }
.welcome-art { width:100%; margin-left:5%; }
.welcome-art>svg { width:100%; height:auto; overflow:visible; }
.welcome-features { grid-column:1/-1; display:flex; justify-content:center; flex-wrap:wrap; gap:34px; padding:24px 0; }
.welcome-features>span { display:flex; align-items:center; gap:8px; color:#365b63; font-size:13px; font-weight:900; }
.welcome-features .icon { color:#816216; width:18px; height:18px; }
body[data-screen=home] .site-footer,body[data-screen=play] .site-footer,body[data-screen=ready] .site-footer,body[data-screen=result] .site-footer { color:#385762; }
.ready-card { border:3px solid var(--ink); border-radius:28px; background:#fffaf0f5; box-shadow:0 7px 0 #41788c30; padding:32px; margin:24px 0; text-align:center; }
.ready-emblem { display:grid; place-items:center; background:var(--gold); border:3px solid var(--ink); border-radius:23px; width:72px; height:72px; margin:0 auto 26px; transform:rotate(-5deg); box-shadow:0 5px 0 var(--gold-deep); }
.ready-emblem .icon { width:38px; height:38px; }
.ready-card .eyebrow { margin-bottom:12px; }
.ready-card h1 { font-size:36px; line-height:1.15; }
.ready-card>p { margin-top:16px; font-weight:700; color:var(--muted); font-size:15px; line-height:1.7; }
.ready-rules { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0 30px; }
.ready-rules>span { display:block; background:white; border:2px solid #e6dfcf; border-radius:16px; padding:14px 8px; font-size:11px; font-weight:800; color:var(--muted); }
.ready-rules strong { display:block; font:600 30px Fredoka,sans-serif; color:var(--ink); margin-bottom:5px; }
.ready-card>.primary-button { width:100%; max-width:350px; }
.text-button { display:block; border:0; background:none; font-size:13px; color:var(--muted); font-weight:800; padding:14px; margin:14px auto 0; text-decoration:underline; text-underline-offset:3px; }
body[data-screen=play] #app { padding-top:20px; }
body[data-screen=play] .question-card { background:#fffaf0f7; }
.question-clock { display:flex; align-items:center; gap:7px; font-size:17px; font-weight:900; color:#417062; min-width:65px; justify-content:flex-end; }
.question-clock[data-urgent=true] { color:#ba3b3b; }
.time-track { height:8px; margin-top:13px; overflow:hidden; border-radius:6px; background:#e1e8df; }
.time-track>span { display:block; height:100%; width:100%; background:#69b774; border-radius:6px; transition:width .1s linear; }
.question-card:has(.question-clock[data-urgent=true]) .time-track>span { background:#e97368; }
.question-card[data-feedback=correct] { border-color:#327e43; box-shadow:0 7px 0 #327e4330,0 0 0 6px #8ddf9940; }
.question-card[data-feedback=wrong],.question-card[data-feedback=timeout] { border-color:#b74d54; box-shadow:0 7px 0 #b74d5430; }
.question-card[data-feedback=correct] .answer-display { background:#e1f4dc; border-color:#327e43; }
.question-card[data-feedback=wrong] .answer-display,.question-card[data-feedback=timeout] .answer-display { background:#fff0e7; border-color:#b74d54; }
.feedback[data-kind=timeout] { flex-direction:column; gap:2px; color:#a93143; }
.feedback[data-kind=timeout]>span { font-size:16px; }
.feedback[data-kind=correct] { font-size:22px; font-family:Fredoka,sans-serif; animation:answer-pop .3s ease-out; }
.feedback[data-kind=wrong]>span { font-size:18px; }
.feedback[data-kind=''] { color:#7b7985; font-size:12px; font-weight:700; }
.round-score { display:flex; justify-content:center; align-items:center; gap:8px; background:#ffffffb3; border:1px solid #ffffffbf; border-radius:20px; width:fit-content; max-width:100%; margin:20px auto 0; padding:8px 14px; font-size:12px; font-weight:900; color:#365b63; }
.round-score .icon { width:16px; height:16px; color:#b78012; }
.skipped-summary { font-size:12px!important; }
.hero-bird { transform-origin:270px 350px; animation:bird-bob 4s ease-in-out infinite; }
.float-star { transform-origin:343px 105px; animation:star-sway 5s ease-in-out infinite; }
.drift { animation:cloud-drift 14s ease-in-out infinite alternate; }
.drift-slow { animation:cloud-drift 21s ease-in-out infinite alternate-reverse; }
@keyframes bird-bob { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)} }
@keyframes star-sway { 0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)} }
@keyframes cloud-drift { from{transform:translateX(-12px)}to{transform:translateX(22px)} }
@keyframes answer-pop { from{transform:scale(.9)}to{transform:scale(1)} }
@media(max-width:900px) {
 .welcome-copy h1 { font-size:55px; }
 .welcome-copy>p { font-size:15px; }
 .welcome-art { margin-left:0; }
 .welcome-features { gap:22px; }
}
@media(max-width:600px) {
 .welcome-layout { grid-template-columns:1fr; min-height:0; }
 .welcome-copy { padding:8px 0 0; text-align:center; }
 .welcome-copy .eyebrow { font-size:9px; margin-bottom:12px; }
 .welcome-copy h1 { font-size:46px; }
 .welcome-copy>p { margin:15px auto 0; max-width:320px; font-size:14px; line-height:1.65; }
 .welcome-actions { flex-direction:column; align-items:stretch; gap:15px; margin:22px auto 0; max-width:320px; }
 .welcome-actions button { min-width:0; min-height:51px; font-size:14px; }
 .welcome-note { font-size:10px; margin-top:16px; }
 .welcome-art { width:82%; max-width:350px; margin:0 auto; }
 .welcome-features { gap:10px 18px; padding:5px 0 15px; }
 .welcome-features>span { font-size:10px; gap:5px; }
 .welcome-features .icon { width:14px; height:14px; }
 body[data-screen=home] .site-footer { padding-top:12px; }
 .ready-card { padding:25px 18px; margin:4px 0 0; border-radius:24px; }
 .ready-card h1 { font-size:31px; }
 .ready-card>p { font-size:13px; }
 .ready-rules { gap:7px; margin:22px 0 26px; }
 .ready-rules>span { font-size:10px; padding:12px 5px; }
 .ready-rules strong { font-size:25px; }
 .question-clock { font-size:16px; }
 body[data-screen=play] .question-card { padding-top:17px; padding-bottom:19px; }
 body[data-screen=play] .question-dots { margin:17px 0; }
 body[data-screen=play] .equation { font-size:44px; margin:0 0 13px; }
 body[data-screen=play] .answer-display { height:57px; }
 body[data-screen=play] .feedback { min-height:53px; padding:6px 0; }
 body[data-screen=play] .numpad { gap:9px; margin-bottom:18px; }
 body[data-screen=play] .numpad button { height:47px; }
 .round-score { margin-top:16px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { transition:none!important; animation:none!important; } }
.island-passes { margin-top:3px; font-size:11px; font-weight:900; line-height:1.4; color:#385b64; background:#e3f5f9; border:1px solid #82b8c7; border-radius:8px; padding:2px 9px; }
.mastery-summary { display:flex; justify-content:space-between; gap:12px; margin-top:20px; font-size:12px; color:var(--muted); font-weight:800; }
.mastery-summary strong { color:var(--ink); font-size:14px; }
.mastery-track { display:flex; gap:7px; margin:10px 0 18px; }
.mastery-track>span { display:grid; place-items:center; flex:1; min-height:22px; border:2px solid #c5d4d3; border-radius:7px; background:#edf2ef; color:transparent; }
.mastery-track>span[data-complete=true] { background:#a7da82; border-color:#629b59; color:#376337; }
.mastery-track .icon { width:14px; height:14px; }
.result-mastery { max-width:330px; margin:20px auto 0; }
.result-mastery>strong { display:block; font:600 30px Fredoka,sans-serif; }
.result-mastery>span { color:var(--muted); font-size:12px; font-weight:800; }
.result-mastery .mastery-track { margin-bottom:0; }
.ready-card .ready-mastery { font-size:12px; margin:0 0 22px; }
@media(min-width:601px) and (max-width:900px) {
 .quest-card .mastery-summary,.quest-card .mastery-track { grid-column:1; }
 .quest-card .mastery-track { margin-bottom:0; }
 .quest-card .unlock-rule { grid-row:4/8; }
}
/* Illustrated art direction: soft depth, clean silhouettes, cohesive landscape. */
body { background:#e7f7ff; }
.scene-backdrop { opacity:1; background:#dff3ff; transition:none; }
.scene-backdrop>img { width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.scene-backdrop:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#e9f8ff18,#effaff08); }
body[data-screen=map] .scene-backdrop,body[data-screen=study] .scene-backdrop { opacity:.28; }
.welcome-art { margin:0; filter:drop-shadow(0 20px 22px #2d879b20); }
.welcome-art>img { display:block; width:112%; max-width:none; height:auto; margin-left:-2%; }
.welcome-copy h1 { letter-spacing:-1.5px; text-shadow:0 3px 0 #ffffff9c; }
.welcome-copy h1>span { color:#ae6b00; }
.welcome-copy>p { color:#3e6174; }
.welcome-features { padding:16px 20px; margin-top:12px; background:#f6fcffd9; border:1px solid #ffffffc4; border-radius:20px; box-shadow:0 5px 20px #236a8320; }
.welcome-note { color:#355969; }
body[data-screen=home] .site-footer,body[data-screen=play] .site-footer,body[data-screen=ready] .site-footer,body[data-screen=result] .site-footer { width:fit-content; max-width:100%; margin:18px auto; padding:8px 16px; border-radius:14px; background:#f8fdffe0; font-size:10px; }
.brand-mark { background:linear-gradient(#ffd95b,#ffc026); border-color:#393456; box-shadow:0 4px 0 #d3941b,0 7px 12px #6c833720,inset 0 2px 0 #fff7; transform:rotate(-4deg); }
.primary-button { background:linear-gradient(#ffdc64,#ffc12b); box-shadow:0 5px 0 #d99a1b,0 7px 12px #74561915,inset 0 2px 0 #fff8; }
.primary-button:hover:not(:disabled) { background:linear-gradient(#ffe383,#ffcb3e); }
.secondary-button { box-shadow:0 4px 0 #bdcbd7,0 7px 12px #4069810e; }
.map-panel { background:linear-gradient(160deg,#d4f3f8,#bce8ed 60%,#ceeff3); border-color:#506d83; box-shadow:0 6px 0 #afcbd4,0 14px 32px #387f9315; }
.map-panel:before,.map-panel:after { border-color:#ffffff65; box-shadow:0 0 0 22px #ffffff10,0 0 0 48px #ffffff0c; }
.island-node { width:184px; transform:translate(-50%,-48px); }
.island-button,.island-art { display:block; width:170px; height:127px; }
.island-art { object-fit:contain; filter:drop-shadow(0 8px 6px #477c7d25); }
.island-button[data-state=locked] { filter:saturate(.55); opacity:.88; }
.island-button[data-state=current] .island-art { filter:drop-shadow(0 0 9px #fff9) drop-shadow(0 8px 6px #477c7d25); }
.island-button[aria-pressed=true]:before { inset:28px 25px 46px; border:0; outline:0; background:radial-gradient(ellipse,#fff9,transparent 70%); z-index:1; }
.island-number { z-index:2; top:38%; color:#315235; font-size:32px; text-shadow:0 1px 0 #efffd7,0 2px 3px #fff4; }
.island-button[data-state=locked] .island-number { color:#415746; }
.island-stars { margin-top:-8px; }
.island-stars .earned { color:#dc9b10; filter:drop-shadow(0 1px 0 #fff); }
.island-stars .empty { color:#7095a0; opacity:.4; }
.island-label { background:#d8f2f6; color:#345565; font-size:12px; padding:2px 7px; }
.island-passes { background:#f5fcfe; color:#3c6674; border-color:#99c4cf; font-size:10px; padding:1px 8px; margin-top:2px; }
.island-status { right:17px; top:16px; border:2px solid #6b8a77; color:#506657; background:#fffdf2; box-shadow:0 2px 4px #477c7d20; }
.island-flag { right:21px; top:2px; z-index:3; color:#d28b12; filter:drop-shadow(0 1px 0 #fff); }
.island-flag .icon { width:25px; height:29px; }
.chapter-label { color:#4f7885; background:#ffffffb5; border-color:#e9fbff; font-size:9px; letter-spacing:1.15px; }
.quest-card,.progress-card,.question-card,.result-card,.ready-card,.study-card { border-color:#3d3a59; box-shadow:0 6px 0 #657b8a24,0 14px 30px #466f8114; }
.quest-card,.question-card,.result-card,.ready-card,.study-card { background:linear-gradient(145deg,#fffdf6,#fff9e9); }
.tip-card { background:#e7f4e7; border-color:#a2c3a6; }
.ready-emblem { width:175px; height:127px; margin:0 auto 14px; border:0; background:none; box-shadow:none; transform:none; position:relative; display:block; }
.ready-emblem>span { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); font:600 36px Fredoka,sans-serif; color:#315235; text-shadow:0 1px 0 #fff; }
.result-medal { background:linear-gradient(#ffe9a2,#ffc634); border-color:#8d641f; box-shadow:0 5px 0 #cc951f,0 7px 15px #cf9e1f2c; color:#96631a; transform:none; border-radius:28px; }
.numpad button { background:linear-gradient(#ffffff,#f9fbff); box-shadow:0 4px 0 #bfc8d6,inset 0 2px 0 #fff; }
.progress-card,.round-score,.ready-rules>span { box-shadow:0 4px 14px #4b798512; }
@media(max-width:1000px) and (min-width:901px) {
 .island-node { width:156px; transform:translate(-50%,-42px); }
 .island-button,.island-art { width:150px; height:112px; }
 .island-number { font-size:29px; }
}
@media(max-width:600px) {
 .welcome-art { width:85%; max-width:350px; margin:5px auto 0; }
 .welcome-art>img { width:100%; margin:0; }
 .welcome-features { gap:9px 16px; padding:13px 10px; margin-top:4px; border-radius:16px; }
 .welcome-copy h1 { font-size:44px; }
 .welcome-copy .eyebrow { color:#45687a; }
 .island-node { width:134px; transform:translate(-50%,-36px); }
 .island-button,.island-art { width:128px; height:96px; }
 .island-number { font-size:27px; }
 .island-label { font-size:10px; }
 .island-stars { margin-top:-5px; }
 .island-status { right:10px; top:9px; width:21px; height:21px; }
 .island-flag { right:13px; top:-4px; }
 .island-flag .icon { width:22px; height:25px; }
 .ready-emblem { width:160px; height:118px; }
 .ready-emblem .island-art { width:160px; height:118px; }
 .ready-emblem>span { font-size:33px; }
 .scene-backdrop>img { object-position:48% bottom; }
}