:root{--ink:#f8f1dc;--deep:#21142f;--cream:#fff2d4;--orange:#ed9551;--pink:#dcb2d8;--line:rgba(251,224,180,.26);--mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;--maru:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;--safeTop:env(safe-area-inset-top,0px);--safeBottom:env(safe-area-inset-bottom,0px);--safeLeft:env(safe-area-inset-left,0px);--safeRight:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;height:100dvh;overflow:hidden;margin:0;background:var(--deep);font-family:var(--mincho);color:var(--ink);overscroll-behavior:none}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:3px solid #ffca8a;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.hidden{display:none!important}#app{isolation:isolate;width:100%;height:100vh;height:100dvh;position:relative;overflow:hidden;display:flex;flex-direction:column;background:#21152f;padding-top:var(--safeTop);padding-bottom:var(--safeBottom)}#background{position:absolute;inset:0;z-index:-3;background-image:url('assets/images/background-placeholder.svg');background-position:center;background-repeat:no-repeat;background-size:cover;filter:saturate(1);transition:filter .25s ease}#vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 62% 60% at 50% 42%,transparent 40%,rgba(8,2,18,.55) 100%);opacity:.5;transition:opacity .15s}#noise{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background-image:repeating-linear-gradient(0deg,transparent 0,rgba(255,255,255,.09) 1px,transparent 2px,transparent 5px);background-size:100% 6px;mix-blend-mode:screen}#hud{flex:none;z-index:5;background:linear-gradient(#2a1839ed,#2a1839ba);border-bottom:1px solid var(--line);padding:8px 16px 9px;box-shadow:0 8px 35px #150d23aa}.hudTop{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;gap:10px}.stat{display:flex;flex-direction:column;min-width:84px;gap:1px}.stat.right{text-align:right}.statLabel{font-family:var(--maru);font-size:clamp(10px,2.5vw,12px);font-weight:800;letter-spacing:.04em;color:#f6d6a9}.statNum{font-family:var(--mincho);font-size:clamp(26px,7.2vw,39px);line-height:1.08;font-weight:900;letter-spacing:.03em;text-shadow:0 2px 0 #26152a}.hudCenter{font-family:var(--maru);font-size:12px;font-weight:900;text-align:center;color:#ffe2a5;letter-spacing:.02em}.angerRow{display:flex;align-items:center;gap:8px;max-width:1100px;margin:8px auto 0;font-size:clamp(11px,2.7vw,14px);font-weight:900;white-space:nowrap}.angerRow .bar{height:14px;border-radius:999px;background:#100d1c;overflow:hidden;flex:1;border:1px solid #83647e}.bar>div{height:100%;width:0;background:linear-gradient(90deg,#f2b065,#ed654e,#bb273f);transition:width .08s linear}.angerRow strong{min-width:41px;text-align:right;font-size:15px}#stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}#stage:before{content:"";position:absolute;width:min(75vw,520px);height:min(75vw,520px);border-radius:50%;background:#d3a4ea38;filter:blur(65px);top:18%;pointer-events:none}.sceneDeco{position:absolute;font-size:45px;color:#b793c2;opacity:.4;pointer-events:none}.sceneDeco.left{left:5%;top:25%}.sceneDeco.right{right:5%;top:40%}.ghost-unit{position:absolute;left:50%;top:46%;width:290px;height:325px;transform:translate(-50%,-50%);will-change:transform;filter:drop-shadow(0 11px 10px #0a081e88) drop-shadow(0 0 28px #fae4fa55);touch-action:none;user-select:none}.ghost-unit img{width:100%;height:100%;display:block;user-select:none;pointer-events:none}.ghost-unit canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;user-select:none}.captionBox{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);z-index:4;width:min(95%,660px);height:66px;min-height:66px;max-height:66px;padding:6px 14px 8px;background:rgba(24,15,35,.93);border:2px solid #caa5a7;border-radius:10px;box-shadow:0 5px 17px #0e081899;pointer-events:none;display:flex;flex-direction:column;justify-content:center;gap:1px}.captionBox .speaker{font-size:12px;font-weight:900;color:#e9b485;line-height:1.2}.captionBox #captionText{font-size:clamp(15px,4.1vw,20px);line-height:1.22;font-weight:900;white-space:pre-wrap;overflow:hidden;text-overflow:clip}#controls{position:relative;z-index:5;flex:none;background:linear-gradient(#291a3deb,#20122df5);border-top:1px solid var(--line);padding:7px 9px 9px}.swatches{display:flex;gap:13px;justify-content:center;margin-bottom:6px}.swatch{min-width:72px;min-height:56px;border:2px solid #745c76;border-radius:13px;background:#2b2039;color:#faf1dc;display:flex;gap:6px;align-items:center;justify-content:center;padding:5px 9px;font-family:var(--mincho);font-weight:900;font-size:16px}.swatch.selected{border:3px solid #ffd7a7;background:#52334a;box-shadow:0 0 0 2px #8e5f47}.ink{display:block;width:24px;height:24px;border-radius:50%;border:2px solid #efdfd4;box-shadow:0 2px 4px #0008}.ink.red{background:#d8394a}.ink.blue{background:#396dde}.ink.black{background:#111118}.controlLinks{display:flex;justify-content:center;gap:7px}.miniButton{background:#211528e8;color:#ffe7bd;border:1px solid #766079;padding:6px 8px;border-radius:8px;font-size:clamp(11px,2.85vw,13px);font-weight:900;white-space:nowrap;min-height:35px}.dialogueOverlay{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;justify-content:end;align-items:center;padding:calc(14px + var(--safeTop)) 13px calc(28px + var(--safeBottom));background:#0a07129e;cursor:pointer;touch-action:manipulation}.introTop{position:absolute;top:22%;max-width:90%;border:1px solid #d8a76a;border-radius:16px;background:#3a264ab8;padding:12px 17px;font-family:var(--mincho);font-size:clamp(16px,4.5vw,25px);font-weight:900;text-align:center}.dialoguePane{width:min(100%,720px);height:168px;min-height:168px;max-height:168px;border:3px solid #f2d0a2;background:rgba(20,12,30,.97);box-shadow:0 10px 35px #0009;border-radius:11px;padding:13px 16px 10px;display:flex;flex-direction:column;justify-content:space-between;gap:5px;overflow:hidden}.speaker{color:#ffca8d;font-size:clamp(12px,3vw,15px);font-weight:900;line-height:1.2;flex:none}.dialogueText{font-size:clamp(18px,4.7vw,24px);font-weight:900;line-height:1.47;white-space:pre-line;overflow:hidden;flex:1}.pageRow{font-family:var(--maru);font-weight:600;font-size:11px;letter-spacing:.01em;color:#bcafc8;display:flex;justify-content:space-between;gap:6px;flex:none;white-space:nowrap}.tappable{color:#f6d7a5}#endingOverlay{background:rgba(13,8,22,.93)}.endingArt{width:min(74vw,340px);height:min(49vh,385px);margin:auto auto 12px;display:flex;justify-content:center;align-items:center}.endingArt canvas{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:0 8px 24px #05020eb0}.fullOverlay{position:absolute;z-index:24;inset:0;background:rgba(13,8,22,.97);padding:calc(10px + var(--safeTop)) 10px calc(10px + var(--safeBottom));display:flex;justify-content:center;align-items:center}.topOverlay{z-index:35}.dialogCard{border:2px solid #cba37c;background:#281b37;padding:20px;border-radius:16px;max-width:560px;width:96%;text-align:center}.dialogCard.compact h2{font-size:27px}.dialogCard p{font-size:18px;font-weight:900}.primary{background:#f7c786!important;color:#281732!important;border:2px solid #fff1d3!important;font-weight:900!important}.fullOverlay button:not(.portraitTrigger){border:2px solid #8d7297;background:#33223e;color:#fff3dc;border-radius:10px;padding:10px 13px;min-height:43px;font-family:var(--mincho);font-weight:900;font-size:clamp(14px,3.4vw,18px)}.resultInner{height:100%;max-width:740px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:7px}.resultHead{text-align:center;flex:none}.resultHead small{color:#e5ad7b;letter-spacing:.15em;font-size:12px;font-weight:900}.resultHead h1{margin:2px 0 0;font-size:clamp(23px,6vw,34px);line-height:1.24;font-weight:900}.resultHead p{font-size:clamp(11px,2.9vw,14px);margin:3px 0}.portraitTrigger{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:center;background:none;border:0;padding:0;max-width:100%;width:100%;cursor:zoom-in}.portraitTrigger canvas{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;min-height:0;border:3px solid #d9b49e;border-radius:10px;box-shadow:0 8px 18px #0007}.zoomLabel{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:#190f23b9;border-radius:30px;padding:5px 14px;font-size:12px;font-weight:900;white-space:nowrap}.resultButtons{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}.resultButtons button{padding:9px 3px!important;font-size:clamp(12px,3.2vw,17px)!important;white-space:nowrap}.tempNote{flex:none;color:#c2b4c6;text-align:center;font-size:10px}.panel{height:100%;width:min(100%,880px);min-height:0;display:flex;flex-direction:column;gap:9px}.panelHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}.panelHeader small{color:#d0af9a;font-weight:900;letter-spacing:.15em}.panelHeader h2{font-size:clamp(20px,5.6vw,31px);margin:2px 0;font-weight:900}.panelHeader h2 span{font-size:15px;color:#d1ab9b}.fullOverlay button.closeButton{background:#25192c;border:1px solid #876b8a;font-size:14px;padding:7px 9px;white-space:nowrap}.collectionGrid{flex:1;overflow-y:auto;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px;padding:2px 3px 14px;overscroll-behavior:contain}.collectionCard{background:#281b39;border:1px solid #76567a;border-radius:12px;display:flex;align-items:center;gap:8px;text-align:left;padding:8px;min-width:0;color:#fff0e0;min-height:98px}.collectionCard.locked{background:#17111f;border-color:#4c3c55;color:#9e90a8}.collectionCard canvas{width:64px;height:75px;object-fit:cover;flex:none;border:1px solid #be97a5;border-radius:5px}.lockedArt{width:64px;height:75px;display:grid;place-items:center;flex:none;border:1px dashed #696078;border-radius:5px;color:#b19faf;font-size:27px;font-weight:900}.collectionInfo{min-width:0;display:flex;flex-direction:column;gap:4px}.collectionInfo small{color:#c79e78;font-family:var(--maru);font-size:11px}.collectionInfo b{font-size:clamp(12px,3.1vw,16px);line-height:1.25;overflow-wrap:anywhere}.panelFoot{flex:none;text-align:center;font-size:11px;color:#c8b4cb;font-weight:800}.stillPanel,.sharePanel{width:min(100%,680px);height:100%;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:8px}.stillPanel canvas,.sharePanel canvas{flex:1;min-height:0;max-width:100%;width:100%;height:100%;object-fit:contain;align-self:center;border:2px solid #896d88;border-radius:8px;background:#15121b}.stillActions,.shareActions{display:flex;gap:7px;flex:none}.stillActions button,.shareActions button{flex:1;min-width:0;padding:8px 3px!important;font-size:clamp(12px,3vw,16px)!important}.stillPanel small,.sharePanel small{font-size:10px;text-align:center;color:#bfb0c7;flex:none}#debugDock{position:absolute;right:7px;top:calc(128px + var(--safeTop));z-index:15}#debugOpen{background:#ffc987;color:#2a1732;border-radius:30px;border:2px solid #fff3d2;padding:6px 9px;font-weight:900;font-size:11px}.debugPanel{max-width:950px}.debugTabs{display:flex;gap:5px;overflow-x:auto;flex:none}.debugTabs button{min-width:max-content;font-size:12px!important;padding:7px 10px!important;min-height:32px!important}.debugTabs button.active{background:#f4c686!important;color:#27152d!important}.debugContent{overflow-y:auto;flex:1;min-height:0;padding:3px 1px 12px}.debugItem{border:1px solid #6a5272;background:#241832;border-radius:9px;padding:9px;margin-bottom:7px;display:flex;gap:8px;justify-content:space-between;align-items:center}.debugItem div{min-width:0}.debugItem b{display:block;font-size:14px}.debugItem small{display:block;font-size:11px;color:#c8b6cb;white-space:normal}.debugItem button{flex:none;font-size:12px!important;min-height:35px!important;padding:5px 8px!important}.debugCounters{font:700 13px/1.7 var(--maru);white-space:pre-wrap;border:1px solid #765b79;border-radius:8px;padding:9px;background:#17101e;margin-bottom:10px}.toast{position:absolute;z-index:70;left:50%;bottom:calc(14px + var(--safeBottom));transform:translateX(-50%);max-width:94%;text-align:center;background:#fff1d1;color:#2a1831;padding:10px 14px;font-size:14px;font-weight:900;border-radius:12px;box-shadow:0 5px 25px #0007}#app.scary #background{filter:saturate(.65) brightness(.7)}#app.scary .captionBox{border-color:#c95e70}#app.scary .statNum{text-shadow:0 1px 10px #df51678a}
@media(min-width:700px){.hudTop,.angerRow{max-width:920px}#controls{padding:9px 15px 12px}.swatches{gap:18px}.swatch{min-width:105px}#stage .captionBox{bottom:18px}.collectionGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-height:670px){#hud{padding-top:4px;padding-bottom:4px}.statNum{font-size:25px}.angerRow{margin-top:4px}#controls{padding-top:4px;padding-bottom:4px}.swatch{min-height:45px}.ink{width:20px;height:20px}.captionBox{height:58px;min-height:58px;max-height:58px}.dialoguePane{height:148px;min-height:148px;max-height:148px;padding:8px 12px}.dialogueText{font-size:clamp(16px,4vw,22px)}.introTop{top:11%}.resultHead p{display:none}}@media(max-height:480px){.hudCenter,.desktopLabel{display:none}.captionBox{height:47px;min-height:47px;max-height:47px}.captionBox #captionText{font-size:15px}.captionBox .speaker{font-size:10px}.swatch{min-height:38px;min-width:65px}.controlLinks .miniButton{min-height:28px;padding:2px 5px}.dialoguePane{height:125px;min-height:125px;max-height:125px}.dialogueText{font-size:15px}.endingArt{display:none}.resultHead h1{font-size:19px}.resultButtons button{min-height:35px!important}}

@media(max-width:600px){.desktopLabel{display:none}.hudCenter{font-size:16px}}
@media(max-height:550px) and (orientation:landscape){.ghost-unit{left:32%;top:48%}.captionBox{left:76%;top:47%;bottom:auto;transform:translate(-50%,-50%);width:42%;height:90px;min-height:90px;max-height:90px}.captionBox #captionText{font-size:clamp(13px,2vw,17px)}#controls{padding-top:2px;padding-bottom:2px}.swatches{margin-bottom:2px}.swatch{min-height:35px}.controlLinks .miniButton{min-height:25px;padding:2px 7px;font-size:11px}}
.portraitTrigger canvas{height:auto;max-height:100%;width:auto;max-width:100%;aspect-ratio:6/7;object-fit:contain}

.lockedArt{font-size:20px;white-space:nowrap;letter-spacing:-.04em}

/* 手動完成ボタン：ペンと同じ一列で表示し、描画面を狭めない */
#controls .swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(78px,1.24fr);gap:6px;width:min(100%,460px);margin:0 auto 6px}
#controls .swatch{min-width:0;width:100%;min-height:55px;padding:5px 4px;gap:4px;font-size:clamp(13px,3.7vw,16px)}
#controls .ink{flex:none;width:clamp(18px,5.3vw,24px);height:clamp(18px,5.3vw,24px)}
#controls .finishButton{min-width:0;min-height:55px;width:100%;border:3px solid #fff1ce;border-radius:13px;background:#ffcc87;color:#28152c;box-shadow:0 3px 0 #6f415a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px 1px;font-family:var(--mincho);font-weight:900}
#controls .finishButton .finishTitle{font-size:clamp(19px,5vw,24px);line-height:1.13;white-space:nowrap}
#controls .finishButton small{font-family:var(--maru);font-size:clamp(9px,2.5vw,12px);font-weight:900;white-space:nowrap;line-height:1.15}
#controls .finishButton:disabled{opacity:1;background:#3a2c43;color:#d3bfd3;border-color:#9a7e9c;box-shadow:none;cursor:not-allowed}
#controls .finishButton:not(:disabled){animation:finishReadyPulse 1.6s ease-in-out infinite}
@keyframes finishReadyPulse{50%{box-shadow:0 0 0 3px #ffdc9c7a,0 0 18px #ffc77883}}
@media(max-height:670px){#controls .finishButton,#controls .swatch{min-height:44px}#controls .finishButton .finishTitle{font-size:19px}}
@media(max-height:480px){#controls .finishButton,#controls .swatch{min-height:37px}#controls .finishButton .finishTitle{font-size:16px}#controls .finishButton small{font-size:9px}}
@media(prefers-reduced-motion:reduce){#controls .finishButton:not(:disabled){animation:none}}

/* 拡大スチル・共有画面の背後の文字が薄く透けないようにする */
.topOverlay{background:#0d0816}
/* 短い端末でも長い字幕の文字下端・2行目が見切れない固定高さ */
.captionBox{height:84px;min-height:84px;max-height:84px}
@media(max-height:670px){.captionBox{height:76px;min-height:76px;max-height:76px}}
@media(max-height:550px) and (orientation:landscape){.captionBox{height:90px;min-height:90px;max-height:90px}}

/* 一時通知は操作ボタンを覆ってもタップを奪わない */
.toast{pointer-events:none}

/* END演出：字幕枠の固定高さを変えず、タップで進行する恐怖の明暗 */
#endingOverlay{overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#292037 0%,#08040c 77%)}
#endingOverlay::before{content:"";position:absolute;inset:0;background:#000;pointer-events:none;opacity:0;z-index:0}
#endingOverlay .endingArt{position:relative;z-index:1;transform-origin:50% 48%}
#endingOverlay .dialoguePane{position:relative;z-index:2}
#endingOverlay.endHeartbeat .endingArt{animation:ghostEndPulse .95s ease-out both}
#endingOverlay.mirrorReveal .endingArt canvas{animation:ghostEndMirror .95s ease-out both}
#endingOverlay.endShudder .endingArt{animation:ghostEndJolt .52s ease-out both}
#endingOverlay.endShudder::before{animation:ghostEndFlash .75s ease-out both}
@keyframes ghostEndPulse{0%{filter:brightness(.45);transform:scale(.92)}28%{filter:brightness(.9)}100%{filter:brightness(1);transform:scale(1.025)}}
@keyframes ghostEndMirror{0%{filter:brightness(.04) grayscale(1) blur(5px)}45%{filter:brightness(.28) grayscale(.8) blur(1px)}100%{filter:brightness(.9) grayscale(.1) blur(0)}}
@keyframes ghostEndJolt{0%{transform:translateX(0) scale(1)}22%{transform:translateX(-11px) scale(1.09)}43%{transform:translateX(10px) scale(1.14)}66%{transform:translateX(-5px) scale(1.08)}100%{transform:translateX(0) scale(1.04)}}
@keyframes ghostEndFlash{0%{opacity:0}20%{opacity:.88}40%{opacity:.06}57%{opacity:.55}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#endingOverlay .endingArt,#endingOverlay .endingArt canvas,#endingOverlay::before{animation:none!important;filter:none!important}}

/* おばけの台詞だけ、プレイ中もEND中も赤い字幕に統一。 */
#activeCaption[data-ghost="yes"] #captionName,#activeCaption[data-ghost="yes"] #captionText,
#endingOverlay[data-ghost="yes"] #endingSpeaker,#endingOverlay[data-ghost="yes"] #endingText,
#introOverlay[data-ghost="yes"] #introSpeaker,#introOverlay[data-ghost="yes"] #introText {color:#ff667a;text-shadow:0 1px 10px rgba(140,0,20,.45)}
/* 赤フラッシュは恐怖演出の瞬間のみ。字幕枠は暗いまま読みやすく保持。 */
#endingOverlay[data-effect="redflash"]{background:rgba(104,0,16,.95)}
#endingOverlay[data-effect="mirrorGlitch"],#endingOverlay[data-effect="mirrorBlank"]{background:#0b0813}
#endingOverlay[data-effect="collectionRed"]{background:#2d000d}
@media(prefers-reduced-motion:reduce){#endingOverlay[data-effect="redflash"]{background:#240811}}

/* END演出は小さな横画面でも隠さず、映像とセリフを左右へ配置する。 */
@media(max-height:480px) and (orientation:landscape){
 #endingOverlay{flex-direction:row;justify-content:center;align-items:center;gap:10px;padding:8px calc(12px + var(--safeRight)) 8px calc(12px + var(--safeLeft))}
 #endingOverlay .endingArt{display:flex;width:min(46vw,320px);height:min(82vh,310px);min-width:0;flex:none;margin:0}
 #endingOverlay .dialoguePane{width:min(49vw,460px);height:142px;min-height:142px;max-height:142px;padding:9px 10px;margin:0}
}
@media(max-height:480px) and (orientation:portrait){
 #endingOverlay .endingArt{display:flex;width:min(65vw,240px);height:min(32vh,160px);margin:auto auto 6px}
}

/* 各ENDで別の派手な恐怖背景。字幕の可読性と固定高さは維持する。 */
#endingOverlay[data-end="1"]{background:radial-gradient(ellipse at 50% 35%,#4c1253 0%,#05030d 88%)}
#endingOverlay[data-end="2"]{background:radial-gradient(ellipse at 50% 39%,#83051b 0%,#090108 85%)}
#endingOverlay[data-end="3"]{background:radial-gradient(ellipse at 50% 35%,#53515a 0%,#070509 91%)}
#endingOverlay[data-end="4"]{background:radial-gradient(ellipse at 50% 39%,#151c47 0%,#08040b 90%)}
#endingOverlay[data-end="5"]{background:radial-gradient(ellipse at 50% 30%,#600019 0%,#020204 91%)}
#endingOverlay[data-effect="redflash"]{background:#700017}
#endingOverlay[data-effect="mirrorGlitch"],#endingOverlay[data-effect="mirrorBlank"]{background:#0a090e}
#endingOverlay[data-effect="collectionRed"],#endingOverlay[data-effect="collectionFinal"]{background:#3d000e}
#endingOverlay .endingArt{transition:width .15s ease,height .15s ease}
#endingOverlay[data-effect="zoom"] .endingArt,
#endingOverlay[data-effect="redflash"] .endingArt,
#endingOverlay[data-effect="mirrorShock"] .endingArt{width:min(94vw,520px);height:min(55vh,510px)}
#endingOverlay::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.23;background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(255,255,255,.09) 6px,transparent 7px 10px)}
#endingOverlay[data-effect="ghostPull"]::after{opacity:.04}
#endingOverlay[data-effect="redflash"]::after,#endingOverlay[data-effect="collectionNoise"]::after{opacity:.48}
@media (max-height:480px) and (orientation:landscape){
 #endingOverlay[data-effect="zoom"] .endingArt,#endingOverlay[data-effect="redflash"] .endingArt,#endingOverlay[data-effect="mirrorShock"] .endingArt{width:min(46vw,320px);height:min(82vh,310px)}
}
@media (prefers-reduced-motion:reduce){#endingOverlay::after{opacity:0!important}#endingOverlay[data-effect="redflash"]{background:#350b17}}

/* v12: 描いている間の巨大ブラー再描画負荷を抑える（見た目は同系色の柔らかい光） */
#stage:before{filter:none;background:radial-gradient(circle at 50% 50%,rgba(211,164,234,.20) 0%,rgba(211,164,234,.10) 38%,transparent 76%)}

/* v13：30秒・大きな字幕・共有画面を結果ページ内に固定 */
#endingOverlay .dialoguePane{height:212px;min-height:212px;max-height:212px;padding:16px 18px 12px}
#endingOverlay .speaker{font-size:clamp(16px,4vw,21px)}
#endingOverlay .dialogueText{font-size:clamp(23px,5.8vw,34px);line-height:1.35;overflow-wrap:anywhere;line-break:strict}
#endingOverlay .pageRow{font-size:clamp(12px,2.8vw,14px)}
#introOverlay .dialogueText{font-size:clamp(21px,5.3vw,29px)}
#activeCaption #captionText{font-size:clamp(18px,4.9vw,24px)}
#activeCaption .speaker{font-size:15px}
#resultView{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;align-items:flex-start;justify-content:flex-start;-webkit-overflow-scrolling:touch}
#resultView .resultInner{height:auto;min-height:100%;max-width:660px;justify-content:flex-start;gap:11px;padding-bottom:18px;margin:0 auto}
#resultView .resultHead h1{font-size:clamp(29px,7vw,39px)}
#resultView .resultHead p{font-size:clamp(14px,3.6vw,17px)!important;display:block!important}
#resultView .resultXShareButton{order:0;display:block;width:100%;min-height:70px!important;background:#050507!important;border:3px solid #fff!important;color:#fff!important;border-radius:15px!important;font-family:var(--mincho);font-size:clamp(21px,5.8vw,30px)!important;font-weight:900;box-shadow:0 0 19px #fff4;letter-spacing:.015em}
#resultView .resultInlineShare{width:min(82%,360px);margin:0 auto;flex:none}
#resultView #resultShareCanvas{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;border:3px solid #f7ca81;border-radius:10px;box-shadow:0 7px 26px #0009}
#resultView .portraitTrigger{flex:none;height:auto;max-width:190px;width:40%;margin:1px auto;min-height:0}
#resultView .portraitTrigger canvas{width:100%;height:auto;max-height:none;border-width:2px}
#resultView .zoomLabel{font-size:10px;bottom:4px;padding:3px 5px}
#resultView .resultButtons{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#resultView .resultButtons button{font-size:clamp(12px,3.1vw,15px)!important;min-height:45px!important}
#resultView .tempNote{margin:6px auto 0}
#shareView #xShareButton{background:#050507!important;color:#fff!important;border:3px solid #fff!important;font-size:clamp(20px,5.2vw,27px)!important;min-height:65px!important;width:100%;grid-column:1/-1}
@media(max-height:700px){
 #endingOverlay .dialoguePane{height:188px;min-height:188px;max-height:188px;padding:12px 14px 10px}
 #endingOverlay .dialogueText{font-size:clamp(21px,4.6vw,28px)}
}
@media(max-height:480px) and (orientation:landscape){
 #endingOverlay .dialoguePane{height:160px;min-height:160px;max-height:160px}
 #endingOverlay .dialogueText{font-size:clamp(19px,2.6vw,25px)}
 #endingOverlay .speaker{font-size:15px}
}

/* v15: セリフ窓を固定したまま、あふれる文章は次の字幕ページに送る。 */
#endingOverlay .dialoguePane{height:212px;min-height:212px;max-height:212px;overflow:hidden;flex:none;justify-content:space-between}
#endingOverlay .dialogueText{overflow:hidden;min-height:0;flex:1 1 auto;white-space:pre-wrap;overflow-wrap:anywhere}
#introOverlay .dialogueText{overflow:hidden;min-height:0}
#activeCaption{overflow:hidden}
#activeCaption #captionText{overflow:hidden;min-height:0}
@media(max-height:700px){#endingOverlay .dialoguePane{height:188px;min-height:188px;max-height:188px}}
@media(max-height:480px) and (orientation:landscape){#endingOverlay .dialoguePane{height:160px;min-height:160px;max-height:160px}}
/* 共有カードのすぐ下に、一番大きく目立つXボタン。 */
#resultView .resultInlineShare{order:0}
#resultView .resultXShareButton{
 order:0;width:100%;min-height:82px!important;
 border:4px solid #fff4db!important;
 border-radius:16px!important;
 background:linear-gradient(125deg,#030304 5%,#161117 88%)!important;
 color:#fff!important;font-size:clamp(24px,6.25vw,34px)!important;
 box-shadow:0 0 0 3px #d7a66b,0 7px 26px rgba(255,225,162,.42)!important;
 margin:5px 0 6px;font-weight:900;white-space:normal;
}
#shareView .shareActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#shareView #xShareButton{grid-column:1/-1;grid-row:1;min-height:75px!important}
#resultView .resultInlineShare{margin-bottom:0}

/* END結果のボタン配置と小画面でのコントロール折り返しを維持 */
.controlLinks{flex-wrap:wrap;gap:4px 7px}
#resultView .resultButtons{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}

/* v20: Xで結果を報告するボタンは最も目立つ赤。共有カード直下の位置は維持。 */
#resultView .resultXShareButton,#shareView #xShareButton{
 background:#d81738!important;color:#fff!important;
 border:4px solid #ffcfda!important;
 box-shadow:0 0 0 2px #6e0921,0 8px 26px rgba(233,18,64,.54)!important;
 font-weight:900!important;
}
#resultView .resultXShareButton:active,#shareView #xShareButton:active{background:#fa294e!important}

/* 狭い画面でも「ページ番号」と「画面のどこでもタップ」を欠けさせない。
   固定字幕ウィンドウの高さ・文字サイズ・本文は変更しない。 */
#introOverlay .pageRow,#endingOverlay .pageRow{flex-wrap:wrap;white-space:normal;row-gap:1px}

/* HUD: 完成度表示なし。残り時間と怒りだけを見せ、かぼちゃは常に中央配置。 */
.hudTop{position:relative}
.hudTop .hudCenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}

/* 高さの低い横画面でも、END映像を省略しない。字幕枠の大きさ・文字は維持。 */
@media (orientation:landscape) and (max-height:480px) {
 #endingOverlay{flex-direction:row;justify-content:center;align-items:center;gap:clamp(8px,2vw,22px);padding:calc(8px + var(--safeTop)) calc(12px + var(--safeRight)) calc(8px + var(--safeBottom)) calc(12px + var(--safeLeft));}
 #endingOverlay .endingArt{display:flex;flex:none;width:min(38vw,275px);height:min(68vh,260px);margin:0;}
 #endingOverlay .dialoguePane{flex:1 1 0;width:auto;min-width:0;max-width:620px;}
}

/* ENDの字幕のみ拡大。窓の高さは固定し、長文は自動で別ページへ分割する。 */
#endingOverlay .dialogueText{font-size:clamp(27px,7vw,40px);line-height:1.33}
@media(max-height:700px){#endingOverlay .dialogueText{font-size:clamp(25px,6vw,33px)}}
@media(max-height:480px) and (orientation:landscape){#endingOverlay .dialogueText{font-size:clamp(22px,3vw,29px)}}