:root {
  color-scheme: light;
  --bg: #fff8ee;
  --panel: #ffffff;
  --ink: #2d2438;
  --muted: #746985;
  --line: #eadfce;
  --brand: #6c5ce7;
  --brand-strong: #493bc2;
  --sun: #ffcc66;
  --mint: #72d6a2;
  --rose: #ff8fb3;
  --sky: #80bfff;
  --shadow: 0 12px 32px rgba(61, 45, 86, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 204, 102, 0.24), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(128, 191, 255, 0.2), transparent 28%),
    var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-rounded, "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body[data-adventure-theme="todoahu"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(242, 200, 121, 0.24), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(140, 132, 198, 0.22), transparent 30%),
    linear-gradient(180deg, #f8f1dc 0%, #dff2ef 48%, #fff8ee 100%);
}

button,
select,
input {
  font: inherit;
}

.app-shell {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

#sessionView {
  position: relative;
}

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

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

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

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 0.95;
}

h2 {
  margin-bottom: 12px;
  font-size: 1rem;
}

.eyebrow {
  margin-bottom: 4px;
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.setup-panel,
.approval-note,
.adult-panel,
.parent-review,
.progress-card,
.avatar-card,
.ending-card,
.feedback-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
}

.setup-panel,
.approval-note {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px;
}

.setup-hero,
.approval-note {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.setup-hero h2,
.approval-note h2 {
  margin-bottom: 6px;
  font-size: 1.28rem;
}

.setup-hero p,
.approval-note p {
  margin-bottom: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.42;
}

.approval-panel[hidden],
.setup-panel[hidden] {
  display: none;
}

.approval-panel {
  display: grid;
  gap: 14px;
}

.story-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-radius: 20px;
  background: #c9872c;
  padding: 12px;
  box-shadow: var(--shadow);
}

.story-toolbar label {
  display: grid;
  gap: 5px;
  color: #fff8e8;
  font-size: 0.76rem;
  font-weight: 950;
}

.collapsible-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  overflow: visible;
}

.collapsible-panel summary {
  cursor: pointer;
  padding: 12px 14px;
  color: var(--brand-strong);
  font-weight: 950;
}

.collapsible-panel .adult-panel {
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.adult-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
}

.segmented-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.segmented-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.segment-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--brand-strong);
  font-weight: 950;
}

.segment-button.is-selected {
  border-color: var(--brand);
  background: #f0ecff;
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.12);
}

.adult-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

.toggle-line {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row;
  align-items: center;
}

.toggle-help-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.help-bubble-trigger {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.help-bubble {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  width: min(290px, calc(100vw - 48px));
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 14px 34px rgba(45, 36, 56, 0.18);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  padding: 10px 12px;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.toggle-help-row:hover .help-bubble,
.toggle-help-row:focus-within .help-bubble {
  opacity: 1;
  transform: translateY(0);
}

.credit-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  background: #2d2438;
  color: #fff;
  padding: 10px 12px;
  font-weight: 900;
}

.setup-hero .credit-pill {
  align-self: start;
}

.toggle-line.is-disabled {
  opacity: 0.55;
}

.parent-review {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
}

.review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.review-status {
  border-radius: 999px;
  background: #e8fbf0;
  color: #176d3a;
  padding: 6px 9px;
  font-size: 0.72rem;
  font-weight: 900;
}

.review-summary {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

.review-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
}

.review-details {
  box-shadow: none;
}

.review-meta div,
.review-settings,
.review-contexts {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
}

.review-meta dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.review-meta dd {
  margin: 2px 0 0;
  font-weight: 900;
}

.review-flags,
.review-actions,
.permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-list {
  display: grid;
}

.review-settings h3,
.review-contexts h3 {
  margin: 0 0 6px;
  font-size: 0.86rem;
}

.review-settings p,
.review-contexts p,
.review-contexts ul {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.review-contexts ul {
  padding-left: 18px;
}

.review-contexts ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
}

.review-contexts li p {
  margin-top: 6px;
}

.full-dice {
  display: grid;
  gap: 4px;
  border-left: 3px solid var(--brand);
  padding-left: 10px;
}

.sensitive-islands {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border-top: 1px solid rgba(108, 92, 231, 0.18);
  padding-top: 10px;
}

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

.sensitive-chip {
  display: grid;
  gap: 2px;
  min-height: 52px;
  border: 1px solid #d8d2ea;
  border-radius: 12px;
  background: #f7f4ff;
  padding: 8px 10px;
  color: #4b4368;
}

.sensitive-chip.is-open {
  border-color: rgba(114, 214, 162, 0.7);
  background: #effdf5;
}

.sensitive-chip strong {
  font-size: 0.86rem;
}

.sensitive-chip small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.route-pill {
  display: inline-grid;
  place-items: center;
  min-width: 2.25em;
  margin-left: 4px;
  border-radius: 999px;
  background: #eef7f1;
  color: #286c5e;
  font-size: 0.72em;
  font-weight: 950;
}

.quiet-line {
  color: var(--muted);
}

.adventure-grid {
  display: grid;
  gap: 14px;
}

.adventure-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  padding: 12px;
  color: inherit;
  text-align: left;
  box-shadow: var(--shadow);
}

.play-story-button {
  min-width: 82px;
  min-height: 42px;
  border: 3px solid #111;
  border-radius: 0;
  background: #18c7e8;
  color: #111;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 1.24rem;
  font-weight: 1000;
  letter-spacing: 0;
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, 0.18),
    4px 4px 0 #111;
}

.adventure-card.is-selected {
  border-color: var(--brand);
  box-shadow:
    0 0 0 4px rgba(108, 92, 231, 0.12),
    var(--shadow);
}

.cover-art,
.scene-art,
.avatar-preview {
  display: grid;
  place-items: center;
  border-radius: 16px;
  min-height: 88px;
  background: linear-gradient(135deg, var(--sky), var(--mint));
  color: #fff;
  font-size: 2.2rem;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cover-art {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  aspect-ratio: 1;
}

.cover-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adventure-card h2 {
  margin: 2px 0 6px;
  font-size: 1.1rem;
  line-height: 1.1;
}

.card-meta {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag,
.reward-badge {
  border-radius: 999px;
  background: #f2ebff;
  color: var(--brand-strong);
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.status {
  color: var(--muted);
  font-size: 0.82rem;
}

.session-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid rgba(234, 223, 206, 0.75);
  background: rgba(255, 248, 238, 0.94);
  padding: 8px 0 12px;
  backdrop-filter: blur(14px);
}

.session-topbar h1 {
  font-size: 1.35rem;
  line-height: 1.1;
}

.timer-pill {
  min-width: 72px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  padding: 8px 10px;
  text-align: center;
  font-weight: 900;
}

.timer-pill.is-warning {
  background: #9b5b00;
}

.timer-pill.is-ended {
  background: #9b2348;
}

.narration-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: -8px 0 14px;
}

.icon-button,
.ghost-button,
.primary-button,
.secondary-button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
}

.icon-button {
  width: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-strong);
  font-size: 1.5rem;
  box-shadow: var(--shadow);
}

.primary-button {
  background: var(--brand);
  color: #fff;
}

.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.secondary-button {
  background: var(--sun);
  color: #3c2700;
}

.luck-button.is-active {
  outline: 3px solid rgba(255, 204, 102, 0.55);
  background: #fff0a8;
  box-shadow: 0 0 24px rgba(255, 204, 102, 0.56);
}

.ghost-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-strong);
}

.scene-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.oiem-screen-mist {
  display: none;
}

.oiem-map-stage {
  display: none;
}

body[data-adventure-theme="todoahu"] #sessionView .oiem-screen-mist {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: block;
  pointer-events: none;
}

