:root {
  color-scheme: light;
  --cream: #fff8eb;
  --blue: #314c82;
  --blue-mid: #496aa9;
  --ink: #2f4776;
  --pink: #edbfd4;
  --gold: #f2d18a;
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  min-width: 320px;
  margin: 0;
  overflow: hidden;
}
body {
  color: var(--ink);
  background: #1e2d6a;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
}

/* ---------------- WELCOME ---------------- */
.welcome-screen {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #273978;
  opacity: 1;
  visibility: visible;
  transition: opacity .78s ease, visibility .78s ease;
}
.welcome-screen.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.welcome-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
  user-select: none;
  pointer-events: none;
}

.welcome-topline {
  position: absolute;
  z-index: 5;
  top: 4.2%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff1c8;
  font: 700 clamp(10px, .9vw, 14px)/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: .24em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(24, 35, 87, .45);
}
.welcome-title {
  position: absolute;
  z-index: 5;
  top: 7.2%;
  left: 50%;
  width: min(48vw, 720px);
  margin: 0;
  transform: translateX(-50%);
  color: #fff6df;
  font: 700 clamp(30px, 3.7vw, 58px)/1.08 Georgia, "Times New Roman", serif;
  letter-spacing: .015em;
  text-align: center;
  text-shadow: 0 2px 2px rgba(30, 43, 94, .42);
  -webkit-font-smoothing: antialiased;
}
.lpj-badge {
  position: absolute;
  z-index: 7;
  top: max(22px, env(safe-area-inset-top));
  right: max(25px, env(safe-area-inset-right));
  display: grid;
  min-width: 76px;
  height: 40px;
  place-items: center;
  padding: 0 12px;
  border: 2px solid #f1d58d;
  border-radius: 8px;
  color: #fff0bd;
  background: rgba(40, 58, 116, .55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  font: 800 14px/1 Georgia, serif;
  letter-spacing: .16em;
}

/* One clean live text panel. The background art contains no words or UI. */
.welcome-copy-panel {
  position: absolute;
  z-index: 6;
  left: 51%;
  top: 51%;
  width: min(44vw, 680px);
  min-height: 226px;
  padding: 25px 34px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 2px solid rgba(221, 176, 112, .9);
  border-radius: 17px;
  outline: 1px solid rgba(255, 250, 236, .9);
  outline-offset: 4px;
  background: rgba(255, 247, 232, .965);
  box-shadow: 0 10px 28px rgba(40, 44, 103, .16), inset 0 0 0 3px rgba(255,255,255,.58);
}
.welcome-copy-panel::before,
.welcome-copy-panel::after {
  position: absolute;
  left: 50%;
  width: 74px;
  height: 5px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #d7ad69 25%, #e9c98b 75%, transparent);
  content: "";
}
.welcome-copy-panel::before { top: 12px; }
.welcome-copy-panel::after { bottom: 12px; }
.welcome-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0;
  color: #344e80;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  font-size: clamp(16px, 1.42vw, 22px);
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: .015em;
  text-align: center;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.welcome-copy span { display: block; white-space: nowrap; }

/* Real button, not a transparent hit-area over a button painted into an image. */
.start-button {
  position: absolute;
  z-index: 8;
  top: 76.4%;
  left: 51%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: clamp(250px, 24vw, 355px);
  min-height: 68px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 13px 28px;
  border: 3px solid #f5d68d;
  border-radius: 15px;
  outline: 1px solid rgba(255,255,255,.88);
  outline-offset: -7px;
  color: #fffaf0;
  background: linear-gradient(180deg, #5878bd 0%, #3d5e9f 100%);
  box-shadow: 0 5px 0 #2d477d, 0 8px 24px rgba(31, 47, 107, .25), inset 0 2px 0 rgba(255,255,255,.3);
  font: 800 clamp(20px, 1.8vw, 27px)/1.1 "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.start-button:hover {
  transform: translate(-50%, calc(-50% - 3px));
  filter: brightness(1.08);
  box-shadow: 0 7px 0 #2d477d, 0 0 0 4px rgba(255, 235, 180, .56), 0 0 28px rgba(255, 226, 149, .64), inset 0 2px 0 rgba(255,255,255,.38);
}
.start-button:active {
  transform: translate(-50%, calc(-50% + 2px));
  box-shadow: 0 2px 0 #2d477d, 0 0 12px rgba(255, 226, 149, .45);
}
.start-button:focus-visible { outline: 3px dashed #fff2c6; outline-offset: 7px; }
.start-button:disabled { cursor: wait; opacity: .82; }
.button-star {
  color: #ffe29a;
  font-size: .95em;
  text-shadow: 0 0 8px rgba(255, 225, 151, .72);
}
.welcome-goal {
  position: absolute;
  z-index: 6;
  top: 84.2%;
  left: 51%;
  width: max-content;
  max-width: 90vw;
  margin: 0;
  transform: translateX(-50%);
  color: #fff5d9;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(32, 45, 99, .65);
}

/* Ambient effects around the illustrated lantern and Flora; no moving layout elements. */
.lantern-glow {
  position: absolute;
  z-index: 2;
  left: 20.5%;
  top: 27%;
  width: clamp(48px, 6vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 220, 126, .42) 0%, rgba(255, 201, 106, .16) 38%, transparent 72%);
  filter: blur(5px);
  animation: lantern-breathe 3.6s ease-in-out infinite;
}
.flora-idle-glow {
  position: absolute;
  z-index: 2;
  left: 12%;
  top: 60%;
  width: clamp(130px, 16vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 232, 177, .2), rgba(239, 191, 225, .08) 43%, transparent 70%);
  animation: flora-aura 4.8s ease-in-out infinite;
}
.flora-idle-sparkle {
  position: absolute;
  z-index: 5;
  color: #fff2b4;
  text-shadow: 0 0 7px #ffe59a, 0 0 16px rgba(255, 211, 113, .8);
  pointer-events: none;
  animation: sparkle-breathe 2.8s ease-in-out infinite;
}
.sparkle-a { left: 27.5%; top: 59%; font-size: clamp(13px, 1.35vw, 21px); }
.sparkle-b { left: 29%; top: 70%; font-size: clamp(10px, 1.05vw, 16px); animation-delay: 1.2s; }

.welcome-effects { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.petal {
  position: absolute;
  width: 9px;
  height: 6px;
  border: 1px solid rgba(255, 246, 250, .8);
  border-radius: 65% 15% 65% 20%;
  background: #ffd2e3;
  box-shadow: 1px 1px 0 rgba(201, 113, 164, .28);
  opacity: 0;
  animation: petal-drift var(--duration, 14s) linear var(--delay, 0s) infinite;
}
.p1 { left: 8%; --duration: 16s; --delay: -3s; }
.p2 { left: 19%; --duration: 18s; --delay: -10s; }
.p3 { left: 34%; --duration: 15s; --delay: -6s; }
.p4 { left: 48%; --duration: 17s; --delay: -12s; }
.p5 { left: 62%; --duration: 15s; --delay: -4s; }
.p6 { left: 73%; --duration: 19s; --delay: -14s; }
.p7 { left: 84%; --duration: 14s; --delay: -8s; }
.p8 { left: 92%; --duration: 18s; --delay: -5s; }
.twinkle {
  position: absolute;
  color: #fff0b6;
  font-size: clamp(12px, 1.15vw, 18px);
  text-shadow: 0 0 5px rgba(255, 226, 140, .95), 0 0 13px rgba(255, 222, 148, .72);
  animation: twinkle 3.1s ease-in-out infinite;
}
.t1 { left: 8%; top: 42%; }
.t2 { left: 36%; top: 26%; animation-delay: .8s; }
.t3 { left: 72%; top: 18%; animation-delay: 1.4s; }
.t4 { left: 88%; top: 51%; animation-delay: .3s; }
.t5 { left: 56%; top: 90%; animation-delay: 1.8s; }
.t6 { left: 31%; top: 83%; animation-delay: 1.1s; }
.welcome-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(24, 34, 84, .05), transparent 25%, transparent 80%, rgba(24, 34, 84, .04)), linear-gradient(0deg, rgba(36, 37, 92, .08), transparent 24%);
}
@keyframes petal-drift {
  0% { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .82; }
  50% { transform: translate3d(30px, 52vh, 0) rotate(190deg); opacity: .72; }
  90% { opacity: .65; }
  100% { transform: translate3d(-18px, 112vh, 0) rotate(370deg); opacity: 0; }
}
@keyframes lantern-breathe { 0%,100% { opacity:.44; transform:scale(.94); } 50% { opacity:.88; transform:scale(1.1); } }
@keyframes flora-aura { 0%,100% { opacity:.38; transform:scale(.96); } 50% { opacity:.78; transform:scale(1.04); } }
@keyframes sparkle-breathe { 0%,100% { opacity:.22; transform:scale(.72) rotate(0deg); } 50% { opacity:1; transform:scale(1.12) rotate(18deg); } }
@keyframes twinkle { 0%,100% { opacity:.28; transform:scale(.75) rotate(0deg); } 50% { opacity:1; transform:scale(1.18) rotate(24deg); } }

