/* =====================================================================
   GW HELIOS - web design system
   ---------------------------------------------------------------------
   The website wears the same "holo glass" look as the in-game client
   (unity-client/GwMobile/Assets/Scripts/Ui/UiTheme.cs): deep navy
   translucent panels with a soft vertical gradient, 45-degree chamfered
   corners (top-left / bottom-right), a thin luminous cyan edge with
   brighter corner brackets, a scan-lined title strip with a left accent
   bar, cyan-edged steel buttons and an amber-to-orange "energy" button
   for the primary action, tabs with a glowing underline, chamfered item
   slots and slanted HP / MP / EXP bars. Gold is kept for the precious.

   Fonts match the client: Barlow (UiFont) for the interface, Cinzel
   (TitleFont) for display headings.

   Sections
     1. Tokens            8. Bars, slots, stats
     2. Base              9. Tables
     3. Stage / layout   10. Modals, popups
     4. Top bar, drawer  11. Bootstrap theming
     5. Panels           12. Legacy component compatibility
     6. Buttons, tabs    13. Utilities
     7. Fields, badges   14. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
/* .hx-banner (an in-game scene) keeps the dark values in both themes */
:root,
.hx-banner {
    /* palette (UiTheme.cs) */
    --hx-text: #e4eef8;
    --hx-text-dim: #8ca0ba;
    --hx-text-faint: #5e708a;
    --hx-ice: #ecf6ff;
    --hx-teal: #46e2f5;
    --hx-teal-hot: #a0f6ff;
    --hx-accent: #80ecff;
    --hx-accent-deep: #1880a8;
    --hx-gold: #ffcc60;
    --hx-gold-deep: #d9a43a;
    --hx-amber: #ffa830;
    --hx-good: #6eec8c;
    --hx-warn: #ffbe3c;
    --hx-bad: #ff5a5f;
    --hx-hp: #e83448;
    --hx-mp: #288eff;
    --hx-exp: #ffbe3c;
    --hx-elite: #b078ff;
    --hx-boss: #ff5a46;

    /* surfaces */
    --hx-void: #04070e;
    --hx-bg: #070b16;
    --hx-body-top: rgba(24, 36, 58, 0.93);
    --hx-body-bottom: rgba(7, 11, 22, 0.95);
    --hx-head-top: #223858;
    --hx-head-bottom: #0f192b;
    --hx-inset: rgba(2, 5, 13, 0.62);
    --hx-card: rgba(14, 24, 42, 0.72);
    --hx-card-hover: rgba(20, 38, 64, 0.85);
    --hx-edge: rgba(var(--hx-teal-rgb), 0.42);
    --hx-edge-soft: rgba(var(--hx-steel-rgb), 0.28);
    --hx-edge-faint: rgba(var(--hx-steel-rgb), 0.14);
    --hx-line: rgba(128, 236, 255, 0.16);
    --hx-scrim: rgba(1, 4, 9, 0.72);
    --hx-topbar-bg: linear-gradient(180deg, rgba(10, 18, 34, .94), rgba(5, 9, 18, .9));
    --hx-drawer-bg: linear-gradient(180deg, rgba(14, 24, 42, .98), rgba(5, 9, 18, .99));
    --hx-footer-bg: linear-gradient(180deg, rgba(5, 9, 18, .7), rgba(2, 4, 9, .96));
    --hx-pop-grad: linear-gradient(180deg, rgba(22, 36, 59, .98), rgba(8, 15, 28, .98));  /* menus, toasts */
    --hx-modal-bg: linear-gradient(180deg, #16243b, #070b16);
    --hx-pop: #0e1828;                  /* solid popup: dropdowns, popovers, tooltips, <option> */
    --hx-pop-head: #16243b;
    --hx-strip: linear-gradient(180deg, rgba(34, 56, 88, .85), rgba(15, 25, 43, .6));   /* window title strip */
    --hx-th-bg: linear-gradient(180deg, rgba(34, 56, 88, .6), rgba(15, 25, 43, .6));    /* table head */
    --hx-th-solid: #13213a;
    --hx-chip: rgba(13, 25, 45, .7);
    --hx-chip-faint: rgba(13, 25, 45, .4);
    --hx-chip-solid: rgba(13, 25, 45, .9);
    --hx-chip-bg: linear-gradient(180deg, rgba(36, 62, 98, .5), rgba(13, 25, 45, .7));
    --hx-socket: radial-gradient(circle at 50% 35%, #1d3352, #0a1424);                  /* round / square icon sockets */
    --hx-field-bg: rgba(2, 5, 13, .7);
    --hx-field-focus: rgba(4, 12, 26, .85);
    --hx-field-edge: rgba(115, 184, 242, .3);
    --hx-field-off: rgba(20, 28, 42, .6);
    --hx-placeholder: #6a7d97;
    --hx-well: rgba(1, 4, 10, .85);     /* bar tracks */
    --hx-ghost-bg: rgba(10, 20, 36, .35);
    --hx-band: rgba(8, 16, 30, .55);    /* alternate section band */
    --hx-deep: #050912;
    --hx-backdrop: #010409;
    --hx-backdrop-opacity: .72;
    --hx-stage-veil: linear-gradient(180deg, rgba(4, 7, 14, .55), rgba(4, 7, 14, .9) 60%, var(--hx-void));
    --hx-stage-bright: .55;
    --hx-stage-opacity: .75;
    --hx-scan: rgba(255, 255, 255, .025);   /* scan lines on title strips */
    --hx-gold-grad: linear-gradient(180deg, #fff3c4, var(--hx-gold) 55%, #c98a1d);   /* gold lettering */
    --hx-hover-text: #fff;              /* the brightest ink: hovered / selected text */
    --hx-bad-text: #ff8a8e;
    --hx-good-text: #a6ffbd;
    --hx-warn-text: #ffd98a;
    --hx-elite-text: #cfaeff;
    --hx-discord-text: #aab1ff;
    --hx-silver: #d4dde8;
    /* colour channels for rgba(var(--x), alpha) */
    --hx-teal-rgb: 70, 226, 245;
    --hx-steel-rgb: 115, 164, 210;
    --hx-shadow-rgb: 0, 0, 0;
    --hx-shadow-k: 1;                   /* shadow strength multiplier */

    /* steel button (bottom -> top) */
    --hx-steel-lo: #0d192d;
    --hx-steel-hi: #243e62;
    --hx-steel-hover-lo: #0a3a58;
    --hx-steel-hover-hi: #2284aa;
    --hx-steel-press-lo: #14263e;
    --hx-steel-press-hi: #081222;
    --hx-off-lo: #1c1e24;               /* disabled button */
    --hx-off-hi: #30343c;
    --hx-off-rim: rgba(153, 168, 184, .28);
    --hx-off-text: #7c8796;
    /* amber energy button */
    --hx-primary-lo: #e26010;
    --hx-primary-hi: #ffc048;
    --hx-primary-text: #2c1402;

    /* type */
    --hx-font: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --hx-font-display: 'Cinzel', 'Times New Roman', serif;

    /* metrics */
    --hx-cut: 12px;
    --hx-cut-sm: 7px;
    --hx-radius: 4px;
    --hx-topbar-h: 64px;
    --hx-gutter: clamp(16px, 3vw, 32px);
    --hx-max: 1240px;
    --hx-ease: cubic-bezier(.2, .8, .2, 1);

    /* chamfer shapes: top-left + bottom-right cut, like the client's windows */
    --hx-shape: polygon(var(--hx-cut) 0, 100% 0, 100% calc(100% - var(--hx-cut)), calc(100% - var(--hx-cut)) 100%, 0 100%, 0 var(--hx-cut));
    --hx-shape-sm: polygon(var(--hx-cut-sm) 0, 100% 0, 100% calc(100% - var(--hx-cut-sm)), calc(100% - var(--hx-cut-sm)) 100%, 0 100%, 0 var(--hx-cut-sm));

    /* legacy tokens (older pages and their inline styles use these) re-pointed at the dark theme */
    --sidebar-width: 0px;
    --bg-light: var(--hx-bg);
    --bg-white: var(--hx-card);
    --bg-alt: rgba(10, 18, 32, 0.6);
    --bg-parchment: linear-gradient(180deg, var(--hx-body-top), var(--hx-body-bottom));
    --bg-stone: linear-gradient(180deg, #14203a, #0a1222);
    --text-dark: var(--hx-text);
    --text-muted: var(--hx-text-dim);
    --gold-primary: var(--hx-gold);
    --gold-bright: #ffe08a;
    --gold-dark: var(--hx-gold-deep);
    --gold-glow: rgba(255, 204, 96, 0.4);
    --bronze-primary: var(--hx-amber);
    --bronze-glow: rgba(var(--hx-teal-rgb), 0.3);
    --aegean-blue: var(--hx-ice);
    --aegean-light: var(--hx-accent);
    --hero-bg: var(--hx-void);
    --nav-bg: #060a14;
    --nav-bg-soft: #0c1424;
    --success-soft: rgba(110, 236, 140, 0.12);
    --success-border: rgba(110, 236, 140, 0.3);
    --success-text: var(--hx-good);
    --font-epic: var(--hx-font-display);
    --font-heading: var(--hx-font-display);
    --font-body: var(--hx-font);


    /* game client layer (18.): window ornaments, HUD, notices, cursor, item tooltips */
    --hx-gold-rgb: 255, 204, 96;
    --hx-frame-gold: #d4a94e;
    --hx-frame-inner: rgba(212, 169, 78, .16);   /* the engraved inner line of a window */
    --hx-title-ink: #f3e4bd;                     /* window titles: pale gold */
    --hx-engrave: rgba(255, 255, 255, .07);      /* top highlight of metal strips */
    --hx-brush: rgba(255, 255, 255, .012);       /* brushed-metal grain of the top bar */
    --hx-orn-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23d4a94e'%3E%3Cpath d='M3 1.6h19.4V21' stroke-width='1.3'/%3E%3Cpath d='M9.5 5.4h9.1v9.1' stroke-width='.8' opacity='.55'/%3E%3C/g%3E%3Crect x='19.4' y='1.4' width='3.6' height='3.6' transform='rotate(45 21.2 3.2)' fill='%23ffe7a6' stroke='%23d4a94e' stroke-width='.6'/%3E%3C/svg%3E");
    --hx-orn-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23d4a94e'%3E%3Cpath d='M21 22.4H1.6V3' stroke-width='1.3'/%3E%3Cpath d='M14.5 18.6H5.4V9.5' stroke-width='.8' opacity='.55'/%3E%3C/g%3E%3Crect x='1' y='19' width='3.6' height='3.6' transform='rotate(45 2.8 20.8)' fill='%23ffe7a6' stroke='%23d4a94e' stroke-width='.6'/%3E%3C/svg%3E");
    --hx-orn-cut-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.5 15.5L15.5 2.5' stroke='%23d4a94e' stroke-width='1.2'/%3E%3Ccircle cx='2.5' cy='15.5' r='1.3' fill='%23ffe7a6'/%3E%3Ccircle cx='15.5' cy='2.5' r='1.3' fill='%23ffe7a6'/%3E%3C/svg%3E");
    --hx-orn-cut-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 17.5L17.5 4.5' stroke='%23d4a94e' stroke-width='1.2'/%3E%3Ccircle cx='4.5' cy='17.5' r='1.3' fill='%23ffe7a6'/%3E%3Ccircle cx='17.5' cy='4.5' r='1.3' fill='%23ffe7a6'/%3E%3C/svg%3E");
    --hx-orn-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.6' y='2.6' width='6.8' height='6.8' transform='rotate(45 6 6)' fill='%23ffe7a6' stroke='%23d4a94e' stroke-width='.9'/%3E%3Crect x='4.6' y='4.6' width='2.8' height='2.8' transform='rotate(45 6 6)' fill='%23d4a94e' opacity='.55'/%3E%3C/svg%3E");
    --hx-exp-fill: linear-gradient(180deg, #ffe9a8, #ffbe3c 55%, #c98a1d);
    --hx-exp-tick: rgba(0, 0, 0, .6);
    --hx-ring: linear-gradient(160deg, #fff0bf, #d9a43a 40%, #7a5410 58%, #ffd36a);   /* portrait ring */
    --hx-sparta: #e0523f;
    --hx-athens: #4aa3ff;
    --hx-scroll-track: rgba(2, 5, 13, .55);
    --hx-tip-bg: linear-gradient(180deg, #101a2c, #05090f);
    --hx-tip-edge: rgba(212, 169, 78, .55);
    --hx-q-gear: #6bccfe;      /* item names in tooltips, by kind (the client's BASE_HEADCOLOR...) */
    --hx-q-jewel: #f0c800;
    --hx-q-item: #f2f6fb;
    --hx-q-mount: #14f078;
    --hx-q-fashion: #ff86ee;
    --hx-q-common: #f2f6fb;
    --hx-q-fine: #6eec8c;
    --hx-q-rare: #4aa8ff;
    --hx-q-epic: #c47bff;
    --hx-q-legend: #ff8a2a;
    --hx-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.55' stop-color='%23e0aa45'/%3E%3Cstop offset='1' stop-color='%238a5a12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2.5 1.5v18.2l4.9-4.6 3.3 7.3 3.4-1.5-3.3-7.2h6.9z' fill='url(%23g)' stroke='%23140c04' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M4.4 5.6v9.8' stroke='%23fff8dc' stroke-width='.9' opacity='.75'/%3E%3C/svg%3E") 3 2;
    --hx-cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.55' stop-color='%23e0aa45'/%3E%3Cstop offset='1' stop-color='%238a5a12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M9.2 1.6c1 0 1.8.8 1.8 1.8v6.3l1-.4c.9-.3 1.8.1 2.1.9l1-.3c.9-.3 1.8.1 2.1.9l.7-.2c1-.2 1.9.5 1.9 1.5v4.4c0 3.5-2.7 6.5-6.2 6.5h-2.1c-2 0-3.8-1-4.9-2.6l-3.3-4.9c-.6-.8-.4-1.9.4-2.4.7-.5 1.7-.3 2.3.3l1.4 1.5V3.4c0-1 .8-1.8 1.8-1.8z' fill='url(%23g)' stroke='%23140c04' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M11 10.2v4.6M14.1 10.6v4.2M17.2 11.2v3.8' stroke='%23140c04' stroke-width='.9' opacity='.5'/%3E%3C/svg%3E") 9 2;

    color-scheme: dark;
}

/*
 * Light theme: <html data-theme="light"> (cookie hx_theme, printed by Layout.php; the sun / moon
 * button in the top bar flips it, helios.js initTheme()). The same game window look on ice-white
 * glass: every colour above gets a light value here, so anything drawn with var(--hx-*) themes
 * itself. Never hard-code a colour in page CSS; add a token here and in :root instead.
 */
:root[data-theme="light"] {
    --hx-text: #1b2940;
    --hx-text-dim: #4a5b74;
    --hx-text-faint: #66768d;
    --hx-ice: #0c1a2e;
    --hx-teal: #0aa3bf;
    --hx-teal-hot: #0790aa;
    --hx-accent: #08758c;
    --hx-accent-deep: #065e72;
    --hx-gold: #8f5f00;
    --hx-gold-deep: #6f4900;
    --hx-amber: #b25a00;
    --hx-good: #137a37;
    --hx-warn: #8e5c00;
    --hx-bad: #c42b35;
    --hx-elite: #7442d0;
    --hx-boss: #c23b2a;

    --hx-void: #d8e2ed;
    --hx-bg: #e7edf4;
    --hx-body-top: rgba(255, 255, 255, .9);
    --hx-body-bottom: rgba(243, 247, 252, .94);
    --hx-head-top: #ffffff;
    --hx-head-bottom: #e4edf7;
    --hx-inset: rgba(222, 231, 242, .75);
    --hx-card: rgba(255, 255, 255, .74);
    --hx-card-hover: rgba(239, 250, 253, .96);
    --hx-edge: rgba(10, 150, 178, .5);
    --hx-edge-soft: rgba(50, 90, 140, .26);
    --hx-edge-faint: rgba(50, 90, 140, .16);
    --hx-line: rgba(20, 100, 135, .16);
    --hx-scrim: rgba(20, 34, 54, .45);
    --hx-topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(241, 246, 252, .92));
    --hx-drawer-bg: linear-gradient(180deg, rgba(251, 253, 255, .99), rgba(235, 242, 250, .99));
    --hx-footer-bg: linear-gradient(180deg, rgba(226, 235, 245, .88), rgba(211, 223, 236, .97));
    --hx-pop-grad: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(240, 246, 252, .99));
    --hx-modal-bg: linear-gradient(180deg, #ffffff, #edf3f9);
    --hx-pop: #ffffff;
    --hx-pop-head: #edf3f9;
    --hx-strip: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(226, 236, 247, .92));
    --hx-th-bg: linear-gradient(180deg, rgba(240, 245, 251, .96), rgba(224, 234, 245, .92));
    --hx-th-solid: #e3ecf6;
    --hx-chip: rgba(255, 255, 255, .8);
    --hx-chip-faint: rgba(255, 255, 255, .45);
    --hx-chip-solid: rgba(241, 246, 252, .97);
    --hx-chip-bg: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(229, 238, 248, .92));
    --hx-socket: radial-gradient(circle at 50% 35%, #ffffff, #d9e5f1);
    --hx-field-bg: rgba(255, 255, 255, .92);
    --hx-field-focus: #ffffff;
    --hx-field-edge: rgba(40, 90, 140, .32);
    --hx-field-off: rgba(220, 228, 238, .85);
    --hx-placeholder: #7a8aa0;
    --hx-well: rgba(30, 50, 80, .14);
    --hx-ghost-bg: rgba(255, 255, 255, .55);
    --hx-band: rgba(255, 255, 255, .45);
    --hx-deep: #d3dfeb;
    --hx-backdrop: #1a2638;
    --hx-backdrop-opacity: .45;
    --hx-stage-veil: linear-gradient(180deg, rgba(238, 243, 249, .74), rgba(233, 239, 246, .9) 60%, var(--hx-void));
    --hx-stage-bright: 1.05;
    --hx-stage-opacity: .4;
    --hx-scan: rgba(20, 60, 100, .025);
    --hx-gold-grad: linear-gradient(180deg, #c38a14, #9a6200 55%, #6b4200);
    --hx-hover-text: #06121f;
    --hx-bad-text: #b0222c;
    --hx-good-text: #12702f;
    --hx-warn-text: #835400;
    --hx-elite-text: #6a3cc0;
    --hx-discord-text: #4752c4;
    --hx-silver: #66768c;
    --hx-teal-rgb: 8, 160, 190;
    --hx-steel-rgb: 60, 100, 150;
    --hx-shadow-rgb: 40, 60, 95;
    --hx-shadow-k: .35;

    --hx-steel-lo: #dce6f1;
    --hx-steel-hi: #fbfdff;
    --hx-steel-hover-lo: #c4ebf4;
    --hx-steel-hover-hi: #f2fdff;
    --hx-steel-press-lo: #c9d7e6;
    --hx-steel-press-hi: #e6eef7;
    --hx-off-lo: #dde3ea;
    --hx-off-hi: #eef1f5;
    --hx-off-rim: rgba(100, 115, 135, .3);
    --hx-off-text: #7f8a9a;

    --bg-alt: rgba(255, 255, 255, .5);
    --bg-stone: linear-gradient(180deg, #f4f8fc, #e3ebf4);
    --gold-bright: #b07a10;
    --gold-glow: rgba(160, 110, 0, .25);
    --bronze-glow: rgba(8, 160, 190, .25);
    --nav-bg: #f4f8fc;
    --nav-bg-soft: #e8eff7;
    --success-soft: rgba(19, 122, 55, .1);
    --success-border: rgba(19, 122, 55, .3);


    /* game client layer (18.) */
    --hx-gold-rgb: 143, 95, 0;
    --hx-frame-gold: #a8761a;
    --hx-frame-inner: rgba(154, 106, 18, .2);
    --hx-title-ink: var(--hx-ice);
    --hx-engrave: rgba(255, 255, 255, .95);
    --hx-brush: rgba(20, 60, 100, .018);
    --hx-orn-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23a8761a'%3E%3Cpath d='M3 1.6h19.4V21' stroke-width='1.3'/%3E%3Cpath d='M9.5 5.4h9.1v9.1' stroke-width='.8' opacity='.55'/%3E%3C/g%3E%3Crect x='19.4' y='1.4' width='3.6' height='3.6' transform='rotate(45 21.2 3.2)' fill='%23e8bb55' stroke='%23a8761a' stroke-width='.6'/%3E%3C/svg%3E");
    --hx-orn-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23a8761a'%3E%3Cpath d='M21 22.4H1.6V3' stroke-width='1.3'/%3E%3Cpath d='M14.5 18.6H5.4V9.5' stroke-width='.8' opacity='.55'/%3E%3C/g%3E%3Crect x='1' y='19' width='3.6' height='3.6' transform='rotate(45 2.8 20.8)' fill='%23e8bb55' stroke='%23a8761a' stroke-width='.6'/%3E%3C/svg%3E");
    --hx-orn-cut-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.5 15.5L15.5 2.5' stroke='%23a8761a' stroke-width='1.2'/%3E%3Ccircle cx='2.5' cy='15.5' r='1.3' fill='%23e8bb55'/%3E%3Ccircle cx='15.5' cy='2.5' r='1.3' fill='%23e8bb55'/%3E%3C/svg%3E");
    --hx-orn-cut-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 17.5L17.5 4.5' stroke='%23a8761a' stroke-width='1.2'/%3E%3Ccircle cx='4.5' cy='17.5' r='1.3' fill='%23e8bb55'/%3E%3Ccircle cx='17.5' cy='4.5' r='1.3' fill='%23e8bb55'/%3E%3C/svg%3E");
    --hx-orn-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.6' y='2.6' width='6.8' height='6.8' transform='rotate(45 6 6)' fill='%23e8bb55' stroke='%23a8761a' stroke-width='.9'/%3E%3Crect x='4.6' y='4.6' width='2.8' height='2.8' transform='rotate(45 6 6)' fill='%23a8761a' opacity='.55'/%3E%3C/svg%3E");
    --hx-exp-fill: linear-gradient(180deg, #f3c45c, #c98a1d 55%, #8f5f00);
    --hx-exp-tick: rgba(255, 255, 255, .85);
    --hx-ring: linear-gradient(160deg, #f5d27a, #b07a10 45%, #6b4200 60%, #e0a83a);
    --hx-sparta: #b8321f;
    --hx-athens: #1f6fc4;
    --hx-scroll-track: rgba(30, 50, 80, .08);
    --hx-tip-bg: linear-gradient(180deg, #ffffff, #eef4fa);
    --hx-tip-edge: rgba(154, 106, 18, .55);
    --hx-q-gear: #0b6fa6;
    --hx-q-jewel: #8a6a00;
    --hx-q-item: #1b2940;
    --hx-q-mount: #0d7a40;
    --hx-q-fashion: #b0279c;
    --hx-q-common: #1b2940;
    --hx-q-fine: #137a37;
    --hx-q-rare: #0f5fc0;
    --hx-q-epic: #7442d0;
    --hx-q-legend: #b85400;

    color-scheme: light;
}

/* ---------------------------------------------------------------- 2. base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--hx-topbar-h) + 12px);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--hx-bg);
    color: var(--hx-text);
    font-family: var(--hx-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hx-font);
    font-weight: 700;
    color: var(--hx-ice);
    line-height: 1.2;
    margin: 0 0 .5em;
    text-transform: none;
}

p { margin: 0 0 1em; }

a {
    color: var(--hx-accent);
    text-decoration: none;
    transition: color .2s var(--hx-ease), opacity .2s var(--hx-ease);
}

a:hover { color: var(--hx-teal-hot); }

img, svg, video, canvas { max-width: 100%; }

::selection { background: rgba(var(--hx-gold-rgb), .38); color: var(--hx-hover-text); }

:focus-visible {
    outline: 2px solid var(--hx-teal);
    outline-offset: 2px;
}

hr { border: 0; height: 1px; background: var(--hx-line); opacity: 1; margin: 1.25rem 0; }

code, kbd, pre { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; }

/* game scrollbars: a steel thumb in a recessed track (Chrome / Edge / Safari). Firefox only knows the
   standard properties, and Chrome ignores the ::-webkit-scrollbar styling once they are set, so they
   apply only where the WebKit pseudo-elements do not exist. */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: rgba(var(--hx-teal-rgb), .45) var(--hx-scroll-track); }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--hx-scroll-track); box-shadow: inset 0 0 0 1px var(--hx-edge-faint); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--hx-steel-hi), var(--hx-steel-lo)) padding-box; border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(var(--hx-teal-rgb), .4); }
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg, var(--hx-steel-hi), var(--hx-steel-lo)) padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, var(--hx-steel-hover-hi), var(--hx-steel-hover-lo)) padding-box; box-shadow: inset 0 0 0 1px rgba(var(--hx-teal-rgb), .75); }
::-webkit-scrollbar-corner { background: var(--hx-scroll-track); }

.hx-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--hx-teal);
    color: #001018;
    font-weight: 700;
}
.hx-skip:focus { top: 12px; color: #001018; }

/* ---------------------------------------------------------------- 3. stage + layout */

/* The page sits on the game's own artwork, blurred and darkened (a page sets --hx-art). */
.hx-stage {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--hx-void);
    pointer-events: none;
    overflow: hidden;
}
.hx-stage::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: var(--hx-art, none) center 30% / cover no-repeat;
    filter: blur(14px) saturate(1.15) brightness(var(--hx-stage-bright));
    transform: scale(1.06);
    opacity: var(--hx-stage-opacity);
}
.hx-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(40, 120, 170, .22), transparent 70%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255, 168, 48, .07), transparent 70%),
        var(--hx-stage-veil);
}
/* faint hex grid, like the client's HexField window accent */
.hx-hexfield {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0 28 8.08v16.17L14 32.33 0 24.25V8.08zM14 32.33 28 40.42M14 32.33 0 40.42M14 32.33V48.5' fill='none' stroke='%2346e2f5' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
    mask-image: radial-gradient(ellipse 70% 55% at 100% 0%, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 100% 0%, #000, transparent 70%);
}

.hx-shell {
    min-height: 100vh;
    padding-top: var(--hx-topbar-h);
    display: flex;
    flex-direction: column;
}

.hx-main {
    flex: 1 0 auto;
    position: relative;
    min-width: 0;
}

.hx-container {
    width: 100%;
    max-width: var(--hx-max);
    margin: 0 auto;
    padding-left: var(--hx-gutter);
    padding-right: var(--hx-gutter);
}
.hx-container--wide { max-width: 1480px; }
.hx-container--narrow { max-width: 860px; }

.hx-section { padding: clamp(48px, 7vw, 96px) 0; position: relative; }
.hx-section--tight { padding: clamp(28px, 4vw, 48px) 0; }

/* ---------------------------------------------------------------- 4. top bar + drawer */
.hx-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hx-topbar-h);
    z-index: 1030;
    background: var(--hx-topbar-bg);
    border-bottom: 1px solid var(--hx-edge-faint);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    transition: background .3s var(--hx-ease), box-shadow .3s var(--hx-ease);
}
.hx-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--hx-teal-rgb), .55) 20%, rgba(var(--hx-teal-rgb), .15) 60%, transparent);
}
.hx-topbar.is-scrolled { box-shadow: 0 10px 30px rgba(var(--hx-shadow-rgb), calc(.45 * var(--hx-shadow-k))); }

