/*
 * Bunpou Dominos — overrides on top of goi/css/style.css.
 *
 * Bunpou inherits the entire goi visual language. This file overrides only
 * what's different:
 *   - Front face stays goi-sized (so Bunpou items mix into the Challenge Box).
 *   - Flipped state: viewport-centered fixed-size modal (same approach as
 *     goi.flipped) so the back-face panel — pattern, structure, meaning,
 *     example with furigana, English translation, multi-line explanation —
 *     has consistent room regardless of grid layout.
 *   - The "How am I doing?" gauge above the grid stays visible.
 *   - No auto-flip-back (handled in main.js): user closes by clicking again.
 */

/* === Front face: allow long patterns to wrap to 2 lines === */
/*
 * Goi sets `white-space: nowrap` and a single-line height. Bunpou patterns are
 * frequently longer (e.g. "〜られる (passive, ru-verb)", "じゃなかった /
 * じゃありませんでした"); we override to allow natural wrapping, with auto-fit
 * from JS as a backup for the genuinely long ones (〜なければならない etc.).
 */
body.game-page.bunpou-page .domino-face-front {
  padding: 0.35rem 0.4rem;
}

body.game-page.bunpou-page .domino-face-front .domino-kanji {
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: center;
  max-width: 100%;
  display: block;
}

/* === Pilot label badge color on the start page === */
body.start-page .level-card.level-n5 .level-badge {
  background: #5a8aa0;
}

/*
 * === Flipped Bunpou: viewport-centered fixed-size modal ===
 *
 * Same pattern as goi.flipped — see goi/css/style.css for the full rationale
 * (fixed-size modal, transition:none to suppress the slide-in animation,
 * works identically in 3×8/3×5/3×3/2×2/grid-off).
 *
 * No more `bunpou-review contain: none` workaround needed — `contain` was
 * removed from goi's .grid-container entirely, so position:fixed resolves
 * to the viewport in every mode.
 *
 * No more `position: relative` anchor on bunpou .grid-container needed —
 * the viewport-fixed modal doesn't need a positioned ancestor.
 */
.domino.domino-bunpou.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);
  transition: none;
  /* iOS Safari rendering fix — see goi/css/style.css for the full rationale.
   * Without these overrides, iOS Safari hides the popup AND stops painting
   * the underlying grid until a touch forces a repaint. */
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  will-change: auto;
}

.grid-container > .domino.domino-bunpou.flipped:nth-child(3n+1),
.grid-container > .domino.domino-bunpou.flipped:nth-child(3n+3) {
  transform: translate(-50%, -50%);
  transition: none;
}

/* Inner card: skip the rotateY animation; go straight to back display */
.domino.domino-bunpou.flipped .domino-inner {
  transform: none;
  transition: opacity 0.2s ease;
}

/* Hide the front face when flipped — back face takes the full panel */
.domino.domino-bunpou.flipped .domino-face-front {
  display: none;
}

/* Back face: full panel layout, no rotate, scrollable if needed */
.domino.domino-bunpou.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.5rem 1.5rem 1.75rem;
  gap: 0.75rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Back-face content: comfortable readable sizes (full grid space) === */

.domino.domino-bunpou.flipped .bunpou-pattern-back {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0.25rem 0 0;
}

.domino.domino-bunpou.flipped .bunpou-structure {
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
  color: var(--read-pattern);
  line-height: 1.3;
  margin: 0;
}

.domino.domino-bunpou.flipped .bunpou-meaning {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  color: var(--text);
  line-height: 1.35;
  margin: 0.25rem 0;
}

.domino.domino-bunpou.flipped .bunpou-example {
  background: var(--card-inset);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
  /* ~1.5rem breathing room above so the example block separates from
     the top key info (pattern + structure + meaning). */
  margin: 1.5rem 0 0.25rem;
  text-align: center;
}

