/*
 * Goi rich back-face styles — extracted from goi/css/style.css so the
 * kanji 例 Examples popup → "tap a compound's Japanese writing" jump can
 * render the full Goi flipped card on kanji/game.html without pulling in
 * the entire goi sheet (which carries goi-page-only chrome — front-face
 * glow states, Mahjong Hall game-page overrides, etc.).
 *
 * Loaded by goi/game.html and kanji/game.html. The corresponding rules
 * have been removed from goi/css/style.css to avoid drift; this file is
 * the single source of truth for `.domino.domino-goi.flipped` typography
 * + layout + furigana ruby.
 *
 * The `.flipped` card centers itself via `position: fixed` + viewport
 * coordinates, so it works inside any body-level overlay container
 * (e.g. #flipped-overlay on goi, #goi-from-kanji-overlay on kanji).
 *
 * Keep CSS class names in lock-step with js/goi-back-face.js's render
 * output (.goi-back-content, .goi-word, .goi-pos, .goi-english,
 * .goi-english-extra, .goi-example, .goi-example-jp, .goi-example-en,
 * .goi-note, .goi-counter-*).
 */

/* === Centered modal positioning + dimensions ============================ */
.domino.domino-goi.flipped {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  height: min(82vh, 540px);
  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);
  /* Kills the 0.5s transform transition that would otherwise animate the
   * card from its grid position to viewport center. The popup snaps in. */
  transition: none;
  /* iOS Safari rendering fix: .domino's base rule sets backface-visibility:
   * hidden + will-change: transform + transform: translateZ(0) for the
   * (non-goi) flip-rotation animation. With our position:fixed centered
   * modal, those hints make iOS promote the popup to a hardware layer that
   * the compositor sometimes decides is "facing away" — popup invisible AND
   * the underlying grid stops painting until a touch forces a repaint.
   * Override here to keep the popup in the normal paint flow. */
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  will-change: auto;
}

/* Override goi's per-column nth-child transforms (left/right cols normally
 * shift sideways for the scale-based popup). The centered modal doesn't
 * need column-aware shifts — same translate keeps it centered. */
.grid-container > .domino.domino-goi.flipped:nth-child(3n+1),
.grid-container > .domino.domino-goi.flipped:nth-child(3n+3) {
  transform: translate(-50%, -50%);
  transition: none;
}

.domino.domino-goi.flipped .domino-inner {
  transform: none;
  transition: opacity 0.2s ease;
  /* Fill the fixed card height so the washi face is ALWAYS the full 540 — without
     this a short card (e.g. the goi-jump card opened from an example link) sized
     its face to content (~470), leaving a transparent strip that revealed the card
     behind it: the "double background / smaller second card". Every goi card now
     renders at the same size, whichever overlay it lives in (Joshua 2026-06-11). */
  height: 100%;
}

.domino.domino-goi.flipped .domino-face-front {
  display: none;
}

/* === Back face: dark gradient panel, scrollable column =================== */
.domino.domino-goi.flipped .domino-face-back {
  transform: none;
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: var(--canvas-elev);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  padding: 1.4rem 1.5rem 1.6rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.domino.domino-goi.flipped .goi-back-content {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* === Word headword + furigana ============================================ */
.domino.domino-goi.flipped .goi-word {
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  line-height: 1.5;
  margin: 0.2rem 0 0;
}

.domino.domino-goi.flipped .goi-word ruby {
  ruby-position: over;
}

.domino.domino-goi.flipped .goi-word rt {
  font-size: 0.4em;
  color: var(--read-furi);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

/* === POS pill ============================================================ */
.domino.domino-goi.flipped .goi-pos {
  align-self: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--card-inset);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.2rem 0.85rem;
  letter-spacing: 0.01em;
  margin: 0.1rem 0;
}

/* === English meaning + extras =========================================== */
.domino.domino-goi.flipped .goi-english {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: var(--text);
  line-height: 1.35;
  margin: 0.15rem 0 0;
}

.domino.domino-goi.flipped .goi-english-extra {
  font-size: 0.95rem;
  text-align: center;
  color: var(--text-soft);
  line-height: 1.3;
  margin: -0.1rem 0 0;
}

/* === Example sentence box ============================================== */
.domino.domino-goi.flipped .goi-example {
  background: var(--card-inset);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  /* ~1.5rem of breathing room above so the example block separates clearly
     from the top key info (word + POS chip + English gloss). */
  margin: 1.5rem 0 0;
  text-align: center;
}

.domino.domino-goi.flipped .goi-example-jp {
  /* Bumped ~50% from 1.4rem so the Japanese sentence is comfortably
     readable on phone-held-in-one-hand. Furigana <rt> font-size is in
     em so it scales with this base. line-height bumped to keep room
     for the larger ruby above the kanji. */
  font-size: 1.75rem; /* 2026-06-04 Joshua: midpoint between original 2.1 and the too-small 1.05 (rt em scales) */
  display: block;
  color: var(--text);
  line-height: 2.15;
  margin-bottom: 0.55rem;
}

.domino.domino-goi.flipped .goi-example-jp ruby {
  ruby-position: over;
}

.domino.domino-goi.flipped .goi-example-jp rt {
  font-size: 0.45em;
  color: var(--read-furi);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.domino.domino-goi.flipped .goi-example-en {
  font-size: 0.85rem; /* proportionate to the midpoint JP */
  display: block;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.4;
}

/* === Goi-jump tap targets (within example sentences) ====================
 * Wrapped by js/goi-jump.js around segments that resolve to a known Goi
 * entry. The indication is intentionally restrained — a subtle dotted
 * brass underline that reads as "tappable on closer look", not a banner.
 * Cross-surface: applied wherever segment HTML is wrapped — Goi card,
 * Bunpou card, the goi-from-kanji card, the goi-jump card itself. */
.goi-jump-target {
  cursor: pointer;
  padding: 0 1px;
  border-bottom: 1px dotted var(--brass);
  transition: color 0.12s ease, border-color 0.12s ease;
}
.goi-jump-target:hover,
.goi-jump-target:focus-visible {
  color: var(--brass);
  border-bottom-color: var(--brass);
  outline: none;
}
.goi-jump-target:active {
  opacity: 0.75;
}
/* Ruby children inherit the underline implicitly; make sure rt furigana
 * stays unstyled — only the base text gets the tint on hover. */
.goi-jump-target ruby rt {
  border-bottom: none;
}

/* === Optional usage note ================================================ */
.domino.domino-goi.flipped .goi-note {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0.35rem 0 0;
  text-align: left;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 220, 150, 0.07);
  border-left: 3px solid rgba(255, 215, 130, 0.5);
  border-radius: 0 8px 8px 0;
}

/* === Counter-paradigm tables (Numbers category) =========================
   Used by the Numbers sub-category. Three-column compact layout:
   Japanese form | hiragana reading | English meaning. Optional
   "exceptions" section appears below the main table after a
   pattern-note divider. */
.domino.domino-goi.flipped .goi-counter-context {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.4;
  margin: 0.1rem 0 0.3rem;
  text-align: center;
}

.domino.domino-goi.flipped .goi-counter-table {
  display: grid;
  /* Number column: sized to its content (rarely > "10,000円").
     Reading column: takes the lion's share — gets at least 8rem so multi-form
     readings like "じゅっぷん / じっぷん" don't wrap.
     English column: capped at max-content so a long label never blows up the
     layout. The data is kept short by design (parenthetical comments live in
     the pattern_note below the table, not in the cells). */
  grid-template-columns: minmax(3rem, max-content) minmax(8rem, 1fr) minmax(3rem, max-content);
  gap: 0.35rem 0.85rem;
  padding: 0.7rem 0.9rem;
  background: var(--card-inset);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.35;
}

.domino.domino-goi.flipped .goi-counter-num {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.domino.domino-goi.flipped .goi-counter-reading {
  color: var(--read-furi);
  font-weight: 400;
}

.domino.domino-goi.flipped .goi-counter-english {
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: right;
}

.domino.domino-goi.flipped .goi-counter-pattern {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.85rem;
  background: rgba(160, 200, 255, 0.05);
  border-left: 3px solid rgba(160, 200, 255, 0.4);
  border-radius: 0 8px 8px 0;
}

.domino.domino-goi.flipped .goi-counter-exceptions-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 200, 200, 0.95);
  margin: 0.35rem 0 -0.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* When un-flipped, hide the back-face content so the front face renders cleanly. */
.domino.domino-goi:not(.flipped) .goi-back-content {
  display: none;
}

/* === Mahjong Hall accent overrides ===================================== */
.domino.domino-goi.flipped .goi-pos {
  background: rgba(212, 74, 58, 0.12);
  border-color: rgba(212, 74, 58, 0.4);
  color: var(--vermilion);
}
.domino.domino-goi.flipped .goi-example {
  background: rgba(232, 220, 196, 0.05);
  border-left: 2px solid var(--brass);
  border-radius: 0 6px 6px 0;
}
.domino.domino-goi.flipped .goi-example-jp rt {
  color: var(--text-soft);
}
.domino.domino-goi.flipped .goi-example-en {
  color: var(--text-faint);
}
.domino.domino-goi.flipped .goi-note {
  background: rgba(201, 164, 100, 0.08);
  border-left: 3px solid var(--brass);
  color: var(--text);
}

/* === Furigana ruby typography (back-face only) =========================
   Hiragino on macOS/iOS, Yu Gothic on Windows; sans is more compact
   width-wise than serif and more legible at small sizes. palt enables
   Japanese proportional metrics so multi-kana readings pack closer.
   (Closed-tile front face ruby still styled in goi/css/style.css.)
   ====================================================================== */
.domino.domino-goi.flipped .goi-word rt,
.domino.domino-goi.flipped .goi-example-jp rt {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  letter-spacing: -0.05em;
  font-feature-settings: "palt" 1;
  line-height: 1;
}
.domino.domino-goi.flipped .goi-word rt {
  font-size: 0.5em;
}
.domino.domino-goi.flipped .goi-example-jp rt {
  font-size: 0.6em;
}

/* === Responsive (iPhone SE-class widths) =============================== */
@media (max-width: 480px) {
  .domino.domino-goi.flipped .domino-face-back {
    padding: 1rem 1.05rem 1.2rem;
  }
  .domino.domino-goi.flipped .goi-back-content {
    gap: 0.5rem;
  }
  .domino.domino-goi.flipped .goi-word {
    font-size: 2.15rem;
  }
  .domino.domino-goi.flipped .goi-pos {
    font-size: 0.72rem;
  }
  .domino.domino-goi.flipped .goi-english {
    font-size: 1.1rem;
  }
  .domino.domino-goi.flipped .goi-english-extra {
    font-size: 0.85rem;
  }
  .domino.domino-goi.flipped .goi-example {
    padding: 0.85rem 0.95rem;
    /* Slightly less spacing on tighter phone widths but still clear. */
    margin: 1.2rem 0 0;
  }
  .domino.domino-goi.flipped .goi-example-jp {
    font-size: 1.5rem; /* midpoint (2026-06-04) */
    line-height: 2.1;
  }
  .domino.domino-goi.flipped .goi-example-en {
    font-size: 0.8rem;
  }
  .domino.domino-goi.flipped .goi-note {
    font-size: 0.88rem;
    padding: 0.6rem 0.75rem;
  }
}

/* === Goi-jump overlay (cross-pillar) =====================================
 * Body-level overlay populated + wired by js/goi-jump.js. Tap any
 * content-word segment in any example sentence (Goi card, Bunpou card,
 * goi-from-kanji card) to open this overlay with a Goi card for that
 * word; tap to dismiss returns to the underlying surface (one-deep
 * back-stack with chain-drill). Visual mirrors .goi-from-kanji-overlay
 * (same backdrop + animation) so the "one-deep stack" reads identically
 * to the user. z-index 1320 sits above goi-from-kanji-overlay (1300)
 * so chain-drill from inside that surface layers correctly.
 *
 * Rule lives here (not kanji-back-face.css) so it travels with every
 * page that already loads Goi card rendering — including bunpou and
 * goi pages that don't load kanji-back-face.css. */
.goi-jump-overlay {
  position: fixed;
  inset: 0;
  z-index: 1320;
  background: rgba(20, 23, 33, 0.93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  animation: goi-jump-fade-in 0.18s ease-out;
}
.goi-jump-overlay[hidden] { display: none !important; }
@keyframes goi-jump-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Bump the inner card above this overlay's backdrop. position:fixed
 * already comes from .domino.domino-goi.flipped above; we only need
 * to bump z-index. */
.goi-jump-overlay .domino.domino-goi.flipped {
  z-index: 1321;
}
/* Headword-kanji card layered in the goi-jump overlay (chain-drill from a Goi card).
 * Unlike the Goi card, .domino-kanji.flipped does NOT self-position — give it the same
 * centered-modal box here so it shows correctly while the Goi card stays underneath.
 * (It still sits inside a `.tile-overlay-card` host so its internal CSS applies.) */
.goi-jump-overlay .domino.domino-kanji.flipped {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 420px);
  /* Size to the card's CONTENT (not a fixed 600px) so the shadow + rounding hug the actual
   * cream/ink card — a fixed height left ~115px of empty box below, whose shadow showed as a
   * mismatched second rectangle. Cap + scroll for unusually tall cards. Mode-agnostic. */
  height: auto;
  max-height: min(86vh, 600px);
  aspect-ratio: auto !important;
  z-index: 1321;
  border-radius: 14px;
  overflow-y: auto;
  box-shadow: 0 18px 48px rgba(0, 30, 60, 0.35), 0 6px 16px rgba(0, 30, 60, 0.18);
}