:root {
  color-scheme: dark;
  --bg: #0c0709;
  --surface: rgba(31, 16, 22, 0.82);
  --surface-strong: rgba(39, 19, 27, 0.94);
  --line: rgba(255, 219, 228, 0.14);
  --line-strong: rgba(255, 219, 228, 0.28);
  --text: #fff4f6;
  --muted: #c9adb6;
  --muted-strong: #e1cbd2;
  --accent: #d44769;
  --accent-deep: #8b1d3c;
  --accent-soft: #f0a1b5;
  --success: #8dd7ae;
  --danger: #c52f4e;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
  --radius: 18px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Yu Gothic",
    "Noto Sans JP", "Noto Sans Thai", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 16%, rgba(126, 28, 52, 0.36), transparent 36rem),
    radial-gradient(circle at 86% 82%, rgba(91, 20, 40, 0.32), transparent 34rem),
    linear-gradient(145deg, #1a0d12 0%, #0b0709 52%, #220d16 100%);
  transition: background 500ms ease;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

button,
select {
  font: inherit;
}

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

button:focus-visible,
a:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

[tabindex="-1"]:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: max(14px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(to bottom, rgba(12, 7, 9, 0.9), rgba(12, 7, 9, 0.42));
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 700;
}

.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 231, 237, 0.3);
  border-radius: 8px;
  color: #fff6f8;
  background: linear-gradient(145deg, #d44b6c, #781830);
  box-shadow: 0 8px 28px rgba(136, 25, 54, 0.32), inset 0 1px rgba(255, 255, 255, 0.2);
}

.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.age-chip {
  padding: 3px 7px;
  border: 1px solid rgba(255, 231, 237, 0.25);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 800;
}

.language-control {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 142px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.055);
}

.language-control svg {
  position: absolute;
  left: 12px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  pointer-events: none;
}

.language-control select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 38px;
  border: 0;
  appearance: none;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.language-control::after {
  position: absolute;
  right: 12px;
  width: 7px;
  height: 7px;
  content: "";
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}

.language-control option,
.select-wrap option {
  color: #211117;
  background: #fff;
}

.site-shell {
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  padding: 104px 24px 84px;
}

.page {
  width: min(100%, 760px);
  margin: 0 auto;
  text-align: center;
  animation: page-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.scene {
  position: relative;
  width: min(100%, 240px);
  height: 150px;
  margin: 4px auto 18px;
  color: var(--accent-soft);
  isolation: isolate;
}

.scene svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scene-ring,
.dial-track,
.coach-halo,
.reward-ring,
.ending-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
}

.scene-ring,
.ending-ring {
  opacity: 0.32;
  stroke-dasharray: 7 10;
}

.scene .ring-one {
  animation: ring-turn 12s linear infinite;
}

.scene .ring-two {
  animation: ring-turn-reverse 16s linear infinite;
}

@keyframes ring-turn {
  to { transform: rotate(360deg); }
}

@keyframes ring-turn-reverse {
  to { transform: rotate(-360deg); }
}

.scene-age {
  margin-top: -2px;
  margin-bottom: 10px;
}

.age-shield {
  fill: rgba(185, 49, 82, 0.14);
  stroke: url(#age-shield-gradient);
  stroke-width: 2;
  filter: drop-shadow(0 10px 22px rgba(195, 53, 87, 0.24));
  animation: shield-breathe 2.8s ease-in-out infinite;
}

.age-check {
  fill: none;
  stroke: #ffeef2;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 55;
  animation: check-draw 2.8s ease-in-out infinite;
}

.scene-node {
  fill: #ffdce5;
  filter: drop-shadow(0 0 8px rgba(255, 197, 213, 0.7));
  animation: node-pulse 2.4s ease-in-out infinite;
}

.node-two { animation-delay: -1.1s; }

@keyframes shield-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.025); }
}

@keyframes check-draw {
  0%, 15% { stroke-dashoffset: 55; opacity: 0.35; }
  38%, 80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -55; opacity: 0.35; }
}

@keyframes node-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.25); }
}

.scene-underage {
  color: #c8b5bc;
}

.door-frame,
.door-panel,
.return-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.door-panel {
  fill: rgba(255, 255, 255, 0.025);
}

.door-handle {
  fill: var(--accent-soft);
  animation: node-pulse 2.2s ease-in-out infinite;
}

.return-arrow {
  color: var(--accent-soft);
  animation: return-cue 2.4s ease-in-out infinite;
}

@keyframes return-cue {
  0%, 100% { transform: translateX(0); opacity: 0.45; }
  50% { transform: translateX(-8px); opacity: 1; }
}

.scene-settings {
  color: #9bcbd1;
}