.hx-topbar__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 var(--hx-gutter);
}

.hx-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--hx-ice);
}
.hx-brand img { width: 44px; height: auto; filter: drop-shadow(0 0 8px rgba(255, 204, 96, .35)); }
.hx-brand__name {
    font-family: var(--hx-font-display);
    font-weight: 700;
    font-size: 1.22rem;
    letter-spacing: .06em;
    background: var(--hx-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}
.hx-brand:hover { color: var(--hx-ice); }

.hx-nav {
    display: none;
    align-items: center;
    gap: 2px;
    margin: 0 auto 0 8px;
    min-width: 0;
}
.hx-nav > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--hx-topbar-h);
    padding: 0 12px;
    color: var(--hx-text-dim);
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hx-nav > a i { font-size: .85em; opacity: .8; }
.hx-nav > a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 2px;
    background: var(--hx-teal);
    box-shadow: 0 0 10px var(--hx-teal);
    transform: scaleX(0);
    transition: transform .25s var(--hx-ease);
}
.hx-nav > a:hover { color: var(--hx-ice); }
.hx-nav > a.active { color: var(--hx-accent); }
.hx-nav > a.active::after,
.hx-nav > a:hover::after { transform: scaleX(1); }
.hx-nav > a.is-play { color: var(--hx-gold); }
/* top-bar menus (Layout.php LayoutNavDropdown): a nav-styled toggle over a game-window panel */
.hx-navdrop { position: relative; display: flex; align-items: center; }
.hx-navdrop__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--hx-topbar-h);
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--hx-text-dim);
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.hx-navdrop__toggle i { font-size: .6rem; opacity: .7; transition: transform .2s var(--hx-ease); }
.hx-navdrop__toggle::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 2px;
    background: var(--hx-teal);
    box-shadow: 0 0 10px var(--hx-teal);
    transform: scaleX(0);
    transition: transform .25s var(--hx-ease);
}
.hx-navdrop__toggle:hover,
.hx-navdrop__toggle.show { color: var(--hx-ice); }
.hx-navdrop__toggle.active { color: var(--hx-accent); }
.hx-navdrop__toggle.show i { transform: rotate(180deg); }
.hx-navdrop__toggle:hover::after,
.hx-navdrop__toggle.show::after,
.hx-navdrop__toggle.active::after { transform: scaleX(1); }
.hx-navdrop__toggle:focus-visible { outline: 2px solid var(--hx-teal); outline-offset: -8px; }

.hx-navmenu.dropdown-menu {
    min-width: 236px;
    padding: 8px;
    background: var(--hx-pop-grad);
    border: 1px solid var(--hx-edge);
    clip-path: var(--hx-shape-sm);
    box-shadow: 0 18px 44px rgba(var(--hx-shadow-rgb), calc(.55 * var(--hx-shadow-k)));
}
.hx-navmenu.dropdown-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--hx-teal), rgba(var(--hx-teal-rgb), .1) 70%, transparent);
}
.hx-navmenu .dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    color: var(--hx-text);
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
    clip-path: var(--hx-shape-sm);
}
.hx-navmenu .dropdown-item i { width: 20px; text-align: center; color: var(--hx-accent); opacity: .85; flex-shrink: 0; }
.hx-navmenu .dropdown-item:hover,
.hx-navmenu .dropdown-item:focus { background: rgba(var(--hx-teal-rgb), .1); color: var(--hx-ice); }
.hx-navmenu .dropdown-item.active,
.hx-navmenu .dropdown-item:active { background: linear-gradient(90deg, rgba(var(--hx-teal-rgb), .2), rgba(var(--hx-teal-rgb), .03)); color: var(--hx-ice); box-shadow: inset 3px 0 0 var(--hx-teal); }
.hx-navmenu .dropdown-item.is-play { color: var(--hx-gold); }
.hx-navmenu--cols2.show { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); column-gap: 4px; }
.hx-navmenu__head { padding: 4px 12px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--hx-line); line-height: 1.25; }
.hx-navmenu__head b { display: block; color: var(--hx-ice); }
.hx-navmenu__head small { color: var(--hx-text-dim); font-size: .78rem; }
.hx-navmenu__sep { height: 1px; margin: 6px 4px; background: var(--hx-line); }

.hx-topbar__end {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.hx-nav + .hx-topbar__end { margin-left: 0; }

/* server chip (the client's "Server 1 / Online" plate) */
.hx-server {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 10px;
    color: var(--hx-ice);
    background: var(--hx-chip-bg);
    clip-path: var(--hx-shape-sm);
    position: relative;
    line-height: 1.1;
}
.hx-server::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: var(--hx-shape-sm);
    border: 1px solid var(--hx-edge);
    pointer-events: none;
}
.hx-server i { color: var(--hx-accent); font-size: 1.05rem; }
.hx-server b { display: block; font-size: .82rem; font-weight: 700; }
.hx-server small { display: block; font-size: .7rem; color: var(--hx-text-dim); }
.hx-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hx-good);
    box-shadow: 0 0 8px var(--hx-good);
    flex-shrink: 0;
}
.hx-dot.is-off { background: var(--hx-bad); box-shadow: 0 0 8px var(--hx-bad); }

.hx-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hx-edge-soft);
    background: var(--hx-chip);
    color: var(--hx-ice);
    font-size: 1.15rem;
    clip-path: var(--hx-shape-sm);
    cursor: pointer;
}
.hx-burger:hover { border-color: var(--hx-teal); color: var(--hx-accent); }

/* something waits in this menu (an unread support answer, tickets for staff): LayoutMenuAlert() */
.hx-alert-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hx-gold);
    box-shadow: 0 0 0 2px var(--hx-bg), 0 0 10px var(--hx-gold);
}
.hx-burger,
.hx-user { position: relative; }
.hx-burger .hx-alert-dot { position: absolute; top: 6px; right: 6px; }
.hx-user .hx-alert-dot { position: absolute; top: 1px; left: 26px; }

.hx-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
    color: var(--hx-ice);
    font-weight: 600;
}
.hx-user__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--hx-socket);
    border: 1px solid var(--hx-edge);
    color: var(--hx-gold);
    font-family: var(--hx-font-display);
    font-weight: 700;
    flex-shrink: 0;
}
.hx-user__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.hx-user { padding: 4px 8px 4px 4px; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; clip-path: var(--hx-shape-sm); }
button.hx-user:hover,
button.hx-user.show { background: rgba(var(--hx-teal-rgb), .08); }
.hx-user__caret { font-size: .6rem; color: var(--hx-text-dim); transition: transform .2s var(--hx-ease); }
button.hx-user.show .hx-user__caret { transform: rotate(180deg); }

