:root {
  color-scheme: light;
  --ink: #4d3e2f;
  --muted: #8a7a66;
  --panel: #fffdf7;
  --line: #eadfcf;
  --sea: #bfeff2;
  --sea-deep: #6bc8d1;
  --island: #cde98e;
  --island-edge: #91ca70;
  --volcano: #f2734f;
  --forest: #75c96a;
  --lookout: #a887e8;
  --lake: #68b7ec;
  --sun: #fbc04d;
  --soft: #fff2d9;
  --danger: #d95a54;
  --calm: #3e8e86;
  --coral: #f2734f;
  --cream: #fff7ee;
  --warm-shadow: rgba(126, 87, 39, 0.14);
  font-family:
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC",
    Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(251, 192, 77, 0.18), transparent 24%),
    radial-gradient(circle at 90% 12%, rgba(107, 200, 209, 0.2), transparent 28%),
    linear-gradient(180deg, #fff9ef 0%, #f2eadf 100%);
}

button {
  font: inherit;
  cursor: pointer;
}

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

.app-shell {
  position: relative;
  width: min(1500px, calc(100% - 48px));
  min-height: 0;
  margin: 24px auto;
  padding: 0;
  overflow: hidden;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(150, 120, 80, 0.16);
}

.topbar {
  position: absolute;
  left: 38px;
  right: 34px;
  top: 30px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.2vw, 18px);
  padding: 0;
}

.eyebrow,
.panel-kicker {
  margin-bottom: 5px;
  color: #1e6f6b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

h1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 0;
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0;
}

.title-cn {
  color: var(--calm);
  font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  text-shadow: 0 2px 0 #fff;
}

.title-en {
  color: var(--coral);
  font-family: "Baloo 2", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 34px;
  font-weight: 800;
  text-shadow: 0 2px 0 #fff;
}

h2 {
  margin-bottom: 0;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0;
}

.subtitle {
  display: none;
  max-width: 720px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.score-card,
.ghost-button,
.primary-button,
.round-pill {
  border-radius: 999px;
  border: 2px solid var(--line);
  background: rgba(255, 253, 247, 0.9);
}

.score-card {
  min-width: 112px;
  min-height: 54px;
  padding: 7px 18px;
  display: grid;
  align-content: center;
  justify-items: center;
  box-shadow: 0 4px 14px rgba(240, 140, 100, 0.18);
}

.score-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.score-card strong {
  color: var(--coral);
  font-size: 28px;
  line-height: 1;
}

.ghost-button,
.primary-button {
  min-height: 44px;
  padding: 0 18px;
  font-weight: 1000;
}

.ghost-button {
  min-height: 46px;
  color: #9a8369;
  background: rgba(251, 239, 226, 0.9);
}

.primary-button {
  color: #fff;
  border-color: #e45f3f;
  background: linear-gradient(180deg, #ff8e63, var(--coral));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    0 14px 24px rgba(242, 115, 79, 0.28);
}

.primary-button:disabled {
  cursor: not-allowed;
  color: #fff7ec;
  border-color: #d3c6b5;
  background: linear-gradient(180deg, #d9c8b6, #bda890);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 8px 16px rgba(120, 140, 150, 0.16);
  opacity: 0.86;
}

.knowledge-fab {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 6px 10px 6px 7px;
  color: var(--calm);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 248, 0.9)),
    #fffdf7;
  box-shadow: 0 4px 12px rgba(120, 140, 150, 0.16);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.knowledge-fab:hover,
.knowledge-fab:focus-visible {
  border-color: rgba(37, 130, 126, 0.42);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(24, 49, 60, 0.2);
}

.knowledge-fab-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #fbc04d, #f08e45);
  font-weight: 1000;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.26);
}

