/* ========================================================================== */
/* HD-2D — VILLAGE COURTYARD                                                   */
/*                                                                            */
/* A warm storybook-diorama skin based on carved ivory, painted timber,       */
/* aged brass, cobblestone, and dark-plum ink. Runtime rules are deliberately */
/* scoped to the product-theme attribute. The picker miniature is the only    */
/* unscoped artwork so it remains visible while another theme is active.      */
/*                                                                            */
/* Geometry contract: portrait phones may request a larger real renderer size. */
/* The canvas, Geo coordinates, pieces and pointer hit-testing scale together. */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Theme picker miniature — intentionally visible in every current theme      */
/* -------------------------------------------------------------------------- */
#pane-settings .theme-preview-hd2d {
  border: 2px solid #392037;
  background:
    linear-gradient(180deg, rgba(255, 223, 145, .06), rgba(48, 24, 28, .24)),
    var(--hd2d-village-image) center 30% / cover no-repeat,
    #8f704e;
  box-shadow:
    inset 0 0 0 2px rgba(255, 245, 216, .78),
    inset 0 -18px 24px rgba(48, 24, 28, .2),
    0 4px 0 #70401f;
}

#pane-settings .theme-preview-hd2d::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 17% 12%, rgba(255, 224, 132, .58), transparent 34%),
    linear-gradient(90deg, rgba(255, 250, 226, .08), transparent 54%);
}

#pane-settings .theme-preview-hd2d::after {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 6;
  border: 1px solid rgba(255, 232, 177, .56);
  border-radius: 10px;
  pointer-events: none;
  box-shadow: inset 0 0 12px rgba(51, 26, 33, .24);
}

#pane-settings .theme-preview-hd2d .theme-preview-board {
  z-index: 2;
  border: 5px solid #6f3f1f;
  background:
    radial-gradient(circle at 50% 50%, #252033 0 23%, transparent 24%),
    conic-gradient(from 22.5deg,
      #f0b776 0 25%, #b8c982 0 50%, #a99bc5 0 75%, #dd806c 0);
  box-shadow:
    0 0 0 2px #edbc5b,
    0 0 0 4px #392037,
    4px 6px 0 rgba(57, 32, 55, .88);
}

#pane-settings .theme-preview-hd2d .theme-preview-board::after {
  inset: 23px;
  border: 2px solid #efbd61;
  background: #292236;
  box-shadow: inset 0 0 0 2px #4d2b2f;
}

#pane-settings .theme-preview-hd2d .theme-preview-board i {
  border: 1.5px solid #392037;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .52), 1px 2px 0 #6c3d25;
}

#pane-settings .theme-preview-hd2d .theme-preview-card {
  border: 2px solid #392037;
  background:
    linear-gradient(135deg, transparent 0 76%, rgba(214, 92, 71, .22) 76%),
    #fff0ce;
  box-shadow: 0 3px 0 #bf684b, 3px 5px 0 rgba(57, 32, 55, .82);
}

#pane-settings .theme-preview-hd2d .theme-preview-card::before {
  content: 'K';
  position: absolute;
  left: 5px;
  top: 4px;
  color: #b9483c;
  font: 900 11px/1 Georgia, serif;
}

#pane-settings .theme-preview-hd2d .theme-preview-piece {
  border: 2px solid #392037;
  background: radial-gradient(circle at 34% 24%, #c9ffc3, #56a94e 55%, #23552e 100%);
  box-shadow:
    inset 2px 2px 2px rgba(255, 255, 255, .56),
    inset -3px -4px 3px rgba(28, 64, 37, .42),
    2px 3px 0 #6f3f1f,
    4px 5px 0 rgba(57, 32, 55, .72);
}

/* -------------------------------------------------------------------------- */
/* Product tokens and page atmosphere                                         */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] {
  color-scheme: light;
  /* AVIF cuts the first-paint courtyard transfer by ~74%; WebP remains the
   * compatibility fallback for older embedded WebViews. Duplicate custom
   * property declarations intentionally preserve the first value when a
   * browser cannot parse image-set()/type(). */
  --hd2d-village-image: url('../assets/themes/hd-2d/village-courtyard-v1.webp');
  --hd2d-village-image: image-set(
    url('../assets/themes/hd-2d/village-courtyard-v1.avif') type('image/avif') 1x,
    url('../assets/themes/hd-2d/village-courtyard-v1.webp') type('image/webp') 1x
  );
  --hd2d-card-face-image: url('../assets/themes/hd-2d/cards/user-sprites-v1/CardBackground.webp');
  --hd2d-card-back-image: url('../assets/themes/hd-2d/cards/card-back-compass-v1.webp');
  --bg: #6e553d;
  --bg-deep: #2a1918;
  --surface: #f9e7bd;
  --surface-2: #efd29c;
  --surface-inset: #d5b47f;
  --surface-raised: #fff3d4;
  --wood-grain: rgba(67, 34, 25, .075);
  --brass: #dca54a;
  --brass-hi: #ffe3a0;
  --brass-mid: #dca54a;
  --brass-lo: #a96624;
  --brass-deep: #74421f;
  --brass-grad: linear-gradient(180deg, #ffe7a8 0%, #e3ae52 48%, #a96727 100%);
--cta-grad: linear-gradient(180deg, #f5a17e 0%, #dc6e59 60%, #ac483f 100%);
--cta-ink: #331d31;
--hd2d-card-stock-hi: #fff4d9;
--hd2d-card-stock: #f4e7c6;
--hd2d-card-stock-lo: #ddc49c;
  --hd2d-card-ink: #21191c;
  --hd2d-card-red: #b5322c;
--hd2d-card-edge: #4a2c24;
--hd2d-card-accent: #c8a66b;
--hd2d-card-brass: #b58445;
--wood-grad: linear-gradient(180deg, #8b5830, #613719 58%, #432319);
  --text: #342032;
  --text-soft: #5a3c45;
  --muted: #7d6260;
  --muted-2: #9a7c72;
  --line: rgba(57, 32, 55, .32);
  --line-soft: rgba(57, 32, 55, .16);
  --marble-r: #d95043;
  --marble-b: #526ed4;
  --marble-y: #e9ad32;
  --marble-g: #4f9b4b;
  --marble-r-sphere: radial-gradient(circle at 34% 25%, #ffb09a, #dc5749 57%, #842b2b 100%);
  --marble-b-sphere: radial-gradient(circle at 34% 25%, #b9c7ff, #5f76d9 57%, #283a86 100%);
  --marble-y-sphere: radial-gradient(circle at 34% 25%, #fff0a6, #efb33d 57%, #9a5f1d 100%);
  --marble-g-sphere: radial-gradient(circle at 34% 25%, #c3efad, #59a653 57%, #285b34 100%);
  --coin-glyph: radial-gradient(circle at 34% 25%, #fff2ae, #e6b348 58%, #9a601f);
  --lamp: radial-gradient(68% 40% at 18% 5%, rgba(255, 207, 105, .23), transparent 72%);
  --ok: #397a52;
  --warn: #a86823;
  --danger: #ad443e;
  --shadow-panel: 0 5px 0 #6b3b22, 0 8px 0 #392037, 0 13px 24px rgba(42, 24, 26, .28);
  --shadow-panel-lg: 0 7px 0 #6b3b22, 0 11px 0 #392037, 0 20px 38px rgba(42, 24, 26, .34);
  --shadow-contact: 0 4px 0 rgba(57, 32, 55, .74), 0 8px 14px rgba(42, 24, 26, .22);
  --lip-wood: 0 4px 0 #46241a, 0 7px 0 #392037, inset 0 2px 0 rgba(255, 238, 192, .3);
  --lip-brass: 0 4px 0 #8b5223, 0 7px 0 #392037, inset 0 2px 0 rgba(255, 244, 196, .7);
  --inset-well: inset 0 3px 5px rgba(50, 27, 30, .42), inset 0 0 0 2px rgba(57, 32, 55, .42);
  --bevel-top: inset 0 2px 0 rgba(255, 255, 255, .68);
  --bevel-bottom: inset 0 -2px 0 rgba(101, 58, 35, .28);
  --font-display: 'Fraunces', 'Baloo 2', Georgia, serif;
  --font-ui: 'Rubik', 'Inter', system-ui, sans-serif;
  --card-back-bg:
    radial-gradient(circle at 50% 50%, #e4bb62 0 5%, transparent 5.8%),
    repeating-linear-gradient(45deg, rgba(255, 236, 190, .13) 0 2px, transparent 2px 8px),
    linear-gradient(145deg, #765781, #3d294f 72%);
  --card-back-border: rgba(255, 234, 181, .86);
  --hd2d-plum: #392037;
  --hd2d-plum-soft: #594052;
  --hd2d-ivory: #fff0ce;
  --hd2d-ivory-hi: #fff9e7;
  --hd2d-parchment: #efd29c;
  --hd2d-wood: #6b3b22;
  --hd2d-wood-deep: #432319;
  --hd2d-brass: #dca54a;
  --hd2d-coral: #dc6e59;
  --hd2d-sage: #aebd77;
  --hd2d-lavender: #9b8bb8;
  --hd2d-roof: #315f5b;
  --hd2d-panel:
    repeating-linear-gradient(0deg, rgba(83, 45, 33, .026) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #fff7df, #efd19b);
  --hd2d-carved-shadow:
    0 4px 0 #a65f32,
    0 7px 0 #392037,
    0 11px 20px rgba(42, 24, 26, .25),
    inset 0 2px 0 rgba(255, 255, 255, .72),
    inset 0 -2px 0 rgba(145, 83, 40, .22);

  /* Bridge the authoritative visual-overhaul tokens into this material
     system. High-specificity legacy selectors can keep their layout while
     resolving to HD-2D ink, parchment, brass, and contact shadows. */
  --jk-night-0: #241720;
  --jk-night-1: #321f2b;
  --jk-night-2: #432a36;
  --jk-obsidian: #392037;
  --jk-obsidian-hi: #594052;
  --jk-walnut-0: #432319;
  --jk-walnut-1: #58301d;
  --jk-walnut-2: #6b3b22;
  --jk-walnut-3: #8a5731;
  --jk-brass-50: #392037;
  --jk-brass-100: #513349;
  --jk-brass-300: #a64c40;
  --jk-brass-500: #dca54a;
  --jk-brass-700: #9b5a2d;
  --jk-brass-900: #392037;
  --jk-brass-gradient: var(--brass-grad);
  --jk-brass-gradient-soft: linear-gradient(145deg, rgba(255, 232, 164, .72), rgba(220, 165, 74, .38));
  --jk-brass-line: rgba(57, 32, 55, .28);
  --jk-brass-line-strong: rgba(57, 32, 55, .52);
  --jk-ivory: #392037;
  --jk-ivory-soft: #594052;
  --jk-muted: #765b57;
  --jk-muted-2: #92746a;
  --jk-success: #397a52;
  --jk-success-deep: #285b3e;
  --jk-danger: #ad443e;
  --jk-danger-deep: #73302f;
  --jk-warning: #a86823;
  --jk-glass-1: rgba(255, 248, 224, .48);
  --jk-glass-2: rgba(255, 248, 224, .68);
  --jk-glass-3: rgba(255, 236, 190, .84);
  --jk-glass-edge: rgba(57, 32, 55, .22);
  --jk-glass-edge-strong: rgba(57, 32, 55, .42);
  --jk-scrim: rgba(48, 27, 30, .68);
  --jk-scrim-heavy: rgba(48, 27, 30, .84);
  --jk-panel: var(--hd2d-panel);
  --jk-panel-raised:
    radial-gradient(circle at 88% 4%, rgba(255, 218, 126, .2), transparent 34%),
    var(--hd2d-panel);
  --jk-panel-inset: linear-gradient(180deg, rgba(216, 184, 132, .78), rgba(255, 247, 221, .7));
  --jk-page:
    linear-gradient(180deg, rgba(48, 27, 29, .04), rgba(48, 27, 29, .28)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #82664a;
  --jk-grain:
    repeating-linear-gradient(0deg, rgba(83, 45, 33, .026) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(91deg, rgba(255, 247, 219, .055) 0 1px, transparent 1px 8px);
  --jk-shadow-xs: 0 2px 0 #8b4f2c, 0 4px 0 #392037;
  --jk-shadow-sm: 0 3px 0 #96552d, 0 6px 0 #392037, 0 10px 17px rgba(42, 24, 26, .2);
  --jk-shadow-md: 0 4px 0 #9d592f, 0 7px 0 #392037, 0 14px 24px rgba(42, 24, 26, .26);
  --jk-shadow-lg: 0 6px 0 #9e5a30, 0 10px 0 #392037, 0 20px 38px rgba(28, 16, 18, .38);
  --jk-shadow-brass: 0 4px 0 #8b5223, 0 7px 0 #392037;
  --jk-inset: inset 0 2px 0 rgba(255, 255, 255, .64), inset 0 -2px 0 rgba(112, 63, 37, .2);
  --jk-inset-deep: inset 0 3px 5px rgba(50, 27, 30, .28), inset 0 0 0 1px rgba(57, 32, 55, .28);
}

html[data-ui-theme='hd-2d'],
html[data-ui-theme='hd-2d'] body {
  background: #2a1918;
}

html[data-ui-theme='hd-2d'] body {
  color: var(--text);
  font-family: var(--font-ui);
}

html[data-ui-theme='hd-2d'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(0deg, rgba(72, 38, 28, .055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(91deg, rgba(255, 247, 219, .09) 0 1px, transparent 1px 7px);
}

html[data-ui-theme='hd-2d'] ::selection {
  color: #2c1a2e;
  background: #f2c96f;
}

html[data-ui-theme='hd-2d'] :focus-visible {
  outline: 3px solid #fff1bd !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #392037 !important;
}

html[data-ui-theme='hd-2d'] * {
  scrollbar-color: #a86b35 rgba(62, 36, 33, .18);
}

/* -------------------------------------------------------------------------- */
/* Boot and authentication                                                     */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] #boot-splash,
html[data-ui-theme='hd-2d'] #auth-gate {
  color: #392037 !important;
  background:
    linear-gradient(180deg, rgba(48, 27, 29, .04), rgba(48, 27, 29, .28)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #8f704e !important;
}

html[data-ui-theme='hd-2d'] #boot-splash::before,
html[data-ui-theme='hd-2d'] #auth-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 6%, rgba(255, 218, 125, .4), transparent 32%),
    linear-gradient(180deg, rgba(255, 249, 222, .02), rgba(42, 24, 27, .34));
}

html[data-ui-theme='hd-2d'] .boot-splash-inner,
html[data-ui-theme='hd-2d'] .auth-gate-panel {
  position: relative;
  color: #392037 !important;
  border: 3px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: var(--hd2d-carved-shadow) !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] .boot-board {
  border: 5px solid #6b3b22 !important;
  background: conic-gradient(from 22.5deg,
    #e6a56f 0 25%, #afbf76 0 50%, #9d8eb8 0 75%, #dd795f 0) !important;
  box-shadow:
    0 0 0 3px #e4ae50,
    0 0 0 6px #392037,
    0 8px 0 #6b3b22,
    0 14px 24px rgba(49, 27, 29, .3) !important;
}

html[data-ui-theme='hd-2d'] .boot-board::before,
html[data-ui-theme='hd-2d'] .boot-board::after {
  border-color: #392037 !important;
  background: #fff0ce !important;
}

html[data-ui-theme='hd-2d'] .boot-marble,
html[data-ui-theme='hd-2d'] .boot-home {
  border: 2px solid #392037 !important;
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .6), 2px 3px 0 #6b3b22 !important;
}

html[data-ui-theme='hd-2d'] .boot-title,
html[data-ui-theme='hd-2d'] .auth-gate-panel h1 {
  color: #392037 !important;
  text-shadow: 0 2px 0 #fff7dc !important;
}

html[data-ui-theme='hd-2d'] .boot-splash-state,
html[data-ui-theme='hd-2d'] .auth-gate-panel p,
html[data-ui-theme='hd-2d'] #auth-gate-state {
  color: #765954 !important;
}

html[data-ui-theme='hd-2d'] .auth-gate-warn,
html[data-ui-theme='hd-2d'] .auth-gate-field,
html[data-ui-theme='hd-2d'] .auth-gate-divider {
  color: #594052 !important;
  border-color: rgba(57, 32, 55, .28) !important;
  background: rgba(255, 249, 228, .68) !important;
}

html[data-ui-theme='hd-2d'] .auth-gate-field input {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #fff9e7 !important;
  box-shadow: inset 0 3px 0 rgba(114, 65, 34, .14) !important;
}

html[data-ui-theme='hd-2d'] .auth-gate-btn,
html[data-ui-theme='hd-2d'] .auth-gate-btn.primary {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #fff8e4, #efd29c) !important;
  box-shadow: 0 4px 0 #a85f32, 0 7px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] .auth-gate-btn.primary {
  background: linear-gradient(180deg, #f8aa87, #dc6e59) !important;
}

html[data-ui-theme='hd-2d'] .auth-gate-btn:active,
html[data-ui-theme='hd-2d'] .auth-gate-btn.primary:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #a85f32, 0 3px 0 #392037 !important;
}

/* -------------------------------------------------------------------------- */
/* Gameplay courtyard, board surround, HUD, cards, and player plates          */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] #app {
  position: relative;
  isolation: isolate;
  z-index: 0;
  overflow: hidden;
  color: #392037;
  border-inline-color: rgba(255, 231, 173, .2);
  background: #7d6248 !important;
  box-shadow: 0 0 0 5px rgba(57, 32, 55, .34), 0 0 32px rgba(17, 10, 12, .48);
}

/* The courtyard lives on its own composited layer, so a small depth-of-field
   blur never touches the board canvas, holes, marbles, cards, or HUD. */
html[data-ui-theme='hd-2d'] #app::before {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(41, 24, 26, .01) 0 58%, rgba(41, 24, 26, .28) 100%),
    var(--hd2d-village-image) center top / cover no-repeat,
    #7d6248;
  filter: blur(2.4px) saturate(1.03);
  transform: scale(1.015);
  transform-origin: center;
}

html[data-ui-theme='hd-2d'] #board-wrap {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 222, 143, .18), transparent 57%),
    transparent !important;
}

html[data-ui-theme='hd-2d'] #board-wrap::before {
  opacity: .34 !important;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 54%, rgba(48, 26, 28, .36) 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0, 0, 0, .48) 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0, 0, 0, .48) 87%, transparent 100%);
}

html[data-ui-theme='hd-2d'] #board-wrap::after {
  opacity: .2 !important;
  animation: none !important;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 57%, rgba(255, 215, 128, .2) 79%, rgba(58, 31, 29, .32) 100%),
    repeating-linear-gradient(112deg, transparent 0 23px, rgba(74, 40, 31, .04) 24px 25px) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .42) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .42) 88%, transparent 100%);
}

