/* 몽실이 — shared styles for card.html and index.html.
   Palette matches the character art (warm cream/gold, dark-brown ink
   outline) so the UI feels like part of the same illustrated world. */

:root {
  --ink: #3a2f22;
  --ink-soft: #6b5a42;
  --cream-50: #fffdf7;
  --cream-100: #fff8ec;
  --cream-200: #ffedc7;
  --gold-400: #f3c15f;
  --gold-500: #e8a33d;
  --shadow: 0 10px 30px rgba(120, 90, 40, 0.14);
  --radius-lg: 28px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard", "Malgun Gothic", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 50% -10%, var(--cream-200), var(--cream-100) 55%, #ffe6ae 130%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 48px;
}

/* #app (<main id="app">) is itself a flex child of body, and body only
   centers items rather than stretching them (align-items:center) — so
   without its OWN width, #app would shrink-to-fit its content instead
   of taking a definite width. That indefinite width then leaks into
   every percentage-width child (.mongsil-card, .mongsil-grid, etc.),
   which is harmless for plain boxes (they just fall back to their own
   content size, which happens to look fine) but breaks CSS Grid's
   repeat(auto-fill, ...) badly: under an indefinite available width it
   resolves against an oversized fallback and computes far too many
   columns, shoving items off-screen. Making #app a definite-width flex
   column (mirroring body's own setup one level down) fixes this for
   every child uniformly. Confirmed via Playwright before this rule
   existed: .mongsil-grid computed 5 columns / 706px and its first item
   sat at x:-158 (off-canvas) on a 390px-wide viewport.
   See also the note on .mongsil-grid below. */
#app {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mongsil-loading, .mongsil-error {
  margin-top: 40vh;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ---------- card panel ---------- */

.mongsil-card {
  width: 100%;
  max-width: 380px;
  background: var(--cream-50);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid rgba(232, 163, 61, 0.35);
  padding: 28px 24px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: mongsil-card-in 420ms ease-out;
}

/* Thin inset line to read as a trading-card frame rather than a plain
   status panel (added 2026-08-29, plan doc §10 "포켓몬 카드처럼" redesign). */
.mongsil-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(232, 163, 61, 0.25);
  border-radius: 20px;
  pointer-events: none;
}

.mongsil-stage-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 4px;
  padding: 6px 9px;
  background: rgba(255, 253, 247, 0.9);
  border: 1px solid rgba(232, 163, 61, 0.4);
  border-radius: 999px;
  z-index: 1;
}

.mongsil-stage-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cream-200);
  border: 1px solid var(--gold-500);
}

.mongsil-stage-badge span.is-filled {
  background: var(--gold-500);
}

.mongsil-blurb {
  margin: 8px auto 0;
  max-width: 280px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Way back to the collection list (added 2026-08-29): without this the
   card page was a dead end -- someone who had scanned two cards had no
   in-app way to discover that both were being tracked. */
.mongsil-collection-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-500);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(232, 163, 61, 0.45);
}

/* The door into the dark side-scroller demo — deliberately the one dark
 * element on this warm page, previewing the demo's own night palette so
 * tapping it doesn't feel like a jarring theme change. */
.mongsil-demo-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 14px;
  text-align: left;
  text-decoration: none;
  background: linear-gradient(160deg, #141c38, #070b1a);
  border: 1px solid rgba(243, 193, 95, 0.35);
  box-shadow: 0 4px 14px rgba(10, 14, 30, 0.25);
}
.mongsil-demo-link-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #9a94a8;
}
.mongsil-demo-link-title {
  font-size: 18px;
  font-weight: 700;
  color: #f3c15f;
}
.mongsil-demo-link-sub {
  font-size: 12px;
  color: #cfc8d8;
  word-break: keep-all;
}
.mongsil-demo-link:active {
  border-color: rgba(243, 193, 95, 0.7);
}

.mongsil-collection-link:active {
  transform: scale(0.97);
}

@keyframes mongsil-card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mongsil-species {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold-500);
  font-weight: 700;
}

