:root {
  --bg1: #fff7ff;
  --bg2: #e6f7ff;
  --bg3: #fff4d8;
  --panel: rgba(255, 255, 255, 0.93);
  --ink: #26314d;
  --muted: #687086;
  --brand: #8357ff;
  --brand-dark: #5731bd;
  --pink: #ff83c4;
  --gold: #ffbe4d;
  --coin: #f9c847;
  --diamond: #7ae9ff;
  --success: #1c9b68;
  --danger: #cc4b66;
  --soft: #f5eeff;
  --line: rgba(70, 53, 120, 0.13);
  --shadow: 0 18px 45px rgba(55, 41, 96, 0.16);
  --radius: 28px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: "Trebuchet MS", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 217, 246, 0.95), transparent 28rem),
    radial-gradient(circle at 90% 8%, rgba(188, 242, 255, 0.9), transparent 30rem),
    radial-gradient(circle at 30% 100%, rgba(255, 244, 198, 0.95), transparent 32rem),
    linear-gradient(135deg, var(--bg1), var(--bg2));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.86) 0 11px, transparent 12px),
    radial-gradient(circle at 19% 24%, rgba(255,255,255,0.62) 0 18px, transparent 19px),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,0.78) 0 15px, transparent 16px),
    radial-gradient(circle at 88% 24%, rgba(255,255,255,0.60) 0 23px, transparent 24px),
    radial-gradient(circle at 74% 82%, rgba(255,255,255,0.58) 0 20px, transparent 21px);
  opacity: 0.75;
}

body.modal-open { overflow: hidden; }

#app {
  position: relative;
  z-index: 1;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 22px;
}

.no-script {
  margin: 2rem;
  padding: 1rem;
  background: white;
  border-radius: 1rem;
}

button,
input,
select { font: inherit; }

