/* Ver4 title painting and cinematic dialogue. Combat scenery stays photographic. */
:root{--film-gold:#e8c58e;--film-ink:#080f19}
#menu{background:#080f19;padding:96px 7vw 60px;isolation:isolate}
.title-art{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;z-index:-2;pointer-events:none}
#menu:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,#060d18b3,transparent 65%);z-index:-1;pointer-events:none}
#menu .menu-card{width:min(480px,45vw);padding:0}
#menu .eyebrow{font-size:10px;letter-spacing:.4em;color:var(--film-gold);margin-bottom:22px}
#menu h1{font-family:"Yu Gothic UI",Meiryo,sans-serif;font-size:15px;letter-spacing:.16em;color:#c5d0da}
#menu h1>span{display:inline;font:inherit;letter-spacing:inherit;margin-left:7px}#menu .number{font:inherit;color:inherit;margin:0}
#menu h2{max-width:none;margin:14px 0 20px;font-family:"Yu Mincho","MS PMincho",serif;font-weight:500;line-height:1.25;color:#fff1d9}
#menu h2 .title-name{display:block;font-size:clamp(46px,5.7vw,88px);letter-spacing:.13em;white-space:nowrap;text-shadow:0 2px 24px #dbbd7330}
#menu h2 .title-subtitle{display:block;margin-top:16px;font-size:clamp(12px,1.25vw,18px);letter-spacing:.22em;color:#e2d5be}
#menu .title-rule{width:52px;height:2px;background:#d8ad70;margin:22px 0}
#menu .lead{color:#bac6d2;font-size:12px;line-height:2.1;letter-spacing:.06em}
#menu .badges{display:flex;gap:16px;margin:18px 0!important}#menu .badges span{border:0;border-radius:0;background:none;padding:0;color:#c3b79f;font-size:9px;letter-spacing:.08em}
#menu .primary{margin-top:14px;background:#ead3a9;color:#17202b;border:1px solid #f5dfb6;border-radius:0;box-shadow:none;letter-spacing:.25em;min-height:52px}
#menu .primary:hover{background:#ffe5b4}#menu .secondary{background:#101c2780;border:1px solid #81909d66;border-radius:0;min-height:42px}
#menu .v4-settings{border-color:#90a1b12e;padding:7px 0;color:#b9c4ce}#menu .v4-settings summary{font-size:11px;color:#b9c4ce}
#menu .scene-caption{position:absolute;right:5vw;bottom:65px;text-align:right;color:#fff0d3;text-shadow:0 2px 15px #030911}
#menu .scene-caption>span{font:10px Georgia,serif;letter-spacing:.4em;color:#e0bd88}#menu .scene-caption strong{font-size:17px;letter-spacing:.2em}#menu .scene-caption p{font-size:10px}
#menu .chapter-chips{display:none}
body:not(.playing) .brand .seal{border-color:#c6a57499;color:#e4c699;background:#07111a80}
body:not(.playing) .top-actions button{background:#09131db3;border-color:#aab4bc55;border-radius:0}
body.story-film #world{filter:saturate(.82) contrast(1.09)}
body.story-film .brand,body.story-film #footer{display:none}
body.story-film .topbar{padding:12px 24px;justify-content:flex-end;background:transparent;min-height:62px}
body.story-film #story:before{content:"";position:fixed;inset:0 0 auto;height:62px;background:#070c13;pointer-events:none}
body.story-film .top-actions button{min-height:32px;padding:5px 12px;background:transparent;border-color:#87909850;border-radius:0;font-size:10px}
body.story-film #story.overlay{background:linear-gradient(0deg,#070c13 0%,#070c13ed 18%,#070c1399 27%,transparent 48%);padding:0;overflow:auto}
body.story-film #story .story-card{position:relative;width:100%;max-width:none;margin:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0 max(26px,8vw) 18px}
body.story-film #story .story-body{max-width:1120px;margin:auto;padding:18px 0 0;border-top:1px solid #d8b87b70}
body.story-film #story .eyebrow{position:fixed;left:30px;top:22px;font:10px/1.4 "Yu Gothic UI",sans-serif;letter-spacing:.23em;color:#c6ac82;margin:0;max-width:55%;z-index:13}
body.story-film #story .story-body h2{position:fixed;left:30px;top:73px;font:12px/1.6 "Yu Mincho",serif;color:#e4d6bd;letter-spacing:.15em;text-shadow:0 2px 5px #000;margin:0}
body.story-film #story #story-speaker{font:14px/1.5 "Yu Mincho",serif;letter-spacing:.25em;color:#e9c185;margin:0 0 10px}
body.story-film #story #story-text{font:clamp(15px,1.55vw,22px)/1.8 "Yu Mincho","MS PMincho",serif;letter-spacing:.045em;color:#fff8ec;max-width:1050px;min-height:58px;text-shadow:0 2px 6px #000;margin:0}
body.story-film #story #story-page{position:absolute;top:20px;right:0;font:10px Georgia,serif;letter-spacing:.18em;color:#938d83}
body.story-film #story .story-controls{margin-top:14px;gap:16px;border-top:1px solid #a0acb11c;padding-top:8px}
body.story-film #story #story-next{min-width:112px;background:transparent;border:1px solid #a18d6c80;border-radius:0;color:#ead4ae;min-height:32px;padding:5px 12px;font-size:10px}
body.story-film #story .text-button{min-height:32px;font-size:10px;color:#b2b8bd;padding:5px 7px}
body.story-film #story #chapter-rest{background:transparent;color:#b2b8bd;padding:0;margin:7px 0;font-size:10px}
@media(max-width:800px){
 #menu{padding:90px 26px 55px;align-items:center}#menu .menu-card{width:100%;max-width:440px;margin:0}#menu:before{background:linear-gradient(90deg,#060c17ee,#060c17aa 60%,#060c1755)}.title-art{object-position:68% center}
 #menu h2 .title-name{font-size:clamp(44px,10vw,70px)}#menu .scene-caption{display:none}#menu .eyebrow{margin-bottom:15px}#menu h2{margin-bottom:15px}
 body.story-film #story .story-card{padding:0 22px 12px}body.story-film #story #story-text{font-size:15px;min-height:78px}body.story-film #story .story-controls{gap:5px;flex-wrap:wrap;margin-top:8px}body.story-film #story .eyebrow{left:20px;font-size:8px}body.story-film #story .story-body h2{left:20px}
}
@media(max-height:600px) and (orientation:landscape){
 #menu{padding-top:72px;align-items:flex-start}#menu h2 .title-name{font-size:46px}#menu h1{font-size:12px}#menu .menu-card{width:44vw;max-width:410px}#menu h2 .title-subtitle{font-size:11px;margin-top:7px}#menu .title-rule{margin:12px 0}#menu .primary{min-height:42px}
 body.story-film .topbar{min-height:44px;padding:5px 15px}body.story-film #story .eyebrow{top:16px}body.story-film #story .story-body h2{top:52px}body.story-film #story .story-card{padding:0 6vw 7px}body.story-film #story .story-body{padding-top:10px}body.story-film #story #story-text{font-size:13px;min-height:36px}body.story-film #story #story-speaker{font-size:11px;margin-bottom:4px}body.story-film #story .story-controls{margin-top:5px;padding-top:3px}
}