/* Kana reference set — pillar-specific styling only.
 *
 * Same architecture as radicals/css/style.css — loads on top of
 * design.css + game-page.css, which 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 kana-pillar deltas only:
 *   1. Override study-mode's shuffle-hide (kana pages keep Shuffle).
 *   2. .domino.domino-kana tile dimensions + face chrome.
 *   3. Pillar-scoped glow progression (specificity reasons — see
 *      radicals/css/style.css for the explanation).
 *
 * Kana tiles use the same 2.2:1 aspect-ratio and bone gradient as
 * the radicals tiles. Glyphs are slightly smaller in font-size to
 * accommodate yōon (2-character entries like きゃ).
 */

/* ---------- 1. Shuffle stays visible in reference-set pages ---------- */
body.reference-page.study-mode #btn-shuffle { display: inline-flex !important; }

/* ---------- 2. Tile chrome ---------- */
.domino.domino-kana {
  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-kana .domino-face {
  padding: 0.2rem;
}
.domino.domino-kana .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-kana .domino-face-front .domino-kanji {
  color: var(--canvas);
  font-family: var(--font-jp);
  font-weight: 700;
  /* 2.6rem (vs radicals' 3rem) so 2-char yōon entries (きゃ, ピョ) fit
     comfortably inside the 2.2:1 tile without horizontal overflow. */
  font-size: 2.6rem;
  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 ----------
 * Same specificity story as radicals — see radicals/css/style.css for
 * the full rationale. Generic .domino--glow-* in game-page.css would
 * lose to the pillar tile-chrome rule above, so we restate glow here
 * at higher specificity.
 *
 * Glow=3 hard-codes vermilion (#d44a3a) so the "full peek" state stays
 * the canonical alarm color across all pillars regardless of theme. */
.domino.domino-kana.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-kana.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-kana.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-kana.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-kana.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-kana.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-kana.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);
}