@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-variable-v38.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito-latin-variable-v32.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --midnight: #11102d;
  --midnight-soft: #1a1740;
  --purple: #3c2469;
  --violet: #7f65c6;
  --teal: #2e9e99;
  --forest: #1d5d4f;
  --gold: #f5bd58;
  --gold-bright: #ffd989;
  --parchment: #fbf0d8;
  --parchment-deep: #ead4aa;
  --ink: #201b32;
  --cream: #fff9e9;
  --fire: #ed6a35;
  --emotion-accent: #e36b3e;
  --danger: #bd3d49;
  --shadow: 0 26px 70px rgba(4, 6, 25, 0.42);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-height: 100%; background: #080f20; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--cream);
  font-family: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080f20;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; transform: none !important; }
button:focus-visible, input:focus-visible {
  outline: 4px solid var(--gold-bright);
  outline-offset: 4px;
}

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

.storybook-bg {
  --storybook-environment: url("assets/web/enchanted-ruins-background-web-v1.webp");
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 12%, rgba(103, 75, 156, 0.18), transparent 34%),
    radial-gradient(circle at 84% 82%, rgba(31, 133, 120, 0.14), transparent 34%),
    linear-gradient(rgba(4, 9, 22, 0.14), rgba(5, 8, 19, 0.42)),
    var(--storybook-environment) center / cover no-repeat;
}

.storybook-bg::before,
.storybook-bg::after {
  display: none;
}

.star {
  position: absolute;
  color: rgba(255, 217, 137, 0.72);
  text-shadow: 0 0 18px rgba(255, 217, 137, 0.65);
}
.star-1 { left: 6%; top: 19%; font-size: 1.1rem; }
.star-2 { right: 8%; top: 23%; font-size: 1.5rem; }
.star-3 { left: 12%; bottom: 12%; font-size: 0.85rem; }
.star-4 { right: 18%; bottom: 8%; font-size: 1rem; }

.firefly {
  --drift-x: 18px;
  --drift-y: -14px;
  --drift-opacity: 0.55;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 16px 5px rgba(255, 207, 105, 0.42);
  animation: drift 6s ease-in-out infinite alternate;
}
.firefly-1 { left: 18%; top: 31%; }
.firefly-2 { right: 13%; top: 55%; animation-delay: -2s; }
.firefly-3 { left: 53%; bottom: 9%; animation-delay: -4s; }
.firefly-4 { --drift-x: 12px; --drift-y: -20px; left: 7%; top: 62%; width: 5px; height: 5px; animation-duration: 7.6s; animation-delay: -1.2s; }
.firefly-5 { --drift-x: -16px; --drift-y: -11px; left: 36%; top: 17%; width: 6px; height: 6px; animation-duration: 8.4s; animation-delay: -5.1s; }
.firefly-6 { --drift-x: 22px; --drift-y: 8px; right: 31%; top: 38%; width: 5px; height: 5px; animation-duration: 6.8s; animation-delay: -3.4s; }
.firefly-7 { --drift-x: -11px; --drift-y: -18px; right: 6%; bottom: 19%; width: 8px; height: 8px; animation-duration: 9.2s; animation-delay: -6.3s; }

@keyframes drift { to { transform: translate3d(var(--drift-x), var(--drift-y), 0); opacity: var(--drift-opacity); } }

.app-header {
  position: sticky;
  top: 10px;
  z-index: 10;
  width: min(1320px, calc(100% - 36px));
  min-height: 88px;
  margin: 18px auto 0;
  padding: 10px 12px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(255, 230, 171, 0.18);
  border-radius: 24px;
  background: rgba(11, 11, 37, 0.72);
  box-shadow: 0 16px 45px rgba(5, 5, 20, 0.24);
  backdrop-filter: blur(16px);
}
.app-header.is-access {
  width: min(660px, calc(100% - 36px));
  justify-content: space-between;
  background: rgba(11, 11, 37, 0.82);
}