.dial-track {
  opacity: 0.34;
  stroke-dasharray: 4 8;
}

.dial-track.outer { animation: ring-turn 14s linear infinite; }
.dial-track.middle { animation: ring-turn-reverse 10s linear infinite; }
.dial-track.inner { opacity: 0.18; }

.dial-hand {
  fill: none;
  stroke: #e9fbff;
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 120px 75px;
  animation: dial-sweep 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.dial-center {
  fill: #dffaff;
  filter: drop-shadow(0 0 10px rgba(143, 212, 220, 0.75));
}

.dial-dot {
  fill: #86c5ce;
  filter: drop-shadow(0 0 8px rgba(134, 197, 206, 0.6));
  animation: node-pulse 2.4s ease-in-out infinite;
}

.dot-two { animation-delay: -0.8s; }
.dot-three { animation-delay: -1.6s; }

@keyframes dial-sweep {
  0%, 12% { transform: rotate(-48deg); }
  52%, 64% { transform: rotate(35deg); }
  100% { transform: rotate(312deg); }
}

.scene-game {
  width: 220px;
  height: 190px;
  margin: 0;
  color: var(--accent-soft);
}

.coach-floor {
  fill: rgba(255, 225, 233, 0.08);
  animation: floor-breathe 2.2s ease-in-out infinite;
}

.coach-halo {
  opacity: 0.32;
  stroke-dasharray: 5 8;
  animation: coach-pulse 1.8s ease-in-out infinite;
}

.coach-head {
  fill: rgba(255, 226, 234, 0.12);
  stroke: #f5cad5;
  stroke-width: 2;
}

.coach-body,
.coach-arm,
.motion-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
}

.coach-body {
  color: #f5d5dd;
  animation: coach-breathe 2.2s ease-in-out infinite;
}

.coach-arm {
  opacity: 0.55;
  transition: opacity 220ms ease;
}

.motion-line {
  opacity: 0.42;
  stroke-width: 2;
  stroke-dasharray: 7 7;
  animation: motion-flow 1.5s linear infinite;
}

.focus-point {
  fill: none;
  stroke: #ff98b2;
  transform-box: fill-box;
  transform-origin: center;
}

.focus-one { stroke-width: 3; animation: focus-beat 1.1s ease-in-out infinite; }
.focus-two { stroke-width: 1.5; opacity: 0.45; animation: focus-ripple 1.1s ease-out infinite; }

