:root {
  color-scheme: light;
  --paper: #eee7d7;
  --paper-light: #f7f1e4;
  --paper-deep: #ddd1b7;
  --ink: #293028;
  --ink-soft: #697064;
  --moss: #57704c;
  --moss-deep: #3f5639;
  --sun: #d1a44b;
  --water: #8eada9;
  --coral: #b96555;
  --line: rgba(58, 65, 52, .28);
  --shadow: rgba(54, 47, 38, .18);
  --panel-radius: 28px 20px 32px 23px;
  --button-radius: var(--app-control-radius);
  --story-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --character-name-size: 13px;
  --bubble-font: var(--story-font-sans);
  font-family: var(--story-font-sans);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: #111613; }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
}
body.scene-transition-closing,
body.scene-transition-closed,
body.scene-transition-opening {
  overflow: hidden;
  pointer-events: none;
  will-change: clip-path;
}
body.scene-transition-closing { animation: scene-circle-close 680ms linear both; }
body.scene-transition-closed { clip-path: circle(0 at 50% 50%); }
body.scene-transition-opening { animation: scene-circle-open 760ms linear both; }
@keyframes scene-circle-close {
  from { clip-path: circle(75vmax at 50% 50%); }
  to { clip-path: circle(0 at 50% 50%); }
}
@keyframes scene-circle-open {
  from { clip-path: circle(0 at 50% 50%); }
  to { clip-path: circle(75vmax at 50% 50%); }
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible {
  outline: 3px solid rgba(87, 112, 76, .34);
  outline-offset: 3px;
}
button:active { transform: translateY(1px) scale(.985); }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body[data-phase] .app-navigation__control,
body[data-phase] .cover-mark,
body[data-phase] .backpack-button,
body[data-phase] .backpack-mark {
  overflow: visible;
}

.story-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  min-height: 74px;
  padding: max(12px, env(safe-area-inset-top)) 18px 10px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, rgba(239, 232, 216, .95), rgba(239, 232, 216, .72) 72%, transparent);
  pointer-events: none;
}

.chapter-progress { pointer-events: auto; }

.dialog-close, .secondary-action {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: rgba(247, 241, 228, .84);
  padding: 0 16px;
  cursor: pointer;
  transition: transform 120ms ease, background 180ms ease;
}
.dialog-close:hover, .secondary-action:hover { background: var(--paper-light); }

.chapter-progress {
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(116px, 1fr));
  gap: 6px;
  width: min(520px, 100%);
}
.chapter-progress span {
  min-height: 32px;
  padding: 7px 8px;
  border-bottom: 2px solid rgba(64, 75, 59, .18);
  background: transparent;
  color: rgba(59, 68, 55, .62);
  text-align: center;
  font-size: 11px;
  transition: color 240ms ease, border-color 240ms ease;
}
.chapter-progress span.active { color: var(--ink); border-color: var(--moss); font-weight: 750; }
.chapter-progress span.done { color: var(--moss-deep); border-color: var(--sun); }

#story-world { position: relative; min-height: 100dvh; }
.world-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  transition: background 760ms ease;
}
.world-stage::before {
  content: none;
}
.world-stage::after {
  content: none;
}
.story-scene-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}
.sky-wash, .ground-wash, .far-shape, .place-object { position: absolute; z-index: 1; pointer-events: none; }
.sky-wash, .ground-wash, .far-shape { display: none; }
.sky-wash {
  inset: 3% 4% 38%;
  border-radius: 48% 52% 39% 61% / 57% 42% 58% 43%;
  background: rgba(255, 250, 235, .22);
  filter: blur(22px);
}
.ground-wash {
  left: -8%;
  right: -8%;
  bottom: -12%;
  height: 58%;
  border-radius: 48% 52% 0 0 / 27% 31% 0 0;
  background:
    radial-gradient(ellipse at 48% 8%, rgba(113, 139, 99, .34), transparent 42%),
    linear-gradient(170deg, rgba(104, 128, 88, .44), rgba(76, 99, 68, .55));
  box-shadow: inset 0 24px 80px rgba(246, 239, 220, .18);
  transform: rotate(-1deg);
}
.far-shape {
  width: 26vw;
  height: 44vh;
  bottom: 20%;
  opacity: .52;
  background: rgba(79, 103, 71, .48);
  filter: blur(1.4px);
  clip-path: polygon(48% 0, 62% 18%, 75% 11%, 81% 35%, 95% 46%, 74% 61%, 84% 85%, 55% 78%, 36% 100%, 24% 73%, 2% 62%, 23% 42%, 14% 24%, 38% 28%);
}
.far-shape-a { left: -6vw; transform: rotate(-7deg); }
.far-shape-b { right: -5vw; transform: scaleX(-1) rotate(-3deg); opacity: .4; }