button {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible,
select:focus-visible,
canvas:focus-visible {
  outline: 4px solid rgba(131, 87, 255, 0.36);
  outline-offset: 3px;
}

.shell { display: grid; gap: 22px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: stretch;
  min-height: calc(100vh - 44px);
}

.hero-card {
  padding: clamp(24px, 5vw, 54px);
  display: grid;
  align-content: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff4cf;
  color: #805413;
  font-weight: 1000;
  margin-bottom: 14px;
}

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

h1 {
  font-size: clamp(2.35rem, 7vw, 5.65rem);
  line-height: 0.95;
  margin-bottom: 18px;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1;
  margin-bottom: 8px;
}

h3 { font-size: 1.35rem; margin-bottom: 8px; }

.lead {
  font-size: clamp(1.12rem, 2.2vw, 1.45rem);
  line-height: 1.38;
  color: var(--muted);
  margin-bottom: 24px;
}

.tiny-note {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.35;
}

.button-row,
.mode-grid,
.action-row,
.level-tools,
.wallet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.btn {
  min-height: 58px;
  padding: 14px 22px;
  border-radius: 18px;
  font-weight: 1000;
  font-size: 1.04rem;
  color: white;
  background: linear-gradient(135deg, var(--brand), #a86cff);
  box-shadow: 0 10px 0 rgba(91, 53, 200, 0.28), 0 18px 28px rgba(123, 77, 255, 0.16);
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 5px 0 rgba(91, 53, 200, 0.24), 0 10px 18px rgba(123, 77, 255, 0.14);
}

.btn.secondary {
  color: var(--ink);
  background: white;
  border: 2px solid var(--line);
  box-shadow: 0 8px 0 rgba(55, 41, 96, 0.08), 0 16px 22px rgba(55, 41, 96, 0.08);
}

.btn.warning {
  background: linear-gradient(135deg, #ffac3f, #ffcf5c);
  color: #4b3300;
  box-shadow: 0 10px 0 rgba(180, 116, 12, 0.22), 0 18px 28px rgba(255, 184, 77, 0.18);
}

.btn.success {
  background: linear-gradient(135deg, #1fba78, #70d68d);
  color: white;
  box-shadow: 0 10px 0 rgba(31, 157, 103, 0.24), 0 18px 28px rgba(31, 157, 103, 0.16);
}

.btn.pink {
  background: linear-gradient(135deg, #ff74bd, #ff9bd3);
  color: white;
  box-shadow: 0 10px 0 rgba(180, 70, 140, 0.22), 0 18px 28px rgba(255, 116, 189, 0.18);
}

.btn.small {
  min-height: 46px;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 0.94rem;
}

.btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

.mode-card {
  flex: 1 1 240px;
  padding: 22px;
  text-align: left;
  border-radius: 24px;
  background: white;
  border: 3px solid transparent;
  color: var(--ink);
  box-shadow: 0 14px 32px rgba(55, 41, 96, 0.12);
}

.mode-card:hover { border-color: rgba(123, 77, 255, 0.26); }
.mode-card .icon { font-size: 2.45rem; display: block; margin-bottom: 8px; }
.mode-card strong { display: block; font-size: 1.35rem; }
.mode-card span:last-child { display: block; margin-top: 6px; color: var(--muted); line-height: 1.35; }

.wallet-card {
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,0.72);
  border: 2px solid rgba(255,255,255,0.8);
  margin: 8px 0 22px;
}

.wallet-pill,
.progress-pill {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: fit-content;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--brand-dark);
  font-weight: 1000;
  white-space: nowrap;
}

.wallet-pill.coin { background: #fff4c4; color: #755000; }
.wallet-pill.gold { background: #ffedb5; color: #7b5400; }
.wallet-pill.diamond { background: #e9fbff; color: #066277; }
.wallet-pill.token { background: #f4efff; color: #5a36b3; }

.stage-card {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  padding: 28px;
  display: grid;
  align-content: center;
  justify-items: center;
  perspective: 900px;
}

.rainbow-arc {
  position: absolute;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 45%, #ffffff 46% 51%, transparent 52%),
    conic-gradient(from 230deg, #ff6e8a, #ffcc55, #6bdc73, #66c9ff, #ab88ff, #ff8bd7, #ff6e8a);
  opacity: 0.50;
  top: -190px;
  right: -90px;
  animation: rainbow-pulse 5s ease-in-out infinite;
}

.pony-scene {
  position: relative;
  width: min(455px, 100%);
  min-height: 330px;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.pony-glow {
  width: 255px;
  height: 255px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0.18));
  position: absolute;
  filter: blur(0.5px);
}

.pony-emoji,
.pony-3d {
  position: relative;
  font-size: clamp(7rem, 18vw, 12rem);
  filter: drop-shadow(0 18px 22px rgba(55, 41, 96, 0.2));
  animation: pony-float-3d 3.2s ease-in-out infinite;
  transform-style: preserve-3d;
}

.sparkle-orbit {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: orbit 8s linear infinite;
}

.sparkle-orbit span {
  position: absolute;
  font-size: 2rem;
  filter: drop-shadow(0 8px 12px rgba(55, 41, 96, 0.12));
}
.sparkle-orbit span:nth-child(1) { left: 8%; top: 28%; }
.sparkle-orbit span:nth-child(2) { right: 4%; top: 46%; }
.sparkle-orbit span:nth-child(3) { left: 52%; bottom: 0; }

.speech-bubble {
  position: absolute;
  left: 10px;
  bottom: 14px;
  max-width: 320px;
  padding: 16px 18px;
  border-radius: 24px 24px 24px 8px;
  background: white;
  color: var(--ink);
  font-weight: 1000;
  line-height: 1.25;
  box-shadow: 0 16px 32px rgba(55, 41, 96, 0.12);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: -10px;
  width: 22px;
  height: 22px;
  background: white;
  transform: rotate(45deg);
  border-radius: 4px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.brand-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 1000;
  font-size: 1.15rem;
}

.term-tabs { display: flex; gap: 10px; flex-wrap: wrap; }

.tab {
  padding: 10px 16px;
  border-radius: 999px;
  background: white;
  color: var(--ink);
  border: 2px solid var(--line);
  font-weight: 1000;
}
.tab.active { background: var(--brand); color: white; border-color: var(--brand); }

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.level-card {
  min-height: 182px;
  padding: 20px;
  border-radius: 24px;
  background: white;
  border: 2px solid var(--line);
  box-shadow: 0 12px 24px rgba(55, 41, 96, 0.1);
  color: var(--ink);
  text-align: left;
  display: grid;
  align-content: space-between;
  gap: 14px;
}
.level-card:hover { border-color: rgba(123, 77, 255, 0.35); transform: translateY(-2px); }
.level-card.locked { opacity: 0.62; cursor: default; }
.level-title { font-size: 1.23rem; font-weight: 1000; }
.level-world { color: var(--muted); font-weight: 850; }

.game-layout {
  display: grid;
  grid-template-columns: 332px 1fr;
  gap: 22px;
  align-items: start;
}

.side-panel,
.play-panel { padding: 22px; }
.side-panel { position: sticky; top: 16px; }

.pony-helper {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
}

.small-pony {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), transparent 38%),
    linear-gradient(135deg, #ffe8f9, #e8f3ff);
  font-size: 5rem;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,0.55), 0 16px 28px rgba(55, 41, 96, 0.12);
  animation: pony-float-3d 3.1s ease-in-out infinite;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}

.stat {
  background: white;
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  text-align: center;
}
.stat strong { display: block; font-size: 1.42rem; }
.stat span { color: var(--muted); font-size: 0.9rem; font-weight: 1000; }

.progress-track {
  height: 18px;
  border-radius: 999px;
  background: #edf0f8;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8bd7, #ffcf5c, #70d68d, #66c9ff, #ab88ff);
  width: 0;
  transition: width 0.3s ease;
}

.question-card { display: grid; gap: 18px; }

.prompt-area {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.91), rgba(255,255,255,0.75)),
    repeating-linear-gradient(45deg, #faf4ff 0 12px, #eef9ff 12px 24px);
  border: 2px solid var(--line);
  text-align: center;
}

.prompt-title {
  color: var(--muted);
  font-weight: 1000;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.study-word {
  min-height: 110px;
  display: grid;
  place-items: center;
  font-size: clamp(3.1rem, 8vw, 6.4rem);
  font-weight: 1000;
  letter-spacing: 0.03em;
  color: var(--brand-dark);
  text-shadow: 0 8px 0 rgba(123, 77, 255, 0.08);
}

.study-word.chinese { font-size: clamp(4.2rem, 12vw, 8rem); letter-spacing: 0.08em; }

.hidden-word {
  min-height: 110px;
  display: grid;
  place-items: center;
  font-size: clamp(3.3rem, 8vw, 6.5rem);
  font-weight: 1000;
  color: var(--brand-dark);
  filter: drop-shadow(0 10px 18px rgba(55, 41, 96, 0.16));
}

.memory-cloud {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  border-radius: 28px;
  background: rgba(255,255,255,0.8);
  border: 2px dashed rgba(123,77,255,0.24);
}

.chunk-row,
.hint-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
}

.chunk,
.hint-chip {
  padding: 8px 14px;
  border-radius: 16px;
  background: #fff4cf;
  color: #6b4300;
  font-weight: 1000;
  font-size: 1.16rem;
  border: 2px solid rgba(255, 184, 77, 0.35);
}

.hint-chip.pinyin { background: #eafaff; color: #0a667d; border-color: rgba(122,233,255,0.35); }

.countdown-wrap {
  display: grid;
  place-items: center;
  gap: 8px;
  margin-top: 12px;
}

.countdown-bubble {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--pink) var(--pct), rgba(131,87,255,0.13) 0);
  box-shadow: inset 0 0 0 9px rgba(255,255,255,0.88), 0 14px 24px rgba(55, 41, 96, 0.12);
  color: var(--brand-dark);
  font-size: 2.1rem;
  font-weight: 1000;
}

.write-pad-wrap {
  display: grid;
  gap: 12px;
}

.write-pad-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 1000;
}

.write-canvas {
  width: 100%;
  height: min(46vh, 360px);
  min-height: 265px;
  border: 4px solid rgba(131, 87, 255, 0.20);
  border-radius: 26px;
  background:
    linear-gradient(#fff, #fff),
    repeating-linear-gradient(0deg, rgba(131,87,255,0.10) 0 2px, transparent 2px 58px);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,0.78), 0 16px 28px rgba(55, 41, 96, 0.09);
  touch-action: none;
  cursor: crosshair;
}

.canvas-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 900;
}

.canvas-guide span {
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--line);
  text-align: center;
}

