/* Reinos de Soul — visual identity v3 (06/10/2026, frente H). Rules in docs/identidade-visual.md.
   Loaded after every other stylesheet: tokens, type, buttons, panels and every screen outside the combat HUD
   (combat HUD = combat.css). Art: /assets/ui/ (GPT Image 2.5 via Higgsfield, one style string). */
@property --cd{syntax:'<number>';inherits:true;initial-value:0}
:root{
 --ink-950:#060a09;--ink-900:#0b1210;--ink-800:#111b17;--ink-700:#17241f;--ink-600:#22332b;--ink-500:#2f4439;
 --paper:#efe3c4;--paper-2:#dccba0;
 --gold-200:#fbedc0;--gold-300:#f3dc9b;--gold-400:#e2c47a;--gold-500:#c9a35a;--gold-600:#9a7638;--gold-700:#6b4f22;
 --text:#f1e9d4;--text-dim:#c5c7b2;--text-mute:#939c88;
 --teal:#4fc9b8;--sky:#6cc4ff;--rust:#d9643a;--danger:#ff6b4a;--ok:#9fd27a;
 --line:#c9a35a33;--line-gold:#c9a35a55;
 --f-display:'Eagle Lake','Alegreya',Georgia,serif;
 --f-caps:'Cinzel','Alegreya',Georgia,serif;
 --f-serif:'Alegreya',Georgia,serif;
 --f-ui:'Alegreya Sans','Manrope',system-ui,sans-serif;
 --panel-bg:linear-gradient(160deg,#16231ef7,#0b1210fa 70%);
 --ink-gold:var(--gold-300);
 --gold:var(--gold-400);--muted:var(--text-dim);--dark:var(--ink-800)
}
html,body{background:var(--ink-900);color:var(--text);font-family:var(--f-ui);font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#c9a35a66;color:#fff}
*{scrollbar-width:thin;scrollbar-color:var(--gold-600) transparent}
kbd{min-width:22px;height:22px;padding:1px 6px;border:1px solid var(--gold-600);border-radius:4px;background:var(--ink-900);font:700 11px/1 var(--f-ui);color:var(--gold-300);box-shadow:0 2px 0 #000a}

/* ---------- buttons ---------- */
button,select{font-family:var(--f-ui);border:1px solid var(--line-gold);background:#0f1815d9;color:var(--text);border-radius:6px}
button{transition:background .2s,border-color .2s,transform .15s,filter .2s,box-shadow .2s}
button:hover:not(:disabled){filter:brightness(1.15);border-color:var(--gold-400)}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}
button:disabled{opacity:.5;cursor:default;filter:saturate(.4)}
.primary{position:relative;display:flex;justify-content:space-between;align-items:center;gap:18px;width:auto;min-width:280px;height:62px;padding:0 34px 0 38px;border:0;border-radius:0;background:url(/assets/ui/frames/inkb-2.webp) center/100% 100% no-repeat;color:var(--gold-300);font:700 15px var(--f-caps);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 3px #000;filter:drop-shadow(0 8px 14px #0008)}
.primary span:last-child{font:400 26px var(--f-serif);color:var(--gold-400)}
.primary:hover:not(:disabled){color:#fff3cf;filter:drop-shadow(0 0 14px #e2c47a66) brightness(1.1);transform:translateX(3px)}
.primary:disabled{filter:grayscale(.6) brightness(.8);opacity:.75}
.secondary{width:100%;padding:12px 16px;min-height:44px;border:1px solid var(--gold-600);background:linear-gradient(#1b2923,#0e1613);color:var(--gold-300);font:700 12px var(--f-caps);letter-spacing:.12em;border-radius:6px}
.text-btn{background:none;border:0;color:var(--gold-300);font:700 12px var(--f-caps);letter-spacing:.12em;text-transform:uppercase}
.text-btn:hover:not(:disabled){color:#fff3cf}
.close{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1.5px solid var(--gold-500);background:radial-gradient(circle,#1b2923,#0b1210);color:var(--gold-300);font:400 24px/1 var(--f-serif)}

/* ---------- title screen ---------- */
body:not(.playing)::after{background:linear-gradient(90deg,#070c0bf2,#0a110fb0 34%,transparent 72%)}
#intro{width:min(470px,86vw)}
.intro-kicker,.eyebrow{font:700 11px var(--f-caps);letter-spacing:.24em;color:var(--gold-400)}
.intro-kicker>span:first-child{width:28px;background:var(--gold-500)}
#intro h1,h1{font:400 clamp(66px,8vw,118px)/.92 var(--f-display);letter-spacing:0;margin:24px 0 10px;background:linear-gradient(180deg,#fff7dc 10%,#f0cf7c 52%,#a8752a 95%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #0009) drop-shadow(0 0 24px #0008)}
h1>span{color:transparent}
h1 .title-dot{display:none}
.ornament{width:260px;height:26px;margin:18px 0 18px;background:url(/assets/ui/frames/divider.webp) left center/contain no-repeat;color:transparent;font-size:0}
.ornament i{display:none}
#intro h2{font:500 italic 22px/1.4 var(--f-serif);color:var(--paper);margin:0 0 12px}
#intro p{max-width:400px;font:500 15px/1.75 var(--f-ui);color:#d5d8c4;margin:0 0 30px;text-shadow:0 1px 6px #000}
.intro-links{gap:30px;margin-top:6px}
.intro-links .text-btn{padding:12px 0}
.intro-footer{font:700 10px var(--f-caps);letter-spacing:.2em;color:var(--text-mute)}
.intro-scene-note p{font:500 italic 22px var(--f-serif)}
.intro-scene-note small,.intro-scene-note>span:last-child{font:700 10px var(--f-caps);letter-spacing:.2em}

/* ---------- loading screen (until the world is ready) ---------- */
.loading-screen{position:fixed;inset:0;z-index:100;overflow:hidden;display:flex;align-items:flex-end;background:#060a09;transition:opacity .8s ease}
.loading-screen.done{opacity:0;pointer-events:none}
.loading-art{position:absolute;inset:0;background:url(/assets/ui/frames/loading-a.webp) center/cover no-repeat;animation:loadDrift 24s ease-in-out infinite alternate}
.loading-screen[data-art=b] .loading-art{background-image:url(/assets/ui/frames/loading-b.webp)}
.loading-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#060a09e6 0,#060a0999 32%,transparent 62%),linear-gradient(0deg,#060a09f0 0,#060a0966 30%,transparent 55%);pointer-events:none}
@keyframes loadDrift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.loading-content{position:relative;z-index:1;width:min(640px,calc(100vw - 40px));margin:0 0 max(6vh,28px) max(6vw,20px)}
.loading-content .eyebrow{font:700 11px var(--f-caps);letter-spacing:.28em;color:var(--gold-400)}
.loading-title{margin:6px 0 18px;font:400 clamp(52px,7vw,92px)/1 var(--f-display);background:linear-gradient(180deg,#fff7dc 10%,#f0cf7c 55%,#a8752a 95%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #000a)}
.loading-tip{position:relative;display:flex;align-items:baseline;gap:14px;min-height:64px;padding:16px 10px 16px 6px;margin-bottom:18px;font:500 17px/1.5 var(--f-serif);color:#f3ead2;text-shadow:0 1px 3px #000}
.loading-tip::before{content:"";position:absolute;inset:-6px -70px -6px -64px;z-index:-1;background:url(/assets/ui/frames/inkb-1.webp) center/100% 100% no-repeat;opacity:.92}
.loading-tip b{flex-shrink:0;font:700 11px var(--f-caps);letter-spacing:.22em;color:var(--gold-300)}
.loading-bar{position:relative;height:10px;border:1px solid var(--gold-600);background:#050807;box-shadow:inset 0 2px 4px #000c;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.loading-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a8701b,#f2bf3a 60%,#fff2b0);background-size:200% 100%;animation:loadShine 2s linear infinite}
@keyframes loadShine{to{background-position:-200% 0}}
#loadingLabel{display:block;margin-top:9px;font:700 11px var(--f-caps);letter-spacing:.16em;color:var(--paper)}
@media(max-width:600px){.loading-tip{font-size:15px;padding:12px 26px 12px 22px;flex-direction:column;gap:4px}.loading-content{margin-bottom:max(8vh,30px)}}
@media(prefers-reduced-motion:reduce){.loading-art,.loading-bar i{animation:none}}

/* ---------- top bar ---------- */
.topbar{padding:20px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left))}
.brand-mark{color:var(--gold-400)}
.brand b{font:400 20px var(--f-display);letter-spacing:.04em;color:var(--gold-300)}
.brand small{font:700 9px var(--f-caps);letter-spacing:.2em;color:var(--text-dim)}
nav{gap:8px}
.nav-btn{position:relative;height:42px;gap:8px;padding:0 10px 0 44px;border-radius:999px;border:1px solid var(--gold-600);background:linear-gradient(#18241fe6,#0b1210e6);backdrop-filter:blur(8px);font:700 12px var(--f-caps);letter-spacing:.08em;color:var(--paper);box-shadow:0 4px 14px #0007}
.nav-btn::before{content:"";position:absolute;left:4px;top:50%;width:34px;height:34px;transform:translateY(-50%);border-radius:50%;background:center/78% no-repeat radial-gradient(circle,#2b3b33,#0c1411);border:1px solid var(--gold-600)}
#inventoryBtn::before{background:url(/assets/ui/icons/bag.webp) center/76% no-repeat,radial-gradient(circle,#2b3b33,#0c1411)}
#journalBtn::before{background:url(/assets/ui/icons/journal.webp) center/76% no-repeat,radial-gradient(circle,#2b3b33,#0c1411)}
#mapBtn::before{background:url(/assets/ui/icons/map.webp) center/80% no-repeat,radial-gradient(circle,#2b3b33,#0c1411)}
.nav-btn .desktop,.nav-btn [data-t=map]{display:none}
@media(min-width:1600px){.nav-btn .desktop,.nav-btn [data-t=map]{display:inline}}
.nav-btn svg,.nav-btn .nav-icon{display:none}
.nav-btn kbd{height:20px;min-width:20px;font-size:10px}
.help-icon{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--gold-500);background:radial-gradient(circle,#1d2b25,#0b1210);color:var(--gold-300);font:700 18px var(--f-caps);box-shadow:0 4px 14px #0007}
.settings-icon svg{display:none}
#settingsBtn{background:url(/assets/ui/icons/cog.webp) center/68% no-repeat,radial-gradient(circle,#1d2b25,#0b1210)}
.dialogue-symbol:not(.ui-ico){font-size:0;background:url(/assets/ui/frames/jewel.webp) center/34% no-repeat,radial-gradient(circle,#24352c,#0b1210)}
.dialogue-symbol.ui-ico{font-size:0;background:var(--icon) center/70% no-repeat,radial-gradient(circle,#24352c,#0b1210)}
.compass{top:24px;transform:translateX(-50%);width:300px;height:30px;padding:0 18px;opacity:.95;font:700 11px var(--f-caps);letter-spacing:.18em;color:var(--paper);background:radial-gradient(ellipse at center,#0b1210b3,transparent 72%);text-shadow:0 1px 3px #000}
.compass b{font:700 15px var(--f-caps);color:var(--gold-300)}
.compass i{height:8px;border-left:1px solid #f3dc9b66}
.compass em{bottom:-14px;font-size:12px;color:var(--gold-400)}

/* ---------- exploration HUD: quest tracker, minimap + clock, prompts ---------- */
.quest.panel,.quest{position:absolute;left:max(24px,env(safe-area-inset-left));top:88px;width:min(330px,40vw);padding:10px 16px 12px 18px;background:none;backdrop-filter:none;border:0;transition:opacity .4s}
.quest::before{content:"";position:absolute;inset:-6px -40px -6px -26px;z-index:-1;background:url(/assets/ui/frames/inkb-5.webp) left center/100% 100% no-repeat;opacity:.62}
.quest .eyebrow{font:700 10px var(--f-caps);letter-spacing:.2em;color:var(--gold-400)}
.quest .eyebrow>span:first-child{display:inline-block;width:10px;height:10px;font-size:0;background:url(/assets/ui/frames/jewel.webp) center/contain no-repeat}
.quest h2{font:400 22px/1.2 var(--f-display);color:#fff3d6;margin:8px 0 4px;text-shadow:0 2px 0 #000,0 0 12px #000}
.quest p{font:500 13px/1.5 var(--f-ui);color:#dcdcc8;margin:0;text-shadow:0 1px 4px #000;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#objectiveNavigation{gap:8px;margin:4px 0 6px;font:800 13px var(--f-ui);color:var(--gold-300);text-shadow:0 1px 4px #000}
#objectiveArrow{font-size:20px;color:#ffb35a}
.quest-progress{margin-top:8px;opacity:.85}
.progress-track{height:3px;background:#0008;margin-bottom:6px}
.progress-track i{height:3px;background:linear-gradient(90deg,var(--gold-600),var(--gold-300))}
.quest-progress small{font:600 11px var(--f-ui);color:var(--text-dim)}
.quest-progress b{color:var(--gold-300)}
body.in-combat .quest{opacity:.28}
.location{display:none}
body:not(.playing) .location{display:none}
.map-corner{--d:172px;position:absolute;top:18px;bottom:auto;right:max(22px,env(safe-area-inset-right));width:auto;z-index:7;display:flex;flex-direction:column;align-items:center}
body[data-map=small] .map-corner{--d:150px}
body[data-map=large] .map-corner{--d:236px}
.map-corner::before{content:"";position:absolute;z-index:2;top:calc(var(--d) * -.12);left:50%;width:calc(var(--d) * 1.24);height:calc(var(--d) * 1.24);transform:translateX(-50%);background:url(/assets/ui/frames/frame-compass.webp) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 3px 5px #000a)}
.minimap,body[data-map] .minimap{position:relative;display:block;width:var(--d);height:var(--d);padding:0;border:0;border-radius:50%;overflow:hidden;background:#263a2e;box-shadow:0 8px 26px #000a}
.minimap::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;box-shadow:inset 0 0 18px #000c;pointer-events:none}
.minimap canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:1}
.minimap>span{display:none}
.map-caption{margin-top:20px;gap:7px;padding:4px 10px;border-radius:999px;background:#0b1210cc;border:1px solid var(--line-gold);font:700 11px var(--f-caps);letter-spacing:.06em;color:var(--paper)}
.map-caption>span:first-child{display:none}
.map-caption kbd{height:18px;min-width:18px;font-size:10px;margin-left:4px}
.clock-hud{position:fixed;top:auto;left:auto;right:max(22px,env(safe-area-inset-right));transform:none;padding:4px 12px;border:1px solid var(--line-gold);background:#0b1210cc;font:700 12px/1.4 var(--f-ui);color:var(--paper);letter-spacing:.03em;z-index:7;text-align:center}
body.playing .clock-hud{top:calc(18px + 172px + 64px)}
body.playing[data-map=small] .clock-hud{top:calc(18px + 150px + 64px)}
body.playing[data-map=large] .clock-hud{top:calc(18px + 236px + 64px)}
body.playing[data-map=hidden] .clock-hud,body.playing.hide-minimap .clock-hud{top:22px;right:max(22px,env(safe-area-inset-right))}
.clock-hud[data-night='1']{background:#0b1230d9;color:#d5ddff;border-color:#8ea0ff55}
.status{left:max(22px,env(safe-area-inset-left));bottom:14px;font:600 11px var(--f-ui);color:var(--text-mute)}
.controls-strip{display:none}
#interaction{bottom:30%}
#interactBtn{gap:12px;padding:10px 24px 10px 12px;border-radius:999px;border:1px solid var(--gold-500);background:linear-gradient(#18241ff2,#0b1210f2);font:700 14px var(--f-caps);letter-spacing:.06em;color:var(--paper);box-shadow:0 8px 24px #000a}
#interactBtn kbd{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#fbf3de,#d8c393);border:2px solid var(--gold-500);color:var(--ink-900);font:800 15px var(--f-ui)}
#toast{top:27%;padding:13px 46px;border:0;background:url(/assets/ui/frames/inkb-2.webp) center/100% 100% no-repeat;font:600 15px/1.4 var(--f-serif);color:#fff1d2;text-shadow:0 2px 3px #000;max-width:min(640px,90vw)}
#joystick{border:2px solid #c9a35a88;background:radial-gradient(circle,#0b121066,#0b121022)}
#joystick i{background:radial-gradient(circle,#fbf3de,#c9a35a);border:2px solid var(--gold-500);box-shadow:0 4px 10px #000a}
.touch-actions button{border:2px solid var(--gold-500);background:radial-gradient(circle,#1d2b25e6,#0b1210e6);color:var(--gold-300);font-weight:800}

/* ---------- panels and dialogs ---------- */
.modal{background:url(/assets/ui/frames/paper.webp) center/512px repeat,var(--panel-bg);background-blend-mode:soft-light,normal;border:1px solid var(--gold-600);border-radius:10px;box-shadow:0 30px 100px #000c,inset 0 0 0 4px #0b1210,inset 0 0 0 5px #c9a35a33,inset 0 0 60px #000a;color:var(--text);padding:30px 32px}
dialog::backdrop{background:radial-gradient(ellipse at center,#0b1210aa,#050807e0);backdrop-filter:blur(6px)}
.modal-head{position:relative;margin-bottom:18px;padding-bottom:24px;gap:14px}
.modal-head>div:first-child{min-width:0}
.modal-head .head-actions,.modal-head>.close{flex-shrink:0}
.modal-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:url(/assets/ui/frames/divider.webp) left center/auto 100% no-repeat;opacity:.8}
.modal-head h2{font:400 34px/1.15 var(--f-display);color:var(--gold-300);margin:6px 0 0;text-shadow:0 2px 0 #000}
.modal p{font:500 14px/1.7 var(--f-ui);color:var(--text-dim)}
.modal h3{font-family:var(--f-caps)}
.inventory-tabs{gap:4px;border-bottom:1px solid var(--line)}
.inventory-tabs [role=tab]{min-height:46px;padding:12px 18px;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;background:transparent;font:700 12px var(--f-caps);letter-spacing:.12em;color:var(--text-dim)}
.inventory-tabs [aria-selected=true]{background:linear-gradient(#c9a35a22,transparent);border-bottom-color:var(--gold-400);color:var(--gold-300)}
.inventory-map-heading h3{font:400 24px var(--f-display);color:var(--gold-300)}
.inventory-map-heading small,.map-zoom-controls small,.inventory-legend span{font:500 12px var(--f-ui);color:var(--text-dim)}
.map-wrap{border:1px solid var(--gold-600);border-radius:6px;box-shadow:inset 0 0 30px #000a;outline:3px solid #0b1210;outline-offset:0}
.inventory-item{gap:20px;padding:18px 20px;border-radius:8px;border:1px solid var(--line-gold);background:linear-gradient(#18241ecc,#0d1411cc)}
.inventory-item-icon{width:64px;height:64px;border-radius:10px;border:1px solid var(--gold-600);background:radial-gradient(circle,#2b3a32,#0f1714);font:34px var(--f-serif);color:var(--gold-300)}
.inventory-item-icon.ui-ico{font-size:0;background:var(--icon) center/84% no-repeat,radial-gradient(circle,#2b3a32,#0f1714)}
.inventory-item h3{font:700 18px var(--f-caps);letter-spacing:.03em;color:var(--paper)}
.inventory-item p{font:500 13px/1.6 var(--f-ui)}
.inventory-footnote{font:600 12px var(--f-ui);color:var(--text-mute)}
.journal-entry>span{font:400 26px var(--f-display);color:var(--gold-400)}
.journal-entry h3{font:700 17px var(--f-caps);color:var(--paper)}
.journal-entry small{font:500 12px var(--f-ui);color:var(--text-mute)}
#journalEntries>p{font:500 14px/1.65 var(--f-ui);color:var(--text-dim);margin:0 0 10px}
/* journal: quests as cards with painted icons (compass = main line, scroll = side quest, laurel = done) */
#journalEntries>p,#journalEntries>h3,#journalEntries>button,#journalEntries>article{grid-column:1/-1}
.journal-section{display:flex;align-items:center;gap:12px;margin:22px 0 10px;font:700 12px var(--f-caps);letter-spacing:.2em;color:var(--gold-400)}
.journal-section::after{content:"";flex:1;height:12px;background:url(/assets/ui/frames/divider.webp) left center/auto 100% no-repeat;opacity:.6}
.journal-quest{position:relative;margin:0 0 10px;padding:14px 16px 14px 70px;min-height:64px;border-radius:8px;border:1px solid var(--line-gold);background:linear-gradient(#18241ecc,#0d1411cc)}
.journal-quest.ui-ico::before{content:"";position:absolute;left:12px;top:12px;width:44px;height:44px;border-radius:50%;background:var(--icon) center/70% no-repeat,radial-gradient(circle,#fbf3de,#d8c393);border:2px solid var(--gold-500)}
.journal-quest.active{border-color:var(--gold-500);box-shadow:inset 0 0 0 1px #e2c47a22}
.journal-quest h4{margin:2px 0 6px;font:700 15px var(--f-caps);letter-spacing:.03em;color:var(--gold-300)}
.journal-quest p{margin:0 0 6px;font:500 14px/1.55 var(--f-ui);color:var(--text)}
.journal-quest small{font:600 12px var(--f-ui);color:var(--gold-400)}
.journal-quest.done{opacity:.72;min-height:0;padding-top:10px;padding-bottom:10px}
.journal-quest.done h4{margin:0;color:var(--text-dim)}
.journal-quest.done.ui-ico::before{top:50%;width:34px;height:34px;transform:translateY(-50%);left:16px}
#journalEntries>p.journal-relic{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:600 14px var(--f-ui);color:var(--text)}
.journal-relic.ui-ico::before{content:"";width:24px;height:24px;flex-shrink:0;background:var(--icon) center/contain no-repeat}
.journal-relic.missing{color:var(--text-mute)}
.journal-relic.missing::before{filter:grayscale(1) brightness(.6)}
/* exploration window: a painted icon per place */
.expedition-modal section h3.ui-ico{display:flex;align-items:center;gap:10px}
.expedition-modal section h3.ui-ico::before{content:"";width:34px;height:34px;flex-shrink:0;background:var(--icon) center/contain no-repeat}
.expedition-modal .expedition-result{padding:12px 16px;border-left:3px solid var(--gold-500);background:#0b1210aa;font:500 15px/1.6 var(--f-serif);color:var(--paper)}
.binding-grid>div{font:500 13px var(--f-ui);color:var(--text-dim)}
.help-modal .guide-art{border-radius:6px;border:1px solid var(--gold-600)}
.map-scale{font:600 11px var(--f-ui);border-radius:4px}

/* NPC dialogue (E33: portrait column, ink, serif voice) */
.dialogue{bottom:60px;width:min(760px,calc(100vw - 32px));padding:28px 34px 22px;border:1px solid var(--gold-600);border-radius:10px;background:url(/assets/ui/frames/paper.webp) center/512px repeat,linear-gradient(160deg,#15211cf7,#090f0dfa);background-blend-mode:soft-light,normal;box-shadow:0 26px 70px #000c,inset 0 0 0 4px #0b1210,inset 0 0 0 5px #c9a35a33}
.dialogue::before{content:"";position:absolute;left:10px;top:10px;width:70px;height:70px;background:url(/assets/ui/frames/corner.webp) top left/contain no-repeat;opacity:.7;pointer-events:none}
.dialogue-symbol{display:grid;place-items:center;align-self:flex-start;min-width:64px;height:64px;margin-top:22px;border-radius:50%;border:2px solid var(--gold-500);background:radial-gradient(circle,#24352c,#0b1210);font:400 30px var(--f-display);color:var(--gold-300)}
.dialogue .eyebrow{font:700 10px var(--f-caps);letter-spacing:.24em}
.dialogue h2{font:400 32px/1.15 var(--f-display);color:var(--gold-300);margin:6px 0 10px;text-shadow:0 2px 0 #000}
.dialogue p{font:500 18px/1.7 var(--f-serif);color:#ece3cc}
.dialogue .text-btn{color:var(--gold-300)}
.shop-offers{gap:10px}
.shop-offers p{font:700 12px var(--f-caps)!important;letter-spacing:.12em;color:var(--gold-400)!important}
.shop-offers button{position:relative;padding:10px 14px;min-height:48px;border:1px solid var(--gold-600);border-radius:8px;background:linear-gradient(#1b2923,#0e1613);font:600 13px var(--f-ui);color:var(--paper)}
.shop-offers button.ui-ico{padding-left:52px}
.shop-offers button.ui-ico::before{content:"";position:absolute;left:8px;top:50%;width:34px;height:34px;transform:translateY(-50%);background:var(--icon) center/contain no-repeat}
.expedition-modal h3{font:700 16px var(--f-caps);letter-spacing:.06em;color:var(--gold-300)}
.expedition-modal section{border-top:1px solid var(--line)}
.expedition-modal button{border-radius:8px;border:1px solid var(--gold-600);background:linear-gradient(#1b2923,#0e1613);font:600 13px var(--f-ui);color:var(--paper)}
.expedition-modal input{border-radius:6px;border:1px solid var(--gold-600);background:var(--ink-900);font:500 14px var(--f-ui)}
.book-page{border-radius:4px;background:linear-gradient(180deg,#f4e8c8,#e3d0a4);box-shadow:inset 0 0 60px #a8875a88,0 12px 30px #000a}
.book-page h3{font:700 11px var(--f-caps);letter-spacing:.22em;color:#7b5b35}
.book-page p{font:500 19px/1.75 var(--f-serif);color:#3a2b1b}
.book-nav{font:600 12px var(--f-ui)}

/* settings */
.settings-modal{padding:26px 28px}
.equipment-menu-entry{position:relative;padding:16px 18px 16px 72px;border:1px solid var(--gold-500);border-radius:10px;background:linear-gradient(#22322a,#111b17);font:700 17px var(--f-caps);letter-spacing:.06em;color:var(--gold-300)}
.equipment-menu-entry::before{content:"";position:absolute;left:14px;top:50%;width:44px;height:44px;transform:translateY(-50%);background:url(/assets/ui/icons/item-ironSword.webp) 30% 30%/70% no-repeat,url(/assets/ui/icons/item-ironShield.webp) 80% 80%/62% no-repeat}
.equipment-menu-entry span{font:500 12px var(--f-ui);letter-spacing:0;color:var(--text-dim)}
.equipment-menu-entry{display:flex;align-items:center;justify-content:space-between}
.settings-note{font:500 13px/1.6 var(--f-ui)!important}
.settings-section legend{font:700 11px var(--f-caps);letter-spacing:.2em;color:var(--gold-400)}
.setting-label,.setting-toggle,.setting-select,.binding-row{font:600 14px var(--f-ui);color:var(--text)}
.setting-label output{font:800 14px var(--f-ui);color:var(--gold-300)}
.setting-range small,.setting-toggle small{font:500 12px/1.5 var(--f-ui);color:var(--text-mute)}
.setting-range input,.setting-toggle input{accent-color:var(--gold-500)}
.setting-select select,.preset-save input{border-radius:6px;border:1px solid var(--gold-600);background:var(--ink-900);font:600 13px var(--f-ui)}
.preset-row button{border-radius:8px;font:700 12px var(--f-caps);letter-spacing:.06em}
.preset-row button small{font:500 11px var(--f-ui);letter-spacing:0}
.preset-row button[aria-pressed=true]{border-color:var(--gold-400);background:linear-gradient(#2b3d30,#16211b);box-shadow:inset 0 0 0 1px #e2c47a44}
.binding-row button{border-radius:6px;border-color:var(--gold-600);font:700 13px var(--f-ui)}
.binding-row button.capturing{border-color:var(--gold-300);background:#3d4a2e}
.settings-actions button,.binding-actions button,.preset-save button,.settings-modal #fullscreenBtn,#measurePerformance{border-radius:8px;font:700 12px var(--f-caps);letter-spacing:.1em;min-height:44px}
.settings-actions #settingsDone{background:linear-gradient(#f3dc9b,#c9a35a);color:var(--ink-900);border-color:#fbedc0}
.settings-footer,.preset-current,.preset-message{font:500 12px var(--f-ui)!important}
.credits-link{font:700 13px var(--f-ui);color:var(--gold-300)}
/* controller section in Settings (gamepad.js) */
.gamepad-status{font:500 13px/1.5 var(--f-ui)!important;color:var(--text-dim)!important;margin:0 0 10px}
.gamepad-map{display:grid;gap:6px;margin-top:8px}
.gamepad-row{display:flex;align-items:center;gap:12px;font:600 13px var(--f-ui);color:var(--text)}
.gamepad-glyphs{display:flex;gap:4px;min-width:64px;flex-wrap:wrap}
.pad-glyph{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:13px;border:1.5px solid var(--gold-600);background:radial-gradient(circle,#24352c,#0b1210);font:800 12px/1 var(--f-ui);color:var(--paper)}
.pad-b0,.pad-b1,.pad-b2,.pad-b3{width:26px;padding:0;border-radius:50%}
.pad-xbox.pad-b0{color:#86e07a}.pad-xbox.pad-b1{color:#ff7a6a}.pad-xbox.pad-b2{color:#6fb6ff}.pad-xbox.pad-b3{color:#ffd65a}
.pad-ps.pad-b0{color:#8fb8ff}.pad-ps.pad-b1{color:#ff7f8a}.pad-ps.pad-b2{color:#f39ad8}.pad-ps.pad-b3{color:#62d6b0}
.pad-b12,.pad-b13,.pad-b14,.pad-b15{border-radius:5px}
.pad-bls,.pad-brs{width:26px;padding:0;border-radius:50%;background:radial-gradient(circle,#3a4a40 30%,#0b1210 70%)}

/* equipment */
.equipment-modal .modal-head h2{font-size:34px}
#equipmentHero{font:700 14px var(--f-caps)!important;letter-spacing:.1em;color:var(--gold-300)!important}
.hero-stats{gap:8px}
.hero-stats div{position:relative;padding:12px 14px;border-radius:8px;border:1px solid var(--line-gold);background:linear-gradient(#18241ecc,#0d1411cc)}
.hero-stats div.ui-ico{padding-left:52px}
.hero-stats div.ui-ico::before{content:"";position:absolute;left:10px;top:50%;width:32px;height:32px;transform:translateY(-50%);background:var(--icon) center/contain no-repeat}
.hero-stats small{font:700 10px var(--f-caps);letter-spacing:.12em;color:var(--gold-400)}
.hero-stats b~small{margin-top:4px;font:500 12px/1.45 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--text-dim)}
.hero-stats b{font:800 22px var(--f-ui);font-variant-numeric:tabular-nums;color:var(--paper)}
.hero-stats button{margin-top:8px;padding:7px 10px;border-radius:6px;font:700 11px var(--f-caps);letter-spacing:.06em;color:var(--gold-300)}
#heroAttributes h3,.equipment-slots h3,.companion-section h3{font:700 14px var(--f-caps);letter-spacing:.14em;color:var(--gold-300)}
.equipment-slots h3.ui-ico{display:flex;align-items:center;gap:8px}
.equipment-slots h3.ui-ico::before{content:"";width:26px;height:26px;background:var(--icon) center/contain no-repeat}
#heroAttributes p,.companion-section p{font:500 13px var(--f-ui);color:var(--text-dim)}
.hero-affinities{font:500 13px var(--f-ui)}
.hero-affinities span{border-radius:999px;font:700 11px var(--f-ui)}
.equipment-slots section,.companion-section{border-radius:10px;border:1px solid var(--line-gold);background:linear-gradient(#16231ecc,#0b1210cc)}
.equipped-name{font:600 14px var(--f-ui)}
.equipped-name.ui-ico{display:flex;align-items:center;gap:8px}
.equipped-name.ui-ico::before{content:"";flex-shrink:0;width:30px;height:30px;background:var(--icon) center/contain no-repeat}
.equipment-slots button{position:relative;border-radius:8px;border-color:#c9a35a33;background:linear-gradient(#1b2923,#0f1714)}
.equipment-slots button.ui-ico{padding-left:66px;min-height:64px}
.equipment-slots button.ui-ico::before{content:"";position:absolute;left:8px;top:8px;width:48px;height:48px;border-radius:8px;background:var(--icon) center/86% no-repeat,radial-gradient(circle,#2b3a32,#0f1714);border:1px solid #c9a35a44}
.equipment-slots button b{font:700 14px var(--f-caps);letter-spacing:.02em}
.equipment-slots small{font:500 12px/1.5 var(--f-ui)}
.equipment-slots button[aria-pressed=true]{border-color:var(--gold-400);background:linear-gradient(#2b3d30,#16211b);box-shadow:inset 0 0 0 1px #e2c47a33}
.equipment-slots .socket-row button.ui-ico{padding-left:44px;min-height:40px}
.equipment-slots .socket-row button.ui-ico::before{width:28px;height:28px;top:50%;transform:translateY(-50%);border:0;background:var(--icon) center/contain no-repeat}
.companion-section button{border-radius:8px;font:700 12px var(--f-caps)}
.equipment-portrait{border:1px solid var(--gold-600);border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#3d5a48,#0d1612 75%);box-shadow:inset 0 0 0 4px #0b1210,inset 0 0 0 5px #c9a35a33}
.equipment-portrait figcaption{font:400 26px var(--f-display);color:var(--gold-300)}
.equipment-portrait small{font:500 12px var(--f-ui)}

/* ---------- hero select ---------- */
.class-backdrop{background:radial-gradient(ellipse at 50% 0,#2a3f33dd,#070c0bf7 70%)}
.class-panel{border:1px solid var(--gold-600);border-radius:12px;background:url(/assets/ui/frames/paper.webp) center/512px repeat,linear-gradient(170deg,#15211cf7,#080d0bfa);background-blend-mode:soft-light,normal;box-shadow:0 30px 90px #000c,inset 0 0 0 4px #0b1210,inset 0 0 0 5px #c9a35a33}
.class-panel .eyebrow{font:700 11px var(--f-caps);letter-spacing:.26em}
.class-panel h2{font:400 46px/1.1 var(--f-display);color:var(--gold-300);margin:12px 0 6px;text-shadow:0 3px 0 #000}
.class-panel header p{font:500 15px/1.6 var(--f-ui);color:var(--text-dim)}
.class-panel header::after{content:"";display:block;width:320px;max-width:80%;height:22px;margin:14px auto 0;background:url(/assets/ui/frames/divider.webp) center/contain no-repeat}
.class-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.class-card{--tint:#3c5a48;position:relative;overflow:hidden;padding:212px 14px 14px;min-height:0;border:1px solid #c9a35a33;border-radius:10px;background:linear-gradient(180deg,transparent 0,transparent 170px,#0d1512 214px),radial-gradient(ellipse 90% 60% at 50% 22%,var(--tint),#0d1512 70%);transition:transform .2s,border-color .2s,box-shadow .2s}
.class-card::before{content:"";position:absolute;left:0;right:0;top:6px;height:206px;background:var(--art) center bottom/contain no-repeat;filter:drop-shadow(0 8px 10px #000b) saturate(.85);transition:transform .3s,filter .3s;pointer-events:none}
.class-card:hover{transform:translateY(-3px);border-color:var(--gold-500)}
.class-card:hover::before{transform:scale(1.03)}
.class-card[aria-checked=true]{border-color:var(--gold-300);background:linear-gradient(180deg,transparent 0,transparent 170px,#111c17 214px),radial-gradient(ellipse 90% 60% at 50% 22%,var(--tint),#0d1512 75%);box-shadow:0 0 0 1px #f3dc9b88,0 0 34px #e2c47a33,0 18px 40px #000a}
.class-card[aria-checked=true]::before{filter:drop-shadow(0 8px 12px #000b) drop-shadow(0 0 18px #f3dc9b55) saturate(1.05)}
.class-card[data-class-id=archer]{--tint:#4f7a46;--art:url(/assets/ui/heroes/archer.webp)}
.class-card[data-class-id=mage]{--tint:#2c6a7c;--art:url(/assets/ui/heroes/mage.webp)}
.class-card[data-class-id=necromancer]{--tint:#5b3b70;--art:url(/assets/ui/heroes/necromancer.webp)}
.class-card[data-class-id=warrior]{--tint:#7a3a2a;--art:url(/assets/ui/heroes/warrior.webp)}
.class-card[data-class-id=samurai]{--tint:#7c6430;--art:url(/assets/ui/heroes/samurai.webp)}
.class-emblem{position:absolute;left:10px;top:164px;width:44px;height:44px;margin:0;border:0;font-size:0!important;background:center/contain no-repeat;filter:drop-shadow(0 3px 5px #000c)}
.class-card[data-class-id=archer] .class-emblem{background-image:url(/assets/ui/icons/crest-archer.webp)}
.class-card[data-class-id=mage] .class-emblem{background-image:url(/assets/ui/icons/crest-mage.webp)}
.class-card[data-class-id=necromancer] .class-emblem{background-image:url(/assets/ui/icons/crest-necromancer.webp)}
.class-card[data-class-id=warrior] .class-emblem{background-image:url(/assets/ui/icons/crest-warrior.webp)}
.class-card[data-class-id=samurai] .class-emblem{background-image:url(/assets/ui/icons/crest-samurai.webp)}
.class-head b{font:400 19px/1.15 var(--f-display);color:var(--gold-300)}
.class-head em{font:700 10px var(--f-caps);letter-spacing:.14em;color:var(--paper);margin-top:6px}
.class-level{font:700 11px var(--f-caps);letter-spacing:.08em;border:1px solid var(--gold-600);background:#0b1210cc;color:var(--gold-300)}
.class-story{font:italic 500 13px/1.45 var(--f-serif);color:#d9d2bd;opacity:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.class-blurb{font:500 13px/1.45 var(--f-ui);color:var(--text-dim);min-height:0;margin:6px 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.class-card[aria-checked=true] .class-story,.class-card[aria-checked=true] .class-blurb{-webkit-line-clamp:5}
.class-stats{margin-bottom:10px}
.class-stats span{padding:6px 10px;border-radius:8px;border:1px solid var(--line-gold);background:#0b1210aa}
.class-stats small{font:700 9px var(--f-caps);letter-spacing:.14em;color:var(--gold-400)}
.class-stats strong{font:800 22px var(--f-ui);color:var(--paper)}
.class-skills-title{font:700 10px var(--f-caps);letter-spacing:.18em;color:var(--gold-400);border-top:1px solid var(--line)}
.class-skills{gap:5px}
.class-skills li{min-height:28px;padding-left:34px;font:500 12px/1.4 var(--f-ui);color:var(--text-dim)}
.class-skills li small{display:none}
.class-skills li:hover small{display:block}
.class-skills li b{font:700 13px var(--f-ui);color:var(--paper)}
.class-skills li small{font-size:11px;color:var(--text-mute)}
.class-skills li:before{content:"";left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--icon,url(/assets/ui/frames/jewel.webp)) center/80% no-repeat,radial-gradient(circle,#fbf3de,#d8c393);border:1.5px solid var(--gold-500)}
.class-skills li b{padding-top:4px}
.class-note{font:500 13px var(--f-ui);color:var(--text-mute)}
/* the confirm button stays in view while the cards scroll */
.class-panel footer{position:sticky;bottom:-32px;z-index:3;margin:20px -34px -32px;padding:16px 34px 22px;border-top:1px solid var(--line);background:linear-gradient(180deg,#0b1210d9,#0b1210 40%)}

@media(max-height:1000px) and (min-width:601px){
 .class-select{padding:16px}
 .class-panel{padding:20px 24px 18px;max-height:96dvh}
 .class-panel header{margin-bottom:14px}
 .class-panel h2{font-size:34px;margin:6px 0 2px}
 .class-panel header p{display:none}
 .class-panel header::after{margin-top:6px;height:16px}
 .class-card{padding-top:180px}
 .class-card::before{height:176px}
 .class-emblem{top:136px}
 .class-story,.class-blurb{-webkit-line-clamp:2}
 .class-card[aria-checked=true] .class-story,.class-card[aria-checked=true] .class-blurb{-webkit-line-clamp:3}
 .class-panel footer{bottom:-18px;margin:14px -24px -18px;padding:12px 24px 16px}
}
/* Hero select as an accordion (rodada 2: no scrolling at 720 px): five slim cards with the painted hero; the chosen
   one widens and shows story, numbers and skills beside the art. Phones keep the stacked list. */
@media(min-width:701px){
 .class-select{padding:14px}
 .class-panel{display:flex;flex-direction:column;width:min(1240px,100%);max-height:calc(100dvh - 28px);padding:18px 24px 0;overflow:hidden}
 .class-panel header{flex-shrink:0;margin-bottom:12px}
 .class-panel h2{font-size:clamp(28px,4.2vh,40px);margin:4px 0 0}
 .class-panel header p{display:none}
 .class-panel header::after{margin-top:4px;height:14px}
 .class-grid{flex:1;min-height:0;display:flex;gap:10px;align-items:stretch}
 .class-card{flex:1 1 0;min-width:0;padding:calc(var(--art-h) + 8px) 12px 12px;--art-h:clamp(150px,30vh,250px);overflow:hidden;transition:flex-grow .35s ease,transform .2s,border-color .2s,box-shadow .2s}
 .class-card::before{height:var(--art-h)}
 .class-emblem{top:calc(var(--art-h) - 42px)}
 .class-head b{font-size:clamp(14px,2.1vh,17px)}
 .class-card[aria-checked=true] .class-head b{font-size:clamp(17px,2.6vh,22px)}
 .class-story,.class-blurb,.class-skills-title,.class-skills{display:none}
 .class-card:not([aria-checked=true]) .class-stats{display:none}
 .class-stats{gap:6px;margin:8px 0 0}
 .class-stats span{padding:4px 8px}
 .class-stats strong{font-size:18px}
 .class-card[aria-checked=true]{flex-grow:2.7;padding:14px 14px 12px 43%}
 .class-card[aria-checked=true]::before{top:0;bottom:0;left:0;right:auto;width:43%;height:auto;background-position:center bottom;background-size:contain}
 .class-card[aria-checked=true] .class-emblem{top:auto;bottom:12px;left:12px}
 .class-card[aria-checked=true] .class-story,.class-card[aria-checked=true] .class-blurb{display:-webkit-box;-webkit-line-clamp:3}
 .class-card[aria-checked=true] .class-skills-title{display:block;padding-top:8px;margin-bottom:6px}
 .class-card[aria-checked=true] .class-skills{display:flex;gap:4px}
 .class-card[aria-checked=true] .class-skills li{min-height:26px}
 .class-card:not([aria-checked=true]):hover{transform:translateY(-3px)}
 .class-panel footer{position:static;flex-shrink:0;margin:10px -24px 0;padding:10px 24px 14px;bottom:auto}
}
@media(min-width:701px) and (max-height:760px){
 .class-card[aria-checked=true] .class-story{-webkit-line-clamp:2}
 .class-card[aria-checked=true] .class-blurb{display:none}
}
@media(min-width:701px) and (max-width:1000px){
 .class-card{padding-left:8px;padding-right:8px}
 .class-head em{font-size:9px;letter-spacing:.08em}
 .class-card:not([aria-checked=true]) .class-head{display:none}
 .class-card:not([aria-checked=true]){padding:0}
 .class-card:not([aria-checked=true])::before{top:6px;bottom:58px;height:auto}
 .class-card:not([aria-checked=true]) .class-emblem{top:auto;bottom:10px;left:50%;transform:translateX(-50%)}
 .class-card[aria-checked=true]{flex-grow:3.2;padding-left:40%}
 .class-card[aria-checked=true]::before{width:40%}
 .class-stats strong{font-size:16px}
}
body:has(#tacticalPanel:not([hidden])) .quest{opacity:0}

/* ---------- responsive ---------- */
@media(max-width:900px){
 .compass{display:none}
 .quest{top:76px;width:min(290px,46vw)}
 .quest h2{font-size:19px}
 .map-corner{--d:140px}
 body[data-map=small] .map-corner{--d:124px}
 body[data-map=large] .map-corner{--d:200px}
 body.playing .clock-hud{top:calc(18px + 140px + 60px)}
 body.playing[data-map=small] .clock-hud{top:calc(18px + 124px + 60px)}
 body.playing[data-map=large] .clock-hud{top:calc(18px + 200px + 60px)}
 .nav-btn{padding:0 8px 0 44px}
 .nav-btn kbd{display:none}
}
@media(max-width:600px){
 .topbar{padding:12px}
 .nav-btn{width:40px;height:40px;padding:0;font-size:0}
 .nav-btn::before{left:2px;width:34px;height:34px}
 .help-icon{width:38px;height:38px}
 .quest{display:none}
 .map-corner{top:10px}
 .map-corner,body[data-map=small] .map-corner{--d:96px}
 body[data-map=large] .map-corner{--d:150px}
 .map-caption{display:none}
 body.playing .clock-hud{top:calc(10px + 92px + 18px);font-size:11px;padding:3px 8px}
 body.playing[data-map=large] .clock-hud{top:calc(10px + 150px + 22px)}
 #intro h1{font-size:76px}
 .primary{min-width:250px;height:58px}
 .modal{padding:20px 18px}
 #toast{top:40%}
 .modal-head h2{font-size:26px}
 .modal-head h2{font-size:28px}
 .dialogue{padding:20px 20px 16px}
 .dialogue p{font-size:16px}
 .class-card{padding-top:206px}
 .class-card::before{height:200px}
 .class-emblem{top:160px}
 .class-panel h2{font-size:32px}
 .class-panel footer{bottom:-22px;margin:14px -18px -22px;padding:12px 18px 16px}
}
@media(pointer:coarse){.map-corner{bottom:auto}}