:root{
  --ink:#0b0d1a; --ink2:#141833; --red:#e2453c; --red2:#ff6b5e; --gold:#e3bf78; --paper:#f4ede2; --muted:#a8a9c0;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs: clamp(14px, calc(min(100vw, 177.78vh) * .0165), 24px);
}
html[lang=ja]{ --sans:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif; }
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--paper);font-family:var(--sans);overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}

/* ---------- Layout: landscape = 16:9 frame, text box over the image ---------- */
#game{position:absolute;inset:0;margin:auto;width:min(100vw,177.78vh);height:min(100vh,56.25vw);font-size:var(--fs);user-select:none;-webkit-user-select:none}
#stage{position:absolute;inset:0;overflow:hidden;background:var(--ink)}
#box{position:absolute;left:3%;right:3%;bottom:3.5%;min-height:25%;padding:1.1em 1.5em 2.4em;border-radius:14px;
  background:linear-gradient(180deg,rgba(14,16,36,.78),rgba(8,9,22,.92));border:1px solid rgba(227,191,120,.28);
  box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;transition:opacity .35s, transform .35s}
#box.hidden{opacity:0;transform:translateY(12px);pointer-events:none}

/* Portrait (phones): full-height stage, text panel below */
@media (orientation:portrait){
  #game{width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;--fs:clamp(15px,4.2vw,20px)}
  #stage{position:relative;inset:auto;flex:1}
  #box{position:relative;left:auto;right:auto;bottom:auto;min-height:25%;border-radius:0;border-width:1px 0 0;padding:1em 1.1em calc(2.6em + env(safe-area-inset-bottom))}
}

/* ---------- Image layers ---------- */
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease}
.bg.on{opacity:1}
.bg.ph, .cg-img.ph, .cg-blur.ph, .gal-item.ph{background-image:var(--ph)}
.ph-text{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:500 .75em/1.4 var(--sans);letter-spacing:.08em;color:rgba(255,255,255,.45);
  border:1px dashed rgba(255,255,255,.3);padding:.5em 1em;border-radius:6px;white-space:nowrap}
#tint{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s, background 1.2s;mix-blend-mode:soft-light}
#tint.dawn{opacity:1;background:linear-gradient(180deg,#9fc4ff,#ffd6c9)}
#tint.morning{opacity:1;background:linear-gradient(160deg,#ffe2b0,#ffb08a)}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

#sprite{position:absolute;left:50%;bottom:0;height:94%;aspect-ratio:2/3;transform:translate(-50%,4%);opacity:0;transition:opacity .45s, transform .45s;pointer-events:none}
#sprite.on{opacity:1;transform:translate(-50%,0)}
#sprite img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 0 18px rgba(0,0,0,.45))}
#sprite.ph{background:radial-gradient(ellipse 30% 14% at 50% 18%,rgba(255,255,255,.16),transparent 70%),
  radial-gradient(ellipse 44% 42% at 50% 74%,rgba(255,255,255,.12),transparent 70%);}