.mongsil-stage-media {
  position: relative;
  width: 78%;
  max-width: 260px;
  margin: 6px auto 10px;
}

.mongsil-char-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(160, 120, 50, 0.22));
  animation: mongsil-breathe 3.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes mongsil-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.028); }
}

/* ---------- tap-to-pet (added 2026-08-29, plan doc §10) ---------- */

.mongsil-stage-media.is-pettable {
  cursor: pointer;
}

@keyframes mongsil-pet-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.94, 1.08); }
  60%  { transform: scale(1.07, 0.93); }
  100% { transform: scale(1); }
}

.mongsil-char-img.is-petted {
  animation: mongsil-breathe 3.6s ease-in-out infinite, mongsil-pet-bounce 480ms ease-in-out;
}

.mongsil-heart-burst-slot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mongsil-heart-burst-slot span {
  position: absolute;
  font-size: 22px;
  opacity: 0;
  animation: mongsil-heart-pop 900ms ease-out forwards;
}

@keyframes mongsil-heart-pop {
  0%   { opacity: 0; transform: translateY(0) scale(0.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50px) scale(1.15); }
}

.mongsil-pet-hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.85;
}

.mongsil-affection {
  font-size: 14px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
}

.mongsil-affection span {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- feed / water care counters (added 2026-08-29, plan doc §10) ----------
   Same "option 1" positive-only-counter philosophy as affection above,
   just two named kinds instead of one — see card.js setupCareButtons. */

.mongsil-care-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.mongsil-care-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: var(--cream-200);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(160, 120, 50, 0.16);
  cursor: grab;
  touch-action: none; /* dragging this must never also scroll the page */
  transition: transform 120ms ease, opacity 120ms ease;
}

.mongsil-care-btn:active {
  transform: scale(0.94);
}

/* The button itself while its icon is out being dragged -- "lifted off",
   not the old tap-in-place pop (feeding is a drag now, see
   setupCareButtons). */
.mongsil-care-btn.is-dragging {
  opacity: 0.45;
  transform: scale(0.92);
}

.mongsil-care-hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--ink-soft);
  text-align: center;
}

/* The dragged emoji itself -- position:fixed and pointer-events:none so it
   floats freely above everything and never steals the drop target's hit
   test. Same emoji already on the button; no new art. */
.mongsil-care-drag {
  position: fixed;
  z-index: 300;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(1);
  font-size: 32px;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  transition: transform 100ms ease;
}

.mongsil-care-drag.is-over-target {
  transform: translate(-50%, -50%) scale(1.35);
}

.mongsil-stage-label {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 800;
}

.mongsil-day-counter {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.mongsil-day-counter strong {
  color: var(--gold-500);
  font-size: 16px;
}

/* ---------- hatching intro ---------- */

.mongsil-egg-wrap {
  padding: 12px 0 4px;
}

.mongsil-egg-img {
  width: 62%;
  max-width: 200px;
  animation: mongsil-egg-pulse 1.6s ease-in-out infinite;
}

@keyframes mongsil-egg-pulse {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.035) translateY(-3px); }
}

