:root {
  --ink: #191817;
  --paper: #f5f1e8;
  --paper-2: #fffdf8;
  --coral: #ff6847;
  --yellow: #f6c94c;
  --blue: #566fe8;
  --mint: #74c69d;
  --pink: #ef8ca7;
  --line: #272522;
  --muted: #77716a;
  --shadow: 6px 7px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.paper-noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.landing { min-height: 100vh; overflow: hidden; position: relative; background: var(--paper); }
.landing::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: var(--yellow); right: -150px; top: 14%; opacity: .72; }
.landing::after { content: "色彩干了再合盖"; position: absolute; left: -50px; bottom: 130px; transform: rotate(-90deg); color: rgba(25,24,23,.18); font-weight: 900; letter-spacing: .2em; }
.landing-nav, .game-header, .ending-header { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding: 0 clamp(24px, 5vw, 80px); position: relative; z-index: 2; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--coral); color: #fff; border: 2px solid var(--ink); border-radius: 50% 45% 48% 42%; font-family: serif; font-size: 22px; font-weight: 900; transform: rotate(-7deg); box-shadow: 2px 2px 0 var(--ink); }
.logo > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.logo b { font-size: 16px; letter-spacing: .08em; }
.logo small { font-size: 8px; letter-spacing: .15em; margin-top: 4px; }
.nav-note { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.nav-note span { width: 8px; height: 8px; border-radius: 50%; background: #58ad76; box-shadow: 0 0 0 4px rgba(88,173,118,.18); }

.hero { min-height: calc(100vh - 160px); padding: clamp(52px, 7vw, 102px) clamp(24px, 7vw, 110px) 50px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .78fr); gap: clamp(50px, 8vw, 140px); align-items: center; position: relative; z-index: 1; }
.hero-copy { max-width: 690px; }
.hero-kicker { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.hero-kicker span { padding: 7px 12px; background: var(--ink); color: #fff; transform: rotate(-1.5deg); }
.hero-kicker i { width: 34px; height: 2px; background: var(--ink); }
.hero-kicker b { color: var(--coral); }
.hero h1 { margin: 24px 0 24px; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(64px, 7.8vw, 126px); line-height: .9; letter-spacing: -.07em; font-weight: 900; }
.marker-word { display: inline-block; position: relative; z-index: 1; margin-left: .05em; }
.marker-word::after { content: ""; position: absolute; z-index: -1; height: .25em; left: -.04em; right: -.08em; bottom: .08em; background: var(--yellow); transform: rotate(-2deg); border-radius: 60% 30% 55% 20%; }
.hero-lead { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.9; color: #4f4a45; margin: 0; }
.hero-lead b { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-badges span { border: 1.5px solid var(--ink); background: var(--paper-2); padding: 8px 12px; border-radius: 3px; font-size: 12px; font-weight: 700; box-shadow: 2px 3px 0 rgba(25,24,23,.14); }
.quote-strip { margin-top: 32px; display: inline-flex; align-items: stretch; transform: rotate(-1deg); border: 1.5px solid var(--ink); font-size: 12px; box-shadow: 3px 4px 0 var(--ink); }
.quote-strip b { background: var(--blue); color: #fff; padding: 9px 12px; }
.quote-strip span { background: #fff; padding: 9px 15px; }

.profile-sheet-wrap { position: relative; max-width: 520px; width: 100%; justify-self: center; }
.profile-sheet { padding: clamp(28px, 3vw, 42px); background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 13px 15px 0 var(--ink); transform: rotate(1deg); position: relative; }
.profile-sheet::after { content: ""; position: absolute; width: 70px; height: 50px; right: -16px; bottom: 80px; background: rgba(116,198,157,.55); transform: rotate(-5deg); z-index: -1; }
.tape { width: 100px; height: 30px; background: rgba(246,201,76,.72); position: absolute; z-index: 3; top: -15px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.sheet-heading { display: flex; justify-content: space-between; align-items: start; padding-bottom: 18px; border-bottom: 2px dashed #bdb6aa; }
.sheet-heading span { font: 700 9px/1 monospace; letter-spacing: .12em; color: var(--muted); }
.sheet-heading h2 { font: 900 clamp(21px, 2vw, 29px)/1.2 "STKaiti", "KaiTi", serif; margin: 7px 0 0; }
.stamp { width: 60px; height: 60px; border: 3px double var(--coral); border-radius: 50%; display: grid; place-content: center; text-align: center; color: var(--coral); font: 900 12px/1.05 serif; transform: rotate(12deg); opacity: .9; }
.field-label, .talent-field legend { display: block; font-size: 12px; font-weight: 900; margin: 22px 0 9px; }
.name-row { display: flex; gap: 8px; }
.name-row input { flex: 1; min-width: 0; border: 2px solid var(--ink); background: #fff; padding: 11px 13px; font-size: 15px; font-weight: 800; outline: none; border-radius: 0; }
.name-row input:focus { box-shadow: 0 0 0 4px rgba(86,111,232,.18); }
.name-row button { width: 45px; border: 2px solid var(--ink); background: var(--yellow); cursor: pointer; transition: transform .15s; }
.name-row button:hover { transform: rotate(10deg) scale(1.05); }
.field-tip { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compact-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.compact-field legend { display: block; font-size: 12px; font-weight: 900; margin: 18px 0 8px; }
.segmented-options { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--ink); background: #fff; }
.segmented-options.two { grid-template-columns: repeat(2, 1fr); }
.segmented-options label { position: relative; padding: 9px 4px; text-align: center; font-size: 9px; font-weight: 800; border-right: 1px solid var(--ink); cursor: pointer; }
.segmented-options label:last-child { border-right: 0; }
.segmented-options input { position: absolute; opacity: 0; }
.segmented-options label.selected { background: var(--yellow); box-shadow: inset 0 -3px 0 var(--ink); }
.talent-field { border: 0; padding: 0; margin: 0; }
.talent-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.talent-card { position: relative; border: 1.5px solid #9f998f; background: #fff; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; min-height: 116px; transition: .16s ease; }
.talent-card input { position: absolute; opacity: 0; }
.talent-card:hover { transform: translateY(-3px); }
.talent-card.selected { border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); transform: translateY(-2px); }
.talent-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ink); font: 900 24px/1 serif; margin-bottom: 8px; }
.graphite { background: #d9d5cf; }.palette { background: #efb7c7; }.motion { background: #c8d0fa; }
.talent-card b { display: block; font-size: 12px; }
.talent-card small { display: block; font-size: 9px; color: var(--muted); margin-top: 4px; }
.initial-score { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 19px 0 12px; font-size: 9px; color: var(--muted); }
.initial-score b { background: #ece8df; color: #4d4944; padding: 4px 6px; }
.start-button { width: 100%; border: 2px solid var(--ink); background: var(--coral); color: #fff; min-height: 56px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 900; box-shadow: 5px 6px 0 var(--ink); transition: .15s; }
.start-button b { font-size: 24px; transition: transform .15s; }
.start-button:hover { transform: translate(2px,2px); box-shadow: 3px 4px 0 var(--ink); }
.start-button:hover b { transform: translateX(4px); }
.start-disclaimer { font-size: 9px; color: var(--muted); text-align: center; margin: 13px 0 0; }
.doodle-arrow { position: absolute; right: -100px; bottom: 12px; font: 12px/1.4 "KaiTi", serif; transform: rotate(-6deg); text-align: center; }
.doodle-arrow b { color: var(--coral); }
.landing-footer { min-height: 78px; border-top: 2px solid var(--ink); display: flex; align-items: stretch; position: relative; z-index: 2; }
.landing-footer > div { width: 170px; border-right: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; gap: 10px; }
.landing-footer strong { font: 900 25px/1 Georgia,serif; }
.landing-footer span { max-width: 72px; font-size: 10px; line-height: 1.3; }
.landing-footer p { margin: auto 4vw auto auto; font: 700 10px/1 monospace; color: var(--muted); }

/* Game */
.game-app { --world-a:#efebe3; --world-b:#f7f3eb; --world-image:none; --world-position:center; --scene-accent:var(--yellow); min-height:100vh; background:linear-gradient(145deg,var(--world-a),var(--world-b)); transition:background .85s ease; position:relative; isolation:isolate; overflow:clip; }
.game-app::before { content:""; position:fixed; inset:72px 0 0; z-index:1; pointer-events:none; opacity:.34; background:radial-gradient(circle at 10% 12%,var(--scene-accent) 0 2px,transparent 3px),radial-gradient(circle at 88% 70%,var(--scene-accent) 0 1.5px,transparent 2.5px); background-size:90px 90px,120px 120px; mix-blend-mode:multiply; transition:opacity .7s,background .8s; }
.world-backdrop { position:fixed; inset:72px 0 0; z-index:0; pointer-events:none; overflow:hidden; background:var(--world-b); }
.world-backdrop__image { position:absolute; inset:-4%; background-image:var(--world-image); background-position:var(--world-position); background-size:cover; background-repeat:no-repeat; filter:blur(9px) saturate(.72) contrast(.94); opacity:.68; transform:scale(1.08); will-change:opacity,transform,filter; transition:filter .9s ease,opacity .9s ease,transform 1.4s ease; }
.world-backdrop__wash { position:absolute; inset:0; background:linear-gradient(110deg,rgba(247,243,235,.84) 0%,rgba(247,243,235,.57) 44%,rgba(247,243,235,.72) 100%),linear-gradient(180deg,transparent 0 52%,var(--world-b) 100%); transition:background .85s ease; }
.game-app[data-time="morning"] .world-backdrop__image { filter:blur(8px) saturate(.72) brightness(1.1); }
.game-app[data-time="morning"] .world-backdrop__wash { background:linear-gradient(115deg,rgba(255,250,232,.79),rgba(235,244,238,.55) 48%,rgba(245,241,232,.8)),linear-gradient(180deg,transparent 0 54%,var(--world-b) 100%); }
.game-app[data-time="afternoon"] .world-backdrop__wash { background:linear-gradient(115deg,rgba(255,244,217,.72),rgba(247,239,225,.48) 48%,rgba(243,232,215,.78)),linear-gradient(180deg,transparent 0 54%,var(--world-b) 100%); }
.game-app[data-time="evening"] .world-backdrop__image { filter:blur(8px) saturate(.82) sepia(.08); }
.game-app[data-time="evening"] .world-backdrop__wash { background:linear-gradient(115deg,rgba(244,214,189,.77),rgba(181,162,179,.5) 52%,rgba(68,70,92,.64)),linear-gradient(180deg,transparent 0 48%,var(--world-b) 100%); }
.game-app[data-time="night"] .world-backdrop__image { filter:blur(9px) saturate(.66) brightness(.72) contrast(1.04); opacity:.78; }
.game-app[data-time="night"] .world-backdrop__wash { background:linear-gradient(115deg,rgba(28,38,58,.72),rgba(65,68,95,.46) 52%,rgba(225,225,232,.7)),linear-gradient(180deg,transparent 0 42%,var(--world-b) 100%); }
.ambient-weather { position:fixed; inset:72px 0 0; z-index:1; pointer-events:none; overflow:hidden; }
.ambient-weather i { position:absolute; left:calc(var(--x) * 1%); top:-12%; display:none; }
.ambient-weather[data-weather="rain"] i { display:block; width:1px; height:52px; opacity:.28; background:linear-gradient(transparent,rgba(221,235,244,.95)); transform:rotate(12deg); animation:ambientRain var(--rain-speed) linear infinite; animation-delay:var(--delay); }
.ambient-weather[data-weather="snow"] i { display:block; width:var(--size); height:var(--size); border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 8px rgba(255,255,255,.8); animation:ambientSnow var(--snow-speed) linear infinite; animation-delay:var(--delay); }
.ambient-weather[data-weather="petals"] i { display:block; width:9px; height:5px; border-radius:70% 20% 70% 30%; background:rgba(225,157,151,.58); animation:ambientPetal var(--petal-speed) ease-in infinite; animation-delay:var(--delay); }
.ambient-weather[data-weather="fireflies"] i { display:block; top:calc(var(--y) * 1%); width:4px; height:4px; border-radius:50%; background:#f8dda0; box-shadow:0 0 10px 3px rgba(248,221,160,.48); animation:ambientFirefly var(--fly-speed) ease-in-out infinite alternate; animation-delay:var(--delay); }
.ambient-weather[data-weather="wind"] i:nth-child(3n) { display:block; top:calc(var(--y) * 1%); width:52px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); animation:ambientWind var(--wind-speed) linear infinite; animation-delay:var(--delay); }
.game-app[data-weather="heat"] .world-backdrop__image { animation:ambientHeat 4.8s ease-in-out infinite alternate; }
@keyframes ambientRain { to { transform:translate(-14vw,125vh) rotate(12deg); } }
@keyframes ambientSnow { 50% { margin-left:18px; } to { transform:translateY(118vh) rotate(240deg); } }
@keyframes ambientPetal { 35% { margin-left:26px; transform:rotate(100deg); } to { margin-left:-20px; transform:translateY(118vh) rotate(330deg); } }
@keyframes ambientFirefly { to { transform:translate(26px,-18px) scale(1.45); opacity:.28; } }
@keyframes ambientWind { from { transform:translateX(-115vw); } to { transform:translateX(115vw); } }
@keyframes ambientHeat { to { transform:scale(1.1) translateY(-5px); filter:blur(11px) saturate(.78) brightness(1.06); } }
.game-app[data-scene="spring"] { --world-a:#eee9df; --world-b:#f8efe5; --scene-accent:#f6c94c; }
.game-app[data-scene="summer"] { --world-a:#f3e1c8; --world-b:#f8eee0; --scene-accent:#ff895f; }
.game-app[data-scene="night"] { --world-a:#dfe3ee; --world-b:#edf0f5; --scene-accent:#6579dc; }
.game-app[data-scene="exam"] { --world-a:#eee4de; --world-b:#f6ece8; --scene-accent:#ff6847; }
.game-app[data-scene="travel"] { --world-a:#e6e1f0; --world-b:#f3eef7; --scene-accent:#9376d6; }
.game-app[data-scene="pleinair"] { --world-a:#dfe6dc; --world-b:#edf0e6; --scene-accent:#8fa17d; }
.game-app[data-scene="classroom"] { --world-a:#dfece3; --world-b:#eef4e8; --scene-accent:#74c69d; }
.game-app[data-scene="final"] { --world-a:#eee0dc; --world-b:#f8eae2; --scene-accent:#ff6847; }
.game-app[data-scene="snow"] { --world-a:#e7edf1; --world-b:#f8fbfd; --scene-accent:#b9d9eb; }
.game-header { position: sticky; top: 0; height: 72px; background: rgba(245,241,232,.96); backdrop-filter: blur(10px); z-index: 20; padding: 0 28px; }
.logo.compact .logo-mark { width: 36px; height: 36px; font-size: 18px; }
.term-progress { width: min(47vw, 680px); }
.term-progress-top { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 8px; }
.term-progress-top span { font-weight: 900; color: var(--coral); }
.term-track { height: 7px; border: 1.5px solid var(--ink); background: #fff; position: relative; }
.term-track > i { display: block; width: 0; height: 100%; background: var(--coral); transition: width .5s ease; }
.exam-pin { position: absolute; top: 11px; font-size: 8px; font-weight: 800; color: var(--muted); transform: translateX(-50%); }
.exam-pin::before { content: ""; position: absolute; height: 9px; border-left: 1px dashed var(--ink); left: 50%; top: -13px; }
.exam-pin.joint { left: 38%; }.exam-pin.school { left: 59%; }.exam-pin.gaokao { left: 100%; }
.exam-pin.school.skipped { opacity: .25; text-decoration: line-through; }
.ghost-button { padding: 9px 12px; border: 1.5px solid var(--ink); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.ghost-button:hover { background: var(--ink); color: #fff; }
.game-layout { display:grid; grid-template-columns:250px minmax(520px,1fr) 260px; max-width:1500px; margin:0 auto; gap:18px; padding:28px; position:relative; z-index:2; }
.card { background:rgba(255,253,248,.91); border:1.5px solid var(--ink); box-shadow:3px 4px 0 rgba(25,24,23,.16); backdrop-filter:blur(12px); }
.status-panel, .journal-panel { display: flex; flex-direction: column; gap: 16px; }
.student-card { padding: 18px; }
.student-head { display: flex; align-items: center; gap: 11px; position: relative; }
.avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--yellow); display: grid; place-items: center; font: 900 19px/1 "KaiTi",serif; box-shadow: 2px 2px 0 var(--ink); }
.student-head small { font-size: 8px; color: var(--muted); letter-spacing: .1em; }
.student-head h2 { font-size: 17px; margin: 2px 0; }
.student-head span { font-size: 9px; color: var(--coral); font-weight: 800; }
.mini-stamp { margin-left: auto; border: 1.5px solid var(--blue); color: var(--blue); padding: 5px 3px; font: 900 8px/1 serif; transform: rotate(8deg); }
.motto { font: 12px/1.55 "KaiTi",serif; color: #58534d; border-top: 1px dashed #bbb3a8; padding-top: 12px; margin: 14px 0 0; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }.profile-meta span { border: 1px solid var(--ink); background: #eee9df; padding: 4px 6px; font-size: 7px; font-weight: 800; }
.score-card, .vitals-card, .journal, .collection, .trend-card, .relationship-card { padding: 16px; }
.card-title { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #c9c2b8; padding-bottom: 10px; margin-bottom: 13px; }
.card-title span { font-size: 11px; font-weight: 900; }
.card-title small { font-size: 8px; color: var(--muted); }
.subject-score { margin: 13px 0; }
.subject-score > div:first-child { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 800; }
.subject-score > div:first-child i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ink); margin-right: 5px; }
.subject-score > div:first-child b { font: 900 19px/1 Georgia,serif; }
.subject-score > small { display: block; font-size: 8px; color: var(--muted); margin-top: 5px; }
.score-track { height: 7px; background: #e6e1d9; margin-top: 6px; position: relative; overflow: visible; }
.score-track > i { display: block; height: 100%; width: 50%; transition: width .55s cubic-bezier(.2,.8,.2,1); }
.score-track em { position: absolute; right: 1px; top: -18px; font-size: 9px; color: #278455; font-weight: 900; font-style: normal; opacity: 0; transform: translateY(5px); }
.score-track em.flash { animation: scoreFlash 1.4s ease; }
@keyframes scoreFlash { 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
.sketch-score i, .sketch-dot::before { background: #55514d; }.speed-score i, .speed-dot::before { background: var(--blue); }.color-score i, .color-dot::before { background: var(--coral); }
.total-score { border-top: 1px dashed #bcb5aa; padding-top: 11px; display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; }
.total-score b { font: 900 21px/1 Georgia,serif; }
.culture-score-card { border-color: var(--blue); box-shadow: 3px 4px 0 rgba(86,111,232,.22); }
.culture-subject-row { display: grid; grid-template-columns: 30px 1fr 28px 24px; gap: 7px; align-items: center; margin: 12px 0; font-size: 9px; }
.culture-subject-row > div { height: 8px; background: #e3ded6; border: 1px solid rgba(25,24,23,.35); }
.culture-subject-row i { display: block; height: 100%; background: var(--blue); transition: width .45s ease; }
.culture-subject-row:nth-of-type(3) i { background: var(--coral); }
.culture-subject-row:nth-of-type(4) i { background: var(--mint); }
.culture-subject-row:nth-of-type(5) i { background: var(--yellow); }
.culture-subject-row b { text-align: right; font: 900 11px/1 Georgia,serif; }
.culture-subject-row small { color: var(--muted); font-size: 7px; }
.culture-total { margin-top: 15px; }
.vital-row { display: grid; grid-template-columns: 62px 1fr 26px; gap: 8px; align-items: center; margin: 10px 0; font-size: 9px; }
.vital-row > div { height: 6px; background: #e3ded6; }
.vital-row i { display: block; width: 50%; height: 100%; background: var(--mint); transition: width .4s; }
.vital-row:nth-of-type(3) i { background: var(--pink); }.vital-row:nth-of-type(4) i { background: var(--blue); }
.vital-row.friendship-row i { background: var(--yellow); }
.vital-row b { text-align: right; font: 800 10px/1 monospace; }
.rank-summary { border-top: 1px dashed #bcb5aa; margin-top: 13px; padding-top: 12px; display: flex; gap: 9px; align-items: center; }
.rank-summary > span { min-width: 70px; }
.rank-summary small { display: block; font-size: 7px; color: var(--muted); }
.rank-summary b { font: 900 27px/1 Georgia,serif; color: var(--coral); }
.rank-summary em { font-size: 8px; font-style: normal; }
.rank-summary p { margin: 0; font-size: 8px; line-height: 1.45; color: var(--muted); }

.daily-stage { min-width: 0; }
.date-line { display: flex; justify-content: space-between; align-items: center; margin: 3px 3px 15px; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.date-line b { color: var(--muted); font-weight: 500; }
.scene-banner { --scene-image:none; --scene-position:center; min-height: 344px; border: 2px solid var(--ink); background-color: var(--scene-accent); background-image:linear-gradient(90deg,rgba(17,17,19,.9) 0%,rgba(17,17,19,.72) 37%,rgba(17,17,19,.16) 67%,rgba(17,17,19,.05) 100%),var(--scene-image); background-size:cover,cover; background-position:center,var(--scene-position); background-repeat:no-repeat; margin-bottom: 20px; display:block; overflow:hidden; position:relative; box-shadow: 5px 6px 0 var(--ink); animation:sceneArrive .45s ease; transition:background-image .55s ease,background-position .55s ease; }
@keyframes sceneArrive { from { opacity:.2; transform:translateY(-8px); } }
.scene-copy { width:min(58%,560px); padding:30px 31px; position:relative; z-index:2; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.scene-copy > span { display: inline-block; background: var(--ink); color:#fff; padding:6px 8px; font:800 8px/1 monospace; letter-spacing:.1em; transform:rotate(-1deg); }
.scene-copy h2 { margin:12px 0 7px; font:900 clamp(25px,3vw,37px)/1.12 "KaiTi",serif; }
.scene-copy p { max-width:520px; margin:0; font-size:10px; line-height:1.65; color:rgba(255,255,255,.82); }
.scene-visual { position:absolute;right:18px;top:17px;width:56px;height:56px;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(20,20,22,.58);display:grid;place-items:center;overflow:visible;z-index:3;backdrop-filter:blur(8px); }
.scene-visual::before,.scene-visual::after,.scene-visual span { display:none; }
.scene-visual b { font-size:27px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.25));animation:sceneFloat 2.6s ease-in-out infinite}@keyframes sceneFloat{50%{transform:translateY(-4px) rotate(3deg)}}
.scene-visual em { position:absolute;right:-8px;top:-8px;font-size:17px;font-style:normal;transform:rotate(12deg); }
.scene-banner.alt { background-position:54% center; }.scene-banner.alt .scene-copy{margin-left:0}.scene-banner.alt .scene-visual{right:18px;left:auto;border:1px solid rgba(255,255,255,.8)}.scene-banner.alt .scene-visual em{right:-8px;left:auto;transform:rotate(-12deg)}
.scene-dialogue { position:absolute;z-index:4;left:29px;right:29px;bottom:21px;max-width:620px;background:rgba(255,253,248,.93);color:var(--ink);border:1.5px solid var(--ink);box-shadow:4px 5px 0 rgba(0,0,0,.62);padding:11px 14px;backdrop-filter:blur(8px); }
.scene-dialogue::before { content:"";position:absolute;left:20px;top:-8px;width:13px;height:13px;background:rgba(255,253,248,.93);border-left:1.5px solid var(--ink);border-top:1.5px solid var(--ink);transform:rotate(45deg); }
.scene-dialogue small { color:var(--coral);font-size:8px;font-weight:900;letter-spacing:.04em; }.scene-dialogue p { margin:4px 0 0;font:800 12px/1.45 "KaiTi",serif; }
.today-intro { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--ink); padding: 4px 3px 17px; }
.eyebrow { color: var(--coral); font: 900 9px/1 monospace; letter-spacing: .12em; margin: 0 0 8px; }
.today-intro h1 { font: 900 clamp(26px, 3.2vw, 43px)/1.1 "STKaiti","KaiTi",serif; margin: 0; }
.today-intro p:last-child { font-size: 10px; color: var(--muted); margin: 8px 0 0; }
.countdown-note { width: 76px; height: 76px; border: 2px solid var(--ink); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--yellow); transform: rotate(5deg); flex-shrink: 0; box-shadow: 3px 3px 0 var(--ink); }
.countdown-note small, .countdown-note span { font-size: 7px; }.countdown-note b { font: 900 24px/1 Georgia,serif; margin: 2px; }
.difficulty-control { margin: 17px 0 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.difficulty-control > span { font-size: 10px; font-weight: 900; }
.difficulty-control > div { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--ink); }
.difficulty-control button { min-width: 92px; padding: 7px 10px; border: 0; border-right: 1px solid var(--ink); background: #fff; cursor: pointer; line-height: 1.1; }
.difficulty-control button:last-child { border-right: 0; }
.difficulty-control button b { font-size: 9px; display: block; }.difficulty-control button small { font-size: 7px; color: var(--muted); }
.difficulty-control button.selected { background: var(--ink); color: #fff; }.difficulty-control button.selected small { color: #d4cdc3; }
.difficulty-control button:disabled { opacity:.35;cursor:not-allowed;background:#d8d2c9;color:#756f68; }.difficulty-control button:disabled small{color:#8d867d}
.modifier-strip { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px; }
.modifier-strip > div { min-height:48px;border:1px solid rgba(25,24,23,.45);background:rgba(255,253,248,.75);padding:8px 9px;display:grid;grid-template-columns:24px 1fr;align-items:center;backdrop-filter:blur(5px); }
.modifier-strip span { grid-row:1/3;font-size:17px; }.modifier-strip b { font-size:8px; }.modifier-strip small { font-size:7px;color:var(--muted); }
.modifier-strip .positive { background:#e1f2e7;border-color:#4e9e70; }.modifier-strip .negative { background:#fde0da;border-color:#c85842; }.modifier-strip .critical { background:#2b2523;color:#fff;border-color:var(--coral);animation:criticalPulse 1.2s ease-in-out infinite}.modifier-strip .critical small{color:#ffd1c8}@keyframes criticalPulse{50%{box-shadow:0 0 0 3px rgba(255,104,71,.25)}}
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.action-card { min-height: 180px; border: 1.5px solid var(--ink); background: var(--paper-2); padding: 17px; position: relative; text-align: left; cursor: pointer; overflow: hidden; transition: transform .16s, box-shadow .16s; }
.action-card:hover { transform: translate(-2px,-3px); box-shadow: 5px 6px 0 var(--ink); }
.action-card:active { transform: translate(1px,1px); box-shadow: none; }
.action-card::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; right: -54px; top: -50px; opacity: .2; }
.sketch-action::after { background: #55514d; }.speed-action::after { background: var(--blue); }.color-action::after { background: var(--coral); }.other-action::after { background: var(--yellow); }
.action-number { position: absolute; right: 10px; top: 8px; color: rgba(25,24,23,.22); font: 900 20px/1 Georgia,serif; }
.action-icon { width: 37px; height: 37px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 900 22px/1 serif; margin-bottom: 10px; font-style: normal; }
.sketch-action .action-icon { background: #d6d2cd; }.speed-action .action-icon { background: #cbd2fb; }.color-action .action-icon { background: #f7b7a9; }.other-action .action-icon { background: #fae18d; }
.action-card small { font: 800 7px/1 monospace; color: var(--muted); letter-spacing: .12em; }
.action-card h3 { font: 900 18px/1.2 "STKaiti","KaiTi",serif; margin: 3px 0 5px; }
.action-card p { font-size: 9px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 83%; }
.action-card footer { position: absolute; bottom: 0; left: 0; right: 0; border-top: 1px dashed #b6afa5; padding: 9px 15px; display: flex; justify-content: space-between; font-size: 8px; }
.action-card footer b { color: #278455; }.action-card footer em { font-style: normal; font-weight: 900; }
.culture-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.culture-action { min-height: 126px; border: 1.5px solid var(--ink); background: var(--paper-2); padding: 16px; display: grid; grid-template-columns: 43px 1fr auto; gap: 12px; align-items: center; text-align: left; cursor: pointer; transition: .16s; }
.culture-action:hover { transform: translate(-2px,-3px); box-shadow: 5px 6px 0 var(--ink); }
.culture-action > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font: 900 18px/1 "KaiTi",serif; }
.culture-action:nth-child(2) > span { background: #cbd2fb; }.culture-action:nth-child(3) > span { background: #c8ead8; }.culture-action:nth-child(4) > span { background: #f7b7a9; }.culture-action:nth-child(5) > span { background: #ddd8d1; }.culture-action:nth-child(6) > span { background: #fff0a8; }
.culture-action small { font: 800 7px/1 monospace; color: var(--muted); letter-spacing: .1em; }
.culture-action h3 { margin: 4px 0; font: 900 16px/1.2 "KaiTi",serif; }
.culture-action p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.culture-action > b { align-self: end; font-size: 8px; color: #278455; white-space: nowrap; }
.other-menu { margin-top: 12px; border: 2px solid var(--ink); background: var(--yellow); padding: 14px; box-shadow: 4px 5px 0 var(--ink); }
.other-menu-head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; margin-bottom: 11px; }
.other-menu-head button { border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.other-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.other-options button { background: var(--paper-2); border: 1.5px solid var(--ink); padding: 10px; display: grid; grid-template-columns: 26px 1fr; text-align: left; align-items: center; cursor: pointer; }
.other-options button:hover { background: #fff; transform: translateY(-2px); }
.other-options span { grid-row: 1 / 3; font-size: 18px; }.other-options b { font-size: 9px; }.other-options small { font-size: 7px; color: var(--muted); }
.trend-card { margin-top: 16px; padding-bottom: 9px; }
#trend-chart { width: 100%; height: 120px; display: block; }
.chart-legend { display: flex; gap: 15px; font-size: 8px; justify-content: flex-end; }
.chart-legend span::before { content:""; width: 13px; height: 3px; display: inline-block; vertical-align: middle; margin-right: 4px; }

.teacher-note { background: #fff3a8; padding: 22px 18px 17px; position: relative; transform: rotate(1deg); margin-top: 15px; }
.pin { position: absolute; left: 50%; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 1px 2px 0 rgba(0,0,0,.35); }
.teacher-note small { display: block; font: 800 8px/1 monospace; color: #776d45; border-bottom: 1px solid rgba(25,24,23,.2); padding-bottom: 9px; }
.teacher-note blockquote { margin: 14px 0 12px; font: 700 15px/1.6 "KaiTi",serif; }
.teacher-note span { display: block; text-align: right; font-size: 8px; color: #6d654d; }
.relationship-card { background:linear-gradient(160deg,#fffdf8,#f4eee7); }
.people-list { display:grid;gap:9px; }
.person-row { display:grid;grid-template-columns:34px 1fr 24px;gap:9px;align-items:center;padding:7px 0;border-bottom:1px dashed #c9c1b6; }
.person-row:last-child { border-bottom:0; }
.person-avatar { width:32px;height:32px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:900 12px/1 "KaiTi",serif;box-shadow:2px 2px 0 var(--ink); }
.person-avatar.xu { background:#f8c85a; }.person-avatar.zhou { background:#9aa8ec;color:#fff; }.person-avatar.love { background:#f4a8b9;color:#fff;font-size:18px; }
.person-row b { display:block;font-size:9px; }.person-row small { display:block;color:var(--muted);font-size:7px;margin:2px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.person-row i { display:block;height:5px;background:#ddd7cf;overflow:hidden; }.person-row i em { display:block;height:100%;width:0;background:var(--yellow);transition:width .45s ease; }.person-row[data-person="zhouye"] i em{background:var(--blue)}.person-row[data-person="romance"] i em{background:var(--pink)}
.person-row strong { font:900 11px/1 monospace;text-align:right; }
.relationship-note { margin:10px 0 0;padding-top:9px;border-top:1px solid #d8d0c7;color:var(--muted);font-size:7px;line-height:1.5; }
.journal { max-height: 360px; overflow: hidden; }
.journal-list { display: flex; flex-direction: column; gap: 0; max-height: 292px; overflow: auto; scrollbar-width: thin; }
.journal-entry { display: grid; grid-template-columns: 36px 1fr; gap: 9px; padding: 10px 0; border-bottom: 1px dashed #c4bdb3; animation: entryIn .35s ease; }
@keyframes entryIn { from { opacity: 0; transform: translateY(-7px); } }
.journal-entry time { font: 700 8px/1.4 monospace; color: var(--muted); }
.journal-entry p { font-size: 9px; line-height: 1.5; margin: 0; }
.journal-entry p b { color: var(--coral); }
.badge-list { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-list span { font-size: 8px; padding: 5px 7px; border: 1px solid var(--ink); background: #eeeae2; transform: rotate(-1deg); }

/* Event and exam */
.modal-layer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(25,24,23,.82); backdrop-filter: blur(3px); }
.event-modal { width: min(900px, 94vw); min-height: 460px; background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 12px 14px 0 var(--coral); display: grid; grid-template-columns: 34% 66%; position: relative; z-index: 1; animation: modalIn .35s cubic-bezier(.2,.8,.2,1); }
.event-modal.exam-mode { display: block; width: min(760px, 94vw); min-height: 560px; box-shadow: 12px 14px 0 var(--yellow); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) rotate(-1deg) scale(.96); } }
.event-art { min-height: 100%; border-right: 2px solid var(--ink); background: var(--yellow); display: grid; place-items: center; position: relative; overflow: hidden; }
.event-art::before, .event-art::after { content:""; position:absolute; border: 2px solid rgba(25,24,23,.2); border-radius:50%; width: 240px; height: 240px; }
.event-art::after { width: 160px; height:160px; }
.event-art > span { font-size: clamp(80px, 10vw, 130px); position: relative; z-index: 1; filter: drop-shadow(6px 8px 0 rgba(25,24,23,.15)); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(3deg); } }
.event-art > b { position:absolute; left: 20px; top: 20px; background:var(--ink); color:#fff; padding:7px 10px; font-size:9px; transform:rotate(-3deg); }
.event-art.has-photo { background-color:#f4f1ea;background-repeat:no-repeat; }
.event-art.has-photo::before,.event-art.has-photo::after { display:none; }
.event-art.has-photo > span { display:none; }
.event-art.has-photo > b { background:rgba(25,24,23,.9);backdrop-filter:blur(4px); }
.event-content { padding: clamp(28px, 4vw, 50px); display: flex; flex-direction: column; justify-content: center; }
.event-meta { display:flex; justify-content:space-between; color:var(--coral); font:800 8px/1 monospace; letter-spacing:.1em; }
.event-meta b { color:var(--muted); }
.event-content h2 { font:900 clamp(25px,3.4vw,42px)/1.1 "STKaiti","KaiTi",serif; margin:17px 0 11px; }
.event-content > p { font-size:12px; line-height:1.7; color:var(--muted); margin:0; }
.event-choices { display:grid; gap:8px; margin-top:24px; }
.event-choice { border:1.5px solid var(--ink); background:#fff; padding:13px 15px; text-align:left; cursor:pointer; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; transition:.15s; }
.event-choice:hover { transform:translateX(4px); box-shadow:-4px 0 0 var(--coral); background:#fffdf3; }
.event-choice > span { width:24px; height:24px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; font:900 9px/1 monospace; }
.event-choice b { font-size:11px; }.event-choice small { font-size:8px; color:var(--muted); }
.event-content .choice-hint { margin-top:14px; font-size:8px; text-align:center; }
.exam-result { width:100%; min-height:100%; background:#4f65d8; padding:35px; display:grid; place-items:center; position:relative; overflow:hidden; }
.exam-result::before { content:"EXAM"; position:absolute; font:900 190px/1 Georgia,serif; color:rgba(255,255,255,.08); transform:rotate(-14deg); }
.exam-paper { width:min(520px,90%); background:#fffdf8; border:2px solid var(--ink); padding:30px; transform:rotate(-1deg); box-shadow:10px 12px 0 var(--ink); position:relative; z-index:1; }
.paper-title { display:flex; justify-content:space-between; border-bottom:2px solid var(--ink); padding-bottom:12px; font:700 9px/1 monospace; }
.exam-stamp { color:var(--coral); border:2px solid var(--coral); padding:6px; transform:rotate(8deg); }
.exam-name { margin-top:20px; font:900 22px/1.2 "KaiTi",serif; }
.exam-scores { display:grid; grid-template-columns:repeat(auto-fit,minmax(85px,1fr)); gap:8px; margin:20px 0; }
.exam-score { border:1px solid var(--ink); text-align:center; padding:12px 5px; }
.exam-score span { display:block; font-size:9px; }.exam-score b { display:block; font:900 25px/1.2 Georgia,serif; margin-top:5px; }
.exam-total { background:var(--yellow); border:2px solid var(--ink); padding:12px; display:flex; justify-content:space-between; align-items:center; }
.exam-total span { font-size:10px; font-weight:800; }.exam-total b { font:900 30px/1 Georgia,serif; }
.exam-comment { font:700 13px/1.6 "KaiTi",serif; border-bottom:1px dashed #aaa; padding:15px 0; }
.exam-actions { display:flex; gap:8px; margin-top:16px; }
.exam-actions button { flex:1; border:1.5px solid var(--ink); background:#fff; padding:11px; font-size:10px; font-weight:900; cursor:pointer; }
.exam-actions button.primary { background:var(--coral); color:#fff; }
.exam-actions button:hover { transform:translateY(-2px); box-shadow:2px 3px 0 var(--ink); }
.route-options { display:grid; gap:8px; margin-top:16px; }
.route-options button { border:1.5px solid var(--ink); padding:12px; background:#fff; text-align:left; cursor:pointer; }
.route-options button:hover { background:var(--yellow); }
.route-options b { font-size:11px; display:block; }.route-options small { font-size:8px; color:var(--muted); }
.event-modal.academy-mode { display: block; width: min(1000px, 96vw); min-height: 0; max-height: 92vh; overflow: auto; box-shadow: 12px 14px 0 var(--blue); }
.academy-select { padding: clamp(24px, 4vw, 42px); background: var(--paper-2); }
.academy-heading span, .return-heading span { color: var(--coral); font: 900 8px/1 monospace; letter-spacing: .12em; }
.academy-heading h2, .return-heading h2 { margin: 10px 0 7px; font: 900 clamp(26px, 3.5vw, 40px)/1.1 "KaiTi",serif; }
.academy-heading p, .return-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.academy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 22px 0; }
.academy-card { border: 1.5px solid var(--ink); background: #fff; padding: 12px; display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.academy-card:hover { transform: translateY(-2px); box-shadow: 3px 4px 0 var(--ink); }
.academy-card.selected { background: #fff3a8; border: 2px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); }
.academy-card > span { width: 43px; height: 43px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: #fff; font: 900 13px/1 "KaiTi",serif; }
.academy-card b { display: block; font-size: 11px; }.academy-card em { display: block; color: #e6aa1e; font-size: 9px; font-style: normal; margin: 3px 0; letter-spacing: .05em; }.academy-card small { display: block; color: var(--muted); font-size: 8px; }
.academy-card > i { font-style: normal; font-size: 7px; color: var(--muted); line-height: 1.5; text-align: right; }
.academy-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px dashed #aaa; padding-top: 15px; }
.academy-footer small { color: var(--muted); font-size: 9px; }.academy-footer button, .return-confirm { border: 2px solid var(--ink); background: var(--coral); color: #fff; padding: 12px 18px; font-size: 10px; font-weight: 900; box-shadow: 4px 5px 0 var(--ink); cursor: pointer; }.academy-footer button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.event-modal.return-mode { display: block; width: min(720px, 95vw); min-height: 0; max-height: 92vh; overflow: auto; box-shadow: 12px 14px 0 var(--mint); }
.return-setup { padding: clamp(25px, 4vw, 42px); background: var(--paper-2); }
.return-setup fieldset { border: 0; padding: 0; margin: 23px 0 0; }.return-setup legend { font-size: 10px; font-weight: 900; margin-bottom: 9px; }
.return-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.return-options label { border: 1.5px solid var(--ink); background: #fff; padding: 14px; cursor: pointer; position: relative; }
.return-options input { position: absolute; opacity: 0; }.return-options label.selected { background: #fff3a8; box-shadow: 3px 4px 0 var(--ink); transform: translateY(-2px); }.return-options b { display: block; font-size: 13px; }.return-options small { display: block; color: var(--muted); font-size: 8px; margin-top: 5px; line-height: 1.5; }
.return-confirm { width: 100%; margin-top: 24px; }
.toast { position:fixed; z-index:90; right:24px; bottom:24px; background:var(--ink); color:#fff; padding:12px 17px; min-width:250px; display:flex; align-items:center; gap:10px; box-shadow:5px 6px 0 var(--coral); transform:translateY(130%); opacity:0; transition:.3s; }
.toast.show { transform:translateY(0); opacity:1; }.toast > span { width:25px;height:25px;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:var(--ink);font-weight:900; }.toast b,.toast small{display:block}.toast b{font-size:10px}.toast small{font-size:8px;color:#ddd;margin-top:3px}

/* Ending */
.ending-screen { min-height:100vh; background:var(--paper); overflow:hidden; position:relative; }
.ending-screen::before { content:""; position:absolute; width:480px;height:480px;border-radius:50%;background:var(--yellow);right:-180px;top:80px;opacity:.8; }
.ending-header { height:72px; }
.ending-header > span { font:700 9px/1 monospace; }
.ending-main { max-width:1100px; margin:0 auto; padding:50px 30px 70px; position:relative; z-index:1; }
.ending-kicker { display:inline-block; background:var(--ink); color:#fff; padding:7px 10px; font:800 9px/1 monospace; transform:rotate(-1deg); }
.ending-title-row { display:flex; align-items:center; gap:22px; margin:22px 0 20px; }
.ending-title-row > span { width:120px;height:120px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--coral);font-size:58px;box-shadow:7px 8px 0 var(--ink); }
.ending-title-row p { color:var(--coral);font-size:11px;font-weight:900;margin:0 0 6px; }
.ending-title-row h1 { font:900 clamp(40px,6vw,76px)/.98 "STKaiti","KaiTi",serif;margin:0;letter-spacing:-.03em; }
.ending-story { max-width:780px;font-size:13px;line-height:1.9;color:#5f5952;margin:0 0 28px; }
.ending-grid { display:grid;grid-template-columns:1.15fr .85fr;gap:14px; }
.final-report,.ending-letter,.ending-summary { border:2px solid var(--ink);background:var(--paper-2);padding:20px;box-shadow:4px 5px 0 rgba(25,24,23,.18); }
.final-report { grid-row:span 2; }.ending-letter { background:#fff3a8;transform:rotate(1deg); }
.ending-letter > span { font:800 8px/1 monospace;color:var(--muted); }.ending-letter blockquote { font:700 17px/1.6 "KaiTi",serif;margin:16px 0; }.ending-letter p { font-size:9px;text-align:right; }
.final-bar-row { display:grid;grid-template-columns:50px 1fr 35px;gap:10px;align-items:center;margin:15px 0;font-size:10px;font-weight:800; }
.final-bar-row > div { height:11px;background:#e0dbd3;border:1px solid var(--ink); }.final-bar-row i { display:block;height:100%; }.final-bar-row b { font:900 14px/1 Georgia,serif;text-align:right; }
.final-total { border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline;padding-top:15px;margin-top:15px;font-size:10px; }.final-total b { font:900 25px/1 Georgia,serif; }
.ending-summary { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px; }
.ending-summary div { text-align:center;border-right:1px dashed #aaa; }.ending-summary div:last-child{border:0}.ending-summary small{display:block;font-size:7px;color:var(--muted)}.ending-summary b{display:block;font:900 15px/1.2 "KaiTi",serif;margin-top:4px}
.ending-relationships { grid-column:2;padding:16px;background:#f8e8ed;border-color:#d7627d; }.ending-relationships p{margin:0;font:800 13px/1.7 "KaiTi",serif;color:#554d51;}
.ending-actions { display:flex;gap:10px;margin-top:25px; }.ending-actions button{border:2px solid var(--ink);padding:14px 20px;background:var(--coral);color:#fff;font-weight:900;font-size:11px;box-shadow:4px 5px 0 var(--ink);cursor:pointer}.ending-actions button:last-child{background:#fff;color:var(--ink)}.ending-actions button:hover{transform:translate(2px,2px);box-shadow:2px 3px 0 var(--ink)}
.confetti { position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(32deg,transparent 48%,var(--coral) 49% 52%,transparent 53%),linear-gradient(120deg,transparent 48%,var(--blue) 49% 52%,transparent 53%);background-size:180px 190px,240px 220px;opacity:.09; }

@media (max-width: 1180px) {
  .game-layout { grid-template-columns: 230px minmax(480px,1fr); }
  .journal-panel { grid-column:1 / -1; display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:start; }
  .teacher-note { margin-top:0; }.journal{max-height:250px}.journal-list{max-height:180px}
  .doodle-arrow { display:none; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr;padding-top:55px; }.hero-copy{max-width:none}.profile-sheet-wrap{max-width:600px}.landing-footer p{display:none}
  .game-layout { grid-template-columns:1fr; padding:18px; }.status-panel{display:grid;grid-template-columns:1fr 1.3fr}.vitals-card{grid-column:1/-1}.journal-panel{grid-column:auto;grid-template-columns:1fr}.teacher-note,.collection{display:none}
  .term-progress{width:45vw}.game-header{padding:0 15px}.game-header .logo > span:last-child,.ghost-button{display:none}
  .ending-grid{grid-template-columns:1fr}.final-report{grid-row:auto}.ending-title-row>span{width:90px;height:90px;font-size:43px}.ending-summary{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 620px) {
  .landing-nav { height:65px;padding:0 18px}.nav-note{display:none}.hero{padding:42px 18px 42px;gap:55px}.hero h1{font-size:62px}.hero-lead br{display:none}.quote-strip{display:flex}.profile-sheet{padding:25px 20px;box-shadow:8px 10px 0 var(--ink)}.identity-grid{grid-template-columns:1fr}.talent-options{grid-template-columns:1fr}.talent-card{min-height:auto;display:grid;grid-template-columns:42px 1fr;text-align:left}.talent-icon{grid-row:1/3;margin:0}.landing-footer>div{flex:1;width:auto}.landing-footer>div:nth-child(3){display:none}
  .term-progress{width:68vw}.term-progress-top span{display:none}.game-layout{padding:14px}.status-panel{grid-template-columns:1fr}.vitals-card{grid-column:auto}.student-card{display:none}.scene-banner,.scene-banner.alt{min-height:370px;background-position:center,var(--scene-position)}.scene-copy,.scene-banner.alt .scene-copy{width:86%;padding:20px}.scene-copy h2{font-size:27px}.scene-copy p{font-size:9px}.scene-visual,.scene-banner.alt .scene-visual{right:14px;top:14px;width:46px;height:46px}.scene-visual b{font-size:23px}.scene-dialogue{left:17px;right:17px;bottom:16px;padding:10px 12px}.scene-dialogue p{font-size:11px}.today-intro h1{font-size:29px}.countdown-note{width:62px;height:62px}.difficulty-control{align-items:flex-start;flex-direction:column}.difficulty-control>div{width:100%}.difficulty-control button{min-width:0}.modifier-strip{grid-template-columns:1fr}.action-grid,.culture-action-grid{grid-template-columns:1fr}.action-card{min-height:155px}.culture-action{grid-template-columns:40px 1fr;min-height:120px}.culture-action>b{grid-column:2}.other-options{grid-template-columns:1fr}.trend-card{display:none}
  .event-modal{grid-template-columns:1fr;max-height:92vh;overflow:auto}.event-modal.exam-mode{min-height:0}.event-art{min-height:150px;border-right:0;border-bottom:2px solid var(--ink)}.event-art>span{font-size:70px}.event-content{padding:24px 20px}.event-choice{grid-template-columns:27px 1fr}.event-choice small{grid-column:2}.exam-result{padding:15px}.exam-paper{padding:21px;width:96%}.academy-grid,.return-options{grid-template-columns:1fr}.academy-card{grid-template-columns:42px 1fr}.academy-card>i{grid-column:2;text-align:left}.academy-footer{align-items:stretch;flex-direction:column}.academy-footer button{width:100%}
  .ending-header{padding:0 16px}.ending-header>span{display:none}.ending-main{padding:35px 18px}.ending-title-row{align-items:flex-start;gap:15px}.ending-title-row>span{width:66px;height:66px;font-size:32px;flex-shrink:0}.ending-story{font-size:12px}.ending-actions{flex-direction:column}.ending-summary{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }