/* Spring notebook: a single presentation layer over the existing game UI. */
:root {
  --ink: #213f3a;
  --ink-2: #33544b;
  --paper: #f7f3ea;
  --muted: #748078;
  --dim: #748078;
  --accent: #cd7966;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", Georgia, serif;
  --label: #213f3a;
  --label-2: #69796f;
  --label-3: #8d968a;
  --label-4: #b1b6a8;
  --line: rgba(45, 74, 62, .17);
  --separator: rgba(45, 74, 62, .16);
  --fill-1: rgba(45, 74, 62, .11);
  --fill-2: rgba(45, 74, 62, .075);
  --fill-3: rgba(45, 74, 62, .04);
  --material: rgba(249, 246, 237, .98);
  --material-2: rgba(249, 246, 237, .95);
  --sys-blue: #345d50;
  --sys-green: #4e7658;
  --sys-orange: #b77c3d;
  --sys-red: #ab5d51;
  --sys-yellow: #927e39;
  --r-card: 7px;
  --r-ctrl: 5px;
  --r-small: 4px;
  --radius: 7px;
  --shadow: 0 20px 80px rgba(24, 44, 34, .16);
  --shadow-soft: 0 5px 24px rgba(24, 44, 34, .07);
}

html, body { color: var(--ink); background: var(--paper); }
button, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, .ac-form input:focus-visible {
  outline-color: var(--accent); outline-offset: 4px;
}

