/* 日語冒險共用舞台（版面師，2026-09-30）——視覺小說構圖，參考 ZPD/visual-novel 與紙芝居：
   背景鋪滿＋時段色調濾鏡（一張背景當早午晚夜四張用）、立繪靠左、選項靠右不擋臉、對話框在底部。
   手機直向：立繪在上半、對話與選項在下半。字級用 --u（跟著視窗高度走），2K 不會縮成中間一條。 */
.vn{position:fixed;inset:0;overflow:hidden;background:#1b1c30;color:#fff;
  --u:clamp(13px,calc(1.15vh + .35vw),28px);font-size:var(--u)}
.vn .bg{position:absolute;inset:0;background:var(--bgimg,linear-gradient(180deg,#bfe3ff,#fde6d7)) center/cover no-repeat;
  transition:opacity .6s;transform:scale(1.03)}
.vn .bg::after{content:"";position:absolute;inset:0;pointer-events:none;transition:background 1s}
.vn .bg[data-t=morning]::after{background:linear-gradient(180deg,rgba(255,230,200,.18),rgba(255,210,180,.10))}
.vn .bg[data-t=noon]::after{background:transparent}
.vn .bg[data-t=evening]::after{background:linear-gradient(180deg,rgba(90,60,150,.35),rgba(255,130,80,.30));mix-blend-mode:multiply}
.vn .bg[data-t=night]::after{background:linear-gradient(180deg,rgba(10,15,60,.62),rgba(40,40,110,.48))}
.vn .fx{z-index:1}
/* 立繪：桌機靠左 30%，底部對齊；說話時微微浮起 */
.vn .sprite{position:absolute;left:30%;bottom:0;height:92%;aspect-ratio:3/4;transform:translateX(-50%);z-index:2;
  display:flex;align-items:flex-end;justify-content:center;transition:transform .25s}
.vn .sprite img,.vn .sprite svg{height:100%;width:auto;max-width:none;display:block;filter:drop-shadow(0 10px 24px rgba(20,10,40,.35))}
.vn .sprite svg{height:58%;align-self:flex-start;margin-top:12%}   /* 美術還沒生時的 SVG 替身：抬到對話框上方 */
.vn .sprite.bounce{animation:vnBounce .45s}.vn .sprite.shake{animation:vnShake .4s}
@keyframes vnBounce{40%{transform:translateX(-50%) translateY(-2.5%)}}
@keyframes vnShake{25%{transform:translateX(calc(-50% - 10px))}75%{transform:translateX(calc(-50% + 10px))}}
/* HUD */
.vn .hud{position:absolute;top:1.2em;left:1.2em;right:4.6em;display:flex;justify-content:space-between;align-items:flex-start;gap:.6em;z-index:6}
.vn .chips{display:flex;gap:.4em;flex-wrap:wrap}
.vn .chip{background:rgba(255,255,255,.88);color:#262a40;border-radius:2em;padding:.3em .9em;font-size:.85em;font-weight:700}
.vn .chip.dim{background:rgba(20,20,40,.55);color:#fff}
.vn .hudR{display:flex;gap:.5em;align-items:flex-start}
.vn .heartbox{background:rgba(255,255,255,.88);color:#262a40;border-radius:.8em;padding:.4em .8em;font-size:.8em;text-align:right;min-width:9em}
.vn .heartbox .meter{margin:.35em 0 0}
.vn .heartbox .heart{width:2.4em;height:2.2em}
.vn .iconbtn{border:0;background:rgba(20,20,40,.55);color:#fff;border-radius:50%;width:2.4em;height:2.4em;font-size:1em;display:grid;place-items:center;padding:0}
/* 選項：桌機在右半，垂直置中於對話框上方 */
.vn .choices{position:absolute;right:4%;width:44%;top:14%;bottom:34%;display:flex;flex-direction:column;justify-content:center;gap:.7em;z-index:5}
.vn .opt{text-align:left;border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.92);color:#262a40;border-radius:.9em;
  padding:.65em 1em .65em 2.8em;position:relative;font-family:var(--jp);font-size:1.25em;font-weight:700;line-height:1.5;
  box-shadow:0 .3em 1em rgba(20,10,50,.25);transition:transform .12s,border-color .15s,opacity .2s;animation:optIn .35s both}
.vn .opt:nth-child(2){animation-delay:.05s}.vn .opt:nth-child(3){animation-delay:.1s}.vn .opt:nth-child(4){animation-delay:.15s}
@keyframes optIn{from{opacity:0;transform:translateX(1.5em)}}
.vn .opt:hover:not([disabled]){transform:translateX(-.3em);border-color:var(--sakura)}
.vn .opt kbd{position:absolute;left:.8em;top:.8em;font:700 .6em var(--tc);width:1.9em;height:1.9em;border-radius:.4em;display:grid;place-items:center;background:#e6e1f2;color:#6b6f88}
.vn .opt .romaji{display:block;font-family:var(--tc);font-weight:400;font-size:.62em;color:#6b6f88;line-height:1.4}
.vn .opt.g2{border-color:var(--good);background:#e3f4ec}.vn .opt.g1{border-color:var(--warn);background:#fbf0dc}
.vn .opt.g0{border-color:var(--bad);background:#fbe3e6}.vn .opt.faded{opacity:.35}
/* 對話框：底部毛玻璃 */
.vn .dlg{position:absolute;left:3%;right:3%;bottom:3%;min-height:26%;z-index:7;background:rgba(24,22,44,.78);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);border-radius:1.1em;padding:1em 1.6em 1.1em;box-shadow:0 1em 3em rgba(0,0,0,.35)}
.vn .timer{height:.35em;border-radius:.2em;background:rgba(255,255,255,.18);overflow:hidden;margin-bottom:.7em}
.vn .timer i{display:block;height:100%;width:100%;background:var(--good);transform-origin:left}
.vn .ctx{font-size:.85em;color:#cfd0e6;margin:0 0 .5em;line-height:1.5}
.vn .name{position:absolute;top:-1.1em;left:1.4em;font-family:var(--jp);font-weight:900;font-size:1em;background:var(--sakura);color:#fff;border-radius:.5em;padding:.2em .9em;box-shadow:0 .3em .8em rgba(0,0,0,.25)}
.vn .line{font-family:var(--jp);font-size:1.55em;font-weight:700;line-height:1.75;margin:0;color:#fff}
.vn .line .romaji{display:block;font-family:var(--tc);font-weight:400;font-size:.55em;color:#b9bad4;line-height:1.45}
.vn .your-turn{font-family:var(--jp);font-size:1.3em;color:#ffb3c4;font-weight:700;margin:.2em 0}
.vn .say{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:2em;font-size:.55em;padding:.2em .8em;margin-left:.5em;vertical-align:middle}
.vn .fb{margin-top:.7em;border-top:1px dashed rgba(255,255,255,.25);padding-top:.6em}
.vn .verdict{font-weight:900;font-size:1em}
.vn .verdict.g2{color:#7fe0b5}.vn .verdict.g1{color:#ffd27a}.vn .verdict.g0,.vn .verdict.gt{color:#ff9aaa}
.vn .note{font-size:.9em;line-height:1.6;margin:.35em 0 0;color:#e7e7f5}
.vn .next{margin-top:.7em;width:100%;border:0;background:var(--sakura);color:#fff;border-radius:.7em;padding:.7em;font-size:1em;font-weight:900;font-family:var(--jp)}
.vn .progress{position:absolute;top:1.9em;left:0;right:0;display:flex;gap:.3em;justify-content:center;z-index:8}
.vn .progress i{width:1.4em;height:.28em;border-radius:.2em;background:rgba(255,255,255,.3)}
.vn .progress i.done{background:var(--sakura)}.vn .progress i.now{background:#fff}
.vn .float{position:absolute;left:30%;top:28%;transform:translateX(-50%);font-family:var(--jp);font-weight:900;font-size:2.2em;z-index:9;pointer-events:none;animation:rise 1.1s forwards;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.vn ruby rt{font-size:.5em}
/* 答題後：選項收起來讓出空間給回饋，只留使用者選的那一個跟正解 */
.vn.answered .opt.faded{display:none}

/* 手機直向：上半人物、下半對話＋選項（捲動在下半內部，不捲整頁） */
@media (max-aspect-ratio:4/5){
  .vn{--u:clamp(13px,3.9vw,18px)}
  .vn .sprite{left:50%;height:58%;bottom:auto;top:6%}
  .vn .float{left:50%}
  .vn .panel{position:absolute;left:0;right:0;bottom:0;max-height:62%;overflow-y:auto;z-index:7;padding:0 .6em .9em;
    display:flex;flex-direction:column;gap:.6em;background:linear-gradient(180deg,transparent,rgba(24,22,44,.55) 3em)}
  .vn .dlg,.vn .choices{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;min-height:0}
  .vn .choices{order:2;gap:.45em}
  .vn .dlg{order:1;margin-top:1.4em}
  .vn .opt{font-size:1.05em;animation-name:optUp}
  .vn .line{font-size:1.3em}
  .vn .progress{top:.4em}
  .vn .sprite svg{height:62%;margin-top:0}
}
@keyframes optUp{from{opacity:0;transform:translateY(.8em)}}
/* 桌機：panel 只是容器，不佔版面 */
@media (min-aspect-ratio:4/5){.vn .panel{display:contents}}

/* 標題、課本、結算、結局頁：放在場景背景上的一張卡；2K 等比放大 */
.page-bg{position:fixed;inset:0;background:var(--bgimg,linear-gradient(180deg,#f5f3fa,#fbe3ea)) center/cover;z-index:-1}
.page-bg::after{content:"";position:absolute;inset:0;background:rgba(245,243,250,.55);backdrop-filter:blur(3px)}
@media (prefers-color-scheme:dark){.page-bg::after{background:rgba(21,22,42,.6)}}
.app>section:not(.vn){background:var(--panel);border-radius:22px;margin:24px auto;box-shadow:0 20px 60px rgba(30,20,70,.18)}
@media (min-width:1600px) and (min-height:1100px){.app>section:not(.vn){zoom:1.35}}
@media (max-width:560px){.app>section:not(.vn){margin:0;border-radius:0;min-height:100%}}
.mute{position:fixed;top:12px;right:12px;z-index:50;border:0;background:rgba(20,20,40,.55);color:#fff;border-radius:50%;width:42px;height:42px;font-size:18px}
.who-s img,.who-e img{width:100%;height:auto;display:block}
.castcard img{height:190px;width:100%;object-fit:cover;object-position:top;display:block;border-radius:10px}