:root {
  --amber: #f1b45c; --amber-2: #e2a04a; --pink: #ee9fb8; --pink-2: #e27aa0; --green: #8fd6b0;
  --ink: #06070b; --text: #efe8dc; --muted: #a79f92; --dim: #6f695f;
  --glass: rgba(13, 16, 23, .76); --edge: rgba(255, 255, 255, .08);
  --f-head: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-ui: "Manrope", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-text: "Literata", Georgia, "PT Serif", "Times New Roman", serif;
  --f-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
  --stage-h: 1080px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--f-ui); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
#app { position: fixed; inset: 0; overflow: hidden; background: #000; }
#backdrop { position: absolute; inset: -60px; background-size: cover; background-position: center; filter: blur(40px) brightness(.22) saturate(.8); }

#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: #05060a; contain: strict; }
#stage-inner { position: absolute; inset: 0; }
#bg, #cg { position: absolute; inset: 0; }
#bg .l { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; will-change: opacity, transform; animation: breathe 30s ease-in-out infinite alternate; }
#bg .l.on, #cg .l.on { opacity: 1; }
#bg .l.ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 100%, rgba(0, 0, 0, .35), transparent 60%); }
#bg .l.tint-evening { filter: brightness(.62) saturate(.85) sepia(.28) hue-rotate(-8deg); }
#bg .l.tint-dawn { filter: brightness(.8) saturate(.75) hue-rotate(8deg); }
#bg .l.tint-dark { filter: brightness(.45) saturate(.7); }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.03); } }
#cg { z-index: 1; }
#cg .l { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; }
#cg .l.kb { animation: kenburns 26s ease-out both; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.09) translate(-1.2%, -.8%); } }
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0; transition: opacity .7s ease; background: transparent; }
#video.on { opacity: 1; }

#sprites { position: absolute; inset: 0; z-index: 3; }
.sprite { position: absolute; bottom: -24px; height: var(--h, 1040px); width: calc(var(--h, 1040px) * .72); opacity: 0; transform: translateX(-50%) translateY(20px);
  transition: opacity .45s ease, transform .45s ease, left .7s cubic-bezier(.3, .7, .25, 1), filter .35s ease; }
.sprite.on { opacity: 1; transform: translateX(-50%); }
.sprite.off { opacity: 0; transform: translateX(-50%) translateY(20px); }
.sprite.dim { filter: brightness(.6) saturate(.8); }
.sp-breath { position: absolute; inset: 0; transform-origin: 50% 100%; animation: spbreath 4s ease-in-out infinite; }
@keyframes spbreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.006); } }
.sp-in { position: absolute; inset: 0; }
.sp-in img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); pointer-events: none; }
.sp-in img.sil { filter: none; opacity: .92; }

#stream { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
#stream.on { opacity: 1; }
.stream-win { position: absolute; left: 140px; top: 96px; width: 1060px; height: 600px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 42%, rgba(238, 159, 184, .22), transparent 70%), radial-gradient(40% 50% at 80% 90%, rgba(241, 180, 92, .12), transparent 70%), linear-gradient(180deg, #171a28, #0b0d14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .09), 0 0 80px rgba(238, 159, 184, .14); }
.stream-top { position: absolute; top: 22px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 9px; background: #e0455e; color: #fff; font: 800 17px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.live i { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: blinkdot 1.2s ease-in-out infinite; }
@keyframes blinkdot { 50% { opacity: .25; } }
.viewers { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 9px; background: rgba(0, 0, 0, .5); font: 700 20px var(--f-ui); font-variant-numeric: tabular-nums; }
.viewers svg { width: 22px; height: 22px; color: var(--pink); }
.stream-av { position: absolute; left: 50%; top: 47%; width: 380px; height: 380px; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(238, 159, 184, .55), 0 0 0 14px rgba(238, 159, 184, .08), 0 0 90px rgba(238, 159, 184, .35); background: #11131b; }
.stream-av img { width: 100%; height: 100%; object-fit: cover; }
.stream-name { position: absolute; left: 0; right: 0; bottom: 58px; text-align: center; font: 500 46px var(--f-head); color: #f6e9ee; letter-spacing: .04em; }
.stream-bar { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; gap: 5px; align-items: flex-end; height: 22px; }
.stream-bar i { width: 5px; height: 30%; border-radius: 3px; background: var(--pink); opacity: .8; animation: wave 1s ease-in-out infinite; }
.stream-bar i:nth-child(2n) { animation-delay: -.3s; } .stream-bar i:nth-child(3n) { animation-delay: -.55s; } .stream-bar i:nth-child(4n) { animation-delay: -.75s; }
.stream-hearts, .side-hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.heart { position: absolute; bottom: 24px; opacity: 0; animation: heartup 4s ease-out forwards; }
.heart svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 10px currentColor); }
@keyframes heartup {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  10% { transform: translate(0, -40px) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), -560px) scale(.85) rotate(var(--rot)); opacity: 0; }
}

#snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
#fx-vignette { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, rgba(0, 0, 0, .42) 100%); transition: background .8s; }
#fx-grain { position: absolute; inset: -50%; z-index: 6; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
#fx-glitch { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; }
#fx-glitch.on { opacity: 1; }
.gbar { position: absolute; left: 0; right: 0; background: linear-gradient(90deg, rgba(255, 0, 90, .38), rgba(255, 255, 255, .12) 50%, rgba(0, 230, 255, .38)); mix-blend-mode: screen; animation: gbar .55s steps(3) both; }
@keyframes gbar { 0% { transform: translateX(0); } 33% { transform: translateX(var(--gx)); } 66% { transform: translateX(calc(var(--gx) * -1.4)); } 100% { transform: translateX(0); opacity: 0; } }
#stage-inner.glitching { animation: glitch .76s steps(1) both; }
@keyframes glitch {
  0% { transform: none; filter: none; }
  8% { transform: translate(-16px, 3px) skewX(-4deg); filter: drop-shadow(10px 0 0 rgba(255, 0, 80, .75)) drop-shadow(-10px 0 0 rgba(0, 220, 255, .75)); }
  18% { transform: translate(14px, -4px); filter: hue-rotate(60deg) saturate(1.8) contrast(1.3); }
  30% { transform: translate(-6px, 0) scaleY(1.02); filter: drop-shadow(-12px 0 0 rgba(255, 0, 80, .7)) drop-shadow(12px 0 0 rgba(0, 220, 255, .7)); clip-path: inset(10% 0 40% 0); }
  42% { transform: none; filter: invert(.08) contrast(1.4); clip-path: none; }
  55% { transform: translate(8px, 2px); filter: drop-shadow(6px 0 0 rgba(255, 0, 80, .6)); }
  70% { transform: translate(-3px, 0); filter: none; clip-path: inset(0 0 70% 0); }
  82%, 100% { transform: none; filter: none; clip-path: none; }
}
#fx-dark { position: absolute; inset: 0; z-index: 8; background: #000; opacity: 0; pointer-events: none; }
#fx-dark.on { opacity: .96; }
#fx-flash { position: absolute; inset: 0; z-index: 9; background: #fff; opacity: 0; pointer-events: none; }
#fx-flash.flash { animation: flash 1.8s ease-out both; }
#fx-flash.flash-calm { animation: flashcalm 1.6s ease-out both; }
@keyframes flash { 0% { opacity: 0; } 5% { opacity: 1; } 28% { opacity: .92; } 100% { opacity: 0; } }
@keyframes flashcalm { 0% { opacity: 0; } 25% { opacity: .26; } 100% { opacity: 0; } }
.shake { animation: shake .65s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake {
  10%, 90% { translate: -3px 1px; } 20%, 80% { translate: 6px -2px; }
  30%, 50%, 70% { translate: -12px 3px; } 40%, 60% { translate: 12px -3px; } 100% { translate: 0 0; }
}
#stage.flashback #bg, #stage.flashback #cg, #stage.flashback #sprites, #stage.flashback #video { filter: sepia(.62) saturate(.62) contrast(1.06) brightness(.9); }
#stage.flashback #fx-vignette { background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 38%, rgba(24, 12, 2, .72) 100%); }
#stage.flashback #fx-grain { opacity: .16; animation: grain .8s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, 3%); } }

#ui { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; }
html.at-title #ui > :not(#daycard) { visibility: hidden; }

#place { position: absolute; left: 72px; top: 58px; z-index: 12; pointer-events: none; opacity: 0; transform: translateX(-14px); transition: opacity .9s ease, transform .9s ease; padding-left: 22px; }
#place::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--amber), transparent); }
#place.on { opacity: 1; transform: none; }
#place .p { display: block; font: 500 56px/1.05 var(--f-head); color: #f5eee3; text-shadow: 0 2px 24px rgba(0, 0, 0, .75); }
#place .t { display: block; margin-top: 10px; font: 700 17px var(--f-ui); letter-spacing: .34em; text-transform: uppercase; color: var(--amber); text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }

#wallet { position: absolute; top: 34px; right: 44px; z-index: 13; display: flex; align-items: center; gap: 14px; padding: 12px 24px 12px 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font: 700 28px var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: .01em; opacity: 0; transform: translateY(-12px); transition: opacity .5s, transform .5s; pointer-events: none; }
#wallet.on { opacity: 1; transform: none; }
.w-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(241, 180, 92, .15); color: var(--amber); }
.w-ic svg { width: 22px; height: 22px; }
#wallet .delta { position: absolute; right: 12px; top: 100%; margin-top: 12px; text-align: right; white-space: nowrap; opacity: 0; }
#wallet .delta.on { animation: delta 3.4s ease forwards; }
#wallet .delta b { font: 800 30px var(--f-ui); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
#wallet .delta b.plus { color: #a6e3ae; } #wallet .delta b.minus { color: #f2a290; }
#wallet .delta span { display: block; max-width: 520px; overflow: hidden; text-overflow: ellipsis; font: 600 18px var(--f-ui); color: #d9d1c4; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
@keyframes delta { 0% { opacity: 0; transform: translateY(-10px); } 10% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
#skipbadge { position: absolute; top: 44px; right: 330px; z-index: 13; display: none; padding: 8px 18px; border-radius: 999px; background: rgba(241, 180, 92, .16); border: 1px solid rgba(241, 180, 92, .4); color: var(--amber); font: 800 16px var(--f-ui); letter-spacing: .2em; text-transform: uppercase; pointer-events: none; }
#skipbadge span { display: inline-block; animation: blinkdot .8s ease-in-out infinite; }
html.skipping #skipbadge { display: block; }

#syscard { position: absolute; left: 50%; top: 40%; z-index: 14; width: max-content; max-width: 1040px; transform: translate(-50%, -50%) scale(.98); padding: 30px 48px; border-radius: 18px;
  background: rgba(7, 9, 13, .86); border: 1px solid rgba(143, 214, 176, .22); box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(143, 214, 176, .06);
  font: 500 27px/1.6 var(--f-mono); color: #cfeadc; text-align: center; opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; }
#syscard.on { opacity: 1; transform: translate(-50%, -50%); }
#syscard .sc-head b { color: var(--amber); font-weight: 600; }
#syscard .in { animation: fadeup .4s ease both; }

#side { position: absolute; right: 56px; top: 118px; z-index: 16; width: 480px; height: 600px; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: rgba(11, 13, 19, .8); border: 1px solid var(--edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateX(30px); transition: opacity .5s, transform .5s, right .5s; pointer-events: none; }
#side.on { opacity: 1; transform: none; }
#side.left-of-phone { right: 640px; }
.side-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--edge); font: 700 19px var(--f-ui); }
.side-head .live { font-size: 15px; padding: 6px 12px; }
.side-head .sv { display: inline-flex; align-items: center; gap: 8px; color: #d9d1c4; font-variant-numeric: tabular-nums; }
.side-head .sv svg { width: 20px; height: 20px; color: var(--pink); }
.side-head .ch-t { letter-spacing: .12em; text-transform: uppercase; color: #d9d1c4; font-size: 16px; }
.side-list { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 16px 22px 22px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.sc-item { font: 500 22px/1.42 var(--f-ui); color: #e8e1d6; overflow-wrap: anywhere; }
.sc-item b { font-weight: 800; }
.sc-item.in { animation: fadeup .35s ease both; }
.sc-item code, .msg code, .tb-text code, .n-text code, #syscard code { font-family: var(--f-mono); font-size: .86em; padding: 0 .3em; border-radius: 6px; background: rgba(143, 214, 176, .1); color: #bfe8d2; }

#phone { position: absolute; right: 130px; top: 104px; z-index: 20; width: 470px; height: 934px; opacity: 0; transform: translateY(70px) rotate(2deg);
  transition: opacity .5s ease, transform .65s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
#phone.on { opacity: 1; transform: none; }
.ph-body { position: absolute; inset: 0; padding: 14px; border-radius: 66px; background: linear-gradient(145deg, #34373f, #101217 45%, #1f2229);
  box-shadow: 0 50px 100px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(255, 255, 255, .1), inset 0 0 0 6px #08090c; }
.ph-screen { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: 54px; overflow: hidden;
  background: radial-gradient(120% 50% at 50% 0%, rgba(238, 159, 184, .08), transparent 60%), linear-gradient(180deg, #151923, #0c0f15); }
#phone:not(.lila-chat) .ph-screen { background: linear-gradient(180deg, #161a22, #0d1016); }
.ph-cam { position: absolute; top: 32px; left: 50%; width: 120px; height: 34px; margin-left: -60px; border-radius: 20px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 30px 46px 6px; font: 700 20px var(--f-ui); font-variant-numeric: tabular-nums; color: #f1ece4; }
.ph-icons { display: inline-flex; gap: 8px; align-items: center; }
.ph-icons svg { height: 15px; width: auto; fill: currentColor; }
.ph-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 16px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ph-back { color: var(--amber); display: grid; place-items: center; }
.ph-back svg { width: 28px; height: 28px; }
.ph-av { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #1c1f28; box-shadow: 0 0 0 2px rgba(238, 159, 184, .45); }
#phone:not(.lila-chat) .ph-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.ph-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-init { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #262b36; background: color-mix(in srgb, var(--c) 26%, #1a1d26); color: var(--c); font: 800 26px var(--f-ui); }
.ph-who { min-width: 0; }
.ph-who b { display: block; font: 800 24px var(--f-ui); color: #f5f0e8; }
.ph-state { display: block; margin-top: 2px; font: 600 17px var(--f-ui); color: var(--green); transition: color .2s; }
#phone:not(.lila-chat) .ph-state { color: var(--muted); }
#phone.is-typing .ph-state { color: var(--pink); }
.ph-list { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px 18px 10px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, #000 70px); mask-image: linear-gradient(transparent 0, #000 70px); }
.msg { display: flex; flex: none; }
.msg .b { max-width: 84%; padding: 13px 19px; border-radius: 24px; font: 500 22px/1.42 var(--f-ui); overflow-wrap: anywhere; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.msg.lila .b, .msg.them .b { background: #262b36; color: #f1ece4; border-bottom-left-radius: 8px; }
.msg.lila .b { background: linear-gradient(180deg, #2f2b39, #282532); box-shadow: inset 0 0 0 1px rgba(238, 159, 184, .18); }
.msg.me { justify-content: flex-end; }
.msg.me .b { background: linear-gradient(180deg, #f3bb66, #e0a04c); color: #20170b; border-bottom-right-radius: 8px; }
.msg.sys { justify-content: center; }
.msg.sys span { max-width: 92%; padding: 7px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: #bdb5a8; font: 600 17px/1.45 var(--f-ui); text-align: center; }
.msg.in { animation: msgin .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes msgin { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.msg.typing .b { display: flex; gap: 7px; align-items: center; padding: 20px 22px; }
.msg.typing .b i { width: 10px; height: 10px; border-radius: 50%; background: #cbb4be; animation: dot 1.1s ease-in-out infinite; }
.msg.typing .b i:nth-child(2) { animation-delay: .16s; } .msg.typing .b i:nth-child(3) { animation-delay: .32s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }
.ph-field { position: relative; display: flex; align-items: flex-end; gap: 12px; margin: 8px 16px 34px; min-height: 60px; padding: 10px 10px 10px 24px; border-radius: 30px; background: rgba(255, 255, 255, .07); font: 500 21px/1.4 var(--f-ui); }
.ph-typed { flex: 1; max-height: 90px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; color: #f1ece4; padding-bottom: 4px; }
.ph-ph { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: #6f6a62; }
.ph-field.typing .ph-ph { display: none; }
.ph-field.typing .ph-typed::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--amber); animation: blinkdot .9s steps(1) infinite; }
.ph-send { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #20170b; }
.ph-send svg { width: 20px; height: 20px; }
.ph-crack { position: absolute; right: -2px; top: -2px; width: 210px; height: 210px; pointer-events: none; opacity: .85; }
.ph-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 22%, transparent 36%, transparent 72%, rgba(255, 255, 255, .03) 100%); }

#notifs { position: absolute; top: 26px; left: 50%; z-index: 30; width: 660px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.notif { display: flex; gap: 16px; align-items: flex-start; padding: 18px 24px 18px 18px; border-radius: 28px; background: rgba(30, 33, 42, .88); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(-36px) scale(.97); transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .8, .2, 1); }
.notif.on { opacity: 1; transform: none; }
.n-ic { flex: none; width: 56px; height: 56px; }
.n-ic .ph-init { font-size: 24px; }
.n-body { flex: 1; min-width: 0; }
.n-top { display: flex; justify-content: space-between; gap: 12px; font: 800 21px var(--f-ui); color: #f5f0e8; }
.n-top span { font: 600 16px var(--f-ui); color: var(--muted); }
.n-text { margin-top: 4px; font: 500 21px/1.42 var(--f-ui); color: #e0d9ce; overflow-wrap: anywhere; }

#textbox { position: absolute; left: 50%; bottom: 66px; z-index: 10; width: 1580px; min-height: 250px; transform: translateX(-50%); padding: 50px 84px 42px;
  border-radius: 24px; background: linear-gradient(180deg, rgba(15, 18, 26, .8), rgba(9, 11, 16, .9)); border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  transition: opacity .35s ease, left .55s cubic-bezier(.3, .7, .25, 1), width .55s cubic-bezier(.3, .7, .25, 1), transform .55s cubic-bezier(.3, .7, .25, 1); }
#textbox::before { content: ""; position: absolute; left: 70px; right: 70px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(241, 180, 92, .8), transparent); }
#textbox.off { opacity: 0; pointer-events: none; }
#textbox.flashback { background: linear-gradient(180deg, rgba(30, 24, 16, .82), rgba(16, 12, 8, .9)); border-color: rgba(241, 180, 92, .14); }
#phone.on ~ #textbox, #side.on ~ #textbox { left: 84px; width: 1210px; transform: none; }
.tb-name { position: absolute; left: 64px; top: -28px; display: none; align-items: center; gap: 16px; padding: 10px 26px 10px 24px; border-radius: 14px;
  background: rgba(11, 13, 19, .95); border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 3px 0 0 var(--name, var(--amber)), 0 8px 24px rgba(0, 0, 0, .4);
  font: 800 25px var(--f-ui); letter-spacing: .03em; color: var(--name, var(--amber)); }
#textbox.named .tb-name { display: flex; }
.wave { display: none; align-items: center; gap: 4px; height: 24px; }
#textbox.k-voice .wave { display: inline-flex; }
.wave i { width: 4px; height: 25%; border-radius: 2px; background: var(--pink); opacity: .6; transition: height .2s; }
#textbox.talking .wave i { animation: wave .8s ease-in-out infinite; opacity: 1; }
.wave i:nth-child(2) { animation-delay: -.2s !important; } .wave i:nth-child(3) { animation-delay: -.45s !important; } .wave i:nth-child(4) { animation-delay: -.1s !important; } .wave i:nth-child(5) { animation-delay: -.6s !important; }
@keyframes wave { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.tb-avatar { display: none; position: absolute; left: 46px; top: 50%; width: 170px; height: 170px; margin-top: -85px; border-radius: 50%; overflow: hidden; background: #11131b;
  box-shadow: 0 0 0 3px rgba(238, 159, 184, .55), 0 0 40px rgba(238, 159, 184, .28); }
.tb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#textbox.k-voice { padding-left: 262px; }
#textbox.k-voice .tb-name { left: 250px; }
#textbox.k-voice .tb-avatar { display: block; }
#textbox.talking .tb-avatar { animation: glowpulse 1.6s ease-in-out infinite; }
@keyframes glowpulse { 50% { box-shadow: 0 0 0 3px rgba(238, 159, 184, .8), 0 0 70px rgba(238, 159, 184, .5); } }
.tb-text { font: 400 34px/1.62 var(--f-text); color: var(--text); text-wrap: pretty; overflow-wrap: break-word; }
#textbox.k-narr .tb-text { color: #e6dfd2; }
#textbox.k-voice .tb-text { color: #f7ecef; }
.tb-text .ch { opacity: 0; transition: opacity .12s linear; }
.tb-text .ch.on { opacity: 1; }
.tb-text i.next { display: inline-block; width: 12px; height: 12px; margin-left: 14px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px rgba(241, 180, 92, .8); vertical-align: 1px; opacity: 0; }
.tb-text.done i.next { opacity: 1; animation: nextdot 1.3s ease-in-out infinite; }
@keyframes nextdot { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .35; transform: translateY(4px); } }

#quick { position: absolute; left: 50%; bottom: 12px; z-index: 11; display: flex; gap: 4px; transform: translateX(-50%); transition: left .55s cubic-bezier(.3, .7, .25, 1), opacity .3s; }
#phone.on ~ #quick, #side.on ~ #quick { left: 689px; }
#quick button { background: none; border: 0; padding: 10px 16px; border-radius: 10px; color: rgba(239, 232, 220, .5); font: 700 16px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s; }
#quick button:hover, #quick button:focus-visible { color: var(--text); background: rgba(255, 255, 255, .06); outline: none; }
#quick button.on { color: var(--amber); }

#choices { position: absolute; inset: 0; z-index: 15; display: none; align-items: center; justify-content: center; padding-bottom: 250px;
  background: radial-gradient(65% 70% at 50% 42%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .18)); opacity: 0; transition: opacity .3s; }
#choices.on { display: flex; }
#choices.show { opacity: 1; }
#phone.on ~ #choices { padding-right: 560px; }
.ch-list { display: flex; flex-direction: column; gap: 18px; width: 1020px; max-width: 94%; }
.choice-btn { display: flex; align-items: center; gap: 24px; width: 100%; padding: 24px 36px 24px 26px; border-radius: 18px; text-align: left; cursor: pointer;
  background: rgba(14, 17, 24, .86); border: 1px solid rgba(255, 255, 255, .1); color: var(--text); font: 400 30px/1.42 var(--f-text);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .25s, opacity .3s; }
#choices.show .choice-btn { animation: chin .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes chin { from { opacity: 0; transform: translateY(16px); } }
.choice-btn i { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 20px var(--f-ui); font-style: normal; color: var(--amber); border: 1px solid rgba(241, 180, 92, .45); transition: background .2s, color .2s; }
.choice-btn:hover, .choice-btn:focus-visible { background: rgba(40, 33, 24, .92); border-color: rgba(241, 180, 92, .6); box-shadow: 0 0 0 1px rgba(241, 180, 92, .22), 0 14px 44px rgba(241, 180, 92, .13); transform: translateX(6px); outline: none; }
.choice-btn:hover i, .choice-btn:focus-visible i { background: var(--amber); color: #20170b; }
.choice-btn.picked { border-color: var(--amber); background: rgba(241, 180, 92, .2); }
.choice-btn.gone { opacity: 0 !important; transform: translateY(-6px); }

#daycard { position: absolute; inset: 0; z-index: 40; display: none; overflow: hidden; background: #040508; }
#daycard.on { display: block; animation: fadein .9s ease both; }
#daycard.out { animation: fadeout .8s ease both; }
.dc-bg { position: absolute; inset: -80px; background-size: cover; background-position: center; filter: blur(24px) brightness(.36) saturate(.75); animation: dczoom 7s ease-out both; }
@keyframes dczoom { from { transform: scale(1.14); } to { transform: scale(1.04); } }
.dc-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40px; }
.dc-k { font: 700 24px var(--f-ui); letter-spacing: .55em; margin-right: -.55em; text-transform: uppercase; color: var(--amber); animation: rise .9s .15s ease both; }
.dc-n { font: 500 300px/1 var(--f-head); color: #f5eee3; margin: 6px 0 22px; text-shadow: 0 12px 70px rgba(0, 0, 0, .6); animation: rise 1s .25s ease both; }
.dc-line { width: 280px; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); animation: grow 1.2s .45s ease both; }
.dc-d { margin-top: 28px; font: italic 400 46px var(--f-head); color: #ddd4c6; letter-spacing: .02em; animation: rise 1s .6s ease both; }
#daycard.prologue .dc-k { font: 500 150px/1 var(--f-head); letter-spacing: .03em; margin: 0 0 34px; text-transform: none; color: #f5eee3; }
#daycard.prologue .dc-n { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes grow { from { transform: scaleX(0); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } }

#end { position: absolute; inset: 0; z-index: 45; display: none; place-items: center; text-align: center; background: radial-gradient(60% 60% at 50% 45%, rgba(26, 18, 28, .72), rgba(0, 0, 0, .94)); }
#end.on { display: grid; animation: fadein 2s ease both; }
.end-k { font: 700 22px var(--f-ui); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: var(--amber); }
.end-t { margin-top: 18px; font: 400 190px/1 var(--f-head); color: #f1e8da; }
.end-s { margin-top: 10px; font: 400 44px var(--f-head); letter-spacing: .3em; color: #e6b9c6; }
.end-p { margin: 40px auto 0; max-width: 900px; font: 400 28px/1.6 var(--f-text); color: #cfc7b9; }
.end-btns { display: flex; gap: 16px; justify-content: center; margin-top: 48px; }
#end .btn { font-size: 24px; padding: 18px 40px; }

html.ui-hidden #textbox, html.ui-hidden #quick, html.ui-hidden #phone, html.ui-hidden #side, html.ui-hidden #wallet, html.ui-hidden #place,
html.ui-hidden #notifs, html.ui-hidden #syscard, html.ui-hidden #skipbadge { opacity: 0 !important; transition: opacity .3s; }
html.pixel .tb-avatar img, html.pixel .stream-av img, html.pixel .ph-av img { image-rendering: pixelated; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 14px; border: 1px solid rgba(241, 180, 92, .7);
  background: linear-gradient(135deg, #f3bb66, #e7a08f 60%, #e38fae); color: #1f150c; font: 800 17px var(--f-ui); letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 10px 30px rgba(241, 180, 92, .18); transition: transform .2s, box-shadow .2s, filter .2s; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(241, 180, 92, .28); filter: brightness(1.05); outline: none; }
.btn.ghost { background: rgba(255, 255, 255, .04); color: var(--text); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.btn.ghost:hover, .btn.ghost:focus-visible { border-color: rgba(241, 180, 92, .6); background: rgba(241, 180, 92, .08); }

#menus { position: fixed; inset: 0; z-index: 100; pointer-events: none; font-family: var(--f-ui); }
#menus > * { pointer-events: auto; }
#title { position: absolute; inset: 0; overflow: hidden; background: #05060a; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
#title.on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.t-bg { position: absolute; inset: 0; background-size: cover; background-position: 68% center; animation: breathe 40s ease-in-out infinite alternate; }
.t-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.t-video.on { opacity: 1; }
.t-oval { position: absolute; right: 13vw; top: 50%; width: min(24vw, 34vh); aspect-ratio: 9 / 18; transform: translateY(-50%) rotate(-4deg); border-radius: 3.2vw;
  background: linear-gradient(160deg, #1b1e27, #0b0d12); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 90px rgba(0, 0, 0, .7), 0 0 120px rgba(238, 159, 184, .12); }
.t-oval i { position: absolute; left: 50%; top: 44%; width: 46%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, #fff, #fbe8ef 55%, rgba(238, 159, 184, .5) 80%, transparent);
  box-shadow: 0 0 60px rgba(255, 230, 240, .5), 0 0 140px rgba(238, 159, 184, .35); animation: ovalpulse 5s ease-in-out infinite; }
@keyframes ovalpulse { 50% { opacity: .82; transform: translate(-50%, -50%) scale(.97); } }
.t-snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.t-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 10, .94) 0%, rgba(5, 6, 10, .78) 30%, rgba(5, 6, 10, .18) 60%, transparent 80%), linear-gradient(0deg, rgba(5, 6, 10, .65), transparent 32%); }
.t-in { position: absolute; left: clamp(24px, 7vw, 150px); top: 50%; width: min(600px, calc(100vw - 48px)); transform: translateY(-50%); animation: rise 1.4s .2s ease both; }
.t-kicker { font: 700 clamp(11px, .85vw, 14px) var(--f-ui); letter-spacing: .34em; text-transform: uppercase; color: rgba(239, 232, 220, .6); }
.t-title { margin: .08em 0 0; font: 400 clamp(88px, 10.5vw, 190px)/.95 var(--f-head); color: #efe6d8; letter-spacing: -.005em; text-shadow: 0 10px 60px rgba(0, 0, 0, .5); }
.t-sub { margin-top: .25em; font: 400 clamp(22px, 2.2vw, 40px) var(--f-head); letter-spacing: .3em; color: #e8bccb; }
.t-dots { display: flex; gap: 10px; margin-top: 22px; }
.t-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); opacity: .35; animation: tdot 2.4s ease-in-out infinite; }
.t-dots i:nth-child(2) { background: var(--pink); animation-delay: .4s; } .t-dots i:nth-child(3) { background: var(--green); animation-delay: .8s; }
@keyframes tdot { 40% { opacity: 1; } }
.t-main { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.t-start, .t-cont { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 220px; padding: 16px 28px 16px 24px; border-radius: 16px; text-align: left; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.t-start { border: 1px solid rgba(241, 180, 92, .8); background: linear-gradient(135deg, #f3bb66, #e9a58e 55%, #e38fae); color: #1f150c; box-shadow: 0 0 0 3px rgba(241, 180, 92, .14), 0 16px 40px rgba(241, 180, 92, .2); }
.t-start b { font: 800 22px var(--f-ui); }
.t-start span { font: 600 13px var(--f-ui); opacity: .72; }
.t-cont { border: 1px solid rgba(255, 255, 255, .14); background: rgba(12, 14, 20, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text); }
.t-cont b { font: 700 19px var(--f-ui); }
.t-cont .t-note { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px var(--f-ui); color: var(--muted); }
.t-start:hover, .t-start:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(241, 180, 92, .2), 0 20px 50px rgba(241, 180, 92, .3); outline: none; }
.t-cont:not([disabled]):hover, .t-cont:focus-visible { border-color: rgba(241, 180, 92, .6); background: rgba(40, 33, 24, .7); transform: translateY(-2px); outline: none; }
.t-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.t-row button, .t-calm, .x, .chip { padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(12, 14, 20, .55); color: #ddd5c8; font: 600 15px var(--f-ui); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s, background .2s, color .2s; }
.t-row button:not([disabled]):hover, .t-calm:hover, .x:hover, .chip:hover, .t-row button:focus-visible, .x:focus-visible, .chip:focus-visible { border-color: rgba(241, 180, 92, .55); color: #fff; background: rgba(40, 33, 24, .7); outline: none; }
button[disabled] { opacity: .38; cursor: default; }
.t-warn { margin: 28px 0 0; max-width: 520px; font: 500 14px/1.6 var(--f-ui); color: rgba(239, 232, 220, .62); }
.t-warn b { display: inline-block; margin-right: 10px; padding: 1px 8px; border: 1px solid rgba(240, 130, 115, .65); border-radius: 6px; color: #f4a797; font-weight: 800; }
.t-calm { margin-top: 12px; font-size: 13px; padding: 8px 14px; }
.t-foot { position: absolute; right: 28px; bottom: 22px; font: 700 11px var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: rgba(239, 232, 220, .38); }

.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .25s ease; }
.screen.on { opacity: 1; }
.scr-back { position: absolute; inset: 0; background: rgba(4, 5, 8, .74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.panel { position: relative; width: min(760px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(20px, 3vw, 40px); border-radius: 22px;
  background: linear-gradient(180deg, rgba(21, 24, 32, .96), rgba(12, 14, 19, .97)); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 120px rgba(0, 0, 0, .65);
  transform: translateY(12px) scale(.99); transition: transform .3s cubic-bezier(.2, .8, .2, 1); scrollbar-width: thin; scrollbar-color: rgba(241, 180, 92, .35) transparent; }
.panel::before { content: ""; position: absolute; left: 40px; right: 40px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(241, 180, 92, .7), transparent); }
.screen.on .panel { transform: none; }
.panel.wide { width: min(1140px, 100%); }
.panel.narrow { width: min(440px, 100%); text-align: center; }
.panel.tall { width: min(920px, 100%); height: calc(100vh - 32px); height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.scr-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.panel h2 { margin: 0; font: 500 clamp(32px, 3vw, 46px)/1.1 var(--f-head); color: #f2eadd; }
.panel h3 { margin: 22px 0 12px; font: 800 12px var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--amber); }
.panel h3:first-child { margin-top: 0; }
.lead, .note { margin: 0 0 22px; font: 500 15px/1.6 var(--f-ui); color: var(--muted); }
.note { margin: 10px 0 0; font-size: 13px; }

.chap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.chap { display: flex; flex-direction: column; padding: 0 0 18px; border-radius: 16px; overflow: hidden; text-align: left; cursor: pointer; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); transition: transform .25s, border-color .25s, box-shadow .25s; }
.chap:hover, .chap:focus-visible { transform: translateY(-3px); border-color: rgba(241, 180, 92, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); outline: none; }
.c-th { display: block; aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-bottom: 1px solid rgba(255, 255, 255, .06); transition: filter .3s; filter: brightness(.85); }
.chap:hover .c-th { filter: brightness(1); }
.c-t { display: block; padding: 14px 18px 2px; font: 500 30px/1.1 var(--f-head); color: #f2eadd; }
.c-s { display: block; padding: 2px 18px 0; font: 500 13px/1.45 var(--f-ui); color: var(--muted); }
.reached { margin-top: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tabs { display: inline-flex; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.tabs button { padding: 10px 22px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 700 16px var(--f-ui); cursor: pointer; }
.tabs button.on { background: rgba(241, 180, 92, .16); color: var(--amber); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.slot { display: flex; flex-direction: column; padding: 0; border-radius: 14px; overflow: hidden; text-align: left; cursor: pointer; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); transition: transform .2s, border-color .2s; }
.slot:not([disabled]):hover, .slot:focus-visible { transform: translateY(-2px); border-color: rgba(241, 180, 92, .55); outline: none; }
.slot.confirm { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.s-th { position: relative; display: block; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #0e1016; }
.slot.empty .s-th { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 12px, transparent 12px 24px), #0d0f14; }
.s-n { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 8px; background: rgba(0, 0, 0, .6); font: 800 13px var(--f-ui); font-style: normal; color: var(--amber); letter-spacing: .08em; }
.s-meta { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; min-height: 108px; }
.s-meta b { font: 500 22px/1.15 var(--f-head); color: #f2eadd; }
.s-meta span { font: 600 13px var(--f-ui); color: #cdbfa8; }
.s-meta em { font: 400 13px/1.45 var(--f-text); color: var(--muted); font-style: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-meta time { margin-top: auto; font: 600 12px var(--f-ui); color: var(--dim); }
.s-meta strong { font: 800 13px var(--f-ui); color: var(--amber); }
.slot-msg { margin-top: 14px; min-height: 20px; text-align: center; font: 700 14px var(--f-ui); color: var(--green); opacity: 0; }
.slot-msg.on { animation: delta 2.6s ease forwards; }

.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 44px; }
.rng { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; margin-bottom: 18px; font: 600 15px var(--f-ui); color: #ddd5c8; }
.rng output { font: 700 14px var(--f-ui); color: var(--amber); font-variant-numeric: tabular-nums; }
.rng input { grid-column: 1 / -1; width: 100%; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rng input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--amber) var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%)); }
.rng input::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.rng input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--amber); }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #f5eee3; border: 3px solid var(--amber); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.rng input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #f5eee3; border: 3px solid var(--amber); }
.rng input:focus-visible { outline: 2px solid rgba(241, 180, 92, .5); outline-offset: 4px; border-radius: 4px; }
.tgl { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; font: 600 15px/1.4 var(--f-ui); color: #ddd5c8; cursor: pointer; }
.tgl input { position: absolute; opacity: 0; pointer-events: none; }
.tgl .sw { flex: none; position: relative; width: 44px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, .12); transition: background .2s; }
.tgl .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #f5eee3; transition: transform .2s; }
.tgl input:checked + .sw { background: var(--amber); }
.tgl input:checked + .sw::after { transform: translateX(20px); }
.tgl input:focus-visible + .sw { outline: 2px solid rgba(241, 180, 92, .6); outline-offset: 3px; }
.tgl small { display: block; font: 500 13px var(--f-ui); color: var(--muted); }
.sample { min-height: 86px; margin: 4px 0 8px; padding: 16px 20px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06); font: 400 17px/1.6 var(--f-text); color: var(--text); }
.keys { margin: 22px 0 0; font: 500 13px/1.8 var(--f-ui); color: var(--muted); }

.h-list { flex: 1; overflow-y: auto; padding: 4px 14px 20px 4px; scrollbar-width: thin; scrollbar-color: rgba(241, 180, 92, .35) transparent; user-select: text; -webkit-user-select: text; }
.h-list p { margin: 0 0 14px; }
.h-day { display: flex; align-items: center; gap: 16px; margin: 26px 0 16px; font: 500 30px var(--f-head); color: var(--amber); }
.h-day::before, .h-day::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(241, 180, 92, .45), transparent); }
.h-scene { margin: 18px 0 12px; font: 800 12px var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.h-narr { font: 400 17px/1.65 var(--f-text); color: #ddd5c8; }
.h-line { font: 400 17px/1.6 var(--f-text); color: var(--text); }
.h-line b { display: block; margin-bottom: 2px; font: 800 13px var(--f-ui); letter-spacing: .06em; }
.h-line b small { font-weight: 600; color: var(--dim); letter-spacing: 0; }
.h-me b { color: #b4ad9f; }
.h-choice { font: 700 15px var(--f-ui); color: var(--amber); }
.h-choice i { font-style: normal; margin-right: 10px; }
.h-money { font: 700 14px var(--f-ui); color: #a6e3ae; }
.h-chat { font: 500 15px/1.5 var(--f-ui); color: #d9d1c4; }
.h-sys { font: 500 15px/1.55 var(--f-mono); color: #bfe0cf; }
.h-empty { color: var(--muted); }

.about p { margin: 0 0 16px; font: 400 17px/1.7 var(--f-text); color: #ddd5c8; }
.about .a-lead { font: 400 26px/1.4 var(--f-head); color: #f2eadd; }
.about .a-warn b { display: inline-block; margin-right: 8px; padding: 0 8px; border: 1px solid rgba(240, 130, 115, .65); border-radius: 6px; color: #f4a797; font: 800 14px var(--f-ui); }
.about .a-keys, .about .a-small { font: 500 14px/1.7 var(--f-ui); color: var(--muted); }
.p-where { margin: 8px 0 0; font: 600 14px var(--f-ui); color: var(--muted); }
.p-list { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.p-list button { padding: 14px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .035); font: 700 16px var(--f-ui); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s; }
.p-list button:hover, .p-list button:focus-visible { border-color: rgba(241, 180, 92, .55); background: rgba(241, 180, 92, .09); outline: none; }
.p-list .p-exit { margin-top: 8px; color: var(--muted); }
.scr-confirm p { margin: 12px 0 0; font: 500 15px/1.6 var(--f-ui); color: var(--muted); }
.cf-btns { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }

html.fastmode *, html.fastmode *::before, html.fastmode *::after { transition: none !important; animation: none !important; }
html.calm .t-oval i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #bg .l, .t-bg, .sp-breath, #cg .l.kb { animation: none; }
}

html.compact .tb-text { font-size: 44px; line-height: 1.55; }
html.compact .tb-name { font-size: 32px; }
html.compact #quick button { font-size: 22px; padding: 12px 18px; }
html.compact .msg .b { font-size: 29px; }
html.compact .choice-btn { font-size: 38px; }
html.compact .notif .n-text { font-size: 27px; }
html.compact #place .p { font-size: 66px; }

html.portrait #ui { overflow: hidden; }
html.portrait #place { left: 14px; top: 12px; padding-left: 12px; }
html.portrait #place .p { font-size: 24px; }
html.portrait #place .t { font-size: 10px; margin-top: 4px; letter-spacing: .24em; }
html.portrait #wallet { top: 10px; right: 10px; gap: 8px; padding: 5px 12px 5px 6px; font-size: 14px; }
html.portrait .w-ic { width: 22px; height: 22px; } html.portrait .w-ic svg { width: 13px; height: 13px; }
html.portrait #wallet .delta { margin-top: 6px; right: 4px; } html.portrait #wallet .delta b { font-size: 15px; } html.portrait #wallet .delta span { font-size: 11px; max-width: 250px; }
html.portrait #skipbadge { top: 44px; right: 10px; font-size: 10px; padding: 4px 10px; }
html.portrait #textbox { left: 10px; right: 10px; width: auto; transform: none; top: calc(var(--stage-h) + 30px); bottom: 58px; min-height: 0; padding: 30px 20px 20px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(15, 18, 26, .92), rgba(9, 11, 16, .96)); overflow: auto; }
html.portrait #phone.on ~ #textbox, html.portrait #side.on ~ #textbox { left: 10px; width: auto; top: auto; max-height: 42%; }
html.portrait #textbox::before { left: 20px; right: 20px; }
html.portrait .tb-text { font-size: 18px; line-height: 1.62; }
html.portrait .tb-name { left: 14px; top: -15px; padding: 5px 14px; font-size: 14px; border-radius: 10px; gap: 10px; }
html.portrait #textbox.k-voice { padding-left: 20px; padding-top: 34px; }
html.portrait #textbox.k-voice .tb-name { left: 14px; }
html.portrait .tb-avatar { left: auto; right: 14px; top: 10px; width: 52px; height: 52px; margin-top: 0; }
html.portrait .wave { height: 14px; } html.portrait .wave i { width: 3px; }
html.portrait .tb-text i.next { width: 8px; height: 8px; margin-left: 8px; }
html.portrait #quick { left: 0; right: 0; bottom: 8px; transform: none; justify-content: center; flex-wrap: wrap; gap: 0; }
html.portrait #phone.on ~ #quick, html.portrait #side.on ~ #quick { left: 0; }
html.portrait #quick button { font-size: 10px; letter-spacing: .08em; padding: 8px 6px; }
html.portrait #phone { left: 10px; right: 10px; width: auto; top: calc(var(--stage-h) + 10px); bottom: 54px; height: auto; transform: translateY(40px); }
html.portrait #phone.on { transform: none; }
html.portrait .ph-body { padding: 7px; border-radius: 30px; }
html.portrait .ph-screen { border-radius: 24px; }
html.portrait .ph-cam { top: 14px; width: 64px; height: 18px; margin-left: -32px; }
html.portrait .ph-status { padding: 12px 22px 2px; font-size: 12px; }
html.portrait .ph-icons svg { height: 10px; }
html.portrait .ph-head { gap: 10px; padding: 8px 12px; }
html.portrait .ph-back svg { width: 18px; height: 18px; }
html.portrait .ph-av { width: 36px; height: 36px; }
html.portrait .ph-who b { font-size: 15px; } html.portrait .ph-state { font-size: 11px; }
html.portrait .ph-list { padding: 10px 10px 6px; gap: 6px; }
html.portrait .msg .b { font-size: 15px; padding: 8px 12px; border-radius: 16px; }
html.portrait .msg.sys span { font-size: 12px; }
html.portrait .msg.typing .b { padding: 12px 14px; gap: 5px; } html.portrait .msg.typing .b i { width: 7px; height: 7px; }
html.portrait .ph-field { margin: 4px 10px 14px; min-height: 38px; padding: 6px 6px 6px 14px; font-size: 14px; border-radius: 19px; }
html.portrait .ph-ph { left: 14px; }
html.portrait .ph-send { width: 28px; height: 28px; } html.portrait .ph-send svg { width: 14px; height: 14px; }
html.portrait .ph-crack { width: 110px; height: 110px; }
html.portrait #notifs { top: 8px; width: calc(100% - 20px); }
html.portrait .notif { padding: 10px 14px 10px 10px; border-radius: 18px; gap: 10px; }
html.portrait .n-ic { width: 34px; height: 34px; } html.portrait .n-ic .ph-init { font-size: 15px; }
html.portrait .n-top { font-size: 13px; } html.portrait .n-top span { font-size: 11px; } html.portrait .n-text { font-size: 13px; }
html.portrait #syscard { top: calc(var(--stage-h) + 110px); max-width: calc(100% - 24px); width: calc(100% - 24px); padding: 16px 18px; font-size: 14px; transform: translate(-50%, 0) scale(.98); }
html.portrait #syscard.on { transform: translate(-50%, 0); }
html.portrait #side { left: 10px; right: 10px; width: auto; top: calc(var(--stage-h) + 10px); height: 36%; border-radius: 16px; }
html.portrait #side.left-of-phone { right: 10px; }
html.portrait .side-head { padding: 10px 14px; font-size: 13px; }
html.portrait .side-head .live { font-size: 10px; padding: 4px 8px; }
html.portrait .side-list { padding: 10px 14px; gap: 6px; }
html.portrait .sc-item { font-size: 14px; }
html.portrait #choices { align-items: flex-end; padding: 0 10px 70px; }
html.portrait #phone.on ~ #choices { padding-right: 10px; }
html.portrait .ch-list { width: 100%; max-width: none; gap: 10px; }
html.portrait .choice-btn { font-size: 16px; padding: 14px 16px 14px 12px; gap: 12px; border-radius: 14px; }
html.portrait .choice-btn i { width: 28px; height: 28px; font-size: 13px; }
html.portrait .choice-btn:hover { transform: none; }
html.portrait .dc-k { font-size: 13px; }
html.portrait .dc-n { font-size: 150px; }
html.portrait .dc-line { width: 160px; }
html.portrait .dc-d { font-size: 24px; margin-top: 16px; }
html.portrait #daycard.prologue .dc-k { font-size: 64px; margin-bottom: 20px; }
html.portrait .end-k { font-size: 12px; } html.portrait .end-t { font-size: 96px; } html.portrait .end-s { font-size: 22px; }
html.portrait .end-p { font-size: 16px; padding: 0 20px; } html.portrait #end .btn { font-size: 15px; padding: 12px 22px; }
html.portrait .t-bg { background-position: 72% center; }
html.portrait .t-shade { background: linear-gradient(0deg, rgba(5, 6, 10, .96) 0%, rgba(5, 6, 10, .8) 55%, rgba(5, 6, 10, .2) 85%); }
html.portrait .t-in { top: auto; bottom: 28px; transform: none; }
html.portrait .t-oval { right: 50%; top: 22%; transform: translate(50%, -50%) rotate(-4deg); width: 30vw; border-radius: 5vw; }
html.portrait .t-foot { display: none; }
@media (max-width: 720px) {
  .set-grid { grid-template-columns: 1fr; }
  .chap-grid, .slot-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .c-t { font-size: 22px; padding: 10px 12px 2px; } .c-s { padding: 2px 12px 0; font-size: 12px; }
  .s-meta { min-height: 0; padding: 8px 10px 10px; } .s-meta b { font-size: 18px; } .s-meta em { display: none; }
  .t-start, .t-cont { min-width: 0; flex: 1 1 200px; }
}