/* ============================================================
   Karan OS — Arcanum mode
   A candlelit magical skin: an old library in a stone castle at
   night. Warm gold on deep aubergine-black, aged parchment, gilt
   edges, guttering candlelight, ink. Every rule is scoped under
   body.arcanum (mirrors css/retro.css's structure exactly).

   Reserved for the sibling JS effect-layer agent:
     .arc-candle / .arc-candle-row  — CSS-flame candles above dock
     .arc-sigil .arc-beam .arc-mote .arc-trail — floating fx layer
     .arc-crest                     — menubar house-crest holder
   This file gives all of them their *resting* look only; motion
   for the fx layer (.arc-sigil/.arc-beam/.arc-mote/.arc-trail) is
   driven by JS, not CSS. Candle flicker + boot/lock breathing are
   the only animations here, and every one of them is wrapped in
   @media (prefers-reduced-motion: no-preference).
   ============================================================ */

/* ---- token overrides ---- */
body.arcanum {
  --accent: #c9922e;
  --bg: #161119;
  --text: #efe4cf;
  --text-dim: #a08f7a;
  --glass: rgba(30,22,34,.62);
  --glass-strong: rgba(34,25,38,.86);
  --border: rgba(201,146,46,.28);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius: 14px;
  --font: 'Iowan Old Style', 'Palatino Linotype', 'Palatino', Georgia, serif;

  /* arcanum-only extended tokens, reused across sections below */
  --arc-ink: #0c0810;
  --arc-ember: #ff9d3c;
  --arc-gold-hi: #f0d9a6;
  --arc-brass: linear-gradient(180deg, #4a3c2c, #2a2018 55%, #1c150f);
  --arc-brass-hi: linear-gradient(180deg, #6b5638, #3a2e20 55%, #241b13);
  --arc-glow: 0 0 16px rgba(201,146,46,.45);
  /* layered parchment: paper fibre lines + two age-stain pools + base tint */
  --arc-parchment:
    repeating-linear-gradient(0deg, rgba(60,40,18,.05) 0px, rgba(60,40,18,.05) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse 140% 90% at 18% 0%, rgba(255,214,140,.09), transparent 55%),
    radial-gradient(ellipse 120% 90% at 85% 100%, rgba(0,0,0,.4), transparent 60%),
    var(--glass-strong);
}

/* ---- global reset ---- */
body.arcanum {
  font-family: var(--font);
  color: var(--text);
  background: var(--arc-ink);
}
body.arcanum #wallpaper {
  filter: sepia(.4) saturate(1.15) brightness(.42) hue-rotate(-10deg) contrast(1.05);
}
body.arcanum .glass {
  background: var(--glass);
  border: 1px solid var(--border);
}
body.arcanum ::selection { background: var(--accent); color: var(--arc-ink); }

/* ---- menubar ---- */
body.arcanum #menubar {
  background: linear-gradient(180deg, rgba(34,25,38,.92), rgba(22,17,25,.92));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(240,217,166,.12), 0 3px 6px rgba(0,0,0,.35);
  color: var(--text);
}
body.arcanum #menubar .mb-logo {
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--arc-gold-hi), var(--accent) 60%, #6b4415 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  color: var(--arc-ink);
  font-weight: 700;
  font-size: 11px;
}
body.arcanum #menubar .mb-app,
body.arcanum #menubar .mb-item { color: var(--text); }
body.arcanum #menubar .mb-item:hover { background: rgba(201,146,46,.16); }
body.arcanum #menubar .mb-logo:hover {
  filter: brightness(1.15);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 10px rgba(201,146,46,.6);
}
body.arcanum #menubar .kira-dot {
  background: radial-gradient(circle at 35% 30%, var(--arc-gold-hi), var(--arc-ember) 60%, #7a3a10);
  box-shadow: 0 0 8px var(--arc-ember);
}
/* house-crest holder (SVG supplied by sibling agent) */
body.arcanum .arc-crest {
  width: 24px; height: 26px; margin-right: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  border-radius: 6px 6px 50% 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.4);
}
body.arcanum .arc-crest svg { width: 16px; height: 16px; filter: drop-shadow(0 0 3px rgba(201,146,46,.6)); }

