/* Blender-rendered tile bodies and original game faces share the existing hit areas. */
.tile.tile-3d {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
.tile.tile-3d .tile-render {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  /* Stronger ink colour and contrast preserve the existing tile artwork. */
  filter: saturate(1.65) contrast(1.15) drop-shadow(0 2px 1px #00170f55);
}
.bonus-draw-faces img {
  filter: saturate(1.65) contrast(1.15);
}
.tile.tile-3d .tile-render.bonus-arrival {
  filter: saturate(1.65) contrast(1.15) drop-shadow(0 0 7px #ffce6f) !important;
}
/* A close contact shadow grounds the overhead tiles in every seat rotation. */
.tile.tile-flat .tile-render {
  filter: saturate(1.65) contrast(1.15) drop-shadow(0 0 1px #00170f70);
}
.tile.tile-3d:is(.selected, .last-tile, .latest),
.arrange-piece.chosen .tile.tile-3d,
.winning-tile .tile.tile-3d,
.bonus-piece.winner-bonus .tile.tile-3d {
  outline: 2px solid #f2d28a;
  outline-offset: 0;
}
.tile.tile-3d.claimable {
  outline: 2px solid var(--claim-ring, #e5c984);
}
.tile.tile-3d.drawn:not(.selected),
.bonus-piece.scores-tai .tile.tile-3d {
  outline: 1px solid #dcc78d;
}
.tile.tile-3d:focus-visible {
  outline: 3px solid #fff2c9;
  outline-offset: 2px;
}
.back,
.seat .rack-line .backs .back {
  background: transparent var(--back-image, url('./tiles-3d/back.png')) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
}
.back::after,
.seat .rack-line .backs .back::after {
  display: none;
}

/* A physical rack is a continuous row; the sprite crop has no side padding. */
.own-tiles,
.hand,
.backs,
.landscape-backs,
.own-tiles > .winning-concealed,
.winning-concealed,
.meld:has(.tile-3d),
.tiles:has(.tile-3d) {
  column-gap: 0 !important;
}
.own-tiles > .tile.tile-3d,
.hand > .tile.tile-3d {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.own-tiles > .tile.tile-3d {
  height: auto !important;
  aspect-ratio: 3 / 4;
}

/* All public rows meet at the physical sprite edges, including rotated rivers. */
.board {
  --pile-gap: 0px !important;
}
.discard-pile,
.landscape-pile,
.river,
.river-tiles,
.mobile-river-tiles,
.bonus-row,
.landscape-meld,
.landscape-bonus {
  gap: 0 !important;
}
.landscape-backs i {
  background: transparent var(--back-image, url('./tiles-3d/back.png')) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
}
.mobile-river-tiles {
  max-width: 352px;
  margin-inline: auto;
}
.mobile-river-tiles > button {
  padding: 0;
  min-height: 0;
}
.mobile-river-tiles .tile.small {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  max-width: none;
}

/* Seat identity is secondary to the name: wind and dealer form one small pair. */
.seat-markers {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.tile-marker {
  --marker-height: 24px;
  position: relative;
  width: calc(var(--marker-height) * 0.75) !important;
  height: var(--marker-height) !important;
  flex-basis: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.marker-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.tile-marker img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px #00170f55);
}
.marker-glyph {
  position: absolute;
  inset: 0 0 7%;
  display: grid;
  place-items: center;
  color: #ae2834;
  font-family: 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  font-weight: 700;
  font-size: calc(var(--marker-height) * 0.64);
  line-height: 1;
}
@media (max-width: 800px) {
  .tile-marker {
    --marker-height: 22px;
  }
}
.landscape-name .tile-marker {
  --marker-height: 22px;
}

/* Physical pieces face their owner: bottom 0°, left 90°, top 180°, right -90°.
   The side racks already rotate as a unit. The far rack keeps its name upright
   while turning its physical rows; summaries and inspection dialogs stay upright. */
.seat-top .bonus-row,
.seat-top .melds,
.seat-top .winning-concealed,
.seat-top .backs,
.seat-top .tile-marker,
.landscape-seat-top .landscape-declared,
.landscape-seat-top .landscape-winning,
.landscape-seat-top .landscape-backs,
.landscape-seat-top .tile-marker {
  transform: rotate(180deg);
}

/* Score annotations are UI labels, so they remain readable from this seat. */
.seat-top .bonus-value,
.seat-top .concealed-label {
  transform: rotate(180deg);
}
.seat-left .bonus-value,
.seat-left .concealed-label {
  transform: rotate(-90deg);
}
.seat-right .bonus-value,
.seat-right .concealed-label {
  transform: rotate(90deg);
}
.seat-left .tai-anchor,
.seat-right .tai-anchor {
  position: relative;
  width: 35px;
  height: 56px;
}
.seat-left .tai-badge,
.seat-right .tai-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 35px;
}
.seat-left .tai-badge {
  transform: translate(-50%, -50%) rotate(-90deg);
}
.seat-right .tai-badge {
  transform: translate(-50%, -50%) rotate(90deg);
}