/* Responsive desktop/tablet game layout. Mobile rules (<=700px) stay untouched. */
@media (min-width: 701px) {
  #root main.gameScreen { box-sizing: border-box; min-width: 0; }
  #root main.gameScreen .gameTableWrap,
  #root main.gameScreen .rackArea { min-width: 0; }
  #root main.gameScreen .feltTable,
  #root main.gameScreen .feltTable101 { max-width: 100%; }
}
@media (min-width: 901px) {
  #root main.gameScreen.yuzbirGame,
  #root main.gameScreen.duzGame {
    --pc-rack-height: clamp(150px, 21dvh, 210px);
    --pc-rack-tile-width: clamp(30px, 2.6vw, 48px);
  }
  #root main.gameScreen.yuzbirGame .rackArea,
  #root main.gameScreen.duzGame .rackArea {
    box-sizing: border-box !important;
    width: min(1400px, calc(100vw - 40px)) !important;
  }
  #root main.gameScreen.yuzbirGame .tileRackGrid {
    grid-template-columns: repeat(14, minmax(0, var(--pc-rack-tile-width))) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    justify-content: start !important;
    max-width: 100% !important;
  }
  #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot {
    width: var(--pc-rack-tile-width) !important;
    min-width: 0 !important;
  }
}
@media (min-width: 1180px) {
  #root main.gameScreen.yuzbirGame:not(.socialCollapsed):has(.desktopSocialRail) .rackArea {
    width: min(1400px, calc(100vw - var(--pc-social-width) - 48px)) !important;
    max-width: calc(100vw - var(--pc-social-width) - 48px) !important;
  }
  #root main.gameScreen.yuzbirGame:not(.socialCollapsed):has(.desktopSocialRail) .feltTable101 {
    width: min(1530px, calc(100vw - var(--pc-social-width) - 48px)) !important;
    max-width: calc(100vw - var(--pc-social-width) - 48px) !important;
  }
}
@media (min-width: 1000px) {
  #root main.gameScreen.duzGame .feltTable {
    height: clamp(280px, 45dvh, 430px) !important;
    min-height: 0 !important;
  }
  #root main.gameScreen.duzGame .rackArea {
    height: var(--pc-rack-height) !important;
    min-height: 0 !important;
    max-height: var(--pc-rack-height) !important;
  }
  #root main.gameScreen.duzGame .rackBoardShell {
    height: clamp(100px, 17dvh, 146px) !important;
    min-height: 0 !important;
  }
  #root main.gameScreen.duzGame .tileRackGrid {
    grid-template-columns: repeat(15, var(--pc-rack-tile-width)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 1px !important;
    justify-content: start !important;
    overflow: hidden !important;
  }
  #root main.gameScreen.duzGame .tileRackGrid .rackSlot {
    width: var(--pc-rack-tile-width) !important;
    min-width: 0 !important;
  }
}
@media (min-width: 901px) and (max-height: 760px) {
  #root main.gameScreen.yuzbirGame,
  #root main.gameScreen.duzGame {
    --pc-rack-height: clamp(132px, 19dvh, 156px);
    --pc-rack-tile-width: clamp(30px, 2.4vw, 42px);
  }
  #root main.gameScreen.yuzbirGame .rackArea {
    bottom: 6px !important;
  }
  #root main.gameScreen.yuzbirGame > .gameTableWrap {
    bottom: calc(var(--pc-rack-height) + 12px) !important;
  }
}
@media (min-width: 1000px) and (max-height: 760px) {
  #root main.gameScreen.duzGame .feltTable {
    height: clamp(250px, 39dvh, 300px) !important;
  }
  #root main.gameScreen.duzGame .rackBoardShell {
    height: clamp(82px, 15dvh, 112px) !important;
  }
}
/* Keep both 101 rack rows inside the panel at laptop-height viewports. */
@media (min-width: 901px) {
  #root main.gameScreen.yuzbirGame {
    --pc-rack-height: clamp(196px, 24dvh, 232px);
    --pc-rack-tile-width: clamp(28px, 2.3vw, 42px);
  }
  #root main.gameScreen.yuzbirGame .rackArea {
    height: var(--pc-rack-height) !important;
    min-height: 0 !important;
    max-height: var(--pc-rack-height) !important;
  }
  #root main.gameScreen.yuzbirGame .rackBoardShell {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #root main.gameScreen.yuzbirGame .tileRackGrid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }
  #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot > .imageTile.okeyTile {
    position: absolute !important;
    inset: 1px 0 !important;
    width: 100% !important;
    height: calc(100% - 2px) !important;
    min-height: 0 !important;
    max-height: 100% !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Use the freed desktop column when chat is collapsed; keep mobile layout untouched. */
