:root {
  color-scheme: dark;
  --ink: #f7f0e8;
  --muted: #b9b8c4;
  --rose: #eeada8;
  --gold: #f6d596;
  --line: rgba(255, 244, 231, .17);
  --glass: rgba(22, 23, 34, .86);
  --deep: #191a28;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  color: var(--ink);
  background: #12131e;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.app-shell { min-height: 100dvh; display: grid; place-items: center; padding: 14px; }
.game-frame {
  position: relative;
  width: min(100%, 460px);
  height: min(930px, calc(100dvh - 28px));
  min-height: 570px;
  overflow: hidden;
  border: 1px solid rgba(246, 213, 150, .26);
  border-radius: 28px;
  background: var(--deep);
  box-shadow: 0 24px 90px rgba(0,0,0,.56), 0 0 0 7px rgba(246, 213, 150, .05);
  isolation: isolate;
}
#screen { height: calc(100% - 126px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8d7974 transparent; }
.topbar {
  height: 66px; padding: 0 21px; display: flex; justify-content: space-between; align-items: center;
  background: #1c1d2d; border-bottom: 1px solid var(--line); gap: 12px;
}
.brand { display:flex; align-items:center; gap: 8px; font-weight: 750; font-size: 14px; letter-spacing: .04em; white-space: nowrap; }
.brand-mark { font-size: 22px; color: var(--gold); }
.romance-entry { color:var(--rose); text-decoration:none; border:1px solid rgba(238,173,168,.4); border-radius:99px; padding:5px 8px; font-size:12px; letter-spacing:0; }
.romance-cover-entry { display:block; text-align:center; text-decoration:none; font-size:14px; }
.top-stats { display: flex; gap: 7px; align-items: center; }
.stat-pill { font-size: 11px; white-space: nowrap; border: 1px solid var(--line); border-radius: 99px; padding: 6px 8px; color: var(--gold); background: rgba(255,255,255,.04); }
.bottom-nav {
  height: 60px; display: flex; align-items: stretch; border-top: 1px solid var(--line);
  background: #1c1d2d; padding: 2px 8px env(safe-area-inset-bottom, 0px);
}
.nav-item { flex:1; border:0; background:transparent; color:#9696a7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:10px; }
.nav-item.active { color: var(--gold); }
.nav-icon { font-size: 21px; line-height: 1.1; }
.scene, .cover { position: relative; min-height: 100%; overflow: hidden; background: #202333; }
.scene-bg, .cover-bg { position: absolute; inset: 0; background-image: linear-gradient(to bottom, rgba(13,17,30,.15), rgba(18,19,30,.18) 36%, rgba(16,18,27,.96) 90%), url("assets/hex-library.png"); background-position: center; background-size: cover; }
.scene-bg.evening { filter: saturate(.83) sepia(.13) brightness(.72); }
.portrait { position: absolute; z-index: 1; width: min(85%, 380px); max-height: 66%; object-fit: contain; object-position: center bottom; bottom: 185px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 18px 25px rgba(9,9,15,.5)); }
.scene-label { position:absolute; z-index:2; top:18px; left:20px; font-size:10px; letter-spacing:.15em; color:#f9e6c7; padding:7px 10px; border:1px solid rgba(255,244,226,.38); border-radius:30px; background:rgba(31,29,39,.52); }
.dialogue-wrap { position:absolute; z-index:3; bottom:0; left:0; right:0; padding: 18px 18px 22px; background:linear-gradient(to bottom, transparent, rgba(15,17,28,.93) 18%); }
.dialogue { border:1px solid rgba(249,225,197,.25); background:rgba(28,28,39,.84); backdrop-filter:blur(18px); border-radius:19px; padding:19px; box-shadow:0 15px 34px rgba(0,0,0,.23); }
.speaker { color: var(--gold); font-size:13px; font-weight:750; margin-bottom:10px; }
.speaker.system { color:#a9d7db; }
.dialogue p { margin:0; line-height:1.75; min-height:72px; font-size:15px; white-space:pre-wrap; }
.dialogue .hint { margin-top:8px; font-size:11px; min-height:0; color:#d0bfb0; }
.primary-btn, .secondary-btn, .option, .choice-btn, .shop-item, .small-btn { transition: transform .15s, background .15s, border-color .15s; }
.primary-btn:hover, .secondary-btn:hover, .option:hover, .choice-btn:hover, .shop-item:hover, .small-btn:hover { transform:translateY(-1px); }
.primary-btn { border:0; border-radius:14px; background:linear-gradient(135deg, #f9dab6, #e9a99c); color:#2f2632; font-weight:800; padding:13px 20px; box-shadow:0 7px 24px rgba(240,173,145,.21); }
.secondary-btn { border:1px solid rgba(247,224,200,.4); border-radius:14px; background:rgba(255,255,255,.06); color:var(--ink); padding:12px 18px; }
.dialogue .primary-btn { width:100%; margin-top:17px; }
.choices { display:grid; gap:9px; margin-top:14px; }
.choice-btn { width:100%; text-align:left; border-radius:11px; border:1px solid rgba(245,214,181,.25); background:rgba(246,209,180,.09); color:var(--ink); padding:11px 13px; line-height:1.5; font-size:13px; }
.choice-btn:hover { border-color:var(--gold); background:rgba(246,209,180,.15); }
.cover { display:flex; flex-direction:column; justify-content:flex-end; padding:26px 22px 36px; }
.cover-bg { opacity:.96; }
.cover .portrait { width:82%; height:68%; bottom:29%; opacity:.97; }
.cover-content { position:relative; z-index:2; text-align:center; padding:17px 11px 0; background:linear-gradient(to bottom, transparent, rgba(15,17,28,.57) 15%, rgba(15,17,28,.93)); }
.eyebrow { font-size:10px; color:var(--gold); letter-spacing:.22em; font-weight:700; }
h1 { margin:9px 0 10px; font-family: "STSong", "Songti SC", serif; font-size:35px; font-weight:750; letter-spacing:.1em; line-height:1.25; }
.subtitle { margin:0 auto 21px; max-width:310px; font-size:13px; color:#e2d4ca; line-height:1.8; }
.cover-actions { display:grid; gap:10px; max-width:310px; margin:auto; }
.cover-actions button { width:100%; }
.quiet { color:var(--muted); font-size:11px; line-height:1.65; }
.cover .quiet { margin-top:20px; }
.setup { min-height:100%; padding:31px 24px; background:linear-gradient(130deg, rgba(29,30,46,.91), rgba(28,28,37,.95)), url("assets/hex-library.png") center/cover; }
.setup-card, .panel { border:1px solid var(--line); background:rgba(29,29,42,.84); border-radius:19px; padding:22px; box-shadow:0 10px 35px rgba(0,0,0,.15); }
.setup-card { margin-top:22px; }
.section-kicker { color:var(--gold); font-size:11px; letter-spacing:.16em; font-weight:800; margin:0 0 9px; }
.section-title { margin:0 0 13px; font-family:"STSong", "Songti SC", serif; font-size:26px; line-height:1.3; }
.field-label { display:block; margin:18px 0 8px; font-size:13px; color:#e9d7ca; }
.name-input { width:100%; border-radius:12px; border:1px solid rgba(246,213,150,.38); background:rgba(6,8,18,.38); color:var(--ink); padding:13px; font-size:15px; }
.setup-card .primary-btn { margin-top:22px; width:100%; }
.back-link { background:none; border:0; padding:0; color:#d8c1b4; font-size:13px; }
.quiz { min-height:100%; background:linear-gradient(150deg, #202539, #1a1b2b 44%, #231d2a); padding:20px 18px 32px; }
.quiz::before { content:""; position:absolute; inset:0 0 auto; height:235px; background:linear-gradient(to bottom, rgba(23,24,37,.09), #202238), url("assets/hex-library.png") center 36%/cover; opacity:.48; pointer-events:none; }
.quiz > * { position:relative; }
.quiz-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:18px; }
.stage-label { font-size:11px; color:#eec9b0; letter-spacing:.1em; font-weight:800; }
.counter { color:var(--gold); font-weight:750; font-size:13px; }
.progress-track { width:100%; height:7px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.13); margin:0 0 25px; }
.progress-fill { height:100%; border-radius:99px; background:linear-gradient(90deg, #c891a1, #f6d596); transition:width .25s; }
.word-card { border:1px solid rgba(255,233,200,.25); background:rgba(33,35,51,.85); backdrop-filter:blur(16px); padding:24px 20px; border-radius:20px; box-shadow:0 17px 35px rgba(0,0,0,.16); }
.word-kicker { color:#c9b6b5; font-size:11px; font-weight:700; letter-spacing:.12em; }
.word { margin:7px 0; color:#ffead0; font-family:Georgia, serif; font-size:37px; font-weight:600; line-height:1.1; overflow-wrap:anywhere; }
.word-meta { font-size:12px; color:#d1b6a9; }
.question { font-size:14px; color:#f9f1eb; font-weight:600; margin:22px 0 11px; line-height:1.6; }
.example { font-family:Georgia, serif; font-size:14px; line-height:1.7; color:#eee4dd; padding:13px 14px; background:rgba(255,255,255,.06); border-left:2px solid #d6aa93; border-radius:0 9px 9px 0; margin:15px 0 0; }
.options { display:grid; gap:9px; margin:15px 0 0; }
.option { text-align:left; display:flex; gap:11px; align-items:center; border:1px solid rgba(247,232,218,.21); border-radius:12px; padding:13px 14px; background:rgba(255,255,255,.055); color:var(--ink); min-height:50px; font-size:14px; }
.option .letter { color:#e8b4a7; font-size:11px; font-weight:800; width:20px; }
.option.correct { background:rgba(102,173,132,.19); border-color:#8dcfa4; }
.option.wrong { background:rgba(210,112,112,.17); border-color:#e09696; }
.option:disabled { cursor:default; transform:none; opacity:.86; }
.feedback { margin-top:18px; border-radius:14px; padding:16px; background:rgba(19,20,30,.65); border:1px solid rgba(255,233,200,.19); }
.feedback.good { border-color:rgba(156,219,179,.5); }
.feedback.bad { border-color:rgba(228,150,150,.55); }
.feedback-title { color:var(--gold); font-weight:800; margin:0 0 8px; font-size:13px; }
.feedback p { margin:7px 0; color:#e4d9d3; line-height:1.65; font-size:12px; }
.feedback .primary-btn { width:100%; margin-top:13px; }
.phase-footer { margin-top:15px; color:#b7adad; font-size:11px; line-height:1.7; }
.summary-screen, .shop-screen, .end-screen { min-height:100%; background:linear-gradient(145deg, #252438, #181a29); padding:26px 20px 34px; }
.summary-hero { text-align:center; padding:27px 20px 22px; border:1px solid rgba(246,213,150,.3); border-radius:20px; background:radial-gradient(circle at top, rgba(234,181,142,.2), rgba(39,35,49,.9) 59%); }
.summary-hero .big-icon { font-size:33px; color:var(--gold); }
.summary-hero h2 { margin:5px 0; font-family:"STSong", "Songti SC", serif; font-size:26px; }
.summary-hero p { margin:8px 0 0; color:#d2c5c1; font-size:12px; line-height:1.7; }
.numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:13px 0; }
.num-card { background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:12px; padding:15px 8px; text-align:center; }
.num-card strong { display:block; color:var(--gold); font-size:21px; margin-bottom:3px; }
.num-card span { color:#c8bdba; font-size:10px; }
.summary-screen .panel { margin-top:14px; }
.panel h3 { margin:0 0 10px; font-size:15px; }
.panel p { margin:0; color:#d9cdca; font-size:12px; line-height:1.75; }
.summary-screen .primary-btn, .shop-screen .primary-btn, .end-screen .primary-btn { width:100%; margin-top:17px; }
.shop-intro { margin-bottom:20px; color:#d1c3c1; font-size:13px; line-height:1.75; }
.shop-grid { display:grid; gap:10px; }
.shop-item { display:flex; gap:13px; align-items:center; width:100%; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--ink); padding:16px; border-radius:14px; text-align:left; }
.shop-item:disabled { opacity:.47; cursor:not-allowed; }
.shop-icon { font-size:26px; width:32px; flex-shrink:0; }
.shop-copy { flex:1; }
.shop-copy strong { display:block; font-size:14px; }
.shop-copy span { display:block; color:#c1b5b5; font-size:11px; margin-top:4px; }
.price { color:var(--gold); font-weight:800; white-space:nowrap; font-size:12px; }
.skip-link { display:block; margin:20px auto 0; border:0; color:#cab9ba; background:transparent; font-size:12px; text-decoration:underline; }
.chat-screen { min-height:100%; padding:20px 16px 27px; background:linear-gradient(145deg, #282739, #1b1e2d); }
.chat-header { display:flex; align-items:center; gap:10px; padding:0 2px 15px; border-bottom:1px solid var(--line); }
.avatar { width:40px; height:40px; border-radius:50%; background:#473847 url("assets/xiaoye-portrait.png") center 10%/cover; border:1px solid rgba(247,225,195,.4); }
.chat-header strong { font-size:15px; }
.chat-header small { display:block; color:#8fd0b1; font-size:10px; margin-top:3px; }
.chat-feed { padding:19px 4px 18px; display:flex; flex-direction:column; gap:11px; min-height:310px; }
.bubble { max-width:83%; padding:12px 14px; line-height:1.6; font-size:13px; white-space:pre-wrap; }
.bubble.xiaoye { align-self:flex-start; background:#363344; border:1px solid rgba(255,255,255,.08); border-radius:4px 15px 15px 15px; }
.bubble.player { align-self:flex-end; background:#aa746e; border-radius:15px 4px 15px 15px; }
.chat-time { align-self:center; font-size:10px; color:#a5a2af; margin-bottom:4px; }
.chat-screen .primary-btn { width:100%; }
.end-screen { display:flex; flex-direction:column; justify-content:center; text-align:center; }
.end-screen .end-portrait { height:220px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 12px 20px rgba(0,0,0,.36)); }
.end-screen h2 { font-family:"STSong", "Songti SC", serif; font-size:28px; margin:9px 0 4px; }
.end-screen p { color:#d6c7c3; font-size:13px; line-height:1.8; margin:8px auto; max-width:315px; }
.end-screen .secondary-btn { width:100%; margin-top:11px; }
.modal { color:var(--ink); width:min(90vw,470px); max-height:min(83dvh,760px); overflow:auto; border:1px solid rgba(246,213,150,.35); border-radius:20px; padding:21px; background:#242332; box-shadow:0 24px 80px #0009; }
.modal::backdrop { background:rgba(4,5,11,.75); backdrop-filter:blur(7px); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.modal h2 { margin:0; font-size:20px; }
.close-btn { width:31px; height:31px; border:0; border-radius:50%; color:var(--ink); background:rgba(255,255,255,.1); font-size:18px; }
.book-filters { display:flex; gap:7px; margin:14px 0; }
.small-btn { background:rgba(255,255,255,.07); color:#e6dcd5; border:1px solid var(--line); border-radius:9px; padding:7px 12px; font-size:11px; }
.small-btn.selected { background:#a97570; color:white; }
.book-list { display:grid; gap:8px; }
.book-row { background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:10px; padding:11px 12px; }
.book-row strong { font-family:Georgia,serif; color:var(--gold); font-size:16px; }
.book-row span { display:block; color:#d3c7c2; font-size:11px; margin-top:5px; line-height:1.5; }
.modal p { color:#d8cbc9; font-size:12px; line-height:1.75; }
.modal .secondary-btn { margin-top:15px; width:100%; }
.toast { position:fixed; z-index:100; bottom:28px; left:50%; transform:translateX(-50%) translateY(15px); padding:10px 16px; border-radius:12px; color:#28232a; background:#f6d596; box-shadow:0 10px 36px #0006; opacity:0; pointer-events:none; transition:.2s; font-size:12px; white-space:nowrap; }
.toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width: 600px) {
  .app-shell { padding:0; }
  .game-frame { border-radius:0; border:0; width:100%; height:100dvh; min-height:560px; box-shadow:none; }
  .topbar { height:59px; }
  #screen { height:calc(100% - 119px - env(safe-area-inset-bottom, 0px)); }
  .bottom-nav { height:60px; }
}
@media (max-height: 700px) {
  .portrait { max-height:53%; bottom:175px; }
  .dialogue { padding:14px; }
  .dialogue p { min-height:55px; font-size:13px; }
  .cover .portrait { height:57%; bottom:37%; }
  .cover h1 { font-size:29px; }
}

/* Day-one exploration keeps the original warm library visual direction. */
.scene { display:flex; flex-direction:column; justify-content:flex-end; padding-top:clamp(230px, 37vh, 320px); }
.scene .portrait { top:52px; bottom:auto; height:min(55vh, 390px); max-height:none; }
.scene .dialogue-wrap { position:relative; padding-top:18px; }
.dialogue p { font-size:16px; }
.choice-btn { font-size:14px; padding:12px 13px; }
.choice-btn:hover, .option:hover, .primary-btn:hover, .secondary-btn:hover, .small-btn:hover { transform:none; }
.scene-return { display:block; width:100%; padding:12px 0 0; margin-top:4px; color:#cdbdbc; background:none; border:0; font-size:12px; }
.quiet, .phase-footer, .hub-footnote { font-size:12px; }
.section-kicker { font-size:12px; }
.nav-item { font-size:12px; }
.small-btn { font-size:13px; min-height:36px; }
.primary-btn:disabled { opacity:.45; cursor:not-allowed; }
.puzzle-screen .primary-btn { width:100%; margin-top:16px; }
.hub-screen { min-height:100%; background:#1b1e2e; }
.hub-hero { position:relative; min-height:265px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.hub-photo { position:absolute; inset:0; background:linear-gradient(180deg, #11172866, #1b1e2e 98%), url('assets/hex-library.png') center 36%/cover; }
.hub-heading { position:relative; padding:24px 20px 12px; text-shadow:0 2px 12px #0008; }
.hub-heading h2 { margin:0 0 7px; font-family:'STSong','Songti SC',serif; font-size:29px; letter-spacing:.03em; }
.hub-heading p:not(.section-kicker) { color:#e6d7ca; font-size:14px; margin:0; }
.hub-companion { position:relative; display:flex; gap:11px; align-items:center; padding:14px 20px 19px; }
.hub-companion .avatar { flex-shrink:0; width:45px; height:45px; }
.hub-companion p { color:#ecded2; font-size:14px; line-height:1.7; margin:0; }
.hub-body { padding:0 18px 24px; }
.update-note { display:flex; justify-content:space-between; gap:10px; align-items:center; background:#343348; border:1px solid #ba94854d; border-radius:10px; padding:11px 12px; margin-bottom:13px; font-size:12px; line-height:1.6; color:#f6dbb5; }
.update-note button { color:inherit; border:0; background:none; font-size:22px; padding:0 5px; }
.study-card { display:flex; width:100%; align-items:center; gap:13px; text-align:left; background:linear-gradient(130deg,#f2d6b7,#dea596); border:0; padding:17px 15px; border-radius:17px; color:#32252c; box-shadow:0 8px 26px #b6835924; }
.study-card strong { display:block; font-size:16px; line-height:1.45; }
.study-card small { display:block; margin-top:5px; font-size:12px; color:#725153; }
.study-symbol { font-size:28px; }
.card-arrow { margin-left:auto; font-size:28px; }
.hub-section-head { display:flex; justify-content:space-between; align-items:center; margin:23px 1px 12px; }
.hub-section-head h3 { font-size:16px; margin:0; }
.hub-section-head span { font-size:12px; color:#c2aba1; }
.event-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.event-card { padding:15px 13px; text-align:left; color:var(--ink); background:linear-gradient(145deg,#303046,#25283a); border:1px solid #f0d7c129; border-radius:15px; transition:transform .15s, border-color .15s; min-width:0; }
.event-card:hover:not(:disabled) { border-color:#ddba92; }
.event-card-top { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:10px; }
.event-icon { font-size:23px; color:#f1c998; line-height:1; }
.event-badge { color:#e2b8a4; font-size:11px; line-height:1.4; }
.event-card small { display:block; color:#b7b7c3; font-size:12px; margin-bottom:6px; }
.event-card strong { display:block; font-size:15px; line-height:1.5; }
.event-card p { font-size:12px; color:#c9bec0; line-height:1.65; margin:7px 0 0; }
.event-card.locked { opacity:.48; cursor:default; }
.event-card.done { border-color:#acc5b44d; background:linear-gradient(145deg,#2b3a40,#252d3c); }
.event-card.done .event-badge { color:#a6cbb8; }
.journal-teaser { display:flex; gap:10px; align-items:center; margin-top:18px; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.journal-teaser > span { color:var(--gold); font-size:23px; }
.journal-teaser p { flex:1; font-size:12px; line-height:1.7; color:#c9bcbc; margin:0; }
.hub-footnote { color:#a7a5b7; line-height:1.7; margin-bottom:0; }
.puzzle-screen { min-height:100%; padding:22px 20px 30px; background:linear-gradient(135deg,#292b42,#1c1e2e 60%,#2b2434); }
.puzzle-screen .back-link { margin-bottom:24px; }
.puzzle-intro { padding:17px; border:1px solid var(--line); background:#1b1c2a8c; border-radius:15px; margin:15px 0 21px; }
.puzzle-intro > span { color:var(--gold); font-size:13px; font-weight:700; }
.puzzle-intro p { font-size:15px; line-height:1.8; margin:7px 0 0; white-space:pre-wrap; }
.paper-fragment { background:#e8d7be; border-radius:6px 15px 15px 6px; padding:20px; color:#3b4961; border-left:4px solid #c09872; margin-bottom:16px; }
.paper-fragment p { font-family:'STSong','Songti SC',serif; font-size:23px; margin:11px 0; }
.paper-fragment small, .paper-fragment span { font-size:12px; color:#706755; }
.fragment-grid { display:grid; gap:10px; }
.fragment { background:#f6e3ca0a; border:1px solid #dccab348; color:#efe2d7; padding:16px; text-align:left; border-radius:10px; }
.fragment strong { display:block; font-size:15px; font-weight:500; line-height:1.5; }
.fragment small { display:block; font-size:12px; color:#b9aca9; margin-top:7px; }
.fragment.selected { border-color:#f6d596; background:#f6d59612; }
.puzzle-response { padding:14px 15px; margin-top:14px; border-radius:11px; border:1px solid #ecc0a04d; background:#eabb9012; font-size:14px; line-height:1.7; }
.puzzle-response.good { border-color:#99c6b35e; background:#85c1a315; }
.puzzle-response .small-btn { margin-top:10px; }
.puzzle-actions { display:flex; gap:9px; justify-content:center; margin:17px 0; flex-wrap:wrap; }
.lamp-console { border:1px solid #c7a27a4d; border-radius:17px; padding:27px 17px; background:#191b2b; text-align:center; }
.light-row { display:flex; justify-content:center; gap:28px; margin:6px 0 25px; }
.light { display:block; width:29px; height:29px; border-radius:50%; background:#353848; border:2px solid #5a5360; }
.light.on { background:#ffe1a6; border-color:#f7d19b; box-shadow:0 0 20px #f6d59683; }
.lamp-console p { font-size:14px; color:#c5b4ac; }
.switch-row { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.desk-memory { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.desk-memory > div { border:1px solid var(--line); border-radius:14px; padding:16px 13px; background:#383449; }
.desk-memory h3 { color:var(--gold); font-size:15px; margin:0 0 18px; }
.desk-memory p { font-size:14px; color:#e0d2c9; }
.puzzle-note { color:#c5b7b4; font-size:13px; line-height:1.7; text-align:center; }
.sorting-list { display:grid; gap:10px; }
.sort-item { padding:15px; border:1px solid var(--line); border-radius:12px; background:#ffffff06; }
.sort-item strong { display:block; font-size:15px; font-weight:600; margin-bottom:11px; }
.sort-item > div { display:flex; gap:8px; }
.sort-item .small-btn { flex:1; }
.memory-hint { margin-top:14px; font-size:13px; padding:13px; background:#ffffff0b; border-radius:9px; line-height:1.7; }
.flight-console { border:1px solid var(--line); padding:16px; border-radius:17px; background:#171c2d; }
.wind-label { margin:0; font-size:13px; color:#d4b6a2; }
.flight-area { position:relative; height:120px; border-bottom:1px dashed #b4b9c05c; margin:8px 0 16px; overflow:hidden; }
.paper-plane { position:absolute; left:12px; top:45px; color:#f4d9b8; font-size:32px; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.paper-plane.flew { transform:translate(185px,-28px) rotate(-13deg); }
.flight-target { position:absolute; right:5px; bottom:12px; font-size:13px; color:#bab7c3; padding:9px; border:1px solid #9994a161; border-radius:5px; }
.direction-row { display:flex; gap:8px; }
.direction-row .small-btn { flex:1; }
.power-track { height:18px; position:relative; background:#383b4e; border-radius:99px; margin:17px 6px 8px; }
.power-zone { position:absolute; left:40%; width:30%; height:100%; background:#d6ab7085; }
.power-marker { position:absolute; left:50%; top:-5px; width:5px; height:28px; background:#fff4d4; border-radius:2px; transform:translateX(-50%); }
.power-label { display:flex; justify-content:space-between; font-size:12px; color:#aca3ae; }
.quiz-count { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:#d5beb0; margin:0 0 10px; }
.quiz { position:relative; }
.hidden-screen { min-height:100%; padding:26px 20px 32px; background:linear-gradient(150deg,#373045,#1c2031); }
.hidden-screen .panel { margin-top:18px; }
.hidden-screen .primary-btn { width:100%; margin-top:20px; }
.handbook { padding:22px 20px; background:#eddfc8; border-radius:5px 15px 15px 5px; border-left:6px solid #9a765c; color:#4a3c43; box-shadow:0 14px 36px #090a122e; margin-top:20px; }
.handbook h3 { font-family:'STSong','Songti SC',serif; margin:0 0 16px; font-size:20px; }
.handbook-line { display:flex; gap:11px; align-items:center; border-bottom:1px solid #78615829; padding:5px 0; }
.handbook-line span { font-size:23px; color:#977157; }
.handbook-line p { font-size:14px; margin:7px 0; }
.handbook-empty { border:1px dashed #a5847461; color:#987362; font-size:14px; padding:20px; margin-top:17px; text-align:center; }
.final-note p { font-size:17px; line-height:1.9; font-family:'STSong','Songti SC',serif; }
.final-note > span { display:block; text-align:right; font-size:14px; color:#8c705f; }
.memory-list { display:grid; gap:12px; }
.memory-card { display:flex; align-items:flex-start; gap:14px; padding:17px 14px; border:1px dashed #a199ac52; border-radius:13px; opacity:.65; }
.memory-card.collected { border-style:solid; border-color:#dfc4a34d; background:#dcb38a0a; opacity:1; }
.memory-card.highlighted { border-color:#f6d596; }
.memory-icon { color:var(--gold); font-size:25px; flex-shrink:0; }
.memory-card small { color:#baaaac; font-size:12px; }
.memory-card h3 { color:#f0d5b5; margin:6px 0 4px; font-size:15px; }
.memory-card p { margin:0; font-size:13px; }
.modal .primary-btn { width:100%; margin-top:16px; }
.end-screen { justify-content:flex-start; }
.end-screen .end-portrait { flex-shrink:0; height:180px; }
.end-screen h2 { font-size:27px; }
.end-screen .skip-link { margin-top:17px; }
@media (max-width:360px) {
  .topbar { padding:0 12px; gap:6px; }
  .brand { font-size:12px; gap:5px; }
  .stat-pill { padding:5px 6px; }
  .event-card { padding:13px 10px; }
  .event-card strong { font-size:14px; }
  .sort-item > div { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
}