/* ═══════════════════════════════════════════════════════════════
   careiti-gamemodes.css — 訓練 / 挑戰 mode chrome, album register
   ═══════════════════════════════════════════════════════════════ */

/* ── Mode switch ────────────────────────────────────────────────
   Two wide targets rather than a compact segmented control: this is a
   fork in the experience, not a setting, and the audience should be able
   to read what each one does before choosing. */
.cgm-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 12px;
}
.cgm-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: var(--r-ui, 8px);
  background: var(--print, #FFFDF8);
  color: var(--ink-2, #5B5147);
  font-family: var(--f-album, system-ui, sans-serif);
  text-align: left;
  cursor: pointer;
}
.cgm-tab-t {
  font-size: max(calc(16px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  color: var(--ink, #221E1A);
}
.cgm-tab-d {
  font-size: max(calc(12px * var(--ct-k2, 1)), var(--ct-min, 0px));
  line-height: 1.45;
  color: var(--ink-3, #6F6355);
}
.cgm-tab[aria-pressed="true"] {
  border-color: var(--teal-ink, #0B6E64);
  border-width: 2px;
  background: rgba(13, 148, 136, .07);
}
.cgm-tab[aria-pressed="true"] .cgm-tab-t { color: var(--teal-ink, #0B6E64); }

@media (min-width: 700px) {
  .cgm-tab { min-height: var(--ct-tap, 56px); padding: 16px 18px; }
}

.cgm-note {
  margin: 0 0 14px;
  font-size: max(calc(12px * var(--ct-k2, 1)), var(--ct-min, 0px));
  line-height: 1.6;
  color: var(--ink-3, #6F6355);
}

/* ── Locked levels ──────────────────────────────────────────────
   Dimmed AND labelled. Dimming alone reads as a rendering glitch to
   someone who cannot see it well; the words say why it cannot be pressed. */
.cgm-locked {
  position: relative;
  opacity: .5;
  filter: grayscale(1);
  cursor: not-allowed;
}
.cgm-lock {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: var(--r-ui, 8px);
  background: var(--paper-2, #EFE7D8);
  color: var(--ink-3, #6F6355);
  font-size: max(calc(11px * var(--ct-k1, 1)), var(--ct-min, 0px));
  font-weight: 700;
}

/* ── Challenge HUD ──────────────────────────────────────────────
   Top-centre, clear of the game shell's exit at top-left and of the
   accessibility tab on the right edge. */
.cgm-hud {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 115;
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: 999px;
  background: var(--print, #FFFDF8);
  box-shadow: 0 2px 10px rgba(58, 42, 20, .12);
  font-family: var(--f-album, system-ui, sans-serif);
  font-size: max(calc(13px * var(--ct-k2, 1)), var(--ct-min, 0px));
  color: var(--ink-2, #5B5147);
  white-space: nowrap;
}
.cgm-hud b { color: var(--ink, #221E1A); font-weight: 700; }
.cgm-lives { color: var(--stamp, #B4472F) !important; letter-spacing: 1px; }
.cgm-clock.cgm-low { color: var(--stamp, #B4472F) !important; }

/* ── Challenge result ───────────────────────────────────────────
   Its own screen rather than the per-level one, because what ended is the
   run, not a level. */
.cgm-result {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(34, 30, 26, .55);
}
.cgm-result-card {
  width: min(92vw, 420px);
  padding: 28px 24px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: var(--r-print, 2px);
  background: var(--print, #FFFDF8);
  box-shadow: var(--sh-lift, 0 20px 44px rgba(58, 42, 20, .22));
  text-align: center;
  font-family: var(--f-album, system-ui, sans-serif);
}
.cgm-result-why {
  font-size: max(calc(13px * var(--ct-k2, 1)), var(--ct-min, 0px));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stamp, #B4472F);
  font-weight: 700;
}
.cgm-result-score {
  margin-top: 6px;
  font-size: max(calc(44px * var(--ct-kd, 1)), var(--ct-min, 0px));
  font-weight: 800;
  color: var(--ink, #221E1A);
  line-height: 1.1;
}
.cgm-result-lbl {
  font-size: max(calc(12px * var(--ct-k2, 1)), var(--ct-min, 0px));
  color: var(--ink-3, #6F6355);
}
.cgm-result-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 16px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--rule, #DFD3BE);
  font-size: max(calc(13px * var(--ct-k2, 1)), var(--ct-min, 0px));
  color: var(--ink-2, #5B5147);
}
.cgm-result-pb {
  margin-top: 8px;
  font-family: var(--f-hand, cursive);
  font-size: max(calc(15px * var(--ct-k3, 1)), var(--ct-min, 0px));
  color: var(--pen, #2F4F8F);
  transform: rotate(-1.5deg);
}
.cgm-again {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  border: 1px solid var(--teal-deep, #095A52);
  border-radius: var(--r-ui, 8px);
  background: var(--teal-ink, #0B6E64);
  color: #fff;
  font: inherit;
  font-size: max(calc(16px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  cursor: pointer;
}
.cgm-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--ink-2, #5B5147);
  font-size: max(calc(14px * var(--ct-k3, 1)), var(--ct-min, 0px));
}

/* ── Toast ──────────────────────────────────────────────────────
   Explains a refused tap. Bottom-centre, above the nav. */
.cgm-toast {
  position: fixed;
  left: 50%;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px);
  transform: translateX(-50%);
  z-index: 210;
  max-width: 88vw;
  padding: 12px 18px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: var(--r-ui, 8px);
  background: var(--ink, #221E1A);
  color: #fff;
  font-family: var(--f-album, system-ui, sans-serif);
  font-size: max(calc(14px * var(--ct-k3, 1)), var(--ct-min, 0px));
  box-shadow: 0 6px 20px rgba(58, 42, 20, .28);
}

@media (prefers-reduced-motion: reduce) {
  .cgm-toast, .cgm-result { animation: none !important; }
}

/* ── Grid blowout guard ─────────────────────────────────────────
   A grid track of `1fr` is really `minmax(auto, 1fr)`, so its minimum is
   the content's min-content width — a track will happily grow past its
   container rather than let a word wrap. With 大字模式 on at 360px that
   pushed the level grid 19px off the right edge of the screen.
   `minmax(0, 1fr)` lets the track shrink and the text wrap instead. This is
   deliberately unscoped by width: the failure appears on the narrowest
   phones, which is exactly where the tablet layer does not reach. */
.level-grid,
.lv-grid,
#levelGrid,
.answer-grid,
.choices,
.cgm-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.level-grid > *,
.lv-grid > *,
#levelGrid > *,
.answer-grid > *,
.choices > * { min-width: 0; }

/* The lock badge sits inside the card's padding rather than over its edge,
   so it can never be what pushes a track wider. */
.cgm-lock { max-width: calc(100% - 12px); }

/* ── Challenge-only games ────────────────────────────────────────
   定向訓練 / Emoji 猜謎 / 健康問答 have no training mode. The switch is
   replaced by one line rather than removed entirely: a picker that
   silently offers no choice reads as something that failed to load. */
.cgm-switch.cgm-single { display: block; }
.cgm-only {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--edge, #8E7C5E);
  border-radius: var(--r-ui, 8px);
  background: var(--paper-2, #EFE7D8);
  color: var(--ink-2, #5B5147);
  font-size: max(calc(14px * var(--ct-k3, 1)), var(--ct-min, 0px));
  line-height: 1.7;
}
.cgm-only strong { color: var(--teal-ink, #0B6E64); }

/* ── 每關要幾多 ⚡、最多幾多分 ────────────────────────────────────
   Drawn from an attribute with ::after rather than an injected element —
   see stampCost() in careiti-gamemodes.js for the two-observer freeze
   that appending a node caused.

   Follows the mode: in training the level is free and unscored, so the
   number would be a lie. 記憶翻牌 printed its own mode-blind pair; that
   one is retired rather than left to contradict this. */
[data-cgm-cost]::after {
  content: attr(data-cgm-cost);
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule, #DFD3BE);
  font-size: max(calc(12px * var(--ct-k2, 1)), var(--ct-min, 0px));
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-2, #5B5147);
  white-space: nowrap;
}
body[data-cgm-mode="challenge"] [data-cgm-cost]::after { color: var(--teal-ink, #0B6E64); }
.cgm-retired { display: none !important; }

/* A locked card's cost is not actionable yet; legible but quiet. */
.cgm-locked[data-cgm-cost]::after { opacity: .6; }