:root {
  --ink: #3d2c29;
  --cream: #fff6df;
  --paper: #fffaf1;
  --coral: #ff6b6b;
  --sun: #ffd166;
  --mint: #7dcea0;
  --sky: #7ec8f3;
  --grape: #c9a6f5;
  --line: 4px solid var(--ink);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 12%, #ffe1a8 0 18%, transparent 19%),
    radial-gradient(circle at 92% 8%, #ffd0e0 0 16%, transparent 17%),
    radial-gradient(circle at 80% 80%, #c9f3ff 0 18%, transparent 19%),
    linear-gradient(180deg, #fff4d8, #ffe8ef 48%, #e7f8ff);
}
button, textarea { font: inherit; color: inherit; }
button, input { cursor: pointer; touch-action: manipulation; }
input { cursor: text; }
h1, h2, h3, p { margin: 0; }

.shell { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
.topbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand h1 { font-size: 32px; letter-spacing: 1px; }
.brand-kicker { color: #9a5b4a; font-size: 14px; font-weight: 700; }
.logo-dot {
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6c8, #ffb347 42%, #ff8fab);
  border: var(--line);
  box-shadow: 4px 4px 0 var(--ink);
}
.points-chip, .entry, .tab, .card button, .ghost, .danger, .file-btn, .length-switch button, .option, .result-actions button {
  border: var(--line);
  border-radius: 999px;
  background: white;
  box-shadow: 4px 4px 0 var(--ink);
}
.points-chip {
  position: relative;
  display: flex; gap: 8px; align-items: baseline;
  padding: 8px 16px; background: var(--sun); font-weight: 800;
}
.points-chip strong { font-size: 28px; }
.points-pop {
  position: absolute; right: 8px; top: -6px;
  color: #e24b4b; font-style: normal; font-weight: 900;
  animation: float-up 0.9s ease forwards;
}
.entry-switch { display: flex; gap: 8px; }
.entry { padding: 10px 16px; background: var(--coral); color: white; font-weight: 800; }
.entry-alt { background: var(--sky); color: var(--ink); }
.entry.is-on { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tab { padding: 10px 16px; background: white; font-weight: 800; }
.tab.is-on { background: var(--mint); }
.panel, .preview, .question-card, .result-card, .empty, .group {
  background: rgba(255, 250, 241, 0.92);
  border: var(--line);
  border-radius: 28px;
  box-shadow: 8px 8px 0 rgba(61, 44, 41, 0.18);
}
.panel { padding: 16px; }
.hint { margin-bottom: 12px; }

.is-dead .pet-svg { filter: grayscale(0.92) brightness(0.82); }
.is-dead .sky { filter: grayscale(0.55); }
.scene {
  position: relative;
  height: 460px;
  border-radius: 28px;
  overflow: hidden;
  border: var(--line);
  background: linear-gradient(#ffe7a8, #ffd1dc 70%);
}
.wall-stripe { background: repeating-linear-gradient(90deg, #d8fff0 0 18px, #fffef6 18px 36px); }
.wall-sunset { background: linear-gradient(#ffb347, #ff7eb3 58%, #9fd8ff); }
.wall-dot { background: radial-gradient(circle, #ff8fab 0 7px, transparent 8px), linear-gradient(#ffe4ef, #fff6df); background-size: 36px 36px, auto; }
.wall-sea { background: linear-gradient(#b9ecff 0 62%, #7ec8f3 62% 74%, #fff 74% 80%, #7ec8f3 80%); }
.window-frame {
  position: absolute; left: 28px; top: 22px; width: 210px; height: 150px;
  border: 8px solid #6b4632; border-radius: 18px; background: #fff; overflow: hidden;
}
.sky { position: absolute; inset: 0; background: linear-gradient(#8fd3ff, #e7f7ff); }
.sun, .moon, .star, .cloud, .rainbow-arc, .drop, .flake { position: absolute; display: block; }
.sun { width: 46px; height: 46px; border-radius: 50%; background: #ffd166; border: 3px solid var(--ink); right: 16px; top: 16px; }
.moon { width: 36px; height: 36px; border-radius: 50%; background: #fff4c2; box-shadow: inset -10px -4px 0 #f0d78a; right: 18px; top: 18px; display: none; }
.star { width: 8px; height: 8px; background: white; border-radius: 50%; display: none; }
.s1 { left: 24px; top: 28px; } .s2 { left: 70px; top: 18px; } .s3 { left: 48px; top: 60px; } .s4 { left: 100px; top: 40px; }
.cloud { background: white; border-radius: 20px; height: 22px; }
.c1 { width: 54px; left: 16px; top: 78px; } .c2 { width: 36px; left: 58px; top: 96px; }
.rainbow-arc {
  display: none; left: 28px; bottom: -40px; width: 150px; height: 90px; border-radius: 150px 150px 0 0;
  border: 10px solid #ff6b6b; border-bottom: 0;
  box-shadow: inset 0 10px 0 #ffd166, inset 0 20px 0 #7dcea0;
}
.win-night .sky { background: linear-gradient(#243456, #5677a6); }
.win-night .sun, .win-night .cloud, .win-night .rainbow-arc { display: none; }
.win-night .moon, .win-night .star { display: block; }
.win-rainbow .sun { display: none; }
.win-rainbow .rainbow-arc { display: block; }
.drop, .flake { display: none; width: 3px; height: 14px; background: #fff; border-radius: 4px; }
.d1 { left: 30px; top: 10px; } .d2 { left: 78px; top: 28px; } .d3 { left: 130px; top: 16px; }
.flake { width: 8px; height: 8px; border-radius: 50%; }
.k1 { left: 36px; top: 24px; } .k2 { left: 90px; top: 48px; } .k3 { left: 140px; top: 20px; }
.win-rain .sky { background: linear-gradient(#8eacc4, #d5e4ee); }
.win-rain .sun, .win-rain .cloud, .win-rain .rainbow-arc, .win-rain .flake { display: none; }
.win-rain .drop { display: block; animation: rise 1s linear infinite reverse; }
.win-snow .sky { background: linear-gradient(#e7f4ff, #fff); }
.win-snow .sun, .win-snow .cloud, .win-snow .rainbow-arc, .win-snow .drop { display: none; }
.win-snow .flake { display: block; }
.picture, .shelf, .plant { position: absolute; }
.picture { right: 36px; top: 36px; width: 84px; height: 64px; background: #fff; border: 4px solid var(--ink); border-radius: 8px; box-shadow: inset 0 0 0 8px #ffd0e0; }
.shelf { right: 28px; top: 150px; width: 120px; height: 12px; background: #c9844a; border: 3px solid var(--ink); }
.shelf:after { content: ""; position: absolute; left: 18px; top: -28px; width: 22px; height: 28px; background: #7ec8f3; border: 3px solid var(--ink); border-radius: 4px 4px 0 0; }
.plant { left: 36px; bottom: 108px; width: 36px; height: 46px; background: #5dbe8a; border: 3px solid var(--ink); border-radius: 18px 18px 6px 6px; }
.plant:before { content: ""; position: absolute; left: 4px; bottom: -18px; width: 28px; height: 18px; background: #f08a5d; border: 3px solid var(--ink); border-radius: 0 0 8px 8px; }
.room-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 112px; background: repeating-linear-gradient(90deg, #e7b56a 0 26px, #d39a45 26px 28px); }
.floor-cloud .room-floor { background: radial-gradient(circle at 20% 40%, #fff 0 18px, transparent 19px), radial-gradient(circle at 60% 50%, #fff 0 22px, transparent 23px), #c9f3ff; }
.floor-check .room-floor { background: repeating-conic-gradient(#f6d58a 0% 25%, #fff4d2 0% 50%) 0 0 / 36px 36px; }
.floor-grass .room-floor { background: repeating-linear-gradient(90deg, #8fd18a 0 10px, #7bc47a 10px 14px); }
.floor-candy .room-floor { background: repeating-linear-gradient(90deg, #ffb3c7 0 22px, #fff 22px 44px); }
.furn { position: absolute; z-index: 2; pointer-events: none; }
.furn-lamp { top: 0; left: 50%; width: 4px; height: 54px; margin-left: 70px; background: #3d2c29; }
.furn-lamp:after { content: ""; position: absolute; left: -22px; bottom: -6px; width: 48px; height: 28px; border-radius: 0 0 24px 24px; background: #ffe27a; border: 3px solid #3d2c29; box-shadow: 0 0 18px #ffe27a; }
.furn-balloon { right: 24px; top: 78px; width: 78px; height: 90px; }
.furn-balloon i { position: absolute; width: 28px; height: 36px; border-radius: 50%; border: 3px solid #3d2c29; }
.furn-balloon i:nth-child(1) { left: 0; background: #ff6b6b; }
.furn-balloon i:nth-child(2) { left: 26px; top: -8px; background: #7ec8f3; }
.furn-balloon i:nth-child(3) { left: 48px; background: #ffd166; }
.furn-cushion { left: 22%; bottom: 28px; width: 84px; height: 36px; border-radius: 50%; background: #ff6b6b; border: 3px solid #3d2c29; }
.furn-cushion:after { content: ""; position: absolute; left: 30px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.furn-photo { right: 28px; top: 118px; width: 78px; height: 56px; background: #fff; border: 4px solid #3d2c29; border-radius: 8px; }
.furn-photo:after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 28px; background: linear-gradient(#7ec8f3, #8fd18a); border-radius: 4px; }
.pet-hit {
  position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%);
  width: 250px; border: 0; background: transparent; box-shadow: none; padding: 0;
}
.pet-svg { width: 100%; height: auto; display: block; }
.pet-scale { display: block; transform-origin: 50% 100%; }
.stage-baby .pet-scale { transform: scale(0.84); }
.stage-shine .pet-scale { transform: scale(1.06); }
.pet-eyes { transform-origin: 120px 90px; animation: blink 4.6s infinite; }
.face-sleepy .pet-eyes, .face-eat .pet-eyes { animation: none; }
.action-pat .pet-scale { animation: hop 0.6s ease; }
.mood-bounce .pet-scale { animation: hop 0.8s ease-in-out infinite; }
.mood-line, .growth-chip {
  position: absolute; margin: 0; background: white; border: 3px solid var(--ink); border-radius: 999px;
  padding: 4px 10px; font-weight: 800; font-size: 14px;
}
.mood-line { left: 16px; bottom: 16px; }
.growth-chip { right: 16px; bottom: 16px; background: var(--sun); }
.bubbles i, .toy-ball, .zzz, .crumb { position: absolute; }
.bubbles i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #7ec8f3; background: rgba(255,255,255,.7); animation: rise 1.2s ease-in infinite; }
.bubbles i:nth-child(1) { left: 40px; bottom: 40px; } .bubbles i:nth-child(2) { left: 80px; bottom: 20px; animation-delay: .2s; }
.bubbles i:nth-child(3) { left: 130px; bottom: 50px; } .bubbles i:nth-child(4) { left: 170px; bottom: 24px; animation-delay: .3s; }
.bubbles i:nth-child(5) { left: 100px; bottom: 10px; }
.toy-ball { width: 36px; height: 36px; border-radius: 50%; background: #ff7b54; border: 3px solid var(--ink); right: 10px; bottom: 20px; animation: roll 1s ease infinite; }
.zzz { right: 24px; top: 10px; font-weight: 900; color: #6d5bd0; font-style: normal; animation: float-up 1.4s ease infinite; }
.crumb { width: 12px; height: 12px; background: #f4a261; border-radius: 50%; left: 150px; bottom: 70px; }
.dust { animation: drift 2.4s ease-in-out infinite; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.stat { background: white; border: 3px solid var(--ink); border-radius: 16px; padding: 8px 10px; }
.stat-top { display: flex; justify-content: space-between; font-weight: 800; }
.bar { height: 12px; background: #f3e6d4; border-radius: 99px; overflow: hidden; border: 2px solid var(--ink); }
.bar i { display: block; height: 100%; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.group { padding: 14px; margin-top: 12px; }
.group h2, .preview h2 { margin-bottom: 10px; }
.card {
  background: white; border: var(--line); border-radius: 22px; padding: 12px;
  box-shadow: 5px 5px 0 var(--card, var(--ink));
  display: flex; flex-direction: column; gap: 6px;
}
.card-art { height: 72px; display: grid; place-items: center; position: relative; background: #fff6df; background: color-mix(in srgb, var(--card) 35%, white); border-radius: 16px; }
.item-art { width: 64px; height: 64px; }
.count { position: absolute; right: 8px; top: 8px; }
.card button, .empty button, .preview button, .file-btn, .import-actions button { margin-top: auto; padding: 8px 12px; font-weight: 800; }
.card button:disabled, .result-card button:disabled { background: #f1e6da; color: #9a857c; box-shadow: none; cursor: default; }
.effect { color: #9a5b4a; font-weight: 700; font-size: 15px; }
.length-switch { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; font-weight: 800; }
.length-switch button { padding: 8px 14px; }
.length-switch .is-on { background: var(--sun); }
.set-card { background: #fff; background: color-mix(in srgb, var(--card) 30%, white); }
.option:disabled { cursor: default; }
.quiz-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; margin-bottom: 10px; }
.question-card, .result-card, .empty, .preview { padding: 18px; }
.question-card h2 { font-size: 30px; margin: 8px 0 14px; }
.diff { display: inline-block; background: var(--grape); border-radius: 99px; padding: 2px 10px; font-weight: 800; }
.options { display: grid; gap: 10px; }
.option { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 18px; background: white; }
.option b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); }
.option.is-right { background: #c9f5d8; }
.option.is-wrong { background: #ffd0d0; }
.reveal { margin-top: 12px; display: grid; gap: 8px; }
.reveal button, .result-actions button { padding: 10px 16px; font-weight: 800; background: var(--mint); }
.result-card { text-align: center; background: linear-gradient(180deg, #fff, #fff4d2); }
.result-card h2 { font-size: 40px; margin: 8px 0; }
.result-actions { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.ghost { background: white; }
.empty { text-align: center; display: grid; gap: 8px; justify-items: center; }
.import-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; }
textarea {
  width: 100%; margin: 10px 0; border: var(--line); border-radius: 18px; padding: 12px; background: white; resize: vertical;
}
.import-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.file-btn input { display: none; }
.file-btn { display: inline-block; padding: 8px 12px; background: var(--grape); font-weight: 800; }
.set-line { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 2px dashed #ecd8c4; }
.set-line span { display: block; font-size: 14px; color: #7d645c; }
.danger { background: #ffd0d0; padding: 6px 10px; }
.error-list { color: #a33b32; padding-left: 18px; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ink); color: white; padding: 12px 18px; border-radius: 999px; font-weight: 800;
  max-width: min(90vw, 520px);
}
.slim { margin-bottom: 12px; }

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
@keyframes blink {
  0%, 42%, 48%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(0.12); }
}
@keyframes float-up {
  from { opacity: 1; transform: translateY(6px); }
  to { opacity: 0; transform: translateY(-26px); }
}
@keyframes rise {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(-40px); opacity: 1; }
}
@keyframes roll { 50% { transform: translateX(-20px) rotate(20deg); } }
@keyframes drift { 50% { transform: translateX(6px); } }

.name-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px; font-weight: 800;
}
.name-bar strong { font-size: 24px; }
.name-bar button, .name-picks button, .name-form button {
  border: var(--line); border-radius: 999px; background: white;
  box-shadow: 3px 3px 0 var(--ink); padding: 8px 14px; font-weight: 800; min-height: 44px;
}
.name-picks, .name-form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.name-form input {
  flex: 1; min-width: 140px; border: var(--line); border-radius: 16px; padding: 10px 12px; font-size: 16px; background: white;
}
.name-picks button.is-on, .name-form button { background: var(--sun); }

@media (max-width: 800px) {
  .shell { padding: 12px 12px calc(28px + env(safe-area-inset-bottom)); }
  .topbar, .import-layout, .stat-grid { grid-template-columns: 1fr; }
  .brand h1 { font-size: 26px; }
  .entry-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .entry, .tab, .option, .card button { min-height: 48px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .tab { flex: 0 0 auto; }
  .scene { height: 340px; }
  .window-frame { width: 116px; height: 86px; left: 10px; top: 10px; border-width: 6px; }
  .picture, .shelf { display: none; }
  .plant { left: 12px; transform: scale(0.85); transform-origin: left bottom; }
  .pet-hit { width: 180px; bottom: 58px; }
  .mood-line, .growth-chip { max-width: 46%; font-size: 12px; }
  .question-card h2, .result-card h2 { font-size: 24px; }
  .card-grid { grid-template-columns: 1fr; }
  .result-actions { flex-direction: column; }
  .quiz-top { flex-wrap: wrap; }
  textarea { font-size: 16px; }
}