@media (min-width: 1180px) {
  #root main.gameScreen.yuzbirGame.socialCollapsed > .gameTableWrap,
  #root main.gameScreen.duzGame.socialCollapsed > .gameTableWrap {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }
  #root main.gameScreen.yuzbirGame.socialCollapsed .feltTable101,
  #root main.gameScreen.duzGame.socialCollapsed .feltTable {
    width: min(1600px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  #root main.gameScreen.yuzbirGame.socialCollapsed .rackArea,
  #root main.gameScreen.duzGame.socialCollapsed .rackArea {
    left: 50% !important;
    width: min(1600px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    transform: translateX(-50%) !important;
  }
}
/* Keep the two hand rows fully inside the 101 rack on short desktop windows. */
@media (min-width: 901px) and (max-height: 760px) {
  #root main.gameScreen.yuzbirGame { --pc-rack-height: clamp(196px, 25dvh, 216px); }
}

/* Spread the hand across the desktop rack while keeping each tile fully inside its cell. */
@media (min-width: 901px) {
  #root main.gameScreen.yuzbirGame .tileRackGrid,
  #root main.gameScreen.duzGame .tileRackGrid {
    grid-template-columns: repeat(14, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    column-gap: 1px !important;
  }
  #root main.gameScreen.duzGame .tileRackGrid { grid-template-columns: repeat(15, minmax(0, 1fr)) !important; }
  #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot,
  #root main.gameScreen.duzGame .tileRackGrid .rackSlot {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot > .imageTile.okeyTile,
  #root main.gameScreen.duzGame .tileRackGrid .rackSlot > .imageTile.okeyTile {
    left: 50% !important;
    right: auto !important;
    width: min(100%, clamp(32px, 2.4vw, 42px)) !important;
    max-width: 100% !important;
    transform: translateX(-50%) !important;
  }
}

/* Put the current-turn arrow beside the active player's name, away from the discard target. */
@media (min-width: 701px) {
  #root main.gameScreen .seat.turn > b::before {
    content: "➜";
    display: inline-block;
    margin-right: 5px;
    color: #f5d66e;
    font-weight: 900;
  }
  #root main.gameScreen .turnTimeMarker { display: none !important; }
}
/* Bot on the right discards up and to its outside, away from the human rack. */
@media (min-width: 701px) {
  #root main.gameScreen.yuzbirGame .feltTable101 .discardSpot.discard-3,
  #root main.gameScreen.duzGame .feltTable .discardSpot.discard-3 {
    top: 34% !important;
    right: 2% !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }
}

