/* Combat HUD — identity v3 (06/10/2026, frente H). Painted fantasy: aged gold + black ink, clear like FF7R/Xenoblade,
   light like BotW. Tokens (--gold-*, --ink-*, --f-*) live in /assets/ui/theme.css; art in /assets/ui/.
   Hero panel bottom-right, target plate top-centre, round skills bottom-centre, potions above the hero panel. */

/* ---------- hero panel (#vitals) ---------- */
.vitals{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:6;width:var(--hero-w,404px);display:grid;grid-template-columns:var(--medal,104px) 1fr;column-gap:16px;align-items:center;padding:16px 18px 14px 12px;pointer-events:none;color:var(--text,#f1e9d4);font-family:var(--f-ui)}
.vitals::before{content:"";position:absolute;inset:-22px -26px -18px -64px;z-index:-1;background:url(/assets/ui/frames/inkb-3.webp) center/100% 100% no-repeat;transform:scaleX(-1);opacity:.93}
.vitals::after{content:"";position:absolute;left:96px;right:4px;bottom:-4px;height:14px;background:url(/assets/ui/frames/divider.webp) center/contain no-repeat;opacity:.55}
.hero-medallion{position:relative;grid-row:1/3;width:var(--medal,104px);aspect-ratio:1;border-radius:50%}
.hero-face{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#4c6b5a,#14231c) center/cover;box-shadow:inset 0 0 18px #000a,0 0 0 2px #0b1210;overflow:hidden}
.hero-face::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 -14px 22px #0009}
.hero-ring{position:absolute;inset:-10%;background:url(/assets/ui/frames/frame-medallion.webp) center/contain no-repeat;filter:drop-shadow(0 3px 6px #000b)}
body[data-hero=archer] .hero-face{background-image:url(/assets/ui/portraits/archer-face.webp)}
body[data-hero=mage] .hero-face{background-image:url(/assets/ui/portraits/mage-face.webp)}
body[data-hero=necromancer] .hero-face{background-image:url(/assets/ui/portraits/necromancer-face.webp)}
body[data-hero=warrior] .hero-face{background-image:url(/assets/ui/portraits/warrior-face.webp)}
body[data-hero=samurai] .hero-face{background-image:url(/assets/ui/portraits/samurai-face.webp)}
.level-badge{position:absolute;left:calc(12px + var(--medal,104px)/2);top:calc(16px + var(--medal,104px) - 14px);transform:translateX(-50%);z-index:2;display:flex;align-items:baseline;gap:3px;padding:2px 10px 3px;border-radius:999px;background:linear-gradient(#1b2620,#0b110f);border:1.5px solid var(--gold-500,#c9a35a);box-shadow:0 2px 8px #000c;white-space:nowrap}
.level-badge small{font:700 9px var(--f-caps);letter-spacing:.12em;color:var(--gold-400,#e2c47a)}
.level-badge strong{font:700 17px/1 var(--f-caps);color:var(--gold-300,#f3dc9b);text-shadow:0 1px 3px #000}
.vital-bars{min-width:0;display:flex;flex-direction:column}
.hero-title{display:flex;align-items:baseline;gap:9px;margin:0 0 3px;white-space:nowrap;overflow:hidden}
.hero-name{font:700 16px var(--f-caps);letter-spacing:.1em;color:var(--gold-300,#f3dc9b);text-shadow:0 2px 6px #000}
.hero-class{font:500 12px var(--f-ui);color:var(--text-dim,#c5c7b2);letter-spacing:.04em}
.vital-head{display:flex;align-items:baseline;justify-content:space-between;line-height:1;margin:3px 2px 3px}
.vital-tag{display:inline-flex;align-items:center;gap:5px;font:700 10px var(--f-caps);letter-spacing:.16em;color:var(--gold-400,#e2c47a);text-shadow:0 1px 3px #000}
.hp-head .vital-tag::before,.mana-head .vital-tag::before{content:"";width:20px;height:20px;background:url(/assets/ui/icons/heart.webp) center/contain no-repeat;filter:drop-shadow(0 1px 2px #000)}
.mana-head .vital-tag::before{width:16px;height:16px;background-image:url(/assets/ui/icons/mana.webp)}
.vital-num{font-family:var(--f-ui);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 2px 0 #000,0 0 8px #000c}
.vital-now{font-weight:900;font-size:30px;color:#fff6e4;letter-spacing:.01em}
.vital-max{font-weight:700;font-size:14px;color:#d8cdb4;margin-left:4px}
.mana-head .vital-now{font-size:17px;font-weight:800;color:#e4f1ff}
.mana-head .vital-max{font-size:11px}
.vital-track{position:relative;height:10px;overflow:hidden;background:linear-gradient(#050908,#121b17);border:1px solid var(--gold-600,#9a7638);box-shadow:inset 0 2px 5px #000d,0 2px 8px #0008;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.vital-track>i{position:relative;z-index:1;display:block;height:100%;width:100%;transition:width .18s ease-out}
.vital-track::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,#ffffff47,#ffffff10 42%,transparent 50%,#0000003d),repeating-linear-gradient(115deg,#ffffff0a 0 3px,transparent 3px 7px)}
.vital-track .vital-trail{position:absolute;inset:0 auto 0 0;z-index:0;width:100%;background:linear-gradient(90deg,#f9d9a0,#fff1cf);transition:width .65s cubic-bezier(.3,0,.25,1) .42s}
.vital-text{display:none}
body:not(.hud-art) .vital-text{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:700 11px var(--f-ui);text-shadow:0 1px 2px #000}
body.hud-art .vital-head{display:flex}
body:not(.hud-art) .vital-head{display:none}
.vital-track.hp{height:28px}
.vital-track.hp>i{background:linear-gradient(180deg,#ff8a64 0,#e24a35 38%,#a3201f 100%)}
.vital-track.mana{height:13px;margin-bottom:6px}
.vital-track.mana>i{background:linear-gradient(180deg,#9ad8ff,#3f8fe6 45%,#1d4fa4)}
.vital-track.mana .vital-trail{background:#cfe9ff}
.vital-track.hit{animation:barHit .38s ease-out}
@keyframes barHit{0%{filter:brightness(2.1);transform:translateX(-3px)}35%{transform:translateX(3px)}70%{transform:translateX(-1px)}100%{filter:none;transform:none}}
.vitals.low-hp .vital-track.hp{animation:lowHp 1s ease-in-out infinite}
.vitals.low-hp .hero-ring{animation:lowRing 1s ease-in-out infinite}
@keyframes lowHp{50%{border-color:#ff8f7a;box-shadow:inset 0 2px 5px #000d,0 0 18px #ff3b30d9}}
@keyframes lowRing{50%{filter:drop-shadow(0 0 10px #ff3b30) brightness(1.15)}}
.vital-gauges{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:5px}
.gauge{display:flex;align-items:center;gap:7px;min-width:0}
.gauge .vital-tag{font-size:9px;flex-shrink:0}
.gauge .vital-track{flex:1;height:10px}
.vital-track.atb{background:#06110f;-webkit-mask:linear-gradient(90deg,#000 calc(50% - 2px),transparent 0 calc(50% + 2px),#000 0);mask:linear-gradient(90deg,#000 calc(50% - 2px),transparent 0 calc(50% + 2px),#000 0)}
.vital-track.atb>i{background:linear-gradient(180deg,#a8fff1,#2fc4b2 50%,#137a72)}
.vitals[data-atb="1"] .atb-gauge .vital-track,.vitals[data-atb="2"] .atb-gauge .vital-track{border-color:#7ff3e2}
.vitals[data-atb="2"] .atb-gauge .vital-track{box-shadow:inset 0 2px 5px #000d,0 0 12px #44f0d9aa}
.vitals[data-atb="2"] .atb-gauge .vital-tag{color:#9ffbee}
.vital-track.limit>i{width:0;background:linear-gradient(180deg,#fff2b0,#f2bf3a 50%,#a8701b)}
.vitals.limit-ready .limit-gauge .vital-track{border-color:#ffe49a;animation:limitGlow 1.1s ease-in-out infinite}
.vitals.limit-ready .limit-gauge .vital-tag{color:#fff0b8}
@keyframes limitGlow{50%{box-shadow:inset 0 2px 5px #000d,0 0 16px #ffcf4ae6}}
.xp-label{display:none}
.vital-track.xp{height:4px;border-width:0 0 1px;clip-path:none;background:#0a100e99}
.vital-track.xp>i{width:0;background:linear-gradient(90deg,#9cc46a,#e7e19a)}
.vitals .status-chips{position:absolute;right:6px;bottom:100%;margin:0 0 8px;justify-content:flex-end;width:max-content;max-width:calc(100vw - 40px)}

/* ---------- target plate (#enemyPanel) ---------- */
.enemy-panel{position:fixed;top:64px;left:50%;transform:translateX(-50%);width:min(460px,calc(100vw - 32px));z-index:5;padding:12px 26px 12px;font-family:var(--f-ui);text-shadow:0 2px 6px #000;pointer-events:none}
.enemy-panel::before{content:"";position:absolute;inset:-10px -34px;z-index:-1;background:url(/assets/ui/frames/inkb-3.webp) center/100% 100% no-repeat;opacity:.9}
.enemy-panel>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px}
#enemyName{font:700 18px var(--f-caps);letter-spacing:.06em;color:#fff2d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#enemyStrength{flex-shrink:0;font:700 10px var(--f-caps);letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border:1px solid currentColor;border-radius:999px;background:#0008}
.enemy-track{position:relative;height:13px;background:#060908;border:1px solid var(--gold-600,#9a7638);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);box-shadow:inset 0 2px 4px #000c}
.enemy-track::after{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff3a,transparent 50%,#0003)}
.enemy-track i{display:block;height:100%;background:linear-gradient(180deg,#ff9a6a,#d9452f 50%,#8d1f1a);transition:width .16s}
.enemy-panel>small#enemyHp{display:block;text-align:right;font:800 12px var(--f-ui);font-variant-numeric:tabular-nums;margin:3px 2px 2px;color:#f4e6cc}
.pressure-track{height:7px;margin-top:2px;background:#120d05;border:1px solid #6d5320;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.pressure-track i{display:block;height:100%;background:linear-gradient(90deg,#c98a1c,#ffd25a);transition:width .15s}
#pressureLabel{display:block;margin-top:4px;font:700 9px var(--f-caps);letter-spacing:.2em;color:#e8cf8f}
.enemy-panel.staggered .pressure-track{border-color:#ffe9a6;box-shadow:0 0 14px #ffcf4a}
.enemy-panel.staggered .pressure-track i{background:linear-gradient(90deg,#fff3c2,#ffcf4a,#fff3c2);background-size:200% 100%;animation:stagger .7s linear infinite}
.enemy-panel.staggered #pressureLabel{color:#fff1b8;font-size:11px;text-shadow:0 0 10px #ffb800}
@keyframes stagger{to{background-position:-200% 0}}
#enemyWarning{display:block;width:max-content;max-width:100%;margin:8px auto 0;padding:4px 12px;border-radius:999px;background:#5a0f0bdd;border:1px solid #ff7a5a;font:700 10px var(--f-caps);letter-spacing:.12em;color:#ffd6c8;animation:warn .6s ease-in-out infinite alternate}
@keyframes warn{to{background:#9a1c12ee;box-shadow:0 0 16px #ff4a2a}}
.enemy-elements{font:500 11px/1.45 var(--f-ui);color:#d8dcc6;margin-top:5px}
.enemy-panel .status-chips{justify-content:center}

/* ---------- action bar (#combatBar) ---------- */
.combat-bar{position:fixed;z-index:6;left:max(18px,env(safe-area-inset-left));right:calc(var(--hero-w,404px) + 44px);bottom:max(20px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:center;gap:16px;pointer-events:none}
.combat-bar[hidden]{display:none}
.bar-group{display:flex;align-items:flex-end;gap:8px;pointer-events:auto;transition:opacity .4s,transform .4s;transform-origin:50% 100%}
.combat-divider{display:none}
.combat-bar button{--size:50px;--cd:0;position:relative;flex-shrink:0;width:var(--size);height:var(--size);padding:0;border-radius:50%;border:2px solid var(--gold-500,#c9a35a);background:radial-gradient(circle at 50% 38%,#2c3a33,#0d1411 72%);box-shadow:0 0 0 2px #0b100eee,0 6px 16px #000a,inset 0 0 10px #000c;color:var(--text,#f1e9d4);touch-action:manipulation;transition:transform .15s,filter .2s,box-shadow .2s}
.combat-bar button::before{content:"";position:absolute;inset:13%;border-radius:50%;background:var(--icon) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0009)}
.combat-bar button::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;background:conic-gradient(#060a09d0 calc(var(--cd) * 360deg),transparent 0)}
.combat-bar button:hover{transform:translateY(-2px);filter:brightness(1.12)}
.combat-bar button:active{transform:translateY(1px) scale(.97)}
.combat-bar button:focus-visible{outline:2px solid var(--gold-300,#f3dc9b);outline-offset:3px}
.combat-bar button kbd{position:absolute;z-index:3;left:50%;bottom:-9px;transform:translateX(-50%);min-width:20px;height:18px;padding:0 5px;border-radius:4px;border:1px solid var(--gold-600,#9a7638);background:#0d1411;box-shadow:0 2px 4px #000a;font:700 10px/1 var(--f-ui);color:var(--gold-300,#f3dc9b)}
.combat-bar button b{position:absolute;z-index:4;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);padding:4px 10px;border-radius:4px;background:#0b110fee;border:1px solid var(--gold-600,#9a7638);font:700 11px var(--f-caps);letter-spacing:.06em;color:var(--gold-300,#f3dc9b);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.combat-bar button:hover b,.combat-bar button:focus-visible b{opacity:1;transform:translate(-50%,0)}
.combat-bar button small{position:absolute;z-index:2;inset:0;display:none;place-items:center;border-radius:50%;font:900 15px var(--f-ui);font-variant-numeric:tabular-nums;color:#fff6dc;text-shadow:0 0 4px #000,0 2px 2px #000}
.combat-bar button.cooling small,.combat-bar button.locked small{display:grid}
.combat-bar button.locked small{font:700 10px var(--f-caps);letter-spacing:.04em}
.combat-bar button:disabled{cursor:default;transform:none}
.combat-bar button:disabled::before{filter:grayscale(.75) brightness(.7)}
.combat-bar button.locked{opacity:.55}
.combat-bar button.locked::before{filter:grayscale(1) brightness(.6)}
.combat-bar button.ready-flash{animation:readyFlash .5s ease-out}
@keyframes readyFlash{0%{box-shadow:0 0 0 2px #0b100eee,0 0 0 0 #fff2c2}60%{box-shadow:0 0 0 2px #0b100eee,0 0 0 10px #fff2c200}}
/* skills: light painted discs (Xenoblade), bigger */
.skill-group button{--size:62px;border-width:2.5px;background:radial-gradient(circle at 50% 40%,#fbf3de,#e3d2a8 62%,#b49a66)}
.skill-group button::before{inset:11%;filter:drop-shadow(0 1px 1px #0006)}
.skill-group button kbd{bottom:-10px;height:20px;min-width:22px;font-size:11px}
.skill-group button:not(:disabled):not(.locked){box-shadow:0 0 0 2px #0b100eee,0 6px 16px #000a,0 0 14px #f3dc9b44}
.skill-group button:disabled:not(.locked){filter:saturate(.55)}
.command-group button{--size:52px}
#limitButton:not(:disabled){border-color:#ffe49a;animation:limitBtn 1.1s ease-in-out infinite}
@keyframes limitBtn{50%{box-shadow:0 0 0 2px #0b100eee,0 0 22px #ffcf4a}}
#limitButton:disabled::before{filter:grayscale(.85) brightness(.6)}
#attackButton.charging{border-color:#ffe49a;box-shadow:0 0 0 2px #0b100eee,0 0 22px #ffc35e}
#blockButton.active{border-color:#bfe8ff;box-shadow:0 0 0 2px #0b100eee,0 0 18px #9fd8ff}
#tacticalButton.active{border-color:#7ff3e2}
/* items above the hero panel */
.item-group{position:fixed;right:max(30px,env(safe-area-inset-right));bottom:calc(var(--hero-h,166px) + 26px);gap:10px}
.item-group button{--size:44px}
.item-group button small{display:grid;inset:auto -6px -6px auto;width:auto;min-width:22px;height:18px;padding:0 5px;border-radius:9px;background:#0d1411;border:1px solid var(--gold-600,#9a7638);font:800 11px var(--f-ui);place-items:center}
.item-group button kbd{left:-6px;top:-6px;bottom:auto;transform:none;height:16px;min-width:16px;font-size:9px}
.item-group button:disabled{opacity:.62}
/* exploration: the bar steps back (BotW); it returns in combat, on hover and when an action is used */
/* (no transform on #combatBar itself: it would capture the fixed item group) */
body:not(.in-combat) .bar-group{opacity:.66;transform:scale(.94)}
body:not(.in-combat) .bar-group:hover,body:not(.in-combat) .bar-group:focus-within{opacity:1;transform:none}
.playing.immersive .vitals,.playing.immersive .combat-bar{opacity:.92}
body.in-combat .online-list,.online-list.alone{opacity:0}
@media(max-width:1000px){.online-list{bottom:auto;top:calc(var(--quest-bottom,250px));left:max(22px,env(safe-area-inset-left))}}

/* ---------- feedback: hit flash, toasts, level up, death ---------- */
.damage-flash{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;box-shadow:inset 0 0 160px #e7483a}
.damage-flash.hit{animation:damage .45s ease-out}
@keyframes damage{0%{opacity:.7}100%{opacity:0}}
body:has(.vitals.low-hp) .vignette{background:radial-gradient(ellipse at center,transparent 45%,#5a0b0866 100%);animation:lowVignette 1.2s ease-in-out infinite}
@keyframes lowVignette{50%{opacity:.6}}
.combat-toast{position:fixed;left:50%;top:max(37%,290px);transform:translate(-50%,-10px);opacity:0;pointer-events:none;z-index:34;max-width:min(620px,90vw);padding:14px 46px;text-align:center;font:600 17px/1.4 var(--f-serif);color:#fff1d2;text-shadow:0 2px 4px #000;transition:opacity .2s,transform .2s}
.combat-toast::before{content:"";position:absolute;inset:-6px -10px;z-index:-1;background:url(/assets/ui/frames/inkb-2.webp) center/100% 100% no-repeat;opacity:.95}
.combat-toast.show{opacity:1;transform:translate(-50%,0)}
.level-celebration{position:fixed;z-index:55;top:18%;left:50%;transform:translateX(-50%);width:min(560px,86vw);padding:30px 20px;text-align:center;color:#fff1ba;pointer-events:none;text-shadow:0 2px 10px #000}
.level-celebration::before{content:"";position:absolute;inset:0 -5%;z-index:-1;background:url(/assets/ui/frames/inkb-3.webp) center/100% 100% no-repeat;opacity:.95}
.level-celebration[hidden]{display:none}
.level-celebration span{font:700 11px var(--f-caps);letter-spacing:.32em;color:var(--gold-400,#e2c47a)}
.level-celebration strong{display:block;font:400 54px/1.1 var(--f-display);letter-spacing:.04em;margin:6px;background:linear-gradient(180deg,#fff6d0,#f2c95a 55%,#b27a22);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000)}
.level-celebration p{font:600 16px var(--f-serif);margin:6px;color:#e8f6dc}
.level-celebration small{font:600 12px var(--f-ui);color:var(--gold-300,#f3dc9b)}
.level-celebration.celebrate{animation:level-arrive 4.2s both}
@keyframes level-arrive{0%{opacity:0;translate:0 18px;scale:.9}12%,82%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -12px;scale:1}}
.death-screen{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,#2b0d0bcc,#070a09f2 75%);backdrop-filter:blur(6px) saturate(.6);z-index:80}
.death-screen>div{position:relative;max-width:540px;padding:36px 40px;text-align:center}
.death-screen .eyebrow{justify-content:center;font:700 10px var(--f-caps);letter-spacing:.3em;color:#d9a48c}
.death-screen h2{font:400 54px/1.1 var(--f-display);color:#f3d9c4;margin:16px 0 14px;text-shadow:0 3px 0 #000,0 0 30px #a0201a}
.death-screen p{font:500 15px/1.75 var(--f-serif);color:#d4c9b8;margin:0 0 30px}
.death-screen button{margin:auto;max-width:100%}

/* ---------- tactical menu (Tab) — ink strokes with gold flecks ---------- */
.tactical-panel{position:fixed;left:max(2vw,20px);top:max(92px,12vh);z-index:45;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - max(92px,12vh) - 120px);overflow:auto;padding:28px 30px 24px;background:radial-gradient(ellipse at 80% 20%,#16231ee6,#080d0bf2 70%);border:1px solid #c9a35a55;box-shadow:0 24px 80px #000c,inset 0 0 40px #000;backdrop-filter:blur(10px)}
.tactical-panel::before{content:"";position:absolute;top:10px;left:10px;width:84px;height:84px;background:url(/assets/ui/frames/corner.webp) top left/contain no-repeat;opacity:.85;pointer-events:none}
.tactical-panel small#tacticalMode{display:block;font:700 10px var(--f-caps);letter-spacing:.22em;color:var(--gold-400,#e2c47a);padding-left:34px}
.tactical-panel h2{font:400 30px/1.15 var(--f-display);color:#fff1d2;margin:10px 0 16px;padding-left:34px;text-shadow:0 2px 0 #000}
.tactical-panel label{display:block;font:700 10px var(--f-caps);letter-spacing:.2em;color:var(--gold-400,#e2c47a);margin:0 0 6px}
.tactical-panel select{width:100%;padding:10px 12px;margin-bottom:10px;background:#0b110f;border:1px solid var(--gold-600,#9a7638);color:var(--text,#f1e9d4);font:600 14px var(--f-ui)}
.tactical-panel button{--icon:none;position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;margin-top:8px;padding:10px 18px 10px 70px;text-align:left;border:0;background:url(/assets/ui/frames/inkb-1.webp) center/100% 100% no-repeat;font:700 15px var(--f-caps);letter-spacing:.05em;color:#f8ead0;text-shadow:0 2px 3px #000;transition:transform .15s,filter .15s}
.tactical-panel button::before{content:"";position:absolute;left:12px;top:50%;width:46px;height:46px;transform:translateY(-50%);border-radius:50%;background:var(--icon) center/72% no-repeat,radial-gradient(circle,#fbf3de,#d8c393);border:2px solid var(--gold-500,#c9a35a);box-shadow:0 2px 6px #000}
.tactical-panel button:hover:not(:disabled),.tactical-panel button:focus-visible{transform:translateX(6px);filter:brightness(1.2);color:var(--gold-300,#f3dc9b)}
.tactical-panel button:disabled{opacity:.42}
.tactical-panel button:disabled::before{filter:grayscale(1)}
.tactical-panel #tacticalClose{justify-content:center;padding-left:18px;margin-top:16px;background:none;border:1px solid var(--gold-600,#9a7638);min-height:44px;font-size:12px;letter-spacing:.14em;color:var(--gold-300,#f3dc9b)}
.tactical-panel #tacticalClose::before{display:none}

/* ---------- floating damage numbers (Xenoblade/E33: big, thick, outlined) ---------- */
#damageNumbers{position:fixed;inset:0;pointer-events:none;z-index:32;overflow:hidden}
.damage-number{position:absolute;transform:translate(-50%,-50%);color:#fff6e0;text-align:center;white-space:nowrap}
.damage-number b{display:block;font:900 italic 42px/1 var(--f-ui);letter-spacing:-.01em;-webkit-text-stroke:5px #160c06;paint-order:stroke fill;text-shadow:0 4px 0 #0008;animation:dmgPop .32s cubic-bezier(.2,1.6,.4,1) both}
.damage-number small{display:block;margin-top:2px;font:700 10px var(--f-caps);letter-spacing:.14em;-webkit-text-stroke:3px #160c06;paint-order:stroke fill}
.damage-number.critical{color:#ffd84a}
.damage-number.critical b{font-size:60px;-webkit-text-stroke:6px #2a1300;animation-name:dmgCrit}
.damage-number.incoming{color:#ff7d6e}
.damage-number.incoming b{font-size:34px}
.damage-number.healing{color:#9cf7b0}
.damage-number.effective{color:#8fe6ff}
.damage-number.resisted{color:#b9c2c6}
.damage-number.resisted b{font-size:32px}
@keyframes dmgPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes dmgCrit{0%{transform:scale(.3) rotate(-8deg);opacity:0}60%{transform:scale(1.25) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}

/* ---------- status chips, companion, online list ---------- */
.status-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.status-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 3px;border-radius:999px;background:#0b110fdd;border:1px solid #ffffff33;font:700 11px var(--f-ui);color:#f6eedb;text-shadow:0 1px 2px #000}
.status-chip.ui-ico::before{content:"";width:18px;height:18px;background:var(--icon) center/contain no-repeat}
.status-burn{border-color:#ff9a4a}.status-bleed{border-color:#e0485a}.status-poison{border-color:#8fd16a}.status-slow{border-color:#7fc9c0}.status-shock{border-color:#ffe066}.status-silence{border-color:#b18cff}.status-freeze{border-color:#8fe3ff}.status-sleep{border-color:#c9b8ff}.status-stun{border-color:#ffd56a}
.companion-vitals{position:fixed;right:calc(var(--hero-w,404px) + 40px);bottom:24px;z-index:6;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:#0b110fd9;border:1px solid var(--gold-600,#9a7638);font:700 12px var(--f-ui);color:#e6f0d8;white-space:nowrap;box-shadow:0 4px 12px #0009}
.companion-vitals::before{content:"";width:36px;height:36px;border-radius:50%;border:2px solid var(--gold-500,#c9a35a);background:#1b2a23 center/cover}
.companion-vitals[data-hero=archer]::before{background-image:url(/assets/ui/portraits/archer-face.webp)}
.companion-vitals[data-hero=mage]::before{background-image:url(/assets/ui/portraits/mage-face.webp)}
.companion-vitals[data-hero=necromancer]::before{background-image:url(/assets/ui/portraits/necromancer-face.webp)}
.companion-vitals[data-hero=warrior]::before{background-image:url(/assets/ui/portraits/warrior-face.webp)}
.companion-vitals[data-hero=samurai]::before{background-image:url(/assets/ui/portraits/samurai-face.webp)}
.companion-vitals.down{color:#f0a98f}
.companion-vitals.down::before{filter:grayscale(1) brightness(.6)}
.online-list{position:fixed;left:max(22px,env(safe-area-inset-left));bottom:104px;transition:opacity .4s;z-index:5;max-width:min(320px,40vw);padding:5px 12px;border-radius:999px;background:#0b110fb8;border:1px solid #c9a35a44;font:600 12px var(--f-ui);color:#e6dcbf;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- belongings tab (rpgInventory) ---------- */
.rpg-inventory{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-gold,#c9a35a33)}
.inventory-section-title{font:400 28px var(--f-display);margin:6px 0 18px;color:var(--gold-300,#f3dc9b)}
.rpg-inventory>.inventory-section-title:not(:first-child){margin-top:32px}
.character-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.character-stats>div{position:relative;padding:14px 10px 12px;text-align:center;background:linear-gradient(#18241ecc,#0d1411cc);border:1px solid #c9a35a40;border-radius:6px}
.character-stats>div.ui-ico::before{content:"";position:absolute;left:8px;top:8px;width:26px;height:26px;background:var(--icon) center/contain no-repeat}
.character-stats small{display:block;font:700 9px var(--f-caps);letter-spacing:.14em;color:var(--gold-400,#e2c47a);margin-bottom:5px}
.character-stats b{font:800 24px var(--f-ui);font-variant-numeric:tabular-nums;color:#f6ecd2}
.rpg-tip{font:500 13px/1.7 var(--f-ui)!important;color:var(--text-dim,#c5c7b2)!important}
.gear-section{padding:14px 0;border-bottom:1px solid #c9a35a26}
.gear-section h4{font:700 11px var(--f-caps);letter-spacing:.16em;color:var(--gold-400,#e2c47a);margin:0 0 12px}
.gear-item{position:relative;display:inline-flex;flex-direction:column;text-align:left;min-width:220px;max-width:100%;margin:0 8px 9px 0;padding:12px 14px 12px 74px;min-height:72px;border-radius:6px;background:linear-gradient(#18241e,#0f1714);border:1px solid #c9a35a33}
.gear-item.ui-ico::before{content:"";position:absolute;left:10px;top:50%;width:52px;height:52px;transform:translateY(-50%);border-radius:8px;background:var(--icon) center/86% no-repeat,radial-gradient(circle,#2b3a32,#101814);border:1px solid #c9a35a55}
.gear-item b{font:700 15px var(--f-caps);letter-spacing:.03em;color:#f3e9cf}
.gear-item small{font:500 12px/1.45 var(--f-ui);color:var(--text-dim,#c5c7b2);margin:5px 0 8px}
.gear-item span{font:700 10px var(--f-caps);letter-spacing:.14em;color:var(--gold-400,#e2c47a)}
.gear-item.equipped{border-color:var(--gold-400,#e2c47a);background:linear-gradient(#2a3a2c,#16211b);box-shadow:inset 0 0 0 1px #e2c47a33}
#skillJournal{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.skill-entry{position:relative;padding:14px 14px 14px 76px;min-height:76px;background:linear-gradient(#18241ecc,#0d1411cc);border:1px solid #c9a35a33;border-radius:6px}
.skill-entry.ui-ico::before{content:"";position:absolute;left:12px;top:14px;width:50px;height:50px;border-radius:50%;background:var(--icon) center/76% no-repeat,radial-gradient(circle,#fbf3de,#d8c393);border:2px solid var(--gold-500,#c9a35a)}
.skill-entry b{font:700 15px var(--f-caps);color:#f3e9cf}
.skill-entry p{font:500 13px/1.5 var(--f-ui);margin:6px 0;color:var(--text-dim,#c5c7b2)}
.skill-entry small{font:600 11px var(--f-ui);color:var(--gold-400,#e2c47a)}
.skill-entry.locked{opacity:.5}
.skill-entry.locked::before{filter:grayscale(1)}
.skill-upgrade{margin-top:8px;padding:6px 12px;font:700 10px var(--f-caps);letter-spacing:.12em;background:#c9a35a2a;color:var(--gold-300,#f3dc9b);border:1px solid var(--gold-600,#9a7638);border-radius:4px;cursor:pointer}
.skill-upgrade:disabled{opacity:.45;cursor:default}
.strength-legend{display:flex;gap:10px;flex-wrap:wrap}
.strength-legend span{padding:5px 12px;border:1px solid currentColor;border-radius:999px;font:700 11px var(--f-caps);letter-spacing:.1em}
.weak{color:#b6d388}.medium{color:#edcc79}.strong{color:#ec9e62}.powerful{color:#d489c7}

/* ---------- responsive ---------- */
@media(max-width:1180px){
 .vitals{--hero-w:356px;--medal:92px}
 .vital-now{font-size:26px}
 .combat-bar{gap:12px;right:calc(var(--hero-w,356px) + 34px)}
 .bar-group{gap:6px}
 .combat-bar button{--size:44px}
 .skill-group button{--size:54px}
 .command-group button{--size:46px}
 .item-group button{--size:40px}
}
@media(max-width:1000px){
 .combat-bar{flex-wrap:wrap;align-content:flex-end;row-gap:14px;column-gap:10px}
 .basic-group{order:-1;width:100%;justify-content:center}
 .basic-group button{--size:40px}
}
@media(max-width:900px){
 .vitals{--hero-w:310px;--medal:80px;padding:12px 14px 10px 8px;column-gap:12px}
 .hero-name{font-size:14px}
 .vital-now{font-size:22px}
 .vital-track.hp{height:22px}
 .enemy-panel{top:58px;width:min(400px,calc(100vw - 32px))}
 .combat-toast{font-size:15px}
}
@media(pointer:coarse){
 .combat-bar button kbd{display:none}
 .combat-bar button b{display:none}
 #joystick{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 124px)}
 .touch-actions{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 124px)}
}
@media(max-width:600px){
 .vitals{--hero-w:min(300px,calc(100vw - 132px));--medal:58px;left:max(10px,env(safe-area-inset-left));right:auto;top:max(58px,calc(env(safe-area-inset-top) + 50px));bottom:auto;padding:8px 10px 8px 6px;column-gap:9px}
 .vitals::before{inset:-14px -40px -10px -16px;transform:none;background-image:url(/assets/ui/frames/ink-5.webp)}
 .vitals::after{display:none}
 .level-badge{left:calc(6px + var(--medal)/2);top:calc(8px + var(--medal) - 12px);padding:1px 7px 2px}
 .level-badge strong{font-size:13px}
 .hero-title{display:none}
 .vital-head{margin:1px 2px}
 .vital-now{font-size:17px}
 .vital-max{font-size:11px}
 .mana-head{display:none!important}
 .vital-tag{font-size:8px}
 .vital-track.hp{height:15px}
 .vital-track.mana{height:8px;margin:3px 0 4px}
 .vital-gauges{gap:8px;margin-bottom:3px}
 .gauge .vital-tag{display:none}
 .gauge .vital-track{height:7px}
 .vitals .status-chips{left:0;right:auto;top:100%;bottom:auto;margin:6px 0 0;justify-content:flex-start}
 .enemy-panel{top:150px;padding:8px 18px;width:min(330px,calc(100vw - 40px))}
 .enemy-panel::before{inset:-6px -12px}
 #enemyName{font-size:15px}
 .enemy-elements{display:none}
 .combat-bar{left:6px;right:6px;bottom:max(6px,env(safe-area-inset-bottom));gap:6px;row-gap:8px;flex-wrap:wrap}
 .basic-group{order:0;width:auto}
 .bar-group{gap:5px}
 .skill-group{order:-2}
 .command-group{order:-1}
 .combat-bar button,.basic-group button{--size:40px}
 .skill-group button{--size:46px}
 .command-group button{--size:42px}
 .item-group{position:static;gap:5px}
 .item-group button{--size:38px}
 .item-group button kbd{display:none}
 .combat-toast{top:52%;font-size:14px;padding:10px 28px}
 .companion-vitals{right:auto;left:10px;top:150px;bottom:auto;font-size:11px}
 .online-list{display:none}
 body.in-combat .clock-hud{opacity:0}
 #skillJournal{grid-template-columns:1fr}
 .gear-item{min-width:0;width:100%}
 .death-screen h2{font-size:40px}
 .level-celebration strong{font-size:42px}
}
@media(prefers-reduced-motion:reduce){
 .damage-flash.hit,.vitals.low-hp .vital-track.hp,.vitals.low-hp .hero-ring,.vital-track.hit,.level-celebration.celebrate,#limitButton:not(:disabled),.enemy-panel.staggered .pressure-track i,#enemyWarning,.damage-number b,body:has(.vitals.low-hp) .vignette{animation:none}
 .vital-track>i,.enemy-track i,.vital-track .vital-trail{transition:none}
}

/* ---------- game controller in use: pad buttons instead of keys (gamepad.js sets body[data-pad] and kbd[data-pad]) ---------- */
body[data-pad] .combat-bar button kbd[data-pad]{font-size:0;min-width:22px;padding:0 4px}
body[data-pad] .combat-bar button kbd[data-pad]::after{content:attr(data-pad);font:800 10px/1 var(--f-ui);color:var(--gold-300)}
body[data-pad] .combat-bar kbd[data-pad="A"]::after{color:#86e07a}
body[data-pad] .combat-bar kbd[data-pad="B"]::after{color:#ff7a6a}
body[data-pad] .combat-bar kbd[data-pad="X"]::after{color:#6fb6ff}
body[data-pad] .combat-bar kbd[data-pad="Y"]::after{color:#ffd65a}
body[data-pad] .combat-bar kbd[data-pad="✕"]::after{color:#8fb8ff}
body[data-pad] .combat-bar kbd[data-pad="○"]::after{color:#ff7f8a}
body[data-pad] .combat-bar kbd[data-pad="□"]::after{color:#f39ad8}
body[data-pad] .combat-bar kbd[data-pad="△"]::after{color:#62d6b0}