.domino.domino-bunpou.flipped .bunpou-example-jp {
  /* ~50% larger than the prior 1.5rem. Furigana rt is em-based so
     it scales with this base. */
  font-size: 2.25rem;
  display: block;
  color: var(--text);
  line-height: 2.5;
  margin-bottom: 0.6rem;
}

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

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

.domino.domino-bunpou.flipped .bunpou-example-en {
  font-size: 1rem;
  display: block;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.4;
}

.domino.domino-bunpou.flipped .bunpou-explanation {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0.25rem 0 0;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: 0 8px 8px 0;
}

/* On narrower phones, scale slightly down */
@media (max-width: 480px) {
  .domino.domino-bunpou.flipped .domino-face-back {
    padding: 1.1rem 1.1rem 1.25rem;
    gap: 0.55rem;
  }
  .domino.domino-bunpou.flipped .bunpou-pattern-back {
    font-size: 2rem;
  }
  .domino.domino-bunpou.flipped .bunpou-structure {
    font-size: 0.85rem;
  }
  .domino.domino-bunpou.flipped .bunpou-meaning {
    font-size: 1.05rem;
  }
  .domino.domino-bunpou.flipped .bunpou-example {
    padding: 0.9rem 1rem;
    margin: 1.2rem 0 0.25rem;
  }
  .domino.domino-bunpou.flipped .bunpou-example-jp {
    /* ~50% larger than prior 1.3rem. */
    font-size: 1.95rem;
    line-height: 2.35;
  }
  .domino.domino-bunpou.flipped .bunpou-example-en {
    font-size: 0.92rem;
  }
  .domino.domino-bunpou.flipped .bunpou-explanation {
    font-size: 0.95rem;
    line-height: 1.5;
  }
}

/*
 * === Front face when NOT flipped ===
 * Smaller font fallback styles for the back face when it's *not* flipped
 * (i.e., the back face's "in-grid" preview state, which the user never sees
 * but should still render without overflow if the flip animation glitches).
 * We just keep the back face hidden and at base size; the .flipped overrides
 * above take over when actually flipped.
 */
.domino.domino-bunpou:not(.flipped) .domino-face-back {
  /* Goi's CSS already sets the back face appropriately when un-flipped (via
   * rotateY(180deg)). We just make sure the bunpou-specific font sizes don't
   * leak into the un-flipped state with absurdly small values. */
  font-size: 0;
}

/* ==========================================================================
 * Review mode (?review=1): no auto-shuffle, all 80 patterns rendered in a
 * scrollable column. The flipped popup needs to be a viewport-centered
 * modal — the default full-grid-container approach would span the whole
 * scrollable page (~80 dominos tall), which is unusable.
 * ========================================================================== */

/*
 * Specificity must beat the regular bunpou `.grid-container > .domino.flipped:
 * nth-child(3n+1/+3)` rule above (which has !important on transform: none and
 * specificity 0,6,1). We match the same shape — grid-container child + nth —
 * but with the .bunpou-review class added, giving 0,7,1. Repeat for each
 * column position so a flipped review-mode item in any column gets centered.
 */
body.game-page.bunpou-page.bunpou-review .grid-container > .domino.flipped,
body.game-page.bunpou-page.bunpou-review .grid-container > .domino.flipped:nth-child(3n+1),
body.game-page.bunpou-page.bunpou-review .grid-container > .domino.flipped:nth-child(3n+2),
body.game-page.bunpou-page.bunpou-review .grid-container > .domino.flipped:nth-child(3n+3) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(440px, 92vw) !important;
  height: auto !important;
  max-height: 90vh !important;
  aspect-ratio: auto !important;
  transform: translate(-50%, -50%) !important;
  /*
   * Disable the CSS transition on transform/position/etc. for this state.
   * The simultaneous position change (grid-item → fixed) and percent-based
   * transform leaves the transition stuck at progress 0 forever in Chrome,
   * so the modal never reaches its final centered position. Snapping the
   * popup into place is the right UX here anyway.
   */
  transition: none !important;
  z-index: 200;
}

