/* Large original portraits, stable typography and readable intermissions. */
#titleLogo{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 5px 0 #160b06)}
#s-title .logo{left:4%;top:3%;width:50%;height:29%;margin:0}
#titleKV{right:2%;height:88%;bottom:1%;max-width:48%;object-fit:contain;mask-image:none;-webkit-mask-image:none;animation:none}
#expoTag{display:none}
#titleMenu{top:35%;width:39%}
#s-story{background-image:linear-gradient(180deg,rgba(6,3,3,.58),rgba(6,3,3,.05) 36%,rgba(6,3,3,.8)),var(--story-bg);background-size:cover;background-position:center;overflow:hidden}
#storyHeading{position:absolute;top:3.5%;left:5%;z-index:2;text-shadow:0 3px 4px #000}
#storyChapter{color:#f5cb70;font-weight:900;font-size:calc(var(--u)*1.25);letter-spacing:.14em}
#storyTitle{font-family:var(--D);font-size:calc(var(--u)*3.5);margin:.15em 0;color:#fff4cf;font-weight:400}
#storyLocation{font-size:calc(var(--u)*1.35);font-weight:700}
.storyPortrait{position:absolute;bottom:23%;height:61%;width:39%;object-fit:contain;object-position:center bottom;filter:brightness(.6) drop-shadow(0 8px 6px #120905);transition:filter .15s,transform .15s}
#storyLeft{left:4%}#storyRight{right:4%;transform:scaleX(-1)}
.storyPortrait.speaking{filter:brightness(1) drop-shadow(0 0 16px #de912763)}
#storyRight.shadow{filter:brightness(.22) sepia(1) hue-rotate(235deg) saturate(3)}
#storyRight.shadow.speaking{filter:brightness(.45) sepia(1) hue-rotate(235deg) saturate(3) drop-shadow(0 0 15px #be77f5)}
#storyBox{position:absolute;left:4%;right:4%;bottom:10%;min-height:24%;padding:calc(var(--u)*1.5) calc(var(--u)*2.1);background:rgba(19,11,8,.97);border:2px solid #bb803c;border-top:4px solid #efbc62;box-shadow:0 12px 24px #0008;z-index:3}
#storySpeaker{font-family:var(--D);font-size:calc(var(--u)*1.7);color:#ffd67d;margin-bottom:.4em}
#storyText{font-family:var(--B);font-size:calc(var(--u)*1.9);line-height:1.6;font-weight:700;color:#fff5e4;max-width:97%;margin:0;overflow-wrap:anywhere}
#storyFooter{position:absolute;left:4%;right:4%;bottom:2.4%;display:flex;align-items:center;gap:calc(var(--u)*1);z-index:4}
#storyFooter button,#storySkip{font-family:var(--B);font-weight:900;cursor:pointer;border:1px solid #ac8148;color:#fff3d8;background:#25150e;font-size:calc(var(--u)*1.4);padding:.55em 1em;min-height:34px}
#storyFooter button:focus-visible,#storySkip:focus-visible{outline:3px solid #fff;outline-offset:3px}
#storyFooter button:disabled{opacity:.35;cursor:default}
#storyFooter #storyNext{margin-left:auto;background:#f1bf61;color:#201208;border-color:#ffdea0;min-width:12em}
#storyHint{font-size:calc(var(--u)*1.2);color:#ecdfc7;flex:1;font-weight:700}
#storyCount{font-family:var(--D);font-size:calc(var(--u)*1.3);color:#f5cc7b}
#storySkip{position:absolute;right:4%;top:4%;z-index:5}
body[data-demo=true] #storySkip,body[data-demo=true] #storyFooter button{display:none}
body[data-demo=true] #storyHeading{top:12%}
.tb{font-size:calc(var(--u)*1.55*var(--ts));width:calc(var(--u)*7.6*var(--ts));height:calc(var(--u)*7.6*var(--ts));opacity:.87}
.tb[data-a=guard]{right:calc(var(--u)*31.5*var(--ts));bottom:calc(var(--u)*2)}
.tb[data-a=light]{right:calc(var(--u)*23*var(--ts));bottom:calc(var(--u)*2)}
.tb[data-a=heavy]{right:calc(var(--u)*14.5*var(--ts));bottom:calc(var(--u)*2)}
.tb[data-a=special]{right:calc(var(--u)*6*var(--ts));bottom:calc(var(--u)*2)}
.tb[data-a=special2]{right:calc(var(--u)*6*var(--ts));bottom:calc(var(--u)*10.8*var(--ts));background:radial-gradient(circle at 35% 30%,#69dbeb,#116280)}
#superBtn{right:calc(var(--u)*15.5*var(--ts));bottom:calc(var(--u)*11.8*var(--ts));width:calc(var(--u)*8*var(--ts));height:calc(var(--u)*8*var(--ts));font-size:calc(var(--u)*1.55*var(--ts))}
#super2Btn{right:calc(var(--u)*25*var(--ts));bottom:calc(var(--u)*11.8*var(--ts));width:calc(var(--u)*8*var(--ts));height:calc(var(--u)*8*var(--ts));background:radial-gradient(circle at 35% 30%,#9868d7,#472366);opacity:.5}
#super2Btn.ready{opacity:1;background:radial-gradient(circle at 35% 30%,#ffe6a1,#9850cf);box-shadow:0 0 12px #ffd772}
#touch .tb,#touch #superBtn{font-size:max(14px,calc(var(--u)*1.55*var(--ts)))}
@media(max-height:480px){#storyText{font-size:calc(var(--u)*2.15)}#storyBox{bottom:13%;min-height:26%}#storyFooter{bottom:2%}#storyHint{display:none}#storyFooter #storyNext{min-width:10em}#storyFooter button,#storySkip{font-size:calc(var(--u)*1.6);padding:.4em .8em}.storyPortrait{bottom:32%;height:53%}}