:root {
  --sky-top: #76d4ff;
  --sky-mid: #b9efff;
  --sky-bottom: #fff1b4;
  --meadow-top: #9be681;
  --meadow-bottom: #55bb63;
  --navy: #24476c;
  --navy-deep: #17304a;
  --navy-soft: #537796;
  --ink-soft: rgba(23, 48, 74, 0.76);
  --ink-faint: rgba(23, 48, 74, 0.58);
  --red: #ff7279;
  --red-deep: #ea565f;
  --orange: #ffb04f;
  --yellow: #ffd84e;
  --yellow-soft: #fff4b8;
  --yellow-deep: #ffbf36;
  --green: #7dd85b;
  --green-deep: #48ae67;
  --green-soft: #ddffd2;
  --blue-soft: #e3fbff;
  --blue-ice: #d7efff;
  --blue-strong: #82d8ff;
  --pink-soft: #ffe1f4;
  --pink: #ff8ebd;
  --cream: rgba(255, 251, 240, 0.9);
  --glass: rgba(255, 255, 255, 0.72);
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.92);
  --surface-strong: #fffdfa;
  --white: #ffffff;
  --success: #6ccc58;
  --warning: #ffbf47;
  --danger: #ff7c72;
  --info: #64c8ff;
  --focus: #123d6a;
  --shadow-soft: 0 10px 0 rgba(24, 55, 80, 0.08), 0 18px 28px rgba(24, 55, 80, 0.1);
  --shadow: 0 16px 0 rgba(27, 62, 90, 0.14), 0 24px 42px rgba(24, 55, 80, 0.16);
  --shadow-deep: 0 22px 0 rgba(27, 62, 90, 0.16), 0 28px 50px rgba(24, 55, 80, 0.2);
  --glow-yellow: 0 0 0 8px rgba(255, 216, 78, 0.18);
  --glow-blue: 0 0 0 8px rgba(100, 200, 255, 0.18);
  --border: 4px solid var(--navy);
  --border-thin: 3px solid var(--navy);
  --radius-panel: 30px;
  --radius-card: 24px;
  --radius-pill: 999px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: hidden;
  font-family: "Baloo 2", "Fredoka", "Trebuchet MS", sans-serif;
  color: var(--navy-deep);
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.95), transparent 12%),
    radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.72), transparent 15%),
    radial-gradient(circle at 48% 8%, rgba(255, 239, 164, 0.55), transparent 16%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 28%, var(--sky-bottom) 72%, #b8eca0 100%);
}

body[data-theme="forest"] {
  --sky-top: #8edcc2;
  --sky-mid: #d8fff4;
  --sky-bottom: #fff2bf;
  --navy: #1d4f55;
  --navy-deep: #14393d;
  --yellow: #ffd864;
  --yellow-deep: #ffb940;
  --green: #7fdd70;
  --green-deep: #419a62;
  --blue-strong: #66d1e8;
}

body[data-theme="sunset"] {
  --sky-top: #ffb07d;
  --sky-mid: #ffd9ad;
  --sky-bottom: #ffeebf;
  --navy: #6b3f4d;
  --navy-deep: #452331;
  --yellow: #ffd561;
  --yellow-deep: #ff9e42;
  --red: #ff7c74;
  --red-deep: #ef6157;
  --blue-strong: #ffb1d0;
}

body[data-theme="ocean"] {
  --sky-top: #59b6ff;
  --sky-mid: #c8f1ff;
  --sky-bottom: #fff4bf;
  --navy: #1d4f78;
  --navy-deep: #123b5e;
  --navy-soft: #4f7392;
  --yellow: #ffd867;
  --yellow-deep: #ffb742;
  --green: #7dd9cb;
  --green-deep: #429789;
  --blue-soft: #e3f7ff;
  --blue-ice: #c9ebff;
  --blue-strong: #67d6ff;
}

body[data-theme="night"] {
  --sky-top: #12375c;
  --sky-mid: #315d8a;
  --sky-bottom: #7eb6b0;
  --navy: #e8f7ff;
  --navy-deep: #f8fdff;
  --ink-soft: rgba(248, 253, 255, 0.84);
  --ink-faint: rgba(248, 253, 255, 0.64);
  --cream: rgba(15, 31, 52, 0.84);
  --surface: rgba(23, 48, 74, 0.92);
  --surface-soft: rgba(32, 63, 97, 0.92);
  --surface-strong: rgba(15, 31, 52, 0.96);
  --white: #ffffff;
  --yellow-soft: #ffe9a9;
  --blue-soft: #234e75;
  --blue-ice: #2c618f;
  --shadow-soft: 0 10px 0 rgba(3, 10, 20, 0.24), 0 18px 28px rgba(3, 10, 20, 0.28);
  --shadow: 0 16px 0 rgba(3, 10, 20, 0.28), 0 24px 42px rgba(3, 10, 20, 0.34);
  --shadow-deep: 0 22px 0 rgba(3, 10, 20, 0.32), 0 28px 50px rgba(3, 10, 20, 0.38);
}

body::before,
body::after,
.scene::before,
.scene::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body::before {
  left: -14vw;
  bottom: -10vh;
  width: 48vw;
  height: 28vh;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.26), transparent 28%),
    linear-gradient(180deg, #88e277, #42b462);
  filter: drop-shadow(0 -10px 0 rgba(255, 255, 255, 0.14));
}

body::after {
  right: -18vw;
  bottom: -12vh;
  width: 60vw;
  height: 34vh;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 20%, rgba(255, 255, 255, 0.24), transparent 24%),
    linear-gradient(180deg, #9de988, #59c068);
}

.scene::before {
  inset: 0;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.48) 0 18px, transparent 18px),
    radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.4) 0 12px, transparent 12px),
    radial-gradient(circle at 62% 14%, rgba(255, 255, 255, 0.3) 0 10px, transparent 10px);
  opacity: 0.65;
}