.stop-mark {
  fill: none;
  stroke: #ffe5ea;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.visual-fast .coach-halo,
.visual-fast .focus-one,
.visual-fast .focus-two,
.visual-tap .focus-one,
.visual-tap .focus-two {
  animation-duration: 0.42s;
}

.visual-fast .motion-line,
.visual-tap .motion-line { animation-duration: 0.42s; }

.visual-slow .coach-halo,
.visual-slow .focus-one,
.visual-slow .focus-two,
.visual-slow .motion-line { animation-duration: 3.2s; }

.visual-arms-up .arm-left { transform: translate(3px, -18px) rotate(-18deg); opacity: 1; }
.visual-arms-up .arm-right { transform: translate(-3px, -18px) rotate(18deg); opacity: 1; }
.visual-open .arm-left { transform: translate(-13px, 11px) rotate(-42deg); opacity: 1; }
.visual-open .arm-right { transform: translate(13px, 11px) rotate(42deg); opacity: 1; }
.visual-kneel .coach-body { transform: translateY(13px) scaleY(0.78); }
.visual-kneel .coach-floor { transform: scaleX(1.18); }
.visual-pose .coach-body { transform: rotate(-7deg) translateX(-4px); }
.visual-pose .coach-halo { transform: rotate(22deg) scaleX(0.82); }

.visual-stop .coach-body,
.visual-stop .coach-arm,
.visual-stop .focus-point,
.visual-stop .motion-line { opacity: 0.18; animation-play-state: paused; }
.visual-stop .stop-mark { opacity: 1; animation: stop-pulse 1.2s ease-in-out infinite; }
.visual-stop .coach-halo { color: #ffcad4; animation-duration: 3s; }

@keyframes floor-breathe {
  0%, 100% { transform: scaleX(0.86); opacity: 0.05; }
  50% { transform: scaleX(1); opacity: 0.12; }
}

@keyframes coach-pulse {
  0%, 100% { transform: scale(0.9) rotate(0); opacity: 0.18; }
  50% { transform: scale(1.04) rotate(10deg); opacity: 0.5; }
}

@keyframes coach-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes motion-flow {
  to { stroke-dashoffset: -28; }
}

@keyframes focus-beat {
  0%, 100% { transform: scale(0.78); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes focus-ripple {
  from { transform: scale(0.45); opacity: 0.6; }
  to { transform: scale(1.35); opacity: 0; }
}

@keyframes stop-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
}

.scene-reward {
  width: 220px;
  height: 190px;
  margin: 0;
  color: #9fdbb7;
}

.reward-ring {
  opacity: 0.38;
  stroke-dasharray: 3 7;
}

.reward-bolt {
  fill: rgba(194, 255, 217, 0.16);
  stroke: #d7ffe6;
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px rgba(145, 225, 177, 0.45));
  animation: reward-charge 1.2s ease-in-out infinite;
}

.reward-ray {
  fill: none;
  stroke: #b9eccb;
  stroke-width: 3;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: ray-pop 1.7s ease-in-out infinite;
}

.ray-two { animation-delay: -0.25s; }
.ray-three { animation-delay: -0.5s; }
.ray-four { animation-delay: -0.75s; }
.ray-five { animation-delay: -1s; }

@keyframes reward-charge {
  0%, 100% { transform: translateY(2px) scale(0.96); opacity: 0.7; }
  50% { transform: translateY(-3px) scale(1.04); opacity: 1; }
}

@keyframes ray-pop {
  0%, 100% { transform: scale(0.55); opacity: 0.25; }
  50% { transform: scale(1); opacity: 1; }
}

.scene-ending {
  margin-bottom: 6px;
  color: #9fdbb7;
}

.ending-check,
.ending-retry {
  fill: none;
  stroke: #e1ffec;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ending-check {
  stroke-dasharray: 90;
  animation: ending-draw 2.8s ease-in-out infinite;
}

.ending-retry { display: none; }

.ending-spark {
  fill: #dfffea;
  animation: node-pulse 1.8s ease-in-out infinite;
}

.spark-two { animation-delay: -0.9s; }

.scene-ending.result-failure {
  color: #d3b7bf;
}

.scene-ending.result-failure .ending-check,
.scene-ending.result-failure .ending-spark { display: none; }
.scene-ending.result-failure .ending-retry {
  display: block;
  stroke: #f1d7de;
  animation: retry-turn 3.6s linear infinite;
  transform-origin: 120px 80px;
}

@keyframes ending-draw {
  0%, 15% { stroke-dashoffset: 90; opacity: 0.3; }
  40%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -90; opacity: 0.3; }
}

@keyframes retry-turn {
  to { transform: rotate(360deg); }
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent-soft);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-size: clamp(31px, 6vw, 52px);
  line-height: 1.18;
  letter-spacing: 0;
}

.age-page,
.settings-page,
.ending-page {
  padding: clamp(26px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(44, 21, 30, 0.82), rgba(20, 11, 15, 0.72));
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px);
}

.notice-copy {
  max-width: 620px;
  margin: 30px auto 0;
  text-align: left;
}

.notice-copy p {
  margin: 0 0 13px;
  color: var(--muted-strong);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.8;
}

.age-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.button {
  position: relative;
  min-height: 54px;
  padding: 14px 24px;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  font-weight: 760;
  line-height: 1.35;
  cursor: pointer;
  overflow: hidden;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.button-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 12px 34px rgba(132, 24, 52, 0.38), inset 0 1px rgba(255, 255, 255, 0.18);
}

.button-primary::after {
  position: absolute;
  inset: -100% auto -100% -35%;
  width: 30%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  animation: shine 4.5s ease-in-out infinite;
}

@keyframes shine {
  0%, 60% { left: -35%; }
  88%, 100% { left: 120%; }
}

.button-secondary {
  border: 1px solid var(--line-strong);
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.035);
}

.button:not(:disabled):hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.button:not(:disabled):active {
  transform: translateY(1px) scale(0.99);
}

.button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.settings-page h1 {
  font-size: clamp(30px, 5vw, 44px);
}

.difficulty-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 32px 0 0;
}

.difficulty-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted-strong);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.difficulty-options button:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.065);
}

.difficulty-options button[aria-pressed="true"] {
  border-color: rgba(240, 161, 181, 0.74);
  color: #fff;
  background: linear-gradient(145deg, rgba(171, 45, 76, 0.65), rgba(95, 24, 45, 0.6));
  box-shadow: 0 8px 26px rgba(111, 21, 46, 0.24);
}

.difficulty-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.selection-status {
  min-height: 25px;
  margin: 15px 0 24px;
  color: var(--muted);
  font-size: 14px;
}

.field-label {
  display: block;
  margin: 0 0 10px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 700;
}

.select-wrap {
  position: relative;
  width: min(100%, 340px);
  margin: 0 auto;
}

.select-wrap select {
  width: 100%;
  min-height: 50px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  appearance: none;
  color: var(--text);
  background: rgba(8, 4, 6, 0.35);
  cursor: pointer;
}