body[data-adventure-theme="todoahu"] .app-shell {
  width: 100%;
  max-width: none;
  padding: 0;
}

body[data-adventure-theme="todoahu"] #sessionView {
  min-height: 100svh;
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
}

body[data-adventure-theme="todoahu"] #sessionView .oiem-map-stage {
  position: fixed;
  inset: 0;
  left: 50%;
  z-index: 0;
  display: block;
  width: min(100vw, 560px);
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 20%, rgba(255, 255, 255, 0.34), transparent 28%),
    linear-gradient(180deg, #a8dff4, #f5edcf 62%, #94d7e3);
  transform: translateX(-50%);
  pointer-events: none;
}

.oiem-map-image {
  position: absolute;
  top: 0;
  left: 50%;
  height: max(190svh, 1380px);
  width: auto;
  max-width: none;
  transform: translate3d(-50%, var(--oiem-map-y, -86vh), 0) scale(1.02);
  transform-origin: 50% 0%;
  transition:
    transform 900ms cubic-bezier(0.2, 0.9, 0.2, 1),
    filter 700ms ease;
  will-change: transform;
}

body[data-oiem-mist="heavy"] .oiem-map-image {
  filter: saturate(0.92) brightness(0.96);
}

body[data-oiem-mist="lifting"] .oiem-map-image {
  filter: saturate(1.08) brightness(1.04);
}

.oiem-locked-island {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 51% 46% 53% 45%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.46), transparent 26%),
    linear-gradient(145deg, rgba(127, 120, 155, 0.7), rgba(78, 76, 102, 0.7));
  box-shadow:
    0 16px 30px rgba(39, 51, 68, 0.22),
    inset 0 -16px 26px rgba(47, 64, 76, 0.18);
  color: rgba(245, 239, 255, 0.86);
  font-size: 2.5rem;
  opacity: 0.78;
  filter: grayscale(1) blur(0.2px);
  transform: translateY(0);
  transition: opacity 600ms ease, transform 800ms ease;
}

.oiem-locked-island::after {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(245, 232, 255, 0.9);
  font-size: 2.1rem;
  text-shadow: 0 0 18px rgba(166, 145, 224, 0.72);
}

.oiem-locked-island--a {
  left: 4%;
  bottom: -54px;
  transform: rotate(-8deg);
}

.oiem-locked-island--b {
  right: 7%;
  bottom: -88px;
  width: 94px;
  transform: rotate(9deg);
}

.oiem-locked-island--c {
  left: 38%;
  bottom: -126px;
  width: 82px;
  transform: rotate(3deg);
}

body:not([data-oiem-map-step="0"]):not([data-oiem-map-step="1"]) .oiem-locked-island {
  opacity: 0;
  transform: translateY(70px) scale(0.9);
}

.oiem-orb-glint {
  position: absolute;
  left: 50%;
  bottom: 23%;
  z-index: 3;
  width: 104px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.46), transparent 28%),
    radial-gradient(circle, rgba(114, 246, 218, 0.44), transparent 60%);
  opacity: 0;
  filter: blur(2px);
  transform: translateX(-50%);
  transition: opacity 500ms ease, bottom 900ms cubic-bezier(0.2, 0.9, 0.2, 1);
  animation: oiemMapGlow 3.4s ease-in-out infinite;
}

body[data-oiem-map-step="0"] .oiem-orb-glint {
  bottom: 28%;
  opacity: 0.54;
}

body[data-oiem-map-step="5"] .oiem-orb-glint {
  bottom: 52%;
  opacity: 0.36;
}

body[data-adventure-theme="todoahu"] .session-topbar {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  z-index: 24;
  width: min(calc(100vw - 24px), 536px);
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 20px;
  background: rgba(39, 45, 74, 0.38);
  padding: 8px 10px;
  color: #fffdf1;
  box-shadow: 0 14px 34px rgba(33, 42, 68, 0.18);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

body[data-adventure-theme="todoahu"] .session-topbar .eyebrow,
body[data-adventure-theme="todoahu"] .session-topbar h1 {
  color: #fffdf1;
  text-shadow: 0 2px 12px rgba(33, 42, 68, 0.45);
}

body[data-adventure-theme="todoahu"] .timer-pill {
  background: rgba(255, 252, 242, 0.9);
  color: #273344;
}

body[data-adventure-theme="todoahu"] .scene-stage {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 18;
  width: min(calc(100vw - 24px), 536px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
  pointer-events: none;
}

body[data-adventure-theme="todoahu"] .scene-stage.is-transitioning {
  animation: oiemSheetArrive 0.66s ease both;
}

body[data-adventure-theme="todoahu"] .scene-art {
  display: none;
}

body[data-adventure-theme="todoahu"] .scene-copy {
  position: relative;
  max-height: min(42svh, 360px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(255, 252, 242, 0.5), rgba(255, 252, 242, 0.94) 12%, rgba(241, 248, 243, 0.9) 88%, rgba(241, 248, 243, 0.48)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.52), transparent 66%);
  box-shadow:
    0 18px 52px rgba(33, 42, 68, 0.22),
    inset 0 0 42px rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(18px);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 360ms ease,
    transform 360ms ease,
    visibility 360ms ease;
  pointer-events: auto;
}

body[data-adventure-theme="todoahu"] .scene-copy::before {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  height: 1px;
  content: "";
  box-shadow: 0 0 26px 16px rgba(255, 252, 242, 0.42);
}

body[data-adventure-theme="todoahu"] .scene-copy.is-dismissed {
  visibility: hidden;
  opacity: 0;
  transform: translateY(22px) scale(0.96);
  pointer-events: none;
}

body[data-adventure-theme="todoahu"] .scene-copy p {
  font-size: clamp(1.02rem, 4.7vw, 1.34rem);
}

.scene-copy-skip {
  display: none;
}

body[data-adventure-theme="todoahu"] .scene-copy-skip {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: block;
  width: fit-content;
  min-height: 36px;
  margin: 12px 0 0 auto;
  border: 1px solid rgba(140, 132, 198, 0.24);
  border-radius: 999px;
  background: rgba(255, 252, 242, 0.78);
  padding: 8px 12px;
  color: #57516f;
  font-size: 0.82rem;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(33, 42, 68, 0.12);
  backdrop-filter: blur(12px);
}

body[data-adventure-theme="todoahu"] .scene-interlude {
  border-color: rgba(140, 132, 198, 0.24);
  background:
    radial-gradient(circle at 8% 12%, rgba(242, 200, 121, 0.24), transparent 36%),
    linear-gradient(135deg, rgba(242, 247, 255, 0.86), rgba(255, 252, 242, 0.78));
  box-shadow:
    inset 4px 0 0 rgba(140, 132, 198, 0.38),
    0 10px 26px rgba(79, 78, 120, 0.08);
}

body[data-adventure-theme="todoahu"] .narration-controls {
  position: fixed;
  top: calc(max(10px, env(safe-area-inset-top)) + 70px);
  left: 50%;
  z-index: 20;
  width: min(calc(100vw - 24px), 536px);
  margin: 0;
  transform: translateX(-50%);
}

body[data-adventure-theme="todoahu"] .narration-controls .ghost-button {
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 252, 242, 0.74);
  box-shadow: 0 10px 24px rgba(33, 42, 68, 0.14);
  backdrop-filter: blur(12px);
}

body[data-adventure-theme="todoahu"] .feedback-panel {
  position: fixed;
  left: 50%;
  bottom: calc(132px + env(safe-area-inset-bottom));
  z-index: 21;
  width: min(calc(100vw - 38px), 500px);
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 252, 242, 0.88);
  box-shadow: 0 14px 36px rgba(33, 42, 68, 0.2);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

body[data-adventure-theme="todoahu"] .progress-layout,
body[data-adventure-theme="todoahu"] .hub-panel {
  display: none;
}

