/* Extra original locations for the relationship-mystery demo. Replace with PNGs any time. */
.bg-physics { background-image:linear-gradient(0deg,#11152ad0,#7586a244),repeating-linear-gradient(90deg,transparent 0 11%,#ffffff18 11.5% 12%),linear-gradient(145deg,#23344c,#796b86 55%,#182033); }
.bg-car { background-image:linear-gradient(0deg,#090b17d9,#55324c66),radial-gradient(ellipse at 23% 25%,#f5d18a 0 2%,transparent 3%),linear-gradient(110deg,#1d273c,#53354c 52%,#161626); }
.bg-piha { background-image:linear-gradient(0deg,#172036d0,#c7707350 48%,#f7b46e44),repeating-linear-gradient(165deg,#27334a 0 8%,#33465d 9% 15%,#6f5f61 16% 18%),linear-gradient(#db8b7f,#163146); }
.bg-massey { background-image:linear-gradient(0deg,#121621ca,#a9a4a650),repeating-linear-gradient(90deg,#544b49 0 11%,#dbcdb955 11.5% 13%,#30333b 13.5% 23%),linear-gradient(145deg,#89909b,#273142); }
.bg-pool { background-image:linear-gradient(0deg,#14223c99,#eb9a8855),radial-gradient(ellipse at 35% 80%,#3d97b9 0 18%,#236a90 19% 31%,transparent 32%),linear-gradient(#efb08c,#5b8295 55%,#203149); }
.bg-ricky-room { background-image:linear-gradient(0deg,#120d1bc8,#4b35544b),repeating-linear-gradient(90deg,#3c2833 0 17%,#715164 17.5% 19%,#2a1a2a 20% 32%),linear-gradient(140deg,#5a4057,#202334); }
.bg-english { background-image:linear-gradient(0deg,#121725c4,#d2b98645),repeating-linear-gradient(90deg,transparent 0 12%,#ece1c722 12.5% 13%,transparent 13.5% 25%),linear-gradient(145deg,#6f8394,#c1a984 55%,#424e63); }
.bg-shakespeare { background-image:linear-gradient(0deg,#17352499,#87c7d266),radial-gradient(ellipse at 78% 57%,#b1e3a3 0 5%,transparent 5.5%),linear-gradient(#91d5ed,#3d935a 62%,#20422c); }
.bg-kajiken { background-image:linear-gradient(0deg,#24140fc4,#f09b4e55),repeating-linear-gradient(90deg,#5d291e 0 8%,#f7d28b 9% 11%,#4a211d 12% 18%),linear-gradient(#ce7948,#2a1514); }
.bg-real-groovy { background-image:linear-gradient(0deg,#130e19c0,#a5626744),repeating-linear-gradient(90deg,#25172b 0 7%,#bb6e70 7.5% 9%,#4a507c 9.5% 11%,#e5b656 11.5% 13%,#25172b 13.5% 18%),linear-gradient(#82555f,#25172b); }
.bg-school-stage { background-image:linear-gradient(0deg,#110d1cc9,#7b4a7755),radial-gradient(ellipse at 25% 8%,#fff4b4 0 7%,transparent 8%),radial-gradient(ellipse at 75% 8%,#fff4b4 0 7%,transparent 8%),linear-gradient(#3d294a,#22162f 68%,#120b1c); }
.bg-korean-night { background-image:linear-gradient(0deg,#22101cbd,#d45a6b55),repeating-linear-gradient(90deg,#352132 0 13%,#f0b64f 13.5% 14.5%,#553347 15% 27%),linear-gradient(#8c3d52,#221321); }
.background.actual-image { filter:brightness(.88) saturate(.9) blur(.45px); }
.sprite.leaving { opacity:0; transform:translateY(20px) !important; }
.sprite.sprite-fade { animation:sprite-arrive .5s ease-out both; }
.sprite.sprite-slide { animation:sprite-slide .5s ease-out both; }
.sprite:has(img) .placeholder-face { display:none; }
/* The supplied neutral portraits have black backgrounds and a top watermark.
   This is a display-only treatment; replace them with transparent PNGs later. */
.sprite img[src*="assets/characters/"] { mix-blend-mode:screen; clip-path:inset(11% 0 0 0); transform:translateY(-4%) scale(1.08); transform-origin:center bottom; }
.sprite img[src*="assets/characters/me/"] { transform:translateY(-4%) scale(-1.08,1.08); }
/* Give visual-novel portraits more presence on desktop screens. */
@media (min-width:701px) {
  .sprites { inset:3% 3% 12%; }
  .sprite { width:min(43vw,500px); height:80vh; }
  .sprite.left { left:3%; }
  .sprite.right { right:3%; }
}
@keyframes sprite-arrive { from { opacity:0; transform:translateY(18px); } }
@keyframes sprite-slide { from { opacity:0; margin-left:-35px; } }

/* Browsers require one intentional click before music can begin. */
.audio-gate {
  position:absolute; inset:0; z-index:50; display:grid; place-content:center;
  gap:.85rem; text-align:center; background:radial-gradient(ellipse at 50% 30%,#4b1b3a,#0b0610 76%);
}
.audio-gate h2 { margin:0; font-size:clamp(2.7rem,7vw,5.5rem); font-weight:normal; color:#efc7d3; }
.audio-gate p { margin:0; font-style:italic; opacity:.82; }
.audio-gate button { justify-self:center; min-width:150px; padding:.75rem 1.6rem; border:1px solid #dcb870aa; background:#280d24; text-transform:uppercase; letter-spacing:.16em; }
.audio-gate button:hover { background:#7b3153; border-color:#f0cf8d; }

.expression-list { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem; }
.expression-list span { border:1px solid #d8b67255; color:#efd29d; padding:.14rem .38rem; font:10px ui-monospace,monospace; text-transform:uppercase; }
.gallery-portrait { width:105px; height:120px; flex:none; overflow:hidden; display:grid; place-items:end center; background:linear-gradient(140deg,var(--accent),#24142d); }
.gallery-portrait img { width:145%; max-height:145%; object-fit:contain; mix-blend-mode:screen; clip-path:inset(11% 0 0); transform:translateY(-5%); }
.gallery-portrait img[src*="assets/characters/me/"] { transform:translateY(-5%) scaleX(-1); }
.ending-list { display:grid; gap:.7rem; }
.ending-card { display:grid; gap:.3rem; padding:1rem; border:1px solid #d8b67266; background:#251026; }
.ending-card.unlocked { border-color:#e1bc79; }
.ending-card small { opacity:.72; font-style:italic; }
.theme-list { display:grid; gap:.7rem; }
.theme-option { min-height:86px; padding:1rem; border:1px solid #d8b67277; text-align:left; display:grid; gap:.35rem; background:#251026; }
.theme-option b { font-size:1.25rem; font-weight:normal; }
.theme-option small { opacity:.8; font-style:italic; }
.theme-original { background:radial-gradient(circle at 22% 10%,#7b3153,#160b1f 75%); }
.theme-missing { background:radial-gradient(circle at 20% 15%,#24547a,#071120 78%); color:#f5dfaa; }
.theme-drawer { background:linear-gradient(120deg,#eadbb7,#416258 55%,#132d29); color:#fff1ce; }
.theme-left { background:radial-gradient(circle at 75% 15%,#8c672d,#252322 54%,#090909); color:#ffe0a3; }
.theme-sunset { background:linear-gradient(90deg,#151928,#30415e 55%,#e98a68); }

/* Theme Lab previews — original stays the default and is restored on refresh. */
.app[data-theme="missing"], .app[data-theme="missing"] .title-screen { background:radial-gradient(ellipse at 50% 28%,#214e70,#0a1830 43%,#050a14 85%); }
.app[data-theme="missing"] .title-screen:before, .app[data-theme="missing"] .title-screen:after { background:linear-gradient(90deg,#071329,#275b78 55%,#071329); box-shadow:inset -15px 0 30px #030815; }
.app[data-theme="missing"] .title-screen h1 em, .app[data-theme="missing"] .kicker { color:#f1ce83; }
.app[data-theme="missing"] .title-nav button { background:#09192ad9; border-color:#f1ce8377; }
.app[data-theme="missing"] .title-screen { align-items:flex-start; justify-content:center; padding:0 0 0 clamp(2rem,10vw,12rem); text-align:left; }
.app[data-theme="missing"] .title-screen:before { left:auto; right:0; top:0; width:min(42vw,620px); height:100%; transform:none; background:linear-gradient(135deg,#1c5475,#0b1c36 58%,#050b19); box-shadow:inset 2px 0 0 #f1ce8344; }
.app[data-theme="missing"] .title-screen:after { right:clamp(2rem,9vw,10rem); top:50%; width:min(25vw,360px); height:min(25vw,360px); transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle at 48% 46%,#02050d 0 9%,#d7b46b 9.5% 10%,#102b46 10.5% 31%,#d7b46b 31.5% 32%,#06101f 32.5% 49%,#163b5a 50% 69%,#050913 70%); box-shadow:0 0 0 18px #071426,0 0 0 19px #f1ce8355,0 30px 60px #000b; }
.app[data-theme="missing"] .title-ornament { order:0; margin:0 0 1.4rem; color:#f1ce83; }
.app[data-theme="missing"] .kicker { order:1; margin:0 0 1rem; }
.app[data-theme="missing"] .title-screen h1 { order:2; margin:0; font-size:clamp(4rem,8vw,7.8rem); line-height:.78; max-width:580px; }
.app[data-theme="missing"] .tagline { order:3; max-width:370px; margin:1.8rem 0 2rem; }
.app[data-theme="missing"] .title-nav { order:4; width:min(290px,72vw); }
.app[data-theme="missing"] .title-nav button { text-align:left; padding:.72rem 1rem; border-left:3px solid #f1ce83; }
.app[data-theme="missing"] .title-nav button:hover { transform:translateX(10px); background:#173b5b; }
.app[data-theme="missing"] .title-foot { left:clamp(2rem,10vw,12rem); bottom:1.5rem; }
@media (max-width:700px) {
  .app[data-theme="missing"] .title-screen { padding-left:2rem; }
  .app[data-theme="missing"] .title-screen:before { width:43vw; opacity:.7; }
  .app[data-theme="missing"] .title-screen:after { right:5vw; width:35vw; height:35vw; opacity:.55; }
  .app[data-theme="missing"] .title-screen h1 { font-size:clamp(3.6rem,15vw,5.5rem); }
  .app[data-theme="missing"] .title-foot { left:2rem; }
}
.app[data-theme="drawer"], .app[data-theme="drawer"] .title-screen { background:radial-gradient(ellipse at 50% 28%,#d7c391,#507267 42%,#142d2b 84%); }
.app[data-theme="drawer"] .title-screen:before, .app[data-theme="drawer"] .title-screen:after { background:linear-gradient(90deg,#173c36,#6f8d78 55%,#173c36); box-shadow:inset -15px 0 30px #0d2421; }
.app[data-theme="drawer"] .title-screen h1 em, .app[data-theme="drawer"] .kicker { color:#fff0bd; }
.app[data-theme="drawer"] .title-nav button { background:#183a35df; border-color:#fff0bd88; }
.app[data-theme="left"], .app[data-theme="left"] .title-screen { background:radial-gradient(ellipse at 50% 28%,#6d5229,#242221 45%,#070707 85%); }
.app[data-theme="left"] .title-screen:before, .app[data-theme="left"] .title-screen:after { background:linear-gradient(90deg,#171717,#73572b 55%,#171717); box-shadow:inset -15px 0 30px #050505; }
.app[data-theme="left"] .title-screen h1 em, .app[data-theme="left"] .kicker { color:#f4cf8a; }
.app[data-theme="left"] .title-nav button { background:#22201ed9; border-color:#f4cf8a77; }

/* Temporary sunset mockup: a right-hand VN menu keeps all text clear of the characters. */
.app[data-theme="sunset"], .app[data-theme="sunset"] .title-screen { background:#0a1020; }
.app[data-theme="sunset"] .title-screen { align-items:flex-end; justify-content:center; padding:0 clamp(2.5rem,9vw,10rem) 0 0; text-align:right; background-image:linear-gradient(90deg,#07101b22 0 42%,#07101b22 100%),url("../assets/backgrounds/title-sunset.png"); background-size:cover; background-position:center; }
.app[data-theme="sunset"] .title-screen:before { left:auto; right:0; top:0; width:min(43vw,620px); height:100%; transform:none; background:linear-gradient(90deg,transparent,#07101bcc 34%,#07101be8); box-shadow:none; }
.app[data-theme="sunset"] .title-screen:after { display:none; }
.app[data-theme="sunset"] .title-ornament { margin:0 0 1.25rem; color:#ffd2ad; }
.app[data-theme="sunset"] .kicker { margin:0 0 .9rem; color:#ffd2ad; }
.app[data-theme="sunset"] .title-screen h1 { margin:0; max-width:430px; font-size:clamp(4rem,7vw,7.4rem); line-height:.75; text-shadow:0 4px 25px #000; }
.app[data-theme="sunset"] .title-screen h1 em { color:#f5b49b; }
.app[data-theme="sunset"] .tagline { max-width:340px; margin:1.7rem 0 2rem; }
.app[data-theme="sunset"] .title-nav { width:270px; }
.app[data-theme="sunset"] .title-nav button { text-align:right; background:#101827b8; border-right:3px solid #f5b49b; border-left:0; }
.app[data-theme="sunset"] .title-nav button:hover { transform:translateX(-8px); background:#26354dbb; border-color:#ffe0bf; }
.app[data-theme="sunset"] .title-foot { right:clamp(2.5rem,9vw,10rem); left:auto; }
@media (max-width:700px) {
  .app[data-theme="sunset"] .title-screen { padding-right:1.8rem; background-position:42% center; }
  .app[data-theme="sunset"] .title-screen:before { width:62vw; }
  .app[data-theme="sunset"] .title-screen h1 { font-size:clamp(3.4rem,14vw,5.3rem); }
  .app[data-theme="sunset"] .title-foot { right:1.8rem; }
}

/* Permanent in-game palette: midnight blue, slate, and sunset peach. */
:root { --ink:#07111e; --paper:#f4e8df; --gold:#f1b18d; --wine:#1c405a; }
.game-screen { background:#07111e; }
.background:after { background:radial-gradient(ellipse at center,transparent 17%,#06101ebf 100%); }
.vignette { background:radial-gradient(ellipse,transparent 42%,#020813a8); }
.chapter-hud { color:#ffd0aa; }
.corner-button { color:#ffd0aa; }
.dialogue-box { background:rgb(7 18 31 / var(--box-opacity)); border-color:#efb18d8c; box-shadow:0 8px 30px #020813c9; }
.speaker { color:#ffd0aa; border-bottom-color:#efb18d55; }
.dialogue-box #advance-mark { color:#f4b28e; }
.game-controls button { color:#f4d3bfbb; }
.choice-area button { background:#10263be8; border-color:#efb18d99; color:#f8ede6; }
.choice-area button:hover { background:#28516d; }
.chapter-card,.opening { background:radial-gradient(ellipse at 50% 38%,#183b59,#07101e 73%); }
.chapter-card h2,.opening h2 { color:#f5c2a4; text-shadow:0 4px 25px #020813; }
.chapter-card .kicker,.opening .opening-kicker { color:#ffd0aa; }
.panel { background:#030914c4; }
.panel-inner { background:linear-gradient(135deg,#122b42,#07111e); border-color:#efb18d8c; box-shadow:0 12px 50px #000b; }
.panel h2,.panel h3 { color:#ffd0aa; }
.close { color:#f8e8de; }
.episode,.extras button,.music-list button { background:#10263be8; border-color:#efb18d77; }
.title-nav button:hover,.episode:hover,.extras button:hover,.music-list button:hover { background:#28516d; border-color:#ffd0aa; }
.save-slot>button:first-child { background:#10263b; border-color:#efb18d77; }
.tiny,.danger { background:#315a73; }
.setting input { accent-color:#efb18d; }
.panel hr { border-color:#efb18d44; }
.history p { border-left-color:#efb18d; }
.toast { background:#10263be8; border-color:#efb18d; color:#fff0e5; }
.gallery-card { border-bottom-color:#efb18d44; }
.expression-list span { border-color:#efb18d77; color:#ffd0aa; }
.ending-card { border-color:#efb18d66; background:#10263b; }
.ending-card.unlocked { border-color:#ffd0aa; }
.theme-option { border-color:#efb18d77; background:#10263b; }
.audio-gate { background:radial-gradient(ellipse at 50% 35%,#1a3d5b,#07111e 78%); }
.audio-gate h2 { color:#f5c2a4; }
.audio-gate button { background:#10263b; border-color:#efb18daa; }
.audio-gate button:hover { background:#28516d; border-color:#ffd0aa; }

/* Softer sunset UI pass: sampled-feeling dusk blue, mauve, and peach rather than flat navy. */
:root { --ink:#2a3148; --paper:#fff0e8; --gold:#ffd0b4; --wine:#805b76; }
.game-screen { background:#56647d; }
.background:after { background:radial-gradient(ellipse at center,transparent 22%,#3e4c6794 100%); }
.vignette { background:radial-gradient(ellipse,transparent 48%,#35415d70); }
.chapter-hud,.corner-button { color:#ffe0ca; text-shadow:0 1px 5px #35415d; }
.dialogue-box { background:linear-gradient(112deg,rgb(58 78 108 / .88),rgb(119 83 111 / .87) 57%,rgb(184 113 102 / .84)); border-color:#ffd0b4a8; box-shadow:0 10px 32px #4a506c88; backdrop-filter:blur(13px); }
.speaker { color:#ffe0ca; border-bottom-color:#ffe0ca77; }
.dialogue-box #advance-mark { color:#ffe0ca; }
.game-controls button { color:#ffe6d6df; text-shadow:0 1px 4px #3e4c67; }
.choice-area button { background:linear-gradient(100deg,rgb(73 99 132 / .93),rgb(145 94 117 / .92)); border-color:#ffd0b4b8; color:#fff4ed; box-shadow:0 5px 15px #4c506a66; }
.choice-area button:hover { background:linear-gradient(100deg,#769cc1,#d48678); }
.chapter-card,.opening { background:radial-gradient(ellipse at 50% 32%,#d18b78 0%,#9b718d 36%,#617a9b 76%,#526782 100%); }
.chapter-card h2,.opening h2 { color:#fff0e6; text-shadow:0 3px 18px #5d5c7b99; }
.chapter-card .kicker,.opening .opening-kicker { color:#fff0cf; }
.panel { background:#56647d8c; backdrop-filter:blur(8px); }
.panel-inner { background:linear-gradient(135deg,rgb(79 104 137 / .97),rgb(141 91 116 / .96) 55%,rgb(190 122 106 / .95)); border-color:#ffd0b4c7; box-shadow:0 14px 45px #4f577788; }
.panel h2,.panel h3 { color:#fff0cf; }
.close { color:#fff4ed; }
.episode,.extras button,.music-list button { background:rgb(81 105 138 / .88); border-color:#ffd0b49a; }
.title-nav button:hover,.episode:hover,.extras button:hover,.music-list button:hover { background:#be7b78; border-color:#fff0cf; }
.save-slot>button:first-child { background:rgb(83 107 140 / .9); border-color:#ffd0b49a; }
.tiny,.danger { background:#9f6d82; }
.setting input { accent-color:#ffd0b4; }
.panel hr { border-color:#ffe0ca77; }
.history p { border-left-color:#ffd0b4; }
.toast { background:linear-gradient(100deg,#596f93,#a86f7d); border-color:#ffe0ca; color:#fff6ef; }
.gallery-card { border-bottom-color:#ffe0ca66; }
.expression-list span { border-color:#ffe0ca88; color:#fff0cf; }
.ending-card { border-color:#ffd0b499; background:rgb(85 108 141 / .86); }
.ending-card.unlocked { border-color:#fff0cf; }
.theme-option { border-color:#ffd0b499; background:rgb(83 107 140 / .88); }
.audio-gate { background:radial-gradient(ellipse at 50% 32%,#cc8878,#94728f 40%,#607896 100%); }
.audio-gate h2 { color:#fff0e6; }
.audio-gate button { background:#5a7598; border-color:#ffe0ca; }
.audio-gate button:hover { background:#b9787a; border-color:#fff0cf; }

/* Darker, less-pastel refinement of the sunset palette. */
:root { --ink:#222b3d; --paper:#f6e8e2; --gold:#e9bdab; --wine:#684e68; }
.game-screen { background:#45536a; }
.background:after { background:radial-gradient(ellipse at center,transparent 19%,#2d3a549e 100%); }
.vignette { background:radial-gradient(ellipse,transparent 44%,#28344e88); }
.dialogue-box { background:linear-gradient(112deg,rgb(42 57 79 / .91),rgb(88 67 91 / .89) 58%,rgb(139 86 81 / .86)); border-color:#e9bdab9c; box-shadow:0 10px 32px #36425d99; }
.choice-area button { background:linear-gradient(100deg,rgb(56 74 101 / .94),rgb(106 72 91 / .93)); border-color:#e9bdaba8; }
.choice-area button:hover { background:linear-gradient(100deg,#637d9e,#9b6568); }
.chapter-card,.opening { background:radial-gradient(ellipse at 50% 30%,#a66c65 0%,#76566e 39%,#4c617e 79%,#435875 100%); }
.panel { background:#3e4e6c98; }
.panel-inner { background:linear-gradient(135deg,rgb(57 75 101 / .97),rgb(102 69 91 / .97) 57%,rgb(145 86 79 / .96)); border-color:#e9bdabb5; box-shadow:0 14px 45px #35415d99; }
.episode,.extras button,.music-list button { background:rgb(58 77 104 / .9); border-color:#e9bdab88; }
.title-nav button:hover,.episode:hover,.extras button:hover,.music-list button:hover { background:#95646a; }
.save-slot>button:first-child { background:rgb(59 78 105 / .92); border-color:#e9bdab88; }
.tiny,.danger { background:#80576e; }
.toast { background:linear-gradient(100deg,#485f82,#865b6d); }
.ending-card,.theme-option { background:rgb(60 79 106 / .9); border-color:#e9bdab88; }
.audio-gate { background:radial-gradient(ellipse at 50% 32%,#a66c65,#76566e 41%,#4b607c 100%); }
.audio-gate button { background:#506b8e; }
.audio-gate button:hover { background:#926167; }

/* Match the title, first-click gate, and transition cards to the dusk image too. */
.app[data-theme="sunset"] .title-screen:before { background:linear-gradient(90deg,transparent,rgb(39 51 74 / .72) 32%,rgb(45 49 70 / .9)); box-shadow:none; }
.app[data-theme="sunset"] .title-screen h1 { color:#f7e8e1; text-shadow:0 4px 25px #41475fbb; }
.app[data-theme="sunset"] .title-screen h1 em { color:#e8b19e; }
.app[data-theme="sunset"] .kicker { color:#f1cfbd; }
.app[data-theme="sunset"] .title-nav button { background:rgb(54 70 96 / .74); border-right-color:#e9bdab; color:#fff1e9; }
.app[data-theme="sunset"] .title-nav button:hover { background:rgb(132 88 99 / .88); border-color:#f4d1bd; }
.app[data-theme="sunset"] .title-foot { color:#f3dbcf; }
.app[data-theme="sunset"] .audio-gate { place-content:center end; padding-right:clamp(2.5rem,9vw,10rem); text-align:right; background-image:linear-gradient(90deg,rgb(38 50 73 / .12),rgb(43 48 70 / .76)),url("../assets/backgrounds/title-sunset.png"); background-size:cover; background-position:center; }
.app[data-theme="sunset"] .audio-gate h2 { color:#f7e8e1; text-shadow:0 3px 18px #41475fbb; }
.app[data-theme="sunset"] .audio-gate .kicker { color:#f1cfbd; }
.app[data-theme="sunset"] .audio-gate button { justify-self:end; background:rgb(54 70 96 / .82); border-color:#e9bdab; }
.app[data-theme="sunset"] .audio-gate button:hover { background:#845863; border-color:#f4d1bd; }

/* The first-click Play control floats over the art rather than becoming another tile. */
.audio-gate button {
  min-width:0;
  width:auto;
  height:auto;
  padding:.35rem 0;
  border:0 !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
  color:#fff1e9;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:.25em;
  text-shadow:0 2px 14px #26334dcc;
  transition:transform .22s ease, color .22s ease, text-shadow .22s ease;
}
.audio-gate button::before { content:""; display:none; }
.audio-gate button:hover { transform:translateX(5px); color:#fff6e7; text-shadow:0 0 18px #f4d1bd; }

.loading-screen { position:absolute; inset:0; z-index:60; display:grid; place-content:center end; gap:.75rem; padding-right:clamp(2.5rem,9vw,10rem); text-align:right; color:#fff1e9; background-image:linear-gradient(90deg,rgb(38 50 73 / .15),rgb(43 48 70 / .8)),url("../assets/backgrounds/title-sunset.png"); background-size:cover; background-position:center; transition:opacity .55s ease, visibility .55s ease; }
.loading-screen.leaving { opacity:0; visibility:hidden; pointer-events:none; }
.loading-screen h2 { margin:0; color:#f7e8e1; font-size:clamp(2.7rem,7vw,5.5rem); font-weight:normal; text-shadow:0 3px 18px #41475fbb; }
.loading-screen p { margin:0; font-style:italic; opacity:.88; }
.loading-art { justify-self:end; width:clamp(145px,19vw,245px); margin:-.35rem 0 -.15rem; animation:loading-float 3.2s ease-in-out infinite; }
.loading-art img { display:block; width:100%; max-height:210px; object-fit:contain; filter:drop-shadow(0 13px 18px #26334d99); }
.loading-bar { justify-self:end; width:min(260px,64vw); height:3px; overflow:hidden; background:#fff0e52b; }
.loading-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#f5c6aa,#fff0cf); box-shadow:0 0 10px #f7d2bd; transition:width .18s ease; }
.loading-screen small { color:#f6d7c8; font:10px ui-monospace,monospace; letter-spacing:.15em; }
@keyframes loading-float { 50% { transform:translateY(-6px) rotate(-1deg); } }
.chapter-card,.opening { background:radial-gradient(ellipse at 50% 32%,#9e6866 0%,#70536b 43%,#4b5d78 80%,#43536d 100%); }
@media (max-width:700px) {
  .app[data-theme="sunset"] .audio-gate { padding-right:1.8rem; }
}

/* Korean Night is presented as one still, five-person group photo. */
.sprite.group-sprite { width:min(29vw,345px); height:74vh; }
.sprite.group-1 { left:-4.5%; }
.sprite.group-2 { left:15.5%; }
.sprite.group-3 { left:50%; transform:translateX(-50%); }
.sprite.group-4 { right:15.5%; }
.sprite.group-5 { right:-4.5%; }
.sprite.left,.sprite.right { z-index:2; }
.sprite.friend-background { bottom:14%; width:min(17vw,210px); height:44vh; opacity:.76; filter:blur(.25px) saturate(.84); z-index:3; }
.sprite.friend-background.group-2 { left:34%; }
.sprite.friend-background.group-3 { left:50%; transform:translateX(-50%); }
.sprite.friend-background.group-4 { right:34%; }

.memory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.memory-card { position:relative; min-height:145px; overflow:hidden; display:flex; align-items:end; background-size:cover; background-position:center; border:1px solid #e9bdab88; }
.memory-card::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#17263fe8 0%,#17263f35 72%); }
.memory-card>div { position:relative; z-index:1; width:100%; padding:.8rem; display:grid; gap:.25rem; text-shadow:0 2px 8px #000; }
.memory-card b { font-size:1.05rem; font-weight:normal; }
.memory-card small { font-style:italic; opacity:.9; }
.memory-card.locked { background:linear-gradient(135deg,#26364e,#172238); border-color:#e9bdab55; }
.memory-card.locked::before { background:#172238aa; }
.text-blip-setting input { justify-self:start; width:1.1rem; height:1.1rem; accent-color:#e9bdab; }
@media (max-width:700px) {
  .loading-screen { padding-right:1.8rem; }
  .memory-grid { grid-template-columns:1fr; }
  .sprite.group-sprite { width:31vw; height:61vh; }
  .sprite.group-1 { left:-5.5%; }
  .sprite.group-2 { left:14.5%; }
  .sprite.group-4 { right:14.5%; }
  .sprite.group-5 { right:-5.5%; }
  .sprite.friend-background { bottom:17%; width:22vw; height:39vh; }
  .sprite.friend-background.group-2 { left:29%; }
  .sprite.friend-background.group-4 { right:29%; }
}