/* Ooh La Mahj · tile faces, lifted from the app */
.tile{
  position:relative;flex:none;
  /* the same floor as the title's ivory button (8/19): the numerals are dark
     ink, so the face may never depend on a gradient layer surviving */
  background-color:var(--tile-face);
  background-image:linear-gradient(165deg,var(--tile-face) 0%,var(--tile-face) 55%,var(--tile-face2) 100%);
  border:1px solid var(--tile-edge);
  border-radius:8px;
  box-shadow:var(--shadow), inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(160,140,90,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ink);
  overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease;
}
.tile .n{font-family:var(--serif);font-weight:700;line-height:.9}
.tile .m{line-height:1;display:flex;align-items:center;justify-content:center}
.tile .lbl{font-family:var(--sans);font-weight:600;letter-spacing:.14em;line-height:1}
.tile.red .n{color:var(--red)} .tile.grn .n{color:var(--grn)} .tile.blu .n{color:var(--blu)}
.tile.back{background-color:#17604A;background-image:linear-gradient(160deg,#17604A,#0F4A39);border-color:#0A2E24}
.tile.back::after{content:'';position:absolute;inset:3px;border:1px solid rgba(201,162,75,.55);border-radius:5px;
  background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(201,162,75,.13) 5px 6px)}
/* -174 · PASS IT ON · one tile, turning (Alex, 3 Sep, mock-tileturn.html).
   Face-down for 1.2s, a .6s turn, the flower for 2.4s, a .6s turn home. The
   reveal is the beat and the face gets the time. Built from the tile's own
   inks — the .tile.back green, keyline and hatch; the face gradient — in its
   own classes so the rack's .tile rules (vw widths, selection lifts, --ts)
   cannot reach it. Decorative: the stage is aria-hidden and the headline
   carries the meaning. Under reduced motion it holds on the flower, which is
   also what a screenshot shows. The -webkit- prefixes are load-bearing on
   older iOS Safari (the back showed through the face mid-turn without them),
   and the FACE is pre-rotated while the loop turns the PARENT — that is what
   keeps the flower from reading mirrored. */