.mongsil-hatch-caption {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.mongsil-card.is-hatching-out .mongsil-egg-wrap {
  animation: mongsil-fade-out 320ms ease-in forwards;
}

@keyframes mongsil-fade-out {
  to { opacity: 0; transform: scale(0.92); }
}

/* ---------- banners (birth greeting / growth celebration) ---------- */

.mongsil-banner {
  margin: 14px auto 0;
  max-width: 300px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  background: var(--gold-400);
  color: #4a3410;
  box-shadow: 0 6px 16px rgba(232, 163, 61, 0.35);
  animation: mongsil-banner-in 380ms ease-out;
}

.mongsil-banner.is-leaving {
  animation: mongsil-fade-out 320ms ease-in forwards;
}

@keyframes mongsil-banner-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mongsil-sparkle-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mongsil-sparkle-burst span {
  position: absolute;
  font-size: 20px;
  opacity: 0;
  animation: mongsil-sparkle 900ms ease-out forwards;
}

@keyframes mongsil-sparkle {
  0%   { opacity: 0; transform: translateY(0) scale(0.4) rotate(0deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.1) rotate(45deg); }
}

/* ---------- collection page (index.html) ---------- */

.mongsil-header {
  width: 100%;
  max-width: 720px;
  text-align: center;
  margin-bottom: 22px;
}

.mongsil-header h1 {
  font-size: 22px;
  margin: 0 0 6px;
}

.mongsil-header p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.mongsil-grid {
  /* `width: 100%` here is load-bearing, not decorative: .mongsil-grid
     sits in a flex column body with align-items:center, so without an
     explicit width a grid container sizes shrink-to-fit — and
     repeat(auto-fill, ...) under shrink-to-fit sizing resolves against
     an oversized fallback available-width, computing far more columns
     than actually fit and pushing items off-screen. Confirmed via
     Playwright: this exact bug shipped gumiho's card at x:-158
     (off-canvas) until this line was added. */
  width: 100%;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.mongsil-grid-item {
  background: var(--cream-50);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 14px 10px 12px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform 150ms ease;
}

.mongsil-grid-item:active {
  transform: scale(0.97);
}

.mongsil-grid-item img {
  width: 70%;
  max-width: 100px;
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 6px 10px rgba(160, 120, 50, 0.18));
}

.mongsil-grid-item .name {
  font-size: 13px;
  font-weight: 700;
}

.mongsil-grid-item .days {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.mongsil-empty-state {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 20px;
  max-width: 320px;
  line-height: 1.6;
}

.mongsil-scan-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--gold-500);
  text-decoration: underline;
}

@media (max-width: 360px) {
  .mongsil-card { padding: 22px 16px 26px; }
}

/* ---------- speech bubble + collection progress (2026-08-29, plan doc §10)
   Both came out of the 2026-08 research: dialogue variety was the highest
   return improvement available without new artwork, and a visible species
   progress indicator was the single cheapest driver of collecting. ------ */

.mongsil-speech {
  position: relative;
  margin: 10px auto 4px;
  max-width: 290px;
  padding: 11px 15px;
  background: var(--cream-100);
  border: 1px solid rgba(232, 163, 61, 0.45);
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  min-height: 20px;
}

/* little tail pointing up at the character */
.mongsil-speech::before,
.mongsil-speech::after {
  content: '';
  position: absolute;
  left: 50%;
  border: 8px solid transparent;
}
.mongsil-speech::before {
  top: -17px;
  margin-left: -8px;
  border-bottom-color: rgba(232, 163, 61, 0.45);
}
.mongsil-speech::after {
  top: -15px;
  margin-left: -8px;
  border-bottom-color: var(--cream-100);
}

.mongsil-speech.is-saying {
  animation: mongsil-speech-pop 320ms ease-out;
}

@keyframes mongsil-speech-pop {
  0%   { transform: scale(0.94); opacity: 0.4; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.mongsil-progress {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 16px 18px 14px;
  background: var(--cream-50);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  text-align: center;
}

.mongsil-progress-label {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.mongsil-progress-label strong {
  color: var(--gold-500);
  font-size: 17px;
}

.mongsil-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--cream-200);
  overflow: hidden;
}

.mongsil-progress-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
  transition: width 600ms ease-out;
}

.mongsil-slots {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}

.mongsil-slot {
  width: 68px;
}

.mongsil-slot img {
  width: 100%;
  height: auto;
  display: block;
}

/* An unmet species is teased by shape. This needs a real silhouette file
   with a transparent background, NOT a CSS filter: the character art sits
   on an opaque white ground, so brightness(0) turned the whole rectangle
   black and rendered as a grey box (caught in a screenshot review). The
   silhouettes are generated from the baby art and are ~2KB each. */
.mongsil-slot:not(.is-owned) img {
  opacity: 0.22;
}

.mongsil-slot span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

.mongsil-slot:not(.is-owned) span {
  color: #b9a98c;
}

/* ---------- raising week (raising.js) ----------
   Deliberately plain for now: this pass is about whether the loop works,
   not how it looks. Visual design comes after the mechanic is proven. */