.message-box {
  min-height: 58px;
  padding: 14px 18px;
  border-radius: 20px;
  background: white;
  border: 2px solid var(--line);
  font-weight: 950;
  line-height: 1.35;
  display: flex;
  align-items: center;
}
.message-box.good { border-color: rgba(31, 157, 103, 0.25); background: #f0fff5; color: #126342; }
.message-box.help { border-color: rgba(255, 184, 77, 0.35); background: #fffaf0; color: #6b4300; }
.message-box.warn { border-color: rgba(204,75,102,0.25); background: #fff6f8; color: #8d2940; }

.ocr-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 26px;
  background: white;
  border: 2px solid var(--line);
  text-align: center;
}

.magic-loader {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 3.2rem;
  background: conic-gradient(#ff83c4, #ffcf5c, #7ae9ff, #a86cff, #ff83c4);
  animation: spin 1.3s linear infinite;
  box-shadow: 0 18px 30px rgba(55, 41, 96, 0.14);
}
.magic-loader span { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: white; }

.reward-pop {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0;
}

.reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  border-radius: 999px;
  background: #fff4cf;
  font-weight: 1000;
  animation: pop 0.42s ease both;
}

.review-text {
  padding: 14px 16px;
  border-radius: 18px;
  background: #f8f5ff;
  border: 2px solid rgba(131,87,255,0.14);
  font-weight: 950;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(36, 50, 74, 0.32);
  backdrop-filter: blur(6px);
}

.modal {
  width: min(760px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  padding: 30px;
  border-radius: 34px;
  background: white;
  box-shadow: 0 24px 70px rgba(36, 50, 74, 0.24);
  text-align: center;
}

.big-sticker {
  font-size: 6rem;
  margin: 12px 0;
  animation: pop 0.5s ease both;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.sticker-grid,
.shop-grid,
.video-grid,
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.sticker-card,
.shop-card,
.video-card,
.report-card,
.object-card {
  padding: 18px;
  border-radius: 24px;
  background: white;
  border: 2px solid var(--line);
  text-align: center;
  min-height: 150px;
  display: grid;
  place-items: center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(55, 41, 96, 0.08);
}

.sticker-card.locked,
.shop-card.locked,
.video-card.locked { filter: grayscale(0.35); opacity: 0.66; }
.sticker-card .sticker,
.shop-card .object,
.object-card .object,
.video-card .object { font-size: 3.2rem; }
.sticker-card strong,
.shop-card strong,
.video-card strong { font-size: 0.98rem; }

.shop-card.unlocked { border-color: rgba(31,157,103,0.28); background: #f4fff7; }

.room-stage {
  min-height: 470px;
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.98), rgba(255,255,255,0.45) 30%, transparent 31%),
    linear-gradient(180deg, #e8f8ff 0 48%, #dff8d9 49% 100%);
  border: 2px solid var(--line);
  perspective: 850px;
  box-shadow: inset 0 -40px 90px rgba(71, 157, 70, 0.08), var(--shadow);
}

.room-pony {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  font-size: clamp(6rem, 16vw, 10rem);
  animation: pony-float-3d 3.4s ease-in-out infinite;
  filter: drop-shadow(0 18px 20px rgba(55,41,96,0.18));
}

.room-object {
  position: absolute;
  font-size: 3.6rem;
  animation: object-bob 3.8s ease-in-out infinite;
  filter: drop-shadow(0 14px 14px rgba(55,41,96,0.15));
}
.room-object:nth-child(2) { left: 9%; bottom: 60px; animation-delay: -0.4s; }
.room-object:nth-child(3) { right: 10%; bottom: 80px; animation-delay: -0.9s; }
.room-object:nth-child(4) { left: 18%; top: 75px; animation-delay: -1.2s; }
.room-object:nth-child(5) { right: 21%; top: 88px; animation-delay: -1.7s; }
.room-object:nth-child(6) { left: 41%; bottom: 34px; animation-delay: -2.1s; }
.room-object:nth-child(7) { right: 42%; top: 46px; animation-delay: -2.6s; }

.video-stage {
  position: relative;
  height: min(54vh, 440px);
  min-height: 320px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #dff8ff 0 55%, #ddffd9 56% 100%);
  border: 2px solid var(--line);
  perspective: 900px;
}
.video-sun {
  position: absolute;
  right: 34px;
  top: 30px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #ffdc72;
  box-shadow: 0 0 38px rgba(255, 220, 114, 0.8);
}
.video-cloud {
  position: absolute;
  width: 130px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  animation: cloud-drift 15s linear infinite;
}
.video-cloud::before,
.video-cloud::after {
  content: "";
  position: absolute;
  bottom: 12px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
}
.video-cloud::before { left: 18px; }
.video-cloud::after { right: 18px; }
.video-cloud.one { left: -140px; top: 70px; }
.video-cloud.two { left: -260px; top: 150px; animation-delay: -7s; opacity: 0.75; }
.video-pony {
  position: absolute;
  left: 12%;
  bottom: 80px;
  font-size: clamp(5rem, 14vw, 9rem);
  animation: video-pony-run 6s ease-in-out infinite;
  filter: drop-shadow(0 22px 18px rgba(55, 41, 96, 0.20));
}
.video-object-a,
.video-object-b,
.video-object-c {
  position: absolute;
  font-size: clamp(3rem, 7vw, 5rem);
  animation: object-bob 3s ease-in-out infinite;
}
.video-object-a { left: 18%; top: 28%; }
.video-object-b { right: 18%; top: 38%; animation-delay: -0.8s; }
.video-object-c { left: 48%; bottom: 34px; animation-delay: -1.4s; }

.video-caption {
  padding: 14px 16px;
  border-radius: 18px;
  background: #fffaf0;
  color: #6b4300;
  font-weight: 950;
  margin: 14px 0 0;
}

.confetti {
  position: fixed;
  z-index: 30;
  left: var(--x);
  top: -20px;
  font-size: 1.6rem;
  pointer-events: none;
  animation: confetti-fall 1.2s ease-in forwards;
}

.empty-state {
  padding: 28px;
  border-radius: 24px;
  background: white;
  border: 2px dashed rgba(123, 77, 255, 0.25);
  color: var(--muted);
  font-weight: 950;
}

.voice-select {
  width: 100%;
  min-height: 56px;
  border-radius: 18px;
  border: 3px solid rgba(131,87,255,0.18);
  background: white;
  padding: 10px 14px;
  font-weight: 900;
  color: var(--ink);
}

.table-like {
  display: grid;
  gap: 8px;
}
.row-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: white;
  border: 1px solid var(--line);
  font-weight: 900;
}
.row-line span:last-child { color: var(--muted); text-align: right; }

@keyframes rainbow-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.46; }
  50% { transform: scale(1.06) rotate(8deg); opacity: 0.56; }
}

@keyframes pony-float-3d {
  0%, 100% { transform: translateY(0) rotateY(-12deg) rotateZ(-2deg); }
  50% { transform: translateY(-16px) rotateY(14deg) rotateZ(3deg); }
}

@keyframes orbit {
  from { transform: rotateZ(0deg) rotateY(18deg); }
  to { transform: rotateZ(360deg) rotateY(18deg); }
}

@keyframes object-bob {
  0%, 100% { transform: translateY(0) rotateY(-12deg); }
  50% { transform: translateY(-14px) rotateY(18deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

@keyframes pop {
  0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
  70% { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

@keyframes cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 420px)); }
}

@keyframes video-pony-run {
  0%, 100% { transform: translateX(0) translateY(0) rotateY(-12deg); }
  35% { transform: translateX(34vw) translateY(-10px) rotateY(16deg); }
  60% { transform: translateX(52vw) translateY(6px) rotateY(-18deg); }
}

@media (max-width: 940px) {
  .hero,
  .game-layout { grid-template-columns: 1fr; }
  .side-panel { position: static; }
  .hero { min-height: unset; }
  .stage-card { min-height: 340px; }
}

@media (max-width: 680px) {
  #app { padding: 14px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .btn { width: 100%; }
  .action-row .btn,
  .level-tools .btn,
  .button-row .btn { width: auto; }
  .wallet-row { gap: 8px; }
  .wallet-pill { padding: 8px 10px; font-size: 0.92rem; }
  .study-word { min-height: 94px; }
  .write-canvas { height: 310px; }
  .canvas-guide { grid-template-columns: 1fr; }
  .modal { padding: 20px; }
}

@media print {
  body { background: white; }
  body::before,
  .topbar,
  .btn,
  .stage-card { display: none !important; }
  #app { width: 100%; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* 30-second opening intro video */
.intro-screen {
  position: relative;
  min-height: calc(100vh - 44px);
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.92), transparent 15rem),
    linear-gradient(160deg, #ffe9fb 0%, #dff7ff 42%, #fff0ba 100%);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.intro-screen::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.7) 0 18px, transparent 19px),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.6) 0 24px, transparent 25px),
    radial-gradient(circle at 46% 64%, rgba(255,255,255,0.35) 0 16px, transparent 17px),
    repeating-linear-gradient(110deg, rgba(255,255,255,0.14) 0 12px, transparent 12px 34px);
  animation: introSparkleDrift 15s linear infinite;
  z-index: 0;
}

.intro-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 900px;
  overflow: hidden;
}

.intro-sun {
  position: absolute;
  width: clamp(88px, 13vw, 150px);
  height: clamp(88px, 13vw, 150px);
  top: 7%;
  right: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8b4 0 24%, #ffd96c 42%, rgba(255, 194, 87, 0.18) 70%);
  box-shadow: 0 0 54px rgba(255, 213, 91, 0.76);
  animation: introPulse 2.4s ease-in-out infinite;
}

.intro-cloud {
  position: absolute;
  width: 160px;
  height: 62px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  filter: drop-shadow(0 14px 16px rgba(102, 80, 166, 0.12));
  animation: introCloud 16s linear infinite;
}

.intro-cloud::before,
.intro-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.intro-cloud::before { width: 76px; height: 76px; left: 26px; top: -34px; }
.intro-cloud::after { width: 92px; height: 92px; right: 20px; top: -48px; }
.intro-cloud.cloud-a { left: 7%; top: 18%; transform: scale(0.85); }
.intro-cloud.cloud-b { left: 54%; top: 26%; animation-duration: 19s; transform: scale(0.72); opacity: 0.82; }
.intro-cloud.cloud-c { left: 22%; top: 48%; animation-duration: 22s; transform: scale(0.6); opacity: 0.68; }

.intro-rainbow {
  position: absolute;
  left: 50%;
  top: 8%;
  width: min(80vw, 820px);
  height: min(38vw, 360px);
  transform: translateX(-50%) rotateX(56deg) translateZ(-40px);
  transform-origin: center bottom;
  opacity: 0.92;
  filter: drop-shadow(0 18px 25px rgba(110, 75, 190, 0.15));
}

.intro-rainbow span {
  position: absolute;
  inset: 0;
  border-radius: 999px 999px 0 0;
  border-style: solid;
  border-bottom: 0;
  animation: introRainbowGlow 3s ease-in-out infinite;
}

.intro-rainbow span:nth-child(1) { border-width: 30px; border-color: #ff7ec7; }
.intro-rainbow span:nth-child(2) { inset: 36px; border-width: 28px; border-color: #ffd35c; animation-delay: 0.2s; }
.intro-rainbow span:nth-child(3) { inset: 70px; border-width: 25px; border-color: #67dcff; animation-delay: 0.4s; }
.intro-rainbow span:nth-child(4) { inset: 102px; border-width: 22px; border-color: #a882ff; animation-delay: 0.6s; }

.intro-floor {
  position: absolute;
  left: 50%;
  bottom: -20%;
  width: 120%;
  height: 45%;
  transform: translateX(-50%) rotateX(62deg);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.78), transparent 24%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 8px, transparent 8px 54px),
    linear-gradient(135deg, rgba(154, 255, 198, 0.78), rgba(127, 220, 255, 0.56));
  border-radius: 50% 50% 0 0;
  box-shadow: inset 0 20px 60px rgba(255,255,255,0.48);
}

.intro-panel {
  position: absolute;
  z-index: 6;
  left: clamp(18px, 4vw, 56px);
  right: clamp(18px, 4vw, 56px);
  bottom: clamp(18px, 4vw, 42px);
  padding: clamp(18px, 3vw, 32px);
  max-width: 740px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}

.intro-panel h1 {
  font-size: clamp(2.1rem, 5.5vw, 4.6rem);
  line-height: 0.98;
  margin-bottom: 10px;
}

.intro-panel .lead {
  margin-bottom: 16px;
}

.intro-progress {
  height: 16px;
  border-radius: 999px;
  background: rgba(104, 112, 134, 0.16);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.75);
}

.intro-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff76c5, #ffd35c, #70e0ff, #9b77ff);
  transition: width 0.45s ease;
}

.intro-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 1000;
  margin: 10px 0 16px;
}