.scene::after {
  inset: auto 0 10vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  opacity: 0.85;
}

::selection {
  background: rgba(255, 216, 78, 0.45);
  color: var(--navy-deep);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  letter-spacing: 0.02em;
}

h1 {
  margin-top: 12px;
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  line-height: 0.94;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 0.98;
}

h3 {
  font-size: clamp(1.55rem, 3vw, 1.95rem);
  line-height: 1;
}

a,
button,
input,
[role="button"],
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

button,
input {
  font: inherit;
}

button {
  border: none;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    filter 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease;
}

button:disabled {
  cursor: default;
  opacity: 0.84;
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid rgba(18, 61, 106, 0.24);
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.72);
}

body:focus-within .screen.is-active {
  isolation: isolate;
}

noscript {
  display: block;
  max-width: 720px;
  margin: 20px auto 28px;
  padding: 18px 20px;
  border: var(--border);
  border-radius: var(--radius-card);
  background: rgba(255, 244, 184, 0.92);
  box-shadow: var(--shadow-soft);
  color: var(--navy-deep);
  font-weight: 700;
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  overflow: clip;
}

.spark {
  position: absolute;
  z-index: 1;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent),
    rgba(255, 255, 255, 0.35);
  filter: blur(1px);
  opacity: 0.8;
  animation:
    float-spark 8s ease-in-out infinite,
    twinkle 4s ease-in-out infinite;
}

.spark-a {
  top: 12%;
  left: 10%;
  width: 120px;
  height: 20px;
}

.spark-b {
  top: 18%;
  right: 14%;
  width: 92px;
  height: 18px;
  animation-delay: -2s;
}

.spark-c {
  top: 34%;
  left: 48%;
  width: 72px;
  height: 16px;
  animation-delay: -4s;
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100vh;
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 18px 36px;
}

.screen {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.982);
  filter: blur(10px);
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    filter 0.5s ease,
    visibility 0s linear 0.5s;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.panel {
  position: relative;
  isolation: isolate;
  border: var(--border);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 249, 240, 0.85)),
    var(--cream);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.panel::before {
  inset: 0 0 auto;
  height: 58px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0.85;
}

.panel::after {
  inset: auto -34px -42px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
}

body[data-theme="night"] .panel,
body[data-theme="night"] .control-card,
body[data-theme="night"] .status-card,
body[data-theme="night"] .score-card,
body[data-theme="night"] .review-card,
body[data-theme="night"] .stat-card,
body[data-theme="night"] .setting-card,
body[data-theme="night"] .history-card,
body[data-theme="night"] .achievement-card,
body[data-theme="night"] .leaderboard-item,
body[data-theme="night"] .toast,
body[data-theme="night"] .modal-card {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(29, 62, 94, 0.96), rgba(18, 39, 65, 0.96));
}

body[data-theme="night"] .feature-chip,
body[data-theme="night"] .preview-pill,
body[data-theme="night"] .strip-label,
body[data-theme="night"] .filter-button,
body[data-theme="night"] .score-pill,
body[data-theme="night"] .tag,
body[data-theme="night"] .theme-button,
body[data-theme="night"] .theme-chip,
body[data-theme="night"] .theme-option {
  background: linear-gradient(180deg, rgba(42, 78, 114, 0.96), rgba(25, 53, 83, 0.96));
  color: var(--navy-deep);
}

body[data-theme="night"] .secondary-button,
body[data-theme="night"] .modal-button {
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.16), transparent 18%),
    linear-gradient(180deg, rgba(62, 101, 140, 0.96) 0%, rgba(36, 65, 97, 0.96) 100%);
}

.hero-panel,
.setup-panel,
.result-hero,
.summary-panel,
.review-panel {
  padding: 26px;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(280px, 0.86fr);
  gap: 22px;
  align-items: center;
  min-height: 384px;
}

.title-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(76vh, 720px);
  padding: 42px 28px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.74), transparent 16%),
    radial-gradient(circle at 82% 18%, rgba(255, 216, 78, 0.34), transparent 18%),
    radial-gradient(circle at 50% 78%, rgba(125, 216, 91, 0.24), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 241, 0.86)),
    var(--cream);
}

.title-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: min(100%, 560px);
  text-align: center;
}

.title-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255, 248, 209, 0.96), rgba(255, 220, 97, 0.96));
  box-shadow: 0 10px 0 rgba(35, 71, 108, 0.12);
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.title-kicker::before,
.title-kicker::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, var(--orange));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.36);
}

.title-panel h1 {
  margin-top: 0;
  font-size: clamp(3.4rem, 10vw, 6rem);
  line-height: 0.9;
}

.title-actions {
  justify-content: center;
  width: 100%;
}

.mini-badge,
.badge,
.pill,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--yellow-soft), #fff7cf);
  color: var(--navy-deep);
  font-size: 0.96rem;
  font-weight: 800;
  box-shadow: 0 8px 0 rgba(35, 71, 108, 0.12);
}

.theme-switch,
.theme-toggle,
.theme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-button,
.theme-chip,
.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffffff 0%, #ebfbff 100%);
  box-shadow: 0 8px 0 rgba(36, 71, 108, 0.1);
  font-weight: 800;
}

.theme-button::before,
.theme-chip::before,
.theme-option::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(23, 48, 74, 0.2);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--yellow), var(--red));
}

.theme-button.is-active,
.theme-chip.is-active,
.theme-option.is-active,
.theme-button[aria-pressed="true"],
.theme-option[aria-selected="true"] {
  background: linear-gradient(180deg, #fff7cf 0%, #ffd857 100%);
}

.mini-badge::before,
.badge::before,
.chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, var(--orange));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.36);
}

.hero-copy,
.panel-heading {
  display: flex;
  flex-direction: column;
}

.hero-copy {
  gap: 16px;
}

.start-screen-actions {
  margin-top: 4px;
}

.start-preview-strip {
  margin-top: 2px;
}