.knowledge-fab-text,
.knowledge-fab strong {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.knowledge-fab strong {
  min-width: 44px;
  border-radius: 999px;
  padding: 5px 8px;
  color: #1e6f6b;
  background: rgba(37, 130, 126, 0.1);
}

.wide {
  width: 100%;
}

.layout {
  position: relative;
  display: block;
  min-height: clamp(780px, calc(100dvh - 48px), 980px);
}

.panel {
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(120, 140, 150, 0.2);
  padding: 18px 20px;
}

.guide-panel,
.action-panel {
  position: absolute;
  z-index: 20;
  display: grid;
  align-content: start;
  gap: 14px;
  max-height: calc(100% - 190px);
  overflow: auto;
  overscroll-behavior: contain;
}

.guide-panel {
  left: 40px;
  top: 130px;
  width: 300px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.action-panel {
  right: 34px;
  top: 272px;
  bottom: 118px;
  z-index: 32;
  width: 340px;
  max-height: none;
  border: 2px solid rgba(241, 231, 215, 0.96);
  background: #fffdf7;
  background-clip: padding-box;
  box-shadow: 0 16px 34px rgba(120, 140, 150, 0.22);
}

.guide-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  border-radius: 24px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(120, 140, 150, 0.2);
}

.guide-next {
  width: fit-content;
  margin-top: 10px;
  border-radius: 999px;
  padding: 5px 11px;
  color: #2f7d75;
  background: #e8f6f3;
  font-size: 12px;
  font-weight: 900;
}

.guide-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 50% 30%, #ffeaa2 0 22%, transparent 23%),
    linear-gradient(180deg, #4fb6b0, var(--calm));
  font-weight: 1000;
  box-shadow: 0 10px 20px rgba(37, 130, 126, 0.22);
}

.guide-card p,
.event-card p,
.function-card p,
.empty-note,
.log-item p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.event-card,
.function-card {
  border: 2px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
}

.event-card {
  min-height: 170px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
  box-shadow: 0 8px 20px rgba(120, 140, 150, 0.12);
}

.event-card h2 {
  font-size: 22px;
}

.event-card.is-active {
  border-color: rgba(62, 142, 134, 0.3);
  background:
    radial-gradient(circle at 88% 14%, rgba(107, 200, 209, 0.16), transparent 26%),
    linear-gradient(180deg, #ffffff, #f2fbf9);
}

.event-card.is-lit {
  border-color: rgba(251, 192, 77, 0.88);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 232, 117, 0.55), transparent 30%),
    linear-gradient(135deg, #fff2a8 0%, #fff9df 52%, #fffdf7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 5px rgba(251, 192, 77, 0.16),
    0 18px 30px rgba(251, 192, 77, 0.24);
}

.event-card.is-special {
  border-color: rgba(246, 184, 76, 0.52);
  background:
    radial-gradient(circle at 90% 16%, rgba(246, 184, 76, 0.28), transparent 28%),
    linear-gradient(180deg, #fff9e6, #fff);
}

.event-emotions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.small-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.mini-section {
  border-top: 2px solid rgba(234, 223, 207, 0.72);
  padding-top: 14px;
}

.balloon-panel {
  position: absolute;
  right: 34px;
  top: 120px;
  z-index: 24;
  width: 260px;
  border: 0;
  border-radius: 18px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 16px rgba(120, 140, 150, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-heading .panel-kicker {
  margin-bottom: 0;
}

.section-heading span,
.round-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  color: #1e6f6b;
  background: rgba(37, 130, 126, 0.1);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.balloon-dock {
  min-height: 62px;
  border: 2px dashed rgba(62, 142, 134, 0.26);
  border-radius: 20px;
  background: rgba(191, 239, 242, 0.25);
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
}

.balloon-token {
  width: 54px;
  height: 66px;
  border-radius: 50% 50% 46% 46%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #ef7aa4, #c44172);
  box-shadow: inset -8px -12px 0 rgba(90, 12, 56, 0.13), 0 10px 18px rgba(24, 49, 60, 0.12);
  font-size: 12px;
  font-weight: 1000;
  transform-origin: center bottom;
}

.balloon-token::after {
  content: "";
  width: 10px;
  height: 9px;
  background: #c44172;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateY(35px);
}

.balloon-token.size-2 {
  transform: scale(1.18);
}

.balloon-token.size-3 {
  transform: scale(1.36);
  animation: wobble 900ms infinite;
}

.island-stage {
  position: relative;
  height: clamp(780px, calc(100dvh - 48px), 980px);
  min-height: 0;
  isolation: isolate;
  border: 0;
  border-radius: 34px;
  overflow: hidden;
  background: #fceedd;
  box-shadow: none;
}

.storybook-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.turn-steps {
  position: absolute;
  left: 370px;
  top: 126px;
  z-index: 22;
  display: inline-flex;
  gap: 8px;
  border-radius: 999px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 20px rgba(120, 140, 150, 0.14);
}

.turn-steps span {
  min-width: 76px;
  border-radius: 999px;
  padding: 8px 12px;
  color: #7e6e5a;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.turn-steps span.is-active {
  color: #fff;
  background: linear-gradient(180deg, #ff996c, #f2734f);
  box-shadow: 0 8px 14px rgba(242, 115, 79, 0.26);
  transform: translateY(-1px);
}

.turn-steps span.is-done {
  color: #2f7d75;
  background: #e8f6f3;
}

.is-guide-target {
  outline: 4px solid rgba(255, 210, 92, 0.56);
  outline-offset: 5px;
}

.action-panel.is-guide-target,
.event-card.is-guide-target,
.stage-choice-panel.is-guide-target,
.stage-special-banner.is-guide-target {
  box-shadow:
    0 0 0 7px rgba(255, 210, 92, 0.24),
    0 18px 36px rgba(120, 140, 150, 0.22);
}

.stage-cta.is-guide-target {
  outline: 0;
}

.stage-cta.is-guide-target .primary-button {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    0 0 0 7px rgba(255, 210, 92, 0.28),
    0 18px 34px rgba(242, 115, 79, 0.32);
}

.special-notice-overlay.is-guide-target,
.knowledge-unlock-overlay.is-guide-target {
  outline: 0;
}

.special-notice-overlay.is-guide-target .special-notice-card,
.knowledge-unlock-overlay.is-guide-target .knowledge-unlock-card {
  box-shadow:
    0 0 0 8px rgba(255, 253, 247, 0.66),
    0 0 0 15px rgba(255, 210, 92, 0.22),
    0 28px 70px rgba(77, 62, 47, 0.24);
}

@media (prefers-reduced-motion: no-preference) {
  .action-panel.is-guide-target,
  .event-card.is-guide-target,
  .stage-choice-panel.is-guide-target,
  .stage-special-banner.is-guide-target,
  .stage-cta.is-guide-target .primary-button {
    animation: guidePulse 1.8s ease-in-out infinite;
  }
}

.island-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 26px;
  pointer-events: none;
}

.island-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: none;
  opacity: 1;
  pointer-events: none;
}

.stage-special-banner[hidden] {
  display: none;
}

.stage-special-banner {
  position: absolute;
  top: clamp(18px, 2vw, 30px);
  left: 50%;
  width: min(720px, calc(100% - 44px));
  transform: translateX(-50%);
  z-index: 14;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  border: 2px solid rgba(251, 192, 77, 0.5);
  border-radius: 24px;
  padding: 12px 16px;
  color: #4d3c08;
  background:
    radial-gradient(circle at 94% 22%, rgba(251, 192, 77, 0.26), transparent 24%),
    rgba(255, 249, 226, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 16px 32px rgba(24, 49, 60, 0.13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stage-special-banner strong,
.stage-special-banner span {
  display: block;
}

.stage-special-banner strong {
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 1.22;
}

.stage-special-banner span {
  color: #73633d;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

.stage-special-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #f6b84c, #df8744);
  font-weight: 1000;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.26);
}

.stage-choice-panel {
  position: absolute;
  left: 50%;
  top: 166px;
  z-index: 31;
  isolation: isolate;
  width: clamp(420px, calc(100% - 820px), 600px);
  border: 4px solid rgba(255, 232, 117, 0.72);
  border-radius: 34px;
  padding: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 224, 132, 0.32), transparent 26%),
    radial-gradient(circle at 90% 16%, rgba(107, 200, 209, 0.22), transparent 28%),
    #fffdf7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 0 8px rgba(255, 253, 247, 0.56),
    0 22px 46px rgba(24, 49, 60, 0.2);
  transform: translateX(-50%);
}

.stage-choice-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border: 2px dashed rgba(62, 142, 134, 0.2);
  border-radius: 26px;
  pointer-events: none;
}

.stage-choice-panel::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -32px;
  z-index: 0;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 35%, rgba(255, 255, 255, 0.78) 0 14%, transparent 15%),
    linear-gradient(180deg, rgba(255, 209, 92, 0.62), rgba(255, 153, 108, 0.32));
  opacity: 0.72;
  pointer-events: none;
}

.stage-choice-panel > * {
  position: relative;
  z-index: 1;
}

.stage-event-notice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 146px;
  margin-bottom: 18px;
  border: 4px solid rgba(251, 192, 77, 0.76);
  border-radius: 26px;
  padding: 18px 22px;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 232, 117, 0.82), transparent 26%),
    radial-gradient(circle at 8% 10%, rgba(255, 153, 108, 0.22), transparent 24%),
    linear-gradient(135deg, #ffe779 0%, #fff2aa 48%, #fffdf7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 8px rgba(255, 232, 117, 0.2),
    0 16px 28px rgba(246, 184, 76, 0.28);
}

.stage-event-notice .panel-kicker {
  margin-bottom: 6px;
  color: #1e6f6b;
  font-size: 15px;
}

.stage-event-notice h2 {
  margin-bottom: 8px;
  color: #4d3522;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.14;
}

.stage-event-notice p {
  margin: 0;
  color: #6f5136;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}

.stage-event-notice .event-emotions {
  justify-content: end;
  min-width: 148px;
}

.stage-event-notice .small-chip {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 13px;
}

.stage-choice-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.stage-choice-heading .panel-kicker {
  margin-bottom: 3px;
}

.stage-choice-heading h2 {
  font-size: 22px;
  line-height: 1.22;
}

.stage-choice-heading span {
  min-width: 64px;
  border-radius: 999px;
  padding: 7px 10px;
  color: #2f7d75;
  background: #e8f6f3;
  text-align: center;
  font-size: 13px;
  font-weight: 1000;
}

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

.stage-choice-grid .mystery-card {
  min-height: 112px;
  align-content: start;
  padding: 16px 16px 18px;
  border-color: rgba(62, 142, 134, 0.24);
  box-shadow: 0 8px 18px rgba(120, 140, 150, 0.12);
}

.stage-choice-grid .mystery-card:hover,
.stage-choice-grid .mystery-card:focus-visible {
  border-color: rgba(242, 115, 79, 0.76);
  box-shadow:
    0 0 0 5px rgba(255, 210, 92, 0.24),
    0 18px 30px rgba(120, 140, 150, 0.22);
}

.choice-number {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #ff996c, #f2734f);
  font-size: 14px;
  font-weight: 1000;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.26);
}

