/* Desktop command-center layer. Loaded last so phone/tablet rules stay intact. */

@media (min-width: 1200px) and (pointer: fine) {
  :root {
    --desktop-gutter: clamp(20px, 2.2vw, 48px);
    --desktop-side: clamp(92px, 8vw, 148px);
  }

  body {
    background:
      radial-gradient(circle at 12% 12%, rgba(212, 175, 55, 0.14), transparent 24%),
      radial-gradient(circle at 88% 88%, rgba(22, 92, 69, 0.34), transparent 30%),
      #071228;
  }

  #game-wrapper {
    padding: var(--desktop-gutter);
    align-items: stretch;
  }

  #game {
    width: calc(100dvw - (var(--desktop-gutter) * 2));
    max-width: none;
    height: calc(100dvh - (var(--desktop-gutter) * 2));
    min-height: 0;
    padding: 14px 18px 8px;
    border-width: 12px !important;
    border-radius: 28px !important;
    box-shadow:
      0 0 0 2px rgba(212, 175, 55, 0.9),
      0 28px 80px rgba(0, 0, 0, 0.58),
      inset 0 0 80px rgba(0, 0, 0, 0.25) !important;

    /* Every game element reads these dimensions, including the two-row rack. */
    --tile-w: clamp(56px, 4vw, 82px);
    --tile-h: clamp(78px, 5.7vw, 112px);
  }

  #game > #topbar,
  #game > #turn-row,
  #game > #opp-top,
  #game > #rack-section,
  #game > #actions {
    margin-left: var(--desktop-side) !important;
    margin-right: var(--desktop-side) !important;
  }

  #game::before,
  #game::after {
    pointer-events: none;
  }

  #game::after {
    font-size: clamp(76px, 8vw, 132px);
  }

  #opp-left,
  #opp-right {
    top: 22%;
    bottom: 25%;
    width: calc(var(--desktop-side) - 18px);
    display: flex;
    align-items: center;
  }

  #opp-left { left: 12px; }
  #opp-right { right: 12px; }

  #opp-left .opp-card,
  #opp-right .opp-card {
    width: 100%;
    max-width: none !important;
  }

  #game > #rack-section {
    min-height: 178px;
  }

  #game > #actions {
    padding-bottom: 6px;
  }

  #game > #opp-top,
  #game > .opp-slot-top {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  #middle {
    grid-template-columns: minmax(108px, 126px) minmax(0, 1fr) minmax(108px, 126px) !important;
    gap: 14px;
    padding: 8px 12px 16px;
  }

  /* Keep side players in the upper play zone instead of overlapping the rack. */
  #opp-left,
  #opp-right {
    top: auto;
    bottom: auto;
    width: auto;
    align-self: start;
    justify-content: flex-start;
    padding-top: 18px;
  }

  #opp-left .opp-card,
  #opp-right .opp-card {
    min-width: 108px;
    padding: 10px 9px;
  }

  #opp-left .opp-card .avatar,
  #opp-right .opp-card .avatar {
    width: 42px;
    height: 42px;
    margin-bottom: 5px;
  }

  #opp-left .opp-card .name,
  #opp-right .opp-card .name { font-size: 13px; max-width: 100px; }

  #game > #turn-row {
    /* Keep turn state and the discard pile in a dedicated rail, not over the table. */
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 52px !important;
    margin-top: 2px !important;
    margin-bottom: 6px !important;
    padding: 5px 10px !important;
    gap: 12px !important;
    border: 1px solid rgba(255, 215, 0, 0.28) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(90deg, rgba(11, 28, 47, 0.94), rgba(19, 44, 48, 0.78) 58%, rgba(64, 38, 16, 0.8)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.18) !important;
  }

  #game > #turn-row > #turn-banner {
    justify-self: stretch !important;
    justify-content: flex-start !important;
    max-width: none !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    background: rgba(3, 12, 24, 0.48) !important;
  }

  #game > #turn-row > #turn-banner .tb-name {
    max-width: none !important;
    font-size: 12px !important;
  }

  #game > #turn-row > #turn-banner .tb-bar {
    width: clamp(62px, 8vw, 138px) !important;
    height: 4px !important;
  }

  #game > #turn-row > .discard-panel {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "caption pile" !important;
    align-items: center !important;
    min-width: 164px !important;
    max-width: 242px !important;
    min-height: 40px !important;
    max-height: none !important;
    padding: 4px 8px !important;
    gap: 8px !important;
    align-self: center !important;
    border-style: solid !important;
  }

  #game > #turn-row > .discard-panel .panel-caption {
    grid-area: caption;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }

  #game > #turn-row > .discard-panel #discard-pile {
    grid-area: pile;
    justify-content: flex-end !important;
  }

  #game > #turn-row > .discard-panel .panel-empty-discard {
    min-height: 28px !important;
    padding: 2px 6px !important;
    flex-direction: row !important;
  }

  .opp-card {
    min-width: 132px;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .opp-card .avatar {
    width: 52px;
    height: 52px;
    font-size: 18px;
    margin-bottom: 8px;
  }

  .opp-card .name { font-size: 15px; max-width: 150px; }
  .opp-card .tile-backs { height: 32px; margin-top: 9px; }
  .opp-card .tile-back { width: 18px; height: 28px; margin-left: -7px; }
  .opp-card .tile-more { font-size: 12px; }

  #opp-top .opp-card {
    max-width: min(560px, 78%);
    padding: 11px 18px 11px 12px;
    gap: 14px;
  }

  #opp-top .opp-card .avatar { width: 46px; height: 46px; margin: 0; }
  #opp-top .opp-card .name { font-size: 16px; max-width: 220px; }
  #opp-top .opp-card .tile-backs { height: 28px; }

  #rack-row { gap: 16px; }

  #rack-section {
    padding: 14px 18px 18px;
    border-radius: 18px;
  }

  #rack-header { padding-bottom: 12px; }
  #rack-header .rack-title { font-size: 16px; }
  #rack-header span, #rack-header .selected-info { font-size: 14px; }
  .rack-arrange { gap: 9px; }
  .rack-arrange-btn { padding: 7px 13px; font-size: 13px; }

  #rack-container { gap: 16px; padding: 16px 14px 18px; }
  .rack-row { gap: 6px; min-height: calc(var(--tile-h) + 18px); padding-bottom: 14px; }
  .rack-row::after { height: 12px; }
  .rack-slot { min-height: var(--tile-h); }
  .rack-slot.empty { min-height: calc(var(--tile-h) - 4px); }
  .tile { font-size: clamp(21px, 1.65vw, 30px); border-radius: 10px; }
  .tile .tile-label { font-size: 9px; }

  #rack-row > #actions { padding: 10px 8px 12px; }
  #rack-row > #actions .actions-primary { gap: 10px; }
  #rack-row > #actions .btn { min-width: 104px; padding: 14px 16px; font-size: 14px; }
  #rack-row > #actions .btn .icon { font-size: 24px; }

  #topbar { padding: 10px 16px; }
  #topbar .tb-chip, #topbar .tb-dock-btn { padding: 6px 11px; font-size: 12px; }

  #chat-panel,
  #gift-panel {
    right: calc(var(--desktop-gutter) + 24px) !important;
    bottom: calc(var(--desktop-gutter) + 26px) !important;
    max-height: min(560px, calc(100dvh - 100px));
  }

  /* Matchmaking is a primary desktop state, not a phone-sized popover. */
  #mm-overlay {
    padding: 48px;
    background:
      radial-gradient(circle at 50% 42%, rgba(242, 187, 26, 0.16), transparent 34%),
      rgba(3, 10, 22, 0.82);
  }

  #mm-overlay .mm-card {
    width: min(560px, 92%);
    padding: 34px 40px 32px;
    gap: 18px;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.56);
  }

  #mm-overlay .spinner { width: 62px; height: 62px; }
  #mm-overlay h2 { font-size: 28px; }
  #mm-overlay .mm-sub { font-size: 16px; }
  #mm-overlay .mm-tip { padding: 14px 16px; font-size: 14px; }
  #mm-overlay .btn-cancel { padding: 15px 28px; font-size: 16px; }

  #lobby-overlay {
    padding: 30px clamp(32px, 5vw, 92px);
    align-items: stretch;
    background:
      radial-gradient(circle at 18% 12%, rgba(212, 175, 55, 0.18), transparent 28%),
      radial-gradient(circle at 84% 86%, rgba(21, 92, 69, 0.46), transparent 35%),
      linear-gradient(135deg, #0b1730, #101f42 48%, #081225);
  }

  .lobby-header,
  .lobby-play-hero,
  .lobby-info,
  #room-list,
  .liveops-banner,
  .daily-banner,
  .tournament-banner,
  .clubwar-banner,
  .piggy-banner,
  .mission-banner,
  .achievement-banner,
  .calendar-banner,
  .wheel-banner,
  .season-banner {
    width: min(980px, 70vw);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .lobby-header {
    margin-bottom: 28px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 18px;
    background: rgba(6, 16, 34, 0.56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .lobby-title {
    font-size: 30px;
    letter-spacing: 0.2em;
  }

  .lobby-play-hero {
    min-height: 104px;
    padding: 24px 26px;
    border: 1px solid rgba(255, 224, 130, 0.8);
    box-shadow: 0 18px 44px rgba(255, 111, 0, 0.26);
  }

  .lobby-play-hero .lph-copy strong { font-size: 23px; }
  .lobby-play-hero .lph-copy small { font-size: 14px; }

  #room-list {
    min-height: 260px;
    max-height: min(48dvh, 520px);
    overflow: auto;
    padding-right: 6px;
  }

  #settings-overlay,
  #meta-overlay,
  #lb-overlay,
  #tr-overlay,
  #hist-overlay,
  #replay-overlay {
    padding: 28px;
  }

  .settings-panel,
  .meta-panel.dr-panel,
  .lb-panel,
  .tr-panel,
  .hist-panel,
  .replay-panel {
    max-height: min(820px, calc(100dvh - 56px));
  }
}

