@font-face{font-family:AshSans;src:url('../assets/fonts/PretendardVariable.woff2') format('woff2');font-weight:45 920;font-display:swap}
:root{--paper:#f1eee7;--muted:#a8b3b8;--line:#ffffff18;--accent:#e6ba79;--glass:#0c131ce8}html,body,button,kbd{font-family:AshSans,system-ui,sans-serif}body{color:var(--paper);font-size:14px}button{border-radius:7px;border-color:var(--line);background:#ffffff07}button:hover{background:#ffffff14;border-color:#c7aa7770}button:focus-visible{outline:2px solid #e2bc80;outline-offset:3px}button:disabled{opacity:.42}.eyebrow{letter-spacing:.12em;font-size:11px;color:var(--accent)}
#title-screen{padding:0;isolation:isolate;background:#080d13;overflow:hidden} .title-landscape,.title-shade{position:absolute;inset:0;pointer-events:none}.title-landscape{z-index:-3;background:url('../assets/v4/title-bg.png') center/cover;animation:landscape-breathe 25s ease-in-out infinite alternate}.title-shade{z-index:-1;background:linear-gradient(90deg,#090e16f5 0%,#090e16cc 35%,#090e1644 64%,#090e1655),linear-gradient(0deg,#080c13 0%,transparent 35%,#080c1370 100%)}.title-topline{position:absolute;top:30px;left:4.5vw;right:4.5vw;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.22em;color:#a4b4be}.title-topline>span:first-child{font-weight:750;color:#e6bd80;letter-spacing:.3em}.title-art{position:absolute;left:7vw;top:14%;width:min(460px,41vw);max-width:none}.title-art>.eyebrow{font-size:12px;letter-spacing:.15em;margin:0 0 20px;color:#d3b284}.title-art h2{font-family:AshSans,sans-serif;font-size:clamp(42px,5.3vw,86px);font-weight:750;line-height:1.06;letter-spacing:-.055em;margin:0;white-space:nowrap;text-shadow:0 4px 40px #0008}.title-art h2>span{display:block;font-size:14px;font-weight:450;letter-spacing:.5em;margin:19px 0 0 4px;color:#bfaa8a}.title-desc{font-size:14px;line-height:1.8;color:#aab4be;margin:27px 0 28px}.selection-label{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff20;padding-bottom:11px;margin-bottom:12px;font-size:11px;color:#b7c0c6}.selection-label small{font-size:10px;letter-spacing:.12em;color:#667580}#class-select{display:flex;gap:10px;margin:0}.class-card{position:relative;display:flex;align-items:center;gap:10px;width:50%;padding:10px 8px;border:1px solid #ffffff1c;background:#151e29a3;border-radius:5px;text-align:left;overflow:hidden}.class-card>img{width:40px;height:56px;object-fit:cover;object-position:center 25%;border-radius:3px;opacity:.8}.class-card>div{position:relative;flex:1}.class-card b{font-size:16px;font-weight:650;display:block;margin:3px 0 6px}.class-card small{font-size:7px;font-weight:550;letter-spacing:.1em;color:#8997a3}.class-card div>span{font-size:9px;color:#9eaab2;white-space:nowrap}.class-card>i{display:none}.class-card.selected{border-color:#b99765;background:linear-gradient(115deg,#a3824538,#17202ca6);box-shadow:inset 0 -2px #e8bd75}.class-card.selected img{opacity:1}.class-card.selected b{color:#f3d5a8}#class-detail{font-size:11px;color:#97a4b1;margin:14px 0 19px;min-height:16px}#start{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;width:100%;font-size:15px;font-weight:700;background:#e9c996;color:#131a22;border:none;border-radius:4px;letter-spacing:.02em;box-shadow:0 4px 30px #0004}#start:hover{background:#f8dcaf;box-shadow:0 0 26px #deb57425}#start>span:last-child{font-size:24px;font-weight:350;line-height:20px}#load-status{font-size:10px;text-align:right;color:#8b9caa;margin:10px 0}#hero-preview{position:absolute;right:3%;bottom:-4%;width:57%;height:93%;object-fit:contain;object-position:50% 100%;pointer-events:none;z-index:-2;mask-image:linear-gradient(0deg,transparent,black 15%,black 85%,transparent),linear-gradient(90deg,transparent,black 20%,black 85%,transparent);mask-composite:intersect;filter:drop-shadow(0 8px 40px #0008)}.title-caption{position:absolute;left:auto;right:6%;bottom:17%;width:26%;text-align:right}.title-caption small{font-size:9px;letter-spacing:.2em;color:#cfb18c}.title-caption b{display:block;font-family:AshSans;font-size:35px;letter-spacing:-.03em;line-height:1.3;font-weight:650;margin-top:6px}.title-caption p{font-size:11px;line-height:1.6;color:#aebcc7;margin:12px 0}.title-bottom{position:absolute;bottom:24px;left:4.5vw;right:4.5vw;border-top:1px solid #ffffff15;padding-top:15px;display:flex;justify-content:space-between;font-size:10px;color:#7d8d9a}.title-bottom>span:last-child{font-size:9px}#seed-label{display:none}
#brand h1{font-family:AshSans;font-weight:650;font-size:19px;letter-spacing:-.025em}#brand .crest{display:none}#brand small{letter-spacing:.17em;font-size:8px;color:#b49d7a}#quest{background:linear-gradient(100deg,#0b131cce,#0b131c80);border:1px solid #ffffff12;border-radius:7px;padding:17px;width:244px}#quest h2{font-family:AshSans;font-size:15px;font-weight:650;letter-spacing:-.025em}#quest p{font-size:12px;line-height:1.65;color:#b7c1c7}#target-panel{background:#091019b8;border-radius:8px;padding:8px 17px;width:288px}#target-role{font-size:8px;letter-spacing:.1em}#target-panel strong{font-size:15px;font-weight:650}#target-state{font-size:10px;color:#bec9d0}.target-track,.break-track{border:0;border-radius:4px}.target-track{height:5px}.break-track{height:2px;margin-top:3px}#announcement strong{font-family:AshSans;font-weight:750;letter-spacing:-.035em;font-size:37px}#announcement small{font-size:12px;letter-spacing:.08em}
#hud{border:1px solid #ffffff14;border-radius:12px;background:linear-gradient(180deg,#0b131ae3,#070c13ef);box-shadow:0 10px 45px #0005;padding:12px 16px 9px;gap:19px;bottom:20px;width:calc(100% - 48px);max-width:1170px;backdrop-filter:blur(14px)}#skills{gap:6px}.skill{border:1px solid #ffffff18;border-radius:6px;background:#151f2b;height:79px;padding-top:15px;overflow:hidden}.skill:hover{background:#24303b;border-color:#ac9469}.skill>span{width:36px;height:36px;border-radius:4px;overflow:hidden;filter:saturate(.9)}.skill b{font-size:10px;font-weight:600;margin-top:3px}.skill small{font-size:9px;color:#9caebd}.skill kbd{top:4px;left:6px;font-size:9px;color:#d8dfe4}.skill em{font-family:AshSans;font-weight:750;font-size:21px;top:19px;text-shadow:0 1px 8px #000}.skill .cd{background:#03080eb3}.skill.ultimate{border-color:#b58f534d}.portrait{border:none;border-radius:8px;overflow:hidden;background:url('../assets/v42/portrait-hero.png') 50% 20%/cover;width:46px;height:61px}.portrait>svg{display:none}.portrait strong{font-family:AshSans;bottom:1px;left:0;width:100%;background:#080e18bd;font-size:16px;line-height:21px}.vital-label b{font-weight:650;font-size:12px}.vital-label span{font-size:11px}.bar{height:14px;border:0;border-radius:3px;background:#04080c;margin-bottom:4px}.bar span{font-size:9px;line-height:14px;font-variant-numeric:tabular-nums}.hp i{background:linear-gradient(90deg,#a53735,#d8654a)}.mp i{background:linear-gradient(90deg,#23618f,#59adc9)}#stats-mini{font-size:8px;color:#8f9eaa}#utility{gap:6px}#utility button{background:#ffffff05;border:1px solid #ffffff15;border-radius:6px;height:46px;min-width:45px}#utility button span{width:26px;height:26px}#utility b{font-size:9px;font-weight:500}#utility kbd{font-size:8px}#combat-resource{font-size:9px;color:#a3b1bd;height:20px}#combo-pips i{width:5px;height:5px}#combo-pips i.on{box-shadow:0 0 7px #ffc16e;background:#edb46e}#help{font-size:8px;color:#778591;margin-top:5px}#toast-stack{bottom:165px;left:26px;width:300px}.toast{font-size:11px;line-height:1.6;border:1px solid #ffffff14;border-left:2px solid #cfac73;border-radius:5px;background:#0b121bea;box-shadow:0 5px 24px #0003}.toast button{padding:4px 8px;font-size:10px;border-color:#ddbd7960}#context-prompt{background:#0c1524ee;border:1px solid #bea26a66;border-radius:7px;font-size:12px;padding:11px 18px}#map-wrap{border:1px solid #ffffff20;border-radius:7px;overflow:hidden;opacity:.9}#minimap{opacity:.83}#top-buttons button{border-radius:5px;border-color:#ffffff18}
#modal{background:#03070dae;backdrop-filter:blur(12px);padding:28px}.modal-card{border:1px solid #ffffff22!important;border-image:none!important;background:linear-gradient(145deg,#1b2531,#0f1722 65%)!important;border-radius:13px;padding:34px 34px 26px;width:900px;max-width:calc(100vw - 40px);max-height:calc(100vh - 56px);box-shadow:0 24px 100px #0009;overflow:hidden}#modal-content{padding:0 8px 0 0;max-height:calc(100vh - 122px);overflow-y:auto;overscroll-behavior:contain}.modal-card>.close{top:16px;right:16px;width:30px;height:30px;border:1px solid #ffffff18;background:#ffffff06;border-radius:50%;font-size:22px;line-height:25px;z-index:5}.modal-card h2{font-family:AshSans;font-size:29px;font-weight:700;letter-spacing:-.035em;margin:10px 0 23px}.modal-card p{font-size:12px;line-height:1.7;color:#a7b5c2}.modal-card h3{font-family:AshSans;font-weight:600;font-size:16px}.inventory-layout{grid-template-columns:1fr 1.15fr;gap:25px}.equip-slot{border:1px solid #ffffff0d;border-radius:7px;background:#ffffff03;padding:11px;margin-bottom:8px;gap:13px}.equip-slot b{font-size:13px;font-weight:600}.equip-slot small{font-size:10px;color:#8596a4}.equip-slot .item-icon{width:46px;height:46px;border-radius:5px;overflow:hidden;background:#070d13}.equipped-effect{line-height:1.55;margin-top:4px}.stat-table{margin-top:16px;border-top:1px solid #ffffff14;font-size:11px;color:#9aabb7}.stat-table>div{padding:8px 4px;border-bottom:1px solid #ffffff08}.stat-table span{color:#e4eaf0;font-variant-numeric:tabular-nums}.item-list{max-height:none}.item-card{padding:13px;border-radius:7px;border:1px solid #ffffff12;background:#ffffff03;gap:13px;text-align:left}.item-card:hover{background:#ffffff09;border-color:#ffffff30}.item-card .item-icon{width:49px;height:49px;border-radius:5px;overflow:hidden}.item-card b{font-size:13px;font-weight:600}.item-card small{font-size:10px;line-height:1.6}.item-card .compare{font-size:11px;color:#8acbb2;margin-top:5px}.item-card .effect{font-size:10px;color:#8e9eab}.tutorial-note{font-size:11px;line-height:1.75;color:#778d9e;border-top:1px solid #ffffff14;margin-top:20px;padding-top:17px}.shop-card,.talent-card,.route-card{background:#ffffff03;border:1px solid #ffffff14;border-radius:9px;padding:20px}.shop-card button{padding:9px 13px;font-size:12px;background:#b9925230;border-color:#c9a66b45}.shop-icon{width:54px;height:54px;overflow:hidden;border-radius:7px}.route-card h3{font-size:16px;margin:8px 0}.route-card p{font-size:11px}.route-card small{font-size:10px}.route-card .reward-icon{border-radius:5px;overflow:hidden}.modal-actions button{border-radius:6px;padding:12px 21px}.results strong{font-family:AshSans;font-weight:750}.results div{background:#ffffff04;border:1px solid #ffffff0d;border-radius:6px}.key-grid{font-size:12px;line-height:1.8}.key-grid kbd{font-size:11px}.empty{padding:30px 15px;border:1px dashed #ffffff18;border-radius:7px;color:#738694}.game-icon>svg{display:none}
@keyframes landscape-breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@media(max-height:760px) and (min-width:761px){.title-art{top:12%}.title-art>.eyebrow{margin-bottom:13px}.title-art h2{font-size:60px}.title-art h2>span{margin-top:14px;font-size:12px}.title-desc{margin:22px 0;font-size:13px}#class-detail{margin:11px 0 14px}.title-topline{top:22px}.title-bottom{bottom:19px}.title-caption{bottom:17%}}
@media(max-width:1100px){.class-card>img{display:none}.class-card{padding:15px 12px}.title-art{width:43vw;left:6vw}#hud{gap:10px;padding:10px;width:calc(100% - 30px)}#vitals{width:200px;min-width:175px}.skill>span{width:31px;height:31px}.skill b{font-size:9px}.skill{height:75px}#quest{width:205px;padding:13px}#quest p{font-size:11px}}
@media(max-width:760px){.title-topline{top:20px;left:25px;right:25px}.title-topline>span:last-child{font-size:7px}.title-art{left:7vw;top:17%;width:86vw}.title-art h2{font-size:49px}.title-art h2>span{font-size:11px;letter-spacing:.35em}.title-art>.eyebrow{font-size:10px;margin-bottom:16px}.title-desc{font-size:12px;margin:20px 0}.title-shade{background:linear-gradient(90deg,#090e16e6,#090e1688),linear-gradient(0deg,#090e16 10%,transparent)}#hero-preview{right:-17%;width:105%;height:85%;bottom:0;opacity:.48}.title-caption{display:none}.title-bottom{bottom:20px;font-size:8px;left:7vw;right:7vw;gap:10px;line-height:1.5}.title-bottom>span:last-child{font-size:7px}.class-card{padding:12px}.class-card b{font-size:15px}.class-card div>span{font-size:9px}#class-detail{font-size:10px;margin:13px 0}#start{padding:14px 19px}#load-status{font-size:9px}.modal-card{padding:25px 18px 20px;max-width:calc(100vw - 26px);max-height:calc(100vh - 26px)}#modal{padding:13px}#modal-content{max-height:calc(100vh - 80px);padding-right:5px}.modal-card h2{font-size:25px;padding-right:30px}.modal-card>.close{top:10px;right:10px}.inventory-layout{grid-template-columns:1fr;gap:18px}.equip-slot{padding:9px;gap:8px}.equip-slot b{font-size:11px}.equip-slot .item-icon{width:34px;height:34px}.stat-table{font-size:10px}.item-card{padding:10px}.item-card b{font-size:12px}.item-card .item-icon{width:42px;height:42px}.shop-card{padding:15px}.route-card{padding:17px}.shop-icon{width:36px;height:36px}#hud{bottom:10px;width:calc(100% - 20px);padding:9px 7px 5px;border-radius:9px}#vitals{bottom:111px;left:0;background:#0b1420d9;padding:7px;border-radius:7px;width:206px}.portrait{width:34px;height:43px}.vital-label b{font-size:10px}.skill{height:68px}.skill>span{width:29px;height:29px}.skill b{font-size:8px}.skill small{font-size:8px}.skill em{font-size:18px}#utility{bottom:117px}#utility button{height:35px;width:43px;min-width:0}#utility button span{width:24px;height:24px}#utility b{font-size:8px}#quest{width:162px;padding:10px;top:81px;right:12px}#quest p{font-size:10px}#quest h2{font-size:12px}#toast-stack{bottom:198px;left:12px;width:230px}.toast{font-size:10px}#top-buttons{bottom:172px}#context-prompt{bottom:191px;font-size:11px}#combo-hint{bottom:174px;font-size:10px}#target-panel{width:190px;padding:7px 11px}#brand h1{font-size:15px}#announcement strong{font-size:29px}}
@media(prefers-reduced-motion:reduce){.title-landscape{animation:none}}

/* Portrait canvas fills the mask, preventing a rectangular photo edge. */
#hero-preview{object-fit:cover;object-position:50% 35%;width:53%;right:2%;mask-image:linear-gradient(0deg,transparent,black 20%,black 85%,transparent),linear-gradient(90deg,transparent,black 22%,black 78%,transparent)}.portrait>.game-icon{display:none}

#combo-pips:before{content:attr(data-label);font-size:9px;letter-spacing:.03em;margin-right:7px;color:#b7a185} .title-caption{pointer-events:none}

.item-card .compare .stat-gain{color:#8acbb2}.item-card .compare .stat-loss{color:#e49b9b}
/* v4.1: keep the new face opaque and clear of the landscape's old painted heroes. */
.title-landscape{width:55%;right:auto;opacity:.34;background-position:left center;mask-image:linear-gradient(90deg,black 10%,transparent 100%)}
.title-shade{z-index:-2;background:linear-gradient(90deg,#090e16e8 0%,#090e16bb 38%,#090e1600 64%),linear-gradient(0deg,#080c13b0 0%,transparent 30%)}
#hero-preview{z-index:-1;object-fit:contain;object-position:50% 100%;width:54%;height:96%;right:1%;bottom:-3%;mask-image:linear-gradient(0deg,transparent,black 14%,black 100%),linear-gradient(90deg,transparent,black 16%,black 88%,transparent);filter:none}
.title-caption{right:5%;bottom:14%}
@media(max-width:760px){#hero-preview{width:110%;right:-21%;height:92%;opacity:.3}.title-landscape{width:100%;opacity:.18}.title-shade{background:linear-gradient(90deg,#090e16ee,#090e16aa)}}
/* Mask the image bounds themselves, not empty contain-letterbox space. */
#hero-preview{width:min(54vw,72vh);right:4%;height:96%;object-fit:cover;object-position:center;mask-image:linear-gradient(0deg,transparent,black 14%,black 96%,transparent),linear-gradient(90deg,transparent,black 16%,black 84%,transparent)}
@media(max-width:760px){#hero-preview{width:90vw;right:-8%;height:90%;object-fit:cover}}