.story-scenery {
  position: absolute;
  z-index: auto;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  --story-phase-blur: 0px;
  filter:
    saturate(var(--background-saturation, 1))
    brightness(var(--background-brightness, 1))
    contrast(var(--background-contrast, 1))
    hue-rotate(var(--background-hue, 0deg))
    blur(calc(var(--background-blur, 0px) + var(--story-phase-blur)))
    opacity(var(--background-opacity, 1));
  transition: opacity 420ms ease, filter 420ms ease;
}
.scene-prop {
  position: absolute;
  left: var(--prop-x);
  width: var(--prop-width);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  line-height: 0;
  opacity: 0;
  transform-origin: 50% 100%;
  transition:
    opacity 680ms ease var(--prop-delay),
    transform 820ms cubic-bezier(.16, 1, .3, 1) var(--prop-delay),
    filter 240ms ease;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-appearance: none;
  appearance: none;
}
.scene-prop[data-position="ground"] {
  bottom: var(--prop-bottom);
  transform: translateX(-50%) translateY(14px) scaleX(var(--prop-flip)) scale(.96);
}
.scene-prop[data-position="sky"] {
  top: var(--prop-top);
  transform: translate(-50%, -45%) scaleX(var(--prop-flip)) scale(.96);
  transform-origin: 50% 50%;
}
.scene-prop.is-ready { opacity: var(--prop-opacity); }
.scene-prop.is-ready[data-position="ground"] { transform: translateX(-50%) translateY(0) scaleX(var(--prop-flip)) scale(1); }
.scene-prop.is-ready[data-position="sky"] { transform: translate(-50%, -50%) scaleX(var(--prop-flip)) scale(1); }
.scene-prop-far { z-index: 2; }
.scene-prop-sky { z-index: 2; }
.scene-prop-mid { z-index: 2; }
.scene-prop-focus { z-index: 2; }
.scene-prop img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.scene-prop.is-interactive { pointer-events: auto; cursor: pointer; }
.scene-prop.is-interactive:disabled { pointer-events: none; }
.scene-prop.is-interactive:hover { filter: brightness(1.035); }
.scene-prop.is-interactive:focus-visible {
  outline: 3px solid rgba(87, 112, 76, .42);
  outline-offset: 5px;
}
.scene-prop.is-tapped img { animation: scenery-tap 520ms cubic-bezier(.16, 1, .3, 1); }
.scene-prop[data-motion="drift"] img { animation: scenery-drift 18s ease-in-out infinite alternate; }
.scene-prop[data-motion="sway"] img { transform-origin: 50% 100%; animation: scenery-sway 8s ease-in-out infinite alternate; }
.scene-prop[data-motion="float"] img { animation: scenery-float 7s ease-in-out infinite alternate; }
.scene-prop[data-motion="glow"] img { animation: scenery-glow 4.8s ease-in-out infinite alternate; }
@keyframes scenery-tap { 45% { transform: translateY(-6px) rotate(-1.5deg) scale(1.035); } }
@keyframes scenery-drift { to { transform: translate3d(10px, -3px, 0); } }
@keyframes scenery-sway { to { transform: rotate(.7deg) translateX(2px); } }
@keyframes scenery-float { to { transform: translateY(-6px) rotate(.6deg); } }
@keyframes scenery-glow { to { filter: brightness(1.045) drop-shadow(0 0 10px rgba(209, 164, 75, .12)); } }

.scene-horizon {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: var(--story-horizon-y);
  bottom: 0;
  border-top: 3px solid rgb(var(--story-horizon-ink) / .58);
  background: rgb(var(--story-ground-wash) / .96);
  filter:
    saturate(var(--background-saturation, 1))
    brightness(var(--background-brightness, 1))
    contrast(var(--background-contrast, 1))
    hue-rotate(var(--background-hue, 0deg))
    blur(var(--background-blur, 0px))
    opacity(var(--background-opacity, 1));
  pointer-events: none;
}

.scene-horizon::before { content: none; }

.world-stage.has-generated-scenery .far-shape { opacity: .08; }
.world-stage.has-generated-scenery .place-object { opacity: 0; pointer-events: none; }
body[data-phase="cover"] .story-scenery { opacity: .74; }
body[data-phase="interview"] .story-scenery,
body[data-phase="assignment"] .story-scenery { opacity: .58; --story-phase-blur: .7px; }
body:not([data-phase="quest"]) .scene-prop.is-interactive { pointer-events: none; }

.place-object {
  right: 10vw;
  bottom: 21vh;
  width: 66px;
  height: 54px;
  border: 2px solid rgba(53, 63, 50, .34);
  border-radius: 52% 48% 44% 56%;
  background: rgba(238, 221, 177, .24);
  transform: rotate(2deg);
  transition: transform 640ms cubic-bezier(.16, 1, .3, 1), opacity 320ms ease;
  pointer-events: auto;
  cursor: pointer;
}
.place-object:focus-visible, .npc-wrap:focus-visible, .pet-stage:focus-visible, .guide-figure:focus-visible, .guide-speech:focus-visible {
  outline: 3px solid rgba(87, 112, 76, .38);
  outline-offset: 5px;
}
.place-object.is-tapped { animation: place-tap 520ms cubic-bezier(.16, 1, .3, 1); }
@keyframes place-tap { 45% { transform: rotate(-2deg) scale(1.045); filter: brightness(1.08); } }
.place-object::before, .place-object::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(53, 63, 50, .28);
}
.place-object::before { inset: 12px 18px 14px; border-radius: 55% 45% 52% 48%; transform: rotate(-12deg); }
.place-object::after { left: -9px; right: -8px; bottom: -8px; height: 12px; border-width: 2px 0 0; border-radius: 50%; transform: rotate(-4deg); }

