@font-face {
  font-family: "Anuphan";
  src: url("assets/fonts/Anuphan-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Anuphan", "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --paper: #0b1024;
  --paper-strong: #151a38;
  --ink: #f8f7ff;
  --muted: #b9b8cd;
  --line: rgba(255, 255, 255, 0.13);
  --violet: #b9adff;
  --violet-dark: #cec8ff;
  --lavender: #34365f;
  --gold: #ffdf73;
  --night: #050817;
  --danger: #ff8798;
  --radius: 1.4rem;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(151, 137, 255, 0.19), transparent 34rem),
    radial-gradient(circle at 90% 38%, rgba(64, 190, 220, 0.1), transparent 38rem),
    linear-gradient(180deg, #0b1024 0%, #0c1127 65%, #11152b 100%);
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background-image: radial-gradient(rgba(255, 255, 255, 0.26) 0.7px, transparent 0.7px);
  background-size: 38px 38px;
  opacity: 0.18;
  pointer-events: none;
}
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 0;
  z-index: 300;
  transform: translateY(calc(-100% - 1rem));
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  background: var(--night);
  color: white;
}
.skip-link:focus { transform: translateY(1rem); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app, .screen { min-height: 100vh; min-height: 100dvh; }
.screen {
  display: flex;
  flex-direction: column;
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.screen-content { flex: 1; display: grid; align-items: center; }
.topbar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.25rem 0.2rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  font-size: 1.08rem;
  font-weight: 700;
  cursor: pointer;
}
.version-mark {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.1em;
}
.topbar-actions, .language-switch { display: flex; align-items: center; }
.topbar-actions { gap: 0.65rem; }
.language-switch {
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}
.language-switch button {
  min-width: 2.4rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
}
.language-switch button[aria-pressed="true"] { background: var(--gold); color: #17192b; }
.help-button, .text-button {
  min-height: 2.75rem;
  padding: 0.5rem 0.35rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--violet-dark);
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.24rem;
}
.welcome-screen {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
}
.welcome-screen::before, .welcome-screen::after {
  position: absolute;
  content: "";
  width: min(42vw, 32rem);
  aspect-ratio: 1;
  border: 1px solid rgba(185, 173, 255, 0.16);
  border-radius: 50%;
}
.welcome-screen::before { left: -20vw; top: -16vw; }
.welcome-screen::after { right: -20vw; bottom: -17vw; }
.welcome-center { position: relative; z-index: 2; width: min(44rem, calc(100% - 1rem)); }
.welcome-center h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(4.6rem, 14vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.95;
}
.welcome-body {
  max-width: 46rem;
  margin: clamp(2rem, 5vw, 3.4rem) auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.95;
  text-wrap: balance;
}
.continue-button, .primary-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 2.6rem;
  min-height: 3.7rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--gold);
  color: #17192b;
  cursor: pointer;
  font-weight: 650;
  box-shadow: 0 1rem 2.7rem rgba(46, 38, 77, 0.14);
}
.continue-button { min-width: 13rem; margin-top: 2.4rem; }
.continue-button:hover, .primary-button:hover { background: #ffea9b; transform: translateY(-1px); }
.keyboard-hint { margin: 0.85rem 0 0; color: var(--muted); font-size: 0.75rem; }
.narrow-layout { width: min(52rem, 100%); margin-inline: auto; padding: clamp(2rem, 6vw, 4.5rem) 0; }
.intro-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  margin-inline: auto;
  text-align: left;
}
.intro-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0.5rem rgba(230, 184, 93, 0.14); }
.intro-panel small { color: var(--muted); font-size: 0.66rem; letter-spacing: 0.11em; }
.intro-panel h1 { margin: 0.15rem 0 0; font-size: clamp(1.75rem, 4vw, 2.7rem); font-weight: 560; }
.screen-lead { max-width: 36rem; margin: 1rem auto 2rem; color: var(--muted); line-height: 1.7; text-align: center; }
.guardian-carousel {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
  gap: clamp(0.7rem, 3vw, 1.5rem);
  align-items: center;
  touch-action: pan-y;
}
.carousel-arrow {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-size: 1.2rem;
}
.carousel-arrow:hover { background: rgba(185, 173, 255, 0.14); border-color: rgba(185, 173, 255, 0.42); }
.guardian-card {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 31rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: rgba(15, 20, 49, 0.78);
  box-shadow: 0 1.6rem 5rem rgba(0, 0, 0, 0.24);
  text-align: center;
}
.guardian-card::before {
  position: absolute;
  top: 2.6rem;
  width: 16rem;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 173, 255, 0.22), rgba(185, 173, 255, 0));
}
.guardian-art-wrap { position: relative; width: min(19rem, 100%); height: 18rem; }
.cloud-portrait {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  filter: drop-shadow(0 1rem 1.2rem rgba(71, 56, 112, 0.18));
}
.cloud-artwork { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cloud-face {
  overflow: visible;
  color: #14264d;
  --cloud-eye-openness: 1;
  --cloud-mood-gaze-y: 0px;
}
.cloud-eye-gaze {
  transform: translate(calc(var(--cloud-look-x, 0) * 4px), calc(var(--cloud-look-y, 0) * 3px + var(--cloud-mood-gaze-y)));
  transition: transform 140ms ease-out;
}
.cloud-eye-open {
  transform-box: fill-box;
  transform-origin: center;
  animation: cloud-face-blink 5.7s ease-in-out infinite;
  animation-delay: var(--cloud-blink-delay, 0s);
}
.cloud-eye-happy, .cloud-eye-lid, .cloud-mouth-happy, .cloud-mouth-sad, .cloud-tear { display: none; }
.cloud-portrait[data-mood="happy"] .cloud-eye-open,
.cloud-portrait[data-mood="happy"] .cloud-mouth-neutral { display: none; }
.cloud-portrait[data-mood="happy"] .cloud-eye-happy,
.cloud-portrait[data-mood="happy"] .cloud-mouth-happy { display: inline; }
.cloud-portrait[data-mood="sad"] .cloud-face,
.cloud-portrait[data-mood="crying"] .cloud-face { --cloud-eye-openness: 0.72; --cloud-mood-gaze-y: 1.5px; }
.cloud-portrait[data-mood="sad"] .cloud-eye-lid,
.cloud-portrait[data-mood="crying"] .cloud-eye-lid,
.cloud-portrait[data-mood="quiet"] .cloud-eye-lid { display: inline; }
.cloud-portrait[data-mood="sad"] .cloud-mouth-neutral,
.cloud-portrait[data-mood="crying"] .cloud-mouth-neutral { display: none; }
.cloud-portrait[data-mood="sad"] .cloud-mouth-sad,
.cloud-portrait[data-mood="crying"] .cloud-mouth-sad { display: inline; }
.cloud-portrait[data-mood="quiet"] .cloud-face { --cloud-eye-openness: 0.46; --cloud-mood-gaze-y: 2.5px; }
.cloud-portrait[data-mood="quiet"] .cloud-mouth-neutral {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.8, 0.3);
}
.cloud-portrait[data-mood="focused"] .cloud-face { --cloud-eye-openness: 0.9; }
.cloud-portrait[data-mood="crying"] .cloud-tear { display: inline; }
.cloud-thunder .cloud-face { color: #0a1429; }
.cloud-thunder .cloud-eye-open { stroke: #b6c8e8; stroke-width: 1.2; paint-order: stroke fill; }
.cloud-thunder .cloud-eye-happy, .cloud-thunder .cloud-eye-lid,
.cloud-thunder .cloud-mouth-neutral, .cloud-thunder .cloud-mouth-happy,
.cloud-thunder .cloud-mouth-sad { stroke: #b6c8e8; }
.cloud-tear > path { animation: cloud-tear-roll 1.7s ease-out infinite; }
.cloud-tear > path:nth-child(2) { animation-delay: -0.85s; }
@keyframes cloud-face-blink {
  0%, 44%, 48%, 100% { transform: scaleY(var(--cloud-eye-openness)); }
  46% { transform: scaleY(0.12); }
}
@keyframes cloud-tear-roll {
  0%, 12% { transform: translateY(0); opacity: 0.92; }
  76%, 100% { transform: translateY(8px); opacity: 0; }
}
.guardian-art { animation: cloud-float 3.6s ease-in-out infinite; }
.guardian-number { position: absolute; top: 1.2rem; right: 1.5rem; margin: 0; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.12em; }
.guardian-card h2 { margin: -0.3rem 0 0; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 580; }
.guardian-trait { margin: 0.35rem 0 1.2rem; color: var(--muted); }
.ability-card {
  width: min(28rem, 100%);
  padding: 1rem 1.2rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(185, 173, 255, 0.16);
  background: rgba(185, 173, 255, 0.09);
  text-align: left;
}
.ability-card small, .ability-card strong { display: block; }
.ability-card small { color: var(--violet-dark); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.08em; }
.ability-card strong { margin-top: 0.28rem; font-size: 1.05rem; }
.ability-card p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.83rem; line-height: 1.6; }
.carousel-dots { display: flex; justify-content: center; gap: 0.1rem; margin: 0.25rem 0 0.6rem; }
.carousel-dots button {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.carousel-dots button::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #6f7194;
  content: "";
  transform: translate(-50%, -50%);
}
.carousel-dots button[aria-pressed="true"]::after { width: 1.7rem; border-radius: 999px; background: var(--violet); }
.guardian-layout > .primary-button { display: flex; min-width: min(20rem, 100%); margin-inline: auto; }

.eyebrow { margin: 0 0 0.7rem; color: var(--violet-dark); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; }
.map-layout { width: min(76rem, 100%); margin-inline: auto; padding: 1.5rem 0 0.5rem; }
.map-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.map-heading h1, .battle-copy h1, .cards-heading h1, .chapter-layout h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 550; letter-spacing: -0.04em; }
.map-heading p:not(.eyebrow), .battle-copy p, .cards-heading p, .chapter-layout > p:not(.eyebrow) { margin: 0.45rem 0 0; color: var(--muted); line-height: 1.7; }
.map-companion { display: flex; align-items: center; gap: 0.65rem; color: var(--muted); font-size: 0.78rem; }
.map-cloud { width: 4rem; height: 4rem; }
.map-canvas {
  position: relative;
  min-height: clamp(31rem, 66vh, 45rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2rem;
  background:
    linear-gradient(180deg, rgba(17, 18, 44, 0.22), rgba(17, 18, 44, 0.48)),
    url("assets/world/star-village-islands-v1.jpg") center / cover;
  box-shadow: 0 1.5rem 4rem rgba(31, 27, 55, 0.18);
}
.map-stars { position: absolute; inset: 0; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 41px 41px; opacity: 0.14; }
.map-route {
  position: absolute;
  left: 20%;
  right: 18%;
  top: 48%;
  height: 2px;
  transform: rotate(-3deg);
  background: repeating-linear-gradient(90deg, rgba(255, 230, 164, 0.9) 0 7px, transparent 7px 16px);
  filter: drop-shadow(0 0 7px #ffe39e);
}
.map-island {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(17rem, 30%);
  min-height: 5.1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 1.2rem;
  background: rgba(20, 20, 51, 0.78);
  color: white;
  cursor: pointer;
  backdrop-filter: blur(12px);
  text-align: left;
}
.map-island:hover:not(:disabled) { transform: translateY(-3px); background: rgba(43, 38, 88, 0.92); }
.map-island:disabled { cursor: not-allowed; opacity: 0.58; }
.map-island.is-complete { border-color: rgba(255, 224, 138, 0.8); }
.island-1 { left: 3%; bottom: 9%; }
.island-2 { left: 24%; top: 7%; }
.island-3 { right: 28%; bottom: 9%; }
.island-4 { right: 3%; top: 7%; border-color: rgba(196, 174, 255, 0.72); box-shadow: 0 0 1.5rem rgba(154, 126, 240, 0.18); }
.island-5 { left: 3%; top: 38%; border-style: dashed; }
.island-6 { right: 3%; bottom: 9%; border-color: rgba(255, 224, 120, 0.72); box-shadow: 0 0 1.5rem rgba(255, 212, 102, 0.18); }
.island-orb { position: relative; display: grid; flex: 0 0 3.3rem; width: 3.3rem; height: 3.3rem; place-items: center; }
.island-orb i { position: absolute; inset: 0; border: 1px solid rgba(255, 225, 152, 0.55); border-radius: 50%; animation: orbit-pulse 3s ease-in-out infinite; }
.island-orb b { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: #f0c86f; color: #30284b; }
.island-copy small, .island-copy strong { display: block; }
.island-copy small { color: #e5deef; font-size: 0.64rem; }
.island-copy strong { margin-top: 0.2rem; font-size: 0.88rem; }
.tutorial-replay { display: block; margin: 0.9rem auto 0; }

.inline-overlay, .global-overlay, .nested-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(26, 24, 43, 0.58);
  backdrop-filter: blur(8px);
}
.nested-overlay { z-index: 130; background: rgba(26, 24, 43, 0.72); }
.global-overlay { z-index: 200; }
.tutorial-card, .safety-dialog, .integration-dialog {
  width: min(36rem, 100%);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.4rem, 5vw, 2.4rem);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 1.6rem;
  background: var(--paper-strong);
  box-shadow: 0 2rem 7rem rgba(20, 18, 38, 0.28);
}
.tutorial-card h2, .safety-dialog h2, .integration-dialog h2, .summary-dialog h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.45; font-weight: 560; }
.tutorial-card > p:not(.eyebrow), .safety-dialog > p:not(.eyebrow), .integration-dialog > p:not(.eyebrow), .summary-dialog > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; align-items: center; margin-top: 1.6rem; }
.primary-button.compact { min-height: 3rem; padding: 0.65rem 1.2rem; gap: 0.7rem; }

.battle-screen {
  width: 100%;
  max-width: none;
  color: #f9f6ff;
  background:
    radial-gradient(circle at 18% 17%, rgba(159, 134, 255, 0.2), transparent 25rem),
    radial-gradient(circle at 83% 26%, rgba(85, 196, 236, 0.12), transparent 23rem),
    radial-gradient(circle at 50% 120%, rgba(87, 68, 153, 0.35), transparent 42rem),
    #1f1d43;
}
.battle-screen .topbar { border-color: rgba(255, 255, 255, 0.14); }
.battle-screen .wordmark, .battle-screen .help-button { color: #fff; }
.battle-screen .version-mark { color: #bdb7d2; }
.battle-screen .language-switch { border-color: rgba(255, 255, 255, 0.2); background: rgba(9, 9, 28, 0.38); }
.battle-screen .language-switch button { color: #d9d3e9; }
.battle-screen .language-switch button[aria-pressed="true"] { background: #f2d477; color: #26213e; }
.battle-screen .eyebrow { color: #f2d477; }
.battle-screen .screen-content { align-items: center; }
.battle-layout { width: min(78rem, 100%); margin: auto; padding: clamp(1rem, 2.5vw, 2.2rem) 0; }
.battle-copy { max-width: 46rem; margin: 0 auto 1rem; text-align: center; }
.battle-copy h1 { color: #fff; text-shadow: 0 0 2rem rgba(182, 164, 255, 0.18); }
.battle-copy p { color: #cbc5dc; }
.battle-stage {
  position: relative;
  min-height: clamp(28rem, 46vw, 33rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 24% 54%, rgba(115, 207, 255, 0.12), transparent 18rem),
    radial-gradient(circle at 76% 43%, rgba(166, 105, 255, 0.16), transparent 19rem),
    radial-gradient(circle at 50% 105%, rgba(109, 102, 176, 0.44), transparent 48%),
    linear-gradient(145deg, rgba(39, 36, 79, 0.96), rgba(13, 13, 37, 0.98));
  box-shadow: 0 1.6rem 4rem rgba(5, 5, 24, 0.4), inset 0 0 5rem rgba(134, 117, 218, 0.06);
  isolation: isolate;
  perspective: 60rem;
}
.battle-stage::before {
  position: absolute;
  z-index: 0;
  inset: 30% 0 0;
  content: "";
  background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(162, 208, 255, 0.035) 8.15% 8.3%);
  clip-path: polygon(46% 0, 54% 0, 92% 100%, 8% 100%);
  pointer-events: none;
  transform: perspective(24rem) rotateX(58deg) scaleX(1.5);
  transform-origin: 50% 100%;
}
.battle-sky, .battle-ground, .battle-speed-lines, .arena-flash { position: absolute; inset: 0; pointer-events: none; }
.battle-sky {
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(255, 239, 170, 0.85) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(183, 222, 255, 0.55) 0 1px, transparent 1.7px);
  background-position: 0 0, 2rem 3rem;
  background-size: 5.7rem 6.4rem, 8.3rem 7.5rem;
  opacity: 0.52;
  animation: battle-stars-drift 18s linear infinite;
}
.battle-sky i { position: absolute; border: 1px solid rgba(154, 217, 255, 0.1); border-radius: 50%; }
.battle-sky i:nth-child(1) { left: 8%; top: 12%; width: 8rem; height: 8rem; }
.battle-sky i:nth-child(2) { right: 8%; top: 8%; width: 13rem; height: 13rem; }
.battle-sky i:nth-child(3) { left: 42%; bottom: 7%; width: 18rem; height: 18rem; }
.battle-ground {
  z-index: 0;
  left: -10%;
  right: -10%;
  top: auto;
  bottom: -35%;
  height: 61%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0, rgba(104, 105, 178, 0.6), rgba(18, 20, 55, 0.95) 68%);
  box-shadow: inset 0 2rem 5rem rgba(146, 227, 255, 0.06);
  animation: battle-ground-breathe 5s ease-in-out infinite;
}
.battle-speed-lines { z-index: 11; overflow: hidden; opacity: 0; }
.battle-speed-lines i {
  position: absolute;
  left: 20%;
  width: 22%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(199, 242, 255, 0.9), transparent);
  box-shadow: 0 0 0.8rem rgba(147, 222, 255, 0.5);
}
.battle-speed-lines i:nth-child(1) { top: 37%; }
.battle-speed-lines i:nth-child(2) { top: 51%; width: 30%; }
.battle-speed-lines i:nth-child(3) { top: 65%; width: 17%; }
.is-attacking .battle-speed-lines { opacity: 1; }
.is-attacking .battle-speed-lines i { animation: battle-speed-line 0.5s ease-out both; }
.is-attacking .battle-speed-lines i:nth-child(2) { animation-delay: 45ms; }
.is-attacking .battle-speed-lines i:nth-child(3) { animation-delay: 90ms; }
.arena-flash { z-index: 13; opacity: 0; background: radial-gradient(circle at 73% 48%, rgba(255, 245, 190, 0.42), transparent 18%); }
.is-attacking .arena-flash { animation: arena-impact-flash 0.28s 0.28s ease-out both; }
.is-countering .arena-flash { animation: arena-impact-flash 0.22s 0.28s ease-out both, arena-counter-flash 0.24s 0.54s ease-out both; }
.fighter-card { display: grid; justify-items: center; min-width: 0; text-align: center; }
.fighter-label strong { display: block; margin-top: -0.25rem; color: #fff; font-size: clamp(0.72rem, 1.2vw, 0.9rem); font-weight: 620; text-shadow: 0 0.1rem 0.65rem #08091d; }
.battle-hud {
  position: absolute;
  z-index: 20;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(0.45rem, 1.5vw, 1rem);
  align-items: start;
  margin: 0;
  pointer-events: none;
}
.battle-hud label {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(9, 10, 35, 0.88), rgba(36, 31, 74, 0.7));
  box-shadow: 0 0.6rem 1.5rem rgba(3, 4, 20, 0.24), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(9px);
}
.battle-hud label > span { display: flex; min-width: 0; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.battle-hud strong, .battle-hud small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-hud strong { color: #fff; font-size: 0.76rem; }
.battle-hud small { color: #c9c4db; font-size: 0.66rem; }
.battle-hud .boss-meter { text-align: right; }
.battle-turn {
  align-self: center;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgba(242, 212, 119, 0.42);
  border-radius: 999px;
  background: rgba(7, 8, 28, 0.84);
  color: #f7dc86;
  font: 650 0.62rem/1 system-ui, sans-serif;
  letter-spacing: 0.09em;
  box-shadow: 0 0 1rem rgba(242, 212, 119, 0.12);
}
.cloud-attack-control {
  position: absolute;
  z-index: 8;
  left: 7%;
  bottom: 8%;
  width: min(16rem, 29%);
  min-height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
  touch-action: manipulation;
}
.cloud-attack-control:hover:not(:disabled) .battle-cloud { filter: drop-shadow(0 0 1.8rem rgba(229, 215, 255, 0.58)); transform: translateY(-0.35rem) scale(1.025); }
.cloud-attack-control:active:not(:disabled) .battle-cloud { transform: translateY(0.2rem) scale(0.98); }
.cloud-attack-control:disabled { cursor: wait; opacity: 1; }
.cloud-attack-control::after {
  position: absolute;
  z-index: -1;
  inset: 31% 17% 22%;
  content: "";
  border: 1px solid transparent;
  border-radius: 48%;
  opacity: 0;
  pointer-events: none;
}
.cloud-attack-control:focus-visible { outline: 0; }
.cloud-attack-control:focus-visible::after { border-color: rgba(255, 239, 172, 0.72); opacity: 1; box-shadow: 0 0 0.5rem rgba(242, 212, 119, 0.7), 0 0 2rem rgba(157, 213, 255, 0.38); }
.battle-cloud {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 0.675;
  filter: drop-shadow(0 1.2rem 1.3rem rgba(7, 7, 27, 0.45));
  transition: transform 180ms ease, filter 180ms ease;
  animation: battle-cloud-ready 2.8s ease-in-out infinite;
}
.boss-fighter { position: absolute; z-index: 7; right: 8%; top: 17%; width: min(17rem, 27%); transform-style: preserve-3d; }
.boss-depth { position: relative; width: 100%; aspect-ratio: 1; transform-style: preserve-3d; animation: boss-orbit-3d 3.2s ease-in-out infinite; }
.boss-art {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 50% 51%, #000 0 47%, rgba(0, 0, 0, 0.98) 59%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 51%, #000 0 47%, rgba(0, 0, 0, 0.98) 59%, transparent 78%);
  filter: contrast(1.08) saturate(1.12) drop-shadow(0 1.5rem 1.2rem rgba(0, 0, 0, 0.48)) drop-shadow(0 0 2rem rgba(124, 91, 232, 0.34));
}
.boss-halo { position: absolute; z-index: 1; inset: 7%; border: 2px solid rgba(242, 200, 111, 0.64); border-radius: 50%; box-shadow: 0 0 2rem rgba(242, 200, 111, 0.32), inset 0 0 1.2rem rgba(139, 113, 245, 0.34); animation: boss-halo-turn 7s linear infinite; }
.boss-halo::before, .boss-halo::after { position: absolute; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: #fff1a8; box-shadow: 0 0 1rem #f4d36e; content: ""; }
.boss-halo::before { left: 12%; top: 8%; }
.boss-halo::after { right: 6%; bottom: 18%; }
.boss-shadow { position: absolute; z-index: 0; left: 18%; right: 18%; bottom: 2%; height: 12%; border-radius: 50%; background: rgba(4, 4, 18, 0.62); filter: blur(0.45rem); transform: translateZ(-2rem); }
.boss-impact { position: absolute; z-index: 5; left: 50%; top: 52%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.boss-impact i { position: absolute; left: -2.2rem; top: -2.2rem; width: 4.4rem; height: 4.4rem; border: 0.22rem solid #fff0a5; border-radius: 50%; box-shadow: 0 0 1rem #fff, 0 0 2.4rem #bca2ff; }
.boss-impact b { position: absolute; left: 1rem; top: -3.2rem; color: #fff4ad; font-size: clamp(1.3rem, 3vw, 2.2rem); text-shadow: 0 0 0.7rem #6e47dc, 0 0.12rem #17142d; }
.is-attacking .boss-impact { animation: boss-impact-bloom 0.38s 0.28s ease-out both; }
.is-attacking .boss-impact i { animation: boss-impact-ring 0.38s 0.28s ease-out both; }
.is-attacking .boss-impact b { animation: damage-pop 0.44s 0.3s ease-out both; }
.cloud-projectiles { position: absolute; z-index: 12; left: 27%; right: 27%; top: 42%; height: 7rem; pointer-events: none; }
.cloud-projectiles span { position: absolute; left: 0; top: 42%; display: block; width: 2rem; height: 1rem; opacity: 0; filter: drop-shadow(0 0 0.55rem currentColor); transform: translateX(-50%); }
.cloud-projectiles span:nth-child(2) { top: 18%; transform: translateX(-50%) scale(0.76); }
.cloud-projectiles span:nth-child(3) { top: 67%; transform: translateX(-50%) scale(0.62); }
.guardian-shot-wind .cloud-projectiles span { width: 4.4rem; height: 0.82rem; border: 0.16rem solid #b9f5ff; border-right-color: transparent; border-radius: 50%; color: #b9f5ff; background: linear-gradient(90deg, transparent, rgba(185, 245, 255, 0.7)); }
.guardian-shot-rain .cloud-projectiles span { width: 1.05rem; height: 1.55rem; border-radius: 60% 40% 65% 35%; color: #91d9ff; background: linear-gradient(145deg, #d7f5ff, #4aa9ff); transform: translateX(-50%) rotate(38deg); }
.guardian-shot-aurora .cloud-projectiles span { width: 5rem; height: 0.78rem; border-radius: 999px 20% 20% 999px; color: #efa8ff; background: linear-gradient(90deg, rgba(102, 239, 255, 0), #8de9ff 28%, #e99cff 66%, #fff6bb); box-shadow: 0 0 0.8rem currentColor; }
.guardian-shot-thunder .cloud-projectiles span { width: 1.7rem; height: 2.8rem; color: #ffe46f; background: linear-gradient(160deg, #fff8bd, #ffd747); clip-path: polygon(44% 0, 100% 0, 64% 38%, 92% 38%, 20% 100%, 39% 53%, 8% 53%); }
.guardian-shot-star .cloud-projectiles span { width: 2rem; height: 2rem; color: #fff0a0; background: radial-gradient(circle, #fff 0 12%, #fff0a0 24%, transparent 67%); clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 35%); }
.guardian-shot-wind.is-attacking .cloud-projectiles span { animation: cloud-wind-shot 0.5s cubic-bezier(0.15, 0.72, 0.2, 1) both; }
.guardian-shot-rain.is-attacking .cloud-projectiles span { animation: cloud-rain-shot 0.56s cubic-bezier(0.2, 0.64, 0.2, 1) both; }
.guardian-shot-aurora.is-attacking .cloud-projectiles span { animation: cloud-aurora-shot 0.6s cubic-bezier(0.14, 0.7, 0.2, 1) both; }
.guardian-shot-thunder.is-attacking .cloud-projectiles span { animation: cloud-thunder-shot 0.46s steps(5, end) both; }
.guardian-shot-star.is-attacking .cloud-projectiles span { animation: cloud-star-shot 0.58s cubic-bezier(0.16, 0.7, 0.22, 1) both; }
.is-attacking .cloud-projectiles span:nth-child(2) { animation-delay: 55ms; }
.is-attacking .cloud-projectiles span:nth-child(3) { animation-delay: 105ms; }
.boss-counter-shot { position: absolute; z-index: 14; left: 27%; right: 27%; top: 51%; height: 3rem; pointer-events: none; }
.boss-counter-shot span { position: absolute; right: 0; top: 0; width: 2.8rem; height: 1.2rem; border-radius: 999px 50% 50% 999px; opacity: 0; background: radial-gradient(circle at 24% 50%, #fff 0 8%, #ba80ff 19%, #6843c9 42%, rgba(50, 25, 104, 0.18) 72%); filter: drop-shadow(0 0 0.8rem #9c6cff); }
.is-countering .boss-counter-shot span { animation: boss-counter-shot 0.28s 0.49s ease-in both; }
.is-attacking .cloud-attack-control { animation: cloud-lunge 0.34s ease-out both; }
.is-attacking .boss-depth { animation: boss-hit-3d 0.28s 0.31s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.is-countering .boss-depth { animation: boss-hit-3d 0.24s 0.31s ease-out both, boss-counter-3d 0.25s 0.5s ease-out both; }
.is-countering .cloud-attack-control { animation: cloud-lunge 0.34s ease-out both, cloud-counter-recoil 0.2s 0.59s ease-out both; }
.battle-stage.is-defeating .boss-fighter { animation: boss-defeat-3d 0.78s cubic-bezier(0.42, 0, 0.78, 0.34) forwards; }
.battle-stage.is-defeating .boss-halo { animation: boss-energy-collapse 0.7s ease-in forwards; }
.battle-stage.is-defeated .boss-fighter { visibility: hidden; opacity: 0; }
.battle-tap-hint { position: absolute; z-index: 16; left: 50%; bottom: 0.9rem; display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.55rem 0.85rem; border: 1px solid rgba(242, 212, 119, 0.28); border-radius: 999px; background: rgba(7, 8, 27, 0.82); color: #f8f4ff; font-size: 0.78rem; pointer-events: none; transform: translateX(-50%); backdrop-filter: blur(10px); white-space: nowrap; }
.battle-tap-hint span { color: #f2d477; }
progress { width: 100%; height: 0.58rem; overflow: hidden; border: 0; border-radius: 999px; background: #45405e; }
progress::-webkit-progress-bar { background: #45405e; }
progress::-webkit-progress-value { background: linear-gradient(90deg, #8e79d4, #f0cf73); }
progress::-moz-progress-bar { background: #8e79d4; }
.battle-hud .guardian-meter progress::-webkit-progress-value { background: linear-gradient(90deg, #69dff2, #f0cf73); }
.battle-hud .boss-meter progress::-webkit-progress-value { background: linear-gradient(90deg, #ff9c75, #b374f0); }
.battle-hud .guardian-meter progress::-moz-progress-bar { background: #69dff2; }
.battle-hud .boss-meter progress::-moz-progress-bar { background: #d07ae6; }
.battle-message { min-height: 2.8rem; margin: 0.65rem 0 0; padding: 0.7rem 1rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.85rem; background: rgba(9, 9, 29, 0.42); color: #d8d1e7; font-size: 0.8rem; line-height: 1.55; text-align: center; }
.battle-layout > .primary-button { display: flex; min-width: min(20rem, 100%); margin: 1.5rem auto 0; }
.battle-dialog { border-color: rgba(242, 212, 119, 0.34); background: rgba(22, 20, 51, 0.97); color: #fff; box-shadow: 0 2rem 7rem rgba(4, 4, 20, 0.65); }
.battle-dialog > p:not(.eyebrow), .battle-dialog .keyboard-hint { color: #cfc8df; }
.battle-dialog-instruction { display: block; margin-top: 1rem; color: #fff1ba; font-size: clamp(1rem, 2.4vw, 1.18rem); line-height: 1.65; }
.battle-dialog-actions { justify-content: flex-end; }
.battle-dialog .primary-button { background: #f2d477; color: #28213d; }
.battle-dialog .primary-button:hover { background: #ffe99e; }
.victory-overlay { background: rgba(10, 9, 30, 0.68); }
.victory-dialog { animation: victory-dialog-arrive 0.42s ease-out both; }

@keyframes battle-stars-drift { to { background-position: 5.7rem 6.4rem, -6.3rem 7.5rem; } }
@keyframes battle-ground-breathe { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-0.45rem) scaleX(1.025); } }
@keyframes battle-cloud-ready { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); } 50% { transform: translate3d(0.25rem, -0.55rem, 1rem) rotate(1deg); } }
@keyframes cloud-lunge { 0%, 100% { transform: translate3d(0, 0, 0); } 48% { transform: translate3d(1.35rem, -0.3rem, 2rem) scale(1.04); } }
@keyframes battle-speed-line { 0% { opacity: 0; transform: translateX(-45%) scaleX(0.2); } 36% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(245%) scaleX(1.4); } }
@keyframes arena-impact-flash { 0%, 100% { opacity: 0; } 42% { opacity: 1; } }
@keyframes arena-counter-flash { 0%, 100% { opacity: 0; background: radial-gradient(circle at 73% 48%, rgba(180, 115, 255, 0.58), transparent 17%); } 45% { opacity: 1; } }
@keyframes boss-orbit-3d { 0%, 100% { transform: translate3d(-0.35rem, 0.15rem, 0) rotateY(-8deg) rotateZ(-1deg) scale(0.98); } 48% { transform: translate3d(0.55rem, -0.7rem, 2.2rem) rotateY(9deg) rotateZ(1.5deg) scale(1.035); } 72% { transform: translate3d(0.18rem, -0.25rem, 1rem) rotateY(3deg) rotateZ(-0.6deg) scale(1.01); } }
@keyframes boss-halo-turn { to { transform: rotate(360deg); } }
@keyframes boss-hit-3d { 0% { transform: translate3d(0, 0, 1rem) rotateY(0) scale(1); } 38% { transform: translate3d(0.9rem, -0.45rem, -2rem) rotateY(-22deg) rotateZ(6deg) scale(0.92); filter: brightness(1.8); } 100% { transform: translate3d(0, 0, 0) rotateY(0) scale(1); } }
@keyframes boss-counter-3d { 0% { transform: translate3d(0, 0, 0) rotateY(0); } 45% { transform: translate3d(-1.4rem, 0.35rem, 3rem) rotateY(16deg) rotateZ(-4deg) scale(1.08); filter: brightness(1.35) saturate(1.4); } 100% { transform: translate3d(0, 0, 0) rotateY(0); } }
@keyframes cloud-counter-recoil { 0%, 100% { transform: translateX(0); } 42% { transform: translate3d(-0.72rem, 0.22rem, 0) rotate(-2deg); filter: brightness(1.5); } }
@keyframes boss-defeat-3d { 0% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) rotateZ(0) scale(1); filter: brightness(1); } 42% { opacity: 1; transform: translate3d(0, -1.2rem, 2rem) rotateX(14deg) rotateZ(-8deg) scale(1.08); filter: brightness(1.7) saturate(0.55); } 100% { opacity: 0; transform: translate3d(2rem, 5rem, -8rem) rotateX(64deg) rotateZ(22deg) scale(0.18); filter: brightness(2) saturate(0); } }
@keyframes boss-energy-collapse { 0% { opacity: 1; transform: rotate(0) scale(1); } 100% { opacity: 0; transform: rotate(180deg) scale(0.12); } }
@keyframes boss-impact-bloom { 0% { opacity: 0; transform: scale(0.35); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes boss-impact-ring { 0% { opacity: 0; transform: scale(0.2); } 38% { opacity: 1; } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes damage-pop { 0% { opacity: 0; transform: translateY(0.8rem) scale(0.55); } 32% { opacity: 1; transform: translateY(0) scale(1.18); } 100% { opacity: 0; transform: translateY(-1.9rem) scale(0.94); } }
@keyframes boss-counter-shot { 0% { right: 0; opacity: 0; transform: scaleX(0.45); } 24% { opacity: 1; } 100% { right: 100%; opacity: 0; transform: scaleX(1.15); } }
@keyframes cloud-wind-shot { 0% { left: 0; opacity: 0; transform: translateX(-50%) rotate(-10deg) scale(0.35); } 30% { opacity: 1; } 100% { left: 100%; opacity: 0; transform: translateX(-50%) rotate(12deg) scale(1.1); } }
@keyframes cloud-rain-shot { 0% { left: 0; opacity: 0; transform: translate(-50%, -2rem) rotate(28deg) scale(0.4); } 35% { opacity: 1; } 100% { left: 100%; opacity: 0; transform: translate(-50%, 2.2rem) rotate(48deg) scale(1.05); } }
@keyframes cloud-aurora-shot { 0% { left: 0; opacity: 0; transform: translateX(-50%) rotate(-10deg) scaleX(0.2); } 40% { opacity: 1; filter: hue-rotate(0deg) drop-shadow(0 0 0.55rem currentColor); } 100% { left: 100%; opacity: 0; transform: translate(-50%, -1.5rem) rotate(12deg) scaleX(1.25); filter: hue-rotate(80deg) drop-shadow(0 0 0.8rem currentColor); } }
@keyframes cloud-thunder-shot { 0% { left: 0; opacity: 0; transform: translateX(-50%) scale(0.25); } 24% { opacity: 1; filter: brightness(2.2) drop-shadow(0 0 0.55rem currentColor); } 100% { left: 100%; opacity: 0; transform: translateX(-50%) rotate(30deg) scale(1.35); } }
@keyframes cloud-star-shot { 0% { left: 0; opacity: 0; transform: translateX(-50%) rotate(-20deg) scale(0.25); } 30% { opacity: 1; } 68% { opacity: 1; transform: translate(-50%, -1rem) rotate(140deg) scale(1.25); } 100% { left: 100%; opacity: 0; transform: translateX(-50%) rotate(240deg) scale(0.6); } }
@keyframes victory-dialog-arrive { from { opacity: 0; transform: translateY(1rem) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.cards-layout { width: min(78rem, 100%); margin-inline: auto; padding: 1.4rem 0 0.5rem; }
.cards-heading { display: grid; grid-template-columns: 1fr auto; gap: 0 2rem; align-items: end; margin-bottom: 1rem; }
.cards-heading .eyebrow, .cards-heading h1, .cards-heading .cards-command, .cards-heading .cards-explanation { grid-column: 1; }
.cards-command { font-size: 1.08rem; font-weight: 650; color: var(--ink) !important; }
.cards-explanation { max-width: 57rem; font-size: 0.78rem; }
.card-progress { grid-column: 2; grid-row: 1 / span 4; align-self: center; padding: 0.65rem 1rem; border-radius: 999px; background: var(--gold); color: #17192b; font-size: 0.78rem; white-space: nowrap; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(56rem, 100%); margin-inline: auto; gap: 1rem; perspective: 1200px; }
.message-card {
  min-width: 0;
  aspect-ratio: 0.78;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  cursor: pointer;
  perspective: 900px;
}
.message-card:disabled { cursor: default; opacity: 0.44; }
.card-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(.2,.72,.22,1); }
.message-card.is-open .card-inner { transform: rotateY(180deg); }
.card-back, .card-front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  backface-visibility: hidden;
}
.card-back { gap: 0.4rem; padding: 0.7rem; background: linear-gradient(150deg, #282343, #5c4b82); color: white; }
.card-back::before { position: absolute; inset: 0.45rem; border: 1px solid rgba(255, 230, 158, 0.42); border-radius: 0.72rem; content: ""; }
.card-back i { color: #f3cf7a; font-size: clamp(1.2rem, 3vw, 2rem); }
.card-back small { font-size: 0.72rem; letter-spacing: 0.05em; }
.card-back strong { font-size: 0.9rem; }
.card-front { justify-content: flex-start; padding: 0.65rem; transform: rotateY(180deg); background: #151a38; color: var(--ink); text-align: left; }
.card-front .card-illustration { flex: 0 0 auto; width: 100%; height: auto; }
.card-front small { align-self: stretch; margin-top: 0.5rem; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.08em; }
.card-front strong { align-self: stretch; margin-top: 0.3rem; font-size: clamp(0.9rem, 1.4vw, 1.08rem); line-height: 1.4; }
.card-front > span { align-self: stretch; margin-top: 0.3rem; color: var(--muted); font-size: clamp(0.76rem, 1vw, 0.88rem); line-height: 1.55; }
.message-card.is-selected .card-front { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(230, 184, 93, 0.18); }
.card-illustration {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(218, 211, 255, 0.2);
  border-radius: 0.85rem;
  background: #201d43;
  box-shadow: 0 0.7rem 1.5rem rgba(5, 7, 25, 0.3), 0 0 1.2rem rgba(130, 111, 207, 0.12);
}

.card-summary-overlay { overflow-y: auto; align-items: start; padding-block: 1rem; }
.summary-dialog {
  width: min(70rem, 100%);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  border-radius: 1.8rem;
  background: var(--paper-strong);
  box-shadow: 0 2rem 7rem rgba(20, 18, 38, 0.32);
}
.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 1.2rem 0; }
.summary-cards article { padding: 0.75rem; border: 1px solid var(--line); border-radius: 1.2rem; background: rgba(255, 255, 255, 0.045); }
.summary-cards .card-illustration { align-self: start; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.summary-cards strong { display: block; margin-top: 0.65rem; }
.summary-cards p { min-height: 3.2rem; margin: 0.3rem 0 0.6rem; color: var(--muted); font-size: 0.76rem; line-height: 1.55; }
.summary-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0; }
.summary-options button, .payment-methods button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.7rem;
  min-height: 4.4rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.summary-options button > span { grid-row: span 2; align-self: center; font-size: 1.2rem; }
.summary-options small, .payment-methods small { color: var(--muted); font-size: 0.68rem; }
.summary-dialog > .primary-button { display: flex; width: min(24rem, 100%); margin: 1rem auto 0; }
.long-message { display: grid; grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 1.25fr); gap: 1.2rem 2rem; align-items: start; margin-top: 1.2rem; }
.long-message .card-illustration { grid-row: 1 / span 4; align-self: start; width: 100%; height: auto; border-radius: 1rem; }
.long-message > p { margin: 0; color: var(--muted); line-height: 1.6; }
.long-message ol { margin: 0; padding-left: 1.35rem; }
.long-message li { padding: 0.16rem 0; line-height: 1.5; }
.long-message .primary-button { justify-self: start; }
.integration-warning { padding: 0.9rem 1rem; border-left: 3px solid var(--gold); background: rgba(255, 223, 115, 0.1); color: #fff1ba !important; }
.flow-list { display: grid; gap: 0.6rem; margin: 1.2rem 0; padding-left: 1.5rem; }
.fake-field { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border: 1px dashed #777b9e; border-radius: 0.85rem; color: var(--muted); background: rgba(255, 255, 255, 0.045); }
.fake-field small { font-size: 0.62rem; letter-spacing: 0.08em; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin: 1rem 0; padding: 0.3rem; border: 1px solid var(--line); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.035); }
.auth-tabs button { min-height: 2.8rem; border: 0; border-radius: 0.65rem; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-weight: 650; }
.auth-tabs button[aria-pressed="true"] { background: var(--gold); color: #242039; }
.auth-form { display: grid; gap: 0.55rem; margin-top: 1rem; }
.auth-form label:not(.auth-consent) { color: var(--ink); font-size: 0.82rem; font-weight: 650; }
.auth-form > input { width: 100%; min-height: 3rem; padding: 0.72rem 0.85rem; border: 1px solid #777b9e; border-radius: 0.75rem; outline: none; background: rgba(8, 10, 31, 0.52); color: var(--ink); font: inherit; }
.auth-form > input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(230, 184, 93, 0.18); }
.auth-form > input:disabled, .auth-form button:disabled { cursor: wait; opacity: 0.62; }
.auth-field-hint, .auth-privacy { color: var(--muted); font-size: 0.7rem; line-height: 1.55; }
.auth-consent { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start; margin: 0.45rem 0; color: var(--muted); font-size: 0.72rem; line-height: 1.55; }
.auth-consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; accent-color: var(--gold); }
.auth-form .primary-button { width: 100%; margin-top: 0.45rem; }
.auth-notice { min-height: 1.4rem; margin: 0.75rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.55; }
.auth-notice[data-kind="error"] { color: #ffc2bc; }
.auth-secondary-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.7rem; margin-top: 0.7rem; }
.auth-loading { display: flex; gap: 0.7rem; align-items: center; padding: 1rem 0; color: var(--muted); }
.auth-loading span { color: var(--gold); animation: orbit-pulse 1.2s ease-in-out infinite; }
.auth-loading p { margin: 0; }
.auth-account { display: grid; gap: 0.65rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255, 255, 255, 0.04); }
.auth-account h3, .auth-account p { margin: 0; overflow-wrap: anywhere; }
.auth-account p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.auth-account .text-button { justify-self: start; }
.price-total { font-size: 1.1rem; font-weight: 650; color: var(--ink) !important; }
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.payment-methods button { grid-template-columns: 1fr; cursor: not-allowed; opacity: 0.65; }

.island-three-screen {
  width: 100%;
  max-width: none;
  color: #f9f6ff;
  background:
    radial-gradient(circle at 14% 18%, rgba(149, 130, 255, 0.2), transparent 26rem),
    radial-gradient(circle at 86% 24%, rgba(95, 202, 234, 0.12), transparent 24rem),
    linear-gradient(180deg, #121732, #17183b 65%, #10142e);
}
.island-three-screen .topbar { border-color: rgba(255, 255, 255, 0.14); }
.island-three-screen .wordmark, .island-three-screen .help-button { color: #fff; }
.island-three-screen .version-mark { color: #c5bfd8; }
.island-three-screen .language-switch { border-color: rgba(255, 255, 255, 0.2); background: rgba(7, 9, 27, 0.42); }
.island-three-screen .language-switch button { color: #d9d3e9; }
.island-three-screen .language-switch button[aria-pressed="true"] { background: #f2d477; color: #26213e; }
.island-three-screen .eyebrow { color: #f4d878; }
.island-three-layout { width: min(78rem, 100%); margin: auto; padding: clamp(0.8rem, 2.2vw, 1.7rem) 0; }
.island-three-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem; align-items: end; margin-bottom: 0.9rem; }
.island-three-heading h1 { margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 3.45rem); font-weight: 560; letter-spacing: -0.045em; }
.island-three-heading > div > p:last-child { max-width: 52rem; margin: 0.45rem 0 0; color: #c9c4d9; font-size: 0.83rem; line-height: 1.65; }
.island-three-progress { display: grid; min-width: 14rem; gap: 0.35rem; padding: 0.75rem 0.9rem; border: 1px solid rgba(255, 223, 115, 0.24); border-radius: 1rem; background: rgba(7, 9, 29, 0.55); text-align: center; }
.island-three-progress > span { display: flex; justify-content: center; gap: 0.32rem; }
.island-three-progress i { color: #625f7f; font-style: normal; filter: none; transition: color 220ms ease, filter 220ms ease, transform 220ms ease; }
.island-three-progress i.is-collected { color: #ffe37d; filter: drop-shadow(0 0 0.45rem #ffe37d); transform: scale(1.12); }
.island-three-progress strong { color: #eeeafd; font-size: 0.78rem; }
.island-three-arena {
  position: relative;
  height: clamp(31rem, 61vh, 39rem);
  min-height: 31rem;
  overflow: hidden;
  touch-action: none;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 2rem;
  background:
    linear-gradient(180deg, rgba(9, 11, 34, 0.22), rgba(10, 12, 39, 0.58)),
    url("assets/world/star-village-islands-v1.jpg") center 48% / cover;
  box-shadow: 0 1.5rem 4rem rgba(3, 4, 18, 0.42), inset 0 0 5rem rgba(147, 128, 255, 0.08);
  isolation: isolate;
  cursor: grab;
  user-select: none;
}
.island-three-arena:active { cursor: grabbing; }
.island-three-arena::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 229, 137, 0.12), transparent 23%),
    linear-gradient(90deg, rgba(8, 10, 31, 0.28), transparent 28%, transparent 72%, rgba(8, 10, 31, 0.25));
  pointer-events: none;
}
.island-three-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.island-three-sky i { position: absolute; width: 0.22rem; height: 0.22rem; border-radius: 50%; background: #fff6c5; box-shadow: 0 0 0.8rem #fff2a7; animation: island-three-twinkle 2.3s ease-in-out infinite; }
.island-three-sky i:nth-child(1) { left: 14%; top: 17%; }
.island-three-sky i:nth-child(2) { left: 62%; top: 11%; animation-delay: -0.8s; }
.island-three-sky i:nth-child(3) { right: 12%; top: 58%; animation-delay: -1.5s; }
.island-three-player { position: absolute; z-index: 12; left: calc(var(--x) * 1%); top: 82%; display: grid; width: clamp(6.3rem, 12vw, 8.8rem); height: clamp(5.2rem, 10vw, 7.2rem); place-items: center; transform: translate(-50%, -50%); pointer-events: none; transition: none; will-change: left; }
.island-three-cloud { position: relative; z-index: 2; width: 100%; height: 100%; filter: drop-shadow(0 0.8rem 0.85rem rgba(2, 3, 20, 0.45)); animation: cloud-float 2.8s ease-in-out infinite; }
.island-three-player-glow { position: absolute; inset: 17% 7%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 231, 143, 0.38), transparent 67%); filter: blur(0.6rem); }
.cloud-path-wind .island-three-player-glow { background: radial-gradient(circle, rgba(150, 224, 255, 0.48), transparent 67%); }
.cloud-path-rain .island-three-player-glow { background: radial-gradient(circle, rgba(125, 182, 255, 0.48), transparent 67%); }
.cloud-path-aurora .island-three-player-glow { background: radial-gradient(circle, rgba(199, 158, 255, 0.52), transparent 67%); }
.cloud-path-thunder .island-three-player-glow { background: radial-gradient(circle, rgba(255, 211, 96, 0.52), transparent 67%); }
.island-three-warden { position: absolute; z-index: 4; right: 1rem; top: 1rem; bottom: auto; width: 6rem; margin: 0; text-align: center; pointer-events: none; opacity: 0.78; transition: opacity 240ms ease, filter 240ms ease, transform 240ms ease; }
.island-three-warden > span { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255, 224, 122, 0.46); border-radius: 50%; background: #090b27; box-shadow: 0 0 2rem rgba(255, 211, 92, 0.18); }
.island-three-warden > span::after { position: absolute; inset: 0; content: ""; border-radius: inherit; box-shadow: inset 0 0 1.7rem #080a24; }
.island-three-warden img { width: 100%; height: 100%; object-fit: cover; }
.island-three-warden figcaption { margin-top: 0.3rem; color: #d8d2e7; font-size: 0.58rem; line-height: 1.25; }
.island-three-command-bar { display: grid; grid-template-columns: auto minmax(13rem, 19rem) minmax(0, 1fr); gap: 1rem; align-items: stretch; margin-top: 0.9rem; }
.island-three-message { min-height: 2.6rem; margin: 0; padding: 0.35rem 1rem 0.8rem; border-left: 0; color: #d7d1e5; font-size: 0.8rem; line-height: 1.55; }
.island-three-dialog-instruction { display: block; margin-top: 1rem; color: #fff; line-height: 1.7; }
.island-three-victory-dialog { border-color: rgba(255, 224, 115, 0.7); text-align: center; }
.island-three-victory-stars { display: flex; justify-content: center; gap: 0.75rem; margin: 1.2rem 0 0; color: #ffe378; }
.island-three-victory-stars i { font-style: normal; animation: island-three-light-pulse 1.8s ease-in-out infinite; }
.island-three-victory-stars i:nth-child(2) { animation-delay: -0.25s; }
.island-three-victory-stars i:nth-child(3) { animation-delay: -0.5s; }

/* Island 03 · Bring the Star Home */
.island-three-arena::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(180deg, rgba(6, 8, 28, 0.3), rgba(8, 10, 34, 0.16) 46%, rgba(7, 9, 31, 0.58)),
    radial-gradient(circle at 50% 8%, rgba(255, 225, 122, 0.16), transparent 20%);
  pointer-events: none;
}
.island-three-sky i:nth-child(4) { left: 35%; top: 42%; animation-delay: -0.4s; }
.island-three-sky i:nth-child(5) { left: 83%; top: 31%; animation-delay: -1.1s; }
.island-three-trajectory {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.island-three-trajectory path {
  fill: none;
  stroke: rgba(192, 231, 255, 0.88);
  stroke-width: 0.85;
  stroke-linecap: round;
  stroke-dasharray: 2 2.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 0.45rem rgba(144, 216, 255, 0.7));
}
.island-three-arena.shows-trajectory .island-three-trajectory,
.island-three-arena.is-power-active .island-three-trajectory,
.island-three-arena.phase-bouncing .island-three-trajectory { opacity: 0.72; }
.island-three-constellation {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 2.5%;
  width: 7rem;
  height: 4.6rem;
  transform: translateX(-50%);
  opacity: 0.58;
  pointer-events: none;
  transition: opacity 300ms ease, filter 300ms ease;
}
.island-three-constellation::before,
.island-three-constellation::after {
  position: absolute;
  content: "";
  height: 1px;
  background: rgba(255, 231, 146, 0.62);
  transform-origin: left center;
}
.island-three-constellation::before { left: 17%; top: 54%; width: 68%; transform: rotate(-13deg); }
.island-three-constellation::after { left: 32%; top: 25%; width: 44%; transform: rotate(40deg); }
.island-three-constellation i {
  position: absolute;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #ffe685;
  box-shadow: 0 0 0.75rem #ffd95b;
}
.island-three-constellation i:nth-child(1) { left: 9%; top: 58%; }
.island-three-constellation i:nth-child(2) { left: 30%; top: 22%; }
.island-three-constellation i:nth-child(3) { left: 51%; top: 56%; }
.island-three-constellation i:nth-child(4) { left: 74%; top: 18%; }
.island-three-constellation i:nth-child(5) { right: 4%; top: 49%; }
.island-three-constellation span {
  position: absolute;
  left: 50%;
  top: 42%;
  color: #fff1a5;
  font-size: 1rem;
  transform: translate(-50%, -50%);
}
.island-three-arena.is-complete .island-three-constellation,
.island-three-constellation.is-home {
  opacity: 1;
  filter: drop-shadow(0 0 1.2rem rgba(255, 225, 112, 0.9));
}
.island-three-shadow-current {
  position: absolute;
  z-index: 3;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  display: flex;
  width: calc(var(--width) * 1%);
  min-width: 6rem;
  gap: 0.45rem;
  transform: translate(-50%, -50%);
  opacity: 0.4;
  pointer-events: none;
  animation: island-three-current 4.6s ease-in-out var(--delay) infinite alternate;
}
.island-three-shadow-current i {
  display: block;
  width: 100%;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(150, 142, 204, 0.76), transparent);
  filter: blur(0.08rem);
}
.island-three-shadow-current i:nth-child(2) { transform: translateY(0.55rem); opacity: 0.72; }
.island-three-shadow-current i:nth-child(3) { transform: translateY(-0.48rem); opacity: 0.45; }
.island-three-ring {
  position: absolute;
  z-index: 8;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  display: grid;
  width: clamp(3.8rem, 7vw, 5.6rem);
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: rgba(235, 231, 255, 0.62);
  pointer-events: none;
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
}
.island-three-ring::before,
.island-three-ring::after,
.island-three-ring i {
  position: absolute;
  inset: 8%;
  content: "";
  border: 1px solid rgba(208, 198, 255, 0.38);
  border-radius: 50%;
}
.island-three-ring::after { inset: 20%; border-style: dashed; }
.island-three-ring i { inset: 0; border-color: rgba(255, 225, 118, 0.18); }
.island-three-ring b {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  font-weight: 650;
}
.island-three-ring.is-active {
  color: #fff0a1;
  filter: drop-shadow(0 0 1rem rgba(255, 222, 102, 0.7));
  animation: island-three-ring-ready 1.8s ease-in-out infinite;
}
.island-three-ring.is-active::before { border-color: #ffe078; border-width: 2px; }
.island-three-ring.is-active::after { border-color: rgba(255, 241, 181, 0.82); }
.island-three-ring.is-passed {
  color: #1d1736;
  background: rgba(255, 226, 118, 0.88);
  box-shadow: 0 0 1.4rem rgba(255, 220, 99, 0.4);
}
.island-three-ring.is-just-passed { animation: island-three-ring-pass 700ms ease-out both; }
.island-three-falling-star {
  position: absolute;
  z-index: 14;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  display: grid;
  width: clamp(3.7rem, 7vw, 5.4rem);
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: left, top;
}
.island-three-falling-star > span {
  position: absolute;
  left: 50%;
  bottom: 62%;
  width: 0.36rem;
  height: 3.4rem;
  border-radius: 999px;
  background: linear-gradient(0deg, rgba(255, 232, 143, 0.94), rgba(178, 210, 255, 0.08));
  filter: blur(0.05rem) drop-shadow(0 0 0.55rem #ffe27a);
  transform: translateX(-50%);
}
.island-three-falling-star img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 0.75rem rgba(255, 226, 119, 0.86));
}
.island-three-falling-star.phase-bouncing > span { bottom: 45%; height: 2.1rem; transform: translateX(-50%) rotate(180deg); }
.island-three-falling-star.phase-bouncing img { animation: island-three-star-spin 580ms ease-out infinite; }
.island-three-falling-star.phase-soft-land { filter: saturate(0.8); animation: island-three-soft-bounce 680ms ease-out both; }
.island-three-falling-star.phase-soft-land > span,
.island-three-falling-star.phase-checkpoint > span { opacity: 0; }
.island-three-soft-mist {
  position: absolute;
  z-index: 6;
  inset: auto 0 0;
  height: 20%;
  overflow: hidden;
  pointer-events: none;
}
.island-three-soft-mist::before {
  position: absolute;
  inset: 35% -8% -55%;
  content: "";
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(207, 207, 245, 0.64), transparent 31%),
    radial-gradient(ellipse at 66% 4%, rgba(169, 175, 231, 0.56), transparent 34%),
    linear-gradient(180deg, rgba(126, 132, 199, 0.28), rgba(21, 23, 65, 0.76));
  filter: blur(0.22rem);
}
.island-three-soft-mist i {
  position: absolute;
  bottom: 12%;
  width: 24%;
  height: 46%;
  border-radius: 50%;
  background: rgba(188, 190, 231, 0.22);
  filter: blur(0.5rem);
  animation: island-three-mist-breathe 4s ease-in-out infinite alternate;
}
.island-three-soft-mist i:nth-child(1) { left: 4%; }
.island-three-soft-mist i:nth-child(2) { left: 38%; animation-delay: -1.2s; }
.island-three-soft-mist i:nth-child(3) { right: 2%; animation-delay: -2.4s; }
.island-three-player::after {
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  width: 58%;
  height: 0.55rem;
  content: "";
  border-radius: 50%;
  background: rgba(3, 5, 24, 0.42);
  filter: blur(0.32rem);
  transform: translateX(-50%);
}
.island-three-arena[data-checkpoint="1"] .island-three-warden,
.island-three-arena[data-checkpoint="2"] .island-three-warden,
.island-three-arena[data-checkpoint="3"] .island-three-warden {
  opacity: 0.96;
  filter: drop-shadow(0 0 0.8rem rgba(255, 225, 121, 0.44));
  transform: scale(1.04);
}
.island-three-arena.phase-bouncing .island-three-player {
  filter: brightness(1.16) drop-shadow(0 0 1rem rgba(255, 230, 138, 0.58));
}
.island-three-arena.phase-bouncing .island-three-cloud { animation: island-three-cloud-catch 420ms ease-out both; }
.island-three-catch-impact {
  position: absolute;
  z-index: 16;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 6rem;
  height: 6rem;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.island-three-catch-impact::before,
.island-three-catch-impact i {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  border-radius: 50%;
}
.island-three-catch-impact::before { width: 55%; height: 55%; border: 2px solid #ffe68b; transform: translate(-50%, -50%); }
.island-three-catch-impact i { width: 0.45rem; height: 0.45rem; background: #fff0a2; box-shadow: 0 0 0.7rem #ffe06a; }
.island-three-catch-impact i:nth-child(1) { --impact-x: -2rem; --impact-y: -1.4rem; }
.island-three-catch-impact i:nth-child(2) { --impact-x: 2.1rem; --impact-y: -1.1rem; }
.island-three-catch-impact i:nth-child(3) { --impact-x: 0.2rem; --impact-y: 2rem; }
.island-three-arena.phase-bouncing .island-three-catch-impact { opacity: 1; }
.island-three-arena.phase-bouncing .island-three-catch-impact::before { animation: island-three-impact-ring 560ms ease-out both; }
.island-three-arena.phase-bouncing .island-three-catch-impact i { animation: island-three-impact-star 560ms ease-out both; }
.island-three-catch-guide {
  position: absolute;
  z-index: 5;
  left: calc(var(--x) * 1%);
  bottom: 12%;
  width: calc(var(--catch-radius, 15) * 2%);
  height: 18%;
  transform: translateX(-50%);
  border-left: 1px dashed rgba(255, 229, 143, 0.5);
  opacity: 0.72;
  pointer-events: none;
}
.island-three-catch-guide i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 1.4rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 229, 143, 0.7);
  border-top: 0;
  border-radius: 0 0 50% 50%;
}
.island-three-arena:not(.phase-falling) .island-three-catch-guide { opacity: 0; }
.island-three-companion {
  position: absolute;
  z-index: 15;
  left: calc(var(--companion-x, 50) * 1%);
  top: 73%;
  color: #fff0a4;
  font-size: 1.5rem;
  text-shadow: 0 0 0.85rem #ffe06b;
  transform: translateX(3.4rem);
  pointer-events: none;
  animation: orbit-pulse 1.6s ease-in-out infinite;
}
.island-three-companion.is-used { opacity: 0; }
.island-three-horizontal-controls { display: grid; grid-template-columns: repeat(2, 3.5rem); gap: 0.45rem; }
.island-three-horizontal-controls button {
  display: grid;
  min-width: 3.5rem;
  min-height: 3.5rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
}
.island-three-horizontal-controls button:hover,
.island-three-horizontal-controls button:focus-visible {
  border-color: rgba(255, 226, 126, 0.72);
  background: rgba(255, 224, 115, 0.16);
}
.island-three-power {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 224, 115, 0.48);
  border-radius: 1.1rem;
  background: rgba(37, 34, 75, 0.9);
  color: #fff;
  text-align: left;
}
.island-three-power[aria-disabled="true"] { cursor: default; opacity: 0.48; filter: saturate(0.72); }
.island-three-power.is-ready {
  cursor: pointer;
  border-color: #ffe078;
  background: linear-gradient(135deg, rgba(92, 69, 155, 0.94), rgba(46, 46, 103, 0.96));
  box-shadow: 0 0 1.4rem rgba(255, 222, 104, 0.22);
  animation: island-three-power-ready 1.6s ease-in-out infinite;
}
.island-three-power > span:last-child { display: grid; gap: 0.2rem; }
.island-three-power strong { font-size: 0.82rem; }
.island-three-power small { color: #d8d2ec; font-size: 0.75rem; line-height: 1.35; }
.island-three-power-orb {
  position: relative;
  display: grid;
  width: 2.7rem;
  aspect-ratio: 1;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 227, 128, 0.62);
  border-radius: 50%;
  color: #fff3b0;
  background: rgba(8, 10, 37, 0.72);
  font-size: 0;
  font-style: normal;
  isolation: isolate;
}
.island-three-power-orb i {
  position: absolute;
  inset: auto 0 0;
  height: var(--power);
  background: linear-gradient(180deg, #fff1a4, #f2c95e);
  opacity: 0.72;
  transition: height 100ms linear;
}
.island-three-power-orb::after {
  position: relative;
  z-index: 1;
  content: "✦";
  font-size: 1rem;
}
.island-three-status-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  border-left: 2px solid rgba(255, 224, 115, 0.7);
}
.island-three-status-copy > p { margin: 0; }
#island-three-power-status {
  padding: 0.6rem 1rem 0;
  color: #f1d97d;
  font-size: 0.76rem;
}
.island-three-direction-cue { min-height: 1.25rem; padding: 0.18rem 1rem 0; color: #f3f0ff; font-size: 0.8rem; font-weight: 650; }

.keepsake-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  width: min(72rem, 100%);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.keepsake-art-panel { min-width: 0; padding: 1rem 0.5rem; text-align: center; }
.keepsake-art-panel h1, .star-library h1 {
  margin: 0.6rem 0 1rem;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 550;
  line-height: 1.35;
  text-wrap: balance;
}
.star-jar { position: relative; width: min(18rem, 88%); height: 21rem; margin: 1rem auto 0; isolation: isolate; }
.jar-halo {
  position: absolute;
  inset: 12% -15% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(192, 168, 250, 0.24), rgba(230, 202, 118, 0.05) 48%, transparent 72%);
}
.jar-cork {
  position: absolute;
  z-index: 3;
  top: 0.3rem;
  left: 32%;
  width: 36%;
  height: 2rem;
  border: 1px solid rgba(255, 239, 176, 0.75);
  border-radius: 0.7rem 0.7rem 0.3rem 0.3rem;
  background: repeating-linear-gradient(95deg, transparent 0 7px, rgba(81, 47, 24, 0.13) 8px 9px), linear-gradient(#d7ae70, #9f7246);
  box-shadow: inset 0 0.2rem 0.25rem rgba(255, 246, 186, 0.27), 0 0.5rem 1.2rem rgba(5, 8, 23, 0.3);
}
.jar-glass {
  position: absolute;
  inset: 2rem 9% 1.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(230, 223, 255, 0.65);
  border-radius: 32% 32% 24% 24% / 23% 23% 14% 14%;
  background: linear-gradient(105deg, rgba(231, 226, 255, 0.22), rgba(165, 158, 228, 0.04) 25% 70%, rgba(211, 201, 252, 0.16)), radial-gradient(ellipse at 50% 70%, rgba(249, 212, 129, 0.12), rgba(139, 113, 221, 0.07) 60%);
  box-shadow: inset 0 0 1.4rem rgba(213, 204, 255, 0.13), inset 0 -0.35rem 0.15rem rgba(218, 210, 255, 0.2), 0 1.3rem 2.5rem rgba(4, 6, 20, 0.25);
}
.jar-glass::before, .jar-glass::after { position: absolute; content: ""; z-index: 2; pointer-events: none; }
.jar-glass::before { left: 8%; top: 20%; width: 0.5rem; height: 50%; border-radius: 999px; background: linear-gradient(rgba(255, 249, 255, 0.57), rgba(244, 238, 255, 0.04)); transform: rotate(2deg); }
.jar-glass::after { right: 9%; top: 26%; width: 1px; height: 48%; background: rgba(238, 232, 255, 0.32); }
.jar-glass img { width: 91%; height: auto; margin-top: -1.7rem; filter: drop-shadow(0 0 0.9rem rgba(232, 205, 139, 0.25)); animation: jar-star-float 4.5s ease-in-out infinite; }
.jar-dust { position: absolute; bottom: 11%; left: 0; width: 100%; color: #fbe5a4; letter-spacing: 0.45rem; text-shadow: 0 0 0.7rem #f5d085; }
.jar-ribbon { position: absolute; z-index: 4; bottom: 3.7rem; left: 21%; width: 58%; padding: 0.35rem; border: 1px solid rgba(247, 216, 132, 0.7); border-radius: 0.3rem; color: #f8e6ac; background: #28243f; font-size: 0.85rem; letter-spacing: 0.12em; }
.jar-quote { margin: 0.6rem 0 1.5rem; color: #e2daf7; font-size: 1.08rem; line-height: 1.85; white-space: pre-line; text-wrap: balance; }
.keepsake-caption { max-width: 26rem; margin: 0.8rem auto 0; color: var(--muted); font-size: 0.82rem; line-height: 1.65; }
.keepsake-writing { min-width: 0; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 1.5rem; background: rgba(24, 27, 55, 0.75); }
.keepsake-writing h2 { margin: 0.5rem 0 1.6rem; font-size: clamp(1.45rem, 2.1vw, 1.8rem); font-weight: 550; line-height: 1.5; text-wrap: balance; }
.keepsake-writing label { font-size: 0.95rem; line-height: 1.6; }
#star-note {
  display: block;
  width: 100%;
  min-height: 10rem;
  margin-top: 0.65rem;
  padding: 1rem;
  resize: vertical;
  border: 1px solid rgba(198, 184, 255, 0.38);
  border-radius: 0.85rem;
  background: rgba(5, 8, 23, 0.42);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.8;
}
#star-note::placeholder { color: #b8b1c9; opacity: 1; }
#star-note:focus-visible, .note-export-choice input:focus-visible, .keepsake-send summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.note-meta { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; margin-top: 0.65rem; color: var(--muted); font-size: 0.77rem; line-height: 1.6; }
.note-meta p { margin: 0; }
#star-note-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.note-export-choice { display: flex; gap: 0.75rem; align-items: center; min-height: 3rem; margin: 0.8rem 0; cursor: pointer; }
.note-export-choice input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--gold); cursor: pointer; }
.keepsake-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.keepsake-layout .secondary-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid rgba(198, 184, 255, 0.4);
  border-radius: 999px;
  background: rgba(185, 173, 255, 0.06);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.keepsake-layout .secondary-button:hover:not(:disabled) { background: rgba(185, 173, 255, 0.14); border-color: var(--violet); }
.keepsake-layout button:disabled { opacity: 0.52; cursor: not-allowed; transform: none; }
.keepsake-notice { min-height: 1.5rem; margin: 0.8rem 0; color: #f1dda2; font-size: 0.87rem; line-height: 1.7; overflow-wrap: anywhere; }
.keepsake-send { margin-top: 0.5rem; border-block: 1px solid var(--line); }
.keepsake-send summary { min-height: 3rem; padding: 0.9rem 0; color: #e7e0ff; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.keepsake-send summary::marker { color: var(--gold); }
.keepsake-send p { margin: 0.2rem 0 1rem; color: var(--muted); font-size: 0.86rem; line-height: 1.8; }
.keepsake-account { margin-top: 1.4rem; padding-block: 1.2rem; border-top: 1px dashed var(--line); }
.keepsake-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; }
.keepsake-footer .text-button, .keepsake-account .text-button { font-size: 0.87rem; }
.star-library { width: min(51rem, 100%); margin: 0 auto; padding-block: 2rem; }
.star-library > p:not(.eyebrow) { color: var(--muted); font-size: 0.95rem; line-height: 1.8; }
.star-memory-list { display: grid; gap: 0.8rem; margin-block: 1.7rem; }
.star-memory { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; width: 100%; padding: 1rem; border: 1px solid var(--line); border-radius: 1.1rem; background: rgba(185, 173, 255, 0.05); text-align: left; cursor: pointer; }
.star-memory:hover { border-color: rgba(214, 197, 255, 0.6); background: rgba(185, 173, 255, 0.1); }
.star-memory img { display: block; width: 100%; height: auto; }
.star-memory strong { display: block; color: #f4e7b7; font-size: 0.9rem; line-height: 1.65; font-weight: 550; }
.star-memory small { display: -webkit-box; margin-top: 0.35rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #c9c4d9; font-size: 0.87rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.star-memory > span:last-child { color: var(--violet); }
.star-library-empty { padding: 2rem 1rem; border: 1px dashed var(--line); border-radius: 1rem; color: var(--muted); text-align: center; line-height: 1.8; }
.island-three-victory-dialog { overscroll-behavior: contain; }
.island-three-victory-dialog .victory-star { display: block; width: 5rem; height: 5rem; margin: 0.3rem auto 0.8rem; object-fit: contain; filter: drop-shadow(0 0 1rem rgba(240, 211, 134, 0.25)); }
#island-three-victory-body { white-space: pre-line; }
.island-three-victory-dialog .dialog-actions { justify-content: center; }
.island-three-victory-dialog [data-action="collect-star"] { flex-basis: 100%; }
@keyframes jar-star-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-0.45rem) rotate(2deg); } }

@media (max-width: 760px) {
  .keepsake-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 1.3rem; }
  .keepsake-art-panel { padding-block: 0; }
  .keepsake-art-panel h1 { font-size: 1.9rem; }
  .star-jar { width: 15rem; height: 18rem; }
  .jar-glass { inset-block: 2rem 1.2rem; }
  .jar-ribbon { bottom: 3.1rem; }
  .keepsake-writing { padding: 1.25rem; }
  .keepsake-writing h2 { margin-bottom: 1.3rem; }
  .star-memory { grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.7rem; padding: 0.8rem; }
}
@media (max-width: 430px) {
  .keepsake-actions { flex-direction: column; }
  .keepsake-actions > button { width: 100%; }
  .keepsake-art-panel > .primary-button { width: min(21rem, 100%); }
  .keepsake-writing { padding: 1rem; }
  .note-meta { font-size: 0.8rem; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .island-three-victory-dialog { max-height: calc(100dvh - 2rem); padding-block: 1rem; }
  .island-three-victory-dialog .victory-star { width: 3.5rem; height: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jar-glass img { animation: none; }
}

.safety-dialog { border-top: 5px solid var(--danger); }
.crisis-links { display: grid; gap: 0.7rem; margin: 1.2rem 0; }
.crisis-links a { padding: 0.9rem 1rem; border: 1px solid rgba(255, 135, 152, 0.3); border-radius: 0.85rem; background: rgba(177, 78, 97, 0.14); color: #ffc6cf; font-weight: 650; text-decoration: none; }
.crisis-links a:hover { background: rgba(177, 78, 97, 0.24); }
.compact-support { grid-column: 2; margin: 0; }

@keyframes cloud-float { 0%, 100% { transform: translateY(0) rotate(-0.5deg); } 50% { transform: translateY(-0.55rem) rotate(0.5deg); } }
@keyframes orbit-pulse { 0%, 100% { transform: scale(0.9); opacity: 0.45; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes island-three-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes island-three-light-pulse { 0%, 100% { filter: brightness(0.9); } 50% { filter: brightness(1.35) drop-shadow(0 0 0.65rem #ffe37c); } }
@keyframes island-three-current { from { transform: translate(-56%, -50%); opacity: 0.22; } to { transform: translate(-44%, -45%); opacity: 0.5; } }
@keyframes island-three-ring-ready { 0%, 100% { transform: translate(-50%, -50%) scale(0.94); } 50% { transform: translate(-50%, -50%) scale(1.06); } }
@keyframes island-three-ring-pass { 0% { transform: translate(-50%, -50%) scale(0.82); filter: brightness(1); } 55% { transform: translate(-50%, -50%) scale(1.28); filter: brightness(1.7) drop-shadow(0 0 1.2rem #ffe078); } 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } }
@keyframes island-three-star-spin { from { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(7deg) scale(1.08); } to { transform: rotate(-6deg) scale(1); } }
@keyframes island-three-soft-bounce { 0% { transform: translate(-50%, -76%) scale(0.86); } 45% { transform: translate(-50%, -40%) scale(1.04, 0.9); } 72% { transform: translate(-50%, -55%) scale(0.96, 1.04); } 100% { transform: translate(-50%, -44%) scale(0.92); } }
@keyframes island-three-cloud-catch { 0% { transform: translateY(0) scale(1); } 36% { transform: translateY(0.35rem) scale(1.08, 0.88); } 70% { transform: translateY(-0.25rem) scale(0.96, 1.05); } 100% { transform: translateY(0) scale(1); } }
@keyframes island-three-impact-ring { from { opacity: 1; transform: translate(-50%, -50%) scale(0.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } }
@keyframes island-three-impact-star { from { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } to { opacity: 0; transform: translate(calc(-50% + var(--impact-x)), calc(-50% + var(--impact-y))) scale(1.25); } }
@keyframes island-three-mist-breathe { from { transform: translateX(-5%) scale(0.92); } to { transform: translateX(6%) scale(1.08); } }
@keyframes island-three-power-ready { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }

@media (max-width: 980px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); width: min(42rem, 100%); margin-inline: auto; }
  .message-card { width: 100%; min-height: 18rem; aspect-ratio: auto; }
  .card-front strong { font-size: 0.9rem; }
  .card-front > span { font-size: 0.76rem; }
}

@media (max-width: 720px) {
  .screen { padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); }
  .topbar { grid-template-columns: auto 1fr; }
  .version-mark { display: none; }
  .topbar-actions { justify-self: end; }
  .help-button { width: 2.75rem; overflow: hidden; padding: 0; white-space: nowrap; text-indent: -9999px; }
  .help-button::after { content: "?"; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; text-indent: 0; }
  .welcome-center { width: min(31rem, 100%); }
  .welcome-center h1 { font-size: clamp(4.1rem, 24vw, 7rem); }
  .welcome-body { font-size: 1rem; line-height: 1.82; }
  .continue-button { width: min(19rem, 100%); margin-top: 2rem; }
  .guardian-carousel { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; gap: 0.45rem; }
  .carousel-arrow { width: 2.75rem; height: 2.75rem; }
  .guardian-card { min-height: 28rem; padding-inline: 0.8rem; }
  .guardian-art-wrap { height: 15rem; }
  .map-heading { align-items: center; }
  .map-companion span { display: none; }
  .map-cloud { width: 3.3rem; height: 3.3rem; }
  .map-canvas { min-height: 36rem; border-radius: 1.4rem; }
  .map-route {
    left: 50%;
    right: auto;
    top: 14%;
    bottom: 14%;
    width: 2px;
    height: auto;
    transform: none;
    background: repeating-linear-gradient(180deg, rgba(255, 230, 164, 0.9) 0 7px, transparent 7px 16px);
  }
  .map-island { width: min(17rem, 78%); min-height: 4.5rem; }
  .island-1 { left: 4%; bottom: 6%; }
  .island-2 { left: 19%; top: 35%; }
  .island-3 { right: 3%; top: 5%; bottom: auto; }
  .battle-stage { min-height: 27rem; border-radius: 1.4rem; }
  .cloud-attack-control { left: 3%; bottom: 10%; width: min(17rem, 42%); }
  .boss-fighter { right: 3%; top: 23%; width: min(15rem, 36%); }
  .cloud-projectiles, .boss-counter-shot { left: 31%; right: 27%; top: 46%; }
  .battle-tap-hint { max-width: calc(100% - 1.2rem); font-size: 0.73rem; white-space: normal; text-align: center; }
  .battle-hud { gap: 0.42rem; }
  .battle-hud label { padding: 0.48rem 0.55rem; }
  .battle-hud label > span { display: grid; gap: 0.08rem; }
  .cards-heading { grid-template-columns: 1fr; }
  .card-progress { grid-column: 1; grid-row: auto; width: fit-content; margin-top: 0.7rem; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(32rem, 100%); gap: 0.75rem; }
  .message-card { min-height: 18rem; }
  .summary-cards { grid-template-columns: 1fr; }
  .summary-cards article { display: grid; grid-template-columns: 8rem 1fr; gap: 0 0.8rem; align-items: start; }
  .summary-cards .card-illustration { grid-row: 1 / span 4; }
  .summary-cards p { min-height: 0; }
  .summary-options, .payment-methods { grid-template-columns: 1fr; }
  .long-message { grid-template-columns: 1fr; }
  .long-message .card-illustration { grid-row: auto; width: min(20rem, 100%); margin-inline: auto; }
  .compact-support { grid-column: 1; }
  .island-three-heading { grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; align-items: end; margin-bottom: 0.65rem; }
  .island-three-progress { display: flex; min-width: 0; width: max-content; gap: 0.5rem; align-items: center; padding: 0.45rem 0.65rem; text-align: left; }
  .island-three-progress > span { justify-content: flex-start; }
  .island-three-arena { height: clamp(26rem, 58dvh, 31rem); min-height: 26rem; border-radius: 1.4rem; }
  .island-three-player { width: 6.2rem; height: 5.2rem; }
  .island-three-warden { right: 0.7rem; top: 0.7rem; bottom: auto; width: 5.1rem; }
  .island-three-command-bar { grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; }
  .island-three-status-copy { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .screen-content { align-items: start; }
  .welcome-screen .screen-content { align-items: center; }
  .narrow-layout { padding-block: 1.25rem 0.5rem; }
  .intro-panel h1 { font-size: 1.45rem; }
  .screen-lead { margin: 0.65rem auto 1rem; font-size: 0.8rem; }
  .guardian-card { min-height: 24.5rem; border-radius: 1.45rem; }
  .guardian-art-wrap { height: 12rem; }
  .guardian-card h2 { font-size: 1.7rem; }
  .ability-card { padding: 0.8rem; }
  .map-layout { padding-top: 0.85rem; }
  .map-heading h1, .battle-copy h1, .cards-heading h1 { font-size: 1.85rem; }
  .map-heading p:not(.eyebrow) { font-size: 0.76rem; }
  .map-canvas { min-height: 31rem; }
  .map-island { width: 82%; }
  .island-2 { left: 10%; }
  .battle-layout { padding-top: 0.75rem; }
  .battle-copy { margin-bottom: 0.75rem; }
  .battle-copy p { font-size: 0.8rem; }
  .battle-stage { min-height: 26rem; border-radius: 1.15rem; }
  .cloud-attack-control { left: 2%; bottom: 12%; width: 44%; }
  .boss-fighter { right: 1%; top: 28%; width: 37%; }
  .fighter-label strong { font-size: 0.76rem; }
  .cloud-projectiles, .boss-counter-shot { left: 30%; right: 24%; top: 49%; height: 6rem; }
  .battle-tap-hint { bottom: 0.6rem; }
  .battle-hud { top: 0.5rem; left: 0.5rem; right: 0.5rem; }
  .battle-hud label { padding: 0.42rem 0.48rem; }
  .battle-hud strong { font-size: 0.66rem; }
  .battle-hud small { font-size: 0.59rem; }
  .battle-turn { padding: 0.35rem 0.4rem; font-size: 0.54rem; }
  .battle-hud progress { height: 0.42rem; }
  .battle-message { min-height: 2.5rem; padding: 0.58rem 0.7rem; font-size: 0.74rem; }
  .battle-dialog { max-height: calc(100dvh - 1.5rem); padding: 1.3rem 1.15rem; }
  .battle-dialog h2 { font-size: 1.55rem; }
  .battle-dialog-instruction { font-size: 1rem; }
  .battle-dialog-actions .primary-button { width: 100%; min-height: 3.25rem; }
  .card-grid { gap: 0.6rem; }
  .message-card { width: 100%; min-height: 17rem; aspect-ratio: auto; border-radius: 0.7rem; }
  .card-back, .card-front { border-radius: 0.7rem; }
  .card-front { padding: 0.45rem; }
  .card-front small { font-size: 0.65rem; }
  .card-front strong { font-size: 0.88rem; }
  .card-front > span { font-size: 0.8rem; line-height: 1.48; }
  .summary-dialog { border-radius: 1.25rem; }
  .summary-cards article { grid-template-columns: 6.5rem 1fr; }
  .island-three-layout { padding-top: 0.7rem; }
  .island-three-heading h1 { font-size: 1.55rem; }
  .island-three-heading > div > p:last-child { font-size: 0.8rem; line-height: 1.45; }
  .island-three-progress { padding: 0.4rem 0.55rem; }
  .island-three-progress strong { font-size: 0.7rem; }
  .island-three-arena { height: clamp(21rem, 48dvh, 25rem); min-height: 21rem; border-radius: 1.15rem; }
  .island-three-player { width: 6.1rem; height: 5.2rem; }
  .island-three-falling-star { width: 3.25rem; }
  .island-three-ring { width: 3.45rem; }
  .island-three-warden { width: 4.1rem; }
  .island-three-warden figcaption { display: none; }
  .island-three-command-bar { gap: 0.6rem; }
  .island-three-horizontal-controls { grid-template-columns: repeat(2, 3.15rem); gap: 0.3rem; }
  .island-three-horizontal-controls button { min-width: 3.15rem; min-height: 3.5rem; border-radius: 0.8rem; }
  .island-three-power { min-width: 0; min-height: 3.8rem; padding: 0.55rem 0.65rem; }
  .island-three-power-orb { width: 2.35rem; }
  .island-three-power small { font-size: 0.75rem; }
  #island-three-power-status { padding-inline: 0.75rem; font-size: 0.78rem; }
  .island-three-direction-cue { padding-inline: 0.75rem; font-size: 0.82rem; }
  .island-three-message { min-height: 2.8rem; padding: 0.45rem 0.75rem 0.65rem; font-size: 0.82rem; }
  .island-three-dialog { max-height: calc(100dvh - 1.5rem); padding: 1.3rem 1.15rem; }
  .island-three-dialog .primary-button { width: 100%; min-height: 3.25rem; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .island-three-layout { padding-top: 0.35rem; }
  .island-three-heading { grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; margin-bottom: 0.4rem; }
  .island-three-heading .eyebrow,
  .island-three-heading > div > p:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .island-three-heading h1 { font-size: 1.35rem; }
  .island-three-progress { display: flex; min-width: 0; width: max-content; gap: 0.45rem; align-items: center; padding: 0.35rem 0.55rem; }
  .island-three-arena { height: clamp(14rem, 58dvh, 20rem); min-height: 14rem; border-radius: 1rem; }
  .island-three-player { width: 5.7rem; height: 4.8rem; }
  .island-three-falling-star { width: 3.1rem; }
  .island-three-ring { width: 3.1rem; }
  .island-three-warden { width: 3.5rem; }
  .island-three-warden figcaption { display: none; }
  .island-three-command-bar { grid-template-columns: auto minmax(12rem, 18rem) minmax(0, 1fr); gap: 0.5rem; margin-top: 0.45rem; }
  .island-three-power { min-height: 3.2rem; padding-block: 0.4rem; }
  .island-three-status-copy { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .cloud-portrait, .cloud-eye-open, .cloud-tear > path { animation: none !important; }
  .cloud-eye-gaze { transform: translateY(var(--cloud-mood-gaze-y)); transition: none; }
  .cloud-eye-open { transform: scaleY(var(--cloud-eye-openness)); }
  .cloud-tear > path { transform: none; opacity: 0.92; }
  .battle-stage.is-defeating .boss-fighter, .battle-stage.is-defeated .boss-fighter { visibility: hidden; opacity: 0; }
  .island-three-shadow-current, .island-three-trajectory, .island-three-falling-star > span { display: none; }
}

.island-four-screen {
  color: #f8f5ff;
  background:
    radial-gradient(circle at 68% 15%, rgba(121, 100, 207, 0.22), transparent 35%),
    linear-gradient(180deg, #0b1024, #131633);
}
.island-four-screen .topbar { border-color: rgba(255, 255, 255, 0.14); }
.island-four-screen .wordmark,
.island-four-screen .help-button { color: #fff; }
.island-four-screen .version-mark { color: #c8c0dd; }
.island-four-layout { width: min(78rem, 100%); margin: auto; padding: clamp(0.8rem, 2vw, 1.5rem) 0; }
.island-four-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem; align-items: end; margin-bottom: 0.9rem; }
.island-four-heading h1 { margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 3.35rem); font-weight: 560; letter-spacing: -0.045em; }
.island-four-heading > div > p:last-child { max-width: 47rem; margin: 0.45rem 0 0; color: #cbc5dc; font-size: 0.88rem; line-height: 1.7; }
.island-four-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: clamp(31rem, 64vh, 42rem);
  padding: 1.5rem 1rem 1.8rem;
  overflow: hidden;
  border: 1px solid rgba(210, 197, 255, 0.18);
  border-radius: 2rem;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(132, 131, 211, 0.17), transparent 52%),
    linear-gradient(155deg, #151933, #0c1029 62%, #192039);
  box-shadow: inset 0 1px rgba(242, 230, 255, 0.06), 0 1.5rem 4rem rgba(2, 3, 18, 0.2);
  isolation: isolate;
}
.island-four-scene:focus-visible { outline: 2px solid #b8acd8; outline-offset: 4px; }
.island-four-scene::before,
.island-four-scene::after { position: absolute; z-index: -1; content: ""; border-radius: 50%; filter: blur(0.5rem); }
.island-four-scene::before { left: -8%; bottom: -18%; width: 55%; height: 48%; background: rgba(95, 82, 171, 0.3); }
.island-four-scene::after { right: -8%; top: -18%; width: 48%; height: 44%; background: rgba(66, 79, 158, 0.24); }
.island-four-stars { position: absolute; inset: 0; pointer-events: none; }
.island-four-stars i { position: absolute; width: 0.3rem; aspect-ratio: 1; border-radius: 50%; background: #fff2ae; box-shadow: 0 0 0.8rem #ffe582; animation: island-four-star 2.2s ease-in-out infinite; }
.island-four-stars i:nth-child(1) { left: 9%; top: 17%; }
.island-four-stars i:nth-child(2) { left: 58%; top: 12%; animation-delay: -0.5s; }
.island-four-stars i:nth-child(3) { right: 9%; top: 30%; animation-delay: -1.2s; }
.island-four-stars i:nth-child(4) { left: 22%; bottom: 22%; animation-delay: -1.7s; }
.island-four-stars i:nth-child(5) { right: 28%; bottom: 34%; animation-delay: -0.9s; }
.island-four-cloud-wrap { position: relative; z-index: 2; width: clamp(16rem, 31vw, 24rem); margin: 0 auto; flex-shrink: 0; }
.island-four-cloud-wrap::before { position: absolute; z-index: -1; content: ""; inset: 8% -8% -2%; border-radius: 50%; background: radial-gradient(ellipse, rgba(219, 196, 255, 0.22), rgba(168, 182, 235, 0.06) 48%, transparent 70%); opacity: calc(0.55 + var(--care-progress, 0) * 0.45); transition: opacity 650ms ease; }
.island-four-cloud { width: 100%; height: auto; filter: drop-shadow(0 1rem 1.4rem rgba(1, 3, 20, 0.48)); }
.island-four-cloud[data-mood] .cloud-tear { display: none; }
.island-four-tear { position: absolute; z-index: 4; width: 0.9rem; height: 1.35rem; border-radius: 70% 30% 70% 45%; background: linear-gradient(145deg, #f5fbff, #72baff 72%); box-shadow: 0 0 0.8rem rgba(138, 202, 255, 0.8); transform: rotate(34deg); animation: island-four-tear 2.4s ease-in infinite; }
.tear-one { left: 46%; top: 50%; }
.tear-two { left: 60%; top: 55%; animation-delay: -0.8s; }
.tear-three { left: 52%; top: 67%; animation-delay: -1.5s; }
.tear-four { left: 42%; top: 59%; animation-delay: -0.45s; }
.tear-five { left: 65%; top: 66%; animation-delay: -1.15s; }
.tear-four, .tear-five { display: none; }

/* Island 4 gives every companion a visibly different way of crying. */
.cloud-path-wind .island-four-cloud { animation: island-four-cloud-wind-cry 3.1s ease-in-out infinite; transform-origin: 52% 55%; }
.cloud-path-wind .island-four-tear { width: 0.72rem; height: 1.2rem; border-radius: 65% 35% 70% 40%; background: linear-gradient(145deg, #f7fdff, #83d7ff); animation-name: island-four-tear-wind; animation-duration: 2s; }
.cloud-path-wind .tear-one { left: 47%; top: 49%; }
.cloud-path-wind .tear-two { left: 59%; top: 53%; }
.cloud-path-wind .tear-three { left: 53%; top: 62%; }
.cloud-path-wind .cloud-mouth-sad { transform-box: fill-box; transform-origin: center; transform: translateX(5px) rotate(8deg) scale(0.84, 0.72); }

.cloud-path-rain .island-four-cloud { animation: island-four-cloud-rain-cry 3.8s ease-in-out infinite; transform-origin: 50% 62%; }
.cloud-path-rain .island-four-tear { width: 0.78rem; height: 1.12rem; border-radius: 58% 42% 62% 38%; background: linear-gradient(160deg, #effbff, #4ea9ec 78%); animation-name: island-four-tear-rain; animation-duration: 1.8s; }
.cloud-path-rain .tear-four, .cloud-path-rain .tear-five { display: block; }
.cloud-path-rain .tear-one { left: 42%; top: 49%; }
.cloud-path-rain .tear-two { left: 56%; top: 48%; }
.cloud-path-rain .tear-three { left: 48%; top: 61%; }
.cloud-path-rain .tear-four { left: 63%; top: 59%; }
.cloud-path-rain .tear-five { left: 54%; top: 71%; }
.cloud-path-rain .cloud-eye-open { opacity: 0.38; }
.cloud-path-rain .cloud-mouth-sad { transform-box: fill-box; transform-origin: center; transform: translateY(1px) scale(1.32, 0.9); }

.cloud-path-aurora .island-four-cloud { animation: island-four-cloud-aurora-cry 4.4s ease-in-out infinite; }
.cloud-path-aurora .island-four-tear { width: 0.55rem; height: 2.3rem; border-radius: 999px; background: linear-gradient(180deg, #8ff2ff, #e6a7ff 52%, #fff3b3); box-shadow: 0 0 1rem rgba(221, 149, 255, 0.92); animation-name: island-four-tear-aurora; animation-duration: 2.9s; }
.cloud-path-aurora .tear-one { left: 45%; top: 47%; }
.cloud-path-aurora .tear-two { left: 61%; top: 49%; animation-delay: -1.45s; }
.cloud-path-aurora .tear-three { display: none; }
.cloud-path-aurora .cloud-eye-open { display: none; }
.cloud-path-aurora .cloud-eye-lid { stroke: #49386f; stroke-width: 3; }
.cloud-path-aurora .cloud-mouth-sad { transform-box: fill-box; transform-origin: center; transform: scale(1.05, 0.64); }
.cloud-path-aurora .cloud-tear > path:first-child { fill: #91efff; }
.cloud-path-aurora .cloud-tear > path:nth-child(2) { fill: #e7b0ff; }

.cloud-path-thunder .island-four-cloud { animation: island-four-cloud-thunder-cry 3.3s steps(1, end) infinite; }
.cloud-path-thunder .island-four-cloud-wrap::after { position: absolute; z-index: 5; top: 36%; right: 22%; width: 1.25rem; height: 2.1rem; content: ""; background: linear-gradient(160deg, #fffbd0, #ffd84a); clip-path: polygon(44% 0, 100% 0, 63% 40%, 91% 40%, 18% 100%, 39% 54%, 8% 54%); filter: drop-shadow(0 0 0.55rem #ffe46f); animation: island-four-thunder-spark 3.3s steps(1, end) infinite; }
.cloud-path-thunder .island-four-tear { width: 1rem; height: 1.48rem; background: linear-gradient(145deg, #fff, #78c6ff); animation-name: island-four-tear-thunder; animation-duration: 3.3s; animation-timing-function: steps(1, end); }
.cloud-path-thunder .tear-one { left: 47%; top: 51%; }
.cloud-path-thunder .tear-two { left: 61%; top: 54%; animation-delay: -1.65s; }
.cloud-path-thunder .tear-three { display: none; }
.island-four-scene.cloud-path-thunder .cloud-eye-lid { display: inline; stroke-width: 3.6; }
.island-four-scene.cloud-path-thunder .cloud-eye-open { display: none; }
.island-four-scene.cloud-path-thunder .cloud-mouth-sad { transform-box: fill-box; transform-origin: center; transform: translateY(1px) scale(1.1, 0.75); stroke-width: 3; }

.cloud-path-star .island-four-cloud { animation: island-four-cloud-star-cry 4s ease-in-out infinite; }
.cloud-path-star .island-four-tear { width: 1.18rem; height: 1.18rem; border-radius: 0; background: radial-gradient(circle, #fff 0 13%, #fff0a0 28%, #8fcfff 72%); box-shadow: 0 0 1rem rgba(255, 238, 144, 0.92); clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%); animation-name: island-four-tear-star; animation-duration: 3.2s; }
.cloud-path-star .tear-one { left: 46%; top: 50%; }
.cloud-path-star .tear-two { left: 61%; top: 55%; animation-delay: -1.6s; }
.cloud-path-star .tear-three { left: 53%; top: 68%; animation-delay: -2.35s; }
.cloud-path-star .cloud-eye-open { opacity: 0.72; }
.cloud-path-star .cloud-mouth-sad { transform-box: fill-box; transform-origin: center; transform: translateY(1px) scale(0.72, 0.9); }
.cloud-path-star .cloud-tear > path { fill: #fff0a0; stroke: #fffbea; }
/* All tears begin beneath the eyes; direction and rhythm still belong to each cloud. */
.island-four-scene .tear-one, .island-four-scene .tear-three, .island-four-scene .tear-five { left: 42%; top: 62%; }
.island-four-scene .tear-two, .island-four-scene .tear-four { left: 56%; top: 62%; }
.island-four-tears { position: absolute; inset: 0; pointer-events: none; opacity: var(--tear-opacity, 1); transition: opacity 600ms ease; }
.island-four-tears::before, .island-four-tears::after { position: absolute; content: ""; top: 61%; width: 1.3%; height: 10%; border-radius: 50%; background: linear-gradient(#c9efff77, #c9efff00); }
.island-four-tears::before { left: 43%; }
.island-four-tears::after { left: 57%; }
.island-four-tear-surface { position: absolute; z-index: 7; inset: 0; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.island-four-tear-surface:active { cursor: grabbing; }
.island-four-wipe-glow { position: absolute; z-index: 6; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle at var(--wipe-x, 50%) var(--wipe-y, 50%), rgba(255, 246, 199, 0.7), rgba(209, 220, 255, 0.25) 16%, transparent 32%); border-radius: 50%; }
.is-wiping .island-four-wipe-glow { opacity: 1; }
.island-four-phase-wiping .island-four-wipe-glow { animation: island-four-wipe 650ms ease-out both; }
.island-four-phase-wiping .island-four-tears { opacity: 0; }
.island-four-phase-wiping .cloud-eye-open { opacity: 0; }
.island-four-phase-wiping .cloud-eye-lid { display: inline; }
.island-four-scene[data-care-stage="resting"] .island-four-cloud { animation: island-four-calm-breathe 4.8s ease-in-out infinite; }
.island-four-scene[data-care-stage="resting"] .cloud-mouth-sad { transform-box: fill-box; transform-origin: center; transform: scaleY(0.45); }
.island-four-mode-complete .island-four-tears,
.island-four-mode-complete .island-four-cloud-wrap::after { display: none; }
.island-four-mode-complete .island-four-cloud { animation: island-four-calm-breathe 4.8s ease-in-out infinite; }
.island-four-controls { position: relative; z-index: 8; display: grid; justify-items: center; gap: 1rem; width: 100%; text-align: center; }
.island-four-controls p { margin: 0; max-width: 32rem; color: #cbc5de; font-size: 0.9rem; line-height: 1.65; }
.island-four-wipe-button { display: inline-flex; align-items: center; gap: 0.8rem; min-height: 3.5rem; padding: 0.65rem 1.5rem; border: 1px solid #e4d9ff; border-radius: 999px; background: linear-gradient(160deg, #f6f0ff, #dcd3f4); box-shadow: 0 0.3rem 1.8rem rgba(169, 146, 235, 0.14), inset 0 1px #fff; color: #302a50; font: inherit; font-weight: 600; cursor: pointer; transition: box-shadow 180ms ease, transform 180ms ease; }
.island-four-wipe-button kbd { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border: 1px solid #c3b4df; border-radius: 0.6rem; background: #ffffff99; font: inherit; font-size: 0.85rem; }
.island-four-wipe-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0.4rem 2rem rgba(169, 146, 235, 0.28), inset 0 1px #fff; }
.island-four-wipe-button:active:not(:disabled) { transform: translateY(0); }
.island-four-wipe-button:focus-visible { outline: 3px solid #ffe08a; outline-offset: 5px; }
.island-four-wipe-button:disabled { opacity: 0.75; cursor: default; }
.island-four-complete-dialog { text-align: center; border-color: #cebee47a; background: linear-gradient(150deg, #292345, #181b35); box-shadow: 0 0 5rem #c3aae51a, 0 2rem 5rem #05071c66; }
.island-four-complete-dialog h2 { max-width: 22rem; margin: 0.7rem auto 1.4rem; line-height: 1.6; }
.island-four-complete-dialog .dialog-actions { justify-content: center; }
.island-four-ending-star { color: #ffe59b; font-size: 2.5rem; }
.island-four-return { display: block; margin: 0.9rem 0 0; }
.island-five-screen { background: linear-gradient(180deg, rgba(7, 10, 31, 0.08), rgba(6, 8, 25, 0.3)); }
.island-five-screen .topbar { border-color: rgba(255, 255, 255, 0.14); }
.island-five-screen .screen-content { align-items: stretch; padding-top: 0.8rem; }
.island-five-stage {
  --island-five-sky-top: #10194b;
  --island-five-sky-middle: #343f78;
  --island-five-sky-horizon: #be6f78;
  --island-five-wash: 0.53;
  --island-five-darkness: 0.34;
  --island-five-star-alpha: 0.98;
  --island-five-day-alpha: 0;
  --island-five-sun-x: 7%;
  --island-five-sun-y: 0.59;
  --island-five-track-top: 11rem;
  --island-five-track-height: clamp(12rem, 30svh, 24rem);
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 150, 0.24);
  border-radius: 2rem;
  background: #11162f;
  box-shadow: 0 1.5rem 4.5rem rgba(4, 6, 22, 0.48), inset 0 0 5rem rgba(185, 173, 255, 0.08);
  isolation: isolate;
}
.island-five-world, .island-five-world-day, .island-five-time-color, .island-five-night-stars, .island-five-depth { position: absolute; inset: 0; pointer-events: none; }
.island-five-world { z-index: -5; background: url("assets/world/star-village-islands-v1.jpg") center / cover; filter: brightness(calc(1.3 - var(--island-five-darkness))) saturate(1.04); transform: scale(1.012); transition: filter 1.15s ease; }
.island-five-world-day { z-index: -4; background: url("assets/world/star-village-islands-day-v1.png") center / cover; opacity: var(--island-five-day-alpha); transform: scale(1.012); transition: opacity 1.15s ease; }
.island-five-time-color {
  z-index: -3;
  background: linear-gradient(180deg, var(--island-five-sky-top) 0%, var(--island-five-sky-middle) 51%, var(--island-five-sky-horizon) 100%);
  opacity: var(--island-five-wash);
  mix-blend-mode: color;
  transition: background 1.15s ease, opacity 1.15s ease;
}
.island-five-night-stars {
  z-index: -2;
  opacity: var(--island-five-star-alpha);
  background-image:
    radial-gradient(circle at 9% 9%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 20% 20%, #ffe8a6 0 1px, transparent 2px),
    radial-gradient(circle at 33% 8%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 47% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 64% 10%, #ffe8a6 0 1px, transparent 2px),
    radial-gradient(circle at 79% 23%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 93% 12%, #fff 0 1px, transparent 2px);
  transition: opacity 1.15s ease;
}
.island-five-depth {
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 8, 23, var(--island-five-darkness)), transparent 53%, rgba(5, 8, 23, 0.58));
  transition: background 1.15s ease;
}
.island-five-heading {
  position: absolute;
  z-index: 6;
  top: 1.35rem;
  left: 50%;
  width: min(37rem, 58%);
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  text-shadow: 0 0.15rem 1rem rgba(5, 8, 23, 0.55);
}
.island-five-heading p { display: inline-block; margin: 0 0 0.2rem; padding: 0.22rem 0.8rem; border-radius: 999px; background: rgba(8, 13, 37, 0.55); color: #ffe4a0; font-size: 0.7rem; letter-spacing: 0.06em; }
.island-five-heading h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 650; line-height: 1.2; }
.island-five-heading span { display: block; margin-top: 0.25rem; color: rgba(255, 255, 255, 0.82); font-size: 0.75rem; }
.island-five-time-tag {
  position: absolute;
  z-index: 8;
  top: 1.25rem;
  left: 1.25rem;
  display: grid;
  grid-template-columns: 0.58rem auto;
  gap: 0 0.55rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1rem;
  background: rgba(8, 13, 37, 0.58);
  color: #fff;
  backdrop-filter: blur(0.75rem);
}
.island-five-time-tag > span { grid-row: 1 / 3; width: 0.58rem; height: 0.58rem; border-radius: 50%; background: #ffe081; box-shadow: 0 0 0.8rem #ffd56a; }
.island-five-time-tag strong { font-size: 0.83rem; }
.island-five-time-tag small { color: rgba(255, 255, 255, 0.68); font-size: 0.58rem; }
.island-five-collection-tab {
  position: absolute;
  z-index: 32;
  top: 1.15rem;
  right: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.25rem 0.65rem 0.25rem 0.3rem;
  border: 1px solid rgba(255, 225, 139, 0.5);
  border-radius: 999px;
  background: rgba(11, 16, 43, 0.86);
  color: #fff;
  box-shadow: 0 0.65rem 1.8rem rgba(5, 8, 23, 0.28);
  cursor: pointer;
  backdrop-filter: blur(0.75rem);
}
.island-five-collection-tab img { width: 2.35rem; height: 2.35rem; object-fit: contain; }
.island-five-collection-tab span { font-size: 0.75rem; font-weight: 650; }
.island-five-collection-tab i { padding: 0.14rem 0.42rem; border-radius: 999px; background: var(--gold); color: #171b3c; font-size: 0.52rem; font-style: normal; }
.island-five-collection-tab:hover, .island-five-collection-tab[aria-expanded="true"] { border-color: var(--gold); background: rgba(22, 28, 66, 0.97); }
.island-five-collection-tab:disabled { opacity: 0.58; cursor: default; }
.island-five-sun-path { position: absolute; z-index: 2; top: var(--island-five-track-top); left: 0; width: 100%; height: calc(var(--island-five-track-height) * 0.64); overflow: visible; pointer-events: none; }
.island-five-sun-path path { fill: none; stroke: rgba(255, 232, 162, 0.46); stroke-width: 0.18; stroke-dasharray: 0.7 1.1; vector-effect: non-scaling-stroke; }
.island-five-sun-path circle { fill: rgba(255, 247, 210, 0.72); stroke: rgba(255, 224, 122, 0.78); stroke-width: 0.12; vector-effect: non-scaling-stroke; transition: r 280ms ease, fill 280ms ease, filter 280ms ease; }
.island-five-sun-path circle.is-passed { fill: #ffdf73; filter: drop-shadow(0 0 0.25rem rgba(255, 218, 99, 0.9)); }
.island-five-sun-path circle.is-current { fill: #fff8d0; filter: drop-shadow(0 0 0.45rem rgba(255, 225, 116, 1)); }
.island-five-sun {
  position: absolute;
  z-index: 4;
  left: clamp(3.7rem, var(--island-five-sun-x), calc(100% - 3.7rem));
  top: calc(var(--island-five-track-top) + var(--island-five-track-height) * var(--island-five-sun-y));
  width: clamp(6.3rem, 9vw, 8.4rem);
  padding: 0;
  border: 0;
  aspect-ratio: 1;
  background: transparent;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 1.25rem rgba(255, 222, 126, 0.82));
  transition: left 1.25s cubic-bezier(0.4, 0, 0.2, 1), top 1.25s cubic-bezier(0.4, 0, 0.2, 1), filter 1.15s ease;
}
.island-five-stage.phase-tutorial .island-five-sun { z-index: 20; }
.island-five-sun.is-tutorial-target { cursor: pointer; touch-action: manipulation; animation: island-five-sun-invite 1.8s ease-in-out infinite; }
.island-five-sun.is-tutorial-target:focus-visible { outline: 3px solid #fff4bf; outline-offset: 0.35rem; border-radius: 50%; }
.island-five-sun > span { position: absolute; inset: 25%; border-radius: 50%; background: rgba(255, 239, 166, 0.86); box-shadow: 0 0 1.55rem 1rem rgba(255, 218, 112, 0.48), 0 0 3.8rem 2rem rgba(255, 171, 121, 0.2); animation: island-five-halo 3.2s ease-in-out infinite; }
.island-five-sun img { position: relative; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.island-five-cheer { position: absolute; z-index: 12; left: var(--island-five-cloud-x); top: calc(var(--island-five-track-top) + var(--island-five-track-height) * var(--island-five-cloud-y)); width: clamp(6.5rem, 9.5vw, 8.8rem); aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 0.75rem 1rem rgba(5, 8, 23, 0.34)); transition: left 1.25s cubic-bezier(0.4, 0, 0.2, 1), top 1.25s cubic-bezier(0.4, 0, 0.2, 1); }
.island-five-cloud { width: 100%; }
.island-five-cloud[data-mood] .cloud-tear { display: none; }
.island-five-cheer .pom { position: absolute; z-index: 3; top: 54%; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #ffdf73; color: #fff8dd; box-shadow: 0 0 1rem rgba(255, 223, 115, 0.74); font-size: 1rem; font-style: normal; }
.island-five-cheer .pom-left { left: 0.1rem; transform: rotate(-18deg); }
.island-five-cheer .pom-right { right: 0.1rem; transform: rotate(18deg); }
.island-five-cheer.is-quiet .pom { opacity: 0; }
.island-five-cheer-bubble { position: absolute; z-index: 5; left: 50%; bottom: 87%; width: max-content; min-width: 7rem; max-width: min(13rem, calc(100vw - 2.2rem)); padding: 0.45rem 0.65rem; transform: translateX(var(--island-five-cloud-bubble-shift, -50%)); border: 1px solid rgba(106, 92, 142, 0.18); border-radius: 0.85rem 0.85rem 0.85rem 0.25rem; background: rgba(255, 249, 237, 0.96); color: #4e4965; box-shadow: 0 0.55rem 1.3rem rgba(5, 8, 23, 0.2); opacity: 0; text-align: center; white-space: normal; font-size: clamp(0.65rem, 0.55rem + 0.25vw, 0.72rem); line-height: 1.45; transition: opacity 200ms ease, transform 200ms ease; }
.island-five-cheer-bubble.is-visible { opacity: 1; transform: translate(var(--island-five-cloud-bubble-shift, -50%), -0.3rem); }
.island-five-cheer.is-guiding { animation: island-five-cloud-guide 2.8s ease-in-out infinite; }
.island-five-cheer.is-guiding .pom-left { animation: island-five-pom-guide-left 2.8s ease-in-out infinite; }
.island-five-cheer.is-guiding .pom-right { animation: island-five-pom-guide-right 2.2s ease-in-out infinite; }
.island-five-cheer.is-floating { animation: island-five-cloud-float 3s ease-in-out infinite; }
.island-five-cheer.is-floating .pom-left { animation: island-five-pom-idle-left 2.6s ease-in-out infinite; }
.island-five-cheer.is-floating .pom-right { animation: island-five-pom-idle-right 2.6s 1.3s ease-in-out infinite; }
.island-five-cheer.is-acknowledging { animation: island-five-cloud-acknowledge 720ms ease; }
.island-five-cheer.is-acknowledging .pom-left, .island-five-cheer.is-acknowledging .pom-right { animation: island-five-pom-acknowledge 520ms ease-in-out 1; }
.island-five-cheer.is-celebrating { animation: island-five-cloud-celebrate 1.15s ease-out both; }
.island-five-cheer.is-celebrating .pom-left, .island-five-cheer.is-celebrating .pom-right { animation: island-five-pom-celebrate 560ms ease-in-out 2; }
.island-five-popup-zone { position: relative; z-index: 16; margin-top: calc(var(--island-five-track-top) + var(--island-five-track-height) * 0.64 + 4rem); pointer-events: none; }
/* Keep the approved result card over the illustrated sky, but let its text grow the page. */
.island-five-stage.phase-result .island-five-popup-zone { margin-top: 9rem; }
.island-five-tutorial, .island-five-question, .island-five-result {
  position: relative;
  width: min(48rem, calc(100% - 2rem));
  margin-inline: auto;
  overflow-wrap: anywhere;
  pointer-events: auto;
  border: 1px solid rgba(120, 93, 55, 0.18);
  border-radius: 1.55rem;
  background: radial-gradient(circle at 84% 3%, rgba(255, 222, 139, 0.27), transparent 12rem), linear-gradient(145deg, rgba(255, 251, 240, 0.985), rgba(247, 236, 216, 0.985));
  color: #171b3c;
  box-shadow: 0 1.5rem 4rem rgba(5, 8, 23, 0.46), inset 0 1px rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(0.9rem);
}
.island-five-tutorial { width: min(36rem, calc(100% - 4rem)); padding: 1.15rem 1.4rem; pointer-events: none; text-align: center; animation: island-five-popup-in 320ms ease-out; }
.island-five-tutorial > p { margin: 0; color: #a26c34; font-size: 0.66rem; letter-spacing: 0.08em; }
.island-five-tutorial h2 { margin: 0.25rem 0 0.35rem; font-size: clamp(1.3rem, 2.5vw, 1.75rem); line-height: 1.35; }
.island-five-tutorial > span { display: block; color: #6f6c72; font-size: 0.76rem; line-height: 1.6; }
.island-five-tutorial > strong { display: block; margin-top: 0.65rem; color: #6b5599; font-size: 0.82rem; line-height: 1.5; }
.island-five-tutorial > small { display: block; margin-top: 0.35rem; color: #8a867d; font-size: 0.58rem; }
.island-five-question { padding: 1.05rem 1.35rem 0.85rem; opacity: 1; transition: opacity 220ms ease, transform 220ms ease; }
.island-five-question.is-leaving { opacity: 0; transform: translateY(0.8rem) scale(0.98); }
.island-five-progress-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.island-five-progress-stars { display: flex; gap: 0.36rem; }
.island-five-progress-stars i { color: #c8c0ad; font-size: 1rem; font-style: normal; }
.island-five-progress-stars i.is-done { color: #f4b938; text-shadow: 0 0 0.55rem rgba(244, 185, 56, 0.46); }
.island-five-progress-stars i.is-current { color: #8c7ab8; transform: scale(1.18); }
.island-five-progress-row b { color: #807b72; font-size: 0.64rem; font-weight: 560; }
.island-five-question > p { margin: 0.45rem 0 0.1rem; color: #777469; text-align: center; font-size: 0.7rem; }
.island-five-question h2 { max-width: 40rem; margin: 0.25rem auto 0.85rem; font-size: clamp(1.25rem, 2.3vw, 1.72rem); font-weight: 650; line-height: 1.45; text-align: center; text-wrap: balance; }
.island-five-answers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; }
.island-five-answers button { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem; align-items: center; min-height: 3.65rem; padding: 0.5rem 0.65rem; border: 1px solid rgba(23, 27, 60, 0.09); border-radius: 0.95rem; color: #25294a; cursor: pointer; box-shadow: inset 0 1px rgba(255, 255, 255, 0.65); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.island-five-answers button span { font-size: 1.15rem; }
.island-five-answers button strong { font-size: 0.82rem; }
.island-five-answers .answer-none { background: #e4ead7; }
.island-five-answers .answer-some { background: #e6e3ef; }
.island-five-answers .answer-often { background: #f9dfb4; }
.island-five-answers .answer-daily { background: #e9dce5; }
.island-five-answers button:hover:not(:disabled), .island-five-answers button:focus-visible { transform: translateY(-2px); border-color: #c68f2d; box-shadow: 0 0.45rem 1.15rem rgba(91, 69, 33, 0.13); }
.island-five-answers button.is-selected { border-color: #ce932a; box-shadow: 0 0 0 3px rgba(246, 187, 69, 0.24); }
.island-five-answers button:disabled { cursor: default; }
.island-five-popup-note { display: flex; justify-content: space-between; align-items: center; gap: 0.65rem; margin-top: 0.5rem; color: #8a867d; }
.island-five-popup-note small { font-size: 0.55rem; }
.island-five-popup-note button { min-height: 2rem; padding: 0 0.8rem; border: 1px solid rgba(23, 27, 60, 0.14); border-radius: 999px; background: transparent; color: #716d82; cursor: pointer; font-size: 0.62rem; }
.island-five-result { padding: 1.3rem 1.55rem; text-align: center; animation: island-five-popup-in 320ms ease-out; }
.island-five-result > p { margin: 0; color: #a26c34; font-size: 0.7rem; }
.island-five-result h2 { margin: 0.25rem 0 0.45rem; font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.35; }
.island-five-notice { display: block; min-height: 1rem; margin-top: 0.5rem; color: #84817f; font-size: 0.58rem; }
.island-five-result > img { width: 4rem; height: 4rem; margin-top: -0.35rem; object-fit: contain; filter: drop-shadow(0 0 0.9rem rgba(255, 208, 91, 0.38)); }
.island-five-result { max-height: none; overflow: visible; }
.island-five-result > strong { display: block; margin: 0.15rem 0; font-size: 0.95rem; }
.island-five-result > span { display: block; color: #747178; font-size: 0.72rem; }
.island-five-result-summary { max-width: 38rem; margin: 0.75rem auto 0; padding: 0.75rem 0.9rem; border: 1px solid rgba(111, 99, 143, 0.18); border-radius: 1rem; background: rgba(237, 232, 245, 0.72); text-align: left; }
.island-five-result-summary > small { display: block; color: #827397; font-size: 0.58rem; font-weight: 650; }
.island-five-result-summary h3 { margin: 0.15rem 0 0.3rem; color: #282541; font-size: 1rem; line-height: 1.4; }
.island-five-result-summary p { margin: 0; color: #66636d; font-size: 0.72rem; line-height: 1.6; }
.island-five-result-summary b { display: block; margin-top: 0.45rem; color: #665582; font-size: 0.68rem; line-height: 1.5; }
.island-five-result-summary .island-five-answer-pattern { margin-bottom: 0.4rem; color: #79688e; font-size: 0.64rem; }
.island-five-result-details { max-width: 38rem; margin: 0.65rem auto 0; text-align: left; }
.island-five-result-details > h3 { margin: 0 0 0.35rem; color: #786781; font-size: 0.67rem; font-weight: 600; }
.island-five-result-details article { padding: 0.6rem 0.75rem; margin-top: 0.4rem; border: 1px solid rgba(172, 151, 116, 0.2); border-radius: 0.8rem; background: rgba(255, 251, 242, 0.72); }
.island-five-result-details h4 { margin: 0; color: #39334e; font-size: 0.75rem; }
.island-five-result-details h4 small { color: #8a6941; font-size: 0.65rem; white-space: nowrap; }
.island-five-result-details p { margin: 0.2rem 0 0; color: #68616e; font-size: 0.68rem; line-height: 1.6; }
.island-five-care-note { max-width: 38rem; margin: 0.65rem auto 0; padding: 0.6rem 0.75rem; border-left: 3px solid #c89588; border-radius: 0.25rem 0.7rem 0.7rem 0.25rem; background: rgba(247, 221, 210, 0.45); color: #765c60; font-size: 0.68rem; line-height: 1.6; text-align: left; }
.island-five-result-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.45rem; margin: 0.7rem 0; }
.island-five-result-tags i { padding: 0.3rem 0.55rem; border-radius: 999px; background: #ece7f3; color: #6f638f; font-size: 0.58rem; font-style: normal; }
.island-five-result-actions { display: flex; justify-content: center; gap: 0.5rem; }
.island-five-result-actions button { min-height: 2.7rem; padding: 0 1.25rem; border: 1px solid rgba(23, 27, 60, 0.15); border-radius: 0.85rem; background: transparent; color: #71668f; cursor: pointer; font-weight: 650; }
.island-five-result-actions .island-five-next { border: 0; background: #f3bc48; color: #282541; }
.island-five-safety-line { position: relative; z-index: 18; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 0.35rem; margin: 0.5rem 1rem; color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; text-align: center; text-shadow: 0 1px 0.35rem rgba(5, 8, 23, 0.75); }
.island-five-safety-line a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; text-underline-offset: 0.15rem; }
.island-five-collection {
  position: absolute;
  z-index: 42;
  top: 4.8rem;
  right: 1.15rem;
  width: min(28rem, calc(100% - 2.3rem));
  max-height: calc(100% - 6rem);
  overflow: auto;
  padding: 1.05rem;
  border: 1px solid rgba(185, 173, 255, 0.32);
  border-radius: 1.45rem;
  background: radial-gradient(circle at 86% 2%, rgba(255, 223, 115, 0.11), transparent 10rem), linear-gradient(150deg, rgba(29, 34, 72, 0.99), rgba(10, 15, 36, 0.995));
  color: #f8f7ff;
  box-shadow: 0 1.6rem 4.3rem rgba(5, 8, 23, 0.72);
  animation: island-five-collection-in 220ms ease-out;
}
.island-five-collection-head { display: grid; grid-template-columns: 3.1rem 1fr 2.15rem; gap: 0.65rem; align-items: center; }
.island-five-collection-head > img { width: 3.1rem; height: 3.1rem; object-fit: contain; }
.island-five-collection-head small { color: #b9b8cd; font-size: 0.63rem; }
.island-five-collection-head h2 { margin: 0; font-size: 1.32rem; }
.island-five-collection-head button { width: 2.15rem; height: 2.15rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #b9b8cd; cursor: pointer; font-size: 1.3rem; }
.island-five-star-preview { display: grid; grid-template-columns: 4.4rem 1fr auto; gap: 0.65rem; align-items: center; margin-top: 0.8rem; padding: 0.7rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.055); }
.island-five-star-preview > div { display: grid; width: 4.4rem; height: 4.4rem; place-items: center; border: 1px solid rgba(255, 223, 115, 0.23); border-radius: 50%; }
.island-five-star-preview img { width: 3.9rem; height: 3.9rem; object-fit: contain; }
.island-five-star-preview section { display: grid; gap: 0.1rem; min-width: 0; }
.island-five-star-preview section small { color: #b9b8cd; font-size: 0.57rem; }
.island-five-star-preview section strong { color: #ffdf73; font-size: 1rem; }
.island-five-star-preview section span { overflow: hidden; color: #d7d0ff; font-size: 0.63rem; text-overflow: ellipsis; white-space: nowrap; }
.island-five-star-preview section p { margin: 0.15rem 0 0; color: #b9b8cd; font-size: 0.56rem; line-height: 1.45; }
.island-five-star-preview > button { min-height: 2.3rem; padding: 0 0.55rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; background: transparent; color: #d7d0ff; cursor: pointer; font-size: 0.57rem; }
.island-five-reward-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.island-five-reward-list span { padding: 0.3rem 0.45rem; border-radius: 999px; background: rgba(185, 173, 255, 0.09); color: #d7d0ff; font-size: 0.58rem; }
.island-five-price-title { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; margin-bottom: 0.45rem; }
.island-five-price-title strong { font-size: 0.75rem; }
.island-five-price-title small { color: #b9b8cd; font-size: 0.52rem; }
.island-five-price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.island-five-price-row button { display: grid; gap: 0.1rem; min-height: 3.55rem; padding: 0.45rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.8rem; background: rgba(255, 255, 255, 0.035); color: #f8f7ff; cursor: pointer; }
.island-five-price-row button small { color: #b9b8cd; font-size: 0.56rem; }
.island-five-price-row button b { font-size: 0.81rem; }
.island-five-price-row button.is-active { border-color: #ffdf73; background: rgba(255, 223, 115, 0.1); }
.island-five-price-row button.is-active small { color: #ffdf73; }
.island-five-collect-preview { width: 100%; min-height: 3rem; margin-top: 0.55rem; border: 0; border-radius: 0.9rem; background: #ffdf73; color: #17192b; cursor: pointer; font-weight: 750; }
.island-five-collection-links { display: flex; justify-content: space-between; margin-top: 0.3rem; }
.island-five-collection-links button { min-height: 2.1rem; border: 0; background: transparent; color: #d7d0ff; cursor: pointer; font-size: 0.62rem; text-decoration: underline; text-underline-offset: 0.2rem; }
.island-five-collection-review, .island-five-collection-notice { min-height: 0.9rem; margin: 0.1rem 0 0; color: #b9b8cd; font-size: 0.54rem; text-align: center; }
.island-five-collection-review { color: #918faa; }
@keyframes island-five-halo { 50% { opacity: 0.82; transform: scale(1.1); } }
@keyframes island-five-sun-invite { 50% { filter: drop-shadow(0 0 2rem rgba(255, 226, 139, 1)); } }
@keyframes island-five-cloud-guide { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-44%, calc(-50% - 0.4rem)); } }
@keyframes island-five-cloud-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 0.4rem)); } }
@keyframes island-five-cloud-acknowledge { 0%, 100% { transform: translate(-50%, -50%); } 45% { transform: translate(-50%, calc(-50% - 0.3rem)) scale(1.03); } }
@keyframes island-five-cloud-celebrate { 0% { transform: translate(-50%, -50%) scale(0.92); } 45% { transform: translate(-50%, calc(-50% - 0.7rem)) scale(1.06); } 75% { transform: translate(-50%, calc(-50% - 0.25rem)); } 100% { transform: translate(-50%, -50%); } }
@keyframes island-five-pom-guide-left { 50% { transform: translate(-0.25rem, -0.45rem) rotate(-30deg); } }
@keyframes island-five-pom-guide-right { 50% { transform: translate(0.75rem, -0.9rem) rotate(38deg) scale(1.12); } }
@keyframes island-five-pom-idle-left { 50% { transform: translateY(-0.22rem) rotate(-24deg); } }
@keyframes island-five-pom-idle-right { 50% { transform: translateY(-0.22rem) rotate(24deg); } }
@keyframes island-five-pom-acknowledge { 50% { transform: translateY(-0.35rem) scale(1.08); } }
@keyframes island-five-pom-celebrate { 50% { transform: translateY(-0.75rem) scale(1.18); } }
@keyframes island-five-popup-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes island-five-collection-in { from { opacity: 0; transform: translateY(-0.5rem) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) {
  .island-five-heading { width: 52%; }
  .island-five-cheer { width: 7.2rem; }
}
@media (max-width: 720px) {
  .island-five-screen .screen-content { padding-top: 0.6rem; }
  .island-five-stage { border-radius: 1.45rem; }
  .island-five-heading { top: 5.15rem; width: calc(100% - 2rem); }
  .island-five-heading h1 { font-size: 1.75rem; }
  .island-five-heading span { display: none; }
  .island-five-time-tag { top: 0.8rem; left: 0.75rem; }
  .island-five-collection-tab { top: 0.75rem; right: 0.7rem; }
  .island-five-collection-tab > span { display: none; }
  .island-five-sun { width: 5.7rem; }
  .island-five-cheer { width: 5.8rem; }
  .island-five-cheer .pom { width: 1.35rem; height: 1.35rem; font-size: 0.72rem; }
  .island-five-cheer-bubble { min-width: 5.7rem; padding: 0.35rem 0.45rem; }
  .island-five-tutorial, .island-five-question, .island-five-result { width: calc(100% - 1.4rem); border-radius: 1.25rem; }
  .island-five-tutorial { padding: 1rem 0.8rem; }
  .island-five-question { padding: 0.9rem 0.75rem 0.7rem; }
  .island-five-progress-stars { gap: 0.18rem; }
  .island-five-progress-stars i { font-size: 0.82rem; }
  .island-five-question h2 { font-size: 1.24rem; }
  .island-five-answers { grid-template-columns: repeat(2, 1fr); gap: 0.42rem; }
  .island-five-answers button { min-height: 3rem; }
  .island-five-result { padding: 1.1rem 0.8rem; }
  .island-five-collection { top: 4.45rem; right: 0.55rem; width: calc(100% - 1.1rem); max-height: calc(100% - 5.2rem); padding: 0.85rem; }
  .island-five-star-preview { grid-template-columns: 3.75rem 1fr; }
  .island-five-star-preview > div { width: 3.75rem; height: 3.75rem; }
  .island-five-star-preview img { width: 3.4rem; height: 3.4rem; }
  .island-five-star-preview > button { grid-column: 1 / -1; }
  .island-five-price-title { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
}
@media (max-width: 430px) {
  .island-five-time-tag { padding: 0.55rem 0.62rem; }
  .island-five-time-tag small { max-width: 8.5rem; }
  .island-five-heading { top: 4.9rem; }
  .island-five-heading p { font-size: 0.58rem; }
  .island-five-heading h1 { font-size: 1.55rem; }
  .island-five-sun { width: 5rem; }
  .island-five-cheer { width: 5.2rem; }
  .island-five-question > p { font-size: 0.62rem; }
  .island-five-tutorial h2 { font-size: 1.15rem; }
  .island-five-tutorial > span { font-size: 0.68rem; }
  .island-five-tutorial > strong { font-size: 0.75rem; }
  .island-five-question h2 { min-height: 3.6rem; margin-bottom: 0.55rem; font-size: 1.08rem; }
  .island-five-answers button { min-height: 2.85rem; padding: 0.4rem 0.5rem; }
  .island-five-answers button strong { font-size: 0.73rem; }
  .island-five-popup-note small { max-width: 12rem; }
  .island-five-result-actions { flex-direction: column; }
  .island-five-result-actions button { width: 100%; }
  .island-five-price-row { gap: 0.3rem; }
  .island-five-price-row button b { font-size: 0.7rem; }
}
/* Island 5 scales its scene separately from text; long results scroll with the page. */
.island-five-tutorial > span, .island-five-question > p,
.island-five-result > span, .island-five-result-summary p,
.island-five-result-details p, .island-five-care-note { font-size: 0.9375rem; line-height: 1.65; }
.island-five-tutorial > strong, .island-five-answers button strong { font-size: 1rem; }
.island-five-result-summary b, .island-five-result-details h4 { font-size: 0.9375rem; line-height: 1.6; }
.island-five-result-summary > small, .island-five-result-summary .island-five-answer-pattern,
.island-five-result-details > h3, .island-five-result-details h4 small,
.island-five-result-tags i, .island-five-progress-row b, .island-five-popup-note small { font-size: 0.8125rem; }
.island-five-popup-note button, .island-five-result-actions button { min-height: 2.75rem; font-size: 1rem; }
.island-five-popup-note { align-items: flex-start; }
.island-five-popup-note button { flex: none; }
.island-five-progress-row { flex-wrap: wrap; }
.island-five-result h2 { text-wrap: balance; }
.island-five-result h2:focus-visible { outline-color: #b5a1cc; outline-width: 2px; outline-offset: 3px; border-radius: 0.3rem; }
@media (max-width: 980px) {
  .island-five-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .island-five-time-tag { max-width: 50%; }
  .island-five-time-tag small { overflow-wrap: anywhere; }
}
@media (max-width: 720px) {
  .island-five-stage.phase-tutorial .island-five-cheer { left: 72%; top: calc(var(--island-five-track-top) + var(--island-five-track-height) * 0.25); }
  .island-five-stage.phase-tutorial .island-five-cheer-bubble { --island-five-cloud-bubble-shift: -75%; max-width: 11rem; }
}
@media (max-width: 430px) {
  .island-five-screen .topbar { column-gap: 0.5rem; }
  .island-five-question h2 { font-size: 1.25rem; }
  .island-five-result h2 { font-size: 1.4rem; }
  .island-five-result-details h4 small { white-space: normal; }
  .island-five-result-actions { gap: 0.65rem; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .island-five-stage { --island-five-track-top: 8rem; --island-five-track-height: 8rem; }
  .island-five-popup-zone { margin-top: calc(var(--island-five-track-top) + var(--island-five-track-height) * 0.64 + 3rem); }
  .island-five-heading span { display: none; }
  .island-five-sun, .island-five-cheer { width: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .island-five-world, .island-five-world-day, .island-five-time-color, .island-five-night-stars, .island-five-depth, .island-five-sun,
  .island-five-sun > span, .island-five-sun-path circle, .island-five-cheer,
  .island-five-sun.is-tutorial-target,
  .island-five-cheer .pom, .island-five-cheer-bubble, .island-five-tutorial, .island-five-question,
  .island-five-result, .island-five-collection { animation: none !important; transition: none !important; }
}
@keyframes island-four-wipe { 0% { opacity: 0; transform: translateX(-22%); } 35%, 65% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(22%); } }

@keyframes island-four-star { 0%, 100% { opacity: 0.35; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes island-four-tear { 0% { opacity: 0; transform: translateY(-0.4rem) rotate(34deg) scale(0.8); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(2.1rem) rotate(34deg) scale(1); } }
@keyframes island-four-tear-wind { 0% { opacity: 0; transform: translate(-0.2rem, -0.35rem) rotate(40deg) scale(0.7); } 22%, 64% { opacity: 1; } 100% { opacity: 0; transform: translate(3.1rem, 1.65rem) rotate(66deg) scale(1); } }
@keyframes island-four-tear-rain { 0% { opacity: 0; transform: translateY(-0.45rem) rotate(28deg) scale(0.7); } 18%, 72% { opacity: 0.95; } 100% { opacity: 0; transform: translateY(3.25rem) rotate(28deg) scale(1.05); } }
@keyframes island-four-tear-aurora { 0% { opacity: 0; transform: translateY(-0.35rem) scaleY(0.45); filter: hue-rotate(0deg); } 28%, 72% { opacity: 0.92; } 100% { opacity: 0; transform: translateY(2.9rem) scaleY(1.25); filter: hue-rotate(55deg); } }
@keyframes island-four-tear-thunder { 0%, 17%, 52%, 100% { opacity: 0; transform: translateY(-0.2rem) rotate(34deg) scale(0.72); } 18%, 31% { opacity: 1; transform: translateY(0.2rem) rotate(34deg) scale(1); } 32%, 51% { opacity: 0; transform: translateY(2.2rem) rotate(34deg) scale(1.08); } }
@keyframes island-four-tear-star { 0% { opacity: 0; transform: translateY(-0.2rem) rotate(0deg) scale(0.35); } 24%, 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(2.8rem) rotate(150deg) scale(1.05); } }
@keyframes island-four-cloud-wind-cry { 0%, 100% { transform: translateX(0) rotate(-1deg); } 45% { transform: translateX(0.75rem) rotate(2deg); } 66% { transform: translateX(0.35rem) rotate(0deg); } }
@keyframes island-four-cloud-rain-cry { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(0.3rem) scaleY(0.97); } }
@keyframes island-four-cloud-aurora-cry { 0%, 100% { filter: drop-shadow(0 1rem 1.4rem rgba(1, 3, 20, 0.48)) hue-rotate(0deg); } 50% { filter: drop-shadow(0 1rem 1.8rem rgba(171, 126, 255, 0.42)) hue-rotate(12deg); } }
@keyframes island-four-cloud-thunder-cry { 0%, 16%, 22%, 100% { transform: translateX(0); } 17%, 20% { transform: translateX(-0.18rem) rotate(-1deg); } 18%, 21% { transform: translateX(0.2rem) rotate(1deg); } }
@keyframes island-four-thunder-spark { 0%, 16%, 23%, 100% { opacity: 0; transform: scale(0.6); } 17%, 22% { opacity: 1; transform: scale(1); } }
@keyframes island-four-cloud-star-cry { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(0.35rem) rotate(-1deg); } }
@keyframes island-four-calm-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(0.25rem) scale(0.99, 1.01); } }

@media (max-width: 720px) {
  .island-1 { left: 4%; right: auto; top: 3%; bottom: auto; }
  .island-2 { left: auto; right: 3%; top: 19%; bottom: auto; }
  .island-3 { left: 4%; right: auto; top: 35%; bottom: auto; }
  .island-4 { left: auto; right: 3%; top: 51%; bottom: auto; }
  .island-5 { left: 4%; right: auto; top: 67%; bottom: auto; }
  .island-6 { left: auto; right: 3%; top: 83%; bottom: auto; }
  .map-canvas { min-height: 52rem; }
  .island-four-heading { grid-template-columns: 1fr; gap: 0.75rem; }
  .island-four-heading h1 { font-size: 1.9rem; }
  .island-four-scene { min-height: 28rem; padding: 1.25rem 0.9rem 1.5rem; border-radius: 1.35rem; }
  .island-four-cloud-wrap { width: min(19rem, 78vw); }
}
@media (prefers-reduced-motion: reduce) {
  .island-four-stars i,
  .island-four-scene .island-four-cloud,
  .island-four-scene[data-care-stage="resting"] .island-four-cloud,
  .island-four-cloud-wrap::after,
  .island-four-tear,
  .island-four-wipe-glow { animation: none; }
  .island-four-tears, .island-four-cloud-wrap::before, .island-four-wipe-button { transition: none; }
  .island-four-phase-wiping .island-four-wipe-glow { opacity: 0.7; }
}

/* Island 6 local playable preview */
.island-six-screen { background: radial-gradient(ellipse at 30% 40%, #30274a55, transparent 70%); }
.island-six-layout { width: min(74rem, 100%); margin: auto; padding: 1rem 0; }
.island-six-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
.island-six-heading h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.3; font-weight: 600; }
.island-six-heading > div > p:last-child { max-width: 40rem; margin: .5rem 0 0; color: #d0cadd; font-size: 1rem; line-height: 1.65; }
.island-six-progress { flex-shrink: 0; display: grid; gap: .4rem; padding: .7rem 1rem; border: 1px solid #d8ba7340; border-radius: 1rem; background: #10132da6; text-align: center; }
.island-six-progress > span { display: flex; gap: .45rem; justify-content: center; }
.island-six-progress i { color: #696387; font-style: normal; }
.island-six-progress i.is-repaired { color: #ffdf73; text-shadow: 0 0 12px #efc25388; }
.island-six-progress strong { color: #ece5d1; font-size: .95rem; }
.island-six-workshop { position: relative; isolation: isolate; border: 1px solid #d7bd7c55; border-radius: 1.8rem; background: linear-gradient(90deg, #10152b66, #111329e8 56%), url("assets/world/island-six-golden-repair-stage-v2.jpg") center / cover; box-shadow: 0 1.2rem 4rem #03061870; }
.island-six-puzzle-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: clamp(1rem, 3vw, 2.5rem); }
.island-six-mirror-stage { min-width: 0; text-align: center; }
.island-six-mirror { display: block; width: 100%; max-width: 27rem; max-height: 31rem; margin: auto; overflow: visible; filter: drop-shadow(0 1rem 1rem #07081dc4); }
.island-six-mirror-frame { fill: #14182caa; stroke: #b59a6277; stroke-width: 2; }
.island-six-mirror-stage > p { color: #f5e7c2; font-size: .95rem; line-height: 1.5; margin: .8rem 0 0; text-shadow: 0 2px 5px #000; }
.island-six-slot { stroke: #d1d7f15c; stroke-width: 2; stroke-linejoin: round; cursor: pointer; transition: stroke 180ms, filter 180ms; touch-action: manipulation; }
.island-six-slot:not(.is-repaired):hover, .island-six-slot.is-hovered { stroke: #f8ecb4; stroke-width: 4; fill: #d0baff38; }
.island-six-slot:focus-visible { outline: none; stroke: #fff0aa; stroke-width: 6; filter: drop-shadow(0 0 5px #fff0aa); }
.island-six-slot.is-repaired { stroke: #ffdc7f; stroke-width: 4; cursor: default; filter: drop-shadow(0 0 5px #efc35a55); }
.island-six-slot.is-new { animation: mirror-join 650ms ease-out; }
.island-six-slot.is-hinted { stroke: #ffe38b; stroke-width: 5; fill: #d6b15b40; animation: mirror-hint 1.8s ease-in-out infinite; }
.island-six-mirror-glint, .island-six-reflection { pointer-events: none; }
.island-six-reflection { opacity: .6; animation: mirror-reveal 1s ease-out both; }
.island-six-reflected-cloud { width: 100%; height: 100%; }
.island-six-workbench { min-width: 0; }
.island-six-instruction .eyebrow { color: #f0cc89; font-size: .8rem; margin-top: 0; }
.island-six-instruction h2 { font-size: clamp(1.3rem, 2vw, 1.8rem); margin: .2rem 0 .5rem; line-height: 1.4; }
.island-six-instruction > p:last-child { margin: 0 0 1rem; color: #d2cfe0; font-size: 1rem; line-height: 1.6; }
.island-six-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; align-items: stretch; }
.island-six-piece { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-width: 0; min-height: 8.2rem; padding: .7rem .3rem; border: 1px solid #afa5d64a; border-radius: 1rem; background: linear-gradient(145deg, #51477066, #23254199); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.island-six-piece svg { width: 100%; height: 4.7rem; overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 6px #0007); }
.island-six-piece svg path { stroke: #e0e7ff; stroke-width: 2; stroke-linejoin: round; }
.island-six-piece span { font-size: .95rem; color: #eee9f9; text-align: center; line-height: 1.4; overflow-wrap: anywhere; }
.island-six-piece:hover:not(:disabled), .island-six-piece.is-selected { border-color: #ffdc7e; background: linear-gradient(145deg, #8b715755, #3d315b99); }
.island-six-piece.is-selected { box-shadow: inset 0 0 0 1px #ffdc7e, 0 0 1rem #eedc8c16; }
.island-six-piece:disabled { opacity: .32; cursor: default; }
.island-six-piece b { position: absolute; top: .2rem; right: .5rem; color: #ffe7a4; }
.island-six-piece.is-dragging { opacity: .4; cursor: grabbing; }
.island-six-drag-ghost { position: fixed; top: 0; left: 0; width: 96px; height: 116px; z-index: 1000; overflow: visible; pointer-events: none; filter: drop-shadow(0 5px 10px #0009); }
.island-six-drag-ghost path { stroke: #fff0b5; stroke-width: 4; }
.island-six-companion { display: flex; align-items: center; gap: .6rem; padding: .3rem .75rem .3rem .2rem; margin: .8rem 0 .4rem; border: 1px solid #a393c538; border-radius: 2rem; background: #39314d70; color: #f2e4b9; cursor: pointer; font-size: .95rem; text-align: left; min-height: 44px; }
.island-six-cloud { width: 3.7rem; height: 3.7rem; flex-shrink: 0; pointer-events: none; animation: mirror-cloud 3s ease-in-out infinite; }
.island-six-notice { min-height: 6.4rem; padding: .8rem 1rem; border-left: 2px solid #d7b470; border-radius: 0 .8rem .8rem 0; background: #111429ab; }
.island-six-notice small { display: block; font-size: .85rem; color: #c7bbd7; margin-bottom: .35rem; }
.island-six-notice strong { font-size: 1rem; line-height: 1.6; color: #ffedba; font-weight: 500; }
.island-six-footer-actions { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem .25rem 0; }
.island-six-footer-actions button { min-height: 44px; font-size: .95rem; }
.island-six-finish { padding: 1rem 0; animation: mirror-reveal 650ms ease-out both; }
.island-six-finish .eyebrow { color: #f2cd7c; font-size: .9rem; }
.island-six-finish h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.45; margin: .5rem 0; font-weight: 600; text-wrap: balance; }
.island-six-finish h2:focus { outline: none; }
.island-six-finish > p:not(.eyebrow) { font-size: 1.05rem; line-height: 1.8; color: #ded7ec; }
.island-six-finish .dialog-actions { justify-content: flex-start; gap: .8rem; margin-top: 1.5rem; flex-wrap: wrap; }
.island-six-finish .dialog-actions button { min-height: 44px; font-size: 1rem; }
.island-six-workshop.is-complete .island-six-mirror-frame { stroke: #ffe3a0; filter: drop-shadow(0 0 12px #dcb76477); }
.island-six-tutorial-overlay { position: absolute; z-index: 30; inset: 0; display: grid; align-items: center; justify-items: center; padding: 1rem; border-radius: inherit; background: #0b1024c7; backdrop-filter: blur(9px); }
.island-six-tutorial-card { width: min(29rem, 100%); padding: clamp(1.1rem, 3vw, 2rem); border: 1px solid #f5d79488; border-radius: 1.6rem; background: linear-gradient(155deg, #fffaf0, #ede3d2); color: #232441; text-align: center; box-shadow: 0 1rem 3rem #0005; }
.island-six-tutorial-symbol { display: block; color: #8b77b3; font-size: 2.5rem; letter-spacing: .4rem; }
.island-six-tutorial-symbol i { font-style: normal; color: #ba8328; }
.island-six-tutorial-card .eyebrow { color: #796236; font-size: .85rem; }
.island-six-tutorial-card h2 { margin: .5rem 0; font-size: 1.7rem; line-height: 1.35; }
.island-six-tutorial-card p { line-height: 1.7; font-size: 1rem; }
.island-six-tutorial-card .island-six-keyboard-hint { font-size: .95rem; color: #625674; }
.island-six-tutorial-card .dialog-actions { margin-top: 1rem; }
.island-six-tutorial-card button { min-height: 48px; font-size: 1rem; }
@keyframes mirror-join { from { opacity: .3; filter: drop-shadow(0 0 16px #ffe08f); } to { opacity: 1; } }
@keyframes mirror-hint { 50% { filter: drop-shadow(0 0 10px #ffe08f); } }
@keyframes mirror-cloud { 50% { transform: translateY(-3px); } }
@keyframes mirror-reveal { from { opacity: 0; } }
@media (max-width: 850px) {
  .island-six-heading { align-items: start; }
  .island-six-heading > div > p:last-child { max-width: 28rem; }
  .island-six-puzzle-layout { gap: 1rem; padding: 1rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .island-six-tray { gap: .45rem; }
  .island-six-piece { min-height: 7.5rem; }
}
@media (max-width: 600px) {
  .island-six-layout { padding-top: .5rem; }
  .island-six-heading { display: block; }
  .island-six-heading > div > p:last-child { font-size: .95rem; }
  .island-six-progress { display: flex; justify-content: space-between; align-items: center; padding: .5rem .8rem; margin-top: .7rem; }
  .island-six-workshop { border-radius: 1.2rem; background: linear-gradient(#10152b66, #111329ee 44%), url("assets/world/island-six-golden-repair-stage-v2.jpg") top center / auto 30rem; }
  .island-six-puzzle-layout { grid-template-columns: minmax(0, 1fr); padding: .9rem; gap: 1rem; }
  .island-six-mirror-stage { position: sticky; top: .3rem; z-index: 2; padding: .35rem; border-radius: 1rem; background: #15182d; box-shadow: 0 .4rem 1rem #080b1c55; }
  .island-six-workshop.is-complete .island-six-mirror-stage { position: static; background: transparent; box-shadow: none; }
  .island-six-mirror { max-height: 13rem; width: min(100%, 12rem); }
  .island-six-mirror-stage > p { font-size: .95rem; margin-top: .4rem; }
  .island-six-instruction h2 { font-size: 1.3rem; }
  .island-six-instruction > p:last-child { font-size: .95rem; }
  .island-six-piece { min-height: 7.7rem; gap: .4rem; }
  .island-six-piece svg { height: 3.5rem; }
  .island-six-piece span { font-size: .95rem; }
  .island-six-companion { width: 100%; }
  .island-six-notice { min-height: 6.4rem; }
  .island-six-tutorial-overlay { align-items: start; padding-top: 1.5rem; }
  .island-six-tutorial-card h2 { font-size: 1.45rem; }
  .island-six-tutorial-card { padding: 1rem; }
  .island-six-finish { padding: 0 .25rem .5rem; text-align: center; }
  .island-six-finish h2 { font-size: 1.65rem; }
  .island-six-finish > p:not(.eyebrow) { font-size: 1rem; }
  .island-six-finish .dialog-actions { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .island-six-slot, .island-six-cloud, .island-six-finish, .island-six-reflection { animation: none !important; transition: none; }
}

/* Island 5: optional chapter rest stops, no countdown or reward gate. */
.island-five-tutorial .island-five-skip { pointer-events: auto; margin-top: 1rem; }
.island-five-skip, .island-five-popup-note button { min-height: 44px; padding: .6rem .8rem; border: 1px solid #978aa8; border-radius: 1rem; background: #eee8f7; color: #34294c; cursor: pointer; }
.island-five-popup-note { flex-wrap: wrap; }
.island-five-popup-note small { flex-basis: 100%; }
.island-five-rest { text-align: center; }
.island-five-rest > strong { display: block; margin: 1rem 0; font-size: 1rem; line-height: 1.7; color: #655184; }
.island-five-rest .island-five-result-actions { flex-wrap: wrap; }
.island-five-rest .island-five-result-actions button { min-height: 44px; }
.island-five-chapter { color: #75618e; }

.daily-moment { padding: 1rem 1.25rem; border: 1px solid #9b89bd; border-radius: 1.2rem; background: #24213e; color: #f6f0ff; max-width: 100%; overflow-wrap: anywhere; }
.daily-moment summary { cursor: pointer; min-height: 44px; padding: .6rem 0; font-weight: 650; color: #ffe28c; }
.daily-moment h2 { font-size: 1.15rem; }
.daily-moment p, .daily-moment small { line-height: 1.7; }
.daily-moment small { display: block; color: #d1c7e5; }