/*
 * Desktop Mahjong Standard V3 — cache-safe side-seat chi repair.
 *
 * Desktop landscape only.  This selector intentionally includes the `span`
 * element used by the legacy V1 sheet: V1 was cached under an immutable URL
 * and set its claimed chi face to dimensions from retired custom properties.
 * Matching that selector exactly lets this sheet supersede the bad rule even
 * when a browser still has V1 in memory.  Phone and tablet styles are not
 * targeted here.
 */
@media (orientation: landscape) and (min-width: 951px) {
  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld) {
    --desktop-chi-w: var(--side-meld-face-w, 30px);
    --desktop-chi-h: var(--side-meld-face-h, 42px);
    position: relative !important;
    width: var(--desktop-chi-h) !important;
    min-width: var(--desktop-chi-h) !important;
    height: calc(var(--desktop-chi-h) + var(--desktop-chi-w) * 2) !important;
    min-height: calc(var(--desktop-chi-h) + var(--desktop-chi-w) * 2) !important;
    flex-basis: calc(var(--desktop-chi-h) + var(--desktop-chi-w) * 2) !important;
    overflow: visible !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld) > span[data-meld-position] {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop .zone-west .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld) > .mahjong-claimed-chi-tile[data-meld-position] {
    left: 0 !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop .zone-east .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld) > .mahjong-claimed-chi-tile[data-meld-position] {
    left: calc(var(--desktop-chi-h) - var(--desktop-chi-w)) !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld)
    > .mahjong-claimed-chi-tile[data-meld-position] {
    top: 0 !important;
    width: var(--desktop-chi-w) !important;
    min-width: var(--desktop-chi-w) !important;
    height: var(--desktop-chi-h) !important;
    min-height: var(--desktop-chi-h) !important;
    z-index: 3 !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld)
    > span[data-meld-position="1"],
  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld)
    > span[data-meld-position="2"] {
    left: 0 !important;
    width: var(--desktop-chi-h) !important;
    min-width: var(--desktop-chi-h) !important;
    height: var(--desktop-chi-w) !important;
    min-height: var(--desktop-chi-w) !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld)
    > .mahjong-claimed-chi-tile[data-meld-position] ~ span[data-meld-position="1"] {
    top: var(--desktop-chi-h) !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld)
    > .mahjong-claimed-chi-tile[data-meld-position] ~ span[data-meld-position] ~ span[data-meld-position="2"] {
    top: calc(var(--desktop-chi-h) + var(--desktop-chi-w)) !important;
  }

  /* Exact legacy selector: without the explicit span, an old cached V1 rule
     wins on specificity and collapses this face into a 4px placeholder. */
  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld)
    > span.mahjong-claimed-chi-tile[data-meld-position] > .mahjong-tile-face.compact {
    position: absolute !important;
    inset: auto !important;
    left: calc((var(--desktop-chi-w) - var(--desktop-chi-h)) / 2) !important;
    top: calc((var(--desktop-chi-h) - var(--desktop-chi-w)) / 2) !important;
    width: var(--desktop-chi-h) !important;
    min-width: var(--desktop-chi-h) !important;
    height: var(--desktop-chi-w) !important;
    min-height: var(--desktop-chi-w) !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld)
    > span:not(.mahjong-claimed-chi-tile)[data-meld-position] > .mahjong-tile-face.compact {
    position: absolute !important;
    inset: auto !important;
    left: calc((var(--desktop-chi-h) - var(--desktop-chi-w)) / 2) !important;
    top: calc((var(--desktop-chi-w) - var(--desktop-chi-h)) / 2) !important;
    width: var(--desktop-chi-w) !important;
    min-width: var(--desktop-chi-w) !important;
    height: var(--desktop-chi-h) !important;
    min-height: var(--desktop-chi-h) !important;
    margin: 0 !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop .zone-west .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld) > span[data-meld-position] > .mahjong-tile-face.compact {
    transform: rotate(90deg) !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop .zone-east .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld) > span[data-meld-position] > .mahjong-tile-face.compact {
    transform: rotate(-90deg) !important;
  }

  #root#root .room-page.game-active.mahjong-landscape-desktop
    :is(.zone-west, .zone-east) .mahjong-zone-exposed
    .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld)
    > span.mahjong-claimed-chi-tile[data-meld-position]
    > .mahjong-tile-face.compact > .mahjong-tile-art {
    width: 68% !important;
    height: 130% !important;
  }
}