/* Shared v6 skin: aged gold edges, dark iron insets, parchment only on the map. */
:root { --gold:#cfac6c; --gold-hi:#f1d395; --text:#e9e2d3; --muted:#bcb4a1; --font-title:'Cinzel',Georgia,serif; }
button { touch-action:manipulation; }
button:focus-visible,[role=button]:focus-visible { outline:2px solid #f5d79c; outline-offset:3px; }
.btn { border-radius:1px; border-color:#927b52; color:#ded2ba; background:linear-gradient(115deg,#2c302b,#10191a 48%,#20251f); box-shadow:inset 0 0 0 2px #070c0d,inset 0 0 0 3px #be9e5c40,0 3px 8px #0008; font-size:calc(var(--u)*3.15); letter-spacing:.08em; padding:calc(var(--u)*2.4) calc(var(--u)*4); }
.btn.gold { color:#201a0e; border-color:#f4d99e; background:radial-gradient(ellipse at 50% 0,#fff1bf9c,transparent 65%),linear-gradient(110deg,#ad793b,#e8c582 45%,#f4dca1 53%,#bd8d48); box-shadow:inset 0 0 0 2px #755126,inset 0 0 0 3px #f8da9c,inset 0 0 16px #5b2c1a55,0 4px 12px #0009; text-shadow:0 1px #fff4; }
.btn.small { font-size:calc(var(--u)*2.35); padding:calc(var(--u)*1.7) calc(var(--u)*2.6); }
.btn:disabled { opacity:.5; }
.icon-btn { border-radius:2px; box-shadow:inset 0 0 0 2px #080e0f,inset 0 0 0 3px #ad91582a; background:linear-gradient(145deg,#34382f,#131c1b 65%); color:#d9c18a; }
.panel { border:1px solid #b79962; border-radius:2px; background:radial-gradient(ellipse at 50% 0,#80663826,transparent 45%),linear-gradient(135deg,#202823,#0b1314 65%); box-shadow:inset 0 0 0 3px #050b0d,inset 0 0 0 4px #bb995047,0 18px 55px #000d; padding:calc(var(--u)*5); }
.panel h2 { font-size:calc(var(--u)*4.6); color:#ead1a0; line-height:1.28; letter-spacing:.045em; }
.panel h3 { color:#bfa77c; font-size:calc(var(--u)*2.15); letter-spacing:.14em; }
.panel p { line-height:1.65; }
.panel .sub { color:#aaa996; }
.stage-panel { padding-top:0; }
.enemy-list .e,.relic-item,.guide-entry { border-radius:1px; border:1px solid #ad905033; background:linear-gradient(130deg,#39403940,#0c1414a6); }
.quest-entry { border-top-color:#b79a5740; }
.quest-status { letter-spacing:.06em; }
.chip { border-color:#a58a5155; background:linear-gradient(#33382e,#111a18); box-shadow:inset 0 0 0 2px #060e0c77; }

/* Explicitly out of the title flex flow; works even with the general screen-child selector. */
#screen-title > .language-trigger { position:absolute; top:max(calc(var(--u)*3),env(safe-area-inset-top)); right:max(calc(var(--u)*3),env(safe-area-inset-right)); z-index:5; display:grid; grid-template-columns:1.2em auto .65em; align-items:center; column-gap:.65em; white-space:nowrap; margin:0; min-height:36px; padding:calc(var(--u)*1.4) calc(var(--u)*2.3); font:400 calc(var(--u)*2.8)/1 var(--font-story); border:1px solid #c6b58a80; border-radius:4px; background:#091014cf; color:#e4d2af; box-shadow:inset 0 0 0 1px #050a0b; }
.language-trigger .ui-icon { display:block; width:100%; height:auto; aspect-ratio:1; margin:0; vertical-align:initial; }
.language-trigger .language-label { display:block; font:inherit; line-height:1; }
.language-trigger .icon-chevron_down { width:100%; height:auto; stroke-width:2.6; }
.title-actions { gap:calc(var(--u)*2.8); }
.title-actions .btn { display:flex; align-items:center; justify-content:center; gap:.5em; text-transform:uppercase; white-space:nowrap; }
.title-actions .btn.gold { --cta-height:max(44px,calc(var(--u)*12)); height:var(--cta-height); min-height:44px; padding:0; color:#171810; font:600 calc(var(--u)*3.25)/1 var(--font-title); letter-spacing:.065em; text-shadow:none; border-style:solid; border-width:0 calc(var(--cta-height)*.782609); border-image-source:url('../assets/art/v4/title_gold_reference_v7.webp'); border-image-slice:0 180 fill; border-image-width:0 calc(var(--cta-height)*.782609); border-image-repeat:stretch; border-radius:0; background:none; box-shadow:none; }
.title-actions .btn.gold::before,.title-actions .btn.gold::after,.title-actions .btn.small::before,.title-actions .btn.small::after { content:none; }
.title-actions .btn.small { height:calc(var(--u)*8.5); min-height:40px; padding:0; color:#cbbfaa; border:0; border-radius:0; background:url('../assets/title-saga-frame-v7.svg') center/100% 100% no-repeat; box-shadow:none; font:400 calc(var(--u)*2.7)/1 var(--font-title); letter-spacing:.2em; }
.title-actions .btn:focus-visible { outline:2px solid #f6df9e; outline-offset:3px; }
.title-edition { color:#c7ac73; padding-top:calc(var(--u)*1.5); font-family:var(--font-title); font-size:calc(var(--u)*2.1); letter-spacing:.24em; }

/* Real image element rather than a custom-property URL hidden under gradients. */
.map-canvas.atlas-map { isolation:isolate; background:#ad956f; margin-bottom:0; }
.map-cartography { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:0; pointer-events:none; }
.atlas-map::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:0; box-shadow:inset 0 0 calc(var(--u)*8) #442c176b; }
.atlas-map > svg.map-paths { z-index:1; filter:drop-shadow(0 1px 1px #f7e2b6); }
.map-scroll { padding-top:calc(var(--u)*14); padding-bottom:calc(var(--u)*11); }
.map-header { background:linear-gradient(120deg,#26302b,#0a1416 65%); box-shadow:0 4px 14px #0008,inset 0 -2px #77603a33; border-bottom:1px solid #bba16b; }
.map-header .realm b { color:#e6c68a; font-size:calc(var(--u)*3.9); }
.map-header .realm span { color:#aaa992; font-size:calc(var(--u)*1.7); margin-top:calc(var(--u)*.7); }
.atlas-map .node .disc { width:calc(var(--u)*10); height:calc(var(--u)*10); border:1px solid #dfbd78; background:radial-gradient(ellipse at 35% 20%,#34463a,#10251f); box-shadow:inset 0 0 0 2px #111b16,inset 0 0 0 3px #bfa5756b,0 0 0 1px #283026,0 3px 7px #161b13b3; }
.atlas-map .node .node-number { color:#fff0ca; font-size:calc(var(--u)*3.5); font-weight:600; }
.atlas-map .node.locked { filter:none; opacity:1; }
.atlas-map .node.locked .disc { background:radial-gradient(ellipse at 30% 20%,#424943,#202b28); border-color:#b1ad91; box-shadow:inset 0 0 0 2px #17211e,inset 0 0 0 3px #8e927880,0 0 0 1px #353c2f,0 3px 6px #171c1699; }
.atlas-map .node.locked .node-number { color:#dcdccd; }
.atlas-map .node .label { background:#121e1b; border:1px solid #b6a174; border-radius:2px; color:#f2e4c5; text-shadow:0 1px 1px #000; padding:calc(var(--u)*.6) calc(var(--u)*1.3); font-size:max(10px,calc(var(--u)*2.15)); font-weight:600; line-height:1.35; max-width:calc(var(--u)*32); box-shadow:0 2px 5px #1e2215a6; }
.atlas-map .node .stars { display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*.3); height:calc(var(--u)*3.7); min-height:15px; margin-bottom:calc(var(--u)*.5); letter-spacing:0; text-shadow:none; }
.atlas-map .node .stars:not(:empty) { padding:0 calc(var(--u)*.8); background:#111c19; border:1px solid #d7b46c; border-radius:3px; box-shadow:0 2px 5px #182016b3; }
.atlas-map .map-star { display:flex; align-items:center; }
.atlas-map .map-star .ui-icon { display:block; position:static; width:max(11px,calc(var(--u)*2.5)); height:max(11px,calc(var(--u)*2.5)); vertical-align:initial; }
.atlas-map .map-star.earned .ui-icon { fill:#f6c85c; color:#ffe9a6; stroke-width:1.3; }
.atlas-map .map-star.unearned .ui-icon { fill:none; color:#a6b0a5; stroke-width:1.8; }
.atlas-map .node.available .disc { background:radial-gradient(ellipse at 40% 15%,#766137,#352e1e); border-color:#ffe2a3; box-shadow:inset 0 0 0 2px #443822,inset 0 0 0 3px #e0be73,0 0 0 2px #785024,0 0 18px #d3914280; }
.atlas-map .node.available .label { color:#fff0cd; background:#3a2a14; border-color:#f2c873; text-shadow:0 1px #000; }
.atlas-map .node.boss .disc,.atlas-map .node.miniboss .disc { width:calc(var(--u)*12); height:calc(var(--u)*12); }
.atlas-map .node.side .disc { width:calc(var(--u)*7.5); height:calc(var(--u)*7.5); }
.atlas-map .node.side .label { max-width:calc(var(--u)*22); font-size:max(10px,calc(var(--u)*2)); }
.map-footer { background:linear-gradient(#18231ff5,#0c1516); border-color:#b69b60; box-shadow:0 -3px 12px #0005; color:#c6b68e; }
.map-note { border:1px solid #b89d60; background:#13201ff0; bottom:calc(var(--u)*11); font-size:calc(var(--u)*2.1); padding:calc(var(--u)*1.8); }
.b-player { border-color:#b3945d; box-shadow:inset 0 0 0 2px #061011,inset 0 0 0 3px #b3945d45; }
.b-top .title { color:#efd7a4; text-shadow:0 2px 3px #000; }
/* Enemy telegraph: floating icon + value, not a framed NEXT button. */
.enemy .intent,.enemy.solo .intent,.enemy.charging .intent,.enemy.enraged .intent { position:absolute; top:calc(var(--u)*1.1); right:2%; z-index:4; display:inline-flex; align-items:center; gap:calc(var(--u)*.65); width:max-content; max-width:85%; padding:calc(var(--u)*.5) calc(var(--u)*.9); border:0; border-radius:0; box-shadow:none; background:radial-gradient(ellipse,#081114d9 20%,#08111466 52%,transparent 76%); color:#fff1dc; font:600 max(12px,calc(var(--u)*2.55))/1.15 var(--font-ui); text-shadow:0 1px 3px #000,0 0 2px #000; }
.enemy .intent::before { content:none; }
.enemy .intent .ui-icon { width:calc(var(--u)*2.7); height:calc(var(--u)*2.7); min-width:14px; min-height:14px; color:#e7b28e; filter:drop-shadow(0 1px 1px #000); }
.enemy .intent.guard .ui-icon { color:#a9d7cb; }
.enemy .intent.tamper .ui-icon { color:#c8b6ec; }
.enemy .intent.danger { color:#ffe0b0; font-size:max(10px,calc(var(--u)*1.85)); }
.enemy .intent.danger .ui-icon { color:#ffad71; }
.intent-value { font-variant-numeric:tabular-nums; }
.skill .ic { border-color:#ba9b60; box-shadow:0 0 0 2px #071010,0 0 0 3px #a38a5655; }
.skill .nm { color:#cbbc9d; font-size:calc(var(--u)*1.8); }
.tipbox { border:1px solid #d0b279; box-shadow:inset 0 0 0 3px #071010,0 8px 30px #000b; background:linear-gradient(130deg,#2d3628,#101a19); }

/* Map node anchoring: the node box IS the disc, so route paths meet the disc centre.
   Stars, label and the frontier call-to-action hang off the disc instead of stacking under it. */
.atlas-map .node { gap:0; }
.atlas-map .node .label { position:absolute; top:50%; margin:0; transform:translateY(-50%); width:max-content; max-width:calc(var(--u)*26); white-space:normal; z-index:1; }
.atlas-map .node.label-right .label { left:calc(100% + var(--u)*1.6); text-align:left; }
.atlas-map .node.label-left .label { right:calc(100% + var(--u)*1.6); text-align:right; }
.atlas-map .node.label-below .label { top:calc(100% + var(--u)*.8); left:50%; transform:translateX(-50%); text-align:center; }
.atlas-map .node .stars { position:absolute; top:calc(100% + var(--u)*.4); left:50%; transform:translateX(-50%); margin:0; }
.atlas-map .node.label-below .stars:not(:empty) ~ .label { top:calc(100% + var(--u)*5); }
.atlas-map .node .stars:empty { display:none; }
.node-cta { position:absolute; bottom:calc(100% + var(--u)*1.4); left:50%; transform:translateX(-50%); white-space:nowrap; pointer-events:none; z-index:2;
  padding:calc(var(--u)*.7) calc(var(--u)*1.8); border-radius:99px; border:1px solid #f2cf83; background:linear-gradient(#5a3f19,#2c1f0d); color:#fff1cc;
  font:700 max(10px,calc(var(--u)*2.1))/1 var(--font-ui); letter-spacing:.12em; text-transform:uppercase; box-shadow:0 0 14px #e8b45a88, 0 2px 6px #000a; animation:ctaBob 1.6s ease-in-out infinite; }
.node-cta::after { content:''; position:absolute; left:50%; bottom:calc(var(--u)*-.9); width:calc(var(--u)*1.6); height:calc(var(--u)*1.6); margin-left:calc(var(--u)*-.8); transform:rotate(45deg); background:#2c1f0d; border-right:1px solid #f2cf83; border-bottom:1px solid #f2cf83; }
@keyframes ctaBob { 50% { translate:0 calc(var(--u)*-.8); } }
@media (prefers-reduced-motion:reduce) { .node-cta { animation:none; } }

/* Header actions: icon above a short caption, never clipped. */
.map-header .icon-btn.labeled { width:auto; min-width:calc(var(--u)*8.5); height:calc(var(--u)*8.5); padding:calc(var(--u)*.8) calc(var(--u)*1.2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--u)*.4); font-size:calc(var(--u)*3.4); }
.map-header .icon-btn.labeled .ui-icon { width:calc(var(--u)*3.8); height:calc(var(--u)*3.8); flex:none; }
.map-header .icon-btn.labeled small { font:600 max(8px,calc(var(--u)*1.6))/1 var(--font-ui); letter-spacing:.06em; color:#cbb98f; white-space:nowrap; }
/* The call-to-action sits beside the disc, opposite its label, so it never covers a neighbouring stage. */
.atlas-map .node.label-right .node-cta,.atlas-map .node.label-left .node-cta { bottom:auto; top:50%; transform:translateY(-50%); }
.atlas-map .node.label-right .node-cta { left:auto; right:calc(100% + var(--u)*2.2); }
.atlas-map .node.label-left .node-cta { left:calc(100% + var(--u)*2.2); }
.atlas-map .node.label-right .node-cta::after,.atlas-map .node.label-left .node-cta::after { bottom:auto; top:50%; margin:calc(var(--u)*-.8) 0 0; }
.atlas-map .node.label-right .node-cta::after { left:auto; right:calc(var(--u)*-.9); transform:rotate(-45deg); }
.atlas-map .node.label-left .node-cta::after { left:calc(var(--u)*-.9); transform:rotate(135deg); }
.atlas-map .node.label-right .node-cta,.atlas-map .node.label-left .node-cta { animation-name:ctaNudge; }
.atlas-map .node.label-left .node-cta { --nudge:calc(var(--u)*.8); }
@keyframes ctaNudge { 50% { translate:var(--nudge,calc(var(--u)*-.8)) 0; } }