/* One responsive HUD. Approved raster borders; independent translucent fill. */
.jft-hud,.jft-notifications { --jft-font:"Trebuchet MS",Arial,system-ui,sans-serif; --jft-scale:1; --jft-accent:#f6c85f; --jft-fill:.8; --jft-edge:8px; --jft-gap:6px; --jft-pad:9px; --jft-body:14px; --jft-label:12px; --jft-heart:24px; --jft-heart-gap:2px; box-sizing:border-box; color:#fff7df; font:700 max(12px,calc(var(--jft-body) * var(--jft-scale)))/1.18 var(--jft-font); pointer-events:none; }
.jft-hud *,.jft-notifications * { box-sizing:border-box; }
.jft-hud[hidden],.jft-hud [hidden],.jft-notifications[hidden],.jft-notifications [hidden] { display:none!important; }
.jft-hud { position:absolute; z-index:5; top:calc(var(--jft-edge) + var(--jft-safe-top,env(safe-area-inset-top,0px))); left:calc(var(--jft-edge) + var(--jft-safe-left,env(safe-area-inset-left,0px))); right:calc(var(--jft-edge) + var(--jft-safe-right,env(safe-area-inset-right,0px))); }
.jft-hud[data-world="2"] { --jft-accent:#63dbe8; }
.jft-hud[data-world="3"] { --jft-accent:#c0a6ff; }
.jft-panel { border:var(--jft-pad) solid transparent; border-image:var(--jft-hud-frame) 34 stretch; background:rgba(16,20,33,var(--jft-fill)); background-clip:padding-box; border-radius:0; min-width:0; }
.jft-panel[data-panel="banner"] { border-image-source:var(--jft-banner-frame); }
.jft-panel[data-panel="major"] { border-image-source:var(--jft-major-frame); }
.jft-panel[data-panel="boss"] { border-image-source:var(--jft-boss-frame); }
.jft-hud-ribbon { display:grid; grid-template-columns:max-content minmax(230px,320px) minmax(0,max-content) 44px; align-items:start; justify-content:start; gap:var(--jft-gap); max-width:100%; }
.jft-vitality { display:flex; align-items:center; gap:4px; position:relative; min-height:44px; width:max-content; max-width:100%; }
.jft-heart-grid { display:grid; grid-template-columns:repeat(var(--jft-heart-count,3),var(--jft-heart)); gap:var(--jft-heart-gap); align-items:center; }
.jft-icon { width:24px; height:24px; display:block; flex:none; background:transparent!important; image-rendering:auto!important; object-fit:contain; }
.jft-heart { width:var(--jft-heart)!important; height:var(--jft-heart)!important; max-width:none; }
.jft-heart[data-filled="false"] { filter:grayscale(1) brightness(.45); opacity:.72; }
.jft-health-label,.jft-ability-description { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.jft-vitality[data-critical="true"] { color:#ff8c9c; }
.jft-vitality[data-critical="true"] .jft-heart[data-filled="true"] { filter:drop-shadow(0 0 2px #ff9e67); }
.jft-vitality[data-feedback="damage"] { animation:jft-damage 220ms ease-out; }
.jft-vitality[data-feedback="heal"],.jft-vitality[data-feedback="checkpoint"] { animation:jft-heal 350ms ease-out; }
.jft-vitality[data-feedback="max-heart"] { animation:jft-heal 600ms ease-out; }
.jft-collection { display:grid; gap:2px; }
.jft-collection-line,.jft-power-line,.jft-context-line,.jft-boss-line { display:flex; align-items:center; gap:5px; min-width:0; }
.jft-collection-line { min-height:23px; }
.jft-taco-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
.jft-mastery { display:flex; align-items:center; gap:3px; margin-left:auto; font-size:max(12px,calc(var(--jft-label) * var(--jft-scale))); }
.jft-mastery-icon { display:flex; border-radius:50%; background:conic-gradient(#f6c85f var(--jft-mastery,0deg),#434151 0); padding:1px; }
.jft-mastery[data-claimed="true"] { color:#b8e85f; }
.jft-power-copy { color:#e5d18d; font-size:max(12px,calc(var(--jft-label) * var(--jft-scale))); white-space:nowrap; }
.jft-arsenal-state { margin-left:auto; color:#b9b7c8; font-size:max(12px,calc(var(--jft-label) * var(--jft-scale))); white-space:nowrap; }
.jft-arsenal-state[data-ready="true"] { color:#ffc277; }
.jft-arsenal-glyph { display:none; }
.jft-mobility-glyph { display:none; }
.jft-hud[data-layout="mobile"] .jft-mobility-glyph,.jft-hud[data-layout="compact"] .jft-mobility-glyph { display:block; }
.jft-mobility-glyph .jft-icon { width:19px!important; height:19px!important; }
.jft-hud[data-tier="normal"] .jft-mobility-glyph,.jft-hud[data-tier="dormant"] .jft-mobility-glyph { filter:grayscale(1); opacity:.55; }
.jft-hero-crop { width:20px; height:20px; display:block; overflow:hidden; position:relative; }
.jft-hero-state { width:80px!important; height:80px!important; max-width:none!important; position:absolute; left:0; top:0; image-rendering:auto; }
.jft-meter,.jft-route-meter,.jft-boss-meter { height:5px; background:#555268; border-radius:3px; overflow:hidden; }
.jft-meter i,.jft-route-meter i,.jft-boss-meter i { display:block; height:100%; width:0; background:#f6c85f; }
.jft-hud[data-tier="arsenal"] .jft-meter i { background:#f89a67; }
.jft-hud[data-tier="mobility"] .jft-meter i { background:#63dbe8; }
.jft-hud[data-tier="dormant"] .jft-meter i { background:#c1aecf; }
.jft-context { display:flex; flex-direction:column; justify-content:space-between; gap:3px; min-height:44px; max-width:290px; }
.jft-level { color:var(--jft-accent); white-space:nowrap; }
.jft-score { margin-left:auto; color:#dad4df; font-size:max(12px,calc(var(--jft-label) * var(--jft-scale))); font-variant-numeric:tabular-nums; white-space:nowrap; }
.jft-secondary { display:flex; flex-wrap:wrap; gap:2px 7px; }
.jft-counter { display:inline-flex; align-items:center; gap:3px; min-width:0; font-size:max(12px,calc(var(--jft-label) * var(--jft-scale))); white-space:normal; }
.jft-route-meter { height:3px; }
.jft-route-meter i { background:var(--jft-accent); }
.jft-pause { position:relative; border:0; background:none; font:900 21px var(--jft-font); color:#fff7df; min-width:44px; min-height:44px; width:44px; height:44px; padding:0; cursor:pointer; pointer-events:auto; touch-action:manipulation; align-self:start; isolation:isolate; }
.jft-pause::before { content:""; position:absolute; width:var(--jft-pause-visual,40px); height:var(--jft-pause-visual,40px); left:50%; top:50%; transform:translate(-50%,-50%); z-index:-1; box-sizing:border-box; border:5px solid transparent; border-image:var(--jft-hud-frame) 34 stretch; background:rgba(16,20,33,var(--jft-fill)); background-clip:padding-box; }
.jft-pause:focus-visible { outline:3px solid #63dbe8; outline-offset:2px; }
.jft-pause:hover { filter:brightness(1.15); }
.jft-status-row { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:4px; margin-top:3px; width:max-content; max-width:100%; }
.jft-hud[data-inline-status="true"] .jft-status-row { position:absolute; left:var(--jft-status-left); top:calc(var(--jft-pad) + 3px); margin-top:0; }
.jft-status-row .jft-counter { padding:1px 5px; background:rgba(16,20,33,var(--jft-fill)); border-radius:5px; border:1px solid #8c7862; }
.jft-boss { width:min(430px,95%); margin:5px auto 0; padding:1px 4px; }
.jft-boss-line { gap:8px; justify-content:space-between; }
.jft-boss-name { font-size:max(12px,calc(var(--jft-body) * var(--jft-scale))); }
.jft-boss-state { font-size:max(12px,calc(var(--jft-label) * var(--jft-scale))); color:#d9d2df; }
.jft-boss-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
.jft-boss-meter { height:6px; margin-top:3px; }
.jft-boss-meter i { background:#e84b4f; }
.jft-boss[data-vulnerable="true"] .jft-boss-state { color:#b8e85f; }
.jft-boss[data-vulnerable="true"] .jft-boss-meter i { background:#b8e85f; }
.jft-notifications { position:absolute; z-index:6; left:calc(var(--jft-edge) + var(--jft-safe-left,env(safe-area-inset-left,0px))); right:calc(var(--jft-edge) + var(--jft-safe-right,env(safe-area-inset-right,0px))); display:flex; align-items:flex-end; flex-direction:column; gap:4px; }
.jft-notifications[data-side="left"] { align-items:flex-start; }
.jft-notice { display:flex; align-items:center; gap:8px; width:max-content; max-width:min(540px,100%); padding:6px 10px; animation:jft-notice-in 160ms ease-out; }
.jft-notice-copy { display:flex; flex-direction:column; gap:2px; min-width:0; max-width:100%; }
.jft-notice-title,.jft-notice-subtitle,.jft-notice-detail { display:block; white-space:normal; overflow-wrap:anywhere; hyphens:none; }
.jft-notice-title { color:#fff1b4; font-weight:900; }
.jft-notice-subtitle { color:#e8dbea; font-size:max(12px,calc(var(--jft-body) * var(--jft-scale))); }
.jft-notice-detail { color:#cddde3; font-size:max(12px,calc(var(--jft-label) * var(--jft-scale))); }
.jft-notice-toast { padding:2px 7px; max-width:min(360px,94%); }
.jft-notice-toast>.jft-icon { width:24px!important; height:24px!important; }
.jft-notifications[data-dialogue="true"] .jft-notice { visibility:hidden; }
.jft-hud[data-layout="mobile"] .jft-hud-ribbon,.jft-hud[data-layout="compact"] .jft-hud-ribbon { grid-template-columns:max-content minmax(160px,max-content) minmax(0,max-content) 44px; }
.jft-hud[data-layout="mobile"] .jft-collection,.jft-hud[data-layout="compact"] .jft-collection { max-width:235px; }
.jft-hud[data-layout="mobile"] .jft-collection,.jft-hud[data-layout="compact"] .jft-collection { grid-template-rows:18px 18px; position:relative; }
.jft-hud[data-layout="mobile"] .jft-collection-line,.jft-hud[data-layout="compact"] .jft-collection-line { min-height:18px; gap:3px; }
.jft-hud[data-layout="mobile"] .jft-taco-icon .jft-icon,.jft-hud[data-layout="compact"] .jft-taco-icon .jft-icon { width:21px!important; height:18px!important; }
.jft-hud[data-layout="mobile"] .jft-mastery-icon .jft-icon,.jft-hud[data-layout="compact"] .jft-mastery-icon .jft-icon { width:15px!important; height:15px!important; }
.jft-hud[data-layout="mobile"] .jft-power-line,.jft-hud[data-layout="compact"] .jft-power-line { gap:3px; padding-bottom:6px; }
.jft-hud[data-layout="mobile"] .jft-ability-icon,.jft-hud[data-layout="compact"] .jft-ability-icon { display:none; }
.jft-hud[data-layout="mobile"] .jft-arsenal-copy,.jft-hud[data-layout="compact"] .jft-arsenal-copy { display:none; }
.jft-hud[data-layout="mobile"] .jft-arsenal-glyph,.jft-hud[data-layout="compact"] .jft-arsenal-glyph { display:inline-flex; align-items:center; height:17px; }
.jft-arsenal-glyph .jft-icon { width:19px!important; height:19px!important; }
.jft-arsenal-state[data-ready="false"] .jft-arsenal-glyph { filter:grayscale(1); opacity:.55; }
.jft-hud[data-layout="mobile"] .jft-meter,.jft-hud[data-layout="compact"] .jft-meter { position:absolute; left:0; right:0; bottom:0; height:5px; }
.jft-hud[data-layout="mobile"] .jft-context,.jft-hud[data-layout="compact"] .jft-context { max-width:245px; gap:2px; }
.jft-hud[data-layout="mobile"] .jft-secondary .jft-icon,.jft-hud[data-layout="compact"] .jft-secondary .jft-icon { width:17px!important; height:17px!important; }
.jft-hud[data-layout="mobile"] .jft-shield .jft-icon { width:20px!important; height:20px!important; }
.jft-hud[data-layout="mobile"] .jft-status-row .jft-icon { width:17px!important; height:17px!important; }
.jft-notifications[data-layout="mobile"] .jft-notice { max-width:var(--jft-notice-major-width); gap:5px; padding:3px 4px; border-width:5px; animation-name:jft-notice-compact-in; }
.jft-notifications[data-layout="mobile"] .jft-notice-toast { max-width:var(--jft-notice-width); }
.jft-notifications[data-layout="mobile"] .jft-notice>.jft-icon { width:30px!important; height:30px!important; }
.jft-notifications[data-layout="mobile"] .jft-notice-toast>.jft-icon { width:22px!important; height:22px!important; }
.jft-notifications[data-layout="mobile"] .jft-notice-subtitle,.jft-notifications[data-layout="mobile"] .jft-notice-detail { font-size:12px; line-height:1.15; }
.jft-hud[data-narrow="true"] .jft-hud-ribbon { grid-template-columns:max-content minmax(140px,1fr) 44px; }
.jft-hud[data-narrow="true"] .jft-context { grid-column:1/3; grid-row:2; flex-direction:row; flex-wrap:wrap; max-width:none; min-height:0; gap:3px 7px; }
.jft-hud[data-narrow="true"] .jft-route-meter { flex:1 0 100%; }
.jft-hud[data-narrow="true"] .jft-pause { grid-column:3; grid-row:1; }
.jft-hud[data-narrow="true"][data-crowded="true"] .jft-heart-grid { grid-template-columns:repeat(4,var(--jft-heart)); }
.jft-hud[data-narrow="true"] .jft-mastery-count { display:none; }
.jft-hud[data-narrow="true"] .jft-collection { min-width:0; }
.jft-hud[data-reduced="true"] *,.jft-notifications[data-reduced="true"] * { animation-duration:1ms!important; transition-duration:1ms!important; }
.jft-hud[data-boundaries="true"] [data-module] { outline:1px dashed #63dbe8; }
/* Mobile world art fills the visual viewport. HUD/touch layers independently
   consume env(safe-area-inset-*) and never shrink the game canvas. */
body[data-gameplay-fit="true"] { padding:0; overflow:hidden; }
body[data-gameplay-fit="true"] #gameShell { position:fixed; left:var(--jft-gameplay-viewport-offset-left,0px); top:var(--jft-gameplay-viewport-offset-top,0px); width:var(--jft-gameplay-viewport-width,100dvw); min-height:var(--jft-gameplay-viewport-height,100dvh); height:var(--jft-gameplay-viewport-height,100dvh); padding:0; display:flex; align-items:stretch; justify-content:stretch; gap:0; }
body[data-gameplay-fit="true"] #gameShell>.hud-strip { display:none; }
body[data-gameplay-fit="true"] .game-stage { width:100%; height:100%; max-width:none; flex:none; border:0; border-radius:0; }
body[data-gameplay-fit="true"] .game-stage>canvas#game { position:absolute; inset:0; width:100%; height:100%; max-width:none; aspect-ratio:auto; }
@keyframes jft-notice-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes jft-notice-compact-in { from { opacity:0; transform:translateY(-2px); } to { opacity:1; transform:none; } }
@keyframes jft-damage { 40% { filter:brightness(1.45) saturate(.65); } }
@keyframes jft-heal { 40% { filter:brightness(1.25); } }
@media (prefers-reduced-motion:reduce) { .jft-hud *,.jft-notifications * { animation-duration:1ms!important; transition-duration:1ms!important; } }