/* novel.css — the private Valeria story page. */
:root {
  --rose: #ff9ec0; --gold: #ffd9a0; --ink: #fbe9ef; --dim: rgba(251, 233, 239, .62);
  --panel: rgba(16, 10, 22, .74); --line: rgba(255, 158, 192, .26);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body.vn {
  margin: 0; overflow: hidden; color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  background: #0b0710; -webkit-tap-highlight-color: transparent;
}
/* ---------- living background ---------- */
.bg { position: fixed; inset: 0; z-index: 0; transition: background 1.4s ease; }
.bg[data-scene="night"] { background: radial-gradient(900px 600px at 72% -10%, rgba(158, 110, 255, .30), transparent 62%), linear-gradient(170deg, #12081a, #2a1038); }
.bg[data-scene="dusk"]  { background: radial-gradient(900px 600px at 18% -10%, rgba(255, 170, 120, .32), transparent 62%), linear-gradient(170deg, #2b1030, #7a2f45); }
.bg[data-scene="rain"]  { background: radial-gradient(900px 600px at 50% -10%, rgba(130, 190, 255, .22), transparent 62%), linear-gradient(170deg, #0d1420, #22303f); }
.bg[data-scene="dawn"]  { background: radial-gradient(900px 600px at 50% 0%, rgba(255, 205, 140, .34), transparent 62%), linear-gradient(170deg, #2a1430, #8a4a52); }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 3px 3px; }
.hearts { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.heart { position: absolute; bottom: -30px; color: var(--rose); opacity: 0;
  animation: rise linear infinite; }
@keyframes rise {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  12% { opacity: .22; }
  100% { transform: translateY(-108vh) rotate(320deg); opacity: 0; }
}
/* ---------- chrome ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  padding: 14px 16px; }
.ghost { font-family: system-ui, sans-serif; font-size: 12px; letter-spacing: .08em;
  color: var(--dim); background: rgba(255, 255, 255, .05); cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.ghost:hover { color: var(--ink); border-color: var(--rose); }
.status { position: fixed; top: 16px; left: 16px; z-index: 5;
  font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .06em;
  color: var(--dim); }
/* ---------- stage: photo + caption ---------- */
.stage { position: relative; z-index: 2; height: 100%; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 22px 240px; }
.chapter { font-size: clamp(11px, 1.6vw, 13px); letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold); opacity: .85; margin-bottom: 16px;
  text-align: center; }
.photo { position: relative; width: min(430px, 74vw); aspect-ratio: 4 / 5;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55); background: rgba(255, 255, 255, .04);
  transition: opacity .6s ease, transform .6s ease; }
.photo.fade { opacity: 0; transform: scale(.985); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: none; }
.photo.has-img img { display: block; }
.photo.has-img .frame-empty { display: none; }
.frame-empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; text-align: center;
  color: rgba(255, 158, 192, .62); font-family: system-ui, sans-serif; font-size: 12px;
  letter-spacing: .14em; padding: 24px;
  background-image: linear-gradient(135deg, rgba(255, 158, 192, .07) 25%, transparent 25%, transparent 50%, rgba(255, 158, 192, .07) 50%, rgba(255, 158, 192, .07) 75%, transparent 75%);
  background-size: 26px 26px; }
.frame-empty b { font-size: 22px; font-weight: 400; }
.photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px;
  font-size: 12px; font-style: italic; color: rgba(251, 233, 239, .88);
  background: linear-gradient(to top, rgba(10, 6, 14, .88), transparent);
  text-align: center; }
/* ---------- dialogue box ---------- */
.dialogue { position: fixed; z-index: 4; left: 50%; bottom: 26px;
  transform: translateX(-50%); width: min(760px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 22px 26px 26px; backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); cursor: pointer; }
.name { font-family: system-ui, sans-serif; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px; min-height: 15px; }
.line { margin: 0; font-size: clamp(16px, 2.5vw, 21px); line-height: 1.75;
  min-height: 3.5em; white-space: pre-wrap; }
.line::after { content: "\25BE"; float: right; color: var(--rose); opacity: .75;
  animation: blink 1.4s ease-in-out infinite; font-size: 14px; }
.line.typing::after { content: ""; }
@keyframes blink { 50% { opacity: .15; } }
.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.choices[hidden] { display: none; }
.choice { font-family: Georgia, serif; font-size: clamp(14px, 2.1vw, 17px); text-align: left;
  color: var(--ink); background: rgba(255, 158, 192, .10); cursor: pointer;
  border: 1px solid var(--line); border-radius: 13px; padding: 13px 17px; transition: .2s; }
.choice:hover { background: rgba(255, 158, 192, .22); border-color: var(--rose);
  transform: translateX(5px); }
/* ---------- lock screen ---------- */
.lock { position: fixed; inset: 0; z-index: 10; display: flex;
  align-items: center; justify-content: center; padding: 26px; }
.lock-card { max-width: 520px; width: 100%; text-align: center;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-radius: 24px; padding: 46px 32px; backdrop-filter: blur(9px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lock-heart { font-size: 40px; color: var(--rose); opacity: .8; }
.lock-card h1 { font-size: clamp(24px, 5vw, 34px); font-weight: 400; margin: 14px 0 6px; }
.lock-card p { color: var(--dim); line-height: 1.8; font-size: 15px; margin: 10px 0 0; }
.lock-hint { font-family: system-ui, sans-serif; font-size: 12px; letter-spacing: .1em;
  margin-top: 26px !important; opacity: .7; }
/* ---------- reply box ---------- */
.reply { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.reply[hidden] { display: none; }
.reply textarea { width: 100%; min-height: 96px; resize: vertical; padding: 13px 15px;
  color: var(--ink); background: rgba(255, 255, 255, .06); font-family: Georgia, serif;
  font-size: 16px; line-height: 1.6; border: 1px solid var(--line); border-radius: 13px; }
.reply textarea:focus { outline: none; border-color: var(--rose); }
.reply-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.send { font-family: system-ui, sans-serif; font-size: 13px; cursor: pointer;
  color: #24101c; background: linear-gradient(90deg, var(--rose), var(--gold));
  border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 600; }
.reply-note { font-size: 12px; color: var(--dim); font-family: system-ui, sans-serif; }
[hidden] { display: none !important; }
@media (max-width: 560px) {
  .stage { padding: 56px 16px 250px; }
  .photo { width: 78vw; }
  .dialogue { bottom: 12px; padding: 18px 18px 20px; }
}

/* ---------- illustrated scenery (layered behind everything) ---------- */
.bg{overflow:hidden}
.bg>div{position:absolute;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
.bg .stars{inset:0}
.bg .stars::before,.bg .stars::after{content:"";position:absolute;inset:0}
.bg .stars::before{
  background-image:radial-gradient(2.4px 2.4px at 8% 12%,#fff,transparent),
    radial-gradient(1.9px 1.9px at 22% 26%,#fff,transparent),
    radial-gradient(3.1px 3.1px at 34% 8%,#fff,transparent),
    radial-gradient(2.1px 2.1px at 47% 22%,#fff,transparent),
    radial-gradient(2.7px 2.7px at 58% 10%,#fff,transparent),
    radial-gradient(2px 2px at 69% 28%,#fff,transparent),
    radial-gradient(3.3px 3.3px at 78% 6%,#fff,transparent),
    radial-gradient(2.2px 2.2px at 88% 24%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 95% 12%,#fff,transparent),
    radial-gradient(2.3px 2.3px at 14% 34%,#fff,transparent);
  animation:twinkle 4.6s ease-in-out infinite}
.bg .stars::after{
  background-image:radial-gradient(1.5px 1.5px at 3% 44%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 28% 48%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 55% 46%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 74% 50%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 91% 44%,#fff,transparent);
  animation:twinkle 6.8s ease-in-out infinite reverse}
@keyframes twinkle{0%,100%{opacity:.45}50%{opacity:1}}
.bg .moon{top:8%;right:13%;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fffdf6,#f4e4c2 66%,#d9c69c);
  box-shadow:0 0 26px 10px rgba(255,246,224,.85),0 0 90px 40px rgba(255,238,200,.35)}
.bg .sun{left:50%;bottom:26%;width:190px;height:190px;margin-left:-95px;border-radius:50%;
  filter:blur(.5px);
  background:radial-gradient(circle,rgba(255,244,205,.98),rgba(255,186,110,.72) 46%,rgba(255,140,90,.28) 66%,transparent 78%)}
.bg .clouds{inset:-12% -34%}
.bg .clouds::before,.bg .clouds::after{content:"";position:absolute;inset:0}
.bg .clouds::before{
  background-image:radial-gradient(180px 46px at 18% 30%,rgba(255,255,255,.5),transparent 72%),
    radial-gradient(240px 54px at 52% 22%,rgba(255,236,224,.44),transparent 74%),
    radial-gradient(200px 44px at 82% 34%,rgba(255,220,214,.38),transparent 74%);
  animation:drift 60s linear infinite}
.bg .clouds::after{
  background-image:radial-gradient(220px 50px at 32% 52%,rgba(255,255,255,.28),transparent 74%),
    radial-gradient(260px 56px at 74% 56%,rgba(255,228,220,.24),transparent 74%);
  animation:drift 92s linear infinite reverse}
@keyframes drift{from{transform:translateX(-4%)}to{transform:translateX(5%)}}
.bg .ridges{left:-2%;right:-2%;bottom:0;height:58%;
  background:linear-gradient(180deg,rgba(120,86,150,.85),rgba(40,24,64,.97));
  clip-path:polygon(0 100%,0 74%,10% 56%,20% 70%,32% 44%,44% 68%,56% 50%,68% 72%,80% 54%,90% 70%,100% 58%,100% 100%)}
.bg[data-scene="dusk"] .ridges{background:linear-gradient(180deg,rgba(150,72,96,.9),rgba(52,20,48,.98))}
.bg[data-scene="dawn"] .ridges{background:linear-gradient(180deg,rgba(150,96,120,.85),rgba(58,28,58,.96))}
.bg .skyline{left:-4%;right:-4%;bottom:0;height:46%;
  background:radial-gradient(72% 120% at 50% 102%,rgba(152,112,220,.34),transparent 72%),
    linear-gradient(180deg,transparent 38%,rgba(13,8,24,.9) 100%)}

/* ---------- forest (layered trees + a shaft of light + fireflies) ---------- */
.bg[data-scene="forest"]{background:radial-gradient(900px 620px at 70% -10%,rgba(150,255,190,.22),transparent 62%),linear-gradient(170deg,#0a2014,#1c4a2e)}
.bg .forest{left:-3%;right:-3%;bottom:0;height:64%;
  background:radial-gradient(560px 380px at 62% 18%,rgba(210,255,190,.4),transparent 70%)}
.bg .forest::before,.bg .forest::after{content:"";position:absolute;inset:0}
.bg .forest::before{background:#1c5230;
  clip-path:polygon(0 100%,0 60%,3% 42%,6% 60%,9% 38%,12% 58%,15% 44%,18% 60%,21% 36%,24% 56%,27% 42%,30% 60%,33% 40%,36% 58%,39% 44%,42% 60%,45% 36%,48% 56%,51% 42%,54% 60%,57% 38%,60% 58%,63% 44%,66% 60%,69% 36%,72% 56%,75% 42%,78% 60%,81% 40%,84% 58%,87% 44%,90% 60%,93% 38%,96% 58%,100% 44%,100% 100%)}
.bg .forest::after{background:#0a2614;
  clip-path:polygon(0 100%,0 74%,4% 56%,8% 76%,12% 54%,16% 76%,20% 58%,24% 78%,28% 56%,32% 76%,36% 60%,40% 78%,44% 56%,48% 76%,52% 60%,56% 78%,60% 56%,64% 76%,68% 60%,72% 78%,76% 56%,80% 76%,84% 60%,88% 78%,92% 56%,96% 76%,100% 60%,100% 100%)}
/* ---------- rain (soft mist + lamp glow + wet ground) ---------- */
.bg .rain{inset:-10% -10%;
  background:radial-gradient(80% 60% at 30% 18%,rgba(152,186,236,.17),transparent 70%),
    radial-gradient(70% 55% at 72% 38%,rgba(132,170,224,.12),transparent 72%),
    linear-gradient(180deg,rgba(120,150,200,.10),transparent 62%)}
.bg .street{left:-5%;right:-5%;bottom:0;height:30%;
  background:radial-gradient(150px 80px at 28% 100%,rgba(255,214,150,.7),transparent 70%),
    radial-gradient(190px 96px at 72% 100%,rgba(255,214,150,.5),transparent 72%),
    radial-gradient(120px 60px at 50% 100%,rgba(255,206,140,.4),transparent 74%),
    linear-gradient(180deg,transparent,rgba(10,16,26,.9))}
/* ---------- which layers belong to which scene ---------- */
.bg[data-scene="night"] .stars,.bg[data-scene="night"] .moon,.bg[data-scene="night"] .skyline{opacity:1}
.bg[data-scene="dusk"] .sun,.bg[data-scene="dusk"] .clouds,.bg[data-scene="dusk"] .ridges{opacity:1}
.bg[data-scene="dawn"] .sun{opacity:1}
.bg[data-scene="dawn"] .clouds{opacity:.9}
.bg[data-scene="dawn"] .ridges{opacity:1}
.bg[data-scene="rain"] .rain,.bg[data-scene="rain"] .street,.bg[data-scene="rain"] .clouds{opacity:1}
.bg[data-scene="forest"] .forest{opacity:1}
.bg[data-scene="forest"] .stars{opacity:.5}
/* ---------- particles ---------- */
#fx{position:fixed;inset:0;z-index:1;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .bg .stars::before,.bg .stars::after,.bg .clouds::before,.bg .clouds::after{animation:none}
  #fx{display:none}
}

/* ---------- the mood picture inside the frame (when a scene has no photo) ---------- */
.photo:not(.has-img) .frame-empty{background-image:none;overflow:hidden;color:transparent}
.photo:not(.has-img) .frame-empty::before,
.photo:not(.has-img) .frame-empty::after{content:"";position:absolute;inset:0}

.photo[data-scene="night"] .frame-empty{
  background:radial-gradient(circle at 72% 22%,#fffdf3 0 22px,rgba(255,246,214,.4) 26px,transparent 48px),
    linear-gradient(180deg,#1c1238 0%,#33205e 46%,#140b28 100%)}
.photo[data-scene="night"] .frame-empty::before{
  background-image:radial-gradient(2px 2px at 12% 16%,#fff,transparent),
    radial-gradient(2.6px 2.6px at 34% 9%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 55% 20%,#fff,transparent),
    radial-gradient(2.2px 2.2px at 82% 12%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 46% 30%,#fff,transparent),
    radial-gradient(2px 2px at 22% 34%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 68% 32%,#fff,transparent)}
.photo[data-scene="night"] .frame-empty::after{
  background:radial-gradient(72% 42% at 50% 102%,rgba(152,112,220,.36),transparent 72%),
    linear-gradient(180deg,transparent 55%,rgba(12,7,22,.85) 100%)}

.photo[data-scene="dusk"] .frame-empty{
  background:radial-gradient(circle at 34% 60%,#ffe0ad 0 38px,rgba(255,150,90,.65) 44px,rgba(255,120,90,.25) 84px,transparent 110px),
    linear-gradient(180deg,#3a1436 0%,#8a3a4e 48%,#c86a4a 78%,#5a2238 100%)}
.photo[data-scene="dusk"] .frame-empty::before{
  background-image:radial-gradient(70px 16px at 68% 26%,rgba(255,222,204,.55),transparent 72%),
    radial-gradient(92px 20px at 40% 18%,rgba(255,212,192,.42),transparent 72%),
    radial-gradient(60px 14px at 86% 38%,rgba(255,214,196,.36),transparent 72%)}
.photo[data-scene="dusk"] .frame-empty::after{
  background:linear-gradient(180deg,rgba(78,32,60,.92),rgba(24,10,28,.98));
  clip-path:polygon(0 100%,0 72%,16% 54%,34% 70%,52% 50%,70% 68%,86% 56%,100% 70%,100% 100%)}

.photo[data-scene="dawn"] .frame-empty{
  background:radial-gradient(circle at 50% 64%,#fff6dc 0 30px,rgba(255,206,150,.7) 40px,rgba(255,170,120,.35) 74px,transparent 104px),
    linear-gradient(180deg,#5a2f52 0%,#c86a6a 40%,#f0a878 66%,#7a3f55 100%)}
.photo[data-scene="dawn"] .frame-empty::before{
  background-image:radial-gradient(120% 42% at 50% 70%,rgba(255,238,214,.5),transparent 72%)}
.photo[data-scene="dawn"] .frame-empty::after{
  background:linear-gradient(180deg,rgba(104,50,80,.9),rgba(44,22,44,.96));
  clip-path:polygon(0 100%,0 76%,22% 62%,44% 76%,66% 60%,100% 78%,100% 100%)}

.photo[data-scene="rain"] .frame-empty{
  background:radial-gradient(circle at 26% 34%,rgba(255,224,166,.55),transparent 64px),
    radial-gradient(circle at 74% 30%,rgba(180,210,255,.28),transparent 70px),
    linear-gradient(180deg,#1c2836 0%,#2a3844 52%,#0e151f 100%)}
.photo[data-scene="rain"] .frame-empty::before{
  background:radial-gradient(80% 60% at 32% 20%,rgba(160,196,240,.2),transparent 72%),
    radial-gradient(70% 55% at 72% 40%,rgba(140,176,226,.14),transparent 74%)}
.photo[data-scene="rain"] .frame-empty::after{
  background:radial-gradient(46px 30px at 28% 76%,rgba(255,222,150,.8),transparent 72%),
    radial-gradient(58px 34px at 70% 80%,rgba(255,222,150,.6),transparent 74%),
    linear-gradient(180deg,transparent 58%,rgba(10,16,26,.9))}

.photo[data-scene="forest"] .frame-empty{
  background:radial-gradient(70% 52% at 62% 24%,rgba(214,255,192,.5),transparent 72%),
    radial-gradient(3px 3px at 30% 44%,rgba(255,244,170,.9),transparent),
    radial-gradient(2.4px 2.4px at 48% 58%,rgba(255,244,170,.85),transparent),
    radial-gradient(2.8px 2.8px at 66% 40%,rgba(255,244,170,.9),transparent),
    radial-gradient(2.2px 2.2px at 78% 60%,rgba(255,244,170,.8),transparent),
    linear-gradient(180deg,#143a26 0%,#1e5232 60%,#0a1c12 100%)}
.photo[data-scene="forest"] .frame-empty::before{
  background:#1c5230;
  clip-path:polygon(0 100%,0 62%,4% 40%,8% 62%,12% 38%,16% 60%,20% 44%,24% 62%,28% 36%,32% 58%,36% 42%,40% 62%,44% 38%,48% 58%,52% 44%,56% 62%,60% 36%,64% 58%,68% 42%,72% 62%,76% 40%,80% 60%,84% 44%,88% 62%,92% 38%,96% 60%,100% 44%,100% 100%)}
.photo[data-scene="forest"] .frame-empty::after{
  background:#0a2614;
  clip-path:polygon(0 100%,0 76%,5% 56%,10% 78%,15% 54%,20% 78%,25% 58%,30% 80%,35% 56%,40% 78%,45% 60%,50% 80%,55% 56%,60% 78%,65% 60%,70% 80%,75% 56%,80% 78%,85% 60%,90% 80%,95% 56%,100% 78%,100% 100%)}

.lock-lang{position:absolute;top:16px;right:16px;z-index:11}
@media (max-width:560px){ .lock-lang{top:12px;right:12px} }

/* ---------- phones ---------- */
@media (max-width: 640px){
  .stage{padding:52px 14px 268px}
  .photo{width:min(88vw,340px);border-radius:16px}
  .chapter{letter-spacing:.22em;font-size:11px;margin-bottom:10px}
  .dialogue{bottom:0;width:100%;border-radius:18px 18px 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .line{font-size:16px;line-height:1.72;min-height:3.2em}
  .choices{gap:8px;margin-top:14px}
  .choice{padding:12px 14px;font-size:15px}
  .topbar{padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top))}
  .ghost{padding:5px 10px;font-size:11px}
  .status{display:none}
  .reply textarea{min-height:80px;font-size:16px}
  .lock-card{padding:34px 22px}
}
@media (max-height: 560px) and (orientation: landscape){
  .stage{padding:20px 14px 176px}
  .photo{width:auto;height:50vh;aspect-ratio:auto}
  .dialogue{bottom:8px;width:calc(100vw - 20px);border-radius:18px}
  .line{min-height:2.4em}
}

.choice-cue{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.75;margin:2px 0 4px}