/* Radicals reference set — pillar-specific styling only.
 *
 * Loads on top of css/design.css + css/game-page.css. Both of those
 * provide the bulk of the chrome (palette, header, controls, grid,
 * .domino base + face transforms, glow progression, long-press
 * feedback, list-mode container).
 *
 * What lives here = the radicals-pillar deltas only:
 *   1. Override study-mode's shuffle-hide (radical pages keep Shuffle).
 *   2. .domino.domino-radical tile dimensions + face chrome
 *      (aspect-ratio 2.2/1, face padding, front gradient + bone glyph).
 *   3. Glow=3 bamboo-green retint when body.study-mode is active
 *      (the generic vermilion glow=3 from game-page.css survives the
 *      --vermilion token rebind because it uses literal hex values).
 */

/* ---------- 1. Shuffle stays visible in reference-set pages ----------
   design.css has `body.study-mode #btn-shuffle { display: none; }`.
   Reference users benefit from re-randomizing the order. */
body.reference-page.study-mode #btn-shuffle { display: inline-flex !important; }

/* ---------- 2. Tile chrome — wide horizontal domino, matching the
                   Goi / Bunpou / Kanji game-page aspect ratio. ---------- */
.domino.domino-radical {
  width: 100%;
  aspect-ratio: 2.2 / 1;
  justify-self: stretch;
  background: transparent;
  border-radius: 10px;
  box-shadow:
    0 3px 0 var(--tile-edge),
    0 6px 16px rgba(0, 0, 0, 0.5);
}
.domino.domino-radical .domino-face {
  /* Tighter padding than the legacy 0.5rem default — wide 2.2:1 tile is
     ~58px tall on iPhone, so every pixel matters for the glyph. */
  padding: 0.2rem;
}
.domino.domino-radical .domino-face-front {
  background: linear-gradient(155deg, var(--bone-bright) 0%, var(--bone) 50%, var(--bone-shadow) 100%);
  border-radius: 10px;
  box-shadow:
    inset -1.5px -1.5px 3px rgba(74, 69, 51, 0.3),
    inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.45);
}
.domino.domino-radical .domino-face-front .domino-kanji {
  color: var(--canvas);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 -1px 0 rgba(74, 69, 51, 0.35),
    1px 1px 0 rgba(74, 69, 51, 0.25);
}

/* ---------- 3. Glow progression — pillar-scoped to win specificity ----------
 * css/game-page.css ships generic `.domino.domino--glow-edge` rules
 * (specificity 0,2,0). The pillar tile-chrome rule above sets the
 * front-face gradient at `.domino.domino-radical .domino-face-front`
 * (also 0,2,1 for the descendant) — same specificity → cascade wins,
 * which means the bone-cream tile gradient OVERRIDES the generic glow
 * gradient when both apply. Pillar-scoped glow rules below (0,3,1)
 * win the cascade and restore the amber → orange → vermilion sequence.
 *
 * The same pattern is in goi/css/style.css and kanji/css/style.css —
 * they each maintain their own pillar-scoped glow rules for the same
 * specificity reason. Tracked as a future cleanup in ARCHITECTURE §6:
 * ideally the generic rules in game-page.css would be authored at
 * higher specificity so pillars don't have to restate them. */
.domino.domino-radical.domino--glow-edge .domino-face-front {
  background: linear-gradient(155deg, #f5dcae 0%, #ecc88e 50%, #b89968 100%);
  box-shadow:
    inset -1.5px -1.5px 3px rgba(74, 69, 51, 0.3),
    inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.45);
}
.domino.domino-radical.domino--glow-edge {
  box-shadow:
    0 3px 0 var(--tile-edge),
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 0 0 1.5px rgba(228, 175, 100, 0.5);
}
.domino.domino-radical.domino--glow-wide .domino-face-front {
  background: linear-gradient(155deg, #f2bf86 0%, #e6a06a 50%, #b87850 100%);
  box-shadow:
    inset -1.5px -1.5px 3px rgba(74, 69, 51, 0.35),
    inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.4);
}
.domino.domino-radical.domino--glow-wide {
  box-shadow:
    0 3px 0 #6a4a30,
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(228, 140, 80, 0.7),
    0 0 14px rgba(228, 140, 80, 0.35);
}
.domino.domino-radical.domino--glow-full .domino-face-front {
  background: linear-gradient(155deg, #ee8a78 0%, #d44a3a 50%, #a83025 100%);
  box-shadow:
    inset -1.5px -1.5px 3px rgba(60, 18, 14, 0.45),
    inset 1.5px 1.5px 3px rgba(255, 220, 210, 0.35);
}
.domino.domino-radical.domino--glow-full .domino-face-front .domino-kanji {
  color: var(--bone);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 -1px 0 rgba(255, 255, 255, 0.2),
    1px 1px 0 rgba(0, 0, 0, 0.3);
}
.domino.domino-radical.domino--glow-full {
  box-shadow:
    0 3px 0 #5a2820,
    0 6px 16px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(212, 74, 58, 0.95),
    0 0 22px rgba(212, 74, 58, 0.55),
    0 0 10px rgba(212, 74, 58, 0.4);
}

/* Glow=3 stays vermilion in study mode too — Joshua-locked 2026-05-08:
 * "max glow is green, but it should be red like everywhere else."
 * The base rule above hard-codes #d44a3a / rgba(212,74,58,...) which
 * survives the --vermilion → bamboo token rebind; that hard-coding is
 * INTENTIONAL here so glow=3 reads as the same "full peek" alarm
 * across goi / bunpou / kanji / radicals regardless of theme. No
 * bamboo override. */