/* Saga presentation: restrained iron/brass, readable combat and tactile painted abilities. */
:root { --font-story:Georgia,'Times New Roman',serif; --iron-edge:#786d55; }
.panel { background:radial-gradient(ellipse at 10% 0,#67503826,transparent 60%),linear-gradient(135deg,#211e19,#101411); border-color:#8d7850; }
.panel h2,.b-top .title { color:#e3d4ad; }
.btn,.icon-btn { background:linear-gradient(165deg,#39382e,#181d18 48%,#101410); border-color:#807254; }
.title-main { width:100%; background:none; filter:drop-shadow(0 3px 1px #000); }
.title-wordmark { display:block; width:100%; height:auto; }
.title-heading { width:100%; }
#screen-title .title-rune { font-size:calc(var(--u)*9); text-shadow:none; animation:none; margin-top:calc(var(--u)*8); }
.title-sub { font-size:calc(var(--u)*2.5); color:#b9aa83; }

/* Return the height of oversized cards and duplicate labels to the actors. */
#screen-battle { grid-template-rows:calc(var(--u)*8) minmax(0,1fr) calc(var(--u)*10.8) auto calc(var(--u)*16) calc(var(--u)*3.7); gap:calc(var(--u)*1.1); }
.b-top .title { font-size:calc(var(--u)*3.15); }
.b-top .title small { margin-top:calc(var(--u)*.5); font-size:calc(var(--u)*1.55); }
.b-top .icon-btn { width:calc(var(--u)*6.5); height:calc(var(--u)*6.5); }
.b-enemies { padding:0 calc(var(--u)*1); overflow:visible; }
.enemy,.enemy.boss { position:relative; display:block; overflow:visible; }
.enemy .portrait,.enemy.boss .portrait { position:absolute; inset:calc(var(--u)*1) 0 calc(var(--u)*8); width:100%; height:auto; }
.enemy .portrait::before,.enemy.targeted .portrait::before,.enemy.charging .portrait::before,.enemy.enraged .portrait::before { left:22%; right:22%; bottom:-1.5%; height:7%; border-radius:50%; background:radial-gradient(ellipse at 50% 50%,#03080666 0%,#03080633 35%,#03080612 56%,transparent 74%); border:0; box-shadow:none; filter:none; pointer-events:none; }
.enemy .portrait img { --actor-scale:1; filter:drop-shadow(0 2px 2px #0005); }
.enemy.solo .portrait { left:8%; right:8%; width:84%; }
.enemy.solo .portrait img { --actor-scale:1.04; }
.enemy.miniboss .portrait img,.enemy.boss .portrait img { --actor-scale:1.07; filter:drop-shadow(0 3px 3px #0006); }
.enemy[data-enemy=tyrs_hound] .portrait { left:3%; right:3%; width:94%; }
.enemy[data-enemy=tyrs_hound] .portrait img { --actor-scale:1.08; }
.enemy.boss .portrait { bottom:calc(var(--u)*10); }
.enemy-hud,.enemy.solo .enemy-hud { position:absolute; bottom:0; left:3%; width:94%; padding:calc(var(--u)*1.8) calc(var(--u)*1) calc(var(--u)*.4); background:radial-gradient(ellipse at 50% 80%,#06100c99,transparent 75%); z-index:3; }
.enemy.solo .enemy-hud { left:10%; width:80%; }
.enemy.boss .enemy-hud,.enemy.miniboss .enemy-hud { max-width:none; }
.enemy .name,.enemy.boss .name,.enemy.miniboss .name { font-family:var(--font-title); font-size:calc(var(--u)*2.5); line-height:1.15; letter-spacing:.025em; }
.enemy.solo .name { font-size:calc(var(--u)*3); }
.enemy .kind { display:inline!important; font:600 calc(var(--u)*1.15)/1.3 var(--font-ui); letter-spacing:.22em; color:#b6a17e; }
.enemy .kind:empty { display:none!important; }
.enemy .bar.hp,.enemy.boss .bar.hp,.enemy.miniboss .bar.hp { height:calc(var(--u)*2.05); margin-top:calc(var(--u)*.7); border:1px solid #b39461; border-radius:1px; box-shadow:0 0 0 1px #080d09,0 2px 3px #0007; }
.enemy .bar.hp .fill { background:linear-gradient(#d07b54,#a6372c 27%,#6c181b 75%,#8b3529); }
.enemy .bar.hp .txt { font-size:calc(var(--u)*1.65); line-height:1; }
.badges { margin-top:calc(var(--u)*.4); min-height:0; }
.badge { font-size:calc(var(--u)*1.55); line-height:1.4; }
.phase-pips { display:inline-flex; font-size:calc(var(--u)*1.5); margin-right:calc(var(--u)*1); }
.passive { display:inline; font-size:calc(var(--u)*1.5); line-height:1.25; }
.intent,.enemy.solo .intent { z-index:4; top:calc(var(--u)*2); right:2%; padding:calc(var(--u)*.65) calc(var(--u)*1.2); font-size:calc(var(--u)*2.3); }
.intent::before { font-size:calc(var(--u)*1.05); }
.b-player .avatar { width:calc(var(--u)*8.5); height:calc(var(--u)*8.5); }
.b-player { background:linear-gradient(120deg,#363529,#17201b 28%,#101713); }
.hero-name span { font-size:calc(var(--u)*1.2); }

/* Ground-plane light is elliptical, under the feet, never a halo over the actor. */
.ground-aura { --aura:#ede8dd; --strength:.16; position:absolute; z-index:0; width:54%; height:calc(var(--u)*4.5); left:23%; bottom:calc(var(--u)*7); border:1px solid var(--aura); border-radius:50%; opacity:var(--strength); box-shadow:0 0 7px var(--aura),inset 0 0 9px var(--aura); pointer-events:none; }
.enemy.boss .ground-aura { bottom:calc(var(--u)*9); }
.enemy.solo .ground-aura { width:calc(var(--u)*30); left:calc(50% - var(--u)*15); }
.enemy[data-enemy=tyrs_hound] .ground-aura { width:calc(var(--u)*44); left:calc(50% - var(--u)*22); }
.ground-aura::before { content:''; position:absolute; inset:-55% -8%; border-radius:50%; background:radial-gradient(ellipse,var(--aura),transparent 65%); opacity:.27; }
.ground-aura i { position:absolute; inset:15% 8%; border:1px solid var(--aura); border-radius:50%; border-left-color:transparent; border-right-color:transparent; }
.ground-aura i:nth-child(2) { inset:-20% -8%; opacity:.45; }
.ground-aura i:nth-child(3) { inset:-65% 10%; border:none; background:radial-gradient(ellipse,var(--aura),transparent 65%); opacity:.3; }
.enemy[data-aura=white] .ground-aura i { display:none; }
.enemy[data-aura=green] .ground-aura { --aura:#76bc86; --strength:.5; }
.enemy[data-aura=red] .ground-aura { --aura:#ee6648; --strength:.7; }
.enemy[data-aura=purple] .ground-aura { --aura:#b48bed; --strength:.8; }
.enemy[data-aura=orange] .ground-aura { --aura:#ffac4f; --strength:.95; height:calc(var(--u)*5.2); }
.enemy:not([data-aura=white]) .ground-aura { animation:groundBreath 3.2s ease-in-out infinite; }
.enemy[data-aura=purple] .ground-aura i,.enemy[data-aura=orange] .ground-aura i { animation:groundWave 2s ease-out infinite; }
.enemy[data-aura=orange] .ground-aura i:nth-child(2) { animation-delay:-1s; }
.enemy.dead .ground-aura { display:none; }
@keyframes groundBreath { 50%{filter:brightness(1.3);transform:scale(1.035)} }
@keyframes groundWave { 0%{transform:scale(.85);opacity:.8} 100%{transform:scale(1.25);opacity:0} }

/* Four compact illustrated sockets, not four glowing dashboard cards. */
.b-skills { grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(var(--u)*1.8); padding:0 calc(var(--u)*1); }
.skill,.skill.ready,.skill.ult,.skill.ult.ready { display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:calc(var(--u)*.5); align-content:center; align-items:center; padding:calc(var(--u)*.7); border:0; border-radius:1px; background:linear-gradient(transparent,#171c1444); box-shadow:none; overflow:hidden; }
.skill .ic { grid-row:1; grid-column:1; justify-self:center; width:calc(var(--u)*10); height:calc(var(--u)*10); max-height:100%; border:1px solid #8b7954; box-shadow:0 0 0 2px #090d09,0 0 0 3px #79674566; background:#080c09; overflow:hidden; }
.skill .ic .skill-art { width:100%; height:100%; object-fit:cover; border-radius:0; filter:none; }
.skill .nm { grid-row:2; grid-column:1; font-family:var(--font-title); font-size:max(8px,calc(var(--u)*2)); line-height:1.15; text-align:center; align-self:end; margin:0; font-weight:600; }
.skill .cost { position:absolute; right:calc(var(--u)*1); top:calc(var(--u)*7.6); padding:1px 3px; background:#0b130deb; border:1px solid #8e82604d; font-size:max(8px,calc(var(--u)*1.9)); }
.skill-state { display:none; }
.skill .meter { height:2px; background:#6bafb9; box-shadow:none; }
.skill.disabled .ic { opacity:.62; filter:saturate(.45); }
.skill.ready .nm { color:#ebdfbd; }
.skill.ready .ic { border-color:#b4cdcd; box-shadow:0 0 8px #90cdd62c; }
.skill.ult { border-color:#978052; }
.skill.ult.ready { border-color:#e3c78d; }
.skill.ult.ready .ic { border-color:#e3c78d; box-shadow:0 0 9px #e3c78d38; }
.skill.active { outline:1px solid #f0dca4; }

/* Cinematic captions: one serif voice, restrained controls, no emoji or giant rune. */
.story-ctrl { top:calc(var(--u)*3); right:calc(var(--u)*4); gap:calc(var(--u)*1.5); }
.story-auto,.story-skip { display:inline-flex; align-items:center; gap:.5em; border:1px solid #b19a6544; border-radius:1px; padding:calc(var(--u)*1.6) calc(var(--u)*2.2); background:#0a100dd9; font:600 calc(var(--u)*2)/1 var(--font-title); letter-spacing:.08em; color:#cbbf9f; }
.story-auto.on { color:#e8d8b4; background:#332c1bd9; box-shadow:none; }
.story-chapter { margin-top:calc(var(--u)*13); font-size:calc(var(--u)*2.5); letter-spacing:.2em; color:#d6c498; }
.story-overlay .story-rune { display:none; }
.story-art::after { background:linear-gradient(#07100c77,transparent 23%,transparent 46%,#080e0bd9 77%,#080e0b 95%); }
.story-slide { width:100%; gap:calc(var(--u)*1.8); }
.story-overlay .story-body { padding:0 calc(var(--u)*8) calc(var(--u)*3); align-items:flex-end; }
.story-text,.story-slide.final .story-text { font:400 calc(var(--u)*3.8)/1.55 var(--font-story); color:#e7dfca; letter-spacing:.015em; max-width:100%; }
.story-speaker { font-size:calc(var(--u)*2.15); color:#b99d66; }
.story-foot { padding:calc(var(--u)*2) calc(var(--u)*8) calc(var(--u)*5); gap:calc(var(--u)*2.2); }
.story-dots i { width:calc(var(--u)*3.5); height:2px; border-radius:0; }
.story-dots i.on { box-shadow:none; }
.story-next { font-family:var(--font-title); font-size:calc(var(--u)*2.1); letter-spacing:.15em; color:#d1bf93; animation:none; background:none; border:0; padding:calc(var(--u)*2); }
.story-logo { width:100%; }
.story-logo small { font:600 calc(var(--u)*2.3)/1.5 var(--font-title); }

/* Keep the whole illustrated geography visible; cover used to crop away the landmarks. */
.map-canvas.has-art { background-size:100% 100%; background-image:linear-gradient(#08100e22,#08100e33),var(--map-art); }
.map-canvas.has-art::after { background:linear-gradient(#070e0ca6,transparent 10%,transparent 94%,#070e0c99); }
.map-trunk { display:none; }
.map-canvas { margin-bottom:calc(var(--u)*10); }
.map-header { padding:calc(var(--u)*3); background:linear-gradient(#0a100efa 80%,#0a100ec9); border-bottom:1px solid #99815166; }
.map-header .realm b { font-size:calc(var(--u)*4); }
.map-header .realm span { font-size:calc(var(--u)*1.85); }
.map-header .chip { font-size:calc(var(--u)*2.4); padding:calc(var(--u)*1.2); }
.map-header .icon-btn { width:calc(var(--u)*7); height:calc(var(--u)*7); }
.node .disc { width:calc(var(--u)*11); height:calc(var(--u)*11); background:radial-gradient(ellipse at 35% 20%,#464a3b,#17201a 75%); border:1px solid #a29063; box-shadow:inset 0 0 0 2px #111710,inset 0 0 0 3px #8c794355,0 4px 8px #0009; }
.node .node-number { font:600 calc(var(--u)*3.6)/1 var(--font-title); color:#ddd0a8; }
.node .stars { height:auto; min-height:calc(var(--u)*2.5); font-size:calc(var(--u)*2); }
.node .label { font-family:var(--font-title); font-size:calc(var(--u)*2.1); line-height:1.4; padding:calc(var(--u)*.6) calc(var(--u)*1.4); background:#09110edb; border-bottom:1px solid #a7936033; max-width:calc(var(--u)*30); }
.node.available .disc { border-color:#e8d6a2; box-shadow:inset 0 0 0 3px #152018,0 0 0 2px #bfb07955,0 0 18px #e2b25955; }
.node.locked { filter:saturate(.35) brightness(.8); }
.node.cleared .disc { background:linear-gradient(#3b4032,#172119); }
.node.side .label { font-family:var(--font-ui); font-size:calc(var(--u)*1.7); max-width:calc(var(--u)*22); }
.node.side .disc { width:calc(var(--u)*8); height:calc(var(--u)*8); }
.node.boss .disc,.node.miniboss .disc { width:calc(var(--u)*15); height:calc(var(--u)*15); border-radius:3px; overflow:hidden; background:#161712; }
.node .map-foe { width:100%; height:100%; object-fit:cover; object-position:50% 20%; opacity:.9; }
.map-footer { position:absolute; z-index:6; bottom:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:calc(var(--u)*2); padding:calc(var(--u)*2) calc(var(--u)*3); background:#0a100eef; border-top:1px solid #927e4d66; font-size:calc(var(--u)*2); color:#c5b58b; }
.map-footer .btn { font-size:calc(var(--u)*2); }
.map-note { position:absolute; bottom:calc(var(--u)*10); left:calc(var(--u)*4); right:calc(var(--u)*4); z-index:5; padding:calc(var(--u)*2); background:#0b140fed; border-left:2px solid #bda273; font-size:calc(var(--u)*2.3); line-height:1.5; pointer-events:none; }

/* Learning is opt-in/replayable and does not replace the live board. */
.tipbox { bottom:calc(var(--u)*19); padding:calc(var(--u)*3); border-radius:2px; font-size:calc(var(--u)*2.8); background:#111811fa; max-height:65%; overflow-y:auto; touch-action:pan-y; }
.tipbox .t-h { color:#e1c998; font-family:var(--font-title); }
.guide-focus { outline:1px solid #e7ce92; outline-offset:3px; }
.lesson-strip { display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*1.5); padding:calc(var(--u)*2) 0; }
.lesson-strip img { width:calc(var(--u)*7); height:calc(var(--u)*7); object-fit:contain; }
.lesson-strip small { font-size:calc(var(--u)*2.2); }
.lesson-pattern { display:grid; grid-template-columns:repeat(5,calc(var(--u)*3.4)); gap:1px; justify-content:center; margin:calc(var(--u)*2) 0; }
.lesson-pattern i { width:calc(var(--u)*3.4); height:calc(var(--u)*3.4); background:#c0baa30a; }
.lesson-pattern img { display:block; width:100%; height:100%; }
.lesson-pattern span { grid-column:1/6; text-align:center; white-space:nowrap; font-size:calc(var(--u)*1.8); color:#ccbd98; padding-top:calc(var(--u)*1); }
.tutorial-actions .tutorial-practice { color:#a9d7d9; }
.guide-entry { display:flex; align-items:center; gap:calc(var(--u)*3); width:100%; text-align:left; padding:calc(var(--u)*2.5); color:var(--text); background:#0d151180; border:1px solid #8a785c55; margin-top:calc(var(--u)*1.5); cursor:pointer; }
.guide-entry b { font:600 calc(var(--u)*2.8)/1.3 var(--font-title); }
.guide-entry small { display:block; color:#b9b6a6; font:400 calc(var(--u)*2.2)/1.5 var(--font-ui); margin-top:calc(var(--u)*1); }
.guide-panel p,.practice-panel p { font-size:calc(var(--u)*2.6); line-height:1.6; }
.practice-instruction { min-height:3.2em; }
.practice-board { display:grid; grid-template-columns:repeat(5,1fr); gap:calc(var(--u)*1); padding:calc(var(--u)*2); border:1px solid #80714c; background:#080e0b; }
.practice-cell { position:relative; aspect-ratio:1; min-width:0; padding:8%; border:1px solid #70705022; background:#1a241c; cursor:pointer; }
.practice-cell img,.practice-cell svg { width:100%; height:100%; object-fit:contain; }
.practice-cell.marked { border-color:#dcc17e; box-shadow:inset 0 0 8px #d0bd7644; }
.practice-cell.chosen { outline:2px solid #fbefd0; }
.practice-cell.practice-special { background:#475046; }
.practice-cell em { position:absolute; bottom:0; right:1px; color:#f5e9c0; text-shadow:0 0 5px #51b3da; }
.practice-cell.cleared { background:#758a62; border-color:#dee6b9; }
.practice-cell.cleared img { opacity:.25; }
.quest-entry { border-top:1px solid #98815055; padding:calc(var(--u)*3) 0; }
.quest-entry h3 { margin:0 0 calc(var(--u)*1.2); }
.quest-entry p { font-size:calc(var(--u)*2.65); color:#bbb7a7; }
.quest-entry .quest-status { font-size:calc(var(--u)*2); color:#b6cda7; }
@media(prefers-reduced-motion:reduce) {
 .ground-aura,.ground-aura i,.story-text .line { animation:none!important; }
 .story-text .line { opacity:1; }
}