/* drawer (mobile / tablet menu, and the full menu on every size) */
.hx-drawer.offcanvas {
    --bs-offcanvas-width: min(340px, 88vw);
    background: var(--hx-drawer-bg);
    color: var(--hx-text);
    border-right: 1px solid var(--hx-edge) !important;
    box-shadow: 20px 0 60px rgba(var(--hx-shadow-rgb), calc(.6 * var(--hx-shadow-k)));
}
.hx-drawer .offcanvas-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--hx-edge-faint);
    background:
        repeating-linear-gradient(0deg, var(--hx-scan) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, var(--hx-head-top), var(--hx-head-bottom));
}
.hx-drawer .offcanvas-body { padding: 14px 12px 24px; display: flex; flex-direction: column; gap: 6px; }

.hx-menu { display: flex; flex-direction: column; gap: 2px; }
.hx-menu__label {
    margin: 14px 10px 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hx-text-faint);
    display: flex;
    align-items: center;
    gap: 8px;
}
.hx-menu__label::after { content: ''; flex: 1; height: 1px; background: var(--hx-line); }
.hx-menu a,
.hx-menu button.hx-menu__toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--hx-text);
    font: inherit;
    font-weight: 600;
    font-size: .94rem;
    text-align: left;
    clip-path: var(--hx-shape-sm);
    transition: background .2s var(--hx-ease), color .2s var(--hx-ease);
}
.hx-menu a i,
.hx-menu__toggle > i:first-child {
    width: 20px;
    text-align: center;
    color: var(--hx-accent);
    opacity: .85;
    flex-shrink: 0;
}
.hx-menu a:hover,
.hx-menu__toggle:hover { background: rgba(var(--hx-teal-rgb), .07); color: var(--hx-ice); }
.hx-menu a.active {
    background: linear-gradient(90deg, rgba(var(--hx-teal-rgb), .16), rgba(var(--hx-teal-rgb), .03));
    color: var(--hx-ice);
}
.hx-menu a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--hx-teal);
    box-shadow: 0 0 10px var(--hx-teal);
}
.hx-menu a .hx-badge { margin-left: auto; }
.hx-menu__toggle .fa-chevron-down { margin-left: auto; font-size: .75rem; transition: transform .2s; color: var(--hx-text-dim); }
.hx-menu__toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.hx-menu__sub { padding-left: 14px; border-left: 1px solid var(--hx-line); margin-left: 21px; }
.hx-menu__sub a { min-height: 38px; font-size: .88rem; }

.hx-menu-search { position: relative; margin: 2px 4px 6px; }
.hx-menu-search input {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 36px;
    background: var(--hx-inset);
    border: 1px solid var(--hx-edge-soft);
    color: var(--hx-text);
    font: inherit;
    font-size: .9rem;
    clip-path: var(--hx-shape-sm);
}
.hx-menu-search input:focus { outline: none; border-color: var(--hx-teal); }
.hx-menu-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hx-text-dim); font-size: .85rem; }
.hx-menu-search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--hx-text-dim); padding: 6px; }
.hx-menu-empty { padding: 14px; text-align: center; color: var(--hx-text-dim); font-size: .85rem; }

.hx-drawer__auth { margin-top: auto; padding: 14px 4px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--hx-line); }
.hx-drawer__auth .hx-btn { width: 100%; }
.hx-drawer__status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 4px 6px; background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); font-size: .85rem; clip-path: var(--hx-shape-sm); }
.hx-drawer__status b { color: var(--hx-ice); }

/* footer */
.hx-footer {
    flex-shrink: 0;
    position: relative;
    margin-top: 40px;
    padding: 48px 0 24px;
    background: var(--hx-footer-bg);
    border-top: 1px solid var(--hx-edge-faint);
    color: var(--hx-text-dim);
    font-size: .92rem;
}
.hx-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 96, .5), transparent);
}
.hx-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
.hx-footer h4 {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hx-ice);
    margin-bottom: 14px;
}
.hx-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hx-footer a { color: var(--hx-text-dim); }
.hx-footer a:hover { color: var(--hx-accent); }
.hx-footer__brand img { width: 220px; max-width: 70%; height: auto; margin-bottom: 12px; }
.hx-footer__bottom {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--hx-line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    font-size: .82rem;
    color: var(--hx-text-faint);
}
.hx-social { display: flex; gap: 10px; flex-wrap: wrap; }
.hx-social a {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    color: var(--hx-ice);
    background: linear-gradient(180deg, var(--hx-steel-hi), var(--hx-steel-lo));
    border: 1px solid var(--hx-edge-soft);
    clip-path: var(--hx-shape-sm);
    font-size: 1.05rem;
}
.hx-social a:hover { color: var(--hx-accent); border-color: var(--hx-teal); }

/* ---------------------------------------------------------------- 5. panels */

/*
 * .hx-panel: the client's window. Two pseudo layers carry the chamfered shape:
 * ::before is the cyan edge (brighter near the cut corners = the brackets),
 * ::after is the glass body inset by 1px. Content is not clipped, so tooltips
 * and dropdowns inside a panel still escape it.
 */
.hx-panel {
    position: relative;
    isolation: isolate;
    color: var(--hx-text);
    filter: drop-shadow(0 14px 28px rgba(var(--hx-shadow-rgb), calc(.45 * var(--hx-shadow-k))));
}
.hx-panel::before,
.hx-panel::after {
    content: '';
    position: absolute;
    pointer-events: none;
    clip-path: var(--hx-shape);
}
.hx-panel::before {
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(135deg, var(--hx-teal-hot) 0, var(--hx-teal-hot) 30px, transparent 30px) top left / 60% 60% no-repeat,
        linear-gradient(315deg, var(--hx-teal-hot) 0, var(--hx-teal-hot) 30px, transparent 30px) bottom right / 60% 60% no-repeat,
        var(--hx-edge);
}
.hx-panel::after {
    inset: 1px;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(150, 230, 255, .06), transparent 40%),
        linear-gradient(180deg, var(--hx-body-top), var(--hx-body-bottom));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hx-panel--quiet::before { background: var(--hx-edge-soft); }
.hx-panel--gold::before {
    background:
        linear-gradient(135deg, #ffe7a6 0, #ffe7a6 30px, transparent 30px) top left / 60% 60% no-repeat,
        linear-gradient(315deg, #ffe7a6 0, #ffe7a6 30px, transparent 30px) bottom right / 60% 60% no-repeat,
        rgba(255, 204, 96, .5);
}
.hx-panel--selected::before { background: var(--hx-teal); }
.hx-panel--fill { height: 100%; display: flex; flex-direction: column; }
.hx-panel--fill > .hx-panel__body { flex: 1; }

.hx-panel__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 16px 10px 22px;
    background:
        repeating-linear-gradient(0deg, var(--hx-scan) 0 1px, transparent 1px 3px),
        var(--hx-strip);
    clip-path: polygon(calc(var(--hx-cut) - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--hx-cut) - 1px));
    margin: 1px 1px 0;
}
/* the cyan left accent bar ("| INVENTORY") */
.hx-panel__head::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 3px;
    height: 18px;
    transform: translateY(-50%);
    background: var(--hx-teal);
    box-shadow: 0 0 8px var(--hx-teal);
}
/* accent rule under the strip, bright at the left and fading out */
.hx-panel__head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--hx-teal), rgba(var(--hx-teal-rgb), .25) 45%, transparent 85%);
}
.hx-panel__title {
    margin: 0;
    font-family: var(--hx-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hx-ice);
    text-shadow: 0 1px 2px rgba(var(--hx-shadow-rgb), calc(.8 * var(--hx-shadow-k)));
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hx-panel__title i { color: var(--hx-accent); font-size: .95em; }
.hx-panel__meta { margin-left: auto; color: var(--hx-text-dim); font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hx-panel__body { padding: 18px; position: relative; }
.hx-panel__body--flush { padding: 0; }
.hx-panel__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--hx-line);
}

/* the round close socket in a window's title strip */
.hx-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--hx-edge-soft);
    background: var(--hx-socket);
    color: var(--hx-ice);
    display: inline-grid;
    place-items: center;
    font-size: .9rem;
    cursor: pointer;
    flex-shrink: 0;
}
.hx-close:hover { border-color: var(--hx-teal); color: var(--hx-accent); box-shadow: 0 0 10px rgba(var(--hx-teal-rgb), .4); }

/* inner card: the client's selected-character card / sub-window */
.hx-card {
    position: relative;
    padding: 14px 16px;
    background: var(--hx-card);
    border: 1px solid var(--hx-edge-faint);
    clip-path: var(--hx-shape-sm);
    transition: background .2s var(--hx-ease), border-color .2s var(--hx-ease), transform .2s var(--hx-ease);
}
a.hx-card,
.hx-card.is-link { display: block; color: var(--hx-text); }
a.hx-card:hover,
.hx-card.is-link:hover { background: var(--hx-card-hover); border-color: var(--hx-edge); color: var(--hx-text); }
.hx-card.is-active {
    border-color: var(--hx-teal);
    background: linear-gradient(90deg, rgba(var(--hx-teal-rgb), .12), var(--hx-card) 40%);
    box-shadow: inset 3px 0 0 var(--hx-teal);
}

/* recessed well (fields, lists) */
.hx-inset {
    background: var(--hx-inset);
    border: 1px solid var(--hx-edge-faint);
    clip-path: var(--hx-shape-sm);
    padding: 12px 14px;
}

/* ---------------------------------------------------------------- 6. buttons + tabs */
.hx-btn {
    --hx-btn-lo: var(--hx-steel-lo);
    --hx-btn-hi: var(--hx-steel-hi);
    --hx-btn-rim: rgba(var(--hx-teal-rgb), .62);
    --hx-btn-text: var(--hx-ice);
    --hx-btn-line: rgba(var(--hx-teal-rgb), .45);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 22px;
    border: 0;
    background: transparent;
    color: var(--hx-btn-text);
    font-family: var(--hx-font);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-shadow: 0 1px 2px rgba(var(--hx-shadow-rgb), calc(.6 * var(--hx-shadow-k)));
    filter: drop-shadow(0 4px 8px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k))));
    transition: transform .15s var(--hx-ease), filter .2s var(--hx-ease), color .2s;
}
/* rim layer */
.hx-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    clip-path: var(--hx-shape-sm);
    background:
        linear-gradient(135deg, var(--hx-teal-hot) 0 9px, transparent 9px) top left / 50% 60% no-repeat,
        linear-gradient(315deg, var(--hx-teal-hot) 0 9px, transparent 9px) bottom right / 50% 60% no-repeat,
        var(--hx-btn-rim);
}
/* glass body: gradient, lighter upper half, top highlight, energy line along the bottom */
.hx-btn::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--hx-shape-sm);
    background:
        linear-gradient(90deg, transparent 8%, var(--hx-btn-line) 50%, transparent 92%) bottom 3px center / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) top 1px center / calc(100% - 16px) 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .06) 0 50%, transparent 50%),
        linear-gradient(0deg, var(--hx-btn-lo), var(--hx-btn-hi));
}
.hx-btn:hover {
    --hx-btn-lo: var(--hx-steel-hover-lo);
    --hx-btn-hi: var(--hx-steel-hover-hi);
    --hx-btn-rim: var(--hx-teal-hot);
    --hx-btn-line: rgba(var(--hx-teal-rgb), .8);
    color: var(--hx-hover-text);
    filter: drop-shadow(0 0 10px rgba(var(--hx-teal-rgb), .35)) drop-shadow(0 4px 8px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k))));
}
.hx-btn:active { transform: translateY(1px); --hx-btn-lo: var(--hx-steel-press-lo); --hx-btn-hi: var(--hx-steel-press-hi); }
.hx-btn:focus-visible { outline: 2px solid var(--hx-teal); outline-offset: 3px; }
.hx-btn i { font-size: .95em; }

/* the amber energy button - the primary action ("ENTER THE WORLD") */
.hx-btn--primary {
    --hx-btn-lo: var(--hx-primary-lo);
    --hx-btn-hi: var(--hx-primary-hi);
    --hx-btn-rim: rgba(255, 220, 140, .95);
    --hx-btn-text: var(--hx-primary-text);
    --hx-btn-line: rgba(255, 242, 153, .6);
    font-family: var(--hx-font-display);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 230, 160, .5);
}
.hx-btn--primary::before {
    background:
        linear-gradient(135deg, #fffbe0 0 9px, transparent 9px) top left / 50% 60% no-repeat,
        linear-gradient(315deg, #fffbe0 0 9px, transparent 9px) bottom right / 50% 60% no-repeat,
        var(--hx-btn-rim);
}
.hx-btn--primary::after {
    background:
        linear-gradient(90deg, transparent 8%, var(--hx-btn-line) 50%, transparent 92%) bottom 3px center / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) top 1px center / calc(100% - 16px) 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0 50%, transparent 50%),
        linear-gradient(0deg, var(--hx-btn-lo), var(--hx-btn-hi));
}
.hx-btn--primary:hover {
    --hx-btn-lo: #f4781c;
    --hx-btn-hi: #ffd670;
    --hx-btn-rim: #fff3c7;
    color: var(--hx-primary-text);
    filter: drop-shadow(0 0 14px rgba(255, 168, 48, .55)) drop-shadow(0 4px 8px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k))));
}
.hx-btn--primary:active { --hx-btn-lo: #e89634; --hx-btn-hi: #ba4c0a; }

.hx-btn--danger { --hx-btn-text: #fff; --hx-btn-lo: #3a0b14; --hx-btn-hi: #7a1a2a; --hx-btn-rim: rgba(255, 110, 120, .7); --hx-btn-line: rgba(255, 120, 130, .6); }
.hx-btn--danger::before { background: var(--hx-btn-rim); }
.hx-btn--danger:hover { --hx-btn-lo: #561220; --hx-btn-hi: #a52438; --hx-btn-rim: #ff9aa2; color: #fff; }
.hx-btn--good { --hx-btn-text: #fff; --hx-btn-lo: #08321c; --hx-btn-hi: #17703f; --hx-btn-rim: rgba(110, 236, 140, .75); --hx-btn-line: rgba(140, 255, 170, .6); }
.hx-btn--good::before { background: var(--hx-btn-rim); }
.hx-btn--good:hover { --hx-btn-lo: #0c4426; --hx-btn-hi: #1f8a50; --hx-btn-rim: #a6ffbd; color: #fff; }
.hx-btn--discord { --hx-btn-text: #fff; --hx-btn-lo: #3c45c9; --hx-btn-hi: #6f78ff; --hx-btn-rim: rgba(190, 196, 255, .9); --hx-btn-line: rgba(220, 224, 255, .6); color: #fff; }
.hx-btn--discord::before { background: var(--hx-btn-rim); }
.hx-btn--discord:hover { color: #fff; --hx-btn-lo: #4752e0; --hx-btn-hi: #8a92ff; --hx-btn-rim: #e3e6ff; filter: drop-shadow(0 0 12px rgba(111, 120, 255, .5)) drop-shadow(0 4px 8px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k)))); }
.hx-user__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hx-btn--ghost::after { background: var(--hx-ghost-bg); }
.hx-btn--ghost::before { background: var(--hx-edge-soft); }
.hx-btn--ghost:hover::before { background: var(--hx-teal); }

.hx-btn--sm { min-height: 34px; padding: 6px 14px; font-size: .84rem; }
.hx-btn--lg { min-height: 56px; padding: 14px 34px; font-size: 1.08rem; }
.hx-btn--xl { min-height: 64px; padding: 16px 44px; font-size: 1.22rem; }
.hx-btn--block { display: flex; width: 100%; }
.hx-btn--icon { width: 44px; padding: 0; }
.hx-btn--icon.hx-btn--sm { width: 34px; }

.hx-btn[disabled],
.hx-btn.is-disabled,
.hx-btn[aria-disabled="true"] {
    --hx-btn-lo: var(--hx-off-lo);
    --hx-btn-hi: var(--hx-off-hi);
    --hx-btn-rim: var(--hx-off-rim);
    --hx-btn-line: transparent;
    --hx-btn-text: var(--hx-off-text);
    cursor: not-allowed;
    filter: none;
    transform: none;
    text-shadow: none;
}
.hx-btn[disabled]::before,
.hx-btn.is-disabled::before,
.hx-btn[aria-disabled="true"]::before { background: var(--hx-btn-rim); }

.hx-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* tabs: glowing cyan underline under the selected one */
.hx-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--hx-line);
    margin-bottom: 16px;
}
.hx-tabs::-webkit-scrollbar { display: none; }
.hx-tab {
    position: relative;
    flex-shrink: 0;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--hx-text-dim);
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    white-space: nowrap;
}
.hx-tab:hover { color: var(--hx-ice); }
.hx-tab.active,
.hx-tab[aria-selected="true"] {
    color: var(--hx-accent);
    background: linear-gradient(0deg, rgba(var(--hx-teal-rgb), .12), transparent);
}
.hx-tab.active::after,
.hx-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    background: var(--hx-teal);
    box-shadow: 0 0 10px var(--hx-teal);
}

/* ---------------------------------------------------------------- 7. fields + badges + chips */
.hx-field {
    position: relative;
    display: block;
    margin-bottom: 14px;
}
.hx-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hx-text-dim);
}
.hx-field__wrap { position: relative; display: block; }
.hx-field__wrap > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hx-accent);
    pointer-events: none;
    font-size: .95rem;
}
.hx-input,
.hx-field input,
.hx-field select,
.hx-field textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    background: var(--hx-field-bg);
    border: 1px solid var(--hx-field-edge);
    color: var(--hx-ice);
    font: inherit;
    font-size: 1rem;
    clip-path: var(--hx-shape-sm);
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.hx-field__wrap > i ~ input,
.hx-field__wrap > i ~ select { padding-left: 44px; }
.hx-input::placeholder,
.hx-field input::placeholder,
.hx-field textarea::placeholder { color: var(--hx-placeholder); font-style: italic; }
.hx-input:focus,
.hx-field input:focus,
.hx-field select:focus,
.hx-field textarea:focus {
    outline: none;
    border-color: var(--hx-teal);
    background: var(--hx-field-focus);
    box-shadow: inset 0 0 0 1px rgba(var(--hx-teal-rgb), .35), 0 0 16px rgba(var(--hx-teal-rgb), .12);
}
.hx-field__hint { display: block; margin-top: 6px; font-size: .8rem; color: var(--hx-text-dim); }
.hx-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--hx-text); font-size: .92rem; user-select: none; }
.hx-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--hx-edge);
    background: var(--hx-inset);
    border-radius: 3px;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.hx-check input:checked { background: rgba(var(--hx-teal-rgb), .18); border-color: var(--hx-teal); }
