:root{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;color:#f0eee8;background:#141716;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,.dialog:focus-visible,.ring:focus-visible{outline:2px solid #e1cf9e;outline-offset:3px}
.app{position:relative;margin:auto;max-width:1240px;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#222622}
.header{flex:0 0 auto;min-height:47px;display:flex;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 18px 8px;font-size:15px;letter-spacing:.18em;background:#262a27;color:#eeeee8}
.gameContent{flex:1;min-height:0;display:grid;grid-template-rows:minmax(120px,1fr) auto}
.visual{position:relative;overflow:hidden;min-height:0;isolation:isolate;background:#565b52}
.roomBackground{position:absolute;inset:0;display:block;z-index:0;pointer-events:none}
.roomBackground img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.portraitStage{position:absolute;inset:0;z-index:1;pointer-events:none}
/* 添付済み全身表情PNGを同じ1536×2304座標に固定。部分切り抜きは使わない。 */
.portraitRig{position:absolute;left:50%;bottom:-21%;height:122%;aspect-ratio:2/3;transform:translateX(-50%);max-width:none}
.character{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;max-width:none;pointer-events:none}
.expression{z-index:2;opacity:0;transition:opacity .18s ease;will-change:opacity,transform}
/* 全身画像を同じ位置で交差フェードし、顔だけを重ねる継ぎ目を防ぐ。 */
.expression.visible{opacity:1}
/* 人物の後ろに収まる、布張りと木枠の相談室用アームチェア。 */
.chair{position:absolute;inset:0;z-index:1;pointer-events:none}
.chairBack{position:absolute;left:16%;top:40%;width:68%;height:44%;overflow:hidden;border:clamp(6px,1vmin,13px) solid #30231c;border-radius:20% 20% 8% 8% / 14% 14% 7% 7%;background:
 radial-gradient(circle at 35% 30%,#8b8d7866 0 1.2%,transparent 1.6%),radial-gradient(circle at 65% 30%,#8b8d7866 0 1.2%,transparent 1.6%),
 radial-gradient(circle at 35% 62%,#252921 0 1.2%,transparent 1.6%),radial-gradient(circle at 65% 62%,#252921 0 1.2%,transparent 1.6%),
 repeating-linear-gradient(115deg,#ffffff08 0 1px,transparent 1px 7px),linear-gradient(90deg,#20251e,#555849 17%,#3f4236 50%,#292d25 84%,#191d18);
 box-shadow:0 11px 24px #090b0988,inset 4px 0 13px #a4a58c2e,inset -7px 0 14px #05080699,0 0 0 2px #15120f}
.chairBack::before{content:"";position:absolute;inset:8px;border-radius:16% 16% 5% 5% / 11% 11% 5% 5%;border:1px solid #aaa88f55;background:linear-gradient(100deg,#87887318,#10150faa 86%);box-shadow:inset 0 6px 17px #10140fbb,inset 0 -1px 0 #93937d2b}
.chairBack::after{content:"";position:absolute;left:14%;right:14%;top:12%;bottom:10%;opacity:.34;background:linear-gradient(90deg,transparent 49.5%,#151a154f 50%,transparent 50.5%),linear-gradient(transparent 49.5%,#151a154f 50%,transparent 50.5%);background-size:33.33% 34%}
.chairBack i{position:absolute;width:2.1%;aspect-ratio:1;border-radius:50%;z-index:1;background:radial-gradient(circle at 35% 28%,#a2a18a,#4b4d40 48%,#20231d 75%);box-shadow:0 1px 3px #080a08,inset 0 1px 1px #dedbc044}
.chairBack i:nth-child(1){left:33%;top:31%}.chairBack i:nth-child(2){right:33%;top:31%}.chairBack i:nth-child(3){left:33%;top:62%}.chairBack i:nth-child(4){right:33%;top:62%}
.chairPost{position:absolute;top:39%;width:5.2%;height:52%;border-radius:48% 48% 20% 20%;background:linear-gradient(90deg,#120d0a,#50372a 28%,#785341 48%,#39271e 70%,#120d0a);box-shadow:0 4px 7px #050403aa,inset 1px 0 1px #ae7b5b55}
.chairPost::before{content:"";position:absolute;left:-13%;top:-2%;width:126%;height:8%;border-radius:50%;background:radial-gradient(ellipse at 40% 30%,#866049,#38251b 60%,#130d09);box-shadow:0 2px 3px #090604}
.chairPost.left{left:12.5%}.chairPost.right{right:12.5%}
.chairArm{position:absolute;top:70%;width:25%;height:7%;border-radius:55% 45% 28% 28%;background:linear-gradient(#74513d,#3a271d 50%,#17100c);box-shadow:0 4px 7px #06040399,inset 0 1px 1px #b9876355}
.chairArm.left{left:5%;transform:rotate(7deg)}.chairArm.right{right:5%;transform:rotate(-7deg)}
.chairArm::after{content:"";position:absolute;top:65%;width:14%;height:245%;border-radius:30%;background:linear-gradient(90deg,#241711,#664633,#271a13);box-shadow:1px 3px 5px #08050499}
.chairArm.left::after{left:13%}.chairArm.right::after{right:13%}
.chairSeat{position:absolute;top:79%;left:12%;width:76%;height:11%;border-radius:43% 43% 18% 18% / 64% 64% 28% 28%;background:repeating-linear-gradient(105deg,#ffffff08 0 1px,transparent 1px 6px),linear-gradient(#686956,#33362b 49%,#151a14);box-shadow:0 9px 15px #0009,0 0 0 3px #2b2019,inset 0 2px 2px #9c9c8355}
.chairSeat::before{content:"";position:absolute;left:6%;right:6%;bottom:-23%;height:38%;border-radius:0 0 35% 35%;background:linear-gradient(#3b3c31,#1c211a);border:2px solid #2b2019;box-shadow:0 6px 9px #0007}
.door{position:absolute;right:0;top:0;bottom:0;width:0;background:#18221ab8;z-index:2;pointer-events:none;transition:width 1.4s linear}
.visual.leaving .door{width:18%}
.visual.leaving .expression{transform:translateX(min(36vw,450px));opacity:0;transition:transform 1.45s ease-in,opacity 1.45s ease-in}
.interaction{display:grid;grid-template-columns:minmax(0,1fr) 120px;min-height:151px;background:#27312c;border-top:1px solid #5a675d}
.dialog{position:relative;min-width:0;min-height:151px;padding:19px 12px 25px 18px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;touch-action:manipulation}
.speaker{color:#c0cec5;font-size:12px;letter-spacing:.06em;margin-bottom:10px}
.dialog p{margin:0;line-height:1.7;font-size:clamp(16px,4.5vw,19px);overflow-wrap:anywhere;letter-spacing:.01em}
.next{position:absolute;right:15px;bottom:12px;font-size:12px;color:#d0c5a5;animation:bob 1.7s infinite}
.dialog.waiting .next{display:none}
@keyframes bob{50%{opacity:.5;transform:translateY(2px)}}
.control{position:relative;display:flex;justify-content:center;align-items:center;min-width:0;border-left:1px solid #44514a;padding:9px 9px 24px;background:#222a26}
/* 多層金属の手回し式ダイヤル。寸法・ポインタ判定は従来と同じ。 */
.ring{position:relative;flex:0 0 auto;width:102px;aspect-ratio:1;border-radius:50%;isolation:isolate;overflow:hidden;
 background:radial-gradient(circle at 28% 23%,#9ba99a 0%,#687769 35%,#39493e 71%,#1a2820 100%);
 border:1px solid #7b8b7e;
 box-shadow:0 0 0 2px #17251e,0 0 0 3px #516154,0 5px 10px #0c1813aa,inset 0 2px 2px #d3d9c04d,inset 0 -3px 5px #06110c;
 touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;transition:filter .25s}
.ring:active{cursor:grabbing}
/* 金属の縁に刻んだ細かな溝 */
.ring::before{content:"";position:absolute;inset:2px;border-radius:50%;z-index:0;pointer-events:none;
 background:repeating-conic-gradient(from -.5deg,#a4b1a1 0deg .5deg,#526354 .6deg 1.3deg,#344638 1.4deg 3deg);
 box-shadow:inset 0 1px 2px #dfdfce50,inset 0 -2px 4px #0b180faa}
.ring::after{content:"";position:absolute;inset:5px;border-radius:50%;z-index:0;pointer-events:none;
 background:linear-gradient(140deg,#adb9a0,#526253 42%,#26372d 80%,#667363);
 box-shadow:0 0 0 1px #243329,0 1px 2px #eff9e25c,inset 0 1px 3px #101e16}
/* 幸福度の上昇がわかる、細い金色の進捗目盛り */
.ringMarks{position:absolute;inset:8px;border-radius:50%;z-index:1;pointer-events:none;
 background:conic-gradient(from 0deg,#f7bed6 0deg,#f17bab var(--progress,0deg),#3b4b40 var(--progress,0deg),#344439 360deg);
 box-shadow:inset 0 0 0 6px #26352c,inset 0 1px 4px #0a170f,0 0 0 1px #a6b4a044}
/* 内側は削り出し金属のノブ。動くのはここだけ */
.knob{position:absolute;inset:16px;z-index:2;border:1px solid #b4bfa9;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle at 30% 19%,#a1ab98 0%,#818e80 14%,#596a5c 37%,#394b3f 72%,#1b2a22 100%);
 box-shadow:inset 0 2px 3px #ecf4d45e,inset 0 -8px 12px #0b1a13c9,0 2px 0 #0b1710,0 4px 8px #07140f;
 transform:rotate(var(--angle,0deg));will-change:transform}
.knob::before{content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none;
 border:1px solid #9cab9950;
 background:repeating-conic-gradient(from 12deg,#a1afa40b 0deg .8deg,#12251a12 .8deg 2deg,transparent 2deg 7deg);
 box-shadow:inset 0 1px 2px #e4efd033,inset 0 -1px 3px #06130c99}
.knob::after{content:"";position:absolute;inset:9px;border-radius:50%;pointer-events:none;
 border-top:1px solid #d2d9bd55;border-right:1px solid #b5c2ae16;border-bottom:1px solid #05130b6b}
/* 真鍮の指針は先端を細くして影・反射を付ける */
.knobArrow{position:absolute;top:7%;left:50%;width:7px;height:34%;transform:translateX(-50%);border-radius:5px 5px 3px 3px;z-index:4;
 background:linear-gradient(90deg,#635331 0%,#e7d7a7 27%,#c5a770 70%,#76613a 100%);
 box-shadow:0 0 0 1px #483a22bb,1px 2px 3px #0b1a12aa,inset 1px 0 1px #f7ead0b5}
.knobArrow::before{content:"";position:absolute;top:-4px;left:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:6px solid #dcc58d;filter:drop-shadow(0 -1px 0 #4f4126)}
/* 中央の軸受けと固定鋲 */
.centerHole{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);z-index:5;border-radius:50%;pointer-events:none;
 border:2px solid #899989;
 background:radial-gradient(circle at 35% 30%,#657667 0%,#25372b 37%,#09170e 65%,#050e09 100%);
 box-shadow:inset 0 1px 3px #020a06,0 1px 1px #bec8ad66,0 0 0 2px #27382d}
.centerHole::after{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 27% 20%,#83947b,#213027 55%,#07140b);box-shadow:0 0 1px #020a06}
.knobEtching{position:absolute;left:50%;bottom:11%;width:19%;height:1px;transform:translateX(-50%);border-radius:10px;background:#c0ccad37;box-shadow:0 1px 0 #0b1b13;pointer-events:none}
/* 固定された48本の精密な刻線。回転するノブの上に重ねる。 */
.dialTicks{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;fill:none;stroke-linecap:round}
.ticksMinor{stroke:#bbcab795;stroke-width:.8}
.ticksMedium{stroke:#d3d4bd;stroke-width:1.15}
.ticksMajor{stroke:#e7d5a4;stroke-width:1.9;filter:drop-shadow(0 0 .5px #0b170d)}
.control.locked .ring{filter:brightness(.66)}
.control.ready .ring{filter:brightness(1.12)}
.dialCue{position:absolute;left:0;right:0;bottom:8px;text-align:center;white-space:nowrap;color:#d0c29c;font:10px/1.5 "Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.03em;opacity:.55;pointer-events:none}
.control.ready .dialCue{opacity:1}
.overlay{position:absolute;inset:0;z-index:10;display:flex;justify-content:center;align-items:safe center;overflow-y:auto;padding:20px 15px;background:#101713ed}
.endSheet{width:min(100%,470px);background:#e2e3da;color:#1b2b20;padding:clamp(19px,5vw,35px);box-shadow:0 12px 80px #0007}
.paperTop{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:14px;letter-spacing:.08em;font-weight:700;padding-bottom:14px;border-bottom:2px solid #20362c}
.paperTop span{font-weight:400;font-size:11px}
.entry{padding:17px 0 12px;border-bottom:1px solid #a7afa6;font-size:13px}
.entry>span{font-size:11px;color:#52685a}
.entry p{display:flex;justify-content:space-between;margin:9px 0;gap:8px}
.quota{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:21px 0 6px}
.quota>span{font-size:13px}
.quota strong{font:500 clamp(40px,12vw,64px) ui-monospace,SFMono-Regular,monospace}
.quota small{font-size:17px}
.staffVoice{font-size:17px;line-height:1.8;margin:19px 0}
.project{color:#5b675d;font-size:12px;line-height:1.9;margin:18px 0}
.endMark{border-top:1px solid #a7afa6;padding:13px 0;font-size:13px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.actions button{padding:11px 7px;min-height:46px;border-radius:2px;font-size:13px}
.shareCardBlock{margin:3px auto 14px;width:min(100%,260px);text-align:center}
.shareCardBlock img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid #a7afa6;box-shadow:0 3px 9px #18231b22;background:#1a241e}
.shareCardBlock figcaption{margin-top:5px;color:#607064;font-size:10px;letter-spacing:.04em}
.primary{border:1px solid #20392c;color:#fff;background:#20392c}
.secondary{border:1px solid #20392c;background:transparent;color:#20392c}
@media(min-width:760px){
 .header{min-height:56px;padding-left:26px;font-size:16px}
 .gameContent{grid-template-rows:minmax(140px,1fr) auto}
 .interaction{grid-template-columns:minmax(0,1fr) 180px;min-height:156px}
 .dialog{min-height:156px;padding:20px 32px}
 .dialog p{font-size:clamp(18px,1.8vw,22px)}
 .ring{width:118px}
 .dialCue{right:20px;bottom:14px}
 .portraitRig{height:116%;bottom:-18%}
}
@media(max-height:600px) and (max-width:759px){
 .header{min-height:35px;padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:4px}
 .interaction,.dialog{min-height:125px}
 .dialog{padding:9px 9px 15px 14px}
 .speaker{margin-bottom:4px}
 .dialog p{font-size:15px;line-height:1.55}
 .ring{width:86px}
 .control{padding:6px 6px 19px}
 .dialCue{bottom:3px;font-size:9px}
 .portraitRig{height:120%;bottom:-21%}
}
@media(prefers-reduced-motion:reduce){.next{animation:none}.door,.character{transition:none}}

/* 画面の高さが限られる横向き・分割表示だけコンパクトにする。 */
@media (min-width:760px) and (max-height:600px){
 .header{min-height:42px;padding:7px 18px;font-size:15px}
 .gameContent{grid-template-rows:minmax(70px,1fr) auto}
 .interaction,.dialog{min-height:125px}
 .dialog{padding:10px 18px}
 .speaker{margin-bottom:5px}
 .dialog p{font-size:16px;line-height:1.5}
 .ring{width:92px}
 .control{padding:7px 7px 19px}
 .dialCue{bottom:3px;font-size:9px}
}
@media (max-height:400px){
 .header{min-height:32px;padding:calc(5px + env(safe-area-inset-top)) 15px 5px;font-size:13px}
 .gameContent{grid-template-rows:minmax(45px,1fr) auto}
 .interaction,.dialog{min-height:97px}
 .dialog{padding:6px 12px}
 .speaker{margin-bottom:3px;font-size:11px}
 .dialog p{font-size:14px;line-height:1.4}
 .ring{width:78px}
 .control{padding:5px 5px 17px}
 .dialCue{bottom:2px;font-size:9px}
 .overlay{padding:8px 12px}
 .endSheet{padding:8px 14px}
 .paperTop{padding-bottom:4px;font-size:12px}
 .entry{padding:4px 0 1px;font-size:12px}
 .entry p{margin:3px 0}
 .quota{padding:4px 0 0}
 .quota strong{font-size:34px}
 .staffVoice{font-size:12px;line-height:1.3;margin:4px 0}
 .project{font-size:11px;line-height:1.3;margin:4px 0}
 .endMark{padding:5px 0;font-size:12px}
 .actions button{min-height:44px}
}
@media (max-width:759px) and (max-height:345px){
 .interaction,.dialog{min-height:96px}
 .ring{width:73px}
 .header{padding-top:calc(4px + env(safe-area-inset-top))}
}
@media (prefers-reduced-motion:reduce){
 .visual.leaving .door,.visual.leaving .character{transition:none}
}

/* ノッチ・ホームバーを避ける。ゼロの端末では既存位置のまま。 */
.header{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.interaction{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
@media (min-width:760px){
 .header{padding-left:max(26px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}
@media (max-height:400px){
 .header{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}
}

/* v8.2: 幸福度の見える化。旧ダイヤル・立ち絵レイアウトは維持。 */
.header{justify-content:space-between;gap:12px}
.happinessMeter{width:min(58vw,320px);display:grid;grid-template-columns:1fr auto;column-gap:9px;align-items:center;line-height:1.2;flex:none}
.happinessTitle{font-size:11px;color:#d5dacd;letter-spacing:.05em}
.happinessValue{font:600 17px ui-monospace,SFMono-Regular,monospace;letter-spacing:0;font-variant-numeric:tabular-nums}
.happinessTrack{display:block;grid-column:1/-1;height:6px;margin-top:4px;background:#151c17;border:1px solid #6c766c;border-radius:30px;overflow:hidden}
.happinessFill{display:block;background:linear-gradient(90deg,#e99bbd,#ff70b0);height:100%;width:0%;border-radius:30px;transition:width .06s linear}
/* 黒画面の一人称独白と真相開示 */
.cinematic{position:absolute;inset:0;z-index:15;background:#111513;color:#f4f1e8;display:grid;place-items:center;padding:26px max(22px,env(safe-area-inset-right)) 22px max(22px,env(safe-area-inset-left))}
.cinematicFrame{width:min(100%,620px);min-height:230px;display:flex;flex-direction:column;justify-content:center;gap:40px}
.cinemaText{white-space:pre-line;line-height:2.1;font-size:clamp(17px,4.5vw,23px);letter-spacing:.08em;margin:0;min-height:6em}
.cinemaFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#a6aca2;font-size:12px}
.cinemaFoot button{background:none;border:0;color:#e1dfd5;text-align:right;font-size:12px;padding:13px 8px;min-height:44px}
/* パンフレット: 行為の具体的な説明を表示せず、ページめくりだけ実装 */
.paperOverlay{z-index:16;background:#101713ee}
.pamphletBox{width:min(100%,430px);display:flex;flex-direction:column;align-items:stretch;gap:15px;padding:12px 4px;color:#ecebe2}
.pamphletHint{text-align:center;font-size:12px;margin:0;color:#d0d3c5}
.pamphletBook{min-height:340px;background:#eeece3;color:#272d26;box-shadow:8px 11px 15px #0006;cursor:default;touch-action:pan-y;border:1px solid #a3a59a;position:relative}
.pamphletPage{padding:28px 28px 18px;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center}
.pamphletAgency{font-size:11px;color:#4f5a4e;letter-spacing:.12em}
.pamphletOrnament{color:#929788;font-size:40px;margin-top:15px}
.pamphletPage h2{color:#242a24;line-height:1.55;font-size:clamp(25px,6vw,36px);letter-spacing:.12em;margin:12px 0}
.pamphletSub{font-size:14px;color:#454c43;margin:0}
.pamphletSerial{font-size:11px;color:#77796e;margin-top:20px}
.pamphletPage.inside{justify-content:space-evenly;gap:12px}
.pamphletPage.inside h2{font-size:25px}
.pamphletBox>button{min-height:48px}
/* ポスター: 既存素材の代わりに軽量なHTML/CSSで描画 */
.posterOverlay{position:absolute;inset:0;z-index:17;background:#0c100e;display:flex;align-items:safe center;justify-content:center;overflow-y:auto;padding:13px}
.posterSheet{background:#e7e0cb;color:#242b22;width:min(100%,650px);min-height:min(92dvh,690px);padding:clamp(15px,4vw,36px);border:8px solid #c5bc9e;box-shadow:0 10px 48px #000b;display:flex;flex-direction:column;justify-content:space-around;text-align:center;gap:14px}
.posterAgency{font-size:12px;letter-spacing:.17em;margin:0}
.posterEmblem{font:90px/1 Georgia,serif;color:#a03e33}
.posterSheet h2{font-size:clamp(28px,8vw,55px);line-height:1.35;color:#982f2b;margin:0}
.posterSheet h2 strong{display:block;font-size:1.3em}
.posterSlogan{font-size:clamp(17px,4.8vw,28px);font-weight:bold;margin:0}
.posterLine{height:2px;background:#aaa082}
.posterSheet h3{font-size:clamp(22px,6.5vw,36px);letter-spacing:.07em;margin:0}
.posterSmall{font-size:13px;color:#636555;margin:0}
.posterNext{background:#952f2b;color:#fff;border:0;min-height:46px;margin:5px auto 0;padding:10px 32px;width:min(100%,280px)}
.treatmentTrack{height:9px;background:#c7c9bc;border:1px solid #a8b1a0;overflow:hidden;border-radius:2px;margin-top:15px}
.treatmentTrack span{display:block;width:80%;height:100%;background:#913f38}
#end2Report{border-bottom:0}
@media (max-width:430px){.header{gap:4px}.happinessMeter{width:58vw}.happinessValue{font-size:15px}.happinessTitle{font-size:10px}.posterEmblem{font-size:65px}}
@media(max-height:550px){.cinematicFrame{min-height:120px;gap:10px}.cinemaText{min-height:2em}.posterSheet{gap:5px}.posterEmblem{font-size:45px}.pamphletBook,.pamphletPage{min-height:230px}.pamphletPage{padding:13px}.pamphletPage h2{font-size:24px}}

/* 共有関連はEND数にかかわらず同じ位置に置き、誤タップを避ける。 */
#shareButton{grid-column:1/-1}
@media(max-height:700px){.shareCardBlock{width:min(36vw,155px);margin-bottom:8px}.endSheet{padding-top:14px;padding-bottom:14px}.entry{padding-top:9px;padding-bottom:7px}.entry p{margin:5px 0}}

/* v8.4.7: supplied print artwork, responsive, preserve existing interaction */
.pamphletBook{background:transparent;border:0;box-shadow:8px 11px 15px #0006;overflow:hidden;aspect-ratio:1122/1402;min-height:0;width:100%;}
.pamphletPage,.pamphletPage.inside{display:flex;padding:0;min-height:0;width:100%;height:100%;margin:0;align-items:stretch;justify-content:center;gap:0;}
.pamphletPage[hidden]{display:none!important;}
.printedPageImage{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.posterSheet{min-height:0;padding:0;border:0;gap:10px;width:min(100%,650px);background:transparent;box-shadow:none;align-items:center;justify-content:center;}
.posterArtwork{display:block;max-width:100%;width:auto;max-height:calc(100dvh - 105px);object-fit:contain;box-shadow:0 10px 32px #0009;}
.posterNext{flex-shrink:0;min-height:46px;margin:0 auto;background:#952f2b;}
@media(max-height:550px){.pamphletBook,.pamphletPage{min-height:0;padding:0}.posterSheet{gap:5px}.posterArtwork{max-height:calc(100dvh - 90px)}}

/* Narrow viewports and landscape: prevent intrinsic media overflow. */
img { max-width: 100%; }
.pamphletBox, .posterSheet { min-width: 0; }
.pamphletBook { max-width: 100%; }
@supports (height: 100dvh) {
  .paperOverlay, .posterOverlay { max-height: 100dvh; }
}

/* v8.4.9: Keep booklet and poster fully visible on narrow/short viewports,
   without changing their design, aspect ratio, or interactive hit areas. */
.pamphletBox { min-width:0; max-width:100%; }
.pamphletBook { width:100%; max-width:100%; height:auto; }
.printedPageImage { max-width:100%; }
.posterSheet { max-width:100%; min-width:0; }
.posterArtwork { height:auto; max-width:100%; }
@media (max-height:700px) {
  .pamphletBox {
    width:min(100%,430px, calc((100dvh - 143px) * 1122 / 1402));
    gap:10px;
  }
}
@media (max-height:370px) {
  .pamphletBox { width:min(100%,430px, calc((100dvh - 118px) * 1122 / 1402)); gap:5px; padding:4px 0; }
  .pamphletHint { font-size:10px; }
  .pamphletBox>button { min-height:44px; }
  .posterOverlay { padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left)); }
  .posterArtwork { max-height:calc(100dvh - 72px); }
}


/* v8.5.4: Small-screen interaction safety. No visual changes at normal sizes. */
.overlay,.posterOverlay,.paperOverlay {
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.endSheet,.pamphletBox,.posterSheet {
  flex-shrink:0;
}
.endSheet .paperTop,.endSheet .entry p,.endSheet .actions {
  min-width:0;
}
.endSheet .paperTop > *, .endSheet .entry p > * {
  min-width:0;
  overflow-wrap:anywhere;
}
@media (max-height:500px) and (min-width:600px) {
  .overlay { align-items:safe flex-start; }
}
@supports (padding: max(0px, 1px)) {
  .overlay {
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }
}


/* v8.5.5 Chair geometry: rear upholstery stays behind Sachiko;
   the two armrests sit slightly in front of the sleeves at waist height.
   Coordinates remain relative to the existing portrait rig on all screens. */
.chair { z-index:auto; }
.chairBack, .chairSeat { z-index:0; }
.chairPost {
  z-index:1;
  top:68%;
  height:16%;
  width:3.4%;
  border-radius:42% 42% 15% 15%;
}
.chairPost.left { left:20%; }
.chairPost.right { right:20%; }
.chairPost::before { height:14%; top:-4%; }
.chairArm {
  z-index:3;
  top:77%;
  width:19%;
  height:4.2%;
  border-radius:52% 48% 30% 30%;
}
.chairArm.left { left:13%; transform:rotate(-5deg); }
.chairArm.right { right:13%; transform:rotate(5deg); }
.chairArm::after {
  top:76%;
  width:11%;
  height:145%;
  opacity:.8;
}
.chairArm.left::after { left:23%; }
.chairArm.right::after { right:23%; }


/* v8.5.8: Brief crying-face interference when switching into a smile.
   Portrait rig is shared with normal expressions, preserving alignment. */
.cryGlitch {
  z-index:8;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:none !important;
  filter:contrast(1.45) grayscale(.7);
  mix-blend-mode:normal;
}
.cryGlitch.isGlitching {
  visibility:visible;
  animation:cryFlash .26s steps(1,end) both;
}
@keyframes cryFlash {
  0%,100% {opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  8% {opacity:.92;clip-path:inset(17% 0 63% 0);transform:translateX(-7px)}
  17% {opacity:0}
  27% {opacity:.9;clip-path:inset(28% 0 38% 0);transform:translateX(5px)}
  39% {opacity:0}
  48% {opacity:.95;clip-path:inset(14% 0 30% 0);transform:translateX(-4px)}
  62% {opacity:0}
  70% {opacity:.85;clip-path:inset(34% 0 32% 0);transform:translateX(3px)}
  82%,100% {opacity:0}
}
@media (prefers-reduced-motion:reduce) {
  .cryGlitch.isGlitching {animation:cryFlash .26s steps(1,end) both !important}
}

/* END 03: intermittent portrait distortion; no new imagery */
.end3-distort img{animation:end3Flicker .18s steps(2,end) infinite}
@keyframes end3Flicker{0%,100%{filter:none;transform:translateX(0)}50%{filter:contrast(2.5) grayscale(1);transform:translateX(4px)}}

/* v8.7.1: approved END03 B -- rapid cry/smile oscillation throughout the ending. */
.end3ExpressionLoop{position:absolute;inset:0;z-index:8;pointer-events:none;}
.end3ExpressionLoop .character{transition:none!important;transform:none!important;}
.end3ExpressionLoop .end3-smile{animation:end3Smiling .24s steps(1,end) infinite;}
@keyframes end3Smiling{0%,49.9%{opacity:0}50%,100%{opacity:1}}
.end3MiniPortrait{position:relative;width:88px;height:88px;margin:5px 0 8px auto;overflow:hidden;border:2px solid #822424;background:#d7d0c4;}
.end3MiniPortrait img{position:absolute;display:block;width:100%;height:100%;object-fit:cover;object-position:center top;}
.end3MiniPortrait .end3-mini-smile{animation:end3Smiling .24s steps(1,end) infinite;}
/* END 01/02: original uploaded images go before each end's monologue, not after. */
.endPhotoOverlay{position:absolute;inset:0;z-index:18;background:#0b0d0b;display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:auto;}
.endPhotoSheet{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(100%,800px);height:100%;min-height:0;gap:12px;}
.endPhotoImage{display:block;max-width:100%;max-height:calc(100% - 60px);width:auto;height:auto;object-fit:contain;box-shadow:0 5px 30px #0008;user-select:none;-webkit-user-drag:none;}
.endPhotoNext{background:transparent;color:#f1efe8;border:1px solid #777;min-height:46px;min-width:min(100%,220px);padding:10px 16px;flex-shrink:0;}

/* END collection: official archive design, responsive and save-state aware */
.collectionOverlay{z-index:110;overflow-y:auto;padding:16px;background:rgba(0,0,0,.88)}
.collectionSheet{width:min(100%,560px);margin:auto;background:#eeeae1;color:#161616;padding:clamp(16px,4vw,30px);box-shadow:0 15px 50px #0009;font-family:inherit}
.collectionHead{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #252525;padding-bottom:10px;font-size:12px;letter-spacing:.04em}
.collectionHead button{background:#252525;color:white;border:0;border-radius:0;width:42px;height:42px;font-size:24px;cursor:pointer}
.collectionSheet h2{font-size:clamp(21px,5vw,29px);margin:18px 0 8px;letter-spacing:.12em}
.collectionProgress{font-size:14px;font-weight:bold;margin:0 0 10px}
.collectionTrack{height:7px;background:#c9c3b8;margin-bottom:20px}.collectionTrack span{display:block;height:100%;background:#6e2525;transition:width .25s}
.collectionGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.collectionCard{position:relative;min-width:0;display:flex;flex-direction:column;gap:7px;border:1px solid #888076;padding:10px;background:#f8f6f0}
.collectionTag{font-size:12px;font-weight:bold}.collectionStatus{font-size:10px;color:#6c2222}
.collectionCard strong{font-size:12px;line-height:1.5;min-height:38px;overflow-wrap:anywhere}
.collectionCard p{font-size:10px;line-height:1.5;min-height:43px;margin:0;color:#56514b}
.collectionCard img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;border:1px solid #ddd}
.collectionUnknown{display:grid;place-items:center;aspect-ratio:4/5;background:#d6d1c8;color:#9d988f;font-size:50px}
.collectionNote{font-size:12px;line-height:1.7;color:#59534b;margin:18px 0}
.collectionSheet>.primary{width:100%;min-height:48px}
@media(max-width:440px){.collectionGrid{grid-template-columns:1fr}.collectionCard{display:grid;grid-template-columns:70px 1fr 72px;align-items:center;gap:4px 10px}.collectionTag{grid-column:1}.collectionStatus{grid-column:2}.collectionCard strong{grid-column:1/3;min-height:0}.collectionCard p{grid-column:1/3;min-height:0}.collectionCard img,.collectionUnknown{grid-column:3;grid-row:1/4;width:72px}.collectionUnknown{font-size:30px}}

/* END 01: hidden revisit entry via the center logo */
.secretLogo{display:block;margin:24px auto 2px;padding:6px;width:min(78%,350px);max-width:100%;background:transparent;border:0;box-shadow:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.secretLogo img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none}
.secretLogo:focus-visible{outline:2px solid #24523c;outline-offset:4px}
/* All 3 secret taps: physical button-like press, without moving surrounding UI. */
.secretLogo img{transform-origin:center center;transition:transform .09s ease-out,filter .09s ease-out}
.secretLogo:active img{transform:translateY(3px) scale(.972);filter:brightness(.82)}
.secretLogo.logo-tap img{animation:secretLogoTap .20s ease-out both}
@keyframes secretLogoTap{
  0%{transform:translateY(0) scale(1);filter:brightness(1)}
  25%{transform:translateY(3px) scale(.972);filter:brightness(.82)}
  60%{transform:translateY(3px) scale(.972);filter:brightness(.82)}
  100%{transform:translateY(0) scale(1);filter:brightness(1)}
}
@media(prefers-reduced-motion:reduce){.secretLogo img{transition:none}.secretLogo.logo-tap img{animation:none;transform:translateY(2px) scale(.985);filter:brightness(.9)}}
.secretLogo[hidden]{display:none!important}

/* END screen: prominent X reporting action */
.endSheet .actions #shareButton.shareButtonLarge{grid-column:1/-1;min-height:64px;padding:16px 14px;font-size:clamp(18px,4.5vw,22px);font-weight:700;letter-spacing:.04em;width:100%;touch-action:manipulation}

/* END 01：初診の会話進行に同期して相談室の照明だけが壊れていく。 */
.visual.end1-room-distortion::after{
  content:"";position:absolute;inset:0;z-index:20;pointer-events:none;
  background:#000;opacity:var(--end1-darkness,0);
  animation:end1-room-light-failure 4.2s steps(1,end) infinite;
}
@keyframes end1-room-light-failure{
  0%,9%,13%,34%,39%,66%,70%,100%{opacity:var(--end1-darkness,0)}
  10%,12%,35%,38%,67%,69%{opacity:calc(var(--end1-darkness,0) + var(--end1-flicker,0))}
}
@media(prefers-reduced-motion:reduce){.visual.end1-room-distortion::after{animation:none}}

/* v8.8.4: recommended, incremental UI improvements */
/* Legible direction hint; keep it outside the pointer capture surface. */
.control .dialCue{font-size:clamp(10px,2.4vw,12px);font-weight:700;letter-spacing:.02em;text-shadow:0 1px 3px #000}
.control .dialCueArrow{font-family:system-ui,sans-serif;font-size:1.5em;vertical-align:-.07em;line-height:0;color:#f4d899}
@media(max-width:390px){.control .dialCue{font-size:10px}}
/* Phase-specific light failures affect the room image only, never the dialogue or dial. */
.visual.end1-room-distortion[data-light-phase="0"]::after{animation:none}
.visual.end1-room-distortion[data-light-phase="1"]::after{animation:end1-light-mild 6.4s steps(1,end) infinite}
.visual.end1-room-distortion[data-light-phase="2"]::after{animation:end1-light-unstable 4.7s steps(1,end) infinite}
.visual.end1-room-distortion[data-light-phase="3"]::after{animation:end1-light-critical 5.8s steps(1,end) infinite}
@keyframes end1-light-mild{0%,79%,84%,100%{opacity:var(--end1-darkness)}80%,83%{opacity:calc(var(--end1-darkness) + var(--end1-flicker))}}
@keyframes end1-light-unstable{0%,24%,29%,55%,65%,100%{opacity:var(--end1-darkness)}25%,28%,56%,64%{opacity:calc(var(--end1-darkness) + var(--end1-flicker))}}
@keyframes end1-light-critical{0%,11%,23%,38%,51%,75%,88%,100%{opacity:var(--end1-darkness)}12%,22%,39%,50%,76%,87%{opacity:calc(var(--end1-darkness) + var(--end1-flicker) + .13)}}
@media(prefers-reduced-motion:reduce){.visual.end1-room-distortion::after{animation:none!important}}
/* The existing stage faces already progress from crying to forced smiles.
   Keep the original full-body image assets and timings unchanged. */
/* Give the three existing official records distinct document treatments. */
#end1Report{border-left:3px solid #668e6e;padding-left:12px;background:linear-gradient(90deg,#678e6a13,transparent 80%)}
#end2Report{border-left:3px solid #81a6bb;padding-left:12px;background:linear-gradient(90deg,#81a6bb18,transparent 80%)}
#end3Report{border-left:3px solid #8c4545;padding-left:12px;background:linear-gradient(90deg,#8c45451c,transparent 80%)}
#end1Report>span,#end2Report>span,#end3Report>span{font-weight:700;letter-spacing:.06em}

/* Accessibility: use a static expression when reduced-motion is requested. */
@media (prefers-reduced-motion: reduce) {
  .end3ExpressionLoop .end3-smile, .end3MiniPortrait .end3-mini-smile {animation:none!important;}
}
/* Very narrow phones: avoid a stranded one-character final dialogue line. */
@media (max-width:340px) {
  .dialog p {text-wrap:balance;}
}

/* v8.8.6: 2008年頃の業務用PCを模した会話ウィンドウ。会話処理・操作領域は変更しない。 */
.interaction{background:#6c716b;border-top:2px solid #92978d}
.dialog{padding:8px 10px 9px;background:linear-gradient(180deg,#b7b9b0,#888f85);border-right:1px solid #3e4840;justify-content:stretch;box-shadow:inset 1px 1px #e5e5d8,inset -1px -1px #515a51}
.retroTitle{display:flex;align-items:center;gap:7px;min-height:25px;padding:4px 9px;background:linear-gradient(90deg,#3b5d4d,#6c8272);border:1px solid #294335;color:#f4f3e8;font-size:clamp(9px,2.7vw,12px);font-weight:600;letter-spacing:.035em;white-space:nowrap;overflow:hidden}
.retroDot{width:7px;height:7px;flex:none;border:1px solid #c4d2b6;background:#9cba94;box-shadow:0 0 0 1px #365344}
.retroVersion{margin-left:auto;color:#d2decf;font:9px ui-monospace,monospace;flex:none}
.retroBody{position:relative;display:flex;flex:1;min-height:84px;flex-direction:column;justify-content:center;padding:8px 12px 19px;background:#e9e8df;color:#28342c;border:1px solid #59665b;border-top:0;box-shadow:inset 1px 1px #fff,inset -1px -1px #abb2a8}
.dialog .speaker{color:#4b6959;font-size:11px;letter-spacing:.045em;margin-bottom:4px;font-weight:700}
.dialog p{color:#202b25;font-size:clamp(15px,4.2vw,19px);line-height:1.55;letter-spacing:0;overflow-wrap:anywhere}
.dialog .next{right:19px;bottom:13px;color:#526a5c;font:10px ui-monospace,monospace;letter-spacing:.04em}
.dialog:focus-visible{outline:2px solid #f4d18b;outline-offset:-4px}
@media(min-width:760px){.dialog{padding:9px 12px 10px}.retroTitle{min-height:27px}.retroBody{padding:10px 19px 22px}.dialog .next{right:23px;bottom:16px}}
@media(max-height:600px){.dialog{padding:4px 6px}.retroTitle{min-height:20px;padding:2px 6px}.retroBody{min-height:0;padding:3px 9px 13px}.dialog .speaker{margin-bottom:2px}.dialog .next{right:13px;bottom:7px}}
@media(max-height:400px){.retroTitle{min-height:17px;font-size:9px}.retroBody{padding:2px 7px 11px}.dialog p{font-size:14px;line-height:1.3}}

/* v8.8.8: Intro dossier photograph stays visible through the five opening lines. */
.introIdPhoto[hidden]{display:none!important}
.introIdPhoto{align-self:center;display:flex;flex-direction:column;align-items:center;gap:7px;color:#d7d8cf;font-size:12px;letter-spacing:.12em;margin:-25px 0 -16px}
.introIdPhotoFrame{width:94px;height:112px;overflow:hidden;border:4px solid #e8e8df;background:#bdc6c3;box-shadow:0 3px 16px #0008}
.introIdPhotoFrame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 16%;transform:scale(1.7);transform-origin:center 17%}
@media(max-height:600px){.introIdPhoto{margin:-8px 0}.introIdPhotoFrame{width:70px;height:83px}.cinematicFrame:has(.introIdPhoto:not([hidden])){gap:10px}}

.introIdPhoto small{font-size:10px;letter-spacing:.05em;color:#aeb8ad}

/* v8.8.10: レトロPC会話ウィンドウの文字をスマホでも読みやすく。 */
.dialog p{font-size:clamp(19px,5.2vw,22px);line-height:1.65;letter-spacing:.012em}
.dialog .speaker{font-size:clamp(13px,3.5vw,15px);line-height:1.4}
.retroBody{min-height:100px;padding-bottom:23px}
.dialog .next{font-size:12px}
@media(min-width:760px){.dialog p{font-size:clamp(21px,1.9vw,24px)}.dialog .speaker{font-size:14px}}
@media(max-width:359px){.dialog p{font-size:18px;line-height:1.55}.dialog .speaker{font-size:12px}.retroBody{padding-left:9px;padding-right:9px}}
@media(max-height:600px){.retroBody{min-height:0}.dialog p{font-size:18px;line-height:1.45}.dialog .speaker{font-size:12px}}
@media(max-height:400px){.dialog p{font-size:17px;line-height:1.35}.retroBody{padding-bottom:13px}}

/* v8.8.12: 会話は枠なしの広い表示面に。ダイヤルの操作領域は維持。 */
.dialog{padding:0!important;background:#e9e8df!important;box-shadow:none!important;border:0!important;}
.retroTitle{border:0!important;border-radius:0;min-height:25px;}
.retroBody{border:0!important;box-shadow:none!important;padding:10px 15px 22px!important;min-height:105px;}
.dialog .speaker{font-size:clamp(13px,3.4vw,15px);}
.dialog p{font-size:clamp(19px,5.25vw,23px);line-height:1.6;}
.dialog .next{right:14px;bottom:8px;}
@media(max-width:359px){.retroBody{padding:8px 9px 18px!important}.dialog p{font-size:18px}}
@media(max-height:400px){.retroBody{min-height:0;padding:3px 9px 12px!important}.dialog p{font-size:17px;line-height:1.35}}

/* v8.8.13: Paperwork appears gently instead of being dismissed by the
   same burst of taps that advanced the preceding dialogue. */
.posterOverlay .posterArtwork,
.paperOverlay .pamphletBook {
  opacity:0;
  transition:opacity .9s ease-in-out;
}
.posterOverlay.illustration-visible .posterArtwork,
.paperOverlay.illustration-visible .pamphletBook {opacity:1;}
.paperOverlay.illustration-visible .pamphletBook.is-turning {
  opacity:0;
  transition-duration:.18s;
}
.posterOverlay:not(.illustration-ready) .posterNext,
.paperOverlay:not(.illustration-ready) #pamphletNext {
  opacity:0;
  pointer-events:none;
}
.posterOverlay .posterNext,
.paperOverlay #pamphletNext {
  transition:opacity .3s ease;
}
.paperOverlay:not(.illustration-ready) .pamphletBook {
  pointer-events:none;
}
.paperOverlay.illustration-ready .pamphletBook{pointer-events:none;}
@media(prefers-reduced-motion:reduce){
  .posterOverlay .posterArtwork,.paperOverlay .pamphletBook {transition-duration:.01ms;}
}

/* v8.8.13: Existing END photos use the same fade + anti-skip gate. */
.endPhotoOverlay .endPhotoImage {opacity:0;transition:opacity .9s ease-in-out;}
.endPhotoOverlay.illustration-visible .endPhotoImage {opacity:1;}
.endPhotoOverlay:not(.illustration-ready) .endPhotoNext {opacity:0;pointer-events:none;}
.endPhotoOverlay .endPhotoNext {transition:opacity .3s ease;}
@media(prefers-reduced-motion:reduce){.endPhotoOverlay .endPhotoImage{transition-duration:.01ms;}}

/* v8.8.14: pink happiness meter and dial progress */

/* Destructive collection reset lives below the non-destructive Back action. */
.collectionResetButton{display:block;width:100%;min-height:44px;margin-top:12px;padding:10px 14px;border:1px solid #8c8179;border-radius:2px;background:transparent;color:#702a2a;font:inherit;font-size:12px;font-weight:700;cursor:pointer;touch-action:manipulation}
.collectionResetButton:focus-visible{outline:2px solid #702a2a;outline-offset:3px}

/* END 02 (internal END3) cinematic expression failure and real portrait. */
.end3RealPortrait{z-index:12;opacity:0;visibility:hidden;transition:none!important;pointer-events:none}
.end3RealPortrait.shown{opacity:1;visibility:visible}
.end3RealPortrait[hidden]{display:none!important}
.end3RealNoise{position:absolute;inset:0;z-index:19;display:grid;place-items:center;background:rgba(8,8,10,.68);backdrop-filter:blur(1.2px)}
.end3RealNoise[hidden]{display:none!important}
.end3RealNoiseStatic{position:absolute;inset:0;opacity:.9;background:
  radial-gradient(circle at 20% 30%,rgba(255,255,255,.24) 0 1px,transparent 1.4px),
  radial-gradient(circle at 70% 60%,rgba(255,255,255,.16) 0 1px,transparent 1.2px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 2px,rgba(0,0,0,.08) 2px 4px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.06) 1px 3px);
  background-size:23px 19px,31px 29px,100% 4px,3px 100%;
  animation:end3NoiseShift .12s steps(2,end) infinite;mix-blend-mode:screen;filter:contrast(1.18) brightness(1.08)}
@keyframes end3NoiseShift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-1.5%,1%,0)}100%{transform:translate3d(1%,-1%,0)}}
.end3ControlError{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:18;white-space:nowrap;max-width:95%;font-size:clamp(10px,2.5vw,14px);font-weight:700;letter-spacing:.08em;color:#f4e6e8;background:#6d1826;border:1px solid #e68a9a;padding:7px 10px;pointer-events:none}
.end3ControlError[hidden]{display:none!important}
.end3Corruption{position:absolute;inset:0;z-index:22;pointer-events:none;overflow:hidden;color:#f5b0ba;font-family:monospace;background:linear-gradient(transparent 0 70%,#2e0b14b0);text-shadow:2px 0 #e00,-2px 0 #1499ac}
.end3Corruption[hidden]{display:none!important}
.end3CorruptionHead{position:absolute;top:7%;left:3%;right:3%;font-size:clamp(13px,3vw,22px);background:#170e14dc;padding:8px}
.end3CorruptionText{position:absolute;bottom:19%;left:3%;right:3%;font-size:clamp(16px,4vw,30px);overflow-wrap:anywhere;background:#170e14d8;padding:8px}
.end3CorruptionNoise{position:absolute;top:43%;left:4%;right:4%;font-size:clamp(20px,5vw,42px);font-weight:900;opacity:.75}
.end3Corruption[data-phase="2"]{filter:contrast(1.3)}
.end3Corruption[data-phase="3"]{background:#24080ce8;color:#fff}
@media(prefers-reduced-motion:reduce){.end3RealPortrait,.end3Corruption{animation:none!important}}

/* v8.8.22: all-end bonus photo */
.bonusOverlay{z-index:120;background:rgba(20,19,17,.93);overflow-y:auto;padding:clamp(12px,3vw,28px)}
.bonusSheet{width:min(100%,650px);margin:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 24px}
.bonusSheet img{display:block;width:100%;height:auto;object-fit:contain;box-shadow:0 10px 40px #0009}
.bonusSheet button{min-height:48px;width:min(100%,380px);touch-action:manipulation}
.bonusOverlay[hidden]{display:none!important}

/* Bonus closing button appears only after applause ends. */
.bonusSheet button[hidden]{display:none!important}

/* v8.8.29: Preserve the paper styling while giving archive actions full touch targets. */
.endSheet .actions #collectionOpen {grid-column:1/-1;min-height:48px}
#bonusReplay {display:block;width:100%;min-height:48px;margin:14px 0}

/* 8.8.35: share failure / PC PNG manual upload, no layout when hidden. */
.shareHint{grid-column:1/-1;margin:0;padding:7px 2px;color:#26372c;
  font-size:12px;line-height:1.65;overflow-wrap:anywhere;}
.shareHint[hidden]{display:none!important;}

/* v8.8.40 / ABYSS 168 — X in-app browser / mobile dialogue layout stability.
   Previous auto-sized grid row followed the number of dialogue lines,
   shifting the room portrait up/down. Lock the interaction row to a
   viewport-independent height and keep any long dialogue inside it. */
@supports (height: 100svh) {
  .app { height:100svh; } /* avoid Safari/X dynamic toolbar 100dvh jumps */
}
.gameContent {
  grid-template-rows:minmax(0,1fr) auto;
}
.interaction {
  flex:0 0 auto;
  height:176px;
  min-height:0;
}
.dialog {
  height:100%;
  min-height:0;
  overflow:hidden;
}
.retroTitle {flex:0 0 auto;}
.retroBody {
  flex:1 1 0;
  min-height:0 !important;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  justify-content:safe center;
}
.retroBody::-webkit-scrollbar {display:none;}
/* Give narrow portrait displays more fixed reading space. */
@media (max-width:759px) and (orientation:portrait) {
  .interaction {height:184px;}
  .header {
    height:calc(47px + env(safe-area-inset-top));
    min-height:0;
    padding-top:calc(8px + env(safe-area-inset-top));
    padding-bottom:8px;
  }
  .ring {width:clamp(83px,26vw,102px);}
  .control {padding:9px 9px 24px;}
  .dialCue {bottom:8px;font-size:10px;}
}
/* Landscape needs to preserve enough height for the room image. */
@media (orientation:landscape) and (max-height:500px) {
  .interaction {height:clamp(106px,31svh,138px);}
}