/* Title page */
#title-screen { background: var(--paper); overflow: hidden; }
.title-bg {
  background: radial-gradient(ellipse at 79% 48%, #e9eadb 0, #f2eee3 41%, #f7f3ea 72%);
}
.title-bg::after {
  opacity: .45;
  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='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23938b72' opacity='.13' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
.title-masthead {
  position: absolute; top: 28px; left: 5.4%; right: 5.4%; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  color: #657a6b; font-size: 11px; letter-spacing: .15em;
}
.masthead-mark {
  width: 29px; height: 29px; border: 1px solid #6b8273;
  display: grid; place-items: center;
  font-family: var(--serif); color: var(--ink); font-size: 18px; letter-spacing: 0;
}
.masthead-edition { margin-left: auto; font-size: 9px; letter-spacing: .19em; }
.title-inner {
  max-width: 1680px; margin: 0 auto;
  grid-template-columns: minmax(320px, .8fr) minmax(380px, 1.2fr);
  padding: 86px 5.4% 70px; gap: 0;
}
.title-left { position: relative; z-index: 3; width: 100%; max-width: 500px; }
.title-kicker {
  margin: 0 0 20px; color: #6c7a6d; font-size: 10px;
  font-weight: 500; letter-spacing: .2em;
}
.title-kicker::before {
  content: ''; display: inline-block; width: 25px; height: 1px;
  background: var(--accent); vertical-align: middle; margin-right: 12px;
}
.title-main {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(54px, 6.45vw, 98px); line-height: 1.13;
  letter-spacing: .065em; color: var(--ink);
  background: none; -webkit-text-fill-color: currentColor;
  filter: none; white-space: nowrap;
}
.title-main > span { display: block; }
.title-stop { color: var(--accent); margin-left: -.09em; }
.title-sub {
  position: absolute; top: 51px; left: 76%; width: 150px;
  margin: 0; font-size: 9px; line-height: 1.65; letter-spacing: .1em;
  font-family: Georgia, serif; font-style: italic; text-transform: none;
  color: #859080; transform: rotate(90deg); transform-origin: 0 0;
}
.title-tag {
  margin: 22px 0 25px; color: #788074; font-family: var(--serif);
  font-size: 14px; letter-spacing: .13em; line-height: 1.8;
}
.mobile-break { display: none; }
.title-menu { gap: 0; max-width: 350px; }
.tm-btn {
  min-height: 44px; padding: 11px 3px; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; color: var(--ink); background: transparent;
  font-size: 13px; letter-spacing: .08em; box-shadow: none; backdrop-filter: none;
}
.tm-btn::before { display: none; }
.tm-btn:hover:not(:disabled) { transform: translateX(3px); background: rgba(47, 78, 63, .045); border-color: var(--line); }
.tm-btn.primary {
  min-height: 52px; padding: 14px 19px; margin-bottom: 9px;
  border: 1px solid var(--ink); border-radius: 3px; background: var(--ink);
  color: var(--paper); font-weight: 500; box-shadow: 0 5px 16px rgba(27, 55, 45, .1);
}
.tm-btn.primary:hover { background: #315a4c; border-color: #315a4c; }
.tm-note { font-size: 10px; color: #7c887c; opacity: 1; letter-spacing: .05em; }
.tm-btn.primary .tm-note { font-family: Georgia, serif; color: #c4d4c5; font-size: 9px; letter-spacing: .075em; }
.tm-btn.primary .tm-note > span { font-size: 20px; margin-left: 14px; }
.tm-btn:disabled, .tm-btn[disabled] { opacity: .42; }
.tm-btn[disabled]:hover { background: transparent; }
.title-right {
  display: flex; position: relative; align-self: stretch; min-height: 0;
  align-items: flex-end; justify-content: center; overflow: visible;
}
.title-art-halo {
  position: absolute; left: 5%; right: 3%; top: 11%; bottom: 12%;
  border-radius: 49% 49% 4px 4px; background: #e0e4d4;
  border: 1px solid #d9ddcc; transform: rotate(-5deg);
}
.title-art-halo::before {
  content: ''; position: absolute; inset: 14px -18px -14px 18px;
  border: 1px solid rgba(72, 98, 73, .15); border-radius: inherit;
}
.title-art-halo::after {
  content: ''; position: absolute; width: 84px; height: 84px; right: -12px; top: 6%;
  background: #d8917c; border-radius: 50%; opacity: .8;
}
.title-art-rule {
  position: absolute; top: 8%; left: 2%; right: 3%;
  display: flex; align-items: center; gap: 12px; color: #7b8a75;
  font-size: 8px; letter-spacing: .15em;
}
.title-art-rule i { flex: 1; height: 1px; background: #ced5c5; }
.title-cast {
  position: relative; height: min(94%, 730px); width: 98%; gap: 0;
  margin-bottom: 4%; z-index: 2; align-items: flex-end;
  mask-image: linear-gradient(#000 0 90%, transparent 99%);
  -webkit-mask-image: linear-gradient(#000 0 90%, transparent 99%);
}
.title-char { flex: 1 1 0; min-width: 0; height: 100%; overflow: visible; }
.title-char img, .title-char > svg, .title-char .title-sprite {
  width: auto; max-width: none; height: 100%; flex-shrink: 0;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 11px 14px rgba(61, 75, 51, .1));
}
.title-char:nth-child(1) { transform: translate(4%, 3%) scale(.83); z-index: 1; }
.title-char:nth-child(2) { transform: translate(0, 0) scale(.95); z-index: 3; }
.title-char:nth-child(3) { transform: translate(-4%, 4%) scale(.86); z-index: 2; }
.title-char:nth-child(1):hover { transform: translate(4%, 1%) scale(.85); }
.title-char:nth-child(2):hover { transform: translate(0, -1%) scale(.97); }
.title-char:nth-child(3):hover { transform: translate(-4%, 2%) scale(.88); }
.title-char span {
  bottom: 13%; font-family: var(--serif); font-size: 12px;
  letter-spacing: .16em; color: var(--ink); text-shadow: 0 1px 3px #fff;
}
.title-art-caption {
  position: absolute; bottom: 1%; left: 15%; right: 0;
  display: flex; align-items: center; gap: 14px; z-index: 3;
  color: #6e7f6c;
}
.title-art-caption > span { font: italic 44px/1 Georgia, serif; color: #b97b67; }
.title-art-caption p { margin: 0; font-size: 10px; line-height: 1.8; letter-spacing: .14em; }
.title-footer {
  left: 5.4%; right: 5.4%; bottom: 0; padding: 16px 0 18px;
  justify-content: space-between; border-top: 1px solid var(--line);
  color: #839080; font-size: 9px; letter-spacing: .07em;
}
.title-footer b { color: #5d7467; font-weight: 500; }
.footer-keys span { margin: 0 8px; opacity: .35; }
.footer-touch { display: none; }
.title-petals { z-index: 4; opacity: .6; }
.title-petals::before, .title-petals::after {
  width: 6px; height: 11px; border-radius: 80% 0 70% 0;
  background: #c8836d;
  box-shadow: 12vw -6vh 0 -1px #d9ad95, 37vw 18vh 0 -1px #e0b19b, 61vw 4vh 0 -1px #e4d0b6,
    82vw 22vh 0 -1px #d9b092, 93vw -8vh 0 -1px #d5b7a4, 42vw 42vh 0 -2px #c89885;
}

/* Shared paper sheets and story selection */
.modal { background: rgba(30, 49, 38, .35); backdrop-filter: blur(8px); padding: 4vh 4vw; }
.modal-box {
  background: #f8f5ed; border: 1px solid #e0dfd1; border-radius: 9px;
  padding: 36px 38px 28px; max-height: 88vh; max-height: 88dvh;
  color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.modal-box.wide { width: min(1180px, 100%); }
.panel-eyebrow { margin: 0 0 10px; font: 9px/1.5 Georgia, serif; letter-spacing: .2em; color: #b27865; }
.modal-box h2 { margin: 0 0 28px; font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: .07em; }
.modal-box h2 small { margin: 11px 0 0; font: 12px/1.7 var(--ui-font); letter-spacing: .01em; color: #7b8578; }
.modal-close {
  color: #526a5b; background: transparent; border: 1px solid #bdc8b8;
  border-radius: 3px; margin-top: 24px; padding: 10px 26px; font-size: 12px;
}
.modal-close:hover { background: #e9ede1; }
.story-grid { gap: 14px; counter-reset: chapters; }
.story-card {
  position: relative; padding: 25px 20px 20px; border: 1px solid #dadfcf;
  border-radius: 4px; background: #f2f0e5; counter-increment: chapters;
}
.story-card::before {
  content: '0' counter(chapters); display: block; margin-bottom: 26px;
  font: italic 38px/1 Georgia, serif; color: color-mix(in srgb, var(--c) 45%, #748778);
}
.story-card::after {
  content: ''; position: absolute; top: 23px; right: 19px; width: 20px; height: 20px;
  border-top: 1px solid #a7b5a2; border-right: 1px solid #a7b5a2;
}
.story-card.lesson { border-left: 1px solid #dadfcf; }
.story-card:hover { background: #ecefe2; border-color: #b8c5ae; box-shadow: none; transform: translateY(-3px); }
.sc-top { margin-bottom: 15px; }
.sc-kind { color: #647760; background: #e5e9db; padding: 3px 7px; border-radius: 2px; font-size: 10px; }
.sc-min { font-size: 10px; }
.modal-box .sc-title { margin: 0 0 8px; color: var(--ink); font: 600 23px/1.3 var(--serif); letter-spacing: .04em; }
.sc-sub { color: #9e6d58; font-size: 11px; }
.sc-blurb { color: #71806e; font-size: 12px; line-height: 1.85; }
.sc-tags em, .sc-know span { color: #7b8874; background: #e8ebde; padding: 3px 6px; font-size: 10px; border-radius: 2px; }
.sc-foot { font-size: 10px; border-color: #d8decd; padding-top: 12px; margin-top: auto; }
.scbtn, .acbtn { border-radius: 3px; color: var(--ink); font-size: 12px; background: #e7ebdf; box-shadow: none; }
.scbtn:hover, .acbtn:hover { background: #dce3d2; color: var(--ink); }
.scbtn.primary, .scbtn.primary:hover { color: #f7f3ea; background: #3d5e4c; box-shadow: none; }
.scbtn.primary:hover { background: #52745e; }
.sc-actions .scbtn { min-width: 80px; padding: 10px 16px; }
.load-group { border: 1px solid #dfe3d6; border-radius: 5px; background: #f0f1e7; }
.lg-head b, .cg-head b { color: var(--ink); font-family: var(--serif); letter-spacing: .04em; }
.slot { min-width: 0; background: #f8f7f0; border: 1px solid #dde3d4; border-radius: 4px; }
.slot.filled:not(:disabled):hover { background: #e8eddc; border-color: #b5c3a8; }
.slot-at { color: #7b8875; }
.slot-no { color: #6e8068; }
.slot:disabled { opacity: .6; }
.slot-act { opacity: 1; }
.load-sync { flex-wrap: wrap; }
.ac-warn { border-color: #ddceb3; border-radius: 4px; background: #f0e8d8; }
.ac-warn p { color: #827254; }
.ac-item, .ac-form input, .ac-server { border-radius: 4px; }
.ac-item { flex-wrap: wrap; }
.ac-form input { border-color: #d5ddca; background: #f0f2e8; }
.ac-tag { color: #426d47; background: #e2e9d8; }
.ac-at { color: #87927e; }
.collect-card { border: 1px solid #dde2d4; background: #eff1e5; border-radius: 4px; }
.collect-card.locked { opacity: .6; }
.collect-card.locked .cc-title { color: #819077; }
.cc-title { font-family: var(--serif); }
.collect-card.got .cc-rank { color: color-mix(in srgb, var(--c) 50%, #43583c); }
.about-body { color: #647563; line-height: 1.95; font-size: 13px; }
.about-body p { margin-bottom: 16px; }
.about-body h3 { color: #8a735e; font-size: 13px; }
.about-body b { color: var(--ink); font-weight: 500; }
.about-warn { padding-top: 20px; margin-top: 22px; border-top: 1px solid var(--line); font-size: 11px; }

/* Reading scene */
#bg-vignette {
  background: linear-gradient(180deg, rgba(22, 41, 32, .2), transparent 25%, transparent 62%, rgba(20, 40, 26, .25));
}
#bg-label {
  top: 76px; left: 30px; padding: 6px 10px;
  font-size: 10px; color: #f4f5e8; text-shadow: 0 1px 5px #304631;
  background: rgba(44, 65, 45, .35); border-left: 1px solid #e5ead6;
}
#bg-label:empty { display: none; }
#hud {
  padding: 16px 24px; gap: 14px; align-items: center;
  background: linear-gradient(180deg, rgba(247, 246, 234, .91), rgba(247, 246, 234, .75));
  border-bottom: 1px solid rgba(244, 247, 227, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#hud-affection { gap: 7px; }
.aff { padding: 5px 10px; border: 1px solid #d2dbbf; border-radius: 3px; background: rgba(251, 251, 239, .56); font-size: 11px; }
.aff b, .aff i { color: color-mix(in srgb, var(--c) 46%, #354c32); }
.aff i { font-size: 9px; }
.hud-btns { gap: 5px; }
#hud button {
  min-height: 32px; padding: 7px 11px; color: #52694d; border: 1px solid #ccd7bd;
  border-radius: 3px; background: transparent; font-size: 11px;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
#hud button:hover { color: #314d2c; background: #dbe4cd; border-color: #b8c6a7; }
#hud button.active { color: #f7f3ea; background: #45623c; box-shadow: none; }
#hud button:disabled { opacity: .4; }
#hud .icon-btn { padding-inline: 8px; }
#dialogue { padding: 0 5.5vw 3.5vh; }
.dbox {
  max-width: 1240px; min-height: 176px; padding: 25px 36px 40px;
  color: var(--ink); border: 1px solid #dedfcb; border-radius: 6px;
  background: rgba(249, 247, 237, .97); box-shadow: 0 13px 36px rgba(21, 38, 21, .19);
}
.dbox::before { width: 3px; top: 25px; bottom: 42px; background: #c6876e; }
.dbox::after { inset: 8px; background: none; border: 1px solid rgba(65, 93, 48, .08); border-radius: 2px; }
.speaker { font-family: var(--serif); font-size: 19px; margin-bottom: 9px; letter-spacing: .08em; text-shadow: none; }
.text { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.95; letter-spacing: .025em; color: #354b35; min-height: 3.6em; }
#dialogue.is-narration .text { color: #657258; font-family: var(--serif); font-size: clamp(15px, 1.3vw, 18px); }
#dialogue.is-narration .dbox::before { background: #859577; }
.dialogue-footer {
  position: absolute; left: 36px; right: 55px; bottom: 16px;
  display: flex; justify-content: space-between; font-size: 8px;
  letter-spacing: .15em; color: #98a08a; pointer-events: none;
}
.next-indicator { right: 30px; bottom: 13px; color: #b48069; font-size: 18px; animation: none; }
.sprite .sprite-svg { filter: drop-shadow(0 10px 18px rgba(26, 47, 27, .18)); }
.sprite[data-at="left"], .sprite[data-at="right"] { filter: saturate(.9) brightness(.93); opacity: .9; }
.sprite.is-active { filter: none; opacity: 1; }
#choice-overlay { background: rgba(28, 46, 29, .53); gap: 25px; overflow-y: auto; }
.choice-prompt { color: #f7f3e5; font-family: var(--serif); font-size: clamp(18px, 2vw, 25px); text-shadow: none; letter-spacing: .06em; }
.choice-list { max-width: 720px; gap: 11px; }
.choice-btn, #choice-list[data-tier="route"] .choice-btn {
  border: 1px solid #d8dfc9; border-radius: 4px; background: rgba(249, 248, 238, .98);
  color: #374f33; padding: 18px 22px; box-shadow: 0 6px 26px rgba(14, 31, 13, .12);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.choice-btn:hover, #choice-list[data-tier="route"] .choice-btn:hover { background: #e8eddd; border-color: #b8c6a5; box-shadow: none; }
.choice-idx { background: transparent; color: #b48570; border: 1px solid #d8ceba; border-radius: 50%; font: italic 14px Georgia, serif; }
.choice-btn:hover .choice-idx { color: #f8f6e9; background: #677d52; }
.choice-text { font-weight: 400; font-size: 14px; }
.choice-hint { color: #7c8a6d; border-color: #d6deca; font-size: 10px; border-radius: 3px; }
.choice-btn:hover .choice-hint { color: #667b51; border-color: #bac8a8; }

/* Reading panels and final page */
.side-panel { width: min(440px, 90vw); background: #f8f6ec; color: var(--ink); border-color: #d5ddc6; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 0 50px rgba(24, 44, 24, .17); }
.side-head { padding: 24px; border-color: var(--line); }
.side-head h3 { font-family: var(--serif); font-size: 23px; letter-spacing: .06em; }
.side-head button { color: #607151; background: #e9eddd; width: 34px; height: 34px; border-radius: 3px; }
.menu-body, .log-body { padding: 24px; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.mbtn { border: 1px solid #dbe1cd; border-radius: 3px; background: #eff1e5; color: #405736; padding: 14px 16px; font-size: 13px; }
.mbtn:hover { background: #e4ead7; }
.set-group h4 { color: #768367; font-size: 11px; letter-spacing: .05em; }
.set-group input[type="range"] { background: #d7dfca; accent-color: #547249; }
.set-group input[type="range"]::-webkit-slider-thumb { background: #627d50; width: 18px; height: 18px; box-shadow: 0 0 0 3px #e4ead8; }
.set-group input[type="range"]::-moz-range-thumb { background: #627d50; width: 18px; height: 18px; border: 0; border-radius: 50%; }
.set-group.row { gap: 16px; flex-wrap: wrap; }
.set-group.row label { color: #617653; font-size: 12px; }
.set-val { color: #859277; font-size: 11px; }
.log-line { padding: 16px 10px; border-radius: 2px; border-bottom: 1px solid #dfe5d3; }
.log-line span { color: #586d4c; font-size: 13px; line-height: 1.95; }
.log-line.narr { color: #859275; }
.log-line b { font-family: var(--serif); }
.log-line.has-voice:hover { background: #e9efdc; }
.log-voice { color: #8c9474; }
#ending-overlay { background: rgba(27, 46, 30, .5); overflow-y: auto; }
.ending-card { max-height: 88dvh; overflow-y: auto; background: #f7f4e8; border: 1px solid #dfe2ce; border-radius: 6px; padding: 40px 45px; }
.ending-rank { color: #97705c; background: #eee7d7; border: 1px solid #daceb8; border-radius: 3px; font-size: 10px; }
.ending-title { color: #335030; -webkit-text-fill-color: currentColor; background: none; font-family: var(--serif); font-weight: 600; letter-spacing: .07em; }
.ending-who-row { color: #879373; font-size: 11px; }
.ending-text { color: #627651; border-color: #d9dfc8; font-family: var(--serif); font-size: 15px; }
.ending-progress-row { color: #879574; font-size: 11px; }
.ending-progress-row b { color: #a77c60; }
.ebtn { color: #5c714e; background: #e7ecd9; border-radius: 3px; font-size: 12px; box-shadow: none; }
.ebtn:hover { background: #dce5cd; }
.ebtn.primary { color: #f7f4e8; background: #46633b; box-shadow: none; }
.ebtn.primary:hover { background: #5a794b; }
.toast { color: #f7f3e9; background: rgba(42, 64, 35, .95); border: 1px solid #667c50; border-radius: 4px; font-size: 12px; }
#boot-overlay { background: #f7f3ea; }
.boot-box { padding: 36px; background: transparent; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.boot-title { color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 36px; letter-spacing: .08em; }
.boot-msg { color: #6f8067; }
.boot-hint { color: #8d977f; }
#boot-overlay.failed .boot-msg { color: #b5755f; }
#boot-overlay.failed .boot-hint { color: #7f886f; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb, .modal-box::-webkit-scrollbar-thumb, .side-panel::-webkit-scrollbar-thumb, .log-body::-webkit-scrollbar-thumb { background: #c5cfb7; border-radius: 6px; }

/* Preserve both the cast and the reading controls at small widths. */
@media (min-width: 761px) and (max-height: 760px) {
  .title-inner { padding-top: 77px; padding-bottom: 60px; }
  .title-kicker { margin-bottom: 13px; }
  .title-main { font-size: clamp(44px, 6vw, 73px); }
  .title-tag { margin: 14px 0 15px; font-size: 12px; }
  .tm-btn { min-height: 36px; padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
  .tm-btn.primary { min-height: 46px; }
  .title-art-caption > span { font-size: 34px; }
}
@media (max-width: 1080px) and (min-width: 761px) {
  .title-inner { grid-template-columns: minmax(290px, .9fr) minmax(320px, 1.1fr); }
  .title-main { font-size: clamp(54px, 7.1vw, 74px); }
  .title-sub { left: 79%; }
  .title-right { display: flex; }
  .title-cast { width: 105%; height: 79%; margin-bottom: 15%; }
  .title-char img, .title-char > svg, .title-char .title-sprite { max-height: 580px; }
  .title-art-rule { top: 14%; }
  .title-art-halo { top: 19%; bottom: 16%; }
  .footer-keys span { margin-inline: 4px; }
  #hud { padding-inline: 16px; gap: 8px; }
  #hud button { padding-inline: 8px; }
  .aff { padding-inline: 7px; }
}
@media (max-width: 760px) {
  #title-screen { overflow-y: auto; overscroll-behavior: contain; }
  .title-bg { position: fixed; }
  .title-masthead { top: max(23px, env(safe-area-inset-top)); left: 6%; right: 6%; font-size: 9px; gap: 9px; letter-spacing: .06em; }
  .masthead-mark { width: 25px; height: 25px; font-size: 16px; }
  .masthead-edition { font-size: 7px; letter-spacing: .07em; }
  .title-inner { min-height: 730px; height: auto; padding: 103px 7% 78px; grid-template-columns: 1fr; align-items: start; align-content: start; }
  .title-left { max-width: none; z-index: 3; }
  .title-kicker { width: 48%; min-height: 12px; margin-bottom: 19px; font-size: 8px; letter-spacing: .05em; white-space: nowrap; }
  .title-kicker::before { width: 12px; margin-right: 6px; }
  .title-main { width: fit-content; font-size: clamp(40px, 10.8vw, 66px); line-height: 1.16; letter-spacing: .025em; }
  .title-stop { margin-left: -.16em; }
  .title-sub { position: static; transform: none; width: 45%; margin-top: 14px; font-size: 9px; line-height: 1.4; }
  .title-tag { margin: 15px 0 0; width: 47%; font-size: 12px; line-height: 1.9; letter-spacing: .03em; }
  .mobile-break { display: block; }
  .title-menu { margin-top: 85px; max-width: none; }
  .tm-btn { min-height: 41px; font-size: 12px; }
  .tm-btn.primary { min-height: 51px; margin-bottom: 5px; }
  .title-right { display: flex; position: absolute; top: 83px; right: -8%; width: 67%; height: 354px; z-index: 2; }
  .title-art-halo { left: 9%; top: 17%; bottom: 4%; right: 6%; border-radius: 50% 50% 0 0; }
  .title-art-halo::after { width: 47px; height: 47px; right: 21%; top: -9%; }
  .title-art-halo::before { inset: 9px -9px -9px 9px; }
  .title-cast { width: 100%; height: 96%; margin-bottom: 0; }
  .title-char img, .title-char > svg, .title-char .title-sprite { height: 100%; width: auto; }
  .title-char:nth-child(1), .title-char:nth-child(1):hover { transform: translate(5%, 5%) scale(.8); }
  .title-char:nth-child(2), .title-char:nth-child(2):hover { transform: translate(0, 0) scale(.95); }
  .title-char:nth-child(3), .title-char:nth-child(3):hover { transform: translate(-5%, 6%) scale(.82); }
  .title-art-rule { display: none; }
  .title-art-caption { left: 8%; bottom: -12px; gap: 8px; }
  .title-art-caption > span { font-size: 28px; }
  .title-art-caption p { font-size: 7px; line-height: 1.6; letter-spacing: .04em; }
  .title-char span { display: none; }
  .title-footer { position: absolute; top: 704px; bottom: auto; left: 7%; right: 7%; padding: 13px 0 max(18px, env(safe-area-inset-bottom)); font-size: 8px; gap: 8px; }
  .footer-keys { display: none; }
  .footer-touch { display: inline; }
  .modal { padding: 20px 15px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .modal-box { padding: 25px 21px 22px; border-radius: 6px; max-height: 92dvh; }
  .modal-box h2 { font-size: 23px; margin-bottom: 22px; }
  .modal-box h2 small { font-size: 11px; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .story-card { padding: 18px 14px 14px; }
  .story-card::before { font-size: 30px; margin-bottom: 15px; }
  .story-card::after { top: 19px; right: 14px; width: 14px; height: 14px; }
  .modal-box .sc-title { font-size: 20px; }
  .sc-sub { font-size: 10px; }
  .sc-min { font-size: 9px; }
  .sc-blurb { font-size: 11px; }
  .sc-top, .sc-foot { flex-wrap: wrap; gap: 5px; }
  .sc-actions { flex-wrap: wrap; }
  .sc-actions .scbtn { min-width: 60px; padding: 9px 12px; font-size: 11px; }
  .lg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .load-group { padding: 13px; }
  .slot { padding: 11px; }
  .load-sync .scbtn { white-space: normal; }
  #hud { padding: max(10px, env(safe-area-inset-top)) 10px 9px; gap: 7px; align-items: stretch; flex-direction: column; }
  #hud-affection { gap: 5px; justify-content: center; }
  #hud-affection:empty { display: none; }
  #hud-affection .aff { padding: 4px 8px; font-size: 10px; }
  .hud-btns { justify-content: center; flex-wrap: nowrap; gap: 4px; }
  #hud button { flex: 1 1 auto; min-height: 32px; font-size: 10px; padding: 6px 7px; white-space: nowrap; }
  #hud .icon-btn { flex: 0 0 auto; padding-inline: 9px; justify-content: center; }
  #bg-label { top: 102px; left: 12px; font-size: 9px; }
  .sprite { height: 80%; }
  .sprite[data-at="left"] { left: -17%; }
  .sprite[data-at="right"] { right: -17%; }
  #dialogue { padding: 0 12px max(16px, env(safe-area-inset-bottom)); }
  .dbox { min-height: 176px; padding: 21px 23px 39px; border-radius: 5px; }
  .speaker { font-size: 18px; margin-bottom: 8px; }
  .text, #dialogue.is-narration .text { font-size: 15px; line-height: 1.85; }
  .dialogue-footer { left: 24px; right: 43px; bottom: 15px; font-size: 7px; }
  .next-indicator { right: 23px; bottom: 12px; font-size: 16px; }
  #choice-overlay { padding: 90px 19px 28px; gap: 20px; }
  .choice-prompt { font-size: 19px; }
  .choice-btn, #choice-list[data-tier="route"] .choice-btn { grid-template-columns: 30px 1fr; padding: 17px 15px; gap: 10px; }
  .choice-text { font-size: 13px; line-height: 1.7; }
  .choice-hint { grid-column: 2; justify-self: start; margin-top: 0; }
  .side-panel { width: min(420px, 93vw); }
  .ending-card { padding: 28px 23px; max-height: 90dvh; }
  .ending-title { font-size: 29px; }
  .ending-text { font-size: 14px; padding: 20px 0; }
  .ending-btns { gap: 9px; }
  .ebtn { flex: 1; padding: 12px 14px; white-space: nowrap; }
}
@media (max-width: 400px) {
  .title-inner { min-height: 710px; padding-top: 97px; }
  .title-kicker { font-size: 7px; }
  .title-main { font-size: 39px; }
  .title-right { top: 91px; height: 328px; width: 68%; right: -9%; }
  .title-menu { margin-top: 81px; }
  .title-footer { top: 682px; font-size: 7px; }
  .masthead-edition { font-size: 6px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card::before { margin-bottom: 12px; }
  .sc-blurb { font-size: 12px; }
  .sc-top { flex-wrap: nowrap; }
  .lg-grid { grid-template-columns: 1fr; }
  #hud button { font-size: 9px; padding-inline: 5px; }
}
@media (max-height: 510px) and (min-width: 761px) {
  #title-screen { overflow-y: auto; }
  .title-inner { min-height: 580px; }
  .title-footer { top: 544px; bottom: auto; }
  .dbox { min-height: 132px; padding-top: 17px; padding-bottom: 30px; }
  .text { min-height: 2.5em; font-size: 14px; line-height: 1.7; }
  #dialogue.is-narration .text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .title-petals::before, .title-petals::after, .sprite, .mouth.talking { animation: none; }
  .title-char, .tm-btn, .story-card, .choice-btn { transition: none; }
}