body[data-adventure-theme="todoahu"] .session-footer {
  z-index: 25;
}

.oiem-mist-corner {
  position: absolute;
  width: min(72vw, 430px);
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: 0.36;
  filter: blur(20px);
  transform: translateZ(0);
  animation: oiemMistDrift 9s ease-in-out infinite;
}

.oiem-mist-corner--top {
  top: -170px;
  left: -150px;
  background:
    radial-gradient(circle at 42% 42%, rgba(178, 169, 218, 0.7), transparent 58%),
    radial-gradient(circle at 70% 52%, rgba(255, 255, 255, 0.54), transparent 48%);
}

.oiem-mist-corner--bottom {
  right: -180px;
  bottom: -180px;
  background:
    radial-gradient(circle at 50% 42%, rgba(121, 199, 181, 0.5), transparent 55%),
    radial-gradient(circle at 36% 62%, rgba(140, 132, 198, 0.42), transparent 52%);
  animation-delay: -3.2s;
}

body[data-oiem-mist="clear"] .oiem-mist-corner {
  opacity: 0.18;
}

body[data-oiem-mist="medium"] .oiem-mist-corner {
  opacity: 0.48;
}

body[data-oiem-mist="heavy"] .oiem-mist-corner {
  opacity: 0.66;
  filter: blur(24px);
  animation-duration: 6.8s;
}

body[data-oiem-mist="lifting"] .oiem-mist-corner {
  opacity: 0.28;
  filter: blur(18px);
}

.scene-stage.is-transitioning {
  animation: chapterSlide 0.66s ease both;
}

.scene-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 220px;
  border-radius: 0;
  font-size: 4.5rem;
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.58), transparent 18%),
    linear-gradient(135deg, var(--scene-a, var(--sky)), var(--scene-b, var(--mint)));
}

.scene-stage[data-atmosphere] .scene-art::before {
  position: absolute;
  inset: -24% -34%;
  z-index: -1;
  content: "";
  background:
    radial-gradient(ellipse at 20% 40%, rgba(255, 255, 255, 0.5), transparent 34%),
    radial-gradient(ellipse at 72% 58%, rgba(140, 132, 198, 0.36), transparent 38%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  opacity: 0.36;
  transform: translateX(-12%);
  animation: oiemSceneMist 8s ease-in-out infinite;
  pointer-events: none;
}

.scene-stage[data-atmosphere="clear"] .scene-art::before {
  opacity: 0.16;
}

.scene-stage[data-atmosphere="medium"] .scene-art::before {
  opacity: 0.48;
}

.scene-stage[data-atmosphere="heavy"] .scene-art::before {
  opacity: 0.72;
  animation-duration: 6s;
}

.scene-stage[data-atmosphere="lifting"] .scene-art::before {
  opacity: 0.28;
  animation-duration: 10s;
}

.scene-sky,
.scene-ground,
.scene-bitmap,
.scene-icon,
.scene-spark {
  position: absolute;
  display: block;
}

.scene-bitmap {
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-art:has(.scene-bitmap) {
  background: #f7efe2;
}

.scene-art:has(.scene-bitmap)::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(45, 36, 56, 0.2)),
    radial-gradient(circle at 50% 45%, transparent 40%, rgba(255, 246, 216, 0.18));
  pointer-events: none;
}

.scene-art:has(.scene-bitmap) .scene-sky,
.scene-art:has(.scene-bitmap) .scene-ground {
  display: none;
}

.scene-sky {
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.5), transparent 12%),
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.38), transparent 10%);
}

.scene-ground {
  right: -12%;
  bottom: -28%;
  left: -12%;
  z-index: -1;
  height: 56%;
  border-radius: 50% 50% 0 0;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 18px 40px rgba(255, 255, 255, 0.24);
}

.scene-icon {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 20px rgba(45, 36, 56, 0.24));
}

.scene-spark {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9);
  animation: sparkleFloat 2.6s ease-in-out infinite;
}

.scene-spark-a {
  top: 22%;
  left: 22%;
}

.scene-spark-b {
  top: 30%;
  right: 24%;
  animation-delay: 0.4s;
}

.scene-spark-c {
  right: 36%;
  bottom: 22%;
  animation-delay: 0.8s;
}

.scene-art--forest_gate_soft .scene-ground,
.scene-art--tiny_bell_town .scene-ground {
  background: rgba(114, 214, 162, 0.34);
}

.scene-art--crystal_bridge_soft {
  --scene-a: #83c7ff;
  --scene-b: #d9c2ff;
}

.scene-art--crystal_bridge_soft .scene-ground {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(137, 183, 255, 0.34));
  clip-path: polygon(0 55%, 18% 34%, 36% 56%, 54% 28%, 74% 52%, 100% 38%, 100% 100%, 0 100%);
}

.scene-art--cave_soft,
.scene-art--echo_room,
.scene-art--round_bunny_guardian {
  --scene-a: #4a3a55;
  --scene-b: #b8a07a;
}

.scene-art--cave_soft .scene-sky,
.scene-art--echo_room .scene-sky,
.scene-art--round_bunny_guardian .scene-sky {
  background:
    radial-gradient(circle at 70% 35%, rgba(255, 214, 107, 0.35), transparent 13%),
    radial-gradient(circle at 30% 24%, rgba(128, 191, 255, 0.22), transparent 12%);
}

.scene-art--sleepy_star_portal,
.scene-art--star_party_soft {
  --scene-a: #9a83ff;
  --scene-b: #ff9fc8;
}

.scene-art--cloud_harbor_soft,
.scene-art--storm_spoon_deck,
.scene-art--tea_whale_gate {
  --scene-a: #80bfff;
  --scene-b: #fff2a8;
}

.scene-art--cloud_harbor_soft .scene-ground,
.scene-art--tea_whale_gate .scene-ground {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.84), transparent 19%),
    radial-gradient(circle at 52% 24%, rgba(255, 255, 255, 0.74), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(128, 191, 255, 0.34));
}

.scene-art--storm_spoon_deck {
  --scene-a: #6c9fd8;
  --scene-b: #d9c2ff;
}

.scene-art--storm_spoon_deck .scene-ground {
  background:
    linear-gradient(90deg, rgba(92, 74, 47, 0.28), rgba(255, 255, 255, 0.28)),
    repeating-linear-gradient(90deg, rgba(92, 74, 47, 0.22) 0 18px, rgba(255, 255, 255, 0.16) 18px 22px);
  clip-path: polygon(0 38%, 100% 24%, 100% 100%, 0 100%);
}

.scene-art--giraffe_clock_garden,
.scene-art--seed_path_soft,
.scene-art--clock_snail_gate {
  --scene-a: #9ad97d;
  --scene-b: #ffd66b;
}

.scene-art--giraffe_clock_garden .scene-ground,
.scene-art--seed_path_soft .scene-ground,
.scene-art--clock_snail_gate .scene-ground {
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 214, 107, 0.72), transparent 13%),
    radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.7), transparent 10%),
    linear-gradient(135deg, rgba(114, 214, 162, 0.52), rgba(255, 246, 216, 0.3));
}

.scene-art--clock_snail_gate .scene-icon,
.scene-art--seed_path_soft .scene-icon {
  text-shadow: 0 0 20px rgba(255, 214, 107, 0.94);
}

.scene-art--dragon_library_door,
.scene-art--whisper_shelves,
.scene-art--sneeze_book_boss {
  --scene-a: #b8a07a;
  --scene-b: #d8a7c8;
}

.scene-art--dragon_library_door .scene-ground,
.scene-art--whisper_shelves .scene-ground,
.scene-art--sneeze_book_boss .scene-ground {
  background:
    repeating-linear-gradient(90deg, rgba(92, 74, 47, 0.22) 0 12px, rgba(255, 246, 216, 0.24) 12px 18px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(92, 74, 47, 0.16));
  border-radius: 24px 24px 0 0;
}