.stage-growth-panel {
  position: absolute;
  left: 40px;
  bottom: 42px;
  z-index: 24;
  width: auto;
  border: 0;
  border-radius: 20px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 20px rgba(120, 140, 150, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.guardian-panel {
  position: absolute;
  left: 50%;
  bottom: 136px;
  z-index: 34;
  width: min(520px, calc(100% - 760px));
  min-width: 420px;
  transform: translateX(-50%);
}

.guardian-card {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
  border: 3px solid rgba(251, 192, 77, 0.76);
  border-radius: 28px;
  padding: 16px;
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 232, 117, 0.76), transparent 26%),
    linear-gradient(135deg, #fff0a6 0%, #fff8d3 52%, #fffdf7 100%);
  box-shadow:
    0 0 0 8px rgba(255, 232, 117, 0.18),
    0 22px 40px rgba(24, 49, 60, 0.2);
}

.guardian-mark {
  width: 74px;
  height: 70px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #ff996c, #f2734f);
  font-size: 22px;
  font-weight: 1000;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.26),
    0 12px 20px rgba(242, 115, 79, 0.24);
}

.guardian-card h2 {
  margin-bottom: 4px;
  color: #4d3522;
  font-size: 24px;
  line-height: 1.18;
}

.guardian-card p:not(.panel-kicker) {
  margin: 0;
  color: #6f5136;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
}

.guardian-button {
  grid-column: 1 / -1;
  min-height: 48px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, #58b5ad, #25827e);
  font-size: 18px;
  font-weight: 1000;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    0 12px 20px rgba(37, 130, 126, 0.24);
}

.guardian-button:hover,
.guardian-button:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    0 16px 26px rgba(37, 130, 126, 0.3);
}

.guardian-dock {
  position: absolute;
  right: clamp(340px, 27vw, 430px);
  top: 130px;
  z-index: 26;
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 176px;
  border-radius: 20px;
  border: 2px solid rgba(255, 232, 117, 0.58);
  padding: 9px 12px 10px;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 232, 117, 0.45), transparent 30%),
    rgba(255, 253, 247, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 24px rgba(120, 140, 150, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.guardian-dock[hidden] {
  display: none;
}

.guardian-dock .panel-kicker {
  margin: 0;
}

.guardian-dock > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.guardian-badge {
  min-width: 42px;
  width: 42px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #f6b84c, #f08e45);
  font-size: 13px;
  font-weight: 1000;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    0 8px 14px rgba(246, 184, 76, 0.24);
}

.guardian-badge.didi {
  background: linear-gradient(180deg, #7ec8f2, #3f93d8);
}

.guardian-badge.pupu {
  background: linear-gradient(180deg, #b89be0, #8c61d5);
}

.guardian-badge.yangyang {
  background: linear-gradient(180deg, #ffd15c, #f49b33);
}

.stage-growth-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.stage-growth-heading .panel-kicker {
  margin-bottom: 0;
}

.stage-growth-heading span {
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  color: #1e6f6b;
  background: rgba(37, 130, 126, 0.1);
  font-size: 12px;
  font-weight: 900;
}

.stage-cta {
  position: absolute;
  left: 50%;
  bottom: 42px;
  z-index: 25;
  width: min(360px, calc(100% - 80px));
  transform: translateX(-50%);
}

.stage-cta .primary-button {
  min-height: 64px;
  border-radius: 22px;
  font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 2px;
}

.sea {
  display: none;
}

.sea::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 44%;
  height: 4px;
  border-radius: 999px;
  background: rgba(83, 171, 188, 0.18);
}

.sea::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background:
    linear-gradient(180deg, rgba(255, 247, 221, 0), rgba(255, 247, 221, 0.22)),
    repeating-linear-gradient(170deg, rgba(255, 255, 255, 0.16) 0 18px, transparent 18px 52px);
}

.wave {
  position: absolute;
  width: 260px;
  height: 44px;
  border-radius: 999px;
  border: 5px solid rgba(74, 158, 177, 0.2);
  border-left-color: transparent;
  border-right-color: transparent;
  animation: waveDrift 6s ease-in-out infinite;
}

.wave-one {
  left: 5%;
  top: 12%;
}

.wave-two {
  right: 7%;
  top: 72%;
  animation-delay: 1.2s;
}

.wave-three {
  left: 32%;
  bottom: 7%;
  animation-delay: 2.1s;
}

.island {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.island::before {
  display: none;
}

.island::after {
  display: none;
}

.island.is-shaking {
  animation: islandShake 420ms ease;
}

.zone {
  display: none;
}

.zone strong {
  font-size: 17px;
}

.zone small {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.9;
}

.zone-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(77, 62, 47, 0.78);
  background: rgba(255, 255, 255, 0.88);
  font-weight: 1000;
  box-shadow: inset 0 -5px 0 rgba(24, 49, 60, 0.06);
}

.volcano {
  top: 5%;
  left: 37%;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 245, 214, 0.34) 0 16%, transparent 17%),
    linear-gradient(180deg, #fb9a66, var(--volcano));
  transform: rotate(1deg);
}

.forest {
  left: 9%;
  top: 42%;
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.22) 0 13%, transparent 14%),
    radial-gradient(circle at 74% 70%, rgba(46, 112, 62, 0.18) 0 16%, transparent 17%),
    linear-gradient(180deg, #98db74, var(--forest));
  transform: rotate(-4deg);
}

.lookout {
  right: 8%;
  top: 40%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.24) 0 14%, transparent 15%),
    linear-gradient(180deg, #d0a9ff, var(--lookout));
  transform: rotate(3deg);
}

