:root{
  --bg:#0b0b0c; --ink:#f3efe6; --dim:#a9a397; --accent:#d9b27c; --panel:rgba(12,12,14,.86);
  --font:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px); --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%;position:fixed;inset:0;width:100%;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#app{position:fixed;inset:0;overflow:hidden;-webkit-touch-callout:none;--fs:1;opacity:0;transition:opacity .6s}
#app.ready{opacity:1}

/* 舞台：横向きは全画面、縦持ちは上に16:9（正方形に近い画面では高さの6割まで） */
#stage{position:absolute;left:0;right:0;top:0;height:min(75vw,50%);overflow:hidden;background:#000}
#pic,.layer{position:absolute;inset:0}
.layer{background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;will-change:transform,opacity,filter}
.layer.on{opacity:1}
#snow,#noise,#flash,#holo{position:absolute;inset:0;pointer-events:none}
#noise{opacity:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");mix-blend-mode:screen}
#flash{opacity:0;background:#fff;transition:opacity .25s}
#flash.black{background:#000}
.blink{position:absolute;left:0;right:0;height:0;background:#000;z-index:3}
#blinkTop{top:0}#blinkBot{bottom:0}
#holo{display:flex;align-items:flex-start;justify-content:center;padding-top:16%;opacity:0;transition:opacity 1s}
#holo.on{opacity:1}
#holo span{white-space:pre-line;text-align:center;font-size:clamp(14px,2.2vw,26px);letter-spacing:.05em;color:#eef2f5;background:rgba(20,26,32,.35);border:1px solid rgba(230,238,245,.3);padding:.8em 1.6em}
/* 縦持ち：絵と文字の境目を溶かす */
#stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,var(--bg));pointer-events:none;z-index:2}

/* 文章：残す段落は高さで決める（engine.js typeText） */
#textbox{position:absolute;left:0;right:0;top:min(75vw,50%);bottom:0;background:var(--bg);padding:16px max(22px,var(--sr)) calc(64px + var(--sb)) max(22px,var(--sl))}
#text{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#text::-webkit-scrollbar{display:none}
/* 前の行は「透明度」でなく「文字の色」で暗くする。透明度を動かすと、行がずれた瞬間に iPhone の Safari が元の位置の白い文字を消し忘れて二重に見える（11/8） */
#text p{font-size:calc(17px * var(--fs));line-height:2;letter-spacing:.04em;margin-bottom:.35em;color:rgba(243,239,230,.55);transition:color .4s;line-break:strict;hanging-punctuation:allow-end}
#text p.cur{color:var(--ink)}
#text .rest{visibility:hidden}
#cursor{position:absolute;right:max(22px,var(--sr));bottom:calc(70px + var(--sb));font-size:12px;color:var(--accent);opacity:0;animation:bob 1.2s infinite}
#cursor.on{opacity:1}
#cursor.inl{position:relative;right:auto;bottom:auto;display:inline-block;margin-left:.3em;font-size:.8em;line-height:1;vertical-align:.08em;color:var(--accent);animation:bob 1.1s ease-in-out infinite}
#cursor.inl:not(.on){display:none}
#cursor.float.oncolor.on{opacity:.5}   /* 色だけの画面では、言葉のじゃまをしない濃さに */
#cursor.float{right:0;left:0;bottom:calc(92px + var(--sb));margin:0 auto;width:1.4em;text-align:center;font-size:17px;z-index:7;animation:bob 1.1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}
#app.center #text{display:flex;flex-direction:column}
#app.center #text>:first-child{margin-top:auto}
#app.center #text>:last-child{margin-bottom:auto}
#app.center #text p{text-align:left;max-width:22em;margin-inline:auto;font-size:calc(19px * var(--fs))}
@media (min-width:700px) and (max-aspect-ratio:4/3){ #text{max-width:32em;margin-inline:auto} #text p{font-size:calc(19px * var(--fs))} }

#hud{position:absolute;right:max(10px,var(--sr));bottom:max(10px,var(--sb));display:flex;gap:2px;z-index:6;opacity:0;pointer-events:none;transition:opacity .4s}
#app.playing #hud{opacity:.6;pointer-events:auto}
@media (hover:hover) and (pointer:fine){#app.playing #hud:hover{opacity:1}}
#hud button{min-height:40px;padding:0 12px;font-size:13px;color:var(--dim);letter-spacing:.05em}
#hud button.on{color:var(--accent)}

/* 横持ち：左に絵、右に文字（スマホ向け） */
@media (orientation: landscape){
  #stage{top:0;bottom:0;left:0;right:auto;width:60%;height:auto}
  #stage::after{left:auto;top:0;bottom:0;right:0;width:16%;height:auto;background:linear-gradient(to right,transparent,var(--bg))}
  #textbox{top:0;bottom:0;left:60%;right:0;background:var(--bg);padding:max(14px,var(--st)) max(16px,var(--sr)) calc(54px + var(--sb)) 14px}
  #text p{font-size:calc(15px * var(--fs));line-height:1.9}
  #app.center #text p{font-size:calc(16px * var(--fs));max-width:none}
  #cursor{right:max(16px,var(--sr));bottom:calc(58px + var(--sb))}
  #hud{right:max(6px,var(--sr));bottom:max(6px,var(--sb))}
  #hud button{padding:0 9px;font-size:12px}
  #holo{padding-top:10%}
  #holo span{font-size:clamp(13px,2.4vh,20px)}
}

/* 画面効果 */
.kb-in{animation:kbIn 20s ease-out forwards}
.kb-out{animation:kbOut 20s ease-out forwards}
.kb-pan{animation:kbPan 22s ease-in-out forwards}
@keyframes kbIn{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes kbOut{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes kbPan{from{transform:scale(1.08) translateX(2.5%)}to{transform:scale(1.08) translateX(-2.5%)}}
#pic.shake{animation:shake .55s}
@keyframes shake{20%{transform:translateX(-14px)}40%{transform:translateX(12px)}60%{transform:translateX(-8px)}80%{transform:translateX(5px)}}
#pic.focusin{animation:focusin 2.6s ease-out}
@keyframes focusin{from{filter:blur(22px) brightness(.6)}to{filter:none}}
#pic.blurpulse{animation:blurpulse 2.4s ease-in-out}
@keyframes blurpulse{50%{filter:blur(7px)}}
#pic.tears{animation:tears 5s ease-in-out forwards}
@keyframes tears{30%{filter:blur(5px) brightness(1.1)}100%{filter:blur(2px) brightness(1.05)}}
#stage.pulse{animation:pulse .7s}
@keyframes pulse{12%{transform:scale(1.025)}30%{transform:scale(1)}45%{transform:scale(1.015)}70%{transform:scale(1)}}
#pic.zoompop{animation:zoompop .5s ease-out forwards}
@keyframes zoompop{to{transform:scale(1.12)}}
#pic.zoomslow{animation:zoomslow 6s ease-out forwards}
@keyframes zoomslow{to{transform:scale(1.06)}}
#pic.glitch{animation:glitch .5s linear}
@keyframes glitch{0%{transform:translateX(0);filter:none}25%{transform:translateX(-14px);filter:hue-rotate(60deg)}50%{transform:translateX(10px) skewX(4deg)}75%{transform:translateX(-4px);filter:hue-rotate(-40deg)}100%{transform:none;filter:none}}
#pic.flip{transition:transform 3s ease-in-out;transform:rotate(180deg)}
#pic.memory{filter:sepia(.25) saturate(.85) brightness(1.03)}
#stage.past{filter:sepia(.22) saturate(.86);transition:filter 1.2s}
#stage{transition:filter 1.2s}
#pic.cold{filter:saturate(.75)}
#app.noiseon #noise{opacity:.12;animation:grain .25s steps(3) infinite}
@keyframes grain{50%{transform:translate(-3%,2%)}}
#text{transition:transform 2.4s ease-in-out}
#text.fliptext{transform:rotate(180deg)}
/* 揺れや点滅を弱める（設定／OSの「視差効果を減らす」） */
#app.calm #pic.shake,#app.calm #pic.glitch,#app.calm #stage.pulse,#app.calm #pic.zoompop,
#app.calm .kb-in,#app.calm .kb-out,#app.calm .kb-pan,#app.calm.noiseon #noise{animation:none}
#app.calm #pic.flip{transition:none}
#app.calm #flash{background:#bdb8ae}

/* 画面（タイトル等）：余れば中央、溢れたら上から（上が切れない） */
.screen{position:absolute;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:22px;background:var(--bg);
  padding:max(28px,var(--st)) max(18px,var(--sr)) max(28px,var(--sb)) max(18px,var(--sl));overflow-y:auto;overscroll-behavior:contain}
.screen.on{display:flex}
.screen>h1,.screen>h2{margin-top:auto}
.screen>:last-child{margin-bottom:auto}
#app.playing .screen{background:rgba(8,8,10,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.screen h2{font-weight:600;letter-spacing:.3em;text-indent:.3em;font-size:20px}
.titlebg{position:absolute;inset:0;background:#000 center/cover no-repeat;opacity:0;transition:opacity 1.2s;animation:titlebg 30s ease-in-out infinite alternate}
.titlebg.on{opacity:.55}
@keyframes titlebg{to{transform:scale(1.07)}}
#scrTitle .logo{position:relative;flex-shrink:0;writing-mode:vertical-rl;font-weight:600;font-size:clamp(28px,min(7vw,7.5vh),64px);letter-spacing:.35em;padding-top:.35em;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.menu{position:relative;display:flex;flex-direction:column;gap:6px;min-width:220px}
.menu button{padding:10px 18px;font-size:16px;letter-spacing:.2em;text-indent:.2em;border-bottom:1px solid rgba(255,255,255,.12);text-align:center}
.menu button:focus-visible,.menu button:active{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.menu button:hover{color:var(--accent)}}
.menu button[disabled]{opacity:.3;pointer-events:none}
.hint{position:relative;font-size:12px;color:var(--dim);letter-spacing:.05em;text-align:center;line-height:1.9}
.hint small{font-size:11px;opacity:.8}
@media (min-aspect-ratio:4/3){
  #scrTitle{flex-flow:row wrap;justify-content:center;align-content:center;column-gap:8vw}
  #scrTitle .logo{order:2;margin:0}
  #scrTitle .menu{order:1}
  #scrTitle .hint{order:3;flex-basis:100%;margin:0}
}
@media (max-height:420px){ .menu button{padding:6px 18px} .screen{gap:12px} }
#scrChapters{background:linear-gradient(rgba(11,11,12,.55),rgba(11,11,12,.72)),url(img/K2_02_chapter_bg.webp?v=20261111d) center/cover}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;width:min(1000px,100%)}
.cards button{position:relative;aspect-ratio:16/9;background:#222 center/cover;border-radius:4px;overflow:hidden;text-align:left}
.cards button span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:14px;letter-spacing:.05em}
.cards button.locked{filter:grayscale(1) brightness(.35);pointer-events:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;width:min(1100px,100%)}
.grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;cursor:zoom-in}
.grid .gz{overflow:hidden;border-radius:3px;aspect-ratio:16/9}.grid .gz img{display:block;border-radius:0}
#viewer .vz{overflow:hidden;max-width:100%;max-height:100%;aspect-ratio:16/9;width:min(100vw,177.8vh)}#viewer .vz img{width:100%;height:100%;object-fit:cover;display:block}
.sub{font-size:13px;color:var(--dim)}
.back{padding:10px 26px;border:1px solid rgba(255,255,255,.25);border-radius:20px;letter-spacing:.2em;text-indent:.2em}
#scrSettings label{display:flex;flex-direction:column;gap:8px;width:min(420px,90%);font-size:15px;letter-spacing:.05em}
#scrSettings label.check{flex-direction:row;align-items:center;gap:10px}
#scrSettings .reset{margin-top:8px;padding:10px 22px;border:1px solid rgba(255,150,130,.4);border-radius:20px;color:#f0c4b8;font-size:14px;letter-spacing:.12em;text-indent:.12em;text-align:center;touch-action:manipulation}
#scrSettings .reset small{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.03em;text-indent:0;color:var(--dim)}
#scrSettings .reset:active{background:rgba(255,150,130,.12)}
#scrSettings .credit{margin-top:18px;font-size:11px;color:var(--dim);letter-spacing:.08em}
input[type=range],input[type=checkbox]{accent-color:var(--accent)}
input[type=checkbox]{width:20px;height:20px}
#scrLog{justify-content:flex-start}
#logList{width:min(820px,100%);flex:1;overflow-y:auto;overscroll-behavior:contain;font-size:15px;line-height:2}
#logList p{margin-bottom:.5em;color:#ddd}
#viewer{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;touch-action:pan-y}
#viewer.on{display:flex}
#viewer img{max-width:100%;max-height:100%}
#card{position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;background:#000;padding:var(--st) var(--sr) var(--sb) var(--sl)}
#card.on{display:flex}
#card .cardIn{text-align:center;letter-spacing:.4em;text-indent:.4em;font-size:clamp(20px,3vw,34px);opacity:0;transition:opacity 1.6s}
#card.show .cardIn{opacity:1}
#card.theend .cardIn{font-family:"Cormorant Garamond","Times New Roman",serif;font-style:italic;letter-spacing:.18em;text-indent:.18em;font-size:clamp(26px,4vw,44px)}
#card.theend .cardIn small{font-family:"Shippori Mincho",serif;font-style:normal}
#card.presents .cardIn{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,22px);letter-spacing:0;text-indent:0;opacity:1}
#card.presents .pv{width:min(52vw,300px);height:auto;opacity:0;filter:blur(10px);transform:scale(1.04);transition:opacity 1.8s ease,filter 2.2s ease,transform 3.4s cubic-bezier(.2,.7,.2,1)}
#card.presents .pp{font-family:"Cormorant Garamond","Times New Roman",serif;font-style:italic;font-size:clamp(14px,2vw,19px);letter-spacing:.42em;text-indent:.42em;color:var(--dim);opacity:0;transition:opacity 1.6s ease 1.1s}
#card.presents.show .pv{opacity:1;filter:blur(0);transform:scale(1)}
#card.presents.show .pp{opacity:1}
#card.presents:not(.show) .pv,#card.presents:not(.show) .pp{transition-delay:0s;transition-duration:1.4s}
#card .cardIn small{display:block;margin-top:14px;font-size:13px;letter-spacing:.1em;text-indent:0;color:var(--dim)}
#card.title .cardIn{writing-mode:vertical-rl;font-size:clamp(30px,min(5vw,7vh),52px);letter-spacing:.35em;text-indent:0;padding-top:.35em}
#colorscreen{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;padding:0 8vw;text-align:center;font-weight:600;font-size:clamp(24px,4.2vw,52px);letter-spacing:.2em;line-height:1.8;white-space:pre-line;word-break:auto-phrase;opacity:0;pointer-events:none;transition:opacity .3s}
#colorscreen.on{opacity:1}
#credits{position:absolute;inset:0;z-index:9;overflow:hidden;background:rgba(0,0,0,.45);transition:opacity 1.2s}
#credits.out{opacity:0}
#credits .roll{position:absolute;left:0;right:0;top:100%;text-align:center;animation:roll 34s linear forwards}
#credits p{font-size:clamp(15px,1.6vw,20px);letter-spacing:.05em;line-height:2.4;text-shadow:0 1px 4px #000}
#credits p:first-child{font-size:clamp(22px,2.6vw,32px);margin-bottom:1em}
@keyframes roll{to{transform:translateY(calc(-100% - 100vh))}}
@media (prefers-reduced-motion: reduce){.kb-in,.kb-out,.kb-pan,.titlebg{animation:none}}

/* ログ：文をタップで読み直し */
#logList h3{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.2em;margin:1.4em 0 .4em}
#logList p{padding:.15em .4em;border-radius:3px;cursor:pointer}
#logList p:active{background:rgba(217,178,124,.14);color:var(--ink)}
.logbtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ギャラリー・用語集の鍵 */
.menu button small{display:block;font-size:10px;letter-spacing:.05em;text-indent:0;color:var(--dim);margin-top:2px}
.menu button[disabled]{opacity:.45;pointer-events:none}
/* 用語集・設定 */
#scrExtras{justify-content:flex-start}
#scrExtras>h2{margin-top:0}
.tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:min(760px,100%)}
.tabs button{padding:6px 12px;font-size:13px;border:1px solid rgba(255,255,255,.18);border-radius:16px;color:var(--dim)}
.tabs button.on{color:#111;background:var(--accent);border-color:var(--accent)}
#extrasBody{width:min(760px,100%);flex:1;overflow-y:auto;overscroll-behavior:contain;font-size:15px;line-height:1.95;padding:4px 2px 20px}
#extrasBody p{margin-bottom:1em}
#extrasBody .cred{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-top:1.8em;padding-top:1.3em;border-top:1px solid rgba(255,255,255,.12);line-height:1.6}
#extrasBody .cred dt{margin:0;font-weight:400;font-size:12.5px;letter-spacing:.08em;color:var(--dim);padding-top:.2em;white-space:nowrap}
#extrasBody .cred dd .seg{display:inline-block}
@media (max-width:360px){ #extrasBody .cred{grid-template-columns:1fr;gap:0} #extrasBody .cred dt{margin-top:.7em} #extrasBody .cred dt:first-child{margin-top:0} }
#extrasBody .cred dd{margin:0;padding-left:0;color:var(--fg,#eee);font-size:15px;letter-spacing:.05em}
#extrasBody .note{color:var(--dim);font-size:13px}
#extrasBody h3{font-size:15px;font-weight:600;color:var(--accent);letter-spacing:.1em;margin:1.4em 0 .5em}
#extrasBody ul{list-style:none}
#extrasBody li{padding:.35em 0;border-bottom:1px solid rgba(255,255,255,.07)}
#extrasBody dt{font-weight:600;margin-top:.9em}
#extrasBody dt small{font-weight:400;font-size:11px;color:var(--dim);margin-left:.8em}
#extrasBody dd{color:#ddd;font-size:14px;padding-left:.2em}
#extrasBody ul.tl li{padding:.95em 0 1em;border-bottom:1px solid rgba(255,255,255,.09);color:var(--ink)}
#extrasBody ul.tl li b{display:block;font-weight:600;letter-spacing:.06em;margin-bottom:.15em}
#extrasBody ul.tl li span{display:block;line-height:1.85}
#extrasBody .fore{padding:1.3em 0 1.4em;border-bottom:1px solid rgba(255,255,255,.09);color:var(--ink)}
#extrasBody .fore:first-of-type{padding-top:.6em}
#extrasBody .fore p{margin:0}
#extrasBody .fwhere{font-size:12px;letter-spacing:.12em;margin-bottom:.35em}
#extrasBody .fset{font-weight:600;line-height:1.8;margin-bottom:.7em}
#extrasBody .fpay{font-size:14px;line-height:1.85;padding-left:1.1em;text-indent:-1.1em}
#extrasBody .fpay + .fpay{margin-top:.55em}
#extrasBody .fch{margin-right:.5em;letter-spacing:.06em}
#extrasBody .note.fnote{color:var(--ink)}
#extrasBody dl.pair{display:grid;grid-template-columns:auto 1fr;gap:.4em 1.2em}
#extrasBody dl.pair dt{margin:0}
#extrasBody dl.pair dd{margin:0}

@media (hover:hover) and (pointer:fine){#logList p:hover{background:rgba(217,178,124,.14);color:var(--ink)}}
.menu button small{display:block;margin-top:4px;font-size:11px;letter-spacing:.04em;color:var(--dim)}
#toast{position:absolute;left:50%;bottom:calc(28px + var(--sb));transform:translate(-50%,8px);z-index:30;max-width:min(88vw,420px);padding:10px 16px;border-radius:999px;background:rgba(20,20,22,.92);color:var(--ink);font-size:13px;letter-spacing:.04em;text-align:center;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 登場人物の絵 */
#extrasBody .pimg{display:block;width:min(420px,100%);aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin:1.6em 0 .2em}
#extrasBody .pimg+h3{margin-top:.6em}
/* オリジナルサウンド */
#scrSong{justify-content:flex-start}
#scrSong>h2{margin-top:0}
#scrSong .songtitle{font-size:18px;letter-spacing:.15em;margin:.2em 0 1em}
#scrSong .player{display:flex;align-items:center;gap:14px;width:min(520px,100%);margin-bottom:1.2em}
#songPlay{flex-shrink:0;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);font-size:18px;color:#f3efe6;touch-action:manipulation}
#songPlay:active{background:rgba(255,255,255,.12)}
#scrSong .bar{flex:1;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:manipulation}
#scrSong .bar::before{content:"";position:absolute}
#songBarWrap{position:relative;background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) center/100% 3px no-repeat}
#songBar{height:3px;width:0;background:var(--accent)}
#songTime{flex-shrink:0;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
#lyrics{width:min(520px,100%);flex:1;overflow-y:auto;overscroll-behavior:contain;text-align:center;font-size:15px;line-height:2.1;padding:4px 2px 24px;color:rgba(243,239,230,.88)}
#lyrics p{margin-bottom:1.6em}

/* 色だけの画面：細い画面では文字を少し小さく、字間を詰めて、句の途中で折れないように */
@media (max-width: 600px){ #colorscreen{font-size:clamp(17px,5.2vw,30px);letter-spacing:.08em;padding:0 5vw} }

/* 開いたときのロゴ（約2秒） */
#card.splash .pv{width:min(46vw,260px);transition:opacity .55s ease,filter .7s ease,transform 1.9s cubic-bezier(.2,.7,.2,1)}
#card.splash:not(.show) .pv{transition-duration:.5s}
#card.splash .pp{font-family:var(--font);font-style:normal;font-weight:400;font-size:clamp(13px,1.8vw,17px);letter-spacing:.3em;text-indent:.3em;transition:opacity .6s ease .25s}
#card.splash:not(.show) .pp{transition-delay:0s;transition-duration:.45s}

/* 11/11 最終章：画面いっぱいの黒（＋雪）に白い文字だけ（@void）、目の形の視界（@eye）、歌詞（@lyrics） */
#void{position:absolute;inset:0;z-index:4;background:#000;opacity:0;pointer-events:none;transition:opacity .9s ease}
#void.on{opacity:1}
#void canvas{position:absolute;inset:0;width:100%;height:100%}
#app.void #textbox{z-index:5;top:0;bottom:0;left:0;right:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0 8vw calc(48px + var(--sb))}
#app.void #text{height:auto;max-height:80%;width:100%;text-align:center}
#app.void #text p{font-size:calc(19px * var(--fs));letter-spacing:.14em;line-height:2.2;color:var(--ink);animation:voidin .9s ease}
#app.void #text p:not(.cur){display:none}
@keyframes voidin{from{opacity:0}to{opacity:1}}
#eye{position:absolute;inset:0;z-index:3;pointer-events:none;display:none}
#eye.on{display:block}
#text p.lyr{text-align:center;letter-spacing:.12em;font-size:calc(18px * var(--fs));color:var(--ink);animation:voidin 1.2s ease}
#text p.lyrtitle{text-align:center;letter-spacing:.32em;font-size:calc(24px * var(--fs));color:var(--ink);animation:voidin 2s ease}
@media (orientation: landscape){ #app.void #textbox{padding:0 12vw calc(40px + var(--sb))} #app.void #text p{font-size:calc(20px * var(--fs))} }
#pic.blurhold .layer{filter:blur(2.6px) brightness(.93)}
/* 11/11 エンディングの走馬灯：歌詞なし。絵は横16：縦9の枠で上下の真ん中に（上下は黒＝映画の帯） */
#app.fullpic{background:#000}
#app.fullpic #textbox{opacity:0;pointer-events:none;transition:opacity .8s}
#app.void.fullpic #textbox{opacity:1}
#app.fullpic #stage::after{opacity:0}
#app.fullpic #stage{left:50%;top:50%;right:auto;bottom:auto;width:min(100%,177.78vh);height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%)}
/* 11/11 最後の一行のあと、古いテレビが「プツン」と切れるように消える（@tvoff） */
#app.tvoff{background:#000;transform-origin:50% 50%;animation:tvoff .5s cubic-bezier(.6,0,.9,.4) forwards}   /* 11/11 総監督：プツンは画面の上下の真ん中で（黒い画面・文字・絵をまとめて真ん中へ縮める） */
html:has(#app.tvoff),body:has(#app.tvoff){background:#000}
@keyframes tvoff{0%{transform:scale(1,1);filter:brightness(1)}55%{transform:scale(1,.006);filter:brightness(3.5)}85%{transform:scale(.02,.006);filter:brightness(5);opacity:1}100%{transform:scale(0,0);opacity:0}}
#app.tvoff #hud{opacity:0;transition:opacity .3s}
#app.fullpic #hud{opacity:0;pointer-events:none;transition:opacity .8s}   /* 11/11 総監督：エンディング（タイトル〜プツン）は下のボタンを隠す */
#tvline{position:fixed;left:50%;top:50%;width:100vw;height:100vh;transform:translate(-50%,-50%);background:#fff;border-radius:2px;box-shadow:0 0 16px 4px rgba(255,255,255,.75),0 0 46px 10px rgba(190,215,255,.35);opacity:0;pointer-events:none;z-index:9999;animation:tvline .62s cubic-bezier(.55,0,.85,.45) forwards}   /* 11/11 プツン：画面の上下の真ん中で白い横線→点 */
@keyframes tvline{0%{opacity:0;width:100vw;height:100vh}22%{opacity:.35;width:100vw;height:38vh}46%{opacity:1;width:100vw;height:3px}80%{opacity:1;width:10px;height:3px}100%{opacity:0;width:2px;height:2px}}
@media (prefers-reduced-motion: reduce){#tvline{animation-duration:.3s}}
#app.locked #hud{opacity:0;pointer-events:none;transition:opacity .8s}   /* 11/11 最後の三行（タップで進まない）から下のボタンを隠す */
.kb-shrink{animation:kbShrink 16s cubic-bezier(.25,.1,.35,1) forwards}   /* 11/11 エンディング：絵が少しずつ小さくなって（奥へ遠ざかって）消える */
@keyframes kbShrink{from{transform:scale(1)}to{transform:scale(var(--kbto,.86))}}
@media (prefers-reduced-motion: reduce){.kb-shrink{animation:none}}
#app.fullpic #pic .layer{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}   /* 11/11 総監督：エンディングの絵は、まわりをぼかして黒に溶かす */
#app.void #text p.lyrtitle,#app #text p.lyrtitle{writing-mode:vertical-rl;text-align:start;letter-spacing:.35em;font-size:clamp(26px,min(4.6vw,6.2vh),46px);line-height:1;padding-top:.35em;margin:0 auto;font-feature-settings:normal}   /* 11/11 総監督：エンディング前のタイトルは縦書き（縦書きに palt はかけない） */
#app.void.big #text p:not(.lyrtitle){font-size:calc(min(27px, 6.9vw) * var(--fs));letter-spacing:.1em;line-height:1.75}   /* 11/11 総監督：強い言葉は、エンディングのように真ん中に大きく */
@media (orientation: landscape){ #app.void.big #text p:not(.lyrtitle){font-size:calc(30px * var(--fs))} }
#app.void #text p{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}   /* 11/11 黒い画面の文字は、言葉の途中で折り返さず、句読点の所で、2行の長さをそろえて折り返す */

/* 11/11 公開：タイトルと設定の「制作 vivitto」 */
.maker{position:relative;margin:0;font-size:11px;color:var(--dim);letter-spacing:.14em;text-align:center}
.maker a,#scrSettings .credit a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.maker a:hover,#scrSettings .credit a:hover{color:var(--accent)}}
@media (min-aspect-ratio:4/3){ #scrTitle .maker{order:4;flex-basis:100%} }