.scene-art--moon_exit {
  --scene-a: #4a3a55;
  --scene-b: #ffd66b;
}

.scene-art--todoahu_oiem,
.scene-art--todoahu_second_chance {
  --scene-a: #6fb7a8;
  --scene-b: #f2c879;
}

.scene-art--todoahu_oiem .scene-icon,
.scene-art--todoahu_second_chance .scene-icon {
  color: #fffdf1;
  text-shadow:
    0 0 16px rgba(120, 242, 220, 0.9),
    0 0 34px rgba(242, 200, 121, 0.82);
  animation: oiemOrbPulse 3.2s ease-in-out infinite;
}

.scene-art--todoahu_riso {
  --scene-a: #f7d86b;
  --scene-b: #76c7b7;
}

.scene-art--todoahu_calma {
  --scene-a: #7eb6d9;
  --scene-b: #b7dc8f;
}

.scene-art--todoahu_frustracao {
  --scene-a: #f49b6e;
  --scene-b: #7dbcc7;
}

.scene-art--todoahu_ihsii {
  --scene-a: #8c84c6;
  --scene-b: #d9d4ef;
}

.scene-art--todoahu_mercado {
  --scene-a: #f0bd64;
  --scene-b: #8fc977;
}

.scene-art--todoahu_mercado .scene-ground {
  background:
    radial-gradient(circle at 25% 28%, rgba(255, 244, 184, 0.72), transparent 14%),
    radial-gradient(circle at 68% 30%, rgba(255, 255, 255, 0.78), transparent 12%),
    linear-gradient(135deg, rgba(143, 201, 119, 0.58), rgba(240, 189, 100, 0.34));
}

.scene-art--todoahu_ihsii .scene-icon {
  color: #fffdf1;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.78),
    0 0 34px rgba(140, 132, 198, 0.96);
}

.scene-stage[data-effect*="sparkle"] .scene-spark,
.scene-stage[data-effect*="glow"] .scene-spark,
.scene-stage[data-effect*="confetti"] .scene-spark {
  animation: sparkleBurst 0.72s ease-out both;
}

.scene-stage[data-effect*="glow"] .scene-art,
.scene-stage[data-effect*="High"] .scene-art,
.scene-stage[data-effect*="high"] .scene-art {
  box-shadow: inset 0 0 0 999px rgba(255, 204, 102, 0.14);
}

.scene-stage[data-effect*="plop"] .scene-art,
.scene-stage[data-effect*="low"] .scene-art,
.scene-stage[data-effect*="Low"] .scene-art {
  animation: softBump 0.44s ease;
}

.scene-stage[data-effect*="wave"] .scene-icon,
.scene-stage[data-effect*="float"] .scene-icon,
.scene-stage[data-effect*="wind"] .scene-icon,
.scene-stage[data-effect*="leaf"] .scene-icon,
.scene-stage[data-effect*="book"] .scene-icon {
  animation: gentleFloat 0.9s ease-in-out;
}

.scene-stage[data-effect*="tick"] .scene-icon {
  animation: tickTurn 0.62s ease;
}

.scene-copy {
  padding: 18px;
}

.scene-interlude {
  position: relative;
  margin: 0 0 14px;
  border: 1px solid rgba(140, 132, 198, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 20%, rgba(242, 200, 121, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(239, 245, 243, 0.74));
  padding: 12px 14px 12px 18px;
  color: #4b4762;
  font-size: clamp(0.94rem, 3.8vw, 1.08rem);
  font-weight: 850;
  line-height: 1.42;
  box-shadow: inset 4px 0 0 rgba(140, 132, 198, 0.35);
}

.scene-interlude[hidden] {
  display: none;
}

.scene-copy.is-reading {
  background:
    linear-gradient(90deg, rgba(255, 246, 216, 0.2), rgba(120, 245, 255, 0.16), rgba(255, 246, 216, 0.2));
  background-size: 220% 100%;
  animation: readingGlow 2.4s ease-in-out infinite;
}

.scene-copy p {
  font-size: clamp(1.18rem, 5vw, 1.72rem);
  line-height: 1.48;
}

.prompt {
  margin-bottom: 0;
  color: var(--brand-strong);
  font-weight: 900;
}

.round-hint {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 0;
  border: 1px solid rgba(108, 92, 231, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  padding: 8px 12px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
}

.feedback-panel {
  margin-top: 14px;
  padding: 14px;
}

.feedback-panel p {
  margin: 0;
  font-weight: 800;
}

.journal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.journal-card-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 16px;
  background: #fff8e8;
  box-shadow:
    0 10px 22px rgba(45, 36, 56, 0.16),
    inset 0 -4px 8px rgba(45, 36, 56, 0.08);
  font-size: 1.7rem;
}

.journal-header .eyebrow,
.journal-header h2 {
  margin: 0;
}

.narrator-log {
  display: grid;
  gap: 7px;
  max-height: 154px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.narrator-log li {
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 10px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}

.narrator-log li[data-kind="dice"] {
  border-left-color: var(--sun);
}

.narrator-log li[data-kind="reward"] {
  border-left-color: var(--mint);
}

.narrator-log li[data-kind="checkpoint"] {
  border-left-color: var(--rose);
}

.narrator-log li[data-kind="master"] {
  border-left-color: #4d8475;
  background: rgba(255, 255, 255, 0.78);
}

.choice-panel,
.closed-choice-launcher,
.tool-row,
.session-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.closed-choice-launcher,
.tool-row {
  display: none;
}

.session-footer {
  position: fixed;
  right: max(22px, calc((100vw - 430px) / 2 + 22px));
  bottom: 22px;
  z-index: 8;
  display: block;
  margin: 0;
  pointer-events: none;
}

.session-footer #checkpointButton {
  display: none;
}

.session-footer #nextButton {
  display: grid;
  place-items: center;
  width: clamp(78px, 22vw, 104px);
  height: clamp(78px, 22vw, 104px);
  border: 4px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(135deg, #078447, #07572f);
  color: #fff;
  font-size: clamp(2.8rem, 12vw, 5rem);
  line-height: 1;
  box-shadow:
    0 0 0 8px rgba(8, 97, 53, 0.1),
    0 18px 36px rgba(8, 97, 53, 0.32),
    inset 0 -8px 16px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  animation: nextPulse 1.5s ease-in-out infinite;
}

.session-footer #nextButton[hidden] {
  display: none;
}

@keyframes nextPulse {
  0%,
  100% {
    transform: translateX(0) scale(1);
    box-shadow:
      0 0 0 8px rgba(8, 97, 53, 0.1),
      0 18px 36px rgba(8, 97, 53, 0.32),
      inset 0 -8px 16px rgba(0, 0, 0, 0.18);
  }
  50% {
    transform: translateX(4px) scale(1.03);
    box-shadow:
      0 0 0 12px rgba(8, 97, 53, 0.08),
      0 22px 42px rgba(8, 97, 53, 0.36),
      inset 0 -8px 16px rgba(0, 0, 0, 0.18);
  }
}

.hub-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.9);
  box-shadow: var(--shadow);
  margin-top: 14px;
  padding: 12px;
}

.hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hub-header .eyebrow,
.hub-header h2 {
  margin: 0;
}

.hub-header h2 {
  font-size: 1rem;
}

.hub-badge {
  border-radius: 999px;
  background: #2d2438;
  color: #fff;
  padding: 6px 9px;
  font-size: 0.75rem;
  font-weight: 950;
  white-space: nowrap;
}

.hub-route-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-route-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 10px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 850;
}

.hub-route-list li button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
}

.hub-route-list .is-open:has(button) {
  cursor: pointer;
}