/* ---------------- ADVENTURE ---------------- */
.world-stage {
  position: fixed;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: clamp(10px, 2.1vh, 22px);
  padding: clamp(14px, 3vh, 30px) clamp(14px, 3vw, 42px);
  background:
    radial-gradient(ellipse at 50% 48%, rgba(75, 157, 222, .26) 0%, transparent 47%),
    radial-gradient(ellipse at 12% 8%, rgba(70, 132, 211, .16), transparent 34%),
    linear-gradient(145deg, #081a3b 0%, #102b59 48%, #0b2048 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .75s ease, visibility .75s ease;
}
.world-stage::before,
.world-stage::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.world-stage::before {
  inset: 0;
  opacity: .34;
  background-image:
    radial-gradient(1px 1px at 8% 18%, #d9f1ff 99%, transparent),
    radial-gradient(1.5px 1.5px at 23% 76%, #9edcff 99%, transparent),
    radial-gradient(1px 1px at 79% 22%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 91% 68%, #a8dfff 99%, transparent),
    radial-gradient(1px 1px at 62% 8%, #fff 99%, transparent);
  background-size: 260px 190px, 310px 230px, 280px 210px, 350px 250px, 230px 180px;
}
.world-stage::after {
  width: min(70vw, 900px);
  height: 1px;
  top: 13%;
  left: 15%;
  background: linear-gradient(90deg, transparent, rgba(119, 201, 245, .45), transparent);
  box-shadow: 0 0 22px rgba(100, 188, 255, .18);
}
.world-stage.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }

.adventure-header,
.adventure-footer {
  position: relative;
  z-index: 2;
  width: min(100%, 1280px);
  color: #eaf6ff;
}
.adventure-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
}
.brand-lockup { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; }
.brand-orbit {
  grid-row: span 2;
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid rgba(155, 218, 255, .8);
  border-radius: 50%;
  color: #bce9ff;
  font-size: 23px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(117, 202, 255, .9);
  box-shadow: inset 0 0 12px rgba(104, 183, 255, .18), 0 0 16px rgba(104, 183, 255, .12);
}
.brand-name {
  color: #f2f8ff;
  font: italic 700 clamp(18px, 2.1vw, 27px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .015em;
  text-shadow: 0 0 18px rgba(126, 199, 255, .26);
}
.brand-caption {
  color: #8fc9f1;
  font: 700 8px/1.2 Arial, sans-serif;
  letter-spacing: .22em;
}
.star-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  max-width: min(62%, 610px);
  padding: 7px 16px;
  border: 1px solid rgba(142, 207, 248, .72);
  border-radius: 999px;
  color: #eaf6ff;
  background: linear-gradient(110deg, rgba(18, 53, 96, .9), rgba(25, 73, 121, .76));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 0 22px rgba(84, 173, 238, .12);
  font-size: 12px;
  line-height: 1.2;
}
.status-star { color: #ffe39b; font-size: 20px; text-shadow: 0 0 10px rgba(255, 220, 137, .6); }
.status-label { color: #b8dff9; white-space: nowrap; font-weight: 700; }
.star-status strong { color: #fff; font: 800 18px/1 Arial, sans-serif; white-space: nowrap; }
.status-divider { width: 1px; height: 19px; background: rgba(169, 218, 250, .35); }
#star-prompt { overflow: hidden; color: #c6e5fa; white-space: nowrap; text-overflow: ellipsis; }

.game-frame {
  position: relative;
  width: min(100%, 1280px, calc((100dvh - 176px) * 16 / 9));
  max-height: 100%;
  aspect-ratio: 16 / 9;
  padding: 7px;
  border: 1px solid rgba(164, 220, 255, .92);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(124, 203, 255, .22), rgba(255, 226, 163, .18) 48%, rgba(98, 174, 235, .2));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 0 5px rgba(65, 132, 190, .12),
    0 18px 55px rgba(2, 10, 31, .48),
    0 0 34px rgba(90, 183, 255, .16),
    inset 0 0 18px rgba(209, 238, 255, .1);
}
.game-frame::before {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(255, 222, 161, .55);
  border-radius: 21px;
  content: "";
  pointer-events: none;
}
.frame-corner {
  position: absolute;
  z-index: 3;
  width: 15px;
  height: 15px;
  border-color: #d5efff;
  border-style: solid;
  filter: drop-shadow(0 0 5px rgba(117, 204, 255, .7));
  pointer-events: none;
}
.corner-tl { top: 1px; left: 1px; border-width: 2px 0 0 2px; border-radius: 5px 0 0; }
.corner-tr { top: 1px; right: 1px; border-width: 2px 2px 0 0; border-radius: 0 5px 0 0; }
.corner-bl { bottom: 1px; left: 1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 5px; }
.corner-br { bottom: 1px; right: 1px; border-width: 0 2px 2px 0; border-radius: 0 0 5px; }

#game-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  line-height: 0;
  border-radius: 10px;
  background: #132c58;
}
#phaser-game { position: absolute; inset: 0; width: 100%; height: 100%; }
#game-container canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.adventure-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.1vw, 28px);
  min-height: 49px;
  padding: 5px 18px;
  border: 1px solid rgba(128, 198, 242, .56);
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(13, 39, 78, .82), rgba(25, 67, 111, .76), rgba(13, 39, 78, .82));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 0 22px rgba(78, 166, 231, .1);
}
.control-group { display: flex; align-items: center; gap: 8px; color: #d7edfc; font-size: 13px; font-weight: 700; white-space: nowrap; }
.control-divider { width: 1px; height: 22px; background: rgba(162, 211, 245, .28); }
.key-chip {
  display: inline-grid;
  min-width: 28px;
  min-height: 27px;
  place-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(158, 215, 255, .9);
  border-radius: 6px;
  color: #f2f9ff;
  background: linear-gradient(180deg, rgba(72, 133, 190, .72), rgba(31, 76, 128, .9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 0 rgba(3, 17, 42, .5);
  font: 800 11px/1 Arial, "Microsoft YaHei", sans-serif;
}
.key-chip.key-wide { min-width: 57px; }

.victory-overlay {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(54, 59, 102, .78);
}
.victory-overlay[hidden] { display: none; }
.victory-card {
  width: min(100%, 440px);
  padding: clamp(22px, 5vw, 38px);
  border: 3px solid #6975a2;
  outline: 2px solid var(--cream);
  color: var(--ink);
  background: #fff8eb;
  text-align: center;
}
.victory-star { display: inline-block; color: var(--gold); font-size: 48px; line-height: 1; }
.victory-kicker { margin: 10px 0 7px; color: #8d83ab; font-size: 11px; font-weight: 900; letter-spacing: .17em; }
.victory-card h2 { margin: 0; color: #465a87; font-family: Georgia, serif; font-size: clamp(21px, 4vw, 29px); }
.victory-card p:not(.victory-kicker) { margin: 15px 0 20px; font-size: 14px; line-height: 1.9; }
#restart-button {
  padding: 11px 22px;
  border: 2px solid #59678f;
  color: #fffdf0;
  background: #526fa8;
  font: 800 14px "Microsoft YaHei", sans-serif;
  cursor: pointer;
}
#restart-button:focus-visible { outline: 3px solid #e7c77f; outline-offset: 3px; }
#restart-button:active { transform: translateY(1px); }
.load-error { margin: 0; padding: 32px; color: #6d547a; font: 700 15px/1.7 "Microsoft YaHei", sans-serif; text-align: center; }

@media (max-width: 900px) {
  .welcome-title { width: 62vw; font-size: clamp(28px, 4.3vw, 42px); }
  .welcome-copy-panel { width: min(52vw, 580px); min-height: 210px; padding: 20px 22px; }
  .welcome-copy { font-size: clamp(14px, 1.8vw, 18px); gap: 6px; }
  .start-button { top: 77%; min-height: 60px; }
}
@media (max-width: 620px) {
  .welcome-art { object-position: 35% center; }
  .welcome-topline { top: 3.5%; font-size: 9px; letter-spacing: .15em; }
  .welcome-title { top: 7%; width: 82vw; font-size: clamp(25px, 7vw, 35px); }
  .lpj-badge { top: 12px; right: 12px; min-width: 51px; height: 29px; padding: 0 7px; font-size: 10px; }
  .welcome-copy-panel {
    left: 56%;
    top: 49%;
    width: 78vw;
    min-height: 190px;
    padding: 17px 12px;
    border-radius: 12px;
  }
  .welcome-copy { font-size: clamp(12px, 3.05vw, 15px); line-height: 1.58; gap: 5px; letter-spacing: 0; }
  .welcome-copy span { white-space: normal; }
  .start-button { top: 73.5%; left: 56%; width: min(68vw, 300px); min-height: 54px; gap: 12px; font-size: 19px; }
  .welcome-goal { top: 81.5%; left: 56%; width: 78vw; font-size: 11px; letter-spacing: .02em; }
  .lantern-glow { left: 14%; top: 26%; }
  .flora-idle-glow { left: 0; top: 58%; width: 42vw; }
  .sparkle-a { left: 28%; top: 58%; }
  .sparkle-b { left: 31%; top: 69%; }
  .world-stage { gap: 9px; padding: 12px 10px; }
  .adventure-header { min-height: 42px; }
  .brand-orbit { width: 29px; height: 29px; font-size: 18px; }
  .brand-name { font-size: clamp(15px, 4vw, 20px); }
  .brand-caption { font-size: 6px; letter-spacing: .14em; }
  .star-status { gap: 6px; min-height: 34px; max-width: 58%; padding: 5px 9px; font-size: 10px; }
  .status-star { font-size: 15px; }
  .star-status strong { font-size: 14px; }
  #star-prompt { display: none; }
  .game-frame { width: min(100%, calc((100dvh - 145px) * 16 / 9)); padding: 4px; border-radius: 10px; }
  #game-container { border-radius: 6px; }
  .adventure-footer { min-height: 40px; gap: clamp(6px, 2vw, 12px); padding: 4px 8px; }
  .control-group { gap: 4px; font-size: 10px; }
  .control-divider { height: 17px; }
  .key-chip { min-width: 22px; min-height: 22px; padding: 2px 4px; border-radius: 4px; font-size: 9px; }
  .key-chip.key-wide { min-width: 43px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-height: 560px) and (min-width: 621px) {
  .world-stage { gap: 7px; padding-top: 7px; padding-bottom: 7px; }
  .adventure-header { min-height: 35px; }
  .brand-orbit { width: 27px; height: 27px; font-size: 17px; }
  .brand-name { font-size: 18px; }
  .brand-caption { display: none; }
  .star-status { min-height: 32px; padding: 4px 12px; }
  .game-frame { width: min(100%, 1280px, calc((100dvh - 116px) * 16 / 9)); padding: 4px; }
  .adventure-footer { min-height: 36px; }
  .key-chip { min-height: 22px; }
}


/* ---------------- ADVENTURE UI REFINEMENT V2 ----------------
   A cleaner celestial-navigation console: layered glass, ice-blue
   highlights and restrained warm-metal details. Game viewport unchanged. */
.world-stage {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(70, 174, 239, .20) 0%, transparent 42%),
    radial-gradient(ellipse at 8% 90%, rgba(52, 125, 204, .18), transparent 34%),
    radial-gradient(ellipse at 92% 12%, rgba(100, 126, 235, .15), transparent 30%),
    linear-gradient(145deg, #07152f 0%, #102a55 44%, #0a1c3e 100%);
}
.world-stage::before {
  opacity: .48;
  background-image:
    radial-gradient(1px 1px at 8% 18%, #e4f7ff 99%, transparent),
    radial-gradient(1.5px 1.5px at 23% 76%, #9edcff 99%, transparent),
    radial-gradient(1px 1px at 79% 22%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 91% 68%, #a8dfff 99%, transparent),
    radial-gradient(1px 1px at 62% 8%, #fff 99%, transparent),
    radial-gradient(1px 1px at 45% 44%, #8bd7ff 99%, transparent);
  background-size: 260px 190px, 310px 230px, 280px 210px, 350px 250px, 230px 180px, 390px 290px;
}
.adventure-header {
  min-height: 58px;
  padding: 0 3px 8px;
}
.adventure-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 196, 247, .5) 18%, rgba(151, 210, 247, .18) 82%, transparent);
  content: "";
}
.brand-lockup {
  position: relative;
  column-gap: 13px;
  padding-left: 2px;
}
.brand-orbit {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(157, 224, 255, .88);
  color: #d5f4ff;
  background: radial-gradient(circle, rgba(116, 207, 255, .24), rgba(38, 96, 157, .08) 62%, transparent 70%);
  box-shadow: inset 0 0 0 4px rgba(128, 205, 250, .08), 0 0 0 4px rgba(105, 184, 235, .08), 0 0 24px rgba(83, 190, 255, .2);
}
.brand-orbit::after {
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(129, 202, 246, .42);
  border-radius: 50%;
  content: "";
}
.brand-name {
  font-size: clamp(19px, 2.15vw, 29px);
  letter-spacing: .005em;
  text-shadow: 0 2px 0 rgba(2, 14, 38, .5), 0 0 20px rgba(126, 199, 255, .34);
}
.brand-caption {
  margin-top: 3px;
  color: #a8dcfa;
  font-size: 8px;
  letter-spacing: .25em;
}
.star-status {
  position: relative;
  min-height: 46px;
  gap: 11px;
  padding: 7px 18px;
  border: 1px solid rgba(129, 205, 251, .72);
  border-radius: 12px;
  background:
    linear-gradient(105deg, rgba(20, 59, 105, .94), rgba(22, 77, 126, .84)),
    rgba(8, 29, 61, .8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(85, 163, 221, .16), 0 5px 18px rgba(0, 9, 29, .24), 0 0 20px rgba(75, 180, 244, .12);
}
.star-status::before,
.star-status::after {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9edfff;
  box-shadow: 0 0 8px #8edbff;
  content: "";
}
.star-status::before { left: 7px; }
.star-status::after { right: 7px; }
.status-star { color: #ffe7a9; filter: drop-shadow(0 0 5px rgba(255, 224, 153, .6)); }
.star-status strong {
  padding: 0 2px;
  color: #f7fcff;
  font-size: 19px;
  letter-spacing: .035em;
}
.status-divider { background: rgba(164, 220, 255, .48); }
#star-prompt { color: #d1edff; }

.game-frame {
  padding: 8px;
  border: 1px solid rgba(132, 211, 255, .92);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(135, 218, 255, .22), transparent 26%, rgba(255, 225, 166, .12) 52%, transparent 76%, rgba(106, 190, 247, .22)),
    linear-gradient(180deg, rgba(20, 60, 101, .96), rgba(8, 28, 61, .98));
  box-shadow:
    0 0 0 1px rgba(226, 246, 255, .25),
    0 0 0 4px rgba(65, 150, 207, .10),
    0 20px 58px rgba(0, 8, 27, .56),
    0 0 36px rgba(79, 185, 255, .22),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(3, 15, 39, .8);
}
.game-frame::before {
  inset: -7px;
  border: 1px solid rgba(127, 202, 245, .32);
  border-radius: 17px;
  box-shadow: 0 0 16px rgba(73, 171, 237, .10);
}
.game-frame::after {
  position: absolute;
  z-index: 4;
  top: -17px;
  left: 25px;
  padding: 2px 10px;
  color: #9edcff;
  background: #0d2850;
  font: 700 8px/1.4 Arial, sans-serif;
  letter-spacing: .22em;
  content: "FLP  /  CELESTIAL GARDEN";
  pointer-events: none;
}
.frame-corner {
  width: 19px;
  height: 19px;
  border-color: #c8f0ff;
  filter: drop-shadow(0 0 7px rgba(103, 202, 255, .9));
}
.corner-tl { top: 1px; left: 1px; border-width: 2px 0 0 2px; }
.corner-tr { top: 1px; right: 1px; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 1px; left: 1px; border-width: 0 0 2px 2px; }
.corner-br { bottom: 1px; right: 1px; border-width: 0 2px 2px 0; }

.adventure-footer {
  position: relative;
  min-height: 54px;
  gap: clamp(14px, 2.4vw, 34px);
  padding: 7px 24px;
  border: 1px solid rgba(112, 190, 240, .62);
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(10, 35, 73, .95), rgba(20, 65, 108, .88) 50%, rgba(10, 35, 73, .95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(3, 18, 43, .5), 0 7px 22px rgba(0, 8, 26, .22), 0 0 22px rgba(74, 171, 233, .10);
}
.adventure-footer::before,
.adventure-footer::after {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(174, 224, 255, .8);
  border-radius: 50%;
  background: #4c9fd6;
  box-shadow: 0 0 8px rgba(113, 205, 255, .65);
  transform: translateY(-50%);
  content: "";
}
.adventure-footer::before { left: 9px; }
.adventure-footer::after { right: 9px; }
.control-group {
  gap: 9px;
  color: #e4f5ff;
  font-size: 13px;
  letter-spacing: .04em;
}
.control-divider {
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(132, 202, 245, .46), transparent);
}
.key-chip {
  min-width: 31px;
  min-height: 29px;
  border: 1px solid rgba(156, 222, 255, .95);
  border-radius: 7px;
  color: #f5fbff;
  background: linear-gradient(180deg, #3979ae 0%, #20527f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #0a2545, 0 0 10px rgba(83, 183, 245, .12);
}
.key-chip.key-wide { min-width: 62px; }

@media (max-width: 620px) {
  .adventure-header { padding-bottom: 5px; }
  .brand-orbit { width: 31px; height: 31px; }
  .brand-orbit::after { inset: -4px; }
  .star-status { border-radius: 9px; }
  .game-frame::after { top: -13px; left: 12px; font-size: 6px; }
  .adventure-footer { border-radius: 10px; padding: 4px 8px; }
  .adventure-footer::before { left: 4px; }
  .adventure-footer::after { right: 4px; }
}


/* ---------------- CELESTIAL INDIGO UI V3 ----------------
   Deep violet/navy palette aligned to the adventure artwork. */
.world-stage {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(87, 72, 174, .24) 0%, transparent 48%),
    radial-gradient(ellipse at 12% 92%, rgba(76, 76, 171, .20), transparent 36%),
    radial-gradient(ellipse at 90% 10%, rgba(78, 111, 196, .16), transparent 32%),
    linear-gradient(145deg, #090d2d 0%, #171744 48%, #0c1235 100%);
}
.world-stage::before { opacity:.50; background-image:
  radial-gradient(1px 1px at 8% 18%, #f1eaff 99%, transparent),
  radial-gradient(1.5px 1.5px at 23% 76%, #a9cfff 99%, transparent),
  radial-gradient(1px 1px at 79% 22%, #fff 99%, transparent),
  radial-gradient(1.5px 1.5px at 91% 68%, #c4b5ff 99%, transparent),
  radial-gradient(1px 1px at 62% 8%, #fff 99%, transparent);
}
.world-stage::after { background:linear-gradient(90deg,transparent,rgba(159,151,255,.42),transparent); box-shadow:0 0 24px rgba(144,131,255,.16); }
.adventure-header, .adventure-footer { color:#f3efff; }
.brand-orbit { border-color:rgba(190,184,255,.82); color:#d9d2ff; background:radial-gradient(circle,rgba(150,139,255,.24),rgba(65,56,130,.08) 62%,transparent 70%); box-shadow:inset 0 0 0 4px rgba(177,166,255,.08),0 0 0 4px rgba(145,130,231,.08),0 0 22px rgba(153,137,255,.20); }
.brand-orbit::after { border-color:rgba(174,164,255,.40); }
.brand-name { color:#fffaff; text-shadow:0 2px 0 rgba(2,4,24,.55),0 0 18px rgba(167,151,255,.32); }
.brand-caption { color:#b7b2ed; }
.adventure-header::after { background:linear-gradient(90deg,transparent,rgba(171,158,255,.55) 18%,rgba(125,170,235,.20) 82%,transparent); }
.star-status { border:1px solid rgba(178,169,255,.72); color:#f4f0ff; background:linear-gradient(110deg,rgba(31,28,82,.96),rgba(48,43,111,.90)); box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 5px 18px rgba(0,0,20,.28),0 0 20px rgba(147,132,255,.13); }
.star-status::before,.star-status::after { background:#b9d9ff; box-shadow:0 0 8px #a6caff; }
.status-label,#star-prompt { color:#d5d0f4; }
.star-status strong { color:#fff; }
.status-divider { background:rgba(187,177,255,.42); }
.status-star { color:#ffe3a2; }
.game-frame { border-color:rgba(177,171,255,.90); background:linear-gradient(135deg,rgba(166,151,255,.24),transparent 27%,rgba(255,220,168,.10) 52%,transparent 76%,rgba(124,157,245,.20)),linear-gradient(180deg,rgba(31,28,78,.98),rgba(10,12,42,.99)); box-shadow:0 0 0 1px rgba(237,231,255,.22),0 0 0 4px rgba(111,97,196,.14),0 20px 58px rgba(0,0,20,.60),0 0 34px rgba(148,133,255,.18),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(3,4,25,.8); }
.game-frame::before { border-color:rgba(177,164,255,.36); box-shadow:0 0 16px rgba(145,128,255,.12); }
.game-frame::after { color:#c5bdff; background:#171743; }
.frame-corner { border-color:#e0d9ff; filter:drop-shadow(0 0 7px rgba(174,158,255,.78)); }
#game-container { background:#11133e; }
.adventure-footer { min-height:58px; gap:clamp(12px,2.2vw,30px); padding:7px 112px; border:1px solid rgba(164,151,245,.64); border-radius:16px; background:linear-gradient(90deg,rgba(14,14,52,.97),rgba(37,32,94,.94) 50%,rgba(14,14,52,.97)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(3,5,29,.58),0 7px 22px rgba(0,0,24,.28),0 0 22px rgba(132,117,241,.12); }
.adventure-footer::before,.adventure-footer::after { display:none; }
.control-group { color:#e8e3ff; }
.control-divider { background:linear-gradient(180deg,transparent,rgba(174,163,255,.52),transparent); }
.key-chip { border-color:rgba(196,185,255,.94); color:#fff; background:linear-gradient(180deg,#6555a9 0%,#39316f 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 0 #17143d,0 0 10px rgba(159,143,255,.16); }
.ui-flora,.ui-duck { position:absolute; z-index:3; bottom:3px; display:block; pointer-events:none; image-rendering:pixelated; filter:drop-shadow(0 3px 4px rgba(0,0,20,.5)); }
.ui-flora { left:18px; width:76px; height:76px; background:url("assets/characters/flora/flora_idle_sheet.png") left center/304px 76px no-repeat; animation:ui-flora-idle 1.2s steps(4) infinite; }
.ui-duck { right:24px; width:48px; height:48px; bottom:7px; background:url("assets/characters/duck/duck_idle_sheet.png") left center/192px 48px no-repeat; animation:ui-duck-idle 1.2s steps(4) infinite; }
@keyframes ui-flora-idle { from{background-position:0 0} to{background-position:-304px 0} }
@keyframes ui-duck-idle { from{background-position:0 0} to{background-position:-192px 0} }
@media (max-width:700px) { .adventure-footer { padding-left:72px; padding-right:68px; gap:10px; } .ui-flora { left:5px; width:58px; height:58px; background-size:232px 58px; } .ui-duck { right:6px; width:38px; height:38px; background-size:152px 38px; } }


/* ---------------- FAIRYTALE MAGIC UI — 2026.11 ----------------
   Local UI polish only. Phaser world, canvas ratio and game rules stay intact. */
.world-stage {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(115, 89, 191, .20) 0%, transparent 48%),
    radial-gradient(ellipse at 8% 90%, rgba(94, 79, 170, .17), transparent 36%),
    radial-gradient(ellipse at 92% 8%, rgba(116, 105, 205, .13), transparent 32%),
    linear-gradient(145deg, #090c2b 0%, #191744 48%, #0d1236 100%);
}
.world-stage::before {
  opacity: .38;
  background-image:
    radial-gradient(1px 1px at 8% 18%, #f5eaff 99%, transparent),
    radial-gradient(1.5px 1.5px at 23% 76%, #b9cfff 99%, transparent),
    radial-gradient(1px 1px at 79% 22%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 91% 68%, #d5c3ff 99%, transparent),
    radial-gradient(1px 1px at 62% 8%, #fff 99%, transparent);
}
.adventure-header {
  min-height: 60px;
  padding: 0 5px 8px;
}
.adventure-header::after {
  background: linear-gradient(90deg, transparent, rgba(203, 177, 233, .46) 18%, rgba(247, 214, 177, .18) 52%, rgba(163, 151, 231, .28) 82%, transparent);
}
.brand-orbit {
  border-color: rgba(211, 197, 255, .8);
  color: #e8dcff;
  background: radial-gradient(circle, rgba(169, 146, 255, .25), rgba(70, 58, 133, .08) 62%, transparent 70%);
  box-shadow: inset 0 0 0 4px rgba(211, 197, 255, .08), 0 0 0 4px rgba(177, 154, 235, .07), 0 0 22px rgba(174, 150, 255, .17);
}
.brand-orbit::after { border-color: rgba(226, 204, 245, .38); }
.brand-name {
  color: #fff8ff;
  text-shadow: 0 2px 0 rgba(12, 8, 39, .48), 0 0 18px rgba(210, 175, 255, .26);
}
.brand-caption { color: #c9b9ee; }
.star-status {
  border: 1px solid rgba(218, 194, 239, .66);
  border-radius: 15px;
  color: #fff8f4;
  background: linear-gradient(112deg, rgba(37, 30, 83, .94), rgba(61, 47, 111, .90));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 18px rgba(0,0,20,.24), 0 0 20px rgba(179,151,235,.10);
}
.star-status::before,.star-status::after {
  background: #f4d99e;
  box-shadow: 0 0 8px rgba(255,220,157,.7);
}
.status-label,#star-prompt { color: #e1d7f3; }
.star-status strong { color: #fffaf4; }
.status-divider { background: rgba(231, 208, 235, .42); }
.status-star { color: #ffe3a5; filter: drop-shadow(0 0 5px rgba(255,220,157,.58)); }

.game-frame {
  overflow: visible;
  padding: 8px;
  border: 1px solid rgba(205, 184, 237, .84);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(222, 194, 244, .22), transparent 28%, rgba(255, 226, 178, .13) 52%, transparent 76%, rgba(160, 147, 231, .20)),
    linear-gradient(180deg, rgba(35, 29, 83, .98), rgba(13, 14, 47, .99));
  box-shadow:
    0 0 0 1px rgba(255,245,255,.20),
    0 0 0 4px rgba(149,126,209,.12),
    0 20px 58px rgba(0,0,20,.58),
    0 0 32px rgba(174,146,239,.15),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -2px 0 rgba(3,4,25,.72);
}
.game-frame::before {
  inset: -6px;
  border: 1px solid rgba(226, 204, 240, .32);
  border-radius: 20px;
  box-shadow: 0 0 16px rgba(190,157,233,.10);
}
.game-frame::after {
  top: -16px;
  left: 28px;
  color: #e2c9f1;
  background: #17143f;
  letter-spacing: .2em;
}
.frame-corner {
  width: 18px;
  height: 18px;
  border-color: rgba(255, 229, 196, .92);
  filter: drop-shadow(0 0 5px rgba(248,211,170,.48));
}
.corner-tl { top: 1px; left: 1px; border-width: 2px 0 0 2px; }
.corner-tr { top: 1px; right: 1px; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 1px; left: 1px; border-width: 0 0 2px 2px; }
.corner-br { bottom: 1px; right: 1px; border-width: 0 2px 2px 0; }

.frame-blossom {
  position: absolute;
  z-index: 5;
  display: block;
  width: clamp(74px, 8vw, 112px);
  height: clamp(56px, 6vw, 84px);
  background: url("assets/ui-cherry-vine.svg") left top / contain no-repeat;
  opacity: .88;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(13, 8, 42, .4));
}
.blossom-tl { top: -13px; left: -13px; }
.blossom-tr { top: -13px; right: -13px; transform: scaleX(-1); }
.blossom-bl { bottom: -13px; left: -13px; transform: scaleY(-1); }
.blossom-br { bottom: -13px; right: -13px; transform: scale(-1); }

.adventure-footer {
  isolation: isolate;
  overflow: visible;
  min-height: 64px;
  gap: clamp(13px, 2.25vw, 30px);
  padding: 8px 112px;
  border: 1px solid rgba(199, 177, 232, .70);
  border-radius: 23px 23px 18px 18px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(207, 186, 242, .22), transparent 32%),
    radial-gradient(ellipse at 88% 0%, rgba(207, 186, 242, .18), transparent 32%),
    linear-gradient(100deg, rgba(21, 17, 62, .97), rgba(54, 42, 105, .95) 50%, rgba(21, 17, 62, .97));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 0 rgba(4,5,29,.52),
    0 7px 22px rgba(0,0,24,.28),
    0 0 22px rgba(174,147,231,.10);
}
.adventure-footer::before {
  display: block;
  z-index: 0;
  top: -12px;
  left: 7%;
  width: 86%;
  height: 30px;
  border: 1px solid rgba(220, 204, 239, .42);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
  background:
    radial-gradient(ellipse at 9% 100%, rgba(202,188,241,.24) 0 24%, transparent 25%),
    radial-gradient(ellipse at 25% 100%, rgba(202,188,241,.18) 0 22%, transparent 23%),
    radial-gradient(ellipse at 75% 100%, rgba(202,188,241,.18) 0 22%, transparent 23%),
    radial-gradient(ellipse at 91% 100%, rgba(202,188,241,.22) 0 24%, transparent 25%);
  box-shadow: 0 -3px 13px rgba(179,153,232,.10);
  content: "";
}
.adventure-footer::after {
  display: block;
  z-index: 0;
  top: -5px;
  left: 13%;
  width: 74%;
  height: 13px;
  border-radius: 50%;
  background: rgba(200, 181, 236, .12);
  filter: blur(7px);
  content: "";
}
.control-group {
  position: relative;
  z-index: 2;
  color: #f1e9ff;
  font-size: 13px;
  letter-spacing: .035em;
}
.control-divider {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(224,201,240,.48), transparent);
}
.key-chip {
  border: 1px solid rgba(223, 202, 244, .94);
  border-radius: 8px;
  color: #fffaf6;
  background: linear-gradient(180deg, #7966b4 0%, #51417f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 2px 0 #211b4b, 0 0 10px rgba(194,169,255,.14);
}
.key-chip.key-wide { min-width: 62px; }
.ui-flora,.ui-duck {
  z-index: 4;
  filter: drop-shadow(0 3px 4px rgba(0,0,20,.52));
}
.ui-flora { left: 18px; bottom: 1px; }
.ui-duck { right: 24px; bottom: 4px; }

@media (max-width: 700px) {
  .frame-blossom { width: 60px; height: 46px; opacity: .72; }
  .blossom-tl { top: -8px; left: -8px; }
  .blossom-tr { top: -8px; right: -8px; }
  .blossom-bl { bottom: -8px; left: -8px; }
  .blossom-br { bottom: -8px; right: -8px; }
  .adventure-footer { padding-left: 72px; padding-right: 68px; gap: 10px; }
}
@media (max-width: 620px) {
  .game-frame::after { top: -13px; left: 12px; }
  .adventure-footer { border-radius: 17px 17px 13px 13px; }
}

/* DUCK COMPANION DIALOG — independent narrative layer */
#game-container { position: relative; }
.duck-dialog {
  position: absolute; z-index: 30; left: 50%; bottom: clamp(18px, 5.4%, 34px);
  width: min(76%, 610px); box-sizing: border-box; display: flex; flex-direction: column;
  gap: 5px; padding: 12px 20px 14px; border: 1px solid rgba(222,202,246,.92);
  border-radius: 18px 18px 18px 5px; color: #302653;
  background: linear-gradient(135deg,rgba(255,250,255,.97),rgba(239,229,255,.96));
  box-shadow: 0 7px 24px rgba(15,9,48,.30),inset 0 1px 0 #fff;
  transform: translate(-50%,12px) scale(.98); opacity: 0; pointer-events: none;
  transition: opacity .24s ease,transform .24s ease;
}
.duck-dialog::after { content:""; position:absolute; left:27px; bottom:-9px; width:16px; height:16px;
  background:#f4ecff; border-right:1px solid rgba(222,202,246,.92);
  border-bottom:1px solid rgba(222,202,246,.92); transform:rotate(45deg); }
.duck-dialog.is-visible { opacity:1; transform:translate(-50%,0) scale(1); }
.dialog-speaker { color:#8065b2; font-size:11px; font-weight:800; letter-spacing:.12em; }
.dialog-duck-mark { color:#c99c4d; margin-right:5px; }
.dialog-copy { font-size:clamp(13px,1.65vw,17px); line-height:1.55; font-weight:700; text-align:center; }
.victory-duck-line { display:inline-block; margin-top:10px; color:#8a68b8; font-weight:700; }
@media(max-width:620px) {
  .duck-dialog { width:88%; padding:9px 13px 11px; bottom:14px; }
  .dialog-copy { font-size:12px; }
}

/* Dialogue positioning refinement: keep the bubble inside the playfield and clear of footer controls. */
#game-container { isolation: isolate; }
.duck-dialog { bottom: clamp(22px, 7%, 42px); max-width: min(610px, 82%); }
.duck-dialog.is-visible { z-index: 60; }


/* ==========================================================
   FLORA'S LITTLE PLANET — REFERENCE-LED UI REBUILD
   Layout: header / 16:9 Phaser viewport / Duck dialogue / controls
   Phaser world, collisions, coordinates and event triggers are untouched.
   ========================================================== */
.world-stage {
  --night-0:#100d31;
  --night-1:#21194c;
  --lavender:#c8b2e8;
  --silver:#e5d8f4;
  --gold-soft:#f5d89c;
  position:fixed;
  inset:0;
  display:grid;
  grid-template-rows:68px minmax(0,1fr) 92px 58px;
  justify-items:center;
  align-items:stretch;
  gap:8px;
  padding:10px clamp(18px,5vw,76px) 14px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(100,76,160,.22),transparent 55%),
    radial-gradient(ellipse at 4% 95%,rgba(117,82,156,.16),transparent 30%),
    radial-gradient(ellipse at 96% 95%,rgba(117,82,156,.14),transparent 30%),
    linear-gradient(145deg,#100e31 0%,#1d1746 48%,#100f32 100%);
}
.world-stage::before {
  z-index:0; inset:0; opacity:.42;
  background-image:
    radial-gradient(1px 1px at 7% 17%,#f6eaff 99%,transparent),
    radial-gradient(1.3px 1.3px at 17% 74%,#cbb6ee 99%,transparent),
    radial-gradient(1px 1px at 89% 23%,#fff4df 99%,transparent),
    radial-gradient(1.2px 1.2px at 94% 77%,#d9c5f4 99%,transparent),
    radial-gradient(1px 1px at 61% 8%,#fff 99%,transparent);
  background-size:230px 180px,310px 230px,280px 210px,350px 250px,190px 170px;
}
.world-stage > * { position:relative; z-index:1; }

/* Victory dialog is a true overlay, never a Grid row.
   This keeps the game viewport and footer at their intended sizes. */
.world-stage > .victory-overlay {
  position:absolute;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(25,18,54,.72);
}
.world-stage > .victory-overlay[hidden] {
  display:none;
}

.adventure-header {
  width:min(100%,1440px);
  min-height:0;
  display:grid;
  grid-template-columns:minmax(300px,1fr) minmax(180px, .9fr) auto;
  align-items:center;
  gap:18px;
  padding:0 4px;
  border-bottom:1px solid rgba(205,185,232,.22);
}
.brand-lockup {
  position:relative;
  display:grid;
  grid-template-columns:64px auto;
  grid-template-rows:1fr auto;
  align-items:center;
  column-gap:12px;
  width:max-content;
}
.brand-orbit {
  grid-row:span 2;
  display:grid;
  place-items:center;
  width:58px;height:58px;
  border:1px solid rgba(238,208,165,.72);
  border-radius:50%;
  color:#f7d995;
  font:normal 48px/1 Georgia,serif;
  text-shadow:0 0 12px rgba(255,218,144,.65);
  background:radial-gradient(circle,rgba(255,223,167,.10),transparent 68%);
  box-shadow:0 0 0 5px rgba(201,175,225,.08),inset 0 0 15px rgba(255,220,164,.12);
}
.brand-name {
  align-self:end;
  color:#fff8ff;
  font:italic 700 clamp(23px,2.25vw,34px)/1 Georgia,"Times New Roman",serif;
  letter-spacing:.005em;
  text-shadow:0 2px 10px rgba(10,5,31,.45);
}
.brand-caption {
  align-self:start;
  margin-top:4px;
  color:#cbb9e7;
  font:700 8px/1.2 Arial,sans-serif;
  letter-spacing:.27em;
}
.header-star-trail {
  position:relative;
  height:48px;
  opacity:.9;
  background:
    radial-gradient(ellipse at 50% 52%,transparent 0 48%,rgba(205,190,230,.8) 49% 50%,transparent 51%) center/100% 100% no-repeat;
  clip-path:inset(0 0 0 0);
}
.header-star-trail::before {
  content:"";
  position:absolute;left:2%;right:2%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(223,205,240,.65),transparent);
  transform:rotate(-2deg);
}
.trail-star { position:absolute;color:#f5dca9;text-shadow:0 0 9px rgba(255,219,153,.8); }
.trail-star-a {left:17%;top:8px;font-size:15px}
.trail-star-b {left:49%;top:-3px;font-size:42px}
.trail-star-c {right:17%;bottom:3px;font-size:15px}
.star-status {
  display:flex;align-items:center;gap:11px;
  max-width:100%;min-height:48px;
  padding:7px 17px;
  border:1px solid rgba(222,196,235,.72);
  border-radius:17px;
  color:#fff8ff;
  background:linear-gradient(110deg,rgba(49,37,91,.94),rgba(63,48,111,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 4px 18px rgba(4,2,24,.22);
  font-size:13px;
}
.status-star {color:#f8dfa9;font-size:22px;text-shadow:0 0 10px rgba(255,220,153,.7)}
.status-label {color:#eadff5;font-weight:700;white-space:nowrap}
.star-status strong {font:800 19px/1 Arial,sans-serif;color:#fffaf7;white-space:nowrap}
.status-divider {width:1px;height:23px;background:rgba(232,211,238,.42)}
#star-prompt {color:#e4d7ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:235px}

.game-frame {
  position:relative;
  width:min(100%,1280px,calc((100dvh - 270px)*16/9));
  height:100%;
  max-height:100%;
  min-height:0;
  aspect-ratio:16/9;
  justify-self:center;
  align-self:center;
  padding:7px;
  border:1px solid rgba(222,202,240,.88);
  border-radius:13px;
  background:linear-gradient(135deg,rgba(229,211,245,.20),rgba(133,108,177,.08) 48%,rgba(244,215,171,.13));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 0 5px rgba(177,151,211,.10),
    0 13px 38px rgba(4,2,24,.43),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.game-frame::before {
  content:"";
  position:absolute;inset:-5px;
  border:1px solid rgba(217,198,237,.30);
  border-radius:17px;
  pointer-events:none;
}
.frame-corner {
  z-index:4;width:18px;height:18px;
  border-color:#f0e1f4;
  filter:drop-shadow(0 0 5px rgba(209,184,238,.45));
}
.corner-tl {top:1px;left:1px;border-width:2px 0 0 2px}
.corner-tr {top:1px;right:1px;border-width:2px 2px 0 0}
.corner-bl {bottom:1px;left:1px;border-width:0 0 2px 2px}
.corner-br {bottom:1px;right:1px;border-width:0 2px 2px 0}
.frame-blossom {display:none}
.frame-vine {
  position:absolute;z-index:5;
  width:clamp(74px,8vw,120px);
  height:auto;
  pointer-events:none;
  opacity:.92;
  filter:drop-shadow(0 2px 4px rgba(12,5,35,.35));
}
.frame-vine-left {left:-49px;top:-15px;transform:rotate(-8deg)}
.frame-vine-right {right:-49px;top:-15px;transform:scaleX(-1) rotate(-8deg)}
#game-container {
  position:relative;width:100%;height:100%;min-height:0;
  overflow:hidden;display:block;line-height:0;
  border-radius:7px;background:#171438;
}
#phaser-game {position:absolute;inset:0;width:100%;height:100%}
#game-container canvas {
  display:block;width:100%!important;height:100%!important;
  image-rendering:pixelated;image-rendering:crisp-edges;
}

.dialogue-panel {
  position:relative;
  width:min(100%,1280px);
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  overflow:visible;
}
.dialogue-panel::before {
  content:"";
  position:absolute;z-index:-1;
  left:7%;right:7%;top:12px;bottom:3px;
  border:1px solid rgba(224,202,241,.70);
  border-radius:48px;
  background:
    radial-gradient(ellipse at 10% 100%,rgba(255,255,255,.20),transparent 37%),
    linear-gradient(100deg,rgba(95,73,139,.82),rgba(111,83,158,.88) 48%,rgba(95,73,139,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 0 18px rgba(208,177,239,.16);
}
.dialogue-panel::after {
  content:"";
  position:absolute;z-index:-2;
  left:0;right:0;bottom:-8px;height:48px;
  background:
    radial-gradient(ellipse at 7% 100%,rgba(238,226,255,.76) 0 22%,transparent 23%),
    radial-gradient(ellipse at 19% 100%,rgba(228,215,249,.72) 0 25%,transparent 26%),
    radial-gradient(ellipse at 50% 110%,rgba(225,211,248,.62) 0 28%,transparent 29%),
    radial-gradient(ellipse at 82% 100%,rgba(235,222,252,.68) 0 23%,transparent 24%),
    radial-gradient(ellipse at 94% 100%,rgba(240,228,255,.74) 0 22%,transparent 23%);
  filter:drop-shadow(0 -2px 5px rgba(213,190,239,.12));
}
.dialog-cloud {
  position:absolute;top:2px;width:13px;height:13px;
  border:1px solid rgba(247,221,172,.9);
  transform:rotate(45deg);
  background:#b89bd2;
  box-shadow:0 0 8px rgba(255,221,164,.45);
}
.cloud-left {left:7.5%}.cloud-right {right:7.5%}
.duck-dialog {
  position:relative;z-index:2;
  left:auto;bottom:auto;
  width:min(72%,760px);
  min-height:72px;
  box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  padding:12px 28px 10px;
  border:1px solid rgba(237,217,247,.82);
  border-radius:42px;
  color:#fff8ff;
  background:linear-gradient(110deg,rgba(151,121,187,.52),rgba(184,151,208,.52),rgba(151,121,187,.52));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 15px rgba(231,205,248,.12);
  transform:translateY(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.duck-dialog.is-visible {opacity:1;transform:translateY(0)}
.dialog-speaker {
  position:absolute;left:13%;top:-17px;
  padding:5px 18px 5px 30px;
  border:1px solid rgba(231,210,246,.86);
  border-radius:18px;
  color:#fff8ff;
  background:linear-gradient(110deg,#8063a9,#5c477f);
  font-size:12px;font-weight:800;letter-spacing:.10em;
  box-shadow:0 3px 9px rgba(20,9,43,.25);
}
.dialog-duck-mark {
  position:absolute;left:8px;top:50%;transform:translateY(-50%);
  color:#f6dba2;
}
.dialog-copy {
  display:block;
  color:#fffaff;
  font-size:clamp(14px,1.45vw,19px);
  line-height:1.5;
  font-weight:700;
  text-align:center;
  text-shadow:0 1px 5px rgba(49,30,82,.35);
}
.ui-flora,.ui-duck {
  position:absolute;z-index:3;bottom:-4px;display:block;
  pointer-events:none;image-rendering:pixelated;
  filter:drop-shadow(0 3px 4px rgba(12,5,34,.42));
}
.ui-flora {
  left:0;width:130px;height:130px;
  background:url("assets/characters/flora/flora_idle_sheet.png") left center/520px 130px no-repeat;
  animation:ui-flora-idle 1.2s steps(4) infinite;
}
.ui-duck {
  right:0;width:100px;height:100px;bottom:0;
  background:url("assets/characters/duck/duck_idle_sheet.png") left center/400px 100px no-repeat;
  animation:ui-duck-idle 1.2s steps(4) infinite;
}
@keyframes ui-flora-idle {from{background-position:0 0}to{background-position:-520px 0}}
@keyframes ui-duck-idle {from{background-position:0 0}to{background-position:-400px 0}}

.adventure-footer {
  position:relative;z-index:2;
  width:min(100%,1280px);min-height:58px;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(13px,2.2vw,30px);
  padding:5px 24px;
  border:1px solid rgba(218,197,238,.65);
  border-radius:22px 22px 17px 17px;
  color:#fff8ff;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(210,188,239,.18),transparent 52%),
    linear-gradient(100deg,rgba(35,27,79,.97),rgba(75,57,121,.95) 50%,rgba(35,27,79,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(5,2,28,.28);
}
.adventure-footer::before {
  content:"";
  position:absolute;left:8%;right:8%;top:-8px;height:16px;
  border-top:1px solid rgba(222,203,241,.36);
  border-radius:50% 50% 0 0;
  pointer-events:none;
}
.control-group {display:flex;align-items:center;gap:8px;color:#f5ecff;font-size:13px;font-weight:700;white-space:nowrap}
.control-divider {width:1px;height:23px;background:rgba(229,207,241,.35)}
.key-chip {
  display:inline-grid;min-width:30px;min-height:28px;place-items:center;padding:3px 8px;
  border:1px solid rgba(224,205,244,.85);border-radius:8px;
  color:#fffaff;background:linear-gradient(180deg,#9078b9,#5f4a8a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 #34265c;
  font:800 12px/1 Arial,sans-serif;
}
.key-wide {min-width:62px}

@media (max-height:760px) {
  .world-stage {grid-template-rows:54px minmax(0,1fr) 76px 50px;gap:6px;padding-top:7px;padding-bottom:8px}
  .brand-orbit {width:46px;height:46px;font-size:39px}
  .brand-name {font-size:clamp(20px,2vw,27px)}
  .dialogue-panel {height:76px}
  .duck-dialog {min-height:60px;padding:8px 24px}
  .ui-flora {width:100px;height:100px;background-size:400px 100px}
  .ui-duck {width:78px;height:78px;background-size:312px 78px}
  .adventure-footer {min-height:50px}
}
@media (max-width:900px) {
  .world-stage {grid-template-rows:58px minmax(0,1fr) 82px 54px;padding-left:18px;padding-right:18px}
  .adventure-header {grid-template-columns:1fr auto}
  .header-star-trail {display:none}
  .brand-lockup {grid-template-columns:48px auto}
  .brand-orbit {width:44px;height:44px;font-size:37px}
  .brand-name {font-size:clamp(18px,3vw,27px)}
  .star-status {gap:7px;padding:6px 10px;font-size:11px}
  #star-prompt {max-width:130px}
  .frame-vine {width:72px}
  .frame-vine-left {left:-28px}.frame-vine-right {right:-28px}
  .ui-flora {width:88px;height:88px;background-size:352px 88px}
  .ui-duck {width:68px;height:68px;background-size:272px 68px}
  .duck-dialog {width:76%}
}
@media (max-width:620px) {
  .world-stage {grid-template-rows:54px minmax(0,1fr) 72px 48px;gap:5px;padding:6px 10px 8px}
  .adventure-header {gap:6px;padding:0}
  .brand-lockup {grid-template-columns:37px auto;column-gap:7px}
  .brand-orbit {width:34px;height:34px;font-size:29px}
  .brand-name {font-size:17px}
  .brand-caption {font-size:6px;letter-spacing:.18em}
  .star-status {min-height:35px;padding:4px 7px;gap:5px;border-radius:11px}
  .status-star {font-size:15px}.status-label {font-size:9px}
  .star-status strong {font-size:13px}
  #star-prompt,.status-divider {display:none}
  .game-frame {padding:4px;border-radius:9px}
  .frame-vine {width:48px;top:-9px}
  .frame-vine-left {left:-18px}.frame-vine-right {right:-18px}
  .dialogue-panel {height:72px}
  .dialogue-panel::before {left:5%;right:5%;top:10px;bottom:2px}
  .duck-dialog {width:78%;min-height:54px;padding:7px 18px}
  .dialog-speaker {left:12%;top:-13px;padding:3px 12px 3px 23px;font-size:9px}
  .dialog-copy {font-size:11px}
  .ui-flora {width:60px;height:60px;background-size:240px 60px}
  .ui-duck {width:48px;height:48px;background-size:192px 48px}
  .adventure-footer {min-height:48px;gap:7px;padding:4px 6px;border-radius:14px}
  .control-group {gap:4px;font-size:10px}
  .control-divider {height:17px}
  .key-chip {min-width:23px;min-height:23px;padding:2px 4px;font-size:9px}
  .key-wide {min-width:42px}
}


/* 2026-11-09: Duck speaker identity — sprite avatar attached to dialogue tab */
.dialogue-panel { overflow: visible; }
.duck-dialog { overflow: visible; }
.dialog-speaker {
  left: 12%;
  top: -19px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 17px 5px 29px;
  border-radius: 18px;
}
.dialog-duck-avatar {
  position: absolute;
  left: -24px;
  top: -11px;
  display: block;
  width: 44px;
  height: 44px;
  background: url("assets/characters/duck/duck_idle_sheet.png") left center / 176px 44px no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(20,10,42,.55));
  animation: dialog-duck-idle 1.2s steps(4) infinite;
}
@keyframes dialog-duck-idle {
  from { background-position: 0 0; }
  to { background-position: -176px 0; }
}
.dialog-duck-mark { margin-left: 1px; }
@media (max-width:700px) {
  .dialog-speaker { left: 15%; top: -16px; min-height: 28px; padding: 3px 11px 3px 22px; }
  .dialog-duck-avatar { width: 36px; height: 36px; left: -20px; top: -8px; background-size: 144px 36px; }
  @keyframes dialog-duck-idle { from { background-position:0 0; } to { background-position:-144px 0; } }
}

/* 2026-11-10 visual refinement: cloud-sea base + upgraded display-only companions.
   Gameplay sprites, world geometry and interaction logic remain untouched. */
.dialogue-panel {
  height: 98px;
  margin-top: -2px;
  isolation: isolate;
}
/* Replace the broad rectangular under-panel with a layered, continuous cloud bank. */
.dialogue-panel::before {
  left: 0; right: 0; top: 9px; bottom: -8px;
  border: 0; border-radius: 0;
  background:
    radial-gradient(ellipse at 4% 100%, rgba(246,238,255,.96) 0 8%, rgba(214,195,244,.76) 12%, transparent 25%),
    radial-gradient(ellipse at 14% 112%, rgba(237,226,255,.96) 0 12%, rgba(184,160,223,.72) 17%, transparent 29%),
    radial-gradient(ellipse at 29% 108%, rgba(220,207,250,.88) 0 11%, rgba(155,132,204,.48) 18%, transparent 31%),
    radial-gradient(ellipse at 50% 118%, rgba(236,226,255,.92) 0 13%, rgba(168,146,218,.55) 20%, transparent 34%),
    radial-gradient(ellipse at 72% 110%, rgba(220,207,250,.88) 0 12%, rgba(154,129,204,.50) 19%, transparent 32%),
    radial-gradient(ellipse at 88% 112%, rgba(241,231,255,.96) 0 13%, rgba(194,171,232,.70) 19%, transparent 30%),
    radial-gradient(ellipse at 99% 100%, rgba(246,238,255,.96) 0 8%, rgba(214,195,244,.76) 12%, transparent 25%),
    linear-gradient(180deg, transparent 0%, rgba(145,119,190,.13) 35%, rgba(69,49,113,.30) 100%);
  filter: drop-shadow(0 -3px 12px rgba(199,173,236,.12));
  pointer-events:none;
}
.dialogue-panel::after {
  left:-2%; right:-2%; bottom:-10px; height:68px;
  background:
    radial-gradient(ellipse at 5% 100%,rgba(250,245,255,.98) 0 15%,transparent 16%),
    radial-gradient(ellipse at 16% 105%,rgba(227,214,251,.92) 0 19%,transparent 20%),
    radial-gradient(ellipse at 31% 108%,rgba(202,184,238,.78) 0 17%,transparent 18%),
    radial-gradient(ellipse at 48% 110%,rgba(239,230,255,.95) 0 18%,transparent 19%),
    radial-gradient(ellipse at 65% 108%,rgba(205,187,241,.82) 0 17%,transparent 18%),
    radial-gradient(ellipse at 82% 108%,rgba(232,220,252,.94) 0 19%,transparent 20%),
    radial-gradient(ellipse at 96% 100%,rgba(250,245,255,.98) 0 15%,transparent 16%);
  filter:drop-shadow(0 -2px 8px rgba(219,199,245,.22));
  pointer-events:none;
}
/* One dialogue container only: the former panel backing is now cloud mist, not a box. */
.duck-dialog {
  width:min(70%,760px);
  min-height:68px;
  padding:14px 34px 12px;
  border:1px solid rgba(239,222,250,.86);
  border-radius:38px;
  background:linear-gradient(110deg,rgba(105,78,151,.66),rgba(144,111,183,.72) 50%,rgba(105,78,151,.66));
  box-shadow:0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.28),0 0 24px rgba(204,174,242,.22);
  backdrop-filter:blur(3px);
}
.duck-dialog::before,.duck-dialog::after {font-size:15px;opacity:.9}
.dialog-speaker {
  left:13%; top:-17px;
  background:linear-gradient(110deg,#8267ad,#665087);
  border-color:rgba(237,219,249,.9);
}
/* Display models are separate art assets; Phaser's in-world spritesheets are untouched. */
.ui-flora {
  left: 5px; bottom: -4px;
  width: 150px; height: 164px;
  background: url("assets/characters/display/flora_display_refined.png?v=20261111-v2") center bottom / contain no-repeat;
  animation: none;
}
.ui-duck {
  right: 5px; bottom: -3px;
  width: 126px; height: 138px;
  background: url("assets/characters/display/duck_display_cool.png") center bottom / contain no-repeat;
  animation: none;
}
.dialog-duck-avatar {
  background: url("assets/characters/display/duck_display_cool.png") center bottom / 118% auto no-repeat;
  width: 56px; height: 56px; left: -34px; top: -16px;
  animation: none;
}
/* Let the controls sit in the same cloud sea instead of another outlined card. */
.adventure-footer {
  border:0;
  border-radius:0;
  background:
    radial-gradient(ellipse at 10% 0%,rgba(219,203,248,.19),transparent 30%),
    radial-gradient(ellipse at 90% 0%,rgba(219,203,248,.19),transparent 30%),
    linear-gradient(180deg,rgba(48,34,87,.14),rgba(30,21,66,.40));
  box-shadow:none;
  min-height:58px;
}
.adventure-footer::before {
  left:7%;right:7%;top:-2px;height:25px;
  border-top:1px solid rgba(226,209,248,.42);
  border-radius:50% 50% 0 0;
}
.key-chip {box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 rgba(42,29,78,.7),0 0 10px rgba(208,183,244,.12)}
@media (max-height:760px) {
  .dialogue-panel {height:80px}
  .ui-flora {width:112px;height:124px}
  .ui-duck {width:94px;height:104px}
}
@media (max-width:900px) {
  .dialogue-panel {height:84px}
  .ui-flora {width:96px;height:108px}
  .ui-duck {width:78px;height:90px}
}
@media (max-width:620px) {
  .dialogue-panel {height:72px}
  .duck-dialog {width:76%;min-height:50px;padding:7px 18px}
  .ui-flora {width:62px;height:70px}
  .ui-duck {width:52px;height:60px}
  .dialog-duck-avatar {width:42px;height:42px;left:-25px;top:-12px;background-size:118% auto}
}

/* 2026-11-10 UI refinement v2: remove bulky cloud bank and unify the frame.
   Keep the gameplay viewport size and all Phaser mechanics unchanged. */
.dialogue-panel {
  height: 84px;
  margin-top: 0;
  background: transparent;
  isolation: auto;
}
.dialogue-panel::before,
.dialogue-panel::after {
  content: none !important;
  display: none !important;
}
.dialog-cloud { display: none !important; }
.duck-dialog {
  width: min(68%, 740px);
  min-height: 62px;
  padding: 11px 32px 10px;
  border: 1px solid rgba(210,194,239,.58);
  border-radius: 32px;
  background: linear-gradient(100deg, rgba(54,42,91,.76), rgba(82,62,125,.80) 50%, rgba(54,42,91,.76));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 20px rgba(4,2,24,.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.game-frame {
  padding: 4px;
  border: 1px solid rgba(210,194,239,.68);
  border-radius: 10px;
  background: rgba(195,174,226,.055);
  box-shadow: 0 0 0 1px rgba(255,255,255,.055), 0 10px 30px rgba(3,2,22,.25), 0 0 24px rgba(154,125,208,.09);
}
.game-frame::before { content: none !important; display: none !important; }
.frame-corner { display: none; }
#game-container {
  border-radius: 6px;
  background: #171438;
  box-shadow: inset 0 0 0 1px rgba(15,10,40,.35);
}
.adventure-header {
  border-bottom-color: rgba(205,185,232,.16);
}
.adventure-footer {
  min-height: 58px;
  border-top: 1px solid rgba(207,190,235,.20);
  background: linear-gradient(180deg, rgba(67,49,109,.12), rgba(22,16,54,.24));
  box-shadow: none;
}
.adventure-footer::before { content: none !important; display: none !important; }
.key-chip {
  background: linear-gradient(180deg, rgba(163,136,202,.9), rgba(99,75,146,.94));
  border: 1px solid rgba(220,205,241,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 0 rgba(30,20,61,.65);
}
.ui-flora, .ui-duck { filter: drop-shadow(0 5px 8px rgba(4,2,24,.24)); }
@media (max-height:760px) {
  .dialogue-panel { height: 72px; }
  .duck-dialog { min-height: 54px; padding: 8px 26px; }
}
@media (max-width:900px) {
  .dialogue-panel { height: 76px; }
  .duck-dialog { width: 72%; min-height: 56px; }
}
@media (max-width:620px) {
  .dialogue-panel { height: 68px; }
  .duck-dialog { width: 76%; min-height: 48px; padding: 7px 16px; }
}


/* WELCOME ART V2: title and start-button artwork are baked into the supplied illustration. */
.welcome-screen-art-v2 {
  background: #17265e;
}
.welcome-screen-art-v2 .welcome-art {
  image-rendering: auto;
  object-fit: cover;
  object-position: center;
}
.welcome-screen-art-v2 .start-button-art-hitbox {
  z-index: 12;
  top: 55.3%;
  left: 57.7%;
  width: 21.2%;
  height: 8.6%;
  min-height: 0;
  padding: 0;
  display: block;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 28px;
  outline: none;
  color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: 0;
  cursor: pointer;
}
.welcome-screen-art-v2 .start-button-art-hitbox:hover,
.welcome-screen-art-v2 .start-button-art-hitbox:active {
  transform: translate(-50%, -50%);
  filter: none;
  background: rgba(255, 245, 210, .08);
  box-shadow: 0 0 0 3px rgba(255, 236, 174, .35), 0 0 24px rgba(255, 224, 145, .28);
}
.welcome-screen-art-v2 .start-button-art-hitbox:focus-visible {
  outline: 3px dashed #fff2c6;
  outline-offset: 4px;
}
/* Keep the artwork's composition intact on narrow screens; preserve the same clickable artwork region. */
@media (max-width: 700px) {
  .welcome-screen-art-v2 .welcome-art {
    object-fit: contain;
    background: #17265e;
  }
  .welcome-screen-art-v2 .start-button-art-hitbox {
    top: 55.3%;
    left: 57.7%;
    width: 21.2%;
    height: 8.6%;
  }
}


/* FINAL PLANET: quiet ending view; the adventure HUD stays untouched until the star gate. */
.world-stage.is-final-scene .adventure-header,
.world-stage.is-final-scene .dialogue-panel,
.world-stage.is-final-scene .adventure-footer { display: none !important; }
.world-stage.is-final-scene .game-frame { margin-top: 0; }
.world-stage.is-final-scene #game-container { background: #080d26; }

.victory-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
#rest-button { padding:11px 24px; border:2px solid #9b815e; color:#fff9ed; background:linear-gradient(180deg,#b89a70,#8c7355); font:800 14px "Microsoft YaHei",sans-serif; cursor:pointer; }
#rest-button:disabled { opacity:.65; cursor:wait; }


/* FINAL PLANET VIEWPORT FIX — dedicate the whole stage to a centered 16:9 canvas. */
.world-stage.is-final-scene {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: clamp(10px, 2.2vh, 24px) clamp(10px, 2vw, 28px) !important;
}
.world-stage.is-final-scene > .game-frame {
  grid-column: 1 !important; grid-row: 1 !important;
  width: min(100%, 1280px, calc((100dvh - 36px) * 16 / 9)) !important;
  height: auto !important; aspect-ratio: 16 / 9 !important;
  max-height: calc(100dvh - 36px) !important;
  min-height: 0 !important; margin: 0 !important;
}
.world-stage.is-final-scene #game-container,
.world-stage.is-final-scene #phaser-game { width: 100% !important; height: 100% !important; min-height: 0 !important; }
.world-stage.is-final-scene #game-container canvas {
  display: block !important; width: 100% !important; height: 100% !important;
  max-width: 100% !important; max-height: 100% !important;
}


/* WELCOME HIT AREA: invisible interaction only; the artwork owns all button decoration. */
.welcome-screen-art-v2 .start-button-art-hitbox,
.welcome-screen-art-v2 .start-button-art-hitbox:hover,
.welcome-screen-art-v2 .start-button-art-hitbox:active {
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.welcome-screen-art-v2 .start-button-art-hitbox:focus-visible {
  outline: 2px dashed rgba(255, 242, 198, .95) !important;
  outline-offset: 5px !important;
}

/* FINAL PLANET: true edge-to-edge viewport, no decorative game frame. */
html, body { min-height: 100%; }
body.final-planet-active { overflow: hidden !important; }
.world-stage.is-final-scene {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: #080d26 !important;
}
.world-stage.is-final-scene > .game-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.world-stage.is-final-scene > .game-frame::before,
.world-stage.is-final-scene .frame-corner,
.world-stage.is-final-scene .frame-vine {
  display: none !important;
  content: none !important;
}
.world-stage.is-final-scene #game-container,
.world-stage.is-final-scene #phaser-game {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: #080d26 !important;
}
.world-stage.is-final-scene #game-container canvas {
  display: block !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}


/* VERSION MERGE: welcome artwork is the visible button; this element is only its hit area. */
.welcome-screen-art-v2 .start-button-art-hitbox,
.welcome-screen-art-v2 .start-button-art-hitbox:hover,
.welcome-screen-art-v2 .start-button-art-hitbox:active {
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.welcome-screen-art-v2 .start-button-art-hitbox:focus-visible {
  outline: 2px dashed rgba(255, 242, 198, .95) !important;
  outline-offset: 5px !important;
}

/* Second-act sound prompt: one compact row combines music playback and E-to-skip guidance. */
.duck-intro-sound-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.duck-intro-music-button {
  min-height: 30px;
  padding: 5px 13px;
  border: 1px solid #d8b76d;
  border-radius: 999px;
  color: #fff8e8;
  background: linear-gradient(180deg, #d9b96f, #b58a45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(77,53,28,.2);
  font: 700 11px/1.2 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}
.duck-intro-music-button.is-playing {
  color: #fff;
  background: linear-gradient(180deg, #8a9cbd, #61749c);
  border-color: #d7e0f2;
}
.duck-intro-skip-hint {
  color: #7c7391;
  font: 700 11px/1.2 "Microsoft YaHei", sans-serif;
  white-space: nowrap;
}
.sound-reminder {
  margin: 12px 0 0 !important;
  color: #9a825b;
  font: 700 12px/1.5 "Microsoft YaHei", sans-serif;
  letter-spacing: .02em;
}
#rest-button {
  border: 2px solid #f0d18a !important;
  color: #fffdf4 !important;
  background: linear-gradient(180deg, #e7c779 0%, #c99a4d 52%, #ad7e3c 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.48), 0 3px 0 #8f672f, 0 5px 14px rgba(100,70,27,.2) !important;
  text-shadow: 0 1px 1px rgba(100,70,27,.28);
}
#rest-button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
#rest-button:active { transform: translateY(1px); }

/* Restore the already-approved edge-to-edge final scene on this newest archive. */
html, body { min-height: 100%; }
body.final-planet-active { overflow: hidden !important; }
.world-stage.is-final-scene {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: #080d26 !important;
}
.world-stage.is-final-scene > .game-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.world-stage.is-final-scene > .game-frame::before,
.world-stage.is-final-scene .frame-corner,
.world-stage.is-final-scene .frame-vine {
  display: none !important;
  content: none !important;
}
.world-stage.is-final-scene #game-container,
.world-stage.is-final-scene #phaser-game {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: #080d26 !important;
}
.world-stage.is-final-scene #game-container canvas {
  display: block !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* 2026-11-15 typography safety: keep the second-act dialogue in a stable
   vertical flow so long lines wrap inside the dialogue card. */
.dialogue-panel .duck-dialog {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: auto;
  max-height: calc(100% - 8px);
  min-height: 62px;
  overflow: visible;
}
.dialogue-panel .dialog-speaker {
  position: relative;
  inset: auto;
  align-self: flex-start;
  flex: 0 0 auto;
  margin: -2px 0 0 10px;
}
.dialogue-panel .dialog-copy {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  line-height: 1.55;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: normal;
}
@media (max-width: 620px) {
  .dialogue-panel .duck-dialog { gap: 2px; padding: 7px 16px; }
  .dialogue-panel .dialog-copy { font-size: 11px; line-height: 1.4; }
}