body.game-page.bunpou-page.bunpou-review .grid-container > .domino.flipped .domino-face-back {
  position: relative;
  height: auto;
  max-height: 90vh;
  overflow-y: auto;
}

/* Click-to-dismiss backdrop, injected by main.js when a domino flips open
 * in review mode and removed on settleFlippedBlock. Clicking the backdrop
 * (anywhere outside the modal) closes the popup. */
.bunpou-review-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 22, 38, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 180;
  cursor: pointer;
  animation: bunpouBackdropFadeIn 0.16s ease;
}

@keyframes bunpouBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ============================================================
 * MAHJONG HALL OVERRIDES (Step 7 — Bunpou game-page redesign)
 *
 * Re-skins .domino.domino-bunpou for the bone-tile front face + harmonized
 * dark back face. The body/header/buttons/progress chrome inherits from
 * goi/css/style.css's overrides, since this page links that sheet first.
 * ============================================================ */

/* Bone-tile front face + dark text. Scoped to .domino.domino-bunpou (NOT
   body.game-page.bunpou-page) so it also applies in the challenge box,
   where bunpou tiles live alongside goi/kanji tiles and the body only has
   class `game-page`. Pre-fix, this was scoped to the bunpou-page body
   class — so in challenge the front face fell back to default dark
   surface + light text, which became unreadable on amber/orange glow
   backgrounds (glow-edge / glow-wide had no .domino-kanji color override
   to switch to dark; only glow-full did). Mirrors goi's `.domino.domino-goi
   .domino-face-front .domino-kanji { color: var(--canvas) }` pattern. */
.domino.domino-bunpou .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-bunpou .domino-face-front .domino-kanji {
  color: var(--tile-engrave);
  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);
}

/* Domino base — bone-tile shadow + edge bevel */
.domino.domino-bunpou {
  background: transparent;
  border-radius: 10px;
  box-shadow:
    0 3px 0 var(--tile-edge),
    0 6px 16px rgba(0, 0, 0, 0.5);
}

/* === Back face (flipped state) — match the goi back-face palette === */
.domino.domino-bunpou.flipped .domino-face-back {
  background: var(--canvas-elev);
  color: var(--text);
}
.domino.domino-bunpou.flipped .bunpou-pattern-back {
  color: var(--text);
  font-family: var(--font-jp);
}
.domino.domino-bunpou.flipped .bunpou-structure {
  color: var(--text-soft);
  font-family: var(--font-en);
  font-style: italic;
}
.domino.domino-bunpou.flipped .bunpou-meaning {
  color: var(--text);
  font-family: var(--font-en);
}
.domino.domino-bunpou.flipped .bunpou-example {
  background: rgba(232, 220, 196, 0.05);
  border-left: 2px solid var(--brass);
  border-radius: 0 6px 6px 0;
}
.domino.domino-bunpou.flipped .bunpou-example-jp {
  color: var(--text);
  font-family: var(--font-jp);
}
.domino.domino-bunpou.flipped .bunpou-example-jp rt {
  color: var(--text-soft);
}
.domino.domino-bunpou.flipped .bunpou-example-en {
  color: var(--text-faint);
  font-family: var(--font-en);
  font-style: italic;
}
.domino.domino-bunpou.flipped .bunpou-explanation {
  color: var(--text);
  background: rgba(201, 164, 100, 0.08);
  border-left: 3px solid var(--brass);
  border-radius: 0 6px 6px 0;
}


/* ============================================================
 * GLOW STATE OVERRIDES (peek-counter visual feedback) — bunpou
 *
 * Same progressive bone→amber→orange→vermilion shift as goi, scoped to
 * .domino-bunpou. See goi/css/style.css glow block for the rationale.
 * ============================================================ */

.domino.domino-bunpou.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-bunpou.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-bunpou.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-bunpou.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-bunpou.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-bunpou.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-bunpou.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);
}