/*
 * Single authoritative desktop layout for the ALPHA redesign.
 * This replaces the stacked experimental layout overrides that were fighting
 * each other. It styles the existing Vue DOM directly; no preview cards are
 * generated and only the real six-card hands are shown.
 */

:root {
  --room-bg:#081119;
  --room-panel:#101b25;
  --room-panel-2:#162430;
  --room-line:#2b3d4d;
  --room-felt:#0d573c;
  --room-felt-deep:#083f2e;
  --room-gold:#e6b84b;
}

html,
body.body-dark {
  background:radial-gradient(circle at 50% 18%, #102431 0, #081119 55%, #060d12 100%) !important;
  color:#eef3f7;
}

.game-shell,
.site-header__inner {
  width:min(1488px, calc(100% - 48px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.game-shell { padding:16px 0 36px !important; }

/* Header */
.site-header {
  height:76px !important;
  background:rgba(7,15,21,.97) !important;
  border-bottom:1px solid #243441 !important;
}
.site-header__inner { height:76px !important; }
.brand__mark {
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:0 !important;
}
.brand__mark::after { content:'🌶️'; font-size:30px; }
.brand__wordmark { font-size:28px !important; font-weight:760 !important; letter-spacing:-.035em !important; }
.brand__badge {
  padding:8px 11px !important;
  border:0 !important;
  border-radius:7px !important;
  background:#172431 !important;
  color:#aeb8c4 !important;
}
.header-setting,
.site-header__meta { display:none !important; }
.mock-game-meta { margin-left:auto; display:flex; align-items:center; gap:28px; color:#b9c4ce; }
.mock-game-meta__gear { border:0; background:transparent; color:#b9c4ce; font-size:23px; }
.mock-game-meta__leave {
  min-width:148px;
  padding:13px 22px;
  border:1px solid #db3c45;
  border-radius:12px;
  background:transparent;
  color:#ff636a;
  font-weight:650;
}

@media (min-width:1200px) {
  /* Overall composition */
  #pepper-app > div {
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 354px !important;
    column-gap:24px !important;
    align-items:start !important;
  }

  /* Top controls + team score cards */
  #pepper-app > div > .row:first-child {
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:360px minmax(0, 1fr) !important;
    gap:24px !important;
    min-height:140px !important;
    margin:0 0 22px !important;
  }
  #pepper-app > div > .row:first-child > .col-md-6 {
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }
  #pepper-app > div > .row:first-child > .col-md-6:first-child {
    display:flex !important;
    align-items:flex-start !important;
    min-height:140px !important;
    background:transparent !important;
    border:0 !important;
  }
  #pepper-app > div > .row:first-child > .col-md-6:first-child > .row,
  #pepper-app > div > .row:first-child > .col-md-6:first-child .col-md-6 {
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
  }
  #pepper-app > div > .row:first-child > .col-md-6:first-child .btn {
    min-height:56px !important;
    padding:0 22px !important;
    border-radius:10px !important;
    font-size:19px !important;
    justify-content:flex-start !important;
  }
  #pepper-app > div > .row:first-child > .col-md-6:first-child .btn-success { min-width:190px !important; }
  #pepper-app > div > .row:first-child > .col-md-6:first-child .btn-primary { min-width:360px !important; }

  #pepper-app > div > .row:first-child > .col-md-6:last-child {
    padding-left:94px !important;
  }
  #pepper-app > div > .row:first-child > .col-md-6:last-child > .row {
    display:grid !important;
    grid-template-columns:minmax(360px, 1fr) minmax(360px, 1fr) !important;
    gap:22px !important;
    width:100% !important;
    height:140px !important;
    margin:0 !important;
  }
  .team-1-bg,
  .team-2-bg {
    position:relative !important;
    width:100% !important;
    min-height:140px !important;
    padding:16px 28px !important;
    border:1px solid !important;
    border-radius:14px !important;
    box-shadow:0 16px 36px rgba(0,0,0,.22) !important;
  }
  .team-1-bg { background:linear-gradient(145deg,#173553,#102b46) !important; border-color:#315c85 !important; }
  .team-2-bg { background:linear-gradient(145deg,#155532,#104328) !important; border-color:#287347 !important; }

  /* Main table + chat row */
  #pepper-app > div > .row.mb-4.g-0 {
    grid-column:1 / -1 !important;
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 354px !important;
    gap:24px !important;
    height:520px !important;
    min-height:520px !important;
    margin:0 0 214px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  #pepper-app > div > .row.mb-4.g-0::before {
    content:'pepper.cards\A GOOD GAMES BRING PEOPLE TOGETHER';
    white-space:pre;
    position:absolute;
    z-index:1;
    left:0;
    top:0;
    width:calc(100% - 378px);
    height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:20px;
    text-align:center;
    color:rgba(255,255,255,.15);
    font-size:52px;
    line-height:1.62;
    font-weight:700;
    letter-spacing:-.03em;
    background:radial-gradient(circle at 50% 46%,rgba(27,119,80,.46),transparent 58%),linear-gradient(145deg,var(--room-felt),var(--room-felt-deep));
    border:8px solid #13513b;
    border-radius:46px;
    box-shadow:inset 0 0 80px rgba(0,0,0,.34),0 20px 50px rgba(0,0,0,.24);
  }
  #pepper-app > div > .row.mb-4.g-0::after {
    content:'🌶️';
    position:absolute;
    z-index:2;
    left:calc((100% - 378px)/2 - 20px);
    top:190px;
    font-size:44px;
    opacity:.14;
  }

  /* Main player column becomes the positioning context for BOTH cards and bid panel. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child {
    grid-column:1 !important;
    grid-row:1 !important;
    position:relative !important;
    z-index:10 !important;
    width:100% !important;
    height:520px !important;
    min-height:520px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  /* Neutralize all legacy positioning between the main column and its two children. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row {
    position:static !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    transform:none !important;
  }

  /* Real six-card local hand, on the felt. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    position:absolute !important;
    z-index:30 !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:18px !important;
    width:420px !important;
    height:122px !important;
    min-height:122px !important;
    margin:0 !important;
    padding:0 !important;
    transform:translateX(-50%) !important;
    overflow:visible !important;
    display:block !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-place-holder { display:none !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    position:absolute !important;
    top:0 !important;
    bottom:auto !important;
    width:86px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:5px !important;
    filter:drop-shadow(0 6px 6px rgba(0,0,0,.33)) !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-1 { left:0 !important; transform:rotate(-2deg) !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-2 { left:66px !important; transform:rotate(-1deg) !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-3 { left:132px !important; transform:none !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-4 { left:198px !important; transform:none !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-5 { left:264px !important; transform:rotate(1deg) !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-6 { left:330px !important; transform:rotate(2deg) !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand::after {
    content:'Your hand';
    position:absolute;
    left:0;
    right:0;
    bottom:-2px;
    text-align:center;
    color:#eef3f7;
    font-size:14px;
  }

  /* Suit selector stays on the felt, not in the bid panel. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .suit-picker {
    position:absolute !important;
    z-index:85 !important;
    right:18px !important;
    top:18px !important;
  }

  /* One and only one bid/action panel, directly beneath the felt. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0 {
    position:absolute !important;
    z-index:70 !important;
    left:0 !important;
    right:auto !important;
    top:544px !important;
    bottom:auto !important;
    width:100% !important;
    height:188px !important;
    min-height:188px !important;
    margin:0 !important;
    padding:92px 28px 22px !important;
    border:1px solid var(--room-line) !important;
    border-radius:16px !important;
    background:linear-gradient(145deg,#111d27,#0d1821) !important;
    box-shadow:0 16px 36px rgba(0,0,0,.18) !important;
    overflow:visible !important;
    transform:none !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0::before {
    content:'Your Bid';
    position:absolute;
    left:28px;
    top:20px;
    color:#f4f7fa;
    font-size:25px;
    line-height:1;
    font-weight:700;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0::after {
    content:'Choose a bid or pass';
    position:absolute;
    left:28px;
    top:56px;
    color:#a9b6c3;
    font-size:15px;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0 > .row {
    position:static !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0 > .row > .col-md-8 {
    width:calc(100% - 210px) !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group {
    display:grid !important;
    grid-template-columns:1.25fr repeat(7,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group > .btn {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:64px !important;
    min-height:64px !important;
    margin:0 !important;
    padding:8px 4px !important;
    border-radius:10px !important;
    background:linear-gradient(#243442,#1b2934) !important;
    border-color:#42586b !important;
    color:#f2f5f7 !important;
    font-size:22px !important;
  }

  /* Live Bid button: separate gold action at lower-right, removed from grid flow. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group > .btn.btn-warning {
    position:absolute !important;
    z-index:80 !important;
    right:28px !important;
    bottom:22px !important;
    width:188px !important;
    min-width:188px !important;
    max-width:188px !important;
    height:64px !important;
    background:linear-gradient(#efc95e,#d9a936) !important;
    border-color:#f1cb63 !important;
    color:#17140b !important;
    font-size:18px !important;
  }

  /* Sort / Trade / Play: dedicated panel-header slot. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child > .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0 > .row > .col-md-4.text-end {
    position:absolute !important;
    z-index:82 !important;
    right:28px !important;
    left:auto !important;
    top:18px !important;
    bottom:auto !important;
    width:auto !important;
    max-width:190px !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .row,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .col {
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .btn {
    position:static !important;
    transform:none !important;
    width:auto !important;
    min-width:90px !important;
    max-width:180px !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:8px 14px !important;
    border-radius:9px !important;
    font-size:15px !important;
  }

  /* Obsolete opponent-turn Bidding badge is represented by Current Phase instead. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child div[style*="position: absolute"][style*="right: 0.75em"] {
    display:none !important;
  }

  /* Center pile */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    grid-column:1 !important;
    grid-row:1 !important;
    z-index:40 !important;
    width:140px !important;
    justify-self:center !important;
    align-self:center !important;
    margin-top:20px !important;
  }

  /* Chat + phase card */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child {
    grid-column:2 !important;
    grid-row:1 !important;
    position:relative !important;
    z-index:20 !important;
    width:354px !important;
    height:520px !important;
    margin:0 !important;
    padding:0 !important;
  }
  #pepper-app .card {
    position:relative !important;
    height:520px !important;
    min-height:520px !important;
    border:1px solid var(--room-line) !important;
    border-radius:16px !important;
    background:linear-gradient(180deg,#101a24,#0c151e) !important;
    overflow:hidden !important;
  }
  #pepper-app .card::before {
    content:'Game Chat';
    position:absolute;
    z-index:5;
    left:0;
    right:0;
    top:0;
    height:58px;
    display:flex;
    align-items:center;
    padding:0 18px;
    border-bottom:1px solid var(--room-line);
    background:#101a24;
    color:#f3f6f8;
    font-size:20px;
    font-weight:700;
  }
  #chat_output {
    height:440px !important;
    max-height:none !important;
    min-height:0 !important;
    padding:74px 16px 18px !important;
  }
  .card-footer {
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    padding:12px !important;
    background:#0d1720 !important;
    border-top:1px solid var(--room-line) !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ⚒  Bidding\A Select your bid to continue';
    white-space:pre;
    position:absolute;
    left:0;
    right:0;
    top:544px;
    height:188px;
    padding:24px 26px;
    border:1px solid var(--room-line);
    border-radius:16px;
    background:linear-gradient(145deg,#111d27,#0d1821);
    color:#b5c0ca;
    font-size:18px;
    line-height:1.55;
  }

  /* Real opponent hands. The row itself is overlaid on the felt. */
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) {
    position:absolute !important;
    z-index:25 !important;
    left:0 !important;
    top:162px !important;
    width:calc(100% - 378px) !important;
    height:520px !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    pointer-events:none !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"] {
    position:absolute !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .pepper-hand-wrapper {
    position:static !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    transform:none !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .pepper-hand-wrapper > .row,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .suit-picker,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .card-place-holder {
    display:none !important;
  }

  /* Top opponent: six horizontal backs. */
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) {
    left:50% !important;
    top:14px !important;
    transform:translateX(-50%) !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .pepper-hand {
    position:relative !important;
    width:292px !important;
    height:96px !important;
    min-height:96px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .pepper-hand img:not(.card-place-holder) {
    position:absolute !important;
    top:0 !important;
    width:72px !important;
    height:auto !important;
    transform:none !important;
    margin:0 !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-1 { left:0 !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-2 { left:44px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-3 { left:88px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-4 { left:132px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-5 { left:176px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-6 { left:220px !important; }

  /* Side opponents: six vertical stacks, no rotation of the card artwork. */
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) { left:34px !important; top:126px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) { right:34px !important; top:126px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .pepper-hand,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .pepper-hand {
    position:relative !important;
    width:74px !important;
    height:250px !important;
    min-height:250px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .pepper-hand img:not(.card-place-holder),
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .pepper-hand img:not(.card-place-holder) {
    position:absolute !important;
    left:0 !important;
    width:72px !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-1,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-1 { top:0 !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-2,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-2 { top:42px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-3,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-3 { top:84px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-4,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-4 { top:126px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-5,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-5 { top:168px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-6,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-6 { top:210px !important; }

  .mock-table-preview { display:none !important; }
}

@media (max-width:1199px) {
  .game-shell,
  .site-header__inner { width:min(100% - 24px, 900px) !important; }
  #pepper-app > div { display:block !important; }
  #pepper-app > div > .row.mb-4.g-0 { height:auto !important; min-height:0 !important; margin-bottom:24px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) { display:none !important; }
}