/* Mahjong solitaire board. Inherits the existing theme tokens (--text, --muted, --line, --accent,
   --action-text, --canvas). */
.mahjong { display: grid; justify-items: center; gap: .9rem; width: min(100%, 34rem); margin-inline: auto; color: inherit; }
/* The pile is measured in half-cells, the same unit the boards are written in, so one rule lays
   out a terrace, a pyramid and a bridge alike. A tile is two half-cells square. */
.mahjong-board { --cell: clamp(13px, 4.4vw, 32px); --lift: calc(var(--cell) * .2); width: 100%; display: grid; justify-items: center; }
.mahjong-frame { position: relative; width: calc(var(--columns, 8) * var(--cell)); height: calc(var(--rows, 6) * var(--cell) + var(--layers, 2) * var(--lift)); }
/* Every tile is placed from its own coordinates. A higher layer is nudged up and left by a
   constant, which is what makes a pile read as a pile on a flat screen: the tile beneath shows
   along two of its edges, exactly as it would if you were looking down at one. */
.mahjong-tile { position: absolute; box-sizing: border-box; margin: 0; padding: 0; font: inherit; cursor: pointer;
  left: calc(var(--x) * var(--cell) - var(--layer) * var(--lift)); top: calc(var(--y) * var(--cell) - var(--layer) * var(--lift));
  width: calc(2 * var(--cell)); height: calc(2 * var(--cell));
  color: inherit; background: var(--canvas, #f3f6f1); border: 1px solid var(--line, #c2ccbd); border-radius: .22rem;
  /* The higher a tile sits the further it throws its shadow, which is what tells a flat screen
     that one tile is on another rather than merely next to it. */
  box-shadow: calc(var(--layer) * 2px + 1px) calc(var(--layer) * 2px + 1px) 0 color-mix(in srgb, var(--text, currentColor) 22%, transparent); }
.mahjong-tile[hidden] { display: none; }
/* A free tile is the one you can do something with, so it is the one that looks touchable. A
   buried tile is drawn flatter and greyer but is never disabled: pressing it is how the visitor
   is told what is holding it down. */
.mahjong-tile[data-free="false"] { color: var(--muted, currentColor); background: color-mix(in srgb, var(--text, currentColor) 7%, var(--canvas, #f3f6f1)); box-shadow: none; cursor: pointer; }
.mahjong-tile[data-free="true"] { border-color: color-mix(in srgb, var(--text, currentColor) 45%, transparent); }
.mahjong-tile[data-held="true"] { border-color: var(--accent, currentColor); box-shadow: 0 0 0 2px var(--accent, currentColor); }
.mahjong-tile:hover[data-free="true"]:not([aria-disabled="true"]) { border-color: var(--accent, currentColor); }
.mahjong-tile:focus-visible { outline: 3px solid var(--text, currentColor); outline-offset: 2px; z-index: 9999; }
.mahjong-tile[aria-disabled="true"] { cursor: default; }
/* The faces are this collection's own: a rank is drawn as that many marks and a suit decides
   what a mark looks like, so six ranks in three suits need three rules rather than eighteen. */
.mahjong-face { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12%; width: 100%; height: 100%; padding: 16%; box-sizing: border-box; }
.mahjong-face i { display: block; width: 26%; height: 26%; background: currentColor; }
.mahjong-tile[data-suit="d"] .mahjong-face i { border-radius: 50%; }
.mahjong-tile[data-suit="b"] .mahjong-face i { width: 68%; height: 14%; border-radius: 1px; }
.mahjong-tile[data-suit="r"] .mahjong-face i { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.mahjong-tile[data-free="true"] .mahjong-face { color: var(--accent, currentColor); }

.mahjong-choice { min-height: 1.4em; margin: 0; font-size: .9375rem; line-height: 1.4; text-align: center; color: var(--muted, currentColor); }
.mahjong-choice[data-refused="true"] { color: var(--text, currentColor); }
.mahjong-readout { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.4rem; margin: 0; }
.mahjong-figure { display: flex; gap: .4rem; align-items: baseline; }
.mahjong-figure dt { font-size: .8125rem; color: var(--muted, currentColor); }
.mahjong-figure dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A narrow screen gets a smaller cell rather than a scrollbar: the widest board here is six
   tiles across, which is twelve half-cells, and twelve times the floor still fits 390px. */
@media (max-width: 380px) {
  .mahjong-board { --cell: clamp(11px, 3.1vw, 16px); }
  .mahjong-readout { gap: .2rem .9rem; }
  .mahjong-figure dt { font-size: .75rem; }
}
/* Where the system paints the colours, a tile has to keep its outline or the pile becomes one
   shape, and the marks have to stay drawn in the text colour rather than the accent. */
@media (forced-colors: active) {
  .mahjong-tile { border: 1px solid CanvasText; background: Canvas; box-shadow: none; }
  .mahjong-tile[data-free="true"] { border-width: 3px; }
  .mahjong-tile[data-held="true"] { outline: 3px solid Highlight; }
  .mahjong-face i { background: CanvasText; }
  .mahjong-tile[data-suit="r"] .mahjong-face i { background: transparent; box-shadow: inset 0 0 0 2px CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .mahjong-tile { transition: none; }
}