/* ---- menu popups / context menu ---- */
body.arcanum .menu-pop,
body.arcanum #ctxmenu {
  background: var(--arc-parchment);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
}
body.arcanum .menu-pop .mi:hover,
body.arcanum #ctxmenu .mi:hover { background: rgba(201,146,46,.28); color: var(--arc-gold-hi); }
body.arcanum .menu-pop hr,
body.arcanum #ctxmenu hr { border-top: 1px solid var(--border); }

/* ---- desktop / island ---- */
body.arcanum #island {
  background: var(--arc-parchment);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* ---- spotlight ---- */
body.arcanum #spotlight { background: rgba(6,4,8,.55); }
body.arcanum #spotlight .sp-box { background: var(--arc-parchment); border: 1px solid var(--border); }
body.arcanum #spotlight input { color: var(--text); }
body.arcanum #spotlight input::placeholder { color: var(--text-dim); }
body.arcanum #spotlight .sp-item { color: var(--text); }
body.arcanum #spotlight .sp-item.sel,
body.arcanum #spotlight .sp-item:hover { background: rgba(201,146,46,.3); color: var(--arc-gold-hi); }

/* ---- KIRA panel ---- */
body.arcanum #kira { background: var(--arc-parchment); border: 1px solid var(--border); }
body.arcanum #kira .orb {
  background: radial-gradient(circle at 32% 28%, var(--arc-gold-hi), var(--accent) 55%, #5a3610 100%);
  box-shadow: var(--arc-glow);
}
body.arcanum #kira .kira-text { font-style: italic; }
body.arcanum #kira input { background: rgba(12,8,16,.4); border: 1px solid var(--border); }
body.arcanum #kira .kbtns button { background: var(--accent); color: var(--arc-ink); font-weight: 700; }

/* ---- dock: carved stone shelf ---- */
body.arcanum #dock {
  background: linear-gradient(180deg, #241b28, #150f18);
  border-top: 1px solid rgba(201,146,46,.5);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(240,217,166,.18), var(--shadow);
}
body.arcanum #dock .dicon:hover { filter: drop-shadow(0 0 10px rgba(201,146,46,.65)); }
body.arcanum #dock .dicon .tip { background: var(--arc-parchment); border: 1px solid var(--border); color: var(--text); }
body.arcanum #dock .dicon.running::after { background: var(--accent); box-shadow: 0 0 5px var(--accent); }

/* ---- windows: parchment body, gilt titlebar, brass-stud traffic lights ---- */
body.arcanum .window { background: var(--arc-parchment); border: 1px solid var(--border); }
body.arcanum .window.focused { box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(201,146,46,.35); }
body.arcanum .window .titlebar {
  background: linear-gradient(180deg, rgba(58,44,30,.95), rgba(32,24,18,.95));
  box-shadow: inset 0 1px 0 rgba(240,217,166,.18), 0 1px 0 rgba(0,0,0,.4), 0 3px 0 -1px rgba(201,146,46,.22);
  border-bottom: 1px solid var(--border);
}
body.arcanum .window .wtitle { color: var(--arc-gold-hi); font-weight: 600; letter-spacing: .3px; }
body.arcanum .window:not(.focused) .wtitle { color: var(--text-dim); }
/* .tl span vs the base ".window:not(.focused) .tl span" rule in desktop.css
   are equal specificity (3 classes + 1 element) — !important settles the tie,
   the same reason retro.css needed it for the identical selector. */
