:root {
  font-family: system-ui, -apple-system, sans-serif;
  color: #43282a;
  background: #fbf5ef;
}

* { box-sizing: border-box; }
body { margin: 0; }
.site-shell { max-width: 850px; margin: auto; padding: 22px; }
.site-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid #801e2c;
  border-radius: 16px;
  background: #9c2839;
  color: #fff4df;
}
.site-title { min-width: 0; }
.site-title h1 { margin: 0; font-size: 28px; }
.site-title p { margin: 4px 0 0; color: #ffe4d6; }
.logo { flex: none; font-size: 38px; background: #771c2a; color: #ffdf9f; border: 1px solid #cf7781; padding: 9px 13px; border-radius: 18px; }
.account-strip { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.profile-label { color: #ffe4d6; font-size: 13px; max-width: 130px; overflow-wrap: anywhere; }
p { color: #73565a; }
a { color: #a32636; }

#tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
button, select, input, textarea { font: inherit; }
button {
  background: #fff;
  border: 1px solid #dcc5bf;
  border-radius: 12px;
  padding: 11px 15px;
  cursor: pointer;
  color: #43282a;
}
button.active, .primary { background: #a32636; color: white; border-color: #a32636; }
button:not(:disabled):hover { filter: brightness(.96); }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid #a32636; outline-offset: 3px; }
select, input:not([type=checkbox]), textarea {
  padding: 10px;
  border: 1px solid #dcc5bf;
  border-radius: 10px;
  max-width: 100%;
  color: inherit;
  background: white;
}
input[type=checkbox] { accent-color: #a32636; }
label { display: block; margin: 10px 0; }
.small-button { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
.link-button { background: none; border: 0; padding: 0; color: #a32636; text-decoration: underline; }
.success { background: #e9f9ee; border-color: #c3dfcc; color: #235b3b; }
.danger { border-color: #e6bcc1; color: #942b37; }

.panel {
  min-width: 0;
  background: white;
  border: 1px solid #ead8d0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 5px 22px #6f312510;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel h2 { margin: 0 0 9px; }
.panel h3 { margin: 16px 0 8px; }
.eyebrow-dark { color: #73565a; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.lead { line-height: 1.5; }
.muted, .hint, .quiet { color: #73565a; }
.hint { font-size: 13px; }
.label { display: block; margin-bottom: 6px; font-size: 13px; }
.controls, .settings { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.settings .field { flex: 1; min-width: 140px; margin: 0; }
.settings .narrow { max-width: 180px; }
.settings select, .settings input { width: 100%; }
.card, .flashcard { background: #fbebe5; text-align: center; border-radius: 18px; padding: 38px 12px; margin: 15px 0; }
.hanzi, .character { font-size: 54px; margin: 10px; line-height: 1.2; overflow-wrap: anywhere; }
.character.obscured { font-size: 26px; color: #73565a; }
.romanization { margin-top: 9px; }
.meaning { font-size: 18px; font-weight: 600; }
.card-buddy {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 14px auto;
  padding: 3px 8px;
  color: #90202d;
  font-size: 12px;
}
.card-buddy .creature-art { width: 28px; height: 28px; margin: 0; }
.card-question { color: #73565a; margin-bottom: 12px; }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: #73565a; }
.pill, .tag { background: #f4e4dc; border-radius: 12px; padding: 10px 14px; display: inline-block; margin: 4px; }
.tag { padding: 4px 8px; margin: 0; font-size: 12px; }
.tag.gold { background: #fff3db; color: #805921; }
.answer { background: #e9f9ee; padding: 14px; border-radius: 12px; margin: 12px 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.study-feedback { margin-top: 10px; min-height: 22px; font-size: 13px; }
.progress-track { height: 7px; background: #f4e4dc; border-radius: 12px; overflow: hidden; margin: 12px 0; }
.progress-track > div { height: 100%; background: #a32636; transition: width .25s; }
.row-split { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row-split > * { margin: 0; }
.round-end { text-align: center; padding: 20px 0; }
.round-star { color: #b57716; font-size: 52px; }
.notice { background: #fbebe5; border: 1px solid #ead8d0; padding: 12px; border-radius: 12px; font-size: 13px; margin: 0 0 15px; }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; color: #73565a; margin-top: 24px; }
.footer-controls { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.toast {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  border-radius: 12px;
  background: #43282a;
  color: #fff;
  box-shadow: 0 5px 22px #6f312540;
  padding: 12px 15px;
  font-size: 14px;
  max-width: 90vw;
  width: max-content;
}

@media (max-width: 600px) {
  .site-shell { padding: 14px; }
  .site-header { gap: 10px; flex-wrap: wrap; }
  .site-title h1 { font-size: 24px; }
  .logo { font-size: 30px; padding: 8px; border-radius: 14px; }
  .profile-label { display: none; }
  .panel { padding: 16px; }
  .card, .flashcard { padding: 25px 12px; }
  .hanzi, .character { font-size: 46px; }
}

@media (max-width: 370px) {
  .site-title h1 { font-size: 21px; }
  .site-title p { font-size: 13px; }
  .account-strip { margin-left: 0; }
}

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

[hidden] { display: none !important; }

.section-head { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 0; }
.small-note, .status-line { font-size: 13px; color: #73565a; line-height: 1.5; }
.status-line { min-height: 22px; }
.error { color: #9c2837; }
.empty-state, .app-loading { text-align: center; padding: 24px 12px; }
.empty-icon { display: block; margin-bottom: 12px; font-size: 54px; }
.inline-actions, .account-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.stat-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid #ecdcd5; padding: 10px 0; font-size: 14px; }
.stat-line:last-child { border-bottom: 0; }
.stat-line strong { font-variant-numeric: tabular-nums; }
.chapter-progress { margin-top: 12px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.metric { min-width: 0; background: #fbebe5; border-radius: 12px; padding: 12px 8px; text-align: center; overflow-wrap: anywhere; }
.metric strong { display: block; font-size: 24px; }
.metric span { font-size: 12px; color: #73565a; }
.read-aloud { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

.table-wrap { max-width: 100%; overflow-x: auto; }
.history-table, .record-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.history-table th, .history-table td, .record-table th, .record-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid #ecdcd5;
  vertical-align: top;
}
.history-table th, .record-table th { color: #73565a; font-size: 12px; }
.history-table button { white-space: nowrap; }
.test-question { padding: 14px 0; border-bottom: 1px solid #ecdcd5; }
.test-word { display: block; font-size: 24px; font-weight: 650; }
.test-grade { font-size: 24px; font-weight: bold; margin: 16px 0; }
.check-pair { display: flex; gap: 18px; flex-wrap: wrap; }
.check-pair label, .checkline { display: flex; gap: 8px; align-items: flex-start; }
.check-pair input, .checkline input { flex: none; width: 18px; height: 18px; }
.answer-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
.answer-buttons button { text-align: left; }
.answer-buttons button.selected { background: #f4e4dc; border-color: #a32636; box-shadow: inset 0 0 0 1px #a32636; }

.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.collection-card { min-width: 0; padding: 14px; border: 1px solid #ead8d0; border-radius: 12px; background: #fbebe5; overflow-wrap: anywhere; }
.collection-card.is-buddy { border-color: #a32636; }
.collection-card h4 { margin: 8px 0; }
.collection-emoji { display: block; text-align: center; font-size: 52px; }
.creature-art { display: block; width: 100%; max-width: 160px; height: 130px; object-fit: contain; margin: 0 auto; }
.inventory-chip { display: inline-block; margin: 3px; padding: 5px 8px; border-radius: 8px; background: #f4e4dc; max-width: 100%; overflow-wrap: anywhere; font-size: 12px; }
.collection-buddy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 14px 0;
  border: 1px solid #ead8d0;
  border-radius: 14px;
  background: #fbebe5;
}
.collection-buddy .creature-art { flex: none; width: 72px; height: 72px; margin: 0; }
.collection-buddy h3, .collection-buddy p { margin: 4px 0; }
.album-empty {
  margin-top: 12px;
  padding: 16px;
  border: 1px dashed #c9aecf;
  border-radius: 14px;
  background: #fbf7fc;
  text-align: center;
}
.album-empty .creature-art { width: 90px; height: 90px; color: #82608c; }
.art-dragon { color: #9c2839; }
.art-achievement { color: #996326; }
.leaderboard h3 { margin-top: 22px; }
.leaderboard #join-leaderboard { margin-top: 12px; }
.leaderboard-rank { color: #90202d; font-weight: 700; font-variant-numeric: tabular-nums; }
.leaderboard th:last-child, .leaderboard td:last-child { text-align: right; }
.word-list { max-height: 610px; overflow: auto; }
.word-row {
  display: grid;
  grid-template-columns: minmax(85px, 1fr) minmax(90px, 1fr) minmax(115px, 1.3fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  border-bottom: 1px solid #ecdcd5;
}
.word-row strong { font-size: 21px; overflow-wrap: anywhere; }
.word-row .jp, .word-row .translation { color: #73565a; font-size: 13px; overflow-wrap: anywhere; }
.word-row button { padding: 8px 10px; }

dialog {
  width: min(540px, calc(100% - 28px));
  max-height: 90vh;
  border: 1px solid #ead8d0;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 5px 22px #6f312550;
  color: #43282a;
}
dialog::backdrop { background: #381b2370; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 15px 20px; border-bottom: 1px solid #ead8d0; }
.dialog-head h2 { font-size: 20px; margin: 0; }
.icon-button { flex: none; padding: 4px 10px; font-size: 20px; line-height: 1.2; }
.dialog-body { padding: 17px 20px 20px; max-height: 73vh; overflow: auto; line-height: 1.5; }
.dialog-body p:first-child { margin-top: 0; }
.dialog-body input:not([type=checkbox]), .dialog-body select { width: 100%; }
.dialog-body input[type=checkbox] { margin-top: 2px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.auth-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:4px 0 14px; }
.auth-choices button { min-height:48px; font-weight:800; white-space:normal; }
@media(max-width:440px) { .auth-choices { grid-template-columns:1fr; } }
.dialog-body h3, .privacy-copy h3 { margin-top: 21px; }
.privacy-copy ul { padding-left: 22px; }
.operator-mode #tabs { display: none; }
.operator-controls { max-width: 700px; }
.operator-mode textarea { display: block; width: 100%; min-height: 80px; }
.donotshare { color: #942b37; background: #fff1f2; border-radius: 12px; padding: 12px; }
details > summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.loading-dot {
  display: inline-block;
  border: 2px solid #ead8d0;
  border-top-color: #a32636;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  margin-right: 8px;
  vertical-align: middle;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .collection-grid, .answer-buttons { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .word-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; }
  .word-row .translation { grid-column: 1 / 3; }
  .word-row button { grid-area: 1 / 3 / 3 / 4; }
  .history-table th, .history-table td { padding: 8px 5px; }
}

@media print {
  .account-strip, #tabs, footer, .actions, .settings, button, dialog, #toast, .inline-actions { display: none !important; }
  .site-shell { max-width: none; padding: 0; }
  .panel { border: 0; padding: 0; box-shadow: none; }
  .word-list { max-height: none; overflow: visible; }
  .test-question, .word-row { break-inside: avoid; }
  .view-test { font-size: 12px; }
}

:root {
  --ink: #262347;
  --muted: #565675;
  --cream: #ede8ff;
  --rim: #f2cb62;
  --lilac: #d7d4e9;
  --lilac-shadow: #d8d6eb;
  --purple: #514be1;
  --purple-edge: #393186;
  --purple-light: #f1edfb;
  --maroon: #a1354d;
  --control-radius: 15px;
  --navigation-height: 74px;
  --site-shell-width: 1028px;
  color: var(--ink);
  background: #de2c20;
  font-family: ui-rounded, "Avenir Next", "Nunito", system-ui, sans-serif;
  line-height: 1.48;
}

body {
  min-height: 100vh;
  background-color: #e43122;
  background-image: url("/reference-art/wallpaper-red.webp");
  background-repeat: repeat;
  background-size: 104px auto;
  background-attachment: fixed;
}

body::before,
body::after {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: max(11px, calc((100% - var(--site-shell-width)) / 2));
  background: url("/reference-art/wallpaper-edge.webp") left top / 100% auto repeat-y;
  pointer-events: none;
  content: "";
}

body::before { left: 0; }
body::after { right: 0; transform: scaleX(-1); }

@media (min-width: 1100px) {
  body {
    --side-gutter: calc((100% - var(--site-shell-width)) / 2);
    --side-art-width: min(180px, var(--side-gutter));
  }
  body::before, body::after {
    width: var(--side-art-width);
    background: url("/reference-art/wallpaper-lantern-border.webp") center top / cover no-repeat;
  }
  body::before { left: calc(var(--side-gutter) - var(--side-art-width)); }
  body::after { right: calc(var(--side-gutter) - var(--side-art-width)); }
}

.site-shell {
  position: relative;
  z-index: 1;
  width: min(var(--site-shell-width), calc(100% - 34px));
  max-width: none;
  min-height: calc(100vh - 44px);
  margin: 20px auto;
  padding: 18px 30px 28px;
  border: 3px solid var(--rim);
  border-radius: 32px;
  background:
    radial-gradient(ellipse at 8% 0%, #d4f2ff 0%, transparent 42%),
    radial-gradient(ellipse at 100% 50%, #f8d9ed 0%, transparent 48%),
    linear-gradient(165deg, #e1eaff 0%, #ece0fa 52%, #dff1f4 100%);
  box-shadow: 0 8px 0 #87262b77;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px dashed #baa9d8;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 76px;
  padding-left: 10px;
  border-radius: 18px;
  background: linear-gradient(105deg, #ffffffb8, #f0eaff80 55%, transparent);
}

.header-creature { display: grid; place-items: center; flex: none; width: 65px; height: 70px; text-decoration: none; }
.header-creature .reference-mystery-egg { width: 72%; }
#tabs .reference-mystery-egg { width: 22px; flex: none; font-size: .8rem; }

.site-brand-mark { display: block; width: 52px; height: 52px; flex: none; }
.reference-trophy { width: 1.16em; height: 1.16em; object-fit: contain; vertical-align: -.16em; }

.site-title h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 4.5vw, 1.6rem);
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.site-title p { margin: 5px 0 0; color: var(--muted); font-size: .94rem; font-weight: 670; }

p, footer, .profile-label, .small-note, .status-line, .metric span,
.muted, .hint, .quiet, .card-question, .card-meta, .word-row .jp, .word-row .translation {
  color: var(--muted);
}

h2, h3, h4, button, summary { color: var(--ink); }
a, .link-button { color: #5044af; }
button, select, input, textarea { font: inherit; }
button, .study-tools-menu button {
  min-height: 40px;
  border: 1.6px solid var(--lilac);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 3px 0 var(--lilac-shadow);
  font-weight: 750;
  line-height: 1.25;
}

button.active, .primary, #tabs button[aria-current="page"] {
  border-color: var(--purple-edge);
  background: var(--purple);
  color: white;
  box-shadow: 0 3px 0 var(--purple-edge);
}

button.link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5044af;
  box-shadow: none;
  text-decoration: underline;
}

button.success { border-color: #b8d6c9; background: #e6f6ee; color: #155b48; box-shadow: 0 3px 0 #bbdace; }
button.danger, .error { color: #9a2543; }
:focus-visible { outline: 3px solid #d9a412; outline-offset: 2px; }

select, input:not([type="checkbox"]), textarea {
  min-height: 42px;
  border: 1.6px solid var(--lilac);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--ink);
}

input[type="checkbox"] { accent-color: var(--purple); }
.field .label { font-weight: 750; }

.header-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.header-tools > button, #study-tools > summary {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 9px 13px;
  border: 1.5px solid #c9c1d8;
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--ink);
  box-shadow: none;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.header-tools > button[aria-current="page"], .header-tools > button.active {
  border-color: #a79bc9;
  background: #e9e5f8;
  color: #4f456c;
}

#home-button { display: none; }
#study-tools { position: relative; }
#study-tools summary { list-style: none; }
#study-tools summary::-webkit-details-marker { display: none; }
#study-tools summary span { font-size: .75em; }
.study-tools-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 5;
  min-width: 158px;
  padding: 7px;
  border: 1.5px solid var(--lilac);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 10px #29204b28;
}

.study-tools-menu button { width: 100%; box-shadow: none; }

.account-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 9px;
  padding: 9px 12px;
  border: 1.7px solid #e8d9ad;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 3px 0 #f0e5c3;
}

.account-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-strip button { padding: 9px 13px; white-space: nowrap; }
.creature-demo-link {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid #ddc5a0;
  border-radius: 11px;
  color: #694a29;
  background: #fff6de;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.creature-demo-link:hover { background: #ffebbc; }
.creature-demo-link:focus-visible { outline: 2px solid #7954b8; outline-offset: 2px; }
.account-strip .profile-label { display: inline; max-width: none; font-size: .89rem; font-weight: 500; }
.account-strip .profile-label[data-guest="true"] { display: inline; }

#tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

#tabs button {
  display: flex;
  min-width: 0;
  min-height: 53px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 8px;
  border-width: 1.8px;
  font-size: clamp(.73rem, 2.8vw, .91rem);
  font-weight: 850;
  white-space: nowrap;
}

#tabs svg, #tabs img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

#tabs button:focus-visible { outline-offset: -3px; }

body:has(#leaderboard-button[aria-current="page"], #leaderboard-button.active) .site-shell {
  padding-bottom: 26px;
}

body:has(#leaderboard-button[aria-current="page"], #leaderboard-button.active) #home-button {
  display: inline-flex;
}

body:has(#leaderboard-button[aria-current="page"], #leaderboard-button.active) :is(#tabs, .account-strip, #study-tools),
.operator-mode :is(#tabs, .account-strip, .header-tools) {
  display: none;
}

.panel {
  padding: clamp(15px, 3.5vw, 30px);
  border: 1.6px solid var(--lilac);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 0 var(--lilac-shadow);
}

.panel h2 { font-size: clamp(1.45rem, 3.5vw, 2.25rem); font-weight: 850; line-height: 1.2; letter-spacing: -.026em; }
.panel h3 { font-weight: 800; }
.panel + .panel { margin-top: 14px; }
.lead { line-height: 1.55; }
.eyebrow-dark { color: #766489; }
.notice { border-color: var(--lilac); background: var(--purple-light); }
.card, .flashcard { border: 1.5px solid #ded8f1; background: #f8f4ff; }
.card-buddy { color: var(--ink); }
.pill, .tag, .metric, .inventory-chip { background: var(--purple-light); }
.tag.gold { background: #fff2bf; color: #725516; }
.answer-buttons button.selected { border-color: var(--purple); background: var(--purple-light); box-shadow: inset 0 0 0 1px var(--purple); }
.progress-track { background: #e8e3f4; }
.progress-track > div { background: var(--maroon); }
.stat-line, .history-table :is(th, td), .record-table :is(th, td), .test-question, .word-row { border-color: var(--lilac); }
.history-table th, .record-table th { color: var(--muted); }
dialog { color: var(--ink); border: 2px solid #c4b8de; background: #fff; box-shadow: 0 6px 0 #ded8f0, 0 12px 26px #221d4b40; }
dialog::backdrop { background: #24224196; }
.dialog-head { border-color: var(--lilac); }
.toast { bottom: 16px; background: var(--ink); }

@media (max-width: 840px) {
  .site-header { flex-wrap: wrap; }
  .header-tools { margin-left: auto; }
}

@media (max-width: 650px) {
  .site-shell {
    width: calc(100% - 22px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 15px 11px calc(var(--navigation-height) + 22px + env(safe-area-inset-bottom, 0px));
    border-width: 0 1.5px;
    border-radius: 0;
    box-shadow: none;
  }

  .site-header { gap: 8px; margin-bottom: 8px; padding-bottom: 8px; }
  .site-brand { gap: 10px; min-height: 52px; padding-left: 0; }
  .site-brand-mark { width: 45px; height: 45px; }
  .site-title p { margin-top: 3px; font-size: .83rem; }
  .header-creature { width: 49px; height: 49px; }
  .header-tools { gap: 5px; }
  .header-tools > button, #study-tools > summary { min-height: 38px; padding: 8px 9px; border-radius: 11px; font-size: .86rem; }
  .account-strip { gap: 7px; margin-bottom: 14px; padding: 8px; border-radius: 17px; }
  .account-actions { gap: 6px; flex-basis: 265px; }
  .account-strip button { min-height: 38px; padding: 8px 9px; font-size: .85rem; }
  .account-strip .profile-label { font-size: .83rem; }
  .account-strip .profile-label[data-guest="true"] { display: none; }
  #tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    gap: 5px;
    margin: 0 auto;
    padding: 7px 6px calc(9px + env(safe-area-inset-bottom, 0px));
    border: 1.5px solid var(--lilac);
    border-radius: 0;
    background: #ede8ff;
    box-shadow: 0 -4px 14px #2a234314;
  }
  #tabs button { min-height: 56px; flex-direction: column; gap: 1px; padding: 4px; border-radius: 12px; }
  .toast { bottom: calc(var(--navigation-height) + 10px); }
  .panel { padding: 15px; border-radius: 17px; }
  .settings { gap: 8px; }
  .settings .field { min-width: min(100%, 132px); }
  dialog { max-height: min(90vh, 90dvh); }
}

@media print {
  :root, body, .site-shell { background: #fff !important; color: #000 !important; }
  body::before, body::after, .site-header, #tabs, .account-strip, #toast { display: none !important; }
  .site-shell { width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .panel { border: 0; padding: 0; box-shadow: none; }
}

.reference-leaderboard {
  padding: clamp(17px, 3.5vw, 34px);
  color: #29244f;
  background: #fff;
  border: 2px solid #d5d4e8;
  border-radius: 27px;
  box-shadow: 0 5px 0 #e3e2f1;
}
.reference-leaderboard-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .6rem 1rem;
}
.reference-leaderboard-heading h2 { margin: 0; font-size: clamp(25px, 4vw, 34px); letter-spacing: -.04em; }
.reference-leaderboard-badge {
  background: #ddf3eb;
  border-radius: 999px;
  padding: .45em .8em;
  color: #18614e;
  font-weight: 800;
  font-size: .94rem;
}
.reference-leaderboard-intro, .reference-leaderboard-note { color: #55566e; line-height: 1.7; }
.reference-leaderboard-intro { margin: 16px 0 22px; }
.reference-rank-list {
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
  display: grid;
  gap: 12px;
}
.reference-rank-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2.3vw, 16px);
  padding: clamp(10px, 2.3vw, 18px);
  border: 2px solid #e2ddf0;
  border-radius: clamp(15px, 3vw, 24px);
  background: #f7f5fb;
  min-height: 72px;
}
.reference-rank-row:nth-child(even) { background: #effaf6; border-color: #d2eae1; }
.reference-rank-row.reference-rank-own { background: #fff4d9; border-color: #e3bf69; }
.reference-rank-you { border-radius: 99px; padding: 2px 8px; background: #f6dea1; color: #5d440a; font-size: .8em; }
.reference-own-score { color: #634cb3; }
.reference-rank-badge {
  display: grid;
  place-items: center;
  min-width: clamp(30px, 4.8vw, 42px);
  min-height: clamp(40px, 6vw, 54px);
  color: #6b5000;
  background: #ffdc64;
  border-radius: 14px;
  box-shadow: 0 3px 0 #e5bf53;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 900;
}
.reference-rank-name { display: flex; align-items: center; gap: clamp(5px, 2vw, 12px); }
.reference-rank-identity { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; overflow-wrap: anywhere; font-weight: 800; }
.reference-rank-portrait { width: clamp(58px, 13vw, 88px); flex: none; border-radius: 18%; }
.reference-rank-outfit { color: #675b7d; font-size: .74em; font-weight: 600; line-height: 1.3; }
.reference-rank-score { color: #634cb3; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reference-rank-score strong { display: block; font-size: clamp(21px, 4vw, 34px); line-height: 1.12; }
.reference-rank-score small { font-size: .85em; }
.reference-leaderboard details { margin-top: 17px; }
.reference-leaderboard details summary { cursor: pointer; font-weight: 750; }
.reference-leaderboard-membership { margin: 12px 0; }

#dialog.reference-story {
  max-width: 740px;
  width: calc(100% - 18px);
  max-height: calc(100dvh - 20px);
  background: #f2edff;
  color: #282344;
  border: 2px solid #9f8acb;
  border-radius: clamp(20px, 4vw, 32px);
  padding: 0;
  overflow-y: auto;
}
#dialog.reference-story::backdrop { background: #273a5a90; }
.reference-story .dialog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  background: #282344;
  color: #ffe5a4;
  padding: 10px clamp(11px, 3vw, 18px);
}
.reference-story .dialog-head h2 {
  grid-area: 1 / 1;
  color: inherit;
  font-size: clamp(19px, 4.5vw, 28px);
  line-height: 1.25;
}
.reference-story .dialog-head :is(.icon-button, .reference-story-music) {
  grid-row: 1 / 3;
  align-self: center;
  min-width: 44px;
  min-height: 44px;
  color: #282344;
  background: #fff;
  border: 2px solid #c9bedf;
  border-radius: 16px;
  box-shadow: 0 3px #ddd5eb;
}
.reference-story .dialog-head .icon-button { grid-column: 3; }
.reference-story .dialog-head .reference-story-music {
  grid-column: 2;
  padding: 6px 9px;
  font-size: clamp(.78rem, 3vw, .98rem);
  white-space: nowrap;
}
#dialog.reference-story .dialog-body { max-height: none; overflow: visible; padding: 0; }
.reference-story-subtitle {
  grid-area: 2 / 1;
  margin: 0;
  color: #f6f2ff;
  font-weight: 650;
  font-size: clamp(.88rem, 3.6vw, 1.22rem);
}
.reference-story-status, .reference-story-number { text-align: center; color: #655880; padding: 9px 12px; margin: 0; }
.reference-story-status { background: #eae3fa; font-size: clamp(.89rem, 3.4vw, 1.12rem); }
.reference-story-scene { display: block; width: 100%; height: auto; aspect-ratio: 900 / 469; object-fit: cover; }
.trail-authentic .reference-story-scene { animation: trail-orchard-pan 14s ease-in-out infinite alternate; }
@keyframes trail-orchard-pan {
  from { transform: scale(1.02); }
  to { transform: scale(1.07) translateX(-.7%); }
}
.reference-trail-scene {
  --trail-sky-top: #859ed3;
  --trail-sky-bottom: #ffe2ab;
  --trail-far: #a8a0c3;
  --trail-hill: #7b9eaa;
  --trail-field-top: #b4bd85;
  --trail-field-bottom: #7b9a69;
  --trail-water: #70bac2;
  --trail-roof: #ad5765;
  --trail-wood: #745546;
  --trail-path: #e5ca9b;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 900 / 469;
  background: var(--trail-sky-top);
}
.trail-forest { --trail-sky-top: #93ad9a; --trail-sky-bottom: #ffe6a9; --trail-far: #9aab94; --trail-hill: #668a80; }
.trail-orchard { --trail-sky-top: #72a9dd; --trail-sky-bottom: #fff0bc; --trail-field-top: #cbd192; --trail-field-bottom: #8fa85e; }
.trail-lake, .trail-river { --trail-sky-top: #90b4d7; --trail-sky-bottom: #e8efd8; --trail-water: #4d9da8; --trail-hill: #8faac7; }
.trail-mountain { --trail-sky-top: #8da5d7; --trail-sky-bottom: #f6d5c0; --trail-far: #9e92b7; --trail-hill: #73918f; }
.trail-market { --trail-sky-top: #ecab9b; --trail-sky-bottom: #ffedbc; --trail-roof: #ad5368; --trail-field-bottom: #b79067; }
.trail-garden { --trail-sky-top: #b5a4d8; --trail-sky-bottom: #ffdfbd; --trail-field-top: #c8d98e; --trail-field-bottom: #78a668; }
.trail-night {
  --trail-sky-top: #2b2b58;
  --trail-sky-bottom: #aa8aaf;
  --trail-far: #726895;
  --trail-hill: #5c7489;
  --trail-field-top: #86986f;
  --trail-field-bottom: #4c716c;
  --trail-water: #587d9c;
  --trail-path: #a39783;
}
.trail-landscape, .trail-lights, .trail-actors { position: absolute; inset: 0; width: 100%; height: 100%; }
.trail-tree { fill: var(--trail-hill); }
.trail-tree:nth-of-type(2n) { fill: var(--trail-field-bottom); }
.trail-location {
  position: absolute;
  z-index: 2;
  top: 6%;
  left: 4%;
  padding: .35em .72em;
  border-radius: .6em;
  color: #fff6e8;
  background: #292744e6;
  font-size: clamp(.75rem, 3vw, 1.05rem);
  font-weight: 750;
}
.trail-actors {
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 0 13% 6%;
  gap: 5%;
}
.trail-actor {
  position: relative;
  display: grid;
  place-items: end center;
  width: min(43%, 235px);
  height: 73%;
  margin: 0;
  animation: trail-bob 3.6s ease-in-out infinite;
}
.trail-actor:nth-child(2) { animation-delay: -1.6s; }
.trail-actor::before {
  content: '';
  position: absolute;
  inset: auto 12% -2% 12%;
  height: 10%;
  background: #30284045;
  border-radius: 50%;
  filter: blur(3px);
}
.trail-actor img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 3px #291c5145);
}
.trail-speaking img { filter: drop-shadow(0 0 12px #ffeaa390) drop-shadow(0 3px 3px #291c5145); }
.trail-actor > .reference-creature-display {
  width: 100%;
  max-height: 100%;
}
.trail-actor > .trail-hidden-actor { width: clamp(2.3rem, 35%, 4.5rem); }
.trail-prop {
  position: absolute;
  pointer-events: none;
  bottom: 9%;
  right: 7%;
  width: 14%;
  max-width: 102px;
  filter: drop-shadow(0 4px 3px #331c4c66);
}
.trail-object { animation: trail-bob 4.2s ease-in-out infinite; }
.trail-cart { width: 18%; max-width: 128px; right: 4%; }
.trail-sign {
  display: grid;
  place-items: center;
  bottom: 13%;
  max-width: 52px;
  aspect-ratio: 1;
  background: #ffe1a4;
  border: 3px solid #9e5b51;
  border-radius: 6px;
  color: #6b3941;
  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 750;
}
.trail-sign::after { content: ''; position: absolute; width: 4px; height: 45%; bottom: -48%; background: #8a554c; }
.trail-music-notes {
  position: absolute;
  top: 25%;
  right: 14%;
  color: #fff5c2;
  font-size: clamp(1.3rem, 4vw, 2.5rem);
  text-shadow: 0 2px #654286;
  animation: trail-bob 2.2s ease-in-out infinite;
}
.trail-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(114deg, transparent 0 17px, #e5f2fd5e 18px 19px, transparent 20px 29px);
  mask-image: repeating-linear-gradient(0deg, transparent 0 26px, #fff 30px 44px, transparent 48px 72px);
  animation: trail-rain .85s linear infinite;
}
.trail-lights { pointer-events: none; }
.trail-lights i {
  --x: 13%;
  --y: 61%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(3px, .6vw, 6px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff1b1;
  box-shadow: 0 0 11px 2px #ffe08ca8;
  animation: trail-light 4.8s ease-in-out infinite;
}
.trail-lights i:nth-child(2) { --x: 28%; --y: 42%; animation-delay: -1.7s; }
.trail-lights i:nth-child(3) { --x: 48%; --y: 64%; animation-delay: -2.1s; }
.trail-lights i:nth-child(4) { --x: 77%; --y: 45%; animation-delay: -1.2s; }
.trail-lights i:nth-child(5) { --x: 88%; --y: 60%; animation-delay: -3.1s; }
.trail-clouds { animation: trail-drift 18s ease-in-out infinite alternate; }
.trail-ripples { animation: trail-ripple 4.6s ease-in-out infinite alternate; }
.trail-hanging-light { animation: trail-lantern 4.2s var(--sway-delay) ease-in-out infinite alternate; }
@keyframes trail-drift { to { transform: translateX(70px); } }
@keyframes trail-bob { 50% { transform: translateY(-5px); } }
@keyframes trail-ripple { from { opacity: .42; } to { transform: translateX(16px); opacity: .85; } }
@keyframes trail-light { 0%, 100% { transform: translateY(12px); opacity: .32; } 50% { transform: translateY(-9px); opacity: .93; } }
@keyframes trail-lantern { to { opacity: .55; } }
@keyframes trail-rain { to { mask-position: -30px 72px; } }
@media (prefers-reduced-motion: reduce) {
  .reference-trail-scene * { animation: none !important; }
}
.reference-story-copy {
  position: relative;
  background: #fff;
  padding: clamp(12px, 3.3vw, 22px);
  margin: 13px 12px 0;
  border: 2px solid #b3a4d0;
  border-radius: 19px;
  box-shadow: 0 2px #d9cdeb;
  min-height: clamp(135px, 25vw, 206px);
}
.reference-story-copy::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 23%;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: #fff;
  border-top: 2px solid #b3a4d0;
  border-left: 2px solid #b3a4d0;
}
.reference-story-copy > strong { color: #63509f; }
.reference-story-copy p { margin: 7px 0 0; }
.reference-story-hanzi { color: #282344; font-size: clamp(21px, 4vw, 31px); font-weight: 750; }
.reference-story-jyutping { color: #785c91; }
.reference-story-number { padding: 7px 12px 3px; }
.trail-progress { display: flex; justify-content: center; gap: 5px; padding: 0 12px 9px; }
.trail-progress span { width: 18px; height: 4px; border-radius: 8px; background: #c9bedf; }
.trail-progress .trail-progress-filled { background: #6850b4; }
.reference-story-audio {
  margin: 2px 12px 8px;
  color: #655880;
  text-align: center;
  font-size: .83rem;
}
.reference-story-audio:empty { display: none; }
.reference-story-actions { display: grid; grid-template-columns: .85fr 1.35fr 1fr; gap: 8px; padding: 0 12px 9px; }
.reference-story-actions button { min-height: 42px; padding-inline: 6px; }
.reference-story-actions #story-next { background: #6044b4; border-color: #4e3699; box-shadow: 0 3px #4e3699; color: #fff; }
.reference-story-extras { display: flex; align-items: center; justify-content: center; gap: 7px 13px; flex-wrap: wrap; padding: 0 12px 12px; }
.reference-story-extras button { padding: .35em .65em; font-size: .84rem; }
.reference-story-extras p { color: #655880; margin: 0; font-size: .78rem; }
.reference-mastery-card .reference-story-lock { margin: .65rem 0 0; color: #6a587d; }
.reference-mastery-card .reference-story-episode-title { color: #593f94; font-weight: 750; margin-top: .6rem; }
.reference-story-preview { margin: .8rem 0 1rem; }
.reference-story-preview label { display: block; margin-bottom: .3rem; font-weight: 750; }
.reference-story-preview select { min-width: 0; max-width: 100%; min-height: 42px; }
.preview-label { margin: 10px 0; color: #5c5673; text-align: center; font-size: .82rem; }

.reference-sheet-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin: 0;
  padding-left: 18px;
  counter-reset: phrase;
}
.reference-sheet-rows li {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e2ee;
  padding: 12px 0;
  counter-increment: phrase;
}
.reference-sheet-rows li > div::before { content: counter(phrase) ". "; }
.reference-sheet-rows li > div strong, .reference-sheet-rows li > div > span:last-child { display: block; }
.reference-sheet-rows li:has(.reference-sentence-audio) { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; }
.reference-sheet-hanzi { font-family: "Songti SC", "Noto Serif CJK TC", serif; font-size: 1.55rem; }
.reference-sheet .reference-learning-field { max-width: 360px; }
.reference-sheet-play { display: inline-flex; align-items: center; gap: .35em; flex: none; background: #eeebff; color: #5042bf; }
.reference-sheet-play svg { width: 1em; height: 1em; }
@media (max-width: 600px) {
  .reference-sheet-rows { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
}

.reference-home-friends { position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-width:0; margin:12px 0 16px; padding:16px 22px 10px; border:1px solid #b7badf; border-radius:23px; background:linear-gradient(110deg,#d8f1f5,#e7d9fb 60%,#fbdce9); box-shadow:inset 0 1px 0 #ffffffad; }
.reference-home-greeting { min-width:0; }
.reference-home-greeting > span { color:#665080; font-size:.69rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.reference-home-greeting h2 { margin:3px 0 4px; color:#3d365f; font-size:clamp(1rem,2.2vw,1.3rem); line-height:1.2; }
.reference-home-greeting p { margin:0; color:#615775; font-size:.83rem; }
.reference-home-parade { position:relative; display:flex; align-items:end; flex:none; gap:1px; text-decoration:none; border-radius:16px; }
.reference-home-friend { display:grid; justify-items:center; width:clamp(58px,8vw,94px); color:#65536c; font-size:.65rem; font-weight:800; }
.reference-home-friend-art { width:100%; aspect-ratio:1; }
.reference-home-friend > span:last-child { margin-top:-6px; text-align:center; line-height:1.2; }
.reference-home-holiday { padding-top:25px; border-color:#c1afd7; background:radial-gradient(ellipse at 83% 60%,#ffe8aa99,transparent 42%),linear-gradient(110deg,#d6eff3,#e8d7f7 60%,#f9d9e7); }
.reference-home-lights { position:absolute; top:0; left:3%; right:3%; display:flex; justify-content:space-around; height:15px; border-bottom:1px solid #78927b; border-radius:0 0 50% 50%; pointer-events:none; }
.reference-home-lights i { width:7px; height:9px; margin-top:10px; border-radius:35% 35% 50% 50%; background:#e8b348; box-shadow:0 0 7px 3px #f4d99566; }
.reference-home-lights i:nth-child(3n+1) { margin-top:6px; background:#bf6258; box-shadow:0 0 6px 2px #e7ada366; }
.reference-home-lights i:nth-child(3n) { background:#7c9c83; box-shadow:0 0 6px 2px #bed1ae77; }
@media (prefers-reduced-motion:no-preference) {
  .reference-home-friend-art { animation:reference-home-sway 5s ease-in-out infinite; transform-origin:50% 92%; }
  .reference-home-friend:nth-child(2) .reference-home-friend-art { animation-delay:-1.7s; }
  .reference-home-friend:nth-child(3) .reference-home-friend-art { animation-delay:-3.3s; }
  .reference-home-lights i { animation:reference-home-glow 3s ease-in-out infinite alternate; }
  .reference-home-lights i:nth-child(even) { animation-delay:-1.5s; }
}
@keyframes reference-home-sway { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-3px) rotate(2deg); } }
@keyframes reference-home-glow { from { opacity:.7; } to { opacity:1; filter:brightness(1.15); } }
@media (max-width:620px) {
  .reference-home-friends { padding:19px 13px 9px; gap:4px; }
  .reference-home-greeting h2 { max-width:12em; font-size:.97rem; }
  .reference-home-greeting p { max-width:14em; font-size:.72rem; }
  .reference-home-greeting > span { font-size:.6rem; letter-spacing:.07em; }
  .reference-home-friend { width:clamp(43px,11.8vw,66px); font-size:.57rem; }
}
@media print { .reference-home-friends { display:none; } }
.reference-learning-controls { display: grid; gap: 10px; margin: 10px 0; }
.reference-learning-flash-controls { grid-template-columns: 1.4fr 1fr; }
.reference-learning-test-controls { margin-bottom: clamp(20px, 4vw, 38px); }
.reference-learning-field { display: grid; gap: 3px; align-content: start; margin: 0; color: #292549; font-size: .94rem; font-weight: 800; }
.reference-learning-field select, .reference-learning-field input { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 9px 14px; border: 2px solid #d7d5e8; border-radius: 14px; background: #fff; color: #292549; font: inherit; }
.reference-learning-field select:focus-visible, .reference-learning-field input:focus-visible { outline: 3px solid #d7a500; outline-offset: 2px; }
.reference-learning-field[hidden] { display: none; }
.reference-learning-options { margin: 12px 0; font-size: .91rem; color: #55536e; }
.reference-learning-options summary { width: fit-content; cursor: pointer; color: #51466e; font-weight: 820; }
.reference-learning-option-content { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; gap: 12px; padding: 14px 0 0; }
.reference-learning-option-content .actions { grid-column: 1 / -1; }
.reference-learning-buddy.secondary { display: flex; align-items: center; gap: 17px; width: 100%; padding: 8px 16px; border-color:#c4b6e2; background:linear-gradient(110deg,#ffffffeb,#f5eafe); color: #292549; text-align: left; font-size: .98rem; }
.reference-learning-buddy-art { flex: 0 0 auto; width: clamp(76px, 10vw, 104px); height: auto; aspect-ratio:1; }
.reference-learning-buddy small { display: block; font-size: .89rem; font-weight: 540; }
.reference-level-up {
  display: grid;
  justify-items: center;
  gap: .65rem;
  padding: clamp(.8rem, 4vw, 1.5rem);
  border: 1px solid #e6cf97;
  border-radius: 1.2rem;
  background: radial-gradient(ellipse at 50% 28%, #fff0b6, #fff8ed 62%);
  color: #292549;
  text-align: center;
}
.reference-level-up .reference-level-up-art { width: min(100%, 12rem); }
.reference-level-up p { margin: 0; }
.reference-level-up strong { display: block; font-size: clamp(1.12rem, 5vw, 1.65rem); }
.reference-level-up p > span { color: #604b72; }
.reference-level-up .reference-level-up-xp {
  padding: .35rem .7rem;
  border: 1px solid #d3badb;
  border-radius: 99rem;
  background: #f8ecfc;
  color: #5e366d;
  font-weight: 800;
}
.reference-level-up button { margin-top: .3rem; }
.reference-learning-context { margin: 13px 0 9px; color: #50456a; font-size: .9rem; font-weight: 780; }
.reference-study-panel.panel, .reference-test-panel.panel, .reference-learning-overview.panel, .reference-practice-summary.panel, .reference-chapter-mastery.panel, .reference-learning-history.panel { padding: clamp(15px, 2vw, 22px); border: 2px solid #cfcae8; border-radius: 27px; box-shadow: 0 4px 0 #dedbea; background: #fff; color: #292549; }
.reference-study-panel.panel { border-color: #c7bfea; }
.reference-card-shortcuts { margin: 0 0 10px; }
.reference-card-shortcuts button { font-size: .91rem; }
.reference-card-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.reference-card-meta strong, .reference-study-pill { padding: 7px 12px; background: #efedfb; color: #48406a; border-radius: 12px; font-size: .9rem; font-weight: 800; }
.reference-study-pill { border: 1px solid #d8d0ec; border-radius: 99px; padding: 5px 10px; font-size: .77rem; }
.reference-study-pill.reading { border-color: #e9b9d2; background: #f9e5f0; color: #87284d; }
.reference-study-pill.reference-authored-badge { display: inline-block; margin-inline: 4px; color: #604514; border-color: #dec67d; background: #fff3cd; }
.reference-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.reference-study-progress { display: block; width: 100%; height: 10px; margin: 11px 0 10px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: #eeedf6; color: #6a5fda; accent-color: #6a5fda; }
.reference-study-progress::-webkit-progress-bar { background: #eeedf6; border-radius: 999px; }
.reference-study-progress::-webkit-progress-value { background: #6a5fda; border-radius: 999px; }
.reference-study-progress::-moz-progress-bar { background: #6a5fda; border-radius: 999px; }
.reference-flashcard { min-height: 365px; padding: 16px 12px 22px; text-align: center; border: 2px solid #f0e3b4; border-radius: 21px; background: repeating-linear-gradient(0deg, transparent 0 35px, #e7ddbc40 35px 36px), #fcf8ec; }
.reference-flashcard.is-revealed { border-color: #bde1d4; background: #f0faf6; }
.reference-study-hanzi { display: inline-block; min-width: 1em; max-width: 100%; margin: 0 auto; padding: .13em .3em .16em; border-radius: 16px; background: #ffe69a; color: #28244b; box-shadow: 0 3px 0 #ebd06d; font: 400 clamp(3.1rem, 7.7vw, 5.65rem)/1.17 'Noto Serif CJK TC', 'Songti TC', 'Noto Serif CJK SC', 'PMingLiU', serif; letter-spacing: .055em; }
.reference-flashcard.is-revealed .reference-study-hanzi { margin-bottom: 15px; background: #fff; box-shadow: none; }
.reference-study-hanzi.reference-study-sentence { font-size: clamp(1.6rem, 4.5vw, 3rem); line-height: 1.5; overflow-wrap: anywhere; }
.reference-study-prompt { margin: 10px 0 8px; color: #514866; font-weight: 800; }
.reference-listen-button.secondary { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: min(256px, 100%); min-height: 62px; margin: 10px auto 0; color: #514be1; border-color: #c9bff0; box-shadow: 0 4px 0 #c9bff0; font-size: 1.13rem; }
.reference-audio-status { min-height: 24px; margin: 14px 0 5px; font-size: .85rem; color: #55536e; }
.reference-sentence-audio {
  box-sizing: border-box;
  width: min(100%, 33rem);
  min-inline-size: 0;
  margin: 10px 0;
  padding: 11px 12px 9px;
  border: 2px solid #d8cdec;
  border-radius: 17px;
  background: #fbf9ff;
  color: #292549;
  text-align: left;
}
.reference-flashcard .reference-sentence-audio { margin-inline: auto; }
.reference-sentence-audio legend { padding: 0 6px; color: #57449e; font-size: .9rem; font-weight: 820; }
.reference-sentence-main { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.reference-sentence-main .reference-learning-field { flex: 1 1 96px; }
.reference-sentence-main button { display: flex; flex: 1 1 auto; gap: .4em; align-items: center; justify-content: center; }
.reference-sentence-main button svg { flex: none; width: 1.15em; height: 1.15em; }
.reference-sentence-audio button { min-height: 44px; padding: 7px 10px; font-size: .88rem; }
.reference-sentence-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr)); gap: 7px; }
.reference-sentence-audio .reference-sentence-position { margin: 11px 0 5px; font-size: .89rem; font-weight: 780; }
.reference-sentence-audio .reference-sentence-status { margin: 7px 0 0; min-height: 1.3em; font-size: .82rem; color: #55536e; }
.reference-parent-read { margin: 0 auto; width: fit-content; max-width: 100%; color: #55536e; font-size: .84rem; }
.reference-parent-read summary { cursor: pointer; }
.reference-parent-read p { margin: 8px 0; }
.reference-listen-hint { margin: 18px 0 6px; color: #55536e; font-size: .9rem; }
.reference-card-answer { margin: 22px 0 1px; }
.reference-card-answer strong { display: block; color: #57449e; font-size: 1.31rem; letter-spacing: .045em; }
.reference-card-answer small { display: block; margin: 5px 0 12px; color: #55536e; }
.reference-card-answer div { display: inline-block; max-width: 100%; padding: 7px 16px; border-radius: 13px; background: #d5f4e9; color: #155d50; font-size: clamp(1.12rem, 4vw, 1.45rem); font-weight: 850; }
.reference-card-actions { justify-content: center; gap: 13px; padding: 10px 0 0; }
.reference-card-actions button { min-width: min(188px, 100%); min-height: 48px; }
.reference-card-actions .success { background: #80d9ca; color: #124b42; border-color: #398e82; box-shadow: 0 4px 0 #12685c; }
.reference-learning-footnote { margin: 16px 3px 12px; color: #55536e; font-size: .9rem; }
.reference-learning-extras { border-top: 1px solid #ddd8df; padding: 13px 0 4px; }
.reference-learning-extras .actions { margin: 10px 0 3px; }
.reference-test-panel.panel { padding: clamp(16px, 3.7vw, 34px); }
.reference-test-panel h2, .reference-learning-overview h2, .reference-practice-summary h2, .reference-chapter-mastery h2, .reference-learning-history h2 { font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: -.035em; }
.reference-test-intro { margin: 10px 0 24px; color: #55536e; font-size: 1rem; line-height: 1.63; }
.reference-test-panel #test-count { margin-bottom: 12px; }
.reference-test-pin { margin: 1px 0 16px; padding: 14px; border: 2px solid #cdc1e4; border-radius: 15px; background: #f4eef9; }
.reference-test-pin .reference-check { display: flex; align-items: flex-start; gap: 9px; }
.reference-check input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: #514be1; }
.reference-test-pin p, .reference-test-note { margin: 9px 0 0; color: #55536e; font-size: .91rem; }
.reference-test-panel #reference-pin-label { margin-top: 10px; }
.reference-test-panel #start-test { min-width: 150px; margin-top: 15px; }
.reference-test-options, .reference-test-history { padding-top: 12px; margin-top: 20px; border-top: 1px solid #e3deeb; }
.reference-test-options .reference-test-note { margin: 0; }
.reference-test-options #reference-print-blank { justify-self: start; }
.reference-learning-overview, .reference-practice-summary, .reference-chapter-mastery, .reference-learning-history { margin-bottom: 15px; }
.reference-learning-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 10px 0; }
.reference-learning-stats-four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.reference-learning-stats div, .reference-mastery-card { min-width: 0; padding: 12px; border: 2px solid #ded9ef; border-radius: 15px; background: #f8f6fc; }
.reference-learning-stats strong, .reference-learning-stats span { display: block; }
.reference-learning-stats strong { color: #56459c; font-size: 1.42rem; }
.reference-learning-stats span { color: #55536e; font-size: .88rem; }
.reference-practice-journey { margin-top: 10px; padding: 12px; border: 2px solid #e8def2; border-radius: 15px; background: #f6f0fb; }
.reference-mastery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.reference-mastery-card h3 { margin: 0 0 4px; }
.reference-mastery-card p, .reference-mastery-card span { margin: 3px 0; color: #55536e; font-size: .85rem; }
.reference-mastery-card button { margin: 8px 0 3px; font-size: .85rem; }
.reference-print-worksheet { display: none; }

@media (max-width: 660px) {
  .reference-learning-flash-controls { grid-template-columns: 1fr; }
  .reference-learning-option-content { grid-template-columns: 1fr; }
  .reference-learning-stats, .reference-learning-stats-four, .reference-mastery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reference-study-panel.panel { border-radius: 21px; }
  .reference-flashcard { min-height: 324px; }
  .reference-card-actions button { min-width: 0; }
}

@media print {
  .reference-sentence-audio { display: none !important; }
  body:has(.reference-print-worksheet) > :not(.reference-print-worksheet) { display: none !important; }
  body:has(.reference-print-worksheet) { color: #000; background: #fff !important; }
  body:has(.reference-print-worksheet)::before, body:has(.reference-print-worksheet)::after { display: none; }
  .reference-print-worksheet { display: block; padding: 1cm; }
  .reference-print-worksheet h1 { font-size: 18pt; }
  .reference-print-worksheet li { margin: 0 0 1em 1em; padding: 0 0 .35em .5em; border-bottom: 1px solid #888; break-inside: avoid; }
}

.sample-clubhouse-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-bottom: 1.1rem; padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid #d4c6ea; border-radius: 1.1rem;
  background: linear-gradient(120deg, #faf3df, #f0eafb); color: #38314c;
}
.sample-clubhouse-banner > div { max-width: 44rem; }
.sample-clubhouse-banner h2 { margin: .2rem 0 .55rem; font-size: clamp(1.35rem, 4vw, 1.8rem); }
.sample-clubhouse-banner p { margin: .3rem 0 .5rem; }
.sample-clubhouse-banner small { color: #625775; }
.sample-clubhouse-banner nav { display: grid; gap: .7rem; flex-shrink: 0; }
.sample-clubhouse-banner a { color: #5c3881; font-weight: 700; }
.sample-clubhouse-banner button { padding: .65rem 1rem; border-radius: .65rem; border: 1px solid #ae95cb; background: #fffaf4; color: #44315d; }
.sample-clubhouse .account-actions { display: none; }
@media (max-width: 700px) {
  .sample-clubhouse-banner { align-items: stretch; flex-direction: column; }
  .sample-clubhouse-banner nav { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; }
}
.reference-club, .reference-club-dialog {
  --club-ink: #252349;
  --club-muted: #554f6d;
  --club-line: #cfceed;
  --club-button-shadow: #d7d6e9;
  --club-purple: #5044db;
  --club-purple-shadow: #342b8d;
  --club-wine: #94324c;
  --club-wine-deep: #7b2c42;
  --club-cream: #fcf8ee;
  --club-gold-line: #e4cf9e;
  color: var(--club-ink);
}
.reference-item-atlas { display: inline-block; background-repeat: no-repeat; }
.reference-item-atlas[data-shop-atlas="spring"] { background-image: url('/reference-art/shop-atlas-spring.webp'); }
.reference-item-atlas[data-shop-atlas="summer"] { background-image: url('/reference-art/shop-atlas-summer.webp'); }
.reference-item-atlas[data-shop-atlas="autumn"] { background-image: url('/reference-art/shop-atlas-autumn.webp'); }
.reference-item-atlas[data-shop-atlas="winter"] { background-image: url('/reference-art/shop-atlas-winter.webp'); }
.reference-item-atlas[data-shop-atlas="classic"] { background-image: url('/reference-art/shop-atlas-classic.webp'); }
.reference-item-atlas[data-shop-atlas="wreaths"] { background-image: url('/reference-art/shop-atlas-wreaths.webp'); }
.reference-game-hall-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  margin-bottom: 1rem;
  border-radius: 1.2rem;
  background: #252044;
  color: #fff7de;
}
.reference-game-hall-banner img { display: block; width: 100%; height: 100%; max-height: 13.5rem; object-fit: cover; }
.reference-game-hall-banner div { padding: clamp(.8rem, 4vw, 1.6rem); }
.reference-game-hall-banner span { color: #f6ca86; font-size: .77rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.reference-game-hall-banner h2 { margin: .3rem 0; color: inherit; font-size: clamp(1.5rem, 5vw, 2.7rem); line-height: 1; }
.reference-club .reference-game-hall-banner p { margin: .3rem 0 0; color: #eee4f7; }
.reference-hall-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1rem;
}
.reference-hall-jumps button {
  min-height: 2.75rem;
  padding: .4rem .85rem;
  border: 1px solid #c8b9e5;
  border-radius: .75rem;
  background: #f4eeff;
  color: #49366e;
  font-weight: 750;
}
.reference-hall-jumps button:hover { background: #ebe0ff; }
.reference-game-hall h3[tabindex] { scroll-margin-top: 1rem; }
.reference-game-hall h3[tabindex]:focus-visible { outline: 2px solid #7954b8; outline-offset: 3px; }
.reference-hall-section { margin-top: 1.15rem; }
.reference-hall-section h3 { margin-bottom: .15rem; }
.reference-hall-section > p { margin: .15rem 0 .65rem; color: var(--club-muted); }
.reference-hall-difficulty { margin: .6rem 0; }
.reference-hall-difficulty summary, .reference-hall-more summary { cursor: pointer; font-weight: 750; }
.reference-hall-difficulty label { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; font-weight: 750; }
.reference-hall-difficulty small { display: block; color: var(--club-muted); margin-top: .3rem; }
.reference-hall-more { padding: .75rem; border: 1px solid var(--club-line); border-radius: .85rem; background: #faf8fd; }
.reference-hall-more summary span { color: var(--club-muted); margin-left: .25rem; }
.reference-hall-genre { align-self: flex-start; border-radius: 1rem; background: #f0e9fb; padding: .15rem .55rem; color: #5e437a; font-size: .75rem; font-weight: 750; }
.reference-featured-adventures { margin: 0 0 1.15rem; }
.reference-featured-adventures h3 { margin: 0 0 .5rem; }
.reference-featured-adventures ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reference-featured-adventures li {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--club-line);
  border-radius: .95rem;
  background: #fff;
}
.reference-featured-adventures img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3.1;
  object-fit: cover;
}
.reference-featured-adventures li > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: .75rem;
}
.reference-featured-adventures h4 { margin: 0; font-size: 1.05rem; }
.reference-featured-adventures p { margin: 0; }
.reference-featured-adventures small { color: var(--club-muted); }
.reference-featured-adventures button { min-height: 2.75rem; margin-top: .15rem; }
.reference-adventure-gem-pouch {
  margin: 0 0 .9rem;
  padding: .55rem .8rem;
  border: 1px solid var(--club-line);
  border-radius: .75rem;
  background: #faf7ff;
}
.reference-adventure-gem-pouch summary { cursor: pointer; font-weight: 800; }
.reference-adventure-gem-pouch [data-gem-count] {
  display: inline-block;
  min-width: 1.35rem;
  margin-inline-start: .2rem;
  border-radius: 1rem;
  background: #ece3ff;
  color: #493e77;
  text-align: center;
}
.reference-adventure-gem-pouch ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin: .4rem 0;
  padding: 0;
  list-style: none;
}
.reference-adventure-gem-pouch li { display: flex; align-items: center; gap: .35rem; }
.reference-adventure-gem-pouch small { color: var(--club-muted); }
.reference-adventure-gem-face { width: 1.3rem; height: 1.3rem; flex: none; }
.reference-treasures .reference-adventure-gem-pouch ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap:.65rem; padding:0; }
.reference-treasures .reference-adventure-gem-pouch li { min-height:4rem; padding:.45rem .65rem; border:1px solid #dbbce6; border-radius:.8rem; background:radial-gradient(circle at 25% 20%,#fffbe2,#f0e5fa); box-shadow:0 .2rem #c9b1dc; font-weight:800; }
.reference-treasures .reference-adventure-gem-face { width:4rem; height:4rem; filter:drop-shadow(0 0 .5rem #f4c8fb); animation:reference-gem-glow 2.8s ease-in-out infinite alternate; }
@keyframes reference-gem-glow { to { filter:drop-shadow(0 0 .8rem #fff2b0) brightness(1.15); transform:rotate(7deg); } }
@media(prefers-reduced-motion:reduce) { .reference-treasures .reference-adventure-gem-face,.reference-treasures .reference-adventure-gem { animation:none; } }
.reference-adventure-gem {
  width: .9rem;
  height: .95rem;
  clip-path: polygon(23% 0, 77% 0, 100% 37%, 50% 100%, 0 37%);
  background: conic-gradient(from 31deg at 50% 40%, var(--gem-color), #ffffff, var(--gem-color), #796697, var(--gem-color));
}
.reference-game-card-art { display: block; width: min(100%, 5.75rem); aspect-ratio: 1; height: auto; object-fit: contain; }
.reference-game-card > button { align-self: start; }
.reference-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .55rem;
  margin: .65rem 0;
  padding: 0;
  list-style: none;
}
.reference-game-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .75rem;
  border: 1px solid #ded6ef;
  border-radius: .75rem;
  background: #fff;
}
.reference-game-card h4 { margin: 0; font-size: 1.05rem; }
.reference-game-card p { margin: 0; }
.reference-hall-card-summary { flex: 1; color: var(--club-muted); }
.reference-game-card small { color: var(--club-muted); }
.reference-game-card button { min-height: 2.75rem; }
.reference-club .reference-game-xp { color: #2d694f; font-weight: 800; }
.reference-game-buttons { display: flex; flex-wrap: wrap; align-items: stretch; gap: .35rem; }
.reference-game-buttons button { flex: 1 1 auto; margin: .3rem 0 0; }
.reference-club button.reference-xp-skip {
  color: #422b15;
  background: #ffdf86;
  border-color: #a26b2d;
  box-shadow: 0 2px #a26b2d;
  font-weight: 800;
}
.reference-club button.reference-xp-skip:hover { background: #ffe8a9; }
.reference-game-hall button.reference-xp-skip {
  border-color: #d6cce5;
  background: #faf7ff;
  color: #544569;
  box-shadow: none;
}
.reference-game-hall button.reference-xp-skip:hover { background: #eee5f8; }
.reference-game-pattern {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  padding: 0;
  list-style: none;
}
.reference-game-pattern[hidden] { display: none; }
.reference-game-pattern li {
  display: grid;
  place-items: center;
  gap: .25rem;
  min-width: 4rem;
  padding: .45rem;
  border: 1px solid var(--lilac);
  border-radius: 12px;
  background: #f8f4ff;
}
.reference-game-pattern li span { font-size: 1.55rem; }
.reference-club h2, .reference-club h3, .reference-club h4, .reference-club p,
.reference-club-dialog h3, .reference-club-dialog p { margin: 0; }
.reference-club p, .reference-club-dialog p { color: var(--club-muted); line-height: 1.55; }
.reference-club-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 .85rem;
  scroll-margin-top: 1rem;
}
.reference-club-heading h2 { font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.04em; }
.reference-star-balance {
  display: inline-block;
  border: 1px solid #ebcd74;
  border-radius: 999px;
  background: #fff3c0;
  padding: .42em .75em;
  font-size: .81rem;
  font-weight: 800;
  color: #6e5019;
}
.reference-pet-mode {
  margin: 0 0 .85rem;
  padding: .7rem .9rem;
  border: 1px solid #ded4f3;
  border-radius: .85rem;
  background: #f5efff;
}
.reference-pet-mode label { display: flex; align-items: center; gap: .55rem; margin: 0; font-weight: 800; }
.reference-pet-mode label span { display: flex; align-items: baseline; gap: .45rem; }
.reference-pet-mode label small { color: var(--club-muted); font-size: .76rem; }
.reference-pet-mode p { font-size: .84rem; margin-top: .28rem; }
.reference-club button, .reference-club-dialog button {
  min-width: 0;
  border: 1px solid var(--club-line);
  border-radius: .82rem;
  background: #fff;
  color: var(--club-ink);
  padding: .62em .92em;
  box-shadow: 0 3px var(--club-button-shadow);
  font-weight: 800;
  line-height: 1.22;
  text-wrap: balance;
}
.reference-club button.reference-primary, .reference-club-dialog button.reference-primary {
  background: var(--club-purple);
  border-color: var(--club-purple);
  box-shadow: 0 4px var(--club-purple-shadow);
  color: #fff;
}
.reference-club button.reference-primary:disabled, .reference-club-dialog button.reference-primary:disabled { opacity: .63; }
.reference-club-tabs, .reference-album-tabs { display: grid; gap: .55rem; }
.reference-club-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 1.15rem; }
.reference-forge-heading { display:flex; gap:.7rem; justify-content:space-between; align-items:center; margin:1.1rem 0 .65rem; }
.reference-forge-heading h3 { margin:0; }
.reference-forge-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap:.8rem; margin-bottom:1rem; }
.reference-forge-gallery figure { margin:0; padding:.65rem; border:1px solid #dcc8e8; border-radius:1.2rem; text-align:center; background:radial-gradient(ellipse at 50% 30%,#fff7dd 15%,#f9f0fb 75%); }
.reference-forge-art { display:block; width:min(100%,18rem); margin:auto; overflow:visible; }
.reference-forge-gallery .reference-forge-art { width:min(100%,13rem); }
.reference-forge-gallery figcaption { font-weight:800; color:#46345f; overflow-wrap:anywhere; }
.reference-forge-gallery figcaption small { display:block; margin-top:.15rem; font-size:.75rem; font-weight:600; color:#746082; }
.reference-forge-gallery figure.reference-forge-home-selected { border-color:#9b7ac1; box-shadow:0 0 0 2px #ded0ed; }
.reference-forge-gallery figure > button { margin-top:.65rem; width:100%; }
.reference-forge-gallery figure > button[aria-pressed="true"] { color:#5b3976; background:#eee4f6; opacity:1; }
.reference-forge-home-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin:.7rem 0; }
.header-creature .reference-forge-art,.header-creature .reference-header-companion-art { width:100%; height:100%; max-width:none; }
.reference-home-gem-art { display:block; }
.reference-home-gem-art .reference-forge-art { width:100%; height:100%; max-width:none; }
.reference-forge-form { display:grid; gap:clamp(.8rem,3vw,1.7rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; padding:clamp(.8rem,3vw,1.4rem); border:1px solid #dfc9e6; border-radius:1.4rem; background:#fdf9ff; }
.reference-forge-stage { display:grid; justify-items:center; align-content:center; gap:.45rem; min-width:0; padding:.6rem; border-radius:1rem; background:radial-gradient(ellipse at 50% 35%,#fff3cb 0%,#fff9ee 36%,#f4e9fa 83%); }
.reference-forge-form #reference-forge-preview { display:grid; place-items:center; width:100%; min-width:0; }
.reference-forge-stage > button { min-width:8rem; }
.reference-forge-stage [data-forge-status] { min-height:2.6em; margin:.3rem 0 0; max-width:23rem; text-align:center; color:#746082; font-size:.8rem; line-height:1.4; }
.reference-forge-controls { display:grid; gap:.75rem; min-width:0; }
.reference-forge-progress { margin:0; color:#644481; font-weight:800; }
.reference-forge-form label { display:grid; gap:.3rem; font-weight:800; color:#4d386c; }
.reference-forge-form input,.reference-forge-form select { width:100%; min-height:2.75rem; box-sizing:border-box; border:1px solid #c4a9d3; border-radius:.6rem; background:white; color:#392b55; font:inherit; padding:.4rem .6rem; }
.reference-forge-form .small-note { margin:0; }
.reference-forge-assembled { transform-origin:120px 282px; }
.reference-forge-head { transform-origin:120px 156px; }
.reference-forge-body { transform-origin:120px 243px; }
.reference-forge-feet { transform-origin:120px 281px; }
.reference-forge-sparkles { opacity:.65; transform-origin:120px 155px; }
@media(prefers-reduced-motion:no-preference) {
  .reference-forge-assembled { animation:reference-forge-breathe 4s ease-in-out infinite; }
  .reference-forge-art.is-assembling .reference-forge-assembled { animation:reference-forge-settle .65s ease-out both,reference-forge-breathe 4s .65s ease-in-out infinite; }
  .reference-forge-art.is-greeting .reference-forge-assembled,.reference-forge-art.is-born .reference-forge-assembled { animation:reference-forge-hop 1.5s ease-in-out both; }
  .reference-forge-art.is-assembling .reference-forge-sparkles,.reference-forge-art.is-greeting .reference-forge-sparkles,.reference-forge-art.is-born .reference-forge-sparkles { animation:reference-forge-sparkle 1.6s ease-out both; }
  .reference-forge-art.is-greeting .reference-forge-shadow,.reference-forge-art.is-born .reference-forge-shadow { animation:reference-forge-shadow-hop 1.5s ease-in-out both; transform-origin:120px 285px; }
}
@keyframes reference-forge-breathe { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-2px) scale(1.01,.995)} }
@keyframes reference-forge-settle { from{opacity:0;transform:translateY(3px) scale(.99)} to{opacity:1;transform:none} }
@keyframes reference-forge-hop { 0%,100%{transform:none} 15%{transform:scale(1.04,.96)} 37%{transform:translateY(-17px) rotate(-3deg)} 57%{transform:translateY(0) scale(1.04,.96)} 72%{transform:translateY(-7px) rotate(2deg)} 87%{transform:none} }
@keyframes reference-forge-sparkle { from{opacity:0;transform:scale(.7)} 35%{opacity:1;transform:scale(1.08)} to{opacity:.65;transform:scale(1)} }
@keyframes reference-forge-shadow-hop { 0%,100%{opacity:.18;transform:scaleX(1)} 37%{opacity:.09;transform:scaleX(.76)} 57%{opacity:.2;transform:scaleX(1.05)} 72%{opacity:.13;transform:scaleX(.9)} }
@media(max-width:570px) { .reference-forge-form { grid-template-columns:minmax(0,1fr); } .reference-forge-stage .reference-forge-art { width:min(100%,15rem); } .reference-forge-heading { align-items:flex-start; flex-wrap:wrap; } }
@media(max-width:570px) { .reference-club-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.reference-club-tabs button { min-height: 2.6rem; padding-inline: .2rem; font-size: .92rem; }
.reference-club-tabs button[aria-pressed="true"] {
  background: var(--club-wine);
  border-color: var(--club-wine);
  box-shadow: 0 4px var(--club-purple-shadow);
  color: #fff;
}
.reference-club .reference-club-panel {
  border: 1px solid var(--club-line);
  background: #fff;
  box-shadow: 0 5px #ddddf0;
  border-radius: 1.45rem;
  padding: clamp(.75rem, 3vw, 1.65rem);
  margin: 0 0 1.1rem;
  min-width: 0;
}
.reference-club .reference-buddy-panel {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.06fr);
  align-items: start;
  gap: clamp(.9rem, 3vw, 1.7rem);
}
.reference-buddy-art {
  padding: .95rem;
  border-radius: 1.65rem;
  background:
    radial-gradient(ellipse at 20% 10%, #def8ed 0%, transparent 62%),
    radial-gradient(ellipse at 90% 90%, #e5daf8 0%, transparent 62%),
    #e8f1fb;
}
.reference-portrait-wrap {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  width: 95%;
  max-width: 17rem;
  margin: .2rem auto .8rem;
}
.reference-portrait { width: 100%; height: 100%; }
.reference-creature-display > .reference-worn-accessory,
.reference-portrait-empty > .reference-worn-accessory {
  position: absolute;
  inset: auto 7% 8% auto;
  z-index: 2;
  width: 31%;
  max-height: 36%;
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
}
.reference-creature-display[data-accessory-placement="head"] > .reference-worn-accessory {
  inset: var(--wear-head-brim) auto auto var(--wear-head-x);
  width: var(--wear-head-width);
  max-height: none;
  transform: translate(-50%, calc(0% - var(--wear-art-bottom)));
}
.reference-creature-display[data-accessory-placement="bow"] > .reference-worn-accessory {
  inset: var(--wear-bow-y) auto auto var(--wear-bow-x);
  width: var(--wear-bow-width);
  max-height: none;
  transform: translate(-50%, -50%) rotate(-9deg);
}
.reference-lantern-stand {
  position: absolute;
  inset: var(--wear-lantern-top) auto 9% 0;
  z-index: 2;
  width: var(--wear-lantern-width);
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #633b2545);
}
.reference-lantern-stand::before,
.reference-lantern-stand::after {
  position: absolute;
  z-index: 0;
  content: "";
}
.reference-lantern-stand::before {
  inset: 11% auto 5% 10%;
  width: 7%;
  border-radius: .22rem;
  background: linear-gradient(90deg, #794124, #e1ae65 48%, #996039 70%, #6d3927);
}
.reference-lantern-stand::after {
  inset: 3% 39% auto 10%;
  height: 16%;
  border: solid #ab7042;
  border-width: .14rem .14rem 0 .14rem;
  border-radius: 65% 45% 0 0;
  box-shadow: 0 -1px #f6ce82;
}
.reference-lantern-decoration {
  position: absolute;
  inset: 1% auto auto 6%;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.reference-lantern-plinth {
  display: block;
  position: absolute;
  inset: auto auto 0 0;
  width: 34%;
  height: clamp(.32rem, 1vw, .55rem);
  border: 1px solid #734629;
  border-radius: .4rem;
  background: linear-gradient(#ffdc8d, #a06835 42%, #7f442c 75%, #a56c3b);
  box-shadow: inset 0 -1px #62371e99;
}
.reference-lantern-plinth::after {
  position: absolute;
  inset: 80% 13% auto;
  height: 60%;
  border-inline: 3px solid #825033;
  content: "";
}
.reference-prop-slot {
  position: absolute;
  inset: var(--wear-prop-y) auto auto var(--wear-prop-x);
  z-index: 2;
  width: var(--wear-prop-width);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.reference-prop-slot[data-prop-floor="true"] { z-index: 0; }
.reference-prop-slot[data-worn-item="star-wand"] { filter: drop-shadow(0 0 2px #edfbff) drop-shadow(0 0 4px #9bd9ef); }
.reference-prop-slot > .reference-worn-accessory {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #633b2538);
}
.reference-equipped-ambience {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: 1rem; pointer-events: none;
}
.reference-dinosaur-sky, .reference-volcano-mist { position: absolute; inset: 0; }
.reference-dinosaur-flyer {
  position: absolute; left: 9%; top: 8%; width: 22%; aspect-ratio: 1.65;
  opacity: .94; --dino-flight-time: 24s; --dino-flight-delay: -7s;
  --dino-bank-time: 3.4s; --dino-bank-delay: -.8s;
  filter: drop-shadow(0 2px 1px #163c4355);
}
.reference-dinosaur-flyer img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transform-origin: 48% 45%;
}
.reference-dinosaur-flyer:nth-child(2) {
  left: 54%; top: 19%; width: 15%; opacity: .78;
  --dino-flight-time: 29s; --dino-flight-delay: -21s;
  --dino-bank-time: 4.1s; --dino-bank-delay: -2.4s;
}
.reference-dinosaur-flyer:nth-child(3) {
  left: 80%; top: 7%; width: 11%; opacity: .64;
  --dino-flight-time: 34s; --dino-flight-delay: -4s;
  --dino-bank-time: 3.7s; --dino-bank-delay: -1.5s;
}
.reference-volcano-glow {
  position: absolute; left: 68%; top: 15%; width: 20%; height: 20%;
  border-radius: 50%; opacity: .5;
  background: radial-gradient(ellipse, #ffd89977, #ef8f4b38 38%, transparent 70%);
}
.reference-volcano-mist i {
  position: absolute; left: 72%; top: 18%; width: 13%; height: 11%;
  border-radius: 50%; opacity: .5; --mist-delay: 0s;
  background: radial-gradient(ellipse at 40% 60%, #ffedce8c, #c9dbd854 48%, transparent 72%);
  transform-origin: 50% 90%;
}
.reference-volcano-mist i:nth-child(2) { left: 74%; top: 14%; width: 15%; --mist-delay: -4s; }
.reference-volcano-mist i:nth-child(3) { left: 71%; top: 9%; width: 18%; opacity: .3; --mist-delay: -8s; }
.reference-garden-mist {
  position: absolute; left: -12%; bottom: 4%; width: 120%; height: 17%; opacity: .45;
  background: radial-gradient(ellipse at 25% 72%, #e4d7f3b0, transparent 42%),
    radial-gradient(ellipse at 82% 56%, #c8dceaa6, transparent 43%);
}
.reference-garden-ghost {
  position: absolute; left: 83%; top: 8%; width: 15%; aspect-ratio: 1;
  filter: drop-shadow(0 0 3px #ffefbf80); transform: rotate(7deg);
}
.reference-garden-pumpkins { position: absolute; inset: 0; }
.reference-garden-pumpkins > .reference-item-image {
  position: absolute; left: 3%; bottom: 3%; width: 16%; aspect-ratio: 1;
  filter: drop-shadow(0 0 4px #ffbd5866);
}
.reference-garden-pumpkins > .reference-item-image:nth-child(2) {
  left: auto; right: 3%; bottom: 4%; width: 13%;
}
.reference-prop-slot[data-worn-item="halloween-cauldron"]::before {
  content: ""; position: absolute; inset: 16% 4% 22%; z-index: 0;
  border-radius: 50%; opacity: .6;
  background: radial-gradient(ellipse, #dfb1ff99, #b584ed45 45%, transparent 72%);
}
.reference-prop-slot[data-worn-item="halloween-cauldron"] > .reference-worn-accessory {
  position: relative; z-index: 1;
}
.reference-cauldron-bubbles {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.reference-cauldron-bubbles i {
  position: absolute; left: 35%; top: 30%; width: 9%; aspect-ratio: 1;
  border: 1px solid #f7ddffa6; border-radius: 50%;
  background: #d99af182; box-shadow: inset 1px 1px #fff3ff99; opacity: .75;
  --bubble-delay: -.5s;
}
.reference-cauldron-bubbles i:nth-child(2) { left: 50%; top: 26%; width: 6%; --bubble-delay: -2s; }
.reference-cauldron-bubbles i:nth-child(3) { left: 62%; top: 30%; width: 7%; --bubble-delay: -3s; }
.reference-cauldron-bubbles i:nth-child(4) { left: 44%; top: 28%; width: 8%; --bubble-delay: -1.25s; }
@media (prefers-reduced-motion: no-preference) {
  .reference-dinosaur-flyer { animation: reference-dinosaur-flight var(--dino-flight-time) linear var(--dino-flight-delay) infinite; }
  .reference-dinosaur-flyer img { animation: reference-dinosaur-bank var(--dino-bank-time) ease-in-out var(--dino-bank-delay) infinite alternate; }
  .reference-volcano-mist i { animation: reference-volcano-drift 12s ease-out var(--mist-delay) infinite; }
  .reference-volcano-glow { animation: reference-world-glow 7s ease-in-out infinite alternate; }
  .reference-garden-ghost { animation: reference-garden-float 5.5s ease-in-out infinite alternate; }
  .reference-garden-mist { animation: reference-garden-mist 9s ease-in-out infinite alternate; }
  .reference-garden-pumpkins > .reference-item-image { animation: reference-pumpkin-glow 4.8s ease-in-out infinite alternate; }
  .reference-garden-pumpkins > .reference-item-image:nth-child(2) { animation-delay: -2.5s; }
  .reference-prop-slot[data-worn-item="halloween-cauldron"]::before { animation: reference-cauldron-glow 6s ease-in-out infinite; }
  .reference-cauldron-bubbles i { animation: reference-cauldron-rise 3.8s ease-out var(--bubble-delay) infinite; }
}
@keyframes reference-dinosaur-flight {
  0% { left: -25%; transform: translateY(3%); }
  25% { transform: translateY(-17%); }
  55% { transform: translateY(8%); }
  75% { transform: translateY(-10%); }
  100% { left: 110%; transform: translateY(3%); }
}
@keyframes reference-dinosaur-bank {
  from { transform: rotate(-5deg) scaleY(.94); }
  to { transform: rotate(4deg) scaleY(1.03); }
}
@keyframes reference-volcano-drift {
  0% { opacity: 0; transform: translate(-3%, 35%) scale(.8); }
  28% { opacity: .55; }
  100% { opacity: 0; transform: translate(25%, -110%) scale(1.8); }
}
@keyframes reference-garden-float {
  from { transform: translate(-8%, 15%) rotate(-7deg); }
  to { transform: translate(3%, -15%) rotate(9deg); }
}
@keyframes reference-garden-mist {
  from { opacity: .35; transform: translateX(-5%); }
  to { opacity: .7; transform: translateX(7%); }
}
@keyframes reference-pumpkin-glow {
  from { filter: drop-shadow(0 0 2px #ffbd5844); }
  to { filter: drop-shadow(0 0 5px #ffc45ab0); }
}
@keyframes reference-cauldron-glow {
  0%, 100% { opacity: .45; transform: scale(.95); }
  50% { opacity: .8; transform: scale(1.08); }
}
@keyframes reference-cauldron-rise {
  0% { opacity: 0; transform: translateY(40%) scale(.65); }
  25%, 65% { opacity: .85; }
  100% { opacity: 0; transform: translateY(-280%) scale(1.1); }
}
.reference-prop-slot[data-worn-item="flower-crown"],
.reference-prop-slot[data-worn-item="rainbow-flower-crown"],
.reference-prop-slot[data-worn-item="reference:plum-blossom-crown"] {
  filter: drop-shadow(0 .3rem .35rem #53468054);
  transform: translate(-50%, -50%) rotate(-18deg);
}
.reference-prop-slot[data-worn-item="flower-crown"]::before,
.reference-prop-slot[data-worn-item="rainbow-flower-crown"]::before,
.reference-prop-slot[data-worn-item="reference:plum-blossom-crown"]::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 65%; height: 145%;
  border-left: 2px dashed #a891be; transform: rotate(18deg);
}
.reference-creature-display[data-accessory-placement="platform"] {
  --accessory-floor: 25%;
  --platform-bottom: -15%;
}
.reference-creature-display[data-platform="moon-bridge"] { --accessory-floor: 33%; }
.reference-accessory-platform {
  position: absolute;
  z-index: 1;
  inset: auto 2% var(--platform-bottom) auto;
  width: 96%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.reference-portrait-setting {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--setting-edge, #a29ac2);
  border-radius: 1rem;
  object-fit: cover;
  object-position: var(--setting-position, center);
  filter: var(--setting-tone, none);
  pointer-events: none;
}
.reference-flower-bed {
  position: absolute;
  z-index: 2;
  inset: 85% auto auto 50%;
  display: block;
  width: 89%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scaleY(.46);
  pointer-events: none;
  filter: drop-shadow(0 6px 5px #442d2575);
}
.reference-flower-bed > .reference-item-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.reference-creature-display[data-setting="reference:daisy-crown"] {
  --setting-edge: #b3bf8b;
}
.reference-creature-display[data-setting="reference:plum-blossom-crown"] {
  --setting-edge: #dba6bd;
}
.reference-creature-display[data-setting="reference:sunshine-daisy-crown"] {
  --setting-edge: #e2bf6e;
}
.reference-creature-display[data-setting="rainbow-flower-crown"] {
  --setting-edge: #c5a9df;
}
.reference-creature-display[data-setting="gingerbread-cottage"] {
  --setting-edge: #c48a6d;
  --setting-shadow: #6047695e;
}
.reference-creature-display[data-setting="autumn-leaves"] {
  --setting-edge: #d28d56;
  --setting-position: center 55%;
  --setting-shadow: #743d2e45;
}
.reference-creature-display:is([data-setting="friendly-ghost"], [data-setting="halloween-garden"], [data-setting="halloween-cauldron"]) {
  --setting-edge: #8a629a;
  --setting-position: center 53%;
}
.reference-creature-display[data-setting="friendly-ghost"] {
  --setting-tone: hue-rotate(-33deg) saturate(.92) brightness(.77);
}
.reference-creature-display[data-setting="mushroom-garden"] {
  --setting-position: center;
  --setting-edge: #77a888;
  --setting-shadow: #244b3c60;
}
.reference-creature-display[data-setting="floating-island"] { --setting-edge: #a3c6b2; --setting-shadow: #526b4d55; }
.reference-aura {
  display: inline-block;
  position: relative;
  aspect-ratio: 1;
  pointer-events: none;
}
.reference-aura > .reference-aura-wheel {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.reference-creature-display > .reference-equipped-aura { position: absolute; inset: -5%; z-index: 0; }
.reference-equipped-aura + .reference-creature-figure { position: relative; z-index: 1; }
.reference-equipped-aura .reference-aura-wheel,
.reference-aura-showcase .reference-aura-wheel { animation: reference-aura-turn 32s linear infinite; }
@keyframes reference-aura-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .reference-equipped-aura .reference-aura-wheel,
  .reference-aura-showcase .reference-aura-wheel { animation: none; }
}
.reference-buddy-level { text-align: center; margin: .5rem 0 1rem; }
.reference-buddy-level span {
  display: inline-block;
  border: 1px solid #dfc176;
  border-radius: 999px;
  background: #fff1c6;
  color: #684d22;
  font-weight: 800;
  font-size: .84rem;
  padding: .45em .9em;
}
.reference-buddy-care {
  border-top: 1px solid var(--club-gold-line);
  padding-top: .8rem;
  display: grid;
  gap: .95rem;
}
.reference-buddy-care details summary, .reference-buddy-story summary, .reference-album-card summary {
  cursor: pointer;
  font-weight: 800;
  font-size: .87rem;
}
.reference-buddy-care details summary { color: var(--club-wine-deep); }
.reference-buddy-care p, .reference-buddy-story p { font-size: .82rem; margin: .55rem 0; }
.reference-club .reference-guest-loan-note { margin: .25rem 0 .6rem; color: #75552d; font-size: .86rem; }
.reference-wardrobe-dialog {
  box-sizing: border-box;
  width: min(57rem, calc(100vw - 1rem));
  max-width: none;
  max-height: calc(100dvh - 1rem);
  padding: 0;
  overflow: hidden;
  background: #fffaf3;
}
.reference-wardrobe-dialog[open] { display: flex; flex-direction: column; }
.reference-wardrobe-dialog .dialog-head { flex: none; }
.reference-wardrobe-body { display: flex; flex-direction: column; min-height: 0; }
.reference-wardrobe-layout {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(.6rem, 2vw, 1rem);
  padding: clamp(.55rem, 2vw, .95rem);
  height: min(69dvh, 33rem);
  min-height: 0;
}
.reference-wardrobe-stage {
  display: grid;
  align-content: start;
  min-width: 0;
  overflow-y: auto;
  padding: clamp(.45rem, 2vw, .85rem);
  border-radius: 1rem;
  border: 1px solid #ead6b5;
  background: radial-gradient(ellipse at 50% 26%, #fff0c6, transparent 65%), #fff9ec;
}
.reference-wardrobe-preview .reference-portrait-wrap { width: min(100%, 24dvh, 13rem); margin: .1rem auto .45rem; }
.reference-wardrobe-stage-actions { min-width: 0; display: grid; align-content: start; gap: .42rem; }
.reference-wardrobe-stage-actions > button { justify-self: start; }
.reference-wardrobe-clear { position:relative; justify-self:start; width:fit-content; margin:0; padding:.25rem 0; color:#6b647b; font-size:.76rem; cursor:pointer; }
.reference-wardrobe-clear input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.reference-wardrobe-clear span { text-decoration:underline; text-underline-offset:3px; }
.reference-wardrobe-clear input:focus-visible + span { outline:2px solid #5940b8; outline-offset:4px; border-radius:3px; }
.reference-wardrobe-activity { display: grid; gap: .28rem; }
.reference-wardrobe-activity > p, .reference-wardrobe-tip, .reference-wardrobe-status { font-size: .82rem; }
.reference-wardrobe-activity > button { justify-self: start; }
.reference-wardrobe-activity button { min-height: 2.1rem; padding: .33rem .55rem; font-size: .8rem; }
.reference-wardrobe-activity .reference-game-buttons button { flex: 0 1 auto; margin: 0; }
.reference-wardrobe-difficulty { font-size: .76rem; }
.reference-wardrobe-difficulty summary { cursor: pointer; width: fit-content; font-weight: 700; }
.reference-wardrobe-status { color: #2d694f; font-weight: 750; }
.reference-wardrobe-status:empty { display: none; }
.reference-wardrobe-closet { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .45rem; }
.reference-wardrobe-closet-head > p { font-size: .79rem; }
.reference-wardrobe-search { display: grid; gap: .17rem; margin-top: .33rem; font-size: .8rem; font-weight: 750; }
.reference-wardrobe-search input { width: 100%; min-width: 0; padding: .45rem .6rem; }
.reference-wardrobe-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.4rem), 1fr)); gap: .4rem;
  align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: .25rem;
  background: #f3edf9; border-radius: .65rem;
}
.reference-wardrobe-grid > p { grid-column: 1 / -1; padding: .3rem; font-size: .82rem; }
.reference-wardrobe-tile { display: block; cursor: pointer; position: relative; }
.reference-wardrobe-tile[hidden] { display: none; }
.reference-wardrobe-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.reference-wardrobe-tile > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; min-height: 100%; padding: .36rem .18rem; text-align: center;
  border: 2px solid #e2d8ee; border-radius: .62rem; background: #fff;
}
.reference-wardrobe-tile input:checked + span { border-color: #7847a8; background: #f5ecff; }
.reference-wardrobe-tile input:focus-visible + span { outline: 2px solid #5940b8; outline-offset: 1px; }
.reference-wardrobe-tile strong { font-size: .69rem; line-height: 1.15; overflow-wrap: anywhere; }
.reference-wardrobe-tile small { padding: .12rem .3rem; border-radius: 1rem; background: #eee1ff; color: #513171; font-size: .6rem; font-weight: 800; }
.reference-wardrobe-art, .reference-wardrobe-empty, .reference-wardrobe-tile .reference-club-unpictured {
  display: grid; place-items: center; width: 3.3rem; max-width: 100%; height: 3.3rem; object-fit: contain;
}
.reference-wardrobe-shop { justify-self: end; }
.reference-item-use { color: #664488; font-weight: 750; }
.reference-game-prize { display: flex; align-items: center; gap: .55rem; width: fit-content; margin: .45rem auto; padding: .3rem .85rem .3rem .4rem; border-radius: .8rem; background: #fff3d4; color: #693c18; font-weight: 800; }
.reference-game-prize-art { display: block; width: 3.6rem; height: 3.6rem; object-fit: contain; }
[data-worn-item="friendly-ghost"] .reference-worn-accessory { animation: reference-friendly-ghost 7s ease-in-out infinite; }
@keyframes reference-friendly-ghost {
  0%, 100% { transform: translate(0, 0) rotate(-7deg); }
  20% { transform: translate(-90%, -61%) rotate(-12deg) scale(.78); }
  40% { transform: translate(-185%, -5%) rotate(-8deg) scale(.9); }
  61% { transform: translate(-152%, 154%) rotate(6deg) scale(.82); }
  80% { transform: translate(-22%, 153%) rotate(12deg) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  [data-worn-item="friendly-ghost"] .reference-worn-accessory { animation: none; }
}
@media (max-width: 590px) {
  .reference-wardrobe-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 81dvh; }
  .reference-wardrobe-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); align-items: center; gap: .52rem; max-height: 42dvh; }
  .reference-wardrobe-preview .reference-portrait-wrap { width: min(100%, 25vw, 8.4rem); margin: 0 auto; }
  .reference-wardrobe-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 4.65rem), 1fr)); }
}
@media (max-height: 460px) and (orientation: landscape) {
  .reference-wardrobe-dialog .dialog-head { padding-block: .28rem; }
  .reference-wardrobe-stage { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: .35rem; }
}
.reference-growth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.35rem, 1.5vw, .65rem);
  margin-top: .85rem;
}
.reference-growth-tile {
  min-width: 0;
  display: grid;
  gap: .26rem;
  align-content: start;
  justify-items: center;
  text-align: center;
  background: #fefbf5;
  border: 1px solid #e5d1a1;
  border-radius: .9rem;
  padding: .75rem .35rem;
  font-size: clamp(.83rem, 3.4vw, .95rem);
  line-height: 1.28;
}
.reference-growth-tile.is-current { background: #fff1f1; border-color: var(--club-wine); }
.reference-growth-tile small { color: #625665; font-size: .8rem; }
.reference-growth-art {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 7.35rem;
  margin-bottom: .32rem;
}
.reference-growth-art img { display: block; width: 100%; height: 100%; object-fit: scale-down; }
.reference-growth-sheet { margin-top: .85rem; }
.reference-growth-sheet img { display: block; width: 100%; height: auto; margin-top: .55rem; border-radius: .65rem; }
.reference-buddy-information { min-width: 0; }
.reference-club-tag {
  display: inline-block;
  justify-self: center;
  width: fit-content;
  padding: .23em .73em;
  border: 1px solid #d0c6f6;
  border-radius: 999px;
  background: #f0ebfe;
  color: #5f4c9a;
  font-weight: 800;
  font-size: .7rem;
  line-height: 1.35;
}
.reference-buddy-information h2 { margin: .1rem 0 .43rem; font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -.035em; overflow-wrap: anywhere; }
.reference-buddy-species { margin-bottom: .9rem !important; font-size: .88rem; font-weight: 700; }
.reference-buddy-xp { font-weight: 800; font-size: .94rem; color: var(--club-ink) !important; }
.reference-buddy-meter {
  height: .42rem;
  margin: .85rem 0 1.2rem;
  border-radius: 999px;
  border: 1px solid #c4bdc4;
  background: #f0eeef;
  overflow: hidden;
}
.reference-buddy-meter > span { display: block; height: 100%; background: #a04565; }
.reference-club-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.reference-nickname-form { margin-top: .98rem; }
.reference-nickname-form label { font-size: .84rem; font-weight: 800; }
.reference-nickname-form label { margin: 0 0 .4rem; }
.reference-nickname-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .4rem; }
.reference-nickname-form p { font-size: .78rem; margin: .5rem 0; }
.reference-nickname-form input, .reference-wardrobe-search input, .reference-club-dialog select {
  min-width: 0;
  width: 100%;
  min-height: 2.15rem;
  border: 1px solid var(--club-line);
  border-radius: .7rem;
  color: var(--club-ink);
}
.reference-buddy-story { margin-top: 1.1rem; }
.reference-club .reference-buddy-story-note { margin-top: 1.1rem; font-size: .82rem; }
.reference-pet-care { margin-top: 1rem; padding: .7rem .8rem; border: 1px solid #e0d6f2; border-radius: .8rem; background: #faf6ff; }
.reference-pet-care summary { cursor: pointer; font-weight: 800; }
.reference-pet-care label { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-top: .42rem; font-size: .82rem; }
.reference-pet-care meter { width: min(55%, 8rem); }
.reference-pet-care p { font-size: .84rem; }
.reference-pet-care button { margin: .55rem 0 .25rem; }
.reference-care-quests { background: linear-gradient(140deg, #f7f3ff, #fff8ec); }
.reference-care-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .2rem .7rem; }
.reference-care-heading span { color: #624689; font-size: .75rem; font-weight: 850; }
.reference-care-quests #reference-pet-status { margin: .35rem 0 .65rem; }
.reference-care-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .55rem; }
.reference-care-options button { display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left; gap: .12rem .5rem; margin: 0; }
.reference-care-options button > span { grid-row: span 2; color: #69428e; font-size: 1.4rem; }
.reference-care-options button > small { color: #563c70; font-size: .74rem; }
.reference-care-options button[data-needed="true"] { border-color: #dcab60; background: #fff0cf; }
.reference-care-quests #reference-pet-demo-away { font-size: .8rem; }

.reference-pet-portrait { position: relative; width: min(100%, 18rem); margin-inline: auto; }
.reference-pet-portrait[data-sleepy="true"] .reference-portrait-wrap { transform: none; }
.reference-pet-portrait[data-sleepy="true"] .reference-creature-figure > :is(img, .reference-sprite-crop, svg) {
  transform: translateY(3%) rotate(-3deg); transform-origin: 50% 85%;
}
.reference-pet-rest-nest {
  position: absolute; z-index: 1; left: 13%; right: 13%; bottom: 7%; height: 15%;
  border: 2px solid #b8a6d4; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 25%, #f1e9fc 25%, #d6c8e9 65%, #a995c8);
  box-shadow: 0 4px 6px #41395525, inset 0 -4px 6px #a494bd55;
}
.reference-pet-pillow {
  position: absolute; left: 5%; top: -13%; width: 29%; height: 80%;
  border: 1px solid #b7a6ce; border-radius: 44%; transform: rotate(-8deg);
  background: linear-gradient(160deg, #fff7fc, #ded0ee); box-shadow: inset 0 -3px 5px #b6a7cb55;
}
.reference-pet-portrait[data-sleepy="true"] .reference-creature-display:not([data-accessory-placement="platform"]) > .reference-creature-figure { position: relative; z-index: 2; }
.reference-pet-dreamscape { position: absolute; z-index: 3; inset: 0; pointer-events: none; overflow: hidden; border-radius: 1rem; }
.reference-pet-moon { position: absolute; top: 3%; left: 5%; font-size: 1.6rem; color: #d8ae53; text-shadow: 0 0 .3rem #fff3be; }
.reference-pet-dream-stars { position: absolute; top: 13%; left: 4%; color: #9c80be; font-size: .7rem; letter-spacing: .2rem; }
@media (prefers-reduced-motion: no-preference) {
  .reference-pet-portrait[data-sleepy="true"][data-care-reaction=""] .reference-creature-figure > :is(img, .reference-sprite-crop, svg) { animation: reference-pet-breathe 4.6s ease-in-out infinite; }
}
@keyframes reference-pet-breathe {
  0%, 100% { transform: translateY(3%) rotate(-3deg) scale(1); }
  50% { transform: translateY(2.2%) rotate(-3deg) scale(1.012); }
}
.reference-pet-sleepy, .reference-pet-hungry {
  position: absolute; z-index: 5; pointer-events: none; font-weight: 900;
  filter: drop-shadow(0 2px 0 #fff9);
}
.reference-pet-sleepy { top: 4%; right: 3%; color: #7b65a0; font-size: .78rem; transform: rotate(-8deg); animation: reference-pet-float 3.8s ease-in-out infinite alternate; }
.reference-pet-sleepy span:first-child { font-size: 1rem; vertical-align: .14em; }
.reference-pet-sleepy span:last-child { font-size: 1.2rem; vertical-align: .24em; }
.reference-pet-hungry { bottom: 8%; left: 1%; padding: .4em .6em; border: 2px solid #deb575; border-radius: 1em 1em 1em .3em; color: #7a441e; background: #fff2d1; font-size: .82rem; animation: reference-pet-rumble .72s ease-in-out 3; }
.reference-pet-hungry > span { margin-left: .12rem; }
.reference-care-review, .reference-care-complete { display: grid; gap: .65rem; text-align: center; }
.reference-care-review .reference-club-actions { justify-content: center; }
.reference-care-review .reference-club-actions button[hidden], .reference-care-word p[hidden] { display: none; }
.reference-care-step { color: #654891; font-size: .84rem; font-weight: 850; }
.reference-care-word { display: grid; gap: .35rem; padding: .9rem .65rem; border: 2px solid #e1cfee; border-radius: .9rem; background: #f9f4fe; }
.reference-care-word strong { font-size: clamp(1.28rem, 4vw, 2rem); line-height: 1.32; }
.reference-care-word p { margin: 0; }
#reference-care-meaning { padding-top: .45rem; border-top: 1px solid #e1cfee; font-weight: 700; }
.reference-care-complete { justify-items: center; padding: .35rem .1rem .55rem; }
.reference-care-complete > p { font-weight: 850; font-size: 1.1rem; }
.reference-care-complete .reference-pet-portrait { background: radial-gradient(circle, #f8e9a2 0%, #fff6d6 37%, transparent 69%); }
.reference-pet-portrait[data-care-reaction]:not([data-care-reaction=""]) .reference-portrait-wrap { animation: reference-pet-celebrate 1.55s cubic-bezier(.28,.82,.44,1) both; }
.reference-pet-burst { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.reference-pet-burst i {
  position: absolute; top: 50%; left: 50%; color: #a83b7a; font: 850 clamp(1.2rem, 4vw, 1.85rem)/1 system-ui, sans-serif;
  text-shadow: 0 0 .3em white; animation: reference-pet-burst 1.5s .1s ease-out both;
}
.reference-pet-burst i:nth-child(1) { --burst-x: -365%; --burst-y: -215%; color: #a96306; }
.reference-pet-burst i:nth-child(2) { --burst-x: -325%; --burst-y: -45%; animation-delay: .26s; }
.reference-pet-burst i:nth-child(3) { --burst-x: -20%; --burst-y: -410%; color: #7843a7; }
.reference-pet-burst i:nth-child(4) { --burst-x: 275%; --burst-y: -55%; animation-delay: .28s; }
.reference-pet-burst i:nth-child(5) { --burst-x: 305%; --burst-y: -235%; color: #a96306; }
@keyframes reference-pet-float { to { transform: translateY(-.24rem) rotate(-12deg); } }
@keyframes reference-pet-rumble { 20%, 60% { transform: translateX(-.14rem) rotate(-4deg); } 40%, 80% { transform: translateX(.14rem) rotate(4deg); } }
@keyframes reference-pet-celebrate {
  0%, 100% { transform: none; }
  12%, 57% { transform: translateY(3%) scale(1.05, .91); }
  35% { transform: translateY(-14%) rotate(-8deg) scale(1.05); }
  79% { transform: translateY(-10%) rotate(7deg) scale(1.04); }
}
@keyframes reference-pet-burst {
  from { opacity: 0; transform: scale(.3); }
  29%, 71% { opacity: 1; transform: translate(var(--burst-x), var(--burst-y)) scale(1.1); }
  to { opacity: 1; transform: translate(var(--burst-x), var(--burst-y)); }
}
@media (prefers-reduced-motion: reduce) {
  .reference-pet-portrait[data-care-reaction]:not([data-care-reaction=""]) .reference-portrait-wrap,
  .reference-pet-sleepy, .reference-pet-hungry, .reference-pet-burst i { animation: none; }
  .reference-pet-burst i { transform: translate(var(--burst-x), var(--burst-y)); }
}
.reference-match-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; width: min(100%, 16rem); margin: .85rem auto; }
.reference-match-cards button { min-height: 2.5rem; aspect-ratio: 1; padding: 0; font-size: 1.4rem; }
.reference-match-cards button[aria-pressed="true"] { background: #fff4d1; }
.reference-match-cards button:disabled { opacity: 1; border-color: #b8d6c9; background: #e6f6ee; box-shadow: 0 3px 0 #bbdace; }
.reference-friend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: .62rem; margin-top: .75rem; }
.reference-club .reference-mini-buddy { display: grid; gap: .38rem; align-items: center; justify-items: center; min-height: 6rem; }
.reference-club .reference-mini-buddy[aria-pressed="true"] { background: #fff4f4; border-color: #ba7183; box-shadow: 0 3px #ead3d9; }
.reference-mini-art, .reference-mini-buddy .reference-club-unpictured { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.reference-club-unpictured {
  display: grid;
  place-items: center;
  color: #917dac;
  font-size: 2rem;
  line-height: 1;
  background: #f5eefb;
  border-radius: 50%;
}
.reference-portrait-wrap .reference-club-unpictured { width: 48%; aspect-ratio: 1 / 1; font-size: 3rem; }
.reference-club .reference-art-note { text-align: center; margin: -.4rem 0 .75rem; font-size: .76rem; }
.reference-shop-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.reference-club .reference-shop-heading h2, .reference-club .reference-shop h3 { color: var(--club-wine-deep); }
.reference-club .reference-shop-heading h2 { font-size: clamp(1.25rem, 3vw, 1.8rem); letter-spacing: -.035em; }
.reference-club .reference-shop-kicker {
  color: #8f472b;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 800;
}
.reference-shop-sign { flex: 0 0 auto; width: 5.4rem; aspect-ratio: 1; object-fit: contain; }
.reference-shop-links { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.reference-shop-links a {
  display: inline-block;
  padding: .55em .83em;
  border: 1px solid #e1bcd4;
  border-radius: 999px;
  background: #fff4fa;
  color: #884561;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}
.reference-treats, .reference-shop-accessories, .reference-accessory-group[id] { scroll-margin-top: .75rem; }
.reference-shop h3 + p { margin: .25rem 0 .72rem; font-size: .86rem; }
.reference-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.45rem, 1.65vw, .85rem); }
.reference-shop-card {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  justify-items: center;
  gap: .48rem;
  min-width: 0;
  padding: .7rem .65rem .85rem;
  border: 1px solid;
  border-radius: 1rem;
  text-align: center;
}
.reference-treat-card { border-color: #f0c69d; background: linear-gradient(#fff8e9, #fdf0e7); }
.reference-accessory-card { border-color: #e1c5ef; background: linear-gradient(#f8f1fd, #feeef6); }
.reference-shop-card h4 { font-size: .91rem; line-height: 1.2; align-self: center; }
.reference-shop-card p { font-size: .76rem; }
.reference-shop-card .reference-shop-price { font-weight: 800; color: #805026; }
.reference-shop-item-details { display: grid; align-content: start; gap: .28rem; align-self: start; }
.reference-shop-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.reference-shop-badge {
  padding: .2em .63em;
  border: 1px solid #d9d0e3;
  border-radius: 999px;
  background: #f0ecf6;
  color: #544666;
  font-size: .73rem;
  font-weight: 800;
  line-height: 1.3;
}
.reference-shop-badge[data-shop-kind="interactive"] { background: #ddf4e9; border-color: #a0d6c0; color: #235d4e; }
.reference-shop-badge[data-shop-kind="game"] { background: #eee2fc; border-color: #cdb4ed; color: #56367c; }
.reference-shop-badge[data-shop-kind="background"] { background: #e1effe; border-color: #b1cdeb; color: #2c557d; }
.reference-shop-badge[data-shop-kind="treat"] { background: #ffebcf; border-color: #edc697; color: #7c481c; }
.reference-shop-activity { color: #3d3159; font-weight: 800; line-height: 1.25; }
.reference-shop-xp, .reference-shop-season { color: #655772; font-size: .72rem; line-height: 1.25; }
.reference-club-dialog > .reference-shop-badges { margin-bottom: .5rem; }
.reference-shop-card button { width: 100%; align-self: end; font-size: .82rem; padding-inline: .3rem; }
.reference-shop-card .reference-game-buttons button { flex: 1 1 auto; width: auto; min-width: min(100%, 5rem); }
.reference-shop-card-art, .reference-shop-card .reference-club-unpictured {
  display: block;
  width: min(100%, 13rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.reference-shop-accessories, .reference-accessory-group + .reference-accessory-group { border-top: 1px dashed #d8b7cb; padding-top: 1.05rem; margin-top: 1.25rem; }
.reference-accessory-group > h4 { color: var(--club-wine-deep); font-size: .88rem; margin-bottom: .6rem; }
.reference-accessory-group > h4 small { color: var(--club-muted); }
.reference-shop-archive { margin-top: 1.35rem; padding: .85rem; border: 1px dashed #dfc0d5; border-radius: .85rem; }
.reference-shop-archive summary { cursor: pointer; color: var(--club-wine-deep); font-weight: 800; }
.reference-shop-archive p { margin-top: .45rem; font-size: .86rem; }
.reference-shop-archive ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .85rem; padding-inline-start: 1.15rem; font-size: .83rem; }
.reference-shop > p + button { margin-top: .9rem; }
.reference-album-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.5rem; }
.reference-album-tabs button { display: grid; justify-items: start; gap: .18rem; font-size: .85rem; text-align: start; }
.reference-album-tabs button span { font-size: .74rem; }
.reference-album-tabs button[aria-pressed="true"] { background: var(--club-purple); color: #fff; border-color: var(--club-purple); box-shadow: 0 4px var(--club-purple-shadow); }
.reference-collection > h2 { margin: 0 0 .35rem; letter-spacing: -.035em; }
.reference-collection-grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.reference-album-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: .55rem;
  text-align: center;
  min-width: 0;
  padding: .9rem;
  border: 1px solid #dcd2ee;
  border-radius: 1rem;
  background: #f9f7ff;
}
.reference-album-card.reference-collected { background: #fffaf2; border-color: var(--club-gold-line); }
.reference-album-art, .reference-album-card .reference-club-unpictured { width: min(100%, 6.3rem); aspect-ratio: 1 / 1; object-fit: scale-down; }
.reference-album-card h3 { font-size: 1rem; overflow-wrap: anywhere; }
.reference-album-card p { font-size: .8rem; }
.reference-album-card button { width: 100%; font-size: .83rem; }
.reference-album-card details > p { margin-top: .45rem; }
.reference-club .reference-club-empty { margin-top: 1.15rem; }
.reference-club .reference-collection-note { font-size: .83rem; margin-top: .45rem; }
.reference-club-dialog h3, .reference-club-dialog > p { text-align: center; margin-top: .5rem; }
.reference-item-scene { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: 1rem; background: #fcf6eb; border-radius: 1rem; }
.reference-item-scene:empty { display: none; }
.reference-item-scene > img { width: min(43%, 8.75rem); height: auto; aspect-ratio: 1 / 1; object-fit: scale-down; }
.reference-item-scene > .reference-item-image { width: min(48%, 11rem); height: auto; aspect-ratio: 1; object-fit: contain; }
.reference-item-scene > .reference-item-image:only-child { width: min(100%, 13rem); }
.reference-club-dialog form { margin-top: .8rem; }
.reference-club-dialog form p { margin-top: .5rem; }
.reference-club-dialog button { margin-top: .9rem; }
.reference-collection-story { text-align: center; }
.reference-collection-story .reference-album-art { width: min(62%, 10rem); }
.reference-collection-story p + p { text-align: start; }
.reference-creature-image, .reference-item-image { max-width: 100%; }
.reference-creature-display {
  --portrait-light: #fff2cf;
  --portrait-edge: #dbb46d;
  --portrait-dark: #9d662f;
  --portrait-size: 88%;
  display: inline-grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
.reference-creature-display[data-palette="jade"],
.reference-creature-display[data-palette="mint"] {
  --portrait-light: #e4f4da; --portrait-edge: #91ba86; --portrait-dark: #457955;
}
.reference-creature-display[data-palette="rose"] {
  --portrait-light: #ffe6df; --portrait-edge: #dc9e97; --portrait-dark: #a45e65;
}
.reference-creature-display[data-palette="sky"] {
  --portrait-light: #e2f4ff; --portrait-edge: #9ebfd9; --portrait-dark: #4d769e;
}
.reference-creature-display[data-palette="plum"] {
  --portrait-light: #f0e4ff; --portrait-edge: #c3a7df; --portrait-dark: #7a5c9e;
}
.reference-creature-display[data-palette="ember"] {
  --portrait-light: #ffe9d2; --portrait-edge: #e4ad81; --portrait-dark: #9f523c;
}
.reference-creature-display::before,
.reference-creature-display::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.reference-creature-display::before {
  inset: 12%;
  border: 1px solid var(--portrait-edge);
  background: radial-gradient(circle at 40% 31%, #fffdf2 5%, var(--portrait-light) 72%);
  box-shadow: inset 0 0 0 3px #fff9ed, 0 3px 10px #70544017;
}
.reference-creature-display::after { inset: 7%; border: 1px solid transparent; }
.reference-creature-display[data-level="2"]::after { border-color: var(--portrait-edge); opacity: .74; }
.reference-creature-display[data-level="3"]::after { border: 2px dotted var(--portrait-edge); }
.reference-creature-display[data-level="4"]::after {
  border-color: var(--portrait-edge);
  box-shadow: 0 0 0 3px #f9e3af80, 0 0 15px var(--portrait-light);
}
.reference-creature-display[data-level="5"]::after {
  border: 3px double var(--portrait-dark);
  box-shadow: 0 0 0 3px #ffe9ab99, 0 0 19px var(--portrait-light);
  background:
    radial-gradient(circle at 22% 18%, #ffd670 0 2%, transparent 2.8%),
    radial-gradient(circle at 82% 28%, #ffd670 0 1.5%, transparent 2.3%),
    radial-gradient(circle at 22% 79%, #ffd670 0 1.5%, transparent 2.3%);
}
.reference-creature-display[data-framed="false"]::before,
.reference-creature-display[data-framed="false"]::after { display: none; }
.reference-creature-display[data-framed="false"] { --portrait-size: 100%; }
.reference-creature-display[data-art="setting"][data-level="2"] { --portrait-size: 90%; }
.reference-creature-display[data-art="setting"][data-level="3"] { --portrait-size: 93%; }
.reference-creature-display[data-art="setting"][data-level="4"] { --portrait-size: 96%; }
.reference-creature-display[data-art="setting"][data-level="5"] { --portrait-size: 99%; }
.reference-creature-figure {
  display: block;
  width: var(--portrait-size);
  aspect-ratio: 1;
  min-width: 0;
}
.reference-creature-display[data-accessory-placement="head"] > .reference-creature-figure {
  position: relative;
  z-index: 1;
  width: min(var(--portrait-size), 84%);
  transform: translateY(6%);
}
.reference-creature-display[data-accessory-placement="lantern"] > .reference-creature-figure {
  position: relative;
  z-index: 1;
  width: min(var(--portrait-size), var(--wear-lantern-buddy-width));
  transform: translate(9%, 9%);
}
.reference-creature-display[data-accessory-placement="side"] > .reference-creature-figure {
  position: relative;
  z-index: 1;
  width: min(var(--portrait-size), var(--wear-prop-buddy-width));
  transform: translate(var(--wear-prop-buddy-x), var(--wear-prop-buddy-y));
}
.reference-creature-display[data-accessory-placement="platform"] > .reference-creature-figure {
  position: absolute;
  inset: auto auto var(--accessory-floor) 50%;
  z-index: 2;
  width: min(var(--portrait-size), 69%);
  transform: translateX(-50%);
}
.reference-creature-display[data-accessory-placement="setting"] > .reference-creature-figure {
  position: relative;
  z-index: 1;
  width: min(var(--portrait-size), 77%);
  transform: translateY(7%);
}
.reference-creature-display[data-setting="harvest-basket"] > .reference-creature-figure {
  width: min(var(--portrait-size), 81%); transform: translateY(5%);
}
.reference-creature-display[data-setting="harvest-basket"] { --setting-edge: #729e8f; --setting-shadow: #1d66583d; }
.reference-creature-display[data-setting="floating-island"] > .reference-creature-figure {
  width: min(var(--portrait-size), 70%);
  transform: translateY(-14%);
}
.reference-creature-display[data-accessory-placement="setting"]:has(> .reference-flower-bed) > .reference-creature-figure {
  width: min(var(--portrait-size), 73%);
  transform: translateY(-2%);
}
.reference-creature-display[data-setting="gingerbread-cottage"] > .reference-creature-figure {
  width: min(var(--portrait-size), 68%);
  transform: translate(15%, 13%);
}
.reference-creature-display[data-setting] > .reference-creature-figure {
  filter: drop-shadow(0 5px 4px var(--setting-shadow, #271b5559));
}
.reference-creature-figure > .reference-creature-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.reference-sprite-crop { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.reference-creature-display .reference-sprite-sheet {
  display: block;
  position: absolute;
  width: var(--sheet-width);
  height: var(--sheet-height);
  max-width: none;
  max-height: none;
  left: var(--sheet-x);
  top: var(--sheet-y);
}
.reference-growth-art > .reference-creature-display { width: 100%; }
.reference-item-scene > .reference-creature-display { width: min(45%, 9.5rem); }
.reference-item-scene > :is(.reference-aura-preview, .reference-accessory-preview) { width: min(100%, 13rem); }
.reference-album-card .reference-album-art { width: min(100%, 8.7rem); }
.reference-club-reward {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem .9rem;
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  border: 1px solid #e7ce89;
  border-radius: 1.1rem;
  background: #fff4d2;
}
.reference-club-reward > span { font-size: 1.5rem; }
.reference-club-reward > div { flex: 1 1 145px; }
.reference-club-reward p { font-size: .86rem; }
.reference-album-card progress { width: 100%; max-width: 220px; accent-color: var(--club-purple); }
@media (max-width: 670px) {
  .reference-club .reference-buddy-panel { grid-template-columns: minmax(0, 1fr); }
  .reference-buddy-art { padding: clamp(.75rem, 4vw, 1.2rem); }
  .reference-growth-tile { padding: .65rem .3rem; border-radius: .85rem; }
  .reference-buddy-information { padding: .15rem .15rem .25rem; }
  .reference-club-tabs button { min-height: 2.45rem; font-size: clamp(.66rem, 2.75vw, .88rem); border-radius: .68rem; }
  .reference-club-tabs { gap: .31rem; margin-bottom: .85rem; }
  .reference-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 470px) {
  .reference-game-hall-banner { grid-template-columns: minmax(0, 1fr); }
  .reference-game-hall-banner img { max-height: 9rem; }
}
@media (max-width: 375px) {
  .reference-shop-card { padding-inline: .4rem; }
  .reference-nickname-form > div { grid-template-columns: minmax(0, 1fr); }
  .reference-nickname-form button { justify-self: start; }
}
.reference-collection-filters {
  display: grid;
  grid-template-columns: minmax(8rem, 2fr) minmax(6rem, 1fr);
  gap: .7rem;
  max-width: 34rem;
  margin: .9rem 0;
}
.reference-collection-filters label { display: grid; gap: .25rem; font-size: .84rem; font-weight: 800; }
.reference-collection-filters input, .reference-collection-filters select { width: 100%; min-width: 0; }
.reference-album-card[hidden] { display: none; }
.reference-rarity[data-tier="common"] { background: #e8f4ec; color: #23573e; }
.reference-rarity[data-tier="uncommon"] { background: #e7effc; color: #24487a; }
.reference-rarity[data-tier="rare"] { background: #ede7fa; color: #573685; }
.reference-rarity[data-tier="legendary"] { background: #fff0c1; color: #6e4214; }
.reference-mystery-egg {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  aspect-ratio: 4 / 5;
  border: 1px solid #ba995a;
  border-radius: 49% 49% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 33% 28%, #fffef7 4%, #ffe9a7 47%, #f0be71 84%);
  box-shadow: inset -3px -4px 0 #ab702322, 0 3px 5px #64442b21;
  color: #86551f;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.reference-mystery-egg.reference-album-art { width: 3.5rem; height: auto; margin-block: .45rem; }
.reference-locked-creature { background: #fffcf6; }
.reference-guest-egg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin: .5rem 0 1rem;
  padding: 1rem;
  border: 1px solid #e7ce89;
  border-radius: 1.1rem;
  background: #fff7df;
}
.reference-guest-egg > .reference-mystery-egg { flex: 0 0 3rem; }
.reference-guest-egg > div { flex: 1 1 11rem; }
.reference-guest-egg button { min-height: 2.6rem; }

/* The equipped world is shared by clubhouse, header and practice portraits. */
.reference-scene-thumbnail { border-radius: .8rem; object-fit: cover; }
.reference-creature-display:not([data-setting]):not([data-framed="false"])::before {
  inset: 2%; border-radius: 1.1rem; border-color: #b8c9de;
  background:
    radial-gradient(ellipse at 50% 85%, #86b9b854 0 21%, transparent 22%),
    radial-gradient(ellipse at 25% 20%, #ffffffe6, transparent 54%),
    linear-gradient(160deg, #dfedfb 8%, var(--portrait-light) 63%, #b6ddd8);
  box-shadow: inset 0 0 0 2px #ffffff80, 0 3px 10px #55507415;
}
.reference-creature-display[data-setting]::before,
.reference-creature-display[data-setting]::after { display: none; }
.reference-portrait-setting { border-radius: 1.1rem; }
.reference-creature-display:is([data-setting="mushroom-garden"], [data-setting="halloween-garden"]) > .reference-creature-figure {
  width: min(var(--portrait-size), 73%); transform: translateY(10%);
}
.reference-creature-display[data-setting="rainbow-flower-crown"] { --setting-edge: #ec9bc7; --setting-shadow: #823e7c45; }
.reference-creature-display[data-setting="sun-shell"],
.reference-creature-display[data-setting="wave-board"] { --setting-edge: #82cad0; --setting-shadow: #1a798b55; }
.reference-creature-display[data-setting="dragon-shield"] { --setting-edge: #7998cc; --setting-shadow: #163c965e; }
.reference-creature-display[data-setting="meteor-crystal"] > .reference-creature-figure {
  filter: saturate(1.45) hue-rotate(43deg) drop-shadow(-2px 0 3px #79e6f5) drop-shadow(2px 0 4px #b395fa);
}
.reference-creature-display[data-setting="dragon-shield"] > .reference-creature-figure {
  filter: drop-shadow(0 4px 4px #1c375f70) drop-shadow(0 0 4px #96e7ffc0);
}
.reference-cauldron-aura {
  position: absolute; inset: 42% -6% -2% 4%; border-radius: 50%;
  background: radial-gradient(ellipse at 72% 50%,#b57afc66,transparent 67%);
  box-shadow: inset 0 -6px 13px #bd83e933;
}
.reference-cauldron-runes {
  position: absolute; bottom: 7%; left: 17%; right: 9%; text-align: center;
  font: 700 clamp(.55rem, 1.8vw, 1.15rem)/1 system-ui; letter-spacing: .15em;
  color: #d5f2b7; text-shadow: 0 0 4px #b6e588; opacity: .8;
}
.reference-prop-slot[data-worn-item="halloween-cauldron"]::before {
  inset: 8% -15% 10%; opacity: .9;
  background: radial-gradient(ellipse, #b6f2a4a6, #a177e478 45%, transparent 70%);
}
.reference-cauldron-bubbles i { background: #d99af199; border-color: #f1d5ffba; }
.reference-weather-rays {
  position: absolute; top: -12%; right: -15%; width: 68%; aspect-ratio: 1;
  background: repeating-conic-gradient(from 12deg, #fff0a640 0deg 10deg, transparent 11deg 30deg);
  border-radius: 50%; opacity: .7;
}
.reference-weather-cloud {
  position: absolute; left: 3%; top: 12%; width: 28%; height: 11%; border-radius: 50%;
  background: #f1f5ffe6; box-shadow: 0 2px 3px #90a9cb70;
}
.reference-weather-cloud::before, .reference-weather-cloud::after {
  content: ""; position: absolute; background: #f1f5ff; border-radius: 50%;
}
.reference-weather-cloud::before { left: 17%; bottom: 20%; width: 42%; height: 145%; }
.reference-weather-cloud::after { right: 9%; bottom: 18%; width: 43%; height: 116%; }
.reference-weather-rain { position: absolute; inset: 0; }
.reference-weather-rain i { position: absolute; left: 8%; top: 31%; width: 1.2%; height: 4%; border-radius: 50%; background: #96cdeb; --drop-delay: 0s; }
.reference-weather-rain i:nth-child(2) { left: 16%; top: 29%; --drop-delay: -.8s; }
.reference-weather-rain i:nth-child(3) { left: 26%; top: 34%; --drop-delay: -1.7s; }
.reference-weather-rain i:nth-child(4) { left: 4%; top: 40%; --drop-delay: -.4s; }
.reference-prop-slot[data-worn-item="weather-charm"] { filter: drop-shadow(0 2px 3px #6178a455); }
.reference-crystal-halo {
  position: absolute; inset: 13% 14% 9%; border-radius: 48%; border: 2px solid #a7edf296;
  box-shadow: inset 0 0 20px #9c83eb6b, 0 0 14px #6cdbed66;
  background: radial-gradient(ellipse, #a9e7f82b, transparent 65%);
}
.reference-orbit-sparks { position: absolute; inset: 0; }
.reference-orbit-sparks i {
  position: absolute; left: 9%; top: 28%; color: #f4df82; font: 800 clamp(.5rem,2vw,1.2rem)/1 system-ui;
  text-shadow: 0 0 4px #fff6c6; --spark-delay: 0s;
}
.reference-orbit-sparks i:nth-child(2) { left: 19%; top: 77%; --spark-delay: -.8s; }
.reference-orbit-sparks i:nth-child(3) { left: 84%; top: 48%; --spark-delay: -1.7s; }
.reference-orbit-sparks i:nth-child(4) { left: 79%; top: 14%; --spark-delay: -2.6s; }
[data-equipped-ambient="crystal"] .reference-orbit-sparks i { color: #b9f6ff; text-shadow: 0 0 4px #8f7bff; }
[data-equipped-ambient="bow-sparkles"] .reference-orbit-sparks i { color: #ee91c8; text-shadow: 0 0 4px #ffd9f3; }
.reference-lantern-light {
  position: absolute; top: 3%; left: -10%; width: 68%; height: 83%; border-radius: 50%;
  background: radial-gradient(ellipse at 37% 37%, #ffe4a065, #f8c27c24 42%, transparent 70%);
}
.reference-lantern-decoration { filter: drop-shadow(0 0 5px #ffdd8f9c); }
.reference-lantern-fireflies, .reference-village-spores { position: absolute; inset: 0; }
.reference-lantern-fireflies i, .reference-village-spores i {
  position: absolute; top: 27%; left: 81%; width: 1.6%; aspect-ratio: 1; border-radius: 50%;
  background: #fff0a2; box-shadow: 0 0 4px 2px #f0d16c88; --spark-delay: 0s;
}
.reference-lantern-fireflies i:nth-child(2), .reference-village-spores i:nth-child(2) { top: 64%; left: 91%; --spark-delay: -1.3s; }
.reference-lantern-fireflies i:nth-child(3), .reference-village-spores i:nth-child(3) { top: 57%; left: 9%; --spark-delay: -2.8s; }
.reference-lantern-fireflies i:nth-child(4) { top: 13%; left: 61%; --spark-delay: -.7s; }
.reference-village-spores i { background: #bff5d5; box-shadow: 0 0 4px 2px #94e5bf66; }
.reference-surf-wave {
  position: absolute; left: -15%; bottom: 1%; width: 130%; height: 12%; border-radius: 50% 50% 0 0;
  background: linear-gradient(#d9fbff8f 0 10%,#55c7da85 14%,#3a9ac85c); border-top: 2px solid #eafff8b0;
}
.reference-surf-wave:nth-child(2) { bottom: -5%; left: -5%; opacity: .7; }
.reference-surf-spray { position: absolute; bottom: 15%; left: 4%; color: #efffff; font-size: .75rem; letter-spacing: .1rem; }
.reference-dragon-ring {
  position: absolute; inset: 7% 8% 8%; border: 2px solid #8ab4f399;
  clip-path: polygon(24% 0,76% 0,100% 25%,100% 75%,76% 100%,24% 100%,0 75%,0 25%);
  background: linear-gradient(140deg,#8febff23,transparent 48%,#976cdd35);
  box-shadow: inset 0 0 18px #73cdf78c;
}
.reference-dragon-bolt {
  position: absolute; right: 5%; top: 5%; width: 9%; height: 22%;
  clip-path: polygon(47% 0,100% 0,64% 37%,97% 35%,16% 100%,40% 52%,0 57%);
  background: #bdeaff; filter: drop-shadow(0 0 4px #8bafff); opacity: .7;
}
[data-equipped-ambient="dragon-power"] .reference-orbit-sparks i { color: #a2e3ff; text-shadow: 0 0 4px #8c9cf2; }
.reference-candy-sparkles { position: absolute; inset: 0; }
.reference-candy-sparkles i { position: absolute; left: 10%; top: 21%; color: #ffeb99; font-size: .9rem; --spark-delay: 0s; }
.reference-candy-sparkles i:nth-child(2) { left: 89%; top: 61%; color: #b6fcf6; --spark-delay: -1.2s; }
.reference-candy-sparkles i:nth-child(3) { left: 77%; top: 11%; color: #ffc0e3; --spark-delay: -2.3s; }
@media (prefers-reduced-motion: no-preference) {
  .reference-cauldron-aura, .reference-crystal-halo { animation: reference-world-glow 5.5s ease-in-out infinite alternate; }
  .reference-weather-cloud { animation: reference-weather-drift 9s ease-in-out infinite alternate; }
  .reference-weather-rays { animation: reference-aura-turn 70s linear infinite; }
  .reference-weather-rain i { animation: reference-weather-drop 2.8s ease-in var(--drop-delay) infinite; }
  .reference-orbit-sparks i, .reference-lantern-fireflies i, .reference-village-spores i, .reference-candy-sparkles i { animation: reference-world-spark 3.8s ease-in-out var(--spark-delay) infinite; }
  .reference-lantern-light { animation: reference-world-glow 7s ease-in-out infinite alternate; }
  .reference-surf-wave { animation: reference-surf-roll 6s ease-in-out infinite alternate; }
  .reference-surf-wave:nth-child(2) { animation-delay: -3s; }
  .reference-dragon-ring { animation: reference-world-glow 6s ease-in-out infinite alternate; }
}
@keyframes reference-world-glow { from { opacity: .48; } to { opacity: .95; } }
@keyframes reference-weather-drift { from { transform: translateX(-8%); } to { transform: translateX(16%); } }
@keyframes reference-weather-drop { 0%,15% { opacity: 0; transform: translateY(0); } 35% { opacity: .85; } 100% { opacity: 0; transform: translate(-80%,420%); } }
@keyframes reference-world-spark { 0%,100% { opacity: .4; transform: translateY(0) scale(.75); } 50% { opacity: 1; transform: translateY(-18%) scale(1.12); } }
@keyframes reference-surf-roll { from { transform: translateX(-3%) rotate(-2deg); } to { transform: translateX(3%) rotate(2deg); } }

/* Festival worlds use the whole portrait; nothing has to fit a particular head. */
.reference-creature-display[data-equipped-item="crown"]:not([data-framed="false"])::before {
  border-color: #efc96d;
  background: radial-gradient(ellipse at 50% 48%, #fff5c9 12%, #f8d28c 63%, #bd6a59);
}
.reference-creature-display[data-equipped-item="galaxy-crown"]:not([data-framed="false"])::before {
  border-color: #9d9de8;
  background: radial-gradient(ellipse at 38% 35%, #ab9dde 0, #4b5387 55%, #1f294e);
}
.reference-creature-display[data-equipped-item="crown"] > .reference-creature-figure {
  filter: sepia(.78) saturate(1.8) hue-rotate(345deg) drop-shadow(0 0 3px #ffdd7e) drop-shadow(0 3px 3px #b7723170);
}
.reference-creature-display[data-equipped-item="galaxy-crown"] > .reference-creature-figure {
  filter: sepia(.58) saturate(1.8) hue-rotate(192deg) drop-shadow(-2px 0 3px #b8b6ff) drop-shadow(2px 0 4px #65d9f4);
}
.reference-tint-aura { --tint-light: #ffe6a2; --tint-color: #f1ba48; --tint-shade: #c96e35; }
.reference-tint-aura[data-aura-theme="cosmic"] { --tint-light: #b6f8ff; --tint-color: #a997ee; --tint-shade: #545ac4; }
.reference-tint-ring {
  position: absolute; inset: 13%; border: 2px solid var(--tint-color); border-radius: 50%;
  background: radial-gradient(circle, transparent 51%, color-mix(in srgb,var(--tint-light) 70%,transparent) 58%, transparent 69%);
  box-shadow: 0 0 10px var(--tint-color), inset 0 0 9px var(--tint-light);
}
[data-aura-theme="sunfire"] .reference-tint-ring {
  outline: 1px dotted var(--tint-shade); outline-offset: 5px;
}
.reference-tint-orbit {
  position: absolute; inset: 16% 5%; border: 2px solid var(--tint-light); border-radius: 50%;
  transform: rotate(-32deg); box-shadow: 0 0 4px var(--tint-color); opacity: .75;
}
[data-aura-theme="sunfire"] .reference-tint-orbit { inset: 7%; border: 2px dashed var(--tint-light); }
.reference-tint-sparks { position: absolute; inset: 0; }
.reference-tint-sparks i {
  position: absolute; left: 12%; top: 28%; color: var(--tint-light); font: 800 clamp(.6rem,2vw,1.2rem)/1 system-ui;
  text-shadow: 0 0 4px var(--tint-color); --spark-delay: 0s;
}
.reference-tint-sparks i:nth-child(2) { left: 80%; top: 20%; --spark-delay: -1.1s; }
.reference-tint-sparks i:nth-child(3) { left: 79%; top: 75%; --spark-delay: -2.2s; }
.reference-tint-sparks i:nth-child(4) { left: 18%; top: 79%; --spark-delay: -3.3s; }
.reference-tint-aura.reference-item-image { min-width: 2.5rem; min-height: 2.5rem; }
.reference-grand-fan {
  position: absolute; inset: 5% 1% auto; width: 98%; aspect-ratio: 1; z-index: 0;
  pointer-events: none; transform-origin: 50% 83%;
  filter: drop-shadow(0 3px 3px #6238476b);
}
.reference-grand-fan-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.reference-creature-display[data-accessory-placement="behind"] > .reference-creature-figure {
  position: relative; z-index: 1; width: min(var(--portrait-size), 70%); transform: translateY(16%);
}
.reference-treasure-seat {
  position: absolute; inset: auto 3% 1%; width: 94%; height: 41%; z-index: 1;
  pointer-events: none; filter: drop-shadow(0 4px 3px #8b442e66);
}
.reference-treasure-pile-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.reference-creature-display[data-accessory-placement="treasure"] > .reference-creature-figure {
  position: relative; z-index: 2; width: min(var(--portrait-size), 68%); transform: translateY(-12%);
}
.reference-lucky-coins { position: absolute; inset: 0; }
.reference-lucky-coins i {
  position: absolute; top: 65%; left: 12%; width: 7%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid #f7d984; background: radial-gradient(circle,#8b5628 0 15%,#ffeaa6 18% 48%,#e1a53d 50%);
  box-shadow: 0 1px 2px #99562e99, 0 0 5px #f8d77699; --coin-delay: 0s;
}
.reference-lucky-coins i:nth-child(2) { left: 83%; top: 70%; --coin-delay: -1.4s; }
.reference-lucky-coins i:nth-child(3) { left: 90%; top: 60%; width: 5%; --coin-delay: -2.6s; }
.reference-creature-display[data-setting="flower-crown"] { --setting-edge: #87e2d3; --setting-shadow: #1b306170; }
.reference-wilds-orbs { position: absolute; inset: 0; }
.reference-wilds-orbs i {
  position: absolute; left: 8%; top: 40%; width: 3%; aspect-ratio: 1; border-radius: 50%;
  background: #a4f9ed; box-shadow: 0 0 7px 3px #5adbd0aa; --spark-delay: 0s;
}
.reference-wilds-orbs i:nth-child(2) { left: 83%; top: 26%; background: #d7b4ff; --spark-delay: -1.1s; }
.reference-wilds-orbs i:nth-child(3) { left: 73%; top: 78%; --spark-delay: -2.5s; }
.reference-wilds-orbs i:nth-child(4) { left: 23%; top: 12%; width: 2%; background: #e9c1ff; --spark-delay: -3.8s; }
.reference-creature-display[data-setting="reference:lucky-lantern"] { --setting-edge: #dcaa60; --setting-shadow: #691a3b60; }
.reference-creature-display[data-setting="reference:dragon-lantern"] { --setting-edge: #947cc0; --setting-shadow: #1f144c88; }
.reference-lunar-lanterns, .reference-festival-fireworks, .reference-festival-ribbons,
.reference-party-bunting, .reference-festival-confetti { position: absolute; inset: 0; }
.reference-lunar-lanterns i {
  position: absolute; top: 13%; left: 7%; width: 13%; height: 14%; border-radius: 42%;
  background: repeating-linear-gradient(90deg,#db4d3e 0 15%,#f39054 16% 20%);
  border-block: 3px solid #ffd77e; box-shadow: 0 0 8px #f8bf5d88; --lantern-delay: 0s;
}
.reference-lunar-lanterns i::before {
  content: ""; position: absolute; width: 2px; height: 100%; left: 50%; bottom: 118%; background: #eed48e;
}
.reference-lunar-lanterns i::after {
  content: ""; position: absolute; width: 10%; height: 34%; left: 45%; top: 110%; background: #e9b659; border-radius: 0 0 30% 30%;
}
.reference-lunar-lanterns i:nth-child(2) { left: 81%; top: 15%; --lantern-delay: -1.6s; }
.reference-lunar-lanterns i:nth-child(3) { left: 47%; top: 1%; width: 10%; height: 11%; --lantern-delay: -3.2s; }
.reference-lunar-ground-glow {
  position: absolute; inset: 66% 1% 0; border-radius: 50%;
  background: radial-gradient(ellipse,#f4c36577,transparent 69%);
}
.reference-festival-fireworks i {
  position: absolute; left: 3%; top: 8%; width: 32%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(#ffe6a1 0deg 4deg,transparent 5deg 28deg,#fba77f 29deg 33deg,transparent 34deg 60deg);
  -webkit-mask: radial-gradient(circle,transparent 0 18%,#000 22% 56%,transparent 60%);
  mask: radial-gradient(circle,transparent 0 18%,#000 22% 56%,transparent 60%);
  filter: drop-shadow(0 0 3px #fc9f84); --firework-delay: 0s;
}
.reference-festival-fireworks i:nth-child(2) { left: 70%; top: 5%; width: 27%; --firework-delay: -1.4s; }
.reference-festival-fireworks i:nth-child(3) { left: 40%; top: -8%; width: 29%; --firework-delay: -2.7s; }
.reference-festival-ribbons i {
  position: absolute; left: 4%; top: 4%; width: 24%; height: 71%; border: 0 solid #e45859;
  border-left-width: .45rem; border-radius: 50%; transform: rotate(9deg); transform-origin: center top;
  box-shadow: -1px 0 0 #f7c864; --ribbon-delay: 0s;
}
.reference-festival-ribbons i:nth-child(2) { left: 75%; top: 9%; border-color: #edc658; transform: rotate(-11deg); --ribbon-delay: -1.2s; }
.reference-festival-ribbons i:nth-child(3) { left: 1%; top: 35%; height: 41%; border-color: #7ed8c4; --ribbon-delay: -2.5s; }
.reference-festival-ribbons i:nth-child(4) { left: 89%; top: 31%; height: 46%; border-color: #d9a9ed; --ribbon-delay: -3.6s; }
.reference-party-bunting { inset: 5% 3% auto; height: 12%; border-top: 1px solid #e6c68a; border-radius: 50%; }
.reference-party-bunting i {
  position: absolute; top: 1%; left: 6%; width: 11%; height: 74%;
  background: #a9c8fb; clip-path: polygon(0 0,100% 0,50% 100%); transform: rotate(9deg);
}
.reference-party-bunting i:nth-child(2) { left: 31%; background: #d4b4ef; transform: rotate(3deg); }
.reference-party-bunting i:nth-child(3) { left: 57%; background: #f1d58a; transform: rotate(-3deg); }
.reference-party-bunting i:nth-child(4) { left: 83%; background: #a8e6d7; transform: rotate(-9deg); }
[data-equipped-ambient="candy-party"] .reference-party-bunting i:nth-child(odd) { background: #f29dc4; }
.reference-festival-confetti i {
  position: absolute; left: 8%; top: 18%; width: 3%; height: 1.5%; background: #f8d585;
  transform: rotate(25deg); --confetti-delay: 0s;
}
.reference-festival-confetti i:nth-child(2) { left: 87%; top: 30%; background: #ed9dc5; --confetti-delay: -1.3s; }
.reference-festival-confetti i:nth-child(3) { left: 17%; top: 75%; background: #a7e3d6; --confetti-delay: -2.7s; }
.reference-festival-confetti i:nth-child(4) { left: 77%; top: 82%; background: #e6bdff; --confetti-delay: -3.9s; }
@media (prefers-reduced-motion: no-preference) {
  .reference-tint-ring { animation: reference-world-glow 5.8s ease-in-out infinite alternate; }
  .reference-tint-orbit { animation: reference-tint-orbit 28s linear infinite; }
  .reference-tint-sparks i, .reference-wilds-orbs i { animation: reference-world-spark 4.7s ease-in-out var(--spark-delay) infinite; }
  .reference-grand-fan { animation: reference-grand-fan-sway 8s ease-in-out infinite alternate; }
  .reference-lucky-coins i { animation: reference-lucky-coin-hop 4.6s ease-in-out var(--coin-delay) infinite; }
  .reference-lunar-lanterns i { animation: reference-lunar-sway 6.4s ease-in-out var(--lantern-delay) infinite alternate; }
  .reference-festival-fireworks i { animation: reference-festival-firework 4.2s ease-out var(--firework-delay) infinite; }
  .reference-festival-ribbons i { animation: reference-ribbon-sway 5.5s ease-in-out var(--ribbon-delay) infinite alternate; }
  .reference-festival-confetti i { animation: reference-confetti-drift 6.7s ease-in-out var(--confetti-delay) infinite; }
}
@keyframes reference-tint-orbit { from { transform: rotate(-32deg); } to { transform: rotate(328deg); } }
@keyframes reference-grand-fan-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes reference-lucky-coin-hop { 0%, 30%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-140%) rotate(18deg); } 68% { transform: translateY(0) rotate(-8deg); } 76% { transform: translateY(-20%) rotate(0); } }
@keyframes reference-lunar-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes reference-festival-firework { 0%, 12% { transform: scale(.12); opacity: 0; } 30% { opacity: 1; } 70%, 100% { transform: scale(1.1); opacity: 0; } }
@keyframes reference-ribbon-sway { from { transform: rotate(-5deg) translateX(-3%); } to { transform: rotate(5deg) translateX(3%); } }
@keyframes reference-confetti-drift { 0%,100% { transform: translateY(0) rotate(15deg); opacity: .5; } 50% { transform: translate(35%,160%) rotate(160deg); opacity: 1; } }

dialog:has(.buddy-game) {
  width: min(44rem, calc(100% - 1rem));
  max-width: none;
  max-height: calc(100dvh - 1.5rem);
}

dialog:has(.buddy-game) .dialog-body { max-height: calc(100dvh - 7rem); }

.buddy-game {
  --game-ink: #332b24;
  --game-cream: #fff6db;
  --game-brass: #d7ac62;
  display: grid;
  gap: .8rem;
  min-width: 0;
  color: var(--game-ink);
}

.buddy-game-scene {
  display: flex;
  align-items: end;
  min-height: clamp(8rem, 26vw, 12rem);
  padding: clamp(.75rem, 3vw, 1.3rem);
  overflow: hidden;
  border: 1px solid #cda561;
  border-radius: 1rem;
  background:
    linear-gradient(90deg, #102725 4%, #102725ec 28%, #1027255b 71%, #10272522),
    var(--game-scene), url('/reference-art/game-hall-empty.webp');
  background-position: center, right 42%, center;
  background-size: cover;
  background-color: #203b32;
  box-shadow: inset 0 0 0 3px #fbd58d28, 0 3px 0 #77562b24;
}

.buddy-game-scene-copy { display: grid; gap: .24rem; width: min(100%, 23rem); }
.buddy-game:not([data-buddy-game="magic-carpet"]):not([data-buddy-game="magic-8-ball"]) .buddy-game-scene {
  min-height: 5rem;
  padding: .6rem .85rem;
}
.buddy-game:not([data-buddy-game="magic-carpet"]):not([data-buddy-game="magic-8-ball"]) .buddy-game-scene-copy { width: min(100%, 35rem); }
.buddy-game:not([data-buddy-game="magic-carpet"]):not([data-buddy-game="magic-8-ball"]) .buddy-game-scene-copy > strong { font-size: 1.35rem; }
.buddy-game-scene-tag {
  color: #ffdc94;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.buddy-game-scene-copy > strong {
  color: #fff4da;
  font: 700 clamp(1.35rem, 4vw, 2rem)/1.05 Georgia, serif;
  text-shadow: 0 2px 5px #0e201f;
}
.buddy-game .buddy-game-instructions {
  margin: .15rem 0 0;
  color: #fff4df;
  font-size: .88rem;
  line-height: 1.4;
  text-shadow: 0 1px 3px #0c211b;
}
.buddy-game[data-buddy-game="magic-8-ball"] .buddy-game-scene,
.buddy-game[data-buddy-game="light-maze"] .buddy-game-scene,
.buddy-game[data-buddy-game="magic-carpet"] .buddy-game-scene { border-color: #d8ad64; }

.buddy-game-body {
  min-width: 0;
  padding: clamp(.45rem, 2vw, .85rem);
  border: 1px solid #dfca9e;
  border-radius: .9rem;
  background: radial-gradient(ellipse at 50% 0%, #fffdf1, #f1e4bd);
}
.buddy-game .buddy-game-status {
  margin: 0;
  min-height: 1.5em;
  padding: .55rem .75rem;
  border-inline-start: 3px solid #a37536;
  border-radius: .25rem .55rem .55rem .25rem;
  background: #f7edda;
  color: #60431f;
  font-weight: 750;
  line-height: 1.4;
}
.buddy-game .buddy-game-reward {
  margin: 0;
  color: #375537;
  font-size: .9rem;
  font-weight: 750;
}
.buddy-game-reward:empty { display: none; }
.buddy-game .buddy-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.buddy-game .buddy-game-actions:not(:has(button:not([hidden]))) { display: none; }
.buddy-game .buddy-game-actions button { margin: 0; min-height: 2.65rem; }
.buddy-game .buddy-game-actions .buddy-game-xp-skip {
  color: #624523;
  background: #fff5df;
  border-color: #bea274;
  box-shadow: 0 2px #d8c6a6;
  font-weight: 800;
}
.buddy-game .buddy-game-actions .buddy-game-xp-skip:hover { background: #ffe8a9; }
.buddy-game button:focus-visible { outline: 3px solid #bf5585; outline-offset: 2px; z-index: 2; }
.buddy-game button[aria-disabled="true"], .buddy-game button:disabled { cursor: default; }
.buddy-game [hidden] { display: none; }

.buddy-game-grid {
  display: grid;
  grid-template-columns: repeat(var(--game-cols), minmax(0, 1fr));
  gap: .46rem;
  width: 100%;
  max-width: 23rem;
  margin: 0 auto;
}
.buddy-game .buddy-game-cell {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: .2rem;
  margin: 0;
  border: 1px solid #be9a64;
  border-radius: .6rem;
  background: var(--game-cream);
  color: var(--game-ink);
  box-shadow: 0 3px 0 #60401d57;
  font-size: clamp(1rem, 6vw, 1.75rem);
  font-weight: 800;
  line-height: 1;
  touch-action: manipulation;
}
.buddy-game-cell img {
  display: block;
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px #2b21194a);
}
.buddy-game .buddy-game-cell:not([aria-disabled="true"]):not(:disabled):hover { filter: brightness(1.1); }
.buddy-game .buddy-game-cell:not([aria-disabled="true"]):not(:disabled):active { transform: translateY(1px); }

.buddy-game-rivals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .4rem;
  width: min(100%, 24rem);
  margin: 0 auto .7rem;
}
.buddy-game-rival {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  padding: .3rem .4rem;
  border-radius: .7rem;
  background: #f6ebdd;
  box-shadow: inset 0 0 0 1px #d8b79a;
}
.buddy-game-rival-opponent { background: #e0ecd5; box-shadow: inset 0 0 0 1px #a2b591; }
.buddy-game-rival .buddy-game-piece { flex: 0 0 auto; width: clamp(1.6rem, 7vw, 2.8rem); height: auto; }
.buddy-game-rival div { display: grid; min-width: 0; gap: .15rem; }
.buddy-game-rival strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(.91rem, 2.7vw, 1.15rem)/1 Georgia, serif; }
.buddy-game-rival small { color: #664a38; font-size: .67rem; font-weight: 700; white-space: nowrap; }
.buddy-game-versus { color: #8a6326; text-align: center; }

.buddy-game[data-buddy-game="tic-tac-toe"] .buddy-game-scene {
  border-color: #b55e67;
  background-image: linear-gradient(90deg, #452938 4%, #452938eb 28%, #4529384b 68%, transparent),
    var(--game-scene), url('/reference-art/game-hall-empty.webp');
}
.buddy-game[data-buddy-game="tic-tac-toe"] .buddy-game-body {
  border-color: #dbadb2;
  background: radial-gradient(ellipse at top, #fffbf2, #f7dfe4);
}
.buddy-game .buddy-game-noughts {
  gap: .32rem;
  width: min(100%, 20rem);
  padding: .47rem;
  border: 2px solid #954a55;
  border-radius: .85rem;
  background: repeating-linear-gradient(135deg, #f7d6d0 0 7px, #b35863 7px 14px);
  box-shadow: inset 0 0 0 2px #fff4de99, 0 4px 0 #793f49;
}
.buddy-game .buddy-game-noughts .buddy-game-cell {
  position: relative;
  border: 1px solid #e1b8a1;
  border-radius: .4rem;
  background: radial-gradient(ellipse at 42% 30%, #fff8e4, #edc9b5);
  box-shadow: inset 0 0 0 2px #fff8e9a6, 0 2px 1px #713c506e;
}
.buddy-game .buddy-game-noughts .buddy-game-cell::before { content: ''; position: absolute; width: 34%; height: 34%; border: 1px solid #8c67384a; border-radius: 50%; }
.buddy-game .buddy-game-noughts .buddy-game-x { background: radial-gradient(ellipse, #fff0c6, #e4bb93); }
.buddy-game .buddy-game-noughts .buddy-game-o { background: radial-gradient(ellipse, #fff8ee, #eeb1be); }
.buddy-game-noughts .buddy-game-piece {
  position: relative;
  z-index: 1;
  display: block;
  width: 74%;
  height: 74%;
  filter: drop-shadow(0 2px 1px #1b15184a);
}
.buddy-game[data-buddy-game="tic-tac-toe"] .buddy-game-rival-opponent {
  background: #fae6e9;
  box-shadow: inset 0 0 0 1px #e4aeb7;
}
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-scene {
  background-image: linear-gradient(90deg, #342127 4%, #342127ee 28%, #34212751 72%, #34212715),
    var(--game-scene), url('/reference-art/game-hall-empty.webp');
}
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-body {
  border-color: #88645a;
  background: radial-gradient(ellipse at top, #ede0cd, #bca5a5);
}
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-noughts {
  width: min(100%, 20rem);
  border-color: #513b3f;
  background: repeating-linear-gradient(138deg, #30272d 0 9px, #4b3339 9px 16px);
  box-shadow: inset 0 0 0 2px #a1726355, 0 4px 0 #402b2d;
}
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-noughts .buddy-game-cell {
  border-color: #8d665d;
  background: radial-gradient(ellipse at 38% 26%, #72605d, #3b313b);
  box-shadow: inset 0 0 0 2px #d5a58e35, 0 2px 1px #1f161d;
}
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-noughts .buddy-game-cell::before {
  border-color: #e6bc9960;
  border-radius: .2rem;
  transform: rotate(45deg);
}
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-noughts .buddy-game-x { background: radial-gradient(ellipse, #ffe0a3, #bd7657); }
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-noughts .buddy-game-o { background: radial-gradient(ellipse, #d3ece5, #6a91a1); }
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-noughts .buddy-game-blast { background: radial-gradient(ellipse, #d58457, #55404a); }
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-noughts .buddy-game-crater-hot {
  border-color: #ef9764;
  background: repeating-linear-gradient(-45deg, #4e2935 0 5px, #743847 5px 10px);
  box-shadow: inset 0 0 .55rem #e2805d9c, 0 2px 1px #1f161d;
}
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-rival-opponent {
  background: #e0efeb;
  box-shadow: inset 0 0 0 1px #91b7b6;
}

.buddy-game-bomb-bar, .buddy-game-simon-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  font-size: .83rem;
  font-weight: 750;
}
.buddy-game-bomb-bar { margin: .8rem 0 .15rem; }
.buddy-game-simon-controls { margin: 0 0 .65rem; }
.buddy-game .buddy-game-bomb-bar button, .buddy-game .buddy-game-simon-controls button { margin: 0; min-height: 2.55rem; }
.buddy-game-bomb-bar button[aria-pressed="true"] { background: #ffe4aa; color: #593523; border-color: #bd7630; }

.buddy-game .buddy-game-match { gap: .4rem; max-width: 23rem; }
.buddy-game .buddy-game-match .buddy-game-cell {
  position: relative;
  aspect-ratio: .94;
  padding: .2rem;
  border-color: #b9964f;
  border-radius: .55rem;
  background: radial-gradient(ellipse at center, #416b58, #1c3c31 78%);
  box-shadow: inset 0 0 0 2px #e5c76a51, 0 2px 0 #152b28;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.buddy-game .buddy-game-match .buddy-game-cell::before {
  position: absolute;
  inset: .24rem;
  border: 1px solid #e6ca806e;
  border-radius: .36rem;
  content: '';
}
.buddy-game-card-crest {
  display: grid;
  place-items: center;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #f5d67f38, transparent 71%);
}
.buddy-game .buddy-game-match .buddy-game-face-up {
  grid-template-rows: minmax(0, 1fr) auto;
  padding: .12rem .12rem .26rem;
  background: radial-gradient(ellipse at center, #fffced, #ead3a3);
  color: #5c3c25;
  border-color: #bc9057;
  box-shadow: inset 0 0 0 2px #fff2c9, 0 2px 0 #77513a;
}
.buddy-game .buddy-game-match .buddy-game-matched { background: radial-gradient(ellipse at center, #fffbea, #c1d2a0); border-color: #7f9f64; box-shadow: inset 0 0 0 2px #e5ebca, 0 2px 0 #587045; }
.buddy-game-match .buddy-game-face-up img { display:block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.buddy-game-match small { position: relative; z-index: 1; display:block; max-width:100%; font-size: clamp(.5rem, 1.5vw, .68rem); line-height:1.05; text-align:center; overflow-wrap:anywhere; }
@media(max-width:600px) {
  .buddy-game .buddy-game-match .buddy-game-face-up { padding:.12rem; display:grid; place-items:center; }
  .buddy-game-match .buddy-game-face-up img { width:92%; height:92%; }
  .buddy-game-match .buddy-game-face-up small { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}

.buddy-game[data-buddy-game="light-maze"] .buddy-game-body {
  border-color: #79b7be;
  background: radial-gradient(ellipse at top, #365d6b, #172d3f 86%);
}
.buddy-game[data-buddy-game="light-maze"] .buddy-game-body > .buddy-game-maze-prism-tip { max-width: 26rem; margin: 0 auto .55rem; color: #edfaff; font-size: .84rem; line-height: 1.45; text-align: left; }
.buddy-game-maze-moves { width: min(100%, 24rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: 0 auto .65rem; }
.buddy-game .buddy-game-maze-moves button { display: grid; place-items: center; gap: .05rem; min-height: 3rem; min-width: 0; padding: .25rem; border: 2px solid #a7f4e7; border-radius: .6rem; background: #c5fff0; color: #124c4c; font-size: .76rem; font-weight: 800; }
.buddy-game-maze-moves button > span { font-size: 1.3rem; line-height: 1; }
.buddy-game .buddy-game-maze-moves button:disabled { border-color: #5b7484; background: #2b4353; color: #97acb7; opacity: 1; box-shadow: none; }
.buddy-game .buddy-game-maze-moves button:focus-visible { outline: 3px solid #fff2a1; outline-offset: 2px; }
.buddy-game .buddy-game-maze-moves button.buddy-game-hint-target { outline: 3px solid #ffe28b; outline-offset: 2px; background: #fff4be; }
.buddy-game .buddy-game-maze {
  gap: 0;
  max-width: 24rem;
  border: 3px solid #c4a76e;
  border-radius: .5rem;
  background: #18322b;
  overflow: hidden;
}
.buddy-game .buddy-game-maze .buddy-game-cell {
  position: relative;
  isolation: isolate;
  padding: 0;
  border: 1px solid #a390617f;
  border-radius: 0;
  background: radial-gradient(ellipse at center, #365545, #253d32);
  box-shadow: none;
}
.buddy-game .buddy-game-maze .buddy-game-cell:disabled { opacity: 1; cursor: default; }
.buddy-game .buddy-game-maze .buddy-game-cell[aria-current="location"] { background: radial-gradient(circle, #818251, #435e50 72%); box-shadow: inset 0 0 0 2px #ffe294; }
.buddy-game .buddy-game-maze .buddy-game-cell[data-open~="n"] { border-top-color: transparent; }
.buddy-game .buddy-game-maze .buddy-game-cell[data-open~="e"] { border-right-color: transparent; }
.buddy-game .buddy-game-maze .buddy-game-cell[data-open~="s"] { border-bottom-color: transparent; }
.buddy-game .buddy-game-maze .buddy-game-cell[data-open~="w"] { border-left-color: transparent; }
.buddy-game .buddy-game-maze .buddy-game-cell:not(:disabled):hover { background: #4b6243; }
.buddy-game .buddy-game-maze .buddy-game-cell:focus-visible { outline-offset: -3px; }
.buddy-game .buddy-game-maze .buddy-game-lit-path { background: radial-gradient(circle at center, #71674a, #3b523e); }
.buddy-game .buddy-game-maze .buddy-game-maze-turn {
  background: radial-gradient(circle at center, #82efc5, #2c887e 90%);
  box-shadow: inset 0 0 0 2px #b9ffdf, inset 0 0 1rem #c8fff46b;
  cursor: pointer;
}
.buddy-game .buddy-game-maze .buddy-game-maze-turn:hover { background: #b1ffe1; }
.buddy-game-maze-move-arrow { z-index: 3; display: grid; place-items: center; width: 60%; aspect-ratio: 1; border-radius: 50%; background: #d6fff4eb; color: #14564b; font-size: clamp(.9rem, 4vw, 1.7rem); font-weight: 900; line-height: 1; box-shadow: 0 1px 4px #103f5266; }
.buddy-game-maze-badge { position: absolute; z-index: 4; bottom: 3%; left: 50%; transform: translateX(-50%); padding: 1px 3px; border-radius: 3px; background: #18312ce8; color: #fff5c3; font-size: clamp(.42rem, 1.5vw, .57rem); font-weight: 900; line-height: 1.1; letter-spacing: .02em; }
.buddy-game .buddy-game-maze .buddy-game-maze-fog {
  border-color: #4355445c;
  background: radial-gradient(ellipse at center, #1c332d, #182c28);
  opacity: 1;
}
.buddy-game-maze-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.buddy-game-prism-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.buddy-game-prism-gate, .buddy-game-prism-beam {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.buddy-game-prism-gate {
  stroke: #ffd485;
  stroke-width: 3;
  filter: drop-shadow(0 0 2px #ffc767);
}
.buddy-game-prism-beam {
  stroke: #a7edff;
  stroke-width: 2.6;
  filter: drop-shadow(0 0 3px #65d8ef);
}
.buddy-game-prism-art[data-aligned="true"] :is(.buddy-game-prism-gate, .buddy-game-prism-beam) {
  stroke: #baf9c4;
  filter: drop-shadow(0 0 3px #83e897);
}
.buddy-game-prism-crystal { fill: #d2f6ff; stroke: #4286a6; stroke-width: 1.4; }
.buddy-game-prism-control {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .65rem;
  width: min(100%, 24rem);
  margin: 0 auto .55rem;
  padding: .48rem .6rem;
  border: 1px solid #c4a76e;
  border-radius: .5rem;
  background: #253f32;
  color: #fff5d1;
}
.buddy-game-prism-control[data-aligned="true"] { border-color: #99d9a5; }
.buddy-game-prism-details { display: grid; gap: .12rem; }
.buddy-game-prism-directions { display: flex; flex-wrap: wrap; gap: .14rem .65rem; font-size: .85rem; }
.buddy-game-prism-directions > span { white-space: nowrap; }
.buddy-game-prism-directions > span:first-child strong { color: #a7edff; }
.buddy-game-prism-directions > span:last-child strong { color: #ffd485; }
.buddy-game-prism-control[data-aligned="true"] .buddy-game-prism-directions strong { color: #baf9c4; }
.buddy-game .buddy-game-prism-control button {
  min-height: 2.75rem;
  margin: 0;
  border-color: #b18546;
  background: #ffe3a1;
  color: #442f1d;
  font-weight: 800;
}
.buddy-game .buddy-game-prism-control button.buddy-game-hint-target {
  outline: 3px solid #9de9fa;
  outline-offset: 2px;
}
.buddy-game-maze-spark {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8ba, #ffd2645c 62%, transparent 74%);
  animation: buddy-game-maze-spark .3s ease-out var(--spark-delay) both;
}
@keyframes buddy-game-maze-spark {
  0%, 100% { opacity: 0; }
  40% { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .buddy-game-maze-spark { display: none; }
}
.buddy-game-light-link {
  position: absolute;
  z-index: -1;
  top: 45%;
  left: 45%;
  width: 10%;
  height: 10%;
  border-radius: 12px;
  background: #ffe8a5;
  box-shadow: 0 0 8px 2px #efbc58b8;
}
.buddy-game-light-n { top: -1px; height: calc(55% + 1px); }
.buddy-game-light-e { width: calc(55% + 1px); }
.buddy-game-light-s { height: calc(55% + 1px); }
.buddy-game-light-w { left: -1px; width: calc(55% + 1px); }
.buddy-game-light-orb {
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fffef1 12%, #fff1a4 62%, #e89c3a);
  box-shadow: 0 0 12px 3px #fac562af;
}
.buddy-game-maze-start { color: #ebd9ac; }
.buddy-game .buddy-game-maze .buddy-game-goal-tile {
  background: radial-gradient(circle, #b5823e, #5d4e32 72%, #334534);
}
.buddy-game .buddy-game-maze-goal {
  position: absolute;
  width: 73%;
  height: 82%;
  filter: drop-shadow(0 0 5px #ffd77e);
}

.buddy-game[data-buddy-game="lights-out"] .buddy-game-body { background: linear-gradient(135deg, #2f2942, #183429); border-color: #958358; }
.buddy-game .buddy-game-lanterns { gap: .3rem; max-width: 25rem; }
.buddy-game .buddy-game-lanterns { max-width: 21rem; }
.buddy-game-lantern-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  color: #fff0c8;
  font-size: .8rem;
  font-weight: 750;
}
.buddy-game .buddy-game-lantern-controls button,
.buddy-game .buddy-game-lantern-confirm button { margin: 0; min-height: 2.45rem; font-size: .8rem; }
.buddy-game .buddy-game-lantern-controls [aria-pressed="true"] { background: #ffdda0; color: #3a2a24; border-color: #c5a35d; }
.buddy-game .buddy-game-lantern-tip { max-width: 25rem; margin: .4rem auto .6rem; color: #f5e8ce; font-size: .78rem; line-height: 1.35; text-align: center; }
.buddy-game .buddy-game-lanterns .buddy-game-cell { position: relative; }
.buddy-game .buddy-game-lanterns .buddy-game-flip-preview { outline: 2px solid #ade8ed; outline-offset: -3px; }
.buddy-game .buddy-game-lanterns .buddy-game-flip-center { outline-color: #fff4bf; outline-width: 3px; }
.buddy-game .buddy-game-lanterns .buddy-game-flip-preview::after {
  position: absolute;
  bottom: .1rem;
  inset-inline: .1rem;
  padding: .13rem .1rem;
  border-radius: .2rem;
  background: #203e45;
  color: #e7fcff;
  font: 800 .6rem/1.1 system-ui, sans-serif;
  content: 'Glow';
}
.buddy-game .buddy-game-lanterns .buddy-game-flip-preview[data-flip-result="dim"]::after { content: 'Dim'; background: #443451; color: #fff0fc; }
.buddy-game-lantern-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .65rem; margin-top: .65rem; color: #fff0c8; font-size: .8rem; }
.buddy-game .buddy-game-noughts .buddy-game-last-turn { outline: 3px solid #4c9da8; outline-offset: -4px; }
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-noughts .buddy-game-last-turn { outline-color: #b6f1f1; }
.buddy-game .buddy-game-noughts .buddy-game-winning-cell { outline: 4px solid #f3c54f; outline-offset: -5px; box-shadow: inset 0 0 1.3rem #ffda72ab; }
.buddy-game .buddy-game-lanterns .buddy-game-cell {
  border-color: #8f845c;
  background: radial-gradient(ellipse, #384141, #202b36 85%);
  box-shadow: inset 0 0 0 2px #9a8a5e26;
}
.buddy-game-lanterns .buddy-game-cell img { filter: grayscale(.8) brightness(.48); }
.buddy-game .buddy-game-lanterns .buddy-game-lit {
  background: radial-gradient(ellipse, #fff1a5 8%, #e2a951 70%, #996735);
  border-color: #ffdf97;
  box-shadow: 0 0 7px #e3aa655e;
}
.buddy-game-lanterns .buddy-game-lit img { filter: drop-shadow(0 0 5px #fff3b1); }
.buddy-game .buddy-game-lanterns .buddy-game-cell:disabled { opacity: 1; }

.buddy-game[data-buddy-game="simon"] .buddy-game-body { background: radial-gradient(ellipse, #f7eac0, #dac292); }
.buddy-game .buddy-game-simon {
  gap: .47rem;
  max-width: 20rem;
  padding: .45rem;
  border: 2px solid #997445;
  border-radius: .85rem;
  background: linear-gradient(130deg, #9d6740, #643e2a);
  box-shadow: inset 0 0 0 2px #e5b97e5e;
}
.buddy-game .buddy-game-simon .buddy-game-cell { aspect-ratio: 1.42; grid-template-rows: minmax(0, 1fr) auto; padding: .2rem .2rem .3rem; }
.buddy-game-simon .buddy-game-cell img { width: 72%; height: 100%; }
.buddy-game-simon small { font-size: .72rem; }
.buddy-game-melody-progress { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; margin: .2rem auto .6rem; }
.buddy-game-melody-progress span { display: grid; place-items: center; min-width: 2.6rem; min-height: 1.8rem; padding: .1rem .35rem; border: 1px dashed #927447; border-radius: .4rem; color: #654c2b; font-size: .72rem; font-weight: 800; background: #fff8df; }
.buddy-game-melody-progress .buddy-game-note-done { background: #d5e8c6; border-style: solid; border-color: #6f8f57; color: #31522c; }
.buddy-game-melody-progress [aria-current="step"] { outline: 2px solid #9f6b9a; outline-offset: 1px; }
.buddy-game .buddy-game-pad-0 { background: radial-gradient(ellipse, #eff1b5, #a8c08d); border-color: #648061; color: #244832; }
.buddy-game .buddy-game-pad-1 { background: radial-gradient(ellipse, #fff1b2, #e6b771); border-color: #ab8642; color: #614014; }
.buddy-game .buddy-game-pad-2 { background: radial-gradient(ellipse, #e6e8f2, #a1acc6); border-color: #6a7a9c; color: #283b63; }
.buddy-game .buddy-game-pad-3 { background: radial-gradient(ellipse, #ffeed7, #e4b1b1); border-color: #ad7088; color: #713750; }
.buddy-game .buddy-game-simon .buddy-game-pad-active {
  transform: scale(.96);
  border-color: #ffe295;
  box-shadow: inset 0 0 0 3px #ffeab1, 0 0 16px #fff2ac;
}
.buddy-game-pad-active img { filter: drop-shadow(0 0 6px #fff8b5) brightness(1.18); }

.buddy-game[data-buddy-game="magic-8-ball"] .buddy-game-body { border-color: #8a7493; background: radial-gradient(ellipse at center, #5b496e, #252a49 82%); }
.buddy-game-fortune { display: grid; place-items: center; min-height: 12rem; gap: .65rem; color: #fff5de; }
.buddy-game-question { max-width: 23rem; margin: .15rem auto; text-align: center; }
.buddy-game-question strong { font-size: clamp(1rem, 3vw, 1.3rem); }
.buddy-game-question p { margin: .28rem 0 0; color: #f4e4ff; font-size: .92rem; }
.buddy-game .buddy-game-fortune [data-buddy-question-ready],
.buddy-game .buddy-game-fortune [data-buddy-question-again] {
  border: 1px solid #f4d299;
  background: #fff2d3;
  color: #37254c;
  font-weight: 800;
}
.buddy-game .buddy-game-ball {
  display: grid;
  place-items: center;
  width: clamp(8rem, 35vw, 10rem);
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 3px solid #ad8c65;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 20%, #a3acc6, #685988 25%, #343e69 48%, #1f2247 72%, #101531);
  box-shadow: inset 0 0 0 5px #ffedb347, 0 0 24px #ddd3fd40, 0 6px 0 #20192a;
}
.buddy-game .buddy-game-ball span {
  display: grid;
  place-items: center;
  width: 3.4rem;
  aspect-ratio: 1;
  border: 2px solid #f4d299;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff9dc, #c7afd9);
  color: #31264a;
  font: 800 2.2rem/1 Georgia, serif;
}
.buddy-game .buddy-game-ball:disabled { opacity: 1; }
.buddy-game .buddy-game-revealed .buddy-game-ball span { color: #ffe6aa; background: radial-gradient(ellipse, #685fa0, #393251); }
.buddy-game-shaking .buddy-game-ball { animation: buddy-game-shake .45s ease-in-out both; }
.buddy-game-answer { padding: .4rem .75rem; border: 1px solid #d4b78c; border-radius: .6rem; background: #fff2d3; color: #3f3157; text-align: center; }
.buddy-game[data-buddy-game="magic-8-ball"]:has(.buddy-game-revealed) .buddy-game-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.buddy-game-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .8rem;
  margin-block: .6rem .15rem;
}
.buddy-game-help button { min-height: 2.45rem; }
.buddy-game-help [data-buddy-hint-text]:not(:empty) {
  flex: 1 1 13rem;
  color: #3c543f;
  font-size: .85rem;
}
.buddy-game .buddy-game-grid .buddy-game-cell.buddy-game-hint-target {
  z-index: 1;
  outline: 3px solid #f3c451;
  outline-offset: -4px;
  box-shadow: inset 0 0 .95rem #f3c45182;
}
.buddy-game[data-buddy-game="bomb-tic-tac-toe"] .buddy-game-noughts .buddy-game-cell.buddy-game-blast-preview {
  box-shadow: inset 0 0 0 2px #b73d36, inset 0 0 1rem #f88d62c0;
}
.buddy-game .buddy-game-simon-controls [data-buddy-tempo][aria-pressed="true"] {
  background: #e1ecd7;
  color: #263e30;
}

.buddy-game-sky {
  position: relative;
  display: grid;
  place-items: end center;
  isolation: isolate;
  height: clamp(13rem, 36vw, 20rem);
  overflow: hidden;
  border: 1px solid #a08764;
  border-radius: .75rem;
  background: #344b73 url('/reference-art/game-carpet.webp') center 62% / cover;
  --flight-direction: 1;
  --flight-horizontal: clamp(3.4rem, 24vw, 10.5rem);
  --flight-vertical: clamp(4.5rem, 19vw, 8rem);
}
.buddy-game-sky[data-reverse="true"] { --flight-direction: -1; }
.buddy-game-flight-scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity .7s ease;
}
.buddy-game-flight-scene[data-setting="dawn"] { background-image: url('/reference-art/flight-dawn.webp'); }
.buddy-game-flight-scene[data-setting="blossom"] { background-image: url('/reference-art/flight-blossom.webp'); }
.buddy-game-flight-scene[data-setting="moon"] { background-image: url('/reference-art/flight-moon.webp'); }
.buddy-game-flight-scene.buddy-game-flight-visible { opacity: 1; }
.buddy-game-flying .buddy-game-flight-scene { animation: buddy-game-flight-pan 9.8s ease-in-out both; }
.buddy-game-flight-caption {
  position: absolute;
  top: .65rem;
  left: .65rem;
  padding: .35rem .6rem;
  border: 1px solid #e1c287a3;
  border-radius: 999px;
  background: #171e35e0;
  color: #fff1cf;
  font: 700 .8rem/1.25 Georgia, serif;
}
.buddy-game-carpet-rider { position: relative; width: 8rem; height: 7.2rem; display: grid; place-items: center; margin-bottom: .1rem; }
.buddy-game-carpet-buddy { z-index: 1; display: grid; place-items: center; width: 5rem; height: 5rem; transform: translateY(-1.12rem); }
.buddy-game-carpet-buddy > :is(img, .reference-creature-display) { display: block; width: 100%; height: 100%; object-fit: contain; }
.buddy-game-carpet-art {
  position: absolute;
  top: .35rem;
  left: 50%;
  width: 9rem;
  height: 9rem;
  transform: translateX(-50%);
  background: url('/reference-art/accessory-carpet-platform.webp') center / contain no-repeat;
  filter: drop-shadow(0 4px 3px #25264c69);
}
.buddy-game-flying .buddy-game-carpet-rider { animation: buddy-game-flight 9.8s ease-in-out both; }
.buddy-game-carpet-control { text-align: center; }
.buddy-game .buddy-game-carpet-control button { min-height: 2.55rem; margin: .55rem 0 0; }
@keyframes buddy-game-flight {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  17% { transform: translate(calc(.52 * var(--flight-direction) * var(--flight-horizontal)), calc(-.72 * var(--flight-vertical))) rotate(calc(-9deg * var(--flight-direction))); }
  34% { transform: translate(calc(var(--flight-direction) * var(--flight-horizontal)), calc(-.92 * var(--flight-vertical))) rotate(calc(6deg * var(--flight-direction))); }
  52% { transform: translate(0, calc(-.62 * var(--flight-vertical))) rotate(calc(9deg * var(--flight-direction))); }
  70% { transform: translate(calc(-.85 * var(--flight-direction) * var(--flight-horizontal)), calc(-1 * var(--flight-vertical))) rotate(calc(-8deg * var(--flight-direction))); }
  87% { transform: translate(calc(-.28 * var(--flight-direction) * var(--flight-horizontal)), calc(-.45 * var(--flight-vertical))) rotate(calc(5deg * var(--flight-direction))); }
}
@keyframes buddy-game-flight-pan {
  0%, 100% { transform: scale(1); }
  33% { transform: translateX(calc(-4% * var(--flight-direction))) scale(1.15); }
  68% { transform: translateX(calc(4% * var(--flight-direction))) scale(1.13); }
}
@keyframes buddy-game-shake {
  15%, 60% { transform: translateX(-.4rem) rotate(-8deg); }
  35%, 80% { transform: translateX(.4rem) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .buddy-game-flying .buddy-game-carpet-rider, .buddy-game-flying .buddy-game-flight-scene, .buddy-game-shaking .buddy-game-ball { animation: none; }
  .buddy-game-flight-scene { transition: none; }
}

.accessory-moment {
  display: grid;
  gap: .75rem;
  text-align: center;
}
.accessory-moment p { margin: 0; }
[data-ambient-scene] .accessory-adventure-buddy { left:35%; bottom:9%; width:clamp(4.5rem,34%,9rem); transform-origin:50% 90%; animation:ambient-buddy-breathe 4.5s ease-in-out infinite alternate; }
[data-ambient-scene] .accessory-adventure-prop { left:79%; bottom:9%; width:clamp(3.5rem,25%,7rem); }
[data-scene="spooky-garden"] .accessory-adventure-buddy { left:29%; width:clamp(4.5rem,31%,9rem); }
[data-scene="spooky-garden"] .accessory-adventure-prop { left:75%; bottom:3%; width:clamp(6.5rem,43%,12.5rem); filter:drop-shadow(0 0 .8rem #b665e685) drop-shadow(0 .25rem .2rem #18203c); }
.ambient-spooky-haze { position:absolute; inset:0; pointer-events:none; }
.ambient-spooky-haze { background:linear-gradient(#30265335,transparent 65%),radial-gradient(ellipse at 80% 78%,#bcf4a31a,transparent 38%); }
.ambient-cauldron-glow { position:absolute; left:75%; bottom:4%; width:48%; height:49%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,#d3a2ffb0,#74efa43d 50%,transparent 73%); animation:ambient-cauldron-glow 3.2s ease-in-out infinite alternate; }
.ambient-cauldron-bubbles { position:absolute; left:75%; bottom:46%; width:27%; height:22%; transform:translateX(-50%); }
.ambient-cauldron-bubbles i { position:absolute; left:var(--ambient-x); bottom:var(--ambient-rest); width:clamp(.3rem,10%,.7rem); aspect-ratio:1; border:1px solid #f7ddff; border-radius:50%; background:#d99af180; opacity:.65; box-shadow:0 0 .35rem #dfb1ff; animation:ambient-cauldron-bubble 4s var(--ambient-delay) ease-out infinite; }
.ambient-friendly-ghost { position:absolute; right:6%; top:9%; width:clamp(1.5rem,9%,3rem); aspect-ratio:1; background-image:url('/reference-art/shop-atlas-autumn.webp'); background-repeat:no-repeat; background-size:400% 300%; background-position:33.3333% 0; filter:drop-shadow(0 0 .35rem #f4dcff66); animation:ambient-ghost-float 6s ease-in-out infinite alternate; }
.ambient-cauldron-rings { position:absolute; left:75%; bottom:15%; width:39%; height:16%; transform:translateX(-50%); }
.ambient-cauldron-rings i { position:absolute; inset:0; border:2px solid #b3ffb28c; border-radius:50%; box-shadow:0 0 .8rem #96f3ad75,inset 0 0 .8rem #bf9aff60; animation:ambient-potion-ring 5s ease-out infinite; }
.ambient-cauldron-rings i + i { animation-delay:-2.5s; border-color:#e7b4ffb0; }
/* Valley effects sit behind the buddy, with the volcanic activity in the
   distant upper-right part of the painted scene. No foreground item is worn. */
#dialog:has([data-scene="dinosaur-valley"]) { width:min(43rem,calc(100% - 28px)); }
.accessory-moment-scene[data-scene="dinosaur-valley"] { width:100%; aspect-ratio:1.8; min-height:14rem; }
[data-scene="dinosaur-valley"] > img.accessory-adventure-backdrop { object-position:50% 28%; }
[data-scene="dinosaur-valley"] .accessory-adventure-prop { display:none; }
[data-scene="dinosaur-valley"] .accessory-adventure-buddy { left:36%; bottom:7%; }
[data-scene="dinosaur-valley"] .accessory-moment-effects { z-index:1; }
.ambient-dinosaur-sun { position:absolute; inset:0; background:radial-gradient(ellipse at 17% 11%,#ffe7a938,transparent 56%); }
.ambient-volcano-glow { position:absolute; left:78%; top:23%; width:32%; aspect-ratio:1.3; translate:-50% -50%; border-radius:50%; background:radial-gradient(ellipse,#ffd9799c,#ef883f52 28%,transparent 69%); opacity:.24; transition:opacity 1.2s ease; animation:ambient-volcano-pulse 5s ease-in-out infinite alternate; }
.ambient-volcano-mist { position:absolute; left:78%; top:23%; width:24%; height:36%; translate:-50% -92%; opacity:.28; transition:opacity 1.2s ease; }
.ambient-volcano-mist i { position:absolute; left:35%; bottom:0; width:48%; aspect-ratio:1.1; border-radius:50%; background:radial-gradient(ellipse,#ffefcc9c,#b3cad74d 58%,transparent 72%); filter:blur(.2rem); animation:ambient-volcano-drift 7s var(--mist-delay) ease-out infinite; }
.ambient-volcano-sparks { position:absolute; left:78%; top:23%; width:25%; height:22%; translate:-50% -87%; opacity:0; transition:opacity .8s ease; }
.ambient-volcano-sparks i { position:absolute; bottom:0; left:calc(50% + var(--spark-x)); width:.2rem; aspect-ratio:1; border-radius:50%; background:#ffe2a3; box-shadow:0 0 .35rem #f9c773; animation:ambient-volcano-spark 3.4s var(--spark-delay) ease-out infinite; }
.ambient-dinosaur-flyers { position:absolute; inset:0; overflow:hidden; }
.ambient-dinosaur-flyers > span { position:absolute; left:10%; top:var(--flyer-top); width:var(--flyer-width); animation:ambient-pterosaur-glide var(--flyer-duration) var(--flyer-delay) linear infinite; }
.ambient-dinosaur-flyers img { display:block; width:100%; height:auto; filter:drop-shadow(0 .12rem .1rem #183e3b33); transform-origin:50% 65%; animation:ambient-pterosaur-wing 2.4s var(--flyer-delay) ease-in-out infinite; }
[data-volcano-awake="true"] .ambient-volcano-glow { opacity:.9; }
[data-volcano-awake="true"] .ambient-volcano-mist { opacity:.94; }
[data-volcano-awake="true"] .ambient-volcano-mist i { background:radial-gradient(ellipse,#ffedc8d1,#f5b58178 45%,#b3cad73b 65%,transparent 74%); }
[data-volcano-awake="true"] .ambient-volcano-sparks { opacity:1; }
[data-volcano-awake="true"] .ambient-dinosaur-flyers img { animation-duration:1.1s; }
[data-scene="dinosaur-valley"][data-ambient-motion="paused"] * { transition:none!important; }
@keyframes ambient-volcano-pulse { to { scale:1.12; } }
@keyframes ambient-volcano-drift { 0% { translate:0 .3rem; scale:.65; opacity:0; } 18%,65% { opacity:1; } 100% { translate:-1.8rem -4.2rem; scale:1.8; opacity:0; } }
@keyframes ambient-volcano-spark { 0% { translate:0 .25rem; opacity:0; } 18%,55% { opacity:.9; } 100% { translate:var(--spark-x) -2.8rem; opacity:0; } }
@keyframes ambient-pterosaur-glide { 0% { left:-20%; translate:0 .8rem; rotate:-4deg; } 35% { translate:0 -.6rem; rotate:2deg; } 70% { translate:0 .3rem; rotate:-1deg; } 100% { left:108%; translate:0 -.5rem; rotate:3deg; } }
@keyframes ambient-pterosaur-wing { 0%,100% { scale:1 .94; } 45% { scale:1 .72; } 70% { scale:1 1.02; } }
@keyframes ambient-potion-ring { 0% { opacity:0; scale:.6; translate:0 1rem; } 20%,65% { opacity:.9; } 100% { opacity:0; scale:1.1; translate:0 -5rem; } }
@keyframes ambient-buddy-breathe { to { scale:1.018; rotate:1deg; } }
@keyframes ambient-cauldron-glow { from { opacity:.35; scale:.95; } to { opacity:.8; scale:1.08; } }
@keyframes ambient-cauldron-bubble { from { transform:translateY(0) scale(.55); opacity:0; } 25%,60% { opacity:.8; } to { transform:translateY(-3rem) scale(1.12); opacity:0; } }
@keyframes ambient-ghost-float { from { translate:-.3rem .3rem; rotate:-5deg; } to { translate:.6rem -.6rem; rotate:5deg; } }
[data-ambient-motion="paused"] *,[data-ambient-motion="paused"] *::before,[data-ambient-motion="paused"] *::after { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) {
  [data-ambient-scene]:not([data-ambient-motion="playing"]) * { animation:none!important; transition:none!important; }
  /* Resume is an explicit per-scene choice, overriding the site's global
     reduced-motion rule only after the visitor presses this control. */
  [data-ambient-motion="playing"] .accessory-adventure-buddy { animation:ambient-buddy-breathe 4.5s ease-in-out infinite alternate!important; }
  [data-ambient-motion="playing"] .ambient-cauldron-glow { animation:ambient-cauldron-glow 3.2s ease-in-out infinite alternate!important; }
  [data-ambient-motion="playing"] .ambient-cauldron-bubbles i { animation:ambient-cauldron-bubble 4s var(--ambient-delay) ease-out infinite!important; }
  [data-ambient-motion="playing"] .ambient-friendly-ghost { animation:ambient-ghost-float 6s ease-in-out infinite alternate!important; }
  [data-ambient-motion="playing"] .ambient-cauldron-rings i { animation:ambient-potion-ring 5s ease-out infinite!important; }
  [data-ambient-motion="playing"] .ambient-volcano-glow { animation:ambient-volcano-pulse 5s ease-in-out infinite alternate!important; }
  [data-ambient-motion="playing"] .ambient-volcano-mist i { animation:ambient-volcano-drift 7s var(--mist-delay) ease-out infinite!important; }
  [data-ambient-motion="playing"] .ambient-volcano-sparks i { animation:ambient-volcano-spark 3.4s var(--spark-delay) ease-out infinite!important; }
  [data-ambient-motion="playing"] .ambient-dinosaur-flyers > span { animation:ambient-pterosaur-glide var(--flyer-duration) var(--flyer-delay) linear infinite!important; }
  [data-ambient-motion="playing"] .ambient-dinosaur-flyers img { animation:ambient-pterosaur-wing 2.4s var(--flyer-delay) ease-in-out infinite!important; }
  [data-ambient-motion="playing"][data-volcano-awake="true"] .ambient-dinosaur-flyers img { animation-duration:1.1s!important; }
}
.accessory-moment-scene {
  position: relative;
  isolation: isolate;
  width: min(100%, 30rem);
  min-height: 12rem;
  margin-inline: auto;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 32%, #fffaf0, #ede1f5 72%, #d8cce9);
}
.accessory-moment-scene > .reference-creature-display { width: min(78%, 16rem); }
.accessory-moment-scene[data-scenic="true"] {
  aspect-ratio: 1.9;
  min-height: 12rem;
  padding: 0;
  background: #202843;
}
#dialog:has(.accessory-moment-scene:is([data-scene="moon-mail"], [data-scene="lantern-party"])) {
  width: min(45rem, calc(100% - 28px));
}
.accessory-moment-scene:is([data-scene="moon-mail"], [data-scene="lantern-party"]) {
  width: 100%;
  aspect-ratio: 2.2;
}
.accessory-moment-scene > img.accessory-adventure-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  opacity: 0;
  transition: opacity .65s ease;
  pointer-events: none;
}
.accessory-moment-scene > .accessory-adventure-backdrop[data-visible="true"] { opacity: 1; }
.accessory-adventure-caption {
  position: absolute;
  z-index: 7;
  top: .58rem;
  left: .58rem;
  max-width: calc(100% - 1.16rem);
  padding: .23rem .58rem;
  border: 1px solid #ffffff42;
  border-radius: 1rem;
  background: #171a37e8;
  color: #fff7dc;
  font-size: .73rem;
  font-weight: 800;
  pointer-events: none;
}
.accessory-adventure-caption:empty { display: none; }
.accessory-adventure-actors {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.accessory-adventure-buddy, .accessory-adventure-prop {
  position: absolute;
  display: block;
  aspect-ratio: 1;
}
.accessory-adventure-buddy {
  left: 50%;
  bottom: 10%;
  width: clamp(5.25rem, 27%, 8.5rem);
  transform: translateX(-50%);
  filter: drop-shadow(0 .2rem .25rem #1412307a);
}
.accessory-adventure-prop {
  left: 70%;
  bottom: 9%;
  width: clamp(2.7rem, 17%, 5rem);
  transform: translateX(-50%);
}
.accessory-adventure-buddy > .reference-creature-display, .accessory-adventure-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-scene="carriage-tour"] .accessory-adventure-actors {
  inset: auto auto 2% 26%;
  width: clamp(8.25rem, 43%, 13.75rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 .28rem .22rem #432511a0);
}
[data-scene="carriage-tour"][data-carriage-stop="far"] .accessory-adventure-actors { left: 74%; }
[data-scene="carriage-tour"] .accessory-adventure-prop {
  inset: 0;
  width: 100%;
  transform: none;
}
[data-scene="carriage-tour"] .accessory-adventure-buddy {
  z-index: 1;
  left: 50%;
  bottom: 38%;
  width: 37%;
  clip-path: ellipse(49% 56% at 50% 56%);
  filter: none;
}
[data-scene="carriage-tour"] .accessory-carriage-rim {
  z-index: 2;
  /* The cabin is a hole in the foreground rim, so the rider can sit inside it. */
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 66%, 36% 66%, 34% 46%, 40% 36%, 50% 35%, 60% 37%, 66% 47%, 63% 66%, 0 66%);
}
[data-carriage-motion="outbound"] .accessory-adventure-actors {
  animation: accessory-carriage-roll 3.4s cubic-bezier(.42, 0, .58, 1) both;
}
[data-carriage-motion="returning"] .accessory-adventure-actors {
  animation: accessory-carriage-roll 3.4s cubic-bezier(.42, 0, .58, 1) reverse both;
}
@keyframes accessory-carriage-roll {
  0% { left: 26%; translate: 0 0; rotate: 0deg; }
  20% { translate: 0 -5%; rotate: -4deg; }
  40% { translate: 0 0; rotate: 4deg; }
  60% { translate: 0 -7%; rotate: -6deg; }
  80% { translate: 0 -2%; rotate: 3deg; }
  100% { left: 74%; translate: 0 0; rotate: 0deg; }
}
[data-scene="carriage-tour"][data-carriage-motion] .accessory-adventure-backdrop[data-visible="true"] {
  animation: accessory-carriage-panning 3.4s ease-out both;
}
@keyframes accessory-carriage-panning {
  0% { transform: scale(1.07) translateX(2%); }
  100% { transform: scale(1.07) translateX(-2%); }
}

[data-scene="moon-crossing"] .accessory-adventure-prop {
  inset: 0 auto auto 50%;
  width: 93%;
  height: 165%;
  aspect-ratio: auto;
  filter: drop-shadow(0 .46rem .3rem #0d253f91);
}
[data-scene="moon-crossing"] .accessory-adventure-prop > .accessory-adventure-art { object-fit: fill; }
[data-scene="moon-crossing"] .accessory-adventure-buddy {
  z-index: 1;
  left: var(--bridge-x, 14%);
  bottom: var(--bridge-bottom, 25%);
  width: clamp(4rem, 25%, 7.8rem);
}
[data-scene="moon-crossing"][data-crossing="hopping"] .accessory-adventure-buddy {
  transition: left .72s ease, bottom .72s ease;
}
[data-scene="moon-crossing"][data-crossing="crossed"] .accessory-adventure-prop { opacity:0; transition:opacity .6s; }
[data-scene="moon-crossing"][data-crossing="crossed"] .accessory-adventure-buddy { width:32%; transition:left 1s ease,bottom 1s ease,width 1s ease; filter:drop-shadow(0 0 .7rem #9bf9de) drop-shadow(0 .2rem .2rem #29244388); }
.accessory-bridge-arrival { position:absolute; inset:0; pointer-events:none; }
.accessory-bridge-arrival span { position:absolute; left:19%; top:42%; color:#eaffd0; font-size:1.5rem; text-shadow:0 0 1rem #a8ffe2; animation:bridge-arrival-glow 1.5s ease-in-out infinite alternate; }
.accessory-bridge-arrival span:nth-child(2) { left:76%; top:28%; animation-delay:-.4s; }
.accessory-bridge-arrival span:nth-child(3) { left:68%; top:70%; animation-delay:-.8s; }
.accessory-bridge-arrival span:nth-child(4) { left:27%; top:76%; animation-delay:-1.2s; }
@keyframes bridge-arrival-glow { from { opacity:.45; scale:.8; rotate:-12deg; } to { opacity:1; scale:1.2; rotate:12deg; } }
.accessory-bridge-marker {
  position: absolute;
  top: var(--bridge-marker-y);
  left: var(--bridge-marker-x);
  display: grid;
  width: 1.25rem;
  height: 1.1rem;
  place-items: center;
  translate: -50% -50%;
  color: #f4d3ff;
  font-size: .77rem;
  border: 1px solid #a6bed7;
  border-radius: 50%;
  background: #7046a3;
}
.accessory-bridge-marker[data-hit] {
  color: #49394d;
  border-color: #fffbdb;
  background: #ffe59a;
  box-shadow: 0 .13rem #917442, 0 0 .65rem .16rem #ffe59a;
}
.accessory-bridge-puzzle {
  display: grid;
  grid-template-columns: 2rem minmax(0, 15rem) 2rem;
  flex-basis: 100%;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.accessory-bridge-bank {
  position: relative;
  display: grid;
  justify-items: center;
  font-weight: 800;
  color: #3f426a;
}
.accessory-bridge-bank > span {
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  border: 1px solid #ad844a;
  border-radius: 50%;
  color: #48343a;
  background: #ffe39b;
}
.accessory-bridge-bank > small {
  position: absolute;
  top: calc(100% + .12rem);
  font-size: .68rem;
}
.accessory-bridge-finish > span {
  border-color: #8b9ab7;
  color: #3f507b;
  background: #dce6f6;
}
.accessory-bridge-puzzle[data-bridge-ready] .accessory-bridge-finish > span {
  border-color: #ad844a;
  color: #48343a;
  background: #ffe39b;
  box-shadow: 0 0 .45rem #ffd87b;
}
.accessory-bridge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .2rem;
  padding: .3rem;
  border: 2px solid #b7a0ff;
  border-radius: .65rem;
  background: linear-gradient(135deg, #34319c, #712c9c);
  box-shadow:0 .2rem .6rem #42278533;
}
.accessory-moment-controls .accessory-bridge-stone {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid #8f76ee;
  border-radius: .37rem;
  color: #c5fff4;
  background: linear-gradient(145deg, #6573e1, #5444b0);
  box-shadow: inset 0 .09rem #e8f1ff66;
}
.accessory-moment-controls .accessory-bridge-stone:nth-child(3n+2) { background:linear-gradient(145deg,#9375e8,#6944b6); color:#ffe0ff; }
.accessory-moment-controls .accessory-bridge-stone:nth-child(3n) { background:linear-gradient(145deg,#3fa5c3,#4771b9); color:#d2fff5; }
.accessory-bridge-stone:is(:hover, :focus-visible):not(:disabled)::after {
  position: absolute;
  top: .05rem;
  right: .15rem;
  content: '↻';
  color: #fff7dd;
  font-size: .76rem;
  line-height: 1;
}
.accessory-bridge-stone > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 2.65rem;
  rotate: var(--bridge-turn, 0deg);
  transition: rotate .16s ease-out;
}
.accessory-bridge-stone path { fill: none; stroke: currentColor; stroke-width: 4.5; filter:drop-shadow(0 0 1px currentColor); }
.accessory-bridge-stone circle { fill: currentColor; }
.accessory-moment-controls .accessory-bridge-stone[data-linked] {
  color: #fffbd1;
  background: linear-gradient(135deg,#ba577b,#8c4caa);
  border-color:#fff0a8;
  box-shadow: inset 0 0 .7rem #ffe381c9,0 0 .25rem #fbc76390;
}
.accessory-moment-controls .accessory-bridge-stone[data-hint] { outline: 3px solid #cf881e; outline-offset: -3px; }
.accessory-moment-controls .accessory-bridge-stone:disabled { opacity: 1; }

[data-scene="kite-flight"] .accessory-adventure-actors {
  inset: auto auto 1% 56%;
  width: clamp(8.5rem, 41%, 13.6rem);
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(3deg);
  transition: left 1.36s ease-in-out, bottom 1.36s ease-in-out, transform 1.36s ease-in-out;
}
[data-scene="kite-flight"] .accessory-adventure-buddy {
  z-index: 2;
  left: 65%;
  bottom: 0;
  width: 62%;
}
[data-scene="kite-flight"] .accessory-adventure-prop {
  z-index: 2;
  left: 29%;
  bottom: 48%;
  width: 57%;
  filter: drop-shadow(0 .19rem .24rem #2817447a);
}
.accessory-kite-tether {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff1c8;
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px #382d49);
}
[data-kite-flight="launch"] .accessory-adventure-actors {
  left: 49%;
  bottom: 13%;
  transform: translateX(-50%) rotate(-13deg);
}
[data-kite-flight="updraft"] .accessory-adventure-actors {
  left: 27%;
  bottom: 26%;
  transform: translateX(-50%) rotate(-17deg);
}
[data-kite-flight="glide"] .accessory-adventure-actors {
  left: 74%;
  bottom: 12%;
  transform: translateX(-50%) rotate(15deg);
}
[data-kite-flight="landing"] .accessory-adventure-actors { left: 56%; }
[data-kite-flight="launch"] .accessory-adventure-buddy > *,
[data-kite-flight="updraft"] .accessory-adventure-buddy > *,
[data-kite-flight="glide"] .accessory-adventure-buddy > * {
  animation: accessory-kite-dangle 1.5s ease-in-out infinite;
}
@keyframes accessory-kite-dangle {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  50% { translate: 0 -6%; rotate: 6deg; }
}
@media (prefers-reduced-motion: reduce) {
  [data-carriage-motion] .accessory-adventure-actors,
  [data-scene="carriage-tour"][data-carriage-motion] .accessory-adventure-backdrop[data-visible="true"],
  [data-scene="kite-flight"] .accessory-adventure-buddy > * { animation: none; }
  [data-scene="moon-crossing"][data-crossing="hopping"] .accessory-adventure-buddy,
  .accessory-bridge-stone > svg,
  [data-scene="kite-flight"] .accessory-adventure-actors { transition: none; }
}
.accessory-moment-scene[data-scene="teacup"] {
  width: 100%;
  aspect-ratio: 1.9;
  min-height: 12rem;
  background: #30787b;
  --teacup-cross: clamp(2.5rem, 16vw, 7.6rem);
}
#dialog:has(.accessory-moment-scene[data-scene="teacup"]) {
  width: min(45rem, calc(100% - 28px));
}
[data-scene="teacup"] > img[src$="/teacup-river.webp"] {
  object-position: 19% 58%;
  transition: opacity .65s ease, object-position 2.15s ease-in-out;
}
[data-teacup-phase="lotus"] > img[src$="/teacup-river.webp"] { object-position: 38% 50%; }
[data-teacup-phase="rapids"] > img[src$="/teacup-river.webp"] { object-position: 83% 65%; }
[data-teacup-phase="duck"] > img[src$="/teacup-river.webp"] { object-position: 66% 58%; }
.accessory-teacup-boat {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 12%;
  width: clamp(7rem, 40%, 11.2rem);
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(-4deg);
  filter: drop-shadow(0 .32rem .25rem #12353675);
  pointer-events: none;
}
.accessory-teacup-hull {
  position: absolute;
  inset: 22% auto auto 0;
  width: 100%;
  aspect-ratio: 1;
}
.accessory-teacup-rider {
  position: absolute;
  z-index: 1;
  inset: 7% auto auto 14%;
  width: 63%;
  aspect-ratio: 1;
}
.accessory-teacup-rider > .reference-creature-display { width: 100%; height: 100%; }
.accessory-teacup-rim {
  z-index: 2;
  clip-path: polygon(0 43%, 15% 36%, 34% 39%, 59% 39%, 79% 35%, 100% 27%, 100% 100%, 0 100%);
}
.accessory-teacup-wake {
  position: absolute;
  top: 100%;
  left: 5%;
  width: 87%;
  height: 15%;
  border: 2px solid #d1fbf3b3;
  border-radius: 50%;
  box-shadow: 0 0 0 .28rem #a7eee85e, 0 0 0 .58rem #a7eee832;
}
.accessory-teacup-duck {
  position: absolute;
  right: 7%;
  bottom: 10%;
  width: clamp(2.5rem, 13%, 4.5rem);
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity .42s, transform .65s;
}
.accessory-teacup-visitor {
  position: absolute;
  z-index: 4;
  left: 24%;
  bottom: 9%;
  width: clamp(3.9rem, 22%, 8rem);
  aspect-ratio: 1;
  translate: -50%;
  pointer-events: none;
}
.accessory-teacup-visitor-art {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 .2rem .18rem #184f6670);
}
.accessory-teacup-visitor-art > .reference-creature-display { width: 100%; height: 100%; }
.accessory-teacup-visitor-wake {
  position: absolute;
  inset: auto 2% -5%;
  height: 24%;
  border: 2px solid #e4ffffd9;
  border-radius: 50%;
  box-shadow: 0 0 0 .25rem #b8f8fa73, 0 0 0 .5rem #b8f8fa35;
}
.accessory-teacup-banter {
  position: absolute;
  z-index: 6;
  top: 16%;
  left: 8%;
  max-width: min(65%, 15rem);
  padding: .42rem .65rem;
  border: 1px solid #ae7c54;
  border-radius: .82rem;
  background: #fff7e0;
  color: #3c304b;
  box-shadow: 0 .22rem .45rem #14394045;
  font-size: clamp(.7rem, 2.6vw, .86rem);
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}
.accessory-teacup-banter strong { display: block; color: #76532a; }
[data-rider-swimming] .accessory-teacup-rider { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .accessory-teacup-visitor:not([hidden]) .accessory-teacup-visitor-art { animation: teacup-buddy-surface .75s ease-out both; }
  .accessory-teacup-visitor:not([hidden]) .accessory-teacup-visitor-wake { animation: accessory-teacup-ripple .85s ease-out; }
  .accessory-teacup-banter:not([hidden]) { animation: teacup-buddy-banter .3s .5s ease-out both; }
}
@keyframes teacup-buddy-surface {
  0% { opacity: 0; translate: 0 35%; clip-path: inset(0 0 100%); }
  62% { opacity: 1; translate: 0 -16%; clip-path: inset(0); }
  100% { translate: 0 0; clip-path: inset(0); }
}
@keyframes teacup-buddy-banter {
  from { opacity: 0; translate: 0 .3rem; }
  to { opacity: 1; translate: 0 0; }
}
.accessory-moment-target.accessory-teacup-firefly {
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 12vw, 3.45rem);
  height: clamp(2.75rem, 12vw, 3.45rem);
  border: 2px solid #fffee2;
  color: #352a4b;
  background: radial-gradient(circle, #fffce0, var(--firefly-color));
  box-shadow: 0 0 .8rem var(--firefly-color);
  animation: accessory-teacup-firefly-glow 2.3s ease-in-out infinite alternate;
}
.accessory-moment-target.accessory-teacup-firefly:nth-child(2) { animation-delay: -.6s; }
.accessory-moment-target.accessory-teacup-firefly:nth-child(3) { animation-delay: -1.15s; }
.accessory-moment-target.accessory-teacup-firefly:focus-visible { animation-play-state: paused; }
.accessory-moment-target.accessory-teacup-firefly[data-woken] {
  opacity: 1;
  color: #fffee2;
  background: #2b506e;
  border-style: dashed;
  animation: none;
}
.accessory-teacup-opal {
  position: absolute;
  top: 46%;
  right: 13%;
  width: clamp(3.25rem, 13%, 5rem);
  filter: drop-shadow(0 0 .65rem #ffe3a2);
  animation: accessory-teacup-opal 1.05s ease-out both;
}
.accessory-teacup-cloud-fish {
  position: absolute;
  display: flex;
  inset: 28% 12% auto;
  align-items: center;
  gap: 3%;
  filter: drop-shadow(0 .2rem .35rem #6c92c177);
}
.accessory-teacup-cloud-fish svg {
  width: 26%;
  animation: accessory-teacup-cloud-swim 3s var(--fish-delay) ease-in-out both;
}
.accessory-teacup-cloud-fish svg:nth-child(2) { width: 20%; margin-top: -8%; }
.accessory-teacup-cloud-fish svg:nth-child(3) { width: 17%; margin-top: 4%; }
.accessory-teacup-rainbow {
  position: absolute;
  inset: 16% 10% auto;
  width: 80%;
  filter: drop-shadow(0 0 .42rem #fff3d0);
  animation: accessory-teacup-rainbow 1.35s ease-out both;
}
@keyframes accessory-teacup-firefly-glow {
  from { box-shadow: 0 0 .6rem var(--firefly-color); }
  to { box-shadow: 0 0 1rem .3rem var(--firefly-color); }
}
@keyframes accessory-teacup-opal {
  from { opacity: 0; transform: translateY(1rem) scale(.5) rotate(-14deg); }
  to { opacity: 1; transform: none; }
}
@keyframes accessory-teacup-cloud-swim {
  0% { opacity: 0; transform: translate(110%, 12%) scale(.72); }
  45% { opacity: 1; transform: translate(38%, -20%) rotate(-8deg); }
  70% { opacity: 1; transform: translate(-24%, 10%) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes accessory-teacup-rainbow {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: .92; clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-scene="teacup"] > img[src$="/teacup-river.webp"] { transition: none; }
  .accessory-moment-target.accessory-teacup-firefly,
  .accessory-teacup-opal, .accessory-teacup-cloud-fish svg,
  .accessory-teacup-rainbow { animation: none; }
}

.accessory-moment-scene:is([data-scene="snow-globe-ride"], [data-scene="rainbow-puddle-ride"]) .accessory-adventure-backdrop {
  object-position: 50% 78%;
}
#dialog:has(.accessory-moment-scene[data-scene="snow-globe-ride"]) {
  width: min(44rem, calc(100% - 28px));
}
.accessory-moment-scene[data-scene="snow-globe-ride"] {
  width: 100%;
  aspect-ratio: 2.2;
}
[data-scene="snow-globe-ride"] .accessory-adventure-buddy {
  left: 31%;
  bottom: 11%;
  width: clamp(4.7rem, 29%, 8.2rem);
}
[data-scene="snow-globe-ride"] .accessory-adventure-actors { z-index: 4; }
[data-scene="snow-globe-ride"] .accessory-adventure-actors * { pointer-events: none; }
[data-scene="snow-globe-ride"] .accessory-moment-targets { z-index: 2; }
[data-scene="snow-globe-ride"] .accessory-adventure-prop {
  left: 72%;
  bottom: 6%;
  width: clamp(4.3rem, 25%, 7.5rem);
  transform-origin: 50% 85%;
}
[data-scene="snow-globe-ride"][data-weather-beat="shake"] .accessory-adventure-prop {
  animation: accessory-globe-shake .9s ease-in-out both;
}
[data-scene="snow-globe-ride"][data-weather-beat="shake"] .accessory-adventure-buddy {
  animation: accessory-globe-hop .9s ease-in-out both;
}
[data-scene="snow-globe-ride"]:is([data-weather-beat="trail"], [data-weather-beat="workshop"]) .accessory-adventure-prop {
  display: none;
}
[data-scene="snow-globe-ride"][data-weather-beat="trail"] .accessory-adventure-buddy {
  left: var(--globe-skate-x, 54%);
  bottom: var(--globe-skate-bottom, 11%);
  width: clamp(3.4rem, 19%, 5.8rem);
  scale: 1;
  transform: translate(-50%, 8%);
  transition: left .48s cubic-bezier(.2,.7,.3,1), bottom .48s cubic-bezier(.2,.7,.3,1);
}
[data-scene="snow-globe-ride"][data-weather-beat="workshop"] .accessory-adventure-buddy {
  left: 33%;
  scale: .83;
  transition: left .48s ease, bottom .48s ease;
}
[data-scene="snow-globe-ride"][data-weather-beat="land"] .accessory-adventure-buddy {
  animation: accessory-globe-land .95s cubic-bezier(.25,.72,.32,1) both;
}
.accessory-globe-snowhat {
  position: absolute;
  z-index: 4;
  width: 55%;
  left: 50%;
  top: 1%;
  opacity: 0;
  translate: -50% -25%;
}
[data-weather-beat="done"] .accessory-globe-snowhat {
  opacity: 1;
  translate: -50% 0;
  transition: opacity .25s, translate .25s;
}
.accessory-globe-snow {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
[data-scene="snow-globe-ride"]:is([data-weather-beat="trail"], [data-weather-beat="workshop"]) .accessory-globe-snow { opacity: 1; }
.accessory-globe-snow > span {
  position: absolute;
  left: var(--flake-x);
  top: -9%;
  color: #f4ffff;
  text-shadow: 0 0 .32rem #619fdd;
  font-size: .72rem;
}
[data-scene="snow-globe-ride"]:is([data-weather-beat="trail"], [data-weather-beat="workshop"]) .accessory-globe-snow > span {
  animation: accessory-globe-drift var(--flake-speed) var(--flake-delay) linear infinite;
}
.accessory-moment-target.accessory-globe-mark {
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: .4rem;
  border: 0;
  background: transparent;
  color: #324167;
  box-shadow: none;
  overflow: visible;
}
.accessory-globe-mark > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid #e8f7ff;
  border-radius: 50%;
  background: color-mix(in srgb, var(--globe-mark-color) 78%, white);
  box-shadow: 0 .12rem .3rem #284c7b80;
  font-size: .82rem;
  font-weight: 900;
}
.accessory-globe-mark[data-next] > span {
  outline: 3px solid #fff6aa;
  outline-offset: 2px;
  box-shadow: 0 0 .7rem .25rem var(--globe-mark-color);
}
.accessory-moment-target.accessory-globe-mark[data-lit] {
  color: #273656;
  box-shadow: none;
}
.accessory-globe-mark[data-lit]::after {
  content: '✓';
  position: absolute;
  right: .06rem;
  bottom: .06rem;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #385478;
  color: #fff;
  font-size: .68rem;
}
.accessory-moment-target.accessory-globe-mark[aria-current="location"] { border-color: #365079; }
.accessory-globe-ice-sparks {
  position: absolute;
  left: var(--ice-x);
  top: var(--ice-y);
  color: var(--ice-color);
  font-weight: 800;
  text-shadow: 0 0 .45rem #fff, 0 2px 3px #26476c;
  pointer-events: none;
}
.accessory-globe-ice-sparks span {
  position: absolute;
  translate: var(--ice-dx, -1.7rem) var(--ice-dy, -2.1rem);
}
.accessory-globe-ice-sparks span:nth-child(2) { --ice-dx: .2rem; --ice-dy: -3rem; }
.accessory-globe-ice-sparks span:nth-child(3) { --ice-dx: 1.3rem; --ice-dy: -1.7rem; }
@media (prefers-reduced-motion: no-preference) {
  .accessory-globe-ice-sparks span { animation: accessory-globe-ice-spark 1.2s ease-out both; }
}
@keyframes accessory-globe-ice-spark {
  from { translate: 0 -.3rem; opacity: 0; }
  24% { opacity: 1; }
  to { opacity: 0; }
}
.accessory-globe-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.accessory-globe-trace polyline {
  fill: none;
  stroke: #eefaff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 .26rem #71caff);
}
.accessory-globe-trace .accessory-globe-guide {
  stroke-width: 2;
  stroke-dasharray: 3 5;
  opacity: .48;
  filter: none;
}
[data-complete] .accessory-globe-drawn { stroke: #ffedaa; filter: drop-shadow(0 0 .35rem #fff2ae); }
.accessory-moment-controls .accessory-globe-route {
  flex: 1 0 100%;
  margin: 0 0 .25rem;
  color: #344776;
  font-weight: 800;
}
.accessory-globe-friend {
  display: none;
  position: absolute;
  z-index: 5;
  bottom: 8%;
  left: 65%;
  width: clamp(3.8rem, 19%, 7.5rem);
  pointer-events: none;
}
[data-scene="snow-globe-ride"][data-weather-beat="trail"] .accessory-globe-friend:not(:empty) {
  display: flex;
  width: clamp(4.6rem, 23%, 8rem);
  left: var(--globe-friend-x, 68%);
  bottom: var(--globe-friend-bottom, 10%);
  transform: translateX(-50%);
  transition: left .62s ease, bottom .62s ease;
}
[data-scene="snow-globe-ride"]:is([data-weather-beat="workshop"], [data-weather-beat="land"], [data-weather-beat="done"]) .accessory-globe-friend:not(:empty) {
  display: flex;
  width: clamp(6rem, 28%, 11rem);
  animation: accessory-globe-sculpt .65s cubic-bezier(.16,.72,.28,1.18) both;
}
[data-scene="snow-globe-ride"][data-weather-beat="land"] .accessory-globe-friend:not(:empty) { left:65%; bottom:7%; animation:globe-friends-home .95s ease-out both; }
[data-scene="snow-globe-ride"][data-weather-beat="done"] .accessory-globe-friend:not(:empty) { left:64%; bottom:7%; }
[data-scene="snow-globe-ride"][data-weather-beat="done"] .accessory-adventure-buddy { left:38%; bottom:10%; }
@keyframes globe-friends-home { from { opacity:.2; translate:2rem -3rem; scale:.8; } to { opacity:1; translate:0 0; scale:1; } }
.accessory-globe-friend svg { display: block; width: 100%; }
.accessory-globe-friend > span { flex:1 1 50%; min-width:0; animation:globe-dance 1.25s ease-in-out infinite alternate; }
.accessory-globe-friend > span:nth-child(2) { animation-delay:-.6s; }
@keyframes globe-dance { from { transform:translateY(0) rotate(-9deg); } to { transform:translateY(-16%) rotate(10deg); } }
.accessory-globe-patterns, .accessory-globe-friends {
  display: grid;
  width: 100%;
  gap: .35rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.accessory-globe-friends { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.accessory-globe-patterns > button, .accessory-globe-friends > button {
  display: grid;
  place-items: center;
  gap: .1rem;
  min-width: 0;
  padding: .25rem;
  font-size: .76rem;
  line-height: 1.15;
  background: #f1f8ff;
}
.accessory-globe-patterns > button svg {
  display: block;
  width: 3.2rem;
  height: 2.25rem;
  border-radius: .45rem;
  background: #314466;
}
.accessory-globe-friends > button svg { display: block; width: 3.25rem; height: 3.65rem; }
.accessory-globe-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; width: 100%; }
.accessory-globe-tools button { min-height: 2.75rem; padding: .4rem .5rem; font-size: .84rem; }
.accessory-globe-instructions { width:100%; color:#405b7c; font-size:.82rem; line-height:1.4; }
.accessory-globe-supply { display:flex; width:100%; justify-content:center; align-items:center; gap:.55rem; padding:.4rem .6rem; border:1px solid #a5d3e8; border-radius:.8rem; background:linear-gradient(120deg,#e9f8ff,#f4ecff); color:#365579; font-size:.78rem; line-height:1.35; }
.accessory-globe-supply > span:last-child { text-align:left; }
.accessory-globe-supply-balls { display:flex; align-items:center; gap:.2rem; flex-shrink:0; }
.accessory-globe-supply-balls i { display:block; width:.9rem; height:.9rem; border:1.5px dashed #83a8c6; border-radius:50%; background:#cfe4ed; }
.accessory-globe-supply-balls i[data-filled] { border-style:solid; border-color:#76b8d8; background:radial-gradient(circle at 30% 22%,#fff 20%,#dcf8ff 65%,#99d7f0); box-shadow:0 0 .35rem #fff; }
.accessory-globe-route { display:grid!important; gap:.35rem; }
@media (max-width: 719px) {
  #dialog .accessory-moment .accessory-moment-scene[data-scene="snow-globe-ride"] { height: clamp(11.5rem, 28dvh, 14rem); }
  [data-scene="snow-globe-ride"]:is([data-weather-beat="trail"], [data-weather-beat="workshop"]) .accessory-adventure-caption { display: none; }
  .accessory-globe-mark > span { font-size: .72rem; }
  .accessory-globe-patterns > button { min-height: 3.75rem; }
  .accessory-globe-friends > button { min-height: 4.5rem; }
}
@keyframes accessory-globe-sculpt {
  from { opacity: 0; transform: translateY(.55rem) scale(.65); }
  to { opacity: 1; transform: none; }
}
@keyframes accessory-globe-shake {
  0%, 100% { rotate: 0deg; }
  20%, 58% { rotate: -12deg; }
  39%, 78% { rotate: 11deg; }
}
@keyframes accessory-globe-hop {
  0% { left: 31%; bottom: 11%; scale: 1; }
  42% { left: 54%; bottom: 34%; scale: .75; rotate: -12deg; }
  100% { left: 72%; bottom: 30%; scale: .19; opacity: 0; rotate: 24deg; }
}
@keyframes accessory-globe-land {
  0% { left: 67%; bottom: 29%; scale: .45; rotate: -15deg; }
  68% { left: 32%; bottom: 10%; scale: 1.04 .82; rotate: 9deg; }
  100% { left: 31%; bottom: 11%; scale: 1; rotate: 0deg; }
}
@keyframes accessory-globe-drift {
  from { top: -9%; translate: -.5rem 0; }
  to { top: 107%; translate: 1rem 0; }
}

[data-scene="rainbow-puddle-ride"] > img[src$="adventure-puddle-path.webp"] { object-position: 70% center; }
[data-scene="rainbow-puddle-ride"] .accessory-adventure-buddy {
  left: 28%;
  bottom: 15%;
  width: clamp(4.8rem, 27%, 8rem);
}
[data-scene="rainbow-puddle-ride"] .accessory-adventure-prop { display: none; }
.accessory-puddle-water {
  position: absolute;
  left: 70%;
  bottom: 12%;
  width: 29%;
  height: 13%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #d8e9f96e 9%, #80b4cc40 50%, transparent 72%);
}
.accessory-puddle-water i {
  position: absolute;
  inset: 7% 2%;
  border: 1px solid #fff9e8b5;
  border-radius: 50%;
  box-shadow: 0 .14rem .24rem #385c683d;
}
.accessory-puddle-water i:nth-child(2) { inset: 19% 13%; opacity: .75; }
.accessory-puddle-water i:nth-child(3) { inset: 31% 25%; opacity: .5; }
[data-weather-beat="splash"] .accessory-puddle-water,
[data-weather-beat="surf"] .accessory-puddle-water,
[data-weather-beat="done"] .accessory-puddle-water {
  background: radial-gradient(ellipse, #fffbf2b8 0%, var(--puddle-color, #6bedbb) 34%, transparent 71%);
  filter: drop-shadow(0 0 .4rem var(--puddle-color, #6bedbb));
}
[data-scene="rainbow-puddle-ride"][data-weather-beat="jump"] .accessory-adventure-buddy {
  animation: accessory-puddle-leap .69s ease-in-out both;
}
[data-scene="rainbow-puddle-ride"][data-weather-beat="splash"] .accessory-adventure-buddy {
  left: 70%;
  bottom: 14%;
}
[data-scene="rainbow-puddle-ride"]:is([data-weather-beat="surf"], [data-weather-beat="done"]) .accessory-adventure-buddy {
  left: 51%;
  bottom: 10%;
}
[data-scene="rainbow-puddle-ride"]:is([data-weather-beat="surf"], [data-weather-beat="done"]) .accessory-puddle-water {
  left: 51%;
  bottom: 7%;
}
[data-scene="rainbow-puddle-ride"][data-weather-beat="surf"] :is(.accessory-adventure-buddy, .accessory-puddle-water) {
  animation: accessory-puddle-surf 2.64s ease-in-out both;
}
.accessory-puddle-spray {
  position: absolute;
  z-index: 4;
  left: 70%;
  bottom: 12%;
  width: 20%;
  height: 10%;
  border: 2px solid var(--puddle-color, #6bedbb);
  border-radius: 50%;
  box-shadow: 0 0 .6rem var(--puddle-color, #6bedbb), inset 0 0 .3rem #ffffffc0;
  translate: -50%;
  opacity: 0;
  pointer-events: none;
}
[data-weather-beat="splash"] .accessory-puddle-spray { animation: accessory-puddle-splash .5s ease-out both; }
.accessory-puddle-discovery {
  position: absolute;
  z-index: 4;
  left: 79%;
  bottom: 12%;
  width: clamp(3.6rem, 18%, 5.2rem);
  aspect-ratio: 1.3;
  translate: -50%;
  pointer-events: none;
}
.accessory-puddle-discovery[data-phase="hint"]::before {
  position: absolute;
  inset: auto 7% 6%;
  height: 24%;
  border: 2px solid #f7ffff;
  border-radius: 50%;
  box-shadow: 0 0 .4rem #fffce2, 0 0 .7rem #9af5f9;
  content: "";
  animation: accessory-puddle-glint 1.35s ease-in-out infinite alternate;
}
.accessory-puddle-discovery svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 .16rem .2rem #25405f75);
}
.accessory-puddle-discovery[data-phase="reveal"] svg { animation: accessory-puddle-peek .4s ease-out both; }
.accessory-puddle-discovery[data-phase="done"][data-find="prism"] svg { animation: accessory-puddle-pocket .56s ease-in both; }
.accessory-puddle-discovery[data-phase="done"][data-find="boat"] svg { animation: accessory-puddle-drift 1.25s ease-in-out both; }
.accessory-puddle-discovery[data-phase="done"][data-find="duck"] svg { animation: accessory-puddle-wiggle .65s ease-out; }
@keyframes accessory-puddle-glint {
  from { scale: .6; opacity: .5; }
  to { scale: 1.13; opacity: 1; }
}
@keyframes accessory-puddle-peek {
  from { opacity: 0; translate: 0 .6rem; scale: .6; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes accessory-puddle-pocket {
  to { translate: -140% -70%; scale: .45; opacity: 0; }
}
@keyframes accessory-puddle-drift {
  55% { opacity: 1; }
  to { translate: -235% -65%; scale: .57; opacity: 0; }
}
@keyframes accessory-puddle-wiggle {
  25%, 75% { rotate: -17deg; translate: 0 -.24rem; }
  50% { rotate: 13deg; translate: 0 -.45rem; }
}
@keyframes accessory-puddle-leap {
  0% { left: 28%; bottom: 15%; }
  40% { left: 45%; bottom: 30%; rotate: -9deg; }
  100% { left: 70%; bottom: 14%; }
}
@keyframes accessory-puddle-splash {
  0% { scale: .55; opacity: .92; }
  100% { scale: 2.75 2; opacity: 0; }
}
@keyframes accessory-puddle-surf {
  0% { left: 70%; translate: 0 0; rotate: 6deg; }
  27% { left: 24%; translate: 0 -.5rem; rotate: -4deg; }
  64% { left: 77%; translate: 0 -.9rem; rotate: 5deg; }
  100% { left: 51%; translate: 0 0; rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  [data-scene="snow-globe-ride"] .accessory-adventure-buddy { transition: none; }
  [data-scene="snow-globe-ride"] .accessory-globe-friend { transition: none; }
  [data-scene="snow-globe-ride"]:is([data-weather-beat="workshop"], [data-weather-beat="done"]) .accessory-globe-friend:not(:empty) { animation: none; }
  .accessory-puddle-discovery[data-phase]::before,
  .accessory-puddle-discovery[data-phase] svg { animation: none; }
  .accessory-puddle-discovery[data-phase="done"]:is([data-find="prism"], [data-find="boat"]) svg { visibility: hidden; }
  .accessory-moment-scene:is([data-scene="snow-globe-ride"], [data-scene="rainbow-puddle-ride"]) :is(.accessory-adventure-buddy, .accessory-adventure-prop, .accessory-puddle-water, .accessory-puddle-spray, .accessory-globe-snow > span) { animation: none; }
  .accessory-globe-snowhat { transition: none; }
  .accessory-globe-snow > span { top: 35%; }
  .accessory-globe-snow > span:nth-child(2n) { top: 53%; }
  .accessory-globe-snow > span:nth-child(3n) { top: 74%; }
}
[data-teacup-phase="duck"] .accessory-teacup-duck { opacity: 1; transform: none; }
[data-sailing="true"] .accessory-teacup-boat { animation: accessory-teacup-voyage 7.8s ease-in-out both; }
[data-sailing="true"] .accessory-teacup-wake { animation: accessory-teacup-ripple .9s ease-out infinite; }
@keyframes accessory-teacup-voyage {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  20% { transform: translate(calc(-50% - var(--teacup-cross)), -9%) rotate(-11deg); }
  40% { transform: translate(calc(-50% + .15 * var(--teacup-cross)), -18%) rotate(10deg); }
  51% { transform: translate(calc(-50% + .63 * var(--teacup-cross)), -5%) rotate(-13deg); }
  67% { transform: translate(calc(-50% + var(--teacup-cross)), 4%) rotate(9deg); }
  86% { transform: translate(calc(-50% + .43 * var(--teacup-cross)), -6%) rotate(4deg); }
}
@keyframes accessory-teacup-ripple {
  0% { scale: .9 .65; opacity: .92; }
  100% { scale: 1.48 1.12; opacity: 0; }
}
.accessory-moment-targets, .accessory-moment-effects {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.accessory-moment-targets { z-index: 6; }
.accessory-moment-target {
  position: absolute;
  top: var(--target-y);
  left: var(--target-x);
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  translate: -50% -50%;
  border: 2px solid white;
  border-radius: 50%;
  color: #3b315b;
  font-size: 1.5rem;
  font-weight: 800;
  pointer-events: auto;
}
.accessory-moment-target:focus-visible,
.accessory-moment-controls button:focus-visible,
.accessory-moment-play:focus-visible { outline: 3px solid #8c4ac1; outline-offset: 3px; }
.accessory-moment-scene[data-scene="bubbles"] .accessory-adventure-buddy {
  left: 44%;
  transition: left .7s cubic-bezier(.22, .62, .34, 1);
}
.accessory-moment-scene[data-bubble-wave="1"] .accessory-adventure-buddy { left: 53%; }
.accessory-moment-scene[data-bubble-wave="2"] .accessory-adventure-buddy { left: 40%; }
.accessory-moment-scene[data-bubble-wave="quack"] .accessory-adventure-buddy { left: 45%; }
.accessory-bubble-clue {
  width: 100%;
  padding: .65rem;
  border: 1px solid #d5c8eb;
  border-radius: .8rem;
  background: #f6f0ff;
  color: #3b315b;
}
.accessory-bubble-clue ol {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .45rem 0 0;
  padding: 0;
  list-style: none;
}
.accessory-bubble-clue li {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .42rem .15rem .18rem;
  border: 1px solid #ded3ed;
  border-radius: 2rem;
  background: #fff;
  font-size: .85rem;
  font-weight: 700;
}
.accessory-bubble-clue li > span:first-child {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, var(--bubble-clue-color) 65%);
  font-size: 1rem;
}
.accessory-bubble-clue li[data-complete] { border-color: #a9d4b6; background: #edf8ef; }
.accessory-bubble-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .65rem;
  color: #544469;
  font-size: .9rem;
  font-weight: 750;
}
.accessory-bubble-progress ol {
  display: flex;
  gap: .28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.accessory-bubble-progress li {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px dashed #9b88b5;
  border-radius: 50%;
  background: #f8f2ff;
}
.accessory-bubble-progress li[data-popped] {
  border: 1px solid #ae9ac4;
  background: radial-gradient(circle at 32% 24%, #fff 5%, var(--bubble-clue-color) 70%);
  color: #382957;
}
[data-scene="bubbles"] .accessory-moment-target {
  background: radial-gradient(circle at 30% 27%, #fff 0 7%, #ffffff75 10% 23%, var(--target-color) 58%, #ede5ff 89%);
  box-shadow: 0 0 .45rem #ffffffa0, inset 0 0 .2rem #ffffff90;
  width: clamp(2.75rem, 12vw, 3.5rem);
  height: clamp(2.75rem, 12vw, 3.5rem);
  animation: accessory-bubble-bob 2.4s var(--bubble-delay) ease-in-out infinite;
}
[data-scene="bubbles"] .accessory-moment-target[data-bubble="giant"] {
  width: 5rem;
  height: 5rem;
  font-size: 2.4rem;
  border-width: 3px;
  box-shadow: 0 0 1.3rem .2rem #ffd8a6, inset 0 0 .6rem #fff;
}
[data-scene="bubbles"] .accessory-moment-target:focus-visible { animation-play-state: paused; }
[data-scene="bubbles"] .accessory-moment-target[data-wobble] {
  border-color: #fff1a4;
  box-shadow: 0 0 .62rem #ffdb72;
}
[data-scene="bubbles"] .accessory-moment-target[data-hit="true"] {
  animation: accessory-bubble-burst .3s ease-out both;
}
[data-scene="bubbles"] .accessory-moment-target[data-hit="true"]::after {
  position: absolute;
  inset: -.45rem;
  border: 3px dotted #fff9d8;
  border-radius: 50%;
  content: '';
}
.accessory-bubble-surprise {
  position: absolute;
  inset: auto auto 12% 69%;
  translate: -50% 0;
  width: clamp(3.7rem, 18vw, 5.7rem);
  filter: drop-shadow(0 .35rem .22rem #1c566fbb);
  animation: accessory-duck-reveal .55s cubic-bezier(.15, .8, .22, 1.23) both;
}
.accessory-bubble-surprise svg { display: block; width: 100%; }
.accessory-bubble-surprise::after {
  display: block;
  width: 90%;
  height: .65rem;
  margin: -.13rem auto 0;
  border: 2px solid #c6f5ffba;
  border-radius: 50%;
  box-shadow: 0 0 0 .28rem #b6ebff60, 0 0 0 .57rem #a6deff36;
  content: '';
}
@keyframes accessory-bubble-bob {
  0%, 100% { transform: translate(-.16rem, .14rem) rotate(-6deg); }
  50% { transform: translate(.24rem, -.42rem) rotate(7deg); }
}
@keyframes accessory-bubble-burst {
  0% { opacity: 1; scale: 1; }
  37% { opacity: 1; scale: 1.35; background: transparent; }
  100% { opacity: 0; scale: 1.75; }
}
@keyframes accessory-duck-reveal {
  0% { scale: .2; rotate: -18deg; opacity: 0; }
  100% { scale: 1; rotate: 8deg; opacity: 1; }
}
[data-scene="terrarium-voyage"] .accessory-adventure-buddy {
  left: var(--star-buddy-x, 48%);
  bottom: var(--star-buddy-y, 5%);
  width: clamp(4.3rem, 24%, 7.1rem);
  transform: translateX(-50%);
  transition: left .8s cubic-bezier(.22, .8, .24, 1), bottom .8s cubic-bezier(.22, .8, .24, 1);
}
[data-scene="terrarium-voyage"] .accessory-adventure-prop {
  left: 20%;
  bottom: 1%;
  width: clamp(2.8rem, 15%, 4.6rem);
  transition: opacity .7s;
}
[data-scene="terrarium-voyage"][data-constellation] .accessory-adventure-prop { opacity: 0; }
[data-scene="terrarium-voyage"][data-constellation] .accessory-adventure-buddy > * {
  animation: accessory-stars-hover 2.8s ease-in-out infinite;
}
@keyframes accessory-stars-hover {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-.5rem) rotate(3deg); }
}
[data-scene="terrarium-voyage"] .accessory-moment-target {
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 9vw, 3.2rem);
  height: clamp(2.75rem, 9vw, 3.2rem);
  border: 1px solid #fff0bd;
  color: #ffeab1;
  background: radial-gradient(circle, #675596, #262647);
  box-shadow: 0 0 .75rem #ebdbff8c;
}
[data-scene="terrarium-voyage"] .accessory-moment-target:disabled:not([data-hit]) {
  opacity: .52;
  box-shadow: none;
}
[data-scene="terrarium-voyage"] .accessory-moment-target[data-hit] {
  color: #704572;
  opacity: 1;
  background: radial-gradient(circle, #fffbe4, #fbd78f);
  box-shadow: 0 0 1.2rem #ffdf87;
}
.accessory-constellation,
.accessory-star-wand-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.accessory-constellation path {
  fill: none;
  stroke: #fff6bd;
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 5px #ffbd69);
  transition: stroke-dashoffset .66s ease-out;
}
.accessory-constellation path.is-lit { stroke-dashoffset: 0; }
.accessory-constellation .accessory-constellation-tail { transition-delay: .3s; }
[data-scene="star-wand-show"] .accessory-adventure-buddy,
[data-scene="star-wand-show"] .accessory-adventure-prop {
  bottom: 4%;
  transition: bottom 1.1s cubic-bezier(.25, .8, .3, 1), left 1.1s cubic-bezier(.25, .8, .3, 1), transform 1s ease-out;
}
[data-scene="star-wand-show"] .accessory-adventure-buddy { left: 43%; width: clamp(4.3rem, 26%, 7.8rem); }
[data-scene="star-wand-show"] .accessory-adventure-prop { left: 61%; width: clamp(2.8rem, 15%, 4.4rem); }
[data-scene="star-wand-show"][data-spell-phase="lift"] .accessory-adventure-buddy { bottom: 25%; transform: translateX(-50%) rotate(-11deg); }
[data-scene="star-wand-show"][data-spell-phase="lift"] .accessory-adventure-prop { bottom: 27%; transform: translateX(-50%) rotate(19deg); }
[data-scene="star-wand-show"][data-spell-phase="show"] .accessory-adventure-buddy { bottom: 17%; left: 55%; transform: translateX(-50%) rotate(9deg); }
[data-scene="star-wand-show"][data-spell-phase="show"] .accessory-adventure-prop { bottom: 21%; left: 70%; transform: translateX(-50%) rotate(-16deg); }
.accessory-spell-aurora,
.accessory-spell-moonfish { opacity: 0; transition: opacity .4s; }
[data-star-spell="aurora"]:is([data-spell-phase="show"], [data-spell-phase="finished"]) .accessory-spell-aurora,
[data-star-spell="moonfish"]:is([data-spell-phase="show"], [data-spell-phase="finished"]) .accessory-spell-moonfish { opacity: 1; }
.accessory-spell-aurora path {
  fill: none;
  stroke: #91ffe2;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 9px #98eeff);
}
.accessory-spell-aurora path:nth-child(2) { stroke: #cebdff; stroke-width: 1; }
.accessory-spell-aurora path:nth-child(3) { stroke: #ffd1e5; stroke-width: .75; }
[data-star-spell="aurora"]:is([data-spell-phase="show"], [data-spell-phase="finished"]) .accessory-spell-aurora path {
  animation: accessory-aurora-trail 1.25s ease-out both;
}
@keyframes accessory-aurora-trail { to { stroke-dashoffset: 0; } }
.accessory-spell-moonfish {
  fill: #ffd98b46;
  stroke: #fff0b5;
  stroke-width: .66;
  filter: drop-shadow(0 0 .48rem #ffc660);
  transform: translate(8%, 14%) scale(.53);
}
[data-star-spell="moonfish"]:is([data-spell-phase="show"], [data-spell-phase="finished"]) .accessory-spell-moonfish {
  animation: accessory-moonfish-swim 2.2s ease-in-out both;
}
@keyframes accessory-moonfish-swim {
  0% { transform: translate(88%, 20%) scale(.36); }
  48% { transform: translate(33%, 5%) scale(.55) rotate(-8deg); }
  100% { transform: translate(8%, 14%) scale(.53); }
}
@media (prefers-reduced-motion: reduce) {
  [data-scene="terrarium-voyage"] :is(.accessory-adventure-buddy, .accessory-adventure-prop),
  [data-scene="star-wand-show"] :is(.accessory-adventure-buddy, .accessory-adventure-prop),
  .accessory-constellation path,
  .accessory-spell-aurora,
  .accessory-spell-moonfish { transition: none; }
  [data-scene="terrarium-voyage"][data-constellation] .accessory-adventure-buddy > *,
  [data-star-spell="aurora"]:is([data-spell-phase="show"], [data-spell-phase="finished"]) .accessory-spell-aurora path,
  [data-star-spell="moonfish"]:is([data-spell-phase="show"], [data-spell-phase="finished"]) .accessory-spell-moonfish { animation: none; }
  [data-star-spell="aurora"] .accessory-spell-aurora path { stroke-dashoffset: 0; }
}
.accessory-moment-scene[data-scene="yoyo"] {
  --comet-light: #c6e8ff;
  --comet-tint: #5a83e1;
}
.accessory-moment-scene[data-yoyo-look="saturn"] { --comet-light: #ffe79a; --comet-tint: #fba954; }
.accessory-moment-scene[data-yoyo-look="stars"] { --comet-light: #f0ceff; --comet-tint: #c970ee; }
.accessory-moment-scene[data-scene="yoyo"]::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(ellipse at 42% 30%, var(--comet-tint), transparent 69%);
  opacity: .22;
  pointer-events: none;
  content: '';
  transition: opacity .55s;
}
.accessory-moment-scene[data-yoyo="caught"]::after { opacity: .46; }
.accessory-moment-scene[data-scene="yoyo"] .accessory-adventure-buddy { left: 64%; }
.accessory-moment-scene[data-scene="yoyo"] .accessory-adventure-prop {
  inset: 74% auto auto 72%;
  width: clamp(2.85rem, 13%, 5.75rem);
  translate: -50% -50%;
  transform: none;
}
[data-yoyo="out"] .accessory-adventure-art {
  filter: drop-shadow(.15rem .14rem .2rem var(--comet-tint)) drop-shadow(0 0 .44rem var(--comet-light));
}
.accessory-yoyo-trail {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--comet-light);
  opacity: .83;
  filter: drop-shadow(0 0 6px var(--comet-tint));
}
.accessory-yoyo-trail polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 4 6;
  stroke-linejoin: round;
}
[data-yoyo="out"] .accessory-yoyo-trail polyline { animation: accessory-comet-flow .9s linear infinite; }
.accessory-yoyo-trail circle { fill: #fff8c5; stroke: currentColor; stroke-width: 1.5; }
[data-yoyo="caught"] .accessory-yoyo-trail polyline {
  stroke-dasharray: none;
  stroke-width: 3;
}
@keyframes accessory-comet-flow { to { stroke-dashoffset: -20; } }
.accessory-yoyo-tricks { display: flex; flex-wrap: wrap; justify-content: center; gap: .38rem; }
.accessory-yoyo-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex-basis: 100%;
  width: 100%;
  gap: .4rem;
  padding: 0;
  margin: .4rem 0;
  list-style: none;
  font-size: .8rem;
  font-weight: 750;
}
.accessory-yoyo-progress li {
  display: grid;
  justify-items: center;
  gap: .2rem;
  padding: .45rem .25rem;
  border: 2px solid #d9d3eb;
  border-radius: .75rem;
  background: #faf8ff;
  color: #51426b;
  text-align: center;
}
.accessory-yoyo-progress li > span {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #e9e2f6;
}
.accessory-yoyo-progress li[aria-current="step"] { border-color: #8c61bd; }
.accessory-yoyo-progress li[data-caught="true"] { border-color: #69a894; background: #e8f7ef; color: #245d4a; }
.accessory-yoyo-progress li[data-caught="true"] > span { background: #a9ddc4; }
.accessory-moment-scene[data-yoyo-finale="moon"] .accessory-adventure-buddy {
  filter: saturate(.45) brightness(1.16) drop-shadow(0 0 12px #cdeaff);
}
.accessory-moment-scene[data-yoyo-finale="saturn"] .accessory-adventure-buddy {
  filter: sepia(.25) saturate(1.45) drop-shadow(0 0 12px #ffdf7c);
}
.accessory-moment-scene[data-yoyo-finale="stars"] .accessory-adventure-buddy {
  filter: hue-rotate(60deg) saturate(1.4) drop-shadow(-5px 0 9px #f5b2ff) drop-shadow(5px 0 9px #a9efff);
}
.accessory-yoyo-mode { display: flex; align-items: center; gap: .35rem; padding-inline: .3rem; }
.accessory-yoyo-guide { display: grid; flex-basis: 100%; justify-items: center; gap: .32rem; font-weight: 750; }
.accessory-yoyo-guide[hidden] { display: none; }
.accessory-yoyo-meter {
  position: relative;
  width: min(90%, 17rem);
  height: 1.25rem;
  overflow: hidden;
  border: 1px solid #60558d;
  border-radius: 2rem;
  background: linear-gradient(90deg, #e1d7ff var(--catch-start, 66%), #ffc84d var(--catch-start, 66%) var(--catch-end, 94%), #e1d7ff var(--catch-end, 94%));
}
.accessory-yoyo-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: .82rem;
  translate: -50% 0;
  border: 2px solid #fff5c6;
  border-radius: 50%;
  background: #5d378b;
  box-shadow: 0 0 .42rem #5d378b;
}
.accessory-moment-effects > span {
  position: absolute;
  top: var(--effect-y);
  left: var(--effect-x);
  color: var(--effect-color);
  font-size: clamp(.7rem, 4vw, 1.4rem);
  font-weight: 900;
  text-shadow: 0 0 .45rem #fff, 0 1px .15rem #5e517a;
  animation: accessory-spark 1s var(--effect-delay) both;
}
.accessory-moment-effects[data-effect="snow"] > span {
  animation: accessory-snow 1.8s var(--effect-delay) both;
}
.accessory-moment-effects[data-effect="splash"] > span {
  top: max(68%, var(--effect-y));
  animation: accessory-splash .7s var(--effect-delay) both;
}
.accessory-moment-effects[data-effect="ride"] > span {
  top: max(64%, var(--effect-y));
  animation: accessory-snow .85s var(--effect-delay) both;
}
.accessory-moment-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
}
.accessory-moment-controls:empty,
.accessory-moment-play[hidden] { display: none; }
.accessory-moment-controls button, .accessory-moment-play { min-height: 2.75rem; }
.accessory-moment-play { justify-self: center; }
.accessory-moment-reward { font-weight: 750; color: #5b3879; }
@keyframes accessory-spark {
  0% { opacity: 0; scale: .25; rotate: -20deg; }
  40% { opacity: 1; scale: 1.2; }
  100% { opacity: 0; scale: .6; rotate: 20deg; }
}
@keyframes accessory-snow {
  0% { opacity: 0; translate: -.3rem -1.2rem; }
  40% { opacity: 1; }
  100% { opacity: 0; translate: .65rem 1.6rem; }
}
@keyframes accessory-splash {
  0% { opacity: 0; translate: 0 .5rem; }
  40% { opacity: 1; translate: 0 -.8rem; }
  100% { opacity: 0; translate: 0 .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .accessory-moment-scene > img.accessory-adventure-backdrop { transition: none; }
  .accessory-moment-scene [data-hit="true"],
  .accessory-moment-scene .reference-creature-figure,
  .accessory-moment-scene .reference-worn-accessory { transition: none; }
  [data-scene="bubbles"] .accessory-moment-target,
  .accessory-bubble-surprise { animation: none; }
  [data-scene="bubbles"] .accessory-moment-target[data-hit="true"] { opacity: 0; }
  .accessory-moment-scene[data-scene="bubbles"] .accessory-adventure-buddy,
  .accessory-moment-scene[data-scene="yoyo"]::after { transition: none; }
  [data-yoyo="out"] .accessory-yoyo-trail polyline { animation: none; }
  .accessory-moment-effects > span { animation: none !important; }
  .accessory-moment-scene[data-scene="teacup"], .accessory-teacup-duck { transition: none; }
  [data-sailing="true"] .accessory-teacup-boat, [data-sailing="true"] .accessory-teacup-wake { animation: none; }
}

.accessory-moon-rocket {
  position: absolute;
  left: 43%;
  bottom: 2%;
  width: clamp(5.6rem, 30%, 8.8rem);
  aspect-ratio: 120 / 164;
  transform: translateX(-50%);
  filter: drop-shadow(0 .3rem .22rem #19264080);
}
.accessory-moon-rocket > svg,
.accessory-moon-postbox > svg { display: block; width: 100%; height: 100%; }
[data-scene="moon-mail"] .accessory-moon-rocket .accessory-adventure-buddy {
  inset: 32.4% auto auto 50%;
  width: 34%;
  overflow: hidden;
  border-radius: 50%;
  filter: none;
}
[data-scene="moon-mail"] .accessory-moon-rocket .accessory-adventure-prop {
  inset: 67% auto auto 50%;
  width: 14%;
  filter: drop-shadow(0 0 .3rem #ce9cf7);
}
.accessory-moon-flame {
  position: absolute;
  z-index: -1;
  top: 81%;
  left: 36%;
  width: 28%;
  height: 25%;
  border-radius: 36% 36% 80% 80%;
  background: radial-gradient(ellipse at 50% 20%, #fff5cb 8%, #ffc66e 43%, #ec6b83 76%, #ac62ce00 88%);
  opacity: 0;
}
[data-space-phase="launch"] .accessory-moon-rocket {
  animation: accessory-moon-liftoff 1.3s cubic-bezier(.4, .05, .55, 1) both;
}
[data-space-phase="launch"] .accessory-moon-flame {
  opacity: 1;
  animation: accessory-moon-thrust .19s ease-in-out infinite alternate;
}
[data-space-phase="orbit"] .accessory-moon-rocket {
  left: 69%;
  bottom: 12%;
  transform: translateX(-50%) rotate(19deg) scale(.8);
  animation: accessory-moon-orbit 2.6s ease-in-out infinite alternate;
}
[data-space-phase="landing"] .accessory-moon-rocket {
  left: 23%;
  bottom: 0;
  animation: accessory-moon-touchdown 1.2s cubic-bezier(.24, .68, .3, 1) both;
}
[data-space-phase="landing"] .accessory-moon-flame { opacity: .7; scale: .65; }
[data-space-phase="surface"] .accessory-moon-rocket,
[data-space-phase="stamped"] .accessory-moon-rocket {
  left: 23%;
  bottom: 0;
  transform: translateX(-50%) scale(.68);
  transform-origin: 50% 88%;
}
[data-scene="moon-mail"] .accessory-adventure-actors > .accessory-adventure-buddy {
  left: 52%;
  bottom: 4%;
  width: clamp(4rem, 22%, 6.6rem);
}
.accessory-moon-postbox {
  position: absolute;
  right: 11%;
  bottom: 6%;
  width: clamp(2.7rem, 13%, 4rem);
  aspect-ratio: 3 / 4;
  visibility: hidden;
}
[data-space-phase="surface"] .accessory-moon-postbox,
[data-space-phase="stamped"] .accessory-moon-postbox { visibility: visible; }
.accessory-moon-postcard {
  position: absolute;
  z-index: 2;
  top: 22%;
  left: 50%;
  display: grid;
  gap: .16rem;
  width: max-content;
  max-width: 78%;
  padding: .5rem 2.1rem .55rem .62rem;
  transform: translateX(-50%) rotate(-7deg);
  border: 2px solid #f1c582;
  border-radius: .26rem;
  color: #533952;
  background: repeating-linear-gradient(145deg, #f6d391 0 5px, #fff5d5 5px 12px);
  box-shadow: 0 .3rem .5rem #141b49a0;
  font-size: .72rem;
  text-align: left;
  visibility: hidden;
}
.accessory-moon-postcard small { color: #73486d; font-weight: 850; letter-spacing: .08em; }
.accessory-moon-postcard strong { font-size: .9rem; line-height: 1.1; }
.accessory-moon-stamp {
  position: absolute;
  top: .32rem;
  right: .3rem;
  display: grid;
  width: 1.45rem;
  aspect-ratio: 1;
  place-items: center;
  transform: rotate(12deg);
  border: 1px dashed #ffe6a7;
  color: #ffe6a7;
  background: #604d84;
  font-size: 1.1rem;
}
[data-space-phase="stamped"] .accessory-moon-postcard {
  visibility: visible;
  animation: accessory-moon-postmark .52s cubic-bezier(.19, .75, .37, 1.26) both;
}
@keyframes accessory-moon-liftoff {
  0%, 18% { transform: translate(-50%, 0) rotate(-3deg); }
  33% { transform: translate(-55%, -8%) rotate(5deg); }
  100% { transform: translate(32%, -142%) rotate(15deg) scale(.72); }
}
@keyframes accessory-moon-thrust {
  from { scale: .82 .9; }
  to { scale: 1.18 1.12; }
}
@keyframes accessory-moon-orbit {
  from { translate: 0 -.2rem; }
  to { translate: 0 .45rem; }
}
@keyframes accessory-moon-touchdown {
  from { transform: translate(-32%, -130%) rotate(-11deg) scale(.7); transform-origin: 50% 88%; }
  to { transform: translateX(-50%) scale(.68); transform-origin: 50% 88%; }
}
@keyframes accessory-moon-postmark {
  from { transform: translate(-50%, -18%) rotate(-12deg) scale(.72); opacity: 0; }
  to { transform: translateX(-50%) rotate(-7deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-scene="moon-mail"] :is(.accessory-moon-rocket, .accessory-moon-flame, .accessory-moon-postcard) { animation: none; }
}
/* The sparkle is small; its transparent touch target remains easy to use. */
.accessory-wand-catch { position:absolute; inset:0; z-index:8; }
.accessory-moment-scene .accessory-wand-wish { position:absolute; left:var(--wish-x-a); top:var(--wish-y-a); display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:50%; transform:translate(-50%,-50%); background:transparent; box-shadow:none; color:#debbff; pointer-events:auto; cursor:pointer; animation:wand-flight var(--wish-speed,7s) var(--wish-delay,0s) linear infinite; }
.accessory-wand-wish > span { display:grid; place-items:center; width:1.4rem; height:1.4rem; font-size:1.35rem; line-height:1; color:#d5b2ff; text-shadow:0 0 .35rem #b280ec,0 0 .7rem #9a62cd; }
.accessory-wand-wish[data-gold="true"] > span { color:#fff0a4; text-shadow:0 0 .25rem #fff,0 0 .65rem #ffcf60; }
.accessory-wand-wish:focus-visible { outline:3px solid #fff; outline-offset:1px; animation-play-state:paused; background:#43296f70; }
.accessory-wand-wish:active { animation-play-state:paused; }
[data-wish-motion="slow"] .accessory-wand-wish { animation-duration:calc(var(--wish-speed,7s) * 2.5); }
.accessory-wand-count { font-weight:850; color:#583c78; }
.accessory-wand-speed { min-height:44px; }
@keyframes wand-flight {
  0%,100% { left:var(--wish-x-a); top:var(--wish-y-a); rotate:-16deg; }
  25% { left:var(--wish-x-b); top:var(--wish-y-b); rotate:35deg; }
  50% { left:var(--wish-x-c); top:var(--wish-y-c); rotate:110deg; }
  75% { left:var(--wish-x-d); top:var(--wish-y-d); rotate:210deg; }
}
@media(prefers-reduced-motion:reduce) {
  .accessory-wand-wish,.accessory-bridge-arrival span,.accessory-globe-friend > span { animation:none!important; }
  [data-scene="snow-globe-ride"][data-weather-beat="land"] .accessory-globe-friend:not(:empty) { animation:none; }
  [data-scene="moon-crossing"][data-crossing="crossed"] .accessory-adventure-buddy { transition:none; }
}

[data-scene="moon-mail"] .accessory-moon-hotspot {
  position: absolute;
  top: var(--moon-y);
  left: var(--moon-x);
  display: grid;
  width: 2.9rem;
  aspect-ratio: 1;
  padding: .38rem;
  place-items: center;
  translate: -50% -50%;
  border: 2px solid #fff4d5;
  border-radius: 50%;
  color: #5d477e;
  background: #fff4d5;
  box-shadow: 0 .2rem #594970, 0 0 .95rem #fff4d5a6;
  pointer-events: auto;
}
[data-scene="moon-mail"] .accessory-moon-hotspot:focus-visible {
  outline: .19rem solid #24183f;
  outline-offset: .12rem;
}
[data-scene="moon-mail"] .accessory-moon-hotspot svg { width: 100%; height: 100%; }
[data-space-phase="trail"] .accessory-moon-rocket,
[data-space-phase="cave"] .accessory-moon-rocket,
[data-space-phase="encounter"] .accessory-moon-rocket { visibility: hidden; }
[data-scene="moon-mail"][data-space-phase="encounter"] .accessory-adventure-actors > .accessory-adventure-buddy {
  left: 34%;
}
[data-scene="moon-mail"] .accessory-moon-hotspot.accessory-moon-encounter {
  width: clamp(3.8rem, 15%, 6rem);
  padding: .35rem;
  border-color: #fff3ca;
  background: radial-gradient(circle, #fff4d5, #e8d9ef);
  box-shadow: 0 .25rem #594970, 0 0 1.1rem #fff1bcb0;
}
[data-scene="moon-mail"] .accessory-moon-encounter[data-revealed] {
  opacity: 1;
  cursor: default;
  border-color: var(--moon-glow);
  box-shadow: 0 0 .8rem #fff2b5, 0 0 1.9rem .35rem #eac8fe88;
}
.accessory-moon-encounter[data-encounter="moth"][data-revealed] {
  animation: accessory-moon-moth-loop 1.4s ease-in-out both;
}
.accessory-moon-encounter[data-encounter="rover"][data-revealed] {
  animation: accessory-moon-rover-wiggle .76s ease-in-out both;
}
.accessory-moon-encounter[data-encounter="crater"][data-revealed]::after {
  position: absolute;
  inset: 30% -12% -5%;
  border: .18rem solid #fff3ba;
  border-radius: 50%;
  box-shadow: 0 0 .75rem #ffe59c;
  content: "";
  animation: accessory-moon-crater-echo .46s ease-out 3 both;
  pointer-events: none;
}
@keyframes accessory-moon-moth-loop {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-60%, -22%) rotate(-19deg); }
  50% { transform: translate(-120%, -62%) rotate(-31deg); }
  74% { transform: translate(-26%, -94%) rotate(24deg); }
}
@keyframes accessory-moon-rover-wiggle {
  0%, 100% { transform: none; }
  28%, 70% { transform: translateY(-12%) rotate(-12deg); }
  49% { transform: rotate(12deg); }
}
@keyframes accessory-moon-crater-echo {
  from { opacity: 1; scale: .7; }
  to { opacity: 0; scale: 1.85; }
}
[data-scene="moon-mail"][data-space-phase="trail"] .accessory-adventure-actors > .accessory-adventure-buddy {
  left: var(--moon-buddy-x, 50%);
  bottom: var(--moon-buddy-bottom, 4%);
  transition: left .55s ease-in-out, bottom .55s ease-in-out;
}
[data-scene="moon-mail"] .accessory-moon-hotspot[data-stepped] {
  border-color: transparent;
  color: #715579;
  background: #e3c9d07d;
  box-shadow: none;
  pointer-events: none;
}
[data-scene="moon-mail"][data-space-phase="cave"] .accessory-moon-hotspot {
  border-color: var(--moon-glow);
  color: var(--moon-glow);
  background: #35234e;
  box-shadow: 0 .15rem #251839, 0 0 .8rem var(--moon-glow), inset 0 0 .6rem #ffffff23;
}
[data-space-phase="cave"] .accessory-moon-hotspot:disabled {
  opacity: .72;
  cursor: default;
}
[data-scene="moon-mail"][data-space-phase="cave"] .accessory-moon-hotspot[data-magic-gem] {
  z-index: 1;
  width: 3.7rem;
  padding: .38rem;
  border-color: #fff2bd;
  box-shadow: 0 0 0 .24rem #fff2bd61, 0 0 1.8rem .42rem var(--moon-glow);
  animation: accessory-moon-gem-appear .5s ease-out both;
}
@keyframes accessory-moon-gem-appear {
  from { opacity: 0; scale: .62; }
  to { opacity: 1; scale: 1; }
}
.accessory-moon-tune {
  position: absolute;
  top: 23%;
  left: 50%;
  display: flex;
  gap: .36rem;
  padding: .3rem .42rem;
  translate: -50% -50%;
  border: 1px solid #e0caffb3;
  border-radius: 2rem;
  background: #2e1c49d9;
}
.accessory-moon-tune:empty { display: none; }
.accessory-moon-tune > span { display: grid; width: 1.4rem; height: 1.4rem; place-items: center; }
.accessory-moon-tune svg { width: 100%; height: 100%; }
[data-space-phase="write"] .accessory-moon-rocket {
  left: 23%;
  bottom: 0;
  transform: translateX(-50%) scale(.68);
  transform-origin: 50% 88%;
}
[data-space-phase="write"] .accessory-moon-postbox { visibility: visible; }
[data-space-phase="write"] .accessory-moon-postcard { visibility: visible; }
[data-scene="moon-mail"] .accessory-moon-postcard {
  top: 20%;
  width: min(79%, 17.4rem);
  padding: .55rem 2.75rem .65rem .75rem;
  border: .25rem solid transparent;
  background: linear-gradient(#fff9e3, #fcefcf) padding-box,
    repeating-linear-gradient(135deg, #674d8b 0 7px, #fdf2d0 7px 14px, #ce6b73 14px 21px, #fdf2d0 21px 28px) border-box;
  font-size: clamp(.65rem, 1.7vw, .8rem);
  line-height: 1.25;
}
[data-scene="moon-mail"] .accessory-moon-stamp {
  top: .38rem;
  right: .35rem;
  width: 1.85rem;
  padding: .18rem;
  font-size: 1.22rem;
  line-height: 1;
}
.accessory-moon-stamp > svg { width: 100%; height: 100%; }
.accessory-moon-message { margin-top: .14rem; }
.accessory-moon-stamp-choice[aria-pressed="true"] {
  border-color: #65498b;
  color: #3d295a;
  background: #ede2fa;
  box-shadow: 0 .2rem #65498b4a;
}
@media (prefers-reduced-motion: reduce) {
  [data-scene="moon-mail"][data-space-phase="trail"] .accessory-adventure-actors > .accessory-adventure-buddy { transition: none; }
  [data-scene="moon-mail"][data-space-phase="cave"] .accessory-moon-hotspot[data-magic-gem] { animation: none; }
  .accessory-moon-encounter:is([data-encounter="moth"], [data-encounter="rover"])[data-revealed],
  .accessory-moon-encounter[data-encounter="crater"][data-revealed]::after { animation: none; }
}

[data-scene="lantern-party"] > .accessory-adventure-backdrop {
  transition: opacity .65s ease, filter .65s ease;
}
.accessory-party-bunting { position:absolute; z-index:1; top:17%; left:6%; right:6%; display:flex; justify-content:space-around; border-top:2px solid #ffe7af; transform:rotate(-2deg); pointer-events:none; }
.accessory-party-bunting i { display:block; width:clamp(.5rem,4%,1.1rem); aspect-ratio:.72; background:#ffd888; clip-path:polygon(0 0,100% 0,50% 100%); }
.accessory-party-bunting i:nth-child(3n+1) { background:#efa2ce; }
.accessory-party-bunting i:nth-child(3n+2) { background:#9ce5d1; }
[data-party-style="starlight"] .accessory-party-bunting i { background:#ffdc91; clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%); filter:drop-shadow(0 0 .25rem #ffe7ab); }
[data-party-style="starlight"] .accessory-party-bunting i:nth-child(2n) { background:#aeeaff; }
[data-party-style="candy"] .accessory-party-bunting { border-color:#fbc8d4; }
[data-party-style="candy"] .accessory-party-bunting i { background:repeating-linear-gradient(135deg,#ee8fa8 0 4px,#fff8e7 4px 8px); }
[data-party-style="candy"] .accessory-party-lights { background:radial-gradient(ellipse at 15% 6%,#ffbace80,transparent 34%),radial-gradient(ellipse at 77% 4%,#b1f0d370,transparent 32%); }
[data-party-style="candy"] .accessory-party-confetti i { background:#f5a6bc; }
[data-party-style="candy"] .accessory-party-confetti i:nth-child(3n+1) { background:#fff3db; }
[data-party-style="candy"] .accessory-party-confetti i:nth-child(3n+2) { background:#a6e0c4; }
[data-scene="lantern-party"][data-party-stage="wish"] > .accessory-adventure-backdrop {
  filter: brightness(.66) saturate(.8);
}
[data-scene="lantern-party"] .accessory-adventure-buddy {
  --party-beat: 0ms;
  --party-celebration-time: 1.04s;
  left: 16%;
  bottom: 12%;
  width: clamp(3.25rem, 24%, 7.15rem);
}
[data-scene="lantern-party"] .accessory-adventure-prop {
  display: none;
}
.accessory-party-guests {
  position: absolute;
  inset: 0;
}
.accessory-party-friend {
  --party-beat: 250ms;
  --party-celebration-time: 1.1s;
  position: absolute;
  left: var(--party-seat, 39%);
  bottom: var(--party-depth, 15%);
  display: none;
  width: clamp(3.05rem, 23%, 6.85rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
}
.accessory-party-friend:nth-child(2) { --party-seat: 62%; --party-depth: 17%; --party-beat: 600ms; --party-celebration-time: 1.05s; }
.accessory-party-friend:nth-child(3) { --party-seat: 84%; --party-depth: 14%; --party-beat: 900ms; --party-celebration-time: 1.12s; }
[data-party-size="0"] .accessory-adventure-buddy { left: 29%; width: clamp(3.65rem, 27%, 8.25rem); }
[data-party-size="0"] .accessory-adventure-prop { left: 35%; }
[data-party-size="1"] .accessory-adventure-buddy { left: 26%; }
[data-party-size="1"] .accessory-adventure-prop { left: 32%; }
[data-party-size="1"] .accessory-party-friend { --party-seat: 73%; }
[data-party-size="2"] .accessory-party-friend:first-child { --party-seat: 48%; }
[data-party-size="2"] .accessory-party-friend:nth-child(2) { --party-seat: 77%; }
.accessory-party-friend[data-arrived="true"] {
  display: block;
  animation: accessory-party-arrival .58s cubic-bezier(.2, .7, .3, 1) both;
}
.accessory-party-friend > .reference-creature-display {
  width: 100%;
  filter: drop-shadow(0 .2rem .25rem #341a44a6);
}
.accessory-party-neighbor {
  display: block;
  aspect-ratio: 1;
  background-image: url('/reference-art/ambient-friends.webp');
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: var(--party-neighbor-position);
}
.accessory-party-name {
  position: absolute;
  bottom: -.6rem;
  left: 50%;
  padding: .08rem .36rem;
  transform: translateX(-50%);
  border: 1px solid #fce5b67a;
  border-radius: 1rem;
  color: #fff6dc;
  background: #2d1f41ec;
  font-size: clamp(.62rem, 2.2vw, .78rem);
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
}
.accessory-party-lantern {
  position: absolute;
  left: 46%;
  bottom: 21%;
  width: clamp(1.15rem, 8%, 2.2rem);
  aspect-ratio: 51 / 74;
  opacity: 0;
  filter: drop-shadow(0 0 .23rem #ffe794c9);
  transition: opacity .25s, left .54s ease, bottom .54s ease;
}
.accessory-party-lantern > svg { display: block; width: 100%; height: 100%; }
[data-party-stage="1"] .accessory-party-lantern { opacity: 1; }
[data-party-stage="2"] .accessory-party-lantern {
  left: 81%;
  bottom: 72%;
  opacity: 1;
}
.accessory-party-cake {
  position: absolute;
  bottom: 1%;
  left: 50%;
  width: clamp(4rem, 27%, 8.4rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  opacity: 0;
  filter: drop-shadow(0 .22rem .3rem #431f46b5);
  transition: opacity .25s;
}
.accessory-party-cake > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.accessory-party-cake[hidden], .accessory-party-slices[hidden] { display: none; }
:is([data-party-stage="2"], [data-party-stage="wish"], [data-party-stage="party"]) .accessory-party-cake { opacity: 1; }
.accessory-party-candles {
  position:absolute;
  inset:18% 35% auto;
  height:14%;
  display:flex;
  justify-content:space-between;
  opacity: 0;
}
.accessory-party-candles i { position:relative; display:block; width:9%; height:100%; border:1px solid #965768; border-radius:2px; background:repeating-linear-gradient(30deg,#fff5dc 0 3px,#f6a7c3 3px 6px); }
.accessory-party-candles i:nth-child(2) { translate:0 -20%; }
.accessory-party-candles i::before { content:""; position:absolute; left:50%; bottom:110%; width:190%; aspect-ratio:.7; translate:-50% 0; border-radius:65% 40% 65% 40%; background:radial-gradient(ellipse at 50% 70%,#fffad0 20%,#ffce5e 55%,#ff8c53); filter:drop-shadow(0 0 4px #ffdd83); opacity:0; }
:is([data-party-stage="wish"],[data-party-stage="party"],[data-party-stage="cake-wish"],[data-party-stage="cake-ready"],[data-party-stage="cake-shared"]) .accessory-party-candles { opacity:1; }
:is([data-party-stage="wish"],[data-party-stage="cake-wish"]) .accessory-party-candles i::before { opacity:1; }
.accessory-party-toppings { position:absolute; inset:35% 20% auto; height:30%; opacity:0; }
.accessory-party-toppings i { position:absolute; left:var(--topping-x,0%); top:var(--topping-y,35%); width:12%; aspect-ratio:1; border-radius:50%; background:#ed537f; box-shadow:inset 1px 1px 1px #fff5cf,0 1px 2px #60395088; }
.accessory-party-toppings i:nth-child(2) { --topping-x:20%; --topping-y:6%; }
.accessory-party-toppings i:nth-child(3) { --topping-x:43%; --topping-y:0%; }
.accessory-party-toppings i:nth-child(4) { --topping-x:68%; --topping-y:8%; }
.accessory-party-toppings i:nth-child(5) { --topping-x:90%; --topping-y:40%; }
.accessory-party-toppings i:nth-child(6) { --topping-x:62%; --topping-y:67%; }
.accessory-party-toppings i:nth-child(7) { --topping-x:27%; --topping-y:68%; }
[data-party-cake-topping] .accessory-party-toppings { opacity:1; }
[data-party-cake-topping="stars"] .accessory-party-toppings i { border-radius:0; background:#ffe16b; clip-path:polygon(50% 0,62% 35%,100% 38%,71% 60%,81% 100%,50% 77%,19% 100%,29% 60%,0 38%,38% 35%); }
[data-party-cake-topping="sprinkles"] .accessory-party-toppings i { aspect-ratio:2.5; rotate:35deg; background:#f38dbd; }
[data-party-cake-topping="sprinkles"] .accessory-party-toppings i:nth-child(2n) { background:#91e2e1; rotate:-25deg; }
[data-party-cake-topping="sprinkles"] .accessory-party-toppings i:nth-child(3n) { background:#ffdb77; rotate:65deg; }
.accessory-party-slices { position:absolute; inset:0; pointer-events:none; }
.accessory-party-slice { position:absolute; left:var(--slice-x); bottom:0; width:14%; translate:-50% 0; filter:drop-shadow(0 .1rem .15rem #43214b88); animation:accessory-party-slice-arrive .65s var(--slice-delay) both; }
.accessory-party-slice svg { display:block; width:100%; }
@keyframes accessory-party-slice-arrive { from { opacity:0; translate:-50% -1.8rem; } to { opacity:1; translate:-50% 0; } }
[data-party-style="candy"] .accessory-party-cake { bottom:34%; width:43%; max-width:13rem; opacity:1; }
[data-party-style="candy"] .accessory-party-lantern { display:none; }
[data-party-style="candy"] .accessory-party-bunting { top:14%; }
[data-party-style="candy"] :is(.accessory-adventure-buddy,.accessory-party-friend) { bottom:10%; width:21%; }
[data-party-style="candy"][data-party-stage="cake-wish"] > .accessory-adventure-backdrop { filter:brightness(.78) saturate(.95); }
[data-party-style="candy"][data-party-stage="cake-shared"] .accessory-party-lights { opacity:1; }
.accessory-party-topping-icon { display:block; width:1.65rem; height:1.65rem; margin:.15rem auto; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe6e3 0 8%,#f37b9c 12% 40%,#cb486f 68%); box-shadow:0 1px 2px #64345344; }
.accessory-party-topping-icon[data-topping="sprinkles"] { border-radius:.4rem; background:repeating-linear-gradient(55deg,#f195c3 0 4px,#fff4d3 4px 7px,#9bdcd7 7px 11px,#fff4d3 11px 14px); }
.accessory-party-topping-icon[data-topping="stars"] { border-radius:0; background:#ffd867; clip-path:polygon(50% 0,62% 35%,100% 38%,71% 60%,81% 100%,50% 77%,19% 100%,29% 60%,0 38%,38% 35%); }
.accessory-party-lights, .accessory-party-confetti { position: absolute; inset: 0; }
.accessory-party-lights {
  opacity: 0;
  background:
    radial-gradient(ellipse at 15% 6%, #fff1ab86, transparent 31%),
    radial-gradient(ellipse at 77% 4%, #ffbb6780, transparent 29%);
  transition: opacity .55s ease-out;
}
[data-party-stage="party"] .accessory-party-lights { opacity: 1; }
.accessory-party-confetti i {
  position: absolute;
  top: var(--party-y);
  left: var(--party-x);
  width: .32rem;
  height: .55rem;
  border-radius: 1px;
  background: #ffd47b;
  box-shadow: 0 0 .22rem #391c3e70;
  opacity: 0;
}
.accessory-party-confetti i:nth-child(3n + 1) { background: #f99ab4; }
.accessory-party-confetti i:nth-child(3n + 2) { background: #8be7cb; }
[data-party-dance="clap"] .accessory-party-confetti i {
  animation: accessory-party-confetti-clap 1.2s var(--party-delay) ease-out both;
}
[data-party-dance="clap"] :is(.accessory-adventure-buddy, .accessory-party-friend) > .reference-creature-display {
  animation: accessory-party-clap var(--party-celebration-time,.9s) var(--party-beat,100ms) ease both;
}
@keyframes accessory-party-arrival {
  0% { opacity: 0; translate: 1.1rem .45rem; }
  48% { translate: .18rem -.5rem; }
  100% { opacity: 1; translate: 0; }
}
@keyframes accessory-party-clap {
  0%, 58%, 100% { translate: 0; rotate: 0deg; }
  31% { translate: 0 -.65rem; rotate: -7deg; }
  77% { translate: 0 -.34rem; rotate: 5deg; }
}
@keyframes accessory-party-confetti-clap {
  0% { opacity: 0; translate: -1rem -1.3rem; rotate: -50deg; }
  20%, 70% { opacity: 1; }
  100% { opacity: 0; translate: 1rem 2.25rem; rotate: 75deg; }
}
.accessory-party-builder {
  display: grid;
  width: min(100%, 28rem);
  justify-items: center;
  gap: .45rem;
  padding: .6rem .7rem .72rem;
  border: 1px solid #ddccec;
  border-radius: .9rem;
  background: linear-gradient(#fbf5ff, #fff);
}
.accessory-party-builder p { margin: 0; }
.accessory-party-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.accessory-party-actions button { min-width: 0; font-size: .78rem; }
.accessory-party-score {
  display: grid;
  grid-template-columns: repeat(var(--party-move-count, 4), 1fr);
  width: 100%;
  gap: .34rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.accessory-party-score li {
  padding: .25rem .1rem;
  border: 1px dashed #ccb7e0;
  border-radius: .46rem;
  color: #62547b;
  background: #faf5ff;
  font-size: .79rem;
  font-weight: 760;
}
.accessory-party-score [data-filled] {
  border-style: solid;
  background: #ecdefb;
  color: #4c326e;
}
.accessory-party-score [data-active] {
  border-color: #a9572c;
  color: #643118;
  background: #ffe7a4;
}
.accessory-party-moves, .accessory-party-choices {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem;
}
.accessory-party-moves button, .accessory-party-builder > button {
  padding-inline: .67rem;
}
.accessory-party-moves button span { color: #6847a8; }
.accessory-party-moves[role="group"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}
.accessory-party-moves[role="group"] button {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  padding: .3rem .12rem;
  gap: .1rem;
  font-size: .79rem;
  line-height: 1.15;
}
.accessory-party-moves svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: #7753ae;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.accessory-party-builder > .accessory-party-surprise {
  color: #63428d;
  border-color: #b88ee0;
  background: #f8eeff;
}
@media (max-width: 719px) {
  .accessory-party-builder { padding: .35rem; gap: .3rem; }
  .accessory-party-moves[role="group"] { gap: .28rem; }
  .accessory-party-moves[role="group"] button { min-height: 2.75rem; }
  .accessory-party-actions button { padding-inline: .25rem; min-height: 2.75rem; }
  .accessory-party-score li { font-size: .72rem; padding-inline: 0; }
}
.accessory-party-builder > small {
  color: #63428d;
  font-weight: 750;
}
.accessory-party-moves [data-party-play]:not(:disabled) {
  border-color: #8e65c2;
  color: #fff;
  background: #6845a2;
}
.accessory-party-friend[data-party-leader] .accessory-party-name {
  border-color: #ffc65b;
  background: #63428d;
  box-shadow: 0 0 .5rem #ffcd6aab;
}
.accessory-party-choices button {
  display: grid;
  min-width: 4.3rem;
  justify-items: center;
  gap: .12rem;
  padding: .35rem .42rem;
  font-size: .81rem;
}
.accessory-party-choices button[aria-pressed="true"] {
  border-color: #8e65c2;
  background: #f0e5fc;
  color: #483062;
  box-shadow: inset 0 0 0 1px #8e65c2;
}
.accessory-party-choices svg {
  display: block;
  width: 2rem;
  height: 2rem;
}
[data-paper="star"] { --party-paper: #ffd65e; --party-edge: #b77228; --party-glow: #ffe390; }
[data-paper="blossom"] { --party-paper: #ff9fc8; --party-edge: #a74484; --party-glow: #ffc0d9; }
[data-paper="moon"] { --party-paper: #9de5ff; --party-edge: #3b7bb4; --party-glow: #a5e6ff; }
[data-paper="lotus"] { --party-paper: #d3a8ff; --party-edge: #7146ad; --party-glow: #f0c8ff; }
[data-paper="peach"] { --party-paper: #ffa795; --party-edge: #af5350; --party-glow: #ffceae; }
[data-paper="kite"] { --party-paper: #9ee5c8; --party-edge: #367d74; --party-glow: #baf4e3; }
.accessory-party-paper { fill: var(--party-paper); stroke: var(--party-edge); stroke-width: 1.6; }
.accessory-party-paper-detail {
  fill: none;
  stroke: #fff9e3;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .85;
}
.accessory-party-paper-raft { fill: #f8b873; stroke: #7a445e; stroke-width: 1.5; }
.accessory-party-floats { position: absolute; inset: 0; }
.accessory-party-float {
  position: absolute;
  top: 63%;
  left: var(--party-start, 50%);
  width: clamp(2.9rem, 14%, 5.2rem);
  aspect-ratio: 1;
  translate: -50% -72%;
  filter: drop-shadow(0 0 .65rem var(--party-glow));
}
.accessory-party-float > svg, .accessory-party-reflection > svg { display: block; width: 100%; }
.accessory-party-reflection {
  position: absolute;
  inset: 83% 0 auto;
  opacity: .44;
  transform: translateY(50%) scaleY(-.52) scaleX(.86);
  transform-origin: center top;
  filter: blur(2px);
  mask-image: linear-gradient(transparent 8%, #000 90%);
}
.accessory-party-float:nth-child(2) { --party-start: 28%; --party-end: 35%; --party-water: 51%; --party-delay: .19s; }
.accessory-party-float:nth-child(3) { --party-start: 72%; --party-end: 76%; --party-water: 55%; --party-delay: .37s; }
[data-party-stage="float"] .accessory-party-float {
  animation: accessory-party-drift 2.8s var(--party-delay, 0s) ease-out both;
}
@keyframes accessory-party-drift {
  0% { opacity: .2; scale: 1.02; }
  15% { opacity: 1; }
  55% { rotate: 5deg; }
  100% { top: var(--party-water, 46%); left: var(--party-end, 58%); scale: .64; rotate: -4deg; }
}
[data-party-stage="party"] .accessory-party-floats { display: none; }
[data-scene="lantern-party"]:is([data-party-stage="pond"], [data-party-stage="float"]) :is(.accessory-adventure-buddy, .accessory-party-friend) {
  bottom: 6%;
  width: clamp(2.85rem, 20%, 6rem);
}
[data-scene="lantern-party"]:is([data-party-stage="pond"], [data-party-stage="float"]) .accessory-adventure-prop { display: none; }
.accessory-party-favor {
  position: absolute;
  z-index: -1;
  inset: 2% -3% -5%;
  display: none;
  border-radius: 48%;
  background: conic-gradient(from 40deg, #ff8bbdd9, #ffdf8ed9, #9ef2b4d9, #98d4ffd9, #c4a1ffd9, #ff8bbdd9);
  box-shadow: 0 0 .55rem #fff0c2c0, 0 0 1.1rem #dbaaffac;
}
[data-party-favor] .accessory-party-favor {
  display: block;
  animation: accessory-party-favor-reveal .62s ease-out both;
}
.accessory-party-favor i {
  position: absolute;
  top: var(--party-spark-y, 23%);
  left: var(--party-spark-x, 8%);
  width: clamp(.5rem, 17%, 1.05rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--party-spark, #ffe1a4);
  box-shadow: 0 0 .32rem #fff7dd;
}
.accessory-party-favor i:nth-child(2) { --party-spark-x: 84%; --party-spark-y: 13%; --party-spark: #b8eeff; }
.accessory-party-favor i:nth-child(3) { --party-spark-x: 92%; --party-spark-y: 69%; --party-spark: #ffd0ef; }
.accessory-party-favor i:nth-child(4) { --party-spark-x: 0%; --party-spark-y: 72%; --party-spark: #c6ffc8; }
[data-party-favor="stars"] .accessory-party-favor i {
  clip-path: polygon(50% 0, 63% 35%, 100% 50%, 63% 65%, 50% 100%, 37% 65%, 0 50%, 37% 35%);
}
[data-party-favor="bubbles"] .accessory-party-favor i {
  border: 1px solid #fff;
  background: radial-gradient(circle at 30% 27%, #fff 11%, transparent 13%), var(--party-spark);
}
[data-party-favor="ribbons"] .accessory-party-favor {
  inset: 12% 4% -4%;
  background: transparent;
  border: .25rem solid #ffc4e9;
  box-shadow: 0 0 0 .15rem #a6e8ff, 0 0 0 .28rem #fff0a7, 0 0 .85rem #fdd5ff;
  transform: rotate(-19deg) scaleX(1.13);
}
[data-party-favor="ribbons"] .accessory-party-favor i { display: none; }
@keyframes accessory-party-favor-reveal {
  from { opacity: 0; scale: .65; }
  to { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-scene="lantern-party"] :is(.accessory-adventure-backdrop, .accessory-party-lantern, .accessory-party-cake, .accessory-party-flames, .accessory-party-lights) {
    transition: none;
  }
  .accessory-party-friend[data-arrived="true"],
  .accessory-party-slice,
  [data-party-dance] :is(.accessory-adventure-buddy, .accessory-party-friend) > .reference-creature-display,
  [data-party-dance] .accessory-party-confetti i { animation: none; }
  [data-party-stage="party"] .accessory-party-confetti i { opacity: .74; }
  [data-party-favor] .accessory-party-favor { animation: none; }
  [data-party-stage="float"] .accessory-party-float {
    top: var(--party-water, 46%);
    left: var(--party-end, 58%);
    scale: .64;
    animation: none;
  }
}

[data-scene="rainbow-piano"] .accessory-adventure-prop { display: none; }
[data-scene="rainbow-piano"] .accessory-adventure-buddy { left:50%; bottom:9%; width:29%; z-index:4; }
[data-scene="rainbow-piano"] .accessory-adventure-actors { z-index:4; }
.rainbow-piano-garden { position:absolute; inset:0; pointer-events:none; z-index:3; }
.rainbow-piano-gem { position:absolute; z-index:6; right:12%; bottom:13%; width:clamp(3.5rem,17%,5.5rem); filter:drop-shadow(0 .35rem .4rem #3f2a766b); animation:rainbow-gem-arrive .6s ease-out both; pointer-events:none; }
.rainbow-piano-gem svg { display:block; width:100%; height:auto; }
@keyframes rainbow-gem-arrive { from { opacity:0; transform:translateY(1.5rem) scale(.7) rotate(-12deg); } to { opacity:1; transform:none; } }
.rainbow-piano-garden > svg { width:100%; height:100%; overflow:visible; }
.rainbow-piano-garden path { fill:none; stroke-width:2.3; opacity:.08; stroke-linecap:round; transition:opacity .4s; }
.rainbow-piano-garden path[data-lit] { opacity:.88; filter:drop-shadow(0 0 2px #fff); }
.rainbow-piano-flowers { position:absolute; inset:0; }
.rainbow-piano-flowers i { position:absolute; left:var(--flower-x); bottom:9%; width:5%; aspect-ratio:1; opacity:.15; transform:scale(.4); transition:opacity .25s,transform .4s cubic-bezier(.2,.9,.3,1.4); }
.rainbow-piano-flowers i[data-grown] { opacity:1; transform:scale(1); }
.rainbow-piano-flowers i:before { content:""; position:absolute; inset:0; border-radius:50%; background:var(--petal); box-shadow:0 -.35em 0 var(--petal),.3em .18em 0 var(--petal),-.3em .18em 0 var(--petal); border:1px solid #fff7; }
.rainbow-piano-flowers b { position:absolute; inset:30%; border-radius:50%; background:#fff7ae; }
.rainbow-piano-console { width:100%; display:grid; gap:.55rem; }
.rainbow-piano-keys { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; padding:.4rem; border:2px solid #bba0ce; border-radius:14px; background:linear-gradient(#694473,#32263f); box-shadow:0 4px 0 #25182f; }
.rainbow-piano-keys .rainbow-piano-key { min-width:0; min-height:6.8rem; display:flex; flex-direction:column; align-items:center; justify-content:end; padding:.45rem 0; gap:.25rem; color:#33223f; font-weight:850; font-size:.9rem; border:1px solid #fff8; border-radius:7px 7px 10px 10px; background:linear-gradient(#fff9,var(--key-color) 38%,var(--key-color) 87%,#0002); box-shadow:0 5px 0 color-mix(in srgb,var(--key-color),#402b50 35%); transition:transform .08s,filter .08s; }
.rainbow-piano-key small { opacity:.68; font-size:.65rem; }
.rainbow-piano-key[data-sounding],.rainbow-piano-key:active { transform:translateY(4px); filter:brightness(1.18); box-shadow:0 1px 0 #4a325a; }
.rainbow-piano-key:disabled { opacity:1; }
.rainbow-piano-actions { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; }
.rainbow-piano-actions button { min-height:2.75rem; padding:.35rem; font-size:.85rem; }
.rainbow-piano-score { font-size:.8rem; line-height:1.35; margin:0; min-height:2.2em; color:#665075; }
.rainbow-piano-console > small { color:#6c617b; font-size:.73rem; }
@media(max-width:600px) { .rainbow-piano-keys .rainbow-piano-key { min-height:4.5rem; } }
@media(prefers-reduced-motion:reduce) { .rainbow-piano-garden path,.rainbow-piano-flowers i,.rainbow-piano-key { transition:none; } }

[data-scene="pumpkin-prizes"] .accessory-adventure-prop { display: none; }
[data-scene="pumpkin-prizes"] .accessory-adventure-actors { z-index: 4; }
[data-scene="pumpkin-prizes"] .accessory-adventure-buddy {
  z-index: 4; left: 17%; bottom: 3%; width: clamp(4.5rem, 25%, 8.3rem);
}
[data-scene="pumpkin-prizes"] .accessory-moment-targets { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pumpkin-machine {
  position: absolute; width: 66%; max-width: 22rem; left: 60%; bottom: 8%; transform: translateX(-50%);
  padding: 8% 4% 7%; box-sizing: border-box; isolation: isolate;
  border: .2rem solid #a45432; border-radius: 44% 42% 35% 37% / 28% 27% 34% 33%;
  background: radial-gradient(ellipse at 33% 12%, #ffe59c, transparent 53%), repeating-linear-gradient(92deg, #ffba55 0 18%, #f3943b 20%, #ffb34f 23% 36%);
  box-shadow: inset .5rem .5rem 0 #ffe4a04d, inset -.65rem -.75rem 0 #be643143, 0 .5rem .3rem #34243845;
}
.pumpkin-machine-stem {
  position: absolute; width: 13%; height: 19%; left: 43%; top: -15%;
  border: .17rem solid #5e6636; border-radius: 60% 45% 12% 12%; background: linear-gradient(90deg, #8aaf57, #b5cf77 43%, #657c40); transform: rotate(10deg);
}
.pumpkin-machine-leaf {
  position: absolute; width: 28%; height: 16%; left: 53%; top: -8%; border: .15rem solid #63843f;
  border-radius: 80% 15% 80% 15%; background: linear-gradient(145deg, #cde996, #79aa50); transform: rotate(-12deg);
}
.pumpkin-machine-leaf::after { content: ''; position: absolute; inset: 49% 8% auto; height: 2px; background: #658740; transform: rotate(-13deg); }
.pumpkin-machine-sign {
  position: absolute; top: 7%; left: 14%; right: 14%; border-radius: 1rem; padding: .15rem .3rem;
  color: #fff5d5; background: #713e52; box-shadow: 0 2px #ffdf8a; font-size: clamp(.48rem, 1.1vw, .8rem); font-weight: 900; letter-spacing: .08em;
}
.pumpkin-machine-reels {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; border: .2rem solid #895039; border-radius: .7rem; padding: .3rem;
  background: #6d4350; box-shadow: 0 .12rem #ffe29d, inset 0 .12rem .2rem #0006;
}
.pumpkin-machine-reel {
  aspect-ratio: .82; min-width: 0; overflow: hidden; display: grid; align-items: center; justify-items: stretch;
  border-radius: .35rem; background: linear-gradient(#ddd2bb, #fffbed 17% 79%, #dbcdb4); border: 1px solid #e1cfa5;
}
.pumpkin-machine-reel > span { display: grid; place-items: center; width: 100%; height: 100%; }
.pumpkin-machine-reel :is(svg, img) { display: block; width: 96%; height: 96%; max-height: 7rem; object-fit: contain; filter: drop-shadow(0 .1rem .12rem #6d384a22); }
.pumpkin-machine-smile { position: absolute; bottom: 7%; left: 40%; right: 40%; display: flex; align-items: center; justify-content: space-between; gap: .2rem; }
.pumpkin-machine-smile i { width: .3rem; height: .4rem; background: #7b4143; border-radius: 50%; }
.pumpkin-machine-smile b { width: .7rem; height: .3rem; border: 2px solid #7b4143; border-top: 0; border-radius: 0 0 1rem 1rem; }
.pumpkin-machine-foot { position: absolute; z-index: -1; bottom: -7%; left: 20%; width: 20%; height: 12%; border-radius: 50%; background: #755047; border: 2px solid #4f3840; }
.pumpkin-machine-foot:last-child { left: auto; right: 20%; }
.pumpkin-machine-find {
  position: absolute; z-index: 5; display: grid; justify-items: center; gap: .3rem; left: 73%; top: 52%; width: 28%; max-width: 9.5rem; transform: translate(-50%, -50%);
  padding: .6rem .35rem; box-sizing: border-box; border: 2px solid #f6cf6c; border-radius: 1rem; background: linear-gradient(#fffcf2, #ffedc6); box-shadow: 0 .3rem .8rem #6939493d; text-align: center;
}
.pumpkin-machine-find[hidden] { display: none; }
.pumpkin-machine-find img { display: block; width: 100%; max-height: 8rem; object-fit: contain; }
.pumpkin-machine-find[data-prize-kind="treat"] img { width: 3rem; height: 3rem; max-width: 100%; }
.pumpkin-machine-find strong { display: block; max-width: 100%; padding: .1rem .15rem; color: #623c50; font-size: .78rem; line-height: 1.25; }
[data-pumpkin-phase="jackpot"] .pumpkin-machine,
[data-pumpkin-phase="treat"] .pumpkin-machine { left: 33%; width: 44%; opacity: .98; }
[data-pumpkin-phase="jackpot"] .accessory-adventure-buddy,
[data-pumpkin-phase="treat"] .accessory-adventure-buddy { left: 15%; width: 22%; }
.accessory-moment-controls .pumpkin-machine-info { display: grid; width: 100%; gap: .3rem; padding: .5rem .65rem; border-radius: .65rem; background: #fff5de; border: 1px solid #ead5a9; box-sizing: border-box; }
.accessory-moment-controls .pumpkin-machine-info p { margin: 0; color: #75523d; font-size: .8rem; line-height: 1.35; }
.accessory-moment-controls .pumpkin-machine-info .pumpkin-machine-guarantee { color: #745878; font-weight: 750; }
.accessory-moment-controls .pumpkin-machine-info .pumpkin-machine-note { color: #563350; font-size: .92rem; font-weight: 850; }
.pumpkin-machine-spins { display: flex; justify-content: center; gap: .38rem; }
.pumpkin-machine-spins span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid #d3a34e; border-radius: 50%; background: #ffe5a0; color: #9b5c28; font-size: 1rem; }
.pumpkin-machine-spins span[data-available="false"] { background: #e7dfd2; border-color: #d2c8bc; color: #b5a89b; }
.pumpkin-machine-key { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; padding: .3rem 0; }
.pumpkin-machine-key > span { display: grid; place-items: center; align-content: start; gap: .15rem; padding: .35rem .15rem; border: 1px solid #e6cfa8; border-radius: .45rem; background: #fffaf0; }
.pumpkin-machine-key i { display: flex; justify-content: center; }
.pumpkin-machine-key :is(svg,img) { display: block; width: 1.25rem; height: 1.25rem; object-fit: contain; }
.pumpkin-machine-key b { color: #684357; font-size: .68rem; line-height: 1.25; text-align: center; }
.pumpkin-machine-confetti { position: absolute; inset: 0; overflow: hidden; }
.pumpkin-machine-confetti > span { position: absolute; width: 9%; left: var(--confetti-x); top: -15%; }
.pumpkin-machine-confetti svg { display: block; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  [data-pumpkin-phase="spinning"] .pumpkin-machine-reel > span { animation: pumpkin-reel-turn .18s calc(var(--reel) * -.07s) linear infinite; }
  [data-pumpkin-phase="spinning"] .pumpkin-machine { animation: pumpkin-machine-jiggle .45s ease-in-out infinite alternate; }
  [data-pumpkin-phase="jackpot"] .pumpkin-machine-find { animation: pumpkin-prize-pop .65s cubic-bezier(.2,.7,.25,1.3) both; }
  [data-pumpkin-phase="treat"] .pumpkin-machine-find { animation: pumpkin-prize-pop .45s ease-out both; }
  .pumpkin-machine-confetti > span { animation: pumpkin-confetti 2.4s var(--confetti-delay) ease-out both; }
  [data-pumpkin-trick="dance"] .pumpkin-machine { animation: pumpkin-machine-dance .8s ease-in-out 3; }
  [data-pumpkin-trick="dance"] .accessory-adventure-buddy > .reference-creature-display { animation: pumpkin-buddy-dance .8s .1s ease-in-out 3; }
  [data-pumpkin-trick="rainbow"] .accessory-adventure-buddy { animation: pumpkin-buddy-rainbow 3s ease-in-out; }
  [data-pumpkin-trick="sneeze"] .pumpkin-machine { animation: pumpkin-machine-sneeze .75s ease-out; }
}
@keyframes pumpkin-reel-turn { 0% { transform: translateY(-35%); opacity: .6; } 50% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(35%); opacity: .6; } }
@keyframes pumpkin-machine-jiggle { from { translate: 0 -.12rem; rotate: -.6deg; } to { translate: 0 .12rem; rotate: .6deg; } }
@keyframes pumpkin-prize-pop { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }
@keyframes pumpkin-confetti { from { top: -15%; opacity: 0; rotate: 0deg; } 15% { opacity: 1; } to { top: 90%; opacity: 0; rotate: var(--confetti-rotate); } }
@keyframes pumpkin-machine-dance { 0%,100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 -.6rem; rotate: -7deg; } 75% { translate: 0 -.6rem; rotate: 7deg; } }
@keyframes pumpkin-buddy-dance { 0%,100% { transform: none; } 25% { transform: translateY(-.7rem) rotate(8deg); } 75% { transform: translateY(-.6rem) rotate(-8deg); } }
@keyframes pumpkin-buddy-rainbow { 0%,100% { filter: hue-rotate(0deg) drop-shadow(0 0 .3rem #ffefaa); } 33% { filter: hue-rotate(100deg) drop-shadow(0 0 1rem #9af2ff); } 66% { filter: hue-rotate(240deg) drop-shadow(0 0 1rem #e1b1ff); } }
@keyframes pumpkin-machine-sneeze { 25% { scale: .92 1.08; } 50% { scale: 1.1 .85; } 100% { scale: 1; } }
@media (max-width: 719px) {
  .pumpkin-machine { width: 55%; bottom: 6%; padding: 5.5% 2.8% 4.5%; border-width: 2px; }
  .pumpkin-machine-sign { font-size: .44rem; top: 5%; padding: .07rem .2rem; }
  .pumpkin-machine-reels { border-width: 2px; padding: .17rem; gap: .17rem; }
  .pumpkin-machine-reel { aspect-ratio: 1; }
  .pumpkin-machine-reel :is(svg,img) { max-height: 3.4rem; }
  .pumpkin-machine-smile { bottom: 6%; }
  .pumpkin-machine-find { top: 57%; width: 29%; padding: .4rem .2rem; gap: .15rem; }
  .pumpkin-machine-find img { max-height: 6rem; }
  .pumpkin-machine-find strong { font-size: .65rem; padding: .1rem .3rem; }
  [data-pumpkin-phase="jackpot"] .pumpkin-machine, [data-pumpkin-phase="treat"] .pumpkin-machine { width: 41%; }
  [data-scene="pumpkin-prizes"] .accessory-adventure-buddy { width: 23%; left: 16%; bottom: 0; }
}

#dialog:has(.accessory-moment-scene:is([data-scene="terrarium-voyage"], [data-scene="star-wand-show"])) {
  width: min(40rem, calc(100% - 28px));
}

.accessory-moment-scene:is([data-scene="terrarium-voyage"], [data-scene="star-wand-show"]) {
  width: 100%;
}

[data-scene="terrarium-voyage"] .accessory-moment-target {
  font-size: 1.35rem;
}

[data-scene="terrarium-voyage"] .accessory-moment-target[data-hit] {
  z-index: 1;
}

.accessory-vault-panel {
  flex: 1 0 100%;
  display: grid;
  gap: .55rem;
  width: min(100%, 29rem);
  max-width: 29rem;
}

/* Keep the key, editable lock and keypad together during the decoding step. */
.accessory-moment:has([data-constellation="code"]) > p:first-child { display: none; }
.accessory-moment-scene[data-constellation="code"] {
  height: clamp(8rem, 18dvh, 10rem);
  min-height: 0;
  aspect-ratio: auto;
}
[data-constellation="code"] .accessory-vault-door { width: 6.8rem; }
[data-constellation="code"] .accessory-adventure-buddy { width: 5.8rem; }

@media (max-width: 460px) {
  .accessory-moment-scene[data-constellation="code"] { height: 6rem; }
  [data-constellation="code"] .accessory-vault-door { width: 4.8rem; }
  [data-constellation="code"] .accessory-adventure-buddy { width: 4.5rem; }
  .accessory-vault-panel { gap: .4rem; }
  .accessory-vault-legend { padding: .3rem; gap: .15rem; }
  .accessory-vault-legend [data-vault-key] { padding: .1rem; }
}

.accessory-vault-stage {
  margin: 0;
  color: #49305f;
  font-weight: 850;
}

.accessory-vault-trail,
.accessory-vault-entry output,
.accessory-vault-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem;
}

.accessory-vault-trail {
  padding: 0;
  margin: 0;
  list-style: none;
}

.accessory-vault-trail li {
  position: relative;
  display: grid;
  min-width: 3rem;
  padding: .2rem .35rem;
  border: 1px solid #d4cae6;
  border-radius: .55rem;
  color: #483359;
  background: #f6f0fc;
  font-size: .75rem;
  line-height: 1.2;
}

.accessory-vault-trail li > span {
  font-size: 1.12rem;
  line-height: 1.1;
}

.accessory-vault-trail li[data-next] { outline: 2px solid #8056ad; }
.accessory-vault-trail li[data-lit] { background: #fff2ce; border-color: #d9a448; }
.accessory-vault-trail small { color: #74442b; font-size: .78rem; font-weight: 850; }
.accessory-vault-panel > button { justify-self: center; }

.accessory-vault-star-digit:not([hidden]) {
  position: absolute;
  right: -.15rem;
  bottom: -.3rem;
  display: grid;
  width: 1.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #fff2cb;
  border-radius: 50%;
  color: #3e2848;
  background: #ffe39e;
  font-size: .72rem;
  font-weight: 850;
}

.accessory-vault-code-clue,
.accessory-vault-entry {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .65rem;
  margin: 0;
}

.accessory-vault-code-clue {
  padding: .4rem;
  border: 1px solid #ead392;
  border-radius: .55rem;
  color: #624627;
  background: #fff6dc;
}

.accessory-vault-code-clue span {
  font-weight: 850;
  letter-spacing: .06em;
}

.accessory-vault-entry output span {
  display: grid;
  min-width: 1.65rem;
  height: 1.7rem;
  place-items: center;
  border: 1px solid #c9bbdc;
  border-radius: .35rem;
  color: #49305f;
  background: #f6f0fc;
  font-weight: 850;
}

.accessory-vault-entry output[data-wrong] span {
  border-color: #a83e5b;
  background: #ffe9ed;
}

.accessory-vault-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(2.75rem, 4.5rem));
  justify-content: center;
  gap: .36rem;
}

.accessory-vault-keypad button {
  min-height: 2.85rem;
  color: #49305f;
  background: #f0e7fc;
  font-size: 1.15rem;
  font-weight: 850;
}

.accessory-vault-panel [hidden] { display: none; }

.accessory-vault-legend {
  display: grid;
  gap: .3rem;
  padding: .45rem .5rem;
  border: 1px solid #dbcda3;
  border-radius: .7rem;
  color: #59422e;
  background: #fff6df;
}
.accessory-vault-legend > div,
.accessory-vault-lock { display: flex; justify-content: center; gap: .32rem; }
.accessory-vault-legend [data-vault-key] {
  display: grid;
  min-width: 2.8rem;
  gap: .08rem;
  padding: .2rem;
  border: 2px solid transparent;
  border-radius: .45rem;
}
.accessory-vault-legend [data-hint] { border-color: #a66e28; background: #fff; }
.accessory-vault-legend b,
.accessory-vault-lock b { font-size: 1.3rem; line-height: 1.1; }
.accessory-vault-legend small,
.accessory-vault-lock small { font-size: .72rem; line-height: 1.1; }
.accessory-vault-lock button {
  display: grid;
  justify-items: center;
  gap: .2rem;
  flex: 1 1 0;
  max-width: 4.3rem;
  min-width: 0;
  padding: .45rem .2rem;
  border: 2px solid #bda9d6;
  border-radius: .65rem;
  color: #513774;
  background: #f4edfd;
}
.accessory-vault-lock button > span {
  display: grid;
  width: 1.8rem;
  min-height: 1.8rem;
  place-items: center;
  border-radius: .3rem;
  background: #fff;
  font-size: 1.1rem;
  font-weight: 850;
}
.accessory-vault-lock button[aria-pressed="true"] {
  outline: 3px solid #7952ad;
  outline-offset: 1px;
  background: #e9dbfb;
}
.accessory-vault-lock button[data-checked="correct"] { border-color: #388772; background: #e4f7ec; }
.accessory-vault-lock button[data-checked="wrong"] { border-color: #b45165; background: #fff0ef; }
.accessory-vault-edit-help { color: #64536e; font-size: .8rem; }
.accessory-vault-door {
  position: absolute;
  bottom: 9%;
  left: 50%;
  width: clamp(7rem, 29%, 11rem);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 .7rem #f1d1ff99);
}
.accessory-moment-feedback { min-height: 2.5em; color: #4a355f; font-weight: 700; line-height: 1.4; }
.accessory-moment-skip { justify-self: center; font-size: .86rem; }
.accessory-moment-skip[hidden] { display: none; }

.accessory-sky-treasure {
  position: absolute;
  top: 16%;
  left: 53%;
  width: clamp(5rem, 20%, 8rem);
  overflow: visible;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 .9rem #ffd38fbb);
  animation: accessory-sky-gem-rise .65s ease-out both;
  pointer-events: none;
}

@keyframes accessory-sky-gem-rise {
  from { opacity: 0; transform: translate(-50%, 1.2rem) scale(.65); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.accessory-lost-star {
  position: absolute;
  top: 23%;
  left: 32%;
  width: clamp(3.6rem, 18%, 6rem);
  overflow: visible;
  fill: #e4d8f2;
  stroke: #675284;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 .9rem #d9c5f3aa);
  pointer-events: none;
}

.accessory-lost-star circle {
  fill: #675284;
  stroke: none;
}

.accessory-lost-star-mouth { fill: none; }

[data-constellation="complete"] .accessory-lost-star {
  fill: #fff1a1;
  stroke: #c0773d;
  filter: drop-shadow(0 0 .95rem #ffe790);
  animation: accessory-lost-star-home 1.35s cubic-bezier(.28, .65, .27, 1) both;
}

[data-constellation="complete"] .accessory-adventure-buddy {
  filter: drop-shadow(0 0 .8rem #ffd990d9);
}

@keyframes accessory-lost-star-home {
  0% { transform: translate(0, 0) rotate(-9deg); }
  42% { transform: translate(75%, -8%) rotate(9deg) scale(1.15); }
  100% { transform: translate(125%, -26%) rotate(-7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .accessory-sky-treasure,
  [data-constellation="complete"] .accessory-lost-star { animation: none; }
  [data-constellation="complete"] .accessory-lost-star { transform: translate(125%, -26%); }
}

.accessory-wish-runes {
  display: grid;
  flex: 1 0 100%;
  justify-items: center;
  gap: .52rem;
}

.accessory-wish-recipe {
  display: flex;
  justify-content: center;
  gap: .34rem;
}

.accessory-wish-recipe span {
  display: grid;
  width: 2.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px dashed #a99ac4;
  border-radius: .58rem;
  color: #6e5b87;
  background: #f5f0fa;
  font-size: 1.18rem;
  font-weight: 850;
}

.accessory-wish-recipe [data-filled] {
  border-style: solid;
  border-color: #dba965;
  color: #634183;
  background: #fff2cf;
  box-shadow: 0 .12rem #dcad6240;
}

.accessory-moment .accessory-wish-riddle {
  width: min(100%, 28rem);
  padding: .5rem .72rem;
  border: 1px solid #e2d6ef;
  border-radius: .65rem;
  color: #4a396a;
  background: #faf6ff;
  font-weight: 700;
}

.accessory-wish-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: .34rem; }
.accessory-wish-choices button { min-width: 4.7rem; }
.accessory-wish-choices button span { margin-right: .27rem; color: #784bae; }
.accessory-wish-choices button[data-hint] {
  color: #543576;
  background: #fff0c2;
  box-shadow: 0 0 0 2px #d7a55b;
}

.accessory-moment-scene[data-scene="star-wand-show"]:is([data-spell-phase="door"], [data-spell-phase="show"], [data-spell-phase="finished"]) .accessory-adventure-buddy {
  left: 43%;
  bottom: 11%;
  transform: translateX(-50%);
}

.accessory-moment-scene button.accessory-wish-door {
  position: absolute;
  z-index: 1;
  bottom: 2%;
  left: 54%;
  width: clamp(5.7rem, 30%, 10.7rem);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 48% 48% .8rem .8rem;
  color: #3c2a58;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  animation: accessory-wish-door-arrive .52s cubic-bezier(.18, .7, .36, 1) both;
}

.accessory-wish-door[hidden] { display: none; }
.accessory-wish-door:disabled { pointer-events: none; }
.accessory-wish-door:focus-visible { outline: 3px solid #ffe399; outline-offset: 3px; }
.accessory-wish-door svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 .35rem .4rem #21193ba8) drop-shadow(0 0 .72rem #e2b4ff);
}

.accessory-wish-door span {
  position: absolute;
  bottom: 4%;
  left: 50%;
  padding: .25rem .48rem;
  border: 1px solid #e6bd74;
  border-radius: 1rem;
  background: #fff2c9;
  box-shadow: 0 .16rem #694d7370;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(.72rem, 2.2vw, .88rem);
  font-weight: 850;
}

.accessory-wish-door:disabled span { display: none; }
.accessory-wish-door-left, .accessory-wish-door-right {
  transform-box: view-box;
  transition: transform .65s cubic-bezier(.32, .78, .4, 1);
}
.accessory-wish-door-left { transform-origin: 35px center; }
.accessory-wish-door-right { transform-origin: 109px center; }
.accessory-wish-door:disabled :is(.accessory-wish-door-left, .accessory-wish-door-right) { transform: scaleX(.13); }

.accessory-wish-gem {
  position: absolute;
  z-index: 2;
  bottom: 6%;
  left: 51%;
  display: none;
  width: clamp(3.8rem, 16%, 6rem);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 .2rem .22rem #35245075) drop-shadow(0 0 .5rem #f1bfff);
  pointer-events: none;
}

:is([data-spell-phase="show"], [data-spell-phase="finished"]) .accessory-wish-gem {
  display: block;
  animation: accessory-wish-gem-arrive .65s .16s ease-out both;
}
[data-spell-phase="finished"] .accessory-wish-gem { animation: accessory-wish-gem-collect .5s ease-out both; }

@keyframes accessory-wish-door-arrive {
  from { opacity: 0; transform: translate(-50%, .7rem) scale(.85); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes accessory-wish-gem-arrive {
  from { opacity: 0; transform: translate(-50%, .65rem) scale(.67); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes accessory-wish-gem-collect {
  40% { transform: translate(-50%, -.75rem) scale(1.17) rotate(-8deg); }
  to { transform: translateX(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .accessory-moment-scene button.accessory-wish-door,
  :is([data-spell-phase="show"], [data-spell-phase="finished"]) .accessory-wish-gem { animation: none; }
  .accessory-wish-door-left, .accessory-wish-door-right { transition: none; }
}

[data-scene="sky-vault-puzzle"] .accessory-adventure-prop { display: none; }
[data-scene="sky-vault-puzzle"] .accessory-adventure-buddy {
  left: 79%; bottom: 7%; width: clamp(4.4rem, 26%, 8.8rem);
  transform: translateX(-50%);
}
[data-scene="sky-vault-puzzle"] .accessory-adventure-buddy > * { animation: none; }
.sky-vault-building {
  position: absolute; left: 23%; bottom: 3%; width: 45%; height: auto; aspect-ratio: 1;
  filter: drop-shadow(0 0 1.4rem #ffdcb942);
  perspective: 700px;
}
.sky-vault-shell { width: 100%; height: 100%; }
.sky-vault-door { position: absolute; top: 11.4%; width: 32.5%; height: 77%; transition: transform .9s cubic-bezier(.2,.7,.3,1), filter .9s; }
.sky-vault-door-left { left: 18.2%; transform-origin: left center; }
.sky-vault-door-right { left: 50%; transform-origin: right center; }
.sky-vault-star { position: absolute; left: 24%; top: 29%; width: 52%; height: 52%; opacity: .2; transition: opacity .75s, transform 1.3s cubic-bezier(.3,.6,.4,1); }
.sky-vault-star img, .sky-vault-rescue-portrait img { width: 100%; height: 100%; object-fit: contain; }
[data-vault-state="open"] .sky-vault-door-left,
[data-vault-state="rescued"] .sky-vault-door-left { transform: rotateY(-100deg); filter: brightness(.75); }
[data-vault-state="open"] .sky-vault-door-right,
[data-vault-state="rescued"] .sky-vault-door-right { transform: rotateY(100deg); filter: brightness(.75); }
[data-vault-state="open"] .sky-vault-star,
[data-vault-state="rescued"] .sky-vault-star { opacity: 1; filter: drop-shadow(0 0 .7rem var(--vault-star-color, #ffe59a)); }
[data-vault-state="rescued"] .sky-vault-star { transform: translate(135%, -65%) rotate(8deg) scale(1.05); }
[data-vault-state="rescued"] .accessory-adventure-buddy { filter: drop-shadow(0 0 .8rem #ffe6a1); }
.sky-vault-panel { width: min(100%, 28rem); display: grid; gap: .35rem; }
.sky-vault-starting-clue { display: grid; gap: .2rem; padding: .65rem .8rem; border: 2px solid #c5a4e8; border-radius: .8rem; background: linear-gradient(130deg, #eee4ff, #e5f4ff); color: #463165; box-shadow: inset 0 1px #fff; }
.sky-vault-starting-clue > strong { text-transform: uppercase; letter-spacing: .07em; font-size: .7rem; color: #73518e; }
.accessory-moment .sky-vault-starting-clue p { margin: 0; font-size: .84rem; line-height: 1.45; }
.sky-vault-starting-clue p > span { display: inline-grid; place-items: center; width: 1.2rem; color: #47345a; }
.sky-vault-seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.sky-vault-seals button {
  min-height: 4.4rem; padding: .32rem .2rem; display: grid; gap: .05rem; place-items: center;
  border: 2px solid #bca9d6; border-radius: .8rem; color: #3e2d5c;
  background: linear-gradient(#fffdfd, #eee3fa); box-shadow: 0 .18rem #c0a9db;
}
.sky-vault-seals button > span { font-size: 1.6rem; line-height: 1.2; color: #453653; }
.sky-vault-seals button small { font-size: .77rem; font-weight: 850; line-height: 1.2; }
.sky-vault-seals button b { font-size: .62rem; line-height: 1.2; font-weight: 650; }
.sky-vault-seals button:disabled { opacity: 1; border-color: #bd963a; background: #fff2c6; box-shadow: 0 .18rem #d8b55b; }
.sky-vault-seals button[aria-pressed="true"] { border-color:#72509e; background:#e7d9f7; box-shadow:0 .18rem #72509e; }
.sky-vault-seals button:focus-visible { outline: 3px solid #7450ab; outline-offset: 2px; }
.sky-vault-palette { min-width:0; margin:.25rem 0 .4rem; padding:.45rem; border:1px solid #d3bee5; border-radius:.7rem; background:#faf6ff; }
.sky-vault-palette legend { padding:0 .3rem; color:#59416f; font-size:.78rem; }
.sky-vault-palette > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.3rem; }
.sky-vault-panel .sky-vault-palette button { display:grid; place-items:center; gap:.12rem; min-width:0; min-height:2.9rem; padding:.22rem .08rem; border:1px solid #c6b1d8; border-radius:.5rem; background:#fff; color:#453653; box-shadow:none; }
.sky-vault-palette button > span { font-size:1.25rem; line-height:1.1; }
.sky-vault-palette button small { font-size:.64rem; font-weight:750; line-height:1.1; }
.sky-vault-panel .sky-vault-palette button[aria-pressed="true"] { background:#e7d9f7; border-color:#72509e; }
.sky-vault-palette button:focus-visible { outline:3px solid #7450ab; outline-offset:2px; }
.accessory-moment .sky-vault-legend { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.25rem .6rem; margin:0; font-size:.71rem; line-height:1.3; }
.sky-vault-legend > span { display: flex; align-items:center; gap:.25rem; }
.sky-vault-peg { width: .65rem; height: .65rem; border-radius: 50%; border:1px solid #856840; }
.sky-vault-peg.gold { background: #edb93c; }
.sky-vault-peg.silver { background:#7fc9f7; border-color:#3975a7; }
.sky-vault-guesses { list-style:none; display:grid; gap:.2rem; padding:0; margin:0; }
.sky-vault-guesses:empty { display:none; }
.sky-vault-guesses li { display:flex; justify-content:space-between; align-items:center; padding:.16rem .4rem; border-radius:.45rem; background:#f4eef9; gap:.4rem; }
.sky-vault-history-seals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.25rem; flex:1; max-width:13rem; }
.sky-vault-history-seal { display:grid; gap:.12rem; place-items:center; min-width:0; padding:.25rem .1rem; border-radius:.4rem; }
.sky-vault-history-seal b { display:grid; width:1.25rem; height:1.25rem; place-items:center; color:#493452; font-size:1rem; line-height:1; }
.sky-vault-history-seal small { white-space:nowrap; font-size:.59rem; font-weight:750; line-height:1.2; }
.sky-vault-score { display:flex; flex-direction:column; align-items:flex-end; gap:.15rem; font-size:.72rem; font-weight:750; color:#5c4873; text-align:right; }
.sky-vault-score em { font-style:normal; border-radius:.4rem; padding:.12rem .3rem; }
.sky-vault-right,.sky-vault-exact { background:#d7f1da; color:#1b603b; }
.sky-vault-elsewhere,.sky-vault-move { background:#f5d8ed; color:#71355d; }
.sky-vault-absent { background:#e8e5ed; color:#595264; }
.sky-vault-legend b { border-radius:.35rem; padding:.12rem .25rem; white-space:nowrap; }
.sky-vault-howto { margin:0 0 .25rem; padding:.5rem .65rem; border-radius:.65rem; background:#fff8dd; color:#49375e; font-size:.84rem; line-height:1.4; }
.sky-vault-panel .sky-vault-hint { min-height: 2.75rem; justify-self: center; padding:.4rem .75rem; font-size:.8rem; }
.accessory-moment .sky-vault-hint-note { font-size:.75rem; line-height:1.3; color:#664f78; margin:0; }
@media (prefers-reduced-motion: reduce) {
  .sky-vault-door, .sky-vault-star { transition: none; }
}
.sky-vault-treasure { display:flex; align-items:center; justify-content:center; gap:.55rem; padding:.4rem .8rem; border:1px solid #d9b770; border-radius:.7rem; background:#fff3d8; color:#583d6e; font-weight:800; }
.sky-vault-treasure svg { width:3.4rem; height:3.4rem; flex:none; }
.sky-vault-rescue-card { display: flex; align-items: center; gap: .65rem; padding: .75rem; margin-bottom: .75rem; border-radius: 1rem; border: 1px solid #c2a6e4; background: linear-gradient(135deg, #e7f3ff, #f5e5ff); color: #44315f; text-align: left; }
.sky-vault-rescue-portrait { width: 6rem; height: 6rem; flex: none; filter: drop-shadow(0 0 .45rem var(--vault-star-color)); }
.sky-vault-rescue-card strong { display: block; font-size: 1rem; }
.accessory-moment .sky-vault-rescue-card p { margin: .3rem 0; font-size: .86rem; line-height: 1.35; }
.sky-vault-rescue-card small { font-size: .72rem; }

[data-scene="comet-sling"] .accessory-adventure-prop { display: none; }
[data-scene="comet-sling"] .accessory-adventure-buddy {
  left: 13%; bottom: 2%; width: 18%; min-width: 0; max-width: 6.5rem;
  transition: left 1.2s ease, bottom 1.2s ease, filter .8s ease;
}
[data-scene="comet-sling"] .accessory-moment-targets { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.comet-sling-board { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.comet-sling-dots circle { fill: #fff8d3; stroke: #665487; stroke-width: .2; }
.comet-sling-target { filter: drop-shadow(0 0 1.3px #ffeb85); }
.comet-sling-seed { filter: drop-shadow(0 0 1px #fff3ac); }
.comet-sling-wind {
  position: absolute; right: .5rem; bottom: .4rem; padding: .18rem .45rem;
  border-radius: .6rem; color: #fff8d7; background: #24203bdc; font-weight: 800; font-size: .75rem;
}
[data-scene="comet-sling"][data-wind-active="true"] .comet-sling-wind { background:#fff1bc; color:#69476b; animation:comet-gust .65s ease-out both; }
@keyframes comet-gust { from { transform:translateX(1rem) scale(.9); opacity:.5; } to { transform:none; opacity:1; } }
.comet-sling-controls { display: grid; gap: .25rem; width: min(100%, 23rem); margin-inline: auto; }
.comet-sling-controls label { display: grid; gap: 0; padding: 0 .5rem; border: 1px solid #dfd1ef; border-radius: .6rem; background: #faf7ff; }
.comet-sling-controls label > span { display: flex; justify-content: space-between; color: #503968; font-weight: 800; font-size: .85rem; padding-top: .3rem; }
.comet-sling-controls input[type="range"] { width: 100%; height: 44px; margin: 0; padding: 0; accent-color: #7d50b2; cursor: pointer; }
.comet-sling-controls button { min-height: 44px; padding: .35rem .6rem; }
[data-scene="comet-sling"]:is([data-sling-phase="garden"],[data-sling-phase="collected"]) .accessory-adventure-buddy {
  left: 24%; bottom: 6%; width: 30%; max-width: 8.5rem;
  filter: drop-shadow(0 0 1rem var(--sling-glow));
}
.comet-sling-bloom { position: absolute; inset: 0; }
.comet-sling-bloom > span { position: absolute; left: var(--bloom-x); top: var(--bloom-y); width: 9%; animation: comet-bloom .65s var(--bloom-delay) both; }
.comet-sling-bloom svg { width: 100%; filter: drop-shadow(0 .2rem .25rem #48315c88); }
.comet-sling-prize { display: flex; align-items: center; gap: .6rem; justify-content: center; width: 100%; min-height: 44px; padding: .3rem .6rem; background: #fcf5e5; border: 1px solid #d6bc86; }
.comet-sling-prize svg { height: 3rem; width: 3rem; flex-shrink: 0; }
.comet-sling-prize span { color: #563e69; font-weight: 800; }
.accessory-moment-scene .comet-sling-find { position:absolute; left:68%; top:51%; transform:translate(-50%,-50%); display:grid; justify-items:center; width:clamp(7rem,30%,9rem); padding:.45rem .4rem; border:2px solid #fff0ba; border-radius:1.4rem; color:#412953; background:linear-gradient(#fffbeaef,#eee1ffed); box-shadow:0 0 2rem #fff1ad88,0 .25rem .6rem #30205055; pointer-events:auto; cursor:pointer; animation:comet-prize-pop .8s cubic-bezier(.2,.7,.3,1.2) both; }
.comet-sling-find svg { width:clamp(3.6rem,12vw,5.2rem); height:auto; filter:drop-shadow(0 0 .6rem var(--sling-glow)); }
.comet-sling-find strong { font-size:.85rem; line-height:1.2; }
.comet-sling-find > span { font-size:.73rem; font-weight:700; margin-top:.2rem; }
.comet-sling-find:focus-visible { outline:3px solid #2d1461; outline-offset:3px; }
.comet-sling-find[data-collected] { background:#eafff2ed; opacity:1; cursor:default; }
@keyframes comet-prize-pop { 0% { opacity:0; margin-top:2rem; scale:.45; } 65% { opacity:1; margin-top:-.4rem; scale:1.08; } 100% { opacity:1; margin-top:0; scale:1; } }
@keyframes comet-bloom { from { transform: scale(0) rotate(-45deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-scene="comet-sling"] .accessory-adventure-buddy { transition: none; }
  .comet-sling-bloom > span { animation: none; }
  .comet-sling-find { animation:none; }
}

.accessory-moment-scene[data-scene="teacup-voyage"] { width:100%; aspect-ratio:1.9; background:#397e85; overflow:hidden; }
[data-scene="teacup-voyage"] .accessory-teacup-boat { left:30%; bottom:10%; width:clamp(5.2rem,27%,9.6rem); transition:left 2.4s ease-in-out,bottom 2.4s ease-in-out,transform 1s; transform:translateX(-50%) rotate(-3deg); z-index:4; }
[data-scene="teacup-voyage"] .accessory-teacup-rider { transition:opacity .45s; }
[data-scene="teacup-voyage"] .accessory-teacup-wake { top:93%; height:11%; }
.teacup-voyage-light { position:absolute; z-index:1; inset:0; pointer-events:none; transition:background 1.4s; }
[data-voyage-weather="sunbeam"] .teacup-voyage-light { background:linear-gradient(128deg,#fff6bb26,transparent 45%,#fff1ba1c); }
[data-voyage-weather="moonlit"] .teacup-voyage-light { background:linear-gradient(#30337450,#84b5f00d); }
[data-voyage-weather="petals"] .teacup-voyage-light { background:radial-gradient(ellipse at 14% 18%,#ffc6dc3b,transparent 65%); }
.teacup-voyage-pads { position:absolute; z-index:2; inset:0; overflow:hidden; pointer-events:none; }
.teacup-voyage-pads > span { position:absolute; width:17%; left:calc(16% + var(--pad) * 15%); bottom:7%; filter:drop-shadow(0 .18rem .12rem #133f4150); }
.teacup-voyage-pads > span:nth-child(2) { bottom:38%; width:17%; }
.teacup-voyage-pads > span:nth-child(3) { bottom:0; width:20%; }
.teacup-voyage-pads > span:nth-child(4) { bottom:36%; width:15%; }
.teacup-voyage-pads > span:nth-child(5) { bottom:1%; width:20%; }
.teacup-voyage-pads svg,.teacup-voyage-dock > svg,.teacup-voyage-encounter svg { display:block; width:100%; height:auto; }
.teacup-voyage-dock { position:absolute; z-index:3; width:38%; right:5%; bottom:0; transform:translateX(130%); transition:transform 2.3s ease-in-out; filter:drop-shadow(0 .15rem .1rem #163e4040); pointer-events:none; }
/* Anchor the feet to the illustrated deck, whose aspect ratio is independent of the window. */
.teacup-voyage-ashore { position:absolute; z-index:5; right:23.25%; bottom:44%; width:46.5%; aspect-ratio:1; opacity:0; transform:translate(-25%,10%); transition:opacity .5s,transform .6s; pointer-events:none; filter:drop-shadow(0 .2rem .12rem #23414f50); }
.teacup-voyage-ashore > .reference-creature-display { width:100%; height:100%; }
[data-voyage-phase="approach"] .teacup-voyage-dock,[data-voyage-phase="docked"] .teacup-voyage-dock { transform:translateX(0); }
[data-voyage-phase="approach"] .accessory-teacup-boat,[data-voyage-phase="docked"] .accessory-teacup-boat { left:66%; bottom:5%; transform:translateX(-50%) rotate(0); animation:none; }
[data-voyage-phase="docked"] .teacup-voyage-ashore { opacity:1; transform:none; }
[data-voyage-phase="docked"] .accessory-teacup-rider,[data-voyage-swimmer] .accessory-teacup-rider { opacity:0; }
[data-voyage-phase="docked"] .accessory-teacup-wake { opacity:.35; }
[data-voyage-phase="docked"] .teacup-voyage-pads > span:nth-child(n+4) { opacity:0; }
.teacup-voyage-encounter { position:absolute; z-index:5; height:40%; width:auto; aspect-ratio:1; left:62%; bottom:22%; pointer-events:none; filter:drop-shadow(0 .15rem .18rem #2d4b5460); }
.teacup-voyage-encounter[hidden] { display:none; }
.teacup-voyage-encounter > .reference-creature-display { width:100%; height:100%; }
[data-voyage-encounter="fish"] .teacup-voyage-encounter { height:42%; aspect-ratio:1.3; left:39%; bottom:24%; }
.teacup-cloud-fish { position:absolute; width:66%; left:0; top:10%; transform-origin:50% 60%; }
.teacup-cloud-fish + .teacup-cloud-fish { width:57%; left:47%; top:38%; }
.teacup-cloud-tail { transform-origin:105px 57px; }
.teacup-cloud-fin { transform-origin:58px 64px; }
[data-voyage-encounter="opal"] .teacup-voyage-encounter { height:28%; width:auto; left:32%; bottom:32%; }
.teacup-voyage-sparkles { position:absolute; z-index:5; inset:0; pointer-events:none; }
.teacup-voyage-sparkles i { position:absolute; left:var(--glow-x); top:var(--glow-y); width:.4rem; height:.4rem; border-radius:50%; background:#fff5b8; box-shadow:0 0 .45rem .2rem #ffe9a375; }
.accessory-moment-scene .teacup-voyage-firefly { position:absolute; width:44px; min-height:44px; padding:9px; border:1px solid #ffec9d80; border-radius:50%; background:#3a4356b8; box-shadow:0 0 .55rem #ffdb766b; transform:translate(-50%,-50%); pointer-events:auto; }
.teacup-voyage-firefly span { display:block; width:14px; height:20px; margin:auto; border-radius:50%; background:radial-gradient(ellipse at 50% 70%,#fffdb7,#e3cb65 60%,#6d8c6c 70%); box-shadow:-7px -3px 0 -3px #dceffc,7px -3px 0 -3px #dceffc; }
.teacup-voyage-firefly[data-awake] { background:#e6e7a0; box-shadow:0 0 1rem #ffeaa0; }
[data-voyage-bloom] .teacup-voyage-pads > span:nth-child(2) { width:33%; bottom:16%; left:14%; transition:width .8s,bottom .8s; }
[data-voyage-bloom] .teacup-voyage-ashore { filter:drop-shadow(0 0 .6rem #fbb6c7) drop-shadow(0 0 1rem #ffd789); }
[data-voyage-rainbow] .teacup-voyage-light::after { content:""; position:absolute; width:68%; height:60%; top:7%; left:16%; border-radius:100% 100% 0 0; border:6px solid #f6aab4; border-bottom:0; box-shadow:0 -5px #f8d4a5,0 -10px #f7eca8,0 -15px #c7e4b0,0 -20px #b1ddf5,0 -25px #d5b9e7; opacity:.8; }
[data-voyage-rainbow] .teacup-voyage-ashore { filter:drop-shadow(-.2rem 0 .35rem #ffb6b4) drop-shadow(.2rem 0 .35rem #c8bdff) drop-shadow(0 -.15rem .35rem #c8f2a6); }
@media(prefers-reduced-motion:no-preference) {
  [data-voyage-phase="sailing"] .accessory-teacup-boat { animation:teacup-new-voyage var(--voyage-duration,15s) ease-in-out both; }
  [data-voyage-phase="sailing"] .accessory-teacup-wake { animation:accessory-teacup-ripple 1.1s ease-out infinite; }
  [data-voyage-phase="sailing"] .teacup-voyage-pads { animation:teacup-pad-drift var(--voyage-duration,15s) linear both; }
  .teacup-water-visitor { animation:teacup-visitor-pop 1.05s cubic-bezier(.2,.6,.35,1) both; }
  .teacup-water-surface i { animation:teacup-visitor-splash 1s calc(var(--splash-i) * 70ms) ease-out both; }
  .teacup-cloud-fish { animation:teacup-fish-leap 2.6s ease-in-out infinite; }
  .teacup-cloud-fish + .teacup-cloud-fish { animation-delay:.6s; }
  .teacup-cloud-tail { animation:teacup-cloud-tail 1.1s ease-in-out infinite alternate; }
  .teacup-cloud-fin { animation:teacup-cloud-fin 1.4s ease-in-out infinite alternate; }
  .teacup-cloud-bubble { animation:teacup-cloud-bubble 1.8s ease-in-out infinite alternate; }
  .teacup-cloud-prize { animation:teacup-prize-rise .8s ease-out both; }
  .teacup-voyage-sparkles i { animation:teacup-firefly-light 1.2s var(--glow-delay) ease-in-out infinite alternate; }
  [data-voyage-weather="petals"] .teacup-voyage-light::after { content:""; position:absolute; left:15%; top:20%; width:.5rem; height:.8rem; border-radius:60% 20%; background:#ffd2d9; box-shadow:8rem 1rem #ffe0dc,15rem -1rem #ffd7e3,4rem 5rem #ffc0d4,19rem 6rem #fce1dd; animation:teacup-petals 5s linear infinite; }
}
@keyframes teacup-new-voyage { 0%{left:24%;bottom:12%;transform:translateX(-50%) rotate(-4deg)} 27%{left:43%;bottom:25%;transform:translateX(-50%) rotate(calc(8deg * var(--voyage-drift)))} 53%{left:39%;bottom:11%;transform:translateX(-50%) rotate(calc(-7deg * var(--voyage-drift)))} 78%{left:51%;bottom:22%;transform:translateX(-50%) rotate(calc(6deg * var(--voyage-drift)))} 100%{left:54%;bottom:10%;transform:translateX(-50%) rotate(0)} }
@keyframes teacup-pad-drift { from{transform:translateX(var(--voyage-pad-offset,0%))} to{transform:translateX(-9%)} }
@keyframes teacup-water-hello { from{opacity:0;translate:0 20%;clip-path:inset(50% 0 0)} 70%{opacity:1;translate:0 -8%;clip-path:inset(0)} to{opacity:1;translate:0 0} }
@keyframes teacup-fish-leap { 0%,100%{transform:translate(0,0) rotate(-8deg)} 50%{transform:translate(5%,-30%) rotate(8deg)} }
@keyframes teacup-cloud-tail { from{transform:rotate(-10deg) scaleX(.94)} to{transform:rotate(10deg) scaleX(1.04)} }
@keyframes teacup-cloud-fin { from{transform:rotate(-8deg)} to{transform:rotate(13deg)} }
@keyframes teacup-cloud-bubble { from{translate:0 -.2rem} to{translate:0 .2rem} }
@keyframes teacup-prize-rise { from{opacity:0;translate:0 1.4rem;scale:.7} to{opacity:1;translate:0 0;scale:1} }
@keyframes teacup-firefly-light { from{opacity:.35;transform:translateY(.2rem)} to{opacity:1;transform:translateY(-.3rem)} }
@keyframes teacup-petals { from{transform:translate(0,-30px) rotate(-20deg);opacity:0} 20%,80%{opacity:1} to{transform:translate(50px,130px) rotate(70deg);opacity:0} }
@media(prefers-reduced-motion:reduce) { [data-scene="teacup-voyage"] * { transition:none!important; animation:none!important; } }

/* Keep only the underwater edge: an ordinary overflow box clips every upward leap.
   The open air and sides extend beyond the small waterline wrapper. */
.teacup-water-window { position:absolute; inset:0 3% 8%; overflow:visible; clip-path:inset(-180% -150% 0 -150%); }
.teacup-water-visitor { position:absolute; inset:2% 12% -8%; transform-origin:50% 75%; }
.teacup-water-visitor > .reference-creature-display { width:100%; height:100%; }
.teacup-pond-friend { display:block; width:100%; height:100%; background-image:url('/reference-art/ambient-friends.webp'); background-size:300% 300%; background-repeat:no-repeat; }
.teacup-pond-friend[data-pond-animal="frog"] { background-position:0 0; }
.teacup-pond-friend[data-pond-animal="koi"] { background-position:50% 0; }
.teacup-pond-friend[data-pond-animal="turtle"] { background-position:100% 0; }
.teacup-pond-friend[data-pond-animal="otter"] { background-position:0 50%; }
.teacup-pond-friend[data-pond-animal="seahorse"] { background-position:50% 50%; }
.teacup-pond-friend[data-pond-animal="axolotl"] { background-image:url('/reference-art/pond-axolotl.webp'); background-size:contain; background-position:center; }
.teacup-water-surface { position:absolute; z-index:2; left:1%; right:1%; bottom:1%; height:14%; border-radius:50%; border-top:2px solid #e3ffff; background:radial-gradient(ellipse,#c3f7f7a6 0%,#87c9cb7a 47%,transparent 73%); }
.teacup-water-surface i { --splash-i:0; position:absolute; left:14%; bottom:70%; width:7%; height:50%; border-radius:60% 60% 50% 50%; background:linear-gradient(#fff,#9ddcef); transform:rotate(-30deg); }
.teacup-water-surface i:nth-child(2) { --splash-i:1; left:77%; transform:rotate(32deg); }
.teacup-water-surface i:nth-child(3) { --splash-i:2; left:53%; width:4%; height:34%; }
[data-voyage-phase="docked"] .teacup-voyage-encounter:not([hidden]) { left:14%; bottom:16%; height:44%; width:auto; }
[data-voyage-phase="docked"][data-voyage-swimmer] .teacup-voyage-ashore { opacity:0; }
[data-voyage-encounter="opal"][data-voyage-phase="docked"] .teacup-voyage-encounter { height:28%; width:auto; left:32%; bottom:32%; }
[data-voyage-fish-chase] .teacup-voyage-encounter:not([hidden]) { left:var(--fish-x,25%); top:var(--fish-y,64%); bottom:auto; height:35%; aspect-ratio:1.3; transform:translate(-50%,-50%); transition:left .8s ease-in-out,top .8s ease-in-out; }
[data-voyage-fish-chase] .teacup-water-window { clip-path:none; }
[data-voyage-fish-chase] .teacup-water-surface { opacity:0; }
.accessory-moment-scene .teacup-cloud-bubble { position:absolute; z-index:8; width:clamp(2.75rem,10%,3.6rem); min-height:2.75rem; aspect-ratio:1; padding:.3rem; border:2px solid #fff7da; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 32% 25%,#fffef5 0 10%,#c6f2ee80 25%,#c6b1ee80 60%,#fff5dabb 100%); box-shadow:inset 0 0 .65rem #fff8e5,0 0 1rem #c6f4fa80; pointer-events:auto; cursor:pointer; }
.teacup-cloud-bubble > span { display:block; width:43%; aspect-ratio:1; margin:auto; border-radius:50%; background:radial-gradient(circle at 34% 26%,#fffef4,#fff2b4 48%,#d8a7d0); box-shadow:0 0 .4rem #fff7bd; }
.accessory-moment-scene .teacup-cloud-bubble:disabled { opacity:.65; cursor:default; }
.teacup-cloud-bubble:focus-visible { outline:3px solid #473264; outline-offset:4px; }
.teacup-cloud-prize { position:absolute; left:34%; top:43%; width:15%; min-width:3.25rem; transform:translate(-50%,-50%); filter:drop-shadow(0 0 .65rem #f6ffcf); }
.teacup-cloud-prize > svg { display:block; width:100%; height:auto; }
.accessory-moment-scene .teacup-voyage-treasure { position:absolute; z-index:9; left:33%; top:47%; transform:translate(-50%,-50%); width:clamp(7rem,31%,9.5rem); display:grid; justify-items:center; padding:.4rem; border:2px solid #fff4ba; border-radius:1.4rem; color:#382954; background:linear-gradient(#fffce7f5,#d8f5fff2); box-shadow:0 0 1.8rem #ffed9a88,0 .3rem .5rem #1a3c5a55; pointer-events:auto; cursor:pointer; }
.teacup-voyage-treasure svg { width:clamp(3.8rem,13vw,5.3rem); height:auto; filter:drop-shadow(0 0 .6rem #fff7ae); }
.teacup-voyage-treasure strong { font-size:.85rem; line-height:1.2; }
.teacup-voyage-treasure > span { margin-top:.2rem; font-size:.72rem; font-weight:750; }
.teacup-voyage-treasure[data-collected] { background:#e5fff1f2; opacity:1; cursor:default; }
.teacup-voyage-treasure:focus-visible { outline:3px solid #34245c; outline-offset:3px; }
@media(prefers-reduced-motion:no-preference) { .teacup-voyage-treasure { animation:teacup-treasure-pop .85s cubic-bezier(.2,.7,.35,1.18) both; } }
@keyframes teacup-treasure-pop { 0% { opacity:0; margin-top:2.4rem; scale:.5; } 65% { opacity:1; margin-top:-.5rem; scale:1.08; } 100% { opacity:1; margin-top:0; scale:1; } }
@keyframes teacup-visitor-pop { 0%{transform:translateY(110%) scale(.78);opacity:0} 20%{opacity:1} 57%{transform:translateY(-12%) scale(1.05)} 78%{transform:translateY(7%) scale(.98)} 100%{transform:translateY(0) scale(1);opacity:1} }
@keyframes teacup-visitor-splash { 0%{translate:0 0;opacity:0} 30%{opacity:1} 80%{translate:0 -22px;opacity:.8} 100%{translate:0 -26px;opacity:0} }

[data-scene="wind-post"] { --post-color:#c7b1ff; --post-x:40%; --post-y:8%; --post-visible-y:var(--post-y); --post-actor:min(35cqw,52cqh,12rem); container-type:size; }
[data-scene="wind-post"] .accessory-adventure-actors {
  z-index:3; inset:auto auto var(--post-visible-y) var(--post-x); width:var(--post-actor); aspect-ratio:1;
  transform:translateX(-50%); transition:left .9s ease-in-out,bottom .9s ease-in-out,transform .9s ease-in-out;
}
[data-scene="wind-post"] .accessory-adventure-buddy { z-index:2; left:61%; bottom:0; width:59%; }
[data-scene="wind-post"] .accessory-adventure-prop { z-index:2; left:28%; bottom:48%; width:54%; }
.wind-post-tether { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#fff1c8; stroke-width:2; filter:drop-shadow(0 1px 1px #412a65); }
.wind-post-weather { position:absolute; z-index:2; right:10%; top:13%; width:14%; max-width:4.5rem; filter:drop-shadow(0 .2rem .3rem #35254a80); }
.wind-post-weather svg { display:block; width:100%; }
.wind-post-destination { position:absolute; z-index:2; right:4%; bottom:5%; width:32%; max-width:10.5rem; opacity:0; transform:translateX(35%); transition:opacity .6s,transform .9s; }
.wind-post-destination svg { display:block; width:100%; overflow:visible; filter:drop-shadow(0 .3rem .35rem #35254a70); }
.wind-post-letter { position:absolute; z-index:5; left:calc(var(--post-x) + var(--post-actor) * .13); bottom:calc(var(--post-visible-y) + var(--post-actor) * .06); width:calc(var(--post-actor) * .25); max-width:3rem; transform:rotate(-12deg); transition:left .85s ease-in-out,bottom .85s ease-in-out,transform .85s ease-in-out,opacity .25s; }
.wind-post-letter svg { width:100%; display:block; }
[data-post-phase="flying"][data-post-current="rise"] .accessory-adventure-actors { transform:translateX(-50%) rotate(-12deg); }
[data-post-phase="flying"][data-post-current="glide"] .accessory-adventure-actors { transform:translateX(-50%) rotate(12deg); }
[data-post-phase="arrival"] .wind-post-destination,
[data-post-phase="delivering"] .wind-post-destination,
[data-post-phase="delivered"] .wind-post-destination { opacity:1; transform:none; }
[data-post-phase="delivering"] .wind-post-letter { left:76%; bottom:30%; transform:rotate(0) scale(.55); }
[data-post-phase="delivered"] .wind-post-letter { left:76%; bottom:30%; transform:scale(.2); opacity:0; }
[data-post-phase="delivered"] .wind-post-flag { transform:translateY(-7px); }
[data-post-phase="delivered"] .accessory-adventure-buddy { filter:drop-shadow(0 0 .8rem var(--post-color)); }
.wind-post-panel { width:100%; display:grid; gap:.5rem; }
.accessory-moment .wind-post-progress { margin:0; font-size:.82rem; font-weight:800; color:#5a4678; }
.accessory-moment .wind-post-clue { margin:0; padding:.55rem .7rem; border:1px solid #decd98; border-radius:.7rem; background:#fff6da; font-weight:750; }
.wind-post-choices { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.accessory-moment-controls .wind-post-choices button { min-height:3rem; display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.9rem; padding:.45rem; }
.wind-post-choices button span { font-size:1.4rem; color:#8c5bab; }
.wind-post-address { text-align:center; border:1px dashed #bfa3c5; background:#fff9e9; padding:.6rem 1rem; border-radius:.7rem; }
.wind-post-address strong { display:block; color:#654c88; }
.wind-post-card { display:flex; align-items:center; gap:.6rem; width:100%; padding:.6rem .8rem; border:3px solid #ddb252; background:#fff9e7; border-radius:.8rem; text-align:left; }
.wind-post-card[data-border="glitter"] { border-color:#d2a5e7; background:linear-gradient(120deg,#fff4dc,#fbecff,#ecf6ff); }
.wind-post-card svg { width:2.8rem; height:2.8rem; flex-shrink:0; }
.wind-post-card strong { display:block; font-size:.9rem; }
.wind-post-card span { display:block; color:#766780; font-size:.78rem; }
@media (max-width:719px) {
 [data-scene="wind-post"] { --post-visible-y:min(var(--post-y),27%); }
}
@media (prefers-reduced-motion:reduce) {
 [data-scene="wind-post"] .accessory-adventure-actors,.wind-post-letter,.wind-post-destination { transition:none; }
}
.wind-post-compose { display:grid; gap:.35rem; width:min(100%,28rem); color:#453657; font-weight:700; }
.wind-post-compose textarea { box-sizing:border-box; width:100%; padding:.5rem .7rem; border:2px solid #b9a6ce; border-radius:.6rem; resize:vertical; font:inherit; color:#342953; background:#fffcf5; }
.wind-post-random { min-height:44px; }
.wind-post-letter-message { max-width:22rem; margin:.4rem 0 0; padding:.4rem; border-radius:.4rem; background:#fff9df; color:#3d3356; overflow-wrap:anywhere; white-space:pre-wrap; }

/* Activities are a single play surface: keep the picture, directions and actions
   together. Scrolling remains a fallback for small screens and text zoom. */
#dialog:has(:is(.accessory-moment, .buddy-game)) {
  box-sizing: border-box;
  width: min(62rem, calc(100% - 1.25rem));
  max-width: none;
  max-height: calc(100dvh - 1.25rem);
  padding: 0;
  overflow: hidden;
}
#dialog[open]:has(:is(.accessory-moment, .buddy-game)) {
  display: flex;
  flex-direction: column;
}
#dialog:has(:is(.accessory-moment, .buddy-game)) > .dialog-head {
  flex: none;
  min-height: 3.4rem;
  padding: .3rem .8rem;
}
#dialog:has(:is(.accessory-moment, .buddy-game)) > .dialog-head h2 {
  font-size: 1.15rem;
  line-height: 1.2;
}
#dialog:has(:is(.accessory-moment, .buddy-game)) > .dialog-head button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}
#dialog:has(:is(.accessory-moment, .buddy-game)) > .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: .65rem .8rem .8rem;
  overflow: auto;
  overscroll-behavior: contain;
  line-height: 1.35;
}
#dialog .accessory-moment {
  gap: .45rem;
  min-width: 0;
  align-items: start;
}
#dialog .accessory-moment > p {
  font-size: .9rem;
  line-height: 1.35;
}
#dialog .accessory-moment > p:first-child {
  padding: .45rem .65rem;
  border: 1px solid #e3d8ed;
  border-radius: .65rem;
  color: #503d66;
  background: #faf5ff;
}
#dialog .accessory-moment .accessory-moment-feedback {
  min-height: 0;
  font-weight: 750;
}
#dialog .accessory-moment .accessory-moment-feedback:empty { display: none; }
#dialog .accessory-moment .accessory-moment-reward {
  font-size: .8rem;
  line-height: 1.3;
}
#dialog .accessory-moment .accessory-moment-controls { gap: .35rem; }
#dialog .accessory-moment .accessory-moment-controls > button,
#dialog .accessory-moment > button {
  margin: 0;
  min-height: 2.75rem;
  padding-block: .4rem;
  font-size: .9rem;
  line-height: 1.25;
}
#dialog .accessory-moment .accessory-moment-skip {
  justify-self: center;
  color: #654976;
  border-color: #d6c7e4;
  background: #faf6ff;
}
#dialog .accessory-moment .accessory-moment-scene {
  width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: .8rem;
}

/* The standalone demo uses the same board layout in its own dialog shell. */
#demo-game:has(.buddy-game) {
  box-sizing: border-box;
  width: min(62rem, calc(100% - 1.25rem));
  max-width: none;
  max-height: calc(100dvh - 1.25rem);
  padding: .7rem .85rem .85rem;
  overflow: auto;
}
#demo-game:has(.buddy-game) > h2 {
  margin: 0 3rem .7rem 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  line-height: 1.2;
}
#demo-game:has(.buddy-game) > .demo-dialog-close { min-width: 2.75rem; min-height: 2.75rem; }

/* Board-game directions and outcomes belong beside the board on a wide screen. */
:is(#dialog, #demo-game) .buddy-game { gap: .5rem; align-items: start; }
:is(#dialog, #demo-game) .buddy-game .buddy-game-scene {
  min-height: 0;
  padding: .6rem .7rem;
}
:is(#dialog, #demo-game) .buddy-game .buddy-game-scene-copy { width: 100%; }
:is(#dialog, #demo-game) .buddy-game .buddy-game-scene-copy > strong { font-size: 1.15rem; }
:is(#dialog, #demo-game) .buddy-game .buddy-game-instructions { font-size: .88rem; line-height: 1.35; }
:is(#dialog, #demo-game) .buddy-game .buddy-game-status { padding: .35rem .55rem; font-size: .88rem; line-height: 1.3; }
:is(#dialog, #demo-game) .buddy-game .buddy-game-reward { font-size: .8rem; line-height: 1.3; }
:is(#dialog, #demo-game) .buddy-game .buddy-game-help { margin: 0; gap: .3rem .5rem; }
:is(#dialog, #demo-game) .buddy-game .buddy-game-actions { gap: .35rem; }
:is(#dialog, #demo-game) .buddy-game :is(.buddy-game-actions, .buddy-game-help, .buddy-game-lantern-controls, .buddy-game-lantern-confirm, .buddy-game-simon-controls, .buddy-game-bomb-bar) button {
  min-height: 2.75rem;
  padding-block: .4rem;
}

@media (min-width: 720px) {
  #dialog .accessory-moment {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 1fr);
    grid-auto-rows: min-content;
    column-gap: 1rem;
    align-content: start;
  }
  #dialog .accessory-moment > * { grid-column: 2; min-width: 0; }
  #dialog .accessory-moment > .accessory-moment-scene {
    grid-column: 1;
    grid-row: 1 / span 8;
    height: clamp(16rem, 48dvh, 26rem);
    align-self: start;
  }
  #dialog .accessory-moment > .accessory-moment-controls { align-self: start; }
  :is(#dialog, #demo-game) .buddy-game {
    grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr);
    grid-auto-rows: min-content;
    column-gap: 1rem;
    align-content: start;
  }
  :is(#dialog, #demo-game) .buddy-game > * { grid-column: 2; min-width: 0; }
  :is(#dialog, #demo-game) .buddy-game > .buddy-game-body { grid-column: 1; grid-row: 1 / span 7; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-scene { min-height: 8rem; }
}

@media (max-width: 719px) {
  #dialog:has(:is(.accessory-moment, .buddy-game)) {
    width: min(34rem, calc(100% - .75rem));
    max-height: calc(100dvh - .75rem);
    border-radius: 1rem;
  }
  #dialog:has(:is(.accessory-moment, .buddy-game)) > .dialog-body { padding: .5rem .6rem .65rem; }
  #dialog .accessory-moment .accessory-moment-scene { height: clamp(8.5rem, 20dvh, 11rem); }
  #dialog .accessory-moment > p:first-child { padding: .35rem .5rem; font-size: .84rem; }
  #dialog .accessory-moment .accessory-moment-feedback { font-size: .86rem; }
  #dialog .accessory-moment .accessory-adventure-caption { top: .35rem; left: .35rem; padding: .15rem .4rem; }
  :is(#dialog, #demo-game) .buddy-game { gap: .4rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-scene-tag { display: none; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-body { padding: .4rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-scene { padding: .45rem .6rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-lanterns { max-width: 16.25rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-lantern-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
  }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-lantern-controls > span { grid-column: 1 / -1; text-align: center; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-lantern-tip { margin: .3rem auto .4rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-lantern-confirm { margin-top: .4rem; gap: .2rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-rivals { margin-bottom: .35rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-noughts { max-width: 16.5rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-bomb-bar { margin-top: .4rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-simon { max-width: 16.5rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-simon-controls { margin-bottom: .35rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-melody-progress { margin-bottom: .35rem; }
}

@media (max-height: 650px) and (min-width: 720px) {
  #dialog .accessory-moment > .accessory-moment-scene { height: 20rem; }
  :is(#dialog, #demo-game) .buddy-game .buddy-game-grid { max-width: 18rem; }
}