/*
  KINETIC STORYBOOK — launch-quality visual system
  A tactile learning toy: soft paper, felt, light, and purposeful motion.
*/

:root {
  --ink: #263747;
  --ink-soft: #68747a;
  --cream: #f7f1e7;
  --paper: #fffdf8;
  --white: #fff;
  --yellow: #f4c95d;
  --yellow-deep: #cf972e;
  --coral: #ea7d70;
  --coral-deep: #bd514d;
  --mint: #8ecdb0;
  --mint-deep: #3d8d70;
  --sky: #9ec9de;
  --sky-deep: #4f8da7;
  --lavender: #aa9bd6;
  --line: rgba(38, 55, 71, 0.12);
  --level-accent: #f4a261;
  --level-soft: #fff0b8;
  --display-font: "Arial Rounded MT Bold", "Avenir Next Rounded", "Apple SD Gothic Neo", sans-serif;
  --body-font: "Avenir Next", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --content: 1220px;
  --shadow-air: 0 28px 70px rgba(48, 57, 62, 0.13), 0 8px 22px rgba(48, 57, 62, 0.07);
  --shadow-soft: 0 16px 36px rgba(47, 59, 65, 0.11), 0 3px 9px rgba(47, 59, 65, 0.06);
  --ease-out: cubic-bezier(.2, .82, .25, 1);
  --ease-spring: cubic-bezier(.18, .9, .24, 1.2);
  --visual-bottom: 0px;
}

html { background: #f4eee3; }

body {
  min-width: 320px;
  min-height: 100dvh;
  color: var(--ink);
  background: transparent;
  font-family: var(--body-font);
  font-feature-settings: "kern" 1;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .2;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(43, 56, 64, .16) 0 .45px, transparent .7px),
    radial-gradient(circle at 80% 70%, rgba(43, 56, 64, .12) 0 .45px, transparent .7px);
  background-size: 7px 7px, 9px 9px;
  content: "";
  pointer-events: none;
}

button { -webkit-tap-highlight-color: transparent; }
button:focus-visible,
[tabindex]:focus-visible,
a:focus-visible {
  outline: 3px solid #267da5;
  outline-offset: 4px;
}

button.is-pressed:not(:disabled) { animation: tactile-press 440ms var(--ease-spring); }
img { opacity: 1; transition: opacity .35s ease, filter .35s ease; }
img[data-reveal]:not(.is-loaded) { opacity: 0; }
img.is-loaded { opacity: 1; }
img.is-missing { visibility: hidden; }

.storybook-sky {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 6%, rgba(255, 255, 255, .82), transparent 23%),
    linear-gradient(180deg, #dcebf0 0%, #edf2ed 47%, #f7f1e7 81%);
}

.sky-orb,
.paper-cloud,
.paper-hill,
.floating-speck { position: absolute; display: block; }

.sky-orb {
  border-radius: 50%;
  filter: blur(1px);
  animation: orb-breathe 9s ease-in-out infinite alternate;
}
.orb-one { top: -120px; right: 8%; width: 420px; height: 420px; background: rgba(244, 201, 93, .18); }
.orb-two { top: 34%; left: -130px; width: 360px; height: 360px; background: rgba(142, 205, 176, .2); animation-delay: -3s; }
.orb-three { right: -80px; bottom: -90px; width: 300px; height: 300px; background: rgba(170, 155, 214, .13); animation-delay: -6s; }

.paper-cloud {
  width: 150px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .52);
  filter: blur(.2px);
  animation: cloud-drift 16s ease-in-out infinite alternate;
}
.paper-cloud::before,
.paper-cloud::after { position: absolute; border-radius: 50%; background: inherit; content: ""; }
.paper-cloud::before { top: -25px; left: 27px; width: 70px; height: 70px; }
.paper-cloud::after { top: -9px; right: -17px; width: 88px; height: 58px; }
.cloud-one { top: 165px; left: -55px; }
.cloud-two { top: 105px; right: 7%; scale: .66; animation-delay: -7s; }

.paper-hill { bottom: -25vh; width: 78vw; height: 46vh; border-radius: 50% 50% 0 0; }
.hill-back { right: -24vw; background: rgba(108, 177, 142, .13); transform: rotate(-5deg); }
.hill-front { left: -21vw; background: rgba(125, 184, 157, .1); transform: rotate(7deg); }
.floating-speck { width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 177, 93, .62); animation: speck-float 7s ease-in-out infinite; }
.speck-one { top: 29%; left: 9%; }
.speck-two { top: 19%; right: 16%; width: 4px; height: 4px; animation-delay: -2s; }
.speck-three { top: 58%; right: 9%; width: 9px; height: 9px; background: rgba(94, 159, 132, .42); animation-delay: -5s; }