@media (min-width: 1720px) and (pointer: fine) {
  #game > #rack-section { min-height: 204px; }
  #game > #topbar,
  #game > #turn-row,
  #game > #opp-top,
  #game > #rack-section,
  #game > #actions {
    margin-left: calc(var(--desktop-side) + 24px) !important;
    margin-right: calc(var(--desktop-side) + 24px) !important;
  }
}

@media (min-width: 1200px) and (pointer: fine) {
  /* The rack has fourteen usable slots per row on desktop. */
  .rack-row {
    grid-template-columns: repeat(14, minmax(0, 1fr)) !important;
  }
}

/* Final desktop resilience pass: shared tokens and safe interaction bounds. */
@media (min-width: 1200px) and (pointer: fine) {
  :root {
    --desktop-panel: rgba(6, 17, 34, 0.78);
    --desktop-panel-strong: rgba(4, 12, 25, 0.94);
    --desktop-gap: clamp(10px, 1vw, 18px);
    --desktop-radius: 18px;
    --desktop-focus: #ffe082;
  }

  body,
  #game-wrapper {
    min-width: 0;
    overflow-x: hidden;
  }

  #game-wrapper {
    min-height: 100dvh;
    box-sizing: border-box;
  }

  #game {
    box-sizing: border-box;
  }

  #center-board {
    min-width: 0;
    border-radius: var(--desktop-radius);
  }

  #topbar,
  #game > #turn-row,
  #rack-section {
    min-width: 0;
  }

  #topbar .tb-meta {
    min-width: 0;
  }

  #topbar .tb-chip {
    white-space: nowrap;
  }

  .lobby-header,
  .lobby-play-hero,
  .lobby-info,
  #room-list {
    border-radius: var(--desktop-radius);
  }

  #room-list .room-card {
    min-height: 70px;
    padding: 12px 14px;
  }

  #room-list .room-card:focus-within,
  .lobby-play-hero:focus-visible,
  #topbar button:focus-visible,
  #rack-section button:focus-visible,
  #turn-row button:focus-visible {
    outline: 3px solid var(--desktop-focus);
    outline-offset: 3px;
  }

  #settings-overlay,
  #meta-overlay,
  #lb-overlay,
  #tr-overlay,
  #hist-overlay,
  #replay-overlay,
  #confirm-overlay,
  #go-overlay {
    padding: clamp(20px, 3vw, 48px);
    overflow-y: auto;
  }

  .settings-panel,
  .meta-panel,
  .lb-panel,
  .tr-panel,
  .hist-panel,
  .replay-panel,
  .confirm-card,
  .go-card {
    width: min(760px, 100%);
    max-height: calc(100dvh - 48px);
    overflow: auto;
  }
}

@media (min-width: 1200px) and (pointer: fine) and (max-height: 760px) {
  #game {
    padding-top: 8px;
    padding-bottom: 4px;
  }

  #game > #turn-row {
    min-height: 44px !important;
    margin-bottom: 3px !important;
  }

  #game > #turn-row > #turn-banner {
    min-height: 30px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  #game > #rack-section {
    min-height: 158px;
  }

  #rack-container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-play-hero,
  .room-card,
  #mm-overlay .spinner,
  #turn-banner,
  .opp-card {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}