html[data-ui-theme='hd-2d'] #board {
  filter:
    drop-shadow(0 5px 0 #6b3b22)
    drop-shadow(0 8px 0 #392037)
    drop-shadow(0 14px 12px rgba(43, 23, 25, .32)) !important;
}

html[data-ui-theme='hd-2d'] .ibtn,
html[data-ui-theme='hd-2d'] #btn-menu,
html[data-ui-theme='hd-2d'] #btn-speed,
html[data-ui-theme='hd-2d'] #btn-sound {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background:
    repeating-linear-gradient(0deg, rgba(92, 51, 32, .025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #fff9e8, #efd09a) !important;
  box-shadow:
    0 3px 0 #a65f32,
    0 6px 0 #392037,
    0 10px 14px rgba(42, 24, 26, .2),
    inset 0 2px 0 rgba(255, 255, 255, .72) !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
}

html[data-ui-theme='hd-2d'] .ibtn:active,
html[data-ui-theme='hd-2d'] #btn-menu:active,
html[data-ui-theme='hd-2d'] #btn-speed:active,
html[data-ui-theme='hd-2d'] #btn-sound:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #a65f32, 0 3px 0 #392037, inset 0 2px 0 rgba(255, 255, 255, .62) !important;
  filter: saturate(.96) !important;
}

html[data-ui-theme='hd-2d'] body #jk-connection-status {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #fff8e3, #efd19b) !important;
  box-shadow: 0 3px 0 #9a592f, 0 5px 0 #392037 !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #jk-connection-status .jk-connection-dot {
  border: 1px solid #392037;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .52) !important;
}

html[data-ui-theme='hd-2d'] body #jk-connection-status[data-state='online'] .jk-connection-dot {
  background: #5aaa58 !important;
}

html[data-ui-theme='hd-2d'] body #jk-connection-status[data-state='reconnecting'] .jk-connection-dot {
  background: #dca54a !important;
  animation: none !important;
}

html[data-ui-theme='hd-2d'] body #jk-connection-status[data-state='offline'] .jk-connection-dot {
  background: #b34b46 !important;
}

html[data-ui-theme='hd-2d'] .plate {
  opacity: 1 !important;
  filter: none !important;
}

html[data-ui-theme='hd-2d'] .plate .av {
  border: 3px solid #392037 !important;
  box-shadow:
    0 3px 0 #714021,
    0 6px 0 #392037,
    0 10px 15px rgba(43, 23, 25, .26),
    inset 0 0 0 3px rgba(255, 244, 207, .34) !important;
  filter: saturate(.94) contrast(1.04) !important;
}

html[data-ui-theme='hd-2d'] #plate-0 .av { background: #dc6654 !important; }
html[data-ui-theme='hd-2d'] #plate-1 .av { background: #6378d7 !important; }
html[data-ui-theme='hd-2d'] #plate-2 .av { background: #e8ad3e !important; }
html[data-ui-theme='hd-2d'] #plate-3 .av { background: #4fa28b !important; }

html[data-ui-theme='hd-2d'] .plate.active .av {
  animation: none !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 3px 0 #714021,
    0 6px 0 #392037,
    0 0 0 4px rgba(255, 222, 138, .74),
    0 11px 18px rgba(43, 23, 25, .28),
    inset 0 0 0 3px rgba(255, 244, 207, .4) !important;
}

html[data-ui-theme='hd-2d'] .plate .nm-pill {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #fff8e4, #efd19b) !important;
  box-shadow: 0 2px 0 #9d5930, 0 4px 0 #392037 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] .plate.active .nm-pill {
  background: linear-gradient(180deg, #ffe8a3, #dfaa49) !important;
}

html[data-ui-theme='hd-2d'] .plate .nm {
  color: #392037 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] .plate .seat-title {
  color: #795d59 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] .plate .mc {
  border: 1.5px solid #f9d98e !important;
  background: var(--card-back-bg) !important;
  box-shadow:
    1px 2px 0 #6d3d27,
    2px 3px 0 #392037,
    inset 0 0 0 1px rgba(255, 255, 255, .24) !important;
}

html[data-ui-theme='hd-2d'] #turnbar {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe9a5, #dca54a) !important;
  box-shadow: 0 3px 0 #95602a, 0 6px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #turnbar.show.mine,
html[data-ui-theme='hd-2d'] #turnbar.turn-pop {
  animation: none !important;
}

html[data-ui-theme='hd-2d'] #turnbar:not(.mine) {
  color: #392037 !important;
  background: linear-gradient(180deg, #d8cbe3, #aa91b4) !important;
}

html[data-ui-theme='hd-2d'] #burn-cta {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #f6a284, #dc6e59) !important;
  box-shadow: 0 3px 0 #9f4838, 0 6px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #burn-cta::before {
  border: 1px solid #392037;
  background: #fff0ce !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .65) !important;
}

html[data-ui-theme='hd-2d'] #burn-cta.show { animation: none !important; }

html[data-ui-theme='hd-2d'] #burn-cta:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #9f4838, 0 3px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #hand .card,
html[data-ui-theme='hd-2d'] .card.fly {
  aspect-ratio: 730 / 1002 !important;
  color: var(--hd2d-card-ink) !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--hd2d-card-face-image) center / 100% 100% no-repeat !important;
  box-shadow:
    0 3px 0 var(--hd2d-card-accent),
    0 6px 0 var(--hd2d-card-edge),
    0 11px 16px rgba(43, 23, 25, .3),
    inset 0 2px 0 rgba(255, 255, 255, .68) !important;
  filter: none !important;
}

/* Complete first-frame fallback. Once chosen for a match it stays on that
 * card through hand, flight and pile, so late image decode cannot morph it. */
html[data-ui-theme='hd-2d'] #hand .card.card-art-procedural {
  background:
    repeating-linear-gradient(2deg, rgba(101, 65, 45, .055) 0 1px, transparent 1px 11px),
    linear-gradient(145deg, #fff4d9 0%, #f4e7c6 58%, #ddc49c 100%) !important;
}

html[data-ui-theme='hd-2d'] #hand .card .face,
html[data-ui-theme='hd-2d'] .card.fly .face {
  inset: 0 !important;
  overflow: hidden;
  background: transparent !important;
}

html[data-ui-theme='hd-2d'] #hand .card .rank-art,
html[data-ui-theme='hd-2d'] .card.fly .rank-art {
  position: absolute;
  left: 10%;
  top: 7%;
  width: 28%;
  height: 20%;
  object-fit: contain;
  pointer-events: none;
}

html[data-ui-theme='hd-2d'] #hand .card .suit-art,
html[data-ui-theme='hd-2d'] .card.fly .suit-art {
  position: absolute;
  left: 24%;
  top: 31%;
  width: 52%;
  height: 40%;
  object-fit: contain;
  pointer-events: none;
}

html[data-ui-theme='hd-2d'] #hand .card::after,
html[data-ui-theme='hd-2d'] .card.fly::after {
  display: none !important;
}

html[data-ui-theme='hd-2d'] #hand .card .rank,
html[data-ui-theme='hd-2d'] #hand .card .suit,
html[data-ui-theme='hd-2d'] .card.fly .rank,
html[data-ui-theme='hd-2d'] .card.fly .suit {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .34),
    0 2px 0 rgba(77, 47, 35, .18),
    0 3px 3px rgba(49, 28, 22, .32) !important;
}

html[data-ui-theme='hd-2d'] #hand .card .rank {
  top: 9%;
  left: 14%;
  line-height: .9;
  font-family: Fraunces, Georgia, serif !important;
}

html[data-ui-theme='hd-2d'] #hand .card .rank::after {
  display: none !important;
}

html[data-ui-theme='hd-2d'] #hand .card.s-heart .rank::after { content: '♥'; }
html[data-ui-theme='hd-2d'] #hand .card.s-diamond .rank::after { content: '♦'; }
html[data-ui-theme='hd-2d'] #hand .card.s-spade .rank::after { content: '♠'; }
html[data-ui-theme='hd-2d'] #hand .card.s-club .rank::after { content: '♣'; }

html[data-ui-theme='hd-2d'] #hand .card.s-heart .face,
html[data-ui-theme='hd-2d'] #hand .card.s-diamond .face {
  --ink: var(--hd2d-card-red) !important;
}

html[data-ui-theme='hd-2d'] #hand .card.s-spade .face,
html[data-ui-theme='hd-2d'] #hand .card.s-club .face {
  --ink: var(--hd2d-card-ink) !important;
}

html[data-ui-theme='hd-2d'] #hand .card .suit,
html[data-ui-theme='hd-2d'] .card.fly .suit {
  padding-top: 8% !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(39px, 12vw, 53px) !important;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.18)) drop-shadow(0 3px 2px rgba(49,28,22,.3)) !important;
}

html[data-ui-theme='hd-2d'] .plate .mc {
  border: 0 !important;
  background: var(--hd2d-card-back-image) center / 122.7% 112.9% no-repeat !important;
  box-shadow: 0 1px 3px rgba(43, 23, 25, .4) !important;
}

