/* ───────────────────────────────────────────────────────────
   蜗牛叔叔 · 定制绘本  —  羊毛毡童趣感
   ─────────────────────────────────────────────────────────── */

:root{
  /* Palette */
  --paper:#faf1dc;
  --paper-2:#f3e6c8;
  --paper-3:#ece0bf;
  --cream:#fffaed;
  --terra:#d97757;
  --terra-dk:#b85a3c;
  --terra-lt:#f0b599;
  --sage:#a8c5a3;
  --sage-dk:#789976;
  --sky:#b4cfdc;
  --mustard:#e8b04a;
  --ink:#3a2d20;
  --ink-soft:#7a6755;
  --ink-mute:#a89880;
  --ok:#5e8a5a;
  --line:#e2cfa6;

  /* Type */
  --serif:"Noto Serif SC","Songti SC",serif;
  --hand:"Caveat","Patrick Hand",cursive;
  --sans:"Noto Sans SC","PingFang SC",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* Felt shadow */
  --felt-shadow: 0 1px 0 rgba(255,253,238,.7) inset, 0 -2px 0 rgba(58,45,32,.05) inset, 0 6px 14px -6px rgba(120,80,40,.25);
  --felt-shadow-lg: 0 1px 0 rgba(255,253,238,.7) inset, 0 -3px 0 rgba(58,45,32,.06) inset, 0 18px 32px -12px rgba(120,80,40,.35);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:#e8dfc8;
  color:var(--ink);
  line-height:1.55;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}

.app-shell{
  width:min(100vw,430px);
  height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 0 0 1px rgba(58,45,32,.08);
}

@media (max-width: 520px){
  .app-shell{
    width:100vw;
    box-shadow:none;
  }
}

/* Wool-felt paper background — subtle noise + warm cream */
.felt-bg{
  background:
    radial-gradient(ellipse at top, rgba(255,253,247,.8), transparent 60%),
    radial-gradient(circle at 18% 12%, rgba(217,119,87,.04), transparent 40%),
    radial-gradient(circle at 82% 88%, rgba(168,197,163,.05), transparent 40%),
    var(--paper);
  position:relative;
}
.felt-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(58,45,32,.04) 0.5px, transparent 0.6px),
    radial-gradient(circle at 7px 11px, rgba(58,45,32,.03) 0.4px, transparent 0.5px);
  background-size: 13px 13px, 17px 19px;
  mix-blend-mode:multiply;
  opacity:.4;
}

/* Phone-internal scroll area */
.scroll-area{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;
}
.scroll-area::-webkit-scrollbar{display:none}

/* Felt card */
.felt-card{
  background:var(--cream);
  border-radius:22px;
  box-shadow:var(--felt-shadow);
  padding:16px;
  position:relative;
}
.felt-card.tinted{background:var(--paper-2)}

/* Felt button */
.felt-btn{
  font-family:var(--sans);font-weight:600;font-size:16px;
  border:none;cursor:pointer;
  padding:14px 22px;border-radius:16px;
  background:var(--cream);color:var(--ink);
  box-shadow:var(--felt-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.felt-btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,253,238,.7) inset, 0 -1px 0 rgba(58,45,32,.05) inset, 0 3px 8px -4px rgba(120,80,40,.25)}
.felt-btn.primary{background:var(--terra);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 -3px 0 rgba(0,0,0,.08) inset, 0 8px 16px -6px rgba(184,90,60,.5)}
.felt-btn.primary:disabled{background:var(--ink-mute);box-shadow:var(--felt-shadow);cursor:not-allowed;opacity:.7}
.felt-btn.ghost{background:transparent;box-shadow:none;color:var(--ink-soft);font-weight:500}
.felt-btn.ghost:active{transform:none}

/* Pill */
.pill{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:99px;
  font-size:11px;font-family:var(--mono);
  background:var(--paper-2);color:var(--ink-soft);
}

.ui-icon{display:block;flex-shrink:0}
.ui-icon-spin{animation:ui-icon-spin .85s linear infinite}
@keyframes ui-icon-spin{to{transform:rotate(360deg)}}

.brand-icon{
  display:block;
  flex-shrink:0;
  object-fit:contain;
}

.snail-character{
  flex-shrink:0;
  transform-origin:50% 80%;
}
.wiggle-soft{
  animation:wiggle-soft 2.4s ease-in-out infinite;
}
@keyframes wiggle-soft{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-1.5deg)}
}

/* Display heading — handwritten English accent */
.disp-en{font-family:var(--hand);font-style:italic;color:var(--terra-dk);line-height:1}
.disp-h{font-family:var(--serif);font-weight:700;color:var(--ink);line-height:1.2}

/* Speech bubble */
.bubble{
  background:var(--cream);
  border-radius:18px 18px 18px 4px;
  padding:14px 16px;
  box-shadow:var(--felt-shadow);
  font-size:15px;color:var(--ink);
  position:relative;
  line-height:1.55;
}
.bubble.right{border-radius:18px 18px 4px 18px}
.bubble.terra{background:var(--terra);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 -3px 0 rgba(0,0,0,.07) inset, 0 10px 18px -8px rgba(184,90,60,.4)}

/* Stitching */
.stitch{
  border:1.5px dashed var(--line);
  border-radius:18px;
  padding:14px;
}

/* Wool-felt blob */
.blob{
  position:absolute;border-radius:50%;
  filter:blur(20px);opacity:.5;pointer-events:none;
}

/* Fade in */
@keyframes felt-in{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}
}
.felt-in{animation:felt-in .45s cubic-bezier(.2,.7,.3,1) both}

/* Subtle bob */
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-6px) rotate(2deg)}
}
.bob{animation:bob 3.2s ease-in-out infinite}

.waiting-illustration-shell{
  width:188px;
  height:188px;
  display:grid;
  place-items:center;
}
.waiting-illustration{
  width:172px;
  height:172px;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(58,45,32,.12));
  animation:waiting-illustration-in .45s ease both, bob 3.2s ease-in-out infinite;
}
@keyframes waiting-illustration-in{
  0%{opacity:0;transform:translateY(8px) scale(.94)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Wiggle */
@keyframes wiggle{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(3deg)}
}
.wiggle{animation:wiggle 1.6s ease-in-out infinite}

/* Page flip — for book viewer */
@keyframes flip-r{
  0%{transform:rotateY(0)}
  100%{transform:rotateY(-180deg)}
}

/* Confetti dot for reveal */
@keyframes confetti{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(360px) rotate(720deg);opacity:0}
}

/* Sparkle */
@keyframes sparkle{
  0%,100%{transform:scale(.6);opacity:.4}
  50%{transform:scale(1.1);opacity:1}
}

/* Audio waveform bars */
@keyframes wave{
  0%,100%{height:6px}
  50%{height:16px}
}

/* Curtain reveal */
@keyframes curtain-l{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}
@keyframes curtain-r{
  0%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}

/* Book grow */
@keyframes book-grow{
  0%{transform:scale(.3) rotate(-8deg);opacity:0}
  60%{transform:scale(1.05) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}