.hx-check input:checked::after { content: ''; width: 10px; height: 6px; border-left: 2px solid var(--hx-teal-hot); border-bottom: 2px solid var(--hx-teal-hot); transform: rotate(-45deg) translate(1px, -1px); }

/* badges (the gold NOTICE pill, teal tags) */
.hx-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
    background: rgba(var(--hx-teal-rgb), .12);
    color: var(--hx-accent);
    border: 1px solid rgba(var(--hx-teal-rgb), .3);
}
.hx-badge--gold { background: linear-gradient(180deg, #ffd77a, #e9a93a); color: #2c1402; border-color: #ffe7a6; }
.hx-badge--good { background: rgba(110, 236, 140, .13); color: var(--hx-good); border-color: rgba(110, 236, 140, .35); }
.hx-badge--warn { background: rgba(255, 190, 60, .13); color: var(--hx-warn); border-color: rgba(255, 190, 60, .35); }
.hx-badge--bad { background: rgba(255, 90, 95, .13); color: var(--hx-bad-text); border-color: rgba(255, 90, 95, .35); }
.hx-badge--elite { background: rgba(176, 120, 255, .14); color: var(--hx-elite-text); border-color: rgba(176, 120, 255, .4); }
.hx-badge--muted { background: rgba(140, 160, 186, .1); color: var(--hx-text-dim); border-color: rgba(140, 160, 186, .25); }

.hx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hx-accent);
    background: rgba(var(--hx-teal-rgb), .07);
    border: 1px solid rgba(var(--hx-teal-rgb), .25);
    clip-path: var(--hx-shape-sm);
}

/* ---------------------------------------------------------------- 8. bars, slots, stats */

/* slanted neon bars (HP / MP / EXP) with segment ticks */
.hx-bar {
    --hx-bar: var(--hx-teal);
    --hx-bar-hi: var(--hx-teal-hot);
    position: relative;
    height: 14px;
    background: var(--hx-well);
    border: 1px solid rgba(var(--hx-steel-rgb), .3);
    transform: skewX(-24deg);
    overflow: hidden;
}
.hx-bar > span {
    display: block;
    height: 100%;
    width: var(--v, 0%);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 45%),
        linear-gradient(90deg, var(--hx-bar), var(--hx-bar-hi));
    box-shadow: 0 0 10px var(--hx-bar), inset -2px 0 0 rgba(255, 255, 255, .8);
    transition: width .6s var(--hx-ease);
}
.hx-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(var(--hx-shadow-rgb), calc(.45 * var(--hx-shadow-k))) 11px 12px);
    pointer-events: none;
}
.hx-bar--hp { --hx-bar: #b81d34; --hx-bar-hi: #ff5c68; }
.hx-bar--mp { --hx-bar: #1660d0; --hx-bar-hi: #4fb0ff; }
.hx-bar--exp { --hx-bar: #e08a10; --hx-bar-hi: #ffc24a; }
.hx-bar--good { --hx-bar: #1f9a50; --hx-bar-hi: #8affaa; }
.hx-bar--lg { height: 20px; }
.hx-bar-label { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; font-weight: 600; color: var(--hx-text-dim); margin-bottom: 4px; }
.hx-bar-label b { color: var(--hx-ice); }

/* item slot: chamfered square with an inner bevel and a hover / rarity glow */
.hx-slot {
    --hx-slot: 52px;
    --hx-rarity: rgba(var(--hx-steel-rgb), .45);
    position: relative;
    width: var(--hx-slot);
    height: var(--hx-slot);
    display: inline-grid;
    place-items: center;
    background:
        linear-gradient(180deg, rgba(204, 234, 255, .08), transparent 40%),
        radial-gradient(circle at 50% 40%, #1a2c48, #070d1a);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    box-shadow: inset 0 0 0 1px var(--hx-rarity), inset 0 0 0 3px rgba(var(--hx-shadow-rgb), calc(.45 * var(--hx-shadow-k)));
    flex-shrink: 0;
    transition: box-shadow .2s;
}
.hx-slot img { width: 84%; height: 84%; object-fit: contain; image-rendering: auto; }
.hx-slot:hover { box-shadow: inset 0 0 0 1px var(--hx-teal-hot), inset 0 0 14px rgba(var(--hx-teal-rgb), .35); }
.hx-slot__count {
    position: absolute;
    right: 4px;
    bottom: 1px;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 2px #000, 0 0 2px #000;
}
.hx-slot--sm { --hx-slot: 40px; }
.hx-slot--lg { --hx-slot: 64px; }
.hx-slot--white { --hx-rarity: rgba(228, 233, 239, .6); }
.hx-slot--green { --hx-rarity: #59d977; }
.hx-slot--blue { --hx-rarity: #4fa3ff; }
.hx-slot--purple { --hx-rarity: #c86bff; box-shadow: inset 0 0 0 1px #c86bff, inset 0 0 12px rgba(200, 107, 255, .35); }
.hx-slot--gold { --hx-rarity: #ffc24a; box-shadow: inset 0 0 0 1px #ffc24a, inset 0 0 12px rgba(255, 194, 74, .35); }
.hx-slot-grid { display: flex; flex-wrap: wrap; gap: 6px; }

/* stat tile and key/value grid ("Type: Panda") */
.hx-stat {
    position: relative;
    padding: 14px 16px;
    background: var(--hx-card);
    border: 1px solid var(--hx-edge-faint);
    clip-path: var(--hx-shape-sm);
    min-width: 0;
}
.hx-stat__label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hx-text-dim); margin-bottom: 4px; }
.hx-stat__value { display: block; font-size: 1.35rem; font-weight: 700; color: var(--hx-ice); line-height: 1.15; word-break: break-word; font-variant-numeric: tabular-nums; }
.hx-stat__value.is-gold { color: var(--hx-gold); }
.hx-stat__value.is-teal { color: var(--hx-accent); }
.hx-stat__value.is-good { color: var(--hx-good); }
.hx-stat__icon { position: absolute; right: 14px; top: 14px; color: var(--hx-accent); opacity: .5; font-size: 1.2rem; }

.hx-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: .94rem; }
.hx-kv dt { color: var(--hx-text-dim); font-weight: 500; }
.hx-kv dd { margin: 0; color: var(--hx-ice); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.hx-grid { display: grid; gap: 16px; }
.hx-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.hx-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.hx-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.hx-grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }

/* headings */
.hx-display {
    font-family: var(--hx-font-display);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
    color: var(--hx-ice);
    text-shadow: 0 2px 18px rgba(var(--hx-shadow-rgb), calc(.6 * var(--hx-shadow-k)));
}
.hx-display .is-gold,
.hx-gold-text {
    background: var(--hx-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hx-heading { text-align: center; margin: 0 auto clamp(28px, 4vw, 48px); max-width: 720px; }
.hx-heading h2 { font-family: var(--hx-font-display); font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: .04em; margin: 14px 0 10px; }
.hx-heading p { color: var(--hx-text-dim); font-size: 1.04rem; margin: 0; }
.hx-heading--left { text-align: left; margin-left: 0; }
.hx-rule { display: flex; align-items: center; gap: 12px; color: var(--hx-accent); }
.hx-rule::before,
.hx-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hx-edge)); }
.hx-rule::after { background: linear-gradient(90deg, var(--hx-edge), transparent); }

/* page hero (inner pages) */
.hx-pagehead {
    position: relative;
    padding: clamp(32px, 5vw, 56px) 0 clamp(22px, 3vw, 32px);
    overflow: hidden;
}
.hx-pagehead::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hx-edge) 30%, transparent);
}
.hx-pagehead__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hx-pagehead h1 { font-family: var(--hx-font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: .04em; margin: 10px 0 6px; }
.hx-pagehead p { color: var(--hx-text-dim); margin: 0; max-width: 640px; }
.hx-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; color: var(--hx-text-faint); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.hx-crumbs a { color: var(--hx-text-dim); }
.hx-crumbs span::before { content: '/'; margin-right: 8px; color: var(--hx-text-faint); }

/* the cinematic page banner (PageBanner() in Layout.php): an in-game scene with the home hero's light
   rays and embers. It keeps the dark tokens in both themes (see 1. tokens) and fades into the page. */
body { --hx-page-bg: var(--hx-bg); }
.hx-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--hx-text);
    background: var(--hx-void);
    border-bottom: 1px solid var(--hx-edge-faint);
}
.hx-banner__art {
    position: absolute;
    inset: 0;
    z-index: -4;
    background: var(--hx-banner-art) var(--hx-banner-pos, center) / cover no-repeat;
    /* zoomed in on the scene's focus point (the screenshots' UI windows fall outside), softened a touch */
    transform-origin: var(--hx-banner-pos, center);
    transform: scale(var(--hx-banner-zoom, 1.1));
    filter: blur(1.2px) saturate(1.12);
    animation: hx-banner-drift 38s ease-in-out infinite alternate;
}
@keyframes hx-banner-drift {
    from { transform: scale(var(--hx-banner-zoom, 1.1)); }
    to { transform: scale(calc(var(--hx-banner-zoom, 1.1) * 1.08)); }
}
.hx-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(ellipse 55% 70% at 16% 50%, color-mix(in srgb, var(--hx-gold) 16%, transparent), transparent 70%),
        linear-gradient(90deg, color-mix(in srgb, var(--hx-void) 94%, transparent) 0%, color-mix(in srgb, var(--hx-void) 78%, transparent) 38%, color-mix(in srgb, var(--hx-void) 30%, transparent) 72%, color-mix(in srgb, var(--hx-void) 55%, transparent) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--hx-void) 60%, transparent), transparent 30%, transparent 62%, color-mix(in srgb, var(--hx-void) 85%, transparent));
}
/* the last strip melts into the page (light or dark) */
.hx-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    z-index: -1;
    background: linear-gradient(180deg, transparent, var(--hx-page-bg));
    opacity: .85;
    pointer-events: none;
}
.hx-banner__rays {
    position: absolute;
    top: 50%;
    left: 14%;
    width: 120vmax;
    height: 120vmax;
    translate: -50% -50%;
    z-index: -2;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--hx-gold) 9%, transparent) 0deg 4deg, transparent 4deg 18deg);
    mask-image: radial-gradient(circle, #000 0%, transparent 42%);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 42%);
    animation: hx-banner-spin 140s linear infinite;
    pointer-events: none;
}
@keyframes hx-banner-spin { to { rotate: 360deg; } }
.hx-banner__embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hx-banner__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding-top: clamp(30px, 5vw, 56px);
    padding-bottom: clamp(34px, 5vw, 60px);
}
.hx-banner--lg .hx-banner__inner { min-height: clamp(340px, 46vh, 460px); }
.hx-banner--md .hx-banner__inner { min-height: clamp(220px, 30vh, 300px); }
.hx-banner--sm .hx-banner__inner { min-height: 0; gap: 10px; padding-top: 22px; padding-bottom: 26px; }
.hx-banner__crumbs .hx-crumbs a { color: var(--hx-text-dim); }
.hx-banner__crumbs .hx-crumbs a:hover { color: var(--hx-accent); }
.hx-banner__row { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); min-width: 0; }
.hx-banner__text { min-width: 0; flex: 1; }
.hx-banner__emblem {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: clamp(78px, 11vw, 132px);
    aspect-ratio: 1;
}
.hx-banner__emblem::before {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--hx-gold) 34%, transparent), transparent 62%);
    animation: hx-banner-pulse 4.5s ease-in-out infinite;
}
@keyframes hx-banner-pulse { 50% { opacity: .55; transform: scale(.92); } }
.hx-banner__emblem img { width: 100%; height: auto; filter: drop-shadow(0 8px 26px rgba(var(--hx-shadow-rgb), .7)); }
.hx-banner__emblem i {
    width: 78%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    color: var(--hx-gold);
    background: linear-gradient(180deg, var(--hx-head-top), var(--hx-head-bottom));
    border: 1px solid color-mix(in srgb, var(--hx-gold) 55%, transparent);
    clip-path: var(--hx-shape);
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--hx-gold) 22%, transparent);
    text-shadow: 0 0 18px color-mix(in srgb, var(--hx-gold) 70%, transparent);
}
.hx-banner__title {
    font-family: var(--hx-font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: .03em;
    margin: 10px 0 8px;
    color: var(--hx-ice);
    text-shadow: 0 3px 18px rgba(var(--hx-shadow-rgb), .8);
    overflow-wrap: anywhere;
}
.hx-banner--md .hx-banner__title { font-size: clamp(1.7rem, 3.8vw, 2.7rem); }
.hx-banner--sm .hx-banner__title { font-size: clamp(1.35rem, 3vw, 1.9rem); margin: 6px 0 4px; }
.hx-banner__title em {
    font-style: normal;
    background: linear-gradient(180deg, var(--gold-bright), var(--hx-gold) 55%, var(--hx-gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--hx-gold) 35%, transparent));
}
.hx-banner__lead { max-width: 640px; margin: 0; color: var(--hx-text-dim); font-size: clamp(.98rem, 1.5vw, 1.1rem); text-shadow: 0 1px 8px rgba(var(--hx-shadow-rgb), .85); }
.hx-banner__actions { margin-top: 20px; }
.hx-banner__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    background: linear-gradient(180deg, var(--hx-body-top), var(--hx-body-bottom));
    border: 1px solid var(--hx-edge-soft);
    clip-path: var(--hx-shape);
    backdrop-filter: blur(6px);
    max-width: 1040px;
}
.hx-banner__stat { display: flex; align-items: center; gap: 12px; padding: 13px 18px; min-width: 0; }
.hx-banner__stat + .hx-banner__stat { border-left: 1px solid var(--hx-line); }
.hx-banner__stat > i {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--hx-accent);
    background: var(--hx-socket, var(--hx-inset));
    border: 1px solid var(--hx-edge-soft);
    clip-path: var(--hx-shape-sm);
}
.hx-banner__stat small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-text-faint); }
.hx-banner__stat b { display: block; font-size: 1.05rem; color: var(--hx-ice); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
    .hx-banner__row { align-items: flex-start; }
    .hx-banner__emblem { width: 62px; margin-top: 8px; }
    .hx-banner__rays { left: 8%; top: 30%; }
    .hx-banner__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-banner__stat { padding: 11px 12px; gap: 10px; }
    .hx-banner__stat > i { width: 32px; height: 32px; }
    .hx-banner__stat:nth-child(odd) { border-left: 0; }
    .hx-banner__stat:nth-child(n+3) { border-top: 1px solid var(--hx-line); }
}

/* ---------------------------------------------------------------- 9. tables */
.hx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hx-table,
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hx-text);
    --bs-table-striped-bg: rgba(128, 200, 255, .035);
    --bs-table-striped-color: var(--hx-text);
    --bs-table-hover-bg: rgba(var(--hx-teal-rgb), .07);
    --bs-table-hover-color: var(--hx-ice);
    --bs-table-active-bg: rgba(var(--hx-teal-rgb), .1);
    --bs-table-border-color: var(--hx-line);
    width: 100%;
    border-collapse: collapse;
    color: var(--hx-text);
    font-size: .93rem;
}
.hx-table th,
.table > thead th {
    background: var(--hx-th-bg) !important;
    color: var(--hx-text-dim) !important;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hx-edge) !important;
    text-align: left;
}
.hx-table td,
.table > tbody td,
.table > tbody th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--hx-line);
    vertical-align: middle;
    background-color: transparent;
    color: inherit;
}
.hx-table tbody tr:hover td { background: rgba(var(--hx-teal-rgb), .06); }
.hx-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 10. modals + popups */
.modal-backdrop { --bs-backdrop-bg: var(--hx-backdrop); --bs-backdrop-opacity: var(--hx-backdrop-opacity); }
.modal-backdrop.show { backdrop-filter: blur(4px); }
.modal {
    --bs-modal-bg: transparent;
    --bs-modal-color: var(--hx-text);
    --bs-modal-border-width: 0;
    --bs-modal-border-color: transparent;
    --bs-modal-header-border-color: transparent;
    --bs-modal-footer-border-color: var(--hx-line);
    --bs-modal-box-shadow: none;
}
.modal-content {
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--hx-text);
    filter: drop-shadow(0 24px 50px rgba(var(--hx-shadow-rgb), calc(.6 * var(--hx-shadow-k))));
}
.modal-content::before,
.modal-content::after {
    content: '';
    position: absolute;
    pointer-events: none;
    clip-path: var(--hx-shape);
}
.modal-content::before {
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(135deg, var(--hx-teal-hot) 0 30px, transparent 30px) top left / 60% 60% no-repeat,
        linear-gradient(315deg, var(--hx-teal-hot) 0 30px, transparent 30px) bottom right / 60% 60% no-repeat,
        var(--hx-edge);
}
.modal-content::after {
    inset: 1px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(150, 230, 255, .05), transparent 40%), var(--hx-modal-bg);
}
.modal-header {
    position: relative;
    padding: 12px 16px 12px 24px;
    background:
        repeating-linear-gradient(0deg, var(--hx-scan) 0 1px, transparent 1px 3px),
        var(--hx-strip);
    margin: 1px 1px 0;
    clip-path: polygon(calc(var(--hx-cut) - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--hx-cut) - 1px));
    border-radius: 0 !important;
}
.modal-header::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    width: 3px;
    height: 18px;
    transform: translateY(-50%);
    background: var(--hx-teal);
    box-shadow: 0 0 8px var(--hx-teal);
}
.modal-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--hx-teal), rgba(var(--hx-teal-rgb), .2) 50%, transparent);
}
.modal-title {
    font-family: var(--hx-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hx-ice);
}
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px 18px; gap: 10px; }
.btn-close {
    --bs-btn-close-color: #fff;
    filter: invert(1) grayscale(1) brightness(1.4);
    opacity: .7;
}
.btn-close:hover { opacity: 1; }

/* toasts from showPopup() */
#popup-container {
    position: fixed;
    top: calc(var(--hx-topbar-h) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(460px, calc(100vw - 32px));
    pointer-events: none;
}
.hx-toast {
    --hx-toast: var(--hx-teal);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px 12px 16px;
    background: var(--hx-pop-grad);
    color: var(--hx-ice);
    border: 1px solid var(--hx-toast);
    box-shadow: inset 3px 0 0 var(--hx-toast), 0 12px 30px rgba(var(--hx-shadow-rgb), calc(.5 * var(--hx-shadow-k))), 0 0 18px color-mix(in srgb, var(--hx-toast) 25%, transparent);
    clip-path: var(--hx-shape-sm);
    pointer-events: auto;
    font-weight: 600;
    font-size: .94rem;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .3s var(--hx-ease), transform .3s var(--hx-ease);
}
.hx-toast.is-in { opacity: 1; transform: none; }
.hx-toast > i { color: var(--hx-toast); font-size: 1.15rem; flex-shrink: 0; }
.hx-toast > span { flex: 1; min-width: 0; }
.hx-toast button { background: none; border: 0; color: var(--hx-text-dim); padding: 4px; font-size: 1rem; cursor: pointer; }
.hx-toast--good { --hx-toast: var(--hx-good); }
.hx-toast--warn { --hx-toast: var(--hx-warn); }
.hx-toast--bad { --hx-toast: var(--hx-bad); }

/* in-page frame popup (showPopupWithURL) */
.hx-frame-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--hx-scrim); backdrop-filter: blur(5px); }
.hx-frame {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2001;
    width: min(1500px, 94vw);
    height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
}
.hx-frame iframe { flex: 1; width: 100%; border: 0; background: var(--hx-bg); }

/* ---------------------------------------------------------------- 11. Bootstrap theming */
:root,
[data-bs-theme=dark],
[data-bs-theme=light] {
    --bs-body-bg: var(--hx-bg);
    --bs-body-bg-rgb: 7, 11, 22;
    --bs-body-color: var(--hx-text);
    --bs-body-color-rgb: 228, 238, 248;
    --bs-body-font-family: var(--hx-font);
    --bs-emphasis-color: var(--hx-ice);
    --bs-emphasis-color-rgb: 236, 246, 255;
    --bs-secondary-color: var(--hx-text-dim);
    --bs-secondary-color-rgb: 140, 160, 186;
    --bs-secondary-bg: #101a2c;
    --bs-secondary-bg-rgb: 16, 26, 44;
    --bs-tertiary-bg: #0c1424;
    --bs-tertiary-bg-rgb: 12, 20, 36;
    --bs-tertiary-color: var(--hx-text-faint);
    --bs-heading-color: var(--hx-ice);
    --bs-link-color: var(--hx-accent);
    --bs-link-color-rgb: 128, 236, 255;
    --bs-link-hover-color: var(--hx-teal-hot);
    --bs-link-hover-color-rgb: 160, 246, 255;
    --bs-border-color: var(--hx-edge-faint);
    --bs-border-color-translucent: rgba(var(--hx-steel-rgb), .16);
    --bs-border-radius: 3px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 4px;
    --bs-border-radius-xl: 6px;
    --bs-primary: #46e2f5;
    --bs-primary-rgb: 70, 226, 245;
    --bs-success: #6eec8c;
    --bs-success-rgb: 110, 236, 140;
    --bs-warning: #ffbe3c;
    --bs-warning-rgb: 255, 190, 60;
    --bs-danger: #ff5a5f;
    --bs-danger-rgb: 255, 90, 95;
    --bs-info: #80ecff;
    --bs-info-rgb: 128, 236, 255;
    --bs-light: #c9d6e6;
    --bs-light-rgb: 201, 214, 230;
    --bs-dark: #070b16;
    --bs-dark-rgb: 7, 11, 22;
    --bs-secondary: #8ca0ba;
    --bs-secondary-rgb: 140, 160, 186;
    --bs-primary-text-emphasis: #a0f6ff;
    --bs-success-text-emphasis: #a6ffbd;
    --bs-warning-text-emphasis: #ffd98a;
    --bs-danger-text-emphasis: #ffb0b3;
    --bs-info-text-emphasis: #c4f6ff;
    --bs-primary-bg-subtle: rgba(var(--hx-teal-rgb), .1);
    --bs-success-bg-subtle: rgba(110, 236, 140, .1);
    --bs-warning-bg-subtle: rgba(255, 190, 60, .1);
    --bs-danger-bg-subtle: rgba(255, 90, 95, .1);
    --bs-info-bg-subtle: rgba(128, 236, 255, .08);
    --bs-light-bg-subtle: rgba(201, 214, 230, .06);
    --bs-dark-bg-subtle: rgba(var(--hx-shadow-rgb), calc(.3 * var(--hx-shadow-k)));
    --bs-primary-border-subtle: rgba(var(--hx-teal-rgb), .35);
    --bs-success-border-subtle: rgba(110, 236, 140, .35);
    --bs-warning-border-subtle: rgba(255, 190, 60, .35);
    --bs-danger-border-subtle: rgba(255, 90, 95, .35);
    --bs-info-border-subtle: rgba(128, 236, 255, .3);
    --bs-form-valid-color: var(--hx-good);
    --bs-form-invalid-color: var(--hx-bad);
}

.text-muted,
.text-body-secondary { color: var(--hx-text-dim) !important; }
.text-dark,
.text-black { color: var(--hx-ice) !important; }
.text-primary { color: var(--hx-accent) !important; }
.text-warning { color: var(--hx-gold) !important; }
.text-success { color: var(--hx-good) !important; }
.text-danger { color: var(--hx-bad-text) !important; }
.text-info { color: var(--hx-accent) !important; }
.text-secondary { color: var(--hx-text-dim) !important; }
.bg-white,
.bg-light,
.bg-body,
.bg-body-tertiary,
.bg-body-secondary { background-color: var(--hx-card) !important; color: var(--hx-text); }
.bg-dark { background-color: var(--hx-deep) !important; }
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--hx-edge-faint) !important; }

.card {
    --bs-card-bg: var(--hx-card);
    --bs-card-border-color: var(--hx-edge-faint);
    --bs-card-cap-bg: var(--hx-th-bg);
    --bs-card-color: var(--hx-text);
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    clip-path: var(--hx-shape-sm);
}
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--hx-text); --bs-list-group-border-color: var(--hx-line); --bs-list-group-action-hover-bg: rgba(var(--hx-teal-rgb), .07); --bs-list-group-action-hover-color: var(--hx-ice); --bs-list-group-active-bg: rgba(var(--hx-teal-rgb), .18); --bs-list-group-active-border-color: var(--hx-teal); }
.dropdown-menu {
    --bs-dropdown-bg: var(--hx-pop);
    --bs-dropdown-color: var(--hx-text);
    --bs-dropdown-border-color: var(--hx-edge);
    --bs-dropdown-link-color: var(--hx-text);
    --bs-dropdown-link-hover-bg: rgba(var(--hx-teal-rgb), .1);
    --bs-dropdown-link-hover-color: var(--hx-ice);
    --bs-dropdown-link-active-bg: rgba(var(--hx-teal-rgb), .2);
    --bs-dropdown-divider-bg: var(--hx-line);
    --bs-dropdown-header-color: var(--hx-text-dim);
    border-radius: 0;
    box-shadow: 0 16px 40px rgba(var(--hx-shadow-rgb), calc(.5 * var(--hx-shadow-k)));
}
.popover { --bs-popover-bg: var(--hx-pop); --bs-popover-border-color: var(--hx-edge); --bs-popover-header-bg: var(--hx-pop-head); --bs-popover-body-color: var(--hx-text); }
.tooltip { --bs-tooltip-bg: var(--hx-pop); --bs-tooltip-color: var(--hx-ice); }
.tooltip-inner { border: 1px solid var(--hx-edge); }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--hx-text); --bs-accordion-border-color: var(--hx-line); --bs-accordion-btn-color: var(--hx-ice); --bs-accordion-btn-bg: var(--hx-card); --bs-accordion-active-bg: rgba(var(--hx-teal-rgb), .1); --bs-accordion-active-color: var(--hx-accent); --bs-accordion-btn-focus-box-shadow: 0 0 0 2px rgba(var(--hx-teal-rgb), .35); --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2380ecff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2380ecff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); }
.progress { --bs-progress-bg: var(--hx-well); --bs-progress-bar-bg: var(--hx-teal); --bs-progress-border-radius: 0; border: 1px solid rgba(var(--hx-steel-rgb), .25); }
.alert { --bs-alert-border-radius: 0; clip-path: var(--hx-shape-sm); border-width: 1px; }
.alert-info { --bs-alert-bg: rgba(var(--hx-teal-rgb), .08); --bs-alert-color: var(--hx-accent); --bs-alert-border-color: rgba(var(--hx-teal-rgb), .3); }
.alert-success { --bs-alert-bg: rgba(110, 236, 140, .08); --bs-alert-color: var(--hx-good-text); --bs-alert-border-color: rgba(110, 236, 140, .3); }
.alert-warning { --bs-alert-bg: rgba(255, 190, 60, .08); --bs-alert-color: var(--hx-warn-text); --bs-alert-border-color: rgba(255, 190, 60, .3); }
.alert-danger { --bs-alert-bg: rgba(255, 90, 95, .08); --bs-alert-color: var(--hx-bad-text); --bs-alert-border-color: rgba(255, 90, 95, .3); }
.alert-secondary,
.alert-light,
.alert-dark,
.alert-primary { --bs-alert-bg: var(--hx-card); --bs-alert-color: var(--hx-text); --bs-alert-border-color: var(--hx-edge-faint); }

.nav-tabs { --bs-nav-tabs-border-color: var(--hx-line); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: var(--hx-accent); --bs-nav-tabs-link-active-border-color: transparent; --bs-nav-tabs-link-hover-border-color: transparent; --bs-nav-link-color: var(--hx-text-dim); --bs-nav-link-hover-color: var(--hx-ice); --bs-nav-tabs-border-radius: 0; }
.nav-tabs .nav-link { position: relative; font-weight: 600; }
.nav-tabs .nav-link.active { background: linear-gradient(0deg, rgba(var(--hx-teal-rgb), .12), transparent); }
.nav-tabs .nav-link.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--hx-teal); box-shadow: 0 0 10px var(--hx-teal); }
.nav-pills { --bs-nav-pills-border-radius: 0; --bs-nav-pills-link-active-bg: rgba(var(--hx-teal-rgb), .16); --bs-nav-pills-link-active-color: var(--hx-ice); --bs-nav-link-color: var(--hx-text-dim); --bs-nav-link-hover-color: var(--hx-ice); }
.nav-pills .nav-link { clip-path: var(--hx-shape-sm); font-weight: 600; }
.nav-pills .nav-link.active { box-shadow: inset 0 0 0 1px var(--hx-edge); }

.pagination { --bs-pagination-bg: var(--hx-chip); --bs-pagination-color: var(--hx-text); --bs-pagination-border-color: var(--hx-edge-faint); --bs-pagination-hover-bg: rgba(var(--hx-teal-rgb), .12); --bs-pagination-hover-color: var(--hx-ice); --bs-pagination-hover-border-color: var(--hx-edge); --bs-pagination-active-bg: rgba(var(--hx-teal-rgb), .22); --bs-pagination-active-border-color: var(--hx-teal); --bs-pagination-active-color: var(--hx-hover-text); --bs-pagination-disabled-bg: var(--hx-chip-faint); --bs-pagination-disabled-color: var(--hx-text-faint); --bs-pagination-disabled-border-color: var(--hx-edge-faint); --bs-pagination-border-radius: 0; --bs-pagination-focus-box-shadow: 0 0 0 2px rgba(var(--hx-teal-rgb), .35); }

.badge { --bs-badge-border-radius: 999px; --bs-badge-font-weight: 700; letter-spacing: .04em; }
.bg-primary { background-color: rgba(24, 128, 168, .85) !important; }
.bg-warning { background-color: #e9a93a !important; color: #2c1402 !important; }
.bg-success { background-color: #1f8a50 !important; }
.bg-danger { background-color: #b81d34 !important; }
.bg-info { background-color: #1880a8 !important; color: #fff !important; }
.bg-secondary { background-color: #33435a !important; }
.text-bg-warning { background-color: #e9a93a !important; color: #2c1402 !important; }

/* Bootstrap buttons map onto the client's buttons */
.btn {
    --bs-btn-border-radius: 0;
    --bs-btn-font-family: var(--hx-font);
    --bs-btn-font-weight: 700;
    --bs-btn-focus-box-shadow: 0 0 0 2px rgba(var(--hx-teal-rgb), .4);
    clip-path: var(--hx-shape-sm);
    letter-spacing: .03em;
}
.btn-primary,
.btn-info { --bs-btn-color: #fff; --bs-btn-bg: #1a5f86; --bs-btn-border-color: rgba(var(--hx-teal-rgb), .7); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2284aa; --bs-btn-hover-border-color: var(--hx-teal-hot); --bs-btn-active-bg: #0f3c58; --bs-btn-active-border-color: var(--hx-teal); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--hx-off-hi); --bs-btn-disabled-border-color: var(--hx-off-rim); --bs-btn-disabled-color: var(--hx-off-text); background-image: linear-gradient(0deg, rgba(var(--hx-shadow-rgb), calc(.2 * var(--hx-shadow-k))), rgba(255, 255, 255, .08)); }
.btn-warning { --bs-btn-color: var(--hx-primary-text); --bs-btn-bg: #f08a24; --bs-btn-border-color: #ffd78a; --bs-btn-hover-color: var(--hx-primary-text); --bs-btn-hover-bg: #ffa83a; --bs-btn-hover-border-color: #fff0c4; --bs-btn-active-bg: #c9640e; --bs-btn-active-color: var(--hx-primary-text); --bs-btn-active-border-color: #ffd78a; background-image: linear-gradient(0deg, var(--hx-primary-lo), var(--hx-primary-hi)); }
.btn-warning:hover { background-image: linear-gradient(0deg, #f4781c, #ffd670); }
.btn-success { --bs-btn-color: #fff; --bs-btn-bg: #17703f; --bs-btn-border-color: rgba(110, 236, 140, .7); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1f8a50; --bs-btn-hover-border-color: #a6ffbd; --bs-btn-active-bg: #0c4426; --bs-btn-active-color: #fff; }
.btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #8a1c2e; --bs-btn-border-color: rgba(255, 110, 120, .7); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a52438; --bs-btn-hover-border-color: #ff9aa2; --bs-btn-active-bg: #561220; --bs-btn-active-color: #fff; }
.btn-secondary,
.btn-dark,
.btn-light { --bs-btn-color: var(--hx-ice); --bs-btn-bg: var(--hx-steel-hi); --bs-btn-border-color: rgba(var(--hx-teal-rgb), .45); --bs-btn-hover-color: var(--hx-hover-text); --bs-btn-hover-bg: var(--hx-steel-hover-hi); --bs-btn-hover-border-color: var(--hx-teal); --bs-btn-active-bg: var(--hx-steel-lo); --bs-btn-active-color: var(--hx-hover-text); --bs-btn-active-border-color: var(--hx-teal); }
.btn-outline-primary,
.btn-outline-info,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark { --bs-btn-color: var(--hx-accent); --bs-btn-border-color: rgba(var(--hx-teal-rgb), .45); --bs-btn-hover-color: var(--hx-hover-text); --bs-btn-hover-bg: rgba(var(--hx-teal-rgb), .16); --bs-btn-hover-border-color: var(--hx-teal); --bs-btn-active-bg: rgba(var(--hx-teal-rgb), .25); --bs-btn-active-color: var(--hx-hover-text); --bs-btn-active-border-color: var(--hx-teal); }
.btn-outline-warning { --bs-btn-color: var(--hx-gold); --bs-btn-border-color: rgba(255, 204, 96, .5); --bs-btn-hover-color: var(--hx-primary-text); --bs-btn-hover-bg: var(--hx-gold); --bs-btn-hover-border-color: var(--hx-gold); --bs-btn-active-bg: var(--hx-gold-deep); --bs-btn-active-color: var(--hx-primary-text); }
.btn-outline-success { --bs-btn-color: var(--hx-good); --bs-btn-border-color: rgba(110, 236, 140, .5); --bs-btn-hover-color: #04210f; --bs-btn-hover-bg: var(--hx-good); --bs-btn-hover-border-color: var(--hx-good); }
.btn-outline-danger { --bs-btn-color: var(--hx-bad-text); --bs-btn-border-color: rgba(255, 90, 95, .5); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a52438; --bs-btn-hover-border-color: #ff9aa2; }
.btn-link { --bs-btn-color: var(--hx-accent); --bs-btn-hover-color: var(--hx-teal-hot); clip-path: none; }

/* Bootstrap form controls take the client's field look */
.form-control,
.form-select {
    background-color: var(--hx-field-bg);
    border: 1px solid var(--hx-field-edge);
    border-radius: 0;
    color: var(--hx-ice);
    font-family: var(--hx-font);
    clip-path: var(--hx-shape-sm);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--hx-field-focus);
    border-color: var(--hx-teal);
    color: var(--hx-ice);
    box-shadow: inset 0 0 0 1px rgba(var(--hx-teal-rgb), .35);
}
.form-control::placeholder { color: var(--hx-placeholder); }
.form-control:disabled,
.form-control[readonly],
.form-select:disabled { background-color: var(--hx-field-off); color: var(--hx-text-dim); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2380ecff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-select option { background: var(--hx-pop); color: var(--hx-ice); }
.form-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hx-text-dim); }
.form-text { color: var(--hx-text-dim); }
.form-check-input { background-color: var(--hx-inset); border-color: var(--hx-edge); }
.form-check-input:checked { background-color: #1880a8; border-color: var(--hx-teal); }
.form-check-input:focus { box-shadow: 0 0 0 2px rgba(var(--hx-teal-rgb), .3); border-color: var(--hx-teal); }
.input-group-text { background: var(--hx-chip-solid); border-color: var(--hx-field-edge); color: var(--hx-accent); border-radius: 0; }
.input-group > .form-control,
.input-group > .form-select { clip-path: none; }

/* DataTables (several admin pages use it) */
.dataTables_wrapper { color: var(--hx-text-dim); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--hx-field-bg);
    border: 1px solid var(--hx-field-edge);
    color: var(--hx-ice);
    border-radius: 0;
    padding: 6px 10px;
    margin-left: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--hx-text) !important; border-radius: 0 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(var(--hx-teal-rgb), .16) !important; border-color: var(--hx-edge) !important; color: var(--hx-hover-text) !important; }
table.dataTable thead th,
table.dataTable thead td { border-bottom-color: var(--hx-edge) !important; }
table.dataTable.no-footer { border-bottom-color: var(--hx-line) !important; }

/* DataTables controls wrap on phones instead of clipping */
@media (max-width: 575.98px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length { text-align: left !important; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; margin: 6px 0 0; min-height: 40px; }
    .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: center !important; }
    .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: center; gap: 2px; }
    .dataTables_wrapper .dataTables_paginate .page-link { min-width: 40px; min-height: 40px; display: grid; place-items: center; }
}
/* sticky table headers need a solid background (the themed header is translucent) */
.sticky-top > th,
thead.sticky-top th,
.table thead th.sticky-top { background-color: var(--hx-th-solid) !important; }

/* dark text on the amber surfaces (.text-dark is otherwise light on this theme) */
.btn-warning.text-dark,
.bg-warning.text-dark,
.text-bg-warning.text-dark,
.btn-warning .text-dark,
.bg-warning .text-dark { color: var(--hx-primary-text) !important; }

/* warehouse tabs (Global.AsyncInventory) in the client's tab style */
.warehouse-tab-btn {
    color: var(--hx-text-dim) !important;
    background: linear-gradient(0deg, var(--hx-steel-lo), var(--hx-steel-hi)) !important;
    border: 1px solid var(--hx-edge-soft) !important;
    border-radius: 0 !important;
    clip-path: var(--hx-shape-sm);
    min-height: 34px;
}
.warehouse-tab-btn:hover { color: var(--hx-ice) !important; border-color: var(--hx-teal) !important; }
.warehouse-tab-btn.active { color: var(--hx-primary-text) !important; background: linear-gradient(0deg, var(--hx-primary-lo), var(--hx-primary-hi)) !important; border-color: #ffe7a6 !important; }

/* Select2 (guild filter, item pickers) */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--single { min-height: 38px; display: flex; align-items: center; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--hx-field-bg) !important;
    border: 1px solid var(--hx-field-edge) !important;
    border-radius: 0 !important;
    color: var(--hx-ice) !important;
}
.select2-container .select2-selection__rendered { color: var(--hx-ice) !important; }
.select2-dropdown { background: var(--hx-pop) !important; border-color: var(--hx-edge) !important; color: var(--hx-text) !important; border-radius: 0 !important; }
.select2-results__option--highlighted { background: rgba(var(--hx-teal-rgb), .18) !important; color: var(--hx-hover-text) !important; }
.select2-search__field { background: var(--hx-inset) !important; color: var(--hx-ice) !important; border-color: var(--hx-edge-soft) !important; }

/* ---------------------------------------------------------------- 12. legacy component compatibility */
/* Classes from the old theme (main.css / profile.css), drawn in the new style so the
   existing pages keep their structure. New markup should use the hx- classes. */

.app-shell { min-height: 100vh; }
.content-wrapper { margin-left: 0; min-height: 100vh; position: relative; padding-top: var(--hx-topbar-h); }
.hx-shell .content-wrapper { padding-top: 0; min-height: 0; }
.section-padding { padding: clamp(40px, 6vw, 80px) 0; }
.bg-alt-section { background: linear-gradient(180deg, transparent, var(--hx-band), transparent); }
.compact-container { margin-top: 0; position: relative; z-index: 2; }

.section-title {
    display: block;
    text-align: center;
    font-family: var(--hx-font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    letter-spacing: .04em;
    margin: 0 0 clamp(24px, 4vw, 44px);
    color: var(--hx-ice);
    text-transform: none;
}
.section-title span { color: var(--hx-gold); }
.title-left { text-align: left; }

.profile-hero {
    position: relative;
    min-height: 0;
    display: block;
    padding: clamp(32px, 5vw, 56px) 0 clamp(26px, 4vw, 40px);
    background: none;
    border-bottom: 0;
    overflow: hidden;
}
.profile-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hx-edge) 30%, transparent);
}
.profile-hero-inner { position: relative; z-index: 1; }
.hero-stack { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hero-copy h1 {
    font-family: var(--hx-font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: .04em;
    color: var(--hx-ice);
    text-shadow: 0 2px 18px rgba(var(--hx-shadow-rgb), calc(.6 * var(--hx-shadow-k)));
    margin: 0 0 8px;
    text-transform: none;
}
.hero-copy p { color: var(--hx-text-dim); margin: 0; font-size: 1rem; letter-spacing: 0; }
.hero-quick-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-stat-chip {
    min-width: 130px;
    padding: 10px 14px;
    background: var(--hx-chip-bg);
    border: 1px solid var(--hx-edge-soft);
    clip-path: var(--hx-shape-sm);
    border-radius: 0;
    box-shadow: none;
}
.hero-stat-chip .label { display: block; font-size: .68rem; color: var(--hx-text-dim); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 2px; font-weight: 700; }
.hero-stat-chip .value { display: block; font-family: var(--hx-font); font-size: 1.1rem; color: var(--hx-ice); font-weight: 700; }

/* .myth-panel = .hx-panel */
.myth-panel,
.modern-card {
    position: relative;
    isolation: isolate;
    height: 100%;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    color: var(--hx-text);
    filter: drop-shadow(0 14px 28px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k))));
}
.myth-panel::before,
.myth-panel::after,
.modern-card::before,
.modern-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
    clip-path: var(--hx-shape);
}
.myth-panel::before,
.modern-card::before {
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(135deg, var(--hx-teal-hot) 0 30px, transparent 30px) top left / 60% 60% no-repeat,
        linear-gradient(315deg, var(--hx-teal-hot) 0 30px, transparent 30px) bottom right / 60% 60% no-repeat,
        var(--hx-edge);
}
.myth-panel::after,
.modern-card::after {
    inset: 1px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(150, 230, 255, .05), transparent 40%), linear-gradient(180deg, var(--hx-body-top), var(--hx-body-bottom));
}
.myth-panel-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px 10px 22px;
    margin: 1px 1px 0;
    background:
        repeating-linear-gradient(0deg, var(--hx-scan) 0 1px, transparent 1px 3px),
        var(--hx-strip);
    clip-path: polygon(calc(var(--hx-cut) - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--hx-cut) - 1px));
    border-bottom: 0;
}
.myth-panel-header::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 3px;
    height: 18px;
    transform: translateY(-50%);
    background: var(--hx-teal);
    box-shadow: 0 0 8px var(--hx-teal);
}
.myth-panel-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--hx-teal), rgba(var(--hx-teal-rgb), .25) 45%, transparent 85%);
}
.myth-panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.myth-panel-title .icon {
    width: 32px;
    height: 32px;
    border-radius: 0;
    display: inline-grid;
    place-items: center;
    background: var(--hx-socket);
    border: 1px solid var(--hx-edge-soft);
    color: var(--hx-accent);
    clip-path: var(--hx-shape-sm);
    flex-shrink: 0;
    font-size: .9rem;
}
.myth-panel-title h2,
.myth-panel-title h3,
.myth-panel-title h4 {
    margin: 0;
    font-family: var(--hx-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hx-ice);
}
.myth-panel-body { padding: 16px 18px 18px; }

.mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid rgba(var(--hx-teal-rgb), .3);
    background: rgba(var(--hx-teal-rgb), .1);
    color: var(--hx-accent);
    white-space: nowrap;
}

.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.earnings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.achievement-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.info-item,
.resource-card,
.earning-card,
.achievement-item {
    background: var(--hx-card);
    border: 1px solid var(--hx-edge-faint);
    border-radius: 0;
    clip-path: var(--hx-shape-sm);
    box-shadow: none;
    padding: 12px 14px;
    min-width: 0;
}
.info-item .label,
.earning-card .label,
.resource-name { display: block; font-size: .7rem; color: var(--hx-text-dim); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 4px; line-height: 1.25; }
.info-item .value { display: block; font-weight: 700; color: var(--hx-ice); font-size: .98rem; word-break: break-word; }
.earning-card .value,
.resource-value { display: block; font-family: var(--hx-font); font-size: 1.2rem; color: var(--hx-ice); font-weight: 700; line-height: 1.15; word-break: break-word; font-variant-numeric: tabular-nums; }
.resource-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.resource-icon {
    width: 34px;
    height: 34px;
    border-radius: 0;
    display: inline-grid;
    place-items: center;
    background: var(--hx-socket);
    border: 1px solid var(--hx-edge-soft);
    clip-path: var(--hx-shape-sm);
    color: var(--hx-gold);
    flex-shrink: 0;
}
.achievement-item { display: flex; align-items: center; gap: 10px; color: var(--hx-text); font-weight: 600; }
.achievement-item i { color: var(--hx-gold); flex-shrink: 0; }
.action-bar { display: flex; flex-wrap: wrap; gap: 12px; }

/* old buttons -> the client's buttons */
.btn-glow-gold,
.btn-glow-bronze,
.btn-outline-myth,
.btn-ghost,
.btn-nav-register,
.btn-text-nav,
.btn-glow-android,
.btn-android {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 22px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--hx-ice);
    font-family: var(--hx-font);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(var(--hx-shadow-rgb), calc(.6 * var(--hx-shadow-k)));
    filter: drop-shadow(0 4px 8px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k))));
    transform: none;
    transition: transform .15s var(--hx-ease), filter .2s var(--hx-ease);
    overflow: visible;
}
.btn-glow-gold::before,
.btn-glow-bronze::before,
.btn-outline-myth::before,
.btn-ghost::before,
.btn-nav-register::before,
.btn-text-nav::before,
.btn-glow-android::before,
.btn-android::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    clip-path: var(--hx-shape-sm);
    background: rgba(var(--hx-teal-rgb), .62);
}
.btn-glow-gold::after,
.btn-glow-bronze::after,
.btn-outline-myth::after,
.btn-ghost::after,
.btn-nav-register::after,
.btn-text-nav::after,
.btn-glow-android::after,
.btn-android::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: var(--hx-shape-sm);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06) 0 50%, transparent 50%),
        linear-gradient(0deg, var(--hx-steel-lo), var(--hx-steel-hi));
}
.btn-glow-gold,
.btn-nav-register {
    color: var(--hx-primary-text);
    font-family: var(--hx-font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    text-shadow: 0 1px 0 rgba(255, 230, 160, .5);
}
.btn-glow-gold::before,
.btn-nav-register::before { background: rgba(255, 220, 140, .95); }
.btn-glow-gold::after,
.btn-nav-register::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0 50%, transparent 50%),
        linear-gradient(0deg, var(--hx-primary-lo), var(--hx-primary-hi));
}
.btn-glow-android::before,
.btn-android::before { background: rgba(110, 236, 140, .75); }
.btn-glow-android,
.btn-android { color: #fff; }
.btn-glow-android::after,
.btn-android::after { background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0 50%, transparent 50%), linear-gradient(0deg, #08321c, #17703f); }
.btn-glow-gold:hover,
.btn-nav-register:hover { color: var(--hx-primary-text); filter: drop-shadow(0 0 14px rgba(255, 168, 48, .55)) drop-shadow(0 4px 8px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k)))); transform: none; }
.btn-glow-bronze:hover,
.btn-outline-myth:hover,
.btn-ghost:hover,
.btn-text-nav:hover,
.btn-glow-android:hover,
.btn-android:hover { color: var(--hx-hover-text); filter: drop-shadow(0 0 10px rgba(var(--hx-teal-rgb), .35)) drop-shadow(0 4px 8px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k)))); transform: none; }
.btn-glow-bronze:hover::before,
.btn-outline-myth:hover::before,
.btn-ghost:hover::before,
.btn-text-nav:hover::before { background: var(--hx-teal-hot); }
.btn-glow-gold:active,
.btn-glow-bronze:active,
.btn-outline-myth:active { transform: translateY(1px); }
.btn-glow-gold:disabled,
.btn-glow-gold.disabled,
.btn-outline-myth:disabled,
.btn-android.disabled { color: var(--hx-off-text); text-shadow: none; cursor: not-allowed; filter: none; }
.btn-glow-gold:disabled::after,
.btn-glow-gold.disabled::after,
.btn-outline-myth:disabled::after,
.btn-android.disabled::after { background: linear-gradient(0deg, var(--hx-off-lo), var(--hx-off-hi)); }
.btn-glow-gold:disabled::before,
.btn-glow-gold.disabled::before,
.btn-outline-myth:disabled::before,
.btn-android.disabled::before { background: var(--hx-off-rim); }

/* feature / event cards from the old landing page */
.feature-card,
.event-card,
.sys-req-box {
    position: relative;
    height: 100%;
    padding: 22px;
    background: var(--hx-card);
    border: 1px solid var(--hx-edge-faint);
    border-radius: 0;
    clip-path: var(--hx-shape);
    box-shadow: none;
    color: var(--hx-text);
}
.event-card { padding: 0; overflow: hidden; }
.event-img { height: 180px; background-size: cover; background-position: center; }
.event-info { padding: 16px 18px; }
.feature-card h3,
.event-card h3,
.sys-req-box h3 { font-family: var(--hx-font); font-size: 1.05rem; font-weight: 700; color: var(--hx-ice); text-transform: none; }
.icon-wrapper,
.feature-icon { color: var(--hx-accent); font-size: 1.6rem; margin-bottom: 12px; }
.sys-req-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sys-req-list li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--hx-line); padding-bottom: 8px; }
.sys-req-list strong { color: var(--hx-text-dim); }

