:root {
  --bg: #07091a;
  --bg-deep: #03040d;
  --panel: rgba(15, 20, 50, 0.82);
  --panel-strong: #111633;
  --line: rgba(149, 188, 255, 0.2);
  --text: #f5f1e8;
  --muted: #a8b0ca;
  --cyan: #64e8ff;
  --violet: #9b8cff;
  --gold: #ffca68;
  --green: #5fe0b7;
  --coral: #ff718a;
  --danger: #ff718a;
  --radius: 22px;
  --radius-sm: 13px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg-deep); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 12%, rgba(105, 87, 255, .19), transparent 30%),
    radial-gradient(circle at 15% 82%, rgba(24, 207, 220, .11), transparent 32%),
    linear-gradient(145deg, #090d25 0%, var(--bg) 52%, #09071b 100%);
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 20px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  color: #02040c;
  background: var(--gold);
  border-radius: 8px;
  transition: top .2s;
}

.skip-link:focus { top: 16px; }

.space-mesh,
.scan-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.space-mesh {
  opacity: .7;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(100,232,255,.45) 0 1px, transparent 1.5px);
  background-position: 0 0, 31px 43px;
  background-size: 88px 88px, 137px 137px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.scan-grid {
  opacity: .16;
  background-image:
    linear-gradient(rgba(119,161,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119,161,255,.15) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(680px) rotateX(64deg) translateY(64vh) scale(1.8);
  transform-origin: center bottom;
}

.app-shell { position: relative; min-height: 100vh; z-index: 1; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 12px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 20, .78);
  backdrop-filter: blur(18px);
}

.brand,
.brand button {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand button,
.nav-button,
.icon-button {
  border: 0;
  background: none;
  cursor: pointer;
}

.brand-mark {
  width: 38px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--bg-deep);
  background: var(--cyan);
  clip-path: polygon(50% 0, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
  box-shadow: 0 0 28px rgba(100, 232, 255, .4);
  font-weight: 900;
}

.brand-copy strong { display: block; font-size: 15px; letter-spacing: .18em; }
.brand-copy small { color: var(--muted); font: 10px ui-monospace, monospace; letter-spacing: .22em; }

.main-nav { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; }

.nav-button {
  padding: 9px 17px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  transition: color .2s, background .2s;
}

.nav-button:hover,
.nav-button.is-active { color: var(--text); background: rgba(100, 232, 255, .11); }

.profile-chip { justify-self: end; display: flex; align-items: center; gap: 11px; color: var(--muted); }
.profile-chip strong { color: var(--text); font-size: 13px; }
.profile-avatar { width: 38px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: linear-gradient(145deg, #27316a, #11162e); }

.page {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(36px, 6vw, 88px) 0 72px;
  animation: page-in .55s var(--ease) both;
}

.page-narrow { width: min(960px, calc(100% - 40px)); }

.eyebrow,
.panel-code,
.region-code,
.metric-label {
  color: var(--cyan);
  font: 700 11px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; box-shadow: 0 0 10px currentColor; }

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

.hero-title {
  max-width: 900px;
  margin-bottom: 24px;
  font-size: clamp(44px, 7vw, 106px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 900;
}

.hero-title em { color: var(--cyan); font-style: normal; text-shadow: 0 0 34px rgba(100, 232, 255, .23); }

.hero-lede { max-width: 670px; color: #c4cae0; font-size: clamp(16px, 2vw, 20px); line-height: 1.85; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .5fr); gap: 44px; align-items: end; }

.orbit-panel {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50% 50% var(--radius) var(--radius);
  background: linear-gradient(180deg, rgba(30, 38, 85, .36), rgba(9, 12, 30, .75));
}

.orbit-panel::before,
.orbit-panel::after {
  content: "";
  position: absolute;
  width: 250px;
  aspect-ratio: 1;
  border: 1px solid rgba(100, 232, 255, .28);
  border-radius: 50%;
  animation: orbit 12s linear infinite;
}

.orbit-panel::after { width: 175px; border-style: dashed; animation-direction: reverse; animation-duration: 8s; }
.orbit-core { position: relative; z-index: 1; width: 94px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--cyan); background: radial-gradient(circle, rgba(100,232,255,.28), rgba(44,42,112,.4) 42%, rgba(5,7,20,.9) 70%); box-shadow: 0 0 55px rgba(100,232,255,.18); font-size: 38px; }
.orbit-note { position: absolute; bottom: 24px; color: var(--muted); font: 11px ui-monospace, monospace; letter-spacing: .15em; }

.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.primary-button,
.secondary-button,
.ghost-button,
.danger-button {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
  transition: transform .22s var(--ease), box-shadow .22s, background .22s;
}

.primary-button { color: #031019; background: var(--cyan); box-shadow: 0 12px 30px rgba(100,232,255,.18); }
.secondary-button { color: var(--text); background: rgba(155,140,255,.16); border-color: rgba(155,140,255,.38); }
.ghost-button { color: var(--muted); background: rgba(255,255,255,.035); border-color: var(--line); }
.danger-button { color: #ffd8df; background: rgba(255,113,138,.1); border-color: rgba(255,113,138,.32); }
.primary-button:hover, .secondary-button:hover, .ghost-button:hover, .danger-button:hover { transform: translateY(-2px); }

.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin: 70px 0 24px; }
.section-heading h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); }
.section-heading p { margin: 0; max-width: 510px; color: var(--muted); line-height: 1.7; }

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.mode-card, .region-card, .mission-card, .report-panel, .result-card, .onboard-card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(20, 27, 63, .88), rgba(8, 11, 30, .8));
  box-shadow: var(--shadow);
}

.mode-card { min-height: 230px; padding: 26px; border-radius: var(--radius); overflow: hidden; }
.mode-card::after { content: attr(data-index); position: absolute; right: 15px; bottom: -25px; color: rgba(255,255,255,.035); font: 900 110px/1 ui-monospace, monospace; }
.mode-card h3 { margin: 30px 0 12px; font-size: 24px; }
.mode-card p { color: var(--muted); line-height: 1.7; }
.mode-card button { position: absolute; left: 26px; bottom: 24px; z-index: 1; }

.region-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 15px; }
.region-card { grid-column: span 4; min-height: 270px; padding: 24px; border-radius: var(--radius); overflow: hidden; transition: transform .25s var(--ease), border-color .25s; }
.region-card:nth-child(4), .region-card:nth-child(5) { grid-column: span 5; }
.region-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--region-accent) 65%, transparent); }
.region-card::before { content: ""; position: absolute; width: 190px; aspect-ratio: 1; right: -80px; top: -76px; border: 1px solid color-mix(in srgb, var(--region-accent) 45%, transparent); border-radius: 50%; box-shadow: 0 0 60px color-mix(in srgb, var(--region-accent) 13%, transparent); }
.region-symbol { width: 50px; aspect-ratio: 1; display: grid; place-items: center; color: var(--region-accent); border: 1px solid currentColor; border-radius: 50%; font-size: 25px; }
.region-card h3 { margin: 38px 0 7px; font-size: 27px; }
.region-card p { max-width: 390px; color: var(--muted); line-height: 1.65; }
.region-card-footer { display: flex; justify-content: space-between; align-items: center; position: absolute; left: 24px; right: 24px; bottom: 20px; }
.region-card-footer span { color: var(--region-accent); font: 12px ui-monospace, monospace; }

.page-header { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-bottom: 35px; }
.page-header h1 { margin: 0; font-size: clamp(42px, 6vw, 78px); letter-spacing: -.045em; }
.page-header p { max-width: 620px; color: var(--muted); line-height: 1.7; }
.region-orb { width: 130px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--region-accent); border-radius: 50%; color: var(--region-accent); font-size: 52px; background: radial-gradient(circle, color-mix(in srgb, var(--region-accent) 18%, transparent), transparent 64%); box-shadow: 0 0 50px color-mix(in srgb, var(--region-accent) 13%, transparent); }

.mission-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
.mission-card { min-height: 255px; display: flex; flex-direction: column; padding: 20px; border-radius: 18px; overflow: hidden; }
.mission-number { color: var(--region-accent); font: 11px ui-monospace, monospace; letter-spacing: .14em; }
.mission-card h3 { margin: 30px 0 4px; font-size: 21px; }
.mission-ability { color: var(--region-accent); font-size: 12px; }
.mission-card p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.mission-card .ghost-button { margin-top: auto; width: 100%; }

.game-page { min-height: calc(100vh - 72px); display: grid; align-content: center; }
.game-console { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--line); border-radius: 30px; background: rgba(8, 11, 31, .9); box-shadow: var(--shadow); }
.game-console::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent, rgba(100,232,255,.035), transparent 52%); }
.game-status { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 38px; color: var(--muted); font: 12px ui-monospace, monospace; }
.progress-rail { height: 4px; flex: 1; max-width: 300px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.progress-rail span { display: block; height: 100%; background: var(--region-accent, var(--cyan)); box-shadow: 0 0 12px var(--region-accent, var(--cyan)); transition: width .3s; }
.challenge-prompt { max-width: 820px; margin: 0 auto 28px; text-align: center; font-size: clamp(24px, 3vw, 40px); line-height: 1.25; }
.challenge-signal { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto 26px; border: 1px solid var(--line); border-radius: 18px; color: var(--cyan); background: radial-gradient(circle at 50% 50%, rgba(100,232,255,.1), transparent 70%); font: 800 clamp(24px, 5vw, 58px)/1 ui-monospace, monospace; letter-spacing: .12em; transition: transform .4s var(--ease), filter .4s; }
.challenge-signal span { display: grid; gap: 7px; min-width: 150px; padding: 16px; text-align: center; border: 1px solid var(--line); border-radius: 13px; font-size: 15px; }
.challenge-signal small { color: var(--muted); font-size: 11px; }
.challenge-signal.is-live { color: var(--coral); box-shadow: inset 0 0 35px rgba(255,113,138,.12); animation: signal-pop .32s var(--ease); }
.challenge-signal.is-obscured { filter: blur(3px) contrast(.55); }
.signal-play { display: block; min-height: 48px; padding: 12px 20px; color: var(--bg); background: var(--cyan); border: 0; border-radius: 999px; cursor: pointer; font-weight: 900; letter-spacing: 0; }
.challenge-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 11px; max-width: 900px; margin: 0 auto; }
.challenge-option { min-height: 82px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: rgba(255,255,255,.045); cursor: pointer; font-weight: 800; font-size: clamp(16px, 2vw, 22px); transition: transform .18s, background .18s, border-color .18s; }
.challenge-option:hover:not(:disabled) { transform: translateY(-3px); background: rgba(100,232,255,.09); border-color: rgba(100,232,255,.55); }
.challenge-option:disabled { cursor: not-allowed; opacity: .35; }

.round-feedback { max-width: 620px; margin: 20px auto 0; padding: 20px; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-strong); animation: page-in .32s var(--ease); }
.round-feedback strong { display: block; margin-bottom: 8px; font-size: 24px; }
.round-feedback.is-correct strong { color: var(--green); }
.round-feedback.is-wrong strong { color: var(--coral); }

.result-card { max-width: 880px; margin: 0 auto; padding: clamp(28px, 5vw, 60px); border-radius: 30px; text-align: center; }
.result-grade { width: 138px; aspect-ratio: 1; display: grid; place-items: center; margin: 10px auto 28px; color: var(--bg); background: var(--cyan); border-radius: 50%; font: 900 52px/1 ui-monospace, monospace; box-shadow: 0 0 60px rgba(100,232,255,.25); }
.result-card h1 { font-size: clamp(36px, 6vw, 66px); }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.result-stat { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }
.result-stat strong { display: block; margin-top: 6px; font: 800 27px ui-monospace, monospace; }

.report-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.report-panel { padding: 26px; border-radius: var(--radius); }
.report-panel h2 { margin: 0 0 22px; font-size: 24px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metric { padding: 18px; border-left: 2px solid var(--cyan); background: rgba(255,255,255,.028); }
.metric strong { display: block; margin-top: 8px; font: 800 28px ui-monospace, monospace; }
.radar-wrap { display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 24px; }
.radar { width: 210px; height: 210px; overflow: visible; }
.radar-grid { fill: none; stroke: rgba(255,255,255,.13); }
.radar-shape { fill: rgba(100,232,255,.16); stroke: var(--cyan); stroke-width: 2; filter: drop-shadow(0 0 7px rgba(100,232,255,.3)); }
.radar-labels { display: grid; gap: 9px; }
.radar-labels span { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); }
.radar-labels strong { color: var(--text); }

.region-report-list { display: grid; gap: 10px; }
.region-report-row { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr 80px; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.report-bar { height: 7px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; }
.report-bar span { display: block; height: 100%; border-radius: inherit; }
.mission-report-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mission-report-item { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; color: var(--text); background: rgba(255,255,255,.025); font: inherit; text-align: left; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s, background .2s; }
.mission-report-item strong { display: block; margin-bottom: 6px; }
.mission-report-item small { color: var(--muted); }
.mission-report-item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cyan) 55%, var(--line)); background: #fff; box-shadow: 0 12px 24px rgba(47,86,126,.14); }
.mission-report-item:focus-visible { outline: 3px solid rgba(49,189,221,.38); outline-offset: 3px; }
.mission-report-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.mission-report-action { color: #159fc5; font-size: 10px; font-weight: 900; white-space: nowrap; opacity: .78; }
.mission-report-item:hover .mission-report-action, .mission-report-item:focus-visible .mission-report-action { opacity: 1; }
.collecting { color: var(--gold); }

.onboard-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.onboard-card { width: min(1000px, 100%); display: grid; grid-template-columns: 1.2fr .8fr; border-radius: 34px; overflow: hidden; }
.onboard-copy { padding: clamp(32px, 6vw, 72px); }
.onboard-copy h1 { margin-bottom: 24px; font-size: clamp(48px, 8vw, 92px); line-height: .92; letter-spacing: -.06em; }
.onboard-copy p { max-width: 580px; color: var(--muted); line-height: 1.8; }
.onboard-control { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 55px); background: linear-gradient(160deg, rgba(100,232,255,.16), rgba(155,140,255,.08)); border-left: 1px solid var(--line); }
.age-display { margin: 22px 0 10px; font: 900 76px/1 ui-monospace, monospace; }
.age-display small { font-size: 18px; color: var(--muted); }
.age-slider { width: 100%; accent-color: var(--cyan); }
.age-scale { display: flex; justify-content: space-between; margin: 8px 0 30px; color: var(--muted); font: 11px ui-monospace, monospace; }