@media (min-width: 701px) {
  #root main.gameScreen .desktopLeaveTable {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid #a85a61;
    border-radius: 10px;
    background: #35191f;
    color: #ffd1d5;
    font-weight: 700;
    white-space: nowrap;
  }
}
@media (max-width: 700px) { #root main.gameScreen .desktopLeaveTable { display: none !important; } }

/* PC hand spacing pass: keep tiles compact and center a slightly narrower rack. */
@media (min-width: 901px) {
  #root main.gameScreen.yuzbirGame,
  #root main.gameScreen.duzGame { --pc-rack-tile-width: clamp(36px, 2.2vw, 42px); }
  #root main.gameScreen.yuzbirGame .rackArea,
  #root main.gameScreen.duzGame .rackArea {
    width: min(1280px, calc(100vw - 96px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }
  #root main.gameScreen.yuzbirGame .tileRackGrid,
  #root main.gameScreen.duzGame .tileRackGrid {
    grid-template-columns: repeat(14, var(--pc-rack-tile-width)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    align-content: stretch !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }
  #root main.gameScreen.duzGame .tileRackGrid { grid-template-columns: repeat(15, var(--pc-rack-tile-width)) !important; }
  #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot,
  #root main.gameScreen.duzGame .tileRackGrid .rackSlot {
    width: var(--pc-rack-tile-width) !important;
    min-width: var(--pc-rack-tile-width) !important;
    max-width: var(--pc-rack-tile-width) !important;
  }
}
@media (min-width: 1180px) {
  #root main.gameScreen.yuzbirGame:not(.socialCollapsed):has(.desktopSocialRail) .rackArea {
    width: min(1280px, calc(100vw - var(--pc-social-width) - 80px)) !important;
    left: calc((100vw - var(--pc-social-width) - 20px) / 2) !important;
    max-width: calc(100vw - var(--pc-social-width) - 80px) !important;
    transform: translateX(-50%) !important;
  }
}

/* Align each desktop tile to its cell, reduce rack height slightly, and center the hand. */
@media (min-width: 901px) {
  #root main.gameScreen.yuzbirGame,
  #root main.gameScreen.duzGame { --pc-rack-height: clamp(188px, 22dvh, 210px); }
  #root main.gameScreen.yuzbirGame .rackArea,
  #root main.gameScreen.duzGame .rackArea {
    height: var(--pc-rack-height) !important;
    min-height: 0 !important;
    max-height: var(--pc-rack-height) !important;
  }
  #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot,
  #root main.gameScreen.duzGame .tileRackGrid .rackSlot {
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }
  #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot > .imageTile.okeyTile,
  #root main.gameScreen.duzGame .tileRackGrid .rackSlot > .imageTile.okeyTile {
    position: relative !important;
    inset: auto !important;
    width: var(--pc-rack-tile-width) !important;
    min-width: var(--pc-rack-tile-width) !important;
    max-width: var(--pc-rack-tile-width) !important;
    height: auto !important;
    aspect-ratio: 0.68 !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Wide desktop at high browser zoom can match the legacy landscape layout; restore a normal header. */
@media (min-width: 901px) and (orientation: landscape) and (max-height: 700px) {
  #root main.gameScreen.yuzbirGame > .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 0 18px !important;
    position: absolute !important;
    inset: 0 0 auto !important;
    pointer-events: none !important;
  }
  #root main.gameScreen.yuzbirGame > .topbar > .brand.small { display: block !important; flex: 0 0 auto !important; font-size: 20px !important; }
  #root main.gameScreen.yuzbirGame > .topbar > .topbarRight {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    height: 100% !important;
    margin-left: auto !important;
    position: relative !important;
  }
  #root main.gameScreen.yuzbirGame > .topbar .topbarRight > .leaveTableButton { display: none !important; }
  #root main.gameScreen.yuzbirGame > .topbar .lobbyPeekButton,
  #root main.gameScreen.yuzbirGame > .topbar .desktopLeaveTable,
  #root main.gameScreen.yuzbirGame > .topbar .themeToggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    transform: none !important;
    font-size: 11px !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
  }
  #root main.gameScreen.yuzbirGame > .topbar .themeToggle b { display: inline !important; }
}
/* The floating turn label covers the draw/discard target; the active seat name carries the arrow. */
@media (min-width: 901px) {
  #root main.gameScreen .gameTableWrap .centerDeck .turnTimeMarker,
  #root main.gameScreen.yuzbirGame .turnTimeMarker.yuzbirTurnMarker:has(strong),
  #root main.gameScreen.duzGame .turnTimeMarker.duzTurnMarker:has(strong) {
    display: none !important;
  }
}