body.arcanum .window .tl span {
  background: var(--arc-brass) !important;
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25), inset 0 -1px 1px rgba(0,0,0,.4);
}
body.arcanum .window .tl .c { background: radial-gradient(circle at 35% 30%, #caa46a, #6b3a22 70%) !important; }
body.arcanum .window .tl .m { background: radial-gradient(circle at 35% 30%, #e0c07a, #8a5a1e 70%) !important; }
body.arcanum .window .tl .x { background: radial-gradient(circle at 35% 30%, #b7c896, #4a5e2c 70%) !important; }
body.arcanum .window .win-body { background: transparent; }
body.arcanum .window .rsz { background: transparent; }

/* ---- generic buttons / inputs: pressed-brass, gold focus ring ---- */
body.arcanum button {
  background: var(--arc-brass);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
}
body.arcanum button:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.5); transform: translateY(1px); }
body.arcanum button:focus-visible,
body.arcanum input:focus-visible,
body.arcanum select:focus-visible,
body.arcanum textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201,146,46,.4), var(--arc-glow);
}
body.arcanum input,
body.arcanum select,
body.arcanum textarea {
  background: rgba(12,8,16,.35);
  color: var(--text);
  border: 1px solid var(--border);
}
body.arcanum input::placeholder,
body.arcanum textarea::placeholder { color: var(--text-dim); }

/* ---- tool-btn (app toolbars) ---- */
body.arcanum .tool-btn { background: var(--arc-brass); color: var(--text); border: 1px solid var(--border); }
body.arcanum .tool-btn:hover { background: var(--arc-brass-hi); color: var(--arc-gold-hi); border-color: var(--border); }
body.arcanum .tool-btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }

/* ---- app internals ---- */
body.arcanum .app-side .side { background: rgba(12,8,16,.25); border-right: 1px solid var(--border); }
body.arcanum .side .sitem.sel { background: rgba(201,146,46,.3); color: var(--arc-gold-hi); }
body.arcanum .finder .fitem:hover { background: rgba(201,146,46,.18); }
body.arcanum .finder .fbar { background: rgba(12,8,16,.25); border-bottom: 1px solid var(--border); }
body.arcanum .notes .ntools { background: rgba(12,8,16,.25); border-bottom: 1px solid var(--border); }
body.arcanum .term { background: rgba(8,5,10,.9); color: var(--arc-ember); font-family: 'Iowan Old Style', Georgia, serif; }
body.arcanum .term input { color: var(--arc-ember); }
body.arcanum .settings .sw.sel { border-color: var(--accent); }
body.arcanum .settings select { background: rgba(12,8,16,.35); border: 1px solid var(--border); }
body.arcanum .about .klogo3d {
  background: radial-gradient(circle, var(--arc-gold-hi), var(--accent) 60%, #5a3610);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.arcanum .brw .baddr { background: rgba(12,8,16,.25); border-bottom: 1px solid var(--border); }
body.arcanum .brw input { background: rgba(12,8,16,.35); border: 1px solid var(--border); }
body.arcanum .calc { background: var(--arc-ink); }
body.arcanum .calc .cdisp { color: var(--arc-gold-hi); }
body.arcanum .calc button { background: var(--arc-brass); color: var(--text); }
body.arcanum .calc button.op { background: linear-gradient(180deg,#6b3a22,#3a1c10); color: var(--arc-gold-hi); }
body.arcanum .calc button.fn { background: rgba(160,143,122,.25); color: var(--text); }
body.arcanum .music .disc {
  background: conic-gradient(from 0deg, var(--accent), #6b3a22, var(--arc-ember), var(--accent));
  box-shadow: var(--arc-glow);
}

/* ---- launchpad ---- */
body.arcanum #launchpad { background: rgba(12,8,16,.72); }
body.arcanum #launchpad .lp-search { background: rgba(34,25,38,.5); border: 1px solid var(--border); color: var(--text); }
body.arcanum #launchpad .lp-search::placeholder { color: var(--text-dim); }
body.arcanum #launchpad .lp-app span { color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
body.arcanum #launchpad .lp-hint { color: var(--text-dim); }

/* ---- control center / notification center ---- */
body.arcanum #ccpanel,
body.arcanum #ncpanel { background: var(--arc-parchment); border: 1px solid var(--border); color: var(--text); }
body.arcanum #ccpanel .cc-t { background: rgba(12,8,16,.3); border: 1px solid var(--border); color: var(--text); }
body.arcanum #ccpanel .cc-t.on { background: var(--accent); color: var(--arc-ink); }
body.arcanum #ncpanel .nc-item { border-bottom: 1px solid var(--border); }

/* ---- dialogs (.dlg-card) ---- */
body.arcanum .dlg-overlay { background: rgba(6,4,8,.6); }
body.arcanum .dlg-card { background: var(--arc-parchment); border: 1px solid var(--border); }
body.arcanum .dlg-title { color: var(--arc-gold-hi); }
body.arcanum .dlg-input { background: rgba(12,8,16,.35); border: 1px solid var(--border); color: var(--text); }
body.arcanum .dlg-btn-primary { background: var(--accent); color: var(--arc-ink); }
body.arcanum .dlg-btn-secondary { background: rgba(12,8,16,.3); color: var(--text); }
body.arcanum .dlg-menu-item:hover { background: rgba(201,146,46,.18); }
body.arcanum .dlg-menu-item:active { background: rgba(201,146,46,.28); }

/* ---- arc-candle: floating candles above the dock ---- */
body.arcanum .arc-candle-row {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 22px;
  z-index: 646;
  pointer-events: none;
}
body.arcanum .arc-candle { position: relative; width: 14px; height: 36px; }
/* wax body */
body.arcanum .arc-candle::before {
  content: '';
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 10px; height: 26px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, #efe4cf, #cbb98f 60%, #a08f5a);
  box-shadow: inset -2px 0 3px rgba(0,0,0,.25), inset 2px 0 2px rgba(255,255,255,.3);
}
/* flame — teardrop via one rounded corner + 45deg rotation, ember glow */
body.arcanum .arc-candle::after {
  content: '';
  position: absolute; left: 50%; bottom: 24px;
  width: 9px; height: 13px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 50% 50% 50%;
  background: radial-gradient(circle at 50% 30%, #fff8e2, var(--arc-ember) 55%, #b5450f 100%);
  box-shadow: 0 0 12px 3px rgba(255,157,60,.7);
}

/* ---- arc effect layer base classes (JS drives motion, this is resting look only) ---- */
body.arcanum .arc-sigil,
body.arcanum .arc-beam,
body.arcanum .arc-mote,
body.arcanum .arc-trail {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 640;
  mix-blend-mode: screen;
}
body.arcanum .arc-sigil {
  width: 44px; height: 44px;
  opacity: .85;
  filter: drop-shadow(0 0 10px rgba(201,146,46,.75)) drop-shadow(0 0 22px rgba(255,157,60,.4));
}
body.arcanum .arc-beam {
  width: 2px; height: 80px;
  opacity: .7;
  background: linear-gradient(180deg, rgba(255,224,153,.9), rgba(201,146,46,0));
  filter: drop-shadow(0 0 6px rgba(201,146,46,.8));
}
body.arcanum .arc-mote {
  width: 5px; height: 5px;
  border-radius: 50%;
  opacity: .9;
  background: radial-gradient(circle, #fff2c8, var(--arc-ember) 65%, transparent);
  filter: drop-shadow(0 0 5px rgba(255,157,60,.8));
}
body.arcanum .arc-trail {
  width: 6px; height: 6px;
  border-radius: 50%;
  opacity: .6;
  background: radial-gradient(circle, rgba(240,217,166,.9), transparent 70%);
  filter: drop-shadow(0 0 4px rgba(201,146,46,.6));
}

/* ---- motion: candle flicker (reduced-motion users keep the static theme above) ---- */
@media (prefers-reduced-motion: no-preference) {
  body.arcanum .arc-candle::after { animation: arc-flicker 2.4s ease-in-out infinite alternate; }
  body.arcanum .arc-candle:nth-child(2n)::after { animation-duration: 2s; animation-delay: -.5s; }
  body.arcanum .arc-candle:nth-child(3n)::after { animation-duration: 2.8s; animation-delay: -1.1s; }
  body.arcanum .arc-candle:nth-child(5n)::after { animation-duration: 1.7s; animation-delay: -.2s; }
  @keyframes arc-flicker {
    0%   { opacity: .7;  transform: translateX(-50%) rotate(45deg) scale(.92); box-shadow: 0 0 8px 2px rgba(255,157,60,.5); }
    45%  { opacity: 1;   transform: translateX(-50%) rotate(43deg) scale(1.08); box-shadow: 0 0 18px 5px rgba(255,157,60,.9); }
    70%  { opacity: .85; transform: translateX(-50%) rotate(47deg) scale(.98); box-shadow: 0 0 12px 3px rgba(255,157,60,.65); }
    100% { opacity: .95; transform: translateX(-50%) rotate(45deg) scale(1.03); box-shadow: 0 0 15px 4px rgba(255,157,60,.75); }
  }
}

/* ---- boot ---- */
body.arcanum #boot { background: radial-gradient(ellipse at 50% 40%, #241a28, var(--arc-ink) 70%); }
body.arcanum #boot .klogo {
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 52px;
  color: var(--arc-gold-hi);
  background: radial-gradient(circle at 35% 30%, #7a2f12, #4a1608 60%, #2c0d05);
  box-shadow: inset 0 2px 4px rgba(255,200,140,.35), inset 0 -6px 10px rgba(0,0,0,.6), 0 0 40px rgba(201,146,46,.35);
}
body.arcanum #boot .bar { background: rgba(160,143,122,.2); border: 1px solid var(--border); }
body.arcanum #boot .bar i { background: linear-gradient(90deg, #6b3a22, var(--accent)); box-shadow: 0 0 8px rgba(201,146,46,.6); }

/* ---- lock ---- */
body.arcanum #lock {
  background: radial-gradient(ellipse at 50% 35%, rgba(60,42,30,.5), var(--arc-ink) 75%);
  color: var(--text);
}
body.arcanum #lock .lk-time,
body.arcanum #lock .lk-date,
body.arcanum #lock .lk-name { text-shadow: 0 4px 24px rgba(0,0,0,.6); }
body.arcanum #lock .lk-avatar {
  width: 88px; height: 104px;
  border-radius: 50% / 58%;
  background: radial-gradient(circle at 35% 30%, #3a2c20, #1c140e);
  border: 4px solid var(--accent);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), inset 0 4px 10px rgba(0,0,0,.6), var(--shadow);
  color: var(--arc-gold-hi);
}
body.arcanum #lock .lk-hint { font-style: italic; color: var(--text-dim); }

/* ---- motion: boot seal glow + lock vignette breathe ---- */
@media (prefers-reduced-motion: no-preference) {
  body.arcanum #boot .klogo { animation: arc-seal-glow 3s ease-in-out infinite; }
  body.arcanum #lock { animation: arc-vignette-breathe 6s ease-in-out infinite; }
  @keyframes arc-seal-glow {
    0%, 100% { box-shadow: inset 0 2px 4px rgba(255,200,140,.35), inset 0 -6px 10px rgba(0,0,0,.6), 0 0 30px rgba(201,146,46,.3); }
    50%      { box-shadow: inset 0 2px 4px rgba(255,200,140,.45), inset 0 -6px 10px rgba(0,0,0,.6), 0 0 52px rgba(201,146,46,.55); }
  }
  @keyframes arc-vignette-breathe {
    0%, 100% { background: radial-gradient(ellipse at 50% 35%, rgba(60,42,30,.45), var(--arc-ink) 75%); }
    50%      { background: radial-gradient(ellipse at 50% 35%, rgba(70,50,36,.6), var(--arc-ink) 72%); }
  }
}

/* ============================================================
   Mobile (375px) — retro.css has no mobile rules at all; this
   theme does not repeat that gap. Scoped body.arcanum.mobile so
   it only ever fires alongside js's own coarse-pointer detection.
   ============================================================ */
@media (max-width: 480px) {
  body.arcanum.mobile .arc-candle-row {
    bottom: calc(var(--chrome-b) + 2px);
    gap: 14px;
  }
  body.arcanum.mobile .arc-candle { width: 10px; height: 26px; }
  body.arcanum.mobile .arc-candle::before { width: 7px; height: 18px; }
  body.arcanum.mobile .arc-candle::after { width: 7px; height: 10px; bottom: 17px; }

  body.arcanum.mobile .window .wtitle { font-size: 14px; }
  body.arcanum.mobile .dlg-title { font-size: 17px; }
  body.arcanum.mobile #lock .lk-time { font-size: 56px; }
  body.arcanum.mobile #lock .lk-hint { font-size: 14px; }

  /* iOS zoom guard: any themed text input stays >=16px on mobile */
  body.arcanum.mobile input,
  body.arcanum.mobile textarea,
  body.arcanum.mobile select,
  body.arcanum.mobile #spotlight input { font-size: 16px; }

  /* touch targets >=44px */
  body.arcanum.mobile button,
  body.arcanum.mobile .tool-btn,
  body.arcanum.mobile .dlg-row button { min-height: 44px; }

  /* no horizontal overflow from wide cards at 375px */
  body.arcanum.mobile #ccpanel,
  body.arcanum.mobile #ncpanel,
  body.arcanum.mobile .dlg-card { max-width: calc(100vw - 16px); }
}

/* ============================================================
   The arcane board — js/apps/chess.js (~L353-366) exposes three
   custom properties as pure hook points, each with a plain-chess
   fallback that nothing has ever overridden: --chess-light,
   --chess-dark (the two square colours, also reused for the file/
   rank coordinate labels), and --chess-last (the last-move glow).
   This section is the candlelit skin for those hooks. Nothing in
   chess.js itself is touched.

   House mechanism used: there is no per-house body attribute or
   selector anywhere in the codebase (checked js/arcana/houses.js
   and grepped for data-house across js/ and css/ — no hits).
   The one real mechanism is applyAccent() in houses.js, which does
   document.documentElement.style.setProperty('--accent', houseColor)
   — a single inline --accent token, the same one every other
   reskinned surface in this file already reads. So the per-house
   "board character" below is derived from var(--accent) with
   color-mix(), exactly as a single-token mechanism implies. With
   no house chosen, --accent falls back to this file's own arcanum
   gold (#c9922e, set above under "token overrides"), so the board
   still reads candlelit before any house is picked, and each house
   nudges it warmer/cooler/earthier/darker from there.

   Contrast sanity (WCAG relative-luminance ratio):
     black piece glyph #1b1b1c vs base dark square #a8815c = 4.88:1
     (today's undyed default, #1b1b1c vs #6f8f57, is 4.71:1 — this
     reskin is not a downgrade). Emberhall/Tidewatch/Stonewake/
     Nightglass tints (14% accent mixed into the dark square) land
     between 4.60:1 and 4.85:1 against the same glyph, and the
     light-square pairing stays 13:1+ throughout. White pieces carry
     their own dark multi-directional text-shadow outline from
     chess.js and remain legible regardless of square colour.
   ============================================================ */
body.arcanum .chess-app {
  --chess-dark: color-mix(in srgb, var(--accent) 14%, #a8815c 86%);
  --chess-light: color-mix(in srgb, var(--accent) 7%, #f5ecd6 93%);
  --chess-last: color-mix(in srgb, var(--accent) 22%, rgba(255,183,92,.5) 78%);
}
/* board frame: the same gilt-edge-plus-glow treatment other
   reskinned windows/panels get (see --arc-glow under "token
   overrides" and its reuse on #kira .orb, .music .disc, etc.);
   the original ambient drop shadow is kept alongside it. */
body.arcanum .chess-app .ch-board {
  border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(240,217,166,.14), var(--arc-glow);
}
/* promotion tray: chess.js hardcodes these buttons to plain
   white-tile/dark-glyph and never reads a design token, so
   Arcanum has no effect on them today; swap the tile for the
   same brass the rest of this theme's buttons use. Contrast:
   --arc-gold-hi #f0d9a6 against --arc-brass's gradient stops
   (#4a3c2c/#2a2018/#1c150f) ranges 7.7:1-13.1:1. */
body.arcanum .chess-app .ch-promo button {
  background: var(--arc-brass);
  color: var(--arc-gold-hi);
  border: 1px solid var(--border);
}