.lake {
  left: 37%;
  bottom: 4%;
  background:
    radial-gradient(ellipse at 48% 62%, rgba(255, 255, 255, 0.36) 0 20%, transparent 21%),
    linear-gradient(180deg, #9ad3ff, var(--lake));
  transform: rotate(-2deg);
}

.lighthouse {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 63%;
  width: 126px;
  height: 230px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  align-content: end;
  pointer-events: none;
}

.beam {
  position: absolute;
  left: 50%;
  top: -150px;
  width: 420px;
  height: 420px;
  transform: translateX(-50%) scale(0.3);
  border-radius: 50%;
  background:
    conic-gradient(from 8deg, transparent 0 18%, rgba(255, 238, 130, 0.28) 19% 29%, transparent 30% 52%, rgba(255, 238, 130, 0.2) 53% 62%, transparent 63% 100%),
    radial-gradient(circle, rgba(255, 232, 117, 0.54) 0 16%, rgba(255, 232, 117, 0.22) 17% 42%, transparent 62%);
  filter: blur(0.2px);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.beam.is-on {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.light {
  z-index: 2;
  width: 62px;
  height: 46px;
  border-radius: 8px 8px 4px 4px;
  background:
    radial-gradient(circle at 50% 45%, #fff7a8 0 28%, transparent 30%),
    #327f94;
  border: 4px solid #fff;
  box-shadow:
    inset 0 -7px 0 rgba(24, 49, 60, 0.12),
    0 8px 0 rgba(24, 49, 60, 0.1),
    0 0 0 8px rgba(255, 232, 117, 0.12);
}

.tower {
  z-index: 1;
  width: 82px;
  height: 128px;
  background: repeating-linear-gradient(180deg, #fff 0 15px, #f37d65 16px 28px);
  clip-path: polygon(22% 0, 78% 0, 92% 100%, 8% 100%);
  border-radius: 8px 8px 4px 4px;
  filter: drop-shadow(0 12px 10px rgba(24, 49, 60, 0.13));
}

.tower span {
  display: none;
}

.lighthouse strong {
  margin-top: 3px;
  color: #21616d;
  font-size: 13px;
}

.garden {
  position: absolute;
  z-index: 4;
  left: 30%;
  top: 73%;
  width: 214px;
  height: 158px;
  opacity: 0.62;
  transform: scale(0.94) rotate(-3deg);
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

.garden.is-grown {
  opacity: 1;
  transform: scale(1) rotate(-3deg) translateY(-4px);
  filter: drop-shadow(0 14px 16px rgba(87, 155, 79, 0.22));
}

.garden::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 8px;
  top: 12px;
  bottom: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 52% 42%, rgba(255, 239, 192, 0.86), transparent 38%),
    radial-gradient(circle at 52% 58%, rgba(255, 231, 168, 0.45), transparent 62%);
  opacity: 0;
  transform: scale(0.78);
  transition: opacity 220ms ease, transform 220ms ease;
}

.garden.is-grown::before {
  opacity: 1;
  transform: scale(1);
}

.garden-bed {
  position: absolute;
  left: 20px;
  right: 8px;
  bottom: 12px;
  height: 78px;
  border: 0;
  border-radius: 54% 54% 36% 36%;
  background:
    linear-gradient(180deg, rgba(173, 225, 146, 0.95), rgba(132, 199, 111, 0.88)),
    #a6dc92;
  box-shadow:
    inset 0 -12px 0 rgba(91, 148, 74, 0.12),
    0 11px 0 rgba(201, 168, 118, 0.92),
    0 18px 16px rgba(87, 155, 79, 0.14);
}

.garden-bed::before,
.garden-bed::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.garden-bed::before {
  left: 30px;
  bottom: 16px;
  width: 18px;
  height: 8px;
  background: rgba(184, 144, 102, 0.42);
  box-shadow:
    74px 3px 0 rgba(184, 144, 102, 0.36),
    110px -4px 0 rgba(184, 144, 102, 0.32);
}

.garden-bed::after {
  left: 54px;
  right: 18px;
  top: 10px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
}

.flower {
  position: absolute;
  width: 48px;
  height: 76px;
  --petal: #ff9bb0;
  --center: #ffd15c;
  --stem: #5fa24d;
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent 22px, var(--stem) 23px 27px, transparent 28px);
  filter: drop-shadow(0 5px 4px rgba(87, 155, 79, 0.14));
}

.flower::before,
.flower::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.flower::before {
  left: 50%;
  top: 0;
  width: 44px;
  height: 44px;
  background:
    radial-gradient(circle at 50% 14%, var(--petal) 0 8px, transparent 9px),
    radial-gradient(circle at 84% 44%, var(--petal) 0 8px, transparent 9px),
    radial-gradient(circle at 66% 82%, var(--petal) 0 8px, transparent 9px),
    radial-gradient(circle at 34% 82%, var(--petal) 0 8px, transparent 9px),
    radial-gradient(circle at 16% 44%, var(--petal) 0 8px, transparent 9px);
  transform: translateX(-50%);
}

.flower::after {
  left: 50%;
  top: 15px;
  width: 16px;
  height: 16px;
  background: var(--center);
  transform: translateX(-50%);
  box-shadow: inset 0 -3px 0 rgba(126, 87, 39, 0.12);
}

.flower-one {
  left: 74px;
  top: 44px;
  --petal: #ff9bb0;
}

.flower-two {
  left: 110px;
  top: 22px;
  --petal: #ffc23d;
  --center: #f2734f;
  transform: scale(1.18);
}

.flower-three {
  left: 148px;
  top: 48px;
  --petal: #c3a9e0;
  transform: scale(0.92);
}

.garden-sign {
  position: absolute;
  left: 24px;
  bottom: 26px;
  width: 40px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(201, 155, 94, 0.86);
  border-radius: 10px;
  color: #8a5e2e;
  background: #ffe0a8;
  font-size: 19px;
  font-weight: 1000;
  transform: rotate(6deg);
  box-shadow:
    0 26px 0 -17px #b98a5a,
    0 6px 9px rgba(126, 87, 39, 0.12);
}

.bridge {
  position: absolute;
  z-index: 5;
  left: 60%;
  top: 70%;
  width: 238px;
  height: 148px;
  opacity: 0.52;
  transform: rotate(-5deg);
  filter: drop-shadow(0 12px 10px rgba(99, 66, 38, 0.14));
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

.bridge::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 24px;
  height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 224, 138, 0.52), transparent 48%);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 220ms ease, transform 220ms ease;
}

.bridge::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 15px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
}

.bridge-arch {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 28px;
  height: 94px;
  border: 20px solid #b98a5a;
  border-bottom: 0;
  border-radius: 130px 130px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 224, 166, 0.2), rgba(255, 224, 166, 0));
  box-shadow: inset 0 8px 0 rgba(255, 219, 166, 0.18);
}

.bridge-rail {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 62px;
  height: 15px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(117, 73, 38, 0.45) 20px 24px, transparent 24px 32px),
    linear-gradient(180deg, #d8a56a, #b98a5a);
  box-shadow:
    0 22px 0 rgba(185, 138, 90, 0.94),
    inset 0 3px 0 rgba(255, 224, 166, 0.28);
}

.bridge-post {
  position: absolute;
  bottom: 18px;
  width: 17px;
  height: 66px;
  border-radius: 8px;
  background: #b98a5a;
  box-shadow: inset 0 5px 0 rgba(255, 219, 166, 0.22);
}

.bridge-post-left {
  left: 44px;
}

.bridge-post-right {
  right: 44px;
}

.bridge-heart {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 46px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 50% 38%, #ffb59c, transparent 45%),
    linear-gradient(180deg, #ff9a8b, #f2734f);
  font-size: 18px;
  font-weight: 1000;
  transform: translateX(-50%);
  box-shadow: 0 8px 12px rgba(242, 115, 79, 0.24);
}

.bridge.is-built {
  opacity: 1;
  transform: rotate(-5deg) translateY(-6px);
  animation: bridgeBounce 620ms ease;
  filter: drop-shadow(0 16px 12px rgba(99, 66, 38, 0.22));
}

.bridge.is-built::before {
  opacity: 1;
  transform: scale(1);
}

.cage {
  position: absolute;
  z-index: 8;
  left: 21%;
  top: 68%;
  width: 134px;
  height: 154px;
  border: 0;
  border-radius: 0;
  opacity: 0;
  transform: scale(0.82) translateY(10px);
  background: transparent;
  filter: drop-shadow(0 16px 12px rgba(77, 62, 47, 0.18));
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

.cage::before {
  content: "";
  position: absolute;
  left: 23px;
  right: 23px;
  top: 18px;
  height: 104px;
  border: 6px solid #9a8e84;
  border-bottom: 0;
  border-radius: 68px 68px 0 0;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(201, 191, 178, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(237, 230, 220, 0.08));
  box-shadow:
    inset 0 8px 0 rgba(255, 255, 255, 0.2),
    0 2px 0 rgba(95, 84, 75, 0.15);
}

.cage::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 7px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.32), transparent 58%),
    #c9bfb2;
  box-shadow:
    inset 0 -8px 0 rgba(137, 137, 124, 0.2),
    0 7px 0 #9a8e84,
    0 13px 14px rgba(77, 62, 47, 0.16);
}