body[data-place="meadow"] .world-stage { --story-horizon-ink: 66 91 57; --story-ground-wash: 193 207 164; background: #e7edcf; }
body[data-place="meadow"] .place-object {
  right: 8vw; bottom: 21vh; border-radius: 52% 48% 36% 44%;
  background: repeating-linear-gradient(75deg, rgba(77, 111, 66, .25) 0 2px, transparent 2px 9px); border-width: 0 0 2px;
}
body[data-place="market"] .world-stage { --story-horizon-ink: 105 79 59; --story-ground-wash: 204 190 159; background: #e9dfc6; }
body[data-place="market"] .place-object { background: rgba(139, 105, 75, .24); border-radius: 15px 12px 18px 13px; }
body[data-place="post"] .world-stage { --story-horizon-ink: 57 82 80; --story-ground-wash: 180 199 190; background: #d6e3df; }
body[data-place="post"] .place-object { border-radius: 32px 32px 13px 13px; background: rgba(225, 217, 183, .24); }
body[data-place="lighthouse"] .world-stage { --story-horizon-ink: 49 72 65; --story-ground-wash: 151 171 157; background: #bccbc5; }
body[data-place="lighthouse"] .place-object { border-radius: 32px 32px 12px 12px; background: rgba(236, 217, 170, .23); }
body[data-place="sea"] .world-stage { --story-horizon-ink: 52 92 92; --story-ground-wash: 164 194 186; background: #cee0dc; }
body[data-place="sea"] .ground-wash { background: rgba(84, 129, 128, .52); }
body[data-place="sea"] .place-object { right: 12vw; background: rgba(237, 199, 99, .28); box-shadow: 0 0 28px rgba(233, 189, 85, .25); }
body[data-place="moon"] .quest-panel .section-label,
body[data-place="moon"] .quest-panel h2,
body[data-place="moon"] .quest-panel .scene-heading > p {
  color: #f7f1e4;
  text-shadow: 0 1px 3px rgba(24, 28, 45, .5);
}

.pet-stage {
  position: absolute;
  left: clamp(20px, 7vw, 110px);
  bottom: clamp(96px, 13vh, 140px);
  width: clamp(150px, 15vw, 188px);
  height: clamp(190px, 22vh, 234px);
  z-index: 7;
  opacity: 0;
  --pet-shift-x: 0px;
  --pet-shift-y: 0px;
  transform: translate3d(var(--pet-shift-x), calc(var(--pet-shift-y) + 18px), 0) scale(.96);
  transition: opacity 440ms ease, transform 440ms cubic-bezier(.16, 1, .3, 1);
  cursor: pointer;
  will-change: transform;
}
.pet-stage.show { opacity: 1; transform: translate3d(var(--pet-shift-x), var(--pet-shift-y), 0); }
.pet-stage.is-walking { transition-duration: 245ms; transition-timing-function: linear; }
#pet-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(var(--character-shadow-x, 11px) var(--character-shadow-y, 15px) var(--character-shadow-blur, 9px) var(--character-shadow-color, rgba(42, 61, 48, .24)));
}
.pet-thought {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 88%;
  --bubble-rest-transform: translateX(-50%);
  --bubble-max-width: min(250px, 78vw);
  --bubble-min-height: 42px;
  --bubble-padding-block: 11px;
  --bubble-padding-inline: 15px;
  --bubble-font-size: 14px;
  --bubble-line-height: 1.4;
  display: block;
  cursor: pointer;
}

.npc-wrap {
  position: absolute;
  z-index: 8;
  right: clamp(28px, 10vw, 150px);
  bottom: clamp(96px, 13vh, 140px);
  width: 170px;
  text-align: center;
  cursor: pointer;
}
.npc-speech {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 38%;
  --bubble-max-width: min(320px, 76vw);
  --bubble-min-height: 48px;
  --bubble-padding-block: 11px;
  --bubble-padding-inline: 15px;
  --bubble-font-size: 16px;
  --bubble-line-height: 1.5;
  --bubble-tail-x: 50%;
  --bubble-rest-transform: translate(-50%, -100%);
  cursor: pointer;
  transition: left 220ms ease, top 220ms ease, width 560ms cubic-bezier(.22, 1, .36, 1);
}
.npc-speech[data-speaker="companion"] {
  --bubble-tail-x: 50%;
}
.npc-character {
  position: relative;
  z-index: 2;
  width: 160px;
  height: 200px;
  margin: 0 auto -2px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.npc-character canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(var(--character-shadow-x, 12px) var(--character-shadow-y, 15px) var(--character-shadow-blur, 9px) var(--character-shadow-color, rgba(42, 61, 48, .24)));
}
.npc-wrap[data-state="thinking"] .npc-character { animation: npc-think 760ms ease-in-out infinite alternate; }
.npc-wrap.is-listening .npc-character { opacity: .82; transform: scale(.96); }
.npc-wrap.is-tapped .npc-character { animation: npc-tap 420ms cubic-bezier(.22, 1.4, .35, 1); }
@keyframes npc-think { to { transform: translateY(-4px) rotate(2deg); } }
@keyframes npc-tap { 45% { transform: translateY(-9px) rotate(-4deg) scale(1.03); } }
.npc-wrap > b,
.npc-companion span,
.guide-nameplate b {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--story-font-sans);
  font-size: var(--character-name-size);
  font-weight: 750;
  line-height: 1.2;
}
.npc-wrap > b {
  position: relative;
  top: -18px;
  display: inline-block;
}
.npc-portal {
  display: none;
  position: absolute;
  z-index: 1;
  inset: -30px 3px 12px;
  border-radius: 50%;
  background: rgba(73, 101, 67, .16);
  filter: blur(4px);
}
.npc-companions {
  position: absolute;
  z-index: 7;
  left: 40%;
  bottom: clamp(96px, 13vh, 140px);
  display: flex;
  align-items: end;
  gap: clamp(18px, 4vw, 54px);
}
.npc-companion {
  width: 160px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
}
.npc-companion:hover, .npc-companion:focus-visible { transform: translateY(-5px); }
.npc-companion:active, .npc-companion.is-talking { transform: translateY(-9px) rotate(-2deg); }
.npc-companion canvas {
  display: block;
  width: 100%;
  height: 200px;
  filter: drop-shadow(var(--character-shadow-x, 10px) var(--character-shadow-y, 13px) var(--character-shadow-blur, 8px) var(--character-shadow-color, rgba(42, 61, 48, .22)));
}
.npc-companion span {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: -25px auto 0;
  white-space: nowrap;
}
.npc-wrap.is-entering,
.npc-companion.is-entering {
  animation: scene-character-enter 720ms cubic-bezier(.16, 1, .3, 1) both;
  pointer-events: none;
}
.npc-wrap[data-entry="left"], .npc-companion[data-entry="left"] { --entry-x: -42vw; --entry-y: 8px; --entry-turn: -7deg; }
.npc-wrap[data-entry="right"], .npc-companion[data-entry="right"] { --entry-x: 42vw; --entry-y: 8px; --entry-turn: 7deg; }
.npc-wrap[data-entry="door"], .npc-companion[data-entry="door"],
.npc-wrap[data-entry="house"], .npc-companion[data-entry="house"] { --entry-x: 105px; --entry-y: 16px; --entry-turn: 6deg; }
.npc-wrap[data-entry="bush"], .npc-companion[data-entry="bush"],
.npc-wrap[data-entry="water"], .npc-companion[data-entry="water"] { --entry-x: 0px; --entry-y: 128px; --entry-turn: -3deg; --entry-scale: .72; }
.npc-wrap[data-entry="bridge"], .npc-companion[data-entry="bridge"] { --entry-x: -150px; --entry-y: 36px; --entry-turn: -5deg; }
.npc-wrap[data-entry="seam"], .npc-companion[data-entry="seam"] { --entry-x: 54px; --entry-y: 72px; --entry-turn: 4deg; --entry-scale: .62; }
.npc-wrap[data-entry="cloud"], .npc-companion[data-entry="cloud"] { --entry-x: 70px; --entry-y: -132px; --entry-turn: 8deg; --entry-scale: .58; }
.npc-wrap[data-entry="crater"], .npc-companion[data-entry="crater"] { --entry-x: 0px; --entry-y: 110px; --entry-turn: -4deg; --entry-scale: .64; }
@keyframes scene-character-enter {
  from {
    opacity: 0;
    transform: translate(var(--entry-x, 80px), var(--entry-y, 20px)) rotate(var(--entry-turn, 4deg)) scale(var(--entry-scale, .78));
    filter: blur(2px);
  }
  68% { opacity: 1; transform: translate(0, -6px) rotate(-1deg) scale(1.025); filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
.pet-stage.is-entering #pet-canvas,
.guide-figure.is-entering #guide-canvas {
  animation: companion-arrival 760ms cubic-bezier(.16, 1, .3, 1) both;
}
.guide-figure[data-entry="parachute"] { --entry-x: -40px; --entry-y: -54vh; --entry-turn: -10deg; --entry-scale: .72; }
.pet-stage[data-entry="house"] { --entry-x: -110px; --entry-y: 28px; --entry-turn: -7deg; --entry-scale: .72; }
@keyframes companion-arrival {
  from {
    opacity: 0;
    transform: translate(var(--entry-x, -90px), var(--entry-y, 24px)) rotate(var(--entry-turn, -5deg)) scale(var(--entry-scale, .78));
    filter: blur(2px);
  }
  70% { opacity: 1; transform: translate(0, -7px) rotate(1deg) scale(1.025); filter: none; }
  to { opacity: 1; transform: none; filter: none; }
}

.story-invention {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: clamp(100px, 12vh, 132px);
  width: clamp(230px, 29vw, 360px);
  margin: 0;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.story-invention canvas {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(10px 16px 9px rgba(42, 54, 52, .2));
}
.story-invention figcaption {
  width: max-content;
  max-width: 100%;
  margin: -24px auto 0;
  padding: 5px 9px;
  background: rgba(247, 241, 228, .78);
  color: var(--moss-deep);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .03em;
}
.story-invention.is-revealed { animation: invention-drawn 720ms cubic-bezier(.16, 1, .3, 1) both; }
.story-invention[data-motion="pulse"] canvas { animation: invention-pulse 2.6s ease-in-out infinite alternate; }
.story-invention[data-motion="drift"] canvas { animation: invention-drift 4.2s ease-in-out infinite alternate; }
.story-invention[data-motion="lift"] canvas { animation: invention-lift 3.4s ease-in-out infinite alternate; }
@keyframes invention-drawn {
  from { opacity: 0; transform: translateX(-50%) scale(.72) rotate(-4deg); filter: blur(2px); }
  to { opacity: 1; transform: translateX(-50%) scale(1); filter: none; }
}
@keyframes invention-pulse { to { transform: scale(1.035); filter: drop-shadow(0 0 18px rgba(209, 164, 75, .3)); } }
@keyframes invention-drift { to { transform: translateY(-9px) rotate(1deg); } }
@keyframes invention-lift { to { transform: translateY(-7px); } }

.paper-panel {
  position: relative;
  z-index: 10;
  width: min(700px, calc(100% - 32px));
  margin-left: auto;
  margin-right: clamp(16px, 5vw, 72px);
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background:
    linear-gradient(115deg, rgba(255,255,255,.28), transparent 36%),
    rgba(247, 241, 228, .94);
  box-shadow: 0 28px 90px var(--shadow), inset 0 1px rgba(255,255,255,.62);
  backdrop-filter: blur(8px);
  animation: panel-in 420ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.cover-panel {
  width: min(740px, calc(100% - 32px));
  min-height: 0;
  margin-top: 95px;
  margin-bottom: 122px;
  display: block;
  overflow: hidden;
  padding: 0;
}
.cover-illustration {
  width: 100%;
  aspect-ratio: 3 / 2;
  display: block;
  object-fit: cover;
  border-bottom: 1px solid rgba(58, 65, 52, .16);
  background: #ede5d2;
}
.cover-text {
  padding: clamp(22px, 4vw, 36px) clamp(22px, 5vw, 42px) clamp(25px, 4vw, 38px);
}
.section-label {
  margin: 0 0 8px;
  color: var(--moss-deep);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
}
h1, h2, h3 { margin: 0; font-family: var(--story-font-sans); }
h1 { font-size: clamp(42px, 6.4vw, 72px); line-height: 1.08; }
h2 { font-size: clamp(27px, 4vw, 40px); line-height: 1.22; }
.cover-copy, .assignment-panel > p, .ritual-panel > p, .ending-copy {
  margin: 18px 0;
  color: #4d554a;
  font-size: 16px;
  line-height: 1.75;
}
.cover-text .cover-copy {
  margin: 12px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.68;
}
.cover-promises { margin: 18px 0 24px; padding-left: 1.25em; color: #4f584c; line-height: 1.9; }
.cover-mic-callout {
  width: max-content;
  max-width: 100%;
  margin: 18px 0 0;
  padding: 10px 13px;
  border-left: 3px solid var(--moss);
  background: rgba(219, 228, 202, .42);
  color: var(--moss-deep);
  font-weight: 760;
}
.privacy-note { margin: 13px 0 0; max-width: 56ch; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }

.primary-action, .send-button {
  min-height: 52px;
  border: 1px solid var(--moss-deep);
  border-radius: var(--button-radius);
  background: var(--moss-deep);
  color: #f8f1e2;
  padding: 0 22px;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(63, 86, 57, .18), inset 0 1px rgba(255,255,255,.16);
  transition: transform 120ms ease, background 180ms ease, opacity 180ms ease;
}
.primary-action:hover, .send-button:hover { background: #344a31; }
.primary-action:disabled, .send-button:disabled { cursor: not-allowed; opacity: .48; }

.assignment-panel, .ritual-panel, .quest-panel, .ending-panel {
  margin-top: clamp(90px, 13vh, 150px);
  margin-bottom: 90px;
}
.conversation-panel {
  position: relative;
  z-index: 10;
  width: min(860px, calc(100% - 28px));
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(92px, 12vh, 118px) 20px max(54px, env(safe-area-inset-bottom));
  pointer-events: none;
  animation: panel-in 420ms cubic-bezier(.16, 1, .3, 1) both;
}
.guide-speech, .guide-figure { pointer-events: auto; }
body[data-phase="interview"] .place-object { opacity: .22; filter: blur(2px); }
body[data-phase="interview"] .far-shape { opacity: .28; }
.guide-encounter {
  position: relative;
  width: 100%;
  min-height: 0;
  display: flow-root;
}
.guide-speech {
  position: fixed;
  z-index: 9;
  top: calc(64dvh - min(125px, 18dvh) - 82px);
  left: 50%;
  margin: 0;
  translate: -50% 0;
  --bubble-max-width: min(680px, calc(100vw - 28px));
  --bubble-min-height: 72px;
  --bubble-padding-block: 21px;
  --bubble-padding-inline: clamp(22px, 4vw, 38px);
  --bubble-font-size: clamp(25px, 3.5vw, 36px);
  --bubble-line-height: 1.22;
  cursor: pointer;
}
.guide-reaction {
  margin: 0 auto 9px;
  max-width: 54ch;
  color: var(--moss-deep);
  font: 700 17px/1.6 var(--story-font-sans);
}
.guide-speech[data-mode="reaction"] .guide-reaction { animation: reaction-in 320ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes reaction-in { from { opacity: 0; transform: translateY(5px); } }
.guide-speech h2 {
  margin: 0;
  font: inherit;
}
.question-hint {
  margin: 9px auto 0;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
.guide-figure {
  position: fixed;
  z-index: 8;
  top: calc(64dvh - min(125px, 18dvh));
  left: 50%;
  width: min(260px, 28vw);
  height: min(220px, calc(36dvh - 12px));
  margin: 0;
  translate: -50% 0;
  cursor: pointer;
}
#guide-canvas {
  width: 100%;
  height: calc(100% - 28px);
  display: block;
  filter: drop-shadow(var(--character-shadow-x, 13px) var(--character-shadow-y, 16px) var(--character-shadow-blur, 10px) var(--character-shadow-color, rgba(42, 61, 48, .24)));
}
.guide-nameplate {
  position: absolute;
  z-index: 4;
  top: calc(100% - 30px);
  left: 50%;
  width: min(310px, 82vw);
  text-align: center;
  transform: translateX(-50%);
}
.guide-nameplate b { display: block; }
.guide-nameplate span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.voice-listen-zone {
  position: relative;
  min-height: 118px;
  display: grid;
  justify-items: center;
  align-content: end;
}
.live-answer-bubble {
  position: relative;
  z-index: 6;
}

.voice-dock {
  position: fixed;
  z-index: 24;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(430px, calc(100% - 28px));
  min-height: 98px;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 8px;
  padding: 6px 12px 10px;
  border-radius: 24px 19px 27px 20px;
  background: transparent;
  transform: translateX(-50%);
  pointer-events: none;
}
.voice-dock > * { pointer-events: auto; }
body[data-phase="interview"] .voice-dock {
  left: 0;
  right: 0;
  width: auto;
  justify-items: center;
  padding-right: 12px;
  transform: none;
}
body[data-phase="interview"] .live-answer-bubble {
  position: fixed;
  width: max-content;
  top: clamp(98px, 15dvh, 108px);
  left: 50%;
  margin: 0;
  translate: -50% 0;
}
.voice-dock[data-voice-state="complete"] { opacity: .76; }
.heard-notes {
  position: fixed;
  z-index: 11;
  top: max(164px, var(--story-input-bottom, 0px));
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  width: min(620px, calc(100vw - 28px));
  max-width: 620px;
  margin: 0;
  translate: -50% 0;
}
.user-input-record {
  --bubble-max-width: min(320px, calc(100vw - 28px));
  --bubble-min-height: 34px;
  --bubble-padding-block: 6px;
  --bubble-padding-inline: 10px;
  --bubble-font-size: 12px;
  --bubble-line-height: 1.45;
  display: block;
}
.pet-reasons span {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(61, 78, 57, .22);
  border-radius: 11px 8px 12px 9px;
  background: rgba(221, 228, 202, .54);
  color: #465040;
  font-size: 12px;
}

.ritual-panel, .ending-panel { width: min(620px, calc(100% - 32px)); }
.pet-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.silent-note { padding: 12px 14px; border-left: 3px solid var(--sun); background: rgba(229, 215, 173, .2); }
.voice-seals { display: flex; justify-content: center; gap: 17px; margin: 24px 0 12px; }
.voice-seals span {
  width: 58px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(70, 76, 62, .28);
  border-radius: 50% 45% 52% 44%;
  background: rgba(226, 218, 198, .6);
  color: rgba(64, 71, 59, .42);
  font: 700 25px/1 var(--story-font-sans);
  transform: rotate(var(--seal-rotation, -3deg));
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.voice-seals span:nth-child(2) { --seal-rotation: 3deg; }
.voice-seals span:nth-child(3) { --seal-rotation: -1deg; }
.voice-seals span.active { color: #f8f1e2; background: var(--moss); box-shadow: 0 0 0 6px rgba(209, 164, 75, .14); transform: rotate(0) scale(1.08); }
.ritual-status { min-height: 22px; margin: 10px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }

.scene-heading { display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(190px, .9fr); gap: 20px; align-items: end; }
.scene-heading > p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.entrance-line { margin: 18px 0 12px; color: var(--moss-deep); line-height: 1.65; }
.npc-dialogue { padding: 15px 17px; border: 1px solid rgba(58, 65, 52, .18); border-radius: 19px 15px 22px 16px; background: rgba(255, 251, 241, .54); }
.npc-dialogue b { font-size: 13px; }
.npc-dialogue p { margin: 7px 0 0; font-size: 16px; line-height: 1.72; }
.choice-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(58, 65, 52, .16); }
.choice-result > p { margin: 0 0 12px; line-height: 1.7; }
.reward-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 13px;
  align-items: center;
  margin: 12px 0 16px;
  padding: 10px 13px;
  border: 1px solid rgba(58, 65, 52, .18);
  border-radius: 19px 14px 22px 16px;
  background: rgba(223, 229, 204, .46);
}
.reward-row img { width: 78px; height: 78px; object-fit: contain; }
.reward-row b, .reward-row span { display: block; }
.reward-row span { margin-top: 4px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.quest-panel {
  position: fixed;
  z-index: 9;
  top: 92px;
  left: clamp(14px, 3vw, 44px);
  width: min(390px, calc(100% - 28px));
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}
.quest-panel .scene-heading { display: block; }
.quest-panel .scene-heading h2 { font-size: 27px; }
.quest-panel .scene-heading > p { margin-top: 4px; }
.quest-panel .choice-result {
  margin-top: 9px;
  padding-top: 9px;
  font-size: 12px;
}
.quest-panel .choice-result > p { margin-bottom: 7px; }
.backpack-button {
  position: fixed;
  z-index: 22;
  right: max(16px, env(safe-area-inset-right));
  top: max(88px, calc(env(safe-area-inset-top) + 76px));
  bottom: auto;
  width: 158px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto 30px;
  align-items: center;
  column-gap: 7px;
  border: 1px solid rgba(63, 80, 57, .45);
  border-radius: 16px 13px 18px 14px;
  background: rgba(247, 241, 228, .93);
  box-shadow: 0 10px 28px rgba(54, 47, 38, .14);
  padding: 8px 10px;
  cursor: pointer;
}
.backpack-button.got-item { animation: backpack-hop 620ms cubic-bezier(.22, 1.5, .35, 1); }
@keyframes backpack-hop { 40% { transform: translateY(-15px) rotate(3deg); } }
.backpack-mark {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}
.backpack-sticker {
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(49, 59, 44, .16));
}
.backpack-label { align-self: end; color: var(--moss-deep); font-size: 10px; font-weight: 780; text-align: left; }
.backpack-quick-items { display: flex; align-items: center; gap: 4px; min-width: 0; }
.backpack-quick-items img,
.backpack-quick-items .inventory-mark,
.backpack-empty-slot {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 0;
  border-radius: 0;
  background: rgba(226, 218, 198, .42);
  object-fit: contain;
}
.backpack-quick-items img.used,
.backpack-quick-items .inventory-mark.used { opacity: .42; filter: saturate(.45); }

.inventory-mark {
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--item-color) 62%, #3b4038);
  border-radius: 50% 44% 52% 46%;
  background: color-mix(in srgb, var(--item-color) 18%, var(--paper-light));
  color: color-mix(in srgb, var(--item-color) 72%, #293028);
  font-weight: 850;
  line-height: 1;
  transform: rotate(-3deg);
}
.inventory-item > .inventory-mark {
  width: 82px;
  height: 82px;
  font-size: 31px;
}
.reward-row > .inventory-mark {
  width: 72px;
  height: 72px;
  font-size: 27px;
}

.backpack-dialog {
  width: min(680px, calc(100% - 28px));
  max-height: min(720px, calc(100dvh - 40px));
  border: 1px solid var(--line);
  border-radius: 28px 20px 32px 23px;
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: 0 32px 120px rgba(32, 35, 29, .34);
  padding: 24px;
}
.backpack-dialog::backdrop { background: rgba(41, 48, 40, .38); backdrop-filter: blur(5px); }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 18px; }
.inventory-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: auto; }
.inventory-item {
  min-height: 150px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(58, 65, 52, .18);
  border-radius: 20px 15px 23px 17px;
  background: rgba(238, 231, 215, .72);
  padding: 11px;
}
.inventory-item.used { opacity: .6; }
.inventory-item img { width: 90px; height: 90px; object-fit: contain; }
.inventory-item b, .inventory-item span { display: block; }
.inventory-item span { margin: 4px 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.inventory-item p { margin: 7px 0 0; font-size: 11px; line-height: 1.5; }
.empty-inventory { padding: 32px 18px; text-align: center; color: var(--ink-soft); }

.ending-panel blockquote {
  margin: 20px 0;
  padding: 16px 18px;
  border-left: 3px solid var(--sun);
  background: rgba(226, 214, 171, .2);
  font-family: var(--story-font-sans);
  font-size: 19px;
  line-height: 1.7;
}
.ending-memory { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.ending-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.ink-transition {
  display: none;
}

.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 78px));
  max-width: min(420px, calc(100% - 32px));
  padding: 11px 15px;
  border: 1px solid rgba(58, 65, 52, .28);
  border-radius: 14px 11px 16px 12px;
  background: rgba(247, 241, 228, .96);
  box-shadow: 0 16px 38px var(--shadow);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  font-size: 13px;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Only quest scenes borrow their existing actors into the shared planet.
   Interview, creation and ending portraits keep their original canvases. */
.ink-planet-stage {
  position: absolute; z-index: 1; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse at 56% 30%, var(--planet-glow, #f5edda) 0%, transparent 64%),
    linear-gradient(180deg, var(--planet-base, #eae5d5), var(--planet-horizon, #d7dfca));
}
.ink-planet-stage > canvas { display: block; width: 100%; height: 100%; }
.ink-planet-controls {
  position: absolute; z-index: 17;
  left: max(14px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-soft); pointer-events: none;
}
.ink-planet-controls button {
  min-width: 44px; min-height: 44px; padding: 0 9px;
  border: 1px solid rgba(58, 65, 52, .2); border-radius: 50%;
  background: rgba(247, 241, 228, .83); color: var(--ink); font-size: 12px;
  cursor: pointer; pointer-events: auto;
}
.ink-planet-controls span { font-size: 10px; line-height: 1.6; }
.has-ink-planet .story-scene-backdrop { visibility: hidden; }
body[data-phase="quest"] .has-ink-planet :is(.npc-wrap, .pet-stage, .npc-companion) {
  position: absolute; right: auto; bottom: auto; margin: 0;
  opacity: 1; transform: none; animation: none; transition: none;
  pointer-events: none; will-change: auto;
}
body[data-phase="quest"] .has-ink-planet :is(.npc-wrap, .pet-stage, .npc-companion):focus-visible {
  outline: 2px solid rgba(63, 80, 57, .48); outline-offset: 5px; border-radius: 20px;
}
body[data-phase="quest"] .has-ink-planet :is(#pet-canvas, .npc-character, .npc-companion canvas) { display: none; }
body[data-phase="quest"] .has-ink-planet .npc-companions {
  inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
}
body[data-phase="quest"] .has-ink-planet :is(.npc-wrap > b, .npc-companion > span) {
  position: absolute; top: calc(100% + 7px); left: 50%; margin: 0;
  width: max-content; max-width: 160px; transform: translateX(-50%);
  padding: 3px 7px; border-radius: 12px; background: rgba(247, 241, 228, .7);
  font-size: 11px; line-height: 1.3; white-space: normal; text-align: center;
  color: #344131;
}
body[data-phase="quest"] .has-ink-planet .pet-thought {
  bottom: auto; --bubble-rest-transform: translate(-50%, -100%); pointer-events: auto;
}
body[data-phase="quest"] .has-ink-planet .npc-speech { transition: width 250ms ease; }
body[data-phase="quest"][data-planet-period="night"] .story-header {
  background: none;
}
body[data-phase="quest"][data-planet-period="night"] :is(.quest-panel, .chapter-progress span.active) { color: var(--planet-ink, #f2eadb); }
body[data-phase="quest"][data-planet-period="night"] :is(.quest-panel .section-label, .quest-panel .scene-heading > p, .chapter-progress span) { color: var(--planet-muted, #d3ccda); }
body[data-phase="quest"][data-planet-period] .quest-panel h2 {
  color: var(--planet-ink, var(--ink)); text-shadow: none;
}
body[data-phase="quest"][data-planet-period] .quest-panel :is(.section-label, .scene-heading > p) {
  color: var(--planet-muted, var(--ink-soft)); text-shadow: none;
}
html[data-planet-preview="local-only"] body[data-phase="quest"] .voice-dock { display: none; }

@media (max-width: 860px) {
  .story-header { grid-template-columns: 1fr; min-height: 66px; }
  .chapter-progress { position: fixed; left: 12px; right: 12px; top: 66px; width: auto; }
  .chapter-progress span { min-height: 29px; padding: 6px 3px; font-size: 10px; }
  .paper-panel { margin-left: auto; margin-right: auto; }
  .cover-panel { margin-top: 82px; min-height: 0; }
  .ritual-panel, .ending-panel { margin-top: 112px; margin-bottom: 120px; }
  .quest-panel { top: 103px; left: 12px; width: min(360px, calc(100% - 24px)); margin: 0; }
  .conversation-panel { width: min(760px, calc(100% - 20px)); padding-top: 106px; }
  .pet-stage { left: 3vw; bottom: 12vh; width: 156px; height: 198px; opacity: .96; }
  body[data-phase="interview"] .pet-stage, body[data-phase="cover"] .pet-stage { opacity: 0; }
  .npc-wrap { right: 4vw; bottom: 12vh; transform: none; }
  .npc-companions { left: 38%; bottom: 12vh; gap: 20px; }
  .npc-companion { width: 148px; }
  .npc-companion canvas { height: 185px; }
  .guide-mic { grid-column: 1 / -1; }
  .inventory-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .world-stage { --story-horizon-y: 65%; }
  .scene-prop {
    left: var(--prop-mobile-x, var(--prop-x));
    width: var(--prop-mobile-width, var(--prop-width));
  }
  .scene-prop[data-position="ground"] { bottom: var(--prop-mobile-bottom, var(--prop-bottom)); }
  .scene-prop[data-position="sky"] { top: var(--prop-mobile-top, var(--prop-top)); }
  .story-header { padding-left: 12px; padding-right: 12px; }
  .cover-panel { display: block; padding: 0; margin-bottom: 112px; }
  .cover-text { padding: 20px 20px 24px; }
  .cover-mark { width: 68px; height: 68px; margin-bottom: 16px; font-size: 38px; }
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  .paper-panel { width: calc(100% - 20px); padding: 21px 18px; border-radius: 23px 18px 26px 19px; }
  .cover-panel { padding: 0; }
  .cover-copy, .assignment-panel > p, .ritual-panel > p, .ending-copy { font-size: 14px; }
  .conversation-panel { width: 100%; padding: 100px 10px max(40px, env(safe-area-inset-bottom)); }
  .guide-encounter { min-height: 0; }
  .guide-speech { --bubble-max-width: calc(100vw - 32px); --bubble-min-height: 58px; --bubble-padding-block: 16px; --bubble-padding-inline: 16px; --bubble-font-size: 20px; }
  .guide-figure {
    top: calc(65dvh - min(145px, 20dvh));
    left: 50%;
    width: min(220px, 55vw);
    height: min(246px, calc(35dvh - 12px));
  }
  .guide-speech {
    top: calc(65dvh - min(145px, 20dvh) - 76px);
    left: 50%;
  }
  #guide-canvas { height: calc(100% - 28px); }
  .guide-nameplate { top: calc(100% - 30px); }
  .heard-notes { top: max(160px, var(--story-input-bottom, 0px)); width: calc(100% - 20px); max-width: calc(100% - 20px); }
  .voice-dock { width: calc(100% - 18px); bottom: max(7px, env(safe-area-inset-bottom)); padding-bottom: 7px; }
  body[data-phase="interview"] .voice-dock { right: 0; width: auto; padding-right: 12px; }
  body[data-phase="interview"] .live-answer-bubble {
    top: 102px;
  }
  .quest-panel { top: 102px; left: 10px; width: min(300px, calc(100% - 20px)); padding: 12px 14px; }
  .quest-panel .scene-heading h2 { font-size: 23px; }
  .quest-panel .scene-heading > p { display: none; }
  .pet-stage { left: 2px; bottom: 12vh; width: 122px; height: 156px; opacity: .98; }
  .pet-thought { left: 50%; bottom: 90%; --bubble-max-width: min(220px, 72vw); }
  .npc-wrap { right: 2px; bottom: 12vh; width: 132px; transform: none; }
  .npc-character { width: 124px; height: 156px; }
  .npc-companions { left: 32%; bottom: 12vh; gap: 6px; }
  .npc-companion { width: 116px; }
  .npc-companion canvas { height: 146px; }
  .npc-companion span { max-width: 116px; overflow: visible; text-overflow: clip; }
  .npc-speech { right: auto; --bubble-max-width: min(260px, 82vw); --bubble-font-size: 15px; }
  .story-invention { bottom: 13vh; width: min(210px, 54vw); }
  .backpack-button {
    right: 8px;
    top: max(101px, calc(env(safe-area-inset-top) + 88px));
    bottom: auto;
    width: 62px;
    min-height: 62px;
    height: 62px;
    grid-template: 1fr / 1fr;
    padding: 6px;
  }
  .backpack-mark {
    grid-row: auto;
    width: 44px;
    height: 44px;
    margin: auto;
  }
  .backpack-label,
  .backpack-quick-items { display: none; }
  .reward-row { grid-template-columns: 68px 1fr; }
  .reward-row img { width: 64px; height: 64px; }
  .inventory-item { grid-template-columns: 74px 1fr; }
  .inventory-item img { width: 72px; height: 72px; }
}

/* All interactive controls use the application-wide, fixed corner radius. */
button { border-radius: var(--app-control-radius) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@supports not (backdrop-filter: blur(8px)) {
  .paper-panel, .backpack-dialog { background: var(--paper-light); }
}