.brand {
  min-height: 64px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.brand img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border: 2px solid rgba(255, 217, 137, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(255, 203, 97, 0.15);
}
.brand strong {
  display: block;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  letter-spacing: 0.02em;
}
.brand small { display: block; margin-top: 3px; color: #c9d8d2; font-size: 0.78rem; }

.header-utilities { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.motion-toggle {
  min-height: 54px;
  padding: 0 14px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e5eee9;
  font-size: 0.76rem;
  font-weight: 900;
  border: 1px solid rgba(176, 223, 214, 0.24);
  border-radius: 15px;
  background: rgba(94, 151, 144, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.motion-toggle:hover { transform: translateY(-2px); border-color: rgba(164, 236, 222, 0.56); background: rgba(94, 171, 160, 0.24); }
.motion-toggle:focus-visible { outline: 3px solid #9be7d9; outline-offset: 3px; }
.motion-toggle[aria-pressed="true"] { color: #1f2435; border-color: #b9eee4; background: linear-gradient(180deg, #b9eee4, #78c9bb); }
.motion-toggle:disabled { opacity: 0.86; cursor: default; transform: none; }
.motion-toggle-icon { width: 32px; height: 32px; display: grid; place-items: center; font-size: 1.15rem; border: 1px solid currentColor; border-radius: 50%; }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon { font-size: 0; }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon::before { content: "✓"; font-size: 0.95rem; }

.nav-button,
.adult-button,
.primary-button,
.secondary-button,
.restart-button,
.check-button {
  min-height: 54px;
  border-radius: 15px;
  border: 1px solid transparent;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.nav-button:hover,
.adult-button:hover,
.primary-button:hover,
.secondary-button:hover,
.restart-button:hover,
.check-button:hover { transform: translateY(-2px); }

.nav-button {
  padding: 0 16px;
  color: var(--cream);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.075);
}
.nav-button span { margin-right: 5px; }
.adult-button {
  min-width: 178px;
  padding: 0 18px;
  color: #2a1730;
  background: linear-gradient(180deg, #ffd88d, #f0ae46);
  border-color: #ffe5ac;
  box-shadow: 0 8px 22px rgba(234, 154, 45, 0.22);
}
.adult-button span { margin-right: 5px; }

main {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 36px));
  margin: 0 auto;
}

.screen {
  min-height: calc(100vh - 174px);
  padding: clamp(28px, 4vw, 58px) 0 84px;
  animation: screen-in 350ms ease both;
}
.screen[hidden] { display: none !important; }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px); } }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  color: inherit;
  text-wrap: balance;
}
h1 { margin-bottom: 14px; font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: 0.98; letter-spacing: -0.035em; }
h2 { margin-bottom: 10px; font-size: clamp(1.65rem, 2.8vw, 2.6rem); line-height: 1.05; }
h3 { margin-bottom: 8px; font-size: clamp(1.25rem, 2vw, 1.75rem); }
p { line-height: 1.58; }

.eyebrow {
  margin-bottom: 10px;
  color: #73d5ca;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow.warm { color: #ffb768; }
.lead { max-width: 39rem; font-size: clamp(1rem, 1.5vw, 1.2rem); }

.access-screen,
.situation-screen { padding-top: clamp(18px, 2.5vw, 34px); }

.access-sanctuary,
.situation-sanctuary {
  position: relative;
  isolation: isolate;
  max-width: 1240px;
  margin: 0 auto;
  overflow: hidden;
  border: 4px solid #766c80;
  border-radius: 36px;
  background:
    radial-gradient(circle at 14% 18%, rgba(101, 220, 202, 0.13), transparent 25%),
    radial-gradient(circle at 88% 14%, rgba(172, 113, 216, 0.16), transparent 29%),
    linear-gradient(rgba(6, 17, 30, 0.42), rgba(7, 12, 28, 0.62)),
    url("assets/web/enchanted-cobblestone-web-v1.webp");
  background-position: center, center, center, center top;
  background-size: auto, auto, auto, 630px 630px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  box-shadow:
    inset 0 0 0 5px rgba(23, 19, 41, 0.78),
    inset 0 0 78px rgba(2, 7, 18, 0.76),
    0 26px 70px rgba(3, 5, 18, 0.4);
}
.access-sanctuary::before,
.situation-sanctuary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -42px -22px auto;
  height: 210px;
  opacity: 0.82;
  background:
    radial-gradient(ellipse at 7% 20%, transparent 0 34%, #244a38 35% 42%, transparent 43%),
    radial-gradient(ellipse at 22% 0%, transparent 0 37%, #315c43 38% 44%, transparent 45%),
    radial-gradient(ellipse at 78% 3%, transparent 0 34%, #315c43 35% 42%, transparent 43%),
    radial-gradient(ellipse at 95% 22%, transparent 0 37%, #244a38 38% 44%, transparent 45%);
  pointer-events: none;
}

/* Painterly woodland ornaments inspired by the client reference. They live
   behind the interactive layer so the pillars feel enchanted without making
   any child-facing control harder to read or tap. */
.enchanted-pillars {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.enchanted-pillar {
  position: absolute;
  top: -6%;
  bottom: -7%;
  width: clamp(205px, 22vw, 280px);
  background: url("assets/web/enchanted-pillar-vine-web-v1.webp") center / contain no-repeat;
  filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.62)) saturate(0.92);
  opacity: 0.82;
  transform-origin: center;
}
.enchanted-pillar-left { left: clamp(-158px, -12vw, -112px); }
.enchanted-pillar-right {
  right: clamp(-158px, -12vw, -112px);
  transform: scaleX(-1) translateY(3%);
  opacity: 0.76;
}
.access-layout,
.home-hero,
.emotion-grid,
.two-column-layout {
  position: relative;
  z-index: 1;
}
.sanctuary-crystal {
  position: absolute;
  z-index: 3;
  color: #8ff1e2;
  font-size: 1.8rem;
  text-shadow: 0 0 22px #6de2d1;
  pointer-events: none;
}
.crystal-left { left: 18px; bottom: 17px; }
.crystal-right { right: 18px; top: 18px; color: #d2a0ff; text-shadow: 0 0 22px #a16dd2; }

.access-layout {
  min-height: 650px;
  padding: clamp(32px, 5vw, 68px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(430px, 1.12fr);
  align-items: center;
  gap: clamp(36px, 7vw, 96px);
}

.portal-stage {
  min-width: 0;
  display: grid;
  justify-items: center;
  text-align: center;
}
.portal-kicker {
  margin: 0 0 -2px;
  color: #8de2d7;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(107, 228, 211, 0.38);
}
.portal-whisper {
  margin: -8px 0 0;
  color: #f6dfad;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: 0.04em;
}

.portal-mark {
  position: relative;
  width: min(34vw, 440px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
}
.portal-mark img {
  position: relative;
  z-index: 2;
  width: 67%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid rgba(255, 222, 157, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 55px rgba(111, 221, 208, 0.23), 0 0 90px rgba(239, 181, 84, 0.18);
}
.portal-ring {
  position: absolute;
  inset: 7%;
  border: 4px solid rgba(218, 183, 118, 0.65);
  border-radius: 50%;
  box-shadow: inset 0 0 25px rgba(255, 213, 132, 0.22), 0 0 18px rgba(132, 224, 211, 0.18);
}
.ring-one::before,
.ring-one::after {
  content: "◆";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #a6f3e9;
  text-shadow: 0 0 15px rgba(166, 243, 233, 0.8);
}
.ring-one::before { top: -14px; }
.ring-one::after { bottom: -14px; }
.ring-two { inset: 0; border-color: rgba(132, 100, 187, 0.55); border-width: 2px; }

.parchment-panel,
.content-panel,
.player-panel,
.method-panel,
.check-panel,
.adult-help-panel {
  color: var(--ink);
  border: 1px solid rgba(255, 231, 184, 0.74);
  background:
    linear-gradient(rgba(255, 249, 231, 0.97), rgba(246, 231, 199, 0.98)),
    repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(100, 66, 28, 0.035) 6px);
  box-shadow: var(--shadow);
}

.access-panel {
  position: relative;
  padding: clamp(34px, 5vw, 64px);
  border: 3px solid #92704a;
  border-radius: 24px;
  background:
    linear-gradient(110deg, #d1ad72, #f7e6ba 7% 93%, #c49355),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(99, 61, 31, 0.04) 7px);
  box-shadow: inset 0 0 0 5px rgba(101, 65, 42, 0.16), 0 11px 0 rgba(50, 37, 45, 0.72), 0 24px 44px rgba(0, 0, 0, 0.3);
}
.access-panel::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(92, 55, 72, 0.24);
  border-radius: 15px;
  pointer-events: none;
}
.plaque-gem {
  position: absolute;
  z-index: 3;
  top: -31px;
  left: 50%;
  width: 52px;
  height: 63px;
  display: block;
  filter: drop-shadow(0 0 9px rgba(92, 236, 220, 0.62)) drop-shadow(0 7px 2px rgba(45, 31, 47, 0.38));
  transform: translateX(-50%);
}
.plaque-gem::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px 2px 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 245, 226, 0.48), transparent 68%);
  filter: blur(7px);
}
.plaque-gem svg { width: 100%; height: 100%; display: block; overflow: visible; }
.crystal-setting { fill: #2a2345; stroke: #d5ad55; stroke-width: 3; stroke-linejoin: round; }
.crystal-core { fill: #3aa9ae; stroke: #f2d58a; stroke-width: 1.2; stroke-linejoin: round; }
.crystal-facet { stroke: rgba(224, 255, 249, 0.38); stroke-width: 0.7; stroke-linejoin: round; }
.crystal-facet-one { fill: #9ff6e8; }
.crystal-facet-two { fill: #637ccc; }
.crystal-facet-three { fill: #3cc5bb; }
.crystal-facet-four { fill: #5a4aa2; }
.crystal-shine { fill: rgba(255, 255, 255, 0.8); }
.access-heading { position: relative; z-index: 1; text-align: center; }
.access-heading h1 { color: #38253e; font-size: clamp(2.35rem, 4.5vw, 4.2rem); }
.access-heading .lead { margin-right: auto; margin-left: auto; color: #5a4a50; }
.access-panel .eyebrow,
.method-panel .eyebrow,
.check-panel .eyebrow,
.adult-help-panel .eyebrow { color: #377f76; }

form { position: relative; z-index: 1; margin-top: 25px; }
label { display: block; margin-bottom: 9px; font-weight: 900; }
.code-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.code-chamber {
  padding: 18px;
  border: 1px solid rgba(92, 64, 59, 0.35);
  border-radius: 18px;
  background: rgba(255, 250, 231, 0.48);
  box-shadow: inset 0 2px 8px rgba(73, 47, 37, 0.1);
}
input {
  width: 100%;
  min-height: 62px;
  padding: 0 20px;
  color: #1f1b34;
  font-size: 1.18rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 3px solid #806a91;
  border-radius: 16px;
  background: linear-gradient(#fffdf6, #f8efd9);
  box-shadow: inset 0 3px 8px rgba(61, 40, 50, 0.09), 0 0 0 3px rgba(255, 249, 224, 0.42);
}
.code-chamber input { min-width: 0; padding: 0 16px; font-size: 1rem; letter-spacing: 0.06em; }
.primary-button { padding: 0 24px; color: #17142d; background: linear-gradient(180deg, #ffe39a, #edb24f); border: 2px solid #a96f29; box-shadow: inset 0 0 0 2px rgba(255, 246, 201, 0.55), 0 8px 0 #82542a, 0 14px 24px rgba(80, 43, 16, 0.18); }
.secondary-button { padding: 0 22px; color: #fbf5e9; background: #40306b; border-color: #66508e; }
.field-hint { margin: 10px 0 0; color: #514763; font-size: 0.9rem; }
.form-message { min-height: 1.5rem; margin: 7px 0 0; color: #a12f41; font-weight: 800; }
.access-remember-note { margin: 16px 0 0; color: #5d4d51; font-size: 0.82rem; font-weight: 750; text-align: center; }
.access-remember-note span { color: #257f79; }

.centered-intro { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.centered-intro p:not(.eyebrow) { color: #d5dedb; font-size: 1.08rem; }

.home-screen { padding-top: clamp(18px, 2.5vw, 34px); }
.home-sanctuary {
  position: relative;
  isolation: isolate;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 32px);
  overflow: hidden;
  border: 4px solid #766c80;
  border-radius: 36px;
  background:
    radial-gradient(circle at 12% 12%, rgba(122, 221, 203, 0.12), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(170, 116, 214, 0.15), transparent 28%),
    linear-gradient(rgba(6, 19, 29, 0.4), rgba(7, 12, 28, 0.6)),
    url("assets/web/enchanted-cobblestone-web-v1.webp");
  background-position: center, center, center, center top;
  background-size: auto, auto, auto, 630px 630px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  box-shadow:
    inset 0 0 0 5px rgba(23, 19, 41, 0.78),
    inset 0 0 70px rgba(2, 7, 18, 0.74),
    0 26px 70px rgba(3, 5, 18, 0.4);
}
.home-sanctuary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35px -18px auto;
  height: 190px;
  opacity: 0.75;
  background:
    radial-gradient(ellipse at 8% 20%, transparent 0 34%, #244a38 35% 42%, transparent 43%),
    radial-gradient(ellipse at 22% 0%, transparent 0 37%, #315c43 38% 44%, transparent 45%),
    radial-gradient(ellipse at 78% 3%, transparent 0 34%, #315c43 35% 42%, transparent 43%),
    radial-gradient(ellipse at 94% 22%, transparent 0 37%, #244a38 38% 44%, transparent 45%);
  pointer-events: none;
}
.home-sanctuary::after {
  content: "◆";
  position: absolute;
  right: 18px;
  bottom: 15px;
  color: #8ff1e2;
  font-size: 2rem;
  text-shadow: 0 0 22px #6de2d1, -1120px 0 0 #9b79dc, -1120px 0 22px #8d67cf;
  pointer-events: none;
}
.home-sanctuary .enchanted-pillar {
  top: -4%;
  bottom: -6%;
  opacity: 0.72;
}
.home-sanctuary .enchanted-pillar-right { opacity: 0.67; }
.home-hero {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  margin: 0 auto 18px;
}
.home-logo-portal {
  position: relative;
  z-index: 2;
  width: clamp(112px, 12vw, 154px);
  aspect-ratio: 1;
  margin-bottom: -19px;
  padding: 7px;
  border: 3px solid #c5a65c;
  border-radius: 50%;
  background: radial-gradient(circle, #242b59 0 55%, #14142e 57% 68%, #514068 70% 74%, #18182c 76%);
  box-shadow: 0 0 0 5px rgba(21, 18, 39, 0.88), 0 0 30px rgba(108, 227, 210, 0.26), 0 12px 26px rgba(4, 5, 17, 0.34);
}
.home-logo-portal img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.home-logo-gem {
  position: absolute;
  z-index: 3;
  top: -14px;
  left: 50%;
  color: #8ff2e3;
  font-size: 1.25rem;
  text-shadow: 0 0 15px #69dfce;
  transform: translateX(-50%);
}
.home-question-plaque {
  position: relative;
  width: min(850px, 92%);
  max-width: none;
  margin: 0;
  padding: 30px clamp(22px, 4vw, 54px) 22px;
  color: var(--ink);
  border: 3px solid #92704a;
  border-radius: 22px;
  background:
    linear-gradient(110deg, #d1ad72, #f7e6ba 8% 92%, #c49355),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(99, 61, 31, 0.04) 7px);
  box-shadow: inset 0 0 0 4px rgba(101, 65, 42, 0.17), 0 11px 0 rgba(50, 37, 45, 0.72), 0 18px 34px rgba(0, 0, 0, 0.28);
}
.home-question-plaque::before,
.home-question-plaque::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 12px;
  background:
    radial-gradient(circle at center, #70583d 0 3px, transparent 3.5px),
    linear-gradient(90deg, transparent 0 4px, #8b6c45 5px 29px, transparent 30px) center / 100% 2px no-repeat;
  transform: translateY(-50%);
}
.home-question-plaque::before { left: 20px; }
.home-question-plaque::after { right: 20px; }
.home-question-plaque .eyebrow { margin-bottom: 5px; color: #397b70; }
.home-question-plaque h1 { margin-bottom: 8px; color: #34253a; font-size: clamp(2rem, 4.2vw, 4rem); }
.home-question-plaque p:not(.eyebrow) { margin: 0; color: #5c4a50; font-size: 1rem; }

.emotion-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.emotion-card {
  position: relative;
  min-width: 0;
  min-height: 178px;
  padding: 12px 10px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: #35283b;
  text-align: center;
  border: 3px solid #84706e;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--card-accent, #8f78c8) 14%, transparent), transparent 42%),
    linear-gradient(110deg, #c6aa7c, #efe0b9 9% 91%, #b98f5b);
  box-shadow: inset 0 0 0 3px rgba(255, 250, 224, 0.38), 0 7px 0 #493b47, 0 13px 24px rgba(3, 5, 17, 0.28);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.emotion-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(92, 65, 56, 0.34);
  border-radius: 17px;
  pointer-events: none;
}
.emotion-card::after {
  content: "◆";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  color: var(--card-accent, #8f78c8);
  font-size: 0.8rem;
  text-shadow: 0 0 10px color-mix(in srgb, var(--card-accent, #8f78c8) 65%, transparent);
  pointer-events: none;
}
.emotion-card:hover { transform: translateY(-4px); border-color: var(--card-accent, #ffda8d); box-shadow: inset 0 0 0 3px rgba(255, 250, 224, 0.48), 0 9px 0 #493b47, 0 18px 34px rgba(3, 5, 17, 0.38); }
.emotion-portrait {
  position: relative;
  width: 108px;
  height: 108px;
  flex: none;
  overflow: hidden;
  display: block;
  border: 4px solid var(--card-accent, #8f78c8);
  border-radius: 50%;
  background: #17152d;
  box-shadow: inset 0 0 0 3px #e9d69f, 0 0 0 3px #5f514d, 0 0 18px color-mix(in srgb, var(--card-accent, #8f78c8) 36%, transparent);
}
.emotion-portrait::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -18px 24px rgba(5, 5, 18, 0.38), inset 0 0 12px rgba(255, 238, 177, 0.17); pointer-events: none; }
.emotion-portrait img {
  width: 188%;
  max-width: none;
  height: 104%;
  display: block;
  object-fit: cover;
  object-position: center 45%;
  transform: translateX(-3%);
}
.emotion-card[data-art-style="cutout"] .emotion-portrait {
  background:
    radial-gradient(circle at 50% 40%, rgba(240, 112, 44, 0.3), transparent 48%),
    radial-gradient(circle at 50% 85%, rgba(49, 171, 157, 0.22), transparent 54%),
    #15162f;
}
.emotion-card[data-art-style="cutout"] .emotion-portrait img {
  position: absolute;
  top: -5%;
  left: 50%;
  width: 164%;
  height: auto;
  object-fit: contain;
  object-position: center top;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.42));
  transform: translateX(-50%);
  animation: guide-card-idle var(--guide-idle-duration, 8.4s) cubic-bezier(0.45, 0, 0.35, 1) infinite;
  backface-visibility: hidden;
  will-change: transform;
}
.emotion-card[data-emotion="embarrassed"] { --guide-idle-y: -1.5%; --guide-idle-r: -0.45deg; --guide-idle-s: 1.014; --guide-idle-duration: 8.2s; }
.emotion-card[data-emotion="lonely"] { --guide-idle-y: -1.8%; --guide-idle-r: 0.32deg; --guide-idle-s: 1.012; --guide-idle-duration: 8.8s; }
.emotion-card[data-emotion="scared"] { --guide-idle-y: -1.1%; --guide-idle-r: -0.25deg; --guide-idle-s: 1.009; --guide-idle-duration: 9.2s; }
.emotion-card[data-emotion="disappointed"] { --guide-idle-y: -2.2%; --guide-idle-r: 0.48deg; --guide-idle-s: 1.016; --guide-idle-duration: 7.8s; }
.emotion-card[data-emotion="overwhelmed"] { --guide-idle-y: -1.25%; --guide-idle-r: -0.2deg; --guide-idle-s: 1.012; --guide-idle-duration: 9.4s; }
.emotion-card[data-emotion="confused"] { --guide-idle-y: -1.6%; --guide-idle-r: -0.7deg; --guide-idle-s: 1.013; --guide-idle-duration: 8.6s; }
.emotion-card[data-emotion="mad"][data-art-style="cutout"] .emotion-portrait img { top: -3%; left: 51%; width: 164%; }
.emotion-card[data-emotion="embarrassed"][data-art-style="cutout"] .emotion-portrait img { top: 0; left: 50%; width: 154%; }
.emotion-card[data-emotion="lonely"][data-art-style="cutout"] .emotion-portrait img { top: -1%; left: 56%; width: 158%; }
.emotion-card[data-emotion="scared"][data-art-style="cutout"] .emotion-portrait img { top: -1%; left: 60%; width: 158%; }
.emotion-card[data-emotion="disappointed"][data-art-style="cutout"] .emotion-portrait img { top: -1%; left: 62%; width: 144%; }
.emotion-card[data-emotion="overwhelmed"][data-art-style="cutout"] .emotion-portrait img { top: -1%; left: 50%; width: 160%; }
.emotion-card[data-emotion="confused"][data-art-style="cutout"] .emotion-portrait img { top: 0; left: 45%; width: 150%; }
@keyframes guide-card-idle {
  0%, 100% { transform: translate3d(-50%, 0, 0) rotate(0) scale(1); }
  50% { transform: translate3d(-50%, var(--guide-idle-y, -1.4%), 0) rotate(var(--guide-idle-r, 0.25deg)) scale(var(--guide-idle-s, 1.012)); }
}
.emotion-card[data-emotion="sad"][data-art-style="cutout"] .emotion-portrait {
  background:
    radial-gradient(circle at 48% 34%, rgba(189, 161, 244, 0.38), transparent 44%),
    radial-gradient(circle at 50% 88%, rgba(96, 222, 218, 0.24), transparent 50%),
    #151630;
}
.emotion-card[data-emotion="sad"][data-art-style="cutout"] .emotion-portrait img {
  top: 0;
  left: 56%;
  width: 150%;
}
.emotion-card[data-emotion="worried"][data-art-style="cutout"] .emotion-portrait img {
  top: -5%;
  left: 50%;
  width: 142%;
  animation: flick-card-idle 7.2s cubic-bezier(0.45, 0, 0.35, 1) infinite;
  will-change: transform;
}
.emotion-card[data-emotion="frustrated"][data-art-style="cutout"] .emotion-portrait img {
  top: -1%;
  left: 56%;
  width: 152%;
  animation: riven-card-idle 7.8s cubic-bezier(0.45, 0, 0.35, 1) infinite;
  backface-visibility: hidden;
  will-change: transform;
}
@keyframes flick-card-idle {
  0%, 100% { transform: translate(-50%, 0) rotate(-0.35deg) scale(1); }
  48% { transform: translate(-50%, -2.2%) rotate(0.35deg) scale(1.018); }
}
@keyframes riven-card-idle {
  0%, 100% { transform: translate3d(-50%, 0, 0); }
  52% { transform: translate3d(-50%, -1.8%, 0); }
}
.emotion-copy { position: relative; z-index: 1; }
.emotion-copy strong { display: block; color: color-mix(in srgb, var(--card-accent, #705377) 78%, #2d2030); font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.08; }
.emotion-copy small { display: block; margin-top: 3px; color: #604f50; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.07em; line-height: 1.15; text-transform: uppercase; }

.two-column-layout {
  min-height: 650px;
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(270px, 0.68fr) minmax(540px, 1.32fr);
  align-items: stretch;
  gap: clamp(22px, 3vw, 34px);
}
.dragon-card {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3.2vw, 42px) 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid #665d76;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--emotion-accent) 25%, transparent), transparent 34%),
    linear-gradient(160deg, rgba(19, 47, 48, 0.97), rgba(18, 18, 48, 0.98));
  box-shadow: inset 0 0 0 4px rgba(15, 12, 31, 0.68), inset 0 0 45px rgba(2, 6, 16, 0.52), 0 16px 35px rgba(3, 5, 18, 0.36);
}
.guide-portal-card::before {
  content: "✦";
  position: absolute;
  top: 18px;
  color: #f6cf79;
  font-size: 1rem;
  text-shadow: 0 0 15px rgba(246, 207, 121, 0.7);
}
.dragon-image-wrap {
  position: relative;
  width: min(100%, 286px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  overflow: hidden;
  border: 5px solid var(--emotion-accent);
  border-radius: 50%;
  background: #17152d;
  box-shadow: inset 0 0 0 4px #e9d69f, 0 0 0 5px #4f4858, 0 0 34px color-mix(in srgb, var(--emotion-accent) 46%, transparent);
}
.dragon-image-wrap img { width: 188%; max-width: none; height: 104%; display: block; object-fit: cover; object-position: center 45%; transform: translateX(-3%); }
.guide-portal-card[data-art-style="cutout"] .dragon-image-wrap {
  background:
    radial-gradient(circle at 50% 38%, rgba(239, 98, 38, 0.34), transparent 47%),
    radial-gradient(circle at 50% 88%, rgba(64, 190, 174, 0.24), transparent 48%),
    linear-gradient(155deg, #252343, #10162f);
}
.guide-portal-card[data-art-style="cutout"] .dragon-image-wrap img {
  position: absolute;
  inset: 2.5%;
  width: 95%;
  height: 95%;
  max-width: 95%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.42));
  transform: translate(var(--frame-x, 0), var(--frame-y, 0)) scale(var(--frame-scale, 1));
}
.guide-portal-card[data-guide="sad"] .dragon-image-wrap {
  background:
    radial-gradient(circle at 48% 34%, rgba(189, 161, 244, 0.4), transparent 44%),
    radial-gradient(circle at 50% 90%, rgba(96, 222, 218, 0.3), transparent 48%),
    linear-gradient(155deg, #28244d, #10172f);
}
.guide-portal-card[data-guide="worried"] .dragon-image-wrap {
  background:
    radial-gradient(circle at 52% 46%, rgba(229, 185, 68, 0.34), transparent 48%),
    linear-gradient(155deg, #22213b, #0e142c);
}
.guide-portal-card[data-guide="frustrated"] .dragon-image-wrap {
  background:
    radial-gradient(circle at 48% 42%, rgba(69, 204, 218, 0.32), transparent 46%),
    radial-gradient(circle at 68% 58%, rgba(129, 94, 223, 0.26), transparent 44%),
    linear-gradient(155deg, #121c39, #04071c);
}
.frame-transition {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--frame-transition-duration, 170ms) ease-in-out;
}
.frame-transition.is-visible { opacity: 1; }
.guide-portal-card[data-art-style="cutout"] .dragon-image-wrap .frame-transition {
  /* Only Fyrin's eyelids are revealed; the fixed base image supplies the body. */
  -webkit-mask-image: radial-gradient(ellipse 24% 9% at 43% 32.5%, #000 0 58%, rgba(0, 0, 0, 0.76) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 24% 9% at 43% 32.5%, #000 0 58%, rgba(0, 0, 0, 0.76) 72%, transparent 100%);
  transform: translate(0, 0.85%) scaleX(0.976);
  transform-origin: 43% 33%;
}
.riven-situation-effect {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  pointer-events: none;
}
.guide-portal-card[data-guide="frustrated"] .riven-situation-effect { display: block; }
.riven-crystal-glow {
  position: absolute;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(221, 251, 255, 0.78), rgba(69, 219, 239, 0.34) 38%, rgba(132, 91, 231, 0.16) 58%, transparent 74%);
  filter: blur(1px);
}
.riven-crystal-glow-forehead { left: 35%; top: 26%; width: 14%; aspect-ratio: 1; }
.riven-crystal-glow-chest { left: 37%; top: 55%; width: 15%; aspect-ratio: 1; }
.guide-portal-card.is-riven-greeting .riven-crystal-glow-forehead {
  animation: riven-situation-crystal-glow 2.6s ease-in-out 1 both;
}
.guide-portal-card.is-riven-greeting .riven-crystal-glow-chest {
  animation: riven-situation-crystal-glow 2.6s 120ms ease-in-out 1 both;
}
.guide-portal-card.is-riven-greeting[data-guide="frustrated"] #situationGuideImage {
  animation: riven-situation-release 3.6s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
  backface-visibility: hidden;
  transform-origin: 50% 72%;
  will-change: transform;
}
@keyframes riven-situation-crystal-glow {
  0%, 100% { opacity: 0; transform: scale(0.72); }
  32% { opacity: 0.22; transform: scale(0.92); }
  56% { opacity: 0.48; transform: scale(1.08); }
  82% { opacity: 0.16; transform: scale(0.94); }
}
@keyframes riven-situation-release {
  0%, 100% { transform: translate3d(0, 0, 0); }
  38% { transform: translate3d(0, -1.2%, 0); }
  72% { transform: translate3d(0, 0.4%, 0); }
}
.guide-portal-card[data-guide="embarrassed"] { --guide-greet-x: -0.35%; --guide-greet-y: -1.4%; --guide-greet-r: -0.55deg; --guide-greet-s: 1.012; --guide-greet-origin: 50% 78%; }
.guide-portal-card[data-guide="lonely"] { --guide-greet-x: 0.25%; --guide-greet-y: -1.8%; --guide-greet-r: 0.35deg; --guide-greet-s: 1.012; --guide-greet-origin: 50% 76%; }
.guide-portal-card[data-guide="scared"] { --guide-greet-x: -0.2%; --guide-greet-y: -1%; --guide-greet-r: -0.28deg; --guide-greet-s: 1.009; --guide-greet-origin: 50% 82%; }
.guide-portal-card[data-guide="disappointed"] { --guide-greet-x: 0.3%; --guide-greet-y: -2.2%; --guide-greet-r: 0.6deg; --guide-greet-s: 1.015; --guide-greet-origin: 50% 74%; }
.guide-portal-card[data-guide="overwhelmed"] { --guide-greet-x: 0; --guide-greet-y: -1.25%; --guide-greet-r: -0.2deg; --guide-greet-s: 1.011; --guide-greet-origin: 50% 82%; }
.guide-portal-card[data-guide="confused"] { --guide-greet-x: 0.45%; --guide-greet-y: -1.55%; --guide-greet-r: -0.75deg; --guide-greet-s: 1.012; --guide-greet-origin: 50% 80%; }
.guide-portal-card.is-guide-greeting[data-art-style="cutout"] #situationGuideImage {
  animation: guide-situation-arrival 4.6s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
  backface-visibility: hidden;
  transform-origin: var(--guide-greet-origin, 50% 78%);
  will-change: transform;
}
@keyframes guide-situation-arrival {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  38% { transform: translate3d(var(--guide-greet-x, 0), var(--guide-greet-y, -1.4%), 0) rotate(var(--guide-greet-r, 0.25deg)) scale(var(--guide-greet-s, 1.012)); }
  72% { transform: translate3d(0, 0.35%, 0) rotate(0) scale(1.003); }
}
.valuna-situation-effect {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  pointer-events: none;
}
.guide-portal-card[data-guide="sad"] .valuna-situation-effect { display: block; }
.valuna-situation-drop {
  position: absolute;
  left: 37%;
  top: 38%;
  width: 17px;
  height: 24px;
  opacity: 0;
  border-radius: 70% 30% 62% 38% / 72% 34% 66% 28%;
  background: linear-gradient(145deg, #fff8ff 8%, #8fe9ef 52%, #9479d7 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 16px rgba(143, 233, 239, 0.92);
  transform: rotate(45deg) scale(0.7);
}
.valuna-situation-ripple {
  position: absolute;
  left: 22%;
  bottom: 2%;
  width: 56%;
  height: 10%;
  opacity: 0;
  border: 3px solid rgba(169, 240, 240, 0.95);
  border-radius: 50%;
  transform: scale(0.35);
}
.valuna-situation-ripple-two { border-color: rgba(164, 135, 225, 0.72); }
.valuna-situation-glint {
  position: absolute;
  right: 22%;
  top: 28%;
  opacity: 0;
  color: #fff2b8;
  font-size: 1.05rem;
  text-shadow: 0 0 10px rgba(255, 242, 184, 0.82);
}
.guide-portal-card.is-valuna-greeting[data-guide="sad"] #situationGuideImage {
  animation: valuna-greeting-breathe 4.6s ease-in-out 1 both;
}
.guide-portal-card.is-valuna-greeting .valuna-situation-drop {
  animation: valuna-situation-drop 4.6s linear 1 both;
}
.guide-portal-card.is-valuna-greeting .valuna-situation-ripple-one {
  animation: valuna-situation-ripple 4.6s ease-out 1 both;
}
.guide-portal-card.is-valuna-greeting .valuna-situation-ripple-two {
  animation: valuna-situation-ripple 4.6s ease-out 180ms 1 both;
}
.guide-portal-card.is-valuna-greeting .valuna-situation-glint {
  animation: valuna-situation-glint 4.6s ease-in-out 1 both;
}
@keyframes valuna-greeting-breathe {
  0%, 100% { transform: translate(0, 0) scale(1); }
  48% { transform: translate(0, -1.2%) scale(1.012); }
}
@keyframes valuna-situation-drop {
  0%, 10% { top: 38%; opacity: 0; transform: rotate(45deg) scale(0.62); }
  18% { opacity: 1; }
  62% { top: 82%; opacity: 0.92; transform: rotate(45deg) scale(0.9); }
  68%, 100% { top: 85%; opacity: 0; transform: rotate(45deg) scale(0.72); }
}
@keyframes valuna-situation-ripple {
  0%, 58% { opacity: 0; transform: scale(0.35); }
  68% { opacity: 0.82; }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes valuna-situation-glint {
  0%, 48%, 100% { opacity: 0; transform: scale(0.7) rotate(0deg); }
  62%, 76% { opacity: 0.9; transform: scale(1) rotate(16deg); }
}
.flick-situation-effect {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  pointer-events: none;
}
.guide-portal-card[data-guide="worried"] .flick-situation-effect { display: block; }
.flick-worry-spark,
.flick-settled-star {
  position: absolute;
  opacity: 0;
  color: #fff0a7;
  line-height: 1;
  text-shadow: 0 0 8px #ffca3a, 0 0 18px rgba(255, 202, 58, 0.88);
  transform-origin: center;
}
.flick-worry-spark-one { left: 20%; top: 23%; font-size: 1.15rem; }
.flick-worry-spark-two { right: 17%; top: 27%; font-size: 0.88rem; }
.flick-worry-spark-three { right: 23%; top: 48%; font-size: 0.72rem; }
.flick-tail-glow {
  position: absolute;
  left: 68%;
  top: 76%;
  width: 18%;
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 173, 0.86), rgba(255, 190, 47, 0.34) 40%, transparent 72%);
  filter: blur(1px);
  transform: scale(0.55);
}
.flick-settled-star { left: 76%; top: 82%; font-size: 1.05rem; }
.guide-portal-card.is-flick-greeting[data-guide="worried"] #situationGuideImage {
  animation: flick-greeting-breathe 5.2s ease-in-out 1 both;
}
.guide-portal-card.is-flick-greeting .flick-worry-spark-one {
  animation: flick-situation-worry-one 5.2s ease-in-out 1 both;
}
.guide-portal-card.is-flick-greeting .flick-worry-spark-two {
  animation: flick-situation-worry-two 5.2s ease-in-out 1 both;
}
.guide-portal-card.is-flick-greeting .flick-worry-spark-three {
  animation: flick-situation-worry-three 5.2s ease-in-out 1 both;
}
.guide-portal-card.is-flick-greeting .flick-tail-glow {
  animation: flick-situation-tail-glow 5.2s ease-out 1 both;
}
.guide-portal-card.is-flick-greeting .flick-settled-star {
  animation: flick-situation-settled-star 5.2s ease-in-out 1 both;
}
@keyframes flick-greeting-breathe {
  0%, 100% { transform: translate(0, 0) scale(1); }
  38% { transform: translate(0, 0.5%) scale(0.992); }
  72% { transform: translate(0, -0.55%) scale(1.006); }
}
@keyframes flick-situation-worry-one {
  0%, 8%, 70%, 100% { opacity: 0; transform: translate(0, 0) scale(0.55) rotate(0deg); }
  18% { opacity: 0.95; transform: translate(5px, -8px) scale(1) rotate(18deg); }
  34% { opacity: 0.78; transform: translate(-8px, 6px) scale(0.8) rotate(-12deg); }
  52% { opacity: 0.92; transform: translate(9px, 1px) scale(1.06) rotate(24deg); }
}
@keyframes flick-situation-worry-two {
  0%, 12%, 72%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  22% { opacity: 0.82; transform: translate(-8px, 5px) scale(0.9) rotate(-20deg); }
  40% { opacity: 1; transform: translate(6px, -7px) scale(1.08) rotate(18deg); }
  58% { opacity: 0.78; transform: translate(-4px, 7px) scale(0.82) rotate(6deg); }
}
@keyframes flick-situation-worry-three {
  0%, 16%, 68%, 100% { opacity: 0; transform: translate(0, 0) scale(0.45); }
  28% { opacity: 0.84; transform: translate(7px, -6px) scale(0.92); }
  46% { opacity: 0.66; transform: translate(-6px, 5px) scale(0.76); }
  58% { opacity: 0.9; transform: translate(4px, -2px) scale(1); }
}
@keyframes flick-situation-tail-glow {
  0%, 52%, 100% { opacity: 0; transform: scale(0.55); }
  72% { opacity: 0.8; transform: scale(1.08); }
  88% { opacity: 0.42; transform: scale(0.9); }
}
@keyframes flick-situation-settled-star {
  0%, 64%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  76%, 90% { opacity: 1; transform: scale(1) rotate(22deg); }
}
.dragon-image-wrap::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -30px 38px rgba(5, 5, 18, 0.45), inset 0 0 18px rgba(255, 238, 177, 0.18); pointer-events: none; }
.art-label { position: absolute; z-index: 2; right: 50%; bottom: 12px; width: max-content; padding: 5px 9px; color: #efe1cd; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(17, 12, 28, 0.72); border-radius: 999px; transform: translateX(50%); }
.dragon-copy { max-width: 310px; padding: 26px 4px 0; text-align: center; }
.dragon-copy .eyebrow { color: #85d9cf; }
.dragon-copy h2 { margin-bottom: 9px; color: var(--emotion-accent); font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
.dragon-copy p:last-child { margin: 0; color: #e8dfd7; font-size: 0.98rem; }

.content-panel { padding: clamp(28px, 4vw, 50px); border-radius: var(--radius-xl); }
.situation-panel {
  position: relative;
  border: 3px solid #92704a;
  border-radius: 24px;
  background:
    linear-gradient(110deg, #d1ad72, #f7e6ba 6% 94%, #c49355),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(99, 61, 31, 0.04) 7px);
  box-shadow: inset 0 0 0 5px rgba(101, 65, 42, 0.16), 0 11px 0 rgba(50, 37, 45, 0.72), 0 24px 44px rgba(0, 0, 0, 0.3);
}
.situation-panel::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(92, 55, 72, 0.24);
  border-radius: 15px;
  pointer-events: none;
}
.situation-heading { position: relative; z-index: 1; text-align: center; }
.situation-heading h1 { color: #38253e; font-size: clamp(2.55rem, 4.5vw, 4.3rem); }
.content-panel .screen-intro p:not(.eyebrow) { color: #5a4f5f; }
.choice-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-grid button {
  min-height: 74px;
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  color: #28213b;
  font-weight: 850;
  text-align: left;
  border: 2px solid #a98d68;
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 253, 246, 0.94), rgba(241, 223, 185, 0.92));
  box-shadow: inset 0 0 0 2px rgba(255, 250, 224, 0.5), 0 4px 0 rgba(99, 71, 60, 0.45);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.choice-grid button:hover { transform: translateY(-2px); border-color: var(--emotion-accent); background: white; box-shadow: inset 0 0 0 2px rgba(255, 250, 224, 0.6), 0 6px 0 color-mix(in srgb, var(--emotion-accent) 42%, #60483e); }
.choice-grid button span:last-child { color: var(--emotion-accent); font-size: 1.3rem; font-weight: 900; }

.mission-layout { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 22px; }
.mission-guide-card {
  grid-row: span 2;
  overflow: hidden;
  min-height: 650px;
  display: grid;
  grid-template-rows: minmax(390px, 1fr) auto;
  border: 1px solid var(--emotion-accent);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(68, 31, 44, 0.97), rgba(25, 21, 51, 0.97));
  box-shadow: var(--shadow);
}
.mission-art-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.mission-character-scene {
  position: absolute;
  z-index: 2;
  inset: clamp(20px, 3vw, 40px);
  width: calc(100% - clamp(40px, 6vw, 80px));
  height: calc(100% - clamp(40px, 6vw, 80px));
  display: block;
  overflow: visible;
}
.mission-guide-card[data-art-style="cutout"] .mission-art-stage {
  background:
    radial-gradient(circle at 50% 38%, rgba(239, 98, 38, 0.36), transparent 42%),
    radial-gradient(circle at 50% 88%, rgba(64, 190, 174, 0.24), transparent 48%),
    linear-gradient(155deg, #252343, #10162f);
}
.mission-guide-card[data-guide="sad"] .mission-art-stage {
  background:
    radial-gradient(circle at 48% 32%, rgba(170, 139, 232, 0.38), transparent 43%),
    radial-gradient(ellipse at 50% 92%, rgba(90, 220, 216, 0.34), transparent 46%),
    linear-gradient(155deg, #29254d, #10182f);
}
.mission-guide-card[data-guide="worried"] .mission-art-stage {
  background:
    radial-gradient(circle at 52% 42%, rgba(229, 185, 68, 0.16), transparent 48%),
    #090f23;
}
.mission-guide-card[data-guide="frustrated"] .mission-art-stage {
  background:
    radial-gradient(circle at 50% 44%, rgba(67, 190, 218, 0.16), transparent 48%),
    #01031a;
}
.mission-character-scene > .fyrin-frame {
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.36));
}
.mission-blink-layer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 170ms ease-in-out;
  transform: translateY(0.85%) scaleX(0.976);
  transform-box: fill-box;
  transform-origin: 43% 32.5%;
}
.mission-blink-layer.is-visible { opacity: 1; }
.riven-crystal-effect {
  opacity: 0;
  pointer-events: none;
}
.riven-crystal-halo { fill: #74eef1; }
.riven-crystal-halo-chest { fill: #a786ff; }
.mission-guide-card.is-riven-settle-sequence .riven-crystal-effect {
  animation: riven-mission-crystal-glow 4.2s ease-in-out 1 both;
}
.mission-guide-card[data-guide="frustrated"].is-riven-settle-sequence #missionGuideImage {
  animation: riven-mission-release 4.2s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
  backface-visibility: hidden;
  transform-box: view-box;
  transform-origin: 50% 76%;
  will-change: transform;
}
@keyframes riven-mission-crystal-glow {
  0%, 100% { opacity: 0; }
  24% { opacity: 0.08; }
  52% { opacity: 0.38; }
  76% { opacity: 0.14; }
}
@keyframes riven-mission-release {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(0, -7px, 0); }
  70% { transform: translate3d(0, 3px, 0); }
}
.mission-guide-card[data-guide="embarrassed"] { --guide-mission-x: -4px; --guide-mission-y: -8px; --guide-mission-r: -0.6deg; --guide-mission-s: 1.012; --guide-mission-origin: 50% 78%; }
.mission-guide-card[data-guide="lonely"] { --guide-mission-x: 3px; --guide-mission-y: -10px; --guide-mission-r: 0.4deg; --guide-mission-s: 1.012; --guide-mission-origin: 50% 76%; }
.mission-guide-card[data-guide="scared"] { --guide-mission-x: -2px; --guide-mission-y: -6px; --guide-mission-r: -0.28deg; --guide-mission-s: 1.009; --guide-mission-origin: 50% 82%; }
.mission-guide-card[data-guide="disappointed"] { --guide-mission-x: 3px; --guide-mission-y: -12px; --guide-mission-r: 0.62deg; --guide-mission-s: 1.016; --guide-mission-origin: 50% 74%; }
.mission-guide-card[data-guide="overwhelmed"] { --guide-mission-x: 0; --guide-mission-y: -7px; --guide-mission-r: -0.22deg; --guide-mission-s: 1.012; --guide-mission-origin: 50% 82%; }
.mission-guide-card[data-guide="confused"] { --guide-mission-x: 4px; --guide-mission-y: -8px; --guide-mission-r: -0.8deg; --guide-mission-s: 1.013; --guide-mission-origin: 50% 80%; }
.mission-guide-card.is-guide-motion-sequence[data-art-style="cutout"] #missionGuideImage {
  animation: guide-mission-motion 4.8s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
  backface-visibility: hidden;
  transform-box: view-box;
  transform-origin: var(--guide-mission-origin, 50% 78%);
  will-change: transform;
}
@keyframes guide-mission-motion {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  36% { transform: translate3d(var(--guide-mission-x, 0), var(--guide-mission-y, -8px), 0) rotate(var(--guide-mission-r, 0.3deg)) scale(var(--guide-mission-s, 1.012)); }
  72% { transform: translate3d(0, 3px, 0) rotate(0) scale(1.003); }
}
.mission-cooling-effect {
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.mission-cooling-plume {
  transform-box: view-box;
  transform-origin: 402px 511px;
  will-change: transform;
}
.mission-cooling-jet {
  fill: none;
  stroke: url("#coolingJetGradient");
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(95, 245, 238, 0.92));
  will-change: opacity, stroke-width;
}
.mission-art-stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 48% 58%, rgba(91, 241, 218, 0.42), transparent 9%);
  pointer-events: none;
}
.mission-guide-card.is-cooling-sequence .mission-cooling-effect {
  animation: cooling-effect-fade 5.2s ease-in-out 1 both;
}
.mission-guide-card.is-cooling-sequence .mission-cooling-plume {
  animation: cooling-plume-drift 5.2s linear 1 both;
}
.mission-guide-card.is-cooling-sequence .mission-cooling-jet {
  animation: cooling-jet-breath-pulse 1.35s ease-in-out infinite;
}
.mission-guide-card.is-cooling-sequence .mission-blink-layer {
  animation: cooling-settle-blink 5.2s ease-in-out 1 both;
}
.mission-guide-card.is-cooling-sequence .mission-art-stage::after {
  animation: cooling-heart-glow 5.2s ease-in-out 1;
}
@keyframes cooling-effect-fade {
  0% { opacity: 0.08; }
  8% { opacity: 0.7; }
  18% { opacity: 0.96; }
  62% { opacity: 0.82; }
  88% { opacity: 0.14; }
  100% { opacity: 0; }
}
@keyframes cooling-plume-drift {
  0% { transform: translateX(0) scale(0.96); }
  100% { transform: translateX(-8px) scale(1.06); }
}
@keyframes cooling-jet-breath-pulse {
  0%, 100% { opacity: 0.78; stroke-width: 8; }
  50% { opacity: 1; stroke-width: 10; }
}
@keyframes cooling-settle-blink {
  0%, 82% { opacity: 0; }
  87%, 91% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes cooling-heart-glow {
  0% { opacity: 0.08; }
  26% { opacity: 0.35; }
  64% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
.valuna-moonwater-ripples,
.valuna-moonwater-foreground { pointer-events: none; }
.valuna-moonwater-ripple {
  fill: none;
  stroke: url("#moonwaterRippleGradient");
  stroke-width: 14;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.valuna-moonwater-drop {
  fill: url("#moonwaterDropGradient");
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.valuna-moonwater-wave {
  fill: none;
  stroke: url("#moonwaterRippleGradient");
  stroke-width: 12;
  stroke-linecap: round;
  opacity: 0;
}
.valuna-moonwater-glint {
  fill: #b9f7f1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.valuna-moonwater-star {
  fill: #fff0ae;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.mission-guide-card[data-guide="sad"].is-valuna-tide-sequence #missionGuideImage {
  transform-box: view-box;
  transform-origin: 50% 56%;
  animation: valuna-mission-breathe 5.8s ease-in-out 1 both;
}
.mission-guide-card.is-valuna-tide-sequence .valuna-moonwater-drop {
  animation: valuna-mission-drop 5.8s linear 1 both;
}
.mission-guide-card.is-valuna-tide-sequence .valuna-moonwater-ripple-one {
  animation: valuna-mission-ripple 5.8s ease-out 1 both;
}
.mission-guide-card.is-valuna-tide-sequence .valuna-moonwater-ripple-two {
  animation: valuna-mission-ripple 5.8s ease-out 180ms 1 both;
}
.mission-guide-card.is-valuna-tide-sequence .valuna-moonwater-wave {
  animation: valuna-mission-wave 5.8s ease-in-out 1 both;
}
.mission-guide-card.is-valuna-tide-sequence .valuna-glint-one {
  animation: valuna-mission-glint 5.8s ease-in-out 1 both;
}
.mission-guide-card.is-valuna-tide-sequence .valuna-glint-two {
  animation: valuna-mission-glint 5.8s ease-in-out 280ms 1 both;
}
.mission-guide-card.is-valuna-tide-sequence .valuna-moonwater-star {
  animation: valuna-mission-star 5.8s ease-in-out 1 both;
}
@keyframes valuna-mission-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.012); }
}
@keyframes valuna-mission-drop {
  0%, 9% { opacity: 0; transform: translate(0, 0) scale(0.62); }
  16% { opacity: 1; }
  61% { opacity: 0.94; transform: translate(-14px, 680px) scale(0.9); }
  68%, 100% { opacity: 0; transform: translate(-16px, 700px) scale(0.7); }
}
@keyframes valuna-mission-ripple {
  0%, 57% { opacity: 0; transform: scale(0.34); }
  66% { opacity: 0.88; }
  100% { opacity: 0; transform: scale(1.2); }
}
@keyframes valuna-mission-wave {
  0%, 54%, 100% { opacity: 0; stroke-dasharray: 0 1100; }
  66% { opacity: 0.9; }
  86% { opacity: 0.66; stroke-dasharray: 1100 0; }
}
@keyframes valuna-mission-glint {
  0%, 38%, 100% { opacity: 0; transform: scale(0.55); }
  52%, 76% { opacity: 0.9; transform: scale(1); }
}
@keyframes valuna-mission-star {
  0%, 55%, 100% { opacity: 0; transform: scale(0.45) rotate(0deg); }
  70%, 84% { opacity: 0.86; transform: scale(1) rotate(22deg); }
}
.flick-worry-effect { pointer-events: none; }
.flick-mission-tail-halo {
  fill: #ffd75e;
  opacity: 0;
  filter: blur(28px);
  transform-box: fill-box;
  transform-origin: center;
}
.flick-mission-settle-ring {
  fill: none;
  stroke: rgba(255, 231, 135, 0.88);
  stroke-width: 8;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.flick-mission-worry-star,
.flick-mission-calm-star {
  fill: #fff0a7;
  stroke: #e5a72c;
  stroke-width: 4;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 205, 66, 0.9));
  transform-box: view-box;
  transform-origin: center;
}
.flick-mission-worry-star-one { --flick-hop-x: 24px; --flick-hop-y: -18px; --flick-return-x: -13px; --flick-return-y: 10px; --flick-settle-x: 750px; --flick-settle-y: 560px; }
.flick-mission-worry-star-two { --flick-hop-x: -20px; --flick-hop-y: 22px; --flick-return-x: 11px; --flick-return-y: -12px; --flick-settle-x: 160px; --flick-settle-y: 550px; }
.flick-mission-worry-star-three { --flick-hop-x: 18px; --flick-hop-y: -24px; --flick-return-x: -10px; --flick-return-y: 13px; --flick-settle-x: 100px; --flick-settle-y: 310px; }
.mission-guide-card[data-guide="worried"].is-flick-worry-sequence #missionGuideImage {
  transform-box: view-box;
  transform-origin: 50% 58%;
  animation: flick-mission-breathe 6s ease-in-out 1 both;
}
.mission-guide-card.is-flick-worry-sequence .flick-mission-worry-star {
  animation: flick-mission-worry-settle 6s ease-in-out 1 both;
}
.mission-guide-card.is-flick-worry-sequence .flick-mission-tail-halo {
  animation: flick-mission-tail-glow 6s ease-out 1 both;
}
.mission-guide-card.is-flick-worry-sequence .flick-mission-settle-ring {
  animation: flick-mission-settle-ring 6s ease-out 1 both;
}
.mission-guide-card.is-flick-worry-sequence .flick-mission-calm-star {
  animation: flick-mission-calm-star 6s ease-in-out 1 both;
}
@keyframes flick-mission-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(4px) scale(0.994); }
  72% { transform: translateY(-5px) scale(1.006); }
}
@keyframes flick-mission-worry-settle {
  0%, 8%, 78%, 100% { opacity: 0; transform: translate(0, 0) scale(0.45) rotate(0deg); }
  18% { opacity: 0.96; transform: translate(var(--flick-hop-x), var(--flick-hop-y)) scale(1) rotate(20deg); }
  38% { opacity: 0.76; transform: translate(0, 12px) scale(0.78) rotate(-14deg); }
  54% { opacity: 0.94; transform: translate(var(--flick-return-x), var(--flick-return-y)) scale(1.04) rotate(28deg); }
  70% { opacity: 0.9; transform: translate(var(--flick-settle-x), var(--flick-settle-y)) scale(0.62) rotate(46deg); }
}
@keyframes flick-mission-tail-glow {
  0%, 52%, 100% { opacity: 0; transform: scale(0.55); }
  72% { opacity: 0.58; transform: scale(1.08); }
  88% { opacity: 0.3; transform: scale(0.92); }
}
@keyframes flick-mission-settle-ring {
  0%, 62%, 100% { opacity: 0; transform: scale(0.35); }
  76% { opacity: 0.82; transform: scale(0.86); }
  92% { opacity: 0.12; transform: scale(1.3); }
}
@keyframes flick-mission-calm-star {
  0%, 65%, 100% { opacity: 0; transform: scale(0.35) rotate(0deg); }
  78%, 91% { opacity: 1; transform: scale(1) rotate(24deg); }
}
.mission-guide-copy { padding: 24px 28px 28px; }
.mission-guide-card h1 { margin-bottom: 10px; color: var(--emotion-accent); font-size: clamp(2.5rem, 4vw, 4.2rem); }
.mission-guide-card p:last-child { margin-bottom: 0; color: #e8e0d9; }
.temporary-title { display: inline-block; margin: 0 0 14px; padding: 6px 9px; color: #281b35; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; background: #ffd784; }
.episode-situation { margin-bottom: 12px; color: #f7eadc; }
.episode-situation strong { color: var(--emotion-accent); }

.player-panel { padding: 24px; border-radius: var(--radius-lg); }
.player-topline { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; color: #50465c; font-size: 0.9rem; font-weight: 850; }
.progress-track { overflow: hidden; height: 14px; border-radius: 999px; background: #d6c7ac; box-shadow: inset 0 2px 6px rgba(58, 40, 31, 0.18); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--emotion-accent), #ffcf6b); transition: width 400ms linear; }
.player-controls { margin-top: 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.restart-button { padding: 0 18px; color: #4f4362; border-color: #baa7c4; background: transparent; }
.play-button {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  color: #fff8e8;
  font-weight: 900;
  border: 5px solid #ffd27d;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--emotion-accent), #51305f);
  box-shadow: 0 14px 28px rgba(123, 57, 55, 0.28), inset 0 0 20px rgba(255, 172, 74, 0.28);
  cursor: pointer;
}
.play-button span:first-child { font-size: 1.75rem; line-height: 1; }
.play-button span:last-child { margin-top: 5px; font-size: 0.75rem; }
.check-button { padding: 0 18px; color: white; border-color: #4b8b79; background: #246c5c; }
.check-button:disabled { color: #615b66; border-color: #b9aa91; background: #ddd1ba; box-shadow: none; }

.method-panel {
  overflow: hidden;
  padding: 30px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 94% 2%, rgba(109, 83, 153, 0.13), transparent 32%),
    linear-gradient(rgba(255, 249, 231, 0.98), rgba(246, 231, 199, 0.98));
}
.method-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.method-heading h2 { margin-bottom: 6px; font-size: clamp(2rem, 3vw, 3rem); }
.method-intro { max-width: 620px; margin: 0; color: #665769; }
.method-heading > span { flex: 0 0 auto; padding: 8px 12px; color: #fff8e8; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; border-radius: 999px; background: #514069; box-shadow: 0 5px 12px rgba(63, 45, 79, 0.18); }
.method-dots { position: relative; margin: 24px 0 20px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.method-dots::before { content: ""; position: absolute; z-index: 0; top: 24px; left: 5%; right: 5%; height: 3px; border-radius: 999px; background: #d2c19f; }
.method-dots button { position: relative; z-index: 1; min-width: 0; min-height: 78px; padding: 0 3px; display: grid; justify-items: center; align-content: start; gap: 7px; color: #6d6270; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
.method-dots button > span { width: 49px; height: 49px; display: grid; place-items: center; color: #6b5c73; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 900; border: 3px solid #d4c4a5; border-radius: 50%; background: #fff8e7; transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease; }
.method-dots button small { max-width: 102px; font-size: 0.68rem; font-weight: 900; line-height: 1.15; }
.method-dots button:hover > span { transform: translateY(-2px); border-color: #8b749a; }
.method-dots button.is-current { color: #3e3150; }
.method-dots button.is-current > span { color: #fff7e8; border-color: #f4c86e; background: #4c3b63; box-shadow: 0 7px 16px rgba(69, 50, 88, 0.25); }
.method-stage { --method-accent: #73b866; min-height: 336px; display: grid; grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr); align-items: stretch; overflow: hidden; border: 1px solid rgba(102, 78, 118, 0.28); border-radius: 26px; background: #fffaf0; box-shadow: 0 18px 38px rgba(63, 43, 70, 0.14); }
.method-character-card { position: relative; min-height: 336px; overflow: hidden; display: grid; place-items: end center; background: linear-gradient(150deg, color-mix(in srgb, var(--method-accent) 28%, #3a294d), #241d39 72%); isolation: isolate; }
.method-character-card::before { content: ""; position: absolute; z-index: -1; inset: 12% 12% 7%; border: 1px solid rgba(255, 241, 191, 0.28); border-radius: 48% 52% 45% 55%; transform: rotate(-5deg); }
.method-character-glow { position: absolute; z-index: -1; width: 76%; aspect-ratio: 1; left: 12%; top: 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--method-accent) 58%, #fff) 0, transparent 68%); filter: blur(12px); opacity: 0.72; }
.method-character-art { width: 92%; height: 270px; margin-bottom: 48px; display: grid; place-items: end center; animation: method-guide-arrive 420ms cubic-bezier(.2,.8,.2,1) both; }
.method-character-image { --method-art-scale: 1; --method-art-shift: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; scale: var(--method-art-scale); translate: 0 var(--method-art-shift); transform-origin: center bottom; filter: drop-shadow(0 16px 13px rgba(10, 7, 20, 0.36)); }
.method-character-image.is-cover { object-fit: cover; object-position: center 34%; scale: 1; translate: 0; filter: saturate(1.04) contrast(1.02); }
.method-letter { position: absolute; z-index: 3; top: 18px; left: 18px; width: 62px; height: 62px; display: grid; place-items: center; color: #382946; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 900; border: 3px solid rgba(255, 255, 255, 0.75); border-radius: 50%; background: #ffd87e; box-shadow: 0 9px 20px rgba(20, 12, 30, 0.28); }
.method-guide-name { position: absolute; z-index: 4; right: 14px; bottom: 14px; left: 14px; padding: 9px 12px; color: #fff9e9; font-size: 0.77rem; font-weight: 900; text-align: center; border: 1px solid rgba(255, 255,255, 0.2); border-radius: 999px; background: rgba(30, 22, 44, 0.78); backdrop-filter: blur(8px); }
.method-step-copy { align-self: center; padding: clamp(28px, 4vw, 48px); }
.method-step-label { margin-bottom: 7px; color: color-mix(in srgb, var(--method-accent) 64%, #453653); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; }
.method-step-copy h3 { margin-bottom: 10px; color: #34263f; font-size: clamp(1.8rem, 3vw, 3rem); }
.method-step-copy > p:not(.method-step-label) { max-width: 590px; margin-bottom: 22px; color: #5a4d5b; font-size: 1.05rem; }
.method-action { padding: 15px 17px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; border-left: 5px solid var(--method-accent); border-radius: 12px; background: color-mix(in srgb, var(--method-accent) 11%, #fffaf0); }
.method-action > span { color: var(--method-accent); font-size: 1.4rem; }
.method-action strong { display: block; margin-bottom: 2px; color: #45364c; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.method-action p { margin: 0; color: #564c58; font-weight: 800; line-height: 1.35; }
.method-nav { margin-top: 18px; display: flex; justify-content: space-between; gap: 22px; align-items: center; }
.method-quote {
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: min(100%, 680px);
  margin: 0;
  padding: 15px 52px 15px 15px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  overflow: hidden;
  border: 2px solid #d9b761;
  border-radius: 24px;
  background:
    radial-gradient(circle at 9% 20%, rgba(113, 191, 174, 0.34), transparent 34%),
    linear-gradient(135deg, #4b385c, #30243f 72%, #251c34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 219, 0.16),
    0 8px 0 #251b31,
    0 18px 32px rgba(39, 27, 48, 0.28);
}
.method-quote::before { content: "❝"; position: absolute; z-index: -1; top: 6px; right: 14px; color: rgba(255, 244, 213, 0.16); font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 3.4rem; font-weight: 900; line-height: 1; }
.method-quote::after { content: "✦"; position: absolute; right: 20px; bottom: 12px; color: #f1ce78; font-size: 0.82rem; text-shadow: 0 0 10px rgba(113, 191, 174, 0.66); }
.method-quote-avatar { position: relative; width: 70px; height: 70px; overflow: hidden; display: block; border: 3px solid #f1ce78; border-radius: 50%; background: #21192e; box-shadow: 0 0 0 4px rgba(113, 191, 174, 0.68), 0 9px 18px rgba(14, 9, 23, 0.48); }
.method-quote-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.method-quote figcaption { min-width: 0; }
.method-quote strong { display: block; width: fit-content; margin-bottom: 5px; padding: 4px 9px; color: #30233c; font-size: 0.66rem; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; background: #efd384; box-shadow: inset 0 0 0 1px rgba(255, 248, 219, 0.55); }
.method-quote q { display: block; max-width: 520px; color: #fff8e9; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 1.06rem; font-weight: 650; line-height: 1.42; text-shadow: 0 1px rgba(20, 12, 29, 0.35); }
.method-nav .secondary-button {
  flex: 0 0 auto;
  min-width: 154px;
  min-height: 70px;
  padding: 0 18px 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #2d2139;
  font-size: 0.96rem;
  border: 2px solid #a96f29;
  border-radius: 19px;
  background: linear-gradient(180deg, #ffe49a, #efb64f);
  box-shadow: inset 0 0 0 2px rgba(255, 248, 211, 0.58), 0 7px 0 #82542a, 0 15px 24px rgba(76, 45, 21, 0.24);
}
.method-nav .secondary-button span { width: 32px; height: 32px; display: grid; place-items: center; color: #fff8e9; font-size: 1.15rem; border-radius: 50%; background: #49365e; box-shadow: 0 4px 9px rgba(42, 28, 54, 0.28); transition: transform 160ms ease; }
.method-nav .secondary-button:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px rgba(255, 248, 211, 0.7), 0 9px 0 #82542a, 0 19px 28px rgba(76, 45, 21, 0.25); }
.method-nav .secondary-button:hover span { transform: translateX(3px); }
.method-nav .secondary-button:focus-visible { outline: 4px solid #2f2350; outline-offset: 4px; }
@keyframes method-guide-arrive { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.check-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(26px, 3.5vw, 44px);
  border: 3px solid #8b6948;
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 0%, rgba(87, 176, 165, 0.15), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(121, 91, 163, 0.12), transparent 30%),
    linear-gradient(rgba(255, 249, 230, 0.985), rgba(242, 223, 184, 0.985)),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(89, 58, 30, 0.045) 7px);
  box-shadow:
    inset 0 0 0 5px rgba(255, 240, 199, 0.64),
    inset 0 0 0 7px rgba(92, 61, 55, 0.16),
    0 12px 0 rgba(35, 27, 48, 0.52),
    0 28px 52px rgba(9, 13, 28, 0.42);
}
.check-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16px;
  pointer-events: none;
  border: 1px solid rgba(86, 61, 79, 0.2);
  border-radius: 19px;
  background:
    linear-gradient(135deg, rgba(65, 133, 125, 0.18) 0 12px, transparent 12px) top left / 54px 54px no-repeat,
    linear-gradient(225deg, rgba(89, 65, 129, 0.16) 0 12px, transparent 12px) top right / 54px 54px no-repeat,
    linear-gradient(45deg, rgba(89, 65, 129, 0.13) 0 12px, transparent 12px) bottom left / 54px 54px no-repeat,
    linear-gradient(315deg, rgba(65, 133, 125, 0.15) 0 12px, transparent 12px) bottom right / 54px 54px no-repeat;
}
.check-heading { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-bottom: 16px; }
.check-heading-copy { min-width: 0; }
.check-heading h1 { margin-bottom: 6px; color: #2d2139; font-size: clamp(2.55rem, 4.5vw, 4.5rem); line-height: 0.98; }
.check-heading p:last-child { margin-bottom: 0; color: #5a4e5c; font-size: 1.02rem; font-weight: 750; }
.mission-star {
  position: relative;
  width: 84px;
  height: 92px;
  display: grid;
  place-items: center;
  color: #fff5cf;
  font-size: 2rem;
  background: linear-gradient(155deg, #67538c, #302541 74%);
  clip-path: polygon(50% 0, 91% 20%, 100% 68%, 50% 100%, 0 68%, 9% 20%);
  filter: drop-shadow(0 8px 0 rgba(69, 45, 45, 0.28)) drop-shadow(0 12px 12px rgba(42, 29, 58, 0.24));
}
.mission-star::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 3px solid #e7bd63;
  clip-path: inherit;
  background: radial-gradient(circle at 48% 38%, rgba(87, 214, 196, 0.34), transparent 58%);
}
.mission-star span { position: relative; z-index: 1; text-shadow: 0 0 12px rgba(116, 235, 216, 0.7); }
.check-legend { position: relative; z-index: 1; margin: 0 0 16px 106px; display: flex; flex-wrap: wrap; gap: 8px; }
.check-legend > span { padding: 7px 11px 7px 8px; display: inline-flex; align-items: center; gap: 7px; color: #493d4d; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.025em; border: 1px solid rgba(83, 62, 74, 0.2); border-radius: 999px; background: rgba(255, 252, 240, 0.72); }
.check-legend i { width: 23px; height: 23px; display: grid; place-items: center; color: #fff; font-size: 0.75rem; font-style: normal; border-radius: 50%; }
.check-legend .green i { background: #2f8b55; }
.check-legend .yellow i { color: #392a16; background: #e2aa24; }
.check-legend .red i { background: #b83d4c; }
.check-choices { position: relative; z-index: 1; display: grid; gap: 12px; }
.check-choice {
  --choice: #6d597c;
  --choice-dark: #3f304b;
  --choice-soft: #eee8f1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 96px;
  padding: 12px 18px 12px 21px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  color: #281e31;
  text-align: left;
  border: 2px solid var(--choice);
  border-radius: 21px;
  background:
    radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--choice) 20%, transparent), transparent 24%),
    linear-gradient(100deg, var(--choice-soft), rgba(255, 251, 239, 0.94) 72%);
  box-shadow: inset 7px 0 0 var(--choice), inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 6px 0 rgba(85, 60, 47, 0.12);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.check-choice::after { content: ""; position: absolute; z-index: 0; right: -28px; width: 118px; height: 118px; border: 1px solid color-mix(in srgb, var(--choice) 38%, transparent); border-radius: 50%; box-shadow: 0 0 0 16px color-mix(in srgb, var(--choice) 7%, transparent), 0 0 0 34px color-mix(in srgb, var(--choice) 4%, transparent); }
.check-choice > * { position: relative; z-index: 1; }
.check-choice:hover { transform: translateY(-3px); filter: saturate(1.05); box-shadow: inset 7px 0 0 var(--choice), inset 0 0 0 1px rgba(255, 255, 255, 0.68), 0 10px 0 rgba(85, 60, 47, 0.11), 0 17px 28px rgba(60, 44, 35, 0.13); }
.check-choice:focus-visible { outline: 4px solid #2f2350; outline-offset: 4px; }
.check-choice.green { --choice: #3e9a61; --choice-dark: #256540; --choice-soft: #dcefdc; }
.check-choice.yellow { --choice: #d7a42b; --choice-dark: #70500d; --choice-soft: #fff0bf; }
.check-choice.red { --choice: #c85b68; --choice-dark: #7e2e3b; --choice-soft: #f8d9d8; }
.check-choice .signal { width: 54px; height: 54px; display: grid; place-items: center; color: #fff; font-family: "Nunito", sans-serif; font-size: 1.2rem; font-weight: 1000; border: 4px solid rgba(255, 255, 255, 0.72); border-radius: 50%; background: var(--choice-dark); box-shadow: 0 0 0 4px color-mix(in srgb, var(--choice) 32%, transparent), 0 7px 13px rgba(50, 35, 51, 0.18); }
.check-choice.yellow .signal { color: #fff8df; }
.check-choice-copy { min-width: 0; }
.check-choice-state { display: block; margin-bottom: 3px; color: var(--choice-dark); font-size: 0.67rem; font-weight: 950; letter-spacing: 0.095em; text-transform: uppercase; }
.check-choice strong { display: block; color: #30223a; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: clamp(1.28rem, 2vw, 1.55rem); line-height: 1.08; }
.check-choice small { display: block; margin-top: 5px; color: #594c56; font-size: 0.82rem; font-weight: 750; }
.check-choice-arrow { width: 44px; height: 44px; display: grid; place-items: center; color: #fffaf0; font-size: 1.35rem; font-weight: 900; border-radius: 50%; background: var(--choice-dark); box-shadow: 0 5px 10px rgba(48, 33, 50, 0.18); transition: transform 180ms ease; }
.check-choice:hover .check-choice-arrow { transform: translateX(3px); }

.check-panel.is-complete { border-color: #5e8b65; box-shadow: inset 0 0 0 5px rgba(230, 249, 220, 0.66), inset 0 0 0 7px rgba(57, 105, 67, 0.18), 0 12px 0 rgba(35, 27, 48, 0.52), 0 28px 52px rgba(9, 13, 28, 0.42); }
.check-panel.is-complete .check-heading,
.check-panel.is-complete .check-legend { display: none; }
.green-conclusion {
  position: relative;
  z-index: 1;
  min-height: 430px;
  padding: clamp(26px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(250px, 0.82fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  overflow: hidden;
  border: 2px solid #5c9b69;
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 22%, rgba(135, 218, 146, 0.28), transparent 31%),
    radial-gradient(circle at 10% 90%, rgba(99, 180, 153, 0.18), transparent 34%),
    linear-gradient(135deg, #e5f4df, #fff8df 66%, #edf3d5);
  box-shadow: inset 8px 0 0 #3f965b, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 24px rgba(60, 86, 56, 0.16);
}
.green-conclusion.is-showing { animation: conclusion-enter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.conclusion-copy { position: relative; z-index: 2; }
.green-conclusion.is-showing .conclusion-copy > * { animation: conclusion-rise 520ms 100ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.conclusion-path { width: max-content; margin-bottom: 20px; padding: 7px 12px 7px 8px; display: inline-flex; align-items: center; gap: 8px; color: #285d3b; font-size: 0.7rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(54, 121, 72, 0.32); border-radius: 999px; background: rgba(255, 255, 245, 0.68); }
.conclusion-path i { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; font-style: normal; border-radius: 50%; background: #328a50; }
.conclusion-copy .eyebrow { margin-bottom: 6px; color: #377f55; }
.conclusion-copy h2 { max-width: 650px; margin-bottom: 12px; color: #2d2538; font-size: clamp(2.2rem, 4.6vw, 4.35rem); line-height: 0.98; }
.conclusion-copy > p:not(.eyebrow) { max-width: 610px; margin-bottom: 16px; color: #514b55; font-size: clamp(1rem, 1.7vw, 1.18rem); }
.conclusion-ready { display: block; margin-bottom: 23px; color: #2f6543; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: clamp(1.18rem, 2vw, 1.45rem); }
.conclusion-home-button { width: max-content; min-width: 235px; }
.conclusion-guide { position: relative; min-width: 0; height: 330px; margin: 0; display: grid; place-items: end center; }
.conclusion-guide::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; top: 20px; border: 2px solid rgba(76, 147, 88, 0.36); border-radius: 50%; background: radial-gradient(circle, rgba(164, 230, 153, 0.6), rgba(112, 186, 127, 0.18) 58%, transparent 70%); box-shadow: 0 0 0 14px rgba(255, 247, 202, 0.32), 0 0 34px rgba(70, 145, 90, 0.25); }
.conclusion-guide img { width: 100%; height: 295px; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 15px 13px rgba(39, 46, 37, 0.28)); }
.green-conclusion.is-showing .conclusion-guide img { animation: conclusion-guide-bounce 1.9s 180ms cubic-bezier(0.35, 0, 0.2, 1) both; transform-origin: 50% 88%; }
.conclusion-guide figcaption { position: absolute; right: 6%; bottom: -2px; left: 6%; padding: 9px 12px; color: #f7ffed; text-align: center; border: 1px solid rgba(236, 255, 222, 0.5); border-radius: 999px; background: rgba(38, 91, 56, 0.9); box-shadow: 0 7px 14px rgba(43, 74, 46, 0.2); }
.conclusion-guide figcaption strong { margin-right: 4px; color: #fff5b7; }
.conclusion-guide-check { position: absolute; z-index: 3; top: 5px; right: 12%; width: 54px; height: 54px; display: grid; place-items: center; color: #fff; font-size: 1.35rem; font-weight: 1000; border: 4px solid #eaf8d9; border-radius: 50%; background: #2f7e49; box-shadow: 0 0 0 5px rgba(74, 158, 89, 0.22), 0 8px 18px rgba(46, 91, 51, 0.24); }
.conclusion-sparkles { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.conclusion-sparkles span { position: absolute; color: #d49c24; opacity: 0; text-shadow: 0 0 10px rgba(255, 226, 120, 0.9); }
.conclusion-sparkles span:nth-child(1) { left: 5%; top: 12%; font-size: 1.1rem; --spark-delay: 180ms; }
.conclusion-sparkles span:nth-child(2) { left: 44%; top: 8%; font-size: 0.85rem; --spark-delay: 360ms; }
.conclusion-sparkles span:nth-child(3) { right: 6%; top: 20%; font-size: 1.2rem; --spark-delay: 520ms; }
.conclusion-sparkles span:nth-child(4) { right: 38%; bottom: 10%; font-size: 0.8rem; --spark-delay: 690ms; }
.conclusion-sparkles span:nth-child(5) { left: 7%; bottom: 12%; font-size: 1rem; --spark-delay: 820ms; }
.green-conclusion.is-showing .conclusion-sparkles span { animation: conclusion-sparkle 1.35s var(--spark-delay) ease-out both; }
@keyframes conclusion-enter { from { opacity: 0; transform: scale(0.975); } to { opacity: 1; transform: scale(1); } }
@keyframes conclusion-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes conclusion-guide-bounce { 0% { opacity: 0; transform: translateY(18px) scale(0.97); } 36% { opacity: 1; transform: translateY(-8px) scale(1.015); } 58% { transform: translateY(3px) scale(0.996); } 78%, 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes conclusion-sparkle { 0% { opacity: 0; transform: translateY(8px) scale(0.4) rotate(0deg); } 42% { opacity: 1; transform: translateY(-4px) scale(1.15) rotate(20deg); } 100% { opacity: 0; transform: translateY(-16px) scale(0.75) rotate(42deg); } }

.minute-panel {
  position: relative;
  min-height: 430px;
  padding: clamp(25px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  overflow: hidden;
  border: 2px solid #c99a2e;
  border-radius: 26px;
  background:
    radial-gradient(circle at 17% 25%, rgba(105, 215, 213, 0.2), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(255, 255, 235, 0.76), transparent 26%),
    linear-gradient(135deg, #fff0b9, #fff9dd 58%, #e8f3d8);
  box-shadow: inset 8px 0 0 #d29d27, inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 10px 24px rgba(101, 74, 38, 0.17);
}
.minute-panel::after { content: ""; position: absolute; z-index: 0; inset: 0; opacity: 0.24; background-image: radial-gradient(circle, #af8423 1px, transparent 1.5px); background-size: 27px 27px; -webkit-mask-image: linear-gradient(90deg, black, transparent 42%); mask-image: linear-gradient(90deg, black, transparent 42%); pointer-events: none; }
.minute-dragon-stage { position: relative; z-index: 1; min-width: 0; height: 350px; display: grid; place-items: end center; }
.minute-dragon-stage::after { content: "Fyrin breathes with you"; position: absolute; z-index: 5; right: 4%; bottom: 2px; left: 4%; padding: 8px 12px; color: #f4fffb; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.025em; text-align: center; border: 1px solid rgba(225, 255, 249, 0.56); border-radius: 999px; background: rgba(40, 99, 91, 0.91); box-shadow: 0 7px 15px rgba(42, 76, 68, 0.2); }
.minute-dragon-halo { position: absolute; z-index: -1; top: 36px; left: 50%; width: 255px; height: 255px; border: 2px solid rgba(44, 162, 154, 0.32); border-radius: 50%; background: radial-gradient(circle, rgba(115, 231, 221, 0.42), rgba(110, 203, 190, 0.14) 56%, transparent 70%); box-shadow: 0 0 0 14px rgba(255, 241, 177, 0.34), 0 0 38px rgba(45, 175, 163, 0.22); transform: translateX(-50%); }
.minute-character-pair { position: relative; z-index: 3; width: 100%; height: 325px; transform-origin: 50% 82%; }
.minute-dragon { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 16px 13px rgba(72, 55, 40, 0.3)); }
.minute-breath-plume { position: absolute; z-index: 4; top: 64px; left: -55px; width: 60%; height: auto; opacity: 0.34; filter: drop-shadow(0 0 8px rgba(62, 224, 228, 0.68)); transform-origin: 100% 50%; }
.minute-breath-spark { position: absolute; z-index: 4; color: #8af3e8; text-shadow: 0 0 9px #41d8dc; }
.minute-breath-spark.spark-one { top: 24%; left: 4%; font-size: 1rem; }
.minute-breath-spark.spark-two { top: 43%; left: 18%; font-size: 0.72rem; }
.minute-breath-spark.spark-three { top: 18%; right: 8%; font-size: 0.82rem; }
.minute-copy { position: relative; z-index: 2; }
.minute-path { width: max-content; margin-bottom: 18px; padding: 7px 12px 7px 8px; display: inline-flex; align-items: center; gap: 8px; color: #66490f; font-size: 0.7rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(145, 99, 16, 0.31); border-radius: 999px; background: rgba(255, 255, 244, 0.72); }
.minute-path i { width: 26px; height: 26px; display: grid; place-items: center; color: #fff9df; font-style: normal; border-radius: 50%; background: #8b6515; }
.minute-copy .eyebrow { margin-bottom: 5px; color: #8a661b; }
.minute-copy h2 { max-width: 660px; margin-bottom: 10px; color: #30243a; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; }
.minute-copy > p:not(.eyebrow):not(.minute-status) { max-width: 630px; margin-bottom: 20px; color: #544b50; font-size: clamp(1rem, 1.5vw, 1.1rem); }
.minute-breath-guide { max-width: 620px; margin-bottom: 14px; padding: 14px; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: center; border: 1px solid rgba(105, 79, 25, 0.2); border-radius: 24px; background: rgba(255, 254, 241, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 8px 20px rgba(95, 75, 43, 0.1); }
.countdown-ring { position: relative; width: 112px; height: 112px; display: grid; place-items: center; align-content: center; color: #302449; border: 8px solid #d5a22d; border-radius: 50%; background: #fffaf0; box-shadow: inset 0 0 0 4px rgba(75, 56, 101, 0.08), 0 0 0 7px rgba(86, 201, 191, 0.12); transform-origin: center; }
.countdown-ring::after { content: ""; position: absolute; inset: -13px; border: 2px solid rgba(53, 173, 164, 0.42); border-radius: inherit; }
.countdown-ring strong { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 2.55rem; line-height: 0.92; }
.countdown-ring span { color: #695678; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.breath-cues { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.breath-cue { min-width: 0; padding: 10px 9px; display: grid; grid-template-columns: 28px 1fr; align-items: center; color: #3d3643; border: 1px solid rgba(61, 142, 136, 0.16); border-radius: 14px; background: rgba(227, 246, 237, 0.58); }
.breath-cue i { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 1000; border-radius: 50%; background: #388f86; }
.breath-cue strong { font-size: 0.83rem; line-height: 1.05; }
.breath-cue small { color: #63576b; font-size: 0.63rem; font-weight: 900; letter-spacing: 0.035em; }
.minute-status { min-height: 24px; margin-bottom: 18px; color: #68542a; font-size: 0.88rem; font-weight: 850; }
.minute-panel.is-breathing .minute-character-pair { animation: minute-dragon-breathe 7s ease-in-out infinite; }
.minute-panel.is-breathing .minute-dragon-halo { animation: minute-breath-halo 7s ease-in-out infinite; }
.minute-panel.is-breathing .countdown-ring::after { animation: minute-breath-outline 7s ease-in-out infinite; }
.minute-panel.is-breathing .countdown-ring { animation: minute-breath-orb 7s ease-in-out infinite; }
.minute-panel.is-breathing .minute-breath-plume { animation: minute-breath-plume 7s ease-in-out infinite; }
.minute-panel.is-breathing .breath-in { animation: minute-cue-in 7s ease-in-out infinite; }
.minute-panel.is-breathing .breath-out { animation: minute-cue-out 7s ease-in-out infinite; }
.minute-panel.is-breathing .minute-breath-spark { animation: minute-breath-sparkle 4s ease-in-out infinite alternate; }
.minute-panel.is-finished .countdown-ring { border-color: #4d9b72; box-shadow: inset 0 0 0 4px rgba(53, 124, 88, 0.1), 0 0 0 7px rgba(86, 201, 191, 0.16); }
.minute-panel.is-finished .minute-status { color: #2e6d4d; }
.minute-panel.is-finished #backToCheckButton { outline: 3px solid rgba(62, 141, 101, 0.3); outline-offset: 4px; background: linear-gradient(180deg, #4c9f77, #34795a); box-shadow: 0 6px 0 #285f47, 0 12px 22px rgba(41, 105, 76, 0.24); animation: minute-next-jiggle 1.2s 120ms ease-in-out 2; }
@keyframes minute-dragon-breathe { 0%, 100% { transform: translateY(0) scale(1); } 43% { transform: translateY(-5px) scale(1.01, 1.018); } 50% { transform: translateY(-4px) scale(1.008, 1.014); } }
@keyframes minute-breath-halo { 0%, 100% { opacity: 0.35; transform: translateX(-50%) scale(0.88); } 43%, 48% { opacity: 0.9; transform: translateX(-50%) scale(1.06); } }
@keyframes minute-breath-outline { 0%, 100% { opacity: 0.35; transform: scale(0.88); } 43%, 48% { opacity: 0.9; transform: scale(1.06); } }
@keyframes minute-breath-orb { 0%, 100% { transform: scale(0.96); } 43%, 48% { transform: scale(1.04); } }
@keyframes minute-breath-plume { 0%, 43% { opacity: 0.08; transform: scaleX(0.72); } 56% { opacity: 0.88; transform: scaleX(1); } 88% { opacity: 0.36; transform: scaleX(1.06); } 100% { opacity: 0.08; transform: scaleX(1.08); } }
@keyframes minute-cue-in { 0%, 43% { color: #263d3b; border-color: rgba(47, 139, 132, 0.46); background: rgba(151, 224, 212, 0.58); box-shadow: 0 0 0 3px rgba(57, 167, 157, 0.11); } 50%, 100% { color: #5c555e; border-color: rgba(61, 142, 136, 0.12); background: rgba(234, 244, 235, 0.52); box-shadow: none; } }
@keyframes minute-cue-out { 0%, 43% { color: #5c555e; border-color: rgba(61, 142, 136, 0.12); background: rgba(234, 244, 235, 0.52); box-shadow: none; } 50%, 100% { color: #263d3b; border-color: rgba(47, 139, 132, 0.46); background: rgba(151, 224, 212, 0.58); box-shadow: 0 0 0 3px rgba(57, 167, 157, 0.11); } }
@keyframes minute-breath-sparkle { from { opacity: 0.35; transform: translateY(4px) scale(0.8); } to { opacity: 1; transform: translateY(-5px) scale(1.12); } }
@keyframes minute-next-jiggle { 0%, 20%, 100% { transform: translateX(0) rotate(0); } 5% { transform: translateX(-5px) rotate(-1.2deg); } 10% { transform: translateX(5px) rotate(1.2deg); } 15% { transform: translateX(-3px) rotate(-0.7deg); } }
.inline-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.adult-help-panel {
  position: relative;
  max-width: 1120px;
  min-height: 610px;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
  overflow: hidden;
  border: 2px solid #b94e5c;
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 22%, rgba(130, 214, 155, 0.28), transparent 29%),
    radial-gradient(circle at 87% 13%, rgba(255, 242, 193, 0.76), transparent 28%),
    linear-gradient(135deg, #f7dedb, #fff8e7 55%, #edf1d8);
  box-shadow: inset 9px 0 0 #b94050, inset 0 0 0 1px rgba(255, 255, 255, 0.76), 0 12px 0 rgba(35, 27, 48, 0.5), 0 28px 52px rgba(9, 13, 28, 0.4);
}
.adult-help-panel::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: 0.2; background-image: radial-gradient(circle, #a53949 1px, transparent 1.5px); background-size: 29px 29px; -webkit-mask-image: linear-gradient(90deg, black, transparent 44%); mask-image: linear-gradient(90deg, black, transparent 44%); pointer-events: none; }
.adult-guide-stage { position: relative; z-index: 1; min-width: 0; height: 455px; display: grid; place-items: end center; }
.adult-guide-halo { position: absolute; z-index: -1; top: 45px; left: 50%; width: 320px; height: 320px; border: 2px solid rgba(76, 153, 88, 0.36); border-radius: 50%; background: radial-gradient(circle, rgba(204, 239, 142, 0.65), rgba(103, 184, 119, 0.23) 58%, transparent 71%); box-shadow: 0 0 0 16px rgba(255, 239, 190, 0.33), 0 0 44px rgba(92, 173, 105, 0.28); transform: translateX(-50%); }
.adult-guide-image { position: relative; z-index: 3; width: 100%; height: 420px; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 17px 14px rgba(58, 67, 42, 0.29)); transform-origin: 50% 82%; }
.adult-guide-caption { position: absolute; z-index: 5; right: 5%; bottom: 2px; left: 5%; padding: 9px 13px; color: #f5fff0; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.02em; text-align: center; border: 1px solid rgba(235, 255, 219, 0.56); border-radius: 999px; background: rgba(45, 105, 61, 0.93); box-shadow: 0 7px 15px rgba(43, 76, 48, 0.22); }
.adult-lantern-glow { position: absolute; z-index: 2; width: 28px; height: 28px; border: 2px solid rgba(255, 246, 192, 0.88); border-radius: 50%; background: #f2c957; box-shadow: 0 0 12px #f1cf69, 0 0 27px rgba(234, 195, 77, 0.7); }
.adult-lantern-glow::after { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: #fff9c9; }
.adult-lantern-glow.glow-one { top: 20%; left: 2%; }
.adult-lantern-glow.glow-two { top: 31%; right: 2%; width: 21px; height: 21px; }
.adult-guide-spark { position: absolute; z-index: 4; color: #f4d878; text-shadow: 0 0 10px rgba(232, 187, 65, 0.9); }
.adult-guide-spark.spark-one { top: 11%; left: 14%; font-size: 1rem; }
.adult-guide-spark.spark-two { top: 17%; right: 10%; font-size: 0.76rem; }
.adult-guide-spark.spark-three { bottom: 27%; left: 6%; font-size: 0.8rem; }
.adult-help-copy { position: relative; z-index: 2; }
.adult-path { width: max-content; margin-bottom: 20px; padding: 7px 12px 7px 8px; display: inline-flex; align-items: center; gap: 8px; color: #762d3a; font-size: 0.7rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(146, 46, 61, 0.31); border-radius: 999px; background: rgba(255, 252, 239, 0.74); }
.adult-path i { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; font-style: normal; border-radius: 50%; background: #a73748; box-shadow: 0 0 0 4px rgba(179, 61, 77, 0.12); }
.adult-help-panel .eyebrow { margin-bottom: 6px; color: #9b3d4b; }
.adult-help-panel h1 { max-width: 690px; margin-bottom: 13px; color: #30243a; font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 0.98; }
.adult-message { max-width: 680px; margin-bottom: 20px; color: #554b53; font-size: clamp(1.03rem, 1.8vw, 1.22rem); }
.adult-words { max-width: 650px; margin-bottom: 16px; padding: 15px 18px; display: grid; gap: 2px; border: 1px solid rgba(153, 54, 69, 0.27); border-left: 6px solid #b83d4f; border-radius: 16px; background: rgba(255, 252, 236, 0.79); box-shadow: 0 7px 16px rgba(96, 61, 60, 0.1); }
.adult-words span { color: #7d3440; font-size: 0.7rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }
.adult-words strong { color: #32283b; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: clamp(1.08rem, 2vw, 1.38rem); }
.adult-help-steps { max-width: 650px; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; }
.adult-help-steps li { min-width: 0; padding: 10px; display: flex; align-items: center; gap: 8px; color: #534853; font-size: 0.76rem; line-height: 1.15; border: 1px solid rgba(118, 91, 77, 0.16); border-radius: 13px; background: rgba(255, 255, 245, 0.6); }
.adult-help-steps i { flex: 0 0 auto; width: 27px; height: 27px; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 1000; border-radius: 50%; background: #a83a4a; }
.adult-help-steps strong { display: block; color: #7c303e; }
.adult-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.adult-home-button { width: max-content; min-width: 245px; color: #fff; border-color: #742b37; background: linear-gradient(180deg, #b84858, #963444); box-shadow: 0 6px 0 #6e2935, 0 12px 20px rgba(96, 39, 49, 0.22); }
.adult-home-button:hover { background: linear-gradient(180deg, #c35766, #9f3949); box-shadow: 0 8px 0 #6e2935, 0 15px 22px rgba(96, 39, 49, 0.24); }
.adult-screen.is-active .adult-help-copy > * { animation: adult-copy-arrive 520ms 90ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.adult-screen.is-active .adult-guide-image { animation: adult-guide-breathe 5.6s ease-in-out infinite; }
.adult-screen.is-active .adult-guide-halo { animation: adult-guide-halo 5.6s ease-in-out infinite; }
.adult-screen.is-active .adult-lantern-glow { animation: adult-lantern-float 3.6s ease-in-out infinite alternate; }
.adult-screen.is-active .adult-guide-spark { animation: adult-guide-sparkle 2.8s ease-in-out infinite alternate; }
@keyframes adult-copy-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes adult-guide-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.008, 1.015); } }
@keyframes adult-guide-halo { 0%, 100% { opacity: 0.46; transform: translateX(-50%) scale(0.92); } 50% { opacity: 0.9; transform: translateX(-50%) scale(1.04); } }
@keyframes adult-lantern-float { from { opacity: 0.55; transform: translateY(5px) scale(0.92); } to { opacity: 1; transform: translateY(-7px) scale(1.05); } }
@keyframes adult-guide-sparkle { from { opacity: 0.35; transform: translateY(3px) scale(0.82); } to { opacity: 1; transform: translateY(-4px) scale(1.1); } }

.privacy-note {
  position: relative;
  z-index: 9;
  left: auto;
  bottom: auto;
  width: max-content;
  max-width: calc(100% - 30px);
  margin: -62px auto max(12px, env(safe-area-inset-bottom));
  padding: 8px 14px;
  color: #d4dedb;
  font-size: 0.74rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(10, 10, 32, 0.83);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.privacy-note:hover { background: rgba(25, 24, 58, 0.92); }
.privacy-note:focus-visible { outline: 3px solid #8ce0d2; outline-offset: 3px; }
.privacy-note span { color: #8ce0d2; }

@media (max-width: 1000px) {
  .app-header { align-items: center; }
  .brand small { display: none; }
  .header-actions { flex-wrap: nowrap; }
  .motion-toggle-label { display: none; }
  .motion-toggle { padding-right: 10px; }
  .adult-button { order: 0; min-width: 178px; white-space: nowrap; }
  .access-layout { grid-template-columns: 0.78fr 1.22fr; gap: 30px; padding: 34px; }
  .portal-mark { width: min(35vw, 340px); }
  .emotion-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .two-column-layout { grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr); padding: 34px 28px; }
  .dragon-copy { padding: 18px 18px 22px; }
  .mission-layout { grid-template-columns: 0.78fr 1.22fr; }
  .mission-guide-card { min-height: 590px; }
  .player-controls { grid-template-columns: 1fr auto; }
  .check-button { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .access-layout { display: block; min-height: auto; padding: 32px; }
  .portal-stage { margin-bottom: 30px; }
  .portal-mark { width: min(44vw, 230px); margin: 0 auto 8px; }
  .access-panel { max-width: 660px; margin: 0 auto; }
}

@media (orientation: portrait) {
  .storybook-bg {
    --storybook-environment: url("assets/web/enchanted-ruins-background-portrait-web-v1.webp");
  }
}

@media (max-width: 850px) {
  .emotion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emotion-card {
    min-height: 126px;
    padding: 12px 15px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 13px;
    text-align: left;
  }
  .emotion-portrait { width: 82px; height: 82px; }
  .emotion-copy strong { font-size: 1.32rem; }
}

@media (max-width: 760px) {
  .app-header { width: min(100% - 20px, 680px); margin-top: 10px; padding: 9px; align-items: center; }
  .brand span { display: none; }
  .brand img { width: 54px; height: 54px; }
  .header-actions { gap: 7px; }
  .header-utilities { gap: 7px; }
  .motion-toggle { min-height: 48px; }
  .nav-button { min-height: 48px; padding: 0 11px; font-size: 0.84rem; }
  .adult-button { order: 0; min-width: 0; min-height: 48px; padding: 0 12px; font-size: 0.82rem; }
  main { width: min(100% - 24px, 680px); }
  .screen { padding-top: 28px; }
  .access-layout,
  .two-column-layout,
  .mission-layout { display: block; min-height: auto; }
  .access-sanctuary,
  .situation-sanctuary { border-width: 3px; border-radius: 28px; }
  .enchanted-pillars { opacity: 0.56; }
  .enchanted-pillar {
    top: -3%;
    bottom: -3%;
    width: 158px;
  }
  .enchanted-pillar-left { left: -112px; }
  .enchanted-pillar-right { right: -112px; }
  .access-layout,
  .two-column-layout { padding: 34px 22px; }
  .portal-stage { margin-bottom: 34px; }
  .portal-mark { width: min(62vw, 245px); margin: 0 auto 8px; }
  .access-panel { padding: 30px 24px; }
  .code-row { grid-template-columns: 1fr; }
  .home-sanctuary { padding: 18px 14px 24px; border-width: 3px; border-radius: 28px; }
  .home-logo-portal { width: 116px; }
  .home-question-plaque { width: 96%; padding: 28px 48px 18px; }
  .home-question-plaque::before { left: 15px; }
  .home-question-plaque::after { right: 15px; }
  .emotion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .dragon-card { min-height: 230px; margin-bottom: 28px; padding: 24px; display: grid; grid-template-columns: 180px 1fr; gap: 22px; }
  .dragon-image-wrap { width: 172px; }
  .dragon-copy { align-self: center; padding: 0; text-align: left; }
  .content-panel { padding: 28px 20px; }
  .choice-grid { grid-template-columns: 1fr; }
  .mission-guide-card { min-height: auto; grid-template-columns: 170px 1fr; grid-template-rows: 280px; margin-bottom: 18px; }
  .mission-guide-copy { align-self: center; padding: 20px; }
  .mission-guide-card h1 { font-size: 2.25rem; }
  .player-panel { margin-bottom: 18px; }
  .method-dots button small { display: none; }
  .method-dots button { min-height: 52px; }
  .method-stage { grid-template-columns: minmax(210px, 0.82fr) minmax(0, 1.18fr); }
  .method-step-copy { padding: 28px 24px; }
  .minute-panel { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .minute-dragon-stage { width: min(100%, 340px); height: 280px; margin: 0 auto; }
  .minute-character-pair { height: 270px; }
  .minute-dragon-halo { top: 20px; width: 220px; height: 220px; }
  .minute-breath-plume { top: 40px; left: -55px; }
  .minute-path { margin-right: auto; margin-left: auto; }
  .minute-copy > p:not(.eyebrow):not(.minute-status) { margin-right: auto; margin-left: auto; }
  .minute-breath-guide { margin-right: auto; margin-left: auto; text-align: left; }
  .inline-actions { justify-content: center; }
  .green-conclusion { min-height: 0; grid-template-columns: minmax(0, 1.12fr) minmax(210px, 0.88fr); padding: 28px 24px; }
  .conclusion-guide { height: 280px; }
  .conclusion-guide img { height: 250px; }
  .adult-help-panel { min-height: 0; padding: 30px 24px 36px; grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .adult-guide-stage { width: min(100%, 350px); height: 300px; margin: 0 auto; }
  .adult-guide-image { height: 290px; }
  .adult-guide-halo { top: 18px; width: 235px; height: 235px; }
  .adult-path { margin-right: auto; margin-left: auto; }
  .adult-message,
  .adult-words,
  .adult-help-steps { margin-right: auto; margin-left: auto; }
  .adult-words { text-align: left; }
  .adult-actions { justify-content: center; }
}

@media (max-width: 520px) {
  .app-header { position: relative; flex-wrap: wrap; }
  .brand { display: none; }
  .app-header.is-access .brand { display: inline-flex; }
  .app-header.is-access .brand span { display: block; }
  .header-utilities { width: 100%; flex-wrap: wrap; }
  .motion-toggle { width: 100%; justify-content: center; }
  .motion-toggle-label { display: inline; }
  .header-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .adult-button { grid-column: 1 / -1; grid-row: 1; }
  h1 { font-size: clamp(2rem, 11vw, 3.1rem); }
  .home-question-plaque { width: 100%; padding: 27px 22px 18px; }
  .home-question-plaque::before,
  .home-question-plaque::after { display: none; }
  .enchanted-pillars { opacity: 0.42; }
  .enchanted-pillar { width: 138px; }
  .enchanted-pillar-left { left: -103px; }
  .enchanted-pillar-right { right: -103px; }
  .emotion-grid { grid-template-columns: 1fr; }
  .emotion-card { min-height: 112px; grid-template-columns: 78px minmax(0, 1fr); padding: 11px 14px; }
  .emotion-portrait { width: 72px; height: 72px; }
  .emotion-copy strong { font-size: 1.4rem; }
  .access-layout,
  .two-column-layout { padding: 28px 15px; }
  .access-panel,
  .situation-panel { padding: 30px 18px 24px; }
  .access-heading h1 { font-size: 2.45rem; }
  .code-chamber { padding: 14px; }
  .primary-button { width: 100%; }
  .dragon-card { display: flex; padding: 28px 18px 24px; }
  .dragon-image-wrap { width: min(72vw, 240px); height: auto; }
  .dragon-copy { padding-top: 24px; text-align: center; }
  .mission-guide-card { display: block; }
  .mission-art-stage { height: 280px; }
  .player-topline { flex-direction: column; gap: 4px; }
  .player-controls { grid-template-columns: 1fr; }
  .play-button { grid-row: 1; justify-self: center; }
  .check-button { grid-column: auto; }
  .method-panel { padding: 24px 16px; }
  .method-heading, .method-nav { align-items: flex-start; flex-direction: column; }
  .method-heading > span { align-self: flex-start; }
  .method-dots { gap: 2px; }
  .method-dots::before { top: 19px; }
  .method-dots button { min-height: 43px; }
  .method-dots button > span { width: 39px; height: 39px; font-size: 1rem; border-width: 2px; }
  .method-stage { display: block; }
  .method-character-card { min-height: 320px; }
  .method-character-art { height: 270px; margin-bottom: 48px; }
  .method-step-copy { padding: 26px 20px 28px; text-align: left; }
  .method-nav .secondary-button { width: 100%; }
  .check-panel { padding: 30px 18px 32px; border-radius: 24px; }
  .check-heading { grid-template-columns: 1fr; gap: 15px; text-align: center; }
  .mission-star { margin: 0 auto; }
  .check-legend { margin-left: 0; justify-content: center; }
  .check-choice { grid-template-columns: auto 1fr; }
  .check-choice-arrow { display: none; }
  .green-conclusion { display: block; padding: 26px 19px 30px; text-align: center; }
  .conclusion-path { margin-right: auto; margin-left: auto; }
  .conclusion-copy > p:not(.eyebrow) { margin-right: auto; margin-left: auto; }
  .conclusion-home-button { width: 100%; min-width: 0; }
  .conclusion-guide { height: 260px; margin-top: 22px; }
  .conclusion-guide img { height: 235px; }
  .minute-panel { padding: 24px 17px 28px; }
  .minute-dragon-stage { height: 242px; }
  .minute-character-pair { height: 235px; }
  .minute-dragon-halo { width: 190px; height: 190px; }
  .minute-breath-plume { top: 28px; left: -55px; }
  .minute-copy h2 { font-size: clamp(1.9rem, 9vw, 2.65rem); }
  .minute-breath-guide { grid-template-columns: 1fr; justify-items: center; }
  .breath-cues { width: 100%; }
  .countdown-ring { margin: 0 auto; }
  .minute-status { min-height: 0; }
  .minute-panel .inline-actions { display: grid; }
  .minute-panel .inline-actions button { width: 100%; }
  .adult-help-panel { padding: 24px 17px 30px; border-radius: 24px; }
  .adult-guide-stage { height: 245px; }
  .adult-guide-image { height: 235px; }
  .adult-guide-halo { width: 190px; height: 190px; }
  .adult-lantern-glow.glow-one { left: 7%; }
  .adult-lantern-glow.glow-two { right: 7%; }
  .adult-help-panel h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .adult-help-steps { grid-template-columns: 1fr; text-align: left; }
  .adult-help-steps li { min-height: 52px; }
  .adult-home-button { width: 100%; min-width: 0; }
  .privacy-note { width: calc(100% - 24px); margin: -60px auto 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }