/* =====================================================================================================
   Everheim Online Idle - stylesheet
   Tokens: primitives (raw palette) -> semantic roles (one set per theme) -> component use.
   Component rules below only use semantic var(--*); themes swap the semantic layer:
     :root                     light theme (default: cream/white windows, blue title strips and accents)
     :root[data-theme="dark"]  dark theme (navy ink, same blue accent family)
   Colour roles: blue = actions, selection, active state, focus; navy/steel ("accent") = titles, badges, highlights,
   ornaments, frames; green/red/orange = feedback. No yellow/gold text: currency numbers use --money-text next to the
   coin icon. Frames: --frame-line (outer border), --frame-inner (thin inner line of a double frame), --frame-hi (inner
   highlight), --frame-corner (corner ornaments). Element names use .el-<element> (theme-aware, readable on both themes).
   Type scale (px): 11 micro, 11.5 xs, 12.5 sm, 14 md (body), 16 lg, 19 xl, 24 2xl, 36 display.
   ===================================================================================================== */
:root {
  /* ---------------------------------------------------------------- primitives */
  /* light neutrals */
  --paper-0: #ffffff;
  --paper-1: #fffdf8;
  --paper-2: #fbf8f1;
  --paper-3: #f5f1e7;
  --mist-1: #eef3fa;
  --mist-2: #e3ebf7;
  --mist-3: #e1e8f2;
  --mist-4: #d6dfeb;
  --line-1: #e0e6ee;
  --line-2: #c9d3e1;
  --line-3: #8d9db6;
  --navy-9: #0f1b33;
  --navy-8: #1b2a47;
  --navy-7: #2f3e5c;
  --navy-6: #4f5d78;
  --navy-5: #5b6780;
  --navy-title: #183a78;
  /* dark neutrals (navy ink) */
  --ink-0: #07090e;
  --ink-1: #0b0e15;
  --ink-2: #0e121a;
  --ink-3: #121722;
  --ink-4: #161c28;
  --ink-5: #1a2130;
  --ink-6: #20283a;
  --ink-7: #273045;
  --ink-8: #323d56;
  --ink-9: #44516d;
  --ink-10: #586684;
  --parch-0: #fbf4e4;
  --parch-1: #ece4d4;
  --parch-2: #d2d6e2;
  --parch-3: #a3acc0;
  --parch-4: #8a93a8;
  --parch-gold: #f3e3bd;
  /* blue (accent family) */
  --sky-1: #c2dcff;
  --sky-2: #a8d0ff;
  --sky-3: #8dbdff;
  --sky-4: #5a95f0;
  --sky-5: #3a74da;
  --sky-6: #2f6bd0;
  --sky-7: #2a5ec2;
  --sky-8: #2558b4;
  --sky-9: #1f56b8;
  --sky-10: #1d4fa8;
  --sky-11: #163a78;
  /* frost (cool pale blues: dark-theme titles and highlights) */
  --frost-0: #f3f6fc;
  --frost-1: #e1e9f7;
  --frost-2: #c3d4f1;
  --frost-3: #9dbbec;
  /* steel (frames and ornaments) */
  --steel-1: #d3ddec;
  --steel-2: #b9c8de;
  --steel-3: #8ea3c4;
  --steel-4: #34589f;
  --steel-5: #22468c;
  --steel-6: #15306a;
  /* gold (coin art and a few meters only; never text) */
  --gold-1: #ffe9a8;
  --gold-2: #f5d27a;
  --gold-3: #f2c84a;
  --gold-4: #d9a52c;
  --gold-5: #9a7420;
  --gold-6: #875800;
  --gold-7: #6f4800;
  --gold-ink: #2a1c00;
  /* feedback + misc hues */
  --green-1: #9ef0b8;
  --green-2: #74d896;
  --green-3: #3f9a60;
  --green-4: #1d3f2c;
  --green-7: #1b7340;
  --green-8: #145a32;
  --red-1: #ffd6d6;
  --red-2: #ff8585;
  --red-3: #b8454c;
  --red-4: #4e1f2a;
  --red-5: #36161e;
  --red-7: #bb2b37;
  --red-8: #9a1f2a;
  --amber-1: #ffdca0;
  --amber-2: #ffbf5e;
  --amber-3: #b8842c;
  --amber-4: #3e2c12;
  --amber-7: #935400;
  --amber-8: #7a4500;
  --blue-1: #a8d4ff;
  --blue-2: #7cc0ff;
  --blue-3: #3a8fe0;
  --blue-4: #2468b8;
  --blue-5: #17437a;
  --purple-1: #d9c4ff;
  --purple-2: #c7a8ff;
  --purple-3: #9a64e8;
  --purple-4: #6a3ec4;
  --purple-5: #43277f;
  --purple-7: #7537c2;
  --purple-8: #6a2fb8;
  --rose-3: #e2508f;
  --rose-4: #b03a78;
  --rose-5: #6a1f48;
  --crimson-3: #e8485a;
  --crimson-4: #b02838;
  --crimson-5: #5e1520;
  --ember-3: #ff8a3a;
  --ember-4: #b8402a;
  --ember-5: #6a2216;
  --ember-7: #a3420c;
  --leaf-3: #6ad08a;
  --leaf-4: #2f7a50;
  --leaf-5: #194a30;
  --honey-3: #e8c24a;
  --honey-4: #8c6a14;
  --honey-5: #4a380a;
  --amberbar-4: #946016;
  --orange-2: #ffa772;
  --orange-line: #b0602e;
  --teal-2: #8fe6c0;
  --teal-line: #4a9a78;
  --tan-2: #ead08e;
  --tan-line: #a08a50;
  --white: #ffffff;
  --black: #000000;

  /* ---------------------------------------------------------------- theme-independent */
  --hp: linear-gradient(90deg, var(--crimson-5), var(--crimson-4) 55%, var(--crimson-3));
  --sp: linear-gradient(90deg, var(--blue-5), var(--blue-4) 55%, var(--blue-3));
  --exp: linear-gradient(90deg, var(--blue-5), var(--blue-4));
  --jexp: linear-gradient(90deg, var(--purple-5), var(--purple-4));
  --boss: linear-gradient(90deg, var(--ember-5), var(--ember-4) 60%, var(--ember-3));
  --weight: linear-gradient(90deg, var(--leaf-5), var(--leaf-4));
  --meter-warn: linear-gradient(90deg, var(--ember-5), #b4582a);
  --intim: linear-gradient(90deg, var(--rose-5), var(--rose-4));
  --hunger: linear-gradient(90deg, var(--honey-5), var(--honey-4));
  --enc: linear-gradient(90deg, var(--sky-8), var(--sky-3));
  --meter-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 55%);
  --on-meter: var(--white);
  --text-outline: rgba(0, 0, 0, 0.85);
  --stage-bg: var(--black);
  --mask-solid: var(--black);
  /* canvas portraits paint their own dark plate (src/render/portrait.js); frames match it in both themes */
  --portrait-bg: radial-gradient(circle at 50% 35%, #2a2a44, #16162a 75%);
  --c-exp: var(--blue-3);
  --c-jexp: var(--purple-3);
  --c-zeny: #b8913f;
  --c-kill: var(--crimson-3);
  --c-time: var(--green-3);
  --c-str: var(--crimson-3);
  --c-agi: var(--leaf-4);
  --c-vit: var(--rose-3);
  --c-int: var(--purple-3);
  --c-dex: var(--sky-5);
  --c-luk: var(--gold-4);

  /* ---------------------------------------------------------------- LIGHT theme (default) */
  color-scheme: light;
  --bg: var(--mist-3);
  --bg-glow-1: rgba(47, 107, 208, 0.18);
  --bg-glow-2: rgba(120, 160, 225, 0.14);
  --bg-glow-3: rgba(47, 107, 208, 0.10);
  --surface-1: var(--paper-2);
  --surface-1-top: var(--paper-1);
  --surface-2: var(--paper-0);
  --surface-3: var(--mist-1);
  --surface-4: var(--mist-2);
  --surface-sunken: var(--paper-3);
  --surface-deep: var(--mist-4);
  --surface-tooltip: rgba(255, 255, 255, 0.98);
  --surface-glass: rgba(255, 255, 255, 0.96);
  --scrim: rgba(15, 27, 51, 0.42);
  --hairline: rgba(20, 40, 80, 0.06);
  --hairline-2: rgba(20, 40, 80, 0.10);
  --gloss: rgba(255, 255, 255, 0.9);
  --gloss-soft: rgba(47, 107, 208, 0.05);
  --shade: rgba(20, 40, 80, 0.14);
  --shade-strong: rgba(20, 40, 80, 0.26);
  --border-soft: var(--line-1);
  --border: var(--line-2);
  --border-strong: var(--line-3);
  --border-accent: #9dbbe8;
  --text: var(--navy-8);
  --text-strong: var(--navy-9);
  --text-soft: var(--navy-7);
  --text-muted: var(--navy-6);
  --text-faint: var(--navy-5);
  --text-title: var(--navy-title);
  --text-on-primary: var(--white);
  --text-on-gold: var(--white);
  --money-text: var(--navy-9);
  --accent: var(--steel-4);
  --accent-text: var(--steel-5);
  --accent-strong: var(--steel-6);
  --accent-line: rgba(52, 88, 159, 0.45);
  --accent-soft: rgba(52, 88, 159, 0.11);
  --accent-softer: rgba(52, 88, 159, 0.055);
  --frame-line: #c3cfe0;
  --frame-inner: rgba(52, 88, 159, 0.2);
  --frame-hi: rgba(255, 255, 255, 0.9);
  --frame-corner-filter: hue-rotate(-72deg) saturate(1.5) brightness(1.6);
  --stage-frame: rgba(255, 255, 255, 0.2);
  --primary: var(--sky-6);
  --primary-text: var(--sky-10);
  --primary-line: var(--sky-8);
  --primary-line-hover: var(--sky-11);
  --primary-soft: rgba(47, 107, 208, 0.10);
  --primary-glow: rgba(47, 107, 208, 0.26);
  --sel: var(--sky-6);
  --sel-text: var(--sky-9);
  --sel-line: #4f86de;
  --sel-soft: rgba(47, 107, 208, 0.12);
  --sel-softer: rgba(47, 107, 208, 0.06);
  --focus: #1f5fd0;
  --good: var(--green-7);
  --good-strong: var(--green-8);
  --good-line: #7cbf96;
  --good-soft: rgba(27, 115, 64, 0.10);
  --good-text: var(--green-7);
  --bad: var(--red-7);
  --bad-strong: var(--red-8);
  --bad-line: #e09aa0;
  --bad-soft: rgba(187, 43, 55, 0.08);
  --bad-fill: #fdeceb;
  --bad-text: var(--red-7);
  --warn: #b04a12;
  --warn-strong: #8a360a;
  --warn-line: #e6a882;
  --warn-soft: rgba(220, 110, 40, 0.09);
  --info: #1f5fbf;
  --info-line: #7aa6e6;
  --chat-name: #1d56b5;
  --link-hover: var(--sky-11);
  --log-levelup: var(--sky-10);
  --log-rare: var(--purple-8);
  --log-rare-line: #a98ae0;
  --log-loot: #1f6e3c;
  --log-warn: #a3202c;
  --log-boss: var(--ember-7);
  --log-boss-line: #e08a5a;
  --ench-1: #1f5fbf;
  --ench-2: var(--purple-7);
  --reward-exp: var(--sky-10);
  --reward-jexp: var(--purple-8);
  --r-good: #1f5fb8;
  --r-good-line: #7fa7df;
  --r-good-tint: rgba(47, 107, 208, 0.12);
  --r-rare: var(--purple-7);
  --r-rare-line: #b393e3;
  --r-rare-tint: rgba(122, 61, 200, 0.12);
  --r-unique: #0a7891;
  --r-unique-line: #84c6d6;
  --r-unique-tint: rgba(20, 150, 180, 0.13);
  --r-signature: #b0306e;
  --r-signature-line: #e3a0c4;
  --r-signature-tint: rgba(200, 60, 130, 0.12);
  --r-forged: #a8450f;
  --r-forged-line: #e3a07a;
  --r-forged-tint: rgba(220, 110, 40, 0.14);
  --r-card: #8a4a26;
  --r-card-line: #d9ae92;
  --r-card-tint: rgba(200, 120, 70, 0.13);
  --r-egg: #0d7360;
  --r-egg-line: #7cc9b2;
  --r-egg-tint: rgba(30, 160, 130, 0.12);
  --titlebar-bg: linear-gradient(180deg, #3a75d4, #2756ad);
  --titlebar-text: var(--white);
  --titlebar-icon: var(--sky-1);
  --titlebar-line: #1f4a96;
  --title-divider: #8fb0e3;
  --nav-on-bg: linear-gradient(180deg, #3a75d4, #2a5cb6);
  --nav-on-text: var(--white);
  --nav-on-icon: var(--white);
  --nav-on-marker: var(--steel-6);
  --nav-on-line: var(--sky-8);
  --ov-plate: rgba(255, 255, 255, 0.88);
  --ov-text: #13213d;
  --ov-text-soft: #3a4864;
  --ov-accent: var(--sky-10);
  --ov-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  --ov-trough: rgba(255, 255, 255, 0.8);
  --ov-trough-line: rgba(20, 40, 80, 0.22);
  --ov-box: rgba(255, 255, 255, 0.82);
  --brand-1: var(--navy-title);
  --brand-2: var(--sky-6);
  --input-bg: var(--paper-0);
  --dot-off: #a7b2c4;
  --tile-label: var(--navy-9);
  --tile-label-halo: rgba(255, 255, 255, 0.95);
  --veil-0: rgba(240, 245, 252, 0.04);
  --veil-1: rgba(225, 233, 244, 0.58);
  --login-art: url(../assets/ui/bg_town.jpg);
  --create-art: url(../assets/ui/bg_town.jpg);
  --glass-top: rgba(255, 253, 248, 0.95);
  --glass-bottom: rgba(251, 248, 241, 0.97);
  --modal-bg: linear-gradient(180deg, var(--paper-0), var(--paper-2));
  --pop-top: var(--paper-0);
  --avatar-bg: radial-gradient(circle at 35% 30%, #4f86de, var(--sky-8));
  --boss-line: #d0603f;
  --boss-glow: rgba(232, 96, 60, 0.18);
  --toast-glyph: var(--white);
  --corner-opacity: 0.9;
  --btn-bg: linear-gradient(180deg, var(--paper-0), #f1f4f9);
  --btn-bg-hover: linear-gradient(180deg, #f6f9fd, #e6edf7);
  --btn-line: #c3cedd;
  --btn-primary-bg: linear-gradient(180deg, #3473d8, #2559bb);
  --btn-primary-bg-hover: linear-gradient(180deg, #3d7ee6, #2a62c6);
  --btn-danger-bg: linear-gradient(180deg, #fff3f2, #fde2e0);
  --btn-danger-bg-hover: linear-gradient(180deg, #ffe9e7, #fbd3d0);
  --btn-good-bg: linear-gradient(180deg, #f1faf4, #dff1e6);
  --btn-warn-bg: linear-gradient(180deg, #fff6f0, #fde5d6);
  --tile-bg: linear-gradient(180deg, var(--paper-0), #f0f3f8);
  --panel-bg: linear-gradient(180deg, var(--surface-1-top), var(--surface-1) 120px);
  --scroll-thumb: #b9c4d4;
  --scroll-thumb-hover: #93a3bb;
  --shadow-1: 0 1px 2px rgba(20, 40, 80, 0.06);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 4px 14px rgba(20, 40, 80, 0.10);
  --shadow-3: 0 18px 50px rgba(20, 40, 80, 0.24);

  /* ---------------------------------------------------------------- type */
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --title: 'Cinzel', Georgia, 'Times New Roman', serif;
  --fs-micro: 11px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 24px;
  --fs-display: 36px;
  --lh: 1.45;
  --lh-tight: 1.2;

  /* ---------------------------------------------------------------- space, shape, motion, layers */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --dur-fast: 120ms;
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --z-sticky: 20;
  --z-pop: 40;
  --z-modal: 70;
  --z-toast: 80;
  --z-tooltip: 90;
  --z-skip: 100;
}

/* ---------------------------------------------------------------- DARK theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink-1);
  --bg-glow-1: rgba(58, 116, 218, 0.20);
  --bg-glow-2: rgba(110, 140, 220, 0.06);
  --bg-glow-3: rgba(58, 116, 218, 0.08);
  --surface-1: var(--ink-3);
  --surface-1-top: var(--ink-4);
  --surface-2: var(--ink-5);
  --surface-3: var(--ink-6);
  --surface-4: var(--ink-7);
  --surface-sunken: var(--ink-2);
  --surface-deep: var(--ink-0);
  --surface-tooltip: rgba(13, 17, 26, 0.97);
  --surface-glass: rgba(26, 33, 48, 0.94);
  --scrim: rgba(4, 6, 10, 0.68);
  --hairline: rgba(255, 255, 255, 0.05);
  --hairline-2: rgba(255, 255, 255, 0.09);
  --gloss: rgba(255, 255, 255, 0.18);
  --gloss-soft: rgba(255, 255, 255, 0.06);
  --shade: rgba(0, 0, 0, 0.35);
  --shade-strong: rgba(0, 0, 0, 0.6);
  --border-soft: var(--ink-7);
  --border: var(--ink-8);
  --border-strong: var(--ink-10);
  --border-accent: #3d5a8f;
  --text: var(--parch-1);
  --text-strong: var(--parch-0);
  --text-soft: var(--parch-2);
  --text-muted: var(--parch-3);
  --text-faint: var(--parch-4);
  --text-title: var(--frost-1);
  --text-on-gold: var(--ink-1);
  --money-text: var(--parch-0);
  --accent: var(--frost-3);
  --accent-text: var(--frost-2);
  --accent-strong: var(--frost-0);
  --accent-line: rgba(157, 187, 236, 0.42);
  --accent-soft: rgba(157, 187, 236, 0.12);
  --accent-softer: rgba(157, 187, 236, 0.055);
  --frame-line: #2f3a52;
  --frame-inner: rgba(157, 187, 236, 0.11);
  --frame-hi: rgba(255, 255, 255, 0.045);
  --frame-corner-filter: hue-rotate(-75deg) saturate(1.8) brightness(1.25);
  --stage-frame: rgba(255, 255, 255, 0.16);
  --primary: var(--sky-5);
  --primary-text: var(--sky-3);
  --primary-line: var(--sky-4);
  --primary-line-hover: var(--sky-2);
  --primary-soft: rgba(58, 116, 218, 0.18);
  --primary-glow: rgba(58, 116, 218, 0.38);
  --sel: #6aa6ff;
  --sel-text: var(--sky-3);
  --sel-line: var(--sky-4);
  --sel-soft: rgba(90, 149, 240, 0.16);
  --sel-softer: rgba(90, 149, 240, 0.08);
  --focus: var(--sky-2);
  --good: var(--green-2);
  --good-strong: var(--green-1);
  --good-line: var(--green-3);
  --good-soft: rgba(116, 216, 150, 0.12);
  --good-text: var(--green-1);
  --bad: var(--red-2);
  --bad-strong: var(--red-1);
  --bad-line: var(--red-3);
  --bad-soft: rgba(255, 133, 133, 0.10);
  --bad-fill: var(--red-5);
  --bad-text: var(--red-1);
  --warn: var(--orange-2);
  --warn-strong: #ffd2b6;
  --warn-line: var(--orange-line);
  --warn-soft: rgba(255, 150, 90, 0.10);
  --info: var(--blue-2);
  --info-line: var(--blue-4);
  --chat-name: var(--blue-1);
  --link-hover: var(--sky-1);
  --log-levelup: var(--sky-2);
  --log-rare: var(--purple-1);
  --log-rare-line: var(--purple-3);
  --log-loot: var(--green-1);
  --log-warn: var(--red-1);
  --log-boss: var(--orange-2);
  --log-boss-line: var(--ember-3);
  --ench-1: var(--blue-2);
  --ench-2: var(--purple-2);
  --reward-exp: var(--blue-1);
  --reward-jexp: var(--purple-1);
  --r-good: var(--blue-1);
  --r-good-line: #3a5f99;
  --r-good-tint: rgba(124, 192, 255, 0.14);
  --r-rare: var(--purple-2);
  --r-rare-line: #6c4bb0;
  --r-rare-tint: rgba(154, 100, 232, 0.20);
  --r-unique: #72dcf2;
  --r-unique-line: #2f7a8c;
  --r-unique-tint: rgba(100, 220, 240, 0.13);
  --r-signature: #ff9cc8;
  --r-signature-line: #8c3a66;
  --r-signature-tint: rgba(255, 120, 190, 0.14);
  --r-forged: var(--orange-2);
  --r-forged-line: var(--orange-line);
  --r-forged-tint: rgba(255, 138, 58, 0.16);
  --r-card: #f0bf9c;
  --r-card-line: #8c5a3e;
  --r-card-tint: rgba(240, 170, 120, 0.13);
  --r-egg: var(--teal-2);
  --r-egg-line: var(--teal-line);
  --r-egg-tint: rgba(143, 230, 192, 0.14);
  --titlebar-bg: linear-gradient(180deg, #22375f, #1a2a49);
  --titlebar-text: var(--frost-0);
  --titlebar-icon: var(--sky-3);
  --titlebar-line: #2c4677;
  --title-divider: rgba(141, 189, 255, 0.5);
  --nav-on-bg: linear-gradient(90deg, rgba(90, 149, 240, 0.26), rgba(90, 149, 240, 0.07) 80%, transparent);
  --nav-on-text: var(--parch-0);
  --nav-on-icon: var(--sky-3);
  --nav-on-marker: var(--sky-3);
  --nav-on-line: #34507f;
  --ov-plate: rgba(9, 12, 18, 0.74);
  --ov-text: var(--parch-0);
  --ov-text-soft: var(--parch-2);
  --ov-accent: var(--sky-2);
  --ov-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  --ov-trough: rgba(9, 12, 18, 0.75);
  --ov-trough-line: rgba(255, 255, 255, 0.15);
  --ov-box: rgba(9, 12, 18, 0.7);
  --brand-1: var(--frost-0);
  --brand-2: var(--frost-3);
  --input-bg: var(--ink-2);
  --dot-off: var(--ink-10);
  --tile-label: var(--parch-0);
  --tile-label-halo: var(--text-outline);
  --veil-0: rgba(11, 14, 21, 0.30);
  --veil-1: rgba(11, 14, 21, 0.88);
  --login-art: url(../assets/ui/bg_login.jpg);
  --create-art: url(../assets/ui/bg_create.jpg);
  --glass-top: rgba(32, 40, 58, 0.90);
  --glass-bottom: rgba(22, 28, 40, 0.94);
  --modal-bg: linear-gradient(180deg, var(--ink-6), var(--ink-4));
  --pop-top: var(--ink-6);
  --avatar-bg: radial-gradient(circle at 35% 30%, var(--sky-5), #1c3a72);
  --boss-line: var(--ember-4);
  --boss-glow: var(--ember-5);
  --toast-glyph: var(--ink-1);
  --corner-opacity: 1;
  --btn-bg: linear-gradient(180deg, var(--ink-7), var(--ink-6));
  --btn-bg-hover: linear-gradient(180deg, var(--ink-8), var(--ink-7));
  --btn-line: var(--ink-9);
  --btn-primary-bg: linear-gradient(180deg, var(--sky-5), var(--sky-7));
  --btn-primary-bg-hover: linear-gradient(180deg, #437fe6, #3069d0);
  --btn-danger-bg: linear-gradient(180deg, var(--red-4), var(--red-5));
  --btn-danger-bg-hover: linear-gradient(180deg, #632634, var(--red-4));
  --btn-good-bg: linear-gradient(180deg, var(--green-4), var(--ink-6));
  --btn-warn-bg: linear-gradient(180deg, #3d2418, var(--ink-6));
  --tile-bg: linear-gradient(180deg, var(--ink-4), var(--ink-2));
  --scroll-thumb: var(--ink-9);
  --scroll-thumb-hover: var(--ink-10);
  --shadow-1: 0 1px 0 var(--hairline) inset;
  --shadow-2: 0 1px 0 var(--hairline-2) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 1px 0 var(--hairline-2) inset, 0 24px 64px rgba(0, 0, 0, 0.6);
}
/* one frame without transitions while the theme flips, so hundreds of elements do not animate */
:root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }

/* ===================================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  color: var(--text); font: var(--fs-md)/var(--lh) var(--font);
  background:
    radial-gradient(1100px 620px at 50% -12%, var(--bg-glow-1), transparent 62%),
    radial-gradient(900px 520px at 100% 105%, var(--bg-glow-3), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, var(--bg-glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::selection { background: var(--primary-glow); color: var(--text-strong); }
button { font: inherit; color: inherit; }
a { color: var(--primary-text); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
img.ico { image-rendering: auto; vertical-align: middle; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
canvas:focus-visible { outline-offset: -2px; }

/* form controls */
input, select, textarea {
  font: inherit; font-size: var(--fs-md); color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 10px; min-height: 32px;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--border-strong); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--sel-line); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
input[type="number"] { width: 84px; font-variant-numeric: tabular-nums; }
input[type="checkbox"] { min-height: 0; }
select { padding: 5px 8px; cursor: pointer; }
textarea { width: 100%; resize: vertical; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: var(--fs-xs); line-height: 1.4; }

/* ===================================================================================== utilities */
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.gold { color: var(--money-text); }
.center { text-align: center; }
.right { text-align: right; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; }
.row.between, .between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.row.gap, .gap { gap: var(--s-2); }
.row.wrap { flex-wrap: wrap; }
.pad { padding: var(--s-2) 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.h3 { font-family: var(--title); font-size: var(--fs-xl); font-weight: 800; line-height: var(--lh-tight); color: var(--text-title); letter-spacing: 0.3px; }
.h4 { font-family: var(--title); font-weight: 800; font-size: 14.5px; letter-spacing: 0.4px; margin: 0 0 var(--s-2); color: var(--text-title); }
.label { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--s-2) 0 var(--s-1); }
.label b { color: var(--text-soft); }
.eyebrow { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sel-text); margin-bottom: 2px; }
.section-title {
  display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 2px var(--s-2);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted);
}
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.section-title.row.between::after { display: none; }
.section-title:first-child { margin-top: 2px; }
.hint {
  margin: 0 0 var(--s-3); padding: 7px 10px 7px 12px; font-size: var(--fs-sm); color: var(--text-soft);
  background: var(--sel-softer); border: 1px solid var(--border-soft); border-left: 3px solid var(--sel-line); border-radius: var(--radius-sm);
}
.footnote { margin-top: var(--s-4); }
.skip-link {
  position: absolute; left: var(--s-3); top: var(--s-2); z-index: var(--z-skip); transform: translateY(-160%);
  padding: 8px 14px; border-radius: var(--radius-sm); background: var(--accent); color: var(--text-on-gold); font-weight: 800; text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: none; outline-color: var(--text-strong); }

/* ===================================================================================== layout */
#app {
  position: relative;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) 430px;
  grid-template-rows: 60px minmax(0, 1fr);
  grid-template-areas: "top top top" "nav center panel";
  height: 100vh; height: 100dvh;
  gap: var(--s-3);
  padding: var(--s-3);
}

/* shared panel chrome: light double frame (border + thin inner line 3px in, drawn by inset shadows under the content) */
#topbar, #nav, #panel, #chat, #log, .hs {
  background: var(--panel-bg); border: 1px solid var(--frame-line); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--frame-hi), inset 0 0 0 3px var(--surface-1), inset 0 0 0 4px var(--frame-inner), var(--shadow-2);
}
.hs { box-shadow: inset 0 0 0 1px var(--frame-hi), var(--shadow-2); }

/* ===================================================================================== top bar */
#topbar { grid-area: top; display: flex; align-items: center; gap: var(--s-5); padding: 0 var(--s-4); position: relative; overflow: hidden; }
#topbar::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); opacity: 0.6; pointer-events: none; }
.brand { display: flex; align-items: baseline; gap: 7px; font-family: var(--title); font-weight: 800; font-size: 21px; letter-spacing: 0.6px; color: var(--text-title); white-space: nowrap; }
.brand > span:nth-child(2) { background: linear-gradient(180deg, var(--brand-1), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .logo { color: var(--accent); font-size: 20px; text-shadow: 0 0 12px var(--accent-line); }
.brand small { font-family: var(--font); font-size: var(--fs-micro); font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2.4px; }
.brand.big { font-size: var(--fs-display); justify-content: center; }
.brand.big .logo { font-size: 30px; }
.tb-char { min-width: 120px; padding-left: var(--s-4); border-left: 1px solid var(--border-soft); line-height: 1.25; }
#tb-name { font-weight: 800; font-size: 15px; color: var(--text-strong); }
#tb-job { color: var(--sel-text); font-weight: 700; }
.tb-bars { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); min-width: 0; }
.tb-bar { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 800; color: var(--text-soft); min-width: 0; }
.tb-bar > span { min-width: 54px; white-space: nowrap; }
.tb-bar .bar { flex: 1; height: 15px; }
.tb-zeny {
  display: flex; align-items: center; gap: var(--s-2); padding: 5px 14px 5px 6px; font-size: var(--fs-lg); font-variant-numeric: tabular-nums;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--money-text);
  box-shadow: 0 1px 2px var(--shade) inset;
}
.tb-zeny b { font-weight: 800; }
.zeny-ico {
  display: inline-block; flex: none; width: 24px; height: 24px; overflow: hidden; color: transparent; font-size: 0; font-style: normal;
  background: url(../assets/ui/coin.png) center / contain no-repeat; filter: saturate(0.8);
}
.zeny-ico.sm { width: 16px; height: 16px; }
.zeny-ico.big { width: 32px; height: 32px; }

/* ===================================================================================== meters */
.bar { position: relative; height: 14px; border-radius: var(--radius-pill); background: var(--surface-deep); border: 1px solid var(--border-soft); overflow: hidden; box-shadow: 0 1px 2px var(--shade) inset; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--meter-gloss), var(--primary); border-radius: inherit; transition: width var(--dur) var(--ease); }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 800; line-height: 1; color: var(--on-meter); text-shadow: 0 0 2px var(--text-outline), 0 1px 2px var(--text-outline); font-variant-numeric: tabular-nums; }
.bar.exp i { background: var(--meter-gloss), var(--exp); }
.bar.jexp i { background: var(--meter-gloss), var(--jexp); }
.bar.boss i { background: var(--meter-gloss), var(--boss); }
.bar.weight i { background: var(--meter-gloss), var(--weight); }
.bar.warn i { background: var(--meter-gloss), var(--meter-warn); }
.bar.intim i { background: var(--meter-gloss), var(--intim); }
.bar.hunger i { background: var(--meter-gloss), var(--hunger); }

/* ===================================================================================== nav */
#nav { grid-area: nav; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; padding: var(--s-2); }
.nav-group { padding: var(--s-3) var(--s-2) var(--s-1); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }
.nav-group:first-child { padding-top: var(--s-1); }
.nav-sep { height: 1px; margin: var(--s-2) var(--s-2); background: var(--border-soft); flex: none; }
.nav-btn {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 var(--s-3) 0 11px; flex: none;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; cursor: pointer; text-align: left;
  font-weight: 700; font-size: 13.5px; color: var(--text-soft);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-btn .pi { width: 20px; height: 20px; opacity: 0.78; transition: opacity var(--dur-fast) var(--ease); }
.nav-btn:hover .pi { opacity: 1; }
.nav-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-btn:hover { background: var(--surface-3); color: var(--text-strong); }
.nav-btn:active { background: var(--surface-4); }
.nav-btn.on, .nav-btn.on:hover { background: var(--nav-on-bg); border-color: var(--nav-on-line); color: var(--nav-on-text); }
.nav-btn.on::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nav-on-marker); box-shadow: 0 0 10px var(--accent-line); }
.nav-btn.on .pi { color: var(--nav-on-icon); opacity: 1; }
.badge {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-gold); font-size: var(--fs-micro); font-weight: 900; font-style: normal;
  line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--surface-1);
}
.badge.on { display: block; }