.select-wrap svg {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  transform: translateY(-50%);
  pointer-events: none;
}

.start-button {
  width: min(100%, 340px);
  margin-top: 20px;
}

.text-button {
  display: block;
  margin: 18px auto 0;
  padding: 7px 12px;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.text-button:hover {
  color: var(--text);
}

.feedback-note {
  margin: 26px 0 0;
  color: rgba(225, 203, 210, 0.62);
  font-size: 12px;
  line-height: 1.6;
}

.feedback-note a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.feedback-note a:hover {
  color: var(--text);
  text-decoration: underline;
}

.game-page,
.reward-page {
  width: min(100%, 900px);
}

.back-button {
  position: fixed;
  top: max(88px, calc(env(safe-area-inset-top) + 80px));
  left: max(18px, env(safe-area-inset-left));
  z-index: 10;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted-strong);
  background: rgba(22, 11, 15, 0.65);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.back-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.game-summary {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}

.task-card {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 58px);
  min-height: clamp(350px, 58vh, 570px);
  padding: clamp(30px, 6vw, 66px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  background: linear-gradient(145deg, rgba(45, 22, 31, 0.91), rgba(23, 12, 17, 0.9));
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.task-copy {
  min-width: 0;
}

.task-label {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#task-text,
#reward-task {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 720;
  line-height: 1.45;
  letter-spacing: 0;
}

.progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 42px 0 13px;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

progress {
  width: 100%;
  height: 11px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
}

progress::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #a42749, #e45a7b);
  box-shadow: 0 0 20px rgba(228, 90, 123, 0.4);
}

progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #a42749, #e45a7b);
}

.reward-page > h1 {
  margin: 0 auto 30px;
  max-width: 760px;
  color: #e3ffed;
  font-size: clamp(28px, 5vw, 46px);
}

.reward-page .eyebrow {
  color: #9fdbb7;
}

.reward-page .task-card {
  min-height: 350px;
  border-color: rgba(170, 231, 193, 0.18);
  background: linear-gradient(145deg, rgba(20, 45, 31, 0.92), rgba(10, 24, 16, 0.92));
}

.reward-page progress::-webkit-progress-value {
  background: linear-gradient(90deg, #559b72, #a3e1ba);
  box-shadow: 0 0 20px rgba(152, 222, 178, 0.35);
}

.reward-page progress::-moz-progress-bar {
  background: linear-gradient(90deg, #559b72, #a3e1ba);
}

.ending-summary {
  max-width: 520px;
  margin: 22px auto 30px;
  color: var(--muted-strong);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.7;
}

body.stop-task {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 102, 126, 0.32), transparent 35rem),
    linear-gradient(145deg, #9f243f, #571429);
}

body.stop-task .task-card {
  border-color: rgba(255, 190, 200, 0.3);
  background: rgba(78, 13, 29, 0.84);
}

body.reward-mode {
  background:
    radial-gradient(circle at 18% 18%, rgba(113, 197, 147, 0.22), transparent 38rem),
    radial-gradient(circle at 84% 80%, rgba(75, 145, 104, 0.18), transparent 35rem),
    linear-gradient(145deg, #102018, #070d0a 52%, #10261a);
}

footer {
  position: relative;
  z-index: 2;
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  color: rgba(225, 203, 210, 0.52);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  background: rgba(12, 7, 9, 0.32);
  pointer-events: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(58px, calc(env(safe-area-inset-bottom) + 52px));
  z-index: 40;
  max-width: min(90vw, 420px);
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(28, 14, 20, 0.94);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 700px) {
  .topbar {
    min-height: 66px;
    padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  }

  .brand-name {
    display: none;
  }

  .language-control {
    min-width: 138px;
  }

  .site-shell {
    padding: 90px 14px 76px;
  }

  .age-page,
  .settings-page,
  .ending-page {
    padding: 28px 20px;
  }

  .difficulty-options {
    grid-template-columns: 1fr;
  }

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

  .age-actions .button {
    width: 100%;
  }

  .back-button {
    top: max(78px, calc(env(safe-area-inset-top) + 72px));
  }

  .task-card {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: min(520px, 64vh);
    padding: 30px 22px;
    text-align: center;
  }

  .task-card .scene {
    margin: 0 auto;
    height: 160px;
  }

  .task-label {
    margin-bottom: 22px;
  }

  .progress-copy {
    margin-top: 34px;
  }
}

@media (max-width: 380px) {
  .language-control {
    min-width: 122px;
  }

  .language-control select {
    padding-right: 28px;
    font-size: 13px;
  }

  .age-chip {
    display: none;
  }
}

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