.mongsil-raising {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed #e6d6b4;
}

.mongsil-progress-line {
  margin: 0 0 10px;
  font-size: 12px;
  text-align: center;
  color: var(--ink-soft);
}
.mongsil-progress-line b {
  color: var(--gold-500);
  font-size: 14px;
}

.mongsil-week {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 14px;
  color: #cbbc9c;
}
.mongsil-week .is-done { color: var(--gold-500); }
/* The meeting is always already yours — that is the point of it. */
.mongsil-week .is-met { color: var(--gold-500); }
.mongsil-week .is-today { color: var(--ink); }
.mongsil-week .is-missed { color: #ded2b8; }

/* The week's plot, read before the day's activity choice -- a narration
   band, visually distinct from the game-UI prompt below it (see
   raising.js's WEEK_STORY, 2026-08-31). */
.mongsil-week-story {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--gold-400);
  background: var(--cream-100);
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  font-style: italic;
  line-height: 1.7;
  color: var(--ink-soft);
  text-align: left;
}

.mongsil-act-prompt {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.mongsil-act-prompt.is-done { color: var(--gold-500); }

.mongsil-act-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mongsil-act-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  border: 2px solid var(--gold-400);
  border-radius: 20px;
  background: var(--cream-50);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}
.mongsil-act-btn-label { font-size: 13.5px; font-weight: 700; }
.mongsil-act-btn-hint { font-size: 11px; font-weight: 500; opacity: .7; }
.mongsil-act-btn:active { transform: scale(0.97); }
.mongsil-act-btn.is-chosen {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: #fff;
}
.mongsil-act-btn:disabled { cursor: default; opacity: .55; }
.mongsil-act-btn.is-chosen:disabled { opacity: 1; }

.mongsil-act-scene {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.75;
  text-align: left;
  color: var(--ink);
}

/* Full-screen while a run is active (2026-08-31) -- the game used to sit
   embedded at a fixed 280x260 inside the character stage, which read as
   too small to actually play on a phone. It now takes over the whole
   screen instead, like a real mini-game moment, sized up to the device
   in card.js (see `scale`) rather than living inside the small stage. */
.mongsil-run-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--ink);
  padding: 16px;
}

.mongsil-run-overlay-hint {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--cream-50);
  text-align: center;
}

.mongsil-run-canvas {
  display: block;
  border-radius: var(--radius-md);
  background: var(--cream-100);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  touch-action: none; /* a tap-to-jump must never also scroll the page */
  cursor: pointer;
}

/* A separate, clearly-labeled button rather than an invisible tap-zone on
   the canvas -- ducking needs to be discoverable, not something a player
   stumbles into (see the file-level note on activity hints elsewhere). */
.mongsil-run-duck-btn {
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--cream-50);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  touch-action: none;
  cursor: pointer;
}
.mongsil-run-duck-btn:active {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: #fff;
  transform: scale(0.96);
}

/* Overlaid on .mongsil-stage-media (already position:relative) while the
   petting minigame runs, on top of the character and its heart-burst
   layer -- the same stacking context, just one layer higher. */
.mongsil-pet-session {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
  touch-action: none; /* stroking the character must not scroll the page */
  cursor: pointer;
}

.mongsil-pet-instruction {
  margin: 0 0 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.88);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}

.mongsil-pet-meter {
  margin: 0;
  min-height: 18px;
  font-size: 15px;
  letter-spacing: 1px;
}

.mongsil-act-redo {
  display: block;
  margin: 10px auto 0;
  padding: 6px 4px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}

.mongsil-act-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  text-align: center;
  color: var(--ink-soft);
}

.mongsil-ending {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--cream-100);
  text-align: left;
}
.mongsil-ending-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--gold-500);
  text-align: center;
}
.mongsil-ending-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}
.mongsil-ending-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
}
.mongsil-ending-week {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--cream-200);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.mongsil-ending-stats {
  margin: 12px 0 0;
  font-size: 11.5px;
  text-align: center;
  color: var(--ink-soft);
}

.mongsil-share-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.mongsil-share-btn:disabled { opacity: .7; cursor: default; }