#sprite .ph-label{display:none;position:absolute;left:50%;top:44%;transform:translateX(-50%);font-size:.7em;color:rgba(255,255,255,.55);border:1px dashed rgba(255,255,255,.35);padding:.35em .8em;border-radius:6px;white-space:nowrap}
#sprite.ph .ph-label{display:block}
#sprite.bump{animation:bump .35s}
@keyframes bump{50%{transform:translate(-50%,-1.2%)}}
@media (orientation:portrait){ #sprite{height:100%} }

#cg{position:absolute;inset:0;opacity:0;transition:opacity 1s;pointer-events:none;background:#000}
#cg.on{opacity:1}
.cg-blur,.cg-img{position:absolute;inset:0;background-size:cover;background-position:center}
.cg-blur{filter:blur(24px) brightness(.55);transform:scale(1.15)}
@media (orientation:portrait){ #cg .cg-img{background-size:contain;background-repeat:no-repeat} }

/* ---------- HUD ---------- */
#hud{position:absolute;top:3%;left:3%;padding:.35em .8em;border-radius:999px;background:rgba(8,9,22,.6);border:1px solid rgba(255,255,255,.12);font-size:.8em;display:none;gap:.5em;align-items:center}
#hud.on{display:flex}
#hearts{color:var(--red2);letter-spacing:.12em}
#hearts i{font-style:normal;color:rgba(255,255,255,.25)}
#toast{position:absolute;top:3%;right:3%;padding:.45em 1em;border-radius:999px;background:var(--red);color:#fff;font-weight:600;font-size:.85em;opacity:0;transform:translateY(-8px);transition:.35s;pointer-events:none}
#toast.on{opacity:1;transform:none}

/* ---------- Text box ---------- */
#speaker{display:inline-block;min-height:1.2em;font-family:var(--serif);font-weight:600;font-size:1.25em;color:var(--gold);margin-bottom:.25em;letter-spacing:.02em}
#speaker:empty{display:none}
#text{margin:0;font-size:1em;line-height:1.6;min-height:3.2em;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#text.narr{font-style:italic;color:#e6e2f0}
html[lang=ja] #text.narr{font-style:normal}
#next{position:absolute;right:1.4em;bottom:2.1em;font-size:.7em;color:var(--gold);opacity:0;animation:blink 1.1s infinite}
#box.done #next{opacity:1}
@keyframes blink{50%{opacity:.25;transform:translateY(3px)}}
#hint{position:absolute;left:1.5em;bottom:.6em;margin:0;font-size:.68em;color:var(--muted);transition:opacity .5s}
#hint.off{opacity:0}
#ctrl{position:absolute;right:1em;bottom:.45em;display:flex;gap:.3em}
#ctrl button{background:none;border:0;padding:.3em .6em;font-size:.7em;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-radius:6px}
#ctrl button:hover{color:var(--paper);background:rgba(255,255,255,.06)}
#ctrl button.active{color:var(--red2)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-width:12em;padding:.75em 1.6em;border-radius:999px;border:1px solid rgba(244,237,226,.35);
  background:rgba(10,12,28,.55);color:var(--paper);text-decoration:none;font-size:.95em;letter-spacing:.03em;transition:.25s;backdrop-filter:blur(4px)}
.btn:hover{border-color:var(--gold);background:rgba(227,191,120,.12)}
.btn.primary{background:linear-gradient(135deg,var(--red),#b62a40);border-color:transparent;box-shadow:0 6px 24px rgba(226,69,60,.35)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.hot{background:linear-gradient(135deg,#ff5f6d,#ffc371);color:#1a0b10;font-weight:600;border:0}
.btn.small{min-width:0;padding:.45em 1em;font-size:.8em}
.btn[hidden]{display:none}

/* ---------- Title screen ---------- */
.screen{position:absolute;inset:0;display:flex;align-items:center;z-index:5;transition:opacity .6s}
.screen.off{opacity:0;pointer-events:none}
#titleScreen{background:linear-gradient(90deg,rgba(8,9,22,.94) 0%,rgba(8,9,22,.72) 42%,rgba(8,9,22,0) 72%)}
.title-inner{padding:0 7%;max-width:40em}
.kicker{margin:0 0 .6em;font-size:.7em;letter-spacing:.3em;text-transform:uppercase;color:var(--red2)}
.logo{margin:0;font-family:var(--serif);font-weight:500;font-size:4.2em;line-height:.92;letter-spacing:-.01em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.logo em{color:var(--gold);font-style:italic}
.sub{margin:.6em 0 .2em;font-size:1em;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.tagline{margin:0 0 1.6em;color:#d5d2e4;font-family:var(--serif);font-style:italic;font-size:1.25em}
html[lang=ja] .tagline{font-style:normal;font-family:var(--sans);font-size:1em}
.menu{display:flex;flex-direction:column;align-items:flex-start;gap:.6em}
.menu.row{flex-direction:row;flex-wrap:wrap;justify-content:center}
.lang-pick{display:flex;align-items:center;gap:.6em;margin-top:1.4em;font-size:.8em;color:var(--muted)}
.lang-pick select{font:inherit;color:var(--paper);background:rgba(10,12,28,.8);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:.35em .6em}
@media (orientation:portrait){
  #titleScreen{align-items:flex-end;background:linear-gradient(0deg,rgba(8,9,22,.96) 10%,rgba(8,9,22,.4) 60%,rgba(8,9,22,0))}
  .title-inner{padding:0 7% 8%}
  .logo{font-size:3.2em}
  .menu .btn{width:100%}
  #game.title #box{display:none}
}

/* ---------- Overlays ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:none;font-size:var(--fs)}
.overlay.on{display:flex}
#choices{align-items:center;justify-content:center;flex-direction:column;gap:.8em;padding:5%;background:radial-gradient(ellipse at center,rgba(8,9,22,.55),rgba(8,9,22,.15))}
.choice{width:min(90%,34em);padding:.95em 1.4em;border-radius:12px;border:1px solid rgba(227,191,120,.4);background:rgba(10,12,28,.88);
  color:var(--paper);text-align:left;font-size:1em;line-height:1.4;opacity:0;transform:translateY(10px);animation:rise .45s forwards;transition:background .2s,border-color .2s}
.choice::before{content:'✦';color:var(--red2);margin-right:.7em}
.choice:hover,.choice:focus-visible{background:rgba(226,69,60,.25);border-color:var(--red2);outline:none}
.choice:nth-child(2){animation-delay:.08s}.choice:nth-child(3){animation-delay:.16s}
@keyframes rise{to{opacity:1;transform:none}}

.panel{align-items:center;justify-content:center;background:rgba(5,6,14,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.panel-inner{width:min(92vw,44em);max-height:88vh;overflow:auto;padding:1.6em 1.8em;border-radius:16px;background:linear-gradient(180deg,#151935,#0c0e20);border:1px solid rgba(227,191,120,.25)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}
.panel h2{margin:0;font-family:var(--serif);font-weight:500;font-size:1.8em;color:var(--gold)}
.stat{color:var(--muted);font-size:.85em}
.stat b{color:var(--paper)}
#logList p{margin:0 0 .9em;line-height:1.5}
#logList b{color:var(--gold);display:block;font-size:.85em}
#galGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:.8em}
.gal-item{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.12);cursor:pointer}
.gal-item span{position:absolute;left:0;right:0;bottom:0;padding:.5em .7em;font-size:.75em;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent)}
.gal-item.locked{cursor:default;background:repeating-linear-gradient(45deg,#14172c 0 10px,#101326 10px 20px)}
.gal-item.locked::after{content:'🔒';position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:1.4em;opacity:.6}
#viewer{background:#000;cursor:zoom-out}
#viewer .cg-img{background-size:contain;background-repeat:no-repeat}

.end{text-align:center}
.end h2{font-size:2.2em;margin:.2em 0}
#endDesc{font-family:var(--serif);font-style:italic;font-size:1.2em;color:#d5d2e4}
html[lang=ja] #endDesc{font-style:normal;font-family:var(--sans);font-size:1em}
.next-stop{margin:1.6em 0 .4em;font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.cams{margin-top:1.2em;padding:1.1em;border-radius:12px;background:rgba(226,69,60,.1);border:1px solid rgba(226,69,60,.3)}
.cams p{margin:0 0 .8em}

.age{text-align:center;max-width:30em}
.age .menu{align-items:center}
.age-badge{display:inline-block;margin:0;padding:.3em .8em;border-radius:8px;border:2px solid var(--red);color:var(--red2);font-weight:700;font-size:1.3em}
.noscript{position:fixed;inset:0;display:grid;place-items:center;color:#fff;padding:2em;text-align:center}

#game.title #hud, #game.title #box{visibility:hidden}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* animated scenes */
.bg video,.cg-img video,#viewer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.bg video.on,.cg-img video.on,#viewer video.on{opacity:1}
#viewer video{object-fit:contain}
@media (orientation:portrait){ #cg .cg-img video{object-fit:contain} }
.bg[data-name="key-art"]{background-position:72% center}
.bg[data-name="key-art"] video{object-position:72% center}
#galleryView,#logView{z-index:25}
#viewer{z-index:30}
#ageGate{z-index:40}

/* portrait scenes shown whole */
#cg.contain .cg-img{background-size:contain;background-repeat:no-repeat}
#cg.contain .cg-img video{object-fit:contain}
#viewer .cg-img{background-position:center}
/* sound toggle */
#sndBtn{position:fixed;right:16px;top:16px;z-index:35;display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(227,191,120,.5);background:rgba(8,9,22,.75);color:#fff;font-size:20px;cursor:pointer}
#sndBtn.on{display:grid;place-items:center}