.panel-heading {
  gap: 6px;
}

.panel-heading.compact h3 {
  margin-bottom: 4px;
}

.hero-text,
.panel-heading p,
.question-tip,
.status-note,
.timer-hint,
.question-subtitle,
.filter-row,
.result-hero p,
.helper-tip,
.hint-copy {
  font-size: 1.04rem;
  line-height: 1.45;
}

.hero-text,
.panel-heading p,
.status-note,
.timer-hint,
.question-subtitle,
.result-hero p,
.hint-copy,
.helper-tip {
  color: var(--ink-soft);
}

.hero-text strong {
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.feature-row,
.preview-strip,
.filter-row,
.action-row,
.score-cards,
.score-strip,
.meta-row,
.tag-row,
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.feature-chip,
.preview-pill,
.strip-label,
.filter-button,
.score-pill,
.tag,
.stat-chip {
  position: relative;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: 0 8px 0 rgba(36, 71, 108, 0.1);
}

.feature-chip,
.preview-pill,
.strip-label,
.score-pill,
.tag,
.stat-chip {
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 800;
}

.feature-chip {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f4fdff 100%);
}

.feature-chip[data-preset],
.feature-chip[data-mode] {
  cursor: pointer;
  user-select: none;
}

.feature-chip.is-active {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, #fff6cf 0%, #ffd857 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 0 rgba(36, 71, 108, 0.12);
}

.feature-chip::before,
.preview-pill::before,
.score-pill::before {
  content: "";
  position: absolute;
  inset: 8px auto auto 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 216, 78, 0.24);
}

.hero-art {
  position: relative;
  min-height: 300px;
  animation: mascot-float 6s ease-in-out infinite;
}

.orb {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 0 -12px 0 rgba(255, 255, 255, 0.24);
  animation: drift-orb 6.5s ease-in-out infinite;
}

.orb-red {
  top: 18px;
  right: 40px;
  width: 68px;
  height: 68px;
  background: linear-gradient(180deg, #ffb0a9, #ff6e7c);
}

.orb-yellow {
  top: 90px;
  left: 10px;
  width: 46px;
  height: 46px;
  background: linear-gradient(180deg, #fff0a4, #ffd84e);
  animation-delay: -2s;
}

.mascot {
  position: absolute;
  inset: 16px auto auto 50%;
  width: 228px;
  height: 228px;
  transform: translateX(-50%);
}

.mascot-ear {
  position: absolute;
  top: 0;
  width: 42px;
  height: 120px;
  border: var(--border);
  border-radius: 28px;
  background: linear-gradient(180deg, #ffeb93, #ffd44d);
  transform-origin: bottom center;
  box-shadow: var(--shadow-soft);
}

.mascot-ear::after {
  content: "";
  position: absolute;
  inset: 6px 8px auto;
  height: 28px;
  border-radius: 18px 18px 10px 10px;
  background: var(--navy-deep);
}

.mascot-ear.left {
  left: 36px;
  transform: rotate(-22deg);
  animation: ear-wiggle-left 4.4s ease-in-out infinite;
}

.mascot-ear.right {
  right: 36px;
  transform: rotate(22deg);
  animation: ear-wiggle-right 4.4s ease-in-out infinite;
}

.mascot-head {
  position: absolute;
  inset: 58px 0 0;
  width: 190px;
  height: 170px;
  margin: 0 auto;
  border: var(--border);
  border-radius: 46% 46% 48% 48%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.48), transparent 20%),
    linear-gradient(180deg, #ffe572, #ffd148);
  box-shadow:
    inset 0 -14px 0 rgba(255, 255, 255, 0.28),
    0 14px 0 rgba(36, 71, 108, 0.1);
}

.eye,
.cheek,
.mouth,
.capture-button {
  position: absolute;
}

.eye {
  top: 62px;
  width: 20px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy-deep);
}

.eye.left {
  left: 54px;
}

.eye.right {
  right: 54px;
}

.cheek {
  top: 96px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff7d7d;
}

.cheek.left {
  left: 26px;
}

.cheek.right {
  right: 26px;
}

.mouth {
  left: 50%;
  bottom: 34px;
  width: 36px;
  height: 18px;
  border-bottom: 4px solid var(--navy-deep);
  border-radius: 0 0 22px 22px;
  transform: translateX(-50%);
}

.capture-ball {
  position: absolute;
  right: 26px;
  bottom: 8px;
  width: 130px;
  height: 130px;
  border: var(--border);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.44), transparent 18%),
    linear-gradient(180deg, var(--red) 0 48%, var(--white) 48% 100%);
  box-shadow: 0 18px 0 rgba(36, 71, 108, 0.12);
  animation: ball-wobble 5.6s ease-in-out infinite;
}

.capture-ball::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 10px;
  background: var(--navy);
  transform: translateY(-50%);
}

.capture-button {
  inset: 50% auto auto 50%;
  width: 34px;
  height: 34px;
  border: var(--border);
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, 0.6),
    0 0 0 5px rgba(36, 71, 108, 0.12);
}

.setup-panel,
.summary-panel,
.review-panel,
.settings-panel,
.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.setup-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.setup-close-button {
  min-width: 0;
  flex-shrink: 0;
}

.setup-actions {
  justify-content: space-between;
}

.setup-actions .status-note {
  max-width: 560px;
}

.control-grid,
.settings-grid,
.stats-grid,
.achievement-grid {
  display: grid;
  gap: 18px;
}

.control-grid,
.settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.control-card,
.status-card,
.score-card,
.review-card,
.stat-card,
.setting-card,
.history-card,
.achievement-card,
.hint-card,
.leaderboard-item,
.empty-state {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: var(--border);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fdff 100%);
  box-shadow: 0 12px 0 rgba(36, 71, 108, 0.08);
  overflow: hidden;
}

