[hidden]{display:none!important}

:root{
  --panel: rgba(8,10,14,.84);
  --line: rgba(255,255,255,.22);
  --text:#f6f2e8;
  --muted:#b9b2a5;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#080808;color:var(--text);font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;overflow:hidden}
button{font:inherit}
#app,#stage,#bg,#vignette{position:fixed;inset:0}
#bg{
  z-index:0;
  background:linear-gradient(160deg,#27303a,#101217 55%,#08090b);
  background-size:cover;
  background-position:center;
  transition:background-image .8s ease,filter .8s ease,opacity .8s ease;
}
#vignette{z-index:1;pointer-events:none;background:radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.62) 100%)}
#stage{z-index:2}
#hud{position:fixed;z-index:6;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:13px;letter-spacing:.08em;color:#e5dfd4;text-shadow:0 1px 3px #000}
#soundBtn{border:1px solid var(--line);background:rgba(0,0,0,.35);color:#fff;border-radius:999px;width:38px;height:38px;cursor:pointer}
.char{position:absolute;z-index:4;bottom:0;height:min(86vh,900px);max-width:48vw;object-fit:contain;filter:drop-shadow(0 16px 30px rgba(0,0,0,.7));transition:opacity .3s ease,transform .35s ease}
.char.left{left:2vw}.char.right{right:2vw}.char[hidden]{display:none}
.char-placeholder{position:absolute;z-index:4;bottom:12vh;width:min(34vw,430px);height:min(65vh,680px);border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);font-size:18px;letter-spacing:.08em}
.char-placeholder.left{left:5vw}.char-placeholder.right{right:5vw}
#dialogue{
  position:absolute;z-index:5;left:50%;bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);width:min(92vw,980px);min-height:170px;
  padding:24px 28px 22px;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  backdrop-filter:blur(12px);box-shadow:0 18px 60px rgba(0,0,0,.5);cursor:pointer;
  max-height:72vh;overflow-y:auto;overscroll-behavior:contain
}
#speaker{font-size:15px;color:#d6c6a7;min-height:1.4em;margin-bottom:10px;letter-spacing:.08em}
#text{font-size:clamp(18px,2.2vw,28px);line-height:1.75;white-space:pre-wrap;min-height:2.8em}
#tapHint{text-align:right;color:var(--muted);font-size:12px;margin-top:10px}
#choices{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.choice{width:100%;padding:13px 15px;border:1px solid rgba(255,255,255,.26);border-radius:12px;background:rgba(255,255,255,.055);color:#fff;text-align:left;cursor:pointer}
.choice:hover,.choice:focus{background:rgba(255,255,255,.12);outline:none}
#overlay{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
#overlayCard{width:min(78vw,860px);height:min(58vh,520px);border-radius:22px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.7);background:#111}
#overlayImage{width:100%;height:100%;object-fit:cover}
#overlayPlaceholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#3d4654,#11151c);color:rgba(255,255,255,.6);font-size:24px}
#ending{position:fixed;z-index:20;inset:0;background:#050505;display:grid;place-items:center;text-align:center}
.ending-inner{animation:fadeIn 2s ease both}
.ending-small{font-size:17px;color:#aaa;margin-bottom:28px}
#ending h1{font-family:Georgia,"Times New Roman",serif;letter-spacing:.18em;font-size:clamp(44px,10vw,110px);margin:0}
.ending-sub{margin-top:14px;font-size:20px;color:#d7d0c3}
#restartBtn{margin-top:54px;padding:12px 30px;border-radius:999px;border:1px solid #555;background:transparent;color:#ddd;cursor:pointer}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(max-width:680px){
  #dialogue{width:95vw;padding:18px 16px 16px;min-height:182px;max-height:64vh}
  #speaker{font-size:16px;margin-bottom:8px}
  #text{font-size:clamp(18px,4.9vw,23px);line-height:1.72}
  .char{height:69vh;max-width:68vw}
  .char.left{left:-6vw}.char.right{right:-6vw}
  .char-placeholder{width:50vw;height:54vh}
  #overlayCard{width:90vw;height:45vh}
}

@media (orientation: portrait){
  #dialogue{width:95vw;padding:19px 17px 17px;min-height:194px;max-height:64vh}
  #speaker{font-size:18px;margin-bottom:8px}
  #text{font-size:clamp(22px,5.8vw,32px);line-height:1.7}
  #tapHint{font-size:13px}
  .choice{font-size:18px;padding:15px 16px}
  .char{height:min(74vh,980px);max-width:74vw}
  .char.left{left:-4vw}
  .char.right{right:-4vw}
  .char-placeholder{width:54vw;height:58vh}
  #overlay{align-items:center}
  #overlayCard{width:88vw;height:40vh;margin-top:-5vh}
}


#titleScreen{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(57,72,80,.34), transparent 35%),
    linear-gradient(180deg,#0d1115 0%,#050607 100%);
  color:#f7f2e9;
}
#titleScreen[hidden]{display:none!important}
.title-inner{
  width:min(92vw,760px);
  text-align:center;
  padding:32px 20px;
}
.title-kicker{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;
  letter-spacing:.28em;
  color:#9da7ad;
  margin-bottom:22px;
}
#titleScreen h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(54px,10vw,108px);
  letter-spacing:.16em;
  font-weight:700;
}
.title-jp{
  margin-top:10px;
  font-size:clamp(18px,2.4vw,26px);
  letter-spacing:.16em;
  color:#d9d0c2;
}
.title-copy{
  margin:40px auto 30px;
  line-height:1.9;
  color:#c7c2b8;
  font-size:clamp(15px,1.8vw,20px);
}
#startBtn{
  min-width:180px;
  padding:14px 28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:18px;
  letter-spacing:.12em;
  cursor:pointer;
  transition:.2s ease;
}
#startBtn:hover,#startBtn:focus{
  background:rgba(255,255,255,.13);
  transform:translateY(-1px);
  outline:none;
}
.title-note{
  margin-top:14px;
  font-size:12px;
  color:#7f8589;
  letter-spacing:.08em;
}


.author-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:210px;
  padding:13px 24px;
  margin-top:14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
  letter-spacing:.08em;
  transition:.2s ease;
}
.author-link:hover,.author-link:focus{
  background:rgba(255,255,255,.15);
  transform:translateY(-1px);
  outline:none;
}
.ending-author-link{
  display:flex;
  width:max-content;
  margin:42px auto 0;
}
.ending-author-link + #restartBtn{
  margin-top:14px;
}