/* Native CABAL HUD (round 5, front A). Geometry comes from ui.dat rects (hud-layout.json) in native
   1024x768 pixels; each dialog box is scaled by --ui-scale from its own top-left. Sprites are Theme1
   atlas crops (decoded-source). Colors/strokes here only for text and the web-only parts. */
.hud-root{position:fixed;inset:0;z-index:5;pointer-events:none;font:11px var(--hud-font);color:#fff;user-select:none}
.cabal-dialog{position:absolute;transform-origin:0 0;pointer-events:none}
.cabal-dialog .hud-el,.hud-el{position:absolute;background-repeat:no-repeat;image-rendering:auto}
.cabal-dialog .sprite.frame{z-index:0}
.text-outline,.gauge-text,.level-text,.target-name,.map-name,.chat-line,.overhead-name,.qslot-cd-text,.qslot-key-text{text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}

/* gauges: the fill sprite is clipped by width (native gauge behaviour inferred) */
.gauge{z-index:2;overflow:visible}
.gauge-clip{position:absolute;left:0;top:0;height:100%;overflow:hidden;width:100%}
.gauge-fill{position:absolute;left:0;top:0;height:100%;background-repeat:no-repeat}
.gauge-text{position:absolute;inset:-3px 0;display:flex;align-items:center;justify-content:center;font:11px var(--hud-font);color:#fff;white-space:nowrap;line-height:1}
.gauge.fallback .gauge-fill,.no-atlas .gauge-fill{background:#c22}
.no-atlas .gauge.mp .gauge-fill{background:#1f5fd6}
.no-atlas .gauge.sp .gauge-fill{background:#e98a1d}
.no-atlas .gauge.exp .gauge-fill{background:#59c437}
.gauge.exp .gauge-text,.gauge.sp .gauge-text,.gauge.mobhp .gauge-text{display:none}

/* status (A_dlg_mainT): level badge text sits on the frame's lower-left plate (observed-native position) */
/* round 6: "Lvl 115" on its line (native frame ~y58 at UI 1.2 -> local 47 centre) above the ATK/DEF row (native ~y72),
   no overlap; the row below starts at local 52 */
.status .level-text{position:absolute;left:4px;top:40px;width:70px;height:12px;line-height:12px;text-align:center;font:12px var(--hud-font);z-index:5}
.status .class-icon{z-index:2}
/* Web label of the active class (classes.js), under the ATK/DEF row; not a ui.dat field. */
.status .class-text{position:absolute;left:17px;top:67px;width:120px;height:12px;line-height:12px;font:11px var(--hud-font);color:var(--gold);z-index:5;text-shadow:1px 1px 0 #000,-1px -1px 0 #000;pointer-events:none}
/* ATK/DEF row (round 6): observed-native place and colours (hud_full_client.png 22..142 x 64..80 at UI 1.2); the
   plate and its icons are not in the installed Theme1 textures, so this is a plain CSS plate (gap, see docs). */
.status .atk-def{position:absolute;left:15px;top:52px;width:100px;height:13px;display:flex;align-items:center;gap:4px;padding:0 6px;box-sizing:border-box;
  background:rgba(8,14,24,.92);border:1px solid #6d7a8c;border-radius:5px;font:10px var(--hud-font);z-index:4;line-height:1}
.status .atk-def .atk{flex:1;text-align:right;color:#ff3c3c}.status .atk-def .def{flex:1;text-align:right;color:#4a8dff}
.status .atk-def .atk-def-sep{width:1px;height:9px;background:#8a96a8}

/* target (A_dlg_mainM) */
.target .target-name{display:flex;align-items:center;justify-content:center;font:11px var(--hud-font);z-index:3;white-space:nowrap;color:#f2f2f2;text-shadow:0 0 1px #000,1px 1px 0 rgba(0,0,0,.6)}

/* quick slots (A_dlg_quickslot) */
.quickslot{pointer-events:none}
.qslot{position:absolute;pointer-events:auto;cursor:pointer;z-index:3}
/* skill icons are the 2011 40x40 PC sources (tools/stage-icons-2011.py) drawn at the native 33 px slot: a plain downscale (smooth
   filtering, no pixelated upscale); object-fit keeps an odd-sized older icon undistorted */
.qslot-icon{position:absolute;left:3px;top:3px;width:33px;height:33px;display:block;pointer-events:auto;object-fit:contain;image-rendering:auto}
.qslot.empty .qslot-icon{display:none}
.qslot-key{z-index:4;pointer-events:none}
.qslot-key-text{position:absolute;left:3px;top:1px;font:9px var(--hud-font);z-index:4}
.qslot-cd{position:absolute;left:3px;top:3px;width:33px;height:33px;background:conic-gradient(rgba(0,0,0,.72) var(--cd,0%),transparent 0);z-index:5;pointer-events:none}
.qslot-cd-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:bold 12px var(--hud-font);z-index:6;pointer-events:none}
.qslot.casting{outline:1px solid #ffe28a;outline-offset:-2px}
.qslot.flash .qslot-icon{filter:brightness(1.6)}
.qslot.drop{outline:1px dashed #9ad;outline-offset:-2px}
.qslot.unaffordable .qslot-icon{filter:saturate(.3) brightness(.7)}
/* round 6: one row by default, the EX row (Alt+key) and its background only when expanded */
.quickslot .qs-ex{display:none}.quickslot.expanded .qs-ex{display:block}
/* temporary three-bar test layout (hotbar-test-bars.js): row label left of each bar (web text, no native sprite) */
.qs-bar-label{font:10px/39px var(--hud-font);color:#e9d39b;text-align:right;padding-right:3px;box-sizing:border-box;pointer-events:none;z-index:4;white-space:nowrap}
.qs-expand,.map-hide,.map-open,.chat-reopen .ctl{pointer-events:auto;cursor:pointer;z-index:4}
.qs-page,.qs-button,.map-button,.chat-btn{pointer-events:auto;cursor:default;z-index:4}
.extra.missing{outline:1px dashed rgba(255,0,0,.4)}
.no-atlas .extra{display:none}
/* special actions: item icons not in the decoded UI textures -> short text label (gap) */
.qslot-action{position:absolute;left:3px;top:3px;width:33px;height:33px;display:flex;align-items:center;justify-content:center;
  font:bold 10px var(--hud-font);color:#e9d39b;background:linear-gradient(#2a2f38,#14171c);border:1px solid #5a6170;box-sizing:border-box;pointer-events:auto}
.qslot-action[hidden]{display:none}
/* staged mobile art for the special actions; the label above it stays as the (transparent) drag/click target */
.qslot-action-icon{position:absolute;left:3px;top:3px;width:33px;height:33px;object-fit:contain;image-rendering:auto;pointer-events:none;z-index:1}
.qslot-action-icon[hidden]{display:none}
.qslot-action.has-icon{background:none;border:none;color:transparent;z-index:2}
.qslot.auto .qslot-action.has-icon{box-shadow:inset 0 0 0 2px #7cf28a}
.qslot.auto .qslot-action{color:#7cf28a}
.qslot-count{position:absolute;right:3px;bottom:2px;font:10px var(--hud-font);color:#fff;z-index:6;pointer-events:none}
.qslot-count[hidden]{display:none}
/* centre notice (D_dlg_CHAT_ERRMsg rect): Auto-Attack text, green like the native frame */
.center-notice{display:flex;align-items:center;justify-content:center}
.notice-text{font:12px var(--hud-font);color:#3fe23a;white-space:nowrap}
.notice-text.warn{color:#ff6a5a}

/* minimap (A_dlg_map) */
.minimap .map-area{border-radius:50%;overflow:hidden;z-index:1;pointer-events:none}
.map-image{position:absolute;inset:0;background-repeat:no-repeat;image-rendering:auto}
.map-dots{position:absolute;inset:0;z-index:2}.map-dot{position:absolute;width:5px;height:5px;margin:-2px 0 0 -2px;border-radius:50%;border:1px solid #000}.map-dot.npc{background:#6bea4b}.map-dot.target{background:#ff3b2e}
.map-player{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3px 0 0 -3px;background:#ffe24a;border:1px solid #000;border-radius:50%;z-index:3}
.map-ring{z-index:2}
.map-name{position:absolute;left:0;right:0;top:158px;text-align:center;font:11px var(--hud-font);color:#fff;white-space:nowrap}

/* chat (C_dlg_CHAT_box2 region, lower part) */
.chat{pointer-events:none}
.chat-log{position:absolute;left:6px;right:6px;bottom:22px;max-height:96px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;z-index:3}
.gamebox .chat-log{max-height:none}
.chat-line{margin:0;font:11px var(--hud-font);line-height:15px;color:#fff}
.chat-line.combat{color:#ffd28a}.chat-line.loot,.chat-line.victory{color:#8af07a}.chat-line.level{color:#ffe14a}
.chat-line.death,.chat-line.system,.chat-line.warn{color:#ff6a5a}.chat-line.autoattack{color:#3fe23a}.chat-line.say{color:#fff}.chat-line.heal{color:#7cf28a}
.chat-form{position:absolute;left:4px;right:4px;bottom:2px;pointer-events:auto}
.chat-input-box .chat-form{top:6px;bottom:auto}
.chat-input{width:100%;height:18px;background:rgba(0,0,0,.65);border:1px solid #556;color:#fff;font:11px var(--hud-font);padding:0 4px}

/* windows (native frames decorate the box; body is web content placed inside) */
.window{pointer-events:auto;z-index:8}
.window.fallback-frame{background:rgba(12,14,18,.94);border:1px solid #556}
.window-title{position:absolute;left:0;right:0;top:6px;text-align:center;font:bold 12px var(--hud-font);color:#e9d39b;z-index:3;text-shadow:1px 1px 0 #000}
.window-close{position:absolute;right:8px;top:6px;width:16px;height:16px;padding:0;line-height:14px;background:#2b2f36;border:1px solid #777;color:#ddd;font:12px var(--hud-font);z-index:4;cursor:pointer}
.window-body{position:absolute;left:12px;right:12px;top:58px;bottom:16px;overflow:auto;z-index:3;font:11px var(--hud-font)}
.window-body button{font:11px var(--hud-font);background:linear-gradient(#3a4049,#23272d);border:1px solid #6b7480;color:#fff;padding:3px 8px;cursor:pointer;margin:2px 0}
.window-body button:disabled{opacity:.45;cursor:not-allowed}
.window-body h3{font:bold 11px var(--hud-font);color:#e9d39b;margin:8px 0 4px}
.skills-window .window-body{top:60px}
.skill-tabs{display:flex;gap:2px;margin-bottom:6px}
.skill-tab{flex:1}
.skill-tab.active{background:linear-gradient(#5a6170,#353a44);border-color:#c9b27a}
.skill-tab::after{content:" " attr(data-count);color:#aaa}
.skill-list{display:flex;flex-direction:column;gap:2px}
.skill-row{display:grid;grid-template-columns:36px 1fr auto;gap:6px;align-items:center;padding:2px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06)}
.skill-row img{width:36px;height:36px;object-fit:contain;image-rendering:auto} /* 2011 icon: 40x40 source (tools/stage-icons-2011.py) */
.skill-row.locked img{filter:grayscale(1) brightness(.6)}
.skill-row.castable img{cursor:grab}
.skill-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.skill-info strong{font:bold 11px var(--hud-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-info small{color:#bbb}
.skill-status.source{color:#8fd0ff}.skill-status.inferred{color:#ffcf6a}.skill-status.blocked{color:#ff7d6d}.skill-status.passive{color:#9fe89a}
.skill-hint{color:#999;margin-top:6px}
/* 2011 learning (skill-learning.js): pools of a progression save, learn / train buttons, refusal text in the 2011 wording */
.skill-pools{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px}
.skill-pool{display:flex;flex-direction:column;padding:2px 4px;background:rgba(0,0,0,.35);border:1px solid rgba(201,178,122,.25)}
.skill-pool strong{font:bold 11px var(--hud-font);color:#e8d9a8}.skill-pool small{color:#bbb}
.skill-actions{display:flex;gap:2px;align-items:center}
.skill-learn,.skill-train{font:bold 10px var(--hud-font);padding:1px 5px}
.skill-train:disabled{opacity:.45}
.skill-row.unlearned strong{color:#9a9a9a}
.skill-status.learnable{color:#e8d9a8}.skill-status.refused{color:#ff7d6d}
.npc-role{color:#9fe89a;margin:2px 0 6px}.npc-phrase{color:#ddd;line-height:1.5}
.npc-option,.warp-option,.menu-option{display:block;width:100%;text-align:left}
.npc-note,.warp-note{display:block;color:#ffcf6a;margin:0 0 4px}
.inv-item{margin:2px 0}.inv-alz{margin-top:8px;color:#ffe14a}
/* PC source layout: all positions below are local ui.dat pixels, scaled only by
   the parent dialog. Bag divisions are inferred from the native 8x8 capture. */
.pc-inventory-host{position:absolute;inset:0;pointer-events:none;z-index:3}
.pc-inventory{position:absolute;inset:0;font:11px Arial,sans-serif;pointer-events:none}
.pc-inventory button,.pc-inventory span,.pc-pet-empty{box-sizing:border-box}
.pc-inventory button{position:absolute;padding:0;margin:0;border:0;background-color:transparent;color:#eee;font:11px Arial,sans-serif;pointer-events:auto;cursor:pointer;background-repeat:no-repeat}
.pc-inventory button:focus-visible{outline:1px solid #ead19b;outline-offset:-1px}
.pc-equipped-slot{overflow:hidden}
.pc-inventory .selected,.pc-inventory .drop{box-shadow:inset 0 0 0 1px #d2b16a}
.pc-inventory .pc-bag{position:absolute;display:grid;grid-template-columns:repeat(8,29px);grid-template-rows:repeat(8,29px);pointer-events:auto;background:rgba(5,7,9,.7)}
.pc-inventory .pc-item-cell{position:relative;width:29px;height:29px;border:1px solid #2a2d30;overflow:hidden}
.pc-inventory .pc-item-cell[hidden]{display:none}
.pc-item-render{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.pc-item-fallback{display:block;font:8px/9px Arial,sans-serif;max-height:100%;overflow:hidden;overflow-wrap:anywhere;pointer-events:none}
.pc-item-count{position:absolute;right:1px;bottom:0;color:white;text-shadow:1px 1px #000;pointer-events:none}
.pc-inventory .pc-bag-tab{font:12px Arial,sans-serif;text-shadow:1px 1px #000}
.pc-bag-tab:disabled{color:#777}
.pc-inventory .pc-equipment-tab{background:linear-gradient(#343a3d,#181d20);border:1px solid #41464a;border-radius:2px 2px 0 0}
.pc-equipment-tab[aria-pressed=true]{background:linear-gradient(#51595e,#252c30)}
.pc-inventory .pc-alz{position:absolute;text-align:right;color:#ffa85b;line-height:14px}
.pc-inventory-status{position:absolute;font:10px Arial,sans-serif;color:#ffcf6a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-inventory .pc-item-action{font-size:9px;color:#e9d39b;background:rgba(24,29,32,.9);border:1px solid #42484b}
.pc-item-action:disabled{visibility:hidden}
.pc-pet-empty{position:absolute;display:flex;align-items:center;justify-content:center;background:#101416;color:#999}
.pc-paper-doll[hidden],.pc-pet-empty[hidden]{display:none}
.pc-status-bar{z-index:4}
.pc-status-cell{pointer-events:auto}
.pc-status-cell img{width:100%;height:100%;object-fit:contain}
.pc-status-cell span{position:absolute;right:1px;bottom:0;font:10px Arial,sans-serif;color:#fff;text-shadow:1px 1px #000,-1px -1px #000}
.pc-status-cell[hidden],.pc-status-bar[hidden]{display:none}
/* Diagnostic mode badges belong to the bench, outside the native HUD view. */
.hud-root .world-opt-badge,.status .class-text{display:none}
.inventory-window .window-title{top:2px;font:16px/21px Georgia,"Times New Roman",serif;color:#c4d2d8;text-transform:uppercase;white-space:nowrap}
.inventory-window .window-close{right:8px;top:7px;width:15px;height:15px;background:transparent;border:0;color:#ccc}
.character-window .window-body{top:64px;left:18px;right:18px}
.character-fact{display:flex;justify-content:space-between;gap:6px;min-height:20px;color:#c8cdd1}
.character-fact strong{color:white;font-weight:normal}
.qs-page-count{position:absolute;left:464px;top:35px;font:9px Arial,sans-serif;color:#e9d39b;z-index:7;pointer-events:none}
.test-bars .qs-page{cursor:pointer}
.test-bars .qs-page-num{display:none}
.menu-window .window-body{top:36px}
.automation-window .window-body{top:36px}
.auto-row{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}
.auto-checks label{display:flex;gap:3px;align-items:center}
.auto-note{color:#aaa;line-height:1.45;margin:4px 0}
.auto-mode{color:#e9d39b;margin-bottom:4px}
.quest{border:1px solid rgba(255,255,255,.08);padding:4px;margin:3px 0;background:rgba(0,0,0,.3)}
.quest.done{opacity:.6}.quest.active{border-color:#c9b27a}
.quest h3{margin:0 0 2px}.quest p{margin:2px 0;color:#bbb}

/* overhead names and HP bars (HpOnTopBar=1, options.cfg). NPC names green as on the native frame. */
.hud-labels{position:absolute;inset:0;pointer-events:none;--ui-scale:1}
/* round 6: bar above the name (observed-native nameplates); sizes follow the UI scale (frame 110x12 native px) */
.overhead{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;transform-origin:0 0;margin-left:-80px;width:160px}
.overhead-name{font:calc(11px * var(--ui-scale)) var(--hud-font);color:#e8e8e8;white-space:nowrap;margin-top:calc(10px * var(--ui-scale))}
.hud-labels .overhead-name{text-shadow:1px 1px 0 rgba(0,0,0,.75)}
.overhead.npc .overhead-name{color:#6bea4b}
.overhead.enemy .overhead-name{color:#e3b9c3}
.overhead.enemy.selected .overhead-name{color:#e3b9c3}
.overhead.hero .overhead-name{color:#fff}
.overhead-hp{box-sizing:border-box;width:calc(110px * var(--ui-scale));height:calc(11px * var(--ui-scale));background:#1a0503;border:calc(2px * var(--ui-scale)) solid #7d8288;border-radius:calc(5px * var(--ui-scale));box-shadow:0 0 0 1px #000}
.overhead-hp-fill{height:100%;background:linear-gradient(#ff5a4a,#e00000 60%,#a30000);border-radius:2px}
.overhead.enemy .overhead-hp-fill{background:linear-gradient(#ffe48a,#ffb000 60%,#d27a00)}
.overhead-hp[hidden]{display:none}

/* workbench: outside the HUD, opened by ?bench=1 or the discrete corner button */
.bench-toggle{position:fixed;right:4px;bottom:4px;z-index:30;width:18px;height:18px;padding:0;font-size:11px;line-height:16px;background:rgba(0,0,0,.4);border:1px solid #333;color:#666;cursor:pointer}
.bench-panel{position:fixed;right:26px;bottom:4px;z-index:30;width:min(360px,calc(100vw - 40px));max-height:70vh;overflow:auto;background:rgba(8,10,12,.95);border:1px solid #444;padding:10px;font:11px var(--hud-font);color:#ddd}
.bench-panel h2{font:bold 12px var(--hud-font);margin:0 0 6px;color:#e9d39b}.bench-panel h3{font:bold 11px var(--hud-font);margin:8px 0 4px}
.bench-facts{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:0}.bench-facts dt{color:#999}.bench-facts dd{margin:0;word-break:break-word}
.bench-events{margin:0;padding-left:18px;max-height:200px;overflow:auto}
.bench-opt{display:flex;gap:4px;align-items:center;margin:6px 0}
@media (max-width:700px){.chat{display:none}}
.cabal-dialog[hidden]{display:none!important}
.chat-btn[data-control=E_btn_CHAT_GAMEbox_close]{cursor:pointer}

/* 2011 modes badge (hud-game.js): aura / battle mode / combo / death penalty text under the status frame */
.mode-badge{position:absolute;left:0;top:86px;padding:1px 6px;font:600 11px/1.3 system-ui,sans-serif;color:#ffe9a8;background:rgba(20,16,10,.78);border:1px solid rgba(232,210,122,.45);border-radius:4px;white-space:nowrap;pointer-events:none}
.mode-badge.combo-open{color:#fff;background:rgba(160,40,30,.85);border-color:#ff9a7a}

/* ---------- 2011 PC client HUD (layout.era 2011, tools/stage-ui-2011.py; docs/hud-modes.md) ----------
   Font: Portuguese FONT_NORMAL = arial.ttf 11 px at 768 lines, ASCII 33..127 from the FONT_ENG face arialn.ttf (Arial Narrow) at the same
   size (FontData.cpp:235-276, ALSFont.cpp:154-190); the dialog transform scales it by height/768 like the client. The ASCII face falls back
   to bundled Liberation Sans Narrow 1.07.5 (Arial Narrow metrics), staged with its license and source on D:, never installed. */
@font-face{font-family:"Cabal2011";src:local("Arial"),local("ArialMT")}
@font-face{font-family:"Cabal2011";src:local("Arial Narrow"),local("ArialNarrow"),url('/assets/ui-2011/fonts/LiberationSansNarrow-Regular.ttf') format('truetype');font-weight:400;unicode-range:U+0021-007F;font-display:block}
@font-face{font-family:"Cabal2011";src:local("Arial Narrow Bold"),url('/assets/ui-2011/fonts/LiberationSansNarrow-Bold.ttf') format('truetype');font-weight:700;unicode-range:U+0021-007F;font-display:block}
.hud-root[data-hud-era="2011"]{--hud-font:"Cabal2011",Arial,sans-serif}
.hud-root[data-hud-era="2011"] .text-outline,.hud-root[data-hud-era="2011"] .text-2011,.hud-root[data-hud-era="2011"] .tt-text,
.hud-root[data-hud-era="2011"] .btn-2011-text,.hud-root[data-hud-era="2011"] .title-2011{text-shadow:1px 1px 0 rgba(0,0,0,.85)}
/* status frame: "Nv." + level (text records txt_CHR_lvtxt / txt_CHR_lv, #eeeeee, right-aligned), SP section pips, hover tooltip */
.hud-root[data-hud-era="2011"] .status.hover-target{pointer-events:auto}
.hud-root[data-hud-era="2011"] .status .text-2011{display:flex;align-items:center;justify-content:flex-end;font:11px var(--hud-font);line-height:12px;color:#eeeeee;z-index:5;white-space:nowrap;pointer-events:none}
.hud-root[data-hud-era="2011"] .status .level-text{left:auto;top:auto;text-align:right}
.hud-root[data-hud-era="2011"] .sp-pip{z-index:4}
.hud-root[data-hud-era="2011"] .sp-pip[hidden]{display:none}
.status-tooltip,.exp-info{z-index:20;pointer-events:none}
.status-tooltip .tt-text,.exp-info .tt-text{display:flex;align-items:center;font:11px var(--hud-font);color:#eeeeee;white-space:nowrap;z-index:2}
.status-tooltip .tt-label{justify-content:center;font-weight:bold}.status-tooltip .tt-label.hp{color:#e64f3a}.status-tooltip .tt-label.mp{color:#3b45c1}.status-tooltip .tt-label.sp{color:#debc34}
.status-tooltip .tt-sep{justify-content:center}.status-tooltip .tt-value,.exp-info .tt-value{justify-content:flex-end}
.exp-info .tt-row{justify-content:flex-start}
/* target line "Nv.%3d   name" (#eeeeee, centred); white-space kept for the padded level */
.hud-root[data-hud-era="2011"] .target .target-name{color:#eeeeee;white-space:pre}
/* quick slots: EX row background only while the pointer is in the dialog rect; EX key glyphs only on linked slots */
.hud-root[data-hud-era="2011"] .quickslot .qs-hit{pointer-events:auto;z-index:1}
.hud-root[data-hud-era="2011"] .quickslot .qs-ex-bg{display:none}
.hud-root[data-hud-era="2011"] .quickslot.hover .qs-ex-bg{display:block}
/* key labels only on linked slots, both rows (the draw flag is set per frame for non-empty links: UserInput.cpp:1013-1021, UIDlgRenderProc.cpp:1926) */
.hud-root[data-hud-era="2011"] .quickslot .qslot.empty .qslot-key-2011{display:none}
.hud-root[data-hud-era="2011"] .quickslot:not(.hover) .qslot.qs-ex.empty .qslot-key{display:none}
.hud-root[data-hud-era="2011"] .qs-page-num[hidden]{display:none}
.hud-root[data-hud-era="2011"] .quickslot .exp-hover{pointer-events:auto;z-index:2}
/* key labels = the K_txt_QCK_Key text records (format 260: left + vcentre), price font (hud-game.js quickKeyLabel2011) */
.hud-root[data-hud-era="2011"] .qslot-key-2011{display:flex;align-items:center;font:10.5px Arial,sans-serif;line-height:16px;white-space:nowrap;text-shadow:1px 1px 0 rgba(0,0,0,.85)}
.hud-root[data-hud-era="2011"] .qslot-cd.cd-2011{background-color:transparent;-webkit-mask-image:conic-gradient(transparent 0 var(--cd-a,0deg),#000 var(--cd-a,0deg) 360deg);
  mask-image:conic-gradient(transparent 0 var(--cd-a,0deg),#000 var(--cd-a,0deg) 360deg)}
.qslot-cd-line{position:absolute;width:1px;margin-left:-.5px;background:rgb(232,252,255);transform-origin:50% 100%;z-index:6;pointer-events:none}
.qslot-cd-line[hidden]{display:none}
/* 2011 text records drawn by hud-game.js text2011 (format & 3: 0 left / 1 centre / 2 right; 0x10 word break) */
.hud-root[data-hud-era="2011"] .rec-2011{display:flex;align-items:center;font:11px var(--hud-font);line-height:1.1;white-space:pre;overflow:visible;pointer-events:none;z-index:3}
.hud-root[data-hud-era="2011"] .rec-2011.align-1{justify-content:center;text-align:center}.hud-root[data-hud-era="2011"] .rec-2011.align-2{justify-content:flex-end;text-align:right}
.hud-root[data-hud-era="2011"] .rec-2011.wrap{white-space:normal;align-items:flex-start}
.hud-root[data-hud-era="2011"] .dialog-2011 .window-body:empty{display:none}
/* decoded 2011 buttons: 3 sprite states, ui.dts tooltip, text record (260 left / 261 centre / 262 right) */
.btn-2011{pointer-events:auto;cursor:pointer;z-index:4}
.btn-2011.inert,.btn-2011.disabled{cursor:default}
.btn-2011-text{position:absolute;display:flex;align-items:center;font:11px var(--hud-font);white-space:nowrap;pointer-events:none;overflow:visible}
.btn-2011-text.align-0{justify-content:flex-start}.btn-2011-text.align-1{justify-content:center}.btn-2011-text.align-2{justify-content:flex-end}
/* windows: decoded title record and X button replace the web title / close */
.hud-root[data-hud-era="2011"] .window-title.title-2011{right:auto;display:flex;align-items:center;justify-content:center;font:11px var(--hud-font);text-transform:none}
.hud-root[data-hud-era="2011"] .window-close[hidden]{display:none}
.hud-root[data-hud-era="2011"] .menu-window .window-body{display:none}
.cabal-menu .window-body{display:none}
/* chat: player box (normal #eeeeee) bottom-left, game box (game #4bd500) bottom-right; 16 px lines */
.hud-root[data-hud-era="2011"] .chat-line{line-height:16px}
.hud-root[data-hud-era="2011"] .gamebox .chat-line{color:#4bd500}
.hud-root[data-hud-era="2011"] .gamebox .chat-line.warn,.hud-root[data-hud-era="2011"] .gamebox .chat-line.death{color:#ff4840}
.hud-root[data-hud-era="2011"] .say-log .chat-line{color:#eeeeee}
.hud-root[data-hud-era="2011"] .chatbox .chat-log{max-height:none}
.hud-root[data-hud-era="2011"] .chatbox{pointer-events:auto}
.hud-root[data-hud-era="2011"] .chatbox[data-chat-frame="false"] .deco,
.hud-root[data-hud-era="2011"] .chatbox[data-chat-frame="false"] .chat-btn{visibility:hidden}
.hud-root[data-hud-era="2011"] .chat-form-2011{left:0;top:0;right:auto;bottom:auto;width:418px;height:30px}
.hud-root[data-hud-era="2011"] .chat-form-2011 .chat-input{position:absolute;background:transparent;border:0;padding:0 2px;height:15px;box-sizing:border-box;color:#eeeeee}
/* test-layer system-menu entries: outside the 2011 window, in #hud-test-layer */
.menu-test-panel{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:40;display:flex;gap:4px;align-items:center;padding:4px 6px;
  background:rgba(10,12,16,.9);border:1px dashed #c9b27a;font:11px Arial,sans-serif;color:#e9d39b}
.menu-test-panel[hidden]{display:none}
.menu-test-panel .menu-option{display:inline-block;width:auto;font:11px Arial,sans-serif;background:#2b2f36;border:1px solid #6b7480;color:#fff;padding:2px 6px;cursor:pointer}
.hud-test-layer{position:fixed;inset:0;pointer-events:none;z-index:50}
.hud-test-layer>*{pointer-events:auto}
.hud-test-layer .world-opt-badge{display:block}
.hud-root[data-hud-era="2011"] .skill-tab::after{content:none}
.hud-root[data-hud-mode="original"] .skill-status.source,.hud-root[data-hud-mode="original"] .skill-status.inferred{color:#c8cdd1}
.hud-test-layer .auto-quest-tracker{pointer-events:none}
/* own buffs (C_dlg_new_buff, UIBuffProc.cpp): timer text %4d in #ffea8a (D_txt_new_buff_NN text records) */
.hud-root[data-hud-era="2011"] .pc-status-cell span{color:#ffea8a;font:11px var(--hud-font)}

/* ---------- 2011 round 2 (hud-2011-parts.js; docs/hud-modes.md "Round 2") ---------- */
.hud-root[data-hud-era="2011"] [hidden]{display:none!important}
/* control tooltip Y_dlg_Tooltip: fill #040606 @ .71, 1 px frame strips (#1d1d1d @ .82), white Arial 11, 5 px padding, line = glyph + 2 */
.tooltip-2011{position:absolute;transform-origin:0 0;z-index:80;pointer-events:none;background:rgba(4,6,6,.71);box-shadow:0 0 0 1px rgba(29,29,29,.82)}
.tt2011-lines{position:absolute;left:5px;top:5px;font:11px Arial,sans-serif;line-height:13px;color:#fff;white-space:pre;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
/* info boxes (K_dlg_SKILL_info): 240 wide, 16 px lines, text x 15..225 */
.info-2011{position:absolute;transform-origin:0 0;z-index:80;pointer-events:none}
.info-2011 .info-frame{z-index:0}
.info-2011-text{position:absolute;left:15px;top:0;width:210px;z-index:2}
.info-line{position:absolute;left:0;width:210px;height:16px;line-height:16px;font:11px Arial,sans-serif;color:#fff;white-space:nowrap;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.info-line.align-1{text-align:center}.info-line.align-2{text-align:right}
.info-2011 .info-sep{z-index:1}.info-2011 .info-icon{position:absolute;z-index:2}
/* skill windows D_dlg_skill_1..4: tree rows 225x42 at a 41 px pitch */
.skills-2011 .skill-page-2011,.character-2011 .character-page-2011{position:absolute;left:0;top:0;width:100%;height:100%}
.skills-2011 .skill-page-2011 .btn-2011,.character-2011 .btn-2011{pointer-events:auto}
.skill-tree-2011{position:absolute;overflow:hidden;pointer-events:auto}
.skill-row-2011{position:absolute;left:0;width:225px}
.skill-row-2011 .hud-el{position:absolute}
.skill-row-2011 .skill-row-text{display:flex;align-items:center;font:11px var(--hud-font);white-space:nowrap;text-shadow:1px 1px 0 rgba(0,0,0,.85);z-index:3}
.skill-row-2011 .skill-icon-2011{position:absolute;z-index:2;cursor:grab}
.skill-row-2011 .skill-cover{z-index:3;pointer-events:none}
.skill-row-2011 .btn-2011{z-index:4}
.skill-row-header-bg{position:absolute;left:0;top:0;background:#202326}
.skill-row-2011 .header-name{position:absolute;height:12px;color:#3d97f3;font-weight:bold}
/* character status page: ability rows 223x18 */
.ability-tree-2011{position:absolute;overflow:hidden;pointer-events:auto}
.ability-row-2011{position:absolute;left:0;width:223px;height:18px}
/* indicator A_dlg_indicator (40x40 cells) */
.indicator-2011 .btn-2011,.indicator-2011 .indicator-icon{z-index:4}
.indicator-2011 .indicator-icon{pointer-events:auto}
/* Web play controls occupy the gap below chat input and left of the EX slots. */
.play-controls{position:fixed;left:8px;bottom:calc(68px * var(--play-scale,1));display:flex;gap:2px;z-index:60;transform:scale(var(--play-scale,1));transform-origin:left bottom}
.play-controls>button{position:static;min-width:0;margin:0;padding:5px 3px;border:1px solid #666e70;border-radius:2px;background:linear-gradient(#293334,#101718);color:#eadc9e;font:11px/14px Arial,sans-serif;letter-spacing:0;cursor:pointer}
.play-controls>button[aria-pressed="true"]{background:linear-gradient(#3d603c,#1d3721);color:#eaffd4;border-color:#9da569;box-shadow:none}
.play-controls>.auto-settings-button{width:17px;padding:5px 0;color:#c4cbd0}
.play-controls>button:focus-visible{outline:1px solid #eadc9e;outline-offset:1px}
.auto-tools-panel{position:fixed;width:452px;height:480px;transform-origin:top left;z-index:65;pointer-events:auto;background:#111b20;color:#eee;font:11px/16px Arial,sans-serif;border:1px solid #65787e;box-shadow:0 4px 16px #000a}
.auto-tools-panel[hidden]{display:none}.auto-tools-frame{pointer-events:none}
.auto-tools-content{position:absolute;inset:10px 17px;display:flex;flex-direction:column}
.auto-tools-content h2{margin:0 30px 8px 0;font-size:14px;line-height:22px;color:#eadc9e;font-weight:normal;border-bottom:1px solid #66797c}
.auto-tools-content h3{margin:7px 0 4px;font-size:11px;font-weight:normal;color:#eadc9e;border-bottom:1px solid #435458}
.auto-tools-close{position:absolute;right:0;top:0;width:22px;height:22px;padding:0;color:#eee;background:#243139;border:1px solid #6c7b80;cursor:pointer}
.auto-tools-body{flex:1;min-height:0;overflow:auto;padding:0 4px 4px 0;scrollbar-color:#6a797e #152329;scrollbar-width:thin}
.auto-tools-note{margin:3px 0 8px;color:#aabdc5;line-height:16px}
.auto-tools-categories{display:grid;grid-template-columns:1fr 1.4fr;gap:2px 8px}
.auto-tools-check{display:flex;align-items:center;gap:5px;min-height:19px;cursor:pointer;white-space:nowrap}
.auto-tools-check input{appearance:none;flex:none;width:13px;height:13px;margin:0;background-repeat:no-repeat;cursor:pointer;border:1px solid #526d77;box-sizing:border-box}
.auto-tools-check input:checked{background-color:#829b57}.auto-tools-check input:focus-visible{outline:1px solid #eadc9e}
.auto-tools-tiers{display:flex;gap:9px;align-items:center}.auto-tools-tiers strong{width:25px;color:#c4d2d7;font-weight:normal}
.auto-tools-field{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0}
.auto-tools-field input,.auto-tools-field select{box-sizing:border-box;min-width:0;width:195px;height:22px;padding:2px 5px;background:#091216;color:#eee;border:1px solid #526d77;font:11px Arial,sans-serif}
.auto-tools-field input[type="number"]{width:50px}.auto-tools-minimums{display:flex;justify-content:space-between;gap:8px}
.auto-tools-minimums .auto-tools-field{flex-direction:column;gap:2px}.auto-tools-minimums select{width:100px}
.auto-tools-summary{margin:6px 0 0;padding:5px 6px;min-height:30px;background:#071014b8;border-top:1px solid #526d77;color:#c9d0b6;font-size:10px;line-height:14px}
.eq-tip-icon{float:left;width:30px;height:30px;margin:0 8px 5px 0;object-fit:contain}
/* overhead names / HP plates (2011): Arial 11 x H/768, centred on the anchor, dark halo of the CALS glyphs */
.overhead2011{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.overhead2011 .oh-name{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:Arial,sans-serif;line-height:1;
  text-shadow:0 1px 0 rgba(0,0,0,.25),1px 0 0 rgba(0,0,0,.25),1px 2px 0 rgba(0,0,0,.25),2px 1px 0 rgba(0,0,0,.25),2px 2px 0 rgba(0,0,0,.12)}
.overhead2011 .oh-hp{position:absolute}
.overhead2011 .oh-hp-frame,.overhead2011 .oh-hp-fill{position:absolute;left:0;top:0;background-repeat:no-repeat}
.overhead2011 .oh-hp-fill{z-index:1}
/* GPS G_dlg_gps */
.gps-2011 .gps-map-image{position:absolute;background:no-repeat 0 0/100% 100%;z-index:1}
.gps-2011 .gps-marks{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none}
.gps-2011 .gps-warp-point{pointer-events:auto;cursor:pointer;z-index:3}
.gps-2011 .gps-mark{position:absolute;width:18px;height:18px;background-repeat:no-repeat;background-size:28.8px 28.8px;background-position:0 0;pointer-events:auto}
.gps-2011 .gps-mark[data-icon="Map_Officer"]{background-image:url(/assets/world/map-icons/Map_Officer.png)}
.gps-2011 .gps-mark[data-icon="Map_Instructor"]{background-image:url(/assets/world/map-icons/Map_Instructor.png)}
.gps-2011 .gps-mark[data-icon="Map_Alchemist"]{background-image:url(/assets/world/map-icons/Map_Alchemist.png)}
.gps-2011 .gps-mark[data-icon="Map_Merchant"]{background-image:url(/assets/world/map-icons/Map_Merchant.png)}
.gps-2011 .gps-mark[data-icon="Map_Warehouse"]{background-image:url(/assets/world/map-icons/Map_Warehouse.png)}
.gps-2011 .gps-mark[data-icon="Map_Event"]{background-image:url(/assets/world/map-icons/Map_Event.png)}
.gps-2011 .gps-mark[data-icon="Map_Trustshop"]{background-image:url(/assets/world/map-icons/Map_Trustshop.png)}
.gps-2011 .gps-mark[data-icon="Map_RuneAgent"]{background-image:url(/assets/world/map-icons/Map_RuneAgent.png)}
.gps-2011 .gps-mark[data-icon="Map_Warpgate"]{background-image:url(/assets/world/map-icons/Map_Warpgate.png)}
.gps-2011 .gps-mark[data-icon="Map_Dungeon"]{background-image:url(/assets/world/map-icons/Map_Dungeon.png)}
.gps-2011 .gps-me{position:absolute;width:30px;height:30px;background:url(/assets/ui-2011/map/Me.png) no-repeat 0 0/100% 100%;z-index:4}
.gps-2011 .gps-tree{position:absolute;overflow:hidden;pointer-events:auto;z-index:2}
.gps-2011 .gps-row{position:absolute;left:0;width:155px;height:42px;cursor:pointer}
.gps-2011 .gps-row:hover{background:rgba(79,88,95,.45)}.gps-2011 .gps-row.selected{background:rgba(58,94,121,.45)}
.gps-2011 .gps-row-icon{position:absolute;left:0;top:1px;width:38px;height:38px}
.gps-2011 .gps-row-cover{z-index:1}
.gps-2011 .gps-row-name{position:absolute;left:46px;top:12px;width:90px;height:12px;font:11px var(--hud-font);color:#eeeeee;white-space:nowrap;line-height:12px}
.scrollbar-2011{position:absolute;pointer-events:auto;z-index:5}
.scrollbar-2011 .scroll-track{pointer-events:auto}
.scrollbar-2011 .scroll-thumb{touch-action:none}
.hud-root[data-hud-era="2011"] .clip-2011{overflow:hidden}
.hud-root[data-hud-era="2011"] .info-line{font-family:var(--hud-font);overflow:hidden}
.gps-row-separator{z-index:3;pointer-events:none}
.gps-2011 .gps-title{cursor:move}
.gps-info-2011{position:absolute;transform-origin:0 0;z-index:80;pointer-events:none;background:rgba(4,6,6,.71);box-shadow:0 0 0 1px rgba(22,22,22,.6);padding:0 5px 3px;
  font:11px Arial,sans-serif;text-align:center;white-space:nowrap}
.gps-info-line{line-height:16px;height:16px}
.hud-root[data-hud-era="2011"] .window-body:empty{display:none}
.hud-root[data-hud-era="2011"] .inventory-window .inv-2011-ctl{z-index:12;pointer-events:auto}
.hud-root[data-hud-era="2011"] .inventory-window .rec-2011.inv-2011-ctl{pointer-events:none}
/* 2011 inventory page tabs: selected = pressed sprite, available = normal (+hover), blocked premium page 3/4 = native normal art
   dimmed. The dim is a web adaptation: the source has no disabled art, only the refusal message and tooltip (UIButton.cpp:821-862). */
.pc-inventory-2011 .pc-bag-tab[data-tab-state=blocked]{filter:grayscale(1) brightness(.55);cursor:default}