/* ---------- story panel (story.js) ---------- */

.mongsil-story {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #e6d6b4;
  text-align: left;
}

.mongsil-story-title {
  margin: 0 0 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--gold-500);
}

.mongsil-story-piece {
  margin-bottom: 14px;
}

.mongsil-story-stage {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold-500);
}

.mongsil-story-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink);
}

/* A locked piece is deliberately still visible: the point is to show that
   something is waiting, not to hide it. Muted enough to read as "not yet"
   at a glance, without the text becoming unreadable. */
.mongsil-story-piece.is-locked .mongsil-story-stage,
.mongsil-story-piece.is-locked .mongsil-story-body {
  color: #b9a98c;
}

.mongsil-story-piece.is-locked .mongsil-story-body {
  font-size: 12.5px;
}

/* The callback to the first choice, and the line teasing another species:
   both are asides to the main paragraph, so they sit indented and quieter
   rather than reading as more plot. */
.mongsil-story-echo,
.mongsil-story-hint {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--cream-200);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.mongsil-story-hint {
  font-style: italic;
}

.mongsil-choice {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--cream-100);
  text-align: center;
}

.mongsil-choice-prompt {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.mongsil-choice-context {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ink-soft);
}

.mongsil-choice-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mongsil-choice-btn {
  padding: 12px 14px;
  border: 2px solid var(--gold-400);
  border-radius: 999px;
  background: var(--cream-50);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease-out, background 160ms ease-out;
}

.mongsil-choice-btn:active {
  transform: scale(0.97);
}

.mongsil-choice-btn.is-chosen {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: #fff;
}

.mongsil-choice-btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.mongsil-choice-btn.is-chosen:disabled {
  opacity: 1;
}

/* Said plainly and up front, because the choice really is permanent (the
   Firestore rules enforce it). Surprising a child with irreversibility
   after the fact would be the unkind version of this feature. */
.mongsil-choice-warning {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* ---------- "홈 화면에 추가" nudge (install-prompt.js) ---------- */

/* Pinned to the bottom rather than inserted into the page flow: it must
   not push the character down or reflow the card the moment it appears,
   several seconds after the user has already settled on the page.
   env(safe-area-inset-bottom) keeps it clear of the iPhone home bar. */
/* Room for the fixed banner so it never sits on top of the last thing on
   the page (the collection link on a card, the grid's final row on the
   collection screen). Set by install-prompt.js only while the banner is
   actually up, so a dismissed banner leaves no dead space behind. */
body.has-install-banner {
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

.mongsil-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--cream-50);
  border: 2px solid var(--gold-400);
  box-shadow: var(--shadow);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease-out;
}

.mongsil-install-banner.is-in {
  transform: translateY(0);
  opacity: 1;
}

.mongsil-install-banner.is-leaving {
  transform: translateY(140%);
  opacity: 0;
}

.mongsil-install-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
}

.mongsil-install-copy {
  margin: 0;
  flex: 1;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}

.mongsil-install-go {
  flex: none;
  padding: 9px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.mongsil-install-later {
  flex: none;
  padding: 6px 2px;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.mongsil-install-guide {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(58, 47, 34, 0.42);
}

.mongsil-install-sheet {
  width: 100%;
  max-width: 420px;
  padding: 22px 20px 18px;
  border-radius: var(--radius-lg);
  background: var(--cream-50);
  box-shadow: var(--shadow);
}

.mongsil-install-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  color: var(--ink);
}

.mongsil-install-steps {
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.mongsil-install-steps strong {
  color: var(--ink);
}

/* Sized in em so it tracks the step text it sits inside, and nudged down
   a hair to sit on the text's optical baseline rather than its box. */
.mongsil-share-glyph {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  color: #2f7bf6; /* iOS system blue, so it reads as "that blue button" */
}

.mongsil-install-close {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

/* The permanent opt-in on the collection page, for anyone who dismissed
   the banner (or never qualified for it) and later wants it anyway. */
.mongsil-install-link {
  margin-top: 18px;
  padding: 8px 4px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}