.cage.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: drop-shadow(0 18px 14px rgba(77, 62, 47, 0.22));
}

.cage span {
  position: absolute;
  top: 36px;
  z-index: 1;
  display: block;
  width: 6px;
  height: 104px;
  border-radius: 999px;
  background: #9a8e84;
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, 0.24),
    0 1px 0 rgba(95, 84, 75, 0.2);
}

.cage span:nth-child(1) {
  left: 43px;
}

.cage span:nth-child(2) {
  left: 64px;
}

.cage span:nth-child(3) {
  left: 85px;
}

.cage span:nth-child(1)::before,
.cage span:nth-child(3)::before {
  content: "";
  position: absolute;
  left: -17px;
  width: 82px;
  height: 18px;
  border-top: 5px solid #9a8e84;
  border-radius: 50%;
  opacity: 0.74;
}

.cage span:nth-child(1)::before {
  top: 33px;
}

.cage span:nth-child(3)::before {
  left: -59px;
  top: 64px;
}

.cage span:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9a8e84;
  transform: translateX(-50%);
  box-shadow:
    0 -9px 0 -3px #9a8e84,
    0 4px 0 rgba(95, 84, 75, 0.12);
}

.cage span:nth-child(3)::after {
  content: "嘘";
  position: absolute;
  right: -40px;
  top: 18px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #8f8379;
  background: #ede6dc;
  font-size: 14px;
  font-weight: 1000;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.46),
    0 6px 9px rgba(77, 62, 47, 0.12);
}

.stage-effect-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.action-ripple {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.38);
  animation: ripplePulse 1250ms ease-out forwards;
}

.light-ripple {
  left: 50%;
  top: 47%;
  border-color: rgba(255, 224, 89, 0.82);
  background: radial-gradient(circle, rgba(255, 232, 117, 0.2), transparent 64%);
}

.bridge-ripple {
  left: 68%;
  top: 72%;
  border-color: rgba(185, 120, 74, 0.52);
  background: radial-gradient(circle, rgba(242, 186, 121, 0.18), transparent 66%);
}

.garden-ripple {
  left: 39%;
  top: 76%;
  border-color: rgba(106, 191, 90, 0.58);
  background: radial-gradient(circle, rgba(153, 220, 118, 0.22), transparent 64%);
}

.cage-ripple {
  left: 25.5%;
  top: 76.5%;
  width: 126px;
  height: 126px;
  border-width: 3px;
  border-color: rgba(217, 90, 84, 0.36);
  background: radial-gradient(circle, rgba(217, 90, 84, 0.08), transparent 64%);
  animation: cageRipplePulse 820ms ease-out forwards;
}