.control-card::before,
.status-card::before,
.score-card::before,
.review-card::before,
.stat-card::before,
.setting-card::before,
.achievement-card::before,
.history-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: linear-gradient(90deg, rgba(255, 216, 78, 0.65), rgba(130, 216, 255, 0.65), rgba(125, 216, 91, 0.65));
  opacity: 0.8;
}

.control-card::after,
.score-card::after,
.stat-card::after,
.achievement-card::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -26px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 150, 0.24), transparent 70%);
}

.control-title,
.status-label,
.score-card span,
.review-meta,
.review-score,
.stat-label,
.setting-label,
.leaderboard-label,
.history-meta,
.achievement-label {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--navy);
}

.control-value,
.stat-value,
.setting-value {
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  font-family: "Fredoka", "Baloo 2", sans-serif;
  line-height: 1;
}

input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 8px 0 0;
  padding: 0;
  appearance: none;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 14px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(90deg, rgba(125, 216, 91, 0.95), rgba(255, 216, 78, 0.95), rgba(255, 122, 111, 0.95));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.48);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -9px;
  border: var(--border-thin);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), transparent 22%),
    linear-gradient(180deg, #ffffff, #fff0b8);
  box-shadow:
    0 8px 0 rgba(36, 71, 108, 0.12),
    var(--glow-yellow);
}

input[type="range"]::-moz-range-track {
  height: 14px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(125, 216, 91, 0.95), rgba(255, 216, 78, 0.95), rgba(255, 122, 111, 0.95));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.48);
}

input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: var(--border-thin);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #fff0b8);
  box-shadow:
    0 8px 0 rgba(36, 71, 108, 0.12),
    var(--glow-yellow);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 8px 0 rgba(36, 71, 108, 0.12),
    0 0 0 6px rgba(18, 61, 106, 0.2);
}

input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow:
    0 8px 0 rgba(36, 71, 108, 0.12),
    0 0 0 6px rgba(18, 61, 106, 0.2);
}

.control-scale,
.range-scale,
.legend-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink-faint);
}

.preview-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #ebfbff 100%);
}

.preview-pill strong {
  font-family: "Fredoka", "Baloo 2", sans-serif;
}

.action-row {
  align-items: center;
}

.action-row.left {
  justify-content: flex-start;
}

.primary-button,
.secondary-button,
.option-button,
.filter-button,
.modal-button {
  position: relative;
  border: var(--border);
  box-shadow: 0 10px 0 rgba(36, 71, 108, 0.12);
}

.primary-button,
.secondary-button,
.modal-button {
  min-width: 164px;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  font-size: 1.15rem;
  font-weight: 800;
}

.primary-button {
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.62), transparent 18%),
    linear-gradient(180deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  color: var(--navy-deep);
}

.secondary-button,
.modal-button {
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.66), transparent 18%),
    linear-gradient(180deg, #ffffff 0%, #dffaff 100%);
  color: var(--navy-deep);
}

.primary-button::before,
.secondary-button::before,
.modal-button::before {
  content: "";
  position: absolute;
  inset: 6px 18px auto;
  height: 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), transparent);
  opacity: 0.86;
}

.quiz-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  height: 100%;
}

.hud-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.hud-panel .status-card:nth-child(1) {
  background: linear-gradient(180deg, #ffffff 0%, #eaf8ff 100%);
}

.hud-panel .status-card:nth-child(2) {
  background: linear-gradient(180deg, #fffef8 0%, #fff2cb 100%);
}

.hud-panel .status-card:nth-child(3) {
  background: linear-gradient(180deg, #ffffff 0%, #ecffdf 100%);
}

.status-card strong,
.score-card strong,
.stat-value,
.history-score,
.leaderboard-score {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2rem);
  line-height: 1;
}

.progress-track,
.meter-track,
.streak-meter {
  position: relative;
  width: 100%;
  height: 16px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: #dcf6ff;
  overflow: hidden;
}

.progress-track::before,
.meter-track::before,
.streak-meter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0 12px, transparent 12px 24px);
  opacity: 0.78;
}

.progress-fill,
.meter-fill,
.streak-fill {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #5ad36f, #ffe04f, #ff7a6f);
  transition: width 0.35s ease;
}

.progress-fill::after,
.meter-fill::after,
.streak-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  animation: shine-slide 2.2s linear infinite;
}

.timer-panel {
  align-items: center;
  text-align: center;
}

.timer-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.clock-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border: 3px solid var(--navy);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fff3bc 100%);
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.36);
}

.clock-icon::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
  transform: translate(-50%, -50%);
}

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  border-radius: 999px;
  background: var(--navy);
  transform-origin: bottom center;
}

.clock-hand-hour {
  height: 8px;
  transform: translateX(-50%) rotate(20deg);
}

.clock-hand-minute {
  height: 11px;
  transform: translateX(-50%) rotate(120deg);
}

.timer-ring {
  --timer-progress: 100;
  position: relative;
  display: grid;
  place-items: center;
  width: 194px;
  height: 194px;
  margin: 2px auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.34), transparent 42%),
    conic-gradient(from -90deg, var(--red) calc(var(--timer-progress) * 1%), rgba(211, 234, 246, 0.96) 0);
  border: 5px solid var(--navy);
  box-shadow:
    0 12px 0 rgba(36, 71, 108, 0.12),
    0 0 0 10px rgba(255, 255, 255, 0.2);
  animation: timer-pulse 1.9s ease-in-out infinite;
}

.timer-ring.is-warning,
.timer-ring.is-danger,
.timer-ring[data-state="warning"],
.timer-ring[data-state="danger"],
.timer-panel.is-warning .timer-ring,
.timer-panel.is-danger .timer-ring {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.34), transparent 42%),
    conic-gradient(from -90deg, var(--red-deep) calc(var(--timer-progress) * 1%), rgba(255, 228, 228, 0.96) 0);
  box-shadow:
    0 12px 0 rgba(36, 71, 108, 0.12),
    0 0 0 10px rgba(255, 116, 116, 0.18);
}