html[data-ui-theme='hd-2d'] #hand .card.sel,
html[data-ui-theme='hd-2d'] #hand .card.peek {
  animation: none !important;
  border-color: #392037 !important;
  transform: translateY(-11px) rotate(-.5deg) !important;
  box-shadow:
    0 5px 0 #c8a66b,
    0 9px 0 #392037,
    0 15px 22px rgba(43, 23, 25, .3),
    inset 0 2px 0 rgba(255, 255, 255, .7) !important;
}

html[data-ui-theme='hd-2d'] #hand .card.toss {
  animation: none !important;
  outline: 3px solid #bd5147 !important;
  outline-offset: 2px;
}

html[data-ui-theme='hd-2d'] body #hand.wait,
html[data-ui-theme='hd-2d'] body #hand .card.dead,
html[data-ui-theme='hd-2d'] body #hand .card.toss {
  opacity: 1 !important;
  filter: none !important;
}

html[data-ui-theme='hd-2d'] .preplay-queued {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #f5d98f !important;
  box-shadow: 0 3px 0 #9b5b2f, 0 5px 0 #392037 !important;
  text-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* Menu shell, navigation, and repeated village UI primitives                 */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] #menu {
  color: #392037 !important;
  background:
    linear-gradient(180deg, rgba(46, 25, 28, .08), rgba(46, 25, 28, .32)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #82664a !important;
}

html[data-ui-theme='hd-2d'] #menu::before {
  opacity: .28 !important;
  background:
    linear-gradient(180deg, rgba(255, 224, 148, .18), transparent 34%),
    repeating-linear-gradient(108deg, transparent 0 24px, rgba(59, 31, 31, .035) 25px 26px) !important;
}

html[data-ui-theme='hd-2d'] #menu-fx {
  opacity: .18 !important;
  filter: sepia(.12) saturate(.7) contrast(.96) !important;
  mix-blend-mode: multiply;
}

html[data-ui-theme='hd-2d'] #m-top {
  color: #392037 !important;
  border-bottom: 3px solid #392037 !important;
  background:
    repeating-linear-gradient(0deg, rgba(87, 48, 31, .025) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(255, 249, 229, .98), rgba(239, 210, 156, .98)) !important;
  box-shadow: 0 4px 0 #a55f33, 0 7px 0 #392037, 0 12px 20px rgba(42, 24, 26, .2) !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] #m-top .icon-btn,
html[data-ui-theme='hd-2d'] #top-profile,
html[data-ui-theme='hd-2d'] #top-settings,
html[data-ui-theme='hd-2d'] #top-friends,
html[data-ui-theme='hd-2d'] #coin-plus,
html[data-ui-theme='hd-2d'] #top-trophies {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #fff7dc, #eac98d) !important;
  box-shadow: 0 2px 0 #9b592f, 0 4px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #m-top .icon-btn:active,
html[data-ui-theme='hd-2d'] #top-settings:active,
html[data-ui-theme='hd-2d'] #top-friends:active,
html[data-ui-theme='hd-2d'] #coin-plus:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #9b592f, 0 2px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu #top-profile .nm,
html[data-ui-theme='hd-2d'] body #menu #top-profile .ttl {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #top-profile .rk {
  color: #a54842 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #m-top .coin-pill {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe9a2, #dca54a) !important;
  box-shadow: 0 2px 0 #925622, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #m-top #m-coins {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #menu .pane-title,
html[data-ui-theme='hd-2d'] #menu h1,
html[data-ui-theme='hd-2d'] #menu h2,
html[data-ui-theme='hd-2d'] #menu h3,
html[data-ui-theme='hd-2d'] #menu .sec-label {
  color: #392037 !important;
  text-shadow: 0 1px 0 rgba(255, 249, 226, .78) !important;
}

html[data-ui-theme='hd-2d'] #menu .wood-panel,
html[data-ui-theme='hd-2d'] #menu .settings-card,
html[data-ui-theme='hd-2d'] #menu .profile-card,
html[data-ui-theme='hd-2d'] #menu .fr-card,
html[data-ui-theme='hd-2d'] #menu .qrow,
html[data-ui-theme='hd-2d'] #menu .home-card,
html[data-ui-theme='hd-2d'] #menu .arena-card,
html[data-ui-theme='hd-2d'] #menu .daily-card {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: var(--hd2d-carved-shadow) !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] #menu .m-dim,
html[data-ui-theme='hd-2d'] #menu .muted,
html[data-ui-theme='hd-2d'] #menu .sub,
html[data-ui-theme='hd-2d'] #menu small {
  color: #7a5d59 !important;
}

html[data-ui-theme='hd-2d'] #menu .m-btn,
html[data-ui-theme='hd-2d'] #menu .m-mini,
html[data-ui-theme='hd-2d'] #menu button.primary,
html[data-ui-theme='hd-2d'] #menu .primary-cta {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background:
    repeating-linear-gradient(0deg, rgba(87, 48, 31, .025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #fff9e5, #edcd95) !important;
  box-shadow: 0 3px 0 #a45d31, 0 6px 0 #392037 !important;
  text-shadow: none !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
}

html[data-ui-theme='hd-2d'] #menu button.primary,
html[data-ui-theme='hd-2d'] #menu .primary-cta {
  background: linear-gradient(180deg, #f6a383, #dc6e59) !important;
}

html[data-ui-theme='hd-2d'] #menu .m-btn:active,
html[data-ui-theme='hd-2d'] #menu .m-mini:active,
html[data-ui-theme='hd-2d'] #menu button.primary:active,
html[data-ui-theme='hd-2d'] #menu .primary-cta:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #a45d31, 0 3px 0 #392037 !important;
  filter: saturate(.95) !important;
}

html[data-ui-theme='hd-2d'] #menu-nav {
  border-top: 3px solid #392037 !important;
  background:
    repeating-linear-gradient(0deg, rgba(87, 48, 31, .022) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #f7dfae, #fff4d7) !important;
  box-shadow: 0 -4px 0 #a15a30, 0 -7px 0 #392037 !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] #menu-nav .nav-btn {
  color: #7b605e !important;
}

html[data-ui-theme='hd-2d'] #menu-nav .nav-btn .ni {
  color: #594052 !important;
  border: 2px solid transparent;
  filter: none !important;
}

html[data-ui-theme='hd-2d'] #menu-nav .nav-btn.active {
  color: #392037 !important;
}

html[data-ui-theme='hd-2d'] #menu-nav .nav-btn.active .ni {
  color: #392037 !important;
  border-color: #392037;
  background: linear-gradient(180deg, #ffe49a, #dca54a) !important;
  box-shadow: 0 2px 0 #905322, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #pane-home .home-logo,
html[data-ui-theme='hd-2d'] #pane-home .hero-title {
  color: #392037 !important;
  text-shadow: 0 2px 0 #fff3cc, 0 4px 0 rgba(108, 62, 34, .45) !important;
}

html[data-ui-theme='hd-2d'] #pane-home #m-play.home-btn-play,
html[data-ui-theme='hd-2d'] #pane-home #m-teamup.home-btn-team {
  color: #392037 !important;
  border: 3px solid #392037 !important;
  background: linear-gradient(180deg, #f7a686, #dc6e59) !important;
  box-shadow: 0 4px 0 #9e4939, 0 8px 0 #392037, 0 13px 22px rgba(42, 24, 26, .24) !important;
  text-shadow: none !important;
  animation: none !important;
}

html[data-ui-theme='hd-2d'] #pane-home #m-teamup.home-btn-team {
  background: linear-gradient(180deg, #d9dda6, #aebd77) !important;
}

html[data-ui-theme='hd-2d'] #pane-home #m-play.home-btn-play:active,
html[data-ui-theme='hd-2d'] #pane-home #m-teamup.home-btn-team:active {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 #9e4939, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home #m-teamup,
html[data-ui-theme='hd-2d'] body #menu #pane-home #m-teamup *,
html[data-ui-theme='hd-2d'] body #menu #pane-home #m-whoami,
html[data-ui-theme='hd-2d'] body #menu #pane-home #m-whoami b {
  color: #392037 !important;
  -webkit-text-fill-color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home #m-teamup #hbt-sub {
  color: #735956 !important;
  -webkit-text-fill-color: #735956 !important;
}

html[data-ui-theme='hd-2d'] #pane-profile .prof-id-card,
html[data-ui-theme='hd-2d'] #pane-profile .profile-stat,
html[data-ui-theme='hd-2d'] #pane-friends .fr-player-row,
html[data-ui-theme='hd-2d'] #pane-quests .qrow {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 3px 0 #9f5b31, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] .prof-avatar,
html[data-ui-theme='hd-2d'] .fr-avatar {
  border: 3px solid #392037 !important;
  background: linear-gradient(145deg, #c8b7d6, #9c89b7) !important;
  box-shadow: 0 3px 0 #774c37, 0 6px 0 #392037 !important;
}

/* -------------------------------------------------------------------------- */
/* Settings and theme selector                                                */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] #menu #pane-settings {
  color: #392037 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .settings-tabs {
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #7f5030, #5a311e) !important;
  box-shadow: 0 3px 0 #392037, inset 0 2px 0 rgba(255, 231, 177, .24) !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .settings-tab {
  color: #f3d9aa !important;
  text-shadow: 0 1px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .settings-tab.active {
  color: #392037 !important;
  background: linear-gradient(180deg, #fff7dc, #e9c687) !important;
  box-shadow: 0 2px 0 #a05b31, inset 0 2px 0 rgba(255, 255, 255, .68) !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #menu #pane-settings .settings-card,
html[data-ui-theme='hd-2d'] #pane-settings .theme-intro,
html[data-ui-theme='hd-2d'] #pane-settings .theme-choice,
html[data-ui-theme='hd-2d'] #pane-settings .theme-detail-strip > span {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 3px 0 #9f5b31, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .theme-intro {
  background:
    linear-gradient(90deg, rgba(255, 242, 203, .94), rgba(239, 207, 151, .92)),
    var(--hd2d-village-image) right 18% / 46% auto no-repeat !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .theme-intro-kicker,
html[data-ui-theme='hd-2d'] #pane-settings .theme-choice-copy small,
html[data-ui-theme='hd-2d'] #pane-settings .theme-detail-strip b {
  color: #a64c40 !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .theme-intro h3,
html[data-ui-theme='hd-2d'] #pane-settings .theme-choice-top strong {
  color: #392037 !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .theme-intro p,
html[data-ui-theme='hd-2d'] #pane-settings .theme-choice-copy > span:last-child,
html[data-ui-theme='hd-2d'] #pane-settings .theme-detail-strip > span {
  color: #765b57 !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .theme-choice.selected {
  background: linear-gradient(145deg, #fff8df, #f3dda8) !important;
  box-shadow: 0 5px 0 #b16a38, 0 8px 0 #392037, 0 14px 22px rgba(42, 24, 26, .22) !important;
  transform: translateY(-1px);
}

html[data-ui-theme='hd-2d'] #pane-settings .theme-choice-top em {
  color: #755b57 !important;
  border: 2px solid #392037 !important;
  background: #fff6dc !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .theme-choice.selected .theme-choice-top em {
  color: #392037 !important;
  background: linear-gradient(180deg, #ffe7a0, #dca54a) !important;
}

html[data-ui-theme='hd-2d'] #menu #pane-settings .set-row {
  border-bottom: 2px dashed rgba(57, 32, 55, .22) !important;
  background: transparent !important;
}

html[data-ui-theme='hd-2d'] #menu #pane-settings .set-row:last-child {
  border-bottom: 0 !important;
}

html[data-ui-theme='hd-2d'] #menu #pane-settings .set-row .sl {
  color: #392037 !important;
}

html[data-ui-theme='hd-2d'] #menu #pane-settings .set-ico {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(145deg, #d7dda7, #aebd77) !important;
  box-shadow: 0 2px 0 #7a5b30, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .toggle {
  border: 2px solid #392037 !important;
  background: #c8a977 !important;
  box-shadow: inset 2px 2px 0 rgba(57, 32, 55, .18) !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .toggle.on {
  background: #7ca889 !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .toggle .knob {
  border: 2px solid #392037 !important;
  background: #fff3d3 !important;
  box-shadow: 0 2px 0 #7b482b !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .seg {
  border: 2px solid #392037 !important;
  background: #d6b985 !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .seg button {
  color: #665057 !important;
}

html[data-ui-theme='hd-2d'] #pane-settings .seg button.on {
  color: #392037 !important;
  background: linear-gradient(180deg, #ffe7a0, #dca54a) !important;
  box-shadow: 0 2px 0 #7c4a25 !important;
}