.stage-feedback {
  position: absolute;
  max-width: 230px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(255, 253, 247, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 16px 28px var(--warm-shadow);
  animation: feedbackEnter 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-feedback strong,
.stage-feedback span {
  display: block;
}

.stage-feedback strong {
  margin-bottom: 3px;
  font-size: 14px;
  line-height: 1.2;
}

.stage-feedback span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.stage-feedback.is-best {
  border-color: rgba(246, 184, 76, 0.56);
  background: rgba(255, 249, 226, 0.94);
}

.stage-feedback.is-positive {
  border-color: rgba(37, 130, 126, 0.34);
  background: rgba(239, 251, 245, 0.94);
}

.stage-feedback.is-negative {
  border-color: rgba(217, 90, 84, 0.4);
  background: rgba(255, 241, 238, 0.94);
}

.light-feedback {
  left: 50%;
  top: 31%;
  transform: translateX(-50%);
}

.bridge-feedback {
  left: 57%;
  top: 64%;
}

.garden-feedback {
  left: 24%;
  top: 66%;
}

.cage-feedback {
  left: 20%;
  top: 59%;
}

.effect-particles {
  position: absolute;
  inset: 0;
}

.effect-particles span {
  position: absolute;
  left: var(--origin-left, 50%);
  top: var(--origin-top, 50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--particle-color, #ffe477);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: particleFloat 900ms ease-out forwards;
  animation-delay: calc(var(--i) * 28ms);
}

.effect-particles span:nth-child(1) { --x: -74px; --y: -46px; }
.effect-particles span:nth-child(2) { --x: -38px; --y: -78px; }
.effect-particles span:nth-child(3) { --x: 8px; --y: -82px; }
.effect-particles span:nth-child(4) { --x: 50px; --y: -58px; }
.effect-particles span:nth-child(5) { --x: 74px; --y: -10px; }
.effect-particles span:nth-child(6) { --x: 50px; --y: 42px; }
.effect-particles span:nth-child(7) { --x: 6px; --y: 72px; }
.effect-particles span:nth-child(8) { --x: -46px; --y: 54px; }
.effect-particles span:nth-child(9) { --x: -78px; --y: 12px; }
.effect-particles span:nth-child(10) { --x: 18px; --y: 18px; }

.light-particles {
  --origin-left: 50%;
  --origin-top: 46%;
  --particle-color: #ffe477;
}

.bridge-particles {
  --origin-left: 68%;
  --origin-top: 72%;
  --particle-color: #cf9362;
}

.garden-particles {
  --origin-left: 39%;
  --origin-top: 76%;
  --particle-color: #7ad66d;
}

.cage-particles {
  --origin-left: 25.5%;
  --origin-top: 76.5%;
  --particle-color: #d95a54;
}

.island[data-effect="light"] .light {
  animation: lanternPulse 900ms ease;
}

.island[data-effect="bridge"] .bridge {
  animation: bridgeBounce 620ms ease;
}

.island[data-effect="garden"] .garden .flower {
  animation: flowerPop 620ms ease both;
}

.island[data-effect="cage"] .cage {
  animation: cageThud 520ms ease;
}

.emotion-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.friend {
  position: absolute;
  width: 86px;
  min-height: 102px;
  display: grid;
  justify-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  transition:
    left 280ms ease,
    top 280ms ease,
    transform 280ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}

.friend.is-selected {
  filter: drop-shadow(0 0 14px rgba(255, 231, 93, 0.9));
}

.friend.is-evolved .friend-body {
  box-shadow:
    inset -9px -10px 0 rgba(24, 49, 60, 0.1),
    0 14px 22px rgba(24, 49, 60, 0.14),
    0 0 0 8px rgba(255, 232, 117, 0.24);
}

.friend.is-evolved .friend-name {
  color: #73520b;
  background: #fff5c8;
}

.friend.is-caged {
  z-index: 4;
  width: 82px;
  min-height: 82px;
  opacity: 0.88;
  filter: saturate(0.9);
  animation: none;
}

.friend.is-caged .friend-body {
  width: 72px;
  height: 82px;
  opacity: 0.72;
  transform: scale(0.78);
  filter: drop-shadow(0 6px 8px rgba(77, 62, 47, 0.12));
}

.friend.is-caged .friend-name,
.friend.is-caged .friend-mood,
.friend.is-caged .friend-growth {
  display: none;
}

.friend.is-exploded {
  transform: translate(-50%, -50%) scale(1.42);
  animation: friendPulse 900ms infinite;
}

.friend-body {
  width: 74px;
  height: 74px;
  position: relative;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255, 255, 255, 0.78);
  color: transparent;
  font-size: 0;
  font-weight: 1000;
  overflow: visible;
  box-shadow:
    inset -8px -9px 0 rgba(77, 62, 47, 0.09),
    0 15px 24px rgba(126, 87, 39, 0.16);
}

.friend-name {
  min-width: 62px;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  text-align: center;
  font-size: 12px;
  font-weight: 1000;
}

.friend-mood {
  max-width: 112px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #fff;
  background: rgba(24, 49, 60, 0.54);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.friend-growth {
  width: 58px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(24, 49, 60, 0.06);
}

.friend-growth span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7ad66d, #f6b84c);
  transition: width 220ms ease;
}

.huohuo .friend-body {
  border-radius: 62% 38% 58% 42% / 70% 44% 56% 30%;
  background:
    radial-gradient(circle at 38% 42%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 62% 42%, #fff 0 4px, transparent 5px),
    radial-gradient(ellipse at 50% 64%, rgba(104, 42, 21, 0.34) 0 7px, transparent 8px),
    radial-gradient(circle at 50% 27%, #ffd27b 0 15px, transparent 16px),
    linear-gradient(180deg, #ffb05c, #ee5b43);
  transform: rotate(-5deg);
}

.didi .friend-body {
  border-radius: 58% 42% 55% 45% / 48% 46% 68% 64%;
  background:
    radial-gradient(circle at 38% 43%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 62% 43%, #fff 0 4px, transparent 5px),
    radial-gradient(ellipse at 50% 64%, rgba(21, 80, 130, 0.32) 0 7px, transparent 8px),
    radial-gradient(circle at 34% 23%, rgba(255, 255, 255, 0.56) 0 8px, transparent 9px),
    linear-gradient(180deg, #9bd8ff, #3f93d8);
}

.pupu .friend-body {
  border-radius: 45% 55% 48% 52% / 42% 44% 58% 56%;
  background:
    radial-gradient(circle at 38% 44%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 62% 44%, #fff 0 4px, transparent 5px),
    radial-gradient(ellipse at 50% 66%, rgba(74, 44, 118, 0.32) 0 7px, transparent 8px),
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.28) 0 11px, transparent 12px),
    linear-gradient(180deg, #d2a5ff, #8c61d5);
  box-shadow:
    -10px 12px 0 -4px #b88bea,
    10px 12px 0 -4px #7f58ce,
    inset -8px -9px 0 rgba(77, 62, 47, 0.09),
    0 15px 24px rgba(126, 87, 39, 0.16);
}

.yangyang .friend-body {
  background:
    radial-gradient(circle at 38% 43%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 62% 43%, #fff 0 4px, transparent 5px),
    radial-gradient(ellipse at 50% 62%, rgba(135, 78, 10, 0.28) 0 8px, transparent 9px),
    linear-gradient(180deg, #ffd65a, #f49b33);
}

.yangyang .friend-body::before {
  content: "";
  position: absolute;
  inset: -13px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 208, 82, 0) 0 10deg,
    rgba(255, 208, 82, 0.95) 11deg 22deg,
    rgba(255, 208, 82, 0) 23deg 45deg
  );
}

.friend {
  width: 118px;
  min-height: 168px;
  gap: 0;
  animation: buddyBob 4.8s ease-in-out infinite;
}

.huohuo {
  animation-duration: 4.4s;
}

.didi {
  animation-duration: 5.2s;
}

.pupu {
  animation-duration: 4.9s;
}

.yangyang {
  animation-duration: 4.6s;
}

.friend-body,
.huohuo .friend-body,
.didi .friend-body,
.pupu .friend-body,
.yangyang .friend-body {
  width: 118px;
  height: 142px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: initial;
  overflow: visible;
  transform: none;
}

.yangyang .friend-body::before {
  display: none;
}

.friend-body svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.friend-name {
  min-width: auto;
  margin-top: -4px;
  border-radius: 999px;
  padding: 4px 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  font-weight: 400;
}

.friend-mood {
  margin-top: 4px;
  color: #7e6e5a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.friend-growth {
  display: none;
}

.emotion-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.emotion-tab {
  min-height: 38px;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--ink);
  background: #fff;
  font-weight: 900;
}

.emotion-tab.is-active {
  color: #fff;
  border-color: var(--calm);
  background: linear-gradient(180deg, #58b5ad, var(--calm));
}

.emotion-tab.is-done {
  color: #2a6651;
  background: #dcf3df;
}

.emotion-tab.is-warning {
  color: #8e2d2c;
  background: #ffe2df;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.action-button {
  min-height: 82px;
  border: 2px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.action-button:hover,
.action-button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--calm);
  box-shadow: 0 14px 24px var(--warm-shadow);
  outline: none;
}

.mystery-card {
  position: relative;
  min-height: 86px;
  overflow: hidden;
  grid-template-columns: 1fr;
  padding: 16px 18px;
  border: 2px solid rgba(62, 142, 134, 0.18);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.78), transparent 18%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(238, 250, 243, 0.92));
}

.mystery-card::after {
  content: "?";
  position: absolute;
  right: 12px;
  bottom: -16px;
  color: rgba(62, 142, 134, 0.11);
  font-size: 86px;
  font-weight: 1000;
  line-height: 1;
}

.mystery-action-text {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
}

.mystery-card span {
  position: relative;
  z-index: 1;
}

.revealed-card {
  cursor: default;
  border-width: 2px;
  background: #fff;
}

.revealed-card:hover {
  transform: none;
  box-shadow: none;
}

.revealed-card.is-best {
  border-color: #f0b44c;
  background: linear-gradient(180deg, #fff9e6, #fff);
}

.revealed-card.is-good {
  border-color: rgba(37, 130, 126, 0.38);
  background: linear-gradient(180deg, #effbf5, #fff);
}

.revealed-card.is-bad {
  border-color: rgba(217, 90, 84, 0.5);
  background: linear-gradient(180deg, #fff1ee, #fff);
}

.special-result {
  min-height: 120px;
  border: 2px solid rgba(251, 192, 77, 0.48);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 22%, rgba(246, 184, 76, 0.2), transparent 24%),
    #fff;
  padding: 14px;
  display: grid;
  gap: 8px;
}

.special-result strong {
  font-size: 19px;
}

.special-result p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.special-badge {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  color: #725007;
  background: rgba(246, 184, 76, 0.24);
  font-size: 12px;
  font-weight: 1000;
}

.action-button[disabled] {
  cursor: not-allowed;
  opacity: 0.56;
}

.action-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 1000;
}

.action-copy strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.action-copy span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.light-action .action-icon {
  color: #68410a;
  background: #ffe477;
}

.bridge-action .action-icon {
  background: #b9784a;
}

.garden-action .action-icon {
  background: #6abf5a;
}

.cage-action .action-icon {
  background: #777b83;
}

.next-action .action-icon {
  background: var(--calm);
}

.function-card {
  min-height: 132px;
  border-color: rgba(62, 142, 134, 0.22);
  background:
    radial-gradient(circle at 92% 18%, rgba(107, 200, 209, 0.14), transparent 28%),
    linear-gradient(180deg, #ffffff, #effbf5);
}

.function-card h2 {
  margin-bottom: 6px;
}

.special-notice-overlay[hidden],
.knowledge-unlock-overlay[hidden],
.knowledge-drawer[hidden] {
  display: none;
}

.special-notice-overlay,
.knowledge-unlock-overlay,
.knowledge-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 232, 117, 0.34), transparent 26%),
    radial-gradient(circle at 84% 12%, rgba(107, 200, 209, 0.28), transparent 24%),
    radial-gradient(circle at 72% 82%, rgba(255, 153, 108, 0.24), transparent 28%),
    rgba(24, 49, 60, 0.24);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
}

.special-notice-overlay,
.knowledge-unlock-overlay {
  place-items: center;
  padding: 20px;
}

.special-notice-card,
.knowledge-unlock-card,
.knowledge-drawer-card {
  position: relative;
  overflow: hidden;
  border: 4px solid rgba(255, 232, 117, 0.78);
  border-radius: 34px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 232, 117, 0.48), transparent 24%),
    radial-gradient(circle at 8% 12%, rgba(107, 200, 209, 0.18), transparent 28%),
    linear-gradient(180deg, #fffef8 0%, #f3fcf7 100%);
  box-shadow:
    0 0 0 8px rgba(255, 253, 247, 0.62),
    0 28px 70px rgba(77, 62, 47, 0.24);
}

.special-notice-card,
.knowledge-unlock-card {
  width: min(620px, 100%);
  display: grid;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  animation: overlayCardEnter 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.special-notice-card::before,
.knowledge-unlock-card::before,
.knowledge-drawer-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 0;
  border: 2px dashed rgba(62, 142, 134, 0.22);
  border-radius: 24px;
  pointer-events: none;
}

.special-notice-card::after,
.knowledge-unlock-card::after,
.knowledge-drawer-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -40px;
  z-index: 0;
  width: 160px;
  height: 160px;
  border-radius: 48% 52% 50% 50%;
  background:
    radial-gradient(circle at 42% 42%, rgba(255, 255, 255, 0.72) 0 16%, transparent 17%),
    linear-gradient(180deg, rgba(255, 209, 92, 0.7), rgba(255, 153, 108, 0.34));
  opacity: 0.72;
  pointer-events: none;
}

.special-notice-card > *,
.knowledge-unlock-card > *,
.knowledge-drawer-card > * {
  position: relative;
  z-index: 1;
}

.knowledge-unlock-card {
  border-color: rgba(251, 192, 77, 0.9);
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 232, 117, 0.76), transparent 25%),
    radial-gradient(circle at 10% 8%, rgba(255, 153, 108, 0.2), transparent 26%),
    linear-gradient(180deg, #fff0a6 0%, #fff8cf 48%, #fffdf2 100%);
}

