:root{
  --ink:#f6f0ff;
  --ink-dim:#cbbfe0;
  --gold:#e9c77b;
  --gold-soft:rgba(233,199,123,.55);
  --violet:#2a1740;
  --violet-deep:#140a22;
  --magenta:#c2439b;
  --window:rgba(20,10,36,.78);
  --line:rgba(233,199,123,.35);
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#07030d;color:var(--ink);overflow:hidden;-webkit-tap-highlight-color:transparent}
body{display:grid;place-items:center;font-family:var(--serif)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* 16:9 のステージをウィンドウに合わせて拡縮。u = ステージ幅の1% */
#stage{
  position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;overflow:hidden;
  container-type:inline-size;background:var(--violet-deep);user-select:none;
}
.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}
.layer{position:absolute;inset:0}

/* ---------- タイトル ---------- */
.title-bg{position:absolute;inset:0;background:url(assets/bg/title.webp) center/cover;animation:titleZoom 30s ease-in-out infinite alternate}
@keyframes titleZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
#title::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,4,22,.82) 0%,rgba(10,4,22,.35) 42%,transparent 65%);pointer-events:none}
.title-logo{position:absolute;left:6cqw;top:11cqw;z-index:2;text-shadow:0 0 2cqw rgba(0,0,0,.6)}
.title-logo h1{font-weight:700;font-size:4.2cqw;line-height:1.35;letter-spacing:.08em;
  background:linear-gradient(180deg,#fff7e2,#e9c77b 70%,#c79a4a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .2cqw .6cqw rgba(0,0,0,.6))}
.title-sub{font-size:1.4cqw;letter-spacing:.4em;color:var(--ink-dim);margin-bottom:1.2cqw}
.title-menu{position:absolute;left:6.4cqw;bottom:7cqw;z-index:2;display:flex;flex-direction:column;gap:.5cqw}
.title-menu button{font-size:1.75cqw;letter-spacing:.3em;padding:.45cqw 0;text-align:left;color:var(--ink);opacity:.86;transition:.25s}
.title-menu button:hover,.title-menu button:focus-visible{opacity:1;color:var(--gold);transform:translateX(.6cqw);text-shadow:0 0 1cqw var(--gold-soft)}
.title-menu button:disabled{opacity:.3;pointer-events:none}

/* ---------- 名前入力 ---------- */
#naming{background:radial-gradient(ellipse at 50% 30%,#3a2160,#0c0616 70%)}
.naming-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46cqw;padding:3.4cqw 4cqw;border:1px solid var(--line);border-radius:1.2cqw;background:rgba(18,9,32,.7);text-align:center}
.naming-lead{font-size:1.5cqw;color:var(--ink-dim);margin-bottom:2.4cqw}
.naming-card label{display:block;font-size:1.3cqw;letter-spacing:.3em;color:var(--gold);margin-bottom:.8cqw}
#name-input{width:100%;font:inherit;font-size:2.6cqw;text-align:center;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:.6cqw;padding:.6cqw}
.naming-note{font-size:1cqw;color:var(--ink-dim);margin-top:.8cqw}
.naming-actions{display:flex;gap:1.2cqw;justify-content:center;margin-top:2.4cqw}
.naming-actions button,.ending-inner button{font-size:1.35cqw;padding:.8cqw 2.2cqw;border:1px solid var(--gold-soft);border-radius:10cqw;background:linear-gradient(180deg,rgba(233,199,123,.22),rgba(233,199,123,.06));letter-spacing:.12em}
.naming-actions button.ghost{border-color:rgba(255,255,255,.2);background:none;color:var(--ink-dim)}

/* ---------- 本編 ---------- */
.bg-img,.cg-img{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .8s ease}
.bg-img.show,.cg-img.show{opacity:1}
.bg-img.dusk{filter:sepia(.35) saturate(1.25) hue-rotate(-12deg) brightness(.92)}
#cg{pointer-events:none}
#cg .cg-img{transition-duration:1s}
#chars{pointer-events:none}
#lira{position:absolute;bottom:-38cqw;left:50%;height:92cqw;transform:translateX(-50%);opacity:0;transition:opacity .35s ease,transform .45s ease;filter:drop-shadow(0 0 1.2cqw rgba(10,0,30,.45))}
#lira.show{opacity:1}
#lira.pos-left{transform:translateX(-95%)}
#lira.pos-right{transform:translateX(-5%)}
#milk{position:absolute;width:9cqw;right:17cqw;top:9cqw;opacity:0;transition:opacity .35s;animation:float 3.2s ease-in-out infinite}
#milk.show{opacity:1}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-1.2cqw) rotate(3deg)}}
#flash{background:#fff;opacity:0;pointer-events:none}
#flash.on{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
#game.shake #bg,#game.shake #chars,#game.shake #cg{animation:shake .45s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-.8cqw,.3cqw)}40%{transform:translate(.7cqw,-.3cqw)}60%{transform:translate(-.4cqw,.2cqw)}80%{transform:translate(.3cqw,0)}}

#caption{position:absolute;left:2.2cqw;top:2cqw;padding:.4cqw 1.4cqw .4cqw 1cqw;font-size:1.15cqw;letter-spacing:.25em;color:var(--gold);border-left:.25cqw solid var(--gold);background:linear-gradient(90deg,rgba(15,6,28,.88) 60%,rgba(15,6,28,0));text-shadow:0 0 .5cqw #000;opacity:0;transition:opacity .6s}
#caption.show{opacity:1}

#chapter-card{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(ellipse at center,rgba(20,8,36,.92),rgba(5,2,10,.98));opacity:0;pointer-events:none;transition:opacity .9s}
#chapter-card.show{opacity:1}
.chapter-no{font-size:1.4cqw;letter-spacing:.6em;color:var(--gold);margin-bottom:1.4cqw}
.chapter-title{font-size:3.4cqw;letter-spacing:.18em;font-weight:700}
.chapter-title::before,.chapter-title::after{content:"";display:block;width:14cqw;height:1px;margin:1.6cqw auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

#window{position:absolute;left:4cqw;right:4cqw;bottom:2.2cqw;min-height:13.2cqw;padding:2.3cqw 3.2cqw 2cqw;border-radius:1.2cqw;background:var(--window);border:1px solid var(--line);box-shadow:0 0 0 .35cqw rgba(20,10,36,.35),0 1cqw 3cqw rgba(0,0,0,.45);backdrop-filter:blur(.5cqw);cursor:pointer;transition:opacity .3s}
#window.hidden,#quick.hidden,#caption.hidden{opacity:0;pointer-events:none}
#nameplate{position:absolute;left:2.6cqw;top:-1.7cqw;min-width:9cqw;padding:.35cqw 1.6cqw;font-size:1.4cqw;letter-spacing:.14em;text-align:center;border-radius:10cqw;background:linear-gradient(90deg,#5a2a7a,#8d3a8a);border:1px solid var(--gold-soft);box-shadow:0 .3cqw 1cqw rgba(0,0,0,.4)}
#nameplate:empty{display:none}
#nameplate.you{background:linear-gradient(90deg,#27405e,#35577a)}
#nameplate.milk{background:linear-gradient(90deg,#6c6780,#948ca8)}
#nameplate.other{background:linear-gradient(90deg,#4b3a2a,#6d5436)}
#text{font-size:1.72cqw;line-height:1.95;letter-spacing:.04em;white-space:pre-wrap;min-height:5.6cqw;text-shadow:0 .1cqw .3cqw rgba(0,0,0,.6)}
#text.narration{color:#efe8fb}
#text .ch{opacity:0;animation:inChar .25s forwards}
@keyframes inChar{to{opacity:1}}
#next-mark{position:absolute;right:2.4cqw;bottom:1.3cqw;font-size:1cqw;color:var(--gold);opacity:0;animation:blink 1.1s infinite}
#window.done #next-mark{opacity:1}
@keyframes blink{50%{transform:translateY(.3cqw);opacity:.4}}

#quick{position:absolute;right:4.6cqw;bottom:.2cqw;display:flex;gap:.2cqw;padding:0 .6cqw;border-radius:.6cqw .6cqw 0 0;background:rgba(15,6,28,.72);transition:opacity .3s}
#quick button{font-family:var(--round);font-size:.92cqw;padding:.25cqw .75cqw;color:var(--ink-dim);letter-spacing:.08em;border-radius:.4cqw}
#quick button:hover{color:var(--gold)}
#quick button.on{color:#1a0d2c;background:var(--gold)}

#choices{position:absolute;z-index:5;inset:0 0 16cqw;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1.3cqw;background:rgba(8,3,16,.35)}
#choices.show{display:flex}
#choices button{min-width:44cqw;max-width:70cqw;padding:1.15cqw 3cqw;font-size:1.6cqw;letter-spacing:.06em;border-radius:.8cqw;border:1px solid var(--gold-soft);background:linear-gradient(180deg,rgba(52,26,84,.92),rgba(28,13,48,.92));box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.4);transition:.2s;opacity:0;animation:rise .45s forwards}
#choices button:nth-child(2){animation-delay:.08s}#choices button:nth-child(3){animation-delay:.16s}
#choices button::before{content:"✦";color:var(--gold);margin-right:1cqw;font-size:1.1cqw;vertical-align:.15cqw}
#choices button:hover,#choices button:focus-visible{background:linear-gradient(180deg,rgba(120,52,130,.95),rgba(62,26,90,.95));transform:translateY(-.2cqw)}
#choices .choice-hint{font-size:1.1cqw;color:var(--ink-dim);letter-spacing:.2em;margin-bottom:.4cqw;text-shadow:0 0 .6cqw #000}
@keyframes rise{from{opacity:0;transform:translateY(.8cqw)}to{opacity:1;transform:none}}

/* ---------- 終幕 ---------- */
#ending{background:radial-gradient(ellipse at 50% 40%,#3b2158,#07030d 75%)}
.ending-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;text-align:center;animation:rise 1.6s}
.ending-kind{font-size:1.3cqw;letter-spacing:.6em;color:var(--gold)}
.ending-title{font-size:3.6cqw;letter-spacing:.2em}
.ending-cast{font-size:1.2cqw;color:var(--ink-dim);letter-spacing:.2em;margin-top:1.4cqw}
.ending-cast span{white-space:nowrap}
.ending-note{font-size:1.05cqw;color:var(--ink-dim)}

/* ---------- パネル ---------- */
#panel{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(6,2,12,.72);backdrop-filter:blur(.4cqw)}
#panel[hidden]{display:none}
.panel-box{width:84cqw;height:48cqw;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:1.2cqw;background:linear-gradient(180deg,rgba(38,19,62,.97),rgba(18,9,32,.97));box-shadow:0 2cqw 5cqw rgba(0,0,0,.5)}
.panel-box header{display:flex;align-items:center;justify-content:space-between;padding:1.4cqw 2.2cqw;border-bottom:1px solid var(--line)}
.panel-box h2{font-size:1.8cqw;letter-spacing:.3em;color:var(--gold)}
.panel-close{font-size:2.2cqw;line-height:1;color:var(--ink-dim);padding:0 .6cqw}
#panel-body{flex:1;overflow:auto;padding:1.6cqw 2.2cqw;font-size:1.3cqw;scrollbar-color:var(--gold-soft) transparent}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}
.slot{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);border-radius:.8cqw;overflow:hidden;background:rgba(255,255,255,.03);transition:.2s}
.slot:hover{border-color:var(--gold)}
.slot .thumb{aspect-ratio:16/9;background:#1a0f2a center/cover}
.slot .meta{padding:.6cqw .9cqw;font-size:1cqw;line-height:1.6}
.slot .meta b{display:block;color:var(--gold);font-size:1.05cqw}
.slot.empty .meta{color:var(--ink-dim)}
.log-item{padding:.8cqw 0;border-bottom:1px solid rgba(233,199,123,.12);line-height:1.8}
.log-item .who{color:var(--gold);font-size:1.05cqw;letter-spacing:.1em}
.log-item.choice{color:#9fd4ff}
.gallery-tabs{display:flex;gap:1cqw;margin-bottom:1.2cqw}
.gallery-tabs button{font-size:1.15cqw;padding:.3cqw 1.2cqw;border-radius:10cqw;border:1px solid var(--line)}
.gallery-tabs button.on{background:var(--gold);color:#1a0d2c}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw}
.gallery-grid figure{border:1px solid var(--line);border-radius:.6cqw;overflow:hidden;cursor:pointer;background:#140a22}
.gallery-grid figure.locked{cursor:default}
.gallery-grid .thumb{aspect-ratio:16/9;background:center/cover}
.gallery-grid .locked .thumb{background:repeating-linear-gradient(45deg,#1b1030 0 1cqw,#20143a 1cqw 2cqw);display:grid;place-items:center;color:var(--ink-dim);font-size:1.6cqw}
.gallery-grid figcaption{font-size:.95cqw;padding:.45cqw .7cqw;color:var(--ink-dim)}
.gallery-count{font-size:1.05cqw;color:var(--ink-dim);margin-left:auto;align-self:center}
.journal{max-width:60cqw;margin:0 auto;padding:1.6cqw 2.6cqw;border-radius:.6cqw;background:#f3ead6;color:#3a2a1c;font-family:var(--serif);box-shadow:inset 0 0 3cqw rgba(120,80,30,.25)}
.journal p{font-size:1.35cqw;line-height:2.1;padding:.5cqw 0;border-bottom:1px dashed rgba(90,60,30,.25)}
.journal p:last-child{border:0}
.journal .empty{color:#8a7560}
.config-row{display:grid;grid-template-columns:16cqw 1fr 5cqw;align-items:center;gap:1.4cqw;padding:1cqw 0;border-bottom:1px solid rgba(233,199,123,.12)}
.config-row input[type=range]{width:100%;accent-color:var(--gold)}
.config-row output{color:var(--ink-dim);font-size:1.1cqw}
.config-actions{margin-top:1.6cqw;display:flex;gap:1cqw}
.config-actions.volume{margin:1cqw 0 .6cqw;justify-content:flex-end}
.config-actions button{font-size:1.1cqw;padding:.5cqw 1.4cqw;border:1px solid var(--line);border-radius:10cqw}
.panel-note{font-size:1.05cqw;color:var(--ink-dim);margin-bottom:1.2cqw}

#viewer{position:absolute;inset:0;z-index:30;background:#000;display:grid;place-items:center;cursor:pointer}
#viewer[hidden]{display:none}
#viewer img{width:100%;height:100%;object-fit:contain}
#viewer p{position:absolute;bottom:1.4cqw;left:0;right:0;text-align:center;font-size:1.2cqw;color:var(--ink-dim);text-shadow:0 0 .6cqw #000}

#toast{position:absolute;left:50%;top:2.4cqw;transform:translate(-50%,-1cqw);padding:.6cqw 1.8cqw;font-size:1.15cqw;border-radius:10cqw;background:rgba(233,199,123,.92);color:#1a0d2c;opacity:0;pointer-events:none;transition:.35s;z-index:40}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 縦長画面（スマートフォン縦持ち） ---------- */
@media (max-aspect-ratio:1/1){
  #stage{width:100vw;height:100dvh;aspect-ratio:auto}
  #game .layer{bottom:auto;height:56.25cqw;top:12dvh;overflow:hidden}
  #milk{width:16cqw;top:4cqw;right:8cqw}
  #caption{top:calc(12dvh + 2cqw);font-size:3cqw}
  #window{left:3cqw;right:3cqw;bottom:calc(20cqw + env(safe-area-inset-bottom));min-height:auto;top:calc(12dvh + 60cqw);padding:6cqw 5cqw 5cqw;border-radius:3cqw}
  #nameplate{font-size:3.6cqw;top:-4cqw;left:4cqw;padding:.8cqw 4cqw}
  #text{font-size:4.3cqw;line-height:1.9}
  #next-mark{font-size:3cqw}
  #quick{left:3cqw;right:3cqw;bottom:calc(1.5cqw + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);gap:1cqw;padding:1.5cqw;border-radius:2cqw}
  #quick button{font-size:3.2cqw;padding:1.6cqw 0}
  #choices{inset:0;padding:0 5cqw;background:rgba(8,3,16,.6)}
  #choices button{min-width:0;width:100%;max-width:none;font-size:4.2cqw;padding:3.4cqw 4cqw;border-radius:2.4cqw}
  #choices .choice-hint{font-size:3.2cqw}
  #choices button::before{font-size:3cqw}
  #chapter-card .chapter-no{font-size:3.4cqw}#chapter-card .chapter-title{font-size:7cqw}
  .title-bg{background-position:72% center}
  #title::after{background:linear-gradient(180deg,rgba(10,4,22,.55),transparent 40%,rgba(10,4,22,.85) 75%)}
  .title-logo{left:6cqw;top:12dvh}.title-logo h1{font-size:8cqw}.title-sub{font-size:3.2cqw}
  .title-menu{left:8cqw;bottom:10dvh;gap:1.4cqw}.title-menu button{font-size:5cqw}
  .naming-card{width:88cqw;padding:7cqw 6cqw}.naming-lead{font-size:3.6cqw}.naming-card label{font-size:3.4cqw}#name-input{font-size:6cqw}.naming-note{font-size:2.8cqw}
  .naming-actions button,.ending-inner button{font-size:3.6cqw;padding:2cqw 4cqw}
  .panel-box{width:94cqw;height:86dvh}.panel-box h2{font-size:4.6cqw}.panel-close{font-size:6cqw}
  #panel-body{font-size:3.6cqw}.slots{grid-template-columns:1fr 1fr}.slot .meta,.slot .meta b{font-size:3cqw}
  .gallery-grid{grid-template-columns:1fr 1fr}.gallery-grid figcaption,.gallery-tabs button,.gallery-count{font-size:3cqw}
  .journal{max-width:none}.journal p{font-size:3.8cqw}
  .config-row{grid-template-columns:1fr;gap:2cqw}.config-row output,.config-actions button,.panel-note{font-size:3.2cqw}
  .log-item .who{font-size:3cqw}
  .ending-kind{font-size:3.4cqw}.ending-title{font-size:8cqw}.ending-cast,.ending-note{font-size:3cqw;padding:0 6cqw}
  #toast{font-size:3.4cqw;top:6cqw}
  #chapter-card{inset:0}
}