/* Cinematics are an isolated layer: no gameplay HUD or sprite styling here. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#story-root[hidden]{display:none}
.story-fade{position:absolute;inset:0;z-index:60;background:#000;opacity:0;touch-action:none;pointer-events:auto;will-change:opacity}
.story-fade[hidden]{display:none}
.cinematic{position:absolute;inset:0;z-index:40;isolation:isolate;overflow:hidden;overflow:clip;background:#060c12;color:#e8f0f3;touch-action:manipulation;font-family:'DM Sans',system-ui,sans-serif}
.cinematic-backdrop,.cinematic-vignette,.cinematic-motes{position:absolute;inset:0;pointer-events:none}
.cinematic-backdrop{background-size:cover;background-position:center;animation:cinematic-drift 22s ease-in-out infinite alternate;filter:brightness(.72)}
.cinematic-backdrop>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cinematic-vignette{background:linear-gradient(180deg,#02060dbb,transparent 30%,#03080dc9 87%,#02060e),linear-gradient(90deg,#04080f70,transparent 70%)}
.cinematic-motes{opacity:.6;background-image:radial-gradient(circle,#ef847b 0 1px,transparent 2px),radial-gradient(circle,#8fdcf5 0 1px,transparent 2px);background-size:171px 213px,263px 307px;animation:cinematic-embers 19s linear infinite;mask-image:linear-gradient(transparent,black 25%,transparent 90%)}
.cinematic-heading{position:absolute;top:max(28px,env(safe-area-inset-top));left:max(36px,env(safe-area-inset-left));right:max(36px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;gap:20px;text-shadow:0 2px 10px #000}
.cinematic-chapter{font-size:10px;letter-spacing:3px;color:#91adb8}
.cinematic h2{font-family:'DM Sans',system-ui,sans-serif;font-size:clamp(20px,3vw,38px);font-weight:400;letter-spacing:.04em;margin:9px 0 0;color:#f0f2ed}
#story-skip{padding:12px 16px;min-height:44px;background:#09121dbb;border:1px solid #7494a34a;color:#bdcbd1;font-size:11px;letter-spacing:1px;white-space:nowrap}
#story-skip[hidden]{display:none}
.cinematic-portrait{position:absolute;width:min(29vw,300px);height:min(47vh,360px);left:max(calc(50% - 420px),7vw);bottom:30%;border:1px solid #a357536e;background:#071015;box-shadow:0 18px 60px #0009;overflow:hidden;animation:b0ne-idle 5s ease-in-out infinite;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.cinematic-visual{display:contents}
.b0ne-face{position:absolute;inset:0;background-size:auto 148%;background-position:right top;background-repeat:no-repeat;filter:contrast(1.03)}
.b0ne-face>img{position:absolute;top:0;right:0;display:block;height:148%;width:auto;max-width:none}
.art-unavailable .b0ne-face{display:grid;place-items:center;background:radial-gradient(ellipse,#25323d,#071015)}
.art-unavailable .b0ne-face:after{content:'B0NE / AUDIO LINK';font-size:10px;letter-spacing:2px;color:#91adb8;text-align:center;padding:20px}
.cinematic-portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 75%,#050c13);pointer-events:none}
.cinematic-portrait>span{position:absolute;z-index:1;bottom:16px;left:17px;right:17px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.4px;color:#c9d9de}
.cinematic-portrait i{font-size:6px;font-style:normal;color:#bc8a86;letter-spacing:.8px}
.portrait-scan{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,#9bb9c406 3px 4px);opacity:.4;animation:link-flicker 8s steps(1) infinite}
.cinematic-note{position:absolute;right:max(7vw,40px);bottom:43%;width:240px;padding:21px;border-left:2px solid #d36962;background:linear-gradient(90deg,#09151de8,#08101988);box-shadow:0 10px 40px #0006}
.cinematic-note[hidden]{display:none}.cinematic-note small{display:block;color:#e0e9ed;font-size:12px;letter-spacing:2px}.cinematic-note span{display:block;margin-top:12px;color:#a7c0cb;font-size:13px;line-height:1.5}
.cinematic-dialogue{position:absolute;bottom:max(35px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(850px,calc(100% - 72px));background:linear-gradient(110deg,#091821f7,#030c12f5);border:1px solid #68818b99;box-shadow:0 25px 80px #000b,0 0 0 5px #03080d55;padding:0 26px 18px;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px)}
.speaker{display:flex;align-items:center;gap:18px;min-height:45px;border-bottom:1px solid #708e9b26}
.speaker b{font-size:15px;letter-spacing:3px;color:#f1eddf;background:linear-gradient(120deg,#66252188,transparent);padding:14px 30px 12px 0}.speaker span{font-size:7px;letter-spacing:1.5px;color:#79909a}.speaker i{width:5px;height:5px;background:#f76055;border-radius:50%;box-shadow:0 0 10px #ff5647;margin-left:auto}
.dialogue-line{display:block;width:100%;min-height:91px;text-align:left;background:transparent;color:#edf2ef;font-size:clamp(18px,2.1vw,24px);line-height:1.45;letter-spacing:.1px;padding:20px 0 14px;font-weight:400}
.dialogue-line:focus-visible{outline:1px solid #d37b75;outline-offset:0}
.cinematic-dialogue footer{display:flex;align-items:center;gap:16px;min-height:44px}.story-progress{font-size:10px;letter-spacing:3px;color:#d4aaa4;font-variant-numeric:tabular-nums}.story-hint{font-size:7px;letter-spacing:1.5px;color:#738b96}
#story-next{margin-left:auto;min-height:44px;min-width:150px;padding:11px 18px;background:#1a2a33;border:1px solid #6b859070;color:#e0e9ed;font-size:11px;letter-spacing:1px}
#story-next:hover,#story-skip:hover{background:#283c47}
#story-next.accept{background:linear-gradient(#872e2a,#401813);border-color:#ef7265;color:white;min-width:160px;font-size:17px;letter-spacing:5px;box-shadow:0 0 20px #f24d422a}
.cinematic button:focus-visible{outline:2px solid #edafa3;outline-offset:3px}
.portal-transition{position:absolute;inset:0;display:none;place-content:center;text-align:center;background:#02070e;z-index:5;overflow:hidden}
.transferring .portal-transition{display:grid;animation:portal-enter 1.6s ease both}.portal-ring{position:absolute;width:70vmin;height:70vmin;border:3px solid #c94441;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 100px #ac242977,inset 0 0 80px #33599488;animation:portal-ring 1.6s ease both}.portal-transition>span{z-index:1;font-size:clamp(27px,6vw,67px);font-weight:400;letter-spacing:.14em;color:#deedf4;text-shadow:0 0 16px #68a6cc}.portal-transition i{font-style:normal;color:#d95049;text-shadow:0 0 15px #eb443e}.portal-transition small{z-index:1;margin-top:24px;font-size:9px;letter-spacing:4px;color:#96adb8}
.story-archive-list{display:grid;gap:8px;margin-top:20px}.story-archive-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;padding:13px 16px;border:1px solid #63798750;background:#10202a;text-align:left}.story-archive-list b{font-size:12px;font-weight:500;color:#d8e3e6}.story-archive-list small{display:block;font-size:8px;letter-spacing:1px;color:#9f8d8a;margin-top:5px}.story-archive-list button>span:last-child{font-size:19px;color:#c66c63}
/* Title-only presentation; the actual dungeon renderer stays unchanged. */
#start-screen{background:linear-gradient(90deg,#030a10ed,#030a1088 65%,#030a1055),linear-gradient(0deg,#02070eea,transparent 85%),url('assets/story/future.webp') center/cover;backdrop-filter:none}
#start-screen .crest{width:54px;height:54px;margin-bottom:20px;border:1px solid #e2635966;border-radius:50%;box-shadow:0 0 30px #b9313725;position:relative;background:#090f16aa}
#start-screen .crest:after{content:'';position:absolute;inset:10px;border:2px solid #d3564f;border-radius:50%;border-top-color:transparent;transform:rotate(-35deg);box-shadow:0 0 14px #c3444644}
#start-screen .crest svg{display:none}
#start-screen h1{font-family:'DM Sans',system-ui,sans-serif;font-weight:400;font-size:clamp(30px,6vw,68px);letter-spacing:.12em;color:#ddebf2;text-shadow:0 0 30px #346b86}
#start-screen h1 i{font-style:normal;color:#d0524d;text-shadow:0 0 14px #e85959}
#start-screen .start-eyebrow{color:#b0c8d2;letter-spacing:3px}
#start-screen .subtitle{color:#bfcad0;font-size:8px;letter-spacing:3px}
#start-screen .tagline{font-family:'DM Sans',system-ui,sans-serif;font-size:15px;color:#c6d3d9;line-height:1.8}
#start-screen .primary{background:linear-gradient(100deg,#6a2925,#2d1718);border-color:#b6534a;color:#f1e6df}
#start-screen .secondary{background:#0b1721da;border-color:#6b82955c;color:#adc2ce}
#start-screen .menu-top,#start-screen .menu-bottom{color:#9fb4bf}
#start-screen .menu-note{color:#9cabb6}
.story-active #floor-banner,.story-active #toast{visibility:hidden}
@keyframes cinematic-drift{from{transform:scale(1.02) translateX(-.5%)}to{transform:scale(1.08) translateX(.5%)}}
@keyframes cinematic-embers{to{background-position:43px -213px,-30px -307px}}
@keyframes b0ne-idle{50%{transform:translateY(-4px)}}
@keyframes link-flicker{0%,94%,98%,100%{opacity:.3}95%,97%{opacity:.8}}
@keyframes portal-enter{0%{opacity:0}20%,85%{opacity:1}100%{opacity:1}}
@keyframes portal-ring{0%{transform:translate(-50%,-50%) scale(.5);opacity:.2}70%{opacity:1}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}
@media(max-width:650px){
 #start-screen .subtitle{font-size:6px;letter-spacing:1.6px}#start-screen h1{font-size:clamp(26px,8vw,49px);letter-spacing:.09em}#start-screen .tagline{font-size:13px;margin:23px 0}#start-screen .crest{margin-bottom:20px}.portal-transition small{font-size:6px;letter-spacing:2px}
}
/* Flow layout keeps the character, tips and dialogue together on phones. */
@media(max-width:700px) and (orientation:portrait){
 .cinematic{display:flex;flex-direction:column;gap:12px;padding:max(22px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .cinematic-heading{position:relative;inset:auto;flex:none;gap:10px;align-items:flex-start;padding:0 4px}.cinematic-heading>div{min-width:0;flex:1}.cinematic-chapter{font-size:8px;letter-spacing:1.8px}.cinematic h2{font-size:clamp(21px,6vw,28px);margin:7px 0 0;max-width:none;line-height:1.2}
 #story-skip{font-size:9px;padding:10px;letter-spacing:.3px;flex:none}
 .cinematic-backdrop{background-position:62% center}
 .cinematic-backdrop>img{object-position:62% center}
 .cinematic-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;flex:1;min-height:0;padding:4px 0 0}
 .cinematic-portrait{position:relative;inset:auto;transform:none;height:100%;width:auto;aspect-ratio:4/5;max-width:100%;max-height:560px;flex-shrink:1;animation:b0ne-idle 5s ease-in-out infinite;border-color:#a357534d;box-shadow:0 16px 45px #0007}
 .cinematic-portrait>span{font-size:8px;bottom:16px;left:16px;right:16px}.cinematic-portrait i{font-size:6px}
 .cinematic-note{position:relative;inset:auto;flex:none;width:100%;padding:11px 16px;background:#07131eea;box-shadow:none}.cinematic-note small{font-size:9px;letter-spacing:1.5px}.cinematic-note span{margin-top:4px;font-size:11px;line-height:1.4}
 .cinematic-dialogue{position:relative;inset:auto;transform:none;flex:none;width:100%;padding:0 18px 13px;box-shadow:0 16px 50px #0008}
 .speaker{gap:9px;min-height:38px}.speaker b{font-size:13px;padding:11px 9px 10px 0}.speaker span{font-size:5.5px;letter-spacing:1px}
 .dialogue-line{font-size:clamp(18px,5vw,20px);line-height:1.4;min-height:108px;padding:13px 0}
 .cinematic-dialogue footer{gap:8px;flex-wrap:nowrap}.story-progress{font-size:9px;letter-spacing:2px;white-space:nowrap}.story-hint{display:none}
 #story-next{min-width:148px;min-height:44px;font-size:10px;padding:10px 13px}#story-next.accept{min-width:158px}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:650px){
 .cinematic{gap:9px;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .cinematic h2{font-size:20px}.cinematic-heading{padding:0}.cinematic-portrait>span{bottom:10px;left:10px;right:10px;font-size:6px}.cinematic-portrait i{font-size:4px}
 .cinematic-note{padding:8px 13px}.cinematic-note span{font-size:10px}.cinematic-dialogue{padding:0 15px 10px}.speaker{min-height:33px}.speaker b{padding-top:9px;padding-bottom:9px}
 .dialogue-line{min-height:94px;padding:9px 0;font-size:18px}#story-next{min-width:145px}
}
@media(orientation:landscape) and (max-height:600px){
 .cinematic{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);grid-template-rows:auto minmax(0,1fr) auto;gap:10px 20px;padding:max(14px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
 .cinematic-heading{position:relative;inset:auto;grid-column:1/-1;grid-row:1;gap:14px;align-items:center}.cinematic h2{font-size:21px;margin-top:5px;line-height:1.15}.cinematic-chapter{font-size:8px}#story-skip{font-size:9px;min-height:44px;padding:10px 13px}
 .cinematic-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;grid-column:1;grid-row:2/4;min-width:0;min-height:0}
 .cinematic-portrait{position:relative;inset:auto;transform:none;width:auto;height:100%;aspect-ratio:4/5;max-width:100%;max-height:460px;animation:b0ne-idle 5s ease-in-out infinite}
 .cinematic-portrait>span{font-size:7px;left:12px;right:12px;bottom:12px}.cinematic-portrait i{font-size:5px}
 .cinematic-dialogue{position:relative;inset:auto;transform:none;grid-column:2;grid-row:3;width:100%;padding:0 17px 10px}
 .speaker{min-height:30px;gap:9px}.speaker b{padding:8px 12px 8px 0;font-size:12px}.speaker span{font-size:5.5px}
 .dialogue-line{min-height:82px;font-size:18px;line-height:1.4;padding:10px 0}.cinematic-dialogue footer{min-height:44px}#story-next{min-height:44px;font-size:10px}.story-hint{display:none}
 .cinematic-note{position:relative;inset:auto;grid-column:2;grid-row:2;align-self:end;width:100%;padding:10px 15px}.cinematic-note small{font-size:9px}.cinematic-note span{font-size:11px;margin-top:4px;line-height:1.4}
 #start-screen .start-content{margin:0}#start-screen .tagline{font-size:11px;margin:12px 0}#start-screen h1{font-size:34px}#start-screen .subtitle{margin-top:7px;font-size:7px}#start-screen .crest{display:none}#start-screen .start-eyebrow{margin-top:9px;margin-bottom:10px}.story-title-buttons{display:flex;justify-content:center;gap:8px}
}
@media(orientation:landscape) and (max-height:360px){
 .cinematic{gap:8px 14px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.cinematic h2{font-size:18px}.cinematic-chapter{font-size:7px;letter-spacing:2px}
 .cinematic-dialogue{padding:0 13px 9px}.dialogue-line{font-size:16px;min-height:77px;padding:8px 0}.speaker span{display:none}.cinematic-note{padding:8px 12px}.cinematic-note span{font-size:10px}.cinematic-portrait i{display:none}
 #story-next{min-width:140px;padding:9px 11px}.story-progress{font-size:9px;letter-spacing:1px}
}
@media(prefers-reduced-motion:reduce){.cinematic *{animation:none!important;transition:none!important}}