.special-notice-card h2,
.knowledge-unlock-card h2 {
  color: #4d3522;
  font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.16;
}

.special-notice-card .panel-kicker,
.knowledge-unlock-card .panel-kicker,
.knowledge-drawer-card .panel-kicker {
  width: fit-content;
  margin-bottom: 0;
  border-radius: 999px;
  padding: 6px 12px;
  color: #1e6f6b;
  background: rgba(232, 246, 243, 0.92);
  box-shadow: inset 0 -3px 0 rgba(37, 130, 126, 0.08);
}

.special-notice-body {
  min-height: 132px;
  border: 3px solid rgba(251, 192, 77, 0.62);
  border-radius: 28px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 92% 16%, rgba(246, 184, 76, 0.34), transparent 25%),
    radial-gradient(circle at 10% 100%, rgba(107, 200, 209, 0.16), transparent 30%),
    linear-gradient(135deg, #fff9e6, #ffffff 58%, #eefbf5);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.78),
    0 12px 20px rgba(126, 87, 39, 0.09);
}

.special-notice-body strong,
.special-notice-body span {
  display: block;
}

.special-notice-body strong {
  margin-bottom: 8px;
  color: #4d3522;
  font-size: 22px;
}

.special-notice-body span {
  color: #7c6d5f;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
}

.special-notice-card .primary-button,
.knowledge-unlock-card .primary-button {
  min-height: 52px;
  border-width: 3px;
  border-color: #e45f3f;
  font-size: 17px;
  letter-spacing: 0;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.3),
    0 12px 0 rgba(208, 84, 55, 0.2),
    0 18px 28px rgba(242, 115, 79, 0.24);
}

.special-notice-card .primary-button:hover,
.special-notice-card .primary-button:focus-visible,
.knowledge-unlock-card .primary-button:hover,
.knowledge-unlock-card .primary-button:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.3),
    0 13px 0 rgba(208, 84, 55, 0.2),
    0 22px 32px rgba(242, 115, 79, 0.28);
}

.knowledge-unlock-list {
  display: grid;
  gap: 10px;
}

.knowledge-pop {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  border: 3px solid rgba(242, 142, 69, 0.64);
  border-radius: 28px;
  padding: 18px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 232, 117, 0.78), transparent 26%),
    radial-gradient(circle at 12% 8%, rgba(255, 153, 108, 0.24), transparent 24%),
    linear-gradient(135deg, #ffe875 0%, #fff3a8 48%, #fffdf2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 24px rgba(246, 184, 76, 0.24);
}

.knowledge-pop::after {
  content: "卡";
  position: absolute;
  right: 14px;
  bottom: -12px;
  color: rgba(242, 115, 79, 0.14);
  font-size: 96px;
  font-weight: 1000;
  line-height: 1;
}

.knowledge-pop > span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  color: #fff;
  background: linear-gradient(180deg, #f6b84c, #f08e45);
  font-size: 13px;
  font-weight: 1000;
}

.knowledge-pop strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 12px 0 6px;
  font-size: clamp(20px, 3vw, 26px);
}

.knowledge-pop p {
  position: relative;
  z-index: 1;
  max-width: 35ch;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
}

.knowledge-pop small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 10px;
  color: #1e6f6b;
  font-size: 12px;
  font-weight: 900;
}

.knowledge-drawer {
  align-items: start;
  justify-items: end;
  padding: clamp(14px, 1.7vw, 26px);
}