.empty-report { min-height: 200px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.legal-note { margin-top: 22px; padding: 14px 18px; color: var(--muted); border-left: 2px solid var(--gold); background: rgba(255,202,104,.045); font-size: 13px; line-height: 1.7; }

@keyframes page-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes signal-pop { 50% { transform: scale(1.04); } }

@media (max-width: 1080px) {
  .mission-grid, .mission-report-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-grid { grid-template-columns: 1fr .6fr; }
}

@media (max-width: 850px) {
  .topbar { grid-template-columns: 1fr auto; }
  .main-nav { order: 3; grid-column: 1 / -1; justify-self: center; }
  .hero-grid, .report-hero, .onboard-card { grid-template-columns: 1fr; }
  .orbit-panel { min-height: 240px; }
  .mode-grid { grid-template-columns: 1fr; }
  .region-card, .region-card:nth-child(4), .region-card:nth-child(5) { grid-column: span 10; }
  .mission-grid, .mission-report-grid { grid-template-columns: repeat(2, 1fr); }
  .onboard-control { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .page { width: min(100% - 24px, 1440px); padding-top: 30px; }
  .brand-copy { display: none; }
  .profile-chip > div:not(.profile-avatar) { display: none; }
  .hero-title { font-size: 49px; }
  .page-header { grid-template-columns: 1fr; }
  .region-orb { display: none; }
  .mission-grid, .mission-report-grid, .result-stats, .metric-grid { grid-template-columns: 1fr; }
  .radar-wrap { grid-template-columns: 1fr; justify-items: center; }
  .region-report-row { grid-template-columns: 1fr; gap: 8px; }
  .challenge-options { grid-template-columns: repeat(2, 1fr); }
}

/* V5 — five clay training worlds and illustrated mission previews */
.scene-attention { --scene-a: #8eeaff; --scene-b: #dffaff; --scene-ink: #087fa1; --scene-pop: #ffcf4f; }
.scene-memory { --scene-a: #c8b9ff; --scene-b: #f1ebff; --scene-ink: #6347b9; --scene-pop: #5dd8d0; }
.scene-logic { --scene-a: #ffd978; --scene-b: #fff4c9; --scene-ink: #996500; --scene-pop: #6fd8d5; }
.scene-perception { --scene-a: #8fe5c9; --scene-b: #e7fff7; --scene-ink: #207f6d; --scene-pop: #8a76e8; }
.scene-reaction { --scene-a: #ff9c8f; --scene-b: #fff0dc; --scene-ink: #b84343; --scene-pop: #48cae4; }

.region-mentor-portrait {
  position: absolute;
  z-index: 1;
  top: 42px;
  right: 18px;
  width: 154px;
  height: 150px;
  overflow: hidden;
  border: 6px solid rgba(255,255,255,.9);
  border-radius: 38px 38px 22px 42px;
  background: linear-gradient(145deg, var(--scene-b), var(--scene-a));
  box-shadow: inset 7px 8px 12px rgba(255,255,255,.5), 0 14px 25px color-mix(in srgb, var(--scene-ink) 18%, transparent);
  transform: rotate(2deg);
}
.region-card:nth-child(even) .region-mentor-portrait { transform: rotate(-2deg); }
.region-mentor-portrait img { width: 100%; height: 116px; display: block; object-fit: cover; object-position: center 22%; }
.scene-memory.region-mentor-portrait img,
.scene-perception.region-mentor-portrait img { object-fit: contain; padding: 3px 8px 0; }
.region-mentor-portrait span { position: absolute; inset: auto 7px 7px; display: flex; align-items: baseline; justify-content: space-between; gap: 5px; padding: 6px 8px; border-radius: 12px; color: var(--scene-ink); background: rgba(255,255,255,.9); }
.region-mentor-portrait b { font-size: 11px; }
.region-mentor-portrait small { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.region-card h3,
.region-card > p { position: relative; z-index: 2; max-width: calc(100% - 142px); }
.region-card h3 { margin-top: 24px; }
.region-card > p { font-size: 13px; }

.mission-grid { align-items: stretch; }
.mission-card { min-height: 478px; padding: 12px 14px 15px; border: 6px solid rgba(255,255,255,.9); background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--scene-b) 55%, white)); box-shadow: 0 16px 28px color-mix(in srgb, var(--scene-ink) 12%, transparent), inset 0 0 0 1px rgba(48,83,123,.08); }
.mission-preview { position: relative; height: 158px; flex: 0 0 158px; overflow: hidden; margin-bottom: 12px; border-radius: 21px; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.92) 0 5%, transparent 6%), linear-gradient(145deg, var(--scene-b), var(--scene-a)); box-shadow: inset 6px 7px 13px rgba(255,255,255,.55); }
.mission-preview::before { content: ''; position: absolute; width: 86px; aspect-ratio: 1; left: -30px; bottom: -48px; border: 14px solid rgba(255,255,255,.34); border-radius: 50%; }
.mission-preview-orbit { position: absolute; width: 130px; aspect-ratio: 1; right: -50px; top: -54px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; box-shadow: 0 0 0 14px rgba(255,255,255,.1), 0 0 0 30px rgba(255,255,255,.08); animation: preview-orbit 7s linear infinite; }
.mission-preview-mentor { position: absolute; z-index: 2; right: -3px; bottom: 15px; width: 112px; height: 142px; }
.mission-preview-mentor img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: drop-shadow(0 10px 9px color-mix(in srgb, var(--scene-ink) 22%, transparent)); transform: rotate(2deg); }
.scene-memory .mission-preview-mentor img,
.scene-perception .mission-preview-mentor img { object-fit: contain; }
.mission-preview-props { position: absolute; z-index: 3; left: 12px; top: 13px; display: grid; gap: 7px; }
.mission-preview-props span { width: 37px; height: 32px; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.9); border-radius: 12px 14px 11px 15px; color: var(--scene-ink); background: rgba(255,255,255,.76); box-shadow: 0 6px 11px color-mix(in srgb, var(--scene-ink) 13%, transparent); font-size: 10px; font-weight: 950; animation: preview-prop-bob 2.8s ease-in-out infinite alternate; }
.mission-preview-props span:nth-child(2) { margin-left: 32px; animation-delay: -.7s; }
.mission-preview-props span:nth-child(3) { margin-left: 6px; animation-delay: -1.4s; }
.mission-preview-action { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 2px solid rgba(255,255,255,.86); border-radius: 12px; color: var(--scene-ink); background: rgba(255,255,255,.88); box-shadow: 0 7px 15px rgba(50,80,120,.1); font-size: 9px; font-weight: 900; }
.mission-preview-action b { width: 20px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--scene-ink); }
.mission-card h3 { margin: 12px 0 3px; color: #273d60; }
.mission-card p { margin: 9px 0; }
.mission-stars { display: flex; align-items: center; gap: 2px; margin: auto 0 10px; }
.mission-stars i { color: #d8e1e9; font-size: 15px; font-style: normal; text-shadow: 0 2px 0 #fff; }
.mission-stars i.is-earned { color: #ffc448; filter: drop-shadow(0 2px 2px rgba(180,122,0,.2)); }
.mission-stars small { margin-left: auto; color: #728099; font-size: 9px; }

.briefing-mentor { overflow: hidden; }
.briefing-mentor-image { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.mission-world-frame { position: relative; min-height: 205px; display: grid; grid-template-columns: minmax(300px, .9fr) minmax(220px, .55fr) 238px; align-items: center; overflow: hidden; margin-bottom: 13px; padding: 18px 18px 16px 27px; border: 7px solid rgba(255,255,255,.9); border-radius: 30px; color: #29405f; background: linear-gradient(132deg, var(--scene-b), #fff 46%, var(--scene-a)); box-shadow: inset 8px 9px 15px rgba(255,255,255,.68), 0 13px 25px color-mix(in srgb, var(--scene-ink) 13%, transparent); }
.world-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.world-sky::before { content: ''; position: absolute; width: 230px; aspect-ratio: 1; right: 110px; top: -146px; border: 24px solid rgba(255,255,255,.26); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.1); animation: world-ring 12s linear infinite; }
.world-sky i { position: absolute; width: 14px; aspect-ratio: 1; border: 4px solid rgba(255,255,255,.88); border-radius: 45% 55% 48% 52%; background: var(--scene-pop); box-shadow: 0 7px 12px color-mix(in srgb, var(--scene-ink) 15%, transparent); animation: world-speck 3s ease-in-out infinite alternate; }
.world-sky i:nth-child(1) { left: 3%; top: 18%; }.world-sky i:nth-child(2) { left: 46%; bottom: 12%; animation-delay: -.7s; }.world-sky i:nth-child(3) { right: 30%; top: 20%; animation-delay: -1.4s; }.world-sky i:nth-child(4) { right: 4%; bottom: 10%; animation-delay: -2.1s; }
.world-copy { position: relative; z-index: 2; }
.world-kicker { display: block; margin-bottom: 5px; color: var(--scene-ink); font: 900 9px ui-monospace, monospace; letter-spacing: .14em; }
.world-scene-name { display: block; color: #253b5e; font-size: clamp(24px, 3vw, 37px); letter-spacing: -.04em; }
.world-action { display: flex; align-items: center; gap: 9px; margin: 8px 0 13px; color: #586b83; font-size: 12px; font-weight: 800; }
.world-action b { width: 29px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--scene-ink); box-shadow: inset 3px 4px 5px rgba(255,255,255,.25); }
.world-dossier { display: flex; flex-wrap: wrap; gap: 6px; }
.world-dossier-chip { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 10px; color: #56687f; background: rgba(255,255,255,.72); font-size: 9px; font-weight: 900; }
.world-dossier-chip i { color: var(--scene-ink); font-style: normal; }
.world-props { position: relative; z-index: 2; display: grid; gap: 9px; justify-items: start; }
.world-props span { min-width: 94px; padding: 9px 12px; border: 3px solid rgba(255,255,255,.86); border-radius: 16px 19px 14px 17px; color: var(--scene-ink); background: rgba(255,255,255,.62); box-shadow: 0 8px 15px color-mix(in srgb, var(--scene-ink) 10%, transparent); font-size: 10px; font-weight: 900; transform: rotate(-1deg); animation: world-prop-float 3.3s ease-in-out infinite alternate; }
.world-props span:nth-child(2) { margin-left: 30px; transform: rotate(1deg); animation-delay: -.8s; }.world-props span:nth-child(3) { margin-left: 8px; animation-delay: -1.6s; }
.world-mentor { position: relative; z-index: 2; align-self: end; width: 230px; height: 188px; margin: 0; }
.world-mentor img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: drop-shadow(0 13px 10px color-mix(in srgb, var(--scene-ink) 22%, transparent)); }
.scene-memory .world-mentor img,
.scene-perception .world-mentor img { object-fit: contain; }
.world-mentor figcaption { position: absolute; right: 4px; bottom: 4px; display: grid; padding: 6px 11px; border: 3px solid #fff; border-radius: 13px; color: var(--scene-ink); background: rgba(255,255,255,.9); box-shadow: 0 8px 16px rgba(50,80,120,.12); }
.world-mentor figcaption b { font-size: 11px; }.world-mentor figcaption small { font-size: 8px; }

@keyframes preview-orbit { to { transform: rotate(360deg); } }
@keyframes preview-prop-bob { to { transform: translateY(-5px) rotate(2deg); } }
@keyframes world-ring { to { transform: rotate(360deg); } }
@keyframes world-speck { to { transform: translateY(-8px) rotate(14deg); } }
@keyframes world-prop-float { to { transform: translateY(-5px) rotate(1.5deg); } }

body.reduce-motion .mission-preview-orbit,
body.reduce-motion .mission-preview-props span,
body.reduce-motion .world-sky::before,
body.reduce-motion .world-sky i,
body.reduce-motion .world-props span { animation: none !important; }

@media (max-width: 1180px) {
  .mission-grid { grid-template-columns: repeat(3, 1fr); }
  .mission-world-frame { grid-template-columns: minmax(280px, 1fr) 190px 205px; }
  .world-mentor { width: 200px; }
}
@media (max-width: 850px) {
  .region-card h3, .region-card > p { max-width: calc(100% - 150px); }
  .mission-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-world-frame { grid-template-columns: 1fr 170px; }
  .world-props { display: none; }
  .world-mentor { width: 165px; }
}
@media (max-width: 560px) {
  .region-mentor-portrait { width: 125px; height: 132px; right: 10px; }
  .region-mentor-portrait img { height: 100px; }
  .region-card h3, .region-card > p { max-width: calc(100% - 116px); }
  .mission-grid { grid-template-columns: 1fr; }
  .mission-card { min-height: 450px; }
  .mission-preview { height: 175px; flex-basis: 175px; }
  .mission-preview-mentor { width: 140px; height: 160px; }
  .mission-world-frame { min-height: 240px; grid-template-columns: 1fr 118px; padding: 16px; }
  .world-scene-name { font-size: 24px; }
  .world-action { align-items: flex-start; }
  .world-dossier-chip { padding: 5px 6px; }
  .world-mentor { width: 130px; height: 195px; margin-right: -14px; }
  .world-mentor figcaption { right: 8px; }
}

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

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after { animation: none !important; transition-duration: .01ms !important; }

/* V2 — bright clay exploration system */
:root {
  --bg: #edf8ff;
  --bg-deep: #dcefff;
  --panel: rgba(255, 255, 255, .82);
  --panel-strong: #ffffff;
  --line: rgba(42, 70, 117, .16);
  --text: #172747;
  --muted: #60708c;
  --cyan: #31bddd;
  --violet: #806be8;
  --gold: #f6b83e;
  --green: #34bd8c;
  --coral: #f36f78;
  --danger: #d74c60;
  --shadow: 0 22px 55px rgba(69, 112, 158, .17), 0 3px 8px rgba(54, 88, 132, .08);
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at 86% 8%, rgba(190, 166, 255, .43), transparent 27%),
    radial-gradient(circle at 9% 72%, rgba(108, 224, 210, .35), transparent 28%),
    linear-gradient(145deg, #f9fcff 0%, #eaf7ff 48%, #f6f0ff 100%);
}

.space-mesh {
  opacity: .46;
  background-image:
    radial-gradient(circle, rgba(44, 118, 177, .55) 0 1.3px, transparent 1.7px),
    radial-gradient(circle, rgba(128, 107, 232, .32) 0 1px, transparent 1.5px);
}

.scan-grid {
  opacity: .22;
  background-image:
    linear-gradient(rgba(54, 112, 166, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 112, 166, .14) 1px, transparent 1px);
}

.topbar {
  border-bottom-color: rgba(34, 76, 127, .12);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 28px rgba(59, 99, 143, .08);
}

.brand-mark {
  color: #fff;
  background: linear-gradient(145deg, #63ddf1, #22a6d1);
  box-shadow: inset 4px 5px 8px rgba(255,255,255,.48), inset -5px -6px 9px rgba(14,98,145,.2), 0 8px 16px rgba(39,156,195,.24);
}

.main-nav { background: rgba(235, 246, 255, .72); box-shadow: inset 0 2px 5px rgba(46, 81, 126, .08); }
.nav-button:hover, .nav-button.is-active { color: #12304e; background: #fff; box-shadow: 0 4px 13px rgba(45, 92, 137, .11); }
.profile-avatar { border: 0; color: #fff; background: linear-gradient(145deg, #a797f4, #6c5bd1); box-shadow: inset 4px 4px 7px rgba(255,255,255,.35), 0 6px 14px rgba(91,70,178,.2); }

.hero-title em { color: #159fc5; text-shadow: 0 5px 0 rgba(255,255,255,.9), 0 12px 30px rgba(37,178,214,.2); }
.hero-lede { color: #4c607e; }

.clay-hero-panel {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 8px solid rgba(255,255,255,.9);
  border-radius: 44px 44px 44px 14px;
  background: #dff3ff;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(56, 105, 151, .08);
  transform: rotate(1.2deg);
}

.clay-hero-panel img { width: 100%; height: 100%; min-height: 390px; display: block; object-fit: cover; object-position: 53% center; }
.hero-mission-badge { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; color: var(--text); background: rgba(255,255,255,.9); border: 1px solid rgba(41,84,128,.09); border-radius: 999px; box-shadow: 0 9px 22px rgba(39,84,128,.17); backdrop-filter: blur(8px); }
.hero-mission-badge strong { width: 34px; aspect-ratio: 1; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 50%; box-shadow: inset 3px 3px 5px rgba(255,255,255,.35); }
.hero-mission-badge span { font-size: 12px; font-weight: 800; }

.mode-card,
.region-card,
.mission-card,
.report-panel,
.result-card,
.onboard-card {
  border-color: rgba(51, 84, 125, .13);
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(244,249,255,.88));
  box-shadow: var(--shadow), inset 2px 2px 0 rgba(255,255,255,.85);
}

.mode-card::after { color: rgba(49, 125, 173, .07); }
.mode-card:hover, .mission-card:hover { transform: translateY(-5px) rotate(-.3deg); }

.region-card::before {
  background: color-mix(in srgb, var(--region-accent) 10%, white);
  box-shadow: inset 8px 10px 16px rgba(255,255,255,.6), 0 10px 24px color-mix(in srgb, var(--region-accent) 16%, transparent);
}

.region-symbol,
.region-orb {
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--region-accent) 70%, white), var(--region-accent));
  box-shadow: inset 5px 6px 8px rgba(255,255,255,.35), inset -4px -5px 8px rgba(32,57,83,.12), 0 10px 22px color-mix(in srgb, var(--region-accent) 25%, transparent);
}

.mechanic-tag { align-self: flex-start; margin: 10px 0 8px; padding: 5px 9px; color: #40516d; background: #edf5fb; border: 1px solid rgba(44,86,129,.09); border-radius: 999px; font-size: 11px; font-weight: 800; }

.primary-button { color: #fff; background: linear-gradient(145deg, #54d5ee, #1ba3c8); box-shadow: inset 3px 4px 7px rgba(255,255,255,.35), 0 10px 21px rgba(30,164,199,.25); }
.secondary-button { color: #5545af; background: linear-gradient(145deg, #f1edff, #dcd4ff); border-color: rgba(105,82,198,.2); box-shadow: inset 2px 3px 5px rgba(255,255,255,.8), 0 7px 15px rgba(105,82,198,.12); }
.ghost-button { color: #425775; background: rgba(255,255,255,.74); border-color: rgba(47,84,127,.17); box-shadow: 0 4px 11px rgba(56,93,131,.08); }
.danger-button { color: #ba3f53; background: #fff4f5; border-color: rgba(215,76,96,.24); }

.game-console {
  border: 8px solid rgba(255,255,255,.88);
  background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(234,246,255,.94));
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(45,83,126,.12);
}

.game-console::before { background: linear-gradient(115deg, transparent, rgba(255,255,255,.72), transparent 52%); }
.progress-rail { background: rgba(45,77,116,.1); }

/* Mission briefing — rules are read before timed mechanics begin */
.mission-briefing { position: relative; z-index: 1; padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(48,86,128,.12); border-radius: 32px; background: linear-gradient(145deg, rgba(227,250,255,.96), rgba(246,241,255,.96) 58%, rgba(255,248,218,.94)); box-shadow: inset 7px 8px 13px rgba(255,255,255,.72), 0 15px 34px rgba(53,91,130,.12); }
.briefing-heading { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 18px; margin-bottom: 24px; }
.briefing-heading h2 { margin: 5px 0 7px; font-size: clamp(26px, 3vw, 38px); }
.briefing-heading p:last-child { margin: 0; color: var(--muted); line-height: 1.65; }
.briefing-mentor { width: 72px; aspect-ratio: 1; display: grid; place-items: center; border: 6px solid #fff; border-radius: 42% 58% 48% 52%; color: #263a60; background: color-mix(in srgb, var(--region-accent) 38%, white); box-shadow: inset 8px 9px 10px rgba(255,255,255,.48), 0 10px 20px color-mix(in srgb, var(--region-accent) 20%, transparent); font-size: 18px; font-weight: 900; }
.mission-rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.mission-rule-grid article { min-height: 158px; padding: 19px; border: 1px solid rgba(47,84,127,.1); border-radius: 23px; background: rgba(255,255,255,.78); box-shadow: inset 4px 5px 8px rgba(255,255,255,.72), 0 8px 18px rgba(48,85,122,.08); }
.mission-rule-grid article > span { display: block; margin-bottom: 20px; color: var(--region-accent); font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.mission-rule-grid strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 16px; }
.mission-rule-grid p { margin: 0; color: #5e6d84; font-size: 13px; line-height: 1.72; }
.briefing-start { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.briefing-start small { color: var(--muted); line-height: 1.6; }
.mission-rule-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 auto 22px; padding: 10px; border-radius: 20px; background: #edf6fc; }
.mission-rule-strip span { padding: 9px 11px; color: #5d6d84; font-size: 11px; line-height: 1.55; }
.mission-rule-strip b { display: block; margin-bottom: 3px; color: #263d63; font-size: 10px; letter-spacing: .08em; }

/* V4 — continuous 1+ minute mission loop */
.experience-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.experience-preview span { padding: 12px 14px; color: #65728a; background: rgba(255,255,255,.72); border: 1px solid rgba(47,84,127,.09); border-radius: 18px; font-size: 11px; line-height: 1.55; }
.experience-preview b { display: block; margin-bottom: 3px; color: #334a6c; font-size: 10px; letter-spacing: .06em; }
.game-status { align-items: center; margin-bottom: 14px; }
.mission-time { flex: 1; min-width: 180px; text-align: center; }
.mission-time .progress-rail { width: 100%; }
.mission-time small { display: block; margin-top: 5px; color: var(--region-accent); font-weight: 900; letter-spacing: .08em; }
.mission-momentum { position: relative; z-index: 2; display: grid; grid-template-columns: auto auto minmax(120px, 1fr) auto; align-items: center; gap: 12px; margin: 0 auto 13px; padding: 10px 14px; border-radius: 18px; color: #52647f; background: linear-gradient(145deg, #fff, #edf7ff); box-shadow: inset 3px 4px 8px rgba(255,255,255,.9), 0 7px 16px rgba(52,88,126,.09); font-size: 11px; }
.mission-momentum strong { color: #2f4567; font-size: 13px; }
.mission-momentum b { min-width: 72px; color: #7656c8; text-align: right; }
.energy-meter { height: 9px; overflow: hidden; border-radius: 999px; background: #dfeaf3; }
.energy-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55d7e8, #8d75eb, #ffc54e); transition: width .45s var(--ease); }

.challenge-stage { position: relative; isolation: isolate; overflow: hidden; padding: 18px 18px 20px; border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(230,245,255,.62)); box-shadow: inset 0 0 0 1px rgba(47,84,127,.08); }
.challenge-stage > :not(.challenge-atmosphere) { position: relative; z-index: 2; }
.challenge-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.challenge-atmosphere i { position: absolute; width: 18px; aspect-ratio: 1; border-radius: 44% 56% 48% 52%; background: color-mix(in srgb, var(--region-accent) 30%, white); box-shadow: inset 4px 4px 5px rgba(255,255,255,.55), 0 7px 14px color-mix(in srgb, var(--region-accent) 12%, transparent); opacity: .68; animation: ambient-drift 4.8s ease-in-out infinite alternate; }
.challenge-atmosphere i:nth-child(1) { left: 5%; top: 22%; }.challenge-atmosphere i:nth-child(2) { left: 18%; top: 78%; animation-delay: -.8s; }.challenge-atmosphere i:nth-child(3) { right: 8%; top: 18%; animation-delay: -1.6s; }.challenge-atmosphere i:nth-child(4) { right: 22%; top: 72%; animation-delay: -2.2s; }.challenge-atmosphere i:nth-child(5) { left: 48%; top: 8%; animation-delay: -3s; }.challenge-atmosphere i:nth-child(6) { right: 46%; bottom: 3%; animation-delay: -3.7s; }
.challenge-mode-badge { display: flex; justify-content: center; gap: 10px; margin: 0 0 9px; font-size: 10px; }
.challenge-mode-badge span { padding: 5px 9px; color: #fff; background: var(--region-accent); border-radius: 999px; font-weight: 900; letter-spacing: .06em; }
.challenge-mode-badge small { align-self: center; color: #6b7890; }
.challenge-stage .challenge-prompt { margin-bottom: 16px; font-size: clamp(21px, 2.4vw, 32px); }
.challenge-stage .challenge-signal { margin-bottom: 16px; }
.challenge-option:active:not(:disabled), .challenge-option.is-pressed { transform: translateY(2px) scale(.97); filter: saturate(1.25); }
.feedback-burst { display: inline-block; margin-bottom: 8px; padding: 6px 10px; border-radius: 999px; color: #6d51bd; background: #eee9ff; font-size: 11px; font-weight: 900; animation: feedback-bounce .46s var(--ease); }
.round-feedback .primary-button { min-width: 250px; margin-top: 8px; }
.result-stats-four { grid-template-columns: repeat(4, 1fr); }
.result-stats-four .result-stat strong { font-size: clamp(20px, 3vw, 32px); }

/* Target search: animated scanner and floating targets */
.mechanic-stage-target .challenge-signal { position: relative; overflow: hidden; }
.mechanic-stage-target .challenge-signal::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 45px, rgba(49,189,221,.05) 46px 47px); }
.mechanic-stage-target .challenge-signal::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.84), transparent); animation: scanner-sweep 2.2s ease-in-out infinite; }
.mechanic-stage-target .challenge-option { animation: target-hover 2.8s ease-in-out infinite alternate; }
.mechanic-stage-target .challenge-option:nth-child(2n) { animation-delay: -.9s; }

/* Sequence and audio: moving tokens and live waveform */
.sequence-token { min-width: 60px !important; animation: token-arrive .42s var(--ease) both; animation-delay: calc(var(--token-index) * .1s); }
.input-orbit { min-width: min(520px, 90%) !important; color: #6b55c6; animation: token-arrive .3s var(--ease); }
.mechanic-stage-sequence .challenge-signal { background: linear-gradient(145deg, #ede9ff, #e1f7ff); }

/* Command chain: scene-based clue board and editable action rail */
.command-chain-board { width: min(900px, 100%); display: grid !important; grid-template-columns: minmax(220px, .72fr) minmax(430px, 1.28fr); gap: 16px; align-items: stretch; padding: 18px !important; border: 5px solid rgba(255,255,255,.88) !important; color: #304363; background: linear-gradient(145deg, #dcfbff, #f0e8ff 58%, #fff3bc) !important; box-shadow: inset 7px 8px 13px rgba(255,255,255,.72), 0 13px 25px rgba(71,92,139,.14); }
.command-scene { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 190px; padding: 17px; border-radius: 27px; text-align: center; background: rgba(255,255,255,.72); box-shadow: inset 5px 6px 9px rgba(255,255,255,.76), 0 8px 16px rgba(67,91,129,.1); }
.command-avatar { width: 76px; aspect-ratio: 1; display: grid !important; place-items: center; padding: 0 !important; border: 6px solid #fff !important; border-radius: 44% 56% 49% 51% !important; background: linear-gradient(145deg, #ffe775, #ffad68) !important; box-shadow: inset 7px 8px 9px rgba(255,255,255,.38), 0 10px 18px rgba(216,132,60,.2); font-size: 38px; animation: command-avatar-float 2.4s ease-in-out infinite alternate; }
.command-scene small, .command-scene strong { display: block; }.command-scene small { margin-top: 8px; color: #7e6eb0; font-size: 9px; font-weight: 950; letter-spacing: .13em; }.command-scene strong { margin: 2px 0 6px; color: #3f3975; font-size: 22px; }.command-scene p { margin: 0; color: #68758b; font-size: 11px; line-height: 1.65; }
.command-clue-board { display: grid; gap: 9px; align-content: center; }
.command-clue { display: grid; grid-template-columns: 68px 1fr; align-items: center; min-height: 56px; padding: 9px 13px; border: 3px solid #fff; border-radius: 18px 22px 19px 15px; background: hsl(calc(183 + var(--clue-index) * 38) 88% 91%); box-shadow: inset 4px 5px 7px rgba(255,255,255,.55), 0 7px 13px rgba(69,91,127,.1); transform: rotate(calc((var(--clue-index) - 1) * .4deg)); animation: command-clue-arrive .4s var(--ease) both; animation-delay: calc(var(--clue-index) * .11s); }
.command-clue > span { justify-self: start; padding: 4px 7px; border-radius: 999px; color: #fff; background: #7963d5; font-size: 9px; font-weight: 950; }.command-clue p { margin: 0; color: #42506b; font-size: 12px; font-weight: 850; line-height: 1.5; }
.command-chain-controls { width: min(900px, 100%); display: grid; gap: 12px; margin: 0 auto; }
.command-rail-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; color: #44536d; }.command-rail-heading strong { font-size: 14px; }.command-rail-heading small { color: #7c8799; font-size: 10px; }.command-status { color: #7058c7; font-size: 10px; font-weight: 900; }
.command-answer-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 13px; border-radius: 22px; background: linear-gradient(145deg, #d8f7fb, #dcd4fb); box-shadow: inset 5px 6px 10px rgba(65,90,133,.1), 0 8px 16px rgba(63,88,126,.09); }
.command-answer-rail::before { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 5px; border-radius: 999px; background: rgba(112,91,199,.18); }
.command-slot { position: relative; z-index: 1; min-height: 62px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 5px; padding: 8px; border: 3px dashed rgba(111,93,183,.3); border-radius: 18px; color: #8993a3; background: rgba(255,255,255,.74); transition: transform .24s var(--ease), background .24s, border-color .24s; }
.command-slot b { width: 22px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #a99de1; font-size: 10px; }.command-slot span { font-size: 10px; font-weight: 850; line-height: 1.35; }.command-slot.is-filled { border-style: solid; border-color: #52c9d3; color: #324f67; background: #fff; transform: translateY(-3px); animation: command-step-pop .3s var(--ease); }.command-slot.is-filled b { background: #45becb; }
.command-step-bank { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.command-step { min-height: 78px; padding: 9px; border: 0; border-radius: 22px 25px 19px 24px; cursor: pointer; color: #fff; background: linear-gradient(145deg, #9d87ed, #6652c8); box-shadow: inset 7px 8px 10px rgba(255,255,255,.3), 0 9px 16px rgba(100,78,184,.2); transition: transform .2s var(--ease), opacity .2s, filter .2s; }
.command-step:nth-child(2n) { background: linear-gradient(145deg, #55d9df, #1aa5c2); }.command-step:nth-child(3n) { background: linear-gradient(145deg, #ffac82, #ef6178); }.command-step:nth-child(4n) { background: linear-gradient(145deg, #ffd766, #ecad37); }
.command-step span, .command-step strong { display: block; }.command-step span { font-size: 26px; }.command-step strong { margin-top: 4px; font-size: 12px; }.command-step:hover:not(:disabled) { transform: translateY(-4px) rotate(-1deg); filter: saturate(1.12); }.command-step.is-selected { opacity: .28; transform: scale(.92); filter: grayscale(.45); }
.command-toolbar { display: flex; justify-content: flex-end; gap: 8px; }.command-toolbar button { min-height: 41px; padding: 8px 15px; border: 0; border-radius: 14px; cursor: pointer; color: #56657c; background: #fff; box-shadow: 0 6px 12px rgba(57,79,113,.1); font-size: 11px; font-weight: 850; }.command-toolbar .command-submit { min-width: 126px; color: #fff; background: linear-gradient(145deg, #59d7c3, #28ad91); box-shadow: inset 4px 5px 7px rgba(255,255,255,.25), 0 7px 14px rgba(38,158,132,.18); }.command-toolbar button:disabled { cursor: not-allowed; opacity: .4; filter: grayscale(.3); }
@keyframes command-avatar-float { to { transform: translateY(-6px) rotate(3deg); } }
@keyframes command-clue-arrive { from { opacity: 0; transform: translateX(22px) rotate(2deg); } }
@keyframes command-step-pop { 55% { transform: translateY(-6px) scale(1.04); } }
.sound-wave { display: flex !important; align-items: center; justify-content: center; gap: 7px; min-width: 150px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.sound-wave i { width: 8px; height: 24px; border-radius: 999px; background: linear-gradient(#8f78e9, #40cde1); transform-origin: center; }
.is-playing .sound-wave i { animation: sound-wave .48s ease-in-out infinite alternate; }
.is-playing .sound-wave i:nth-child(2), .is-playing .sound-wave i:nth-child(4) { animation-delay: -.22s; }.is-playing .sound-wave i:nth-child(3) { animation-delay: -.35s; }
.mechanic-stage-audio .challenge-signal { flex-direction: column; background: linear-gradient(145deg, #eee9ff, #ddf8ff); }
.signal-play { min-height: 48px; padding: 11px 19px; border: 0; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #977feb, #6852cf); box-shadow: inset 5px 6px 8px rgba(255,255,255,.28), 0 9px 16px rgba(104,82,207,.2); cursor: pointer; font-weight: 900; }
.tone-calibration { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 12px; max-width: 900px; margin: 0 auto 15px; padding: 11px 13px; border: 1px solid rgba(66,99,140,.1); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 8px 18px rgba(51,88,128,.09); }
.tone-calibration-heading strong, .tone-calibration-heading small { display: block; }
.tone-calibration-heading strong { color: #344b6d; font-size: 13px; }
.tone-calibration-heading small { margin-top: 4px; color: #78849a; font-size: 10px; line-height: 1.45; }
.tone-samples { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tone-sample { min-height: 58px; padding: 8px 10px; border: 0; border-radius: 17px; cursor: pointer; color: #fff; background: var(--tone-color); box-shadow: inset 4px 5px 7px rgba(255,255,255,.3), 0 6px 12px color-mix(in srgb, var(--tone-color) 20%, transparent); transition: filter .18s, box-shadow .18s, transform .18s; }
.tone-sample strong, .tone-sample small { display: block; }
.tone-sample strong { font-size: 14px; }.tone-sample small { margin-top: 3px; color: rgba(255,255,255,.85); font-size: 9px; line-height: 1.35; }
.tone-low { --tone-color: #5276bc; }.tone-mid { --tone-color: #31b8b0; }.tone-high { --tone-color: #e7a92f; }.tone-pulse { --tone-color: #e86e83; }
.tone-sample:hover:not(:disabled) { filter: brightness(1.08) saturate(1.08); transform: translateY(-2px); }
.tone-sample.is-playing { outline: 4px solid color-mix(in srgb, var(--tone-color) 28%, white); box-shadow: inset 4px 5px 7px rgba(255,255,255,.35), 0 0 0 7px color-mix(in srgb, var(--tone-color) 12%, transparent), 0 9px 16px color-mix(in srgb, var(--tone-color) 25%, transparent); }
.tone-sample:disabled { cursor: wait; opacity: .42; filter: grayscale(.25); }

/* Four auditory missions — shared tones, deliberately different play actions */
.audio-live-capture { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; padding: 22px 26px; color: #174b62; background: linear-gradient(145deg, #dffff8, #ccefff); }
.radio-dial { position: relative; width: 96px; aspect-ratio: 1; display: grid; place-items: center; border: 9px solid #9df0e9; border-radius: 50%; color: #fff; background: radial-gradient(circle at 38% 32%, #86f7e9, #26bad2 58%, #1685b1); box-shadow: inset 7px 8px 10px rgba(255,255,255,.45), 0 9px 18px rgba(18,139,175,.2); }
.radio-dial::after { content: ''; position: absolute; width: 38%; height: 5px; border-radius: 999px; background: #fff; transform: rotate(-32deg); transform-origin: 100% 50%; animation: radio-scan .9s ease-in-out infinite alternate; }
.radio-dial span { align-self: end; z-index: 1; margin-bottom: 13px; padding: 2px 7px; border-radius: 999px; background: #e9506d; font-size: 9px; font-weight: 1000; letter-spacing: .12em; }
.radio-copy small, .radio-copy strong, .audio-live-status { display: block; }
.radio-copy small { color: #5b7f92; font-size: 11px; font-weight: 800; }.radio-copy strong { margin: 3px 0 6px; color: #e6516d; font-size: 28px; }.audio-live-status { font-size: 13px; font-weight: 800; }
.radio-lights { grid-column: 1 / -1; display: flex; justify-content: center; gap: 9px; }
.radio-lights i { width: 20px; aspect-ratio: 1; border: 4px solid #fff; border-radius: 50%; background: #b8cbd5; box-shadow: 0 4px 8px rgba(54,100,126,.12); transition: transform .16s, background .16s; }
.radio-lights i.is-current { background: #ffe071; transform: scale(1.28); }.radio-lights i.is-hit { background: #51d49c; }.radio-lights i.is-missed { background: #9ca9b8; }.radio-lights i.is-false { background: #ff7582; }
.audio-live-controls { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(260px, 1.3fr); gap: 14px; max-width: 760px; margin: 16px auto 0; }
.audio-live-start, .audio-capture-button { min-height: 92px; border: 0; border-radius: 28px; cursor: pointer; font-weight: 900; }
.audio-live-start { color: #17617a; background: linear-gradient(145deg, #d4fbff, #9ee8f4); box-shadow: inset 7px 8px 11px rgba(255,255,255,.52), 0 10px 18px rgba(25,144,178,.16); }
.audio-capture-button { display: grid; grid-template-columns: 60px 1fr; align-content: center; text-align: left; color: #fff; background: linear-gradient(145deg, #ff9d82, #ef5571); box-shadow: inset 8px 9px 12px rgba(255,255,255,.28), 0 11px 20px rgba(210,67,93,.22); }
.audio-capture-button > span { grid-row: 1 / 3; place-self: center; font-size: 38px; }.audio-capture-button strong, .audio-capture-button small { display: block; }.audio-capture-button strong { font-size: 20px; }.audio-capture-button small { margin-top: 3px; color: rgba(255,255,255,.82); }
.audio-live-start:disabled, .audio-capture-button:disabled { cursor: wait; opacity: .46; filter: grayscale(.25); }

.audio-cargo-bay { display: grid; grid-template-columns: 190px 1fr auto; gap: 18px; align-items: center; padding: 22px 24px; color: #38416b; background: linear-gradient(145deg, #fff7c9, #e8e1ff); }
.cargo-bay-heading { display: flex; align-items: center; gap: 11px; }.cargo-bay-heading > span { width: 56px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #a98cf4, #7157d8); box-shadow: inset 5px 6px 8px rgba(255,255,255,.3); font-size: 26px; }.cargo-bay-heading strong, .cargo-bay-heading small { display: block; }.cargo-bay-heading small { margin-top: 4px; color: #77758d; font-size: 10px; }
.audio-cargo-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 8px; }
.audio-cargo-slots > span { min-height: 64px; display: grid; place-items: center; padding: 5px; border: 3px dashed #b8aee5; border-radius: 17px; background: rgba(255,255,255,.62); }.audio-cargo-slots b { color: #8a84a4; font-size: 9px; }.audio-cargo-slots i { font-style: normal; font-size: 11px; font-weight: 900; }.audio-cargo-slots .is-filled { border-style: solid; border-color: #8a75e8; background: #fff; animation: cargo-drop .3s var(--ease); }
.cargo-play-order { min-height: 52px; padding: 9px 16px; border: 0; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #9b82ed, #6952cf); box-shadow: inset 5px 6px 8px rgba(255,255,255,.28), 0 8px 16px rgba(104,82,207,.2); cursor: pointer; font-weight: 900; }
.audio-cargo-controls { display: grid; gap: 12px; max-width: 850px; margin: 15px auto 0; }.audio-cargo-pods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.audio-cargo-pod { min-height: 82px; border: 0; border-radius: 24px 24px 18px 18px; cursor: pointer; color: #fff; background: var(--tone-color); box-shadow: inset 7px 8px 10px rgba(255,255,255,.32), 0 8px 15px color-mix(in srgb, var(--tone-color) 22%, transparent); }.audio-cargo-pod span, .audio-cargo-pod strong { display: block; }.audio-cargo-pod span { font-size: 24px; }.audio-cargo-pod strong { margin-top: 4px; }.audio-cargo-pod:disabled { cursor: wait; opacity: .42; }
.audio-cargo-toolbar, .echo-toolbar { display: flex; justify-content: center; gap: 9px; }.audio-cargo-toolbar button, .echo-toolbar button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 14px; color: #59627a; background: #fff; box-shadow: 0 6px 12px rgba(54,75,112,.1); cursor: pointer; font-weight: 800; }.audio-cargo-toolbar button:last-child, .echo-toolbar button:last-child { color: #fff; background: #735ad7; }.audio-cargo-toolbar button:disabled, .echo-toolbar button:disabled { cursor: not-allowed; opacity: .4; }

.audio-compare-console { display: grid; gap: 12px; padding: 18px 24px; background: linear-gradient(145deg, #ffe9ee, #e9e2ff); }
.compare-bridge { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 15px; align-items: center; width: 100%; }.audio-compare-pod { position: relative; min-height: 110px; border: 0; border-radius: 34px; cursor: pointer; color: #fff; overflow: hidden; box-shadow: inset 8px 9px 12px rgba(255,255,255,.28), 0 10px 20px rgba(106,76,156,.18); }.pod-a { background: linear-gradient(145deg, #9c82ef, #6750c9); }.pod-b { background: linear-gradient(145deg, #ff9a84, #e95678); }.audio-compare-pod > span { width: 44px; aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto 7px; border: 3px solid rgba(255,255,255,.66); border-radius: 50%; font-size: 20px; font-weight: 1000; }.audio-compare-pod > i { position: absolute; inset: auto 18px 10px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.34); transform-origin: left; }.audio-compare-pod.is-playing > i { animation: compare-wave .5s ease-in-out infinite alternate; }.audio-compare-pod.is-heard::after { content: '已试听 ✓'; position: absolute; top: 10px; right: 12px; padding: 3px 8px; border-radius: 999px; color: #27624f; background: #d7ffe9; font-size: 9px; font-weight: 900; }.audio-compare-pod:disabled { cursor: wait; opacity: .65; }
.compare-core { display: grid; place-items: center; color: #7157c7; }.compare-core b { width: 64px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 8px 16px rgba(87,65,139,.13); font-size: 20px; }.compare-core small { margin-top: 5px; font-size: 9px; }.compare-status { margin: 0; color: #635b7c; text-align: center; font-size: 12px; font-weight: 800; }.audio-compare-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; max-width: 620px; margin: 15px auto 0; }.audio-compare-decision { min-height: 64px; border: 0; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #47d3d3, #1aa4c1); box-shadow: inset 6px 7px 9px rgba(255,255,255,.3), 0 9px 17px rgba(20,145,174,.17); cursor: pointer; font-size: 16px; font-weight: 900; }.audio-compare-decision:last-child { background: linear-gradient(145deg, #ff9b82, #eb5876); }.audio-compare-decision:disabled { cursor: not-allowed; opacity: .38; filter: grayscale(.3); }

.audio-echo-route { display: grid; grid-template-columns: 1fr minmax(190px, 240px); grid-template-areas: 'legend map' 'status map' 'play map'; gap: 10px 18px; align-items: center; padding: 18px 23px; color: #35534a; background: linear-gradient(145deg, #e9ffd8, #fff0b8); }.echo-legend { grid-area: legend; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.echo-legend span { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 6px 11px; border-radius: 15px; background: rgba(255,255,255,.7); box-shadow: 0 5px 10px rgba(70,105,69,.08); }.echo-legend b { font-size: 11px; }.echo-legend i { width: 28px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #6fc59e; font-style: normal; font-weight: 1000; }.echo-map { grid-area: map; position: relative; width: min(230px, 100%); aspect-ratio: 1; justify-self: center; overflow: hidden; border: 8px solid #fff; border-radius: 35px; background: #90dcb0; box-shadow: inset 8px 9px 14px rgba(43,111,78,.16), 0 11px 20px rgba(76,121,62,.16); }.echo-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.32) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.32) 2px, transparent 2px); background-size: 16.666% 16.666%; }.echo-route-point { position: absolute; z-index: 2; left: calc(50% + var(--x) * 7%); top: calc(50% + var(--y) * 7%); transform: translate(-50%, -50%); color: #fff; text-shadow: 0 2px 3px rgba(42,79,62,.25); font-size: 22px; font-weight: 1000; animation: route-point-arrive .25s var(--ease); }.echo-route-point.is-origin { font-size: 26px; }.echo-route-point.is-scout { width: 38px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #ffe06c; box-shadow: 0 0 0 6px rgba(255,224,108,.25); }.echo-status { grid-area: status; min-height: 20px; font-size: 12px; font-weight: 800; }.echo-play-command { grid-area: play; min-height: 48px; border: 0; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #87cf68, #45a66f); box-shadow: inset 5px 6px 8px rgba(255,255,255,.27), 0 8px 15px rgba(57,139,87,.18); cursor: pointer; font-weight: 900; }.audio-echo-route.is-echo-delay .echo-map::after { content: '回声云'; position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(113,90,202,.72); backdrop-filter: blur(7px); font-size: 18px; font-weight: 1000; animation: echo-cloud .55s ease-in-out infinite alternate; }
.audio-echo-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; max-width: 680px; margin: 14px auto 0; }.echo-direction-pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-areas: '. up .' 'left down right'; justify-content: center; gap: 7px; }.echo-direction-pad button { min-height: 58px; border: 0; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #a78cf0, #7057d2); box-shadow: inset 5px 6px 8px rgba(255,255,255,.27), 0 7px 13px rgba(101,78,184,.18); cursor: pointer; font-size: 24px; font-weight: 1000; }.echo-direction-pad [data-direction='↑'] { grid-area: up; }.echo-direction-pad [data-direction='←'] { grid-area: left; }.echo-direction-pad [data-direction='↓'] { grid-area: down; }.echo-direction-pad [data-direction='→'] { grid-area: right; }.echo-direction-pad button:disabled { cursor: wait; opacity: .4; }

@keyframes radio-scan { to { transform: rotate(34deg); } }
@keyframes cargo-drop { from { transform: translateY(-12px) scale(.75); opacity: .35; } 70% { transform: translateY(2px) scale(1.05); } }
@keyframes compare-wave { to { transform: scaleX(.28); opacity: .55; } }
@keyframes echo-cloud { to { background: rgba(93,71,184,.82); letter-spacing: .16em; } }
@keyframes route-point-arrive { from { transform: translate(-50%, -50%) scale(.45); opacity: .2; } }

/* Reaction: breathing wait orb and alert flare */
.mechanic-stage-reaction .challenge-signal { flex-direction: column; }
.reaction-orb { min-width: 52px !important; width: 52px; aspect-ratio: 1; padding: 0 !important; border: 9px solid rgba(255,255,255,.72) !important; border-radius: 50% !important; background: #63d7e9 !important; box-shadow: 0 0 0 0 rgba(73,198,221,.35); animation: reaction-breathe 1.25s ease-out infinite; }
.reaction-flash { min-width: 58px !important; width: 58px; aspect-ratio: 1; padding: 0 !important; place-items: center; color: #fff; border: 0 !important; border-radius: 50% !important; background: #ff6f7d !important; box-shadow: 0 0 0 12px rgba(255,111,125,.14); animation: alert-flare .32s var(--ease); }

/* Dock pulse: continuous spatial timing, one decisive control */
.mechanic-stage-reaction .dock-timing-stage { position: relative; width: min(900px, 100%); min-height: 330px; display: block; overflow: hidden; padding: 18px 22px 22px; border: 7px solid rgba(255,255,255,.9); border-radius: 32px; color: #34496a; background: radial-gradient(circle at 15% 25%, rgba(255,229,105,.32), transparent 18%), linear-gradient(145deg, #dcfbff, #dce8ff 52%, #eee5ff); box-shadow: inset 8px 10px 14px rgba(255,255,255,.76), 0 13px 25px rgba(58,101,151,.15); font-family: inherit; letter-spacing: 0; }
.dock-stage-heading { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; }.dock-stage-heading small, .dock-stage-heading strong { display: block; }.dock-stage-heading small { color: #38aebf; font-size: 9px; font-weight: 950; letter-spacing: .14em; }.dock-stage-heading strong { margin-top: 3px; color: #35486a; font-size: 16px; }.dock-stage-heading > b { padding: 7px 11px; border-radius: 13px; color: #765ac9; background: #fff; box-shadow: 0 6px 12px rgba(63,82,133,.1); font-size: 11px; }
.dock-track { position: relative; height: 180px; margin-top: 17px; overflow: hidden; border: 5px solid #fff; border-radius: 29px; background: linear-gradient(180deg, #7165d0, #477ecb 55%, #3ca6c0); box-shadow: inset 8px 10px 16px rgba(34,53,117,.25), 0 9px 17px rgba(53,82,136,.14); }
.dock-track::before { content: ''; position: absolute; left: 4%; right: 9%; top: 50%; height: 7px; transform: translateY(-50%); border-radius: 999px; background: rgba(213,249,255,.42); box-shadow: 0 0 17px rgba(190,250,255,.7); }.dock-track::after { content: ''; position: absolute; inset: 0; opacity: .65; background-image: radial-gradient(circle, #fff 0 1.5px, transparent 2px); background-size: 57px 47px; animation: dock-stars 4s linear infinite; }
.dock-track .dock-star-trail { position: absolute; z-index: 1; left: -20%; top: 30%; width: 30%; height: 40%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(146,246,255,.52), transparent); animation: dock-trail 2s linear infinite; }
.dock-track .dock-safe-zone { position: absolute; z-index: 2; top: 25px; height: 130px; min-width: 58px; display: block; padding: 0; border: 7px solid #6df0a9; border-radius: 28px; color: #174f43; background: rgba(102,239,171,.16); box-shadow: inset 0 0 22px rgba(113,255,190,.22), 0 0 0 7px rgba(102,239,171,.12), 0 0 26px rgba(102,239,171,.62); animation: dock-zone-pulse .8s ease-in-out infinite alternate; }
.dock-safe-zone > i { position: absolute; inset: 8px; border: 3px dashed rgba(255,255,255,.68); border-radius: 18px; }.dock-safe-zone > b { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); padding: 3px 7px; border-radius: 999px; color: #176250; background: #ddffec; font-size: 9px; white-space: nowrap; }
.dock-track .dock-station { position: absolute; z-index: 4; right: 2%; top: 50%; width: 100px; height: 130px; min-width: 0; display: grid; place-items: center; padding: 0; transform: translateY(-50%); border: 7px solid rgba(255,255,255,.8); border-radius: 43% 48% 42% 50%; color: #fff; background: linear-gradient(145deg, #ffcb6d, #ed7180); box-shadow: inset 8px 9px 11px rgba(255,255,255,.32), inset -6px -7px 10px rgba(117,55,93,.16), 0 10px 20px rgba(42,47,116,.24); }.dock-station > i { position: absolute; left: -21px; width: 30px; height: 72px; border: 8px solid #fff; border-right: 0; border-radius: 22px 0 0 22px; }.dock-station > b { font-size: 26px; }
.dock-track .dock-shuttle { position: absolute; z-index: 6; left: 4%; top: 50%; width: 76px; height: 64px; min-width: 0; display: grid; place-items: center; padding: 0; transform: translate(-50%, -50%); border: 5px solid rgba(255,255,255,.9); border-radius: 44% 56% 48% 52%; background: linear-gradient(145deg, #b59af5, #7056d2); box-shadow: inset 6px 7px 8px rgba(255,255,255,.34), 0 8px 17px rgba(40,38,112,.3); }.dock-shuttle > b { font-size: 30px; transform: rotate(42deg); }.dock-shuttle .dock-flame { position: absolute; left: -25px; width: 31px; height: 18px; border: 0; background: linear-gradient(90deg, transparent, #8ff7ed 45%, #ffe176); clip-path: polygon(0 50%, 100% 0, 87% 50%, 100% 100%); animation: dock-flame .32s ease-in-out infinite alternate; }
.dock-live-status { position: relative; z-index: 6; min-height: 22px; margin: 12px 0 0; color: #52647e; font-size: 12px; font-weight: 900; text-align: center; }.dock-timing-stage.is-hit .dock-live-status { color: #15936b; }.dock-timing-stage.is-early .dock-live-status, .dock-timing-stage.is-late .dock-live-status, .dock-timing-stage.is-missed .dock-live-status { color: #dc5c70; }
.dock-timing-controls { width: min(520px, 100%); display: grid; margin: 0 auto; }.dock-hook-button { min-height: 84px; display: grid; grid-template-columns: 64px 1fr; align-content: center; padding: 12px 24px; border: 5px solid #fff; border-radius: 27px; cursor: pointer; color: #fff; text-align: left; background: linear-gradient(145deg, #54d6c0, #239fbd); box-shadow: inset 7px 8px 10px rgba(255,255,255,.3), 0 10px 19px rgba(26,139,168,.2); transition: transform .16s, filter .16s; }.dock-hook-button > span { grid-row: 1 / 3; place-self: center; min-width: 0; display: block; padding: 0; border: 0; background: transparent; font-size: 32px; }.dock-hook-button strong, .dock-hook-button small { display: block; }.dock-hook-button strong { font-size: 19px; }.dock-hook-button small { margin-top: 3px; color: rgba(255,255,255,.8); font-size: 10px; }.dock-hook-button:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.08); }.dock-hook-button:active:not(:disabled) { transform: translateY(3px) scale(.98); }.dock-hook-button:disabled { cursor: wait; opacity: .52; filter: grayscale(.25); }

/* Rule shift: active rule switching and two-attribute routing */
.mechanic-stage-reaction .rule-switch-stage { width: min(850px, 100%); min-height: 292px; display: block; padding: 18px 22px 21px; overflow: hidden; border: 7px solid rgba(255,255,255,.9); border-radius: 32px; color: #354765; background: linear-gradient(145deg, #fff1bd, #e7faff 48%, #eee5ff); box-shadow: inset 8px 10px 14px rgba(255,255,255,.74), 0 13px 25px rgba(67,90,139,.15); font-family: inherit; letter-spacing: 0; }
.rule-switch-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; }.rule-switch-stage .active-rule-card { min-width: 0; display: grid; gap: 2px; padding: 12px 16px; border: 4px solid #fff; border-radius: 20px; text-align: left; color: #fff; background: linear-gradient(145deg, #47cdda, #2195c1); box-shadow: inset 5px 6px 8px rgba(255,255,255,.24), 0 8px 15px rgba(38,137,172,.16); }.active-rule-card[data-rule='shape'] { background: linear-gradient(145deg, #a58bea, #7054cf); }.active-rule-card.is-mutating { animation: rule-card-flip .48s var(--ease); }.active-rule-card small { color: rgba(255,255,255,.78); font-size: 9px; font-weight: 950; letter-spacing: .13em; }.active-rule-card strong { font-size: 18px; }.active-rule-card b { margin-top: 2px; font-size: 11px; }
.rule-trial-progress { text-align: right; }.rule-trial-progress > strong { display: block; color: #4a5971; font-size: 11px; }.rule-trial-progress > span { min-width: 0; display: flex; gap: 5px; margin-top: 7px; padding: 0; border: 0; background: transparent; }.rule-trial-progress i { width: 10px; aspect-ratio: 1; border-radius: 50%; background: #c9d4de; }.rule-trial-progress i.is-correct { background: #42cb93; box-shadow: 0 0 0 3px rgba(66,203,147,.15); }.rule-trial-progress i.is-wrong { background: #ef6d7d; }
.rule-conveyor { position: relative; min-height: 145px; display: grid; place-items: center; margin-top: 12px; overflow: hidden; border: 5px solid #fff; border-radius: 27px; background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(205,239,248,.84)); box-shadow: inset 7px 9px 13px rgba(54,122,153,.11); }.rule-conveyor .conveyor-line { position: absolute; left: 7%; right: 7%; bottom: 22px; height: 15px; min-width: 0; padding: 0; border: 0; border-radius: 999px; background: repeating-linear-gradient(90deg, #7989ac 0 18px, #b9c6d7 18px 35px); animation: conveyor-roll 1.1s linear infinite; }
.rule-conveyor .rule-robot { --robot-color: #4c9be4; position: relative; z-index: 3; width: 90px; height: 102px; min-width: 0; display: grid; place-items: center; padding: 0; border: 7px solid #fff; border-radius: 37% 43% 30% 34%; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--robot-color) 56%, white), var(--robot-color)); box-shadow: inset 8px 9px 10px rgba(255,255,255,.35), inset -5px -7px 9px rgba(42,62,103,.14), 0 10px 18px rgba(48,77,116,.18); transition: transform .48s var(--ease), opacity .48s; }.rule-robot[data-color='blue'] { --robot-color: #4e9ee5; }.rule-robot[data-color='orange'] { --robot-color: #f29a47; }.rule-robot .robot-antenna { position: absolute; top: -25px; width: 9px; height: 26px; padding: 0; min-width: 0; border: 0; border-radius: 999px; background: #7058c9; }.rule-robot .robot-antenna::before { content: ''; position: absolute; left: 50%; top: -7px; width: 16px; aspect-ratio: 1; transform: translateX(-50%); border: 4px solid #fff; border-radius: 50%; background: #ffe069; }.rule-robot .robot-face { font-size: 20px; }.rule-robot .robot-shape { position: absolute; right: 9px; bottom: 8px; width: 21px; aspect-ratio: 1; min-width: 0; padding: 0; border: 4px solid #fff; background: #ffe16a; }.rule-robot[data-shape='circle'] .robot-shape { border-radius: 50%; }.rule-robot[data-shape='triangle'] .robot-shape { border: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }.rule-robot.is-awaiting { animation: robot-bob .7s ease-in-out infinite alternate; }.rule-robot.is-routing-left { transform: translateX(-330px) rotate(-16deg); opacity: .2; }.rule-robot.is-routing-right { transform: translateX(330px) rotate(16deg); opacity: .2; }.rule-robot.is-wrong { filter: grayscale(.45); }
.rule-live-status { min-height: 21px; margin: 10px 0 0; color: #596b82; font-size: 12px; font-weight: 900; text-align: center; }
.rule-switch-controls { width: min(690px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 auto; }.rule-bay { min-height: 90px; display: grid; grid-template-columns: 54px 1fr; align-content: center; padding: 11px 20px; border: 5px solid #fff; border-radius: 27px; cursor: pointer; color: #fff; text-align: left; box-shadow: inset 7px 8px 10px rgba(255,255,255,.3), 0 10px 18px rgba(56,93,142,.16); transition: transform .17s, filter .17s; }.rule-bay-left { background: linear-gradient(145deg, #58d7dc, #3987d0); }.rule-bay-right { background: linear-gradient(145deg, #ffb25e, #ed6f78); }.rule-bay > span { grid-row: 1 / 3; place-self: center; min-width: 0; display: block; padding: 0; border: 0; background: transparent; font-size: 30px; }.rule-bay strong, .rule-bay small { display: block; }.rule-bay strong { font-size: 18px; }.rule-bay small { margin-top: 4px; color: rgba(255,255,255,.8); font-size: 10px; }.rule-bay:hover:not(:disabled) { transform: translateY(-4px) scale(1.015); filter: brightness(1.08); }.rule-bay:active:not(:disabled) { transform: translateY(3px) scale(.98); }.rule-bay:disabled { cursor: wait; opacity: .48; }

@keyframes dock-stars { to { background-position: 57px 0; } }
@keyframes dock-trail { to { left: 110%; } }
@keyframes dock-zone-pulse { to { filter: brightness(1.15); box-shadow: inset 0 0 30px rgba(113,255,190,.32), 0 0 0 11px rgba(102,239,171,.1), 0 0 32px rgba(102,239,171,.8); } }
@keyframes dock-flame { to { transform: scaleX(.62); opacity: .72; } }
@keyframes rule-card-flip { 45% { transform: rotateX(86deg) scale(.96); } }
@keyframes conveyor-roll { to { background-position: 35px 0; } }
@keyframes robot-bob { to { transform: translateY(-7px) rotate(2deg); } }

/* Calculation cargo scene */
.cargo-stage { width: min(650px, 100%); display: flex; align-items: center; justify-content: center; gap: 15px; }
.cargo-stage em { color: #72829a; font-style: normal; font-size: 30px; }
.cargo-group { min-width: 115px !important; animation: cargo-arrive .58s var(--ease) both; }
.cargo-group:nth-of-type(2) { animation-delay: .2s; }.cargo-group:nth-of-type(3) { animation-delay: .4s; }
.cargo-group i { color: #55cfe3; font-style: normal; font-size: 30px; }.cargo-group b { color: #344b6d; font-size: 24px; }.cargo-group small { display: block; }
.cargo-out { animation-name: cargo-leave; }.cargo-out i { color: #ff7b82; }

/* Route, rotation, deduction and assembly */
.route-path { position: relative; overflow: hidden; }
.route-path > i { position: absolute; left: 0; top: 0; width: 34%; height: 100%; background: linear-gradient(90deg, transparent, rgba(84,211,232,.24), transparent); animation: route-flow 1.8s linear infinite; animation-delay: calc(var(--path-index) * -.45s); }
.route-path b, .route-path small { position: relative; z-index: 1; }
/* Spatial workshop: the start module never animates toward the answer */
.spatial-workbench { width: min(850px, 100%); display: grid !important; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 14px; padding: 15px !important; color: #334763; background: linear-gradient(145deg, #e1fbff, #efe9ff 58%, #fff2c2) !important; border: 5px solid rgba(255,255,255,.88) !important; box-shadow: inset 7px 8px 12px rgba(255,255,255,.72), 0 12px 24px rgba(61,88,131,.14); }
.spatial-start-panel, .spatial-operation-panel { display: grid; align-content: center; min-height: 238px; padding: 17px; border-radius: 27px; background: rgba(255,255,255,.72); box-shadow: inset 5px 6px 8px rgba(255,255,255,.78), 0 8px 15px rgba(57,83,122,.09); }
.spatial-panel-heading { text-align: left; }.spatial-panel-heading small, .spatial-panel-heading strong { display: block; }.spatial-panel-heading small { color: #7963cd; font-size: 9px; font-weight: 950; letter-spacing: .12em; }.spatial-panel-heading strong { margin-top: 3px; color: #344967; font-size: 14px; }
.spatial-start-module { position: relative; width: 126px; aspect-ratio: 1; display: grid; place-items: center; margin: 12px auto 8px; border: 8px solid #fff; border-radius: 50%; background: radial-gradient(circle, #dffaff, #c5edf5); box-shadow: inset 7px 9px 13px rgba(44,127,150,.13), 0 11px 20px rgba(50,112,143,.14); }
.spatial-orbit-ring { position: absolute; inset: 7px; border: 4px dotted rgba(105,82,200,.32); border-radius: 50%; animation: orbit 5s linear infinite; }
.spatial-start-panel > p { margin: 0; text-align: center; }.spatial-start-panel > p strong, .spatial-start-panel > p small { display: block; }.spatial-start-panel > p strong { color: #3e4d6d; font-size: 12px; }.spatial-start-panel > p small { margin-top: 2px; color: #77859a; font-size: 9px; }
.clay-spatial-module { --module-rotation: 0deg; position: relative; z-index: 2; width: 82px; aspect-ratio: 1; transform: rotate(var(--module-rotation)); transform-origin: center; }
.spatial-module-body { position: absolute; inset: 7px; display: block !important; min-width: 0 !important; padding: 0 !important; overflow: visible; border: 5px solid rgba(255,255,255,.8) !important; border-radius: 31% 45% 34% 43% !important; background: linear-gradient(145deg, color-mix(in srgb, var(--module-accent) 62%, white), var(--module-accent)) !important; box-shadow: inset 7px 8px 9px rgba(255,255,255,.35), inset -5px -6px 8px rgba(40,55,88,.13), 0 8px 13px color-mix(in srgb, var(--module-accent) 28%, transparent); }
.spatial-module-body > b { position: absolute; left: 50%; top: 50%; color: rgba(255,255,255,.95); transform: translate(-50%, -50%); font-size: 14px; }
.spatial-module-tip { position: absolute; left: 50%; top: -13px; width: 18px; height: 19px; transform: translateX(-50%); clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #ffce52; filter: drop-shadow(0 3px 2px rgba(92,67,18,.16)); }
.spatial-module-notch { position: absolute; right: -8px; top: 17px; width: 15px; height: 23px; border: 4px solid #fff; border-right: 0; border-radius: 11px 0 0 11px; background: #d6f5fb; }
.spatial-module-dot { position: absolute; width: 10px; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; background: #ff7886; box-shadow: 0 2px 4px rgba(70,46,79,.16); }.spatial-module-dot.dot-one { left: 12px; top: 13px; }.spatial-module-dot.dot-two { left: 18px; top: 31px; width: 7px; background: #ffe05f; }
.spatial-module-stripe { position: absolute; left: 17px; right: 9px; bottom: 10px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.72); transform: rotate(-12deg); }
.module-energy-blade .spatial-module-body { border-radius: 50% 18% 50% 18% !important; }.module-energy-blade .spatial-module-tip { background: #ff7a83; }.module-energy-blade .dot-one { background: #ffe05f; }
.module-crescent-joint .spatial-module-body { border-radius: 50% 50% 27% 50% !important; }.module-crescent-joint .spatial-module-body::after { content: ''; position: absolute; width: 24px; aspect-ratio: 1; right: 2px; bottom: 3px; border-radius: 50%; background: #eaf8ff; box-shadow: inset 3px 4px 5px rgba(78,105,135,.08); }
.module-tri-bead-gear .spatial-module-body { border-radius: 50% 38% 50% 38% !important; }.module-tri-bead-gear .dot-two { width: 9px; left: 31px; top: 16px; }.module-tri-bead-gear .spatial-module-stripe { left: 11px; right: 20px; }
.rotation-instructions { display: grid; gap: 9px; margin-top: 14px; }
.rotation-instruction { display: grid; grid-template-columns: 30px 54px 1fr; align-items: center; min-height: 62px; padding: 8px 12px; border: 3px solid #fff; border-radius: 20px; background: linear-gradient(145deg, #e2faff, #d4edf8); box-shadow: 0 7px 13px rgba(52,92,124,.1); animation: rotation-card-enter .4s var(--ease) both; animation-delay: calc(var(--instruction-index) * .13s); }
.rotation-instruction:nth-child(2) { background: linear-gradient(145deg, #f0e9ff, #dfd4fb); }.rotation-instruction > b { width: 25px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #3fbfd0; font-size: 9px; }.rotation-instruction > span { min-width: 0; padding: 0; border: 0; color: #785ed2; background: transparent; font-size: 39px; line-height: 1; animation: instruction-arrow-pulse 1.3s ease-in-out infinite alternate; }.rotation-instruction small, .rotation-instruction strong { display: block; text-align: left; }.rotation-instruction small { color: #728096; font-size: 9px; }.rotation-instruction strong { color: #354965; font-size: 20px; }
.spatial-reminder { margin: 11px 0 0; padding: 7px 10px; border-radius: 13px; color: #775fc7; background: #f0ecff; font-size: 9px; font-weight: 850; text-align: center; }
.spatial-options { width: min(850px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 0 auto; }
.spatial-option { min-height: 142px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 11px; border: 4px solid rgba(255,255,255,.9); border-radius: 25px; cursor: pointer; color: #3e4e69; background: linear-gradient(145deg, #fff, #e8f7ff); box-shadow: inset 5px 6px 8px rgba(255,255,255,.8), 0 9px 17px rgba(49,87,127,.12); transition: transform .2s var(--ease), box-shadow .2s; animation: spatial-option-enter .4s var(--ease) both; animation-delay: calc(var(--candidate-index) * .08s); }
.spatial-option:nth-child(2n) { background: linear-gradient(145deg, #fff, #f0e9ff); }.spatial-option:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: inset 5px 6px 8px rgba(255,255,255,.84), 0 14px 23px rgba(66,77,143,.16); }.spatial-option .candidate-module { width: 68px; }.spatial-option > strong { margin-top: 5px; font-size: 13px; }.spatial-option > small { color: #8792a3; font-size: 9px; }
@keyframes rotation-card-enter { from { opacity: 0; transform: translateX(18px); } }
@keyframes instruction-arrow-pulse { to { transform: scale(1.08); color: #36bfd0; } }
@keyframes spatial-option-enter { from { opacity: 0; transform: translateY(14px) scale(.9); } }

/* Three-axis clay rotation pilot: one live canvas plus rendered answer previews. */
.mechanic-stage-spatial .spatial-workbench { grid-template-columns: minmax(390px, 1.22fr) minmax(280px, .78fr); gap: 16px; width: min(960px, 100%); padding: 17px !important; }
.spatial-howto { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 11px 14px; border: 4px solid #fff; border-radius: 24px; background: linear-gradient(135deg, #fff9bf, #dcfaff 52%, #eee7ff); box-shadow: inset 5px 6px 9px rgba(255,255,255,.72), 0 8px 16px rgba(58,89,132,.1); }
.spatial-learning-badge { min-width: 150px; padding: 9px 12px; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #8063dc, #4bc8d2); box-shadow: 0 7px 13px rgba(87,82,174,.18); }.spatial-learning-badge b, .spatial-learning-badge span { display: block; }.spatial-learning-badge b { font-size: 12px; }.spatial-learning-badge span { margin-top: 2px; font-size: 9px; opacity: .86; }
.spatial-howto-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.spatial-howto-step { position: relative; min-width: 0 !important; display: grid !important; grid-template-columns: 27px 1fr; align-items: center; gap: 1px 7px; padding: 8px 9px !important; border: 3px solid rgba(255,255,255,.9) !important; border-radius: 17px !important; color: #465a74 !important; background: rgba(255,255,255,.7) !important; box-shadow: 0 5px 10px rgba(62,89,122,.08); text-align: left; }
.spatial-howto-step > b { grid-row: 1 / 3; width: 27px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #ff7c79; font-size: 11px; }.spatial-howto-step:nth-child(2) > b { background: #45c59c; }.spatial-howto-step:nth-child(3) > b { background: #755ed0; }.spatial-howto-step strong { font-size: 10px; line-height: 1.2; }.spatial-howto-step small { color: #78879a; font-size: 8px; line-height: 1.2; }
.mechanic-stage-spatial .spatial-start-panel { position: relative; min-height: 438px; align-content: start; overflow: hidden; padding: 17px 17px 14px; background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(218,248,255,.86) 48%, rgba(236,227,255,.9)); }
.mechanic-stage-spatial .spatial-operation-panel { min-height: 438px; align-content: start; background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(255,244,197,.78) 54%, rgba(237,230,255,.9)); }
.mechanic-stage-spatial .spatial-3d-viewport { position: relative; width: 100%; height: 272px; aspect-ratio: auto; margin: 10px auto 7px; overflow: hidden; border: 7px solid rgba(255,255,255,.96); border-radius: 29px; background: radial-gradient(circle at 50% 44%, #fff 0 8%, #dffaff 42%, #d8d0fb 100%); box-shadow: inset 8px 10px 16px rgba(64,120,159,.14), 0 12px 22px rgba(59,94,138,.16); }
.module-rotation-canvas-host { position: absolute; inset: 0; z-index: 2; }
.module-rotation-canvas { width: 100%; height: 100%; display: block; pointer-events: none; touch-action: none; }
.spatial-render-status { position: absolute !important; z-index: 7; left: 50%; bottom: 8px; min-width: 0 !important; padding: 5px 10px !important; transform: translateX(-50%); border: 2px solid rgba(255,255,255,.78) !important; border-radius: 999px !important; color: #5d6680 !important; background: rgba(255,255,255,.78) !important; box-shadow: 0 5px 12px rgba(48,78,116,.1); font: 850 9px/1.2 inherit !important; letter-spacing: .02em !important; white-space: nowrap; }
.spatial-workbench.has-three .spatial-render-status { color: #3d8c72 !important; background: rgba(234,255,246,.85) !important; }
.rotation-axis-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 auto 6px; }
.rotation-axis-legend span { min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 2px solid #fff; border-radius: 999px; color: #58687f; background: rgba(255,255,255,.72); box-shadow: 0 4px 8px rgba(43,76,110,.08); font-size: 9px; font-weight: 850; }
.rotation-axis-legend span[hidden] { display: none; }
.rotation-axis-legend b { width: 18px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 9px; }
.rotation-axis-legend .axis-x b { background: #ff6f7d; }.rotation-axis-legend .axis-y b { background: #42c98f; }.rotation-axis-legend .axis-z b { background: #4a91e8; }
.spatial-3d-companion { position: relative; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 7px; margin-top: 9px; padding: 6px 11px 6px 5px; border: 3px solid #fff; border-radius: 19px; background: linear-gradient(135deg, #fff8cc, #e7faff); box-shadow: 0 7px 13px rgba(70,100,137,.1); }
.spatial-3d-companion img { width: 54px; height: 54px; object-fit: cover; object-position: center 15%; border-radius: 16px; }
.spatial-3d-companion p { margin: 0; text-align: left; }.spatial-3d-companion strong, .spatial-3d-companion span { display: block; }.spatial-3d-companion strong { color: #7158c9; font-size: 10px; }.spatial-3d-companion span { margin-top: 2px; min-width: 0; padding: 0; border: 0; color: #5d6b7e; background: none; font-size: 9px; line-height: 1.35; }
.mechanic-stage-spatial .rotation-instruction { grid-template-columns: 30px 50px 1fr; min-height: 84px; border-left: 8px solid var(--axis-color); background: linear-gradient(145deg, rgba(255,255,255,.96), color-mix(in srgb, var(--axis-color) 15%, white)); }
.mechanic-stage-spatial .rotation-instruction > b { background: var(--axis-color); }.mechanic-stage-spatial .rotation-instruction > span { color: var(--axis-color); }.mechanic-stage-spatial .rotation-instruction small { font-size: 9px; line-height: 1.35; }.mechanic-stage-spatial .rotation-instruction strong { margin-top: 3px; font-size: 16px; }
.mechanic-stage-spatial .rotation-instruction strong em { color: #8290a0; font-size: 10px; font-style: normal; }
.spatial-demo-button { width: 100%; min-height: 82px; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 11px; margin-top: 13px; padding: 11px 16px; border: 5px solid #fff; border-radius: 23px; cursor: pointer; color: #fff; background: linear-gradient(135deg, #ff8c63, #ffca4e); box-shadow: inset 5px 6px 8px rgba(255,255,255,.32), 0 10px 18px rgba(221,126,57,.22); text-align: left; transition: transform .18s var(--ease), filter .18s; animation: demo-button-breathe 1.25s ease-in-out infinite alternate; }.spatial-demo-button:hover:not(:disabled) { transform: translateY(-3px) scale(1.01); filter: saturate(1.08); }.spatial-demo-button:disabled { cursor: wait; filter: saturate(.65); animation: none; }.spatial-demo-button > b { width: 50px; aspect-ratio: 1; display: grid; place-items: center; border: 4px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(125,72,54,.14); font-size: 20px; }.spatial-demo-button span, .spatial-demo-button small { display: block; }.spatial-demo-button span { font-size: 15px; font-weight: 950; }.spatial-demo-button small { margin-top: 3px; color: rgba(255,255,255,.88); font-size: 9px; font-weight: 800; }
.spatial-workbench.is-demonstrating .spatial-3d-viewport { box-shadow: inset 8px 10px 16px rgba(64,120,159,.14), 0 0 0 7px rgba(255,205,78,.24), 0 12px 22px rgba(59,94,138,.16); }.spatial-workbench.is-demonstrating .rotation-instruction { animation: active-instruction-pulse .45s ease-in-out infinite alternate; }
@keyframes demo-button-breathe { to { filter: brightness(1.06); box-shadow: inset 5px 6px 8px rgba(255,255,255,.36), 0 13px 23px rgba(221,126,57,.3); } }
@keyframes active-instruction-pulse { to { transform: translateX(3px); filter: saturate(1.18); } }
.mechanic-stage-spatial .spatial-reminder { margin-top: 15px; padding: 11px; font-size: 10px; line-height: 1.45; }
.mechanic-stage-spatial .spatial-options { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: min(960px, 100%); gap: 12px; }
.mechanic-stage-spatial .spatial-option { position: relative; min-height: 180px; grid-template-rows: 118px auto auto; align-content: center; overflow: hidden; padding: 9px 10px 12px; isolation: isolate; }
.module-rotation-preview-host { grid-row: 1; grid-column: 1; width: 100%; height: 118px; display: grid; place-items: center; }
.module-rotation-preview { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(66,67,117,.12)); }
.mechanic-stage-spatial .spatial-option > strong { grid-row: 2; grid-column: 1; z-index: 3; }.mechanic-stage-spatial .spatial-option > small { grid-row: 3; grid-column: 1; z-index: 3; }
.mechanic-stage-spatial .clay-spatial-module { transform: none; }
.mechanic-stage-spatial .start-fallback-module { position: absolute; z-index: 3; left: 50%; top: 48%; width: 124px; transform: translate(-50%, -50%); }
.mechanic-stage-spatial .candidate-module { grid-row: 1; grid-column: 1; place-self: center; width: 92px; }
.spatial-fallback-art { position: relative; aspect-ratio: 1; transition: opacity .2s; }
.spatial-workbench.has-three .spatial-fallback-art { opacity: 0; visibility: hidden; }
.spatial-workbench:not(.has-three) .module-rotation-canvas-host, .spatial-workbench:not(.has-three) .module-rotation-preview-host { opacity: 0; }
.spatial-fallback-shell { position: absolute !important; inset: 12%; min-width: 0 !important; padding: 0 !important; border: 5px solid rgba(255,255,255,.9) !important; border-radius: 34% 46% 36% 44% !important; background: linear-gradient(145deg, color-mix(in srgb, var(--module-accent) 58%, white), var(--module-accent)) !important; box-shadow: inset 7px 8px 9px rgba(255,255,255,.4), inset -5px -6px 8px rgba(39,52,91,.14), 0 9px 15px color-mix(in srgb, var(--module-accent) 24%, transparent); transform: perspective(160px) rotateX(11deg) rotateY(-15deg); }
.spatial-fallback-shell b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,.85); font-size: 15px; }
.fallback-pose-marker { --pose-scale: 1; position: absolute; min-width: 0 !important; width: 20px; height: 20px; display: grid !important; place-items: center; padding: 0 !important; transform: translate(-50%, -50%) scale(var(--pose-scale)); border: 3px solid #fff !important; border-radius: 50% !important; color: #fff; background: #ff6f7d !important; box-shadow: 0 4px 7px rgba(53,62,98,.18); font: 900 10px/1 inherit !important; }
.fallback-pose-marker.marker-tip { color: #765d18; background: #ffd757 !important; border-radius: 7px !important; }.fallback-pose-marker.marker-notch { background: #52cbd9 !important; }.fallback-pose-marker.marker-dot-two { width: 15px; height: 15px; color: #7b6418; background: #ffe475 !important; }.fallback-pose-marker.marker-stripe { width: 28px; height: 11px; border-radius: 999px !important; color: #7359c9; background: #fff5e9 !important; }

@media (max-width: 850px) {
  .mechanic-stage-spatial .spatial-workbench { grid-template-columns: 1fr; }
  .spatial-howto { grid-template-columns: 1fr; }.spatial-learning-badge { min-width: 0; text-align: center; }
  .mechanic-stage-spatial .spatial-start-panel, .mechanic-stage-spatial .spatial-operation-panel { min-height: auto; }
  .mechanic-stage-spatial .spatial-3d-viewport { height: 285px; }
}

@media (max-width: 560px) {
  .mechanic-stage-spatial .spatial-workbench { padding: 10px !important; }
  .mechanic-stage-spatial .spatial-start-panel, .mechanic-stage-spatial .spatial-operation-panel { padding: 12px; }
  .mechanic-stage-spatial .spatial-3d-viewport { height: 245px; }
  .mechanic-stage-spatial .spatial-options { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mechanic-stage-spatial .spatial-option { min-height: 155px; grid-template-rows: 96px auto auto; padding-inline: 6px; }
  .module-rotation-preview-host { height: 96px; }
  .spatial-3d-companion { grid-template-columns: 46px 1fr; }.spatial-3d-companion img { width: 46px; height: 46px; }
  .spatial-howto { padding: 9px; gap: 8px; }.spatial-howto-steps { grid-template-columns: 1fr; }.spatial-howto-step { min-height: 50px; }.spatial-howto-step small { font-size: 9px; }.spatial-demo-button { min-height: 76px; }
}

/* Comet tracking: lock, hidden chase, then direct selection */
.comet-field { position: relative; width: min(900px, 100%); min-height: 370px; display: block !important; overflow: hidden; padding: 0 !important; border: 7px solid rgba(255,255,255,.9) !important; border-radius: 32px !important; background: radial-gradient(circle at 18% 22%, rgba(255,226,91,.28), transparent 16%), radial-gradient(circle at 77% 62%, rgba(91,229,232,.26), transparent 23%), linear-gradient(145deg, #8d79e8, #5967c8 55%, #319bc0) !important; box-shadow: inset 9px 11px 18px rgba(255,255,255,.2), 0 13px 25px rgba(62,74,153,.2); }
.comet-star-layer { position: absolute; inset: 0; opacity: .8; background-image: radial-gradient(circle, #fff 0 2px, transparent 2.5px), radial-gradient(circle, rgba(255,236,148,.9) 0 1.5px, transparent 2px); background-position: 18px 22px, 51px 63px; background-size: 88px 78px, 113px 91px; animation: comet-stars-drift 7s linear infinite; }
.tracking-hud { position: absolute; z-index: 8; left: 50%; top: 13px; min-width: min(430px, calc(100% - 28px)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 9px 13px; transform: translateX(-50%); border: 3px solid rgba(255,255,255,.56); border-radius: 18px; color: #fff; background: rgba(41,51,117,.5); box-shadow: 0 7px 17px rgba(35,38,102,.16); backdrop-filter: blur(7px); }
.tracking-hud strong { font-size: 12px; }.tracking-hud small { color: rgba(255,255,255,.76); font-size: 9px; }.tracking-phase { display: flex; gap: 5px; }.tracking-phase i { width: 8px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .2s, transform .2s; }.tracking-phase i.is-active { background: #ffe15e; transform: scale(1.35); box-shadow: 0 0 0 4px rgba(255,225,94,.16); }
.clay-comet { position: absolute; z-index: 3; width: 74px; height: 54px; display: block; padding: 0; transform: translate(-50%, -50%); border: 0; color: #fff; background: transparent; cursor: wait; transition-property: left, top; transition-duration: var(--comet-duration); transition-delay: var(--comet-delay); transition-timing-function: cubic-bezier(.34,.03,.21,1); }
.comet-field .clay-comet:disabled { opacity: 1; }.comet-field .comet-tail { position: absolute; left: -25px; top: 17px; width: 44px; height: 23px; min-width: 0; display: block; padding: 0; border: 0; border-radius: 70% 8% 8% 70%; background: linear-gradient(90deg, transparent, rgba(110,242,247,.72) 42%, #bdf9ff); filter: drop-shadow(0 0 6px rgba(121,240,247,.45)); transform-origin: right center; animation: comet-tail-wave .6s ease-in-out infinite alternate; }
.comet-field .comet-core { position: absolute; left: 15px; top: 5px; width: 48px; aspect-ratio: 1; min-width: 0; display: grid; place-items: center; padding: 0; border: 5px solid rgba(255,255,255,.76); border-radius: 44% 56% 48% 52%; background: linear-gradient(145deg, #b29af6, #7458d6); box-shadow: inset 6px 7px 8px rgba(255,255,255,.36), inset -4px -6px 8px rgba(47,32,111,.2), 0 7px 13px rgba(35,35,104,.24); }
.comet-field .comet-core > i { position: absolute; right: 8px; top: 9px; width: 7px; aspect-ratio: 1; border-radius: 50%; background: #55dce6; box-shadow: -15px 14px 0 #ffbc72; }.comet-field .comet-core > b { font-size: 14px; }
.clay-comet.is-highlighted { z-index: 6; }.clay-comet.is-highlighted::before, .clay-comet.is-highlighted::after { content: ''; position: absolute; left: 39px; top: 29px; width: 75px; aspect-ratio: 1; border: 6px solid #ffe15d; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 8px rgba(255,225,93,.2), 0 0 26px #ffe15d; animation: comet-lock-pulse .72s ease-in-out infinite alternate; }.clay-comet.is-highlighted::after { width: 98px; border-width: 3px; border-style: dashed; animation: orbit 3.2s linear infinite; }
.clay-comet.is-highlighted .comet-core { background: linear-gradient(145deg, #c7adff, #795bd8); box-shadow: inset 6px 7px 8px rgba(255,255,255,.4), 0 0 25px rgba(255,229,94,.78); }
.comet-field .comet-lock-badge { position: absolute; z-index: 9; left: 39px; top: -28px; min-width: 54px; display: block; padding: 5px 9px; transform: translateX(-50%); border: 3px solid #fff; border-radius: 999px; color: #674500; background: #ffe15d; box-shadow: 0 6px 12px rgba(49,37,104,.18); font-size: 10px; font-weight: 950; }
.comet-field .comet-label { position: absolute; z-index: 7; left: 39px; top: 46px; min-width: 32px; display: block; padding: 3px 5px; transform: translateX(-50%); border: 3px solid #fff; border-radius: 9px; color: #4d3d99; background: #fff; box-shadow: 0 5px 10px rgba(38,40,99,.2); font-size: 10px; font-weight: 950; }
.comet-label[hidden] { display: none; }.comet-field.is-moving .comet-core { animation: comet-body-fly .55s ease-in-out infinite alternate; }.comet-field.is-moving .clay-comet { z-index: 4; }.comet-field.is-selectable .clay-comet { cursor: pointer; transition: transform .18s; }.comet-field.is-selectable .clay-comet:hover { z-index: 7; transform: translate(-50%, -50%) scale(1.16) rotate(-3deg); }.clay-comet.is-picked { filter: brightness(1.18); }
.tracking-guide { width: min(760px, 100%); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 9px; margin: 0 auto; padding: 11px 15px; border-radius: 20px; color: #60708a; background: linear-gradient(145deg, #fff, #eaf6ff); box-shadow: 0 8px 16px rgba(55,85,123,.09); font-size: 10px; text-align: center; }.tracking-guide span, .tracking-guide b { display: block; }.tracking-guide b { margin-bottom: 3px; color: #43526d; font-size: 11px; }.tracking-guide i { color: #8067dc; font-style: normal; font-weight: 950; }
@keyframes comet-lock-pulse { to { width: 88px; opacity: .62; } }
@keyframes comet-tail-wave { to { transform: scaleX(.72) rotate(-5deg); opacity: .68; } }
@keyframes comet-body-fly { to { transform: translateY(-4px) rotate(5deg); } }
@keyframes comet-stars-drift { to { background-position: 106px 22px, 164px 63px; } }
.evidence-board { display: grid; grid-template-columns: auto 52px auto 52px minmax(160px, auto); align-items: center; gap: 7px; font-size: 13px; letter-spacing: 0; }
.evidence-board span { min-width: 80px; animation: clue-light .55s var(--ease) both; }.evidence-board span:nth-of-type(2) { animation-delay: .25s; }
.evidence-board i { height: 4px; border-radius: 99px; background: linear-gradient(90deg, #55d4e6, #8c74e8); transform-origin: left; animation: evidence-line .55s .45s var(--ease) both; }
.evidence-board strong { color: #6b53c5; font-size: 18px; }
.mechanic-stage-classification .challenge-signal:has(.deduction-evidence-board) { display: block; padding: 18px; background: linear-gradient(145deg, #e6fbff, #eee8ff); }
.deduction-evidence-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; width: 100%; }
.deduction-clue { min-height: 104px; display: grid; align-content: center; gap: 5px; padding: 14px 16px; border: 3px solid rgba(255,255,255,.84); border-radius: 23px; background: linear-gradient(145deg, #fff, #dff6ff); box-shadow: inset 5px 6px 8px rgba(255,255,255,.75), 0 8px 16px rgba(51,108,145,.11); animation: clue-matrix-enter .5s var(--ease) both; animation-delay: calc(var(--clue-index) * .16s); }
.deduction-clue:nth-child(2) { background: linear-gradient(145deg, #fff, #eee4ff); }.deduction-clue:nth-child(3) { background: linear-gradient(145deg, #fff, #fff1bd); }
.deduction-clue b { color: #2bb7d1; font-size: 10px; letter-spacing: .1em; }.deduction-clue:nth-child(2) b { color: #765bd1; }.deduction-clue:nth-child(3) b { color: #cf8a17; }
.deduction-clue strong { color: #294363; font-size: 14px; line-height: 1.35; }.deduction-clue small { color: #75849a; font-size: 10px; }
.deduction-merge { grid-column: 1 / -1; display: grid; grid-template-columns: 42px auto 1fr; align-items: center; gap: 8px; margin: 0; padding: 8px 13px; border-radius: 16px; color: #fff; background: linear-gradient(90deg, #35c7d5, #7962dc); box-shadow: 0 7px 14px rgba(81,89,180,.15); }.deduction-merge > span { min-width: 0; padding: 0; border: 0; color: #fff; background: transparent; font-size: 25px; }.deduction-merge strong { font-size: 12px; }.deduction-merge small { color: rgba(255,255,255,.82); font-size: 10px; }
.challenge-options.deduction-options { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
.deduction-option { min-height: 104px; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px; border: 3px solid rgba(255,255,255,.85); border-radius: 24px; }
.deduction-attribute { display: block; padding: 6px 9px; border-radius: 11px; color: #51627a; background: #edf4fb; font-size: 12px; line-height: 1.2; box-shadow: inset 2px 3px 4px rgba(255,255,255,.65); }
.deduction-attribute:first-child { color: #fff; background: var(--candidate-color, #55bfd0); }.deduction-option[data-color='blue'] { --candidate-color: #4d84dc; }.deduction-option[data-color='purple'] { --candidate-color: #8b6ddf; }.deduction-option[data-color='orange'] { --candidate-color: #ee9a35; }.deduction-option[data-color='cyan'] { --candidate-color: #24b9c1; }
.deduction-attribute:nth-child(2) { color: #694fc0; background: #eee9ff; }.deduction-attribute:nth-child(3) { color: #9b6716; background: #fff2c8; }
.deduction-option:hover:not(:disabled) { transform: translateY(-5px) rotate(-.4deg); box-shadow: inset 4px 5px 7px rgba(255,255,255,.9), 0 13px 24px color-mix(in srgb, var(--candidate-color) 18%, transparent); }
.assembly-target { position: relative; display: grid; place-items: center; }
.assembly-target > span { min-width: 210px; color: #6b54c9; animation: assembly-snap .8s var(--ease) both; }
.assembly-target > i { position: absolute; width: 230px; height: 5px; border-radius: 99px; background: rgba(83,207,226,.28); box-shadow: 0 0 18px rgba(83,207,226,.45); }
.assembly-target > small { margin-top: 8px; }

/* Existing rich games gain continuous idle and impact motion */
.clay-card:not(.is-open):not(.is-matched) { animation: card-bob 2.7s ease-in-out infinite alternate; }
.clay-card:nth-child(3n) { animation-delay: -.8s; }
.clay-card.is-matched { animation: match-celebrate .48s var(--ease); }
.clay-gem:not(.is-cleared) { animation: gem-breathe 2.4s ease-in-out infinite alternate; }
.clay-gem:nth-child(3n) { animation-delay: -.7s; }
.clay-hole { animation: hole-breathe 2s ease-in-out infinite alternate; }
.clay-hole.is-good, .clay-hole.is-bad { animation: hole-pop .24s var(--ease); }
.runner-gate { animation: gate-pulse 1.1s ease-in-out infinite alternate; }
.rhythm-pad:not(:disabled):active { transform: translateY(5px) scale(.97); box-shadow: inset 8px 10px 16px rgba(42,70,105,.17); }
.sort-item { animation: sample-arrive .5s var(--ease) both, gem-breathe 2.4s .5s ease-in-out infinite alternate; }
.sort-bin:hover { transform: translateY(-5px) scale(1.02); filter: saturate(1.15); }

@keyframes ambient-drift { to { transform: translate(12px, -16px) rotate(18deg) scale(1.15); } }
@keyframes scanner-sweep { from { left: -32%; } to { left: 104%; } }
@keyframes target-hover { to { filter: brightness(1.08) saturate(1.08); box-shadow: inset 4px 5px 7px rgba(255,255,255,.92), 0 10px 22px rgba(39,153,190,.16); } }
@keyframes token-arrive { from { transform: translateY(18px) scale(.78); opacity: 0; } }
@keyframes sound-wave { to { height: 58px; } }
@keyframes reaction-breathe { 70% { box-shadow: 0 0 0 18px rgba(73,198,221,0); transform: scale(.92); } }
@keyframes alert-flare { from { transform: scale(.5); opacity: .2; } 65% { transform: scale(1.18); } }
@keyframes cargo-arrive { from { transform: translateX(-60px) rotate(-8deg); opacity: 0; } }
@keyframes cargo-leave { from { transform: translateX(60px) rotate(8deg); opacity: 0; } }
@keyframes route-flow { from { transform: translateX(-140%); } to { transform: translateX(350%); } }
@keyframes clue-light { from { filter: grayscale(1); opacity: .25; transform: scale(.82); } }
@keyframes clue-matrix-enter { from { transform: translateY(14px) scale(.92); opacity: 0; } }
@keyframes evidence-line { from { transform: scaleX(0); } }
@keyframes assembly-snap { from { letter-spacing: .6em; filter: blur(5px); opacity: .2; } to { letter-spacing: .12em; } }
@keyframes card-bob { to { filter: brightness(1.07); box-shadow: inset 6px 7px 10px rgba(255,255,255,.42), inset -6px -8px 12px rgba(23,107,139,.12), 0 13px 22px rgba(41,112,148,.2); } }
@keyframes match-celebrate { 55% { transform: rotateY(180deg) scale(1.1); } }
@keyframes gem-breathe { to { filter: brightness(1.1) saturate(1.08); box-shadow: inset 7px 8px 9px rgba(255,255,255,.55), inset -5px -7px 10px rgba(29,58,83,.11), 0 9px 14px rgba(59,89,116,.17); } }
@keyframes hole-breathe { to { box-shadow: inset 0 19px 22px rgba(72,105,128,.22), 0 10px 0 #edf8ff; } }
@keyframes hole-pop { from { transform: translateY(16px) scale(.7); } to { transform: translateY(-7px); } }
@keyframes gate-pulse { to { box-shadow: inset 5px 6px 8px rgba(255,255,255,.35), 0 0 0 8px rgba(112,213,231,.13); } }
@keyframes target-gate-beacon { to { transform: scale(1.1); filter: brightness(1.08) saturate(1.12); box-shadow: inset 6px 7px 9px rgba(255,255,255,.55), 0 0 0 13px rgba(255,197,65,.16), 0 10px 23px rgba(177,102,15,.28); } }
@keyframes sample-arrive { from { transform: translateY(-20px) rotate(-10deg) scale(.78); opacity: 0; } }
@keyframes feedback-bounce { 45% { transform: translateY(-5px) scale(1.05); } }

body.reduce-motion .challenge-atmosphere i,
body.reduce-motion .challenge-stage *,
body.reduce-motion .clay-card,
body.reduce-motion .clay-gem,
body.reduce-motion .clay-hole,
body.reduce-motion .runner-gate,
body.reduce-motion .sort-item { animation: none !important; }

.challenge-signal {
  border: 0;
  color: #149cbd;
  background: linear-gradient(145deg, #e7faff, #d9efff);
  box-shadow: inset 8px 9px 18px rgba(255,255,255,.88), inset -5px -7px 14px rgba(78,151,187,.1), 0 12px 25px rgba(62,125,161,.1);
}

.challenge-signal.is-live { color: #e34e66; background: #fff0f2; box-shadow: inset 7px 8px 16px rgba(255,255,255,.9), 0 12px 26px rgba(227,78,102,.13); }
.challenge-signal span { border-color: rgba(45,82,122,.13); background: rgba(255,255,255,.62); }
.challenge-option {
  border: 0;
  color: var(--text);
  background: linear-gradient(145deg, #ffffff, #edf4fb);
  box-shadow: inset 4px 5px 7px rgba(255,255,255,.9), inset -4px -5px 8px rgba(76,109,143,.08), 0 7px 16px rgba(61,91,126,.12);
}
.challenge-option:hover:not(:disabled) { background: #fff; border-color: transparent; box-shadow: inset 4px 5px 7px rgba(255,255,255,.9), 0 11px 20px rgba(39,153,190,.18); }
.round-feedback { background: rgba(255,255,255,.95); box-shadow: 0 12px 28px rgba(52,89,130,.13); }
.result-grade { color: #fff; background: linear-gradient(145deg, #66dff0, #22a8cd); box-shadow: inset 8px 8px 13px rgba(255,255,255,.35), 0 15px 35px rgba(34,168,205,.22); }
.result-stat, .metric, .mission-report-item { background: rgba(242,248,255,.8); }
.report-bar { background: rgba(42,73,109,.09); }
.radar-grid { stroke: rgba(35,70,112,.15); }
.radar-shape { fill: rgba(49,189,221,.18); filter: drop-shadow(0 5px 7px rgba(49,189,221,.2)); }
.legal-note { color: #65718a; background: #fff9e9; }
.onboard-control { background: linear-gradient(160deg, rgba(178,235,248,.65), rgba(222,211,255,.48)); }

/* Clay matching pairs */
.compact-signal { min-height: 72px; font-size: 18px; letter-spacing: .04em; }
.pair-board { width: min(720px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 auto; }
.clay-card { position: relative; min-height: 112px; border: 0; border-radius: 24px; cursor: pointer; transform-style: preserve-3d; background: linear-gradient(145deg, #8bdff0, #4bbbd8); box-shadow: inset 6px 7px 10px rgba(255,255,255,.35), inset -6px -8px 12px rgba(23,107,139,.14), 0 11px 19px rgba(41,112,148,.17); transition: transform .38s var(--ease), box-shadow .25s; }
.clay-card .card-back, .clay-card .card-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; font-size: 38px; }
.clay-card .card-back { color: rgba(255,255,255,.92); }
.clay-card .card-face { transform: rotateY(180deg); }
.clay-card.is-open, .clay-card.is-matched { transform: rotateY(180deg); background: linear-gradient(145deg, #fff7d6, #ffd783); }
.clay-card.is-matched { box-shadow: inset 6px 7px 10px rgba(255,255,255,.5), 0 0 0 4px rgba(52,189,140,.28), 0 12px 20px rgba(52,189,140,.17); }

/* Clay match game */
.match-board { width: min(560px, 100%); display: grid; grid-template-columns: repeat(var(--board-size), 1fr); gap: 9px; margin: 0 auto; padding: 18px; border-radius: 28px; background: #e5f1fa; box-shadow: inset 6px 8px 16px rgba(68,112,151,.12), 0 10px 24px rgba(72,112,151,.1); }
.clay-gem { aspect-ratio: 1; min-width: 0; border: 0; border-radius: 42% 58% 48% 52%; cursor: pointer; box-shadow: inset 7px 8px 9px rgba(255,255,255,.48), inset -5px -7px 10px rgba(29,58,83,.13), 0 7px 10px rgba(59,89,116,.14); transition: transform .24s, opacity .3s; }
.gem-aqua { background: #4fd5e9; }.gem-grape { background: #967cf0; }.gem-sun { background: #ffc955; }.gem-coral { background: #ff7f83; }.gem-mint { background: #58d5a8; }
.clay-gem:hover { transform: scale(1.08) rotate(4deg); }
.clay-gem.is-cleared { opacity: 0; transform: scale(.2) rotate(35deg); }
.is-shaking { animation: clay-shake .34s ease; }

/* Falling catch */
.falling-stage { position: relative; min-height: 340px; overflow: hidden; border: 7px solid rgba(255,255,255,.8); border-radius: 30px; background: linear-gradient(#bdeaff, #f4fbff 70%, #d9f0d2); box-shadow: inset 0 -35px 50px rgba(76,165,121,.08), inset 0 0 0 1px rgba(54,104,150,.08), 0 12px 24px rgba(63,108,145,.12); }
.falling-stage::before, .falling-stage::after { content: ""; position: absolute; width: 150px; height: 48px; top: 35px; border-radius: 50%; background: rgba(255,255,255,.8); filter: blur(1px); }
.falling-stage::before { left: 8%; }.falling-stage::after { right: 9%; top: 82px; transform: scale(.7); }
.falling-item { position: absolute; z-index: 2; top: -55px; width: 48px; height: 48px; border: 0; border-radius: 48% 52% 45% 55%; cursor: pointer; color: #fff; background: #52cfe5; box-shadow: inset 6px 7px 8px rgba(255,255,255,.4), inset -5px -6px 8px rgba(28,73,99,.14), 0 8px 14px rgba(39,89,119,.18); animation: clay-fall linear forwards; }
.falling-item:nth-of-type(3n) { background: #ffbd46; }.falling-item:nth-of-type(3n+1) { background: #8f7be9; }.falling-item.bad { color: #6b7483; background: #c7d0da; }
.falling-item.is-collected { animation: none; opacity: 0; transform: scale(1.5); pointer-events: none; }
.clay-catcher { position: absolute; z-index: 3; left: 50%; bottom: 14px; width: 118px; height: 48px; display: grid; place-items: center; transform: translateX(-50%); color: #fff; background: linear-gradient(145deg, #ff9b7c, #f36f78); border-radius: 12px 12px 50px 50px; box-shadow: inset 7px 7px 10px rgba(255,255,255,.35), 0 10px 18px rgba(194,77,92,.2); font-size: 35px; }
.catch-controls { margin: 12px auto 0; text-align: center; color: var(--muted); font-weight: 800; }

/* Whack, runner, rhythm and sort */
.whack-board { width: min(700px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 auto; }
.clay-hole { min-height: 90px; border: 0; border-radius: 50%; cursor: pointer; background: #c9dce8; box-shadow: inset 0 16px 20px rgba(72,105,128,.2), 0 8px 0 #edf8ff; transition: transform .18s, background .18s; }
.clay-hole.is-good { background: radial-gradient(circle at 42% 38%, #bff7ff 0 11%, #42cbe5 12% 48%, #168eaf 50%); transform: translateY(-7px); }
.clay-hole.is-bad { background: radial-gradient(circle at 42% 38%, #ffd3d8 0 11%, #ff7c85 12% 48%, #c94b5d 50%); transform: translateY(-7px); }
.runner-stage { position: relative; min-height: 90px; overflow: hidden; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #8f7be9, #6954cf); border-radius: 40px; box-shadow: inset 8px 9px 12px rgba(255,255,255,.3), 0 12px 24px rgba(105,84,207,.2); font-size: 38px; }
.runner-ship { position: absolute; left: 4%; bottom: 13px; z-index: 2; animation: runner-flight var(--runner-speed, 4s) linear forwards; }
.runner-countdown { position: relative; z-index: 1; font: 800 16px/1.2 inherit; letter-spacing: .08em; }
.runner-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 18px; }
.runner-lane { position: relative; min-height: 170px; border: 0; border-radius: 24px; cursor: pointer; color: var(--text); background: linear-gradient(#fff, #e7f4fb); box-shadow: inset 5px 6px 8px rgba(255,255,255,.8), 0 9px 18px rgba(54,90,128,.12); }
.runner-gate { display: grid; place-items: center; width: 70px; aspect-ratio: 1; margin: 0 auto 14px; color: #fff; background: #70d5e7; border-radius: 24px; box-shadow: inset 5px 6px 8px rgba(255,255,255,.35); font-size: 30px; }
.runner-lane.is-safe { background: #ddfaee; transform: translateY(-8px); }.runner-lane.is-blocked { opacity: .45; transform: scale(.96); }
.runner-lane.is-selected { outline: 4px solid rgba(49,189,221,.38); transform: translateY(-5px); }
.runner-lane.is-target { border: 4px solid #ffbd3f; background: linear-gradient(160deg, #fffdf0, #fff0a8); box-shadow: inset 5px 6px 8px rgba(255,255,255,.86), 0 0 0 7px rgba(255,189,63,.18), 0 12px 24px rgba(191,120,24,.2); }
.runner-lane.is-target .runner-gate { color: #5d3a00; background: linear-gradient(145deg, #ffe570, #ffad32); box-shadow: inset 6px 7px 9px rgba(255,255,255,.5), 0 0 0 8px rgba(255,197,65,.22), 0 8px 18px rgba(177,102,15,.24); font-size: 46px; animation: target-gate-beacon .72s ease-in-out infinite alternate; }
.runner-target-badge { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); min-width: max-content; padding: 5px 12px; color: #6b3f00; background: #fff1a6; border: 2px solid #ffbe3f; border-radius: 999px; box-shadow: 0 4px 10px rgba(182,111,16,.16); font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.rhythm-signal { min-height: 130px; color: #fff; background: linear-gradient(145deg, #9d8df1, #6b56d2); }
.rhythm-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 600px; margin: 0 auto; }
.rhythm-pad { min-height: 120px; border: 0; border-radius: 30px; cursor: pointer; color: #fff; background: linear-gradient(145deg, #65d8eb, #23a9cd); box-shadow: inset 8px 9px 13px rgba(255,255,255,.34), 0 12px 22px rgba(34,150,187,.19); font-size: 24px; font-weight: 900; }
.rhythm-pad:last-of-type { background: linear-gradient(145deg, #ff9d7f, #f36f78); }
.rhythm-pad:disabled { opacity: .45; }
.rhythm-ready, .rhythm-input-title { display: block; font-size: 20px; }
.rhythm-beat-index { width: 38px; aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto 5px; border: 2px solid rgba(255,255,255,.62); border-radius: 50%; font-size: 12px; font-weight: 900; }
.rhythm-beat-direction { display: block; font-size: 46px; line-height: 1; animation: rhythm-beat-pop .3s var(--ease); }
.rhythm-signal > small { display: block; margin-top: 8px; color: rgba(255,255,255,.78); font-size: 11px; }
.rhythm-beat-gap { opacity: .65; font-size: 14px; }
.rhythm-input-sequence { display: block; margin-top: 10px; font-size: 18px; letter-spacing: .08em; }
.rhythm-toolbar { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 12px; border-radius: 22px; background: #edf5fb; }
.rhythm-progress { color: #425775; font-size: 13px; font-weight: 900; }
.rhythm-undo, .rhythm-submit { min-height: 42px; padding: 9px 15px; }
.rhythm-toolbar button:disabled { cursor: not-allowed; opacity: .45; filter: saturate(.45); }
@keyframes rhythm-beat-pop { from { transform: scale(.68); opacity: .25; } to { transform: scale(1); opacity: 1; } }
.sort-signal { min-height: 190px; display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; gap: 16px; color: var(--text); background: #fff; }
.sort-signal small { max-width: 210px; color: var(--muted); font: 12px/1.6 inherit; letter-spacing: 0; }
.sort-item { width: 92px; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 45% 55% 48% 52%; color: #fff; font-size: 42px; box-shadow: inset 8px 9px 12px rgba(255,255,255,.38), 0 12px 22px rgba(47,81,112,.16); }
.sort-item.cold { background: #45c9e0; }.sort-item.warm { background: #ff876f; }
.sort-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 650px; margin: 0 auto; }
.sort-bin { min-height: 115px; border: 0; border-radius: 28px 28px 16px 16px; cursor: pointer; color: #fff; background: var(--bin-color); box-shadow: inset 8px 9px 12px rgba(255,255,255,.33), 0 12px 20px color-mix(in srgb, var(--bin-color) 23%, transparent); font-size: 20px; font-weight: 900; }

@keyframes clay-fall { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(390px) rotate(18deg); } }
@keyframes clay-shake { 25% { transform: translateX(-6px) rotate(-4deg); } 75% { transform: translateX(6px) rotate(4deg); } }
@keyframes runner-flight { from { left: 4%; } to { left: 82%; } }

body.reduce-motion .falling-stage { display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 16px; padding: 32px; }
body.reduce-motion .falling-item { position: relative; inset: auto !important; margin: auto; animation: none !important; }
body.reduce-motion .clay-catcher { display: none; }

@media (prefers-reduced-motion: reduce) {
  .falling-stage { display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 16px; padding: 32px; }
  .falling-item { position: relative; inset: auto !important; margin: auto; animation: none !important; }
  .clay-catcher { display: none; }
}

@media (max-width: 850px) {
  .clay-hero-panel { min-height: 320px; }
  .clay-hero-panel img { min-height: 320px; }
}

@media (max-width: 560px) {
  .pair-board { grid-template-columns: repeat(3, 1fr); }
  .clay-card { min-height: 86px; }
  .runner-lanes { gap: 7px; }
  .runner-lane { min-height: 140px; }
}

/* V3 — local accounts, reward loop, companion and longitudinal progress */
.topbar { grid-template-columns: minmax(190px, .8fr) auto minmax(190px, .8fr); gap: 14px; padding-inline: clamp(18px, 2.5vw, 42px); }
.main-nav { gap: 2px; }
.nav-button { padding-inline: 12px; white-space: nowrap; }
.profile-chip { position: relative; padding-right: 48px; }
.profile-logout { position: absolute; right: 0; bottom: -3px; border: 0; color: #8b5870; background: #fff0f3; border-radius: 999px; padding: 4px 8px; cursor: pointer; font-size: 10px; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 14% 18%, rgba(83,218,232,.27), transparent 32%), radial-gradient(circle at 88% 12%, rgba(145,121,239,.22), transparent 30%); }
.auth-card { width: min(1080px, 100%); min-height: 680px; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; border: 9px solid rgba(255,255,255,.9); border-radius: 46px; background: rgba(255,255,255,.84); box-shadow: 0 30px 70px rgba(60,96,139,.2), inset 0 0 0 1px rgba(50,88,128,.1); }
.auth-story { position: relative; overflow: hidden; padding: clamp(42px, 6vw, 80px); background: linear-gradient(155deg, #d9f7ff, #eee8ff 62%, #fff4cf); }
.auth-story::before { content: ''; position: absolute; width: 240px; aspect-ratio: 1; right: -80px; top: -70px; border-radius: 48% 52% 42% 58%; background: #ffd166; box-shadow: inset 20px 24px 30px rgba(255,255,255,.45); }
.auth-story h1 { position: relative; z-index: 1; margin: 20px 0; color: var(--text); font-size: clamp(48px, 6vw, 78px); line-height: .98; letter-spacing: -.06em; }
.auth-story h1 span { color: #159fc5; }
.auth-story p { position: relative; z-index: 1; max-width: 480px; color: #50627f; line-height: 1.8; }
.auth-story > img { position: absolute; z-index: 0; width: min(390px, 72%); right: -18px; bottom: -138px; filter: drop-shadow(0 22px 18px rgba(45,77,114,.2)); transform: rotate(2deg); }
.auth-panel { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(34px, 5vw, 64px); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: #edf6fc; border-radius: 999px; }
.auth-tabs button { min-height: 44px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 800; }
.auth-tabs button.is-active { color: #263d63; background: #fff; box-shadow: 0 6px 16px rgba(61,92,130,.13); }
.account-form, .settings-card { display: grid; gap: 16px; }
.account-form label, .settings-card label { display: grid; gap: 8px; color: #41516c; font-size: 13px; font-weight: 800; }
.account-form input:not([type='range']), .settings-card input:not([type='range']) { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgba(53,91,132,.18); border-radius: 15px; color: var(--text); background: #f8fcff; box-shadow: inset 0 3px 8px rgba(55,90,130,.06); font: inherit; }
.account-form input:focus, .settings-card input:focus { outline: 3px solid rgba(49,189,221,.24); border-color: #31bddd; }
.form-error { min-height: 20px; margin: 0; color: #c7465f; font-size: 13px; font-weight: 800; }
.local-security-note { margin: 0; padding: 12px 15px; color: #68748b; background: #fff9e8; border-radius: 14px; font-size: 11px; line-height: 1.65; }

.clay-companion { position: fixed; z-index: 26; right: 20px; bottom: 10px; width: 118px; height: 156px; padding: 0; border: 0; pointer-events: none; background: transparent; filter: drop-shadow(0 12px 11px rgba(43,78,116,.22)); }
.clay-companion img { width: 100%; height: 100%; object-fit: contain; animation: companion-float 3.2s ease-in-out infinite; }
.companion-name { position: absolute; right: 4px; bottom: 7px; padding: 4px 9px; color: #fff; background: #7865dc; border: 3px solid #fff; border-radius: 999px; font-size: 11px; font-weight: 900; }
.companion-talk { position: absolute; right: 1px; top: 22px; width: 38px; aspect-ratio: 1; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; pointer-events: auto; cursor: pointer; color: #fff; background: linear-gradient(145deg, #ffd35d, #ff9f58); box-shadow: inset 4px 5px 7px rgba(255,255,255,.35), 0 8px 15px rgba(102,75,142,.22); font-weight: 900; }
.companion-talk:hover, .companion-talk:focus-visible { transform: scale(1.1) rotate(8deg); outline: 3px solid rgba(49,189,221,.35); }
.companion-speech { position: absolute; right: 100px; bottom: 88px; width: 205px; padding: 12px 14px; color: #40516d; background: #fff; border: 2px solid #dbe7f2; border-radius: 20px 20px 5px 20px; box-shadow: 0 10px 26px rgba(53,88,127,.14); font-size: 12px; line-height: 1.55; opacity: .92; }
.clay-companion.is-talking .companion-speech { animation: speech-pop .4s var(--ease); }
@keyframes companion-float { 50% { transform: translateY(-8px) rotate(1.5deg); } }
@keyframes speech-pop { 40% { transform: scale(1.08) rotate(-1deg); } }
body.reduce-motion .clay-companion img { animation: none !important; }

.mentor-chip { display: flex; align-items: center; gap: 8px; margin: 12px 0 -2px; color: #52637e; }
.mentor-chip small { color: var(--muted); font-size: 10px; }
.mentor-face { width: 36px; aspect-ratio: 1; display: grid; place-items: center; color: #263a60; background: color-mix(in srgb, var(--region-accent) 35%, white); border: 3px solid #fff; border-radius: 45% 55% 48% 52%; box-shadow: inset 5px 6px 7px rgba(255,255,255,.5), 0 6px 12px color-mix(in srgb, var(--region-accent) 18%, transparent); font-size: 11px; font-weight: 900; }
.region-card { min-height: 330px; }
.region-card h3 { margin-top: 16px; }
.region-card p { margin-bottom: 72px; }

.points-earned { display: inline-flex; align-items: center; gap: 12px; margin: 18px auto 28px; padding: 12px 18px; color: #6d5420; background: linear-gradient(145deg, #fff7c7, #ffe08b); border-radius: 22px; box-shadow: inset 5px 6px 8px rgba(255,255,255,.55), 0 10px 20px rgba(168,125,37,.13); }
.points-earned strong { font-size: 20px; }.points-earned small { color: #806c42; }
.reward-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(42,60,93,.3); backdrop-filter: blur(8px); animation: reward-fade .3s ease both; }
.clay-reward { position: relative; width: min(760px, 100%); display: grid; grid-template-columns: 250px 1fr; align-items: center; gap: 20px; padding: 30px 36px 30px 14px; border: 9px solid #fff; border-radius: 48px; color: var(--text); background: linear-gradient(145deg, #e8fbff, #f1ebff); box-shadow: 0 30px 80px rgba(43,68,111,.28), inset 0 0 0 1px rgba(39,79,124,.1); animation: reward-pop .48s var(--ease) both; }
.clay-reward.celebrate { background: linear-gradient(145deg, #e7fff4, #fff6c9); }
.clay-reward.encourage { background: linear-gradient(145deg, #edf7ff, #f5efff); }
.clay-reward > img { width: 250px; max-height: 330px; object-fit: contain; filter: drop-shadow(0 14px 13px rgba(49,82,118,.2)); }
.clay-reward h2 { margin: 7px 0 10px; font-size: clamp(28px, 4vw, 44px); }
.clay-reward p { color: #576883; line-height: 1.75; }
.reward-close { position: absolute; right: 18px; top: 16px; width: 38px; aspect-ratio: 1; border: 0; border-radius: 50%; color: #63718a; background: rgba(255,255,255,.8); cursor: pointer; font-size: 24px; }
.reward-score { display: flex; align-items: baseline; gap: 14px; margin: 18px 0; }.reward-score strong { font-size: 38px; }.reward-score span { color: #b67b05; font-weight: 900; }
.reward-total { margin: -10px 0 18px; color: #6e7690 !important; font-size: 12px; font-weight: 800; }
@keyframes reward-fade { from { opacity: 0; } }
@keyframes reward-pop { from { transform: translateY(28px) scale(.9); opacity: 0; } }

.leaderboard-page, .profile-page { padding-bottom: 180px; }
.rank-summary { min-width: 180px; padding: 18px 22px; color: #fff; background: linear-gradient(145deg, #8e79ec, #6652cd); border: 6px solid rgba(255,255,255,.8); border-radius: 34px; box-shadow: var(--shadow); text-align: center; }.rank-summary span, .rank-summary small { display: block; opacity: .8; }.rank-summary strong { display: block; font-size: 45px; }
.leaderboard-shell { overflow: hidden; border: 1px solid rgba(52,87,128,.13); border-radius: 38px; background: rgba(255,255,255,.88); box-shadow: var(--shadow); }
.leaderboard-intro { display: grid; grid-template-columns: 190px 1fr; align-items: center; min-height: 210px; padding: 20px 50px 20px 10px; background: linear-gradient(145deg, #dff8ff, #eee8ff); }.leaderboard-intro img { width: 190px; height: 190px; object-fit: contain; }.leaderboard-intro h2 { margin: 0 0 8px; font-size: 28px; }.leaderboard-intro p { color: var(--muted); }
.leader-list { display: grid; gap: 10px; padding: 26px; }
.leader-row { display: grid; grid-template-columns: 64px 48px 1fr auto; align-items: center; gap: 16px; min-height: 76px; padding: 10px 20px; border: 1px solid rgba(48,85,127,.1); border-radius: 24px; background: #f8fbff; }.leader-row.is-current { background: #fff7d9; outline: 3px solid rgba(255,190,66,.26); }.rank-badge { font-size: 24px; font-weight: 900; }.leader-avatar { width: 44px; aspect-ratio: 1; display: grid; place-items: center; color: #fff; background: #7a67db; border-radius: 16px; }.leader-row small { display: block; color: var(--muted); margin-top: 3px; }.leader-points { color: #9e6d0c; font-size: 24px; text-align: right; }.leader-points small { font-size: 10px; }
.leaderboard-shell > .local-security-note { margin: 0 26px 26px; }

.profile-notice { padding: 13px 18px; color: #267255; background: #e3faef; border-radius: 16px; font-weight: 800; }
.profile-dashboard { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; margin-bottom: 24px; }
.profile-honor-card { display: grid; grid-template-columns: 150px 1fr; align-items: center; overflow: hidden; border-radius: 34px; background: linear-gradient(145deg, #fff5c5, #eee8ff); box-shadow: var(--shadow); }.profile-honor-card img { width: 160px; height: 220px; object-fit: contain; align-self: end; }.profile-honor-card h2 { margin: 6px 0; }.profile-honor-card strong { font-size: 28px; }.profile-honor-card small { color: var(--muted); }
.honor-progress { height: 10px; overflow: hidden; margin: 12px 0 7px; border-radius: 999px; background: rgba(62,85,118,.12); }.honor-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #46d1e3, #8c74ec, #ffc354); }
.profile-region-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.profile-region { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.85); box-shadow: 0 8px 20px rgba(51,87,127,.1); }.profile-region > span { width: 42px; aspect-ratio: 1; display: grid; place-items: center; color: #fff; background: var(--region-accent); border-radius: 15px; }.profile-region small, .profile-region strong { display: block; }.profile-region small { color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.settings-card { padding: 28px; border-radius: 30px; background: rgba(255,255,255,.88); box-shadow: var(--shadow); }.settings-card h2 { margin: 0 0 10px; }.settings-card input:disabled { color: #7b879a; background: #edf1f5; }

.analysis-banner { display: grid; grid-template-columns: 160px 1fr; align-items: center; min-height: 190px; margin-bottom: 22px; padding: 0 34px 0 6px; border-radius: 34px; background: linear-gradient(145deg, #dff9ff, #fff3c7); box-shadow: var(--shadow); }.analysis-avatar { height: 190px; overflow: hidden; }.analysis-avatar img { width: 155px; height: 220px; object-fit: contain; }.analysis-banner h2 { margin: 6px 0; font-size: clamp(22px, 3vw, 34px); }.analysis-banner p { color: var(--muted); }
.metric-grid { grid-template-columns: repeat(3, 1fr); }
.metric-title { font-size: 18px !important; }
.dated-analysis-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; margin: 18px 0; }.trend-chart { min-height: 230px; display: flex; align-items: end; gap: 12px; padding-top: 20px; }.trend-day { flex: 1; min-width: 48px; text-align: center; }.trend-bar { height: 140px; display: flex; align-items: end; overflow: hidden; border-radius: 18px 18px 8px 8px; background: #edf4fa; }.trend-bar span { width: 100%; border-radius: inherit; background: linear-gradient(#8f7be9, #4ed2e5); box-shadow: inset 5px 6px 9px rgba(255,255,255,.25); }.trend-day strong, .trend-day small { display: block; }.trend-day strong { margin-top: 6px; }.trend-day small { color: var(--muted); font-size: 10px; line-height: 1.5; }.insight-panel p { color: var(--muted); line-height: 1.7; }
.recent-ledger { margin-bottom: 32px; overflow-x: auto; }.recent-run-head, .recent-run-row { min-width: 760px; display: grid; grid-template-columns: 1.1fr 1.8fr .7fr .7fr .8fr .7fr; gap: 12px; align-items: center; padding: 12px 10px; }.recent-run-head { color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; }.recent-run-row { border-bottom: 1px solid rgba(49,80,118,.08); }.recent-run-row time, .recent-run-row span { color: var(--muted); }.recent-run-row b { color: #a8740b; }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .brand-copy, .profile-chip > div:first-child { display: none; }
  .main-nav { justify-self: center; }
  .nav-button { padding-inline: 9px; font-size: 12px; }
}
@media (max-width: 850px) {
  .auth-card, .profile-dashboard, .settings-grid, .dated-analysis-grid { grid-template-columns: 1fr; }
  .auth-story { min-height: 430px; }.auth-story > img { width: 300px; }
  .topbar { grid-template-columns: 1fr auto; }.main-nav { overflow-x: auto; justify-content: flex-start; max-width: calc(100vw - 32px); }
  .leaderboard-intro { grid-template-columns: 130px 1fr; }.leaderboard-intro img { width: 130px; height: 150px; }
  .clay-companion { width: 92px; height: 126px; }.companion-speech { display: none; }
  .mission-rule-grid, .mission-rule-strip { grid-template-columns: 1fr; }
  .experience-preview { grid-template-columns: 1fr; }
  .mission-momentum { grid-template-columns: 1fr 1fr; }
  .tone-calibration { grid-template-columns: 1fr; }.tone-calibration-heading { text-align: center; }
  .audio-cargo-bay { grid-template-columns: 1fr; }.cargo-bay-heading { justify-content: center; }.cargo-play-order { justify-self: center; }
  .audio-echo-route { grid-template-columns: 1fr; grid-template-areas: 'legend' 'map' 'status' 'play'; }.echo-play-command { width: min(360px, 100%); justify-self: center; }
  .command-chain-board { grid-template-columns: 1fr; }.command-scene { min-height: 145px; flex-direction: row; gap: 18px; text-align: left; }.command-avatar { flex: 0 0 68px; width: 68px; }
  .spatial-workbench { grid-template-columns: 1fr; }.spatial-start-panel { min-height: 205px; }.spatial-operation-panel { min-height: 180px; }
  .mission-rule-grid article { min-height: 0; }
  .briefing-start { align-items: stretch; flex-direction: column; }
}
@media (max-width: 560px) {
  body:has(.game-page) .topbar { position: static; }
  .auth-page { padding: 12px; }.auth-card { min-height: 0; border-width: 5px; border-radius: 28px; }.auth-story { min-height: 310px; padding: 30px; }.auth-story h1 { font-size: 44px; }.auth-story > img { width: 230px; bottom: -105px; }.auth-panel { padding: 26px 22px; }
  .clay-reward { grid-template-columns: 1fr; padding: 24px; text-align: center; }.clay-reward > img { width: 150px; height: 170px; margin: auto; }.clay-reward .action-row { justify-content: center; }
  .leaderboard-intro { grid-template-columns: 1fr; padding: 20px; }.leaderboard-intro img { margin: auto; }.leader-row { grid-template-columns: 44px 1fr auto; }.leader-avatar { display: none; }
  .profile-honor-card { grid-template-columns: 110px 1fr; }.profile-honor-card img { width: 110px; }.profile-region-grid { grid-template-columns: 1fr; }
  .analysis-banner { grid-template-columns: 100px 1fr; padding-right: 18px; }.analysis-avatar img { width: 105px; }.metric-grid { grid-template-columns: 1fr 1fr; }
  .rhythm-toolbar { grid-template-columns: 1fr 1fr; }.rhythm-progress { grid-column: 1 / -1; text-align: center; }
  .game-status { align-items: stretch; flex-direction: column; gap: 7px; }
  .mission-time { width: 100%; }
  .result-stats-four { grid-template-columns: 1fr 1fr; }
  .evidence-board { grid-template-columns: 1fr; }.evidence-board i { width: 4px; height: 20px; justify-self: center; }
  .deduction-evidence-board { grid-template-columns: 1fr; }.deduction-merge { grid-column: 1; grid-template-columns: 36px 1fr; }.deduction-merge small { grid-column: 2; }.challenge-options.deduction-options { grid-template-columns: 1fr 1fr; }
  .cargo-stage { gap: 5px; }.cargo-group { min-width: 78px !important; }.cargo-stage em { font-size: 20px; }
  .tone-samples { grid-template-columns: 1fr 1fr; }
  .audio-live-capture { grid-template-columns: 82px 1fr; padding: 16px; }.radio-dial { width: 72px; }.audio-live-controls { grid-template-columns: 1fr; }.audio-capture-button { min-height: 86px; }
  .audio-cargo-pods { grid-template-columns: 1fr 1fr; }.audio-cargo-toolbar, .echo-toolbar { flex-wrap: wrap; }
  .compare-bridge { grid-template-columns: 1fr 54px 1fr; gap: 7px; }.compare-core b { width: 46px; }.audio-compare-pod { min-height: 100px; }.audio-compare-decisions { grid-template-columns: 1fr; }
  .audio-echo-controls { grid-template-columns: 1fr; }.echo-toolbar { justify-content: center; }
  .command-scene { align-items: center; padding: 13px; }.command-avatar { flex-basis: 58px; width: 58px; font-size: 28px; }.command-clue { grid-template-columns: 58px 1fr; padding-inline: 9px; }.command-answer-rail, .command-step-bank { grid-template-columns: 1fr 1fr; }.command-answer-rail::before { display: none; }.command-toolbar { display: grid; grid-template-columns: 1fr 1fr; }.command-toolbar .command-submit { grid-column: 1 / -1; }
  .spatial-options { grid-template-columns: 1fr 1fr; }.spatial-option { min-height: 128px; }.rotation-instruction { grid-template-columns: 27px 46px 1fr; }.rotation-instruction > span { font-size: 32px; }
  .comet-field { min-height: 390px; }.tracking-hud { grid-template-columns: auto 1fr; min-width: calc(100% - 20px); }.tracking-hud > small { grid-column: 2; }.clay-comet { transform: translate(-50%, -50%) scale(.86); }.comet-field.is-selectable .clay-comet:hover { transform: translate(-50%, -50%) scale(.98); }.tracking-guide { grid-template-columns: repeat(3, 1fr); }.tracking-guide > i { display: none; }
}

/* Mission thumbnails stay game-first: the mentor accompanies a distinct little playfield. */
.mission-card.scene-attention,
.mission-card.scene-memory,
.mission-card.scene-logic,
.mission-card.scene-perception,
.mission-card.scene-reaction { background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--scene-b) 62%, white)); }
.mission-card .mission-preview-mentor { right: -23px; bottom: 17px; width: 96px; height: 133px; opacity: .92; }
.mission-card .mission-preview-props { inset: 25px 67px 48px 13px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 6px; }
.mission-card .mission-preview-props span,
.mission-card .mission-preview-props span:nth-child(2),
.mission-card .mission-preview-props span:nth-child(3) { width: 44px; height: 42px; margin: 0; border-radius: 14px; font-size: 12px; }
.mission-card[data-mechanic='target'] .mission-preview-props span:nth-child(2),
.mission-card[data-mechanic='whack'] .mission-preview-props span:nth-child(2) { transform: translateY(25px) scale(1.12); background: var(--scene-pop); }
.mission-card[data-mechanic='audio'] .mission-preview-props,
.mission-card[data-mechanic='sequence'] .mission-preview-props,
.mission-card[data-mechanic='rhythm'] .mission-preview-props { grid-template-columns: repeat(3, 1fr); transform: rotate(-3deg); }
.mission-card[data-mechanic='audio'] .mission-preview-props span:nth-child(1) { height: 26px; }
.mission-card[data-mechanic='audio'] .mission-preview-props span:nth-child(2) { height: 48px; }
.mission-card[data-mechanic='audio'] .mission-preview-props span:nth-child(3) { height: 68px; }
.mission-card[data-mechanic='pairs'] .mission-preview-props,
.mission-card[data-mechanic='match3'] .mission-preview-props,
.mission-card[data-mechanic='assembly'] .mission-preview-props { grid-template-columns: repeat(2, 44px); transform: rotate(2deg); }
.mission-card[data-mechanic='runner'] .mission-preview-props,
.mission-card[data-mechanic='tracking'] .mission-preview-props,
.mission-card[data-mechanic='catch'] .mission-preview-props { grid-template-columns: 1fr; align-content: center; }
.mission-card[data-mechanic='runner'] .mission-preview-props span,
.mission-card[data-mechanic='tracking'] .mission-preview-props span,
.mission-card[data-mechanic='catch'] .mission-preview-props span { width: 74px; height: 25px; }

/* Input feedback is state communication: brief, local, and never pointer-blocking. */
#challenge-root button.is-choice-pulsed { animation: choice-confirm .36s var(--ease) both !important; }
#challenge-root button.is-action-pulsed { animation: action-confirm .36s var(--ease) both !important; }
#challenge-root button.is-input-pulsed { animation: input-confirm .36s var(--ease) both !important; }
#challenge-root button.is-input-confirmed { outline: 3px solid color-mix(in srgb, var(--region-accent) 70%, white); outline-offset: 2px; filter: brightness(1.06); }
@keyframes choice-confirm {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--region-accent) 35%, transparent); }
  45% { transform: scale(.96); filter: brightness(1.12) saturate(1.15); box-shadow: 0 0 0 7px color-mix(in srgb, var(--region-accent) 18%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 11px transparent; }
}
@keyframes action-confirm {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(2px) scale(.95); filter: brightness(1.14) saturate(1.18); }
  72% { transform: translateY(-2px) scale(1.025); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes input-confirm { 50% { filter: brightness(1.1); } }
body.reduce-motion #challenge-root button.is-choice-pulsed,
body.reduce-motion #challenge-root button.is-action-pulsed,
body.reduce-motion #challenge-root button.is-input-pulsed { animation: none !important; }

/* V4 — five fully staged clay mini-games, one new interaction per training world. */
.challenge-signal.rich-scene-game {
  --clay-edge: rgba(75, 66, 133, .13);
  position: relative; isolation: isolate; display: block; width: 100%; min-height: 560px;
  overflow: hidden; margin: 0 auto 18px; border: 8px solid rgba(255,255,255,.92); border-radius: 38px;
  color: #3d3968; background: linear-gradient(155deg, #bff4ff 0%, #e7ddff 47%, #fff2b8 100%);
  box-shadow: inset 0 0 0 2px rgba(76,66,129,.08), inset 12px 14px 20px rgba(255,255,255,.45), 0 18px 38px rgba(62,72,129,.17);
  font: 700 15px/1.45 system-ui, sans-serif; letter-spacing: 0;
}
.challenge-signal.rich-scene-game span { display: inline; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; text-align: inherit; }
.challenge-signal.rich-scene-game small { color: inherit; font-size: inherit; }
.rich-scene-backdrop { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.scene-cloud { position: absolute; width: 150px; height: 55px; border-radius: 999px; background: rgba(255,255,255,.68); filter: drop-shadow(0 8px 8px rgba(89,102,158,.08)); animation: rich-cloud-drift 10s ease-in-out infinite alternate; }
.scene-cloud::before, .scene-cloud::after { content: ''; position: absolute; bottom: 7px; border-radius: 50%; background: inherit; }
.scene-cloud::before { left: 24px; width: 65px; height: 68px; }.scene-cloud::after { right: 20px; width: 78px; height: 82px; }
.cloud-one { left: -35px; top: 88px; }.cloud-two { right: -45px; top: 135px; transform: scale(.72); animation-delay: -4s; }
.scene-planet { position: absolute !important; display: grid !important; place-items: center; border-radius: 50% !important; color: #fff; box-shadow: inset 9px 11px 14px rgba(255,255,255,.36), 0 12px 22px rgba(76,69,135,.17); animation: scene-planet-float 4s ease-in-out infinite; }
.planet-one { width: 76px; height: 76px; left: 6%; bottom: 28px; background: #ff8ab0 !important; transform: rotate(-13deg); }
.planet-two { width: 52px; height: 52px; right: 6%; top: 82px; background: #6ed9d1 !important; animation-delay: -2s; }
.scene-lamp { position: absolute; left: 15%; top: 0; width: 13px; height: 91px; border-radius: 0 0 10px 10px; background: #6859ad !important; }
.scene-lamp::after { content: ''; position: absolute; left: -35px; bottom: -33px; width: 82px; height: 48px; border-radius: 50% 50% 17px 17px; background: #ffd45d; box-shadow: inset 8px 9px 9px rgba(255,255,255,.38), 0 15px 26px rgba(255,202,69,.35); }
.scene-shelf { position: absolute !important; right: 13%; bottom: 0; width: 150px; height: 72px; display: flex !important; align-items: end; gap: 8px !important; padding: 0 13px !important; border-radius: 22px 22px 0 0 !important; background: #9d77e8 !important; box-shadow: inset 7px 8px 11px rgba(255,255,255,.3); }
.scene-shelf i { width: 28px; height: 48px; border-radius: 8px 8px 3px 3px; background: #ff846f; box-shadow: inset 5px 5px 6px rgba(255,255,255,.32); transform: rotate(-3deg); }.scene-shelf i:nth-child(2) { height: 59px; background: #54d3c7; transform: rotate(4deg); }.scene-shelf i:nth-child(3) { height: 42px; background: #ffd45f; }
.rich-scene-hud { position: relative; z-index: 8; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 14px; padding: 12px 15px; border: 3px solid rgba(255,255,255,.88); border-radius: 22px; background: rgba(255,255,255,.78); box-shadow: 0 8px 18px rgba(63,69,128,.1), inset 4px 5px 8px rgba(255,255,255,.58); backdrop-filter: blur(8px); }
.rich-scene-age { padding: 7px 11px !important; border-radius: 999px !important; color: #fff; background: linear-gradient(145deg,#8e72ea,#6956ca) !important; box-shadow: inset 3px 4px 5px rgba(255,255,255,.27); font-size: 11px !important; font-weight: 900; white-space: nowrap; }
.rich-scene-hud strong, .rich-scene-hud small { display: block; }.rich-scene-hud strong { font-size: 17px; }.rich-scene-hud small { color: #77729b; font-size: 11px; }
.rich-scene-progress { min-width: 128px !important; padding: 8px 12px !important; border-radius: 14px !important; color: #4f4a78; background: #fff2a9 !important; font-size: 12px !important; font-weight: 900; text-align: center !important; }
.rich-scene-playfield { position: relative; z-index: 2; min-height: 425px; margin: 0 14px 14px; border: 4px solid rgba(255,255,255,.82); border-radius: 30px; background: rgba(255,255,255,.2); box-shadow: inset 0 0 32px rgba(255,255,255,.25); }
.rich-scene-companion { position: absolute; z-index: 7; left: 20px; bottom: 8px; display: flex; align-items: center; pointer-events: none; }
.rich-scene-companion img { width: 106px; height: 132px; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(58,67,116,.2)); animation: companion-float 3.2s ease-in-out infinite; }
.rich-scene-companion p { position: relative; width: 205px; margin: 0 0 56px -7px; padding: 10px 13px; border: 3px solid #fff; border-radius: 18px 18px 18px 4px; color: #545173; background: rgba(255,255,255,.92); box-shadow: 0 8px 18px rgba(69,73,126,.13); font-size: 11px; }
.rich-scene-companion p strong, .rich-scene-companion p span { display: block; }.rich-scene-companion p span { margin-top: 2px; color: #777292; font-weight: 700; }

/* Number starboard */
.rich-scene-numbertrail { background: linear-gradient(150deg,#bdf8ff,#e3e9ff 45%,#fff0a9); }
.number-trail-field { display: grid; place-items: center; padding: 22px 28px 94px; }
.number-star-board { width: min(700px, 86%); display: grid; grid-template-columns: repeat(4, minmax(64px,1fr)); gap: clamp(10px,1.7vw,20px); padding: 28px; border: 9px solid #f8bd72; border-radius: 34px; background: #fff9df; box-shadow: inset 10px 12px 14px rgba(235,164,71,.16), 0 18px 0 #d88b58, 0 26px 28px rgba(87,70,122,.16); transform: rotate(-1deg); }
.number-star-tile { position: relative; min-height: 68px; border: 0; border-radius: 20px; color: #4a4772; background: linear-gradient(145deg,#fff,#dff7ff); box-shadow: inset 6px 7px 9px rgba(255,255,255,.7), inset -4px -5px 8px rgba(74,128,176,.1), 0 7px 0 #9bc6dd, 0 10px 14px rgba(72,82,131,.12); cursor: pointer; transition: transform .18s, filter .18s; }
.number-star-tile:nth-child(3n+2) { background: linear-gradient(145deg,#fff,#f0e7ff); box-shadow: inset 6px 7px 9px rgba(255,255,255,.7), 0 7px 0 #baa4e6, 0 10px 14px rgba(72,82,131,.12); }.number-star-tile:nth-child(3n) { background: linear-gradient(145deg,#fff,#fff0bd); box-shadow: inset 6px 7px 9px rgba(255,255,255,.7), 0 7px 0 #e2bb63, 0 10px 14px rgba(72,82,131,.12); }
.number-star-tile span { position: absolute !important; left: 8px; top: 5px; color: #ff8b9c; font-size: 12px !important; }.number-star-tile strong { font-size: clamp(22px,3vw,34px); }.number-star-tile:hover { transform: translateY(-3px) rotate(1deg); filter: brightness(1.04); }.number-star-tile.is-lit { color: #fff; background: linear-gradient(145deg,#64dfc4,#36bfa5); box-shadow: inset 7px 8px 10px rgba(255,255,255,.35), 0 4px 0 #238f7c, 0 0 24px rgba(73,214,184,.55); transform: translateY(4px) scale(.96); }.number-star-tile.is-wrong { animation: clay-wiggle .35s ease; }
.number-note { position: absolute; z-index: 4; right: 7%; top: 20px; padding: 9px 15px; border-radius: 9px; color: #765321; background: #fff09b; box-shadow: 0 8px 14px rgba(102,82,122,.14); transform: rotate(3deg); }.number-note b { margin-left: 4px; font-size: 22px; }.clay-pencil { position: absolute; left: 10%; top: 20px; width: 150px; height: 17px; border-radius: 999px; background: #ff7b83; box-shadow: inset 4px 4px 5px rgba(255,255,255,.35), 0 5px 7px rgba(87,72,117,.14); transform: rotate(-8deg); }.clay-pencil::after { content: ''; position: absolute; right: -22px; border: 9px solid transparent; border-left: 22px solid #f6c78e; }

/* Reverse launch */
.rich-scene-relaunch { background: linear-gradient(155deg,#d9ccff,#bdefff 52%,#ffe9b1); }
.reverse-launch-field { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: auto 1fr; gap: 16px 24px; align-items: center; padding: 24px 36px 100px; }
.capsule-memory-rack { grid-column: 1 / -1; display: flex; justify-content: center; gap: 12px; min-height: 90px; padding: 13px; border-radius: 25px; background: rgba(80,69,151,.15); box-shadow: inset 6px 7px 9px rgba(74,64,143,.1); }
.memory-capsule { width: 64px; height: 68px; display: grid !important; place-items: center; border: 5px solid #fff !important; border-radius: 25px 25px 16px 16px !important; color: #6b5d9b; background: linear-gradient(145deg,#f8f5ff,#c7b8ff) !important; box-shadow: inset 7px 8px 9px rgba(255,255,255,.52), 0 8px 0 #8873ce, 0 12px 16px rgba(73,65,126,.15); transition: transform .25s, filter .25s; }.memory-capsule small { position: absolute; opacity: 0; }.memory-capsule b { font-size: 28px; }.memory-capsule.is-glowing { color: #6c5100; background: #ffe76b !important; filter: drop-shadow(0 0 18px #ffd858); transform: translateY(-8px) scale(1.08); }.capsule-memory-rack.is-covered .memory-capsule b { color: transparent; }.capsule-memory-rack.is-covered .memory-capsule::after { content: '?'; color: #fff; font-size: 26px; font-weight: 900; }
.reverse-answer-rail { display: flex; justify-content: center; gap: 8px; align-self: start; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.72); }.reverse-answer-rail span { width: 48px; height: 52px; display: grid !important; place-items: center; border: 3px dashed #b9aadf !important; border-radius: 15px !important; color: #9286b1; background: #f6f2ff !important; font-size: 21px !important; }.reverse-answer-rail span.is-filled { border-style: solid !important; color: #fff; background: #7b68df !important; animation: capsule-drop .28s ease; }
.reverse-keypad { display: grid; grid-template-columns: repeat(3, 58px); justify-content: center; gap: 9px; padding: 16px; border: 7px solid #62c9dc; border-radius: 28px; background: #e8fbff; box-shadow: inset 7px 8px 9px rgba(255,255,255,.65), 0 12px 0 #329eb4; }.reverse-keypad button { min-height: 50px; border: 0; border-radius: 16px; color: #4d4a79; background: #fff; box-shadow: 0 5px 0 #b7dce5; cursor: pointer; font: 900 20px system-ui; }.reverse-keypad button:disabled { opacity: .5; cursor: wait; }.reverse-keypad button:not(:disabled):hover { transform: translateY(-2px); background: #fff4a9; }
.reverse-launch-actions { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; }.reverse-launch-actions button { min-height: 44px; padding: 0 18px; border: 3px solid #fff; border-radius: 15px; color: #5f5587; background: #fff; box-shadow: 0 5px 0 #bbaae1; cursor: pointer; font-weight: 900; }.reverse-launch-actions button:last-child { color: #fff; background: #7461d3; box-shadow: 0 5px 0 #4e3ca8; }.reverse-launch-actions button:disabled { opacity: .45; cursor: not-allowed; }
.clay-rocket { position: absolute; right: 5%; bottom: 46px; width: 74px; height: 145px; border: 7px solid #fff; border-radius: 50% 50% 23% 23%; background: linear-gradient(90deg,#ff8a9c,#ffbf77); box-shadow: inset 10px 10px 12px rgba(255,255,255,.35), 0 14px 20px rgba(74,68,123,.17); transform: rotate(5deg); }.clay-rocket b { display: grid; place-items: center; height: 100%; color: #fff; font-size: 28px; }.clay-rocket i { position: absolute; inset: auto 16px -34px; height: 42px; border-radius: 0 0 50% 50%; background: #ffdc55; opacity: .35; }.is-launching .clay-rocket { animation: rocket-launch .75s ease-in both; }

/* Recipe laboratory */
.rich-scene-recipelab { background: linear-gradient(145deg,#fff1a9,#c9f5dd 48%,#d6cdff); }
.recipe-lab-field { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; padding: 25px 34px 100px; }
.recipe-clue-cards { display: grid; align-content: center; gap: 11px; }.recipe-clue-cards article { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 62px; padding: 10px 16px; border: 4px solid #fff; border-radius: 20px; background: rgba(255,255,255,.84); box-shadow: 0 7px 0 color-mix(in srgb,#9b86d9 35%,white), 0 11px 15px rgba(83,72,125,.11); transform: rotate(calc((var(--card-index) - 1) * 1.4deg)); }.recipe-clue-cards article > span { display: flex !important; align-items: center; gap: 6px !important; }.recipe-clue-cards article > b { color: #64568e; font-size: 17px; }
.recipe-ingredient { display: inline-flex !important; flex-direction: column; align-items: center; gap: 2px !important; }.recipe-ingredient b { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: #ef7e9d; box-shadow: inset 5px 5px 6px rgba(255,255,255,.3); }.recipe-ingredient small { font-size: 9px !important; white-space: nowrap; }.ingredient-blue b { background: #65bfe8; }.ingredient-yellow b { color: #815d08; background: #ffd65b; }
.recipe-mixer { position: relative; display: grid; justify-items: center; align-content: center; gap: 16px; border: 7px solid rgba(255,255,255,.82); border-radius: 34px; background: rgba(126,93,198,.14); box-shadow: inset 8px 9px 13px rgba(255,255,255,.36); }.recipe-target { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 18px; background: rgba(255,255,255,.88); }.recipe-target > i { color: #8d7aaf; font: normal 900 20px system-ui; }.recipe-target > strong { font-size: 28px; color: #ff758e; }.recipe-cauldron { position: relative; width: 126px; height: 82px; display: grid; place-items: center; border-radius: 18px 18px 52px 52px; color: #fff; background: linear-gradient(145deg,#815fd6,#5940ad); box-shadow: inset 12px 12px 13px rgba(255,255,255,.2), 0 11px 0 #3d2a83; }.recipe-cauldron::before { content: ''; position: absolute; inset: -9px -10px auto; height: 21px; border-radius: 50%; background: #473287; border: 6px solid #fff; }.recipe-cauldron > i { position: absolute; top: -28px; width: 15px; height: 15px; border-radius: 50%; background: #70e6ca; opacity: 0; }.recipe-cauldron > i:nth-child(1) { left: 28px; }.recipe-cauldron > i:nth-child(2) { left: 56px; animation-delay: .2s !important; }.recipe-cauldron > i:nth-child(3) { right: 27px; animation-delay: .4s !important; }.is-mixing .recipe-cauldron > i { animation: recipe-bubble .7s ease-in infinite; opacity: 1; }.recipe-dial { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }.recipe-dial button { width: 65px; min-height: 58px; border: 4px solid #fff; border-radius: 20px; color: #554b82; background: linear-gradient(145deg,#fff,#f5dcff); box-shadow: 0 6px 0 #ae8bcb; cursor: pointer; }.recipe-dial button strong, .recipe-dial button small { display: block; }.recipe-dial button strong { font-size: 23px; }.recipe-dial button small { color: #867da0; font-size: 9px; }.recipe-dial button.is-correct { color: #fff; background: #53d2b1; box-shadow: 0 4px 0 #259a80; }.recipe-dial button.is-wrong { animation: clay-wiggle .35s ease; }
.recipe-counter { position: absolute; inset: auto 0 0; height: 67px; border-radius: 0 0 25px 25px; background: #e2a55f; box-shadow: inset 0 9px 13px rgba(123,72,41,.16); }.clay-jar { position: absolute !important; bottom: 36px; width: 48px; height: 66px; border: 5px solid #fff !important; border-radius: 13px 13px 20px 20px !important; background: #ff92a7 !important; box-shadow: inset 6px 7px 8px rgba(255,255,255,.33); }.jar-one { right: 160px; }.jar-two { right: 102px; height: 82px; background: #67d8d1 !important; }.jar-three { right: 45px; height: 58px; background: #ffd35e !important; }

/* Spatial hide grid */
.rich-scene-hidegrid { background: linear-gradient(145deg,#bceff1,#d7e5ff 45%,#e8ceff); }
.hide-grid-field { display: grid; place-items: center; padding: 22px 34px 104px; }.hide-grid-board { --grid-columns: 3; width: min(610px,80%); display: grid; grid-template-columns: repeat(var(--grid-columns),1fr); gap: 10px; padding: 24px; border: 10px solid #7062bd; border-radius: 42px; background: #453d85; box-shadow: inset 10px 12px 16px rgba(31,27,77,.26), 0 14px 0 #3b326f, 0 22px 26px rgba(55,51,105,.2); }.hide-grid-cell { position: relative; min-height: 62px; overflow: hidden; border: 5px solid #a8ddec; border-radius: 19px; background: radial-gradient(circle at 48% 60%,#5068a7,#252657 75%); box-shadow: inset 6px 7px 10px rgba(14,13,55,.4), 0 4px 0 #29245b; cursor: pointer; }.hide-grid-cell::after { content: ''; position: absolute; left: 8px; right: 8px; top: 5px; height: 30%; border-radius: 50%; background: rgba(255,255,255,.16); }.hide-grid-cell > span { position: absolute !important; inset: 0; display: grid !important; place-items: center; opacity: 0; transform: translateY(32px); transition: transform .35s,opacity .25s; }.hide-grid-cell.has-starbud > span { opacity: 1; transform: none; }.hide-grid-cell span b { color: #ffe166; font-size: 24px; filter: drop-shadow(0 0 6px #ffe166); }.hide-grid-cell span i { position: absolute; bottom: 4px; color: #fff; font: normal 900 9px system-ui; }.is-grid-hidden .hide-grid-cell.has-starbud > span { opacity: 0; transform: translateY(32px); }.is-grid-hidden .hide-grid-cell.is-found > span { opacity: 1; transform: none; }.hide-grid-cell.is-found { border-color: #fff18d; box-shadow: inset 6px 7px 10px rgba(14,13,55,.35), 0 0 20px #ffe265; }.hide-grid-cell.is-empty { animation: clay-wiggle .35s ease; filter: grayscale(.6); }.hide-grid-curtain { position: absolute; z-index: 3; width: min(650px,83%); height: 72%; display: grid; place-items: center; border-radius: 36px; color: #fff; background: repeating-linear-gradient(90deg,#7c63cc 0 32px,#9076e2 33px 65px); box-shadow: inset 8px 10px 14px rgba(255,255,255,.18),0 14px 24px rgba(61,52,114,.22); transform: translateY(-115%); opacity: 0; }.hide-grid-curtain.is-closing { animation: curtain-close .52s ease both; }.hide-grid-curtain.is-open { display: none; }.hide-grid-curtain b { padding: 10px 20px; border-radius: 999px; background: rgba(54,42,112,.6); }.hide-grid-telescope { position: absolute; z-index: 4; right: 4%; bottom: 65px; width: 105px; height: 45px; border: 7px solid #fff; border-radius: 999px 20px 20px 999px; background: #58c8da; box-shadow: inset 8px 8px 9px rgba(255,255,255,.3); transform: rotate(-15deg); }.hide-grid-telescope::after { content: ''; position: absolute; right: -13px; top: -11px; width: 30px; height: 54px; border-radius: 12px; background: #ffcb58; }

/* Light pen route */
.rich-scene-traceroute { background: linear-gradient(145deg,#c9f8e9,#cbe8ff 47%,#edd2ff); }
.trace-route-field { padding: 18px 32px 102px; }.trace-route-board { position: relative; width: min(760px,90%); height: 310px; margin: auto; overflow: hidden; touch-action: none; border: 9px solid #8a72d1; border-radius: 38px; background: radial-gradient(circle at 20% 22%,rgba(255,255,255,.75) 0 3px,transparent 4px),radial-gradient(circle at 70% 35%,rgba(255,255,255,.7) 0 2px,transparent 3px),linear-gradient(145deg,#334789,#20285f); background-size: 68px 61px,91px 77px,auto; box-shadow: inset 11px 13px 16px rgba(11,20,67,.35),0 15px 0 #5d4da6,0 23px 25px rgba(60,53,111,.2); }.trace-route-board svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.trace-route-shadow,.trace-route-line,.trace-route-progress-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.trace-route-shadow { stroke: rgba(12,20,59,.55); stroke-width: 17; }.trace-route-line { stroke: #5e71ac; stroke-width: 10; stroke-dasharray: 4 8; }.trace-route-progress-line { stroke: #66f2ce; stroke-width: 10; filter: drop-shadow(0 0 7px #47e7c0); transition: .2s; }.trace-checkpoint { position: absolute; z-index: 4; width: 48px; height: 48px; border: 6px solid #fff; border-radius: 50%; color: #fff; background: #8873d8; box-shadow: inset 6px 7px 8px rgba(255,255,255,.27),0 6px 0 #51429a,0 0 0 8px rgba(124,102,214,.25); transform: translate(-50%,-50%); cursor: pointer; }.trace-checkpoint b { font-size: 12px; }.trace-checkpoint.is-start { width: 59px; height: 59px; background: #4bd2aa; box-shadow: inset 6px 7px 8px rgba(255,255,255,.27),0 6px 0 #218b72,0 0 0 9px rgba(75,210,170,.25); }.trace-checkpoint.is-finish { background: #ffca56; color: #715414; }.trace-checkpoint.is-reached { background: #4bd2aa; box-shadow: inset 6px 7px 8px rgba(255,255,255,.27),0 3px 0 #218b72,0 0 18px #63edc8; transform: translate(-50%,-50%) scale(.88); }.trace-checkpoint.is-wrong { animation: trace-wrong .35s ease; }.trace-light-pen { position: absolute !important; z-index: 6; width: 35px; height: 35px; display: grid !important; place-items: center; border-radius: 50% !important; color: #fff; background: #ff7fa2 !important; box-shadow: 0 0 0 6px rgba(255,127,162,.25),0 0 18px #ff88ab; transform: translate(-50%,-50%); pointer-events: none; transition: left .08s,top .08s; }.is-route-complete .trace-route-board { animation: route-complete .65s ease; }.trace-control-desk { position: absolute; inset: auto 0 0; height: 73px; border-radius: 0 0 25px 25px; background: #5bc9c0; box-shadow: inset 0 10px 14px rgba(33,112,112,.17); }.trace-control-desk i,.trace-control-desk b,.trace-control-desk span { position: absolute !important; bottom: 22px; width: 36px; height: 20px; border-radius: 999px !important; background: #ffcc58 !important; box-shadow: 0 4px 0 #b98524; }.trace-control-desk i { right: 145px; }.trace-control-desk b { right: 93px; background: #ff869e !important; }.trace-control-desk span { right: 42px; background: #7b66d0 !important; }

@keyframes rich-cloud-drift { to { transform: translateX(28px) scale(1.04); } }
@keyframes scene-planet-float { 50% { translate: 0 -9px; rotate: 5deg; } }
@keyframes clay-wiggle { 25% { transform: translateX(-7px) rotate(-2deg); } 55% { transform: translateX(7px) rotate(2deg); } 80% { transform: translateX(-3px); } }
@keyframes capsule-drop { from { transform: translateY(-18px) scale(.8); opacity: 0; } }
@keyframes rocket-launch { 40% { transform: translateY(10px) rotate(2deg); } to { transform: translateY(-310px) rotate(-5deg); opacity: 0; } }
@keyframes recipe-bubble { from { transform: translateY(0) scale(.7); } to { transform: translateY(-45px) scale(1.2); opacity: 0; } }
@keyframes curtain-close { from { transform: translateY(-115%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes trace-wrong { 50% { transform: translate(-50%,-50%) scale(.8) rotate(12deg); background: #ff728d; } }
@keyframes route-complete { 50% { filter: brightness(1.18) saturate(1.25); transform: scale(1.015); } }

.mission-card[data-mechanic='numbertrail'] .mission-preview-props { transform: rotate(-3deg); }
.mission-card[data-mechanic='relaunch'] .mission-preview-props span { border-radius: 18px 18px 10px 10px; }
.mission-card[data-mechanic='recipelab'] .mission-preview-props span:nth-child(1) { background: #ffadc0; }.mission-card[data-mechanic='recipelab'] .mission-preview-props span:nth-child(2) { background: #78ddd4; }
.mission-card[data-mechanic='hidegrid'] .mission-preview-props { grid-template-columns: repeat(3,38px); gap: 4px; }
.mission-card[data-mechanic='traceroute'] .mission-preview-props { transform: rotate(-6deg); }

@media (max-width:850px) {
  .challenge-signal.rich-scene-game { min-height: 620px; }
  .rich-scene-playfield { min-height: 490px; }
  .number-star-board { width: 94%; padding: 20px; }
  .reverse-launch-field,.recipe-lab-field { grid-template-columns: 1fr; padding-bottom: 105px; }
  .capsule-memory-rack { grid-column: 1; }.clay-rocket { right: 3%; bottom: 28px; transform: scale(.72) rotate(5deg); }
  .recipe-lab-field { align-content: start; }.recipe-clue-cards { grid-template-columns: repeat(3,1fr); }.recipe-clue-cards article { grid-template-columns: 1fr; text-align: center; }
  .trace-route-board { width: 96%; }
}
@media (max-width:560px) {
  .challenge-signal.rich-scene-game { min-height: 660px; border-width: 5px; border-radius: 28px; }
  .rich-scene-hud { grid-template-columns: auto 1fr; }.rich-scene-progress { grid-column: 1/-1; width: 100%; }
  .rich-scene-playfield { min-height: 500px; margin-inline: 8px; }
  .rich-scene-companion img { width: 82px; height: 105px; }.rich-scene-companion p { width: 170px; margin-bottom: 36px; }
  .number-trail-field { padding-inline: 10px; }.number-star-board { grid-template-columns: repeat(3,1fr); gap: 9px; padding: 15px; }.number-star-tile { min-height: 58px; }.clay-pencil { display: none; }
  .reverse-launch-field { padding-inline: 10px; }.memory-capsule { width: 49px; height: 58px; }.reverse-answer-rail { gap: 4px; padding: 10px; }.reverse-answer-rail span { width: 37px; height: 43px; }.reverse-keypad { grid-template-columns: repeat(3,52px); }
  .recipe-lab-field { padding-inline: 10px; }.recipe-clue-cards { grid-template-columns: 1fr; }.recipe-clue-cards article { grid-template-columns: 1fr auto; }.recipe-mixer { padding: 12px; }.recipe-cauldron { display: none; }
  .hide-grid-field { padding-inline: 8px; }.hide-grid-board { width: 98%; gap: 6px; padding: 12px; border-width: 7px; }.hide-grid-cell { min-height: 49px; border-width: 3px; }.hide-grid-telescope { display: none; }
  .trace-route-field { padding-inline: 6px; }.trace-route-board { width: 100%; height: 330px; border-width: 6px; }.trace-checkpoint { width: 43px; height: 43px; border-width: 4px; }.trace-checkpoint.is-start { width: 52px; height: 52px; }
}
body.reduce-motion .rich-scene-game *,
body.reduce-motion .rich-scene-game *::before,
body.reduce-motion .rich-scene-game *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }

/* The trace start remains visible even when the light pen is parked on it. */
.trace-checkpoint.is-start {
  width: 76px; height: 76px; border-color: #f5fffb; background: #35d29f;
  box-shadow: inset 8px 9px 10px rgba(255,255,255,.32), 0 7px 0 #187e66,
    0 0 0 12px rgba(75,239,190,.28), 0 0 28px rgba(72,242,192,.55);
}
.trace-checkpoint.is-start b { position: absolute; bottom: 3px; font-size: 9px; }
.trace-start-guide {
  position: absolute !important; z-index: 7; min-width: 132px !important; padding: 7px 11px !important;
  border: 3px solid #fff !important; border-radius: 14px !important; pointer-events: none;
  color: #176f5b; background: #dffff4 !important;
  box-shadow: 0 6px 0 #58bfa6, 0 10px 18px rgba(18,80,75,.2);
  transform: translate(-50%,-100%); text-align: center !important;
  animation: trace-guide-pulse 1.4s ease-in-out infinite;
}
.trace-start-guide b, .trace-start-guide small { display: block; }
.trace-start-guide b { font-size: 13px; }
.trace-start-guide small { color: #3f766d !important; font-size: 9px !important; }
.trace-light-pen { width: 27px; height: 27px; box-shadow: 0 0 0 5px rgba(255,127,162,.22), 0 0 16px #ff88ab; }
.is-route-complete .trace-start-guide { opacity: 0; }
@keyframes trace-guide-pulse { 50% { transform: translate(-50%,-104%) scale(1.03); filter: brightness(1.06); } }

@media (max-width:560px) {
  .trace-checkpoint.is-start { width: 66px; height: 66px; }
  .trace-start-guide { min-width: 116px !important; }
}