/* -------------------------------------------------------------------------- */
/* Public quick match / pregame                                               */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] #pregame {
  color: var(--sq-ivory, #f6edd8) !important;
  background:
    linear-gradient(180deg, rgba(10, 6, 14, .58), rgba(10, 6, 14, .16) 20%, rgba(10, 6, 14, .14) 55%, rgba(8, 4, 12, .74)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #241a2c !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-ambient {
  opacity: 1 !important;
  animation: none !important;
  background:
    radial-gradient(circle at 18% 4%, rgba(255, 205, 112, .2), transparent 34%),
    linear-gradient(180deg, transparent 58%, rgba(8, 4, 12, .5)) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-hdr {
  color: var(--sq-ivory, #f6edd8) !important;
  border-bottom: 1px solid rgba(216, 171, 90, .5) !important;
  background: linear-gradient(180deg, rgba(34, 24, 45, .95), rgba(16, 10, 22, .93)) !important;
  box-shadow: 0 1px 0 rgba(6, 3, 10, .8), 0 12px 26px rgba(8, 4, 12, .45) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-hdr-title,
html[data-ui-theme='hd-2d'] #pregame .pg-hdr-count,
html[data-ui-theme='hd-2d'] #pregame .pg-midjoin-lbl,
html[data-ui-theme='hd-2d'] #pregame .pg-status-txt {
  color: var(--sq-ivory, #f6edd8) !important;
  text-shadow: 0 1px 2px rgba(6, 3, 10, .7) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-status-txt.searching {
  color: #ffd98a !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-back-btn,
html[data-ui-theme='hd-2d'] #pregame .pg-hdr-count {
  color: #f2e3bd !important;
  border: 1px solid rgba(216, 171, 90, .55) !important;
  background: linear-gradient(180deg, #2e2138, #191021) !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .1), 0 2px 6px rgba(6, 3, 10, .55) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-live-dot,
html[data-ui-theme='hd-2d'] #pregame .pg-sc-conn.good {
  border: 1px solid rgba(6, 3, 10, .8) !important;
  background: #6fcf74 !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), 0 0 6px rgba(111, 207, 116, .55) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-priv-seg {
  border: 1px solid rgba(216, 171, 90, .4) !important;
  background: rgba(10, 6, 14, .72) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-priv-opt {
  color: #b3a488 !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-priv-opt.active {
  color: #2b1a10 !important;
  background: linear-gradient(180deg, #ffeeba 0%, #e2b25c 46%, #a4692a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 6px rgba(6, 3, 10, .45) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-midjoin {
  color: #d9cdb2 !important;
  border: 1px solid rgba(216, 171, 90, .38) !important;
  background: linear-gradient(172deg, rgba(38, 27, 48, .92), rgba(20, 13, 27, .94)) !important;
  box-shadow: 0 1px 0 rgba(6, 3, 10, .8), 0 8px 18px rgba(8, 4, 12, .4) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-midjoin-cb {
  border: 1px solid rgba(216, 171, 90, .5) !important;
  background: rgba(10, 6, 14, .8) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-board-zone {
  background: transparent !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-cinema {
  border: 1px solid rgba(216, 171, 90, .5) !important;
  background:
    radial-gradient(120% 100% at 50% -30%, rgba(255, 205, 112, .14), transparent 55%),
    linear-gradient(172deg, rgba(30, 20, 40, .88), rgba(12, 7, 18, .9)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(6, 3, 10, .7),
    inset 0 1px 0 rgba(255, 240, 205, .08),
    0 2px 0 rgba(6, 3, 10, .85), 0 14px 28px rgba(8, 4, 12, .5) !important;
  backdrop-filter: blur(6px) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-cine-halo {
  opacity: 0 !important;
  filter: none !important;
  animation: none !important;
  background: none !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-cine-rim {
  opacity: 0 !important;
  animation: none !important;
  filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-cine-sweep,
html[data-ui-theme='hd-2d'] #pregame .pg-cine-orbit,
html[data-ui-theme='hd-2d'] #pregame .pg-cine-pulse,
html[data-ui-theme='hd-2d'] #pregame .pg-orbit-marble {
  display: none !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-cine-copy {
  color: var(--sq-ivory, #f6edd8) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] #pregame #pg-cine-title {
  color: var(--sq-ivory, #f6edd8) !important;
  text-shadow: 0 1px 3px rgba(6, 3, 10, .8) !important;
}

html[data-ui-theme='hd-2d'] #pregame #pg-cine-sub {
  color: #b3a488 !important;
}

html[data-ui-theme='hd-2d'] #pregame #pg-seat-0,
html[data-ui-theme='hd-2d'] #pregame #pg-seat-1,
html[data-ui-theme='hd-2d'] #pregame #pg-seat-2,
html[data-ui-theme='hd-2d'] #pregame #pg-seat-3 {
  color: var(--sq-ivory, #f6edd8) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] #pregame #pg-seat-0 { background: transparent !important; }
html[data-ui-theme='hd-2d'] #pregame #pg-seat-1 { background: transparent !important; }
html[data-ui-theme='hd-2d'] #pregame #pg-seat-2 { background: transparent !important; }
html[data-ui-theme='hd-2d'] #pregame #pg-seat-3 { background: transparent !important; }

html[data-ui-theme='hd-2d'] #pregame .pg-sc-inner {
  color: var(--sq-ivory, #f6edd8) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-search-ring {
  border: 2px solid rgba(216, 171, 90, .3) !important;
  border-top-color: #ffe9ad !important;
  box-shadow: 0 0 10px rgba(255, 205, 112, .18) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-sc-name,
html[data-ui-theme='hd-2d'] #pregame .pg-sc-search-lbl {
  color: var(--sq-ivory, #f6edd8) !important;
  text-shadow: 0 1px 2px rgba(6, 3, 10, .7) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-sc-title,
html[data-ui-theme='hd-2d'] #pregame .pg-sc-searching::after {
  color: #cfa75d !important;
  text-shadow: 0 1px 2px rgba(6, 3, 10, .6) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-sc-av {
  border-width: 2px !important;
  border-style: solid !important;
  box-shadow: 0 0 0 1px rgba(6, 3, 10, .8), 0 4px 10px rgba(6, 3, 10, .5) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-you-badge {
  color: #2b1a10 !important;
  border: 1px solid rgba(6, 3, 10, .7) !important;
  background: linear-gradient(180deg, #ffeeba 0%, #e2b25c 46%, #a4692a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px rgba(6, 3, 10, .5) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-bottom {
  border-top: 0 !important;
  background: linear-gradient(180deg, transparent, rgba(8, 4, 12, .74) 40%, rgba(8, 4, 12, .92)) !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #pregame #pg-start.pg-start-btn {
  color: #2b1a10 !important;
  border: 1px solid #8a5f28 !important;
  background: linear-gradient(180deg, #ffeeba 0%, #e2b25c 46%, #a4692a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(122, 79, 26, .55),
    0 3px 0 #5f4118, 0 8px 18px rgba(8, 4, 12, .5),
    0 0 22px rgba(255, 205, 112, .22) !important;
  text-shadow: 0 1px 0 rgba(255, 245, 214, .5) !important;
}

html[data-ui-theme='hd-2d'] #pregame #pg-start.pg-start-btn:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -1px 0 rgba(122, 79, 26, .5),
    0 1px 0 #5f4118, 0 4px 10px rgba(8, 4, 12, .5) !important;
}

html[data-ui-theme='hd-2d'] #pregame #pg-leave-btn.pg-act-leave {
  color: #d9cdb2 !important;
  border: 1px solid rgba(216, 171, 90, .4) !important;
  background: rgba(16, 10, 22, .75) !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .07), 0 2px 8px rgba(6, 3, 10, .5) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-sheet-bd {
  background: rgba(6, 3, 10, .6) !important;
  backdrop-filter: blur(4px) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-sheet {
  color: var(--sq-ivory, #f6edd8) !important;
  border: 1px solid rgba(216, 171, 90, .5) !important;
  background: linear-gradient(180deg, #241a2c, #140d1c) !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .08), 0 -12px 32px rgba(6, 3, 10, .6) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-sheet-handle {
  background: #4a3a58 !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-sheet-title,
html[data-ui-theme='hd-2d'] #pregame .pg-sheet-x {
  color: var(--sq-ivory, #f6edd8) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-sheet-tabs {
  border: 1px solid rgba(216, 171, 90, .35) !important;
  background: rgba(10, 6, 14, .75) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-stab {
  color: #b3a488 !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-stab.active {
  color: #2b1a10 !important;
  background: linear-gradient(180deg, #ffeeba 0%, #e2b25c 46%, #a4692a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 6px rgba(6, 3, 10, .45) !important;
}

html[data-ui-theme='hd-2d'] #pregame .pg-toast {
  color: var(--sq-ivory, #f6edd8) !important;
  border: 1px solid rgba(216, 171, 90, .5) !important;
  background: rgba(22, 15, 30, .95) !important;
  box-shadow: 0 2px 0 rgba(6, 3, 10, .85), 0 10px 22px rgba(8, 4, 12, .5) !important;
}

/* The modern runtime shop is created dynamically by shop2.js. Keep it in the
   same material family without changing its authored layout. */
html[data-ui-theme='hd-2d'] body #shop2 {
  color: #392037 !important;
  background:
    linear-gradient(180deg, rgba(48, 27, 29, .08), rgba(48, 27, 29, .3)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #82664a !important;
  border-inline-color: rgba(255, 232, 178, .26) !important;
  box-shadow: 0 0 0 4px #392037, 0 18px 36px rgba(24, 14, 16, .4) !important;
}

html[data-ui-theme='hd-2d'] body #shop2::before {
  opacity: .22 !important;
  background: repeating-linear-gradient(0deg, rgba(71, 38, 29, .045) 0 1px, transparent 1px 5px) !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-top,
html[data-ui-theme='hd-2d'] body #shop2 .s2-body {
  border-color: #392037 !important;
  background: rgba(239, 210, 156, .9) !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-coins,
html[data-ui-theme='hd-2d'] body #shop2 .s2-traits,
html[data-ui-theme='hd-2d'] body #shop2 .s2-variants,
html[data-ui-theme='hd-2d'] body #shop2 .s2-tab,
html[data-ui-theme='hd-2d'] body #shop2 .s2-card {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 3px 0 #94542d, 0 6px 0 #392037 !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-name,
html[data-ui-theme='hd-2d'] body #shop2 .s2-cname,
html[data-ui-theme='hd-2d'] body #shop2 .s2-kicker {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-desc,
html[data-ui-theme='hd-2d'] body #shop2 .s2-vnote {
  color: #765b57 !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-action,
html[data-ui-theme='hd-2d'] body #shop2 .s2-action.equip {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #f7a383, #dc6e59) !important;
  box-shadow: 0 3px 0 #974437, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-tab.active,
html[data-ui-theme='hd-2d'] body #shop2 .s2-card.sel {
  color: #392037 !important;
  background: #f2d68c !important;
  border-color: #392037 !important;
  box-shadow: 0 4px 0 #9c592f, 0 7px 0 #392037 !important;
}

/* -------------------------------------------------------------------------- */
/* Arena road and ranked surfaces                                             */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] #menu:not(.lobby-mode):has(#pane-arenas:not(.hidden)),
html[data-ui-theme='hd-2d'] #menu:not(.lobby-mode):has(#pane-ranked:not(.hidden)) {
  color: #392037 !important;
  background:
    linear-gradient(180deg, rgba(42, 24, 26, .05), rgba(42, 24, 26, .3)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #82664a !important;
}

html[data-ui-theme='hd-2d'] #pane-arenas.arenas-pane,
html[data-ui-theme='hd-2d'] #pane-ranked.ranked-pane,
html[data-ui-theme='hd-2d'] .arenas-road {
  color: #392037 !important;
}

html[data-ui-theme='hd-2d'] .arenas-road {
  background:
    linear-gradient(rgba(238, 211, 160, .72), rgba(112, 79, 54, .48)),
    var(--hd2d-village-image) center top / cover no-repeat !important;
}

html[data-ui-theme='hd-2d'] .arenas-road-shell,
html[data-ui-theme='hd-2d'] .arena-stop,
html[data-ui-theme='hd-2d'] .ranked-card,
html[data-ui-theme='hd-2d'] .ranked-season,
html[data-ui-theme='hd-2d'] .ranked-unlocks,
html[data-ui-theme='hd-2d'] .ranked-rewards,
html[data-ui-theme='hd-2d'] .ranked-archive,
html[data-ui-theme='hd-2d'] .ranked-leaderboard,
html[data-ui-theme='hd-2d'] .ranked-podium-card {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 3px 0 #96552d, 0 6px 0 #392037, 0 11px 18px rgba(42, 24, 26, .22) !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] .arena-stop.current,
html[data-ui-theme='hd-2d'] .arena-stop.road-handoff,
html[data-ui-theme='hd-2d'] .ranked-self-row,
html[data-ui-theme='hd-2d'] .ranked-road-current {
  color: #392037 !important;
  background: linear-gradient(145deg, #fff6db, #f0d083) !important;
  box-shadow: 0 5px 0 #a36033, 0 8px 0 #392037 !important;
  animation: none !important;
}

html[data-ui-theme='hd-2d'] .arena-stop.locked,
html[data-ui-theme='hd-2d'] .ranked-unlock.locked,
html[data-ui-theme='hd-2d'] .ranked-reward.locked {
  color: #735a57 !important;
  background: #d4bb91 !important;
  filter: sepia(.16) saturate(.65) !important;
}

html[data-ui-theme='hd-2d'] .arena-stop-badge,
html[data-ui-theme='hd-2d'] .arena-current-marker,
html[data-ui-theme='hd-2d'] .ranked-art-badge,
html[data-ui-theme='hd-2d'] .ranked-boost,
html[data-ui-theme='hd-2d'] .ranked-arena-level,
html[data-ui-theme='hd-2d'] .ranked-score {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe7a0, #dca54a) !important;
  box-shadow: 0 2px 0 #855022, 0 4px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] .arena-stop-copy,
html[data-ui-theme='hd-2d'] .ranked-top,
html[data-ui-theme='hd-2d'] .ranked-arena-main,
html[data-ui-theme='hd-2d'] .ranked-season-metrics,
html[data-ui-theme='hd-2d'] .ranked-unlocks-list,
html[data-ui-theme='hd-2d'] .ranked-reward-track,
html[data-ui-theme='hd-2d'] .ranked-archive-list,
html[data-ui-theme='hd-2d'] .ranked-board-head,
html[data-ui-theme='hd-2d'] .ranked-board-tabs,
html[data-ui-theme='hd-2d'] .ranked-row,
html[data-ui-theme='hd-2d'] .ranked-archive-row {
  color: #392037 !important;
  border-color: rgba(57, 32, 55, .28) !important;
  background: rgba(255, 247, 222, .62) !important;
}

html[data-ui-theme='hd-2d'] .ranked-road-rail,
html[data-ui-theme='hd-2d'] .ranked-progress,
html[data-ui-theme='hd-2d'] .ranked-bar,
html[data-ui-theme='hd-2d'] .ranked-road-track,
html[data-ui-theme='hd-2d'] .ov-road-track {
  border: 2px solid #392037 !important;
  background: #b99968 !important;
  box-shadow: inset 0 2px 3px rgba(57, 32, 55, .22) !important;
}

html[data-ui-theme='hd-2d'] .ranked-road-mark,
html[data-ui-theme='hd-2d'] .ranked-bar > i,
html[data-ui-theme='hd-2d'] .ranked-progress > i,
html[data-ui-theme='hd-2d'] .ranked-road-fill,
html[data-ui-theme='hd-2d'] .ov-road-fill {
  background: linear-gradient(90deg, #b77a36, #f1c966) !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] .ranked-reward,
html[data-ui-theme='hd-2d'] .ranked-unlock,
html[data-ui-theme='hd-2d'] .arena-reward-card,
html[data-ui-theme='hd-2d'] .ranked-season-reward {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #f5ddb0 !important;
  box-shadow: 0 2px 0 #8b502b, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] .ranked-screen-head,
html[data-ui-theme='hd-2d'] .ranked-action-bar {
  color: #392037 !important;
  border-color: #392037 !important;
  background: rgba(255, 240, 206, .94) !important;
  box-shadow: 0 3px 0 #9b582f, 0 6px 0 #392037 !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] .ranked-back,
html[data-ui-theme='hd-2d'] .ranked-ok,
html[data-ui-theme='hd-2d'] #arenas-claim-all {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #f7a383, #dc6e59) !important;
  box-shadow: 0 3px 0 #984537, 0 6px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] .leaderboard-avatar,
html[data-ui-theme='hd-2d'] .ranked-arena-art,
html[data-ui-theme='hd-2d'] .arena-stop-art {
  border-color: #392037 !important;
  filter: drop-shadow(0 5px 0 rgba(93, 52, 31, .66)) saturate(.88) !important;
}

/* -------------------------------------------------------------------------- */
/* Secondary gameplay controls and compact popups                             */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] #fx {
  filter: none !important;
  mix-blend-mode: normal !important;
}

html[data-ui-theme='hd-2d'] #jk-bar,
html[data-ui-theme='hd-2d'] .jk-podium-wrap,
html[data-ui-theme='hd-2d'] #jk-event,
html[data-ui-theme='hd-2d'] #jk-inv,
html[data-ui-theme='hd-2d'] #jk-timer,
html[data-ui-theme='hd-2d'] .jk-pick-box,
html[data-ui-theme='hd-2d'] #minipick {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 3px 0 #98562e, 0 6px 0 #392037 !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] .jk-label,
html[data-ui-theme='hd-2d'] #jk-podium,
html[data-ui-theme='hd-2d'] .jk-pick-nm,
html[data-ui-theme='hd-2d'] .jk-pick-tag {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] .jk-chip,
html[data-ui-theme='hd-2d'] .jk-pick-item {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #f4d8a5 !important;
  box-shadow: 0 2px 0 #89502a, 0 4px 0 #392037 !important;
  filter: none !important;
}

html[data-ui-theme='hd-2d'] .jk-chip.playable,
html[data-ui-theme='hd-2d'] .jk-pick-item:hover {
  animation: none !important;
  background: #f2d479 !important;
  box-shadow: 0 3px 0 #94552b, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #jk-timer-fill {
  background: linear-gradient(90deg, #aebd77, #e5b752) !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #popup {
  color: #392037 !important;
  border: 3px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 -4px 0 #a05b31, 0 -7px 0 #392037, 0 -16px 28px rgba(42, 24, 26, .3) !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] #popup.seven-pick {
  border: 2px solid #3b2036 !important;
  background:
    linear-gradient(180deg, rgba(91, 48, 73, .98), rgba(48, 26, 43, .99)) !important;
  box-shadow: 0 3px 0 #b86c38, 0 6px 0 #3b2036, 0 16px 28px rgba(30, 15, 24, .38) !important;
}

html[data-ui-theme='hd-2d'] #popup .seven-copy {
  color: #fff0ce !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45) !important;
}

html[data-ui-theme='hd-2d'] #popup .seven-copy span {
  color: rgba(255, 240, 206, .72) !important;
}

html[data-ui-theme='hd-2d'] #popup .pt {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #popup button,
html[data-ui-theme='hd-2d'] #popup .seven-choice {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #fff7de, #edce98) !important;
  box-shadow: 0 2px 0 #94542c, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #popup button.cancel {
  color: #88423e !important;
  background: #f4c9b2 !important;
}

html[data-ui-theme='hd-2d'] #popup .seven-mark {
  color: #3b2036 !important;
  border: 2px solid #3b2036 !important;
  background: linear-gradient(160deg, #fff5d9, #e8c27e) !important;
  box-shadow: 0 3px 0 #a35b31, 0 5px 0 #3b2036 !important;
}

html[data-ui-theme='hd-2d'] #popup .seven-choice.full,
html[data-ui-theme='hd-2d'] #popup .seven-progress-step.left {
  background: linear-gradient(180deg, #f6d878, #dc9d38) !important;
}

html[data-ui-theme='hd-2d'] #popup .seven-choice:disabled {
  color: #756b70 !important;
  border-color: #73646a !important;
  background: linear-gradient(180deg, #d8d1c5, #afa69d) !important;
  box-shadow: 0 2px 0 #4b4146 !important;
  opacity: .38 !important;
  filter: grayscale(1) saturate(.1) !important;
}

html[data-ui-theme='hd-2d'] #popup .seven-choice.cancel {
  color: #fff0ce !important;
  border: 1px solid rgba(255, 240, 206, .35) !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 2px 0 rgba(16, 8, 13, .62) !important;
}

html[data-ui-theme='hd-2d'] #toast {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #fff0ce !important;
  box-shadow: 0 3px 0 #98562e, 0 6px 0 #392037 !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}

/* -------------------------------------------------------------------------- */
/* Help, result, match intro, invite, and pause surfaces                       */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] #help,
html[data-ui-theme='hd-2d'] #overlay,
html[data-ui-theme='hd-2d'] #leave-modal,
html[data-ui-theme='hd-2d'] .fi-modal,
html[data-ui-theme='hd-2d'] #match-intro {
  background: rgba(48, 27, 30, .64) !important;
  backdrop-filter: blur(5px) saturate(.82) !important;
}

html[data-ui-theme='hd-2d'] #help-box,
html[data-ui-theme='hd-2d'] #ov-box,
html[data-ui-theme='hd-2d'] .fi-sheet,
html[data-ui-theme='hd-2d'] .mi-card,
html[data-ui-theme='hd-2d'] .preplay-card {
  color: #392037 !important;
  border: 3px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 5px 0 #9d592f, 0 9px 0 #392037, 0 18px 34px rgba(28, 16, 18, .38) !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] #help-box h2,
html[data-ui-theme='hd-2d'] #ov-box .ov-title,
html[data-ui-theme='hd-2d'] .fi-title,
html[data-ui-theme='hd-2d'] .mi-title,
html[data-ui-theme='hd-2d'] .mi-arena {
  color: #392037 !important;
  text-shadow: 0 1px 0 #fff8e2 !important;
}

html[data-ui-theme='hd-2d'] #help-box table,
html[data-ui-theme='hd-2d'] #help-box td,
html[data-ui-theme='hd-2d'] #help-box .hrow,
html[data-ui-theme='hd-2d'] .fi-code-block,
html[data-ui-theme='hd-2d'] .fi-player-row,
html[data-ui-theme='hd-2d'] .ov-team,
html[data-ui-theme='hd-2d'] .ov-rewards,
html[data-ui-theme='hd-2d'] .ov-road,
html[data-ui-theme='hd-2d'] .ov-promotion {
  color: #392037 !important;
  border-color: rgba(57, 32, 55, .28) !important;
  background: rgba(255, 248, 224, .62) !important;
}

html[data-ui-theme='hd-2d'] #help-close,
html[data-ui-theme='hd-2d'] .ov-btn,
html[data-ui-theme='hd-2d'] .fi-main-btn,
html[data-ui-theme='hd-2d'] .fi-copy-btn,
html[data-ui-theme='hd-2d'] .fi-ping-btn,
html[data-ui-theme='hd-2d'] .fi-x {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #f6a183, #dc6e59) !important;
  box-shadow: 0 3px 0 #974437, 0 6px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #ov-box .ov-band {
  color: #392037 !important;
  border-color: #392037 !important;
  background: linear-gradient(90deg, #aebd77, #f0c665, #dc8069) !important;
  box-shadow: 0 3px 0 #7e4928 !important;
}

html[data-ui-theme='hd-2d'] #ov-box .ov-label,
html[data-ui-theme='hd-2d'] #ov-box .ov-pname,
html[data-ui-theme='hd-2d'] #ov-box .ov-road-score,
html[data-ui-theme='hd-2d'] #ov-box .ov-road-arena,
html[data-ui-theme='hd-2d'] #ov-box .ov-promotion-copy,
html[data-ui-theme='hd-2d'] #ov-box .ov-promotion-kicker {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] #ov-box .ov-chip,
html[data-ui-theme='hd-2d'] #ov-box .ov-player,
html[data-ui-theme='hd-2d'] #ov-box .ov-promotion-art {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #f4dba8 !important;
  box-shadow: 0 2px 0 #8a502b, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #ov-box .ov-marble-ring,
html[data-ui-theme='hd-2d'] #ov-box .ov-avatar-ring {
  border-color: #392037 !important;
  box-shadow: 0 3px 0 #84502e, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] #ov-box.ov-lost {
  filter: sepia(.08) saturate(.82) !important;
}

html[data-ui-theme='hd-2d'] #ov-box.ov-claimed,
html[data-ui-theme='hd-2d'] #ov-box .ov-claimed {
  animation: none !important;
}

html[data-ui-theme='hd-2d'] .mi-top,
html[data-ui-theme='hd-2d'] .mi-body,
html[data-ui-theme='hd-2d'] .mi-teams,
html[data-ui-theme='hd-2d'] .mi-team {
  color: #392037 !important;
  border-color: rgba(57, 32, 55, .24) !important;
}

html[data-ui-theme='hd-2d'] .mi-mode,
html[data-ui-theme='hd-2d'] .mi-vs {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe8a0, #dca54a) !important;
  box-shadow: 0 2px 0 #844d21, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] .mi-avatar {
  border: 3px solid #392037 !important;
  box-shadow: 0 3px 0 #86502e, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] .mi-rail {
  border: 2px solid #392037 !important;
  background: #b79564 !important;
  box-shadow: inset 0 2px 3px rgba(57, 32, 55, .2) !important;
}

html[data-ui-theme='hd-2d'] .mi-rail-fill {
  background: linear-gradient(90deg, #aebd77, #f0c566) !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] .fi-header,
html[data-ui-theme='hd-2d'] .fi-code-row,
html[data-ui-theme='hd-2d'] .fi-actions {
  color: #392037 !important;
  border-color: rgba(57, 32, 55, .26) !important;
}

html[data-ui-theme='hd-2d'] .fi-code-val,
html[data-ui-theme='hd-2d'] .fi-player-name {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] .fi-timer-ring {
  stroke: #dca54a !important;
  filter: none !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-box {
  color: #392037 !important;
  border: 3px solid #392037 !important;
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 212, 111, .28), transparent 32%),
    var(--hd2d-panel) !important;
  box-shadow: 0 6px 0 #9e5a30, 0 10px 0 #392037, 0 20px 38px rgba(28, 16, 18, .38) !important;
  backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-box::before {
  opacity: .18 !important;
  background: repeating-linear-gradient(0deg, rgba(80, 43, 31, .04) 0 1px, transparent 1px 5px) !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-icon {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe79d, #dca54a) !important;
  box-shadow: 0 3px 0 #865021, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-icon svg {
  stroke: #392037 !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-box h3 {
  color: #392037 !important;
  text-shadow: 0 1px 0 #fff8e2 !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-box p {
  color: #765b57 !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-stay,
html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-go {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #f6a183, #dc6e59) !important;
  box-shadow: 0 3px 0 #974437, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-forfeit-btn {
  color: #8e403d !important;
  border: 2px solid #392037 !important;
  background: #f7cfba !important;
  box-shadow: 0 3px 0 #9a5934, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-timer {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #f3d688 !important;
  box-shadow: 0 3px 0 #8a5125, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-timer .lm-ring {
  stroke: rgba(57, 32, 55, .2) !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-timer .lm-arc {
  stroke: #b75147 !important;
}

html[data-ui-theme='hd-2d'] body #leave-modal #leave-modal-timer .lm-num {
  color: #392037 !important;
}

/* Physical celebration: petals, carved tokens, and paper flecks; never glow. */
html[data-ui-theme='hd-2d'] #victory-fx i,
html[data-ui-theme='hd-2d'] #victory-fx div {
  border: 1.5px solid #392037 !important;
  box-shadow: 0 2px 0 rgba(91, 50, 32, .76), 0 3px 0 rgba(57, 32, 55, .72) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html[data-ui-theme='hd-2d'] .vfx-spark {
  border-radius: 3px 8px 3px 8px !important;
  box-shadow: 0 2px 0 #6b3b22 !important;
}

html[data-ui-theme='hd-2d'] .vfx-lantern {
  border-radius: 42% 42% 48% 48% !important;
}

/* -------------------------------------------------------------------------- */
/* Authoritative HD-2D cascade repair                                         */
/*                                                                            */
/* The shared visual layer intentionally owns layout. These selectors only    */
/* restore HD-2D materials where its stronger runtime roots otherwise leak    */
/* Midnight Majlis colors into this theme.                                    */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] body #boot-splash,
html[data-ui-theme='hd-2d'] body #auth-gate {
  color: #392037 !important;
  background:
    linear-gradient(180deg, rgba(48, 27, 29, .04), rgba(48, 27, 29, .28)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #8f704e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #boot-splash .boot-splash-inner,
html[data-ui-theme='hd-2d'] body #auth-gate .auth-gate-panel {
  color: #392037 !important;
  border: 3px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: var(--hd2d-carved-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #boot-splash :is(.boot-board, .boot-marble, .boot-home) {
  animation: none !important;
}

html[data-ui-theme='hd-2d'] body #auth-gate .auth-gate-panel::before {
  height: 3px !important;
  opacity: 1 !important;
  background: linear-gradient(90deg, transparent, #dca54a 20% 80%, transparent) !important;
}

html[data-ui-theme='hd-2d'] body #auth-gate .auth-gate-mark {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe7a0, #dca54a) !important;
  box-shadow: 0 3px 0 #865021, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #boot-splash .boot-title,
html[data-ui-theme='hd-2d'] body #auth-gate h1,
html[data-ui-theme='hd-2d'] body #auth-gate h2 {
  color: #392037 !important;
  text-shadow: 0 2px 0 #fff7dc !important;
}

html[data-ui-theme='hd-2d'] body #boot-splash .boot-splash-state,
html[data-ui-theme='hd-2d'] body #auth-gate #auth-gate-state,
html[data-ui-theme='hd-2d'] body #auth-gate-state,
html[data-ui-theme='hd-2d'] body #auth-gate .auth-gate-panel p {
  color: #765b57 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #auth-gate .auth-gate-btn {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #fff8e4, #efd29c) !important;
  box-shadow: 0 4px 0 #a85f32, 0 7px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #auth-gate .auth-gate-btn.primary {
  background: linear-gradient(180deg, #f8aa87, #dc6e59) !important;
}

html[data-ui-theme='hd-2d'] body #auth-gate .auth-gate-warn {
  color: #8e403d !important;
  border: 2px solid rgba(142, 64, 61, .42) !important;
  background: #f7cfba !important;
}

html[data-ui-theme='hd-2d'] body #menu #pane-home::before {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 232, 178, .1) 35%, rgba(57, 32, 55, .32) 100%) !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.home-kicker, .home-tagline, .hbp-label, .play-main, .hbp-sub, .play-sub, .hbt-label) {
  color: #392037 !important;
  -webkit-text-fill-color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.hbt-sub, #m-status) {
  color: #735956 !important;
  -webkit-text-fill-color: #735956 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #home-resume {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 3px 0 #9f5b31, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu #home-resume :is(.hr-label, .hr-main) {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #home-resume .hr-sub {
  color: #765b57 !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.fr-code-card, .fr-auth-card, .fr-add, .fr-chat, .fr-stats > span, .m-friend, .prof-id-card, .profile-stat-strip, .prof-progress-card, .prof-icon-picker, .qline) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 3px 0 #9f5b31, 0 6px 0 #392037 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.fr-kicker, .fr-hint, .fr-stats em, .auth-head span, .fr-chat-head span, .friend-meta, .prof-arena-copy span, .profile-stat span, .prof-progress-meta, .prof-next-row) {
  color: #765b57 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(#m-code, .fr-stats b, #auth-state, .fr-chat-head b, .m-friend .nm, .m-friend .friend-title, .chat-msg b) {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(input, textarea, select, .fr-search) {
  color: #392037 !important;
  caret-color: #a64c40 !important;
  border-color: rgba(57, 32, 55, .34) !important;
  background: #fff8e1 !important;
  box-shadow: inset 0 3px 4px rgba(74, 40, 29, .16) !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(input, textarea)::placeholder {
  color: #92746a !important;
}

html[data-ui-theme='hd-2d'] body #menu .fr-search input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu .m-friend.is-online {
  border-color: rgba(57, 122, 82, .5) !important;
  background: linear-gradient(90deg, #e3edc7, #fff4d9 46%) !important;
}

html[data-ui-theme='hd-2d'] body #menu .m-friend .dot.on {
  background: #397a52 !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .56) !important;
}

html[data-ui-theme='hd-2d'] body #menu .fr-empty {
  color: #765b57 !important;
  border: 2px dashed rgba(57, 32, 55, .38) !important;
  background: rgba(255, 248, 224, .68) !important;
}

html[data-ui-theme='hd-2d'] body #menu .fr-empty b {
  color: #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(#m-chat-log, .chat-msg) {
  color: #594052 !important;
}

html[data-ui-theme='hd-2d'] body #menu .prof-id-card::before {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 234, 176, .3), transparent 30%),
    repeating-linear-gradient(0deg, rgba(83, 45, 33, .025) 0 1px, transparent 1px 5px) !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.prof-name-val, .prof-arena-copy b, .prof-progress-title) {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.prof-title-line, .prof-trophy-pill, .prof-level-pill) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe7a0, #dca54a) !important;
  box-shadow: 0 2px 0 #855022, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu .prof-arena-summary {
  color: #392037 !important;
  border: 2px solid rgba(57, 32, 55, .32) !important;
  background: #efd29c !important;
  box-shadow: inset 0 3px 4px rgba(74, 40, 29, .16) !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.prof-icon-grid button, .prof-icon-cell, .prof-upload-btn, .prof-name-edit-btn) {
  color: #392037 !important;
  border: 2px solid rgba(57, 32, 55, .42) !important;
  background: linear-gradient(180deg, #fff8e4, #efd29c) !important;
  box-shadow: 0 2px 0 #8c502b, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.prof-icon-grid button.selected, .prof-icon-grid button.on, .prof-icon-cell.active) {
  border-color: #392037 !important;
  background: #f2d68c !important;
  box-shadow: 0 3px 0 #9c592f, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu .profile-stat {
  border-color: rgba(57, 32, 55, .22) !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.profile-stat b, .prof-progress-title > b, .prof-deep-stats > * > b) {
  color: #a64c40 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu .prof-progress-track {
  border: 2px solid #392037 !important;
  background: #b99968 !important;
  box-shadow: inset 0 3px 4px rgba(57, 32, 55, .24) !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.prof-progress-track > span, .prof-progress-track > b, #prof-progress-bar) {
  background: linear-gradient(90deg, #aebd77, #f0c665) !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu .prof-deep-stats > * {
  color: #392037 !important;
  border: 2px solid rgba(57, 32, 55, .3) !important;
  background: rgba(255, 248, 224, .72) !important;
}

html[data-ui-theme='hd-2d'] body #menu .prof-deep-stats > * > small {
  color: #765b57 !important;
}

html[data-ui-theme='hd-2d'] body #menu .qtitle {
  color: #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu .qbar {
  border: 2px solid #392037 !important;
  background: #b99968 !important;
  box-shadow: inset 0 2px 3px rgba(57, 32, 55, .22) !important;
}

html[data-ui-theme='hd-2d'] body #menu .qbar b {
  background: linear-gradient(90deg, #aebd77, #f0c665) !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu .qreward {
  color: #a64c40 !important;
}

html[data-ui-theme='hd-2d'] body #menu .hole {
  border: 2px solid #392037 !important;
  background: #744c35 !important;
  box-shadow: inset 0 3px 5px rgba(35, 18, 20, .48) !important;
}

html[data-ui-theme='hd-2d'] body #menu .hole .seed {
  background: linear-gradient(180deg, #ffe7a0, #dca54a) !important;
  box-shadow: 0 2px 0 #6b3b22 !important;
}

html[data-ui-theme='hd-2d'] body #menu .hole.today {
  border-color: #dca54a !important;
  box-shadow: inset 0 3px 5px rgba(35, 18, 20, .48), 0 0 0 2px #392037 !important;
  animation: none !important;
}

/* Public matchmaking: preserve the compact authored layout, replace only its
   dark futuristic shell with a warm carved courtyard table. */
html[data-ui-theme='hd-2d'] body #menu #pregame.pregame {
  color: #392037 !important;
  background:
    linear-gradient(180deg, rgba(49, 27, 29, .03), rgba(49, 27, 29, .22)),
    var(--hd2d-village-image) center top / cover no-repeat,
    #82664a !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame::before,
html[data-ui-theme='hd-2d'] body #menu #pregame.pregame::after,
html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-ambient {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 16% 5%, rgba(255, 214, 117, .28), transparent 32%),
    linear-gradient(180deg, transparent 55%, rgba(49, 27, 29, .25)) !important;
  animation: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-hdr {
  color: #392037 !important;
  border-bottom: 3px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 4px 0 #a15c31, 0 7px 0 #392037 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame :is(.pg-hdr-title, .pg-hdr-count, .pg-hdr-count strong, .pg-status-txt, .pg-midjoin-lbl) {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-status-txt::before,
html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-live-dot {
  background: #dca54a !important;
  border: 1px solid #392037 !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .52) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame[data-pg-ready='1'] .pg-status-txt::before,
html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-status-txt.ready-all::before {
  background: #397a52 !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame :is(.pg-back-btn, .pg-hdr-count) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe89f, #dca54a) !important;
  box-shadow: 0 2px 0 #8e5122, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-priv-seg {
  border: 2px solid #392037 !important;
  background: #c7a978 !important;
  box-shadow: inset 0 2px 0 rgba(57, 32, 55, .14) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-priv-opt {
  color: #6c5355 !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame :is(.pg-priv-opt.active, .pg-priv-opt[aria-selected='true']) {
  color: #392037 !important;
  background: #fff0ce !important;
  box-shadow: 0 2px 0 #814b2b !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-midjoin {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(145deg, #d8cbe1, #b19cbd) !important;
  box-shadow: 0 3px 0 #7c4d43, 0 5px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-midjoin-cb {
  border: 2px solid #392037 !important;
  background: #fff4d6 !important;
  box-shadow: inset 0 2px 0 rgba(57, 32, 55, .12) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-board-zone {
  border-color: #392037 !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 224, 148, .3), transparent 44%),
    linear-gradient(145deg, rgba(239, 210, 156, .94), rgba(187, 139, 88, .9)) !important;
  box-shadow: 0 5px 0 #9d592f, 0 9px 0 #392037, 0 15px 24px rgba(42, 24, 26, .24) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-board-zone::before {
  border-color: rgba(57, 32, 55, .2) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 205, .22) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-cinema {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 230, 161, .36), transparent 48%),
    linear-gradient(145deg, #efd29c, #d4ac78) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 #8e512b !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-cinema::before {
  border-color: rgba(57, 32, 55, .26) !important;
  background: rgba(255, 240, 206, .32) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-cinema::after {
  background: linear-gradient(90deg, transparent, #a64c40, transparent) !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame :is(.pg-cine-halo, .pg-cine-rim, .pg-cine-sweep, .pg-cine-orbit, .pg-cine-pulse, .pg-orbit-marble) {
  display: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-cine-copy {
  color: #392037 !important;
  border: 2px solid rgba(57, 32, 55, .34) !important;
  background: rgba(255, 247, 220, .78) !important;
  box-shadow: 0 2px 0 #8b502b !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-cine-copy b {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-cine-copy span {
  color: #765b57 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame :is(.pg-sc-searching, .pg-sc-player, .pg-seat-left .pg-sc-player, .pg-seat-right .pg-sc-player, .pg-seat-bottom .pg-sc-player) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 3px 0 #8b502b, 0 5px 0 #392037 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-sc-searching {
  border-style: dashed !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-sc-searching::before {
  display: none !important;
  animation: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-sc-searching::after {
  color: #765b57 !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-sc-inner {
  animation: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame :is(.pg-sc-name, .pg-sc-search-lbl, .pg-crown) {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame :is(.pg-sc-title, .pg-sc-sub) {
  color: #765b57 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-search-ring {
  border: 3px dashed #6b3b22 !important;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 205, .3) !important;
  animation: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-sc-conn {
  border: 1px solid #392037 !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5) !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-you-badge {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe89d, #dca54a) !important;
  box-shadow: 0 2px 0 #845022, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-bottom {
  color: #392037 !important;
  border-top: 3px solid #392037 !important;
  background: linear-gradient(180deg, #efd09b, #fff6dc) !important;
  box-shadow: 0 -4px 0 #a05b31, 0 -7px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-start-btn {
  color: #392037 !important;
  border: 3px solid #392037 !important;
  background: linear-gradient(180deg, #f7a586, #dc6e59) !important;
  box-shadow: 0 4px 0 #9b4638, 0 7px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-start-btn:disabled {
  color: #765b57 !important;
  border-color: rgba(57, 32, 55, .54) !important;
  background: #d7bd91 !important;
  box-shadow: inset 0 2px 3px rgba(57, 32, 55, .18), 0 3px 0 #70442c !important;
  opacity: 1 !important;
}

html[data-ui-theme='hd-2d'] body #menu #pregame.pregame .pg-act-leave {
  color: #88413e !important;
  border: 2px solid #392037 !important;
  background: #f9d4bd !important;
  box-shadow: 0 2px 0 #a15a36, 0 4px 0 #392037 !important;
}

/* Runtime shop2 details that sit inside the light preview and card shells. */
html[data-ui-theme='hd-2d'] body #shop2 :is(.s2-traits, .s2-variants) {
  color: #392037 !important;
  border: 2px solid rgba(57, 32, 55, .32) !important;
  background: rgba(255, 248, 224, .74) !important;
  box-shadow: inset 0 3px 4px rgba(74, 40, 29, .16) !important;
}

html[data-ui-theme='hd-2d'] body #shop2 :is(.s2-tier, .s2-ctier) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #f2d58d !important;
  box-shadow: 0 2px 0 #7d4929 !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-trait {
  color: #594052 !important;
  border-color: rgba(57, 32, 55, .2) !important;
}

html[data-ui-theme='hd-2d'] body #shop2 :is(.s2-trait.t-type, .s2-trait.t-status, .s2-vhead, .s2-sect) {
  color: #a64c40 !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-trait.t-lock {
  color: #8e403d !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-vnote,
html[data-ui-theme='hd-2d'] body #shop2 .s2-empty {
  color: #765b57 !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-vbtn {
  color: #594052 !important;
  border: 2px solid rgba(57, 32, 55, .36) !important;
  background: #fff3d4 !important;
  box-shadow: 0 2px 0 #87502c !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-vbtn.active {
  color: #392037 !important;
  border-color: #392037 !important;
  background: #f2d68c !important;
  box-shadow: 0 3px 0 #8b502b, 0 5px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-card .s2-check {
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe7a0, #dca54a) !important;
  box-shadow: 0 2px 0 #855022 !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-card .s2-check svg path {
  stroke: #392037 !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-card .s2-price {
  color: #392037 !important;
  border: 2px solid rgba(57, 32, 55, .3) !important;
  background: #efd29c !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-card .s2-price.owned,
html[data-ui-theme='hd-2d'] body #shop2 .s2-action.equipped {
  color: #285b3e !important;
  border-color: rgba(40, 91, 62, .42) !important;
  background: #dce8bf !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-card .s2-price.locked,
html[data-ui-theme='hd-2d'] body #shop2 .s2-action.locked {
  color: #8e403d !important;
  border-color: rgba(142, 64, 61, .42) !important;
  background: #f7cfba !important;
}

html[data-ui-theme='hd-2d'] body #shop2 .s2-sect::after {
  background: linear-gradient(90deg, rgba(57, 32, 55, .42), transparent) !important;
}

/* Ranked and arena road surfaces. */
html[data-ui-theme='hd-2d'] body #menu :is(.ranked-pane, .arenas-road) {
  color: #392037 !important;
  background:
    linear-gradient(rgba(238, 211, 160, .72), rgba(112, 79, 54, .48)),
    var(--hd2d-village-image) center top / cover no-repeat !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.arenas-road-shell, .arena-stop, .ranked-card, .ranked-season, .ranked-unlocks, .ranked-rewards, .ranked-archive, .ranked-leaderboard, .ranked-podium-card) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 3px 0 #96552d, 0 6px 0 #392037, 0 11px 18px rgba(42, 24, 26, .22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-card, .ranked-season, .ranked-unlocks, .ranked-rewards)::before {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #dca54a, transparent) !important;
}

html[data-ui-theme='hd-2d'] body #menu .ranked-hero {
  border-color: rgba(57, 32, 55, .24) !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 221, 137, .42), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, .2), transparent) !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-screen-head h2, .arenas-road-title, .arena-stop-copy h3, .arena-stop-copy strong, .ranked-score, .ranked-arena-main, .ranked-arena-cup) {
  color: #392037 !important;
  text-shadow: 0 1px 0 #fff8e2 !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-kicker, .ranked-top, .ranked-season-title, .ranked-unlocks-title, .ranked-rewards-title, .ranked-board-title) {
  color: #a64c40 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-art-badge, .arena-stop-badge, .ranked-boost, .ranked-arena-level, .arena-current-marker) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe7a0, #dca54a) !important;
  box-shadow: 0 2px 0 #855022, 0 4px 0 #392037 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-next, .ranked-season-metrics, .ranked-arena-strip, .arena-threshold, .ranked-row-meta, .ranked-unlock .state) {
  color: #765b57 !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-progress, .ranked-road-rail, .arena-stop-rail, .ranked-season-progress, .ranked-road-track, .ranked-bar) {
  border: 2px solid #392037 !important;
  background: #b99968 !important;
  box-shadow: inset 0 2px 3px rgba(57, 32, 55, .22) !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-bar > i, .ranked-road-current, .arena-stop-rail > i, .ranked-season-progress > i, .ranked-road-fill) {
  background: linear-gradient(90deg, #aebd77, #f0c665) !important;
  box-shadow: none !important;
  animation: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-season-reward, .ranked-unlock, .ranked-reward, .reward-node, .arena-reward-shelf, .arena-reward-card) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #f5ddb0 !important;
  box-shadow: 0 2px 0 #8b502b, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-unlock.unlocked, .ranked-reward.claimed, .reward-node.claimed, .arena-reward-shelf.claimed) {
  color: #285b3e !important;
  border-color: rgba(40, 91, 62, .5) !important;
  background: #dce8bf !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-reward.current, .reward-node.current, .arena-stop.current) {
  border-color: #392037 !important;
  background: linear-gradient(145deg, #fff6db, #f0d083) !important;
  box-shadow: 0 5px 0 #a36033, 0 8px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-reward.locked, .reward-node.locked, .arena-stop.locked) {
  color: #735a57 !important;
  background: #d4bb91 !important;
  filter: sepia(.16) saturate(.65) !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-back, .arenas-back, .ranked-ok, .arenas-claim-all, #arenas-claim-all) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #f7a383, #dc6e59) !important;
  box-shadow: 0 3px 0 #984537, 0 6px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-screen-head, .ranked-action-bar) {
  color: #392037 !important;
  border-color: #392037 !important;
  background: rgba(255, 240, 206, .94) !important;
  box-shadow: 0 3px 0 #9b582f, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #menu .ranked-board-tabs {
  border: 2px solid #392037 !important;
  background: #c8a977 !important;
  box-shadow: inset 0 2px 3px rgba(57, 32, 55, .2) !important;
}

html[data-ui-theme='hd-2d'] body #menu .ranked-board-tabs button {
  color: #6f5656 !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-board-tabs button.active, .ranked-board-tabs button[aria-selected='true']) {
  color: #392037 !important;
  background: #fff0ce !important;
  box-shadow: 0 2px 0 #7f4a2a !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-row, .ranked-archive-row) {
  color: #392037 !important;
  border-color: rgba(57, 32, 55, .24) !important;
}

html[data-ui-theme='hd-2d'] body #menu .ranked-self-row {
  color: #392037 !important;
  background: linear-gradient(90deg, rgba(220, 165, 74, .3), rgba(255, 248, 224, .54)) !important;
  box-shadow: inset 3px 0 0 #a64c40 !important;
}

html[data-ui-theme='hd-2d'] body #menu :is(.ranked-arena-art, .arena-stop-art, .leaderboard-avatar, .ranked-podium-card) {
  border-color: #392037 !important;
  filter: drop-shadow(0 5px 0 rgba(93, 52, 31, .66)) saturate(.9) !important;
}

/* Help, match results, and match intro: exact runtime roots prevent dark
   shared-dialog styles from winning the cascade. */
html[data-ui-theme='hd-2d'] body :is(#help, #overlay, #match-intro) {
  color: #392037 !important;
  background: rgba(48, 27, 30, .64) !important;
  backdrop-filter: blur(5px) saturate(.82) !important;
  -webkit-backdrop-filter: blur(5px) saturate(.82) !important;
}

html[data-ui-theme='hd-2d'] body #help #help-box,
html[data-ui-theme='hd-2d'] body #overlay #ov-box,
html[data-ui-theme='hd-2d'] body #match-intro .mi-card {
  color: #392037 !important;
  border: 3px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: 0 5px 0 #9d592f, 0 9px 0 #392037, 0 18px 34px rgba(28, 16, 18, .38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-ui-theme='hd-2d'] body #help #help-box::before,
html[data-ui-theme='hd-2d'] body #overlay #ov-box::before {
  opacity: .22 !important;
  background: repeating-linear-gradient(0deg, rgba(83, 45, 33, .04) 0 1px, transparent 1px 5px) !important;
}

html[data-ui-theme='hd-2d'] body #help #help-box :is(h2, h3),
html[data-ui-theme='hd-2d'] body #overlay #ov-box .ov-title,
html[data-ui-theme='hd-2d'] body #match-intro .mi-title {
  color: #392037 !important;
  text-shadow: 0 1px 0 #fff8e2 !important;
}

html[data-ui-theme='hd-2d'] body #help #help-box :is(.help-section, .help-row, table, td, .hrow),
html[data-ui-theme='hd-2d'] body #overlay #ov-box :is(.ov-team, .ov-rewards, .ov-road, .ov-promotion) {
  color: #392037 !important;
  border-color: rgba(57, 32, 55, .28) !important;
  background: rgba(255, 248, 224, .68) !important;
  box-shadow: inset 0 2px 3px rgba(74, 40, 29, .12) !important;
}

html[data-ui-theme='hd-2d'] body #help #help-close {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #fff8e4, #efd29c) !important;
  box-shadow: 0 2px 0 #8b502b, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #overlay #ov-box .ov-band {
  color: #392037 !important;
  border-color: #392037 !important;
  background: linear-gradient(90deg, #aebd77, #f0c665, #dc8069) !important;
  box-shadow: 0 3px 0 #7e4928 !important;
}

html[data-ui-theme='hd-2d'] body #overlay #ov-box :is(.ov-label, .ov-pname, .ov-road-score, .ov-road-arena, .ov-promotion-copy, .ov-promotion-kicker) {
  color: #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #overlay #ov-box :is(.ov-chip, .ov-player, .ov-promotion-art) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: #f4dba8 !important;
  box-shadow: 0 2px 0 #8a502b, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #overlay #ov-box :is(.ov-road-track, .ov-road) {
  border: 2px solid #392037 !important;
  background: #b99968 !important;
  box-shadow: inset 0 2px 3px rgba(57, 32, 55, .22) !important;
}

html[data-ui-theme='hd-2d'] body #overlay #ov-box :is(.ov-road-fill, .ov-road-bar, .ov-road > i) {
  background: linear-gradient(90deg, #aebd77, #f0c665) !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #overlay #ov-btn {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #f6a183, #dc6e59) !important;
  box-shadow: 0 3px 0 #974437, 0 6px 0 #392037 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #overlay .ov-menu-btn {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #fff8e4, #efd29c) !important;
  box-shadow: 0 2px 0 #8b502b, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #match-intro :is(.mi-top, .mi-body, .mi-teams) {
  color: #392037 !important;
  border-color: rgba(57, 32, 55, .24) !important;
}

html[data-ui-theme='hd-2d'] body #match-intro .mi-top {
  background: linear-gradient(90deg, #aebd77, #f0c665, #dc8069) !important;
  box-shadow: 0 3px 0 #7e4928 !important;
}

html[data-ui-theme='hd-2d'] body #match-intro .mi-team {
  color: #392037 !important;
  border: 2px solid rgba(57, 32, 55, .3) !important;
  background: #f4dba8 !important;
  box-shadow: inset 0 2px 3px rgba(74, 40, 29, .12) !important;
}

html[data-ui-theme='hd-2d'] body #match-intro :is(.mi-mode, .mi-vs) {
  color: #392037 !important;
  border: 2px solid #392037 !important;
  background: linear-gradient(180deg, #ffe8a0, #dca54a) !important;
  box-shadow: 0 2px 0 #844d21, 0 4px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #match-intro .mi-arena {
  color: #765b57 !important;
  text-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #match-intro .mi-avatar {
  border: 3px solid #392037 !important;
  box-shadow: 0 3px 0 #86502e, 0 6px 0 #392037 !important;
}

html[data-ui-theme='hd-2d'] body #match-intro .mi-rail {
  border: 2px solid #392037 !important;
  background: #b79564 !important;
  box-shadow: inset 0 2px 3px rgba(57, 32, 55, .2) !important;
}

html[data-ui-theme='hd-2d'] body #match-intro :is(.mi-rail > i, .mi-rail-fill) {
  background: linear-gradient(90deg, #aebd77, #f0c566) !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body #portrait-prompt {
  color: #392037 !important;
  background:
    linear-gradient(rgba(48, 27, 30, .6), rgba(48, 27, 30, .78)),
    var(--hd2d-village-image) center / cover no-repeat !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

html[data-ui-theme='hd-2d'] body #portrait-prompt > * {
  color: #392037 !important;
  border: 3px solid #392037 !important;
  background: var(--hd2d-panel) !important;
  box-shadow: var(--hd2d-carved-shadow) !important;
}

html[data-ui-theme='hd-2d'] body #portrait-prompt :is(p, span, small) {
  color: #765b57 !important;
}

html[data-ui-theme='hd-2d'] body #portrait-prompt svg {
  color: #a64c40 !important;
  filter: none !important;
}

/* Tactile gameplay details: warm cards and glossy painted-enamel seat tokens. */
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand .card .face,
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) .card.fly .face {
  inset: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand .card:is(.dead, .illegal, [aria-disabled='true']) {
  opacity: 1 !important;
  filter: none !important;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap #plate-0 { --hd2d-seat-enamel: radial-gradient(circle at 32% 23%, #ffc7b1 0 8%, #e8725e 24%, #c34d45 58%, #762a32 100%); }
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap #plate-1 { --hd2d-seat-enamel: radial-gradient(circle at 32% 23%, #d9e2ff 0 8%, #788ee5 24%, #4e66bd 58%, #29326e 100%); }
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap #plate-2 { --hd2d-seat-enamel: radial-gradient(circle at 32% 23%, #fff1ae 0 8%, #efbe51 24%, #ce8f2f 58%, #7c491f 100%); }
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap #plate-3 { --hd2d-seat-enamel: radial-gradient(circle at 32% 23%, #c9ead1 0 8%, #69b78e 24%, #3d886d 58%, #285344 100%); }

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .avw {
  isolation: isolate;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .avw::before,
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .avw::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .avw::before {
  z-index: -2;
  inset: -5px;
  border: 1px solid #392037;
  background: linear-gradient(145deg, #ffe3a0, #b8752e 58%, #6b3b22);
  box-shadow: 0 3px 0 #6b3b22, 0 6px 10px rgba(43, 23, 25, .28);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .avw::after {
  z-index: -1;
  inset: -2px;
  border: 1px solid rgba(255, 236, 186, .52);
  background: #6b3b22;
  box-shadow: inset 0 2px 0 rgba(255, 229, 169, .25);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .av,
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate.active .av {
  border: 2px solid #392037 !important;
  background: var(--hd2d-seat-enamel, radial-gradient(circle at 32% 23%, #fff0ce, #dc6e59 58%, #73302f)) !important;
  box-shadow:
    inset 5px 7px 9px rgba(255, 255, 255, .2),
    inset -6px -9px 12px rgba(42, 24, 26, .38),
    0 4px 7px rgba(43, 23, 25, .3) !important;
  filter: none !important;
  animation: none !important;
}

/* -------------------------------------------------------------------------- */
/* Match diorama presentation — visual-only; stage and hole geometry stay put */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap {
  --hd2d-turn-x: 50%;
  --hd2d-turn-y: 3%;
  --hd2d-turn-wash: rgba(238, 184, 70, .17);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap[data-turn-slot='0'] {
  --hd2d-turn-x: 50%; --hd2d-turn-y: 97%; --hd2d-turn-wash: rgba(215, 92, 76, .15);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap[data-turn-slot='1'] {
  --hd2d-turn-x: 0%; --hd2d-turn-y: 21%; --hd2d-turn-wash: rgba(92, 116, 209, .16);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap[data-turn-slot='2'] {
  --hd2d-turn-x: 50%; --hd2d-turn-y: 0%; --hd2d-turn-wash: rgba(238, 184, 70, .18);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap[data-turn-slot='3'] {
  --hd2d-turn-x: 100%; --hd2d-turn-y: 21%; --hd2d-turn-wash: rgba(72, 151, 121, .16);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap::before {
  background:
    radial-gradient(34% 27% at var(--hd2d-turn-x) var(--hd2d-turn-y), var(--hd2d-turn-wash), transparent 74%),
    radial-gradient(ellipse at 50% 46%, transparent 54%, rgba(48, 26, 28, .36) 100%) !important;
}

/* A hard contact shadow and a one-shot brass reflection make the board feel
   seated in the courtyard. Pseudo-elements never enter the canvas hit path. */
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #stage {
  isolation: isolate;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #stage::before {
  content: '';
  position: absolute;
  inset: 2.5%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  transform: translateY(3.2%);
  background: radial-gradient(ellipse at 50% 70%, rgba(54, 29, 25, .24), rgba(35, 20, 20, .12) 58%, transparent 74%);
  box-shadow: 0 17px 18px rgba(43, 23, 25, .24), 0 26px 30px rgba(30, 17, 18, .16);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(from 208deg, transparent 0 18%, rgba(255, 239, 184, .02) 22%, rgba(255, 222, 132, .72) 27%, rgba(255, 247, 210, .18) 31%, transparent 37% 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 89%, #000 90.5% 96%, transparent 97.5%);
  mask-image: radial-gradient(circle, transparent 0 89%, #000 90.5% 96%, transparent 97.5%);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #stage.hd2d-turn-sweep::after {
  animation: hd2dMatchRimSweep .72s cubic-bezier(.2, .72, .24, 1) both;
}

@keyframes hd2dMatchRimSweep {
  0% { opacity: 0; transform: rotate(-18deg) scale(.992); }
  22% { opacity: .9; }
  100% { opacity: 0; transform: rotate(132deg) scale(1); }
}

/* Seat medallions: enamel initials, a fastened plaque, and one authored sprite
   flourish on turn arrival. The plate boxes and their screen positions remain
   exactly as authored in rearrangePlatesForHU(). */
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate {
  isolation: isolate;
  overflow: visible;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: -1;
  width: 84px;
  height: 84px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(.72);
  transform-origin: 50% 58%;
  background: none;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate.turn-arrival::before {
  background: url('../assets/themes/hd-2d/hub/fx/station-sparkle-strip.webp') 0 0 / 800% 100% no-repeat;
  animation: hd2dSeatSparkleFrames .74s steps(7, end) both, hd2dSeatSparkleSettle .74s ease-out both;
}

@keyframes hd2dSeatSparkleFrames {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

@keyframes hd2dSeatSparkleSettle {
  0% { opacity: 0; transform: translateX(-50%) scale(.58); }
  16% { opacity: .8; }
  74% { opacity: .58; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.08); }
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .av::before {
  content: '';
  position: absolute;
  inset: 10% 16% 46% 18%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 22%, rgba(255, 255, 255, .72), rgba(255, 242, 205, .16) 48%, transparent 72%);
  transform: rotate(-18deg);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .av::after {
  content: attr(data-initial);
  position: relative;
  z-index: 1;
  color: #fff0ce;
  font: 900 20px/1 Fraunces, Georgia, serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .22), 0 2px 0 rgba(61, 31, 31, .54), 0 3px 5px rgba(42, 24, 26, .38);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .nm-pill {
  position: relative;
  isolation: isolate;
  min-height: 24px;
  padding-inline: 12px !important;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .nm-pill::before,
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .nm-pill::after {
  content: '';
  position: absolute;
  top: 50%;
  z-index: -1;
  width: 7px;
  height: 13px;
  pointer-events: none;
  border: 1px solid #4a2c24;
  background: linear-gradient(180deg, #efc96f, #9a5c2e);
  box-shadow: 0 2px 0 rgba(57, 32, 55, .78);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .nm-pill::before {
  left: -6px;
  border-radius: 7px 2px 2px 7px;
  transform: translateY(-50%) rotate(-5deg);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate .nm-pill::after {
  right: -6px;
  border-radius: 2px 7px 7px 2px;
  transform: translateY(-50%) rotate(5deg);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate.turn-arrival .nm-pill {
  animation: hd2dSeatPlaqueSettle .34s cubic-bezier(.2, .78, .22, 1) both;
}

@keyframes hd2dSeatPlaqueSettle {
  0% { transform: translateY(-4px) scale(.94); }
  64% { transform: translateY(1px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #board-wrap .plate.is-local-seat .mcs {
  display: none;
}

/* A shallow physical card tray grounds the hand without changing its flex box,
   slot fan, drag transforms, return animation, or z-order. */
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand {
  isolation: isolate;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 45px;
  z-index: 0;
  width: min(78vw, 304px);
  height: 31px;
  pointer-events: none;
  transform: translateX(-50%);
  border: 1px solid #392037;
  border-radius: 50% 50% 12px 12px / 72% 72% 12px 12px;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255, 238, 188, .18), transparent 46%),
    repeating-linear-gradient(2deg, rgba(255, 228, 165, .035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #70442c 0 24%, #3d2530 26% 68%, #241722 70% 100%);
  box-shadow:
    0 3px 0 #a76b32,
    0 6px 0 #392037,
    0 14px 20px rgba(43, 23, 25, .30),
    inset 0 2px 0 rgba(255, 228, 162, .32),
    inset 0 -6px 9px rgba(32, 17, 22, .38);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 37px;
  z-index: -1;
  width: min(74vw, 286px);
  height: 24px;
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(36, 18, 22, .34), transparent 72%);
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand .hcard {
  z-index: 1;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand .hcard.pointer-held,
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand .card.pointer-held {
  transition: none !important;
}

html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand .card.sel:not(.drag) .face,
html[data-ui-theme='hd-2d'] body:has(#menu.hidden) #hand .card.peek:not(.drag) .face {
  transform-origin: 50% 70%;
  animation: hd2dCardReady .24s cubic-bezier(.2, .8, .22, 1) both !important;
}

@keyframes hd2dCardReady {
  0% { transform: translateY(2px) scale(.97); }
  72% { transform: translateY(-1px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}

html[data-ui-theme='hd-2d'] body.perf-lite:has(#menu.hidden) #stage::after,
html[data-ui-theme='hd-2d'] body.perf-lite:has(#menu.hidden) #board-wrap .plate::before {
  display: none !important;
}

html[data-ui-theme='hd-2d'] body.reduce-motion:has(#menu.hidden) #stage::after,
html[data-ui-theme='hd-2d'] body.reduce-motion:has(#menu.hidden) #board-wrap .plate::before {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Material interaction and motion discipline                                 */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] .plate.active .av,
html[data-ui-theme='hd-2d'] #turnbar.show.mine,
html[data-ui-theme='hd-2d'] #burn-cta.show,
html[data-ui-theme='hd-2d'] .jk-chip.playable,
html[data-ui-theme='hd-2d'] .card.sel,
html[data-ui-theme='hd-2d'] .card.peek,
html[data-ui-theme='hd-2d'] .card.toss,
html[data-ui-theme='hd-2d'] #home-resume.visible,
html[data-ui-theme='hd-2d'] .pg-seat-spinner,
html[data-ui-theme='hd-2d'] .pg-search-ring,
html[data-ui-theme='hd-2d'] .thinking-dot,
html[data-ui-theme='hd-2d'] .th i,
html[data-ui-theme='hd-2d'] .arena-current-marker,
html[data-ui-theme='hd-2d'] .arena-reward-claimable,
html[data-ui-theme='hd-2d'] .ranked-road-current,
html[data-ui-theme='hd-2d'] #ov-box.ov-claimed {
  animation: none !important;
}

html[data-ui-theme='hd-2d'] .ripple,
html[data-ui-theme='hd-2d'] .ui-ripple,
html[data-ui-theme='hd-2d'] .jk-ripple,
html[data-ui-theme='hd-2d'] .jk-ripple-host > .jk-ripple,
html[data-ui-theme='hd-2d'] .m-btn::after {
  display: none !important;
}

html[data-ui-theme='hd-2d'] .loading-spinner {
  border-color: #392037 #dca54a #392037 transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-ui-theme='hd-2d'] button,
html[data-ui-theme='hd-2d'] [role='button'],
html[data-ui-theme='hd-2d'] .card,
html[data-ui-theme='hd-2d'] .arena-stop,
html[data-ui-theme='hd-2d'] .ranked-reward {
  -webkit-tap-highlight-color: transparent;
}

html[data-ui-theme='hd-2d'] button:disabled,
html[data-ui-theme='hd-2d'] [aria-disabled='true'] {
  filter: sepia(.12) saturate(.58) !important;
  opacity: .7 !important;
}

html[data-ui-theme='hd-2d'] body.reduce-motion *,
html[data-ui-theme='hd-2d'] body.reduce-motion *::before,
html[data-ui-theme='hd-2d'] body.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

html[data-ui-theme='hd-2d'] body.reduce-motion #victory-fx,
html[data-ui-theme='hd-2d'] body.reduce-motion .pg-cine-sweep,
html[data-ui-theme='hd-2d'] body.reduce-motion .pg-cine-orbit,
html[data-ui-theme='hd-2d'] body.reduce-motion .pg-cine-pulse,
html[data-ui-theme='hd-2d'] body.reduce-motion .arena-coin-burst,
html[data-ui-theme='hd-2d'] body.reduce-motion .arena-coin-fly {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme='hd-2d'] *,
  html[data-ui-theme='hd-2d'] *::before,
  html[data-ui-theme='hd-2d'] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  html[data-ui-theme='hd-2d'] #victory-fx,
  html[data-ui-theme='hd-2d'] .pg-cine-sweep,
  html[data-ui-theme='hd-2d'] .pg-cine-orbit,
  html[data-ui-theme='hd-2d'] .pg-cine-pulse,
  html[data-ui-theme='hd-2d'] .arena-coin-burst,
  html[data-ui-theme='hd-2d'] .arena-coin-fly {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive refinements — no gameplay-stage geometry changes                */
/* -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  html[data-ui-theme='hd-2d'] #menu #pane-settings {
    padding-inline: 11px !important;
  }

  html[data-ui-theme='hd-2d'] #pane-settings .settings-tab {
    min-height: 40px;
    padding-inline: 7px;
    font-size: 12px;
  }

  html[data-ui-theme='hd-2d'] #pane-settings .theme-detail-strip > span {
    min-height: 56px;
    font-size: 8px;
  }

  html[data-ui-theme='hd-2d'] #pregame .pg-hdr,
  html[data-ui-theme='hd-2d'] #pregame .pg-bottom {
    box-shadow: 0 3px 0 #9a572f, 0 5px 0 #392037 !important;
  }
}

@media (max-width: 520px) {
  html[data-ui-theme='hd-2d'] #app,
  html[data-ui-theme='hd-2d'] #menu,
  html[data-ui-theme='hd-2d'] #pregame {
    background-position: 52% top !important;
  }

  html[data-ui-theme='hd-2d'] #menu .wood-panel,
  html[data-ui-theme='hd-2d'] #menu .settings-card,
  html[data-ui-theme='hd-2d'] #menu .profile-card,
  html[data-ui-theme='hd-2d'] #menu .fr-card,
  html[data-ui-theme='hd-2d'] #ov-box,
  html[data-ui-theme='hd-2d'] #help-box {
    box-shadow: 0 3px 0 #97562e, 0 6px 0 #392037, 0 10px 17px rgba(42, 24, 26, .2) !important;
  }
}

@media (min-width: 560px) {
  html[data-ui-theme='hd-2d'] #pane-settings .theme-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-ui-theme='hd-2d'] #pane-settings .theme-choice {
    grid-template-columns: 1fr;
  }

  html[data-ui-theme='hd-2d'] #pane-settings .theme-preview {
    min-height: 132px;
  }

  html[data-ui-theme='hd-2d'] #pane-settings .theme-preview-hd2d .theme-preview-board {
    left: 22px;
    top: 25px;
    transform: rotate(-8deg) scale(1.18);
  }
}

@media (min-width: 600px) {

  html[data-ui-theme='hd-2d'] body #shop2 .s2-body {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) {

  html[data-ui-theme='hd-2d'] body #shop2 .s2-body {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (orientation: landscape) and (max-width: 900px) and (max-height: 520px) {
  html[data-ui-theme='hd-2d'] #pregame {
    background-position: center 20% !important;
  }

  html[data-ui-theme='hd-2d'] #pregame .pg-cinema {
    background: rgba(239, 210, 156, .9) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* RTL                                                                        */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'][dir='rtl'] #pane-settings .theme-choice {
  text-align: right;
}

html[data-ui-theme='hd-2d'][dir='rtl'] .ranked-back svg,
html[data-ui-theme='hd-2d'][dir='rtl'] .pg-back-btn svg {
  transform: scaleX(-1);
}

[dir='rtl'] #pane-settings .theme-preview-hd2d .theme-preview-card {
  right: auto;
  left: 10px;
  transform: rotate(-10deg);
}

[dir='rtl'] #pane-settings .theme-preview-hd2d .theme-preview-piece {
  right: auto;
  left: 31px;
}