.timer-ring.is-danger,
.timer-ring[data-state="danger"],
.timer-panel.is-danger .timer-ring {
  animation:
    timer-pulse 1.1s ease-in-out infinite,
    danger-shake 0.6s ease-in-out infinite;
}

.timer-panel.is-warning .timer-core,
.timer-panel.is-danger .timer-core,
.timer-ring.is-warning .timer-core,
.timer-ring.is-danger .timer-core,
.timer-ring[data-state="warning"] .timer-core,
.timer-ring[data-state="danger"] .timer-core {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.82), transparent 20%),
    linear-gradient(180deg, #ffffff 0%, #ffe4c9 100%);
}

.timer-panel.is-warning #timer-value,
.timer-panel.is-danger #timer-value,
.timer-ring.is-warning #timer-value,
.timer-ring.is-danger #timer-value,
.timer-value.is-warning,
.timer-value.is-danger,
#timer-value.is-warning,
#timer-value.is-danger {
  color: var(--red-deep);
  text-shadow: 0 0 12px rgba(255, 114, 121, 0.24);
}

.timer-ring::before,
.timer-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.timer-ring::before {
  inset: 12px;
  border: 2px dashed rgba(36, 71, 108, 0.18);
}

.timer-ring::after {
  inset: -8px;
  border: 6px solid rgba(255, 255, 255, 0.18);
}

.timer-core {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border: var(--border);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.82), transparent 20%),
    linear-gradient(180deg, #ffffff 0%, #fff7d7 100%);
  box-shadow: inset 0 -8px 0 rgba(255, 255, 255, 0.26);
}

.timer-core span {
  font-size: clamp(3rem, 7vw, 3.4rem);
  line-height: 0.9;
  font-family: "Fredoka", "Baloo 2", sans-serif;
}

.timer-core small {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--navy);
}

.question-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  min-height: 680px;
}

#quiz-screen .quiz-layout {
  grid-template-columns: 1fr;
  min-height: 76vh;
}

#quiz-screen .hud-panel,
#quiz-screen .question-header,
#quiz-screen [data-module="quiz-actions"],
#quiz-screen #feedback-bar,
#quiz-screen [data-module="quiz-support-panels"] {
  display: none;
}

#quiz-screen .question-panel {
  width: min(100%, 760px);
  min-height: min(72vh, 760px);
  margin: 0 auto;
  padding: 20px 32px 28px;
  justify-content: flex-start;
  gap: 18px;
}

.minimal-progress {
  margin: 0;
  text-align: center;
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--navy);
}

#quiz-screen .question-panel::before {
  display: none;
}

#quiz-screen .question-card {
  min-height: 168px;
  padding: 24px 28px;
  align-items: center;
  text-align: center;
}

#quiz-screen .question-subtitle {
  display: none;
}

#quiz-screen .question-expression {
  font-size: clamp(3.4rem, 8vw, 5.8rem);
}

#quiz-screen .options-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

#quiz-screen .option-button {
  min-height: 88px;
  align-items: center;
  text-align: center;
}

.quiz-end-button {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 20;
  min-width: 152px;
  width: auto;
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.56), transparent 18%),
    linear-gradient(180deg, #fff0ca 0%, #ffca7d 100%);
}

#quiz-screen .option-button small {
  display: none;
}

.question-panel::before {
  content: "";
  position: absolute;
  inset: auto 22px 18px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(130, 216, 255, 0.14), transparent 70%);
  pointer-events: none;
}

.question-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-badge {
  align-self: flex-start;
  padding: 8px 14px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #d6ffcf, #b6f0a8);
  font-weight: 800;
  box-shadow: 0 8px 0 rgba(36, 71, 108, 0.08);
}

.question-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 228px;
  padding: 28px;
  border: var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.54), transparent 24%),
    radial-gradient(circle at bottom left, rgba(255, 236, 164, 0.4), transparent 24%),
    linear-gradient(145deg, #f3fffc 0%, #d6efff 54%, #fff4cc 100%);
  box-shadow:
    inset 0 -10px 0 rgba(255, 255, 255, 0.28),
    0 12px 0 rgba(36, 71, 108, 0.08);
}

.question-card::before,
.question-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.question-card::before {
  inset: 18px 18px auto auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    -28px 32px 0 2px rgba(255, 255, 255, 0.42),
    24px 58px 0 -3px rgba(255, 255, 255, 0.56);
}

.question-card::after {
  inset: auto 20px 20px auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 72%);
}

.question-card.enter {
  animation: card-pop 0.48s ease;
}

.question-expression {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: clamp(3rem, 6vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.option-button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 16px 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #defaff 100%);
  color: var(--navy-deep);
  font-size: 1.42rem;
  font-weight: 800;
  text-align: left;
  animation: option-rise 0.42s ease both;
  animation-delay: var(--delay, 0s);
}

.option-button::before {
  content: "";
  position: absolute;
  inset: 12px 14px auto auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 216, 78, 0.68);
  box-shadow: 0 0 0 4px rgba(255, 216, 78, 0.18);
}

.option-button::after {
  content: "";
  position: absolute;
  inset: auto 18px 14px auto;
  width: 34px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(36, 71, 108, 0.08);
}

.option-button small {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.72;
}

