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

@font-face{
  font-family:"ZCOOL KuaiLe Local";
  src:url("/assets/fonts/ZCOOLKuaiLe.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

: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","Source Han Serif SC","Songti SC","STSong",serif;
  --cover-title:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --hand:"ZCOOL KuaiLe Local","Ma Shan Zheng","KaiTi","STKaiti",cursive;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Menlo","Consolas",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%;
  background:var(--paper);
  touch-action:pan-x pan-y;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--sans);
  background:var(--paper);
  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(--paper-2);
  color:var(--ink-soft);
  border:2px dashed var(--line);
  box-shadow:none;
  cursor:not-allowed;
  opacity:1;
}
.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);
}

.topic-card{outline:none}
.topic-card:focus-visible{
  box-shadow:0 0 0 3px rgba(217,119,87,.18), var(--felt-shadow)!important;
}
.topic-card-shake{
  animation:topic-card-shake .42s ease both;
}
@keyframes topic-card-shake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-5px) rotate(-.25deg)}
  36%{transform:translateX(5px) rotate(.25deg)}
  54%{transform:translateX(-3px)}
  72%{transform:translateX(3px)}
}
.topic-lock-toast{
  position:fixed;
  left:50%;
  bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:100;
  width:min(calc(100vw - 40px), 390px);
  transform:translateX(-50%);
  pointer-events:none;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(58,45,32,.9);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
  box-shadow:0 10px 24px -12px rgba(58,45,32,.55), 0 1px 0 rgba(255,255,255,.18) inset;
  animation:topic-lock-toast-in .18s ease both;
}
@keyframes topic-lock-toast-in{
  from{opacity:0;transform:translateX(-50%) translateY(8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

.privacy-consent-row{
  margin-top:10px;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:12px;
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:12px;
  line-height:1.45;
  outline:none;
}
.privacy-consent-toggle,
.privacy-consent-link{
  min-height:30px;
  padding:0;
  border:none;
  background:transparent;
  font:inherit;
  cursor:pointer;
}
.privacy-consent-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--ink-soft);
}
.privacy-consent-toggle:focus-visible,
.privacy-consent-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(217,119,87,.16);
  border-radius:10px;
}
.privacy-consent-row.shake{
  animation:privacy-consent-shake .6s ease-in-out;
  background:rgba(217,119,87,.1);
}
@keyframes privacy-consent-shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-8px)}
  30%{transform:translateX(8px)}
  45%{transform:translateX(-6px)}
  60%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}
  90%{transform:translateX(3px)}
}
.privacy-consent-check{
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid var(--line);
  background:var(--cream);
  color:#fff;
  display:grid;
  place-items:center;
  flex-shrink:0;
  transition:background .18s, border-color .18s, box-shadow .18s;
}
.privacy-consent-row.checked .privacy-consent-check{
  background:var(--terra);
  border-color:var(--terra);
}
.privacy-consent-row.shake .privacy-consent-check{
  border-color:var(--terra);
  box-shadow:0 0 0 4px rgba(217,119,87,.18);
}
.privacy-consent-link{
  color:var(--terra-dk);
  font-weight:800;
}
.privacy-sheet-mask{
  position:fixed;
  inset:0;
  z-index:150;
  background:rgba(58,45,32,.42);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.privacy-sheet{
  width:min(430px, 100vw);
  max-height:min(82vh, 720px);
  background:var(--paper);
  border-radius:24px 24px 0 0;
  border:2px solid rgba(58,45,32,.16);
  box-shadow:0 -24px 54px -28px rgba(58,45,32,.65);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  animation:privacy-sheet-in .2s ease both;
}
@keyframes privacy-sheet-in{
  from{transform:translateY(18px);opacity:.5}
  to{transform:translateY(0);opacity:1}
}
.privacy-sheet-handle{
  width:46px;
  height:5px;
  border-radius:999px;
  background:rgba(58,45,32,.16);
  margin:10px auto 4px;
}
.privacy-sheet-head{
  padding:12px 20px 10px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  border-bottom:1px solid rgba(58,45,32,.08);
}
.privacy-sheet-eyebrow{
  font-family:var(--hand);
  color:var(--terra-dk);
  font-size:18px;
  line-height:1;
}
.privacy-sheet-title{
  margin:2px 0 0;
  font-family:var(--serif);
  color:var(--ink);
  font-size:20px;
  line-height:1.25;
}
.privacy-sheet-sub{
  margin-top:4px;
  font-size:11px;
  color:var(--ink-mute);
}
.privacy-sheet-close{
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:var(--paper-2);
  color:var(--ink-soft);
  display:grid;
  place-items:center;
  flex-shrink:0;
  cursor:pointer;
}
.privacy-sheet-body{
  padding:14px 20px 8px;
  overflow:auto;
  color:var(--ink);
  font-family:var(--sans);
}
.privacy-sheet-intro{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:14px;
  background:var(--paper-2);
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.7;
}
.privacy-policy-section{
  padding:12px 0;
  border-bottom:1px dashed rgba(58,45,32,.14);
}
.privacy-policy-section h4{
  margin:0 0 8px;
  font-family:var(--serif);
  font-size:16px;
  color:var(--ink);
}
.privacy-policy-section ul{
  margin:0;
  padding-left:18px;
}
.privacy-policy-section li{
  margin:5px 0;
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.65;
}
.privacy-sheet-legal{
  margin:14px 0 6px;
  color:var(--ink-mute);
  font-size:12px;
  line-height:1.65;
}
.privacy-sheet-foot{
  padding:12px 20px calc(14px + env(safe-area-inset-bottom));
  display:flex;
  gap:10px;
  background:linear-gradient(to top, var(--paper) 86%, rgba(250,241,220,0));
}
.privacy-sheet-cancel{padding:12px 14px}
.privacy-sheet-agree{flex:1;padding:13px 14px}

.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}
.cover-title-en{
  font-family:var(--cover-title);
  font-style:italic;
  font-weight:700;
  letter-spacing:0;
}