.hub-route-list .is-open:has(button):hover {
  border-color: rgba(126, 200, 165, 0.85);
  box-shadow: 0 8px 20px rgba(126, 200, 165, 0.16);
}

.hub-route-list li strong {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 0.68rem;
}

.hub-route-list .is-open strong {
  background: rgba(126, 200, 165, 0.24);
  color: #28634f;
}

.hub-route-list .is-complete {
  opacity: 0.72;
}

.hub-route-list .is-complete strong {
  background: rgba(255, 214, 107, 0.28);
  color: #725515;
}

.hub-route-list .is-locked strong {
  background: rgba(45, 36, 56, 0.1);
  color: var(--muted);
}

.city-map-open-button {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  border: 2px solid rgba(108, 92, 231, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.9), transparent 28%),
    linear-gradient(135deg, #fff8dc, #eafcff);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 1rem;
  font-weight: 950;
  text-align: left;
  box-shadow: 0 14px 30px rgba(108, 92, 231, 0.12);
}

.map-button-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #2d2438;
  color: #ffd66b;
  font-size: 1.5rem;
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.2);
}

.hub-route-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.hub-route-chips span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--brand-strong);
  padding: 6px 9px;
  font-size: 0.72rem;
  font-weight: 950;
}

#sessionView.is-voice-only .closed-choice-launcher {
  position: sticky;
  bottom: 10px;
  z-index: 4;
}

.choice-button {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border: 2px solid rgba(120, 245, 255, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(234, 252, 255, 0.9));
  color: var(--ink);
  padding: 11px 13px;
  font-weight: 900;
  text-align: left;
  box-shadow:
    0 0 0 4px rgba(120, 245, 255, 0.12),
    0 14px 30px rgba(55, 76, 150, 0.13);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.choice-button.is-waiting-reveal {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
}

.choice-number {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 24%, #fff, transparent 28%),
    linear-gradient(135deg, #78f5ff, #ff8ff0);
  color: #281d52;
  font-size: 1.28rem;
  font-weight: 950;
  box-shadow:
    inset 0 -7px 12px rgba(45, 36, 56, 0.16),
    0 0 22px rgba(120, 245, 255, 0.78);
}

.choice-button.is-selected {
  border-color: var(--brand);
  background: #f0ecff;
}

.choice-button.is-selected .choice-number {
  background: var(--brand);
  color: #fff;
}

.closed-choice-launcher {
  border: 2px solid rgba(108, 92, 231, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 235, 255, 0.88));
  padding: 14px;
  box-shadow: 0 14px 32px rgba(108, 92, 231, 0.12);
}

.free-action-panel {
  border: 2px solid rgba(108, 92, 231, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 214, 107, 0.28), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 235, 255, 0.88));
  padding: 14px;
  box-shadow: 0 14px 32px rgba(108, 92, 231, 0.12);
}

.free-action-panel label {
  color: var(--brand-strong);
  font-size: 0.92rem;
  font-weight: 900;
}

.free-action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.free-action-row input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 800;
}

.voice-main-button {
  min-height: 56px;
  font-size: 1rem;
}

.action-insight {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.progress-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

.progress-card,
.avatar-card {
  padding: 14px;
}

.avatar-card {
  position: relative;
  padding-top: 18px;
}

.avatar-card h2 {
  max-width: calc(100% - 56px);
  margin-right: 48px;
}

.meters {
  display: grid;
  gap: 8px;
}

.meter {
  display: grid;
  grid-template-columns: 112px 1fr 24px;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
}

.bar {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #eee7dc;
}

.bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--brand));
}

.avatar-preview {
  min-height: 116px;
  margin-bottom: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.56), transparent 26%),
    linear-gradient(135deg, #8bd7ff, #ffb0cb);
}

.hero-figure {
  position: relative;
  width: 112px;
  height: 116px;
  isolation: isolate;
}

.hero-head,
.hero-face,
.hero-body,
.hero-hat,
.hero-helmet,
.hero-cape,
.hero-boots,
.hero-book,
.hero-shield,
.hero-wand,
.hero-hammer,
.hero-sword,
.hero-scepter,
.hero-ribbon,
.hero-seal,
.hero-medal,
.hero-notes,
.hero-companion,
.hero-aura {
  position: absolute;
  display: block;
}

.hero-head {
  z-index: 4;
  top: 6px;
  left: 39px;
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ffd9a8;
  box-shadow: 0 5px 14px rgba(45, 36, 56, 0.18);
}

.hero-face {
  z-index: 5;
  top: 23px;
  left: 49px;
  width: 15px;
  height: 7px;
  border-radius: 0 0 999px 999px;
  border-bottom: 3px solid rgba(92, 74, 47, 0.72);
  box-shadow:
    -9px -8px 0 -3px rgba(92, 74, 47, 0.72),
    9px -8px 0 -3px rgba(92, 74, 47, 0.72);
}

.hero-hat {
  z-index: 6;
  top: 0;
  left: 33px;
  width: 46px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 14px 14px 8px 8px;
  background: #80bfff;
  transform: rotate(-4deg);
  box-shadow: 0 6px 14px rgba(45, 36, 56, 0.12);
}

.hero-helmet {
  z-index: 6;
  top: 1px;
  left: 35px;
  width: 42px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(135deg, #e7eef7, #9aa9c0);
  box-shadow: 0 6px 14px rgba(45, 36, 56, 0.14);
}

.hero-body {
  z-index: 3;
  top: 44px;
  left: 35px;
  width: 42px;
  height: 42px;
  border: 3px solid #fff;
  border-radius: 20px 20px 14px 14px;
  background: var(--brand);
}

.hero-color--violet .hero-body {
  background: #6c5ce7;
}

.hero-color--mint .hero-body {
  background: #4fbf8a;
}

.hero-color--sun .hero-body {
  background: #f0a92f;
}

.hero-color--rose .hero-body {
  background: #ff6f9f;
}

.hero-color--sky .hero-body {
  background: #4a9fe8;
}

.hero-figure--gentileza .hero-body,
.hero-figure--cooperacao .hero-body {
  background: #7ec8a5;
}

.hero-figure--movimento .hero-body {
  background: #ff8fb3;
}

.hero-figure--palavras-novas .hero-body,
.hero-figure--pensamento-esperto .hero-body {
  background: #80bfff;
}

.hero-figure--criatividade .hero-body {
  background: #c6a7ff;
}

.hero-figure.hero-color--violet .hero-body,
.hero-figure.hero-color--mint .hero-body,
.hero-figure.hero-color--sun .hero-body,
.hero-figure.hero-color--rose .hero-body,
.hero-figure.hero-color--sky .hero-body {
  box-shadow: inset 0 -10px 18px rgba(45, 36, 56, 0.1);
}

.hero-figure.hero-color--violet .hero-body {
  background: #6c5ce7;
}

.hero-figure.hero-color--mint .hero-body {
  background: #4fbf8a;
}

.hero-figure.hero-color--sun .hero-body {
  background: #f0a92f;
}

.hero-figure.hero-color--rose .hero-body {
  background: #ff6f9f;
}

.hero-figure.hero-color--sky .hero-body {
  background: #4a9fe8;
}

.hero-companion {
  z-index: 7;
  top: 18px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255, 246, 216, 0.95);
  color: var(--brand-strong);
  font-size: 1rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(45, 36, 56, 0.16);
  animation: gentleBob 2.4s ease-in-out infinite;
}

.hero-cape {
  z-index: 1;
  top: 41px;
  left: 24px;
  width: 64px;
  height: 55px;
  border: 3px solid rgba(255, 255, 255, 0.68);
  border-radius: 30px 30px 20px 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 42%),
    rgba(255, 143, 179, 0.92);
  box-shadow: 0 10px 22px rgba(45, 36, 56, 0.12);
}

