/* ═══════════════════════════════════════════════════════════════
   careiti-memory.css — 記憶翻牌 board

   Reported: no card look, tiny, not responsive, no standard size, the
   symbols on them minute. Three separate causes, one of them mine.

   1. The board is capped at 68px PER CARD. game.html writes
        max-width: (cols * 68 + 20)px
      as an Alpine inline style, so a four-column board can never exceed
      292px — on a 1194px screen the whole game sits in a quarter of it.
      Being inline, no stylesheet could reach it without !important.

   2. `.c-wrap` means two different things. careiti-ui.css uses it for the
      page content wrapper; game.html uses it for each flip card. My tablet
      layer set `.c-wrap { max-width: 820px; padding-inline: 36px;
      margin-inline: auto }` — and every single flip card took it. That is
      the same class-collision that broke `.page` and then `.dash-wrap`,
      for the third time. Cards are excluded by their parent here rather
      than by hoping the name stays unique.

   3. The symbol size is computed in JS from the card COUNT alone
      (32/26/22/18px), with no idea how large a card actually is. On a
      tablet a card is now ~150px and its symbol was still 18px.

   The board is sized from the viewport instead, against both axes — a
   memory board is square-ish and lives entirely on screen, so height binds
   as often as width.
   ═══════════════════════════════════════════════════════════════ */

/* ── Undo the page-wrapper rules on flip cards ─────────────────── */
body[data-ct="app"] .card-grid > .c-wrap {
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0;
  aspect-ratio: 1;
}

/* ── The board fills the screen it is played on ────────────────── */
body[data-ct="app"] .card-grid {
  /* Beats the inline max-width. This is the justified use: competing with a
     per-element inline declaration written by the framework, not with
     another stylesheet. */
  max-width: min(92vw, 82vh, 900px) !important;
  width: 100%;
  margin-inline: auto !important;
  gap: clamp(6px, 1.1vmin, 14px);
  padding: clamp(4px, 1vmin, 12px);
}

@media (min-width: 700px) {
  body[data-ct="app"] .card-grid {
    max-width: min(86vw, 74vh, 820px) !important;
    gap: clamp(8px, 1.3vmin, 18px);
  }
}

/* Short landscape: height is what runs out on a memory board, so it is the
   axis that decides. */
@media (min-width: 700px) and (max-height: 900px) and (orientation: landscape) {
  body[data-ct="app"] .card-grid {
    max-width: min(70vh, 640px) !important;
  }
}

/* ── Cards look like cards ─────────────────────────────────────── */
body[data-ct="app"] .card-grid .c-front,
body[data-ct="app"] .card-grid .c-back {
  border-radius: clamp(6px, 1.2vmin, 12px);
  box-shadow: 0 2px 6px rgba(58, 42, 20, .12);
}
body[data-ct="app"] .card-grid .c-back {
  /* A face-down card is the back of a print: warm paper, a rule border, and
     a quiet mark — not a playing-card emoji that renders differently on
     every platform. */
  background: var(--paper-2, #EFE7D8);
  border: 1px solid var(--rule, #DFD3BE);
  color: transparent;                 /* hide the 🎴 glyph itself */
  /* NOT position:relative. The card faces are position:absolute;inset:0 —
     that is what gives them the card's full size. Setting relative here to
     anchor the ::after below overrode it and collapsed every face to its
     line height: a 134px card with a 134x31 face, which is the flat bar
     that appeared. An absolutely-positioned element is already a
     containing block for its own pseudo-element; nothing was needed. */
}
body[data-ct="app"] .card-grid .c-back::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 2px solid var(--rule, #DFD3BE);
  border-radius: 4px;
  opacity: .75;
}
body[data-ct="app"] .card-grid .c-front {
  background: var(--print, #FFFDF8);
  border: 1px solid var(--rule, #DFD3BE);
}
body[data-ct="app"] .card-grid .c-wrap.is-matched .c-front {
  background: rgba(61, 107, 69, .12);
  border-color: var(--grow, #3D6B45);
}

/* ── The symbol scales with the board, not with the card count ───
   The first attempt used container queries, with `container-type: size` on
   each card. That broke the board: size containment stops the element
   taking its height from its content, which fought `aspect-ratio: 1` and
   collapsed every card into a flat bar. Viewport units do the same job here
   with no such interaction — the board is already sized from the viewport,
   so a card is a known fraction of it. */
body[data-ct="app"] .card-grid .c-front,
body[data-ct="app"] .card-grid .c-front > span {
  /* 字級 = 張牌嘅一個固定比例，唔係視窗嘅比例。
     舊寫法 clamp(22px, 6vmin, 72px) 喺 1280×800 出 48px，而張牌係 287px
     —— 字只佔 17%，望落係一張好大嘅白牌中間有粒好細嘅嘢。院舍講嘅
     「咭牌中嘅文字／emoji 要放大」就係呢個。
     --cgf-card 由 careiti-countdown.js 量返嚟（張牌實際闊度）。
     0.46 係實測落嚟嘅上限：再大，emoji 上下就會被 c-front 切到。
     clamp 嘅下限保住細牌唔會細到睇唔到，上限防止 2 張牌嗰種超大牌爆版。 */
  font-size: clamp(30px, calc(var(--cgf-card, 90px) * .46), 132px) !important;
  line-height: 1;
  /* 置中：flex 已經 center，但 emoji 嘅字型基線唔喺字框正中，
     淨靠 flex 會偏低。用 1 嘅行高 + 呢兩行，令字框本身就係內容框。 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
body[data-ct="app"] .card-grid .c-front > span {
  display: block;
  line-height: 1;
}
body[data-ct="app"] .card-grid .c-front .cic {
  width: 54%;
  height: 54%;
}

/* 冇咗個平板專用嘅 font-size override。
   以前要分開寫，係因為 vmin 唔識咭牌幾大，所以要按屏幕闊度再校一次。
   而家字級直接由 --cgf-card 派生 —— 密啲嘅棋盤張牌本身細啲，字自然跟住
   細，唔使再為每個 breakpoint 各寫一條，亦唔會再有兩條互相打交。 */

/* aspect-ratio needs the row to follow the track width; state it so the
   board cannot be flattened by a stray row-sizing rule from another layer. */
body[data-ct="app"] .card-grid { grid-auto-rows: auto; }
body[data-ct="app"] .card-grid > .c-wrap { height: auto; }

/* Picture cards use most of the tile rather than a fixed 85%/78%. */
body[data-ct="app"] .card-grid .c-front img {
  width: 88% !important;
  height: auto !important;
  max-height: 72% !important;
  object-fit: cover;
}