.knowledge-drawer-card {
  width: min(560px, 100%);
  height: min(760px, calc(100dvh - 24px));
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  padding: clamp(20px, 2vw, 26px);
  animation: drawerEnter 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.drawer-heading h2 {
  color: #4d3522;
  font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.12;
}

.drawer-copy {
  max-width: 45ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.overlay-close {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 3px solid rgba(37, 130, 126, 0.22);
  border-radius: 50%;
  color: #fffdf7;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), transparent 30%),
    linear-gradient(180deg, #58b5ad, #25827e);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 10px 18px rgba(37, 130, 126, 0.2);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease;
}

.overlay-close:hover,
.overlay-close:focus-visible {
  border-color: rgba(255, 232, 117, 0.88);
  outline: none;
  transform: rotate(5deg) scale(1.04);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 14px 24px rgba(37, 130, 126, 0.26);
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
}

.knowledge-card {
  min-height: 116px;
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 11px;
  background: #fff;
  display: grid;
  align-content: start;
  gap: 6px;
}

.knowledge-card strong {
  width: fit-content;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  color: #1e6f6b;
  background: rgba(37, 130, 126, 0.1);
}

.knowledge-card span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.25;
}

.knowledge-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.knowledge-card.is-unlocked {
  border-color: rgba(242, 142, 69, 0.68);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 232, 117, 0.72), transparent 28%),
    radial-gradient(circle at 10% 8%, rgba(107, 200, 209, 0.2), transparent 24%),
    linear-gradient(135deg, #ffe875 0%, #fff3a8 48%, #fffdf2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 20px rgba(246, 184, 76, 0.2);
}

.knowledge-card.is-unlocked strong {
  color: #fff;
  background: linear-gradient(180deg, #f6b84c, #f08e45);
}

.knowledge-card.is-unlocked p {
  color: #6f5136;
  font-weight: 800;
}

.knowledge-card.is-locked {
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(244, 248, 248, 0.82)),
    #f4f8f8;
  opacity: 0.72;
}

@keyframes overlayCardEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes drawerEnter {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.growth-list {
  display: grid;
  gap: 8px;
}

.stage-growth-list {
  display: flex;
  grid-template-columns: none;
  gap: 10px;
}

.growth-item {
  min-width: 56px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.growth-item > div:first-child {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.growth-item strong {
  font-family: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.growth-item span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.growth-track {
  order: -1;
  width: 42px;
  height: 7px;
  border-radius: 999px;
  background: rgba(37, 130, 126, 0.1);
  overflow: hidden;
}

.growth-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7ad66d, #f6b84c);
  transition: width 220ms ease;
}

.growth-item.is-evolved {
  background: transparent;
}

.log-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.log-item {
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 10px;
}

.log-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.empty-note {
  width: 100%;
  align-self: center;
}

@keyframes waveDrift {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(16px);
  }
}

@keyframes buddyBob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -9px;
  }
}

@keyframes ripplePulse {
  0% {
    opacity: 0.84;
    transform: translate(-50%, -50%) scale(0.38);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.24);
  }
}

@keyframes cageRipplePulse {
  0% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0.56);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

@keyframes feedbackEnter {
  0% {
    opacity: 0;
    translate: 0 10px;
    scale: 0.96;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1);
  }
}

@keyframes lanternPulse {
  0%,
  100% {
    box-shadow:
      inset 0 -7px 0 rgba(24, 49, 60, 0.12),
      0 8px 0 rgba(24, 49, 60, 0.1),
      0 0 0 8px rgba(255, 232, 117, 0.12);
  }
  50% {
    box-shadow:
      inset 0 -7px 0 rgba(24, 49, 60, 0.12),
      0 8px 0 rgba(24, 49, 60, 0.1),
      0 0 0 18px rgba(255, 232, 117, 0.34);
  }
}

@keyframes bridgeBounce {
  0% {
    transform: rotate(-7deg) translateY(10px) scale(0.96);
  }
  60% {
    transform: rotate(-7deg) translateY(-8px) scale(1.03);
  }
  100% {
    transform: rotate(-7deg) translateY(-5px) scale(1);
  }
}

@keyframes flowerPop {
  0% {
    opacity: 0.2;
    transform: scale(0.2);
  }
  72% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
  }
}

@keyframes cageThud {
  0% {
    transform: translateY(-12px) scale(0.86);
  }
  52% {
    transform: translateY(4px) scale(1.04);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes wobble {
  0%,
  100% {
    rotate: -2deg;
  }
  50% {
    rotate: 3deg;
  }
}

@keyframes friendPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(217, 90, 84, 0));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(217, 90, 84, 0.72));
  }
}

@keyframes islandShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(7px);
  }
  75% {
    transform: translateX(-4px);
  }
}

@keyframes guidePulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 210, 92, 0));
    outline-color: rgba(255, 210, 92, 0.42);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 210, 92, 0.32));
    outline-color: rgba(255, 210, 92, 0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave,
  .balloon-token.size-3,
  .friend.is-exploded,
  .island.is-shaking,
  .bridge.is-built,
  .island[data-effect] .light,
  .island[data-effect] .bridge,
  .island[data-effect] .garden .flower,
  .island[data-effect] .cage,
  .action-ripple,
  .effect-particles span,
  .stage-feedback,
  .is-guide-target,
  .stage-choice-panel.is-guide-target,
  .stage-cta.is-guide-target .primary-button,
  .special-notice-overlay.is-guide-target .special-notice-card,
  .knowledge-unlock-overlay.is-guide-target .knowledge-unlock-card,
  .special-notice-card,
  .knowledge-unlock-card,
  .knowledge-drawer-card {
    animation: none;
  }

  .action-ripple {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 1200px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 0;
  }

  .guide-panel,
  .action-panel {
    position: static;
    width: auto;
    bottom: auto;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    max-height: none;
    overflow: visible;
  }

  .island-stage {
    height: clamp(640px, 72vw, 820px);
  }

  .stage-choice-panel {
    top: 104px;
    width: min(620px, calc(100% - 48px));
    min-width: 0;
  }

  .guide-card,
  .event-card,
  .action-panel .section-heading,
  .emotion-tabs,
  .action-grid,
  .function-card,
  .action-panel .mini-section {
    grid-column: span 1;
  }

  .balloon-panel {
    top: 18px;
    right: 22px;
    width: min(310px, 34vw);
  }

  .stage-growth-panel {
    width: min(420px, 44vw);
  }

  .guardian-panel {
    width: min(520px, calc(100% - 48px));
    min-width: 0;
    bottom: 116px;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 12px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .knowledge-fab {
    min-height: 44px;
    padding-right: 8px;
  }

  .knowledge-fab-text {
    display: none;
  }

  .knowledge-fab-icon {
    width: 32px;
    height: 32px;
  }

  .knowledge-fab strong {
    min-width: auto;
  }

  .knowledge-unlock-overlay {
    padding: 12px;
  }

  .special-notice-overlay {
    padding: 12px;
  }

  .special-notice-card {
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .knowledge-unlock-card {
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .knowledge-drawer {
    align-items: end;
    justify-items: stretch;
    padding: 10px;
  }

  .knowledge-drawer-card {
    width: 100%;
    height: min(78dvh, 640px);
  }

  .guide-panel,
  .action-panel {
    grid-template-columns: 1fr;
  }

  .knowledge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage-special-banner {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .stage-special-icon {
    width: 32px;
    height: 32px;
  }

  .stage-growth-panel {
    left: 10px;
    right: 10px;
    bottom: 84px;
    width: auto;
  }

  .balloon-panel {
    left: 10px;
    right: 10px;
    top: 78px;
    width: auto;
  }

  .stage-cta {
    bottom: 14px;
    width: min(320px, calc(100% - 28px));
  }

  .stage-growth-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .island-stage {
    height: clamp(720px, 164vw, 820px);
  }

  .island {
    left: 18px;
    right: 18px;
    bottom: 178px;
    height: 430px;
  }

  .zone {
    width: 31%;
    min-width: clamp(84px, 29vw, 112px);
    min-height: clamp(88px, 27vw, 106px);
  }

  .zone strong {
    font-size: 14px;
  }

  .volcano {
    left: 31%;
  }

  .forest {
    left: 4%;
    top: 36%;
  }

  .lookout {
    right: 4%;
    top: 35%;
  }

  .lake {
    left: 31%;
  }

  .friend {
    width: clamp(62px, 19vw, 74px);
  }

  .friend-body {
    width: clamp(54px, 16vw, 62px);
    height: clamp(54px, 16vw, 62px);
    font-size: clamp(21px, 6vw, 28px);
  }

  .bridge {
    left: 49%;
    width: clamp(96px, 31vw, 116px);
  }
}