/* ===================================================================================== centre: battle stage */
#center { grid-area: center; display: flex; flex-direction: column; gap: var(--s-3); min-height: 0; min-width: 0; }
/* Performance (Firefox): the canvas is redrawn every frame, and a rounded clip (border-radius + overflow: hidden) or a
   blurred inset shadow over it gets re-rasterised every frame too - 24 fps instead of 54 in Firefox's software path.
   So the stage does not clip: the canvas keeps square corners and static corner pieces (::before, painted in the
   frame and ring colours) round it off; the vignette is a plain gradient instead of a blurred shadow. --stage-r stays
   <= 10px so each corner piece fits inside the 3px ring drawn around the stage. */
#stage {
  --stage-r: 10px;
  position: relative; width: 100%; aspect-ratio: 960 / 440; max-height: calc(100vh - 290px); align-self: center;
  border-radius: var(--stage-r); border: 1px solid var(--frame-line); background: var(--stage-bg);
  box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 4px var(--frame-line), 0 12px 36px var(--shade-strong);
}
#stage::before {
  --c: transparent calc(var(--stage-r) - 1.5px), var(--frame-line) calc(var(--stage-r) - 1px), var(--frame-line) calc(var(--stage-r) - 0.2px), var(--surface-1) calc(var(--stage-r) + 0.3px);
  content: ''; position: absolute; inset: 0; pointer-events: none; /* no z-index: an extra layer costs fps */
  background:
    radial-gradient(circle at calc(var(--stage-r) - 1px) calc(var(--stage-r) - 1px), var(--c)) 0 0 / var(--stage-r) var(--stage-r) no-repeat,
    radial-gradient(circle at 1px calc(var(--stage-r) - 1px), var(--c)) 100% 0 / var(--stage-r) var(--stage-r) no-repeat,
    radial-gradient(circle at calc(var(--stage-r) - 1px) 1px, var(--c)) 0 100% / var(--stage-r) var(--stage-r) no-repeat,
    radial-gradient(circle at 1px 1px, var(--c)) 100% 100% / var(--stage-r) var(--stage-r) no-repeat;
}
/* picture frame: inner hairline at the edge plus a thin light line 5px inside, soft vignette */
#stage::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 75% 85% at 50% 45%, transparent 70%, rgba(0, 0, 0, 0.16) 100%);
  box-shadow: 0 0 0 1px var(--hairline-2) inset;
  outline: 1px solid var(--stage-frame); outline-offset: -5px;
}
#battle { width: 100%; height: 100%; display: block; }
/* top left: HP / SP bars with the three quick slots beside them (potion and food automation, src/ui/strip.js), buffs
   below. Only the slots and buffs take the pointer; the rest of the overlay lets clicks through to the stage. */
#ov-left { --bars-w: 236px; --slot: 39px; position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; z-index: 1; }
#ov-top { display: flex; align-items: center; gap: 6px; }
.ov-bars { width: var(--bars-w); display: flex; flex-direction: column; gap: 5px; }
#ov-right {
  position: absolute; right: 10px; top: 10px; max-width: 46%; min-width: 180px; text-align: right; pointer-events: none; z-index: 1;
  padding: 6px 10px 7px 26px; border-radius: var(--radius); background: linear-gradient(90deg, transparent, var(--ov-plate) 26%);
  color: var(--ov-text); text-shadow: var(--ov-text-shadow);
}
#ov-map { font-size: var(--fs-md); color: var(--ov-text); }
#ov-map b { font-family: var(--title); font-weight: 800; letter-spacing: 0.3px; }
#ov-map .muted { color: var(--ov-text-soft); font-size: var(--fs-sm); }
#ov-phase { font-size: var(--fs-sm); font-weight: 700; color: var(--ov-accent); margin: 1px 0 5px; }
.ov-bar { position: relative; height: 17px; border-radius: var(--radius-pill); background: var(--ov-trough); border: 1px solid var(--ov-trough-line); overflow: hidden; box-shadow: 0 2px 6px var(--shade); }
.ov-bar i { position: absolute; inset: 0 auto 0 0; transition: width var(--dur-fast) linear; border-radius: inherit; }
.ov-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 800; color: var(--on-meter); text-shadow: 0 0 2px var(--text-outline), 0 1px 2px var(--text-outline); font-variant-numeric: tabular-nums; }
.ov-bar.hp i { background: var(--meter-gloss), var(--hp); }
.ov-bar.sp i { background: var(--meter-gloss), var(--sp); }
.ov-bar.enc { height: 6px; margin-left: auto; width: 150px; box-shadow: none; }
.ov-bar.enc i { background: var(--enc); transition: none; } /* moves every HUD tick anyway */
#ov-buffs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; max-width: var(--bars-w); pointer-events: auto; } /* under the bars only: the canvas boss bar starts right of them */
.buff { position: relative; width: 30px; height: 30px; border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--ov-trough-line); background: var(--ov-box); box-shadow: 0 2px 6px var(--shade); }
.buff img { display: block; margin: 1px; }
.buff span { position: absolute; bottom: -1px; right: 2px; font-size: 9.5px; font-weight: 900; color: var(--on-meter); text-shadow: 0 0 2px var(--text-outline), 0 0 2px var(--text-outline); }
.buff.sphere, .buff.summon { display: grid; place-items: center; font-size: 10px; color: var(--accent); }
.buff.sphere b, .buff.summon b { line-height: 1; }
.buff.sphere span, .buff.summon span { position: static; font-size: 8.5px; color: var(--text-soft); }

/* quick slots: item icon, count in the bag (bottom right), threshold or food time (top left), A = auto pick */
#ov-slots { display: flex; gap: 4px; pointer-events: auto; }
.qslot {
  position: relative; width: calc(var(--slot) + 3px); height: var(--slot); min-height: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--ov-trough-line); background: var(--ov-box); box-shadow: 0 2px 6px var(--shade);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.qslot:hover, .qslot[aria-expanded="true"] { border-color: var(--sel-line); }
.qslot[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--sel-soft), 0 2px 6px var(--shade); }
.qslot img { display: block; width: 26px; height: 26px; pointer-events: none; }
.qslot span {
  position: absolute; font-weight: 900; line-height: 1; color: var(--on-meter); font-variant-numeric: tabular-nums; pointer-events: none;
  text-shadow: 0 0 2px var(--text-outline), 0 0 2px var(--text-outline), 0 1px 2px var(--text-outline);
}
.qs-t { left: 3px; top: 3px; font-size: 9px; }
.qs-n { right: 3px; bottom: 2px; font-size: 10px; }
.qslot .qs-a { left: 2px; bottom: 2px; padding: 1px 2px; border-radius: 3px; font-size: 7.5px; background: var(--primary); text-shadow: none; }
.qslot.empty .qs-n { color: var(--bad-line); }
.qslot.empty img { opacity: 0.5; }
.qslot.off { background: var(--ov-trough); }
.qslot.off img { filter: grayscale(1); opacity: 0.4; }
.qslot.off .qs-a { background: var(--dot-off); }

/* bottom right: the field boss card - portrait, gauge, Challenge, Auto-challenge (src/ui/strip.js). It sits right of
   where the monsters stand (canvas x > ~830), so it never covers a normal pack. */
#ov-boss {
  position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 112px; padding: 7px 7px 6px; pointer-events: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 5px; text-align: center;
  border-radius: var(--radius); border: 1px solid var(--ov-trough-line); background: var(--ov-plate); box-shadow: 0 2px 10px var(--shade);
  color: var(--ov-text);
}
.ovb-ico {
  align-self: center; width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--boss-line);
  background: radial-gradient(circle at 50% 60%, var(--boss-glow), var(--ov-box) 70%);
}
.ovb-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; text-shadow: var(--ov-text-shadow); }
.ovb-name b { font-size: 11.5px; font-weight: 800; overflow-wrap: anywhere; }
.ovb-name span { font-size: 10px; font-weight: 700; color: var(--ov-text-soft); }
#ov-boss .ov-bar { height: 15px; box-shadow: none; }
#ov-boss .ov-bar span { font-size: 10px; }
.ov-bar.boss i { background: var(--meter-gloss), var(--boss); }
.ovb-go { width: 100%; min-height: 26px; padding: 0 4px; font-size: 12px; }
.ovb-go .s { display: none; }
.ovb-auto { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: var(--ov-text-soft); cursor: pointer; text-shadow: var(--ov-text-shadow); }
.ovb-auto:hover { color: var(--ov-text); }
.ovb-auto input { width: 14px; height: 14px; margin: 0; accent-color: var(--sel); cursor: pointer; }
#ov-boss.ready { border-color: var(--boss-line); box-shadow: 0 0 0 1px var(--boss-line), 0 0 16px var(--boss-glow), 0 2px 10px var(--shade); }
#ov-boss.pending .ovb-ico, #ov-boss.fight .ovb-ico { box-shadow: 0 0 0 2px var(--boss-glow), 0 0 10px var(--boss-glow); }
#ov-boss.trial .ovb-ico, #ov-boss.trial .ov-bar { opacity: 0.6; }

/* quick slot popover: anchored under the slot inside the stage (opaque, no blur - see the Firefox note above); phones
   get the same content as a compact modal */
.qs-pop {
  position: absolute; z-index: var(--z-pop); width: 290px; padding: 12px 14px 13px; text-align: left; color: var(--text);
  border-radius: var(--radius-lg); border: 1px solid var(--border-accent); background: var(--modal-bg);
  box-shadow: inset 0 0 0 1px var(--frame-hi), var(--shadow-3);
}
.qs-pop::before {
  content: ''; position: absolute; top: -7px; left: calc(var(--caret, 24px) - 6px); width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--pop-top); border-left: 1px solid var(--border-accent); border-top: 1px solid var(--border-accent);
}
.modal.qs-modal { width: min(360px, 100%); }
.qp { display: flex; flex-direction: column; gap: 10px; }
.qp-head { display: flex; align-items: center; gap: 10px; }
.qp-head .ico { flex: none; }
.qp-ht { flex: 1; min-width: 0; }
.qp-ht .h4 { margin: 0; }
.qp-x { width: 30px; height: 30px; font-size: 20px; line-height: 1; }
.qp-switch {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--text-strong);
  border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--surface-sunken);
}
.qp-switch input {
  appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: var(--dot-off); cursor: pointer; transition: background-color var(--dur-fast) var(--ease);
}
.qp-switch input::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white);
  box-shadow: 0 1px 2px var(--shade); transition: transform var(--dur-fast) var(--ease);
}
.qp-switch input:checked { background: var(--sel); }
.qp-switch input:checked::after { transform: translateX(14px); }
.qp-sec { margin: 0; padding: 0; border: 0; min-width: 0; transition: opacity var(--dur-fast) var(--ease); }
.qp.off .qp-sec { opacity: 0.6; }
.qp-label { padding: 0; margin-bottom: 6px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); }
.qp-thr { display: flex; align-items: center; gap: 10px; }
.qp-thr input[type="range"] { flex: 1; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--sel); }
.qp-num { display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--text-soft); }
.qp-num input { width: 60px; padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.qp-items { display: flex; flex-direction: column; gap: 3px; max-height: 200px; overflow-y: auto; }
.qp-item { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; font-size: 13.5px; }
.qp-item:hover { background: var(--sel-softer); }
.qp-item:has(input:checked) { border-color: var(--sel-line); background: var(--sel-soft); }
.qp-item input { flex: none; width: 15px; height: 15px; min-height: 0; margin: 0; padding: 0; accent-color: var(--sel); cursor: pointer; }
.qp-item .ico, .qp-auto { flex: none; width: 24px; height: 24px; }
.qp-auto { display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--primary); color: var(--text-on-primary); font-size: 12px; font-weight: 900; }
.qp-iname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-item b { font-variant-numeric: tabular-nums; color: var(--text-strong); }
.qp-item.none b { color: var(--bad); }
.qp-hint { line-height: 1.35; }

/* ===================================================================================== hunt stats */
#huntstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.hs { --hs-accent: var(--c-exp); padding: 7px 12px 8px 14px; display: flex; flex-direction: column; min-width: 0; position: relative; overflow: hidden; }
.hs::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--hs-accent); }
.hs:nth-child(2) { --hs-accent: var(--c-jexp); }
.hs:nth-child(3) { --hs-accent: var(--c-zeny); }
.hs:nth-child(4) { --hs-accent: var(--c-kill); }
.hs:nth-child(5) { --hs-accent: var(--c-time); }
.hs span { display: flex; align-items: center; gap: 5px; font-size: var(--fs-micro); color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs span .pi { width: 13px; height: 13px; color: var(--hs-accent); }
.hs b { font-size: 17px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs b.pending { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); padding-top: 3px; }

/* ===================================================================================== chat + log */
/* chat gets 60 %, the battle log 40 % (owner) */
#social { flex: 1; min-height: 150px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-auto-rows: minmax(0, 1fr); gap: var(--s-3); }
#chat, #log { display: flex; flex-direction: column; min-height: 0; padding: var(--s-2) var(--s-3) var(--s-3); overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.chat-tabs, .log-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.log-tabs { margin-bottom: var(--s-2); }
#chat-online { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border-soft); white-space: nowrap; }
#chat-list, #log-list { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; font-size: var(--fs-sm); line-height: 1.5; padding-right: 4px; }
.chat-line { word-break: break-word; padding: 2px 6px; border-radius: var(--radius-xs); }
.chat-line:hover { background: var(--gloss-soft); }
.chat-line .t, .log-line .ts { color: var(--text-faint); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; margin-right: 4px; }
.chat-line b { color: var(--chat-name); font-weight: 800; }
.chat-line .sep { color: var(--text-muted); }
.chat-line.me b { color: var(--accent-text); }
.chat-line.sys { color: var(--accent-text); background: var(--accent-softer); border-left: 2px solid var(--accent-line); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; margin: 2px 0; }
.chat-line.sys .sys-mark { color: var(--accent); }
.chat-empty { margin: auto; padding: var(--s-5) var(--s-3); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
#chat-list:has(.chat-empty) { display: flex; }
#chat-form { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
#chat-input { flex: 1; min-width: 0; min-height: 36px; }
#chat-form .btn { min-height: 36px; }
.log-line { padding: 2px 0 2px 8px; border-left: 2px solid transparent; border-bottom: 1px solid var(--hairline); }
.k-levelup { color: var(--log-levelup); border-left-color: var(--accent-line); }
.k-rare { color: var(--log-rare); font-weight: 700; border-left-color: var(--log-rare-line); }
.k-loot { color: var(--log-loot); }
.k-warn { color: var(--log-warn); border-left-color: var(--bad-line); }
.k-boss { color: var(--log-boss); font-weight: 700; border-left-color: var(--log-boss-line); }
.k-system { color: var(--text-soft); }
.k-info { color: var(--text-soft); }
.k-kill { color: var(--text-muted); }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-off); margin-right: 6px; vertical-align: middle; }
.dot.on { background: var(--good); box-shadow: 0 0 6px var(--good); }
.dot.warn { background: var(--warn); }

/* ===================================================================================== side panel */
#panel { grid-area: panel; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
#panel-head { position: relative; padding: 12px var(--s-4) 11px; background: var(--titlebar-bg); border-bottom: 1px solid var(--titlebar-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
#panel-head::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: min(86%, 360px); height: 12px; transform: translateX(-50%); pointer-events: none;
  background: var(--title-divider); -webkit-mask: url(../assets/ui/divider.png) center / 100% 100% no-repeat; mask: url(../assets/ui/divider.png) center / 100% 100% no-repeat;
}
#panel-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--title); font-size: 18px; font-weight: 800; letter-spacing: 0.6px; color: var(--titlebar-text); }
#panel-head h2 .pi { width: 22px; height: 22px; color: var(--titlebar-icon); }
/* scrollbar-gutter: long panels (Skills, Character) get a scrollbar and short ones (Inventory) don't; without a reserved
   gutter the content width changed on every panel switch and the item grids visibly jumped. */
#panel-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--s-3) var(--s-3) var(--s-5); flex: 1; scroll-padding: var(--s-3); }
#panel-body:focus-visible { outline-offset: -3px; }

/* ===================================================================================== cards */
.card {
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--s-3) 14px; margin-bottom: var(--s-3);
  box-shadow: inset 0 1px 0 var(--frame-hi), var(--shadow-1);
}
.card.hl { border-color: var(--border-accent); background: linear-gradient(180deg, var(--primary-soft), var(--surface-2) 70%); }
.sel-card { border-color: var(--sel-line); background: linear-gradient(180deg, var(--sel-softer), var(--surface-2) 80%); }
.warn-card { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn-strong); }
.offline-card { padding: var(--s-1); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); padding-bottom: 7px; border-bottom: 1px solid var(--hairline-2); }
.card-head .h4 { margin: 0; }
.card-sub { margin: -4px 0 var(--s-2); }
.card-foot { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--hairline-2); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.card.row { align-items: center; }
.summary-card { padding: 10px 14px; }
.danger-zone { background: transparent; border-style: dashed; border-color: var(--border); }
.toolbar { margin-bottom: var(--s-3); }
.points {
  display: inline-flex; align-items: baseline; gap: var(--s-2); padding: 3px 12px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border); white-space: nowrap;
}
.points span { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.points b { font-size: var(--fs-lg); font-weight: 900; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.points b small { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 700; }
.points.has { border-color: var(--accent-line); background: var(--accent-softer); }
.points.has b { color: var(--accent-strong); }
.stat-box { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--border-soft); min-width: 0; }
.stat-box span { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); }
.stat-box b { font-size: 17px; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.gold-box { border-color: var(--accent-line); }
.bad-box { border-color: var(--bad-line); }

/* ===================================================================================== buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 0 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--text);
  cursor: pointer; font-weight: 800; font-size: 13px; line-height: 1.1; white-space: nowrap; user-select: none; touch-action: manipulation;
  box-shadow: 0 1px 0 var(--gloss-soft) inset, 0 1px 2px var(--shade);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--btn-bg-hover); color: var(--text-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 2px var(--shade) inset; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn.primary { background: var(--btn-primary-bg); border-color: var(--primary-line); color: var(--text-on-primary); text-shadow: 0 1px 1px var(--shade); box-shadow: 0 1px 0 var(--gloss) inset, 0 2px 10px var(--primary-glow); }
.btn.primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); border-color: var(--primary-line-hover); color: var(--text-on-primary); }
.btn.primary:disabled { box-shadow: none; }
.btn.danger { border-color: var(--bad-line); background: var(--btn-danger-bg); color: var(--bad-strong); }
.btn.danger:hover:not(:disabled) { background: var(--btn-danger-bg-hover); border-color: var(--bad); color: var(--bad-strong); }
.btn.good { border-color: var(--good-line); color: var(--good-strong); background: var(--btn-good-bg); }
.btn.good:hover:not(:disabled) { border-color: var(--good); color: var(--good-strong); }
.btn.warn { border-color: var(--warn-line); color: var(--warn-strong); background: var(--btn-warn-bg); }
.btn.sm { min-height: 27px; padding: 0 9px; font-size: var(--fs-sm); border-radius: var(--radius-xs); }
.btn.icon { min-width: 27px; padding: 0 6px; }
.btn.big { min-height: 44px; padding: 0 26px; font-size: var(--fs-lg); border-radius: var(--radius); }

/* ===================================================================================== tabs, chips, pills */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 var(--s-4); border-bottom: 1px solid var(--border-soft); }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px; border: 0; background: transparent;
  cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--text-muted); white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background-color var(--dur) var(--ease); }
.tab:hover { color: var(--text-strong); background: var(--gloss-soft); }
.tab.on { color: var(--text-strong); }
.tab.on::after { background: var(--sel); box-shadow: 0 0 6px var(--sel-soft); }
.tab.on::before { content: ''; position: absolute; left: 50%; bottom: -7px; width: 13px; height: 13px; transform: translateX(-50%); z-index: 1; pointer-events: none; background: url(../assets/ui/tab_gem.png) center / contain no-repeat; filter: hue-rotate(172deg) saturate(1.5); }
.tab:focus-visible { outline-offset: -2px; }
.tab-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-gold); font-size: var(--fs-micro); font-weight: 900; line-height: 18px; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.chip {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-sunken); cursor: pointer; font-size: var(--fs-sm); font-weight: 800; color: var(--text-muted); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--text-strong); border-color: var(--border-strong); }
.chip.on { color: var(--sel-text); border-color: var(--sel-line); background: var(--sel-soft); }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 800;
  line-height: 1.6; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; vertical-align: middle;
}
.pill .dot { width: 7px; height: 7px; margin-right: 0; }
.lock-ico { display: inline-block; flex: none; width: 10px; height: 13px; background: url(../assets/ui/lock.png) center / contain no-repeat; }
.pill.good { color: var(--good); border-color: var(--good-line); background: var(--good-soft); }
.pill.bad { color: var(--bad); border-color: var(--bad-line); background: var(--bad-soft); }
.pill.gold { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }

/* checkboxes & settings rows */
.chk { display: flex; align-items: center; gap: 10px; margin: 6px 0; cursor: pointer; font-size: 13.5px; color: var(--text-soft); line-height: 1.35; }
.chk:hover { color: var(--text-strong); }
.chk input { width: 17px; height: 17px; flex: none; margin: 0; accent-color: var(--sel); cursor: pointer; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 7px 0; font-size: 13.5px; color: var(--text-soft); }
.setting select { max-width: 200px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field input { width: 100%; }
.field-label { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); margin-top: var(--s-2); }
.field .field-label { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); margin: var(--s-3) 0; }

/* empty / loading states */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 16px; margin: var(--s-1) 0 var(--s-3); text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface-sunken);
}
.empty-state .empty-ico { width: 36px; height: 36px; color: var(--text-muted); opacity: 0.8; margin-bottom: 4px; }
.empty-text { font-weight: 800; color: var(--text-soft); }
.empty-hint { font-size: var(--fs-sm); color: var(--text-muted); max-width: 34ch; }
.offline-card .empty-state { border: 0; margin: 0; background: transparent; }
.empty-mini { padding: 8px 12px; margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted); border: 1px dashed var(--border-soft); border-radius: var(--radius-sm); }
.skeleton-list { display: flex; flex-direction: column; gap: 6px; }
.skeleton-list::before { content: 'Loading...'; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 2px; }
.skeleton-row { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--border-soft); }
.skeleton-row i { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-3); }
.skeleton-row b { flex: 0 1 55%; height: 10px; border-radius: var(--radius-pill); background: var(--surface-3); }

/* NPC greeting */
.npc-line {
  display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); padding: 10px 12px; border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--primary-soft), var(--surface-2) 60%); border: 1px solid var(--border-soft);
}
/* card-like rows share the cards' inner top highlight (visible in dark mode, a no-op on white) */
.npc-line, .map-card, .recipe, .ah-row, .player { box-shadow: inset 0 1px 0 var(--frame-hi); }
.npc-portrait { width: 58px; height: 58px; border-radius: var(--radius); border: 1px solid var(--accent-line); flex: none; background: var(--surface-sunken); box-shadow: 0 0 0 3px var(--accent-softer); }
.npc-name { font-family: var(--title); font-weight: 800; font-size: 14.5px; color: var(--accent-text); letter-spacing: 0.3px; }
.npc-quote { font-size: var(--fs-sm); color: var(--text-soft); font-style: italic; line-height: 1.45; }
.npc-quote .pill { font-style: normal; margin-left: 4px; }

/* tables */
table { width: 100%; border-collapse: collapse; }
table.stats th, table.stats td { padding: 5px 4px; border-bottom: 1px solid var(--hairline); text-align: left; font-weight: 400; }
table.stats thead th { padding-top: 0; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); border-bottom-color: var(--border-soft); }
table.stats tbody th { line-height: 1.15; }
.stat-name { display: flex; align-items: center; gap: 8px; }
.stat-name .pi { width: 18px; height: 18px; }
.stat-str .pi { color: var(--c-str); } .stat-agi .pi { color: var(--c-agi); } .stat-vit .pi { color: var(--c-vit); }
.stat-int .pi { color: var(--c-int); } .stat-dex .pi { color: var(--c-dex); } .stat-luk .pi { color: var(--c-luk); }
table.stats tbody th b { font-weight: 900; letter-spacing: 0.5px; color: var(--text-strong); }
table.stats .stat-long { display: block; font-size: var(--fs-micro); color: var(--text-muted); }
table.stats .num { text-align: right; width: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
table.stats thead .num { font-weight: 800; }
table.stats td.cost { color: var(--text-muted); font-weight: 700; }
table.stats td.raise { width: 1%; white-space: nowrap; padding-left: var(--s-2); }
table.stats .btn { margin-left: 4px; }
table.stats tbody tr { transition: background-color var(--dur-fast) var(--ease); }
table.stats tbody tr:hover { background: var(--gloss-soft); }
table.stats tbody tr.can td.cost { color: var(--accent-text); }
table.stats tbody tr:last-child th, table.stats tbody tr:last-child td { border-bottom: 0; }
table.derived td { padding: 4px 4px; border-bottom: 1px solid var(--hairline); font-size: 13px; }
table.derived tr:nth-child(even) td { background: var(--gloss-soft); }
table.derived td:first-child { color: var(--text-muted); border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
table.derived td:last-child { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
table.derived tr:last-child td { border-bottom: 0; }

/* details */
details.card summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-2); margin: 0; border-radius: var(--radius-xs); }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform var(--dur) var(--ease); }
details.card[open] summary::before { transform: rotate(45deg); }
details.card[open] summary { margin-bottom: var(--s-2); }

/* ===================================================================================== fields */
.field-now .h3 { font-size: 21px; }
.field-boss-note { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border-soft); }
.field-boss-note b { color: var(--text-strong); }
.map-card {
  position: relative; padding: 11px 13px; margin-bottom: var(--s-2); border-radius: var(--radius-lg); border: 1px solid var(--border-soft); background: var(--surface-2);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.map-card:hover { border-color: var(--border-accent); background: var(--surface-3); }
.map-card .go { font-size: var(--fs-sm); font-weight: 800; color: var(--primary-text); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.map-card:hover .go, .map-card:focus-visible .go { opacity: 1; }
.map-card.here { border-color: var(--sel-line); background: linear-gradient(180deg, var(--sel-softer), var(--surface-2) 70%); cursor: default; }
.map-card.locked { opacity: 0.55; cursor: default; }
.map-card.locked:hover { border-color: var(--border-soft); background: var(--surface-2); }
.map-name { font-size: var(--fs-md); color: var(--text-strong); }
.map-desc { margin-top: 1px; }
.lock-pill .lock-ico { margin-right: 1px; }
.mon-row { display: flex; gap: 6px; margin-top: var(--s-2); flex-wrap: wrap; }
.mon-chip { display: flex; flex-direction: column; align-items: center; width: 54px; padding: 3px 0 2px; background: var(--surface-sunken); border-radius: var(--radius-sm); border: 1px solid var(--border-soft); }
.mon-chip img { width: 40px; height: 40px; object-fit: contain; }
.mon-chip span { font-size: var(--fs-micro); color: var(--text-muted); font-weight: 800; font-variant-numeric: tabular-nums; }
img.unseen { filter: brightness(0) opacity(0.5); }

/* ===================================================================================== hero */
.hero-card { align-items: stretch; }
.hero-job { color: var(--sel-text); font-weight: 700; margin-top: 2px; }
.portrait-wrap { position: relative; flex: none; }
.portrait { display: block; width: 120px; height: 140px; border-radius: var(--radius-lg); border: 1px solid var(--accent-line); background: var(--portrait-bg); box-shadow: 0 0 0 3px var(--accent-softer); }
.look-btn { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); background: var(--surface-glass); }
.look-btn:active:not(:disabled) { transform: translateX(-50%) translateY(1px); }
.stats-card.hl { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-softer), var(--surface-2) 60%); }
.equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.eq-slot {
  display: flex; align-items: center; gap: var(--s-2); padding: 6px 8px; border-radius: var(--radius); min-width: 0;
  background: var(--tile-bg); border: 1px solid var(--border-soft); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.eq-slot:hover { border-color: var(--border-strong); }
.eq-slot.empty { cursor: default; background: var(--surface-sunken); border-style: dashed; }
.eq-slot.empty:hover { border-color: var(--border-soft); }
.eq-slot.locked { cursor: not-allowed; opacity: 0.55; background: var(--surface-sunken); border-style: dashed; }
.eq-slot.locked:hover { border-color: var(--border-soft); }
.eq-text { min-width: 0; }
.eq-slotname { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }
.eq-name { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ico-empty { width: 34px; height: 34px; flex: none; border-radius: var(--radius-xs); border: 1px dashed var(--border); }

/* ===================================================================================== item tiles + rarity */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.tile {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius); cursor: pointer;
  background: var(--tile-bg); border: 1px solid var(--border-soft);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tile:hover { background-color: var(--surface-3); border-color: var(--border-strong); }
.tile:active { background-color: var(--surface-4); }
.tile.sel { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel) inset, 0 0 12px var(--sel-soft); }
.tile.autosell { opacity: 0.55; }
.tile .qty { position: absolute; right: 4px; bottom: 1px; font-size: var(--fs-micro); font-weight: 900; color: var(--tile-label); text-shadow: 0 0 3px var(--tile-label-halo), 0 0 2px var(--tile-label-halo); font-variant-numeric: tabular-nums; }
.tile .ref { position: absolute; left: 4px; top: 1px; font-size: var(--fs-micro); font-weight: 900; color: var(--accent-strong); text-shadow: 0 0 3px var(--tile-label-halo), 0 0 2px var(--tile-label-halo); }
.tile .eqd { position: absolute; right: 3px; top: 3px; min-width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; font-weight: 900; color: var(--text-on-gold); background: var(--good); }
.tile .lock { position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; display: grid; place-items: center; color: var(--accent-text); }
.tile .lock .lock-ico { width: 11px; height: 14px; }
/* rarity: name colour everywhere, frame + tint on tiles/slots (no shadows: there can be hundreds) */
.r-good { color: var(--r-good); }
.r-rare { color: var(--r-rare); }
.r-unique { color: var(--r-unique); }
.r-signature { color: var(--r-signature); }
.r-forged { color: var(--r-forged); }
.r-card { color: var(--r-card); }
.r-egg { color: var(--r-egg); }
:is(.tile, .eq-slot, .ah-ico, .sel-ico, .recipe-ico).r-good { border-color: var(--r-good-line); background-image: linear-gradient(180deg, transparent 40%, var(--r-good-tint)), var(--tile-bg); }
:is(.tile, .eq-slot, .ah-ico, .sel-ico, .recipe-ico).r-rare { border-color: var(--r-rare-line); background-image: linear-gradient(180deg, transparent 35%, var(--r-rare-tint)), var(--tile-bg); }
:is(.tile, .eq-slot, .ah-ico, .sel-ico, .recipe-ico).r-unique { border-color: var(--r-unique-line); background-image: linear-gradient(180deg, transparent 30%, var(--r-unique-tint)), var(--tile-bg); }
:is(.tile, .eq-slot, .ah-ico, .sel-ico, .recipe-ico).r-signature { border-color: var(--r-signature-line); background-image: linear-gradient(180deg, transparent 30%, var(--r-signature-tint)), var(--tile-bg); }
:is(.tile, .eq-slot, .ah-ico, .sel-ico, .recipe-ico).r-forged { border-color: var(--r-forged-line); background-image: linear-gradient(180deg, transparent 35%, var(--r-forged-tint)), var(--tile-bg); }
:is(.tile, .eq-slot, .ah-ico, .sel-ico, .recipe-ico).r-card { border-color: var(--r-card-line); background-image: linear-gradient(180deg, transparent 40%, var(--r-card-tint)), var(--tile-bg); }
:is(.tile, .eq-slot, .ah-ico, .sel-ico, .recipe-ico).r-egg { border-color: var(--r-egg-line); background-image: linear-gradient(180deg, transparent 40%, var(--r-egg-tint)), var(--tile-bg); }
.tile.sel[class*="r-"] { border-color: var(--sel); }
.eq-slot.r-good .eq-name { color: var(--r-good); }
.eq-slot.r-rare .eq-name { color: var(--r-rare); }
.eq-slot.r-unique .eq-name { color: var(--r-unique); }
.eq-slot.r-signature .eq-name { color: var(--r-signature); }
.eq-slot.r-forged .eq-name { color: var(--r-forged); }
.eq-slot .eq-slotname { color: var(--text-muted); }
/* element names (tooltips, codex, derived stats): readable on light and dark surfaces, holy is pearl/periwinkle, not yellow */
.el-neutral { color: #6b6558; } .el-water { color: #1670c4; } .el-earth { color: #845224; } .el-fire { color: #c73f12; } .el-wind { color: #2f7d30; }
.el-poison { color: #8a3dbf; } .el-holy { color: #4f63b0; } .el-shadow { color: #5b3d8f; } .el-ghost { color: #6f55c9; } .el-undead { color: #4f6b4c; }
:root[data-theme="dark"] .el-neutral { color: #c9c2b0; } :root[data-theme="dark"] .el-water { color: #6cbcff; } :root[data-theme="dark"] .el-earth { color: #d0a46a; }
:root[data-theme="dark"] .el-fire { color: #ff8a5a; } :root[data-theme="dark"] .el-wind { color: #9be36a; } :root[data-theme="dark"] .el-poison { color: #c58ae8; }
:root[data-theme="dark"] .el-holy { color: #eef0fb; } :root[data-theme="dark"] .el-shadow { color: #a68ad6; } :root[data-theme="dark"] .el-ghost { color: #c2b4ff; }
:root[data-theme="dark"] .el-undead { color: #a4bf9f; }
.sel-ico, .recipe-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--tile-bg); }
.recipe-ico { width: 46px; height: 46px; }
.sel-acts { margin-top: var(--s-3); }
.inv-bar { margin-bottom: var(--s-3); }

/* ===================================================================================== skills */
/* skill points per class: one pill per pool (Skills panel summary and each class's section) */
.sk-pools { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-2) 0 4px; }
.skill-row, .prio-row { display: flex; align-items: center; gap: var(--s-2); padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.skill-row:last-child, .prio-row:last-child { border-bottom: 0; }
.skill-row img, .prio-row img { border-radius: var(--radius-xs); flex: none; }
.skill-row.unlearned img { filter: grayscale(0.85) brightness(0.7); }
.skill-row .lv { min-width: 44px; padding: 1px 6px; text-align: center; font-size: var(--fs-sm); font-weight: 900; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.skill-row .lv.maxed { color: var(--accent-text); border-color: var(--accent-line); }
.prio-row.off { opacity: 0.55; }
.prio-row select { width: 72px; min-height: 27px; padding: 2px 6px; font-size: var(--fs-sm); }
.prio-n { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: var(--fs-micro); font-weight: 900; color: var(--text-muted); background: var(--surface-sunken); border: 1px solid var(--border-soft); }

/* ===================================================================================== shop / recipes / services */
.shop-row { display: flex; align-items: center; gap: var(--s-2); padding: 6px; border-bottom: 1px solid var(--hairline); border-radius: var(--radius-sm); transition: background-color var(--dur-fast) var(--ease); }
.shop-row:hover { background: var(--gloss-soft); }
.shop-row.dim { opacity: 0.5; }
.shop-row img { flex: none; }
.shop-row .price { font-weight: 800; color: var(--money-text); min-width: 64px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.recipe { padding: 10px 12px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border-soft); margin-bottom: var(--s-2); transition: border-color var(--dur-fast) var(--ease); }
.recipe.can { border-color: var(--good-line); }
.recipe.dim { opacity: 0.55; }
.mats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s-2); }
.mat { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 3px; font-size: var(--fs-sm); border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.mat.ok { color: var(--good-text); }
.mat.no { color: var(--bad-text); border-color: var(--bad-line); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.col-box { min-width: 0; }
.col-box .section-title { margin-top: 2px; }
.ench { color: var(--ench-1); }
.ench.t2 { color: var(--ench-2); }
.ench.t3 { color: var(--r-unique); font-weight: 800; }
.bank-sums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-2); }
.bank .row { margin-top: var(--s-2); }
.pet-ico { flex: none; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--border-soft); }
.pet-top { align-items: flex-start; }
.card.pet.folded { padding-block: 8px; }
.card.pet.folded .pet-top { align-items: center; }
.pet-fold { flex: none; width: 30px; height: 30px; font-size: 13px; }
.pet-fold-all { margin: 4px 0 6px; }

/* job hall */
.job-now .h3 { margin-bottom: 2px; }
.class-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: var(--s-2); }
.path-step { padding: 1px 9px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; background: var(--surface-sunken); border: 1px solid var(--border-soft); color: var(--text-soft); }
.path-step.cur { color: var(--sel-text); border-color: var(--sel-line); background: var(--sel-soft); }
.path-arrow { color: var(--text-muted); font-weight: 800; }
.job-opt .h4 { margin-bottom: 2px; }
.reqs { margin: var(--s-2) 0 0; padding: 0; list-style: none; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.reqs li { display: flex; align-items: baseline; gap: 6px; color: var(--text-soft); }
.req-mark { flex: none; width: 16px; height: 16px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 900; transform: translateY(2px); }
.reqs .met .req-mark { background: var(--good); color: var(--text-on-gold); }
.reqs .unmet .req-mark { border: 1px solid var(--bad-line); color: var(--bad); }
.reqs .unmet { color: var(--text-muted); }
.tree-line { font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--hairline); }
.tree { margin-bottom: var(--s-2); }

/* Hunting Board (src/ui/board.js): mission cards, difficulty pills (no yellow / gold), the summary row */
.mission-ico { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--border-soft); color: var(--text-muted); }
.mission-ico .pi { width: 30px; height: 30px; }
.mission .bar { margin: 6px 0; }
.mission .muted.small { margin-top: 1px; }
.mission .rewards { margin-top: 6px; }
.mission.done { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--surface-2) 70%); }
.mission .card-actions .grow { flex: 1; }
.pill.diff-easy { color: var(--good); border-color: var(--good-line); background: var(--good-soft); }
.pill.diff-normal { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
.pill.diff-hard { color: var(--bad); border-color: var(--bad-line); background: var(--bad-soft); }
.board-stats { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.board-reset { margin-top: var(--s-2); }
.board-reset .muted { flex: 1 1 220px; }
@media (max-width: 480px) { .mission-ico { width: 44px; height: 44px; } .mission-ico img, img.mission-ico { width: 44px; height: 44px; } .board-stats .points { flex: 1 1 auto; justify-content: space-between; } }
.rewards { display: flex; flex-wrap: wrap; gap: 5px; }
.reward { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 800; background: var(--surface-sunken); border: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.reward.exp { color: var(--reward-exp); }
.reward.jexp { color: var(--reward-jexp); }
.reward.zeny { color: var(--money-text); }
.reward.item { color: var(--text-soft); }

/* codex */
.codex-progress .bar { height: 10px; }
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.codex-cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius); background: var(--tile-bg); border: 1px solid var(--border-soft); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.codex-cell:hover { border-color: var(--border-strong); background-color: var(--surface-3); }
.codex-cell img { width: 80%; height: 80%; object-fit: contain; }
.codex-cell.boss { border-color: var(--boss-line); }
.codex-cell.sel { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel) inset; }
.codex-cell.unseen { cursor: default; background: var(--surface-sunken); }
.codex-cell.unseen:hover { border-color: var(--border-soft); }
.codex-cell.unseen img { filter: brightness(0) opacity(0.35); }
.codex-cell span { position: absolute; bottom: 1px; right: 5px; font-size: var(--fs-micro); font-weight: 800; color: var(--text-muted); }
.codex-portrait { flex: none; border-radius: var(--radius-lg); background: var(--surface-sunken); border: 1px solid var(--border-soft); }
.codex-sel .small { margin-top: 2px; }
.drops { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: var(--fs-sm); }
.drop { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--border-soft); min-width: 0; }
.drop.unknown { border-style: dashed; padding-left: 6px; }
.drop-q { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--surface-3); color: var(--text-muted); font-weight: 900; }

/* ===================================================================================== tooltip */
#tooltip {
  position: fixed; z-index: var(--z-tooltip); max-width: 330px; padding: 11px 13px; border-radius: var(--radius); pointer-events: none;
  background: var(--surface-tooltip); border: 1px solid var(--border-strong); box-shadow: inset 0 0 0 1px var(--frame-hi), var(--shadow-3); font-size: var(--fs-sm); line-height: 1.45; color: var(--text);
  outline: 1px solid var(--frame-inner); outline-offset: -4px;
}
#tooltip::before { content: ''; position: absolute; left: 12px; right: 12px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); }
#tooltip > div { margin: 2px 0; }
/* item comparison: hovered piece (+ stat changes) next to the worn one */
#tooltip.wide { max-width: min(700px, calc(100vw - 16px)); }
.tt-cmp { display: flex; gap: 14px; align-items: flex-start; }
.tt-cmp .tt-col { flex: 1 1 300px; min-width: 0; max-width: 330px; }
.tt-equipped { padding-left: 12px; border-left: 1px solid var(--hairline-2); opacity: 0.92; }
.tt-label { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.tt-deltas { margin-top: 8px !important; padding-top: 7px; border-top: 1px solid var(--hairline-2); }
.tt-delta { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.tt-delta.good b { color: var(--good-strong, var(--good)); }
.tt-delta.bad b { color: var(--bad-strong, var(--bad)); }
@media (max-width: 640px) { .tt-cmp { flex-direction: column; } .tt-equipped { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline-2); padding-top: 6px; } }
.tt-head { display: flex; gap: var(--s-2); align-items: center; margin-bottom: 7px !important; padding-bottom: 7px; border-bottom: 1px solid var(--hairline-2); }
.tt-head img { flex: none; border-radius: var(--radius-xs); background: var(--surface-sunken); }
.tt-name { font-weight: 900; font-size: var(--fs-md); color: var(--text-strong); }
.tt-name.r-good { color: var(--r-good); } .tt-name.r-rare { color: var(--r-rare); } .tt-name.r-unique { color: var(--r-unique); }
.tt-name.r-signature { color: var(--r-signature); }
.tt-name.r-forged { color: var(--r-forged); } .tt-name.r-card { color: var(--r-card); } .tt-name.r-egg { color: var(--r-egg); }
.tt-sub { color: var(--text-muted); font-size: var(--fs-xs); }
.tt-mods { color: var(--good-text); margin: 5px 0 !important; }
.tt-cards { color: var(--r-card); }
.tt-foot { color: var(--text-muted); font-size: var(--fs-xs); border-top: 1px solid var(--hairline-2); padding-top: 5px; margin-top: 7px !important; }

/* ===================================================================================== toasts */
#toasts { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.toast {
  --toast-c: var(--info); display: flex; align-items: center; gap: 10px; max-width: 460px; padding: 9px 16px 9px 10px; border-radius: var(--radius);
  background: var(--surface-glass); border: 1px solid var(--border); border-left: 3px solid var(--toast-c); color: var(--text-strong);
  font-weight: 700; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--frame-hi), var(--shadow-3);
  animation: toast-in var(--dur) var(--ease); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast::before { content: 'i'; flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 900; background: var(--toast-c); color: var(--toast-glyph); }
.toast.good { --toast-c: var(--good); }
.toast.good::before { content: '\2713'; }
.toast.error { --toast-c: var(--bad); }
.toast.error::before { content: '!'; }
.toast.warn { --toast-c: var(--warn); }
.toast.warn::before { content: '!'; }
.toast.rare { --toast-c: var(--r-rare); border-color: var(--r-rare-line); color: var(--text-strong); background: linear-gradient(90deg, var(--r-rare-tint), var(--surface-glass) 60%); }
.toast.rare::before { content: '\2726'; color: var(--toast-glyph); }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* ===================================================================================== modals */
.modal-wrap { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-4); background: var(--scrim); backdrop-filter: blur(2px); animation: fade-in var(--dur) var(--ease); }
.modal {
  position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3);
  padding: 20px 22px; border-radius: var(--radius-xl); background: var(--modal-bg); border: 1px solid var(--border-accent);
  box-shadow: inset 0 0 0 1px var(--frame-hi), var(--shadow-3); animation: modal-in var(--dur) var(--ease);
  outline: 1px solid var(--frame-inner); outline-offset: -6px;
}
.modal::before { content: ''; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.modal:focus-visible { outline: 1px solid var(--frame-inner); outline-offset: -6px; }
.modal > .h3, .modal > .h4 { margin: 0; font-size: var(--fs-xl); }
.modal-text { font-size: 15px; line-height: 1.5; color: var(--text-strong); }
.modal-btns, .modal > .row.end { margin-top: var(--s-1); }
.modal.wide { width: min(880px, 96vw); }
.modal.dialog { width: min(600px, 100%); }
.dlg { display: flex; gap: var(--s-4); }
.dlg-portrait { width: 112px; height: 112px; border-radius: var(--radius-lg); border: 1px solid var(--accent-line); flex: none; background: var(--portrait-bg); box-shadow: 0 0 0 3px var(--accent-softer); }
.dlg-main { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); min-height: 120px; min-width: 0; }
.dlg-name { font-family: var(--title); font-weight: 800; color: var(--accent-text); font-size: 17px; letter-spacing: 0.4px; }
.dlg-text p { margin: 0 0 var(--s-2); font-size: 15px; line-height: 1.55; color: var(--text-strong); }
.dlg-btns { margin-top: auto; align-items: center; }
.dlg-page { margin-right: auto; font-variant-numeric: tabular-nums; }
/* the hidden Job Lv 50 gift: the weapon under the master's last page */
.gift-item { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--r-unique-line); background: var(--r-unique-tint); cursor: help; }
.gift-item .ico { flex: none; }
.offline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.loot-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.loot { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 3px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border-soft); font-size: var(--fs-sm); color: var(--text-soft); }
.loot b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.look-edit { display: flex; gap: var(--s-4); margin: 0; }
.look-preview { width: 200px; height: 240px; border-radius: var(--radius-lg); border: 1px solid var(--accent-line); flex: none; background: var(--portrait-bg); }
.look-fields { flex: 1; max-height: 60vh; overflow-y: auto; padding-right: 6px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* appearance pickers (creation + editor) */
.look-group { margin-bottom: var(--s-1); }
.look-form .label { margin: var(--s-3) 0 6px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.look-group:first-child .label { margin-top: 0; }
.look-form .label .small { text-transform: none; letter-spacing: normal; font-weight: 600; }
.pick-row { gap: 6px; }
.chip.pick { min-width: 32px; justify-content: center; padding: 0 8px; font-variant-numeric: tabular-nums; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface-2); cursor: pointer; box-shadow: 0 0 0 1px var(--border-strong); transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch.on { box-shadow: 0 0 0 2px var(--sel), 0 0 10px var(--sel-soft); }

/* ===================================================================================== login + character creation */
.create { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; padding: var(--s-5); position: relative; isolation: isolate; }
.create::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-color: var(--bg);
  background-image: radial-gradient(ellipse 70% 65% at 50% 50%, var(--veil-0), var(--veil-1)), var(--login-art);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.create:has(.create-body)::before { background-image: radial-gradient(ellipse 75% 70% at 50% 45%, var(--veil-0), var(--veil-1)), var(--create-art); }
.create-card {
  position: relative; width: min(820px, 100%); padding: 28px 32px; border-radius: 20px;
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); border: 1px solid var(--border-accent); box-shadow: inset 0 0 0 1px var(--frame-hi), var(--shadow-3);
  backdrop-filter: blur(6px); animation: modal-in var(--dur) var(--ease);
  outline: 1px solid var(--frame-inner); outline-offset: -7px;
}
.create-card::before { content: ''; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.create-card:not(:has(.create-body)) { width: min(500px, 100%); }
.create-card > p { text-align: center; color: var(--text-soft); max-width: 56ch; margin: var(--s-2) auto var(--s-4); line-height: 1.55; }
.create-card > h2 { font-family: var(--title); color: var(--text-title); text-align: center; }
.create-card > .btn { display: flex; margin: 0 auto; }
.login { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }
.login .setting { flex-direction: column; align-items: stretch; gap: 6px; margin: 0; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.login .setting input { width: 100%; font-size: var(--fs-lg); min-height: 46px; padding: 0 14px; text-transform: none; letter-spacing: normal; font-weight: 700; }
.login .bad { padding: 7px 10px; border-radius: var(--radius-sm); background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--bad-strong); }
.login .muted.small { line-height: 1.5; }
.login .row.between { gap: var(--s-3); flex-wrap: wrap-reverse; margin-top: var(--s-1); }
.login .btn.big { flex: 1 1 200px; }
/* accounts: login / register tabs, password fields with show/hide, account card (src/main.js, src/ui/account.js) */
.auth-tabs { display: flex; justify-content: center; margin: 0 0 var(--s-2); }
.auth-tabs .seg-btn { min-height: 34px; padding: 0 18px; }
.login .setting .opt { font-size: var(--fs-xs); font-weight: 600; text-transform: none; letter-spacing: normal; }
.login .chk { margin: 0; font-size: var(--fs-sm); }
.pw-field { position: relative; display: flex; align-items: center; }
.pw-field input { padding-right: 68px !important; }
.login .pw-field input { width: 100%; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 30px; padding: 0 10px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text-soft); font: inherit; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: 0.3px; text-transform: none; cursor: pointer;
}
.pw-toggle:hover { color: var(--text-strong); border-color: var(--border-strong); }
.pw-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pw-toggle[aria-pressed="true"] { color: var(--sel); border-color: var(--sel-line); }
.linkish { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: inherit; text-decoration: underline; cursor: pointer; }
.pw-form { margin-top: var(--s-1); min-width: min(380px, 80vw); }
.pw-form .setting input { font-size: var(--fs-md); min-height: 42px; }
.acct-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 var(--s-2); }
.acct-facts div { display: flex; flex-direction: column; gap: 2px; }
.acct-facts dt { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.acct-facts dd { margin: 0; font-weight: 700; color: var(--text-strong); }
.acct-note { padding: 8px 10px; border: 1px solid var(--warn-line); border-radius: var(--radius-sm); line-height: 1.45; }
.acct-note:not(.warn-card) { border-color: var(--sel-line); background: var(--sel-soft); }
/* email + Google (src/main.js login / "confirm your email", src/ui/account.js) */
.google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.login > .btn.big, .login-google .btn.big { flex: none; } /* in a column, not 200px tall (.login .btn.big grows in its row) */
.google-btn .g-mark { flex: none; }
.login-google { display: flex; flex-direction: column; gap: var(--s-3); }
.login-google .google-btn { width: 100%; }
.login-or { display: flex; align-items: center; gap: 12px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.login .center { text-align: center; line-height: 1.5; }
.inbox .ib-row .btn { flex: 1 1 160px; }
.good-note { padding: 7px 10px; border-radius: var(--radius-sm); background: var(--good-soft); border: 1px solid var(--good-line); color: var(--text-strong); }
.login .captcha-slot { display: flex; justify-content: center; }
.login .captcha-slot[hidden], .login form[hidden], .login-google[hidden] { display: none; }
.create-body { display: flex; gap: var(--s-6); margin: var(--s-4) 0; }
#cr-preview { position: sticky; top: 0; width: 190px; height: 222px; flex: none; border-radius: var(--radius-xl); border: 1px solid var(--accent-line); background: var(--portrait-bg); box-shadow: 0 0 0 4px var(--accent-softer), 0 12px 30px var(--shade); }
.create-form { flex: 1; min-width: 0; }
.create-form > .setting { margin-top: 0; }
.create-form .setting input { width: 240px; }
.create-form > .label { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.builds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.build {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; text-align: left; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--tile-bg); color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.build:hover { border-color: var(--border-strong); }
.build b { font-family: var(--title); color: var(--text-title); }
.build.on { border-color: var(--sel); background: linear-gradient(180deg, var(--sel-soft), var(--surface-2)); box-shadow: 0 0 0 1px var(--sel) inset; }

/* ===================================================================================== auction house */
.ah-search { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.search-field { position: relative; display: flex; flex: 1 1 100%; }
.search-field .pi { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-field input { width: 100%; padding-left: 32px; }
.sel-field { display: flex; flex: 1 1 120px; min-width: 0; }
.sel-field select { width: 100%; }
.ah-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-2); transition: opacity var(--dur) var(--ease); }
.ah-list.is-loading { opacity: 0.6; }
.ah-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border-soft);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.ah-row:hover { border-color: var(--border); background: var(--surface-3); }
.ah-row.mine { border-color: var(--border-accent); background: linear-gradient(90deg, var(--primary-soft), var(--surface-2) 50%); }
.ah-ico { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--tile-bg); }
.ah-row.small .ah-ico { width: 34px; height: 34px; }
.ah-ico .qty { position: absolute; right: -4px; bottom: -4px; padding: 0 4px; border-radius: 5px; font-size: var(--fs-micro); font-weight: 900; color: var(--text-strong); background: var(--surface-deep); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.ah-main { line-height: 1.3; }
.ah-name { font-size: 13.5px; overflow-wrap: anywhere; line-height: 1.25; }
.ah-meta { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.ah-meta span + span::before { content: '\00b7'; margin-right: 8px; color: var(--text-faint); }
.ah-price { white-space: nowrap; font-weight: 800; color: var(--money-text); font-variant-numeric: tabular-nums; }
.ah-price.good { color: var(--good); }
.zeny-amt, .gold-amt { display: inline-flex; align-items: center; gap: 5px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 0; }
.ah-sell .form-grid { margin-bottom: var(--s-2); }
.ah-sell-foot { padding-top: var(--s-2); border-top: 1px solid var(--hairline-2); }
.hist-tag { font-weight: 700; }
.hist-sold .hist-tag { color: var(--good); }
.hist-bought .hist-tag { color: var(--info); }
.hist-cancelled .hist-tag, .hist-expired .hist-tag { color: var(--text-muted); }
.history .ah-row { background: var(--surface-sunken); }
.mail-row.blocked { border-color: var(--warn-line); }

/* ===================================================================================== players */
.players { display: flex; flex-direction: column; gap: 6px; }
.player { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border-soft); }
.player.me { border-color: var(--sel-line); background: linear-gradient(90deg, var(--sel-soft), var(--surface-2) 60%); }
.player-main { line-height: 1.3; }
.avatar {
  position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--title); font-weight: 800; font-size: 15px; color: var(--text-on-primary);
  background: var(--avatar-bg); border: 1px solid var(--border-accent);
}
.avatar .dot { position: absolute; right: -1px; bottom: -1px; margin: 0; width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--surface-2); }
.lv-badge { flex: none; padding: 2px 9px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 900; color: var(--text-soft); background: var(--surface-sunken); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.rank { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.rank th { text-align: left; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border-soft); }
.rank td { padding: 6px 8px; border-bottom: 1px solid var(--hairline); }
.rank .num { text-align: right; font-variant-numeric: tabular-nums; }
.rank tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.rank tbody tr:hover td { background: var(--gloss-soft); }
.rank tr.me td { background: var(--sel-soft); color: var(--text-strong); }
.rank tr.me td:first-child { box-shadow: 3px 0 0 var(--sel) inset; }
.rank-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 900; color: var(--text-muted); background: var(--surface-sunken); border: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.rank .top .rank-n { min-width: 22px; width: 22px; height: 28px; padding: 0; border: 0; color: transparent; background: center / contain no-repeat; }
.rank .top1 .rank-n { background-image: url(../assets/ui/medal_gold.png); }
.rank .top2 .rank-n { background-image: url(../assets/ui/medal_silver.png); }
.rank .top3 .rank-n { background-image: url(../assets/ui/medal_bronze.png); }
.rank td:first-child { width: 44px; }
.rank .trans { color: var(--accent); }

/* ===================================================================================== responsive */
@media (max-height: 820px) and (min-width: 1101px) {
  .nav-btn { min-height: 34px; }
  .nav-group { padding-top: var(--s-2); }
}
@media (max-width: 1360px) {
  #app { grid-template-columns: 176px minmax(0, 1fr) 392px; }
  #ov-boss { width: 100px; }
  .ovb-ico { width: 40px; height: 40px; }
  .tb-bars { gap: var(--s-3); }
}

/* compact rail menu, panel stays on the right */
@media (max-width: 1100px) {
  #app { grid-template-columns: 82px minmax(0, 1fr) 352px; gap: var(--s-2); padding: var(--s-2); }
  #topbar { gap: var(--s-3); }
  #topbar .brand small { display: none; }
  #topbar .brand { font-size: 18px; }
  #nav { padding: 6px; gap: 2px; }
  .nav-group { display: none; }
  .nav-group + .nav-btn { margin-top: 0; }
  .nav-group:not(:first-child) { display: block; height: 1px; padding: 0; margin: 4px 6px; background: var(--border-soft); font-size: 0; flex: none; }
  .nav-btn { flex-direction: column; justify-content: center; gap: 2px; min-height: 46px; padding: 4px 2px; font-size: 10.5px; text-align: center; }
  .nav-btn span { white-space: normal; line-height: 1.1; overflow: visible; }
  .nav-btn .pi { width: 21px; height: 21px; }
  .nav-btn.on::before { top: 10px; bottom: 10px; }
  .badge { top: 4px; right: 6px; transform: none; min-width: 17px; height: 17px; line-height: 17px; font-size: 10px; padding: 0 4px; }
  #ov-left { --bars-w: 200px; }
  .hs { padding: 6px 8px 7px 11px; }
  .hs b { font-size: 15px; }
}

/* two columns: rail + one content column (battle, rates, panel, then chat/log) */
@media (max-width: 900px) {
  #app {
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "top top" "nav stage" "nav panel" "nav social";
    height: auto; min-height: 100vh;
  }
  #center { display: contents; }
  #stage { grid-area: stage; max-height: none; }
  #social { grid-area: social; flex: none; grid-auto-rows: auto; }
  #chat { height: 300px; }
  #log { height: 260px; }
  #nav { position: sticky; top: var(--s-2); align-self: start; max-height: calc(100vh - 16px); z-index: var(--z-sticky); }
  #panel { overflow: visible; scroll-margin-top: var(--s-2); }
  #panel-body { overflow: visible; }
  .tb-char { min-width: 0; }
}

/* phone: top bar, battle, rates, sticky menu strip, panel, chat/log */
@media (max-width: 760px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "stage" "stats" "nav" "panel" "social";
    gap: var(--s-2); padding: var(--s-2);
    padding-left: max(var(--s-2), env(safe-area-inset-left)); padding-right: max(var(--s-2), env(safe-area-inset-right));
  }
  body { font-size: 14.5px; }
  #topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand char zeny theme" "bars bars bars bars"; gap: 6px 10px; padding: 10px 12px; }
  .theme-toggle { grid-area: theme; width: 32px; height: 32px; }
  #topbar .brand { grid-area: brand; font-size: 0; gap: 0; }
  #topbar .brand .logo { font-size: 22px; }
  .tb-char { grid-area: char; padding-left: 10px; }
  .tb-zeny { grid-area: zeny; font-size: var(--fs-md); padding: 3px 10px 3px 4px; }
  .tb-zeny .zeny-ico { width: 20px; height: 20px; }
  .create-card::after { --corner: 34px; }
  .tb-bars { grid-area: bars; gap: 10px; }
  .tb-bar > span { min-width: 0; }
  #topbar::after { left: 6%; right: 6%; }
  #stage { --stage-r: 8px; }
  /* phone: the quick slots move under the bars (beside them they would run into the map name) */
  #ov-left { --bars-w: auto; width: 46%; left: 6px; top: 6px; gap: 3px; }
  #ov-top { flex-direction: column; align-items: stretch; gap: 4px; }
  .ov-bars { gap: 3px; }
  /* square slots that end left of the canvas boss bar (it starts at 27.5 % of the stage = ~60 % of this column) */
  .qslot { width: min(30px, calc((57% - 16px) / 3)); height: auto; aspect-ratio: 1; }
  .qslot img { width: 21px; height: 21px; }
  .qs-t { font-size: 8px; top: 2px; left: 2px; }
  .qs-n { font-size: 9px; right: 2px; bottom: 1px; }
  #ov-boss { right: 4px; bottom: 4px; width: 92px; padding: 5px 5px 4px; gap: 4px; }
  .ovb-ico { width: 36px; height: 36px; }
  #ov-right { right: 4px; top: 4px; min-width: 0; max-width: 52%; padding: 4px 8px 5px 18px; }
  #ov-map { font-size: var(--fs-sm); }
  #ov-map .muted { display: none; }
  #ov-phase { font-size: var(--fs-micro); margin-bottom: 3px; }
  .ov-bar { height: 14px; }
  .ov-bar span { font-size: 9.5px; }
  .ov-bar.enc { width: 100px; height: 5px; }
  #ov-buffs { display: none; }
  #huntstats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .hs { grid-column: span 2; padding: 5px 8px 6px 10px; }
  .hs:nth-child(n+4) { grid-column: span 3; }
  .hs b { font-size: var(--fs-md); }
  #nav {
    position: sticky; top: 0; flex-direction: row; gap: 2px; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 5px 10px;
    scrollbar-width: none; border-radius: var(--radius); z-index: var(--z-sticky);
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 14px, var(--mask-solid) calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 14px, var(--mask-solid) calc(100% - 14px), transparent);
  }
  #nav::-webkit-scrollbar { display: none; }
  .nav-group, .nav-group:not(:first-child), .nav-sep { display: block; flex: none; width: 1px; height: auto; margin: 8px 4px; padding: 0; font-size: 0; background: var(--border-soft); }
  .nav-group:first-child { display: none; }
  .nav-btn { min-width: 66px; min-height: 52px; font-size: 10.5px; }
  .nav-btn span { white-space: nowrap; }
  .nav-btn.on::before { left: 12px; right: 12px; top: auto; bottom: -1px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  #panel { scroll-margin-top: 72px; }
  #panel-head h2 { font-size: 17px; }
  #panel-body { padding: var(--s-2) 10px var(--s-4); }
  .card { padding: 11px 12px; }
  #social { grid-template-columns: 1fr; }
  #chat { height: 320px; }
  #log { height: 260px; }
  .cols, .drops, .bank-sums, .offline-grid { grid-template-columns: 1fr; }
  .create { padding: var(--s-2); place-items: start center; }
  .create-card { padding: 22px 16px; border-radius: var(--radius-xl); }
  .brand.big { font-size: 28px; }
  .create-body { flex-direction: column; align-items: center; }
  #cr-preview { position: static; }
  .create-form { width: 100%; }
  .create-form .setting input { width: 100%; max-width: 240px; }
  .look-edit { flex-direction: column; align-items: center; }
  .look-fields { max-height: none; overflow: visible; }
  .dlg { flex-direction: column; align-items: center; text-align: center; }
  .dlg-btns { justify-content: center; }
  .dlg-portrait { width: 96px; height: 96px; }
  .modal { padding: 18px 16px; }
  .setting select { max-width: 160px; }
  input, select, textarea { font-size: var(--fs-lg); }
  .prio-row select, table.stats .btn { font-size: var(--fs-sm); }
  #toasts { top: 12px; }
}
/* small phones: the boss card becomes a narrow column at the right edge (portrait, gauge, Fight, Auto) */
@media (max-width: 560px) {
  /* short enough to stay under the map name on a 360 px phone (also with touch-size buttons) */
  #ov-boss { width: 52px; padding: 3px; gap: 2px; }
  .ovb-ico { width: 26px; height: 26px; }
  .ovb-name { display: none; }
  #ov-boss .ov-bar { height: 12px; }
  #ov-boss .ov-bar span { font-size: 8.5px; letter-spacing: -0.2px; }
  #ov-boss .ovb-go { min-height: 24px; font-size: 11px; padding: 0 2px; }
  .qslot .qs-a { display: none; } /* no room next to the count in a ~25 px slot; the popover says Auto */
  .ovb-go .l { display: none; }
  .ovb-go .s { display: inline; }
  .ovb-auto { gap: 3px; font-size: 9.5px; }
  .ovb-auto input { width: 12px; height: 12px; }
}
@media (max-width: 420px) {
  table.stats .stat-long { display: none; }
  table.stats .num { width: 34px; }
  .portrait { width: 104px; height: 124px; }
  .tb-bar { font-size: var(--fs-xs); }
}

/* creation card keeps its button in view on desktop-size screens */
@media (min-width: 761px) and (min-height: 640px) {
  .create-card:has(.create-body) { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
  .create-card:has(.create-body) .create-body { flex: 1; min-height: 0; }
  .create-card:has(.create-body) .create-form { overflow-y: auto; padding-right: var(--s-2); }
}

/* touch screens: larger hit areas */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn.sm { min-height: 34px; padding: 0 11px; }
  .btn.icon { min-width: 34px; }
  .chip { min-height: 32px; }
  .tab { min-height: 44px; }
  .chk input { width: 20px; height: 20px; }
  .swatch { width: 34px; height: 34px; }
}

/* motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===================================================================================== GUI kit pieces (assets/ui) */
/* pictograms: white masks tinted with currentColor, so they follow the colour tokens */
.pi { display: inline-block; flex: none; width: 18px; height: 18px; background-color: currentColor; vertical-align: middle;
  -webkit-mask: var(--pi) center / contain no-repeat; mask: var(--pi) center / contain no-repeat; }
.pi-map { --pi: url(../assets/ui/picto/map.png); }
.pi-helmet_2 { --pi: url(../assets/ui/picto/helmet_2.png); }
.pi-bag_1 { --pi: url(../assets/ui/picto/bag_1.png); }
.pi-book { --pi: url(../assets/ui/picto/book.png); }
.pi-store_1 { --pi: url(../assets/ui/picto/store_1.png); }
.pi-anvil { --pi: url(../assets/ui/picto/anvil.png); }
.pi-diamond { --pi: url(../assets/ui/picto/diamond.png); }
.pi-paw { --pi: url(../assets/ui/picto/paw.png); }
.pi-bank { --pi: url(../assets/ui/picto/bank.png); }
.pi-knight { --pi: url(../assets/ui/picto/knight.png); }
.pi-goal { --pi: url(../assets/ui/picto/goal.png); }
.pi-enemy { --pi: url(../assets/ui/picto/enemy.png); }
.pi-scale { --pi: url(../assets/ui/picto/scale.png); }
.pi-friend { --pi: url(../assets/ui/picto/friend.png); }
.pi-setting_2 { --pi: url(../assets/ui/picto/setting_2.png); }
.pi-strength { --pi: url(../assets/ui/picto/strength.png); }
.pi-boot_speed { --pi: url(../assets/ui/picto/boot_speed.png); }
.pi-heart { --pi: url(../assets/ui/picto/heart.png); }
.pi-magicball { --pi: url(../assets/ui/picto/magicball.png); }
.pi-target_1 { --pi: url(../assets/ui/picto/target_1.png); }
.pi-lucky { --pi: url(../assets/ui/picto/lucky.png); }
.pi-star { --pi: url(../assets/ui/picto/star.png); }
.pi-badge { --pi: url(../assets/ui/picto/badge.png); }
.pi-coin { --pi: url(../assets/ui/picto/coin.png); }
.pi-skull { --pi: url(../assets/ui/picto/skull.png); }
.pi-horuglass { --pi: url(../assets/ui/picto/horuglass.png); }
.pi-chest_1 { --pi: url(../assets/ui/picto/chest_1.png); }
.pi-coupon { --pi: url(../assets/ui/picto/coupon.png); }
.pi-paper { --pi: url(../assets/ui/picto/paper.png); }
.pi-mail { --pi: url(../assets/ui/picto/mail.png); }
.pi-internet_disconnect { --pi: url(../assets/ui/picto/internet_disconnect.png); }
.pi-search { --pi: url(../assets/ui/picto/search.png); }
.pi-leaderboard { --pi: url(../assets/ui/picto/leaderboard.png); }
.pi-reload { --pi: url(../assets/ui/picto/reload.png); }
.pi-chat_1 { --pi: url(../assets/ui/picto/chat_1.png); }
.btn .pi { width: 13px; height: 13px; }
.section-title > span { display: inline-flex; align-items: center; gap: 6px; }
.section-title .pi { width: 14px; height: 14px; color: var(--accent-text); }

.modal::after, .create-card::after {
  --corner: 34px; content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: var(--corner-opacity);
  filter: var(--frame-corner-filter);
  background:
    url(../assets/ui/corner_tl.png) top left / var(--corner) no-repeat, url(../assets/ui/corner_tr.png) top right / var(--corner) no-repeat,
    url(../assets/ui/corner_bl.png) bottom left / var(--corner) no-repeat, url(../assets/ui/corner_br.png) bottom right / var(--corner) no-repeat;
}
.create-card::after { --corner: 46px; }

/* ===================================================================================== theme controls */
.icon-btn {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text-soft);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--sel-line); color: var(--sel-text); background: var(--surface-3); }
.icon-btn:active { background: var(--surface-4); }
.icon-btn .pi { width: 18px; height: 18px; }
.theme-toggle[aria-pressed="true"] { color: var(--accent); }
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border); }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; color: var(--text-muted); font-weight: 800; font-size: 13px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg-btn:hover { color: var(--text-strong); }
.seg-btn .pi { width: 15px; height: 15px; }
.seg-btn.on { background: var(--btn-primary-bg); color: var(--text-on-primary); box-shadow: 0 1px 4px var(--primary-glow); }
.pi-sun { --pi: url(../assets/ui/picto/sun.png); }
.pi-moon { --pi: url(../assets/ui/picto/moon.png); }

/* ===================================================================================== random drop bonuses */
/* teal "bonus" colour (src/data/options.js): apart from unique cyan, enchant blue and the no-gold-text rule */
:root { --bonus: #0b7a68; --bonus-dot: #14a58c; --bonus-line: var(--teal-line); --bonus-soft: rgba(20, 165, 140, 0.1); }
:root[data-theme="dark"] { --bonus: var(--teal-2); --bonus-dot: #5fe0c4; --bonus-line: #2f7a68; --bonus-soft: rgba(95, 224, 196, 0.1); }
.opt-pips { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; margin-left: 5px; pointer-events: none; }
.opt-pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--bonus-dot); box-shadow: 0 0 0 1px var(--tile-label-halo); }
.opt-pips.n3 i { box-shadow: 0 0 0 1px var(--tile-label-halo), 0 0 5px var(--bonus-dot); }
.tile .opt-pips { position: absolute; left: 4px; bottom: 4px; margin: 0; }
.opt-line { color: var(--bonus); font-weight: 700; }
.opt-line.dim { font-weight: 600; opacity: 0.72; }
.ah-main .opt-line { font-size: var(--fs-xs); }
.tt-opts { color: var(--bonus); margin: 6px 0 !important; padding: 4px 8px; border-radius: var(--radius-xs); background: var(--bonus-soft); border-left: 2px solid var(--bonus-line); }
.tt-opts-h { font-size: var(--fs-micro); font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.85; }
.opt-row { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.opt-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bonus-dot); }
.opt-max { font-size: var(--fs-micro); font-weight: 900; padding: 0 5px; border-radius: var(--radius-pill); border: 1px solid var(--bonus-line); color: var(--bonus); }

/* quick search above item lists (Inventory, Vault, Auction House sell tab) */
.qs-field { display: flex; margin: 6px 0 8px; }
.qs-field input { flex: 1; min-width: 0; }
.qs-none { margin: -2px 0 8px; }
.tile[hidden], .shop-row[hidden] { display: none !important; }

/* Monster Codex: the selected monster stays pinned at the top of the panel while the grid scrolls under it
   (the panel body is the scroller; its top padding is cancelled so the card sits flush). Capped in height so the
   grid stays usable on short screens; the card scrolls inside if its drop list is long. */
.codex-sel { position: sticky; top: calc(-1 * var(--s-3)); z-index: 3; max-height: 55vh; overflow-y: auto; box-shadow: 0 8px 16px -6px var(--shade-strong);
  background: var(--surface-1); } /* opaque: the grid scrolls underneath */
@media (max-height: 640px) { .codex-sel { max-height: 45vh; } }

/* Hunting rates ride along the bottom edge of the battle stage on a transparent strip (owner: frees the space below
   the stage for the chat). Plain text with the overlay shadow, left of the boss card; static, cheap to repaint. */
#stage #huntstats { position: absolute; left: 12px; right: 136px; bottom: 9px; z-index: 1; display: flex; flex-wrap: nowrap; gap: 16px;
  align-items: flex-end; pointer-events: none; }
/* light text + dark outline in both themes: the map behind can be a bright meadow or a dark crypt */
#stage .hs { flex: 0 1 auto; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; outline: 0; border-radius: 0;
  color: #f4f7ff; text-shadow: 0 0 3px rgba(8, 12, 24, 0.9), 0 1px 2px rgba(8, 12, 24, 0.95); pointer-events: auto; }
#stage .hs::before, #stage .hs::after { display: none; }
#stage .hs span { font-size: 9.5px; letter-spacing: 0.6px; color: #d7e2f5; }
#stage .hs span .pi { width: 11px; height: 11px; }
#stage .hs b { font-size: 13.5px; color: #ffffff; }
#stage .hs b.pending { font-size: 11px; padding-top: 1px; color: #d7e2f5; }
@media (max-width: 760px) {
  #stage #huntstats { left: 8px; bottom: 6px; gap: 10px; right: 112px; }
  #stage .hs:nth-child(2), #stage .hs:nth-child(3), #stage .hs:nth-child(4) { display: none; } /* EXP/h + next level only */
  #stage .hs b { font-size: 12px; }
}
@media (max-width: 560px) { #stage #huntstats { right: 76px; } }

/* Crafting rework 2026-11-10 (src/ui/workshop.js): quality colours, the maker's mark, the idle kit; the Workshop's
   discipline tabs are in css/workshop.css.
   Owner rule: no yellow / gold text - quality uses the green / blue / violet theme accents, the maker line teal. */
.bar.craft { height: 12px; }
.bar.craft i { background: var(--meter-gloss), var(--jexp); }
.perk-list { margin: 0 0 4px; padding-left: 18px; font-size: var(--fs-sm); }
.perk-list li { margin: 1px 0; }
.catalyst { align-items: center; margin: 0 0 var(--s-2); }
.catalyst .chip { min-height: 24px; }
.q-odds { font-variant-numeric: tabular-nums; }
.tt-quality { font-weight: 800; }
.tt-quality.q1 { color: var(--good); }
.tt-quality.q2 { color: var(--r-good); }
.tt-quality.q3 { color: var(--r-rare); }
.tt-maker { color: var(--r-unique); font-style: italic; }
.tt-maker.mw { font-weight: 800; }
.tile .qmark { position: absolute; right: 3px; bottom: 2px; font-size: 8px; letter-spacing: -1px; line-height: 1; text-shadow: 0 0 2px var(--tile-label-halo); }
.tile .qmark.q1 { color: var(--good); }
.tile .qmark.q2 { color: var(--r-good); }
.tile .qmark.q3 { color: var(--r-rare); }
.tool-line { align-items: center; margin-bottom: var(--s-2); }
.kit-row { padding: 6px 0; border-top: 1px solid var(--border-soft); }
.kit-row:first-of-type { border-top: 0; }
.kit-row .chips { margin: 4px 0 2px; gap: 4px; }
.kit-row .chip .ico { margin-right: 4px; }
.kit-row .chip .muted { margin-left: 5px; font-weight: 700; }

/* ---------------------------------------------------------------- the Merchant line's cart (src/ui/cart.js) */
.cart-card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cart-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 8px; }
.cart-pick {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px 7px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: inherit; cursor: pointer;
}
.cart-pick img { width: 100%; height: auto; max-width: 140px; aspect-ratio: 2 / 1; object-fit: contain; }
.cart-pick .cart-name { font-weight: 600; font-size: 12px; text-align: center; }
.cart-pick:hover:not([disabled]) { border-color: var(--border-accent); }
.cart-pick.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cart-pick[disabled] { cursor: not-allowed; opacity: 0.55; }
.cart-line { margin-top: 2px; }