/* 复古万圣节印刷风：芥末黄纸 + 黑色剪影 + 南瓜橙 / 荧光绿 / 奶油白，网点质感，粗黑边 + 错位硬阴影；手机优先，最宽 480px */
:root {
  --brand: #7b2ff7;                 /* JSON meta.brand，只用于少量点缀 */
  --paper: #f6cf3c;
  --ink: #1a1410;
  --orange: #ef7d22;
  --lime: #a6cf3f;
  --cream: #fff3d6;
  --red: #d8452f;
  --soft: #4a3d2c;                  /* 次要文字 */
  --sys: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --display: var(--sys);
  --body: var(--sys);
  color-scheme: light;
}
html.font-ok { --display: "ZCOOL KuaiLe", "Fredoka", var(--sys); }
html.font-ok:lang(en) { --display: "Fredoka", "ZCOOL KuaiLe", var(--sys); }

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 15px/1.65 var(--body);
  background: radial-gradient(rgba(26, 20, 16, .09) 1.2px, transparent 1.7px) 0 0 / 9px 9px, var(--paper);
  -webkit-tap-highlight-color: transparent;
}
.app {
  max-width: 480px; margin: 0 auto; display: grid; gap: 14px;
  padding-block: max(10px, env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
.eyebrow { font-size: 12px; letter-spacing: .08em; color: var(--soft); }

/* 按钮：粗黑边 + 错位硬阴影，按下“压平” */
.btn {
  min-height: 48px; padding: 0 20px; border-radius: 14px; border: 3px solid var(--ink); cursor: pointer;
  font: 17px/1 var(--display); color: var(--ink); background: var(--cream); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.btn:active, .option:active, .chip:active, .pill:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible, .option:focus-visible, .chip:focus-visible, .pill:focus-visible, .poke:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--orange); }
.btn-primary:active { box-shadow: 1px 1px 0 var(--orange); }
.btn-ghost { background: var(--cream); }
.btn-voice { background: var(--lime); width: 100%; }
.btn-big { min-height: 60px; font-size: 22px; width: 100%; }
.btn[disabled] { opacity: .35; cursor: default; box-shadow: none; }

.topbar { display: flex; justify-content: flex-end; gap: 8px; position: relative; z-index: 2; }
.pill {
  min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: var(--cream); border: 2.5px solid var(--ink); color: var(--ink); font: 14px/1 var(--body); box-shadow: 2px 2px 0 var(--ink);
}

/* 怪物：平涂 + 黑描边，会呼吸、眨眼 */
.art { display: block; }
.art svg { width: 100%; height: 100%; display: block; overflow: visible; }
img.art { object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .art svg { animation: bob 2.6s ease-in-out infinite; }
  .blink { animation: blink 4.2s infinite; transform-box: fill-box; transform-origin: center; }
  .flap { animation: flap .5s ease-in-out infinite alternate; transform-origin: 100px 112px; }
  .tail { animation: wag 1.6s ease-in-out infinite alternate; transform-origin: 150px 152px; }
  .tear { animation: tear 2.4s ease-in infinite; }
  .bubbles circle { animation: bubble 1.1s ease-in infinite; }
  .bubbles circle:nth-child(2) { animation-delay: .35s; }
  .bubbles circle:nth-child(3) { animation-delay: .7s; }
  .bat svg { animation: swoop 3.2s ease-in-out infinite alternate; }
  .bat.b2 svg { animation-delay: -1.1s; }
  .bat.b3 svg { animation-delay: -2.2s; }
}
@keyframes bob { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes flap { to { transform: scaleX(.82) scaleY(1.06); } }
@keyframes wag { to { transform: rotate(14deg); } }
@keyframes tear { 0%, 40% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes bubble { from { transform: translateY(10px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }
@keyframes swoop { to { transform: translate(10px, -8px) rotate(6deg) scaleY(.85); } }

/* 开始页：网点大月亮 + 剪影蝙蝠 */
.start { position: relative; display: grid; gap: 12px; text-align: center; }
.hero-decor { position: absolute; inset: -70px -16px auto; height: 330px; pointer-events: none; overflow: hidden; z-index: 0; }
.start > :not(.hero-decor) { position: relative; z-index: 1; }
.moon {
  position: absolute; left: 50%; top: 24px; width: 276px; height: 276px; margin-left: -138px; border-radius: 50%;
  background: radial-gradient(rgba(26, 20, 16, .16) 1.6px, transparent 2.2px) 0 0 / 8px 8px, var(--orange);
}
.bat { position: absolute; width: 70px; }
.bat svg { width: 100%; display: block; }
.bat.b1 { left: 3%; top: 40px; width: 84px; transform: rotate(-12deg); }
.bat.b2 { right: 5%; top: 30px; width: 58px; transform: rotate(8deg); }
.bat.b3 { right: 6%; top: 262px; width: 46px; transform: rotate(10deg); }
.parade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; max-width: 330px; margin: 18px auto 0; }
.poke { background: none; border: 0; padding: 4px; cursor: pointer; border-radius: 16px; min-height: 44px; }
.poke .art svg { animation-delay: calc(var(--i) * -.33s); }
.poke.is-poked { animation: wiggle .5s ease; }
@keyframes wiggle { 20% { transform: rotate(-12deg) scale(1.15); } 50% { transform: rotate(10deg) scale(1.1); } 80% { transform: rotate(-4deg); } }
.parade-art { width: 100%; aspect-ratio: 1; }
.poke-hint { font-size: 13px; justify-self: center; padding: 2px 12px; background: var(--ink); color: var(--paper); border-radius: 999px; transform: rotate(-2deg); }
.title { font: 32px/1.2 var(--display); color: var(--ink); text-shadow: 3px 3px 0 var(--orange); margin-top: 6px; }
.subtitle { font: 18px/1.4 var(--display); color: var(--ink); }
.intro { color: var(--soft); }
.facts { list-style: none; padding: 0; margin: 4px 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.facts li { padding: 4px 12px; border-radius: 999px; background: var(--cream); border: 2.5px solid var(--ink); font-size: 13px; font-weight: 600; }
.facts li:nth-child(1) { background: var(--lime); }
.facts li:nth-child(2) { transform: rotate(-3deg); }
.facts li:nth-child(3) { background: var(--orange); transform: rotate(2deg); }
.last { color: var(--soft); font-size: 14px; }
.last b { color: var(--ink); background: var(--lime); padding: 0 6px; border-radius: 6px; }
.maybe { display: grid; gap: 6px; }
.maybe-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 13px; color: var(--soft); }

/* 好友横幅 */
.friend {
  display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 18px;
  background: var(--cream); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); position: relative; z-index: 1;
}
.friend-art { width: 84px; height: 84px; }
.friend-text { display: grid; gap: 6px; min-width: 0; }
.friend-got { font: 19px/1.35 var(--display); }
.friend-got b { background: var(--orange); padding: 0 6px; border-radius: 6px; }
.friend-ask { font: 17px/1.3 var(--display); }
.friend-lead { color: var(--soft); font-size: 13px; }
.friend .btn { justify-self: start; }

/* 答题页 */
.quiz { display: grid; gap: 16px; }
.progress { position: relative; height: 14px; border-radius: 999px; background: var(--cream); border: 2.5px solid var(--ink); margin-top: 16px; }
.progress-bar { height: 100%; border-radius: inherit; background: repeating-linear-gradient(-45deg, var(--orange) 0 8px, #f59a4a 8px 16px); transition: width .3s; }
.progress-ghost { position: absolute; top: -26px; width: 34px; height: 34px; transform: translateX(-60%); transition: left .3s; }
.progress-ghost svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) { .progress-ghost svg { animation: bob 1.4s ease-in-out infinite; } }
.progress-text { font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.question { font: 26px/1.35 var(--display); min-height: 2.7em; }
.options { display: grid; gap: 12px; }
.option {
  min-height: 58px; padding: 12px 16px; border-radius: 16px; text-align: left; cursor: pointer;
  background: var(--cream); border: 3px solid var(--ink); color: var(--ink); font: 16px/1.4 var(--body); font-weight: 600;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .1s, box-shadow .1s, background .15s;
}
.option:nth-child(odd) { border-radius: 16px 16px 16px 4px; }
.option:nth-child(even) { border-radius: 16px 16px 4px 16px; }
.option:hover { background: #fff; }
.option.is-chosen { background: var(--lime); animation: squish .22s ease; }
@keyframes squish { 40% { transform: scale(.94, 1.06); } 70% { transform: scale(1.03, .97); } }
.prev { justify-self: start; }

/* 召唤 */
.summon { display: grid; justify-items: center; gap: 16px; padding-top: 16vh; text-align: center; }
.cauldron { width: 200px; height: 200px; border-radius: 50%; padding: 12px;
  background: radial-gradient(rgba(26, 20, 16, .16) 1.6px, transparent 2.2px) 0 0 / 8px 8px, var(--orange); }
.cauldron svg { width: 100%; height: 100%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .cauldron svg { animation: shake .3s linear infinite; }
  .summon-text { animation: pulse 1s ease-in-out infinite; }
}
@keyframes shake { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes pulse { 50% { opacity: .45; } }
.summon-text { font: 19px/1.5 var(--display); }

/* 结果卡：奶油色“怪物身份证”，粗黑边 + 硬阴影 */
.card {
  position: relative; display: grid; gap: 6px; text-align: center; color: var(--ink);
  padding: 0 16px 12px; border-radius: 20px; overflow: hidden; border: 3px solid var(--ink);
  background:
    radial-gradient(circle at 94% 24%, rgba(166, 207, 63, .55) 0 38px, transparent 39px),
    radial-gradient(rgba(26, 20, 16, .07) 1.2px, transparent 1.7px) 0 0 / 8px 8px,
    var(--cream);
  box-shadow: 7px 7px 0 var(--ink);
}
.card-head {
  margin: 0 -16px 2px; padding: 6px 16px; display: flex; justify-content: space-between; gap: 8px;
  background: var(--ink); color: var(--paper); font: 13px/1.4 var(--display); letter-spacing: .04em;
}
.card-head span:last-child { font-variant-numeric: tabular-nums; color: var(--orange); }
.card .eyebrow { color: var(--soft); }
.name { font: 38px/1.1 var(--display); color: var(--ink); }
.name.small { font-size: 26px; }
.name-en { margin-top: -2px; color: var(--orange); font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.art-wrap { position: relative; justify-self: center; }
.card-art { width: 112px; height: 112px; margin: 4px auto 0; }
.stamp {
  position: absolute; right: -80px; top: 22px; padding: 6px 10px; border: 3px solid var(--red); border-radius: 10px;
  color: var(--red); font: 15px/1 var(--display); transform: rotate(-14deg); opacity: .9; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--cream), inset 0 0 0 4px var(--red);
}
.tagline { font: 18px/1.5 var(--display); font-weight: 700; }
.tagline.long { font-size: 15.5px; }
.tagline span {
  padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 56%, var(--paper) 56%);
}
.desc { color: var(--soft); font-size: 14px; text-align: left; line-height: 1.6; }
.traits { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.traits div { padding: 7px 10px; border-radius: 12px; border: 2.5px solid var(--ink); min-width: 0; }
.traits div:first-child { background: var(--lime); }
.traits div:last-child { background: #f7b98a; }
.traits dt { font-size: 11px; color: var(--soft); }
.traits dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 2px; }
.match-row { display: grid; gap: 6px; align-content: start; min-width: 0; }
.match-label { justify-self: center; font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 700; border: 2px solid var(--ink); }
.match-label.good { background: var(--lime); }
.match-label.bad { background: var(--red); color: var(--cream); }
.chip {
  min-height: 44px; padding: 0 8px; border-radius: 12px; cursor: pointer; width: 100%;
  background: #fff; border: 2.5px solid var(--ink); color: var(--ink); font: 15px/1.2 var(--display);
  box-shadow: 3px 3px 0 var(--ink);
}
.card-brand { font-size: 12px; color: var(--soft); padding-top: 2px; }
.match-hint { text-align: center; color: var(--soft); font-size: 12px; margin-top: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .card.is-reveal { animation: reveal .7s cubic-bezier(.2, 1.6, .4, 1) both; }
  .card.is-reveal .stamp { animation: stamp .35s .65s cubic-bezier(.3, 1.8, .5, 1) both; }
}
@keyframes reveal { from { transform: scale(.55) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stamp { from { transform: rotate(-14deg) scale(2.4); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: .9; } }

.share { display: grid; gap: 12px; text-align: center; }
.share-hint { font-size: 14px; font-weight: 700; }
.share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.share-btns .btn-primary { grid-column: 1 / -1; }
.manual[hidden] { display: none; }
.manual { display: grid; gap: 6px; text-align: left; font-size: 13px; color: var(--soft); }
.manual textarea {
  width: 100%; padding: 10px; border-radius: 12px; border: 3px solid var(--ink); resize: none;
  background: var(--cream); color: var(--ink); font: 14px/1.5 var(--body);
}
.footer { text-align: center; color: var(--soft); font-size: 12px; }

/* 怪物介绍弹层 */
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(26, 20, 16, .55); display: flex; align-items: flex-end; justify-content: center; }
.sheet-panel {
  width: 100%; max-width: 480px; display: grid; gap: 10px; text-align: center; border-radius: 24px 24px 0 0;
  padding: 18px max(18px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  background: var(--cream); border: 3px solid var(--ink); border-bottom: 0;
}
.sheet-art { width: 104px; height: 104px; margin: 4px auto 0; }
.sheet .desc { color: var(--soft); }
@media (prefers-reduced-motion: no-preference) { .sheet-panel { animation: rise .28s cubic-bezier(.2, 1.4, .4, 1); } }
@keyframes rise { from { transform: translateY(60%); } }

/* 撒糖果 */
.burst { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.burst span { position: absolute; width: 24px; height: 18px; margin: -9px 0 0 -12px; animation: fly 1.1s cubic-bezier(.15, .7, .4, 1) forwards; }
.burst svg { width: 100%; height: 100%; display: block; }
@keyframes fly { to { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--rot)); opacity: 0; } }

.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40;
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700;
}
.load-error { width: 120px; margin: 30vh auto 0; opacity: .5; }

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

/* ---------- 有趣的小动画（系统“减少动态效果”时全部关闭） ---------- */
.title .ch { display: inline-block; white-space: pre; }
.flyby { position: absolute; left: 0; top: 120px; width: 54px; opacity: 0; }
.flyby svg { width: 100%; display: block; }
.peeker { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: -70px; width: 64px; height: 64px; z-index: 20; pointer-events: none; }
.peeker svg { width: 100%; height: 100%; }
.orbit { position: absolute; left: 50%; top: 50%; width: 40px; margin: -10px 0 0 -20px; }
.orbit svg { width: 100%; display: block; }
.cauldron { position: relative; }
.pupil { transition: transform .12s ease-out; }
@media (prefers-reduced-motion: no-preference) {
  .moon { animation: moonrise 1s cubic-bezier(.2, 1.2, .4, 1) both; }
  .poke { animation: popin .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.25s + var(--i) * .08s); }
  .poke.is-poked { animation: wiggle .5s ease; }
  .title .ch { animation: drop .5s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(.6s + var(--c) * .04s); }
  .flyby { animation: flyby 9s linear 2s infinite; }
  .peeker { animation: peek 11s ease-in-out 4s infinite; }
  .question { animation: swingin .45s cubic-bezier(.3, 1.5, .5, 1) both; transform-origin: left center; }
  .option { animation: drop .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.08s + var(--o) * .07s); }
  .option.is-chosen { animation: squish .22s ease; }
  .progress-ghost { animation: hop .5s ease; }
  .orbit { animation: orbit 1.6s linear infinite; }
  .orbit.o2 { animation-delay: -.53s; }
  .orbit.o3 { animation-delay: -1.06s; }
  .card.is-reveal .card-art { animation: jump .6s .55s ease both; }
  .art-wrap.is-jumping .card-art { animation: jump .6s ease; }
}
.art-wrap { cursor: pointer; }
@keyframes moonrise { from { transform: translateY(60px) scale(.85); opacity: 0; } }
@keyframes popin { from { transform: scale(0) translateY(30px); opacity: 0; } }
@keyframes drop { from { transform: translateY(-26px) rotate(-8deg); opacity: 0; } }
@keyframes swingin { from { transform: translateX(40px) rotate(4deg); opacity: 0; } }
@keyframes hop { 40% { transform: translateX(-60%) translateY(-14px) rotate(-10deg); } }
@keyframes orbit { from { transform: rotate(0deg) translateX(118px) rotate(0deg); } to { transform: rotate(360deg) translateX(118px) rotate(-360deg); } }
@keyframes jump { 25% { transform: translateY(4px) scale(1.12, .86); } 55% { transform: translateY(-26px) scale(.92, 1.1); } 80% { transform: translateY(2px) scale(1.06, .95); } }
@keyframes flyby {
  0% { transform: translate(-60px, 40px) scaleY(1); opacity: 1; }
  25% { transform: translate(110px, -10px) scaleY(.7); }
  50% { transform: translate(230px, 30px) scaleY(1); }
  75% { transform: translate(350px, -20px) scaleY(.7); }
  90% { transform: translate(460px, 10px) scaleY(1); opacity: 1; }
  91%, 100% { opacity: 0; transform: translate(460px, 10px); }
}
@keyframes peek {
  0%, 70%, 100% { transform: translateY(0) rotate(0); }
  76% { transform: translateY(-58px) rotate(-8deg); }
  82% { transform: translateY(-52px) rotate(8deg); }
  88% { transform: translateY(-58px) rotate(-4deg); }
  94% { transform: translateY(0) rotate(0); }
}