.pstage{height:132px;display:flex;align-items:center;justify-content:center;perspective:700px;margin-top:6px}
.pflip{position:relative;width:88px;height:115px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  animation:pturn 4.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes pturn{0%,25%{transform:rotateY(0)}37.5%,87.5%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.pflip{animation:none;transform:rotateY(180deg)}}
.ptile{position:absolute;inset:0;border-radius:9px;border:1px solid var(--tile-edge);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 6px 14px rgba(10,25,18,.28),inset 0 1.5px 0 rgba(255,255,255,.9)}
.pface{transform:rotateY(180deg);background:linear-gradient(165deg,var(--tile-face) 0%,var(--tile-face) 55%,var(--tile-face2) 100%)}
.pface .pm svg{width:46px;height:46px;display:block}
.pface .plbl{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.16em;color:#8A7F5F;margin-top:6px}
.pback{background-color:#17604A;background-image:linear-gradient(160deg,#17604A,#0F4A39);border-color:#0A2E24;box-shadow:0 6px 14px rgba(10,25,18,.28)}
.pback::after{content:'';position:absolute;inset:5px;border:1px solid rgba(201,162,75,.55);border-radius:6px;
  background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(201,162,75,.13) 6px 7px)}

/* rack size. --rk is the rack's own scale (-93, Alex 8/29: the hand jumping
   between 7 and 8 tiles) — 1 everywhere but the two-exposure hand, written by
   fitRack(), which carries the whole reasoning. It multiplies every measurement
   the face is built from, here and in the wide rules below, or the numerals
   would outgrow their tile. */
.t-lg{width:calc(min(12.2vw,52px) * var(--rk,1));aspect-ratio:13/17}
.t-lg .n{font-size:calc(clamp(21px,6.7vw,29px) * var(--rk,1))}
.t-lg .m svg{width:calc(clamp(13.5px,4.3vw,18px) * var(--rk,1));height:calc(clamp(13.5px,4.3vw,18px) * var(--rk,1))}
.t-lg .m .zi{font-size:calc(clamp(12.5px,3.8vw,15.7px) * var(--rk,1))}
.t-lg .lbl{font-size:calc(7.8px * var(--rk,1));margin-top:2px}
/* mid (exposures, win display) — OPTION C sizes, 8/17 */
.t-md{width:34px;aspect-ratio:13/17;border-radius:6px}
.t-md .n{font-size:20.3px}
.t-md .m svg{width:12px;height:12px}
.t-md .m .zi{font-size:10.7px}
.t-md .lbl{font-size:5.6px;margin-top:1px}
/* small (discards) */
.t-sm{width:29px;aspect-ratio:13/17;border-radius:5px}
.t-sm .n{font-size:19.2px}
.t-sm .m svg{width:11.4px;height:11.4px}
.t-sm .m .zi{font-size:10.3px}
.t-sm .lbl{font-size:5px;margin-top:1px}
/* tiny (opponent exposures) — the size the whole complaint was about */
/* ── -93 · --gk, THE GROUP'S OWN SCALE (Alex 8/29, her screenshot: "Evelyn
   exposed a sextet and it overran her felt") ─────────────────────────────────
   A seat panel holds 100px of tiles: five at 20px fit with one pixel to spare
   and SIX overrun by 21px — over the panel edge and, in the right-hand seat,
   off the screen. -89 is why it cannot wrap out of trouble (a group is one
   unbreakable cluster, and rightly so), so the group shrinks instead. --gk is
   inherited from the .ogrp/.egrp the tiles sit in and defaults to 1, so a tile
   anywhere else — the discard pile, the rack — is untouched. Every measurement
   the face is built from scales with it, or the numerals outgrow their tile. */
.t-xs{width:calc(20px * var(--gk,1));aspect-ratio:13/17;border-radius:4px;box-shadow:0 1px 2px rgba(10,25,18,.3)}
.t-xs .n{font-size:calc(12.8px * var(--gk,1))}
.t-xs .m svg{width:calc(7.6px * var(--gk,1));height:calc(7.6px * var(--gk,1))}
/* 萬 is thirteen strokes; at this size it needs every bit of weight it can hold */
.t-xs .m .zi{font-size:calc(7.1px * var(--gk,1));font-weight:700}
.t-xs .lbl{font-size:calc(3.9px * var(--gk,1))}

.tile.joker{background-color:#E3C878;background-image:linear-gradient(165deg,#EBD48C,#CFAE58);border-color:#A5822F;color:var(--deep)}   /* -207 · gold, a green J, as in the app */
.tile.joker .lbl{color:var(--deep);letter-spacing:.16em}
/* the serif J has a tail the wind letters do not; lift it by the measured difference (app: --kj − --kw ≈ .19em) so its ink lands on the winds' line and JOKER sits where WIND sits */
.tile.k-joker .n{transform:translateY(-.19em)}
.t-lg{--tih:calc(clamp(21px,6.7vw,29px) * .9 * var(--rk,1))}
.t-lg .m.art,.t-lg .nz{height:var(--tih);display:flex;align-items:center;justify-content:center}
/* -125 · AND THE INK LANDS ON ONE LINE TOO (Alex, 31 Aug: "there needs to be
   consistent padding between the bottom of the icon and the text for all of
   these tiles with words on them").
   -124 gave the six captioned tiles one shared BOX, which levelled the words. It
   did not level the AIR above them, because what a reader sees is not the box, it
   is the ink, and the six marks stop at six different heights inside it. Measured
   off the painted pixels at 402px, with the tile's own shadow and border
   flattened so nothing but the mark and the caption could count as ink:

       SOAP    ink ends 41.75  ->  0.25px of air under it
       FLOWER  ink ends 40.50  ->  1.50px
       JOKER   ink ends 39.00  ->  3.00px
       GREEN   ink ends 38.88  ->  3.12px
       RED     ink ends 38.38  ->  3.62px
       WIND    ink ends 36.13  ->  6.00px

   The soap frame reaches 5.6px lower than the N, so the soap nearly touched its
   word while the wind had six pixels of sky. Two different reasons for one
   symptom: the three SVG marks each fill their 24-unit drawing to a different
   depth (the soap frame runs to 23.8, the flower's lowest petal to 22.8, the
   palm's trunk to 22.5), and the two text marks sit on two different baselines
   because an ideographic glyph fills its em where a Latin capital stands well
   above the em's floor.

   So each mark is nudged onto the box's bottom edge -- the line the dragon glyph
   already sits on, which is why RED and GREEN need no nudge at all. The SVG
   nudges read as (half the box) minus (that drawing's own ink depth from its
   centre, a fixed number of pixels because the art is a fixed 30px); the wind's
   reads as a fraction of the box, because a text baseline moves with the font.
   Both forms ride --tih and --rk without a second set of numbers.
   THESE CONSTANTS ARE MEASUREMENTS, NOT PREFERENCES. Re-measure before touching
   them. */
.t-lg.k-soap   .m.art{transform:translateY(calc(var(--tih)/2 - 15px    * var(--rk,1)))}
.t-lg.k-flower .m.art{transform:translateY(calc(var(--tih)/2 - 13.75px * var(--rk,1)))}