/* old tables */
.table-custom {
    background: var(--hx-card);
    border: 1px solid var(--hx-edge-faint);
    border-radius: 0;
    box-shadow: none;
    clip-path: var(--hx-shape-sm);
    overflow: auto;
}
.table-custom table { margin-bottom: 0; width: 100% !important; }
.table-custom td { background: transparent !important; color: var(--hx-text); padding: 12px 14px; }
.table-custom th { padding: 12px 14px !important; }
.table-dark { --bs-table-bg: transparent; --bs-table-color: var(--hx-text); }
.rank-1 .rank-icon { color: var(--hx-gold); }
.rank-2 .rank-icon { color: var(--hx-silver); }
.rank-3 .rank-icon { color: #e09a5a; }
.page-link { border-radius: 0 !important; }

/* status bar (old landing) */
.status-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.status-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--hx-card); border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); }
.status-icon { color: var(--hx-accent); font-size: 1.3rem; }
.status-info .label { display: block; font-size: .7rem; color: var(--hx-text-dim); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.status-info .value { font-weight: 700; color: var(--hx-ice); }

/* old modal skin */
.mmo-modal .modal-content { color: var(--hx-text); }
.modal-switch-link { color: var(--hx-accent); font-weight: 700; }

/* the old shell is replaced by the top bar; hide its leftovers if an old include still prints them */
aside.sidebar,
.mobile-topbar,
#mobileSidebar.sidebar-mobile { display: none !important; }

/* the old kitbag tooltip */
.custom-tooltip { background: var(--hx-pop) !important; border: 1px solid var(--hx-edge) !important; color: var(--hx-text) !important; border-radius: 0 !important; }

/* SweetAlert2 (several admin and event pages) */
.swal2-popup {
    background: var(--hx-modal-bg) !important;
    color: var(--hx-text) !important;
    border: 1px solid var(--hx-edge) !important;
    border-radius: 0 !important;
    clip-path: var(--hx-shape);
    font-family: var(--hx-font) !important;
}
.swal2-title { color: var(--hx-ice) !important; font-family: var(--hx-font) !important; letter-spacing: .03em; }
.swal2-html-container { color: var(--hx-text) !important; }
.swal2-styled { border-radius: 0 !important; clip-path: var(--hx-shape-sm); font-weight: 700 !important; }
.swal2-styled.swal2-confirm { color: var(--hx-primary-text) !important; background: linear-gradient(0deg, var(--hx-primary-lo), var(--hx-primary-hi)) !important; }
.swal2-input,
.swal2-textarea,
.swal2-select { background: var(--hx-field-bg) !important; color: var(--hx-ice) !important; border: 1px solid var(--hx-field-edge) !important; border-radius: 0 !important; }

/* ---------------------------------------------------------------- 13. utilities */
.hx-dim { color: var(--hx-text-dim) !important; }
.hx-faint { color: var(--hx-text-faint) !important; }
.hx-ice { color: var(--hx-ice) !important; }
.hx-teal { color: var(--hx-accent) !important; }
.hx-goldc { color: var(--hx-gold) !important; }
.hx-goodc { color: var(--hx-good) !important; }
.hx-badc { color: var(--hx-bad-text) !important; }
.hx-upper { text-transform: uppercase; letter-spacing: .08em; }
.hx-tabular { font-variant-numeric: tabular-nums; }
.hx-stack > * + * { margin-top: 16px; }
.hx-stack--sm > * + * { margin-top: 8px; }
.hx-flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hx-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hx-center { text-align: center; }
.hx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-empty { padding: 32px 16px; text-align: center; color: var(--hx-text-dim); }
.hx-empty i { display: block; font-size: 2rem; color: var(--hx-accent); opacity: .5; margin-bottom: 10px; }

.hx-js .hx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--hx-ease), transform .7s var(--hx-ease); }
.hx-js .hx-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .hx-js .hx-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- 14. responsive */
@media (min-width: 576px) {
    .hx-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) and (max-width: 1199.98px), (min-width: 1680px) {
    .hx-server { display: inline-flex; }
}

@media (min-width: 992px) {
    .hx-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

@media (min-width: 1200px) {
    .hx-nav { display: flex; }
    .hx-burger { display: none; }      /* every menu is in the bar; the drawer is for narrower screens */
}

/* A logged-in staff member has nine top-bar entries (the bar is at most 1480 px wide): the bar drops the
   link icons, tightens the spacing, shows the avatar without the name below 1440 px and the server chip only
   from 1680 px, so nothing runs under the end group. */
@media (min-width: 1200px) {
    .hx-topbar__inner { gap: 12px; }
    .hx-nav { margin-left: 0; }
    .hx-nav > a,
    .hx-navdrop__toggle { padding: 0 9px; font-size: .86rem; letter-spacing: .02em; }
    .hx-nav > a::after,
    .hx-navdrop__toggle::after { left: 9px; right: 9px; }
    .hx-nav > a i { display: none; }
}
@media (min-width: 1200px) and (max-width: 1365.98px) {
    .hx-brand__name { font-size: 1.08rem; }
    .hx-nav > a,
    .hx-navdrop__toggle { padding: 0 7px; font-size: .82rem; }
    .hx-nav > a::after,
    .hx-navdrop__toggle::after { left: 7px; right: 7px; }
}

@media (max-width: 1439.98px) {
    .hx-user__name { display: none; }
}

@media (max-width: 991.98px) {
    .earnings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .status-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    :root { --hx-topbar-h: 58px; --hx-cut: 10px; }
    body { font-size: 15px; }
    .hx-brand img { width: 38px; }
    .hx-brand__name { font-size: 1.05rem; }
    .hx-panel__body,
    .myth-panel-body { padding: 14px; }
    .hx-panel__head,
    .myth-panel-header { padding-left: 20px; }
    .info-grid,
    .achievement-list { grid-template-columns: 1fr; }
    .resource-grid,
    .earnings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-btn--lg { min-height: 52px; padding: 12px 24px; font-size: 1rem; }
    .hx-btn--xl { min-height: 56px; padding: 14px 28px; font-size: 1.08rem; }
    .hx-kv { font-size: .9rem; }
    .modal-dialog { margin: 12px; }
    .hx-topbar__end .hx-btn--sm { padding: 6px 11px; }
}

@media (max-width: 380px) {
    .hx-brand__name { display: none; }
}

/* ---------------------------------------------------------------- 15. 3D model viewer (helios-3d.js) */
.hx-model {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    touch-action: pan-y;
    background: var(--hx-model-poster, none) center bottom / contain no-repeat;
    isolation: isolate;
}
.hx-model.is-ready { background-image: none; }
.hx-model__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; z-index: 0; }
.hx-model.is-dragging .hx-model__canvas { cursor: grabbing; }
.hx-model::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    border: 3px solid rgba(var(--hx-teal-rgb), .2);
    border-top-color: var(--hx-teal);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    animation: hx-spin .9s linear infinite;
    z-index: 2;
}
.hx-model.is-loading::after { opacity: 1; }
@keyframes hx-spin { to { transform: rotate(360deg); } }
.hx-model__ui { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.hx-model__ui > * { pointer-events: auto; }
.hx-model__name { min-width: 150px; text-align: center; font-weight: 700; color: var(--hx-ice); text-shadow: 0 1px 6px rgba(var(--hx-shadow-rgb), var(--hx-shadow-k)); font-size: .95rem; }
.hx-model__hint { position: absolute; top: 10px; right: 12px; z-index: 3; font-size: .72rem; color: var(--hx-text-dim); letter-spacing: .08em; text-transform: uppercase; opacity: .8; pointer-events: none; }
.hx-model.is-fallback .hx-model__hint { display: none; }

/* sign-up steps (Discord-verified registration) */
.hx-steps { list-style: none; counter-reset: hx-step; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.hx-steps li { counter-increment: hx-step; position: relative; padding: 10px 12px 10px 46px; background: var(--hx-inset); border: 1px solid var(--hx-edge-faint); clip-path: var(--hx-shape-sm); }
.hx-steps li::before { content: counter(hx-step); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: var(--hx-steel-hi); color: var(--hx-text-dim); border: 1px solid var(--hx-edge-soft); }
.hx-steps li.is-on { border-color: var(--hx-edge); }
.hx-steps li.is-on::before { background: #5865f2; color: #fff; border-color: #aab1ff; }
.hx-steps b { display: block; color: var(--hx-ice); font-size: .92rem; }
.hx-steps span { display: block; color: var(--hx-text-dim); font-size: .8rem; }
.hx-signup-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hx-signup-who img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px #5865f2; }
.hx-signup-who span { flex: 1; min-width: 0; }
.hx-signup-who b { display: block; color: var(--hx-ice); }
.hx-signup-who small { display: block; color: var(--hx-text-dim); }

/* the "verify with Discord" reminder for logged-in players who have not linked yet */
.hx-notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px var(--hx-gutter); background: linear-gradient(90deg, rgba(88, 101, 242, .28), var(--hx-chip-solid)); border-bottom: 1px solid rgba(170, 177, 255, .35); font-size: .9rem; }
.hx-notice > i { color: var(--hx-discord-text); font-size: 1.1rem; }
.hx-notice span { flex: 1; min-width: 200px; color: var(--hx-ice); }
.hx-notice[hidden] { display: none; }

/* ---------------------------------------------------------------- 16. light theme details */
/* (the light colours themselves are tokens, at the top of this file) */
:root[data-theme="light"] {
    --bs-body-bg-rgb: 231, 237, 244;
    --bs-body-color-rgb: 27, 41, 64;
    --bs-emphasis-color-rgb: 12, 26, 46;
    --bs-secondary-color-rgb: 74, 91, 116;
    --bs-secondary-bg: #ffffff;
    --bs-secondary-bg-rgb: 255, 255, 255;
    --bs-tertiary-bg: #f1f5fa;
    --bs-tertiary-bg-rgb: 241, 245, 250;
    --bs-link-color-rgb: 8, 117, 140;
    --bs-link-hover-color-rgb: 7, 144, 170;
    --bs-border-color-translucent: rgba(50, 90, 140, .16);
    --bs-primary: #0a9bb5;
    --bs-primary-rgb: 10, 155, 181;
    --bs-success: #137a37;
    --bs-success-rgb: 19, 122, 55;
    --bs-warning: #c98a00;
    --bs-warning-rgb: 201, 138, 0;
    --bs-danger: #c42b35;
    --bs-danger-rgb: 196, 43, 53;
    --bs-info: #0a8aa5;
    --bs-info-rgb: 10, 138, 165;
    --bs-light: #f1f5fa;
    --bs-light-rgb: 241, 245, 250;
    --bs-dark: #1b2940;
    --bs-dark-rgb: 27, 41, 64;
    --bs-secondary: #4a5b74;
    --bs-secondary-rgb: 74, 91, 116;
    --bs-primary-text-emphasis: #065e72;
    --bs-success-text-emphasis: #0f6a2f;
    --bs-warning-text-emphasis: #7a5000;
    --bs-danger-text-emphasis: #9c1f27;
    --bs-info-text-emphasis: #065e72;
    --bs-dark-bg-subtle: rgba(30, 50, 80, .1);
}
[data-theme="light"] .btn-close { filter: none; --bs-btn-close-color: #0c1a2e; }
[data-theme="light"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2308758c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
[data-theme="light"] .accordion { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2308758c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2308758c' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); }
/* dark ink needs no shadow to stand off the glass */
[data-theme="light"] .hx-panel__title,
[data-theme="light"] .hx-display,
[data-theme="light"] .hero-copy h1 { text-shadow: none; }
[data-theme="light"] .hx-btn:not(.hx-btn--primary):not(.hx-btn--danger):not(.hx-btn--good):not(.hx-btn--discord) { text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
/* item slots stay the game's dark sockets: the icons are drawn for them */
[data-theme="light"] .hx-slot { --hx-rarity: rgba(60, 100, 150, .5); }

/* the theme button (top bar + drawer) */
.hx-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--hx-edge-soft);
    background: var(--hx-chip);
    color: var(--hx-ice);
    font-size: 1rem;
    clip-path: var(--hx-shape-sm);
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.hx-theme:hover { border-color: var(--hx-teal); color: var(--hx-accent); }
/* each button shows the mode it switches to: a sun in the dark theme, a moon in the light one */
.hx-theme .fa-moon,
[data-theme="light"] .hx-theme .fa-sun { display: none; }
[data-theme="light"] .hx-theme .fa-moon { display: inline-block; }
.hx-menu .hx-theme-row { justify-content: flex-start; }
.hx-theme-row .fa-moon,
[data-theme="light"] .hx-theme-row .fa-sun { display: none; }
[data-theme="light"] .hx-theme-row .fa-moon { display: inline-block; }
.hx-theme-row [data-theme-label]::after { content: attr(data-light); }
[data-theme="light"] .hx-theme-row [data-theme-label]::after { content: attr(data-dark); }
@media (max-width: 575.98px) {
    .hx-theme { width: 36px; height: 36px; }
}
.hx-theme-row i { width: 20px; text-align: center; color: var(--hx-accent); opacity: .85; flex-shrink: 0; }
.hx-theme .fa-sun,
.hx-theme-row .fa-sun { color: var(--hx-gold); }
.hx-theme .fa-sun { font-size: 1.12rem; }

/* ---------------------------------------------------------------- 17. languages */
/* the language picker (Layout.php LayoutLangPicker): a globe-style button with the code, a list of languages */
.hx-lang__btn { width: auto; min-width: 40px; gap: 5px; padding: 0 8px; }
.hx-lang__btn i { font-size: 1.05rem; color: var(--hx-accent); }
.hx-lang__code { font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.hx-lang__menu { max-height: min(70vh, 520px); overflow-y: auto; min-width: 230px; }
.hx-lang__item { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; }
.hx-lang__item small { color: var(--hx-text-faint); font-size: .75rem; }
.hx-lang__item.is-on { color: var(--hx-accent) !important; }
.hx-lang__item.is-on span::before { content: "\2713"; margin-right: 6px; }
.hx-menu .hx-lang-row { justify-content: flex-start; }
.hx-lang__list .hx-lang__item { padding: 8px 14px 8px 44px; }
@media (max-width: 575.98px) { .hx-lang__btn { height: 36px; padding: 0 6px; } .hx-lang__code { display: none; } }

/* scripts Barlow / Cinzel do not cover: the extra fonts LayoutLangFonts() loads (per glyph, Latin stays Barlow) */
:root[data-font="cyrillic"], :root[data-font="cyrillic"] .hx-banner { --hx-font: "Barlow", "Fira Sans", "Segoe UI", system-ui, sans-serif; --hx-font-display: "Cinzel", "Cormorant SC", "Times New Roman", serif; }
:root[data-font="vietnamese"], :root[data-font="vietnamese"] .hx-banner { --hx-font-display: "Cormorant SC", "Times New Roman", serif; }
:root[data-font="sc"], :root[data-font="sc"] .hx-banner { --hx-font: "Barlow", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; --hx-font-display: "Cinzel", "Noto Serif SC", "SimSun", serif; }
:root[data-font="tc"], :root[data-font="tc"] .hx-banner { --hx-font: "Barlow", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif; --hx-font-display: "Cinzel", "Noto Serif TC", "PMingLiU", serif; }
:root[data-font="jp"], :root[data-font="jp"] .hx-banner { --hx-font: "Barlow", "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif; --hx-font-display: "Cinzel", "Noto Serif JP", "Yu Mincho", serif; }
:root[data-font="kr"], :root[data-font="kr"] .hx-banner { --hx-font: "Barlow", "Noto Sans KR", "Malgun Gothic", sans-serif; --hx-font-display: "Cinzel", "Noto Serif KR", serif; }
:root[data-font="thai"], :root[data-font="thai"] .hx-banner { --hx-font: "Barlow", "Noto Sans Thai", "Leelawadee UI", sans-serif; --hx-font-display: "Cinzel", "Noto Serif Thai", serif; }
/* CJK and Thai lines need more room than the Latin letter-spacing and line heights give them */
:root[data-font="sc"] body, :root[data-font="tc"] body, :root[data-font="jp"] body, :root[data-font="kr"] body, :root[data-font="thai"] body { line-height: 1.7; }
:root[data-font="thai"] body { line-height: 1.8; }

/* ---------------------------------------------------------------- 18. game client layer */
/*
 * What makes the site read as a game client: ornate window frames (gold corner brackets, a gem on
 * the title strip, an engraved inner line), the HUD top bar with an EXP bar that fills as you
 * scroll, a portrait with a level plate, system-notice toasts, game dialogs, glinting buttons, inset
 * fields, a gilded cursor and the item tooltip ([data-hx-item]). Everything is drawn from tokens
 * (section 1, both themes) and needs no extra markup; .hx-panel--plain opts a window out.
 */

/* ---- window frames */
.hx-panel::after,
.modal-content::after {
    background:
        var(--hx-orn-tr) right 4px top 4px / 22px 22px no-repeat,
        var(--hx-orn-bl) left 4px bottom 4px / 22px 22px no-repeat,
        var(--hx-orn-cut-tl) left 0 top 0 / 20px 20px no-repeat,
        var(--hx-orn-cut-br) right 0 bottom 0 / 20px 20px no-repeat,
        linear-gradient(180deg, rgba(var(--hx-teal-rgb), .05), transparent 40%),
        linear-gradient(180deg, var(--hx-body-top), var(--hx-body-bottom));
    outline: 1px solid var(--hx-frame-inner);
    outline-offset: -5px;
}
.modal-content::after {
    background:
        var(--hx-orn-tr) right 4px top 4px / 22px 22px no-repeat,
        var(--hx-orn-bl) left 4px bottom 4px / 22px 22px no-repeat,
        var(--hx-orn-cut-tl) left 0 top 0 / 20px 20px no-repeat,
        var(--hx-orn-cut-br) right 0 bottom 0 / 20px 20px no-repeat,
        linear-gradient(180deg, rgba(var(--hx-teal-rgb), .05), transparent 40%),
        var(--hx-modal-bg);
}
/* the title strip: an engraved metal plate with a gem on its rule and a bracket in its corner */
.hx-panel__head,
.modal-header {
    background:
        var(--hx-orn-gem) center bottom -6px / 12px 12px no-repeat,
        var(--hx-orn-tr) right 3px top 3px / 16px 16px no-repeat,
        var(--hx-orn-cut-tl) left -1px top -1px / 20px 20px no-repeat,
        linear-gradient(180deg, var(--hx-engrave), transparent 2px),
        repeating-linear-gradient(0deg, var(--hx-scan) 0 1px, transparent 1px 3px),
        var(--hx-strip);
}
.hx-panel__title,
.modal-title {
    color: var(--hx-title-ink);
    text-shadow: 0 1px 0 rgba(var(--hx-shadow-rgb), calc(.85 * var(--hx-shadow-k))), 0 0 14px rgba(var(--hx-gold-rgb), .12);
}
/* opt-out: a plain window (dense tools, nested panels) */
.hx-panel--plain::after {
    background:
        linear-gradient(180deg, rgba(var(--hx-teal-rgb), .05), transparent 40%),
        linear-gradient(180deg, var(--hx-body-top), var(--hx-body-bottom));
    outline: 0;
}
.hx-panel--plain > .hx-panel__head {
    background:
        repeating-linear-gradient(0deg, var(--hx-scan) 0 1px, transparent 1px 3px),
        var(--hx-strip);
}
.hx-panel--plain > .hx-panel__head > .hx-panel__title { color: var(--hx-ice); }
/* gold windows keep their gilt edge and get warmer ornaments for free */
.hx-panel--gold::after { outline-color: rgba(var(--hx-gold-rgb), .3); }

/* .hx-ornament: a section heading between two gilded rules ending in gems; empty = a divider */
.hx-ornament {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 18px;
    font-family: var(--hx-font-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--hx-title-ink);
}
.hx-ornament::before,
.hx-ornament::after {
    content: '';
    flex: 1;
    min-width: 24px;
    height: 12px;
    background:
        var(--hx-orn-gem) right center / 12px 12px no-repeat,
        linear-gradient(90deg, transparent, var(--hx-frame-gold)) left center / calc(100% - 14px) 1px no-repeat;
}
.hx-ornament::after {
    background:
        var(--hx-orn-gem) left center / 12px 12px no-repeat,
        linear-gradient(270deg, transparent, var(--hx-frame-gold)) right center / calc(100% - 14px) 1px no-repeat;
}
.hx-ornament:empty { gap: 0; }
.hx-ornament:empty::after { background: linear-gradient(270deg, transparent, var(--hx-frame-gold)) right center / 100% 1px no-repeat; }
.hx-ornament > i { color: var(--hx-frame-gold); }

/* ---- the HUD top bar */
.hx-topbar {
    background:
        linear-gradient(180deg, var(--hx-engrave), transparent 1px) top / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, var(--hx-brush) 0 1px, transparent 1px 3px),
        var(--hx-topbar-bg);
}
.hx-topbar::after {
    background: linear-gradient(90deg, transparent, rgba(var(--hx-gold-rgb), .5) 16%, rgba(var(--hx-teal-rgb), .65) 50%, rgba(var(--hx-gold-rgb), .5) 84%, transparent);
}
/* gem separators between the menu tabs (they take no width) */
.hx-nav > :not(:first-child)::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 50%;
    width: 5px;
    height: 5px;
    transform: translateY(-50%) rotate(45deg);
    background: rgba(var(--hx-gold-rgb), .4);
    box-shadow: 0 0 6px rgba(var(--hx-gold-rgb), .35);
    pointer-events: none;
}
.hx-nav > a:hover,
.hx-nav > a.active,
.hx-navdrop__toggle:hover,
.hx-navdrop__toggle.show,
.hx-navdrop__toggle.active {
    background: radial-gradient(ellipse 75% 65% at 50% 100%, rgba(var(--hx-teal-rgb), .17), transparent 72%);
}
.hx-nav > a.active,
.hx-navdrop__toggle.active { text-shadow: 0 0 12px rgba(var(--hx-teal-rgb), .55); }
.hx-nav > a.active::after,
.hx-navdrop__toggle.active::after {
    background: linear-gradient(90deg, transparent, var(--hx-gold) 25%, var(--hx-gold) 75%, transparent);
    box-shadow: 0 0 10px rgba(var(--hx-gold-rgb), .65);
}
.hx-nav > a.is-play { text-shadow: 0 0 14px rgba(var(--hx-gold-rgb), .45); }

/* the EXP bar under the top bar: fills with the page's scroll progress (helios.js initExpBar) */
.hx-expbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--hx-ease);
}
.hx-expbar.is-on { opacity: 1; }
.hx-expbar > span {
    display: block;
    height: 100%;
    width: calc(var(--p, 0) * 100%);
    background:
        linear-gradient(90deg, transparent calc(100% - 1px), var(--hx-exp-tick) 0) 0 0 / 10vw 100% repeat-x,
        var(--hx-exp-fill);
    box-shadow: 0 0 8px rgba(var(--hx-gold-rgb), .55);
}

/* the portrait: a gilded ring in the faction's colour, with a level plate */
.hx-user__portrait { position: relative; display: inline-grid; flex-shrink: 0; }
.hx-user .hx-user__avatar {
    width: 38px;
    height: 38px;
    border: 2px solid transparent;
    background: var(--hx-socket) padding-box, var(--hx-ring) border-box;
    box-shadow: 0 0 0 1px rgba(var(--hx-shadow-rgb), calc(.6 * var(--hx-shadow-k))), 0 0 12px rgba(var(--hx-gold-rgb), .25);
}
.hx-user__portrait.is-sparta .hx-user__avatar { box-shadow: 0 0 0 2px var(--hx-sparta), 0 0 12px color-mix(in srgb, var(--hx-sparta) 45%, transparent); }
.hx-user__portrait.is-athens .hx-user__avatar { box-shadow: 0 0 0 2px var(--hx-athens), 0 0 12px color-mix(in srgb, var(--hx-athens) 45%, transparent); }
.hx-user__lv {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    min-width: 24px;
    height: 14px;
    padding: 0 5px;
    font: 700 .62rem/14px var(--hx-font);
    text-align: center;
    color: var(--hx-primary-text);
    background: var(--hx-exp-fill);
    clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 4px 100%, 0 50%);
    pointer-events: none;
}
.hx-user .hx-alert-dot { left: 30px; }

/* ---- system notices (showPopup) */
#popup-container {
    width: min(480px, calc(100vw - 32px));
    filter: drop-shadow(0 12px 22px rgba(var(--hx-shadow-rgb), calc(.55 * var(--hx-shadow-k))));
}
.hx-toast {
    position: relative;
    gap: 12px;
    padding: 10px 30px 10px 24px;
    border: 0;
    box-shadow: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
    background:
        linear-gradient(90deg, transparent, var(--hx-toast) 18%, var(--hx-toast) 82%, transparent) top / 100% 1px no-repeat,
        linear-gradient(90deg, transparent, var(--hx-toast) 18%, var(--hx-toast) 82%, transparent) bottom / 100% 1px no-repeat,
        radial-gradient(ellipse 60% 120% at 50% 0%, color-mix(in srgb, var(--hx-toast) 22%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--hx-toast) 16%, var(--hx-pop)), color-mix(in srgb, var(--hx-toast) 5%, var(--hx-pop)));
    transform: translateY(-14px) scaleX(.86);
}
.hx-toast.is-in { transform: none; }
.hx-toast > i:first-child {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 1rem;
    background: var(--hx-socket);
    border: 1px solid var(--hx-toast);
    box-shadow: 0 0 12px color-mix(in srgb, var(--hx-toast) 50%, transparent), inset 0 0 8px color-mix(in srgb, var(--hx-toast) 30%, transparent);
}
.hx-toast__label {
    display: block;
    margin-bottom: 1px;
    font-family: var(--hx-font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hx-toast);
}
/* one shine across the ribbon as it arrives */
.hx-toast::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%) -150% 0 / 250% 100% no-repeat;
}
.hx-toast.is-in::after { animation: hx-toast-shine 1.1s .1s var(--hx-ease) 1 forwards; }
@keyframes hx-toast-shine { to { background-position: 150% 0; } }
/* success reads as a gilded "quest complete" ribbon */
.hx-toast--good { --hx-toast: var(--hx-gold); }