.hero-boots {
  z-index: 4;
  top: 85px;
  left: 37px;
  width: 38px;
  height: 12px;
  border-radius: 999px;
  background: #ffcc66;
  box-shadow:
    -11px 3px 0 -2px #ffb84c,
    11px 3px 0 -2px #ffb84c,
    0 0 18px rgba(255, 204, 102, 0.9);
}

.hero-book,
.hero-shield,
.hero-wand,
.hero-hammer,
.hero-sword,
.hero-scepter {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  z-index: 6;
}

.hero-book {
  top: 58px;
  left: 13px;
  padding: 1px 4px;
  border-radius: 5px;
  background: #55a0ff;
}

.hero-shield {
  top: 57px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 14px 14px 16px 16px;
  background: #6c5ce7;
  font-size: 0.95rem;
}

.hero-wand {
  top: 33px;
  right: 15px;
  transform: rotate(24deg);
}

.hero-hammer {
  top: 71px;
  right: 13px;
  color: #5c4a2f;
  transform: rotate(-18deg);
}

.hero-sword {
  top: 40px;
  left: 15px;
  color: #cfd8e6;
  transform: rotate(22deg);
}

.hero-scepter {
  top: 30px;
  right: 12px;
  color: #f0a92f;
  transform: rotate(-14deg);
}

.hero-ribbon {
  z-index: 6;
  top: 47px;
  left: 49px;
  width: 36px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #80bfff, #fff, #ff8fb3);
  transform: rotate(-10deg);
  box-shadow: 0 4px 10px rgba(45, 36, 56, 0.13);
}

.hero-seal,
.hero-medal {
  z-index: 6;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(45, 36, 56, 0.16);
}

.hero-seal {
  top: 54px;
  left: 45px;
  width: 22px;
  height: 22px;
  background: #72d6a2;
  color: #2d6b4d;
  font-size: 0.72rem;
  font-weight: 1000;
}

.hero-medal {
  top: 64px;
  left: 55px;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, #fff2a8 0 30%, #ffcc66 34% 100%);
}

.hero-medal::before {
  content: "";
  position: absolute;
  top: -11px;
  width: 16px;
  height: 14px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #6c5ce7 0 46%, #ff8fb3 54% 100%);
}

.hero-notes {
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.hero-note {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.72);
}

.hero-note:nth-child(1) {
  top: 12px;
  left: 18px;
}

.hero-note:nth-child(2) {
  top: 34px;
  left: 9px;
}

.hero-note:nth-child(3) {
  top: 8px;
  right: 22px;
}

.hero-note:nth-child(4) {
  top: 86px;
  left: 16px;
}

.hero-note:nth-child(5) {
  top: 88px;
  right: 16px;
}

.hero-note--yellow {
  background: #ffcc66;
}

.hero-note--green {
  background: #72d6a2;
}

.hero-note--silver {
  background: #dfe7ef;
}

.hero-note--red {
  background: #ff6f9f;
}

.hero-note--blue {
  background: #80bfff;
}

.hero-aura {
  inset: 6px;
  z-index: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 214, 107, 0.52), transparent 66%);
  animation: sparkleFloat 2.4s ease-in-out infinite;
}

.hero-title {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
  color: var(--ink);
  text-align: center;
}

.hero-title strong {
  font-size: 0.92rem;
}

.hero-title span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.reward-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reward-list li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: #fff6d8;
  padding: 5px 8px;
  font-size: 0.76rem;
  font-weight: 800;
}

.reward-list li span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(108, 92, 231, 0.12);
  color: var(--brand-strong);
  font-size: 0.76rem;
  line-height: 1;
}

.reward-chip--yellow span {
  background: #fff2a8;
  color: #9d6818;
}

.reward-chip--green span,
.reward-chip--seal span {
  background: rgba(114, 214, 162, 0.28);
  color: #2d6b4d;
}

.reward-chip--silver span {
  background: #edf2f7;
  color: #65758a;
}

.reward-chip--red span,
.reward-chip--cape span {
  background: rgba(255, 143, 179, 0.24);
  color: #b83b68;
}

.reward-chip--blue span,
.reward-chip--book span,
.reward-chip--ribbon span {
  background: rgba(128, 191, 255, 0.28);
  color: #2269aa;
}

.reward-chip--boots span,
.reward-chip--medal span {
  background: rgba(255, 204, 102, 0.35);
  color: #9d6818;
}

.ending-card {
  margin-top: 18vh;
  padding: 22px;
  text-align: center;
}

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

.learning-report {
  margin-top: 14px;
  border: 1px solid rgba(108, 92, 231, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  padding: 14px;
  text-align: left;
}

.learning-report h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.learning-report ul {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding-left: 18px;
}

.learning-report p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.dice-modal,
.choice-modal,
.movement-modal,
.visual-challenge-modal,
.template-challenge-modal,
.city-map-modal,
.journal-modal,
.story-action-modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(45, 36, 56, 0.46);
  padding: 18px;
}

.dice-modal[hidden],
.choice-modal[hidden],
.movement-modal[hidden],
.visual-challenge-modal[hidden],
.template-challenge-modal[hidden],
.city-map-modal[hidden],
.journal-modal[hidden],
.story-action-modal[hidden] {
  display: none;
}

body[data-adventure-theme="todoahu"] .choice-modal {
  z-index: 42;
  background: rgba(39, 45, 74, 0.18);
  backdrop-filter: blur(8px);
}

.choice-card,
.movement-card,
.visual-challenge-card,
.template-challenge-card,
.city-map-card,
.journal-card,
.story-action-card {
  display: grid;
  gap: 14px;
  width: min(100%, 430px);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 24px;
  background:
    radial-gradient(circle at 16% 8%, rgba(120, 245, 255, 0.22), transparent 30%),
    linear-gradient(180deg, #ffffff, #fff8ee);
  box-shadow: 0 24px 70px rgba(45, 36, 56, 0.32);
  padding: 18px;
}

body[data-adventure-theme="todoahu"] .choice-card {
  max-height: min(82svh, 640px);
  overflow: auto;
}

.visual-challenge-card {
  width: min(100%, 420px);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.32), transparent 28%),
    linear-gradient(180deg, #fff6df 0%, #eba64d 100%);
}

.visual-challenge-card--cookie_sequence {
  border-color: rgba(117, 63, 13, 0.34);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.38), transparent 26%),
    linear-gradient(180deg, #fff4d8 0%, #eaa24c 58%, #b96a2b 100%);
}

.visual-challenge-card h2 {
  margin: 0;
  color: #120d19;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 10vw, 3.4rem);
  line-height: 0.95;
  text-align: center;
}

.visual-challenge-card p {
  margin: 0;
}

.visual-challenge-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.visual-slot {
  display: grid;
  min-height: 70px;
  place-items: center;
  border: 2px dashed rgba(18, 13, 25, 0.32);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.28);
  color: #120d19;
  font-size: 2.4rem;
  font-weight: 950;
}

.visual-challenge-card--cookie_sequence .visual-challenge-slots {
  padding: 10px;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(100, 51, 16, 0.18), transparent 18%, transparent 82%, rgba(100, 51, 16, 0.18)),
    #c98236;
  box-shadow: inset 0 -8px 0 rgba(90, 48, 14, 0.18);
}

.visual-challenge-card--cookie_sequence .visual-slot {
  border: 2px dashed rgba(90, 48, 14, 0.42);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.42), transparent 34%),
    #f4c177;
  color: #5a300e;
}

.visual-slot.is-filled {
  border-style: solid;
  border-color: rgba(0, 99, 72, 0.58);
  background: rgba(255, 255, 255, 0.62);
  color: #00553f;
}

.visual-challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(104, 60, 20, 0.16);
}