.intro-buttons { margin-bottom: 10px; }

.intro-pony3d {
  --pony-x: 58%;
  --pony-y: 50%;
  position: absolute;
  left: var(--pony-x);
  top: var(--pony-y);
  width: 280px;
  height: 230px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateY(-10deg) rotateX(4deg);
  animation: introPonyBounce 1.4s ease-in-out infinite, introPonyTravel 30s linear forwards;
  z-index: 3;
}

.pony-shadow {
  position: absolute;
  left: 42px;
  bottom: 8px;
  width: 190px;
  height: 34px;
  border-radius: 50%;
  background: rgba(83, 67, 125, 0.18);
  filter: blur(2px);
  transform: translateZ(-50px) rotateX(80deg);
}

.pony-body,
.pony-neck,
.pony-head,
.pony-leg,
.pony-tail,
.pony-wing,
.pony-ear,
.pony-mane,
.pony-horn {
  position: absolute;
  transform-style: preserve-3d;
}

.pony-body {
  width: 148px;
  height: 92px;
  left: 70px;
  top: 86px;
  border-radius: 52% 48% 45% 48%;
  background: linear-gradient(135deg, #ff9fd3, #ffaee2 46%, #d0b2ff);
  box-shadow: inset -20px -12px 25px rgba(104, 70, 180, 0.12), 0 18px 24px rgba(88, 69, 142, 0.18);
}

.pony-neck {
  width: 54px;
  height: 86px;
  left: 172px;
  top: 54px;
  border-radius: 42px 42px 18px 18px;
  background: linear-gradient(135deg, #fface0, #c8afff);
  transform: rotate(-12deg);
}

.pony-head {
  width: 86px;
  height: 72px;
  left: 194px;
  top: 36px;
  border-radius: 58% 45% 46% 55%;
  background: linear-gradient(135deg, #ffc0e7, #c7b1ff);
  box-shadow: inset -12px -8px 20px rgba(77, 57, 140, 0.12), 0 14px 20px rgba(88, 69, 142, 0.15);
}

.pony-ear {
  width: 26px;
  height: 34px;
  top: 18px;
  border-radius: 80% 20% 80% 20%;
  background: linear-gradient(135deg, #ffc0e7, #c7b1ff);
}

.pony-ear.ear-one { left: 208px; transform: rotate(-18deg); }
.pony-ear.ear-two { left: 242px; transform: rotate(18deg); }

.pony-eye {
  position: absolute;
  left: 252px;
  top: 58px;
  width: 13px;
  height: 19px;
  border-radius: 50%;
  background: #26314d;
  box-shadow: inset 4px 4px 0 rgba(255,255,255,0.8);
  animation: introBlink 4s linear infinite;
}

.pony-smile {
  position: absolute;
  left: 260px;
  top: 83px;
  width: 22px;
  height: 12px;
  border-bottom: 4px solid #8357ff;
  border-radius: 0 0 999px 999px;
}

.pony-horn {
  left: 230px;
  top: 9px;
  width: 18px;
  height: 48px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #fff9b0, #ffb8dc 55%, #9c80ff);
  filter: drop-shadow(0 0 10px rgba(255, 210, 88, 0.74));
  transform: rotate(10deg);
}

.pony-mane {
  left: 185px;
  top: 38px;
  width: 70px;
  height: 105px;
  border-radius: 50% 24% 52% 32%;
  background: linear-gradient(180deg, #9f7aff 0 25%, #62dbff 25% 48%, #ffd35c 48% 70%, #ff7ec7 70% 100%);
  box-shadow: inset -10px -6px 18px rgba(0,0,0,0.08);
  transform: rotate(7deg);
  animation: introManeWave 1.8s ease-in-out infinite;
}

.pony-tail {
  left: 24px;
  top: 76px;
  width: 88px;
  height: 90px;
  border-radius: 78% 22% 72% 28%;
  background: linear-gradient(180deg, #9f7aff 0 28%, #62dbff 28% 50%, #ffd35c 50% 72%, #ff7ec7 72% 100%);
  transform-origin: 86% 42%;
  transform: rotate(10deg);
  animation: introTailSwish 1.4s ease-in-out infinite;
}

.pony-wing {
  left: 104px;
  top: 70px;
  width: 76px;
  height: 58px;
  border-radius: 80% 20% 80% 20%;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(126, 224, 255, 0.7));
  transform: rotate(-18deg);
  transform-origin: right bottom;
  animation: introWingFlap 0.55s ease-in-out infinite alternate;
}

.pony-wing::after {
  content: "";
  position: absolute;
  inset: 14px 10px 10px 10px;
  border-top: 4px solid rgba(131, 87, 255, 0.22);
  border-radius: 50%;
}

.pony-leg {
  width: 26px;
  height: 76px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f9aee4, #d3b7ff);
  top: 150px;
}

.pony-leg::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -5px;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #a57dff;
}

.pony-leg.leg-one { left: 92px; animation: introLegA 0.7s linear infinite; }
.pony-leg.leg-two { left: 126px; animation: introLegB 0.7s linear infinite; }
.pony-leg.leg-three { left: 174px; animation: introLegB 0.7s linear infinite; }
.pony-leg.leg-four { left: 204px; animation: introLegA 0.7s linear infinite; }

.intro-stars span,
.intro-reward,
.intro-castle,
.intro-hand,
.intro-word-card,
.intro-trail {
  position: absolute;
  z-index: 4;
}

.intro-stars span {
  font-size: clamp(1.7rem, 4vw, 3.3rem);
  animation: introStarPop 2.2s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(92, 70, 145, 0.16));
}

.intro-stars span:nth-child(1) { left: 15%; top: 16%; animation-delay: 0.1s; }
.intro-stars span:nth-child(2) { left: 34%; top: 25%; animation-delay: 0.45s; }
.intro-stars span:nth-child(3) { left: 72%; top: 15%; animation-delay: 0.8s; }
.intro-stars span:nth-child(4) { left: 81%; top: 43%; animation-delay: 1.05s; }
.intro-stars span:nth-child(5) { left: 26%; top: 58%; animation-delay: 1.3s; }

.intro-trail {
  font-size: clamp(1.3rem, 3.6vw, 2.7rem);
  font-weight: 1000;
  color: #8357ff;
  background: rgba(255,255,255,0.76);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 14px 22px rgba(92, 70, 145, 0.12);
  animation: introLetterFloat 7s ease-in-out infinite;
}

.trail-a { left: 10%; top: 34%; }
.trail-b { right: 10%; top: 34%; animation-delay: 1s; }
.trail-c { left: 37%; top: 12%; animation-delay: 2s; }

.intro-word-card {
  left: 50%;
  top: 30%;
  transform: translateX(-50%) rotateY(-8deg) rotateX(7deg);
  width: min(78vw, 470px);
  min-height: 150px;
  border-radius: 30px;
  background: rgba(255,255,255,0.92);
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 22px 48px rgba(84, 62, 143, 0.18);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}

.intro-word-card span {
  position: absolute;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  font-weight: 1000;
  letter-spacing: -0.04em;
  color: #5731bd;
  opacity: 0;
  transform: scale(0.8);
}

.intro-word-one { animation: introWordOne 30s linear forwards; }
.intro-word-two { animation: introWordTwo 30s linear forwards; }
.intro-word-three { animation: introWordThree 30s linear forwards; }

.intro-hand {
  left: 50%;
  top: 45%;
  font-size: clamp(3rem, 10vw, 6rem);
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: drop-shadow(0 14px 18px rgba(84, 62, 143, 0.18));
  animation: introHandWrite 30s linear forwards;
}

.intro-reward {
  font-size: clamp(2.7rem, 7vw, 5rem);
  opacity: 0;
  filter: drop-shadow(0 14px 20px rgba(84, 62, 143, 0.2));
  animation: introRewardPop 30s linear forwards;
}

.reward-one { left: 18%; top: 28%; animation-delay: 0s; }
.reward-two { left: 42%; top: 20%; animation-delay: 0.25s; }
.reward-three { left: 66%; top: 28%; animation-delay: 0.5s; }
.reward-four { left: 78%; top: 58%; animation-delay: 0.75s; }

.intro-castle {
  right: 10%;
  bottom: 18%;
  font-size: clamp(3.2rem, 10vw, 6.8rem);
  opacity: 0;
  transform: translateY(60px) scale(0.72);
  filter: drop-shadow(0 18px 25px rgba(84, 62, 143, 0.18));
  animation: introCastle 30s linear forwards;
}

.scene-1 .intro-word-card,
.scene-2 .intro-word-card { opacity: 1; }
.scene-3 .intro-hand { opacity: 1; }
.scene-4 .intro-reward { opacity: 1; }
.scene-5 .intro-castle { opacity: 1; }
.scene-5 .intro-pony3d { filter: drop-shadow(0 0 22px rgba(255, 214, 95, 0.8)); }

@keyframes introSparkleDrift { to { transform: translate3d(-5%, 4%, 0) rotate(2deg); } }
@keyframes introPulse { 50% { transform: scale(1.08); filter: brightness(1.05); } }
@keyframes introCloud { 0% { translate: -3vw 0; } 50% { translate: 4vw -7px; } 100% { translate: -3vw 0; } }
@keyframes introRainbowGlow { 50% { filter: brightness(1.12) saturate(1.15); } }
@keyframes introPonyBounce { 0%, 100% { margin-top: 0; } 50% { margin-top: -18px; } }
@keyframes introPonyTravel {
  0% { left: 18%; top: 50%; transform: translate(-50%, -50%) scale(0.88) rotateY(-18deg); }
  18% { left: 55%; top: 47%; transform: translate(-50%, -50%) scale(1) rotateY(-8deg); }
  36% { left: 63%; top: 52%; transform: translate(-50%, -50%) scale(1.05) rotateY(8deg); }
  55% { left: 42%; top: 52%; transform: translate(-50%, -50%) scale(0.98) rotateY(-16deg); }
  76% { left: 56%; top: 48%; transform: translate(-50%, -50%) scale(1.06) rotateY(0deg); }
  100% { left: 50%; top: 48%; transform: translate(-50%, -50%) scale(1.1) rotateY(-4deg); }
}
@keyframes introManeWave { 50% { transform: rotate(11deg) skewX(-4deg); } }
@keyframes introTailSwish { 50% { transform: rotate(-15deg) skewX(5deg); } }
@keyframes introWingFlap { to { transform: rotate(-34deg) scaleY(0.85); } }
@keyframes introLegA { 50% { transform: rotate(9deg) translateY(-4px); } }
@keyframes introLegB { 50% { transform: rotate(-9deg) translateY(4px); } }
@keyframes introBlink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
@keyframes introStarPop { 0%, 100% { transform: scale(0.9) rotate(-8deg); opacity: 0.65; } 50% { transform: scale(1.18) rotate(10deg); opacity: 1; } }
@keyframes introLetterFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(3deg); } }
@keyframes introWordOne { 18%, 32% { opacity: 1; transform: scale(1); } 34%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes introWordTwo { 36%, 49% { opacity: 1; transform: scale(1); } 51%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes introWordThree { 52%, 66% { opacity: 1; transform: scale(1); } 68%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes introHandWrite {
  0%, 49% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  52%, 68% { opacity: 1; transform: translate(-20%, -20%) scale(1) rotate(-15deg); }
  59% { transform: translate(-80%, 10%) scale(1.04) rotate(8deg); }
  66% { transform: translate(-10%, 32%) scale(1.02) rotate(-4deg); }
  71%, 100% { opacity: 0; }
}
@keyframes introRewardPop {
  0%, 68% { opacity: 0; transform: translateY(50px) scale(0.65) rotate(-12deg); }
  72%, 84% { opacity: 1; transform: translateY(0) scale(1.12) rotate(8deg); }
  92%, 100% { opacity: 0.95; transform: translateY(-12px) scale(1) rotate(-4deg); }
}
@keyframes introCastle {
  0%, 82% { opacity: 0; transform: translateY(60px) scale(0.72); }
  87%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 820px) {
  .intro-screen { min-height: calc(100vh - 28px); border-radius: 24px; }
  .intro-panel { left: 12px; right: 12px; bottom: 12px; padding: 18px; }
  .intro-panel h1 { font-size: clamp(2rem, 10vw, 3.2rem); }
  .intro-panel .lead { font-size: 1.04rem; }
  .intro-pony3d { width: 220px; height: 190px; transform: translate(-50%, -50%) scale(0.82); }
  .pony-body { left: 54px; top: 82px; width: 122px; height: 76px; }
  .pony-neck { left: 138px; top: 54px; width: 46px; height: 72px; }
  .pony-head { left: 158px; top: 40px; width: 72px; height: 60px; }
  .pony-ear.ear-one { left: 170px; top: 24px; }
  .pony-ear.ear-two { left: 198px; top: 24px; }
  .pony-eye { left: 205px; top: 58px; }
  .pony-smile { left: 212px; top: 78px; }
  .pony-horn { left: 184px; top: 14px; }
  .pony-mane { left: 150px; top: 44px; width: 58px; height: 88px; }
  .pony-tail { left: 14px; top: 78px; width: 72px; height: 74px; }
  .pony-wing { left: 82px; top: 74px; width: 62px; height: 48px; }
  .pony-leg { top: 140px; height: 58px; }
  .pony-leg.leg-one { left: 74px; }
  .pony-leg.leg-two { left: 104px; }
  .pony-leg.leg-three { left: 142px; }
  .pony-leg.leg-four { left: 170px; }
  .pony-shadow { left: 26px; bottom: 2px; width: 150px; }
  .intro-rainbow { top: 4%; width: 110vw; height: 56vw; }
  .intro-trail { display: none; }
  .intro-word-card { top: 24%; min-height: 110px; }
  .intro-meta { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-screen *,
  .intro-screen::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* v6 branding, PWA app icon, and reliable MP4 opening video */
.home-brand-logo {
  display: block;
  width: min(100%, 780px);
  max-height: 245px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 18px;
  filter: drop-shadow(0 18px 24px rgba(84, 55, 160, 0.12));
}
.install-note {
  margin: -10px 0 18px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 237, 252, 0.9));
  border: 1px solid rgba(131, 87, 255, 0.16);
  color: #58466f;
  font-weight: 950;
  line-height: 1.35;
}
.sr-only-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.home-app-icon {
  width: min(58vw, 410px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 31%;
  box-shadow: 0 28px 62px rgba(72, 41, 150, 0.22), 0 0 0 10px rgba(255,255,255,0.45);
  animation: floaty 3s ease-in-out infinite;
}
.brand-mini { display: inline-flex; align-items: center; gap: 10px; }
.brand-mini img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(55, 41, 96, 0.14);
}
.letterhead-logo {
  display: block;
  width: min(720px, 100%);
  margin: 0 auto 18px;
  border-radius: 20px;
  filter: drop-shadow(0 12px 18px rgba(84, 55, 160, 0.10));
}
.video-intro {
  min-height: calc(100vh - 44px);
  padding: clamp(14px, 2.6vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  grid-template-rows: auto 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.9), transparent 16rem),
    radial-gradient(circle at 84% 18%, rgba(255, 230, 250, 0.95), transparent 19rem),
    linear-gradient(135deg, #fff4ff, #e7f8ff 46%, #fff2c9);
}
.video-intro::after {
  content: "⭐ ✨ 🌈 ✨ ⭐";
  position: absolute;
  inset: auto 24px 18px auto;
  z-index: 0;
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  opacity: 0.34;
  pointer-events: none;
  animation: introStarPop 2.8s ease-in-out infinite;
}
.intro-brand-line {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.intro-brand-line img {
  display: block;
  width: min(720px, 92vw);
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(84, 55, 160, 0.11));
}
.intro-movie-card {
  position: relative;
  z-index: 2;
  padding: clamp(8px, 1vw, 12px);
  border-radius: 32px;
  background: rgba(255,255,255,0.78);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(55, 41, 96, 0.22);
}
.video-intro .intro-movie {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 24px;
  background: #fff0ff url("assets/intro-poster.jpg") center / cover no-repeat;
}
.intro-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 220px;
  min-height: 68px;
  padding: 16px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff74bd, #ffd45c);
  color: #4b2866;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 1000;
  box-shadow: 0 18px 35px rgba(77, 48, 132, 0.26), 0 0 0 7px rgba(255,255,255,0.58);
  z-index: 5;
}
.intro-play-overlay.hidden { display: none; }
.video-intro .intro-panel {
  position: relative;
  z-index: 2;
  left: auto;
  right: auto;
  bottom: auto;
  max-width: none;
  align-self: stretch;
  display: grid;
  align-content: center;
  background: rgba(255, 255, 255, 0.9);
}
.video-intro .intro-panel h1 { font-size: clamp(2.3rem, 5vw, 4.45rem); }
.video-intro .intro-meta { color: #60516d; }
@media (max-width: 920px) {
  .video-intro {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: calc(100vh - 28px);
  }
  .intro-brand-line img { max-height: 120px; }
  .video-intro .intro-panel { padding: 18px; }
  .home-brand-logo { max-height: 190px; object-position: center; }
  .home-app-icon { width: min(72vw, 330px); }
}