.tile-hand {
  --tile-top-depth: 3.75px;
  --tile-side-depth: 4px;
  --tile-radius: 0;
  --tile-cap-highlight: #efe4c9;
  --tile-cap-mid: #ddcca0;
  --tile-side-base-light: #9b7b49;
  --tile-side-base-mid: #775a33;
  --tile-side-base-dark: #5a4020;
  background: linear-gradient(158deg, #f7f3e9 0%, #ebe2cd 34%, #d7caac 68%, #bfaf8d 100%);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset -1px 0 2px rgba(255, 255, 255, 0.1),
    inset 0 -4px 9px rgba(62, 36, 10, 0.2),
    inset 2px 0 5px rgba(40, 22, 6, 0.08),
    inset 0 -1px 0 rgba(44, 24, 6, 0.24),
    -3px 6px 12px rgba(0, 0, 0, 0.42),
    0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 var(--tile-radius) var(--tile-radius);
  position: relative;
  overflow: visible;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
  direction: ltr;
}

.tile-hand::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--tile-top-depth));
  left: 0;
  width: 100%;
  height: var(--tile-top-depth);
  background: linear-gradient(to bottom, var(--tile-cap-highlight), var(--tile-cap-mid));
  border-radius: var(--tile-radius) var(--tile-radius) 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  z-index: -1;
  pointer-events: none;
}

.tile-hand::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--tile-top-depth));
  right: 100%;
  width: var(--tile-side-depth);
  height: calc(100% + var(--tile-top-depth));
  background: linear-gradient(to left, var(--tile-side-base-light) 0%, var(--tile-side-base-mid) 40%, var(--tile-side-base-dark) 100%);
  z-index: -1;
  pointer-events: none;
}

.tile-hand .bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0;
}

.tile-hand > :not(.bar) {
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 0;
  right: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: auto;
}

.tile-hand .suit-rank {
  position: absolute;
  top: max(1px, 3.5cqh);
  left: max(1px, 3.5cqw);
  right: auto;
  bottom: auto;
  width: 37%;
  height: 35%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: min(55.8cqw, 45cqh);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 2px rgba(255, 250, 235, 0.86);
  pointer-events: none;
  z-index: 8;
}

.tile-hand .suit-art-box {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
  contain: layout paint style;
}

.tile-hand .suit-art-box > svg.suit-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  overflow: hidden;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.56)) drop-shadow(0 1px 2px rgba(40, 22, 8, 0.18));
}