.option-button.correct {
  background: linear-gradient(180deg, #d9ffbd 0%, #8de978 100%);
}

.option-button.correct::before {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(108, 204, 88, 0.24);
}

.option-button.correct::after {
  content: "CLEAR";
  width: auto;
  height: auto;
  padding: 5px 10px;
  border: 2px solid rgba(23, 48, 74, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.option-button.wrong {
  background: linear-gradient(180deg, #ffe0e0 0%, #ff8b8b 100%);
}

.option-button.wrong::after {
  content: "OOPS";
  width: auto;
  height: auto;
  padding: 5px 10px;
  border: 2px solid rgba(23, 48, 74, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.option-button.missed {
  background: linear-gradient(180deg, #fff5c4 0%, #ffd44d 100%);
}

.option-button.missed::after {
  content: "TIME";
  width: auto;
  height: auto;
  padding: 5px 10px;
  border: 2px solid rgba(23, 48, 74, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.option-button:disabled {
  filter: saturate(0.92);
}

.feedback-bar {
  position: relative;
  min-height: 84px;
  padding: 18px 18px 18px 68px;
  border: var(--border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
  line-height: 1.45;
  box-shadow: inset 0 -6px 0 rgba(255, 255, 255, 0.24);
}

.feedback-bar::before {
  content: "TIP";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  border: var(--border-thin);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffffff, #ebfaff);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.feedback-bar.correct {
  background: rgba(180, 255, 184, 0.72);
}

.feedback-bar.correct::before {
  content: "OK";
  background: linear-gradient(180deg, #ffffff, #d8ffd0);
}

.feedback-bar.wrong,
.feedback-bar.timeout {
  background: rgba(255, 221, 192, 0.84);
}

.feedback-bar.wrong::before {
  content: "TRY";
  background: linear-gradient(180deg, #ffffff, #ffe1dc);
}

.feedback-bar.timeout::before {
  content: "TIME";
  background: linear-gradient(180deg, #ffffff, #fff0cb);
}

.result-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

#result-screen .result-hero {
  align-items: flex-start;
}

.rank-badge,
.streak-badge {
  position: relative;
  min-width: 164px;
  padding: 20px 18px 14px;
  border: var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.6), transparent 20%),
    linear-gradient(180deg, #ffef97 0%, #ffc749 100%);
  box-shadow: 0 14px 0 rgba(36, 71, 108, 0.12);
  text-align: center;
}

.rank-badge::before,
.rank-badge::after {
  content: "";
  position: absolute;
  bottom: -14px;
  width: 26px;
  height: 34px;
  border: var(--border-thin);
  background: linear-gradient(180deg, #7ed9ff, #56b2ff);
  z-index: -1;
}

.rank-badge::before {
  left: 26px;
  transform: rotate(-10deg);
}

.rank-badge::after {
  right: 26px;
  transform: rotate(10deg);
}

.rank-badge span,
.streak-badge span {
  display: block;
  font-weight: 800;
  color: var(--navy);
}

.rank-badge strong,
.streak-badge strong {
  display: block;
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: clamp(3.5rem, 8vw, 4.2rem);
  line-height: 0.95;
}

.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 20px;
}

#result-screen .result-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

#result-screen [data-module="result-overview"],
#result-screen [data-module="result-analysis"],
#result-screen .score-strip-wrap,
#result-screen [data-module="review-filter-summary"],
#result-screen [data-module="review-support"] {
  display: none;
}

.score-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#result-screen .score-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#result-screen .score-card:nth-child(2),
#result-screen .score-card:nth-child(4),
#result-screen .score-card:nth-child(5) {
  display: none;
}

#result-screen .summary-panel .panel-heading p {
  display: none;
}

#result-screen .summary-panel,
#result-screen .review-panel {
  min-height: 0;
}

.score-card {
  min-height: 128px;
}

.score-card:nth-child(2n) {
  background: linear-gradient(180deg, #ffffff 0%, #eef9ff 100%);
}

.score-card:nth-child(3n) {
  background: linear-gradient(180deg, #ffffff 0%, #fff5dd 100%);
}

.score-card.highlight {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 26%),
    linear-gradient(160deg, #fff6cf 0%, #ffd857 100%);
  box-shadow: var(--shadow-soft);
}

.score-card.highlight strong {
  font-size: clamp(2.4rem, 5vw, 3rem);
}

.score-card small {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}

.score-strip-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strip-label {
  align-self: flex-start;
  padding-left: 24px;
  background: linear-gradient(180deg, #f2fdff 0%, #d9f4ff 100%);
}

.score-strip {
  align-items: stretch;
}

.score-pill {
  min-width: 72px;
  text-align: center;
  padding-inline: 14px;
  padding-left: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #ecfbff 100%);
}

.score-pill.good {
  background: linear-gradient(180deg, #ffffff 0%, #dbffd2 100%);
}

.score-pill.bad {
  background: linear-gradient(180deg, #ffffff 0%, #ffe5e0 100%);
}

.review-panel {
  min-height: 680px;
}

.filter-row {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-block: 2px 8px;
  background: linear-gradient(180deg, rgba(255, 251, 240, 0.96), rgba(255, 251, 240, 0.82) 76%, transparent);
}

.filter-button {
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #f2fcff 0%, #e6f7ff 100%);
  font-weight: 800;
}

.filter-button.is-active {
  background: linear-gradient(180deg, #fff6cc 0%, #ffd54f 100%);
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 620px;
  padding-right: 4px;
  overflow-y: auto;
}

.history-list,
.leaderboard-list {
  display: grid;
  gap: 14px;
}

.review-list::-webkit-scrollbar,
.history-list::-webkit-scrollbar {
  width: 12px;
}

.review-list::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #9fdfff, #ffd45c) padding-box;
}

.review-list::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track {
  background: rgba(36, 71, 108, 0.08);
  border-radius: var(--radius-pill);
}

.review-card {
  flex: 0 0 auto;
  gap: 12px;
}

.review-card.correct {
  background: linear-gradient(180deg, #ffffff 0%, #ecffdf 100%);
}

.review-card.wrong,
.review-card.timeout {
  background: linear-gradient(180deg, #ffffff 0%, #fff0e2 100%);
}

.review-card.timeout {
  background: linear-gradient(180deg, #ffffff 0%, #fff6d8 100%);
}

.review-card:not(.correct):not(.wrong):not(.timeout) {
  justify-content: center;
  min-height: 220px;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.68), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #edf8ff 100%);
}

.review-card:not(.correct):not(.wrong):not(.timeout)::after {
  content: "";
  display: block;
  width: 72px;
  height: 72px;
  margin: 6px auto 0;
  border: var(--border);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.78), transparent 24%),
    linear-gradient(180deg, #fff4b8 0%, #ffd64d 100%);
  box-shadow: 0 10px 0 rgba(36, 71, 108, 0.08);
}

.review-top,
.history-top,
.leaderboard-item,
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.leaderboard-item {
  flex-direction: row;
}

.review-expression {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  line-height: 1;
}

.review-tag,
.tag,
.helper-badge {
  padding: 8px 12px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  background: #eefaff;
  font-weight: 800;
  color: var(--navy);
}

.review-card.correct .review-tag {
  background: #ddffd2;
}

.review-card.wrong .review-tag {
  background: #ffe3df;
}

.review-card.timeout .review-tag {
  background: #fff1c3;
}

.review-line,
.history-line,
.helper-tip,
.legend-item {
  font-size: 1rem;
  line-height: 1.45;
}

.review-line strong,
.history-line strong,
.helper-tip strong {
  font-weight: 800;
}

.review-line:last-child {
  color: var(--navy);
}

.empty-state,
.empty-card,
.empty-panel {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.8), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f1fbff 100%);
}

.empty-illustration {
  width: 92px;
  height: 92px;
  border: var(--border);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.84), transparent 24%),
    linear-gradient(180deg, #ffe689 0%, #ffcb49 100%);
  box-shadow: 0 12px 0 rgba(36, 71, 108, 0.08);
}

.empty-title {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: 1.45rem;
}

.empty-copy {
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stat-card,
.setting-card,
.achievement-card,
.history-card {
  min-height: 132px;
}

.stat-card[data-tone="gold"],
.achievement-card.rare {
  background: linear-gradient(180deg, #ffffff 0%, #fff4ce 100%);
}

.stat-card[data-tone="blue"],
.history-card {
  background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
}

.stat-card[data-tone="green"] {
  background: linear-gradient(180deg, #ffffff 0%, #ecffdf 100%);
}

.stat-note,
.setting-note,
.history-meta,
.leaderboard-label,
.achievement-note {
  font-size: 0.94rem;
  color: var(--ink-faint);
}

.meter-fill,
.streak-fill {
  width: 62%;
}

.leaderboard,
.history-panel,
.achievement-panel,
.toast-stack,
.modal-backdrop {
  position: relative;
}

.leaderboard-list {
  margin: 0;
  padding: 0;
}

.leaderboard-item {
  list-style: none;
  gap: 14px;
  padding: 16px 18px;
  border: var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f0fbff 100%);
  box-shadow: 0 10px 0 rgba(36, 71, 108, 0.08);
}

.leaderboard-rank {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: var(--border-thin);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff3bf, #ffd24d);
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
}

.leaderboard-body {
  flex: 1 1 auto;
  min-width: 0;
}

.leaderboard-name {
  font-size: 1.1rem;
  font-weight: 800;
}

.leaderboard-score {
  min-width: 86px;
  text-align: right;
}

.achievement-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.achievement-card {
  gap: 12px;
  align-items: flex-start;
}

.achievement-badge {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: var(--border-thin);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff6cf, #ffd85a);
  box-shadow: 0 8px 0 rgba(36, 71, 108, 0.08);
}

.achievement-title {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: 1.2rem;
}

.history-list {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.history-card {
  gap: 12px;
}

.history-score {
  color: var(--navy);
}

.streak,
.streak-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.streak-badge {
  min-width: 0;
  width: fit-content;
  background: linear-gradient(180deg, #ffe9b5 0%, #ffb856 100%);
}

.streak-meter {
  height: 18px;
}

.streak-flame {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.streak-flame::before {
  content: "";
  width: 14px;
  height: 20px;
  border-radius: 55% 55% 55% 0;
  background: linear-gradient(180deg, #ffd34f, #ff8d4e);
  transform: rotate(42deg);
}

.helper-tip,
.hint-card {
  position: relative;
  padding: 16px 18px 16px 56px;
  border: var(--border-thin);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(231, 250, 255, 0.82));
}

.helper-tip::before,
.hint-card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 24px;
  height: 24px;
  border: var(--border-thin);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff0b8, #ffd34d);
}

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: grid;
  gap: 12px;
  width: min(360px, calc(100vw - 24px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 251, 255, 0.94));
  box-shadow: var(--shadow);
}

.toast::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: linear-gradient(180deg, #7dd85b, #48ae67);
  box-shadow: 0 0 0 4px rgba(125, 216, 91, 0.18);
}

.toast.success::before {
  background: linear-gradient(180deg, #7dd85b, #48ae67);
}

.toast.warning::before {
  background: linear-gradient(180deg, #ffe57a, #ffb454);
  box-shadow: 0 0 0 4px rgba(255, 180, 84, 0.16);
}

.toast.error::before {
  background: linear-gradient(180deg, #ff8f8f, #ff5f5f);
  box-shadow: 0 0 0 4px rgba(255, 95, 95, 0.16);
}

.toast.info::before {
  background: linear-gradient(180deg, #8fe1ff, #4fbdf4);
  box-shadow: 0 0 0 4px rgba(79, 189, 244, 0.16);
}

.toast-title {
  font-weight: 800;
}

.toast-copy {
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.modal-backdrop,
.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.modal-backdrop {
  background: rgba(12, 29, 46, 0.45);
  backdrop-filter: blur(8px);
}

.modal {
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
}

.modal-card {
  pointer-events: auto;
  width: min(720px, 100%);
  padding: 24px;
  border: var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.58), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.96));
  box-shadow: var(--shadow-deep);
}

.modal-title {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
}

.modal-copy {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

[data-state="correct"],
.is-correct {
  --state-accent: var(--success);
}

[data-state="wrong"],
.is-wrong {
  --state-accent: var(--danger);
}

[data-state="timeout"],
.is-timeout {
  --state-accent: var(--warning);
}

[data-state="locked"],
.is-locked {
  opacity: 0.86;
}

@media (hover: hover) {
  button:hover {
    transform: translateY(-3px);
    filter: saturate(1.06);
  }

  button:active {
    transform: translateY(2px);
  }

  .panel:hover {
    box-shadow: var(--shadow-deep);
  }

  .feature-chip:hover,
  .preview-pill:hover,
  .score-pill:hover,
  .filter-button:hover,
  .leaderboard-item:hover,
  .review-card:hover,
  .score-card:hover,
  .control-card:hover,
  .status-card:hover {
    transform: translateY(-2px);
  }

  .option-button:hover:not(:disabled) {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
      0 14px 0 rgba(36, 71, 108, 0.12),
      0 22px 30px rgba(36, 71, 108, 0.12);
  }
}

@keyframes card-pop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes option-rise {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes float-spark {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes mascot-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes drift-orb {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes ear-wiggle-left {
  0%,
  100% {
    transform: rotate(-22deg);
  }
  45% {
    transform: rotate(-16deg);
  }
  65% {
    transform: rotate(-24deg);
  }
}

@keyframes ear-wiggle-right {
  0%,
  100% {
    transform: rotate(22deg);
  }
  45% {
    transform: rotate(16deg);
  }
  65% {
    transform: rotate(24deg);
  }
}

@keyframes ball-wobble {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  60% {
    transform: rotate(2deg);
  }
}

@keyframes timer-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 12px 0 rgba(36, 71, 108, 0.12),
      0 0 0 10px rgba(255, 255, 255, 0.2);
  }
  50% {
    transform: scale(1.015);
    box-shadow:
      0 12px 0 rgba(36, 71, 108, 0.12),
      0 0 0 14px rgba(255, 255, 255, 0.16);
  }
}

@keyframes danger-shake {
  0%,
  100% {
    transform: translateX(0) scale(1.01);
  }
  25% {
    transform: translateX(-1px) scale(1.02);
  }
  75% {
    transform: translateX(1px) scale(1.02);
  }
}

@keyframes shine-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 1080px) {
  .hero-panel,
  .quiz-layout,
  .result-grid {
    grid-template-columns: 1fr;
  }

  .hero-art {
    min-height: 250px;
    max-width: 420px;
    width: 100%;
    margin-inline: auto;
  }

  .hud-panel {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .status-card {
    flex: 1 1 220px;
  }

  .review-panel,
  .question-panel {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .hero-panel,
  .result-hero,
  .review-top,
  .history-top,
  .leaderboard-item,
  .modal-header {
    align-items: flex-start;
  }

  .score-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-row {
    top: -4px;
  }
}

@media (max-width: 780px) {
  .app-shell {
    padding-inline: 12px;
  }

  .hero-panel,
  .setup-panel,
  .question-panel,
  .summary-panel,
  .review-panel,
  .result-hero {
    padding: 18px;
  }

  .control-grid,
  .settings-grid,
  .score-cards,
  .options-grid,
  .achievement-grid {
    grid-template-columns: 1fr;
  }

  .result-hero,
  .review-top,
  .history-top,
  .leaderboard-item,
  .setup-panel-header {
    flex-direction: column;
  }

  .feature-row,
  .preview-strip,
  .score-strip,
  .filter-row,
  .action-row {
    gap: 10px;
  }

  .title-panel {
    min-height: 62vh;
    padding: 28px 18px;
  }

  .title-actions {
    flex-direction: column;
  }

  .title-actions > * {
    width: 100%;
  }

  .rank-badge {
    min-width: 0;
    width: 100%;
  }

  .setup-close-button {
    width: 100%;
  }

  .question-expression {
    font-size: clamp(2.5rem, 14vw, 4.1rem);
  }

  .timer-ring {
    width: 162px;
    height: 162px;
  }

  .timer-core {
    width: 118px;
    height: 118px;
  }

  .timer-core span {
    font-size: 2.7rem;
  }

  .feedback-bar {
    padding-left: 60px;
  }

  #result-screen .score-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .app-shell {
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .panel,
  .control-card,
  .status-card,
  .score-card,
  .review-card,
  .leaderboard-item,
  .modal-card,
  .toast {
    border-radius: 22px;
  }

  .hero-art {
    min-height: 220px;
  }

  .mascot {
    width: 200px;
    height: 200px;
  }

  .mascot-head {
    width: 168px;
    height: 150px;
  }

  .capture-ball {
    width: 112px;
    height: 112px;
  }

  .question-card {
    min-height: 190px;
    padding: 22px;
  }

  .option-button {
    min-height: 84px;
    font-size: 1.28rem;
  }

  .review-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .app-shell {
    padding-inline: 10px;
  }

  .hero-panel,
  .setup-panel,
  .question-panel,
  .summary-panel,
  .review-panel,
  .result-hero {
    padding: 16px;
  }

  .feature-chip,
  .preview-pill,
  .score-pill,
  .filter-button,
  .primary-button,
  .secondary-button,
  .modal-button {
    width: 100%;
    justify-content: center;
  }

  .action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .status-card strong,
  .score-card strong {
    font-size: 1.6rem;
  }

  .feedback-bar {
    min-height: 96px;
    padding: 16px 16px 16px 56px;
    font-size: 0.98rem;
  }

  .feedback-bar::before {
    left: 14px;
    top: 16px;
    width: 30px;
    height: 30px;
  }

  .question-panel::before,
  .panel::after {
    display: none;
  }

  .quiz-end-button {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .screen {
    filter: none;
  }

  .progress-fill::after,
  .meter-fill::after,
  .streak-fill::after {
    display: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border: 5px solid var(--navy-deep);
    --border-thin: 4px solid var(--navy-deep);
  }

  .panel,
  .control-card,
  .status-card,
  .score-card,
  .review-card,
  .leaderboard-item,
  .modal-card {
    box-shadow: none;
  }
}