/*
 * Radical-domino back-face styles. Same architecture as
 * css/kanji-back-face.css and css/goi-back-face.css — single source of
 * truth for the radical back face, scoped to .domino.domino-radical.flipped
 * so it works in any body-level overlay (the radicals game page's
 * #flipped-overlay, plus any future pillar that surfaces a radical).
 *
 * Selectors mirror the goi/kanji patterns — `.domino.domino-radical.flipped`
 * for the centered modal positioning, then per-element rules for the
 * back-face content.
 */

/* === Centered modal positioning ====================================== */
.domino.domino-radical.flipped {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  height: min(82vh, 580px);
  aspect-ratio: auto !important;
  z-index: 100;
  border-radius: 14px;
  box-shadow:
    0 18px 48px rgba(0, 30, 60, 0.35),
    0 6px 16px rgba(0, 30, 60, 0.18);
  transition: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  will-change: auto;
}

.domino.domino-radical.flipped .domino-inner {
  transform: none;
  transition: opacity 0.2s ease;
}
.domino.domino-radical.flipped .domino-face-front {
  display: none;
}
.domino.domino-radical.flipped .domino-face-back {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: var(--canvas-elev);
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 1.3rem 1.3rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Radical headline: large brass glyph + name + meaning =========== */
.radical-back-content {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.radical-glyph-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 4px double var(--brass);
  margin-bottom: 0.2rem;
}
.radical-big-glyph {
  flex: 0 0 auto;
  font-family: var(--font-jp);
  font-size: 5.2rem;
  line-height: 1;
  font-weight: 600;
  color: var(--brass);
  padding: 0 0.2rem;
}
.radical-headline {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.radical-ja-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-jp);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--text);
  font-weight: 500;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.radical-meaning-line {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.3;
}
.radical-kangxi-meta {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* === Position guidance (left/right/top/bottom/etc.) ================ */
.radical-position-line {
  font-family: var(--font-en);
  font-size: 0.92rem;
  color: var(--text-soft);
  background: rgba(232, 220, 196, 0.04);
  border-left: 3px solid var(--brass);
  border-radius: 0 6px 6px 0;
  padding: 0.55rem 0.75rem;
  line-height: 1.4;
}

/* === Variants chips (邑→⻏, 攴→攵, etc.) =========================== */
.radical-variants-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--font-en);
  font-size: 0.85rem;
  color: var(--text-soft);
}
.radical-variants-label {
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-right: 0.2rem;
}
.radical-variant-chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: rgba(201, 164, 100, 0.10);
  border: 1px solid rgba(201, 164, 100, 0.4);
  border-radius: 100px;
  font-family: var(--font-jp);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brass);
  line-height: 1.2;
}

/* === Pool kanji grid — bone tiles, tappable to drill into kanji ==== */
.radical-pool-section {
  margin-top: 0.4rem;
}
.radical-pool-label {
  margin: 0 0 0.45rem;
  font-family: var(--font-en);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
}
.radical-pool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}
.radical-pool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.25rem;
  background: linear-gradient(155deg, var(--bone-bright) 0%, var(--bone) 50%, var(--bone-shadow) 100%);
  border-radius: 7px;
  border: none;
  box-shadow:
    inset -1px -1px 2px rgba(74, 69, 51, 0.25),
    inset 1px 1px 2px rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.radical-pool-tile:hover { transform: translateY(-1px); }
.radical-pool-tile:active { transform: translateY(0); }
.radical-pool-kanji {
  font-family: var(--font-jp);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--canvas);
}
.radical-pool-meaning {
  font-family: var(--font-en);
  font-size: 0.6rem;
  color: var(--canvas);
  opacity: 0.75;
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.radical-pool-more {
  margin: 0.45rem 0 0;
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-faint);
  text-align: center;
}
.radical-empty {
  margin: 0.4rem 0 0;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  padding: 0.7rem;
  background: rgba(232, 220, 196, 0.04);
  border-radius: 8px;
}

/* === Front face — radical glyph on a bone tile ===================== */
.domino.domino-radical {
  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-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;
  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);
}