.tile-man .suit-rank { color: #B91018; }
.tile-pin .suit-rank { color: #0B4F9A; }
.tile-sou .suit-rank { color: #087041; }
.tile-wind .suit-rank { color: #1A1208; }

/* Each art box is lifted clear of the bottom edge. The art used to sit flush
   against it (sou actually hung 2% past), which reads as the glyph being
   sliced — fine when a neighbouring tile covers the bleed, obvious once tiles
   are separated by a gap. */
.tile-hand.tile-wind .suit-art-box { top: 26%; left: 16%; width: 82%; height: 64%; }
.tile-hand.tile-man .suit-art-box {
  top: auto;
  left: auto;
  right: -1%;
  bottom: 8%;
  width: min(80cqw, 78cqh);
  height: min(80cqw, 78cqh);
}
.tile-hand.tile-pin .suit-art-box {
  top: auto;
  left: auto;
  right: 1%;
  bottom: 8%;
  width: min(84cqw, 82cqh);
  height: min(84cqw, 82cqh);
}
.tile-hand.tile-sou .suit-art-box {
  top: auto;
  left: auto;
  right: -8%;
  bottom: 6%;
  width: 86%;
  height: 66%;
}

.wind-symbol {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.62)) drop-shadow(0 1px 2px rgba(40, 22, 8, 0.22));
}

.tile-hand .honor-face {
  position: absolute;
  /* percentage inset so the dragon glyph keeps clear of both edges at any
     tile size — 中 and 發 were running into the bottom */
  top: 8%;
  bottom: 8%;
  left: 1px;
  right: 2px;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
}

.honor-main {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.9;
  color: #1A1208;
  font-size: min(74cqw, 62cqh);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.honor-dragon-red .honor-main { color: #9e1e1e; }
.honor-dragon-green .honor-main { color: #087041; }

.haku-blank {
  width: 84%;
  aspect-ratio: 24 / 34;
  border: 2px solid #1a6fc4;
  border-radius: 2px;
  flex-shrink: 0;
  pointer-events: none;
}

.tile-hand.tile-red-five {
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.55), transparent 40%),
    linear-gradient(158deg, #fff8f0 0%, #ffb880 30%, #f07030 65%, #c04818 100%);
}

.tile-hand.tile-red-five .suit-rank { color: #6a1e08; }
.tile-hand.tile-red-five::before { background: linear-gradient(to bottom, #ffd898, #fde8d0); }
.tile-hand.tile-red-five::after { background: linear-gradient(to left, #7a2c10 0%, #521608 45%, #341008 100%); }

/* Backs carry the whole Hands view, so they must read as tiles against the
   dark felt — lifted well above the original near-black green, with an inset
   ring so each tile has a visible edge even when overlapped. */
.tile-hand.tile-back {
  background:
    radial-gradient(ellipse 70% 55% at 38% 26%, rgba(159, 225, 203, 0.16), transparent 70%),
    linear-gradient(158deg, #24705c 0%, #1b5a4a 38%, #134438 70%, #0d3229 100%);
  box-shadow:
    0 0 0 1px rgba(159, 225, 203, 0.38),
    inset 0 0 0 2px rgba(159, 225, 203, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -4px 8px rgba(0, 0, 0, 0.34),
    -2px 3px 8px rgba(0, 0, 0, 0.5);
}

.tile-hand.tile-back::before { background: linear-gradient(to bottom, #4e9986, #2a6c5b); }
.tile-hand.tile-back::after { background: linear-gradient(to left, #2c6f5e 0%, #1d5044 45%, #0d2f27 100%); }

/* Cap colors derived from suit bar */
.bar-p { background: linear-gradient(90deg, #8B6212, #FFD78A 50%, #8B6212); }
.bar-s { background: linear-gradient(90deg, #085041, #5DCAA5 50%, #085041); }
.bar-m { background: linear-gradient(90deg, #0C447C, #85B7EB 50%, #0C447C); }
.bar-w { background: linear-gradient(90deg, #444441, #D3D1C7 50%, #444441); }
.bar-r { background: linear-gradient(90deg, #501313, #E24B4A 50%, #501313); }
.bar-g { background: linear-gradient(90deg, #173404, #97C459 50%, #173404); }

.tile-hand:has(.bar-p) { --tile-cap-highlight: #f4dba6; --tile-cap-mid: #d6b16a; }
.tile-hand:has(.bar-s) { --tile-cap-highlight: #9ae0c8; --tile-cap-mid: #56b999; }
.tile-hand:has(.bar-m) { --tile-cap-highlight: #b9d9f7; --tile-cap-mid: #74addd; }
.tile-hand:has(.bar-w) { --tile-cap-highlight: #e5e2db; --tile-cap-mid: #b8b2a5; }
.tile-hand:has(.bar-r) { --tile-cap-highlight: #f3a4a0; --tile-cap-mid: #d8615d; }
.tile-hand:has(.bar-g) { --tile-cap-highlight: #cbe5a7; --tile-cap-mid: #97c459; }

.tile-offer {
  box-shadow:
    0 0 0 2px var(--gold-base),
    0 0 18px rgba(200, 148, 26, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -4px 10px rgba(48, 25, 4, 0.22),
    -3px 6px 14px rgba(0, 0, 0, 0.5) !important;
}

/* ── ONE tile size for every context ──
   Rivers, hand, dora, melds and opponent backs all render at exactly
   --tile-w × --tile-h. No context overrides the size. */
.river-grid-h .tile-hand,
.opp-backs .tile-hand,
.meld-set .tile-hand,
.hand-tiles .tile-hand,
.dora-tile .tile-hand {
  --tile-top-depth: var(--tile-cap);
  --tile-side-depth: var(--tile-side);
  width: var(--tile-w);
  height: var(--tile-h);
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  flex: 0 0 auto;
  margin-top: var(--tile-top-depth);
  container-type: size;
}

/* ── Laid-down tiles ──
   A riichi declaration tile and the called tile in an open meld are turned
   on their side, as they are at a real table. The margins swap the layout
   footprint to match the rotated visual box, so neighbours are pushed the
   correct distance instead of being overlapped. */
.tile-hand.tile-lay {
  /* Clockwise, so the two extruded faces land on the RIGHT and TOP:
     rotate(90deg) maps local-top -> screen-right and local-left -> screen-top.
     Anticlockwise would bury them on the left and bottom, where they read as
     a shadow rather than as tile thickness. */
  transform: rotate(90deg);
  /* --lay-inset swaps the LAYOUT box to the rotated visual box; a transform
     alone changes nothing about layout. Margins are symmetric because the
     faces below are re-placed to extrude up and left exactly like an upright
     tile's, so a laid tile seams against its neighbours the same way. */
  --lay-inset: calc((var(--tile-h) - var(--tile-w)) / 2);
  margin-top: calc(-1 * var(--lay-inset));
  margin-bottom: calc(-1 * var(--lay-inset));
  margin-left: var(--lay-inset);
  /* the cap still extrudes past the right edge, so the next tile is pushed off
     by that depth on top of its own side face filling the gap */
  margin-right: calc(var(--lay-inset) + var(--tile-cap));
  align-self: flex-end;
  z-index: 4;
  /* The drop shadow rotates with the element, so its local offset is turned a
     quarter-turn (local 6,3 -> screen -3,6) to keep the page's single light
     source: every tile, upright or laid, still casts down and to the left. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset -1px 0 2px rgba(255, 255, 255, 0.1),
    inset 0 -4px 9px rgba(62, 36, 10, 0.2),
    inset 2px 0 5px rgba(40, 22, 6, 0.08),
    inset 0 -1px 0 rgba(44, 24, 6, 0.24),
    6px 3px 12px rgba(0, 0, 0, 0.42),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

/* The cap (top bar) is left alone, so it turns with the tile and stays on the
   laid-down edge — rotate(90deg) puts local-top on the screen right.
   Only the side face is re-placed: moving it to the local bottom lands it on
   the screen left, matching where every upright tile's side face sits. The
   gradient is turned a quarter-turn to suit (local-down reads as screen-left). */
.tile-hand.tile-lay::after {
  top: 100%;
  left: 0;
  right: auto;
  /* exactly the tile's span — unlike an upright tile there is no corner to
     cover, because the cap sits on the opposite edge, not an adjacent one */
  width: 100%;
  height: var(--tile-side-depth);
  background: linear-gradient(to bottom,
    var(--tile-side-base-light) 0%,
    var(--tile-side-base-mid) 40%,
    var(--tile-side-base-dark) 100%);
}

/* Counter-rotate the face contents so a laid tile stays readable: each element
   keeps its slot on the rotated tile — rank still in the same corner — but the
   glyph itself is turned back upright. Rotating about each element's own
   centre is what holds the position. */
.tile-hand.tile-lay .suit-rank,
.tile-hand.tile-lay .honor-face,
.tile-hand.tile-lay .wind-art {
  transform: rotate(-90deg);
}

/* On a laid tile the screen top is the tile's LOCAL LEFT, so the rank's
   breathing room there comes from `left`, not `top` — the offset maps 1:1.
   At the inherited 1px the digit sat 0.23px ABOVE the tile edge; 20cqw lands
   it a couple of px inside. Upright tiles keep the original 3.5cqh. */
.tile-hand.tile-lay .suit-rank {
  left: max(3px, 20cqw);
}

/* The suit art normally hangs off the tile's own edge (sou sits at right:-8%,
   bottom:-2%). Turned a quarter-turn that overhang falls outside the face and
   the bamboo and wind glyphs get sliced. Laid tiles instead centre the art in
   a square well inside the face, so nothing can be cut. */
.tile-hand.tile-lay .suit-art-box {
  /* pushed past centre in local space, which reads as "further left" on the
     turned tile — clears the rank digit / wind letter sitting on the right */
  top: 64%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(78cqw, 78cqh);
  height: min(78cqw, 78cqh);
  transform: translate(-50%, -50%) rotate(-90deg);
  overflow: visible;
  contain: none;
}