:root {
  --ink: #292448;
  --muted: #706b89;
  --purple: #6c5ce7;
  --purple-dark: #5142c7;
  --pink: #fd79a8;
  --yellow: #ffd166;
  --mint: #55d6be;
  --red: #e95768;
  --paper: #ffffff;
  --bg: #f5f2ff;
  --border: #dfd9f4;
  --shadow: 0 18px 50px rgba(67, 49, 134, .14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(253,121,168,.18), transparent 25%),
    radial-gradient(circle at 92% 14%, rgba(85,214,190,.18), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(255,209,102,.2), transparent 28%),
    var(--bg);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell { width: min(980px, calc(100% - 28px)); margin: 0 auto; padding: 38px 0 56px; }
.screen { animation: appear .35s ease both; }
.hidden { display: none !important; }
.site-top-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.global-home-link { position: fixed; z-index: 1000; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 9px 14px; color: white; border: 2px solid rgba(255,255,255,.8); border-radius: 99px; background: var(--purple); box-shadow: 0 10px 26px rgba(67,49,134,.28); font-size: .9rem; font-weight: 900; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.global-home-link:hover { background: var(--purple-dark); transform: translateY(-2px); }
.global-home-link:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.site-home-link { display: inline-block; padding: 8px 12px; color: var(--purple); border-radius: 12px; background: rgba(255,255,255,.72); font-size: .9rem; font-weight: 900; text-decoration: none; }
.site-home-link:hover { background: white; }

.hero { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.mascot { width: 130px; height: 130px; flex: 0 0 auto; border: 4px solid white; border-radius: 34px; object-fit: cover; box-shadow: var(--shadow); transform: rotate(-4deg); }
.eyebrow { margin: 0 0 5px; color: var(--purple); font-size: .8rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.1rem, 6vw, 3.5rem); letter-spacing: -.05em; }
.hero p:last-child { margin: 6px 0 0; color: var(--muted); }

.setup-form { display: flex; min-height: calc(100vh - 230px); flex-direction: column; }
.settings-card { order: 2; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.settings-summary { display: flex; position: relative; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 58px 20px 24px; cursor: pointer; list-style: none; }
.settings-summary::-webkit-details-marker { display: none; }
.settings-summary::after { content: "⌄"; position: absolute; right: 25px; color: var(--purple); font-size: 1.7rem; font-weight: 900; line-height: 1; transition: transform .2s ease; }
.settings-card[open] .settings-summary::after { transform: rotate(180deg); }
.settings-summary span { font-size: 1.15rem; font-weight: 900; }
.settings-summary small { color: var(--muted); font-weight: 800; }
.settings-content { padding: 24px clamp(20px, 4vw, 38px) clamp(20px, 4vw, 38px); border-top: 2px solid var(--border); }
.play-mode-control { margin-bottom: 22px; padding: clamp(18px, 3vw, 26px); border: 2px solid var(--border); border-radius: 20px; background: white; }
.play-mode-selector-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.play-mode-selector-wrap h3 { margin: 0; color: var(--purple-dark); font-size: 1.25rem; }
.play-mode-selector { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 5px; padding: 5px; border-radius: 16px; background: var(--bg); }
.play-mode-selector input { position: absolute; opacity: 0; pointer-events: none; }
.play-mode-selector span { display: grid; min-height: 42px; place-items: center; padding: 0 15px; border-radius: 12px; color: var(--muted); font-weight: 900; cursor: pointer; transition: .18s ease; }
.play-mode-selector input:checked + span { color: white; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); box-shadow: 0 7px 16px rgba(81,66,199,.25); }
.play-mode-selector input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.play-mode-descriptions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.play-mode-description { padding: 15px 17px; border: 2px solid transparent; border-radius: 16px; background: var(--bg); transition: .18s ease; }
.play-mode-description.active { border-color: var(--purple); background: rgba(108,92,231,.09); }
.play-mode-description strong { color: var(--purple-dark); }
.play-mode-description p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; font-weight: 700; line-height: 1.4; }
.play-mode-description .adaptive-recommendation { color: #4236a8; font-weight: 900; }
.settings-mode-panel { overflow: hidden; border: 2px solid var(--border); border-radius: 20px; background: rgba(245,242,255,.52); }
.settings-mode-panel + .settings-mode-panel { margin-top: 18px; }
.settings-mode-summary { display: flex; position: relative; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 52px 18px 20px; cursor: pointer; list-style: none; }
.settings-mode-summary::-webkit-details-marker { display: none; }
.settings-mode-summary::after { content: "⌄"; position: absolute; right: 20px; color: var(--purple); font-size: 1.5rem; font-weight: 900; line-height: 1; transition: transform .2s ease; }
.settings-mode-panel[open] > .settings-mode-summary::after { transform: rotate(180deg); }
.settings-mode-summary span { color: var(--purple-dark); font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; }
.settings-mode-summary small { color: var(--muted); font-weight: 800; }
.settings-mode-content { padding: 4px clamp(18px, 3vw, 28px) clamp(20px, 3vw, 28px); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field > span, legend { font-weight: 800; }
.full-field { margin: 0 0 27px; padding: 0; border: 0; }
.field-help { margin: 4px 0 13px; color: var(--muted); font-size: .9rem; }
select { width: 100%; height: 50px; padding: 0 42px 0 14px; color: var(--ink); border: 2px solid var(--border); border-radius: 14px; background: var(--paper); cursor: pointer; outline: none; }
select:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(108,92,231,.12); }

.table-picker { display: grid; grid-template-columns: repeat(11, 1fr); gap: 8px; }
.table-option input { position: absolute; opacity: 0; pointer-events: none; }
.table-option span { display: grid; place-items: center; min-height: 45px; border: 2px solid var(--border); border-radius: 14px; background: white; font-weight: 900; cursor: pointer; transition: .18s ease; }
.table-option input:checked + span { color: white; border-color: var(--purple); background: var(--purple); transform: translateY(-2px); box-shadow: 0 7px 14px rgba(108,92,231,.24); }
.table-option input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.table-option.all span { font-size: .78rem; }

.primary-button, .secondary-button { min-height: 54px; padding: 0 24px; border: 0; border-radius: 16px; font-weight: 900; cursor: pointer; transition: .18s ease; }
.primary-button { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; margin-top: 26px; color: white; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); box-shadow: 0 10px 24px rgba(81,66,199,.3); font-size: 1.05rem; }
.start-game-area { display: flex; order: 1; flex: 1; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; }
.start-game-button { width: min(620px, 100%); min-height: 100px; margin-top: 0; border-radius: 28px; font-size: clamp(1.6rem, 4vw, 2.35rem); box-shadow: 0 15px 35px rgba(81,66,199,.32); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.settings-actions { display: flex; min-height: 44px; align-items: center; gap: 14px; margin-top: 24px; }
.default-settings-button { padding: 10px 16px; color: var(--purple); border: 2px solid var(--border); border-radius: 14px; background: white; font-weight: 900; cursor: pointer; transition: .18s ease; }
.default-settings-button:hover { border-color: var(--purple); transform: translateY(-2px); }
.form-status { margin: 0; color: #16806a; font-weight: 800; }
.form-error { min-height: 20px; margin: 15px 0 -10px; color: var(--red); font-weight: 800; }

.ready-screen { display: flex; min-height: calc(100vh - 100px); flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ready-icon { width: 280px; height: 280px; margin-bottom: 18px; border: 5px solid white; border-radius: 44px; object-fit: cover; box-shadow: var(--shadow); animation: bounce .8s infinite alternate; }
.ready-screen h2 { margin: 4px 0 10px; font-size: clamp(3rem, 10vw, 5.5rem); letter-spacing: -.06em; }
.ready-summary { max-width: 580px; margin: 0 0 30px; color: var(--muted); font-size: 1.1rem; font-weight: 800; }
.child-start-button { min-height: 100px; padding: 0 clamp(35px, 9vw, 80px); border: 0; border-radius: 28px; color: white; background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 18px 40px rgba(81,66,199,.35); font-size: clamp(1.7rem, 6vw, 2.7rem); font-weight: 900; cursor: pointer; transition: .18s ease; }
.child-start-button:hover { transform: translateY(-5px) scale(1.02); }
.edit-settings-button { margin-top: 22px; padding: 10px 16px; border: 0; color: var(--muted); background: transparent; text-decoration: underline; cursor: pointer; font-weight: 800; }

.game-screen { min-height: calc(100vh - 80px); }
.game-header { display: flex; align-items: center; gap: 18px; }
.icon-button { width: 50px; height: 50px; flex: 0 0 auto; border: 0; border-radius: 15px; color: var(--purple); background: white; box-shadow: 0 7px 20px rgba(67,49,134,.12); cursor: pointer; font-size: 1.6rem; }
.game-progress { flex: 1; }
.progress-labels { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: .9rem; font-weight: 900; }
.progress-track { height: 12px; overflow: hidden; border-radius: 99px; background: #e5e0f5; }
.progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--purple)); transition: width .25s ease; }
.stars { min-width: 65px; color: #b86e00; font-size: 1.15rem; text-align: center; }

.timer-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 32px 0 18px; }
.timer { display: flex; align-items: baseline; gap: 4px; padding: 10px 22px; border: 3px solid var(--purple); border-radius: 99px; background: white; color: var(--purple); box-shadow: 0 8px 25px rgba(67,49,134,.12); font-weight: 900; }
.timer span { font-size: 1.6rem; }
.timer.danger { color: var(--red); border-color: var(--red); animation: pulse .7s infinite alternate; }
.total-practice-timer { min-width: 150px; align-items: center; flex-direction: column; gap: 0; padding-block: 7px; color: #176654; border-color: var(--mint); }
.total-practice-timer small { font-size: .68rem; letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.total-practice-timer span { font-size: 1.25rem; line-height: 1.2; }
.total-practice-timer.danger { color: var(--red); border-color: var(--red); }

.question-stage { width: min(850px, 100%); margin: 0 auto; }
.practice-mood { width: 100%; height: 100%; min-height: 170px; border: 0; border-radius: 24px; object-fit: contain; transition: opacity .18s ease, transform .18s ease; }
.question-card { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); align-items: stretch; gap: clamp(16px, 3vw, 32px); width: 100%; margin: 0; padding: clamp(16px, 3vw, 24px); border: 4px solid transparent; border-radius: 32px; background: white; box-shadow: var(--shadow); text-align: center; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.question-copy { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; }
.question-card p { margin: 0 0 4px; color: var(--muted); font-weight: 800; }
.question { font-size: clamp(4rem, 15vw, 7.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -.06em; }
.question-card.correct-card { border-color: var(--mint); background: #dffaf3; box-shadow: 0 12px 30px rgba(85,214,190,.24); }
.question-card.correct-card p { visibility: hidden; }
.question.correct-equation { color: #176654; font-size: clamp(3rem, 10vw, 5.5rem); }
.question-card.wrong-card { color: #9b2634; border-color: var(--red); background: #ffe4e8; box-shadow: 0 12px 30px rgba(233,87,104,.2); }
.question-card.wrong-card p { color: #9b2634; }
.answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 14px; width: min(760px, 100%); margin: 20px auto 0; }
.answer-button { min-height: 74px; border: 3px solid var(--border); border-radius: 20px; color: var(--ink); background: white; box-shadow: 0 8px 18px rgba(67,49,134,.08); font-size: 1.65rem; font-weight: 900; cursor: pointer; transition: .15s ease; }
.answer-button:hover { border-color: var(--purple); transform: translateY(-3px); }
.answer-button.correct { color: #176654; border-color: var(--mint); background: #dffaf3; }
.answer-button.wrong { color: #9b2634; border-color: var(--red); background: #ffe4e8; }
.answer-button:disabled { cursor: default; }
.feedback { min-height: 28px; margin: 16px 0 -8px; text-align: center; font-size: 1.15rem; font-weight: 900; }
.feedback.good { color: #16806a; }
.feedback.bad { color: var(--red); }
.confetti-layer { position: fixed; z-index: 1000; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-layer span { position: absolute; top: 42%; left: 50%; width: 14px; height: 22px; border-radius: 3px; opacity: 0; animation: confetti-burst 1s cubic-bezier(.15,.72,.25,1) var(--delay) forwards; }
.celebration-stars span, .celebration-hearts span { width: auto; height: auto; background: transparent !important; font-size: var(--size); line-height: 1; filter: drop-shadow(0 3px 2px rgba(67,49,134,.18)); }
.celebration-hearts span { filter: drop-shadow(0 3px 2px rgba(233,87,104,.18)); }
.celebration-butterflies span, .celebration-flowers span, .celebration-balloons span, .celebration-candies span { width: auto; height: auto; background: transparent !important; font-size: calc(var(--size) + 7px); line-height: 1; filter: drop-shadow(0 4px 3px rgba(67,49,134,.18)); }

.reward-view { display: flex; min-height: calc(100vh - 100px); flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.reward-content, .return-prompt { display: flex; flex-direction: column; align-items: center; }
.celebration { width: 260px; height: 260px; border: 5px solid white; border-radius: 42px; object-fit: cover; box-shadow: var(--shadow); animation: bounce .8s infinite alternate; }
.reward-view h2 { margin: 3px 0 8px; font-size: clamp(3rem, 10vw, 5.5rem); letter-spacing: -.06em; }
.reward-view > p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; }
.reward-timer { display: grid; place-items: center; width: 210px; height: 210px; margin: 24px; border: 10px solid rgba(108,92,231,.18); border-top-color: var(--purple); border-radius: 50%; background: white; box-shadow: var(--shadow); }
.reward-timer span { margin-bottom: -22px; font-size: 5rem; font-weight: 900; }
.reward-timer small { color: var(--muted); font-weight: 800; }
.secondary-button { color: var(--purple); border: 2px solid var(--purple); background: white; }
.reward-settings-link { margin-top: 14px; padding: 7px 10px; color: var(--muted); font-size: .85rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.reward-settings-link:hover { color: var(--purple); }
.return-icon { width: 280px; height: 280px; margin-bottom: 18px; border: 5px solid white; border-radius: 44px; object-fit: cover; box-shadow: var(--shadow); }
.return-prompt h2 { margin: 4px 0 30px; font-size: clamp(2.7rem, 9vw, 5rem); letter-spacing: -.06em; }
.resume-button { min-height: 86px; padding: 0 clamp(28px, 7vw, 65px); border: 0; border-radius: 24px; color: white; background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 15px 35px rgba(81,66,199,.32); font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 900; cursor: pointer; transition: .18s ease; }
.resume-button:hover { transform: translateY(-4px) scale(1.02); }

@keyframes appear { from { opacity: 0; transform: translateY(10px); } }
@keyframes pulse { to { transform: scale(1.06); } }
@keyframes bounce { to { transform: translateY(-12px) rotate(6deg); } }
@keyframes confetti-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.35); }
  8%, 82% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); }
}

@media (max-width: 720px) {
  .app-shell { padding-top: 22px; }
  .mascot { width: 100px; height: 100px; border-radius: 28px; }
  .celebration { width: 200px; height: 200px; border-radius: 34px; }
  .ready-icon { width: 210px; height: 210px; border-radius: 34px; }
  .return-icon { width: 210px; height: 210px; border-radius: 34px; }
  .setup-form { min-height: calc(100vh - 190px); }
  .settings-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .play-mode-selector-wrap { align-items: stretch; flex-direction: column; }
  .play-mode-selector { grid-template-columns: repeat(2, 1fr); }
  .play-mode-descriptions { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .table-picker { grid-template-columns: repeat(4, 1fr); }
  .table-option.all { grid-column: span 2; }
  .settings-actions { align-items: stretch; flex-direction: column; }
  .game-header { gap: 10px; }
  .stars { min-width: 45px; }
  .question-card { grid-template-columns: minmax(90px, 125px) minmax(0, 1fr); gap: 10px; padding: 12px; }
  .practice-mood { min-height: 130px; border-radius: 20px; }
  .answers { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .confetti-layer span { animation-duration: 1s !important; }
}