/*
 * Desktop Mahjong Standard V2 — repair for the side-seat chi rail.
 *
 * This is deliberately self-contained: the three chi positions no longer
 * depend on a cached main stylesheet defining the side-rail variables.  It
 * only applies to the desktop landscape class; phone/tablet layouts are left
 * untouched.
 */
@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) {
    /* Use the side-face token directly.  A previous v1 override depended on
       --side-rail-slot-* from the main bundle; when an older cached bundle
       did not define those variables, the claimed face could collapse. */
    --desktop-chi-slot-w: var(--side-meld-face-w, clamp(26px, 1.6vw, 30px));
    --desktop-chi-slot-h: var(--side-meld-face-h, clamp(38px, 2.2vw, 42px));

    position: relative !important;
    width: calc(var(--desktop-chi-slot-h) + 12px) !important;
    height: calc(
      var(--desktop-chi-slot-h) + var(--desktop-chi-slot-w) * 2
    ) !important;
    min-height: calc(
      var(--desktop-chi-slot-h) + var(--desktop-chi-slot-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;
    left: 6px !important;
    right: auto !important;
    width: var(--desktop-chi-slot-w) !important;
    min-width: var(--desktop-chi-slot-w) !important;
    height: var(--desktop-chi-slot-h) !important;
    min-height: var(--desktop-chi-slot-h) !important;
    margin: 0 !important;
    padding: 0 !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)
    > [data-meld-position="0"] {
    top: -6px !important;
    z-index: 4 !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)
    > [data-meld-position="1"] {
    top: calc(var(--desktop-chi-slot-w) - 6px) !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)
    > [data-meld-position="2"] {
    top: calc(var(--desktop-chi-slot-w) * 2 - 6px) !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] > .mahjong-tile-face.compact {
    position: absolute !important;
    inset: 0 !important;
    width: var(--desktop-chi-slot-w) !important;
    min-width: var(--desktop-chi-slot-w) !important;
    height: var(--desktop-chi-slot-h) !important;
    min-height: var(--desktop-chi-slot-h) !important;
    margin: 0 !important;
    transform-origin: 50% 50% !important;
  }

  /* The claimed tile is the only narrow, turned tile.  The two following
     faces start exactly where it ends, so all three form one flush rail. */
  #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 {
    top: 6px !important;
    width: var(--desktop-chi-slot-h) !important;
    min-width: var(--desktop-chi-slot-h) !important;
    height: var(--desktop-chi-slot-w) !important;
    min-height: var(--desktop-chi-slot-w) !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 .zone-west
    .mahjong-zone-exposed .mahjong-meld.mahjong-chi-meld:not(.mahjong-gang-meld)
    > span.mahjong-claimed-chi-tile[data-meld-position]
    > .mahjong-tile-face.compact {
    left: calc(
      var(--desktop-chi-slot-w) - var(--desktop-chi-slot-h)
    ) !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.mahjong-claimed-chi-tile[data-meld-position]
    > .mahjong-tile-face.compact {
    left: 0 !important;
  }

  /* Keep the claimed, turned tile's artwork at the same apparent scale as
     the other two chi tiles.  Its physical face and rail alignment remain
     unchanged; only the legacy 58% inner-art shrink is corrected. */
  #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;
  }
}