/* ---- game dialogs (confirmDialog; Bootstrap modals share the window frame above) */
.hx-frame-overlay { background: radial-gradient(ellipse at center, transparent 20%, var(--hx-scrim) 100%), var(--hx-scrim); }
.hx-dialog { animation: hx-dialog-in .22s var(--hx-ease); }
.hx-dialog > .hx-panel__head { justify-content: center; padding-left: 16px; }
.hx-dialog > .hx-panel__head::before { display: none; }
.hx-dialog > .hx-panel__body { text-align: center; padding: 22px 22px 20px; }
.hx-dialog > .hx-panel__body .hx-btn-row { justify-content: center !important; margin-top: 18px; }
@keyframes hx-dialog-in { from { opacity: 0; scale: .94; } }
.modal.fade .modal-dialog { transform: scale(.95); transition: transform .22s var(--hx-ease); }
.modal.show .modal-dialog { transform: none; }

/* ---- buttons: a glint sweeps across on hover, the body sinks when pressed */
@property --hx-glint { syntax: '<percentage>'; inherits: true; initial-value: -60%; }
.hx-btn::after {
    background:
        linear-gradient(105deg, transparent calc(var(--hx-glint) - 14%), rgba(255, 255, 255, .26) var(--hx-glint), transparent calc(var(--hx-glint) + 14%)),
        linear-gradient(90deg, transparent 8%, var(--hx-btn-line) 50%, transparent 92%) bottom 3px center / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) top 1px center / calc(100% - 16px) 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .06) 0 50%, transparent 50%),
        linear-gradient(0deg, var(--hx-btn-lo), var(--hx-btn-hi));
}
.hx-btn--primary::after {
    background:
        linear-gradient(105deg, transparent calc(var(--hx-glint) - 14%), rgba(255, 255, 255, .5) var(--hx-glint), transparent calc(var(--hx-glint) + 14%)),
        linear-gradient(90deg, transparent 8%, var(--hx-btn-line) 50%, transparent 92%) bottom 3px center / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) top 1px center / calc(100% - 16px) 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0 50%, transparent 50%),
        linear-gradient(0deg, var(--hx-btn-lo), var(--hx-btn-hi));
}
.hx-btn--ghost::after { background: var(--hx-ghost-bg); }
.hx-btn:not([disabled]):not(.is-disabled):hover { animation: hx-glint .8s var(--hx-ease) 1; }
@keyframes hx-glint { from { --hx-glint: -60%; } to { --hx-glint: 160%; } }
.hx-btn:active::after { box-shadow: inset 0 3px 8px rgba(var(--hx-shadow-rgb), calc(.45 * var(--hx-shadow-k))); }
.hx-btn:focus-visible {
    outline: 1px solid var(--hx-gold);
    outline-offset: 3px;
    filter: drop-shadow(0 0 7px rgba(var(--hx-gold-rgb), .55)) drop-shadow(0 4px 8px rgba(var(--hx-shadow-rgb), calc(.4 * var(--hx-shadow-k))));
}
:where(a, button, summary, select, [tabindex]):focus-visible { outline: 2px solid var(--hx-teal); outline-offset: 2px; }

/* ---- fields: a recessed socket */
.hx-input,
.hx-field input,
.hx-field select,
.hx-field textarea,
.form-control,
.form-select {
    box-shadow: inset 0 2px 6px rgba(var(--hx-shadow-rgb), calc(.55 * var(--hx-shadow-k))), inset 0 -1px 0 rgba(var(--hx-teal-rgb), .1);
}
.hx-input:focus,
.hx-field input:focus,
.hx-field select:focus,
.hx-field textarea:focus,
.form-control:focus,
.form-select:focus {
    box-shadow: inset 0 2px 6px rgba(var(--hx-shadow-rgb), calc(.45 * var(--hx-shadow-k))), inset 0 0 0 1px rgba(var(--hx-teal-rgb), .35), 0 0 16px rgba(var(--hx-teal-rgb), .14);
}

/* ---- the gilded cursor (mouse and pen only; links and buttons get the gauntlet) */
@media (pointer: fine) {
    html { cursor: var(--hx-cursor), auto; }
    :where(a[href], button, summary, label[for], select, [role="button"], [role="tab"], [data-bs-toggle], [data-hx-item]),
    .hx-btn, .hx-tab, .hx-burger, .hx-theme, .hx-close, button.hx-user, .hx-navdrop__toggle, .dropdown-item,
    .page-link, .form-check-input, .form-select, .hx-check { cursor: var(--hx-cursor-hand), pointer; }
    :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea, [contenteditable="true"]) { cursor: text; }
    .hx-btn[disabled], .hx-btn.is-disabled, .hx-btn[aria-disabled="true"], button:disabled { cursor: not-allowed; }
}

/* ---- the item tooltip ([data-hx-item]; helios.js initItemTips, data from /itemtip) */
.hx-itemtip {
    --q: var(--hx-q-item);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2200;
    width: max-content;
    max-width: min(300px, calc(100vw - 16px));
    padding: 12px 14px 12px;
    color: var(--hx-text);
    font-size: .85rem;
    line-height: 1.4;
    background:
        var(--hx-orn-tr) right 2px top 2px / 16px 16px no-repeat,
        var(--hx-orn-bl) left 2px bottom 2px / 16px 16px no-repeat,
        var(--hx-tip-bg);
    border: 1px solid var(--hx-tip-edge);
    box-shadow: inset 0 0 0 1px rgba(var(--hx-gold-rgb), .08), 0 14px 30px rgba(var(--hx-shadow-rgb), calc(.55 * var(--hx-shadow-k)));
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}
.hx-itemtip.is-on { opacity: 1; transform: none; }
.hx-itemtip[data-q="weapons"], .hx-itemtip[data-q="armor"] { --q: var(--hx-q-gear); }
.hx-itemtip[data-q="jewelry"] { --q: var(--hx-q-jewel); }
.hx-itemtip[data-q="mounts"] { --q: var(--hx-q-mount); }
.hx-itemtip[data-q="fashion"] { --q: var(--hx-q-fashion); }
.hx-itemtip[data-q="common"] { --q: var(--hx-q-common); }
.hx-itemtip[data-q="fine"] { --q: var(--hx-q-fine); }
.hx-itemtip[data-q="rare"] { --q: var(--hx-q-rare); }
.hx-itemtip[data-q="epic"] { --q: var(--hx-q-epic); }
.hx-itemtip[data-q="legend"] { --q: var(--hx-q-legend); }
.hx-itemtip__head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--hx-line); }
.hx-itemtip__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: url(/resources/gamedata/Icon.png) no-repeat;
    background-size: 1024px 1024px;
    background-position: var(--x, 0) var(--y, 0);
    border: 1px solid color-mix(in srgb, var(--q) 60%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--q) 35%, transparent);
}
.hx-itemtip__icon.is-s2 { background-image: url(/resources/gamedata/Icon2.png); }
.hx-itemtip__name { display: block; font-weight: 700; font-size: .95rem; color: var(--q); line-height: 1.2; }
.hx-itemtip__type { display: block; margin-top: 2px; color: var(--hx-text-dim); font-size: .78rem; }
.hx-itemtip__stats { margin: 0; padding: 0; list-style: none; }
.hx-itemtip__stats li { display: flex; justify-content: space-between; gap: 16px; }
.hx-itemtip__stats b { color: var(--hx-good-text); font-weight: 600; white-space: nowrap; }
.hx-itemtip__desc { margin: 8px 0 0; color: var(--hx-warn-text); font-size: .8rem; }
.hx-itemtip__foot { margin: 8px 0 0; color: var(--hx-text-faint); font-size: .74rem; }

/* ---- the loading screen lives in routes/index.php (inline, before this file loads) */

@media (prefers-reduced-motion: reduce) {
    .hx-btn:hover { animation: none; }
    .hx-toast.is-in::after { animation: none; }
    .hx-dialog { animation: none; }
}
@media (max-width: 1199.98px) {
    .hx-nav > :not(:first-child)::before { display: none; }
}