.app-header {
  position: relative;
  z-index: 30;
  width: min(calc(100% - 48px), var(--content));
  min-height: 100px;
  margin: 0 auto;
  padding: 18px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 4px 3px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.brand:hover .brand-mark { transform: rotate(-5deg) translateY(-2px) scale(1.04); }
.brand-mark {
  display: grid;
  width: 58px;
  height: 58px;
  overflow: hidden;
  place-items: center;
  border: 4px solid rgba(255, 255, 255, .82);
  border-radius: 46% 54% 49% 51% / 52% 44% 56% 48%;
  background: #f5d978;
  box-shadow: 0 8px 18px rgba(69, 69, 51, .14);
  transition: transform .45s var(--ease-spring);
}
.brand-mark img { width: 112%; height: 112%; object-fit: cover; }
.brand-copy { display: grid; justify-items: start; line-height: 1; }
.brand-copy strong { font-family: var(--display-font); font-size: 22px; letter-spacing: -.06em; }
.brand-copy small { margin-top: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .16em; }

.header-actions { gap: 8px; }
.round-action,
.parent-action {
  min-height: 48px;
  border: 0;
  border-radius: 17px;
  color: var(--ink);
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 7px 18px rgba(52, 67, 74, .07);
  backdrop-filter: blur(12px);
  transition: transform .28s var(--ease-spring), background .28s ease, box-shadow .28s ease;
}
.round-action { width: auto; gap: 7px; padding: 0 14px; }
.parent-action { gap: 8px; padding: 0 17px; }
.round-action:hover,
.parent-action:hover { background: rgba(255,255,255,.78); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.line-icon { position: relative; display: grid; width: 22px; height: 22px; place-items: center; }
.line-icon svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.line-icon .sound-wave { transition: opacity .2s ease; }
.line-icon.is-muted .sound-wave { opacity: 0; }
.line-icon.is-muted::after { position: absolute; width: 24px; height: 2px; border-radius: 2px; background: currentColor; content: ""; transform: rotate(-45deg); }
.action-label,
.parent-action span:last-child { font-size: 12px; font-weight: 800; }

.view {
  width: min(calc(100% - 48px), var(--content));
  padding: 48px 0 90px;
}
.view.is-entering { animation: view-reveal 760ms var(--ease-out) both; }

/* HOME — asymmetric editorial storybook */
.home-view { padding-top: 30px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr);
  gap: clamp(40px, 7vw, 100px);
  min-height: 650px;
  align-items: center;
}
.hero-copy { position: relative; z-index: 3; max-width: 600px; }
.eyebrow-row { gap: 8px; margin-bottom: 30px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  color: #445158;
  background: rgba(255, 255, 255, .56);
  box-shadow: inset 0 0 0 1px rgba(38,55,71,.06);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .02em;
}
.eyebrow::before { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); content: ""; }
.eyebrow:nth-child(2)::before { background: var(--mint-deep); }
.eyebrow:nth-child(3)::before { background: #826eb4; }
.hero-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: #59666c; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.kicker-line { width: 24px; height: 1px; background: var(--coral); }
.hero-copy h1 {
  margin: 0 0 24px;
  color: #233544;
  font-family: var(--display-font);
  font-size: clamp(54px, 6vw, 82px);
  font-weight: 900;
  line-height: .99;
  letter-spacing: -.085em;
}
.hero-copy h1 em { position: relative; display: inline-block; padding-top: 8px; color: #d96660; font-style: normal; }
.hero-copy h1 em::after { position: absolute; right: 2%; bottom: -10px; left: 3%; height: 8px; border-radius: 50%; background: rgba(234,125,112,.22); content: ""; transform: rotate(-1deg); }
.hero-description { max-width: 530px; margin-bottom: 32px; color: #5d696f; font-size: 16px; font-weight: 580; line-height: 1.85; word-break: keep-all; }
.hero-actions { align-items: center; gap: 19px; margin-bottom: 32px; }

.primary-button,
.secondary-button,
.spin-button,
.check-button {
  border: 0;
  font-family: var(--display-font);
  transition: transform .28s var(--ease-spring), box-shadow .28s ease, filter .28s ease;
}
.primary-button {
  color: #fff;
  background: linear-gradient(145deg, #e98073, #d7635f);
  box-shadow: 0 11px 0 #b84f4c, 0 18px 30px rgba(189, 81, 77, .22), inset 0 1px 0 rgba(255,255,255,.34);
}
.big-button { min-height: 64px; padding: 0 24px 0 28px; border-radius: 20px; font-size: 16px; }
.primary-button:hover:not(:disabled) { filter: saturate(1.08) brightness(1.02); transform: translateY(-3px); box-shadow: 0 14px 0 #b84f4c, 0 23px 36px rgba(189,81,77,.25); }
.button-arrow { display: grid; width: 31px; height: 31px; margin-left: 13px; place-items: center; border-radius: 50%; color: var(--ink); background: #f7d26d; transition: transform .35s var(--ease-spring); }
.primary-button:hover .button-arrow { transform: translateX(4px) rotate(-8deg); }
.text-button { position: relative; gap: 8px; border: 0; background: transparent; font-size: 13px; font-weight: 800; }
.text-button::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(.35); transform-origin: left; transition: transform .3s var(--ease-out); }
.text-button:hover::after { transform: scaleX(1); }
.play-dot { display: inline-grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: rgba(38,55,71,.09); }
.play-dot::after { width: 0; height: 0; margin-left: 2px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--ink); content: ""; }

.trust-list { display: grid; gap: 9px; margin: 0; padding: 0; color: #667279; list-style: none; font-size: 11px; font-weight: 650; }
.trust-list li { display: flex; align-items: center; gap: 9px; }
.trust-list li::before { width: 13px; height: 7px; border-bottom: 2px solid #4c9c7c; border-left: 2px solid #4c9c7c; content: ""; transform: translateY(-2px) rotate(-45deg); }

.hero-visual { position: relative; min-height: 620px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.hero-visual::before,
.hero-visual::after { content: none; }
.hero-stage { --mascot-x: 0px; --mascot-y: 0px; --picture-x: 0px; --picture-y: 0px; --korean-x: 0px; --korean-y: 0px; --english-x: 0px; --english-y: 0px; position: relative; width: 100%; height: 610px; isolation: isolate; perspective: 1100px; }
.hero-halo {
  position: absolute;
  z-index: -1;
  top: 70px;
  right: 10px;
  width: min(38vw, 520px);
  height: min(38vw, 520px);
  border-radius: 47% 53% 44% 56% / 54% 43% 57% 46%;
  background: linear-gradient(145deg, rgba(255,255,255,.83), rgba(229,238,228,.72));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 30px 80px rgba(61,78,78,.12);
  animation: halo-morph 11s ease-in-out infinite alternate;
}
.hero-halo::after { position: absolute; inset: 8%; border: 1px dashed rgba(38,55,71,.15); border-radius: inherit; content: ""; animation: orbit-spin 32s linear infinite; }
.hero-mascot-wrap { position: absolute; z-index: 4; top: 102px; left: 16%; width: 55%; aspect-ratio: 1 / 1.14; margin: 0; overflow: hidden; border-radius: 44% 56% 46% 54% / 56% 45% 55% 44%; box-shadow: 0 29px 50px rgba(48,60,56,.18); transform: translate3d(var(--mascot-x), var(--mascot-y), 36px) rotate(-3deg); transition: transform .7s var(--ease-out); animation: mascot-breathe 5.8s ease-in-out infinite; }
.hero-mascot { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.specimen-card { position: absolute; z-index: 6; display: grid; overflow: hidden; background: rgba(255,253,248,.91); box-shadow: 0 18px 37px rgba(44,56,60,.16), inset 0 0 0 1px rgba(255,255,255,.9); backdrop-filter: blur(9px); transition: transform .65s var(--ease-out); animation: specimen-hover 5s ease-in-out infinite; }
.specimen-picture { top: 34px; left: -1%; width: 160px; height: 185px; border-radius: 42% 58% 48% 52% / 46% 42% 58% 54%; transform: translate3d(var(--picture-x), var(--picture-y), 80px) rotate(-9deg); }
.specimen-picture img { width: 100%; height: 100%; object-fit: cover; }
.specimen-korean { top: 74px; right: -1%; width: 178px; min-height: 112px; place-content: center; padding: 20px; border-radius: 24px 38px 26px 35px; transform: translate3d(var(--korean-x), var(--korean-y), 45px) rotate(6deg); animation-delay: -1.4s; }
.specimen-english { right: 1%; bottom: 105px; width: 205px; min-height: 126px; place-content: center; padding: 22px; border-radius: 37px 25px 34px 22px; transform: translate3d(var(--english-x), var(--english-y), 90px) rotate(-5deg); animation-delay: -2.9s; }
.specimen-card span { color: #283b48; font-family: var(--display-font); font-size: 27px; font-weight: 900; letter-spacing: -.05em; }
.specimen-card small { margin-top: 5px; color: #778086; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.hero-thread { position: absolute; z-index: 2; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(87,126,112,.38), transparent); transform-origin: left; }
.thread-one { top: 205px; left: 20%; width: 61%; transform: rotate(10deg); }
.thread-two { right: 9%; bottom: 199px; width: 52%; transform: rotate(-13deg); }
.hero-orbit { position: absolute; z-index: 8; border-radius: 50%; background: var(--coral); box-shadow: 0 5px 12px rgba(52,62,65,.15); animation: speck-float 5.4s ease-in-out infinite; }
.orbit-one { top: 45%; right: 3%; width: 15px; height: 15px; }
.orbit-two { bottom: 18%; left: 9%; width: 9px; height: 9px; background: #5aa686; animation-delay: -2s; }
.mascot-bubble { top: auto; right: auto; bottom: 39px; left: 4%; display: flex; gap: 10px; width: 205px; padding: 15px 18px; border: 0; border-radius: 25px 25px 25px 6px; background: #263747; box-shadow: 0 14px 30px rgba(38,55,71,.18); transform: rotate(2deg); animation: bubble-in 1s .45s var(--ease-spring) both; }
.mascot-bubble p { margin: 0; color: rgba(255,255,255,.75); font-size: 11px; line-height: 1.55; }
.mascot-bubble strong { color: #fff; font-size: 12px; }
.bubble-spark { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(244,201,93,.12); animation: status-pulse 2s ease-in-out infinite; }
.hero-caption { position: absolute; right: 9%; bottom: 22px; display: flex; gap: 22px; margin: 0; color: #7a8485; font-size: 8px; font-weight: 900; letter-spacing: .22em; }

.routine-strip {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 42px;
  margin-top: 78px;
  padding: 36px 40px;
  border: 0;
  border-radius: 44px 17px 44px 17px;
  color: #fdf8ee;
  background: #263747;
  box-shadow: 0 24px 48px rgba(38,55,71,.17);
  overflow: hidden;
  isolation: isolate;
}
.routine-strip::before { position: absolute; z-index: -1; top: -80px; right: 23%; width: 230px; height: 230px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; }
.routine-heading { align-items: flex-start; gap: 14px; }
.section-number { flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #f7d270; background: transparent; font-size: 9px; letter-spacing: .13em; }
.routine-heading h2 { margin: 0 0 8px; color: #fff; font-family: var(--display-font); font-size: 23px; line-height: 1.3; letter-spacing: -.04em; }
.routine-heading p { margin: 0; color: rgba(255,255,255,.56); font-size: 12px; line-height: 1.6; }
.routine-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.routine-steps li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; min-height: 96px; padding: 8px 18px; border: 0; background: transparent; }
.routine-steps li + li { border-left: 1px solid rgba(255,255,255,.12); }
.step-visual { align-self: start; display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 16px; color: #263747; background: #f1c965; box-shadow: none; }
.letter-mini { font-family: var(--display-font); font-size: 20px; }
.english-mini { background: #a99bd6; }
.reel-mini { grid-template-columns: repeat(3, 5px); gap: 3px; }
.reel-mini i { width: 5px; height: 23px; border-radius: 4px; background: #263747; animation: tiny-reel 1.7s ease-in-out infinite; }
.reel-mini i:nth-child(2) { height: 30px; animation-delay: -.4s; }
.reel-mini i:nth-child(3) { animation-delay: -.8s; }
.routine-steps small { color: #f0c966; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.routine-steps strong { display: block; margin: 3px 0; color: #fff; font-family: var(--display-font); font-size: 13px; }
.routine-steps p { margin: 0; color: rgba(255,255,255,.48); font-size: 9px; line-height: 1.4; }

/* MAP — a path of tactile worlds */
.map-view { width: min(calc(100% - 48px), 1120px); padding-top: 36px; }
.map-topline { align-items: flex-end; margin-bottom: 70px; }
.back-link,
.icon-text-button { border: 0; background: transparent; box-shadow: none; }
.back-link { margin-bottom: 21px; padding: 0; color: #68747a; font-size: 12px; font-weight: 800; }
.back-link span { display: inline-block; margin-right: 7px; transition: transform .25s ease; }
.back-link:hover span { transform: translateX(-4px); }
.view-kicker { color: var(--level-accent, #d86e66); font-size: 9px; font-weight: 900; letter-spacing: .19em; }
.map-topline h1 { max-width: 680px; margin: 0; font-family: var(--display-font); font-size: clamp(39px, 5vw, 62px); line-height: 1.08; letter-spacing: -.065em; }
.garden-progress { display: flex; align-items: center; gap: 14px; min-width: 285px; padding: 15px 17px 15px 10px; border: 0; border-radius: 23px 34px 23px 34px; background: rgba(255,255,255,.56); box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); }
.progress-mascot { width: 62px; height: 62px; object-fit: cover; border-radius: 44% 56% 50% 50%; }
.garden-progress strong { font-family: var(--display-font); font-size: 14px; }
.garden-progress small { color: var(--ink-soft); font-size: 9px; }
.mini-progress { height: 6px; margin: 6px 0 4px; border-radius: 999px; background: rgba(38,55,71,.1); }
.mini-progress span { position: relative; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #efb357, #64ad8e); transition: width .7s var(--ease-out); overflow: hidden; }
.mini-progress span::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); content: ""; animation: progress-shine 2.8s ease-in-out infinite; }
.stage-road-wrap { position: relative; padding: 10px 0 44px; border: 0; background: transparent; }
.road-doodle { position: absolute; z-index: -1; top: 6%; bottom: 4%; left: 50%; width: 2px; background: repeating-linear-gradient(to bottom, rgba(77,122,105,.24) 0 6px, transparent 6px 15px); transform: translateX(-50%); }
.road-doodle::before,
.road-doodle::after { position: absolute; left: 50%; width: 13px; height: 13px; border: 2px solid rgba(77,122,105,.3); border-radius: 50%; background: #f7f1e7; content: ""; transform: translateX(-50%); }
.road-doodle::before { top: 0; }
.road-doodle::after { bottom: 0; }
.stage-road { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 66px; }
.stage-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 23px;
  min-height: 205px;
  padding: 20px 22px 20px 18px;
  overflow: hidden;
  border: 0;
  border-radius: 35px 18px 38px 21px;
  color: var(--ink);
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255,255,255,.95), transparent 37%),
    color-mix(in srgb, var(--stage-color) 42%, #fffdf8);
  box-shadow: 0 17px 35px rgba(52,64,66,.11), inset 0 0 0 1px rgba(255,255,255,.7);
  text-align: left;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(var(--card-rotate, -1deg));
  transform-style: preserve-3d;
  transition: transform .38s var(--ease-out), box-shadow .38s ease, filter .3s ease;
  animation: stage-arrive 720ms var(--stage-delay) var(--ease-out) both;
}
.stage-card:nth-child(even) { --card-rotate: 1.1deg; transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(var(--card-rotate)); }
.stage-card:hover:not(:disabled),
.stage-card:focus-visible { box-shadow: 0 27px 52px rgba(52,64,66,.18), inset 0 0 0 1px rgba(255,255,255,.85); transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(0) translateY(-7px); }
.stage-card::after { position: absolute; top: -70%; left: -25%; width: 38%; height: 240%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); content: ""; transform: rotate(18deg) translateX(-180%); transition: transform .7s ease; }
.stage-card.is-complete::after { position: absolute; top: -70%; right: auto; left: -25%; display: block; width: 38%; height: 240%; border: 0; border-radius: 0; color: transparent; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); content: ""; transform: rotate(18deg) translateX(-180%); transition: transform .7s ease; }
.stage-card:hover::after { transform: rotate(18deg) translateX(400%); }
.stage-art-shell { position: relative; align-self: stretch; overflow: hidden; border-radius: 27px 16px 29px 18px; background: rgba(255,255,255,.6); transform: translateZ(25px); }
.stage-art { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out), filter .4s ease; }
.stage-card:hover .stage-art { transform: scale(1.07) rotate(-1deg); }
.stage-light { position: absolute; inset: auto -22px -28px auto; width: 85px; height: 85px; border-radius: 50%; background: color-mix(in srgb, var(--stage-accent) 70%, white); filter: blur(26px); opacity: .36; }
.stage-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 7px 0 2px; transform: translateZ(18px); }
.stage-number { color: var(--stage-accent); font-size: 8px; font-weight: 950; letter-spacing: .17em; }
.stage-card h2 { margin: 13px 0 8px; font-family: var(--display-font); font-size: 22px; letter-spacing: -.05em; }
.stage-card p { margin: 0; color: #657077; font-size: 11px; font-weight: 630; line-height: 1.55; word-break: keep-all; }
.stage-footer { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(38,55,71,.1); color: #7b8588; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.stage-status { color: var(--stage-accent); letter-spacing: 0; }
.stage-card.is-complete { box-shadow: 0 19px 42px rgba(62,132,102,.17), inset 0 0 0 2px rgba(69,154,117,.22); }
.stage-card.is-complete .stage-status::before { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #51a27d; box-shadow: 0 0 0 4px rgba(81,162,125,.12); content: ""; }
.stage-card.is-locked { opacity: .64; filter: grayscale(.78) saturate(.35); }
.stage-card.is-locked .stage-art { filter: blur(2px); transform: scale(1.08); }
.stage-lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(247,241,231,.28); backdrop-filter: blur(1px); }
.stage-lock i { position: relative; width: 34px; height: 29px; border-radius: 9px; background: rgba(38,55,71,.78); box-shadow: 0 7px 16px rgba(38,55,71,.2); }
.stage-lock i::before { position: absolute; top: -18px; left: 8px; width: 18px; height: 22px; border: 5px solid rgba(38,55,71,.78); border-bottom: 0; border-radius: 13px 13px 0 0; content: ""; }

.today-card { grid-template-columns: 90px 1fr auto; gap: 24px; margin-top: 48px; padding: 24px 28px 24px 18px; border: 0; border-radius: 25px 45px 25px 45px; background: #263747; box-shadow: var(--shadow-air); }
.today-mascot { width: 82px; height: 82px; overflow: hidden; border: 0; border-radius: 42% 58% 50% 50%; background: #f0d274; }
.today-mascot img { width: 100%; height: 100%; object-fit: cover; }
.today-card .view-kicker { color: #f0ca68; }
.today-copy h2 { color: #fff; font-family: var(--display-font); font-size: 18px; }
.today-copy p:last-child { margin: 0; color: rgba(255,255,255,.58); font-size: 11px; }
.secondary-button { min-height: 50px; padding: 0 18px; border-radius: 17px; color: var(--ink); background: #fff9ee; box-shadow: 0 7px 0 rgba(19,30,39,.28), inset 0 0 0 1px rgba(255,255,255,.8); font-size: 12px; font-weight: 900; }
.secondary-button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 0 rgba(19,30,39,.22), 0 15px 26px rgba(19,30,39,.14); }

/* GAME — one connected tactile machine */
body[data-view="game"] { background: linear-gradient(180deg, #e2ecea 0%, #f5efe6 64%); }
body[data-view="game"] .app-header { display: none; }
body[data-view="game"] .game-view { width: min(calc(100% - 34px), 1120px); padding: 20px 0 calc(152px + var(--visual-bottom)); }
.game-topbar { margin-bottom: 25px; }
.icon-text-button { min-height: 44px; padding: 0 8px; color: #68747a; font-size: 11px; font-weight: 850; }
.icon-text-button:hover { color: var(--ink); }
.round-progress-wrap { gap: 13px; min-width: 210px; padding: 8px 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.68); backdrop-filter: blur(10px); }
.round-progress-wrap > span { font-family: var(--display-font); font-size: 11px; }
.round-dots { gap: 6px; }
.round-dot { width: 7px; height: 7px; border: 0; background: rgba(38,55,71,.15); transition: transform .4s var(--ease-spring), background .3s ease, box-shadow .3s ease; }
.round-dot.is-current { width: 18px; border-radius: 999px; background: var(--level-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--level-accent) 16%, transparent); animation: current-dot 1.8s ease-in-out infinite; }
.round-dot.is-complete { background: #4e9c7b; }
.game-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 27px; }
.level-medallion { position: relative; flex: 0 0 76px; width: 76px; height: 76px; overflow: visible; }
.level-medallion > img { width: 100%; height: 100%; object-fit: cover; border: 4px solid rgba(255,255,255,.84); border-radius: 43% 57% 48% 52%; box-shadow: 0 12px 25px rgba(48,61,64,.14); }
.level-badge { position: absolute; right: -4px; bottom: -4px; display: grid; width: 27px; height: 27px; place-items: center; border: 3px solid #f6f0e7; border-radius: 50%; color: #fff; font-family: var(--display-font); font-size: 10px; box-shadow: 0 4px 9px rgba(38,55,71,.14); }
.game-heading .view-kicker { margin-bottom: 3px; color: var(--level-accent); }
.game-heading h1 { margin-bottom: 4px; font-family: var(--display-font); font-size: 29px; letter-spacing: -.055em; }
.game-heading p:last-child { color: #69757a; font-size: 11px; }

.roulette-card {
  position: relative;
  padding: 72px 30px 31px;
  overflow: visible;
  border: 0;
  border-radius: 42px 23px 42px 23px;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.13), transparent 50%),
    #263747;
  box-shadow: 0 28px 60px rgba(38,55,71,.23), 0 8px 18px rgba(38,55,71,.12), inset 0 1px 0 rgba(255,255,255,.13);
  transition: background .5s ease, box-shadow .5s ease;
  isolation: isolate;
}
.roulette-card::before { position: absolute; inset: 12px; z-index: -1; border: 1px solid rgba(255,255,255,.07); border-radius: 34px 17px 34px 17px; content: ""; pointer-events: none; }
.machine-glow { position: absolute; z-index: -1; top: -100px; left: 50%; width: 600px; height: 250px; border-radius: 50%; background: color-mix(in srgb, var(--level-accent) 34%, transparent); filter: blur(75px); opacity: .48; transform: translateX(-50%); transition: opacity .4s ease, transform .6s ease; }
.machine-grain { position: absolute; z-index: -1; inset: 0; opacity: .08; border-radius: inherit; background-image: radial-gradient(circle, #fff 0 .5px, transparent .6px); background-size: 6px 6px; pointer-events: none; }
.roulette-card.is-spinning .machine-glow { opacity: .8; transform: translateX(-50%) scale(1.2); animation: machine-pulse 1s ease-in-out infinite alternate; }
.roulette-card.is-correct { background: radial-gradient(circle at 50% 0, rgba(103,193,153,.35), transparent 53%), #213c3a; box-shadow: 0 30px 70px rgba(37,107,82,.25), 0 0 0 1px rgba(119,220,176,.22); }
.roulette-card.is-waiting { background: radial-gradient(circle at 50% 0, rgba(226,174,91,.14), transparent 50%), #2b3945; }
.instruction-pill { position: absolute; z-index: 12; top: -31px; left: 50%; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 36px); min-height: 61px; padding: 8px 22px 8px 8px; border: 0; border-radius: 999px; color: #34424b; background: #fffaf0; box-shadow: 0 14px 30px rgba(38,55,71,.18), inset 0 0 0 1px rgba(255,255,255,.75); font-size: 13px; font-weight: 850; white-space: normal; transform: translateX(-50%); transition: transform .4s var(--ease-spring), background .35s ease; }
.instruction-mascot { flex: 0 0 45px; width: 45px; height: 45px; object-fit: cover; border-radius: 50%; }
.roulette-card.is-spinning .instruction-pill { transform: translateX(-50%) translateY(-2px) scale(1.02); }

.match-track { position: absolute; z-index: 3; top: 55%; right: 17%; left: 17%; height: 4px; transform: translateY(-50%); pointer-events: none; }
.track-segment { position: absolute; top: 0; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); transition: background .45s ease, box-shadow .45s ease; }
.track-segment::after { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.38) 7px 12px); content: ""; animation: track-flow 1s linear infinite; opacity: .25; }
.track-one { left: 0; width: 50%; }
.track-two { right: 0; width: 50%; }
.track-node { position: absolute; top: 50%; width: 11px; height: 11px; border: 2px solid #465764; border-radius: 50%; background: #263747; transform: translate(-50%, -50%); transition: background .35s ease, box-shadow .35s ease, scale .35s var(--ease-spring); }
.node-one { left: 50%; }
.node-two { left: 100%; }
.roulette-card.has-korean-match .track-one,
.roulette-card.has-english-match .track-two { background: #72d3aa; box-shadow: 0 0 15px rgba(114,211,170,.8); }
.roulette-card.has-korean-match .track-one::after,
.roulette-card.has-english-match .track-two::after { opacity: .8; }
.roulette-card.has-korean-match .node-one,
.roulette-card.has-english-match .node-two { border-color: #b7f0d7; background: #72d3aa; box-shadow: 0 0 0 5px rgba(114,211,170,.15), 0 0 18px rgba(114,211,170,.8); scale: 1.25; }

.reels-grid { position: relative; z-index: 5; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.reel-column { grid-template-rows: auto auto minmax(278px, 1fr) auto auto; min-width: 0; padding: 0 5px 4px; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; transition: filter .3s ease, opacity .3s ease; }
.reel-column > header { min-height: 44px; gap: 9px; padding: 0 5px 10px; color: #fff; }
.reel-column > header strong { color: #fff; font-family: var(--display-font); font-size: 15px; }
.reel-column > header small { color: rgba(255,255,255,.4); font-size: 7px; letter-spacing: .18em; }
.reel-number { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: rgba(255,255,255,.68); background: rgba(255,255,255,.06); font-size: 8px; }
.reel-machine { position: relative; grid-row: 3; width: 100%; height: 290px; overflow: hidden; border: 0; border-radius: 30px 17px 30px 17px; background: #fbf8f0; box-shadow: inset 0 17px 25px rgba(38,55,71,.12), inset 0 -17px 25px rgba(38,55,71,.11), 0 12px 24px rgba(9,18,25,.21), 0 2px 0 rgba(255,255,255,.55); transition: box-shadow .4s ease, transform .4s var(--ease-spring); }
.reel-machine::before,
.reel-machine::after { width: 8px; height: 8px; border: 0; background: rgba(38,55,71,.22); }
.reel-machine::before { left: 8px; }
.reel-machine::after { right: 8px; }
.reel-content { transform: translate3d(0,0,0); backface-visibility: hidden; contain: layout paint; will-change: transform; }
.reel-focus { top: 33.333%; right: 9px; left: 9px; height: 33.333%; border: 0; border-radius: 20px 11px 20px 11px; background: rgba(255,255,255,.42); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--level-accent) 64%, transparent), 0 0 0 1px rgba(255,255,255,.72), 0 8px 18px rgba(42,55,62,.08); }
.korean-column .reel-focus { box-shadow: inset 0 0 0 2px rgba(224,169,67,.66), 0 0 0 1px rgba(255,255,255,.72), 0 8px 18px rgba(42,55,62,.08); }
.english-column .reel-focus { box-shadow: inset 0 0 0 2px rgba(137,117,190,.66), 0 0 0 1px rgba(255,255,255,.72), 0 8px 18px rgba(42,55,62,.08); }
.reel-shade { height: 28%; }
.top-shade { background: linear-gradient(180deg, rgba(38,55,71,.14), rgba(251,248,240,.25), transparent); }
.bottom-shade { background: linear-gradient(0deg, rgba(38,55,71,.13), rgba(251,248,240,.2), transparent); }
.reel-item { top: calc(var(--reel-slot, 1) * 33.333%); right: 12px; left: 12px; padding: 7px; backface-visibility: hidden; transition: opacity var(--reel-step-duration, 180ms) ease, transform var(--reel-step-duration, 180ms) var(--ease-out), filter var(--reel-step-duration, 180ms) ease; will-change: opacity, transform; }
.reel-item.is-current { transform: scale(1); }
.reel-item:not(.is-current) { opacity: .28; filter: saturate(.35) blur(.2px); transform: scale(.78); }
.reel-item.is-offstage { opacity: 0; filter: saturate(.25) blur(1px); transform: scale(.66); pointer-events: none; }
.picture-art { width: 100%; height: 100%; overflow: hidden; border-radius: 17px 10px 17px 10px; background: #edf2ea; box-shadow: none; }
.picture-art::after { display: none; }
.picture-art img { width: 100%; height: 100%; object-fit: cover; user-select: none; transform: translateZ(0); }
.word-card { width: 100%; }
.word-main { max-width: 100%; color: #293b49; font-family: var(--display-font); font-size: clamp(20px, 2.4vw, 31px); font-weight: 900; letter-spacing: -.055em; }
.english-column .word-main { color: #665299; font-size: clamp(17px, 2vw, 28px); letter-spacing: -.03em; }
.letter-chip { margin-bottom: 5px; padding: 3px 7px; border: 0; border-radius: 999px; color: #53451f; background: #f6d674; box-shadow: 0 3px 7px rgba(73,61,31,.12); font-size: 8px; letter-spacing: .04em; }
.reel-arrow { z-index: 8; width: calc(100% - 24px); min-height: 42px; margin-right: auto; margin-left: auto; border: 0; border-radius: 15px; color: rgba(255,255,255,.76); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: 18px; transition: transform .25s var(--ease-spring), background .25s ease, color .25s ease; }
.reel-arrow.up { margin-bottom: 9px; }
.reel-arrow.down { margin-top: 9px; }
.reel-arrow:hover:not(:disabled) { color: #263747; background: #f6d674; transform: translateY(-2px); }
.reel-arrow:active:not(:disabled) { transform: translateY(2px) scale(.98); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.listen-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 24px); min-height: 42px; margin: 10px auto 0; border: 0; border-radius: 15px; color: rgba(255,255,255,.68); background: transparent; font-size: 9px; font-weight: 850; transition: color .25s ease, background .25s ease; }
.listen-button:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.07); }
.listen-rings { position: relative; display: inline-flex; align-items: center; gap: 2px; width: 17px; height: 16px; }
.listen-rings::before { width: 5px; height: 8px; border-radius: 2px 5px 5px 2px; background: currentColor; content: ""; }
.listen-rings i { display: block; width: 3px; height: 8px; border-right: 1.5px solid currentColor; border-radius: 50%; }
.listen-button:hover .listen-rings i { animation: sound-ring .7s ease-in-out infinite alternate; }
.listen-button:hover .listen-rings i:last-child { animation-delay: -.25s; }
.picture-column { grid-template-rows: auto 51px minmax(278px, 1fr) 51px auto; }
.target-lock { grid-row: 4 / span 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 0; border-radius: 999px; color: #e9d07d; background: rgba(255,255,255,.07); font-size: 9px; font-weight: 850; }
.pin-shape { position: relative; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; }
.pin-shape::after { position: absolute; top: 7px; left: 3px; width: 2px; height: 7px; background: currentColor; content: ""; transform: rotate(20deg); }
.reel-column.is-wrong .reel-machine { animation: soft-no 430ms var(--ease-out); box-shadow: inset 0 17px 25px rgba(38,55,71,.12), inset 0 -17px 25px rgba(38,55,71,.11), 0 0 0 3px rgba(234,125,112,.42), 0 12px 24px rgba(9,18,25,.21); }
.reel-column.is-right .reel-machine { box-shadow: inset 0 17px 25px rgba(38,55,71,.1), inset 0 -17px 25px rgba(38,55,71,.09), 0 0 0 3px rgba(114,211,170,.5), 0 0 24px rgba(114,211,170,.22); }
.reel-column.is-hinting .reel-machine { animation: hint-breathe 1.25s ease-in-out; }
.reel-machine.is-animating .reel-content { transition: none; }
.reel-machine.is-spinning .reel-content { animation: none; filter: none; }
.reel-machine.is-spinning .reel-item { filter: saturate(.78) contrast(.98); }
.reel-machine.is-spinning .reel-item.is-current { opacity: .72; transform: scale(.96); }
.reel-machine.is-spinning .reel-focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--level-accent) 72%, transparent), 0 0 0 1px rgba(255,255,255,.82), 0 0 24px color-mix(in srgb, var(--level-accent) 20%, transparent); animation: reel-focus-breathe .52s ease-in-out infinite alternate; }
.reel-machine.is-spinning .reel-shade { animation: reel-shade-flow .42s linear infinite alternate; }
.reel-machine.has-landed::after { animation: landing-light 720ms var(--ease-out); }

.hint-box { align-items: center; gap: 15px; min-height: 78px; margin: 22px 10px 0; padding: 10px 19px 10px 9px; border: 0; border-radius: 20px 32px 20px 32px; color: #34434b; background: #f8df94; box-shadow: 0 10px 22px rgba(18,28,36,.16), inset 0 0 0 1px rgba(255,255,255,.36); animation: hint-unfold 540ms var(--ease-spring) both; }
.hint-mascot { flex: 0 0 61px; width: 61px; height: 61px; object-fit: cover; border-radius: 44% 56% 48% 52%; -webkit-text-stroke: 0; }
.hint-box > div { display: grid; gap: 3px; }
.hint-box small { color: #9b6b2e; font-size: 8px; font-weight: 950; letter-spacing: .15em; }
.hint-box p { margin: 0; font-size: 11px; font-weight: 760; line-height: 1.55; }

body[data-view="game"] .game-actions { position: fixed; z-index: 50; bottom: calc(max(15px, env(safe-area-inset-bottom)) + var(--visual-bottom)); left: 50%; display: grid; grid-template-columns: minmax(132px, .62fr) minmax(270px, 1.38fr); gap: 11px; width: min(680px, calc(100% - 24px)); margin: 0; padding: 9px; border: 0; border-radius: 25px; background: rgba(255,253,248,.78); box-shadow: 0 18px 50px rgba(38,55,71,.23), inset 0 0 0 1px rgba(255,255,255,.77); backdrop-filter: blur(18px) saturate(1.15); transform: translateX(-50%); transition: bottom .18s ease, background .25s ease, backdrop-filter .25s ease; }
body.is-machine-spinning .game-actions { background: rgba(255,253,248,.92); backdrop-filter: blur(7px) saturate(1.05); }
.spin-button,
.check-button { position: relative; grid-column: 2; grid-row: 1; min-height: 62px; overflow: hidden; border: 0; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #e77b6f, #cb5d59); box-shadow: 0 7px 0 #a84948, 0 12px 22px rgba(167,72,71,.2), inset 0 1px 0 rgba(255,255,255,.3); font-size: 16px; font-weight: 900; }
.check-button { background: linear-gradient(145deg, #56ab87, #388267); box-shadow: 0 7px 0 #28644e, 0 12px 22px rgba(40,100,78,.2), inset 0 1px 0 rgba(255,255,255,.3); }
.spin-button:hover:not(:disabled),
.check-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.04) saturate(1.08); }
.spin-button::after,
.check-button::after { position: absolute; top: -100%; left: -20%; width: 28%; height: 280%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent); content: ""; transform: rotate(20deg); animation: action-shine 3.8s ease-in-out infinite; }
.spin-orbit { position: relative; width: 23px; height: 23px; margin-right: 3px; border: 2px solid rgba(255,255,255,.42); border-top-color: #f6d674; border-radius: 50%; animation: orbit-spin 1.6s linear infinite; }
.spin-orbit::after { position: absolute; top: 1px; right: 1px; width: 5px; height: 5px; border-radius: 50%; background: #f6d674; content: ""; }
.check-stroke { width: 18px; height: 9px; margin-left: 4px; border-bottom: 3px solid #d6f3e5; border-left: 3px solid #d6f3e5; transform: translateY(-2px) rotate(-45deg); }
.hint-button { grid-column: 1; min-height: 62px; border: 0; border-radius: 18px; color: #4c555a; background: rgba(255,255,255,.68); box-shadow: inset 0 0 0 1px rgba(38,55,71,.08); font-size: 11px; }
.hint-dots { display: inline-flex; align-items: center; gap: 3px; margin-right: 5px; }
.hint-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #d39a3f; }
.hint-dots i:nth-child(2) { transform: translateY(-3px); }

.word-tray { display: flex; gap: 15px; margin-top: 22px; padding: 11px 14px; border: 0; border-radius: 18px; background: rgba(255,255,255,.48); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); backdrop-filter: blur(10px); }
.tray-label { color: #7b8589; font-size: 8px; letter-spacing: .12em; }
.word-seeds { gap: 7px; }
.word-seed { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 3px 9px 3px 4px; border: 0; border-radius: 999px; color: #6b7579; background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(38,55,71,.07); font-size: 9px; transition: transform .35s var(--ease-spring), background .35s ease; }
.word-seed img { width: 23px; height: 23px; object-fit: cover; border-radius: 50%; filter: grayscale(.75); }
.word-seed i { width: 5px; height: 5px; border-radius: 50%; background: rgba(38,55,71,.14); }
.word-seed.is-learned { color: #2f755c; background: #e8f5ed; animation: seed-learned .55s var(--ease-spring); }
.word-seed.is-learned img { filter: none; }
.word-seed.is-learned i { background: #50a27e; box-shadow: 0 0 0 3px rgba(80,162,126,.12); }

/* SUMMARY */
.summary-view { min-height: calc(100vh - 120px); padding-top: 30px; }
.summary-card { position: relative; width: min(100%, 850px); padding: 54px 62px 45px; overflow: hidden; border: 0; border-radius: 57px 27px 57px 27px; background: rgba(255,253,248,.88); box-shadow: var(--shadow-air), inset 0 0 0 1px rgba(255,255,255,.8); backdrop-filter: blur(16px); }
.summary-card::before { position: absolute; top: -120px; left: 50%; width: 480px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(244,201,93,.32), transparent 70%); content: ""; transform: translateX(-50%); }
.summary-rays { top: -250px; left: 50%; width: 650px; height: 650px; background: repeating-conic-gradient(from 0deg, rgba(244,201,93,.16) 0 7deg, transparent 7deg 19deg); animation: orbit-spin 42s linear infinite; }
.summary-mascot { position: relative; z-index: 2; width: 156px; height: 156px; margin: 0 auto 13px; overflow: hidden; border: 0; border-radius: 45% 55% 48% 52%; background: #f4d476; box-shadow: 0 20px 36px rgba(64,65,48,.15); animation: summary-pop .8s .12s var(--ease-spring) both; }
.summary-mascot img { width: 100%; height: 100%; object-fit: cover; }
.summary-card .view-kicker { position: relative; z-index: 2; color: #bd705d; }
.summary-card h1 { position: relative; z-index: 2; margin-bottom: 12px; font-family: var(--display-font); font-size: clamp(34px, 5vw, 52px); letter-spacing: -.07em; }
.summary-message { position: relative; z-index: 2; max-width: 630px; color: #667278; font-size: 13px; line-height: 1.7; }
.learning-badges { gap: 8px; margin: 25px 0; }
.learning-badges > div { min-height: 58px; padding: 9px 12px; border: 0; border-radius: 18px 10px 18px 10px; color: #5f696d; background: #f3eee5; box-shadow: none; font-size: 10px; }
.badge-shape { position: relative; display: block; width: 25px; height: 22px; margin: 0 auto 4px; }
.eye-shape { height: 15px; margin-top: 3px; border: 2px solid #5a6d77; border-radius: 50% 5% 50% 5%; transform: rotate(-45deg); }
.eye-shape::after { position: absolute; top: 3px; left: 8px; width: 5px; height: 5px; border-radius: 50%; background: #5a6d77; content: ""; }
.voice-shape::before,
.voice-shape::after { position: absolute; left: 4px; width: 17px; border: 2px solid #d27169; border-radius: 50%; content: ""; }
.voice-shape::before { top: 4px; height: 8px; border-top: 0; }
.voice-shape::after { top: 9px; height: 10px; border-bottom: 0; }
.ear-shape { border: 2px solid #8272ae; border-left-color: transparent; border-radius: 50%; }
.ear-shape::after { position: absolute; top: 6px; left: 7px; width: 7px; height: 9px; border: 2px solid #8272ae; border-left-color: transparent; border-radius: 50%; content: ""; }
.summary-words { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.summary-word { display: grid; grid-template-columns: 49px 1fr; align-items: center; gap: 9px; min-height: 59px; padding: 5px 10px 5px 5px; border: 0; border-radius: 18px 11px 18px 11px; background: #fff; box-shadow: inset 0 0 0 1px rgba(38,55,71,.07); text-align: left; }
.summary-word img { width: 49px; height: 49px; object-fit: cover; border-radius: 14px 8px 14px 8px; }
.summary-word > span { display: grid; font-family: var(--display-font); font-size: 11px; }
.summary-word small { margin-top: 2px; color: #758084; font-family: var(--body-font); font-size: 8px; font-weight: 700; }
.summary-actions { gap: 10px; margin-top: 28px; }

/* DIALOGS — calm, trustworthy editorial sheets */
.app-dialog { width: min(calc(100% - 28px), 980px); max-height: calc(100vh - 30px); padding: 0; border: 0; border-radius: 42px 22px 42px 22px; background: transparent; box-shadow: 0 42px 100px rgba(25,36,43,.34); }
.app-dialog::backdrop { background: rgba(28,40,47,.48); backdrop-filter: blur(8px); }
.dialog-shell { padding: 31px; border-radius: inherit; background: #fbf8f1; }
.dialog-header { align-items: flex-start; }
.dialog-header h2 { font-family: var(--display-font); font-size: 30px; letter-spacing: -.05em; }
.dialog-close { width: 42px; height: 42px; border: 0; border-radius: 50%; color: #637076; background: #eee8de; box-shadow: none; font-size: 24px; }
.dialog-tabs { padding: 4px; border: 0; border-radius: 15px; background: #eee9df; }
.dialog-tabs button { min-height: 42px; border: 0; border-radius: 11px; background: transparent; font-size: 11px; }
.dialog-tabs button.is-active { color: var(--ink); background: #fff; box-shadow: 0 6px 14px rgba(48,59,63,.08); }
.parent-stats { gap: 9px; }
.parent-stats > div { padding: 19px; border: 0; border-radius: 22px 12px 22px 12px; background: #f0ebe2; }
.parent-stats strong { color: var(--ink); font-family: var(--display-font); }
.parent-chart-card,
.review-card { border: 0; border-radius: 25px 14px 25px 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(38,55,71,.07); }
.parent-progress-track { background: #ece6dc; }
.parent-progress-track span { background: linear-gradient(90deg, #e8aa5f, #58a682); }
.review-mascot { width: 64px; height: 64px; object-fit: cover; border-radius: 43% 57% 48% 52%; }
.privacy-note { display: flex; align-items: center; gap: 8px; color: #687479; font-size: 10px; }
.lock-shape { position: relative; flex: 0 0 15px; width: 15px; height: 12px; border-radius: 3px; background: #708087; }
.lock-shape::before { position: absolute; top: -7px; left: 3px; width: 9px; height: 9px; border: 2px solid #708087; border-bottom: 0; border-radius: 7px 7px 0 0; content: ""; }
.curriculum-list { gap: 8px; }
.curriculum-row { grid-template-columns: 38px 64px minmax(190px,.8fr) 1.5fr; gap: 13px; padding: 11px 15px; border: 0; border-radius: 19px 11px 19px 11px; background: color-mix(in srgb, var(--row-color) 25%, white); }
.curriculum-number { color: var(--row-accent); background: transparent; font-family: var(--display-font); }
.curriculum-art { width: 58px; height: 58px; object-fit: cover; border-radius: 15px 9px 15px 9px; }
.curriculum-row h3 { margin: 4px 0 4px; font-family: var(--display-font); font-size: 14px; }
.curriculum-row p { margin: 0; font-size: 9px; }
.curriculum-words { gap: 4px; }
.curriculum-words span { border: 0; background: rgba(255,255,255,.65); font-size: 8px; }
.principle-grid article { border: 0; border-radius: 24px 13px 24px 13px; background: #f0ebe2; }
.principle-grid article > span { color: #ce755f; font-family: var(--display-font); font-size: 11px; }
.parent-script { border: 0; border-radius: 24px 13px 24px 13px; background: #e8f1ec; }
.dialog-footer { border-color: rgba(38,55,71,.08); }
.how-list li { border: 0; border-radius: 22px 12px 22px 12px; background: #f1ece3; }
.how-art { width: 62px; height: 62px; object-fit: cover; border: 0; border-radius: 17px 10px 17px 10px; background: #fff; }
.how-letter { display: grid; place-items: center; color: #61518f; font-family: var(--display-font); font-size: 19px; }
.how-listen { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 17px; }
.how-listen i { width: 5px; border-radius: 5px; background: #4f8b73; animation: listen-bar 1.1s ease-in-out infinite alternate; }
.how-listen i:nth-child(1) { height: 12px; }
.how-listen i:nth-child(2) { height: 24px; animation-delay: -.35s; }
.how-listen i:nth-child(3) { height: 17px; animation-delay: -.7s; }
.how-tip { gap: 15px; border: 0; border-radius: 25px 14px 25px 14px; background: #f8df94; }
.how-tip img { flex: 0 0 70px; width: 70px; height: 70px; object-fit: cover; border-radius: 42% 58% 48% 52%; }

.toast { bottom: 100px; border: 0; border-radius: 15px; color: #fff; background: rgba(38,55,71,.94); box-shadow: 0 15px 30px rgba(38,55,71,.23); backdrop-filter: blur(12px); }
.celebration-layer { z-index: 200; }
.confetti { width: var(--size); height: calc(var(--size) * .55); border-radius: 999px; background: var(--confetti-color); box-shadow: 0 3px 7px rgba(38,55,71,.1); animation: kinetic-confetti var(--duration) cubic-bezier(.15,.75,.25,1) forwards; }
.confetti-shape-1 { border-radius: 50% 4px 50% 4px; }
.confetti-shape-2 { width: calc(var(--size) * .55); height: var(--size); border-radius: 50%; }
.celebration-wave { position: fixed; top: 50%; left: 50%; width: 60px; height: 60px; border: 3px solid rgba(244,201,93,.72); border-radius: 50%; transform: translate(-50%,-50%); animation: celebration-wave 1.1s var(--ease-out) forwards; }
.wave-b { border-color: rgba(111,196,157,.55); animation-delay: .15s; }

/* Motion direction */
@keyframes tactile-press { 0%,100% { transform: scale(1); } 38% { transform: scale(.965) translateY(2px); } 70% { transform: scale(1.018) translateY(-1px); } }
@keyframes view-reveal { from { opacity: 0; transform: translateY(22px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes orb-breathe { from { transform: scale(.94) translate3d(-10px,8px,0); } to { transform: scale(1.07) translate3d(12px,-9px,0); } }
@keyframes cloud-drift { from { translate: -10px 0; } to { translate: 22px 8px; } }
@keyframes speck-float { 0%,100% { translate: 0 0; } 50% { translate: 4px -17px; } }
@keyframes halo-morph { 0% { border-radius: 47% 53% 44% 56% / 54% 43% 57% 46%; transform: rotate(-1deg); } 100% { border-radius: 55% 45% 52% 48% / 43% 56% 44% 57%; transform: rotate(2deg); } }
@keyframes mascot-breathe { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes specimen-hover { 0%,100% { margin-top: 0; } 50% { margin-top: -8px; } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(15px) rotate(-5deg) scale(.88); } to { opacity: 1; transform: translateY(0) rotate(2deg) scale(1); } }
@keyframes status-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(244,201,93,.1); } 50% { box-shadow: 0 0 0 9px rgba(244,201,93,0); } }
@keyframes tiny-reel { 0%,100% { transform: translateY(-3px); opacity: .55; } 50% { transform: translateY(3px); opacity: 1; } }
@keyframes stage-arrive { from { opacity: 0; translate: 0 25px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes progress-shine { 0%,35% { transform: translateX(-130%); } 65%,100% { transform: translateX(130%); } }
@keyframes current-dot { 0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--level-accent) 15%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--level-accent) 0%, transparent); } }
@keyframes machine-pulse { from { scale: .92; } to { scale: 1.12; } }
@keyframes track-flow { to { transform: translateX(12px); } }
@keyframes reel-focus-breathe { from { opacity: .82; transform: scaleY(.97); } to { opacity: 1; transform: scaleY(1.02); } }
@keyframes reel-shade-flow { from { opacity: .72; } to { opacity: 1; } }
@keyframes landing-light { 0% { background: rgba(244,201,93,.9); box-shadow: 0 0 0 0 rgba(244,201,93,.7); scale: .5; } 55% { background: #fff; box-shadow: 0 0 0 13px rgba(244,201,93,0); scale: 1.65; } 100% { background: rgba(38,55,71,.22); scale: 1; } }
@keyframes soft-no { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-.6deg); } 55% { transform: translateX(4px) rotate(.5deg); } 78% { transform: translateX(-2px); } }
@keyframes hint-breathe { 0%,100% { box-shadow: inset 0 17px 25px rgba(38,55,71,.12), 0 12px 24px rgba(9,18,25,.21); } 45% { box-shadow: inset 0 17px 25px rgba(38,55,71,.09), 0 0 0 5px rgba(248,223,148,.35), 0 0 34px rgba(248,223,148,.25); transform: translateY(-3px); } }
@keyframes hint-unfold { from { opacity: 0; transform: translateY(-7px) scaleY(.75); } to { opacity: 1; transform: none; } }
@keyframes sound-ring { from { scale: .8; opacity: .4; } to { scale: 1.12; opacity: 1; } }
@keyframes action-shine { 0%,55% { transform: rotate(20deg) translateX(-250%); } 80%,100% { transform: rotate(20deg) translateX(620%); } }
@keyframes orbit-spin { to { rotate: 360deg; } }
@keyframes seed-learned { 0% { transform: scale(.85); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes summary-pop { from { opacity: 0; transform: translateY(20px) scale(.7) rotate(-7deg); } to { opacity: 1; transform: none; } }
@keyframes listen-bar { from { transform: scaleY(.55); } to { transform: scaleY(1.08); } }
@keyframes kinetic-confetti { 0% { opacity: 0; transform: translate3d(var(--start-x), -30px, 0) rotate(0) scale(.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate3d(calc(var(--start-x) + var(--drift)), 105vh, 0) rotate(var(--rotate)) scale(1); } }
@keyframes celebration-wave { from { opacity: .9; transform: translate(-50%,-50%) scale(.25); } to { opacity: 0; transform: translate(-50%,-50%) scale(12); } }

body.is-paused *,
body.is-paused *::before,
body.is-paused *::after { animation-play-state: paused !important; }

@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: minmax(0,.9fr) minmax(430px,1.1fr); gap: 28px; }
  .hero-copy h1 { font-size: clamp(50px, 6vw, 70px); }
  .hero-stage { scale: .92; transform-origin: center; }
  .routine-strip { grid-template-columns: 1fr; }
  .stage-road { gap: 28px 36px; }
  .stage-card { grid-template-columns: 125px 1fr; min-height: 190px; }
  .reels-grid { gap: 13px; }
  .reel-machine { height: 270px; }
}

@media (max-width: 820px) {
  .app-header,
  .view { width: min(calc(100% - 28px), var(--content)); }
  .app-header { min-height: 82px; padding: 12px 0; }
  .brand-mark { width: 48px; height: 48px; }
  .round-action .action-label { display: none; }
  .round-action { width: 46px; padding: 0; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 680px; }
  .hero-visual { width: min(100%, 650px); min-height: 570px; margin: -10px auto 0; }
  .hero-stage { height: 580px; scale: 1; }
  .hero-halo { right: 7%; width: 490px; height: 490px; }
  .routine-steps { grid-template-columns: repeat(3,1fr); }
  .routine-steps li { padding: 8px 12px; }
  .map-topline { align-items: flex-start; flex-direction: column; gap: 25px; }
  .garden-progress { width: 100%; }
  .stage-road { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stage-card { grid-template-columns: 1fr; min-height: 290px; }
  .stage-art-shell { min-height: 130px; }
  .today-card { grid-template-columns: 78px 1fr; }
  .today-card .secondary-button { grid-column: 1 / -1; }
  body[data-view="game"] .game-view { width: calc(100% - 18px); }
  .roulette-card { padding-right: 16px; padding-left: 16px; }
  .reels-grid { gap: 8px; }
  .reel-column { padding-right: 1px; padding-left: 1px; }
  .reel-number { display: none; }
  .reel-column > header { justify-content: center; text-align: center; }
  .reel-machine { height: 245px; border-radius: 22px 13px 22px 13px; }
  .word-main { font-size: clamp(17px,3.5vw,26px); }
  .english-column .word-main { font-size: clamp(14px,3vw,22px); }
  .listen-button { font-size: 0; }
  .listen-rings { margin: 0; }
  .match-track { right: 16%; left: 16%; }
  .curriculum-row { grid-template-columns: 34px 54px 1fr; }
  .curriculum-words { grid-column: 1 / -1; }
  .summary-card { padding-right: 30px; padding-left: 30px; }
}

@media (max-width: 560px) {
  .app-header { width: calc(100% - 18px); }
  .brand-copy small { display: none; }
  .brand-copy strong { max-width: 78px; font-size: 18px; line-height: 1; }
  .header-actions { gap: 4px; }
  .parent-action { width: 46px; padding: 0; }
  .parent-action span:last-child { display: none; }
  .view { width: calc(100% - 22px); padding-top: 25px; }
  .home-view { padding-top: 18px; }
  .eyebrow-row { margin-bottom: 22px; }
  .eyebrow { font-size: 8px; }
  .hero-copy h1 { font-size: clamp(43px, 13vw, 60px); }
  .hero-description { font-size: 14px; line-height: 1.75; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-visual { min-height: 470px; }
  .hero-stage { height: 480px; }
  .hero-halo { top: 40px; right: 1%; width: 390px; height: 390px; }
  .hero-mascot-wrap { top: 75px; left: 18%; width: 62%; }
  .specimen-picture { top: 15px; left: -2%; width: 115px; height: 135px; }
  .specimen-korean { top: 50px; right: -1%; width: 125px; min-height: 86px; padding: 13px; }
  .specimen-english { right: 0; bottom: 72px; width: 154px; min-height: 93px; padding: 15px; }
  .specimen-card span { font-size: 19px; }
  .mascot-bubble { bottom: 24px; left: 0; width: 178px; }
  .hero-caption { display: none; }
  .routine-strip { margin-top: 36px; padding: 27px 20px; border-radius: 30px 14px 30px 14px; }
  .routine-steps { grid-template-columns: 1fr; }
  .routine-steps li { min-height: 77px; padding: 13px 4px; }
  .routine-steps li + li { border-top: 1px solid rgba(255,255,255,.12); border-left: 0; }
  .map-topline { margin-bottom: 42px; }
  .map-topline h1 { font-size: 38px; }
  .stage-road-wrap { padding: 6px 0 30px; }
  .stage-road { grid-template-columns: 1fr; gap: 18px; }
  .road-doodle { left: 17px; }
  .stage-card,
  .stage-card:nth-child(even) { grid-template-columns: 112px 1fr; min-height: 174px; padding: 14px; border-radius: 27px 14px 27px 14px; transform: none; }
  .stage-card:hover:not(:disabled) { transform: translateY(-4px); }
  .stage-art-shell { min-height: 0; }
  .stage-card h2 { font-size: 18px; }
  .stage-card p { font-size: 9px; }
  .today-card { grid-template-columns: 64px 1fr; padding: 18px 16px; }
  .today-mascot { width: 64px; height: 64px; }
  .today-copy h2 { font-size: 14px; }
  body[data-view="game"] .game-view { width: calc(100% - 10px); padding-top: 7px; }
  .game-topbar { grid-template-columns: 46px 1fr 46px; }
  .icon-text-button { width: 46px; justify-content: center; padding: 0; font-size: 0; }
  .icon-text-button span[aria-hidden="true"],
  .icon-text-button .line-icon { font-size: 17px; }
  .round-progress-wrap { min-width: 0; padding: 7px 10px; }
  .game-heading { gap: 12px; margin: 8px 8px 21px; }
  .level-medallion { flex-basis: 58px; width: 58px; height: 58px; }
  .level-badge { width: 23px; height: 23px; }
  .game-heading h1 { font-size: 21px; }
  .game-heading p:last-child { font-size: 9px; }
  .roulette-card { padding: 66px 7px 18px; border-radius: 28px 14px 28px 14px; }
  .instruction-pill { min-height: 54px; padding: 6px 14px 6px 6px; font-size: 10px; }
  .instruction-mascot { flex-basis: 40px; width: 40px; height: 40px; }
  .reels-grid { gap: 4px; }
  .reel-column { grid-template-rows: auto auto 224px auto auto; }
  .picture-column { grid-template-rows: auto 46px 224px 46px auto; }
  .reel-column > header { min-height: 39px; padding-bottom: 7px; }
  .reel-column > header strong { font-size: 12px; }
  .reel-column > header small { font-size: 6px; }
  .reel-machine { height: 224px; border-radius: 18px 9px 18px 9px; }
  .reel-focus { right: 5px; left: 5px; border-radius: 13px 7px 13px 7px; }
  .reel-item { right: 5px; left: 5px; padding: 4px; }
  .picture-art { border-radius: 12px 6px 12px 6px; }
  .word-main { font-size: clamp(15px, 5vw, 22px); overflow-wrap: anywhere; }
  .english-column .word-main { font-size: clamp(12px, 4.1vw, 18px); }
  .letter-chip { padding: 2px 5px; font-size: 6px; }
  .reel-arrow { width: calc(100% - 10px); min-height: 38px; font-size: 15px; }
  .listen-button { min-height: 33px; margin-top: 6px; }
  .target-lock { font-size: 0; background: transparent; }
  .target-lock .pin-shape { display: block; }
  .match-track { display: none; }
  .hint-box { margin: 13px 5px 0; padding: 8px 10px 8px 6px; }
  .hint-mascot { flex-basis: 48px; width: 48px; height: 48px; }
  .hint-box p { font-size: 9px; }
  body[data-view="game"] .game-actions { grid-template-columns: 104px 1fr; gap: 7px; width: calc(100% - 14px); padding: 7px; border-radius: 20px; }
  .spin-button,
  .check-button,
  .hint-button { min-height: 56px; border-radius: 15px; }
  .spin-button,
  .check-button { font-size: 13px; }
  .hint-button { font-size: 9px; }
  .word-tray { align-items: flex-start; flex-direction: column; gap: 7px; margin: 13px 5px 0; }
  .word-seed { padding-right: 6px; font-size: 8px; }
  .word-seed img { width: 19px; height: 19px; }
  .summary-card { padding: 38px 18px 32px; border-radius: 36px 18px 36px 18px; }
  .summary-mascot { width: 122px; height: 122px; }
  .summary-words { grid-template-columns: repeat(2,1fr); }
  .learning-badges { grid-template-columns: repeat(3,1fr); }
  .learning-badges > div { font-size: 8px; }
  .summary-actions { align-items: stretch; flex-direction: column; }
  .dialog-shell { padding: 21px 15px; }
  .dialog-header h2 { font-size: 23px; }
  .parent-stats { grid-template-columns: 1fr; }
  .curriculum-row { grid-template-columns: 30px 48px 1fr; padding: 9px; }
  .curriculum-art { width: 48px; height: 48px; }
  .how-list li { grid-template-columns: 30px 53px 1fr; }
  .how-art { width: 53px; height: 53px; }
}

@media (max-width: 380px) {
  .eyebrow:nth-child(3) { display: none; }
  .hero-copy h1 { font-size: 42px; }
  .reel-column { grid-template-rows: auto auto 205px auto auto; }
  .picture-column { grid-template-rows: auto 43px 205px 43px auto; }
  .reel-machine { height: 205px; }
  .game-heading p:last-child { display: none; }
  body[data-view="game"] .game-actions { grid-template-columns: 91px 1fr; }
}

@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {
  body[data-view="game"] .game-view { width: calc(100% - 16px); padding: 6px 0 calc(86px + var(--visual-bottom)); }
  .game-topbar { margin-bottom: 4px; }
  .game-topbar .icon-text-button { min-height: 36px; }
  .round-progress-wrap { min-width: 176px; padding: 5px 12px; }
  .game-heading { gap: 10px; margin: 0 6px 8px; }
  .level-medallion { flex-basis: 42px; width: 42px; height: 42px; }
  .level-badge { width: 20px; height: 20px; border-width: 2px; font-size: 8px; }
  .game-heading .view-kicker { margin-bottom: 1px; font-size: 7px; }
  .game-heading h1 { margin-bottom: 0; font-size: 18px; }
  .game-heading p:last-child { display: none; }
  .roulette-card { padding: 46px 10px 10px; border-radius: 28px 15px 28px 15px; }
  .instruction-pill { top: -24px; min-height: 46px; padding: 5px 15px 5px 5px; font-size: 10px; }
  .instruction-mascot { flex-basis: 36px; width: 36px; height: 36px; }
  .reels-grid { gap: 8px; }
  .reel-column,
  .picture-column { grid-template-rows: 28px 34px clamp(118px, 34dvh, 145px) 34px 29px; }
  .reel-column > header { min-height: 28px; padding-bottom: 3px; }
  .reel-column > header strong { font-size: 12px; }
  .reel-machine { height: clamp(118px, 34dvh, 145px); border-radius: 20px 11px 20px 11px; }
  .reel-arrow { min-height: 32px; }
  .reel-arrow.up { margin-bottom: 2px; }
  .reel-arrow.down { margin-top: 2px; }
  .listen-button { min-height: 27px; margin-top: 1px; }
  .target-lock { padding: 4px 8px; }
  .hint-box { margin-top: 8px; min-height: 52px; }
  .word-tray { display: none; }
  body[data-view="game"] .game-actions { grid-template-columns: 94px minmax(220px, 1fr); gap: 6px; width: min(590px, calc(100% - 18px)); padding: 6px; border-radius: 18px; }
  .spin-button,
  .check-button,
  .hint-button { min-height: 48px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-stage,
  .hero-mascot-wrap,
  .specimen-card,
  .stage-card { transform: none !important; }
}