/* 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}
}

/* Result-page read-aloud control */
.read-aloud-control{
  width:100%;
  min-height:50px;
  margin:-4px 0 14px;
  padding:0 4px 0 0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  cursor:pointer;
  box-shadow:none;
  transition:opacity .16s ease, transform .16s ease;
}
.read-aloud-control:active{
  transform:translateY(1px);
}
.read-aloud-avatar{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  position:relative;
  flex-shrink:0;
}
.read-aloud-avatar-disc{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,250,237,.8);
  border:1.5px solid rgba(217,119,87,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset, 0 3px 9px -7px rgba(58,45,32,.45);
  overflow:hidden;
}
.read-aloud-avatar-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.read-aloud-action-icon{
  position:absolute;
  right:0;
  bottom:1px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--terra);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 7px -5px rgba(58,45,32,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:2;
  pointer-events:none;
}
.read-aloud-wave{
  flex:1;
  min-width:0;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
}
.read-aloud-wave span{
  width:2px;
  height:var(--bar-h);
  border-radius:99px;
  background:rgba(217,119,87,.72);
  opacity:.72;
  transform-origin:center;
}
.read-aloud-label{
  min-width:48px;
  text-align:right;
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  color:var(--terra-dk);
}
.read-aloud-control.is-playing{
  color:var(--terra-dk);
}
.read-aloud-control.is-playing .read-aloud-avatar-disc{
  animation:read-aloud-avatar-spin 7.2s linear infinite;
}
.read-aloud-control.is-playing .read-aloud-avatar::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1.5px solid rgba(217,119,87,.28);
  animation:read-aloud-pulse 1.6s ease-out infinite;
}
.read-aloud-control.is-playing .read-aloud-wave span{
  animation:read-aloud-wave 1.05s ease-in-out infinite;
  animation-delay:var(--bar-delay);
}
.read-aloud-control.is-paused{
  color:var(--ink-soft);
}
.read-aloud-control.is-paused .read-aloud-avatar-disc{
  opacity:.72;
  filter:saturate(.72);
}
.read-aloud-control.is-paused .read-aloud-action-icon{
  background:var(--terra);
  color:#fff;
  border:1.5px solid rgba(255,250,237,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset, 0 4px 10px -6px rgba(58,45,32,.65);
}
.read-aloud-control.is-paused .read-aloud-label{
  color:var(--ink-soft);
}
.read-aloud-control.is-paused .read-aloud-wave span{
  height:2px;
  background:rgba(159,128,91,.34);
  opacity:.65;
}
.read-aloud-stack{
  margin:-4px 0 14px;
}
.read-aloud-stack .read-aloud-control{
  margin:0;
}
.read-aloud-translation{
  margin:-6px 56px 0 60px;
  font-family:var(--serif);
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  color:var(--ink-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@keyframes read-aloud-avatar-spin{
  to{transform:rotate(360deg)}
}
@keyframes read-aloud-pulse{
  0%{transform:scale(.88);opacity:.8}
  100%{transform:scale(1.24);opacity:0}
}
@keyframes read-aloud-wave{
  0%,100%{transform:scaleY(.5);opacity:.55}
  50%{transform:scaleY(1.25);opacity:1}
}

/* 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)}
}
@keyframes reveal-book-pop{
  0%{
    transform:translateY(36px) scale(.62) rotate(var(--reveal-rotate));
    opacity:0;
  }
  62%{
    transform:translateY(-8px) scale(var(--reveal-scale-peak)) rotate(var(--reveal-rotate));
    opacity:1;
  }
  100%{
    transform:translateY(var(--reveal-y)) scale(var(--reveal-scale)) rotate(var(--reveal-rotate));
    opacity:1;
  }
}

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