:root {
  --paper: #fff8f2;
  --surface: #fffdfb;
  --ink: #58424c;
  --muted: #755d65;
  --accent: #8d3e55;
  --line: #ead6d8;
  --serif: "Arial Rounded MT Bold", "Segoe UI", "Microsoft YaHei", sans-serif;
  --sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  font-family: var(--sans);
  background: #f3e4e7;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
}
body[data-mood="rose"] {
  --paper: #fff3f5;
}
body[data-mood="plum"] {
  --paper: #f7f3fc;
}
body[data-mood="light"] {
  --paper: #f4faf7;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  color: inherit;
  font: inherit;
  cursor: pointer;
  border: 0;
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
a {
  color: var(--accent);
  overflow-wrap: anywhere;
}
p {
  line-height: 1.9;
}
h1,
h2,
h3,
p,
blockquote {
  margin-top: 0;
}
em {
  font-style: normal;
  color: var(--accent);
}
.game-frame {
  max-width: 480px;
  margin: 24px auto;
  padding: 30px 28px 88px;
  background: var(--paper);
  border-radius: 30px;
  box-shadow: 0 14px 50px #a35c7414;
}
.game-logo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 16px;
  gap: 12px;
}
.game-logo b {
  font: 800 21px var(--serif);
}
.game-logo span {
  color: var(--accent);
}
.game-logo small {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.eyebrow,
.section-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.11em;
  color: var(--accent);
  line-height: 1.8;
}
.intro-head {
  margin: 26px 0 20px;
  text-align: center;
}
.intro-head h1 {
  font: 850 43px/1.25 var(--serif);
  letter-spacing: -0.025em;
  margin: 16px 0;
}
.intro-head p {
  color: var(--muted);
  font-size: 14px;
}
.question-mark {
  color: var(--accent);
}
.intro-comic {
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 5px 0 #ead6d880;
  aspect-ratio: 3/2;
}
.manga-board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: contain;
}
.entry-question {
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  margin: 28px 0 15px;
}
.gender-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.gender-entry button {
  padding: 19px 16px;
  background: var(--surface);
  border: 1px solid #e0bdc8;
  border-radius: 20px;
  box-shadow: 0 4px 0 #e5c8d1;
  text-align: left;
  min-height: 100px;
}
.gender-entry b {
  display: block;
  font: 21px var(--serif);
  font-weight: 750;
}
.gender-entry small {
  display: block;
  font-size: 11px;
  margin-top: 16px;
  line-height: 1.6;
}
.mini-tags {
  display: flex;
  justify-content: center;
  gap: 13px;
  font-size: 10px;
  color: var(--muted);
  margin: 23px 0 14px;
}
.tiny-note {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1.9;
}
.play-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.back-button {
  min-height: 44px;
  min-width: 74px;
  background: transparent;
  padding: 10px 5px 10px 0;
  text-align: left;
  color: var(--muted);
  font-size: 11px;
}
.chapter-tag {
  font-size: 10px;
  color: var(--accent);
  padding: 7px 10px;
  background: #f9e8ed;
  border-radius: 20px;
}
.round-number {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.round-number b {
  font: 24px var(--serif);
  color: var(--ink);
}
.level-track {
  display: flex;
  gap: 3px;
  margin: 10px 0 22px;
}
.level-track i {
  height: 7px;
  border-radius: 8px;
  flex: 1;
  background: var(--line);
}
.level-track .done,
.level-track .current {
  background: var(--accent);
}
.route-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 12px;
}
.story-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 5px 0 #ead6d859;
  overflow: hidden;
}
.scene-context {
  padding: 18px 17px 20px;
  font-size: 15px;
  line-height: 1.9;
  text-wrap: pretty;
}
.scene-caption {
  margin: 0 0 10px;
}
.scene-caption:last-child {
  margin-bottom: 0;
}
.phone-message {
  padding: 11px 14px;
  background: #eff7f0;
  border: 1px solid #d8e8dc;
  border-radius: 6px 18px 18px;
  margin: 9px 0 13px;
  font-size: 15px;
}
.phone-message::after {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  margin-top: 8px;
  background: #aac2b0;
  opacity: 0.55;
}
.decision h2 {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 23px 0 13px;
}
.choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  width: 100%;
  min-height: 63px;
  padding: 14px 13px;
  background: var(--surface);
  border: 1px solid #e6c8d0;
  border-radius: 18px;
  box-shadow: 0 4px 0 #eddae0;
  transition: transform .12s ease, background .12s ease;
}
.choice-copy {
  flex: 1;
  font-size: 14px;
  line-height: 1.7;
}
.choice-dot {
  width: 11px;
  height: 11px;
  border: 2px solid #cfa6b3;
  border-radius: 50%;
  flex-shrink: 0;
}
.choice-arrow {
  color: #aa7589;
  font-size: 17px;
}
.choice-reason {
  display: block;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #e2d8cf;
  font-size: 11px;
  line-height: 1.7;
  color: #755d65;
}
.choice.picked {
  background: #f8dfe8;
  border-color: var(--accent);
}
.previous-choice .choice-dot {
  background: #cfa6b3;
}
.previous-label {
  display: inline-block;
  margin-left: 8px;
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
}
.report-back {
  margin-top: 14px;
}
.report-intro {
  margin: 24px 0;
}
.report-intro h1 {
  font: 800 36px/1.3 var(--serif);
  margin: 18px 0;
}
.report-intro p {
  font-size: 12px;
  color: var(--muted);
}
.personality-card {
  padding: 22px;
  background: linear-gradient(150deg, #fce9ed, #fff5e9);
  border: 2px solid #f0d1d9;
  border-radius: 28px;
  box-shadow: 0 7px 0 #ecd6dd;
  text-align: center;
}
.card-code {
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #815765;
}
.personality-character {
  display: block;
  width: min(230px, 100%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 12px auto 4px;
  filter: drop-shadow(0 8px 12px #893a4d14);
}
.personality-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; padding-top: 18px; }
.personality-gallery article { text-align: center; min-width: 0; }
.personality-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.personality-gallery h3 { font-size: 13px; margin: 8px 0; }
.personality-gallery p { font-size: 12px; line-height: 1.7; }
.personality-card h2 {
  font: 800 28px var(--serif);
  margin: 12px 0;
}
.type-english {
  font-size: 10px;
  color: #77505c;
  letter-spacing: 0.1em;
}
.personality-quote {
  font: 16px/1.9 var(--serif);
  margin: 21px 0;
  color: #593b45;
}
.score-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #c8aeb3;
  padding-top: 16px;
  font-size: 12px;
}
.score-line b {
  font: 39px var(--serif);
}
.score-line small {
  font: 12px var(--sans);
}

.report-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 18px;
  margin-top: 22px;
}
.report-section h2 {
  font: 750 22px var(--serif);
  margin: 12px 0 20px;
}
.report-section h2 > small {
  font: 12px var(--sans);
}
.report-section h3 {
  font-size: 14px;
  font-weight: 500;
  margin: 18px 0 12px;
}
.report-section p {
  font-size: 13px;
  color: #64515a;
}
.report-section blockquote {
  font: 18px/1.8 var(--serif);
  color: var(--accent);
  margin: 20px 0;
}
.report-section ol {
  padding-left: 21px;
  font-size: 13px;
  line-height: 1.9;
}
.report-section li {
  margin-bottom: 12px;
}
.micro-note {
  font-size: 11px !important;
  color: var(--muted) !important;
}
.metric {
  margin: 17px 0;
}
.metric > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 13px;
  font-size: 13px;
}
.metric small {
  font-size: 10px;
  font-weight: 400;
}
.meter {
  height: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: #f1e6eb;
  margin-top: 10px;
}
.meter i {
  display: block;
  height: 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, #c47391, #8d3e55);
}
.evidence-item {
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.report-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 27px 0 15px;
}
.report-actions button {
  min-height: 50px;
  border-radius: 18px;
}
.primary {
  background: var(--accent);
  color: #fffdfb;
  box-shadow: 0 4px 0 #663044;
}
.secondary {
  background: var(--surface);
  border: 1px solid var(--line);
}
.text-button {
  background: transparent;
  color: var(--accent);
}
.game-frame > details {
  margin: 23px 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
summary {
  min-height: 44px;
  cursor: pointer;
  padding: 12px 0;
  font-size: 13px;
  line-height: 1.7;
}
details p {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.scene-review {
  border-bottom: 1px solid var(--line);
  padding: 0 8px;
}
.scene-review > summary {
  font-size: 12px;
}
.scene-review > p {
  font-size: 13px;
}
.sound-toggle {
  position: static;
  z-index: 5;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff9fceF;
  font-size: 12px;
  box-shadow: 0 4px 0 #ead6d8;
}
.game-toolbar {
  max-width: 480px;
  margin: 20px auto 0;
  padding: 8px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  border-radius: 24px 24px 0 0;
}
.game-toolbar + #app .game-frame { margin-top: 0; }
@media (max-width:600px) { .game-toolbar { margin: 0; max-width: none; border-radius: 0; padding-top: max(8px, env(safe-area-inset-top)); } }
dialog {
  border-radius: 26px;
  border: 1px solid var(--line);
  width: calc(100% - 24px);
  max-width: 430px;
  max-height: 90dvh;
  padding: 20px;
  background: var(--paper);
  color: var(--ink);
}
dialog::backdrop {
  background: #58424c77;
  backdrop-filter: blur(5px);
}
dialog h2 {
  font: 23px var(--serif);
  margin-right: 44px;
}
dialog p {
  font-size: 12px;
}
#poster-image {
  display: block;
  width: 100%;
  height: auto;
}
#close-poster {
  float: right;
  min-width: 44px;
  min-height: 44px;
  font-size: 28px;
  background: transparent;
}
#poster-download {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 15px;
  margin-top: 15px;
}
#toast {
  position: fixed;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  background: var(--ink);
  color: var(--surface);
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 12px;
  max-width: calc(100vw - 30px);
  line-height: 1.8;
  text-align: center;
}
#toast.show {
  opacity: 1;
}
#app[aria-busy="true"] {
  cursor: wait;
}
.fade-in {
  animation: v2fade 0.22s ease-out;
}
@keyframes v2fade {
  from {
    opacity: 0.55;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .game-frame {
    margin: 0;
    min-height: 100dvh;
    max-width: none;
    padding: 24px 23px calc(88px + env(safe-area-inset-bottom));
    box-shadow: none;
    border-radius: 0;
  }
  .play {
    padding: 20px 19px calc(88px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 360px) {
  .game-frame {
    padding-inline: 19px;
  }
  .play {
    padding-inline: 16px;
  }
  .intro-head h1 {
    font-size: 37px;
  }
  .gender-entry {
    gap: 10px;
  }
  .gender-entry button {
    padding-inline: 12px;
  }
  .gender-entry small {
    font-size: 10px;
  }
  .scene-context {
    font-size: 14px;
    padding: 15px;
  }
  .phone-message {
    font-size: 14px;
  }
  .choice-copy {
    font-size: 13px;
  }
  .chapter-tag {
    font-size: 9px;
  }
  .route-label {
    font-size: 9px;
  }
  .report-intro h1 {
    font-size: 34px;
  }
  .personality-card h2 {
    font-size: 27px;
  }
  .personality-card {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Soft character-world interactions stay brief and never explain choices. */
.gender-entry button:first-child { background: #fce8ed; }
.gender-entry button:last-child { background: #eee9fa; }
.gender-entry button:active, .choice:active, .primary:active { transform: translateY(3px); box-shadow: none; }
.mini-tags span { background: #f7e8ed; border-radius: 20px; padding: 6px 9px; white-space: nowrap; }
.mini-tags { gap: 6px; }
.report-intro { text-align: center; }
.personality-gallery article { background: #fff9f5; border: 1px solid var(--line); border-radius: 22px; padding: 10px; }
.report-actions .secondary { border-color: #d9b7c4; box-shadow: 0 3px 0 #eddae0; }
#poster-download { border-radius: 18px; }
.game-frame > details { background: #fffdfb; border: 1px solid var(--line); border-radius: 20px; padding: 6px 16px; }
@media (max-width: 360px) { .report-section { padding: 18px 14px; } .mini-tags { font-size: 9px; } }

.story-panel{position:relative}.scene-stamp{position:absolute;z-index:2;right:12px;top:12px;padding:7px 11px;border-radius:20px;background:#fff8eeef;color:#704950;border:1px solid #fff;font-size:12px;font-weight:800}
#app{overflow-x:clip}.scene-arriving{animation:scene-forward .34s ease-out both}.scene-returning{animation:scene-back .34s ease-out both}.scene-arriving .choice{animation:choice-arrive .36s ease-out both;animation-delay:.12s}.scene-arriving .choice:nth-child(2){animation-delay:.17s}.scene-arriving .choice:nth-child(3){animation-delay:.22s}
@keyframes scene-forward{from{opacity:.3;transform:translateX(24px) rotate(.7deg)}to{opacity:1;transform:none}}@keyframes scene-back{from{opacity:.3;transform:translateX(-24px) rotate(-.7deg)}to{opacity:1;transform:none}}@keyframes choice-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.observation-radar{width:100%;max-width:360px;height:auto;display:block;margin:0 auto;overflow:visible}.radar-shape{animation:radar-appear .65s ease-out both;transform-origin:180px 165px}@keyframes radar-appear{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.radar-note{font-size:12px!important;text-align:center;color:#917c84}.radar-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.radar-legend .metric{margin:0;padding:12px 9px;background:#fff8f4;border:1px solid #eadbdc;border-radius:14px;display:flex;flex-direction:column;gap:7px;font-size:12px}.radar-legend .metric b{font-size:19px;color:#9c536c}.radar-legend .metric small{font-size:10px;font-weight:400;color:#8b747c}
.summon-dialog{border:0;padding:0;background:transparent;color:#fff7ec;width:min(390px,96vw);max-width:96vw;max-height:94dvh;overflow:visible}.summon-dialog::backdrop{background:radial-gradient(ellipse at center,#754d76ed,#211e35f5)}.summon-skip{position:absolute;right:10px;top:0;z-index:5;min-height:44px;padding:0 17px;background:#fff8eeeb;color:#76535e;border:1px solid #ebc9d5;border-radius:24px;font:inherit;font-size:13px}.summon-caption{text-align:center;letter-spacing:3px;font-size:14px;margin:54px 0 14px}.summon-arena{position:relative;perspective:1000px;display:grid;place-items:center;height:min(480px,70dvh);isolation:isolate}.summon-card{position:relative;width:min(270px,73vw);height:min(430px,65dvh);transform-style:preserve-3d;animation:summon-spin 4.8s cubic-bezier(.2,.55,.25,1) forwards;z-index:2}.summon-face{position:absolute;inset:0;backface-visibility:hidden;border:3px solid #f8dcaa;border-radius:24px;overflow:hidden;box-shadow:0 0 25px #ffd6da70,0 12px 30px #170f2955}.summon-back{background:radial-gradient(circle at center,#b26e91,#63446e);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.summon-back::before{content:"";position:absolute;inset:20px;border:1px solid #f7debd80;border-radius:15px}.summon-back b{font-size:100px;color:#ffe6c6;text-shadow:0 0 22px #ffd9b575}.summon-back span{letter-spacing:5px;font-size:16px;color:#ffebcf}.summon-front{transform:rotateY(180deg);background:#fff7ed;color:#58424c}.summon-front .personality-card{box-sizing:border-box;height:100%;margin:0;padding:12px 10px;border:0;border-radius:20px;box-shadow:none;display:flex;flex-direction:column;justify-content:center;align-items:center}.summon-front .personality-character{width:min(170px,25dvh);height:min(170px,25dvh);margin:6px auto;object-fit:contain}.summon-front h2{font-size:23px;margin:6px 0}.summon-front .type-english{font-size:10px;margin:0}.summon-front .card-code{font-size:10px}.summon-front .personality-quote{font-size:12px;line-height:1.5;margin:10px 0}.summon-front .score-line{width:100%;margin-top:6px;padding:10px 0 0;font-size:12px}.summon-front .score-line b{font-size:27px}.summon-halo{position:absolute;width:min(370px,94vw);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,transparent,#ffcfcf50,transparent,#fbe4ac70,transparent,#dce6ff50,transparent);animation:halo-spin 4s linear infinite;filter:blur(9px);z-index:0}.summon-flash{position:absolute;inset:-15px;pointer-events:none;background:radial-gradient(ellipse,#fff1d9aa,transparent 65%);opacity:0;animation:summon-glow 4.8s ease-out both;z-index:3}.summon-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff0c9;box-shadow:0 0 10px #ffecd0;opacity:0;transform:rotate(calc(var(--spark)*30deg)) translateY(-165px);animation:sparkle 4.8s ease-out both;animation-delay:calc(var(--spark)*.015s)}.card-revealed{animation:card-settle .45s ease-out both}
@keyframes summon-spin{0%{transform:scale(.4) rotateY(0deg) rotateZ(-8deg)}28%{transform:scale(.8) rotateY(360deg) rotateZ(3deg)}58%{transform:scale(1.02) rotateY(900deg) rotateZ(-2deg)}76%,100%{transform:scale(1) rotateY(1260deg) rotateZ(0deg)}}@keyframes halo-spin{to{transform:rotate(360deg)}}@keyframes summon-glow{0%,48%,100%{opacity:0}73%{opacity:.65}88%{opacity:.2}}@keyframes sparkle{0%,30%{opacity:0}65%{opacity:.9}100%{opacity:0;transform:rotate(calc(var(--spark)*30deg)) translateY(-205px)}}@keyframes card-settle{from{box-shadow:0 0 32px #ffd6aa;transform:scale(.98)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.scene-arriving,.scene-returning,.choice,.radar-shape,.card-revealed{animation:none!important}.summon-dialog{display:none}}