.visual-object-button {
  display: grid;
  gap: 6px;
  min-height: 74px;
  place-items: center;
  border: 2px solid rgba(0, 80, 57, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.74), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 242, 168, 0.22));
  color: #006348;
  font-weight: 950;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.visual-challenge-card--cookie_sequence .visual-object-button {
  border-color: rgba(90, 48, 14, 0.18);
  background:
    radial-gradient(circle at 50% 43%, #f6ca82 0 34%, #d8893b 35% 50%, transparent 51%),
    linear-gradient(180deg, rgba(255, 250, 232, 0.5), rgba(255, 216, 137, 0.22));
}

.visual-object-symbol {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  background: #006348;
  color: #fff6df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.45rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 -5px 0 rgba(0, 0, 0, 0.14),
    0 10px 18px rgba(0, 80, 57, 0.22);
}

.visual-challenge-card--cookie_sequence .visual-object-symbol {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.42), transparent 24%),
    #7b4215;
  color: #fff4d8;
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.16),
    0 10px 16px rgba(90, 48, 14, 0.24);
}

.visual-object-label {
  color: #4a2a10;
  font-size: 0.78rem;
  font-weight: 950;
}

.visual-object-button:active {
  transform: scale(0.94);
}

.visual-object-button:hover,
.visual-object-button:focus-visible {
  background: rgba(255, 255, 255, 0.44);
  box-shadow: 0 0 0 4px rgba(0, 99, 72, 0.14);
  outline: 0;
}

.visual-object-button.is-picked {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 3px rgba(0, 99, 72, 0.38);
}

.visual-object-button.is-picked .visual-object-symbol {
  background: #4b3edb;
}

.visual-object-button.is-wrong {
  animation: visualWrong 0.32s ease;
}

.visual-challenge-feedback {
  min-height: 1.4em;
  color: #3f2c13;
  font-size: 0.94rem;
  font-weight: 900;
  text-align: center;
}

.template-challenge-card {
  width: min(100%, 430px);
  background:
    radial-gradient(circle at 18% 10%, rgba(120, 245, 255, 0.24), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8f0ff 58%, #fff3d4 100%);
}

.template-challenge-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 8vw, 2.7rem);
  line-height: 0.98;
  text-align: center;
}

.template-challenge-card p {
  margin: 0;
}

.template-challenge-stage {
  display: grid;
  gap: 12px;
}

.language-word-card,
.memory-sequence,
.counting-target {
  display: grid;
  place-items: center;
  min-height: 96px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.82), transparent 28%),
    linear-gradient(135deg, #78f5ff, #ffcc66 52%, #ff8ff0);
  color: #2d2438;
  box-shadow:
    inset 0 -12px 20px rgba(45, 36, 56, 0.16),
    0 0 0 8px rgba(120, 245, 255, 0.14);
}

.language-word {
  font-size: clamp(2.4rem, 14vw, 4.2rem);
  font-weight: 1000;
  line-height: 0.95;
}

.language-meaning {
  font-size: 1rem;
  font-weight: 900;
}

.memory-sequence {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.memory-sequence span {
  display: grid;
  min-height: 58px;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.52);
  font-size: 1.5rem;
  font-weight: 1000;
}

.counting-target {
  min-height: 88px;
  font-size: clamp(3rem, 18vw, 5rem);
  font-weight: 1000;
}

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

.template-choice-button {
  display: grid;
  min-height: 76px;
  place-items: center;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  color: #2d2438;
  font-size: 1rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(45, 36, 56, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.template-choice-symbol {
  font-size: 2rem;
  line-height: 1;
}

.template-choice-button:hover,
.template-choice-button:focus-visible {
  outline: 0;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.16), 0 10px 24px rgba(45, 36, 56, 0.12);
}

.template-choice-button:active {
  transform: scale(0.94);
}

.template-choice-button.is-picked {
  background: #dffff4;
  box-shadow: inset 0 0 0 3px rgba(0, 99, 72, 0.32);
}

.template-choice-button.is-wrong {
  animation: visualWrong 0.32s ease;
}

.template-challenge-feedback {
  min-height: 1.4em;
  color: var(--brand-strong);
  font-size: 0.96rem;
  font-weight: 950;
  text-align: center;
}

.template-ready-button {
  min-height: 74px;
  font-size: clamp(1.8rem, 10vw, 3rem);
}

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

.city-map-card {
  width: min(100%, 460px);
  max-height: calc(100vh - 28px);
  overflow: auto;
}

.city-map-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
}

.city-map-header h2 {
  margin: 0;
  font-size: 1.32rem;
}

.city-map-grid {
  position: relative;
  min-height: min(84vw, 390px);
  border: 2px solid rgba(255, 214, 107, 0.42);
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 214, 107, 0.55), transparent 13%),
    radial-gradient(circle at 50% 50%, rgba(139, 215, 255, 0.3), transparent 38%),
    linear-gradient(135deg, #fff7d7, #e9fbff 52%, #fff4ef);
  box-shadow:
    inset 0 0 0 8px rgba(255, 255, 255, 0.42),
    0 18px 42px rgba(45, 36, 56, 0.16);
}

.city-map-grid::before,
.city-map-grid::after,
.city-map-path {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82%;
  height: 2px;
  border-radius: 999px;
  background: rgba(108, 92, 231, 0.16);
  transform-origin: center;
}

.city-map-grid::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.city-map-grid::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.city-map-path-a {
  transform: translate(-50%, -50%) rotate(45deg);
}

.city-map-path-b {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.city-map-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 24%, #fff, transparent 24%),
    linear-gradient(135deg, #ffd66b, #8bd7ff);
  color: #2d2438;
  font-weight: 1000;
  box-shadow: 0 0 0 8px rgba(255, 214, 107, 0.18);
  transform: translate(-50%, -50%);
}

.city-map-center strong {
  font-size: 1.8rem;
  line-height: 1;
}

.city-map-center span {
  font-size: 0.8rem;
}

.city-map-point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(66px, 18vw, 82px);
  min-height: 66px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  background:
    radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.9), transparent 25%),
    linear-gradient(135deg, #78f5ff, #ffcc66);
  color: #281d52;
  padding: 6px;
  font-weight: 950;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 6px rgba(120, 245, 255, 0.12),
    0 14px 28px rgba(45, 36, 56, 0.2);
}

.city-map-point:not(:disabled) {
  animation: mapPointPulse 1.8s ease-in-out infinite;
}

.city-map-point:disabled {
  cursor: not-allowed;
}

.city-map-point.is-complete {
  background: linear-gradient(135deg, #fff2a8, #ffd66b);
  color: #5f4b12;
}

.city-map-point.is-locked {
  background: rgba(255, 255, 255, 0.72);
  color: rgba(45, 36, 56, 0.58);
  filter: grayscale(0.25);
  box-shadow: 0 8px 20px rgba(45, 36, 56, 0.12);
}

.point-symbol {
  font-size: 1.45rem;
  line-height: 1;
}

.point-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  letter-spacing: 0;
}

.point-status {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 2px 5px;
  font-size: 0.56rem;
  line-height: 1;
}

.city-map-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.35;
}

.city-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.city-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.city-map-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.legend-open {
  background: #78f5ff;
}

.legend-complete {
  background: #ffd66b;
}

.legend-locked {
  background: rgba(45, 36, 56, 0.22);
}

@keyframes mapPointPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

.story-action-card button {
  min-height: 52px;
}

.mic-consent-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid rgba(108, 92, 231, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 900;
}

.mic-consent-line input {
  width: 22px;
  height: 22px;
  accent-color: var(--brand);
}

.choice-card .choice-panel {
  grid-template-columns: 1fr;
  margin-top: 0;
}

.choice-card h2,
.movement-card h2 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.movement-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
  font-weight: 850;
  line-height: 1.38;
}

