/* ========================================================================== */
/* HD-2D UI KIT — "LANTERNLIGHT MAJLIS"                                        */
/*                                                                            */
/* Square-Enix-style HD-2D interface chrome: the vivid tilt-shift village     */
/* diorama stays the hero, and every control floats above it as dark          */
/* lacquered ink panels with brass hairline double-frames, chamfer ticks,     */
/* and letterspaced serif small-caps. Loaded last so it wins ties against     */
/* visual-overhaul.css / home-hub.css without specificity wars.               */
/*                                                                            */
/* Scope: everything in this file is gated on html[data-ui-theme='hd-2d'].    */
/* ========================================================================== */

html[data-ui-theme='hd-2d'] {
  /* ---- ink lacquer panels ---- */
  --sq-ink-0: #120c18;
  --sq-ink-1: #1c1424;
  --sq-ink-2: #2a1e33;
  --sq-panel: linear-gradient(172deg, rgba(38, 27, 48, .93), rgba(20, 13, 27, .95) 58%, rgba(14, 9, 19, .96));
  --sq-panel-lit:
    radial-gradient(120% 90% at 50% -24%, rgba(255, 205, 112, .16), transparent 52%),
    linear-gradient(172deg, rgba(44, 32, 56, .94), rgba(22, 15, 30, .96) 60%, rgba(14, 9, 19, .97));
  --sq-panel-well: linear-gradient(180deg, rgba(10, 6, 14, .92), rgba(24, 17, 32, .9));

  /* ---- brass + ivory linework ---- */
  --sq-gold-hi: #ffe9ad;
  --sq-gold: #d8ab5a;
  --sq-gold-lo: #8a5f28;
  --sq-frame: rgba(216, 171, 90, .62);
  --sq-frame-dim: rgba(216, 171, 90, .34);
  --sq-hairline: rgba(255, 240, 205, .22);
  --sq-edge-dark: rgba(6, 3, 10, .85);
  --sq-gold-grad: linear-gradient(180deg, #ffeeba 0%, #e2b25c 46%, #a4692a 100%);

  /* ---- type + ink ---- */
  --sq-ivory: #f6edd8;
  --sq-ivory-soft: #d9cdb2;
  --sq-parchment-dim: #b3a488;
  --sq-label: #cfa75d;
  --sq-ink-on-gold: #2b1a10;

  /* ---- glow + shadow ---- */
  --sq-glow: 0 0 18px rgba(255, 205, 112, .16);
  --sq-shadow: 0 2px 0 var(--sq-edge-dark), 0 12px 28px rgba(8, 4, 12, .55);
  --sq-shadow-soft: 0 1px 0 var(--sq-edge-dark), 0 8px 20px rgba(8, 4, 12, .45);

  /* corner tick geometry */
  --sq-tick: #e6c47c;
  --sq-tick-len: 11px;
  --sq-tick-w: 2px;
  --sq-tick-off: 5px;
}

/* -------------------------------------------------------------------------- */
/* Reusable frame recipes. Screens without retrofittable markup replicate     */
/* these declarations selector-by-selector further down.                      */
/* -------------------------------------------------------------------------- */
html[data-ui-theme='hd-2d'] .sq-panel {
  position: relative;
  border: 1px solid var(--sq-frame);
  border-radius: 10px;
  background: var(--sq-panel);
  box-shadow:
    inset 0 0 0 1px rgba(6, 3, 10, .7),
    inset 0 1px 0 rgba(255, 240, 205, .07),
    var(--sq-shadow);
  color: var(--sq-ivory);
}

/* inner ivory hairline, 3px inside the brass frame */
html[data-ui-theme='hd-2d'] .sq-panel::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--sq-hairline);
  border-radius: 7px;
  pointer-events: none;
}

/* brass chamfer ticks in all four corners */
html[data-ui-theme='hd-2d'] .sq-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--sq-tick), var(--sq-tick)) no-repeat left var(--sq-tick-off) top var(--sq-tick-off) / var(--sq-tick-len) var(--sq-tick-w),
    linear-gradient(var(--sq-tick), var(--sq-tick)) no-repeat left var(--sq-tick-off) top var(--sq-tick-off) / var(--sq-tick-w) var(--sq-tick-len),
    linear-gradient(var(--sq-tick), var(--sq-tick)) no-repeat right var(--sq-tick-off) top var(--sq-tick-off) / var(--sq-tick-len) var(--sq-tick-w),
    linear-gradient(var(--sq-tick), var(--sq-tick)) no-repeat right var(--sq-tick-off) top var(--sq-tick-off) / var(--sq-tick-w) var(--sq-tick-len),
    linear-gradient(var(--sq-tick), var(--sq-tick)) no-repeat left var(--sq-tick-off) bottom var(--sq-tick-off) / var(--sq-tick-len) var(--sq-tick-w),
    linear-gradient(var(--sq-tick), var(--sq-tick)) no-repeat left var(--sq-tick-off) bottom var(--sq-tick-off) / var(--sq-tick-w) var(--sq-tick-len),
    linear-gradient(var(--sq-tick), var(--sq-tick)) no-repeat right var(--sq-tick-off) bottom var(--sq-tick-off) / var(--sq-tick-len) var(--sq-tick-w),
    linear-gradient(var(--sq-tick), var(--sq-tick)) no-repeat right var(--sq-tick-off) bottom var(--sq-tick-off) / var(--sq-tick-w) var(--sq-tick-len);
}

/* thin brass divider with a centered rotated-square gem */
html[data-ui-theme='hd-2d'] .sq-rule {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sq-frame) 18%, var(--sq-frame) 82%, transparent);
}

html[data-ui-theme='hd-2d'] .sq-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--sq-gold-grad);
  box-shadow: 0 0 6px rgba(255, 205, 112, .5);
}