.movement-question {
  color: var(--brand-strong) !important;
  font-size: 1.16rem !important;
}

.ready-word-button {
  min-height: 86px;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.85), transparent 24%),
    linear-gradient(135deg, #78f5ff, #ffcc66 50%, #ff8ff0);
  color: #2d2438;
  font-size: clamp(2rem, 12vw, 3.8rem);
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 -12px 20px rgba(45, 36, 56, 0.18),
    0 0 0 8px rgba(120, 245, 255, 0.16),
    0 18px 42px rgba(108, 92, 231, 0.24);
}

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(45, 36, 56, 0.54);
  padding: 18px;
  backdrop-filter: blur(10px);
}

.profile-modal[hidden] {
  display: none;
}

.profile-card {
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 238, 0.96));
  box-shadow: 0 24px 70px rgba(45, 36, 56, 0.28);
  padding: 20px;
}

.profile-card h2 {
  margin-bottom: 4px;
  font-size: 1.45rem;
}

.profile-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 850;
}

.profile-card input,
.profile-card select,
.profile-card textarea {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 850;
  font-family: inherit;
}

.creator-card {
  max-height: min(88vh, 720px);
  overflow-y: auto;
}

.creator-scenes-list {
  display: grid;
  gap: 14px;
}

.creator-scene-row {
  display: grid;
  gap: 10px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 14px;
}

.creator-scene-row legend {
  font-weight: 950;
  color: var(--brand-strong);
  padding: 0 4px;
}

.dice-card {
  width: min(100%, 360px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  background: #fff;
  padding: 22px;
  text-align: center;
  box-shadow: 0 22px 60px rgba(45, 36, 56, 0.34);
}

.dice-card.is-listening {
  box-shadow:
    0 0 0 8px rgba(120, 245, 255, 0.16),
    0 22px 60px rgba(45, 36, 56, 0.34);
}

.dice-cube {
  display: grid;
  place-items: center;
  width: 154px;
  height: 154px;
  border: 0;
  margin: 16px auto;
  border-radius: 26px;
  background: linear-gradient(135deg, #fff, #f2ecff);
  color: var(--brand-strong);
  font-size: 6.9rem;
  font-weight: 1000;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 -10px 22px rgba(108, 92, 231, 0.12),
    inset 0 9px 16px rgba(255, 255, 255, 0.88),
    0 0 0 8px rgba(108, 92, 231, 0.08),
    0 18px 40px rgba(108, 92, 231, 0.26);
}

.dice-cube.is-rolling {
  animation: diceSpin 0.54s linear infinite;
  filter: saturate(1.1);
}

.dice-listening {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  color: var(--brand-strong);
  font-size: 0.92rem;
  font-weight: 950;
}

.dice-listening::before,
.dice-listening::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #78f5ff;
  box-shadow: 0 0 16px rgba(120, 245, 255, 0.9);
  animation: listenPulse 0.9s ease-in-out infinite;
}

.dice-listening::after {
  animation-delay: 0.22s;
}

.dice-cube[data-result="high"] {
  box-shadow:
    0 0 0 8px rgba(255, 204, 102, 0.25),
    0 0 36px rgba(255, 204, 102, 0.9),
    0 18px 40px rgba(108, 92, 231, 0.26);
}

.dice-cube[data-result="middle"],
.dice-cube[data-result="medium"] {
  box-shadow:
    0 0 0 8px rgba(114, 214, 162, 0.2),
    0 0 28px rgba(114, 214, 162, 0.74),
    0 18px 40px rgba(108, 92, 231, 0.22);
}

.dice-cube[data-result="low"] {
  box-shadow:
    0 0 0 8px rgba(128, 191, 255, 0.2),
    0 0 26px rgba(128, 191, 255, 0.72),
    0 18px 40px rgba(108, 92, 231, 0.2);
}

@keyframes diceSpin {
  from {
    transform: rotate(-8deg) scale(0.98);
  }
  50% {
    transform: rotate(8deg) scale(1.04);
  }
  to {
    transform: rotate(-8deg) scale(0.98);
  }
}

@keyframes listenPulse {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.72);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.reward-flight {
  position: fixed;
  left: 50%;
  top: 56%;
  z-index: 14;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 22%, #fff, transparent 26%),
    linear-gradient(135deg, #78f5ff, #ffcc66 52%, #ff8ff0);
  color: #281d52;
  font-size: 2.7rem;
  font-weight: 1000;
  pointer-events: none;
  box-shadow:
    0 0 0 8px rgba(255, 204, 102, 0.18),
    0 0 42px rgba(255, 204, 102, 0.72),
    0 18px 36px rgba(45, 36, 56, 0.22);
  animation: rewardFlight 1.35s cubic-bezier(0.18, 0.86, 0.28, 1) forwards;
}

.reward-flight.is-bell-note {
  color: #5f45cf;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}

@keyframes rewardFlight {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.48) rotate(-12deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(4deg);
  }
  72% {
    opacity: 1;
    transform: translate(74px, -210px) scale(0.92) rotate(11deg);
  }
  100% {
    opacity: 0;
    transform: translate(112px, -260px) scale(0.44) rotate(18deg);
  }
}

@keyframes sparkleFloat {
  0%,
  100% {
    opacity: 0.52;
    transform: translateY(0) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translateY(-8px) scale(1.1);
  }
}

@keyframes sparkleBurst {
  from {
    opacity: 1;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(5) translateY(-12px);
  }
}

@keyframes softBump {
  0%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-5px) rotate(-1deg);
  }
  70% {
    transform: translateX(5px) rotate(1deg);
  }
}

@keyframes gentleFloat {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -58%) scale(1.04);
  }
}

@keyframes gentleBob {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-7px) rotate(5deg);
  }
}

@keyframes tickTurn {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0);
  }
  40% {
    transform: translate(-50%, -50%) rotate(14deg) scale(1.03);
  }
  70% {
    transform: translate(-50%, -50%) rotate(-8deg);
  }
}

@keyframes readingGlow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes chapterSlide {
  0% {
    opacity: 0.2;
    transform: translateX(18px) scale(0.985);
    filter: saturate(1.25) brightness(1.08);
  }
  55% {
    opacity: 1;
    transform: translateX(-3px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: none;
  }
}

@keyframes oiemMistDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  45% {
    transform: translate3d(18px, -10px, 0) scale(1.08);
  }
  72% {
    transform: translate3d(-10px, 14px, 0) scale(0.98);
  }
}

@keyframes oiemSceneMist {
  0%,
  100% {
    transform: translateX(-18%) scale(1);
  }
  50% {
    transform: translateX(18%) scale(1.06);
  }
}

@keyframes oiemOrbPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: saturate(1);
  }
  50% {
    transform: translate(-50%, -52%) scale(1.06);
    filter: saturate(1.25) brightness(1.06);
  }
}

@keyframes oiemMapGlow {
  0%,
  100% {
    transform: translateX(-50%) scale(0.9);
    opacity: 0.34;
  }
  50% {
    transform: translateX(-50%) scale(1.12);
    opacity: 0.62;
  }
}

@keyframes oiemSheetArrive {
  0% {
    opacity: 0.2;
    transform: translate(-50%, 18px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

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

@media (max-width: 430px) {
  .adventure-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .play-story-button {
    grid-column: 2;
    justify-self: end;
    min-width: 74px;
    margin-top: 4px;
  }

  .cover-art {
    min-height: 72px;
  }

  .story-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 520px) {
  .adult-panel,
  .session-footer {
    grid-template-columns: 1fr 1fr;
  }

  .tool-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .progress-layout {
    grid-template-columns: 1fr 1fr;
  }

  .choice-panel {
    grid-template-columns: repeat(3, 1fr);
  }
}