/* ===== Inline style block 1 from original index.html ===== */

  * { box-sizing: border-box; }
  body {
    font-family: system-ui, sans-serif;
    background: #0b1724;
    color: #f5f5f5;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  header {
    padding: 10px 12px;
    background: #111c2b;
    border-bottom: 1px solid #22344d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 14px;
  }
  #topBarRight {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .top-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #4d658a;
    background: #26374f;
    color: #f5f5f5;
    font-size: 12px;
    cursor: pointer;
  }
  .top-btn:hover { filter: brightness(1.08); }
  #main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 8px;
  }
  #scoreboardWrap {
    border: 1px solid #355172;
    border-radius: 12px;
    background: linear-gradient(180deg, #16263a 0%, #0f1c2d 100%);
    padding: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }
  #scoreboardTitle {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #aac6ea;
    margin-bottom: 8px;
  }
  #scores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .score-card {
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 64px;
  }
  .score-name {
    font-size: 12px;
    color: #b7d2f0;
  }
  .score-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
  }
  .score-extra {
    font-size: 11px;
    color: #9eb6d4;
  }
  #status {
    min-height: 46px;
    padding: 10px;
    border-radius: 10px;
    background: #101b2b;
    border: 1px solid #22344d;
    font-size: 14px;
  }
  #table {
    flex: 1;
    min-height: 260px;
    border-radius: 12px;
    border: 1px solid #22344d;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: radial-gradient(circle at center, #1b2a3f 0, #0b1724 60%);
  }
  .trick-row {
    display: flex;
    justify-content: space-around;
    margin: 4px 0;
    font-size: 13px;
  }
  .card-slot {
    min-width: 90px;
    min-height: 42px;
    text-align: center;
    padding: 8px 6px;
    border-radius: 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
  }
  #controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #biddingArea, #partnerCallArea {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .panel {
    border-radius: 10px;
    border: 1px solid #22344d;
    background: #101926;
    padding: 8px;
  }
  #discardBar {
    min-height: 24px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  #hand {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 16px 10px 38px;
    min-height: 164px;
    align-items: center;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
    user-select: none;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: #7fb2ff #0b1724;
  }
  #hand::-webkit-scrollbar {
    height: 20px;
  }
  #hand::-webkit-scrollbar-track {
    background: #0b1724;
    border-radius: 4px;
    border: 1px solid #22344d;
    margin: 0 64px;
  }
  #hand::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #3d5f89, #7fb2ff);
    border-radius: 4px;
    border: 3px solid #0b1724;
    min-width: 176px;
  }
  #hand::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #5f86b8, #a9ceff);
  }
  #hand.drag-scrolling {
    cursor: grabbing;
  }
  /* While dragging the hand background, cards stay clickable. */
  .card-btn {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #445b7f;
    background: #152238;
    color: #f5f5f5;
    font-size: 15px;
    cursor: pointer;
    flex: 0 0 auto;
    min-width: 58px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
  .bid-btn:disabled,
  .top-btn:disabled {
    opacity: 0.45;
    cursor: default;
  }
  .card-btn:disabled {
    opacity: 1;
    cursor: default;
    filter: none;
  }
  .card-btn:disabled .playing-card {
    opacity: 0.92;
  }
  .card-btn.playable-card-btn {
    border-color: #ffd166;
    box-shadow: 0 0 0 2px rgba(255,209,102,0.65), 0 0 18px rgba(255,209,102,0.35);
    transform: translateY(-2px);
  }
  .card-btn.playable-card-btn .playing-card {
    border-color: rgba(255,209,102,0.9);
  }
  .selected-card {
    border-color: #7fb2ff !important;
    box-shadow: 0 0 0 3px rgba(127,178,255,0.9), 0 0 18px rgba(127,178,255,0.45) !important;
    transform: translateY(-2px);
  }
  .selected-card .playing-card {
    border-color: rgba(127,178,255,0.95) !important;
  }
  .suit-S { color: #1c1c1c; }
  .suit-H { color: #d84b5f; }
  .suit-D { color: #d89a2b; }
  .suit-C { color: #153f7a; }
  body {
    --card-width: 66px;
    --card-height: 96px;
    --card-size-multiplier: 1;
  }
  .playing-card {
    width: calc(var(--card-width) * var(--card-size-multiplier));
    height: calc(var(--card-height) * var(--card-size-multiplier));
    border-radius: calc(10px * var(--card-size-multiplier));
    border: 2px solid rgba(255,255,255,0.34);
    background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 55%, #e6edf8 100%);
    color: #111;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(0,0,0,0.08);
    margin: 0 auto;
  }
  .card-corner {
    position: absolute;
    font-size: calc(11px * var(--card-size-multiplier));
    line-height: 0.9;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    pointer-events: none;
  }
  .card-corner.top {
    top: calc(5px * var(--card-size-multiplier));
    left: calc(6px * var(--card-size-multiplier));
  }
  .card-corner.bottom {
    right: calc(6px * var(--card-size-multiplier));
    bottom: calc(5px * var(--card-size-multiplier));
    transform: rotate(180deg);
  }
  .card-center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(24px * var(--card-size-multiplier));
    font-weight: 700;
  }
  .card-rank { font-size: calc(12px * var(--card-size-multiplier)); }
  .card-suit { font-size: calc(11px * var(--card-size-multiplier)); transform: translateY(calc(-1px * var(--card-size-multiplier))); font-weight: 800; }
  .card-face, .card-pips, .card-ace-center {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .card-ace-center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(36px * var(--card-size-multiplier));
    font-weight: 700;
    opacity: 0.95;
  }
  .card-pip {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    font-size: calc(var(--size, 15px) * var(--card-size-multiplier));
    line-height: 1;
  }
  .card-face {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .face-frame {
    width: 66%;
    height: 66%;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: calc(10px * var(--card-size-multiplier));
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(240,243,247,0.98) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
    position: relative;
  }
  .face-frame::before,
  .face-frame::after {
    content: attr(data-rank) " " attr(data-suit);
    position: absolute;
    font-size: calc(11px * var(--card-size-multiplier));
    font-weight: 700;
    opacity: 0.45;
    letter-spacing: 0.02em;
  }
  .face-frame::before { top: calc(4px * var(--card-size-multiplier)); left: calc(5px * var(--card-size-multiplier)); }
  .face-frame::after { right: calc(5px * var(--card-size-multiplier)); bottom: calc(4px * var(--card-size-multiplier)); transform: rotate(180deg); }
  .face-title {
    font-size: calc(7px * var(--card-size-multiplier));
    letter-spacing: 0.16em;
    opacity: 0.78;
    text-transform: uppercase;
  }
  .face-mark { font-size: calc(20px * var(--card-size-multiplier)); font-weight: 700; line-height: 1; }
  .face-suit { font-size: calc(20px * var(--card-size-multiplier)); line-height: 1; }
  .size-slider-row {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
  }
  .size-slider-row input[type="range"] {
    width: 100%;
    accent-color: #7fb2ff;
  }
  .slider-value {
    min-width: 48px;
    text-align: right;
    color: #d9e9fb;
    font-variant-numeric: tabular-nums;
  }

  .suit-order-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .suit-chip {
    min-width: 58px;
    min-height: 58px;
    border-radius: 14px;
    border: 1px solid #476587;
    background: #132338;
    color: #f5f5f5;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 24px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }
  .suit-chip small {
    font-size: 10px;
    color: #b7d2f0;
    letter-spacing: 0.04em;
  }
  .suit-chip.dragging {
    opacity: 0.65;
    transform: scale(1.05);
    border-color: #7fb2ff;
  }
  .suit-chip.drop-target {
    border-color: #7fb2ff;
    box-shadow: 0 0 0 2px rgba(127,178,255,0.2) inset;
  }
  .suit-order-help {
    color: #9eb6d4;
    font-size: 12px;
    line-height: 1.35;
  }
  .suit-H, .suit-D { color: #c62828; }
  .suit-S { color: #111111; }
  .suit-C { color: #153f7a; }
  .called-card-highlight { box-shadow: 0 0 0 3px #ffd166, 0 8px 18px rgba(255,209,102,0.35); }
  .menu-grid { display:grid; gap:10px; }
  .setting-row { display:grid; gap:6px; margin-bottom:12px; }
  .setting-row label { color:#b7d2f0; font-size:14px; }
  .setting-row input[type="text"], .setting-row input[type="number"] {
    width:100%; padding:10px 12px; border-radius:10px; border:1px solid #476587; background:#132338; color:#f5f5f5; font-size:15px;
  }
  .setting-row input[type="checkbox"] { transform:scale(1.2); }
  #autoFinishWrap { display:none; }
  #autoFinishWrap.show { display:block; }
  #log {
    height: 120px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid #22344d;
    padding: 6px 8px;
    font-size: 12px;
    background: #050b12;
    scrollbar-width: auto;
    scrollbar-color: #7fb2ff #0b1724;
  }
  #log::-webkit-scrollbar {
    width: 20px;
  }
  #log::-webkit-scrollbar-track {
    background: #0b1724;
    border-radius: 4px;
    border: 1px solid #22344d;
    margin: 8px 0;
  }
  #log::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3d5f89, #7fb2ff);
    border-radius: 4px;
    border: 3px solid #0b1724;
    min-height: 64px;
  }
  #log::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #5f86b8, #a9ceff);
  }
  .bid-btn {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #445b7f;
    background: #1b2a3f;
    color: #f5f5f5;
    font-size: 13px;
    cursor: pointer;
  }
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(3,8,15,0.82);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 20;
  }
  .overlay.show { display: flex; }
  .modal {
    width: min(720px, 100%);
    max-height: 88vh;
    overflow: auto;
    background: #0f1927;
    border: 1px solid #2f4764;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
  .modal h2, .modal h3 {
    margin: 0 0 10px;
  }
  .menu-title {
    font-size: 32px;
    margin-bottom: 8px;
  }
  .menu-sub {
    color: #b3cbe8;
    margin-bottom: 18px;
    font-size: 14px;
  }
  .menu-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .menu-btn {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 12px;
    border: 1px solid #5072a0;
    background: #20334f;
    color: #f5f5f5;
    cursor: pointer;
  }
  .history-trick {
    border: 1px solid #29405a;
    border-radius: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 10px;
  }
  .history-plays {
    display: grid;
    gap: 4px;
    font-size: 14px;
  }
  .result-text {
    color: #b7d2f0;
    margin: 8px 0 16px;
    line-height: 1.4;
  }
  .muted {
    color: #9eb6d4;
  }
  .score-hidden { display:none; }
.victory-ranks {
    border: 1px solid #29405a;
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
  }
  .victory-rank-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #d9e7f7;
    font-size: 14px;
  }
  .victory-rank-place {
    color: #9eb6d4;
    min-width: 42px;
  }

  .online-box { border:1px solid #2f4764; border-radius:12px; padding:10px; background:rgba(255,255,255,0.03); display:grid; gap:8px; margin-top:10px; }
  .online-row { display:grid; gap:6px; }
  .online-row label { color:#b7d2f0; font-size:13px; }
  .online-row input, .online-row select, .online-row textarea { width:100%; padding:10px 12px; border-radius:10px; border:1px solid #476587; background:#132338; color:#f5f5f5; font-size:14px; }
  .online-row textarea { min-height:110px; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; resize:vertical; }
  #onlineStatus { color:#b7d2f0; font-size:13px; line-height:1.35; min-height:18px; }
  .online-pill { border:1px solid #4d658a; background:#17283f; border-radius:999px; padding:4px 8px; color:#b7d2f0; font-size:12px; }
  .seat-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .seat-card { border:1px solid #2f4764; border-radius:12px; padding:10px; background:rgba(255,255,255,0.035); display:grid; gap:6px; }
  .seat-card.taken { border-color:#48688c; background:rgba(127,178,255,0.08); }
  .seat-card.mine { border-color:#7fb2ff; box-shadow:0 0 0 2px rgba(127,178,255,0.24) inset; }
  .seat-card .seat-name { font-weight:700; }
  .seat-card .seat-status { color:#b7d2f0; font-size:12px; }
  .seat-card button { padding:8px 10px; border-radius:8px; border:1px solid #4d658a; background:#20334f; color:#f5f5f5; cursor:pointer; }
  .seat-card button:disabled { opacity:.45; cursor:default; }
  #onlineLobby { display:none; }
  #onlineLobby.show { display:grid; }

  #chatPanel {
    border-radius: 10px;
    border: 1px solid #22344d;
    background: #101926;
    padding: 8px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 6px;
    min-height: 142px;
  }
  #chatTitle {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #aac6ea;
  }
  #chatMessages {
    min-height: 72px;
    max-height: 150px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid #22344d;
    background: #050b12;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.35;
    scrollbar-width: auto;
    scrollbar-color: #7fb2ff #0b1724;
  }
  #chatMessages::-webkit-scrollbar {
    width: 20px;
  }
  #chatMessages::-webkit-scrollbar-track {
    background: #0b1724;
    border-radius: 4px;
    border: 1px solid #22344d;
    margin: 8px 0;
  }
  #chatMessages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3d5f89, #7fb2ff);
    border-radius: 4px;
    border: 3px solid #0b1724;
    min-height: 64px;
  }
  #chatMessages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #5f86b8, #a9ceff);
  }
  .chat-message {
    margin-bottom: 5px;
    color: #d9e7f7;
    overflow-wrap: anywhere;
  }
  .chat-name {
    color: #7fb2ff;
    font-weight: 700;
  }
  .chat-system {
    color: #9eb6d4;
    font-style: italic;
  }
  #chatForm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }
  #chatInput {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid #476587;
    background: #132338;
    color: #f5f5f5;
    font-size: 14px;
  }
  #chatSendBtn {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #5072a0;
    background: #20334f;
    color: #f5f5f5;
    cursor: pointer;
  }
  #centerContinuePrompt {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 18;
    width: min(420px, calc(100vw - 32px));
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #5072a0;
    background: rgba(15, 25, 39, 0.96);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    display: none;
    text-align: center;
  }
  #centerContinuePrompt.show { display: grid; gap: 12px; }
  #centerContinueText {
    color: #d9e7f7;
    font-size: 15px;
    line-height: 1.35;
  }
  #centerContinueBtn {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid #7fb2ff;
    background: #1f8f7a;
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(127,178,255,0.15), 0 8px 22px rgba(0,0,0,0.35);
  }
  #centerContinueBtn:disabled {
    background: #26374f;
    border-color: #4d658a;
    color: #b7d2f0;
    cursor: default;
    box-shadow: none;
  }

  @media (max-width: 899px) {
    #hand {
      min-height: 184px;
      padding-top: 18px;
      padding-bottom: 54px;
    }
  }

  @media (max-width: 560px) { .seat-grid { grid-template-columns:1fr; } }

  @media (max-width: 899px) {
    #hand {
      min-height: 184px;
      padding-top: 18px;
      padding-bottom: 54px;
    }
  }

  @media (max-width: 560px) {
    body {
      --card-width: 66px;
      --card-height: 96px;
    }
    #scores { grid-template-columns: 1fr 1fr; }
    .score-value { font-size: 22px; }
    .card-slot { min-width: 74px; }
    .menu-title { font-size: 26px; }
  }

  /* PC / landscape layout. Mobile keeps the original stacked layout above. */
  @media (min-width: 900px) {
    body {
      align-items: center;
    }
    header {
      width: min(1400px, 100%);
      padding: 12px 16px;
    }
    #main {
      width: min(1400px, 100%);
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      grid-template-rows: auto minmax(420px, 1fr) auto;
      gap: 10px;
      padding: 10px;
      min-height: calc(100vh - 58px);
    }
    #scoreboardWrap {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: stretch;
    }
    #scores {
      grid-template-columns: 1fr;
    }
    .score-card {
      min-height: 82px;
    }
    #status {
      grid-column: 2;
      grid-row: 1;
      align-self: stretch;
      display: flex;
      align-items: center;
    }
    #table {
      grid-column: 2;
      grid-row: 2;
      min-height: 420px;
      padding: 18px;
    }
    #controls {
      grid-column: 1 / span 2;
      grid-row: 3;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
      grid-template-areas:
        "hand bidding"
        "hand partner"
        "hand discard"
        "hand autofinish"
        "hand log"
        "hand chat";
      align-items: stretch;
    }
    body {
      --card-width: 90px;
      --card-height: 130px;
    }
    #hand {
      grid-area: hand;
      min-height: 190px;
      gap: 10px;
      padding: 18px 16px 44px;
      align-items: center;
    }
    .card-btn {
      padding: 8px;
      border-radius: 12px;
      background: #172840;
      border-color: #56779f;
    }
    .card-btn:not(:disabled):hover {
      transform: translateY(-3px);
      filter: brightness(1.08);
    }
    #biddingArea { grid-area: bidding; }
    #partnerCallArea { grid-area: partner; }
    #discardBar { grid-area: discard; }
    #autoFinishWrap { grid-area: autofinish; }
    #log { grid-area: log; height: 145px; }
    #chatPanel { grid-area: chat; min-height: 150px; }
    #chatMessages { max-height: 92px; }
    #hand .card-btn {
      min-width: calc(106px * var(--card-size-multiplier));
    }
    .modal {
      width: min(820px, 100%);
    }
    .seat-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .rules-content {
    display: grid;
    gap: 10px;
    color: #d9e7f7;
  }
  .rules-content details {
    border: 1px solid #29405a;
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    overflow: hidden;
  }
  .rules-content summary {
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 700;
    color: #f5f5f5;
    user-select: none;
    -webkit-user-select: none;
  }
  .rules-section-body {
    padding: 0 14px 12px;
    color: #c4d6ea;
    line-height: 1.45;
    font-size: 14px;
  }
  .rules-section-body ul,
  .rules-section-body ol {
    margin: 8px 0 0 20px;
    padding: 0;
  }
  .rules-section-body li { margin: 5px 0; }
  .rules-note {
    border: 1px solid rgba(127,178,255,0.28);
    background: rgba(127,178,255,0.08);
    color: #d9e9fb;
    border-radius: 12px;
    padding: 10px 12px;
    line-height: 1.45;
    font-size: 14px;
  }

  #table { position: relative; }
  #tableLobbyPanel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    width: min(640px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: auto;
    border: 1px solid #5072a0;
    border-radius: 16px;
    background: rgba(15, 25, 39, 0.97);
    box-shadow: 0 18px 48px rgba(0,0,0,0.48);
    padding: 14px;
    display: none;
  }
  #tableLobbyPanel.show { display: grid; gap: 12px; }
  #tableLobbyTitle {
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
  }
  #tableLobbySeatGrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  #tableLobbyMessage { color:#c4d6ea; font-size:14px; line-height:1.35; }
  #tableHostStartControls { display:none; gap:8px; }
  #tableHostStartControls.show { display:grid; }
  #onlineLobby { display:none !important; }
  @media (max-width: 560px) { #tableLobbySeatGrid { grid-template-columns:1fr; } }
  @media (min-width: 900px) { #tableLobbySeatGrid { grid-template-columns:repeat(4, minmax(0,1fr)); } }

  .table-lobby-card {
    width: min(680px, calc(100vw - 32px));
    border: 1px solid #5072a0;
    border-radius: 16px;
    background: rgba(15, 25, 39, 0.96);
    box-shadow: 0 16px 48px rgba(0,0,0,0.45);
    padding: 16px;
    display: grid;
    gap: 12px;
    pointer-events: auto;
  }
  .table-lobby-title-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
  }
  .table-lobby-title {
    font-size: 20px;
    font-weight: 800;
  }
  .table-lobby-subtitle {
    color: #c4d6ea;
    font-size: 14px;
    line-height: 1.35;
  }
  .table-seat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .table-lobby-actions {
    display: grid;
    gap: 10px;
  }
  .table-lobby-waiting {
    border: 1px solid #29405a;
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    padding: 14px;
    color: #d9e7f7;
    text-align: center;
    line-height: 1.4;
  }
  @media (max-width: 760px) {
    .table-seat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 460px) {
    .table-seat-grid {
      grid-template-columns: 1fr;
    }
  }

  #tableLobbyOverlay .table-lobby-card,
  #tableLobbyOverlay button {
    pointer-events: auto;
  }

  /* Warm tabletop redesign: real-card feel, not casino themed. */
  :root {
    --felt: #315241;
    --felt-dark: #1d3429;
    --wood: #6e4728;
    --wood-dark: #2b1a10;
    --paper: #fffaf0;
    --paper-edge: #d7c6a2;
    --ink: #24190f;
    --brass: #d7aa55;
    --muted-paper: #e9dcc4;
  }
  body {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--paper);
    background:
      radial-gradient(circle at 18% 8%, rgba(255,230,170,0.10), transparent 28%),
      linear-gradient(135deg, rgba(255,255,255,0.035) 25%, transparent 25%) 0 0 / 22px 22px,
      linear-gradient(135deg, transparent 75%, rgba(0,0,0,0.08) 75%) 0 0 / 22px 22px,
      linear-gradient(180deg, #24160e 0%, #120b07 100%);
  }
  header {
    background: linear-gradient(180deg, #4e301c, #2b1a10);
    border-bottom: 1px solid rgba(215,170,85,0.55);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    position: relative;
    z-index: 30;
  }
  .top-btn, .bid-btn, .menu-btn, #chatSendBtn, .seat-card button {
    border-color: rgba(215,170,85,0.75);
    background: linear-gradient(180deg, #7a5230, #432818);
    color: #fff5dc;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 8px rgba(0,0,0,0.22);
  }
  .top-btn:hover, .bid-btn:hover, .menu-btn:hover, #chatSendBtn:hover, .seat-card button:hover { filter: brightness(1.08); }
  #main { background: transparent; }
  #scoreboardWrap, #status, .panel, #chatPanel, #log {
    background: rgba(42, 25, 14, 0.78);
    border-color: rgba(215,170,85,0.38);
    box-shadow: 0 8px 22px rgba(0,0,0,0.26), inset 0 0 18px rgba(255,244,210,0.035);
  }
  #scoreboardTitle, #chatTitle, .score-name, .menu-sub, .muted, .score-extra, .suit-order-help, .online-row label, .setting-row label {
    color: #e9dcc4;
  }
  .score-card, .history-trick, .rules-content details, .online-box, .seat-card, .victory-ranks, .table-lobby-waiting {
    background: rgba(255,250,240,0.065);
    border-color: rgba(215,170,85,0.28);
  }
  #table {
    background:
      radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 58%),
      radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 67%, #13241d 100%);
    border: 12px solid transparent;
    border-radius: 28px;
    box-shadow:
      inset 0 0 0 2px rgba(215,170,85,0.35),
      inset 0 0 50px rgba(0,0,0,0.42),
      0 12px 28px rgba(0,0,0,0.36);
    position: relative;
  }
  #table::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 28px;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.06), transparent 24%, rgba(0,0,0,0.20) 80%),
      repeating-linear-gradient(90deg, #7a4d2d 0 18px, #623a21 18px 34px, #8a5832 34px 49px);
    z-index: -1;
  }
  .card-slot {
    background: rgba(14,28,22,0.48);
    border: 1px dashed rgba(255,250,240,0.32);
    color: #fff5dc;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.24);
  }
  #hand {
    background:
      linear-gradient(180deg, rgba(255,250,240,0.08), rgba(0,0,0,0.12)),
      rgba(36, 22, 13, 0.72);
    border-color: rgba(215,170,85,0.42);
    gap: 0;
  }
  #hand .card-btn { margin-right: calc(-14px * var(--card-size-multiplier)); }
  #hand .card-btn:hover, #hand .card-btn.playable-card-btn, #hand .selected-card { z-index: 3; }
  .card-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .playing-card {
    background:
      radial-gradient(circle at 50% 22%, rgba(255,255,255,0.92), transparent 18%),
      linear-gradient(180deg, #fffaf0 0%, #fffdf7 48%, #efe3cc 100%);
    color: var(--ink);
    border: 1px solid var(--paper-edge);
    box-shadow:
      0 10px 18px rgba(0,0,0,0.34),
      inset 0 0 0 3px rgba(255,255,255,0.45),
      inset 0 0 0 5px rgba(120,82,48,0.07);
  }
  .playing-card::before {
    content: "";
    position: absolute;
    inset: calc(7px * var(--card-size-multiplier));
    border: 1px solid rgba(120,82,48,0.18);
    border-radius: calc(8px * var(--card-size-multiplier));
    pointer-events: none;
  }
  .face-frame {
    background: linear-gradient(180deg, #fffaf0 0%, #eadcc1 100%);
    border-color: rgba(120,82,48,0.24);
  }
  .suit-H, .suit-D { color: #b51f2e; }
  .suit-S { color: #171411; }
  .suit-C { color: #173f73; }
  .overlay {
    background: rgba(21, 12, 7, 0.72);
    backdrop-filter: blur(3px);
  }
  .modal, .table-lobby-card {
    background:
      linear-gradient(180deg, rgba(255,250,240,0.08), rgba(0,0,0,0.14)),
      #2a190e;
    border-color: rgba(215,170,85,0.58);
    box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 0 24px rgba(255,244,210,0.035);
  }
  .menu-title {
    color: #fff5dc;
    letter-spacing: 0.02em;
  }
  #chatMessages, #chatInput, .online-row input, .online-row select, .online-row textarea, .setting-row input[type="text"], .setting-row input[type="number"] {
    background: rgba(19, 34, 28, 0.82);
    border-color: rgba(215,170,85,0.34);
    color: #fff5dc;
  }
  .chat-name { color: #f0c977; }
  #trumpInfo {
    color: #ffe4a3;
    font-weight: 700;
  }
  .called-card-highlight { box-shadow: 0 0 0 3px var(--brass), 0 8px 18px rgba(215,170,85,0.35); }
  .playable-card-btn {
    box-shadow: 0 0 0 2px rgba(215,170,85,0.75), 0 0 18px rgba(215,170,85,0.35) !important;
  }
  #tableLobbyOverlay { pointer-events: none; }
  #tableLobbyOverlay .table-lobby-card, #tableLobbyOverlay button { pointer-events: auto; }

  /* Unified action area: bidding, discard, partner call, and auto-finish now reuse one table-control slot. */
  #biddingArea:empty,
  #partnerCallArea:empty,
  #discardBar:empty {
    display: none !important;
  }

  #biddingArea,
  #partnerCallArea,
  #discardBar,
  #autoFinishWrap {
    min-height: 58px;
    align-content: center;
  }

  #partnerCallArea[style*="display:none"],
  #partnerCallArea[style*="display: none"],
  #autoFinishWrap:not(.show) {
    display: none !important;
  }

  @media (min-width: 900px) {
    #controls {
      grid-template-areas:
        "hand action"
        "hand log"
        "hand chat";
      grid-template-rows: auto auto auto;
      align-content: start;
    }
    #biddingArea,
    #partnerCallArea,
    #discardBar,
    #autoFinishWrap {
      grid-area: action;
    }
    #log {
      grid-area: log;
      height: 200px;
    }
    #chatPanel {
      grid-area: chat;
    }
  }

  @media (max-width: 899px) {
    #biddingArea,
    #partnerCallArea,
    #discardBar,
    #autoFinishWrap {
      order: 2;
    }
    #log { order: 3; }
    #chatPanel { order: 4; }
  }

  /* Tabletop polish pass: finish/continue prompt and remaining blue UI bits. */
  #centerContinuePrompt {
    width: min(460px, calc(100vw - 32px));
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(215,170,85,0.70);
    background:
      linear-gradient(180deg, rgba(255,250,240,0.10), rgba(0,0,0,0.14)),
      #2a190e;
    color: #fff5dc;
    box-shadow:
      0 18px 52px rgba(0,0,0,0.58),
      inset 0 0 0 1px rgba(255,250,240,0.06),
      inset 0 0 26px rgba(255,244,210,0.035);
    text-align: center;
  }
  #centerContinuePrompt::before {
    content: "Next deal";
    display: block;
    margin: -2px 0 4px;
    color: #f0c977;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 800;
  }
  #centerContinueText {
    color: #f7ead1;
    font-size: 15px;
  }
  #centerContinueBtn {
    border-radius: 16px;
    border: 1px solid rgba(215,170,85,0.82);
    background:
      linear-gradient(180deg, rgba(255,240,190,0.20), rgba(0,0,0,0.12)),
      linear-gradient(180deg, #8a5b34, #4b2d1a);
    color: #fff5dc;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(0,0,0,0.45);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 7px 16px rgba(0,0,0,0.34),
      0 0 0 3px rgba(215,170,85,0.12);
  }
  #centerContinueBtn:hover { filter: brightness(1.08); }
  #centerContinueBtn:disabled {
    background: rgba(42, 25, 14, 0.88);
    border-color: rgba(215,170,85,0.30);
    color: #cdbd9d;
    box-shadow: none;
  }

  /* Make scrollbars match the brass/wood theme instead of the old blue theme. */
  #hand,
  #log,
  #chatMessages {
    scrollbar-color: #d7aa55 #21140c;
  }
  #hand::-webkit-scrollbar-track,
  #log::-webkit-scrollbar-track,
  #chatMessages::-webkit-scrollbar-track {
    background: #21140c;
    border-color: rgba(215,170,85,0.28);
  }
  #hand::-webkit-scrollbar-thumb,
  #log::-webkit-scrollbar-thumb,
  #chatMessages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8a5b34, #d7aa55);
    border-color: #21140c;
  }
  #hand::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #8a5b34, #d7aa55); }
  #hand::-webkit-scrollbar-thumb:hover,
  #log::-webkit-scrollbar-thumb:hover,
  #chatMessages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a97442, #f0c977);
  }

  /* Small readability polish for the table and log. */
  #log {
    line-height: 1.32;
    color: #fff5dc;
  }
  .card-slot {
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  }
  #status {
    color: #f7ead1;
    font-weight: 650;
  }
  .score-value { color: #fff5dc; }

/* === Full tabletop UI rework: same wood / felt / brass palette === */
:root{
  --felt:#234b38;
  --felt-dark:#163526;
  --wood:#2a170d;
  --wood-2:#3a2313;
  --brass:#b98237;
  --brass-soft:rgba(185,130,55,.55);
  --cream:#fff3d2;
  --ink:#110b06;
  --panel:rgba(45,25,12,.86);
  --panel-2:rgba(30,17,9,.92);
}
html,body{min-height:100%;}
body{
  background:
    radial-gradient(circle at 50% 32%, rgba(72,126,87,.34), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0/28px 28px,
    linear-gradient(180deg, #170e09 0%, #251408 42%, #120b07 100%) !important;
  color:var(--cream) !important;
  font-family: Cambria, Georgia, system-ui, sans-serif !important;
}
body.reworked-ui header{
  width:min(1500px,100%);
  margin:0 auto;
  background:linear-gradient(180deg, rgba(58,35,19,.96), rgba(28,16,9,.96)) !important;
  border-bottom:1px solid var(--brass-soft) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
body.reworked-ui #main{
  width:min(1500px,100%);
  margin:0 auto;
  padding:10px;
  display:grid !important;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(430px,1fr) auto;
  gap:10px;
  min-height:calc(100vh - 58px);
  background:transparent !important;
}
body.reworked-ui #table{
  grid-row:1;
  position:relative !important;
  min-height:clamp(420px, 58vh, 720px) !important;
  border-radius:34px !important;
  border:10px solid rgba(73,42,20,.95) !important;
  outline:2px solid rgba(185,130,55,.65);
  outline-offset:-16px;
  background:
    radial-gradient(ellipse at center, rgba(78,134,92,.78) 0%, rgba(35,75,56,.96) 46%, rgba(18,49,34,.98) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 8px, transparent 8px 18px) !important;
  box-shadow:inset 0 0 70px rgba(0,0,0,.45), 0 22px 42px rgba(0,0,0,.42) !important;
  overflow:hidden;
  display:block !important;
  padding:0 !important;
}
body.reworked-ui #table::before{
  content:"";
  position:absolute;
  inset:82px 110px;
  border-radius:50%;
  border:1px dashed rgba(255,243,210,.22);
  box-shadow:inset 0 0 45px rgba(0,0,0,.18);
  pointer-events:none;
}
body.reworked-ui #table::after{
  content:"TRICK";
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(260px,34vw); height:min(150px,22vh);
  border-radius:999px;
  border:1px solid rgba(255,243,210,.20);
  background:rgba(10,22,15,.14);
  color:rgba(255,243,210,.28);
  display:grid; place-items:center;
  font-size:clamp(18px,3vw,34px);
  font-weight:900; letter-spacing:.18em;
  pointer-events:none;
}
body.reworked-ui .trick-row{display:contents !important; margin:0 !important;}
body.reworked-ui .trick-row > .card-slot[style*="visibility:hidden"]{display:none !important;}
body.reworked-ui .card-slot{
  position:absolute !important;
  width:clamp(112px, 13vw, 170px) !important;
  min-width:0 !important;
  min-height:clamp(72px, 12vh, 150px) !important;
  border-radius:18px !important;
  border:1px dashed rgba(255,243,210,.46) !important;
  background:rgba(11,25,17,.28) !important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.22) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:rgba(255,243,210,.72) !important;
  font-weight:800;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  padding:8px !important;
  z-index:3;
}
body.reworked-ui #slot-2{left:50%; top:102px; transform:translateX(-50%);} 
body.reworked-ui #slot-0{left:50%; bottom:22px; transform:translateX(-50%);} 
body.reworked-ui #slot-1{left:26px; top:50%; transform:translateY(-50%);} 
body.reworked-ui #slot-3{right:26px; top:50%; transform:translateY(-50%);} 
body.reworked-ui #slot-1 .playing-card, body.reworked-ui #slot-3 .playing-card{transform:scale(.84);} 
body.reworked-ui #scoreboardWrap{
  position:absolute !important;
  left:22px; right:22px; top:18px;
  z-index:6;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
body.reworked-ui #scoreboardTitle{display:none !important;}
body.reworked-ui #scores{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
}
body.reworked-ui .score-card{
  min-height:56px !important;
  border-radius:16px !important;
  border:1px solid rgba(185,130,55,.72) !important;
  background:linear-gradient(180deg, rgba(57,31,14,.90), rgba(30,17,9,.86)) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,243,210,.06) !important;
  padding:8px 10px !important;
  display:grid !important;
  grid-template-columns:1fr auto;
  grid-template-areas:"name score" "extra score";
  align-items:center;
}
body.reworked-ui .score-name{grid-area:name; color:#f8dfab !important; font-size:13px !important; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
body.reworked-ui .score-value{grid-area:score; font-size:28px !important; color:#fff7df !important; padding-left:8px;}
body.reworked-ui .score-extra{grid-area:extra; color:#d0ac72 !important; font-size:11px !important;}
body.reworked-ui #status{
  position:absolute !important;
  left:50%; top:86px; transform:translateX(-50%);
  z-index:5;
  width:min(680px, calc(100% - 300px));
  min-height:42px !important;
  border-radius:999px !important;
  border:1px solid rgba(185,130,55,.62) !important;
  background:rgba(30,17,9,.78) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.28) !important;
  display:flex !important; align-items:center; justify-content:center;
  text-align:center;
  padding:9px 18px !important;
  color:#fff3d2 !important;
  font-size:14px !important;
}
body.reworked-ui #controls{
  grid-row:2;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(330px,420px) !important;
  grid-template-areas:"hand action" "hand log" "hand chat" !important;
  gap:10px !important;
  align-items:stretch;
}
body.reworked-ui #hand{
  grid-area:hand !important;
  min-height:190px !important;
  border-radius:28px !important;
  border:1px solid rgba(185,130,55,.62) !important;
  background:linear-gradient(180deg, rgba(39,22,11,.84), rgba(24,14,8,.92)) !important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.32), 0 10px 22px rgba(0,0,0,.26) !important;
  padding:20px 18px 44px !important;
  gap:0 !important;
  align-items:flex-end !important;
}
body.reworked-ui #hand .card-btn{
  margin-left:calc(-12px * var(--card-size-multiplier));
  background:transparent !important;
  border:0 !important;
  padding:4px !important;
  min-width:auto !important;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.25));
}
body.reworked-ui #hand .card-btn:first-child{margin-left:0;}
body.reworked-ui #hand .card-btn:not(:disabled):hover{transform:translateY(-12px) rotate(-1deg) !important; filter:drop-shadow(0 16px 14px rgba(0,0,0,.34)) brightness(1.04) !important;}
body.reworked-ui #biddingArea,
body.reworked-ui #partnerCallArea,
body.reworked-ui #discardBar,
body.reworked-ui #autoFinishWrap{
  grid-area:action !important;
  border-radius:22px !important;
  border:1px solid rgba(185,130,55,.62) !important;
  background:linear-gradient(180deg, rgba(58,33,15,.88), rgba(31,17,8,.92)) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,243,210,.05) !important;
  min-height:78px !important;
  padding:12px !important;
  align-content:center;
}
body.reworked-ui #biddingArea:empty,
body.reworked-ui #partnerCallArea:empty,
body.reworked-ui #discardBar:empty,
body.reworked-ui #autoFinishWrap:not(.show){display:none !important;}
body.reworked-ui .bid-btn, body.reworked-ui .top-btn, body.reworked-ui .menu-btn, body.reworked-ui #chatSendBtn, body.reworked-ui #centerContinueBtn{
  border:1px solid rgba(255,213,146,.72) !important;
  background:linear-gradient(180deg, #8a5a24, #5b3515) !important;
  color:#fff8e8 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 4px 10px rgba(0,0,0,.24);
}
body.reworked-ui .bid-btn:hover, body.reworked-ui .top-btn:hover, body.reworked-ui .menu-btn:hover, body.reworked-ui #chatSendBtn:hover, body.reworked-ui #centerContinueBtn:hover{filter:brightness(1.08);}
body.reworked-ui #log{
  grid-area:log !important;
  height:130px !important;
  border-radius:22px !important;
  border:1px solid rgba(185,130,55,.62) !important;
  background:rgba(31,17,8,.90) !important;
  color:#fff3d2 !important;
  box-shadow:inset 0 0 16px rgba(0,0,0,.32) !important;
}
body.reworked-ui #chatPanel{
  grid-area:chat !important;
  border-radius:22px !important;
  border:1px solid rgba(185,130,55,.62) !important;
  background:rgba(31,17,8,.90) !important;
}
body.reworked-ui #chatMessages, body.reworked-ui #chatInput{
  background:rgba(14,8,4,.76) !important;
  border-color:rgba(185,130,55,.45) !important;
  color:#fff3d2 !important;
}
body.reworked-ui #centerContinuePrompt{
  border-radius:24px !important;
  border:1px solid rgba(185,130,55,.82) !important;
  background:linear-gradient(180deg, rgba(58,33,15,.98), rgba(31,17,8,.98)) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,243,210,.06) !important;
}
body.reworked-ui #centerContinueText{color:#fff3d2 !important; font-weight:800;}
body.reworked-ui .modal{
  background:linear-gradient(180deg, rgba(58,33,15,.98), rgba(31,17,8,.98)) !important;
  border:1px solid rgba(185,130,55,.72) !important;
  color:#fff3d2 !important;
}
body.reworked-ui .overlay{background:rgba(12,7,4,.78) !important;}
body.reworked-ui #hand::-webkit-scrollbar, body.reworked-ui #log::-webkit-scrollbar, body.reworked-ui #chatMessages::-webkit-scrollbar{height:16px;width:16px;}
body.reworked-ui #hand::-webkit-scrollbar-track, body.reworked-ui #log::-webkit-scrollbar-track, body.reworked-ui #chatMessages::-webkit-scrollbar-track{background:#1f1209;border-color:rgba(185,130,55,.45);}
body.reworked-ui #hand::-webkit-scrollbar-thumb, body.reworked-ui #log::-webkit-scrollbar-thumb, body.reworked-ui #chatMessages::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#b98237,#694016);border-color:#1f1209;}
@media (max-width:899px){
  body.reworked-ui #main{grid-template-rows:minmax(360px,48vh) auto; padding:6px;}
  body.reworked-ui #table{min-height:360px !important; border-width:6px !important; border-radius:24px !important;}
  body.reworked-ui #table::before{inset:86px 38px;}
  body.reworked-ui #scoreboardWrap{left:10px;right:10px;top:10px;}
  body.reworked-ui #scores{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important;}
  body.reworked-ui .score-card{min-height:46px !important; padding:6px 8px !important;}
  body.reworked-ui .score-value{font-size:22px !important;}
  body.reworked-ui .score-extra{display:none;}
  body.reworked-ui #status{top:116px;width:calc(100% - 26px);font-size:12px !important;padding:7px 10px !important;}
  body.reworked-ui .card-slot{width:92px !important;min-height:58px !important;font-size:12px !important;}
  body.reworked-ui #slot-2{top:164px;}
  body.reworked-ui #slot-0{bottom:12px;}
  body.reworked-ui #slot-1{left:10px;top:62%;}
  body.reworked-ui #slot-3{right:10px;top:62%;}
  body.reworked-ui #controls{grid-template-columns:1fr !important;grid-template-areas:"action" "hand" "log" "chat" !important;}
  body.reworked-ui #hand{min-height:170px !important;padding:16px 12px 42px !important;}
  body.reworked-ui #hand .card-btn{margin-left:calc(-18px * var(--card-size-multiplier));}
  body.reworked-ui #log{height:110px !important;}
}
@media (max-width:520px){
  body.reworked-ui #slot-1, body.reworked-ui #slot-3{top:66%;}
  body.reworked-ui #slot-2{top:172px;}
  body.reworked-ui #table::after{display:none;}
  body.reworked-ui .score-name{font-size:11px !important;}
}

/* === Responsive repair for full UI rework ===
   Keeps the wood/felt/brass design, but prevents the table from becoming a huge empty area
   on wide PC screens and makes half-screen / tablet widths use a stable stacked layout. */
@media (min-width:900px){
  body.reworked-ui{
    overflow:hidden !important;
  }
  body.reworked-ui header{
    min-height:50px !important;
    padding:8px 14px !important;
  }
  body.reworked-ui #main{
    height:calc(100vh - 52px) !important;
    min-height:0 !important;
    grid-template-rows:minmax(300px, 1fr) minmax(178px, auto) !important;
    gap:8px !important;
    overflow:hidden !important;
  }
  body.reworked-ui #table{
    min-height:0 !important;
    height:100% !important;
    max-height:none !important;
  }
  body.reworked-ui #table::before{
    inset:76px 96px !important;
  }
  body.reworked-ui #scoreboardWrap{
    top:14px !important;
  }
  body.reworked-ui .score-card{
    min-height:46px !important;
    padding:6px 9px !important;
  }
  body.reworked-ui .score-value{
    font-size:22px !important;
  }
  body.reworked-ui #status{
    top:72px !important;
    min-height:36px !important;
    padding:7px 14px !important;
  }
  body.reworked-ui .card-slot{
    width:clamp(96px, 10vw, 135px) !important;
    min-height:clamp(58px, 9vh, 106px) !important;
  }
  body.reworked-ui #slot-2{top:116px !important;}
  body.reworked-ui #slot-0{bottom:16px !important;}
  body.reworked-ui #slot-1{left:28px !important; top:56% !important;}
  body.reworked-ui #slot-3{right:28px !important; top:56% !important;}
  body.reworked-ui #controls{
    min-height:0 !important;
    grid-template-columns:minmax(0,1fr) minmax(310px,390px) !important;
    grid-template-areas:"hand action" "hand log" "hand chat" !important;
    gap:8px !important;
    overflow:hidden !important;
  }
  body.reworked-ui #hand{
    min-height:166px !important;
    max-height:230px !important;
    padding:16px 16px 38px !important;
  }
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    min-height:58px !important;
    padding:9px 10px !important;
  }
  body.reworked-ui #log{
    height:96px !important;
    min-height:96px !important;
  }
  body.reworked-ui #chatPanel{
    min-height:92px !important;
  }
  body.reworked-ui #chatMessages{
    max-height:42px !important;
    min-height:38px !important;
  }
}

/* Half-screen desktop / tablet width: stack controls so the table does not squeeze or overflow. */
@media (min-width:900px) and (max-width:1120px){
  body.reworked-ui{
    overflow:auto !important;
  }
  body.reworked-ui #main{
    height:auto !important;
    min-height:calc(100vh - 52px) !important;
    grid-template-rows:minmax(340px, 48vh) auto !important;
    overflow:visible !important;
  }
  body.reworked-ui #table{
    min-height:340px !important;
  }
  body.reworked-ui #scoreboardWrap{left:12px !important;right:12px !important;top:10px !important;}
  body.reworked-ui #scores{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.reworked-ui .score-extra{display:none !important;}
  body.reworked-ui #status{top:116px !important;width:calc(100% - 36px) !important;}
  body.reworked-ui #slot-2{top:166px !important;}
  body.reworked-ui #slot-1{left:14px !important;top:64% !important;}
  body.reworked-ui #slot-3{right:14px !important;top:64% !important;}
  body.reworked-ui #controls{
    grid-template-columns:1fr !important;
    grid-template-areas:"action" "hand" "log" "chat" !important;
    overflow:visible !important;
  }
  body.reworked-ui #hand{
    min-height:160px !important;
    max-height:none !important;
  }
  body.reworked-ui #log{height:110px !important;}
  body.reworked-ui #chatMessages{max-height:88px !important;}
}

@media (max-height:760px) and (min-width:1121px){
  body.reworked-ui #main{
    grid-template-rows:minmax(280px, 1fr) minmax(160px, auto) !important;
  }
  body.reworked-ui #hand{min-height:150px !important;}
  body.reworked-ui #log{height:82px !important;min-height:82px !important;}
  body.reworked-ui #chatPanel{min-height:82px !important;}
  body.reworked-ui #chatMessages{max-height:34px !important;min-height:30px !important;}
}

/* === PC layout real fix v2 ===
   The previous repair still allowed the table row to stretch into a huge empty area.
   This override makes the table a fixed viewport-sized stage and lets the controls sit
   directly below it on desktop, including half-screen browser widths. */
@media (min-width:900px){
  html, body { height:auto !important; min-height:100% !important; overflow-x:hidden !important; }
  body.reworked-ui{ overflow-y:auto !important; align-items:stretch !important; }
  body.reworked-ui header{
    width:min(1500px, calc(100vw - 28px)) !important;
    min-height:48px !important;
    margin:0 auto !important;
    position:sticky !important;
    top:0 !important;
    z-index:30 !important;
  }
  body.reworked-ui #topBarRight{min-width:0 !important;}
  body.reworked-ui #trumpInfo{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  body.reworked-ui #main{
    width:min(1500px, calc(100vw - 28px)) !important;
    min-height:0 !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:12px !important;
    padding:10px 0 14px !important;
    overflow:visible !important;
  }
  body.reworked-ui #table{
    grid-row:1 !important;
    height:clamp(360px, 50vh, 500px) !important;
    min-height:0 !important;
    max-height:500px !important;
    width:100% !important;
    overflow:hidden !important;
  }
  body.reworked-ui #scoreboardWrap{top:14px !important; left:18px !important; right:18px !important;}
  body.reworked-ui #scores{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  body.reworked-ui .score-card{min-height:46px !important; padding:6px 9px !important;}
  body.reworked-ui .score-value{font-size:22px !important;}
  body.reworked-ui .score-extra{display:none !important;}
  body.reworked-ui #status{
    top:72px !important;
    width:min(680px, calc(100% - 280px)) !important;
    min-height:36px !important;
    padding:7px 14px !important;
  }
  body.reworked-ui #table::before{inset:76px 96px 62px !important;}
  body.reworked-ui #table::after{width:min(240px,30vw) !important; height:min(132px,18vh) !important;}
  body.reworked-ui .card-slot{
    width:clamp(92px, 10vw, 132px) !important;
    min-height:clamp(58px, 9vh, 100px) !important;
  }
  body.reworked-ui #slot-2{top:116px !important;}
  body.reworked-ui #slot-0{bottom:16px !important;}
  body.reworked-ui #slot-1{left:28px !important; top:56% !important;}
  body.reworked-ui #slot-3{right:28px !important; top:56% !important;}
  body.reworked-ui #controls{
    grid-row:2 !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(310px,420px) !important;
    grid-template-areas:"hand action" "hand log" "hand chat" !important;
    gap:10px !important;
    align-items:stretch !important;
    overflow:visible !important;
  }
  body.reworked-ui #hand{
    min-height:168px !important;
    max-height:220px !important;
    padding:16px 16px 38px !important;
  }
  body.reworked-ui #log{height:104px !important; min-height:104px !important;}
  body.reworked-ui #chatPanel{min-height:96px !important;}
  body.reworked-ui #chatMessages{min-height:38px !important; max-height:48px !important;}
}

/* Half-screen desktop gets a compact stacked control area, but the table still stays compact. */
@media (min-width:900px) and (max-width:1180px){
  body.reworked-ui header{width:100% !important; border-radius:0 !important;}
  body.reworked-ui #main{width:100% !important; padding:8px !important; gap:10px !important;}
  body.reworked-ui #table{height:clamp(340px, 48vh, 430px) !important; max-height:430px !important; border-width:7px !important; border-radius:26px !important;}
  body.reworked-ui #scoreboardWrap{left:12px !important; right:12px !important; top:10px !important;}
  body.reworked-ui #scores{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important;}
  body.reworked-ui #status{top:116px !important; width:calc(100% - 36px) !important; font-size:12px !important;}
  body.reworked-ui #slot-2{top:166px !important;}
  body.reworked-ui #slot-0{bottom:12px !important;}
  body.reworked-ui #slot-1{left:12px !important; top:64% !important;}
  body.reworked-ui #slot-3{right:12px !important; top:64% !important;}
  body.reworked-ui #controls{
    grid-template-columns:1fr !important;
    grid-template-areas:"action" "hand" "log" "chat" !important;
  }
  body.reworked-ui #hand{min-height:154px !important; max-height:none !important;}
  body.reworked-ui #log{height:112px !important; min-height:112px !important;}
  body.reworked-ui #chatMessages{max-height:88px !important;}
}

/* Very short desktop windows: keep all important play areas close together. */
@media (min-width:900px) and (max-height:760px){
  body.reworked-ui #table{height:clamp(300px, 44vh, 380px) !important; max-height:380px !important;}
  body.reworked-ui #hand{min-height:145px !important; max-height:190px !important;}
  body.reworked-ui #log{height:88px !important; min-height:88px !important;}
  body.reworked-ui #chatPanel{min-height:84px !important;}
  body.reworked-ui #chatMessages{max-height:34px !important; min-height:30px !important;}
}

/* === Full desktop stage layout fix + fullscreen polish ===
   Wide PC screens now use a true table-left / controls-right stage instead of
   a giant empty table row above the whole UI. */
@media (min-width:1181px){
  html, body { height:100% !important; overflow:hidden !important; }
  body.reworked-ui { min-height:100vh !important; overflow:hidden !important; }
  body.reworked-ui header{
    width:min(1500px, calc(100vw - 56px)) !important;
    height:44px !important;
    min-height:44px !important;
    padding:6px 12px !important;
  }
  body.reworked-ui #main{
    width:min(1500px, calc(100vw - 56px)) !important;
    height:calc(100vh - 44px) !important;
    max-height:calc(100vh - 44px) !important;
    min-height:0 !important;
    padding:10px 0 12px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(330px,420px) !important;
    grid-template-rows:auto minmax(0,1fr) minmax(160px, 220px) !important;
    grid-template-areas:
      "table action"
      "table log"
      "hand chat" !important;
    gap:10px !important;
    overflow:hidden !important;
  }
  body.reworked-ui #controls{
    display:contents !important;
  }
  body.reworked-ui #table{
    grid-area:table !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    border-width:8px !important;
    border-radius:30px !important;
  }
  body.reworked-ui #hand{
    grid-area:hand !important;
    min-height:0 !important;
    height:100% !important;
    max-height:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:action !important;
    min-height:0 !important;
    max-height:116px !important;
    overflow:auto !important;
  }
  body.reworked-ui #log{
    grid-area:log !important;
    height:100% !important;
    min-height:0 !important;
    overflow:auto !important;
  }
  body.reworked-ui #chatPanel{
    grid-area:chat !important;
    min-height:0 !important;
    height:100% !important;
  }
  body.reworked-ui #chatMessages{
    min-height:0 !important;
    max-height:none !important;
  }
}

@media (min-width:1181px) and (max-height:760px){
  body.reworked-ui #main{
    grid-template-rows:auto minmax(0,1fr) minmax(140px, 185px) !important;
  }
  body.reworked-ui #table{border-width:7px !important;}
  body.reworked-ui #hand{padding-top:12px !important; padding-bottom:34px !important;}
}

/* === Layout polish: score strip outside table, closer action panel, chat/log swap === */
@media (min-width:1181px){
  body.reworked-ui #main{
    grid-template-columns:minmax(0, 1fr) minmax(330px,420px) !important;
    grid-template-rows:56px minmax(0,1fr) minmax(58px,96px) minmax(150px,210px) !important;
    grid-template-areas:
      "score score"
      "table chat"
      "action chat"
      "hand log" !important;
  }
  body.reworked-ui #controls{display:contents !important;}

  /* Score is now a proper strip above the felt, not inside the play table. */
  body.reworked-ui #scoreboardWrap{
    grid-area:score !important;
    position:relative !important;
    left:auto !important; right:auto !important; top:auto !important;
    z-index:1 !important;
    align-self:stretch !important;
    border:1px solid rgba(185,130,55,.50) !important;
    border-radius:18px !important;
    background:linear-gradient(180deg, rgba(45,25,12,.78), rgba(22,13,8,.86)) !important;
    box-shadow:inset 0 0 18px rgba(0,0,0,.28) !important;
    padding:8px !important;
  }
  body.reworked-ui #scores{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
    height:100%;
  }
  body.reworked-ui .score-card{
    min-height:0 !important;
    height:100% !important;
    padding:6px 10px !important;
    border-radius:14px !important;
  }

  /* Table is only the felt/play space now. */
  body.reworked-ui #table{
    grid-area:table !important;
    height:100% !important;
    min-height:0 !important;
  }
  body.reworked-ui #table::before{inset:82px 96px 72px !important;}
  body.reworked-ui #slot-2{top:92px !important;}
  body.reworked-ui #slot-0{bottom:20px !important;}
  body.reworked-ui #slot-1{left:28px !important; top:56% !important;}
  body.reworked-ui #slot-3{right:28px !important; top:56% !important;}

  /* Round status sits over the table but no longer collides with score/top seat. */
  body.reworked-ui #status{
    grid-area:table !important;
    position:relative !important;
    left:auto !important; top:auto !important; transform:none !important;
    align-self:start !important;
    justify-self:center !important;
    margin-top:14px !important;
    width:min(680px, calc(100% - 300px)) !important;
    z-index:7 !important;
  }

  /* Action controls are now below the table, close to the hand. */
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:action !important;
    max-height:none !important;
    min-height:0 !important;
    height:100% !important;
    overflow:auto !important;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }

  body.reworked-ui #hand{grid-area:hand !important;}

  /* Chat above log on the right side. */
  body.reworked-ui #chatPanel{grid-area:chat !important;}
  body.reworked-ui #log{grid-area:log !important;}
  body.reworked-ui #chatMessages{min-height:0 !important; max-height:none !important;}
}

@media (min-width:900px) and (max-width:1180px){
  body.reworked-ui #main{
    grid-template-rows:auto minmax(340px, 48vh) auto auto auto !important;
    grid-template-areas:
      "score"
      "table"
      "action"
      "hand"
      "chat"
      "log" !important;
  }
  body.reworked-ui #controls{display:contents !important;}
  body.reworked-ui #scoreboardWrap{
    grid-area:score !important;
    position:relative !important;
    left:auto !important; right:auto !important; top:auto !important;
    padding:8px !important;
    border:1px solid rgba(185,130,55,.50) !important;
    border-radius:18px !important;
    background:linear-gradient(180deg, rgba(45,25,12,.78), rgba(22,13,8,.86)) !important;
  }
  body.reworked-ui #table{grid-area:table !important;}
  body.reworked-ui #status{
    grid-area:table !important;
    position:relative !important;
    left:auto !important; top:auto !important; transform:none !important;
    align-self:start !important; justify-self:center !important;
    margin-top:12px !important;
    width:calc(100% - 36px) !important;
  }
  body.reworked-ui #slot-2{top:88px !important;}
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{grid-area:action !important;}
  body.reworked-ui #hand{grid-area:hand !important;}
  body.reworked-ui #chatPanel{grid-area:chat !important;}
  body.reworked-ui #log{grid-area:log !important;}
}

/* === Seat-score tabletop correction ===
   Keeps the newer tabletop direction, but removes the bulky scoreboard strip,
   attaches score/bid info to each player seat, and makes the action row compact. */
body.reworked-ui #scoreboardWrap{
  display:none !important;
}

@media (min-width:1181px){
  html, body{height:100% !important; overflow:hidden !important;}
  body.reworked-ui header{
    width:min(1540px, calc(100vw - 48px)) !important;
    height:42px !important;
    min-height:42px !important;
  }
  body.reworked-ui #main{
    width:min(1540px, calc(100vw - 48px)) !important;
    height:calc(100vh - 42px) !important;
    max-height:calc(100vh - 42px) !important;
    padding:10px 0 12px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(330px,420px) !important;
    grid-template-rows:minmax(0,1fr) minmax(48px,66px) minmax(150px,218px) !important;
    grid-template-areas:
      "table chat"
      "action chat"
      "hand log" !important;
    gap:10px !important;
    overflow:hidden !important;
  }
  body.reworked-ui #controls{display:contents !important;}
  body.reworked-ui #table{
    grid-area:table !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    border-width:8px !important;
    border-radius:30px !important;
  }
  body.reworked-ui #table::before{inset:48px 54px 42px !important;}
  body.reworked-ui #table::after{
    width:min(330px,32vw) !important;
    height:min(170px,27vh) !important;
  }
  body.reworked-ui #status{
    grid-area:table !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    align-self:start !important;
    justify-self:center !important;
    margin-top:16px !important;
    width:min(700px, calc(100% - 330px)) !important;
    min-height:36px !important;
    padding:7px 16px !important;
    z-index:8 !important;
  }

  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:action !important;
    min-height:0 !important;
    height:100% !important;
    max-height:66px !important;
    border-radius:18px !important;
    padding:8px 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    overflow:auto !important;
  }
  body.reworked-ui #biddingArea:empty,
  body.reworked-ui #partnerCallArea:empty,
  body.reworked-ui #discardBar:empty,
  body.reworked-ui #autoFinishWrap:not(.show){display:none !important;}
  body.reworked-ui .bid-btn{
    padding:8px 12px !important;
    min-height:36px !important;
    border-radius:10px !important;
  }
  body.reworked-ui #hand{
    grid-area:hand !important;
    height:100% !important;
    min-height:0 !important;
    padding-top:16px !important;
    padding-bottom:38px !important;
  }
  body.reworked-ui #chatPanel{grid-area:chat !important; min-height:0 !important; height:100% !important;}
  body.reworked-ui #log{grid-area:log !important; height:100% !important; min-height:0 !important;}
  body.reworked-ui #chatMessages{min-height:0 !important; max-height:none !important;}
}

/* Player plaques now carry score info, so the play field no longer needs a scoreboard. */
body.reworked-ui .card-slot{
  overflow:visible !important;
  font-size:0 !important;
}
body.reworked-ui .card-slot::before{
  content:attr(data-player-info);
  position:absolute;
  left:50%;
  top:-34px;
  transform:translateX(-50%);
  min-width:max-content;
  max-width:260px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(185,130,55,.72);
  background:linear-gradient(180deg, rgba(41,27,14,.96), rgba(13,24,16,.92));
  color:#fff4d4;
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  box-shadow:0 6px 14px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,243,210,.06);
  z-index:5;
  pointer-events:none;
  white-space:nowrap;
}
body.reworked-ui #slot-0::before{top:auto; bottom:-34px;}
body.reworked-ui #slot-1::before{left:0; transform:none; top:-34px;}
body.reworked-ui #slot-3::before{left:auto; right:0; transform:none; top:-34px;}
body.reworked-ui .card-slot:not(:has(.playing-card)){
  font-size:13px !important;
}
body.reworked-ui .card-slot:not(:has(.playing-card))::after{
  content:attr(data-player-name);
  font-size:13px;
  font-weight:900;
  color:rgba(255,243,210,.76);
}

@media (min-width:1181px){
  body.reworked-ui #slot-2{top:98px !important;}
  body.reworked-ui #slot-0{bottom:36px !important;}
  body.reworked-ui #slot-1{left:26px !important; top:55% !important;}
  body.reworked-ui #slot-3{right:26px !important; top:55% !important;}
}

@media (min-width:900px) and (max-width:1180px){
  body.reworked-ui #scoreboardWrap{display:none !important;}
  body.reworked-ui #main{
    grid-template-rows:minmax(330px, 52vh) minmax(46px, auto) auto auto auto !important;
    grid-template-areas:
      "table"
      "action"
      "hand"
      "chat"
      "log" !important;
  }
  body.reworked-ui #controls{display:contents !important;}
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:action !important;
    min-height:52px !important;
    padding:8px 10px !important;
    justify-content:center !important;
  }
  body.reworked-ui #hand{grid-area:hand !important;}
  body.reworked-ui #chatPanel{grid-area:chat !important;}
  body.reworked-ui #log{grid-area:log !important;}
}

@media (max-width:899px){
  body.reworked-ui #scoreboardWrap{display:none !important;}
  body.reworked-ui .card-slot::before{
    font-size:10px;
    top:-27px;
    padding:5px 7px;
  }
  body.reworked-ui #slot-0::before{bottom:-27px;}
}

/* Gurka setup polish: player-count cards and online lobby. */
.gurka-count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.gurka-count-choice {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid rgba(185,130,55,.50);
  background: rgba(255,250,240,.055);
  cursor: pointer;
  user-select: none;
}
.gurka-count-choice input { position:absolute; opacity:0; pointer-events:none; }
.gurka-count-number { font-size: 24px; font-weight: 900; color: #fff3d2; line-height: 1; }
.gurka-count-text { font-size: 12px; color: #e9dcc4; text-align: center; }
.gurka-count-choice:has(input:checked) {
  border-color: rgba(255,213,146,.92);
  background: linear-gradient(180deg, rgba(138,90,36,.72), rgba(58,33,15,.86));
  box-shadow: 0 0 0 2px rgba(255,213,146,.16) inset, 0 8px 20px rgba(0,0,0,.24);
}
.gurka-count-choice:has(input:focus-visible) { outline: 2px solid #fff3d2; outline-offset: 2px; }
.gurka-online-status {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(185,130,55,.45);
  background: rgba(14,8,4,.45);
  color: #fff3d2;
  padding: 10px 12px;
  line-height: 1.35;
}
.gurka-personality-grid {
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:8px;
}
@media(max-width:720px){
  .gurka-count-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gurka-personality-grid{grid-template-columns:1fr;}
}

/* === Gurka add-on theme: same layout, colder colour set === */
body.gurka-mode {
  --felt:#263f55;
  --felt-dark:#15283a;
  --wood:#1a2430;
  --wood-2:#243447;
  --brass:#9fc7df;
  --brass-soft:rgba(159,199,223,.55);
  --cream:#edf8ff;
  background:
    radial-gradient(circle at 50% 30%, rgba(70,130,160,.28), transparent 34%),
    linear-gradient(180deg, #081018 0%, #101c28 48%, #060b11 100%) !important;
}
body.gurka-mode header,
body.gurka-mode .modal,
body.gurka-mode #centerContinuePrompt {
  background:linear-gradient(180deg, rgba(28,48,64,.98), rgba(11,20,30,.98)) !important;
  border-color:rgba(159,199,223,.65) !important;
}
body.gurka-mode #table {
  background:
    radial-gradient(ellipse at center, rgba(69,124,153,.78) 0%, rgba(38,63,85,.96) 46%, rgba(18,40,58,.98) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 8px, transparent 8px 18px) !important;
  border-color:rgba(22,34,46,.96) !important;
  outline-color:rgba(159,199,223,.60) !important;
}
body.gurka-mode #table::after { content:"GURKA" !important; }
body.gurka-mode .bid-btn,
body.gurka-mode .top-btn,
body.gurka-mode .menu-btn,
body.gurka-mode #chatSendBtn,
body.gurka-mode #centerContinueBtn {
  border-color:rgba(210,238,255,.72) !important;
  background:linear-gradient(180deg, #47718e, #21394f) !important;
  color:#f2fbff !important;
}
body.gurka-mode .score-card.gurka-warned {
  border-color:#ffb347 !important;
  box-shadow:0 0 0 2px rgba(255,179,71,.28) inset, 0 8px 18px rgba(0,0,0,.32) !important;
}
body.gurka-mode .score-card.gurka-eliminated {
  opacity:.55;
  filter:grayscale(.75);
  border-color:rgba(180,190,200,.35) !important;
}
body.gurka-mode .score-card.gurka-winner {
  border-color:#a8ffcb !important;
  box-shadow:0 0 0 2px rgba(168,255,203,.32) inset, 0 0 24px rgba(168,255,203,.18) !important;
}
body.gurka-mode .trick-row { display:none !important; }
#gurkaTableArea {
  position:absolute;
  inset:112px 28px 26px;
  display:none;
  z-index:4;
  pointer-events:none;
}
body.gurka-mode #gurkaTableArea { display:grid; grid-template-rows:auto 1fr; gap:10px; }
.gurka-play-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(92px, 1fr));
  gap:8px;
  align-content:center;
  align-items:center;
}
.gurka-play-slot {
  min-height:124px;
  border:1px dashed rgba(237,248,255,.45);
  border-radius:18px;
  background:rgba(6,14,22,.28);
  display:grid;
  place-items:center;
  padding:7px;
  text-align:center;
  color:#d9edf8;
  font-weight:800;
}
.gurka-play-slot.gurka-current { border-color:#fff7b0; box-shadow:0 0 0 2px rgba(255,247,176,.20) inset; }
.gurka-play-name { font-size:12px; color:#cde8f7; margin-bottom:5px; }
.gurka-play-card-empty { opacity:.65; font-size:13px; }
.gurka-info-strip {
  justify-self:center;
  border:1px solid rgba(159,199,223,.55);
  background:rgba(8,18,28,.70);
  border-radius:999px;
  padding:8px 14px;
  color:#edf8ff;
  font-weight:800;
  text-align:center;
}
@media(max-width:899px){
  #gurkaTableArea{inset:154px 12px 14px;}
  .gurka-play-slot{min-height:86px;}
}

/* Gurka table layout repair: use Amerikaner-style table seats instead of a grid. */
body.gurka-mode #table::after { display:none !important; content:none !important; }
body.gurka-mode #scoreboardWrap,
body.gurka-mode #status { display:none !important; }
body.gurka-mode .trick-row { display:none !important; }
body.gurka-mode #gurkaTableArea {
  position:absolute;
  inset:0;
  display:block !important;
  z-index:8;
  pointer-events:none;
}
body.gurka-mode #gurkaInfoStrip {
  position:absolute;
  left:50%;
  top:27%;
  transform:translate(-50%,-50%);
  z-index:10;
  border:1px solid rgba(159,199,223,.62);
  background:rgba(8,18,28,.82);
  border-radius:999px;
  padding:8px 16px;
  color:#edf8ff;
  font-weight:900;
  text-align:center;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
body.gurka-mode #gurkaPlayGrid {
  position:absolute;
  inset:0;
  display:block !important;
}
body.gurka-mode .gurka-play-slot {
  position:absolute;
  width:clamp(132px, 17vw, 228px);
  min-height:clamp(74px, 13vh, 154px);
  border:1px dashed rgba(237,248,255,.46);
  border-radius:18px;
  background:rgba(6,14,22,.30);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px;
  color:#d9edf8;
  font-weight:800;
  text-align:center;
  box-shadow:inset 0 0 18px rgba(0,0,0,.22);
  pointer-events:none;
}
body.gurka-mode .gurka-play-slot.gurka-current {
  border-color:#fff7b0;
  box-shadow:0 0 0 2px rgba(255,247,176,.22) inset, 0 0 20px rgba(255,247,176,.12);
}
body.gurka-mode .gurka-play-slot.gurka-warned-seat {
  border-color:#ffb347;
}
body.gurka-mode .gurka-play-name {
  position:absolute;
  left:50%;
  top:-31px;
  transform:translateX(-50%);
  max-width:240px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1px solid rgba(159,199,223,.62);
  background:rgba(8,18,28,.88);
  color:#edf8ff;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  box-shadow:0 5px 12px rgba(0,0,0,.25);
}
body.gurka-mode .gurka-play-slot:has(.playing-card) .gurka-play-card-empty { display:none; }
body.gurka-mode .gurka-play-card-empty {
  opacity:.72;
  font-size:13px;
}
body.gurka-mode .gurka-out-list {
  position:absolute;
  right:18px;
  bottom:14px;
  max-width:42%;
  border:1px solid rgba(180,190,200,.35);
  background:rgba(8,10,14,.72);
  border-radius:999px;
  padding:6px 10px;
  color:#b8c2ca;
  font-size:12px;
  font-weight:800;
}
@media(max-width:899px){
  body.gurka-mode #gurkaInfoStrip{top:36%; font-size:12px; padding:6px 10px; max-width:calc(100% - 28px);}
  body.gurka-mode .gurka-play-slot{width:98px; min-height:66px; font-size:12px;}
  body.gurka-mode .gurka-play-name{font-size:10px; top:-25px; max-width:124px; padding:4px 7px;}
  body.gurka-mode .gurka-play-slot .playing-card{transform:scale(.62);}
}

/* Gurka theme repair: keep the Gurka blue UI, but use the familiar Amerikaner green table. */
body.gurka-mode #table {
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 58%),
    radial-gradient(ellipse at center, #315241 0%, #1d3429 67%, #13241d 100%) !important;
  border-color: rgba(73,42,20,.95) !important;
  outline-color: rgba(185,130,55,.65) !important;
}
body.gurka-mode #table::before {
  border-color: rgba(255,243,210,.22) !important;
}

/* Series Mattis embedded game shell */
.series-mattis-shell {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  grid-template-rows: 42px minmax(0, 1fr);
  background: #120b07;
}
.series-mattis-shell.show { display: grid; }
.series-mattis-shell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #4e301c, #2b1a10);
  border-bottom: 1px solid rgba(215,170,85,0.55);
  color: #fff5dc;
}
.series-mattis-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #120b07;
}

.series-mattis-lobby-overlay {
  position: absolute;
  left: 0; right: 0; top: 42px; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
  z-index: 80;
}
.series-mattis-lobby-overlay .table-lobby-card,
.series-mattis-lobby-overlay button,
.series-mattis-lobby-overlay input,
.series-mattis-lobby-overlay label { pointer-events: auto; }
.series-seat-take-btn:disabled { opacity:.45; cursor:default; }

/* Native Series Mattis overlay placement fix */
#seriesMattisOverlay #seriesMattisNativeRoot.sm-native-root{
  grid-row:2;
  min-height:0;
  height:100%;
  overflow:auto;
  display:block;
}
#seriesMattisOverlay #seriesMattisFrame{display:none!important;}

/* Series Mattis v29 sizing correction: keep table cards readable, restore hand/card tray and compact player slots. */
#seriesMattisNativeRoot .sm-game{grid-template-rows:minmax(390px,1fr) 62px 206px!important;}
#seriesMattisNativeRoot .sm-hand{padding:18px 20px 14px!important;}
#seriesMattisNativeRoot .sm-hand .sm-card{width:112px!important;height:160px!important;}
#seriesMattisNativeRoot .sm-blind{width:112px!important;height:160px!important;}
#seriesMattisNativeRoot .sm-player{width:clamp(136px,13vw,190px)!important;min-height:76px!important;padding:24px 8px 6px!important;}
#seriesMattisNativeRoot .sm-player.has-card{min-height:168px!important;}
#seriesMattisNativeRoot .sm-seat-card{min-height:116px!important;}
#seriesMattisNativeRoot .sm-seat-card .sm-small-card{width:90px!important;height:130px!important;}
#seriesMattisNativeRoot .sm-mini-set .sm-small-card{width:90px!important;height:130px!important;margin-left:-10px!important;}
@media(max-width:899px){#seriesMattisNativeRoot .sm-game{grid-template-rows:420px auto 170px 180px 160px!important;}#seriesMattisNativeRoot .sm-hand .sm-card,#seriesMattisNativeRoot .sm-blind{width:96px!important;height:138px!important;}}

/* === Casino extra game === */
body.casino-mode #slot-0,
body.casino-mode #slot-1,
body.casino-mode #slot-2,
body.casino-mode #slot-3,
body.casino-mode #table::after { display:none !important; }
body.casino-mode #partnerCallArea,
body.casino-mode #biddingArea,
body.casino-mode #discardBar,
body.casino-mode #autoFinishWrap { display:none !important; }
#casinoTableArea {
  position:absolute;
  inset:18px;
  z-index:10;
  display:none;
  grid-template-rows:auto 1fr auto;
  gap:10px;
  pointer-events:auto;
}
body.casino-mode #casinoTableArea { display:grid; }
.casino-strip {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  border:1px solid rgba(185,130,55,.65);
  border-radius:18px;
  background:rgba(30,17,9,.82);
  padding:9px 12px;
  color:#fff3d2;
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}
.casino-board {
  border:1px dashed rgba(255,243,210,.34);
  border-radius:24px;
  background:rgba(9,24,15,.20);
  padding:14px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-content:flex-start;
  overflow:auto;
}
.casino-item {
  border:1px solid rgba(255,243,210,.30);
  border-radius:18px;
  background:rgba(20,12,6,.30);
  padding:8px;
  display:flex;
  gap:6px;
  align-items:center;
  cursor:pointer;
  min-height:116px;
}
.casino-item.selected { box-shadow:0 0 0 3px rgba(255,209,102,.85); border-color:#ffd166; }
.casino-build {
  border-style:solid;
  border-width:2px;
  border-color:rgba(215,170,85,.85);
  background:rgba(85,51,20,.34);
  position:relative;
}
.casino-build::before {
  content:"BUILD";
  position:absolute;
  top:-10px;
  left:12px;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:900;
  color:#fff3d2;
  background:#3a2313;
  border:1px solid rgba(215,170,85,.65);
  border-radius:999px;
  padding:2px 7px;
}
.casino-build-owner { outline:2px solid rgba(127,178,255,.70); }
.casino-build-opponent { outline:2px solid rgba(255,209,102,.70); }
.casino-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(185,130,55,.65);
  border-radius:18px;
  background:rgba(30,17,9,.82);
  padding:10px;
}
.casino-small { color:#d0ac72; font-size:12px; }
body.casino-mode #hand { min-height:150px !important; }
@media (max-width:899px){
  #casinoTableArea{inset:8px;}
  .casino-item{min-height:90px; transform:scale(.88); transform-origin:left top; margin-right:-18px; margin-bottom:-14px;}
  .casino-board{gap:6px; padding:8px;}
}

/* Casino update: centered table cards, play space, final-deal warning, grouped builds, score popup. */
#casinoTableArea{grid-template-rows:auto auto 1fr auto !important;}
.casino-board{justify-content:center !important; align-content:center !important; align-items:center !important;}
.casino-play-space{min-height:86px; display:flex; justify-content:center; align-items:center; border:1px dashed rgba(255,243,210,.22); border-radius:20px; background:rgba(10,22,15,.16); color:#fff3d2;}
.casino-play-card{display:flex; gap:12px; align-items:center; justify-content:center; padding:8px 14px; border:1px solid rgba(215,170,85,.65); border-radius:18px; background:rgba(30,17,9,.86); box-shadow:0 8px 18px rgba(0,0,0,.28);}
.casino-play-label{font-weight:900; color:#f8dfab;}
.casino-final-banner{font-weight:1000; letter-spacing:.05em; color:#ffe08a; text-align:center; animation:casinoPulse 1.1s infinite alternate;}
.casino-final-text{color:#ffe08a; font-weight:1000; animation:casinoPulse 1.1s infinite alternate;}
.casino-strip.casino-final{border-color:#ffe08a; box-shadow:0 0 0 3px rgba(255,224,138,.18), 0 0 24px rgba(255,224,138,.22);}
@keyframes casinoPulse{from{filter:brightness(1)}to{filter:brightness(1.45)}}
.casino-build{flex-direction:row; align-items:center; justify-content:center; flex-wrap:nowrap; padding:10px 12px 8px 12px !important; min-width:0 !important; width:auto !important; max-width:min(96%, 720px); overflow-x:auto;}
.casino-build-flat{display:flex; align-items:center; justify-content:flex-start; flex-wrap:nowrap; padding:6px 10px; border-radius:16px; background:rgba(0,0,0,.12); border:1px solid rgba(255,243,210,.16); width:max-content; max-width:100%; overflow-x:auto;}
.casino-build-flat .playing-card{transform:scale(.82); transform-origin:center center;}
.casino-build-card{flex:0 0 auto; margin-left:-34px; position:relative;}
.casino-build-card:first-child{margin-left:0;}
.casino-build-card:hover{z-index:5;}
.casino-build-plus{display:none;}
.casino-build-group{display:flex; gap:6px; align-items:center; justify-content:center; padding:5px; border-radius:14px; background:rgba(0,0,0,.12); border:1px solid rgba(255,243,210,.16);}
.casino-empty{width:100%; text-align:center;}
body.casino-mode #log{display:block !important;}
@media(max-width:899px){.casino-play-space{min-height:62px}.casino-play-card{transform:scale(.82)}}

#casinoOnlineStatus .online-pill { display:inline-block; margin:2px 3px; }

/* Casino multiplayer chat: reuse the shared chat panel in Casino mode. */
body.casino-mode #chatPanel{
  display:grid !important;
  grid-area:chat !important;
  min-height:150px !important;
}
body.casino-mode #chatTitle::after{content:" - Casino";}

/* ===== Inline style block 2 from original index.html ===== */

/* Final layout fix: no separate action row, bigger table, player score/bid attached to names. */
body.reworked-ui #scoreboardWrap,
body.reworked-ui #status{
  display:none !important;
}

@media (min-width:1181px){
  html, body{height:100% !important; overflow:hidden !important;}
  body.reworked-ui header{
    width:min(1540px, calc(100vw - 48px)) !important;
    height:42px !important;
    min-height:42px !important;
  }
  body.reworked-ui #main{
    width:min(1540px, calc(100vw - 48px)) !important;
    height:calc(100vh - 42px) !important;
    max-height:calc(100vh - 42px) !important;
    padding:10px 0 12px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(330px,420px) !important;
    grid-template-rows:minmax(0,1fr) minmax(170px,225px) !important;
    grid-template-areas:
      "table chat"
      "hand log" !important;
    gap:10px !important;
    overflow:hidden !important;
  }
  body.reworked-ui #controls{display:contents !important;}
  body.reworked-ui #table{
    grid-area:table !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    border-width:8px !important;
    border-radius:30px !important;
    overflow:hidden !important;
  }
  body.reworked-ui #table::before{inset:38px 48px 36px !important;}
  body.reworked-ui #table::after{
    width:min(350px,33vw) !important;
    height:min(180px,30vh) !important;
  }

  /* Put bidding/discard/partner controls on the table itself, centered near the player's side. */
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:table !important;
    align-self:end !important;
    justify-self:center !important;
    width:auto !important;
    max-width:min(760px, calc(100% - 260px)) !important;
    min-height:0 !important;
    height:auto !important;
    max-height:86px !important;
    margin:0 0 18px 0 !important;
    padding:8px 10px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    overflow:auto !important;
    z-index:20 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,236,190,.08) !important;
  }
  body.reworked-ui #biddingArea:empty,
  body.reworked-ui #partnerCallArea:empty,
  body.reworked-ui #discardBar:empty,
  body.reworked-ui #autoFinishWrap:not(.show){display:none !important;}
  body.reworked-ui .bid-btn{
    padding:8px 12px !important;
    min-height:36px !important;
    border-radius:10px !important;
  }

  body.reworked-ui #hand{
    grid-area:hand !important;
    height:100% !important;
    min-height:0 !important;
    padding-top:16px !important;
    padding-bottom:38px !important;
  }
  body.reworked-ui #chatPanel{grid-area:chat !important; min-height:0 !important; height:100% !important;}
  body.reworked-ui #log{grid-area:log !important; height:100% !important; min-height:0 !important;}
  body.reworked-ui #chatMessages{min-height:0 !important; max-height:none !important;}

  body.reworked-ui #slot-2{top:78px !important;}
  body.reworked-ui #slot-0{bottom:34px !important;}
  body.reworked-ui #slot-1{left:28px !important; top:53% !important;}
  body.reworked-ui #slot-3{right:28px !important; top:53% !important;}
}

/* Clean player labels: one label only, with score + bid/pass included. */
body.reworked-ui .card-slot{
  overflow:visible !important;
  font-size:0 !important;
}
body.reworked-ui .card-slot::before{display:none !important; content:none !important;}
body.reworked-ui .card-slot::after{
  content:attr(data-player-info) !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  min-width:max-content !important;
  max-width:230px !important;
  padding:7px 11px !important;
  border-radius:999px !important;
  border:1px solid rgba(185,130,55,.76) !important;
  background:linear-gradient(180deg, rgba(41,27,14,.96), rgba(13,24,16,.92)) !important;
  color:#fff4d4 !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.78) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,243,210,.06) !important;
  z-index:7 !important;
  pointer-events:none !important;
  white-space:nowrap !important;
}
body.reworked-ui .card-slot:has(.playing-card)::after{
  top:-22px !important;
  transform:translateX(-50%) !important;
}
body.reworked-ui #slot-0:has(.playing-card)::after{
  top:auto !important;
  bottom:-26px !important;
}
body.reworked-ui #slot-1::after{left:0 !important; transform:translateY(-50%) !important;}
body.reworked-ui #slot-3::after{left:auto !important; right:0 !important; transform:translateY(-50%) !important;}
body.reworked-ui #slot-1:has(.playing-card)::after,
body.reworked-ui #slot-3:has(.playing-card)::after{top:-24px !important; transform:none !important;}

@media (min-width:900px) and (max-width:1180px){
  body.reworked-ui #scoreboardWrap,
  body.reworked-ui #status{display:none !important;}
  body.reworked-ui #main{
    grid-template-rows:minmax(430px, 62vh) auto auto auto !important;
    grid-template-areas:
      "table"
      "hand"
      "chat"
      "log" !important;
  }
  body.reworked-ui #controls{display:contents !important;}
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:table !important;
    align-self:end !important;
    justify-self:center !important;
    width:auto !important;
    max-width:calc(100% - 42px) !important;
    min-height:0 !important;
    height:auto !important;
    margin-bottom:14px !important;
    padding:8px 10px !important;
    justify-content:center !important;
    z-index:20 !important;
  }
  body.reworked-ui #biddingArea:empty,
  body.reworked-ui #partnerCallArea:empty,
  body.reworked-ui #discardBar:empty,
  body.reworked-ui #autoFinishWrap:not(.show){display:none !important;}
  body.reworked-ui #hand{grid-area:hand !important;}
  body.reworked-ui #chatPanel{grid-area:chat !important;}
  body.reworked-ui #log{grid-area:log !important;}
}

@media (max-width:899px){
  body.reworked-ui #scoreboardWrap,
  body.reworked-ui #status{display:none !important;}
  body.reworked-ui .card-slot::before{display:none !important; content:none !important;}
  body.reworked-ui .card-slot::after{
    content:attr(data-player-info) !important;
    font-size:10px !important;
    padding:5px 7px !important;
  }
}

/* ===== Inline style block 3 from original index.html ===== */

/* Align the top player's plaque with the other seat plaques. */
body.reworked-ui #slot-2::after{
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%, -50%) !important;
}
body.reworked-ui #slot-2:has(.playing-card)::after{
  top:-24px !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
}
@media (min-width:1181px){
  body.reworked-ui #slot-2{
    top:76px !important;
  }
}

/* ===== Inline style block 4 from original index.html ===== */

/* Vertical table balance: Top seat -> trick -> actions -> You seat. */
@media (min-width:1181px){
  body.reworked-ui #main{
    grid-template-rows:minmax(0,1fr) minmax(170px,225px) !important;
    grid-template-areas:
      "table chat"
      "hand log" !important;
  }
  body.reworked-ui #table{
    min-height:0 !important;
  }
  body.reworked-ui #table::before{
    inset:36px 48px 34px !important;
  }
  body.reworked-ui #table::after{
    width:min(360px,34vw) !important;
    height:min(170px,28vh) !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%, -50%) !important;
  }

  /* Mirror the top and bottom seats against the felt edges. */
  body.reworked-ui #slot-2{
    top:42px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }
  body.reworked-ui #slot-0{
    bottom:44px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }
  body.reworked-ui #slot-1{left:28px !important; top:53% !important;}
  body.reworked-ui #slot-3{right:28px !important; top:53% !important;}

  /* Put active buttons under the trick area, not at the table bottom. */
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:table !important;
    align-self:center !important;
    justify-self:center !important;
    transform:translateY(min(132px, 21vh)) !important;
    margin:0 !important;
    width:auto !important;
    max-width:min(760px, calc(100% - 310px)) !important;
    min-height:0 !important;
    height:auto !important;
    max-height:92px !important;
    padding:8px 10px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    overflow:auto !important;
    z-index:25 !important;
  }

  body.reworked-ui #biddingArea:empty,
  body.reworked-ui #partnerCallArea:empty,
  body.reworked-ui #discardBar:empty,
  body.reworked-ui #autoFinishWrap:not(.show){display:none !important;}
}

@media (min-width:900px) and (max-width:1180px){
  body.reworked-ui #main{
    grid-template-rows:minmax(440px, 64vh) auto auto auto !important;
    grid-template-areas:
      "table"
      "hand"
      "chat"
      "log" !important;
  }
  body.reworked-ui #slot-2{top:42px !important;}
  body.reworked-ui #slot-0{bottom:44px !important;}
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:table !important;
    align-self:center !important;
    justify-self:center !important;
    transform:translateY(125px) !important;
    margin:0 !important;
    max-width:calc(100% - 80px) !important;
    z-index:25 !important;
  }
}

/* ===== Inline style block 5 from original index.html ===== */

/* Requested: use the middle of the felt for all active action controls,
   and remove the decorative TRICK label/oval from the center. */
body.reworked-ui #table::after{
  display:none !important;
  content:none !important;
}

@media (min-width:900px){
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:table !important;
    align-self:center !important;
    justify-self:center !important;
    transform:none !important;
    margin:0 !important;
    width:auto !important;
    max-width:min(760px, calc(100% - 300px)) !important;
    min-height:0 !important;
    height:auto !important;
    max-height:110px !important;
    padding:9px 12px !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    overflow:auto !important;
    z-index:30 !important;
  }
  body.reworked-ui #biddingArea:empty,
  body.reworked-ui #partnerCallArea:empty,
  body.reworked-ui #discardBar:empty,
  body.reworked-ui #autoFinishWrap:not(.show){
    display:none !important;
  }
}

@media (min-width:1181px){
  body.reworked-ui #slot-2{top:40px !important;}
  body.reworked-ui #slot-0{bottom:42px !important;}
}

@media (max-width:899px){
  body.reworked-ui #table::after{
    display:none !important;
    content:none !important;
  }
}

/* ===== Inline style block 6 from original index.html ===== */

#roundReviewOverlay { z-index: 90; }
#roundReviewOverlay .modal { max-width: 1180px; width: min(96vw, 1180px); max-height: 88vh; overflow:auto; }
.round-review-grid { display:grid; grid-template-columns: 1fr; gap:14px; margin-top:14px; }
.round-review-card { border:1px solid rgba(224,182,111,0.35); border-radius:14px; padding:12px; background:rgba(40,20,8,0.72); }
.round-review-card h3 { margin:0 0 8px 0; font-size:16px; color:#fff3d2; }
.round-review-cards { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding:8px 4px 12px; scroll-behavior:smooth; }
.round-review-cards .playing-card { flex:0 0 auto; transform:none !important; }
.round-review-meta { display:grid; gap:6px; margin-top:10px; color:#d7e5f5; }
.round-review-discard { margin-top:8px; color:#d6c2a0; font-size:13px; }
.round-review-discard .round-review-cards { padding-top:6px; }
#centerContinuePrompt #showRoundReviewBtn, #centerContinuePrompt #centerContinueBtn {
  width: min(420px, 100%);
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  margin-top: 10px;
  box-sizing: border-box;
}
#centerContinuePrompt #showRoundReviewBtn {
  border-radius: 16px;
  background: linear-gradient(#8e5b20, #70410f);
  color: #fff7d9;
  border: 1px solid #e0b66f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
#centerContinuePrompt { gap: 10px; }
#runBotSimulatorBtn.dev-only, #gurkaRunBotSimulatorBtn.dev-only, .gurka-dev-panel.dev-only { display:none; }
body.dev-tools-unlocked #runBotSimulatorBtn.dev-only,
body.dev-tools-unlocked #gurkaRunBotSimulatorBtn.dev-only { display:block; }
body.dev-tools-unlocked .gurka-dev-panel.dev-only { display:grid; }
.dev-status { color:#d7e5f5; font-size:13px; margin-top:6px; }

/* ===== Inline style block 7 from original index.html ===== */

body.gurka-mode,body.gurka-theme,body[data-game="gurka"]{--felt:#234b38!important;--felt-dark:#163526!important;--wood:#2a170d!important;--wood-2:#3a2313!important;--brass:#b98237!important;--brass-soft:rgba(185,130,55,.55)!important;--cream:#fff3d2!important;color:#fff3d2!important;background:radial-gradient(circle at 50% 32%, rgba(72,126,87,.34), transparent 34%),linear-gradient(180deg,#170e09 0%,#251408 42%,#120b07 100%)!important;}
body.gurka-mode header,body.gurka-theme header,body[data-game="gurka"] header,body.gurka-mode .modal,body.gurka-theme .modal,body[data-game="gurka"] .modal,body.gurka-mode #hand,body.gurka-theme #hand,body[data-game="gurka"] #hand,body.gurka-mode #log,body.gurka-theme #log,body[data-game="gurka"] #log,body.gurka-mode #chatPanel,body.gurka-theme #chatPanel,body[data-game="gurka"] #chatPanel,body.gurka-mode .panel,body.gurka-theme .panel,body[data-game="gurka"] .panel,body.gurka-mode .table-lobby-card,body.gurka-theme .table-lobby-card,body[data-game="gurka"] .table-lobby-card,body.gurka-mode #centerContinuePrompt,body.gurka-theme #centerContinuePrompt,body[data-game="gurka"] #centerContinuePrompt{background:linear-gradient(180deg,rgba(58,33,15,.96),rgba(31,17,8,.96))!important;border-color:rgba(185,130,55,.62)!important;color:#fff3d2!important;}
body.gurka-mode .top-btn,body.gurka-theme .top-btn,body[data-game="gurka"] .top-btn,body.gurka-mode .bid-btn,body.gurka-theme .bid-btn,body[data-game="gurka"] .bid-btn,body.gurka-mode .menu-btn,body.gurka-theme .menu-btn,body[data-game="gurka"] .menu-btn,body.gurka-mode #chatSendBtn,body.gurka-theme #chatSendBtn,body[data-game="gurka"] #chatSendBtn,body.gurka-mode #centerContinueBtn,body.gurka-theme #centerContinueBtn,body[data-game="gurka"] #centerContinueBtn,body.gurka-mode .seat-card button,body.gurka-theme .seat-card button,body[data-game="gurka"] .seat-card button{border-color:rgba(255,213,146,.72)!important;background:linear-gradient(180deg,#8a5a24,#5b3515)!important;color:#fff8e8!important;}
body.gurka-mode #table,body.gurka-theme #table,body[data-game="gurka"] #table{background:radial-gradient(ellipse at center,rgba(82,139,95,.62),rgba(31,80,56,.96) 46%,rgba(13,45,30,.98))!important;border-color:rgba(73,42,20,.95)!important;outline-color:rgba(185,130,55,.65)!important;}
body.gurka-mode #gurkaInfoStrip,body.gurka-theme #gurkaInfoStrip,body[data-game="gurka"] #gurkaInfoStrip,body.gurka-mode .gurka-play-name,body.gurka-theme .gurka-play-name,body[data-game="gurka"] .gurka-play-name{border-color:rgba(185,130,55,.72)!important;background:linear-gradient(180deg,rgba(58,33,15,.94),rgba(21,11,5,.94))!important;color:#fff3d2!important;}
body.gurka-mode .gurka-play-slot,body.gurka-theme .gurka-play-slot,body[data-game="gurka"] .gurka-play-slot{border-color:rgba(255,243,210,.46)!important;background:rgba(11,25,17,.32)!important;color:#fff3d2!important;z-index:12!important;overflow:visible!important;}
body.gurka-mode .gurka-play-slot .playing-card,body.gurka-theme .gurka-play-slot .playing-card,body[data-game="gurka"] .gurka-play-slot .playing-card{display:flex!important;visibility:visible!important;opacity:1!important;width:96px!important;height:138px!important;transform:none!important;z-index:13!important;}
@media(max-width:899px){body.gurka-mode .gurka-play-slot .playing-card,body.gurka-theme .gurka-play-slot .playing-card,body[data-game="gurka"] .gurka-play-slot .playing-card{width:64px!important;height:92px!important;}}
#gurkaInstructionsOverlay .rules-note,#seriesMattisInstructionsOverlay .rules-note{margin:0 0 12px;}#gurkaInstructionsOverlay .rules-content details,#seriesMattisInstructionsOverlay .rules-content details{margin-bottom:10px;}

/* Requested Gurka cleanup: Gurka has no trump/history overlay. Keep the on-screen log box. */
body.gurka-mode #trumpInfo,
body.gurka-theme #trumpInfo,
body[data-game="gurka"] #trumpInfo,
body.gurka-mode #historyBtn,
body.gurka-theme #historyBtn,
body[data-game="gurka"] #historyBtn { display:none!important; }

/* ===== Inline style block 8 from original index.html ===== */

/* Keep menu independent from the live table and above all in-table controls. */
#menuOverlay.show{
  z-index:10000 !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(70,42,19,.96), rgba(21,10,4,.98) 58%, rgba(8,5,3,.99) 100%) !important;
  backdrop-filter:none !important;
}
body.menu-open #biddingArea,
body.menu-open #partnerCallArea,
body.menu-open #discardBar,
body.menu-open #autoFinishWrap{
  display:none !important;
}

/* No permanent trick text/circle in the middle. The center is now the shared action/control zone. */
body.reworked-ui #table::after{display:none !important; content:none !important;}
body.reworked-ui #table::before{opacity:.55 !important;}

@media (min-width:900px){
  body.reworked-ui #biddingArea,
  body.reworked-ui #partnerCallArea,
  body.reworked-ui #discardBar,
  body.reworked-ui #autoFinishWrap{
    grid-area:table !important;
    align-self:center !important;
    justify-self:center !important;
    margin:0 !important;
    transform:none !important;
    max-width:min(760px, calc(100% - 160px)) !important;
    z-index:30 !important;
  }
}

/* ===== Inline style block 9 from original index.html ===== */

  /* Bigger, easier-to-read physical cards. */
  body {
    --card-width: 76px;
    --card-height: 110px;
  }

  @media (min-width: 900px) {
    body {
      --card-width: 102px;
      --card-height: 148px;
    }
  }

  /* Keep the larger cards usable inside the hand area. */
  body.reworked-ui #hand {
    min-height: clamp(188px, 27vh, 230px);
    padding-top: 18px;
    padding-bottom: 38px;
  }

  body.reworked-ui #hand .card-btn {
    margin-left: calc(-14px * var(--card-size-multiplier));
    margin-right: 0;
  }

  body.reworked-ui #hand .card-btn:first-child {
    margin-left: 0;
  }

  /* Larger corner indices and pips. */
  .card-corner {
    font-size: calc(14px * var(--card-size-multiplier));
    font-weight: 900;
  }

  .card-rank {
    font-size: calc(15px * var(--card-size-multiplier));
    font-weight: 900;
  }

  .card-suit {
    font-size: calc(16px * var(--card-size-multiplier));
    font-weight: 900;
    line-height: 0.9;
  }

  .card-ace-center {
    font-size: calc(48px * var(--card-size-multiplier));
  }

  .face-suit {
    font-size: calc(28px * var(--card-size-multiplier));
    font-weight: 900;
  }

  .face-mark {
    font-size: calc(23px * var(--card-size-multiplier));
    font-weight: 900;
  }

  .face-title {
    font-size: calc(8px * var(--card-size-multiplier));
  }

  .face-frame::before,
  .face-frame::after {
    font-size: calc(13px * var(--card-size-multiplier));
    opacity: 0.62;
  }

  .card-pip {
    font-weight: 900;
    text-shadow: 0 0 0 currentColor;
  }

  /* More distinct suits: hearts red, diamonds warmer orange-red, spades black, clubs clear blue. */
  .suit-H { color: #b91424 !important; }
  .suit-D { color: #d15a16 !important; }
  .suit-S { color: #0b0b0b !important; }
  .suit-C { color: #064d99 !important; }

  .suit-H .card-suit,
  .suit-H .card-pip,
  .suit-H .card-ace-center,
  .suit-H .face-suit { color: #b91424 !important; }

  .suit-D .card-suit,
  .suit-D .card-pip,
  .suit-D .card-ace-center,
  .suit-D .face-suit { color: #d15a16 !important; }

  .suit-S .card-suit,
  .suit-S .card-pip,
  .suit-S .card-ace-center,
  .suit-S .face-suit { color: #0b0b0b !important; }

  .suit-C .card-suit,
  .suit-C .card-pip,
  .suit-C .card-ace-center,
  .suit-C .face-suit { color: #064d99 !important; }

  /* Stronger card edge so larger cards still look sharp. */
  .playing-card {
    border-width: 2px;
  }

/* ===== Inline style block 10 from original index.html ===== */

  /* The menu was lifted above everything, so sub-overlays opened behind it.
     Put settings/online/rules/history above the menu when they are opened. */
  #settingsOverlay.show,
  #onlineOverlay.show,
  #rulesOverlay.show,
  #historyOverlay.show,
  #handEndOverlay.show,
  #victoryOverlay.show{
    z-index:10080 !important;
    pointer-events:auto !important;
  }
  #settingsOverlay.show .modal,
  #onlineOverlay.show .modal,
  #rulesOverlay.show .modal,
  #historyOverlay.show .modal,
  #handEndOverlay.show .modal,
  #victoryOverlay.show .modal{
    pointer-events:auto !important;
  }

  /* When the menu is open, the in-game action controls must never float over it. */
  body.menu-open #biddingArea,
  body.menu-open #partnerCallArea,
  body.menu-open #discardBar,
  body.menu-open #autoFinishWrap{
    display:none !important;
    pointer-events:none !important;
  }

  #menuOverlay.show{
    pointer-events:auto !important;
  }
  #menuOverlay.show .modal,
  #menuOverlay.show button{
    pointer-events:auto !important;
  }

/* History button restored in the top bar; old menu-only history buttons stay hidden if absent. */
#viewHistoryFromMenuBtn, #handEndHistoryBtn, #victoryHistoryBtn { display: none !important; }

/* === Gurka blue/steel theme fix ===
   Keep the green felt table, but replace the brown/brass Gurka UI panels with blue/steel. */
body.gurka-mode,
body.gurka-theme,
body[data-game="gurka"] {
  --gurka-blue-0: #07111c;
  --gurka-blue-1: #0d1c2c;
  --gurka-blue-2: #132b42;
  --gurka-blue-3: #1d4566;
  --gurka-blue-4: #2f6f9f;
  --gurka-blue-5: #7fb2ff;
  --gurka-cream: #eef7ff;
  --gurka-muted: #b8d3ea;
}

/* Also apply when Gurka is active even if only the reworked UI class is present. */
body.gurka-mode header,
body.gurka-theme header,
body[data-game="gurka"] header {
  background: linear-gradient(180deg, #142c43, #07111c) !important;
  border-bottom-color: rgba(127,178,255,.55) !important;
}

body.gurka-mode #main,
body.gurka-theme #main,
body[data-game="gurka"] #main {
  background: transparent !important;
}

/* Keep table center green like Amerikaner, but change the wooden rim to blue/steel. */
body.gurka-mode #table,
body.gurka-theme #table,
body[data-game="gurka"] #table {
  border-color: rgba(18,43,64,.98) !important;
  outline-color: rgba(127,178,255,.55) !important;
  box-shadow: inset 0 0 70px rgba(0,0,0,.45), 0 18px 38px rgba(0,0,0,.38), 0 0 0 1px rgba(127,178,255,.22) !important;
}

body.gurka-mode #table::before,
body.gurka-theme #table::before,
body[data-game="gurka"] #table::before {
  border-color: rgba(205,231,255,.28) !important;
}

/* Bottom hand area, log, chat, panels: blue instead of brown. */
body.gurka-mode #hand,
body.gurka-theme #hand,
body[data-game="gurka"] #hand,
body.gurka-mode #log,
body.gurka-theme #log,
body[data-game="gurka"] #log,
body.gurka-mode #chatPanel,
body.gurka-theme #chatPanel,
body[data-game="gurka"] #chatPanel,
body.gurka-mode #scoreboardWrap,
body.gurka-theme #scoreboardWrap,
body[data-game="gurka"] #scoreboardWrap,
body.gurka-mode #status,
body.gurka-theme #status,
body[data-game="gurka"] #status,
body.gurka-mode .panel,
body.gurka-theme .panel,
body[data-game="gurka"] .panel,
body.gurka-mode .modal,
body.gurka-theme .modal,
body[data-game="gurka"] .modal,
body.gurka-mode .table-lobby-card,
body.gurka-theme .table-lobby-card,
body[data-game="gurka"] .table-lobby-card {
  background: linear-gradient(180deg, rgba(21,48,73,.92), rgba(7,17,28,.94)) !important;
  border-color: rgba(127,178,255,.55) !important;
  color: #eef7ff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.30), inset 0 0 0 1px rgba(210,235,255,.05) !important;
}

body.gurka-mode #chatMessages,
body.gurka-theme #chatMessages,
body[data-game="gurka"] #chatMessages,
body.gurka-mode #chatInput,
body.gurka-theme #chatInput,
body[data-game="gurka"] #chatInput,
body.gurka-mode .online-row input,
body.gurka-theme .online-row input,
body[data-game="gurka"] .online-row input,
body.gurka-mode .online-row select,
body.gurka-theme .online-row select,
body[data-game="gurka"] .online-row select,
body.gurka-mode .online-row textarea,
body.gurka-theme .online-row textarea,
body[data-game="gurka"] .online-row textarea,
body.gurka-mode .setting-row input[type="text"],
body.gurka-theme .setting-row input[type="text"],
body[data-game="gurka"] .setting-row input[type="text"],
body.gurka-mode .setting-row input[type="number"],
body.gurka-theme .setting-row input[type="number"],
body[data-game="gurka"] .setting-row input[type="number"] {
  background: rgba(4,12,20,.88) !important;
  border-color: rgba(127,178,255,.42) !important;
  color: #eef7ff !important;
}

body.gurka-mode .top-btn,
body.gurka-theme .top-btn,
body[data-game="gurka"] .top-btn,
body.gurka-mode .bid-btn,
body.gurka-theme .bid-btn,
body[data-game="gurka"] .bid-btn,
body.gurka-mode .menu-btn,
body.gurka-theme .menu-btn,
body[data-game="gurka"] .menu-btn,
body.gurka-mode #chatSendBtn,
body.gurka-theme #chatSendBtn,
body[data-game="gurka"] #chatSendBtn,
body.gurka-mode #centerContinueBtn,
body.gurka-theme #centerContinueBtn,
body[data-game="gurka"] #centerContinueBtn,
body.gurka-mode .seat-card button,
body.gurka-theme .seat-card button,
body[data-game="gurka"] .seat-card button,
body.gurka-mode .table-lobby-card button,
body.gurka-theme .table-lobby-card button,
body[data-game="gurka"] .table-lobby-card button {
  border-color: rgba(165,211,255,.72) !important;
  background: linear-gradient(180deg, #376f9e, #163754) !important;
  color: #f4fbff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 10px rgba(0,0,0,.24) !important;
}

body.gurka-mode .top-btn:hover,
body.gurka-theme .top-btn:hover,
body[data-game="gurka"] .top-btn:hover,
body.gurka-mode .bid-btn:hover,
body.gurka-theme .bid-btn:hover,
body[data-game="gurka"] .bid-btn:hover,
body.gurka-mode .menu-btn:hover,
body.gurka-theme .menu-btn:hover,
body[data-game="gurka"] .menu-btn:hover,
body.gurka-mode #chatSendBtn:hover,
body.gurka-theme #chatSendBtn:hover,
body[data-game="gurka"] #chatSendBtn:hover {
  filter: brightness(1.1) !important;
}

body.gurka-mode #chatTitle,
body.gurka-theme #chatTitle,
body[data-game="gurka"] #chatTitle,
body.gurka-mode #scoreboardTitle,
body.gurka-theme #scoreboardTitle,
body[data-game="gurka"] #scoreboardTitle,
body.gurka-mode .score-name,
body.gurka-theme .score-name,
body[data-game="gurka"] .score-name,
body.gurka-mode .score-extra,
body.gurka-theme .score-extra,
body[data-game="gurka"] .score-extra,
body.gurka-mode .muted,
body.gurka-theme .muted,
body[data-game="gurka"] .muted,
body.gurka-mode .online-row label,
body.gurka-theme .online-row label,
body[data-game="gurka"] .online-row label,
body.gurka-mode .setting-row label,
body.gurka-theme .setting-row label,
body[data-game="gurka"] .setting-row label {
  color: #b8d3ea !important;
}

body.gurka-mode .score-card,
body.gurka-theme .score-card,
body[data-game="gurka"] .score-card,
body.gurka-mode .history-trick,
body.gurka-theme .history-trick,
body[data-game="gurka"] .history-trick,
body.gurka-mode .rules-content details,
body.gurka-theme .rules-content details,
body[data-game="gurka"] .rules-content details,
body.gurka-mode .online-box,
body.gurka-theme .online-box,
body[data-game="gurka"] .online-box,
body.gurka-mode .seat-card,
body.gurka-theme .seat-card,
body[data-game="gurka"] .seat-card,
body.gurka-mode .victory-ranks,
body.gurka-theme .victory-ranks,
body[data-game="gurka"] .victory-ranks,
body.gurka-mode .table-lobby-waiting,
body.gurka-theme .table-lobby-waiting,
body[data-game="gurka"] .table-lobby-waiting {
  background: rgba(127,178,255,.07) !important;
  border-color: rgba(127,178,255,.30) !important;
}

body.gurka-mode .chat-name,
body.gurka-theme .chat-name,
body[data-game="gurka"] .chat-name {
  color: #7fb2ff !important;
}

body.gurka-mode #hand,
body.gurka-theme #hand,
body[data-game="gurka"] #hand,
body.gurka-mode #log,
body.gurka-theme #log,
body[data-game="gurka"] #log,
body.gurka-mode #chatMessages,
body.gurka-theme #chatMessages,
body[data-game="gurka"] #chatMessages {
  scrollbar-color: #7fb2ff #07111c !important;
}
body.gurka-mode #hand::-webkit-scrollbar-track,
body.gurka-theme #hand::-webkit-scrollbar-track,
body[data-game="gurka"] #hand::-webkit-scrollbar-track,
body.gurka-mode #log::-webkit-scrollbar-track,
body.gurka-theme #log::-webkit-scrollbar-track,
body[data-game="gurka"] #log::-webkit-scrollbar-track,
body.gurka-mode #chatMessages::-webkit-scrollbar-track,
body.gurka-theme #chatMessages::-webkit-scrollbar-track,
body[data-game="gurka"] #chatMessages::-webkit-scrollbar-track {
  background: #07111c !important;
  border-color: rgba(127,178,255,.35) !important;
}
body.gurka-mode #hand::-webkit-scrollbar-thumb,
body.gurka-theme #hand::-webkit-scrollbar-thumb,
body[data-game="gurka"] #hand::-webkit-scrollbar-thumb,
body.gurka-mode #log::-webkit-scrollbar-thumb,
body.gurka-theme #log::-webkit-scrollbar-thumb,
body[data-game="gurka"] #log::-webkit-scrollbar-thumb,
body.gurka-mode #chatMessages::-webkit-scrollbar-thumb,
body.gurka-theme #chatMessages::-webkit-scrollbar-thumb,
body[data-game="gurka"] #chatMessages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #376f9e, #7fb2ff) !important;
  border-color: #07111c !important;
}
body.gurka-mode #hand::-webkit-scrollbar-thumb,
body.gurka-theme #hand::-webkit-scrollbar-thumb,
body[data-game="gurka"] #hand::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #376f9e, #7fb2ff) !important;
}

/* ===== Inline style block 11 from original index.html ===== */

/* Final Gurka cleanup: all Gurka menus should match the shared Americaner wood/felt/brass theme. */
body.gurka-mode,
body.gurka-theme,
body[data-game="gurka"]{
  --felt:#234b38 !important;
  --felt-dark:#163526 !important;
  --wood:#2a170d !important;
  --wood-2:#3a2313 !important;
  --brass:#b98237 !important;
  --brass-soft:rgba(185,130,55,.55) !important;
  --cream:#fff3d2 !important;
  --gurka-blue-0:#2a170d !important;
  --gurka-blue-1:#3a2313 !important;
  --gurka-blue-2:#4a2b15 !important;
  --gurka-blue-3:#6b431d !important;
  --gurka-blue-4:#8a5a24 !important;
  --gurka-blue-5:#d7aa55 !important;
  --gurka-cream:#fff3d2 !important;
  --gurka-muted:#e9dcc4 !important;
  color:#fff3d2 !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(72,126,87,.34), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0/28px 28px,
    linear-gradient(180deg,#170e09 0%,#251408 42%,#120b07 100%) !important;
}
body.gurka-mode header,
body.gurka-theme header,
body[data-game="gurka"] header,
body.gurka-mode .modal,
body.gurka-theme .modal,
body[data-game="gurka"] .modal,
body.gurka-mode #gurkaMenuOverlay .modal,
body.gurka-mode #gurkaSetupOverlay .modal,
body.gurka-mode #gurkaOnlineOverlay .modal,
body.gurka-mode #gurkaInstructionsOverlay .modal,
body.gurka-mode #hand,
body.gurka-theme #hand,
body[data-game="gurka"] #hand,
body.gurka-mode #log,
body.gurka-theme #log,
body[data-game="gurka"] #log,
body.gurka-mode #chatPanel,
body.gurka-theme #chatPanel,
body[data-game="gurka"] #chatPanel,
body.gurka-mode #scoreboardWrap,
body.gurka-theme #scoreboardWrap,
body[data-game="gurka"] #scoreboardWrap,
body.gurka-mode #status,
body.gurka-theme #status,
body[data-game="gurka"] #status,
body.gurka-mode .panel,
body.gurka-theme .panel,
body[data-game="gurka"] .panel,
body.gurka-mode .table-lobby-card,
body.gurka-theme .table-lobby-card,
body[data-game="gurka"] .table-lobby-card,
body.gurka-mode #centerContinuePrompt,
body.gurka-theme #centerContinuePrompt,
body[data-game="gurka"] #centerContinuePrompt{
  background:linear-gradient(180deg,rgba(58,33,15,.96),rgba(31,17,8,.96)) !important;
  border-color:rgba(185,130,55,.62) !important;
  color:#fff3d2 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,243,210,.05) !important;
}
body.gurka-mode #main,
body.gurka-theme #main,
body[data-game="gurka"] #main{background:transparent !important;}
body.gurka-mode .top-btn,
body.gurka-theme .top-btn,
body[data-game="gurka"] .top-btn,
body.gurka-mode .bid-btn,
body.gurka-theme .bid-btn,
body[data-game="gurka"] .bid-btn,
body.gurka-mode .menu-btn,
body.gurka-theme .menu-btn,
body[data-game="gurka"] .menu-btn,
body.gurka-mode #chatSendBtn,
body.gurka-theme #chatSendBtn,
body[data-game="gurka"] #chatSendBtn,
body.gurka-mode #centerContinueBtn,
body.gurka-theme #centerContinueBtn,
body[data-game="gurka"] #centerContinueBtn,
body.gurka-mode .seat-card button,
body.gurka-theme .seat-card button,
body[data-game="gurka"] .seat-card button,
body.gurka-mode .table-lobby-card button,
body.gurka-theme .table-lobby-card button,
body[data-game="gurka"] .table-lobby-card button{
  border-color:rgba(255,213,146,.72) !important;
  background:linear-gradient(180deg,#8a5a24,#5b3515) !important;
  color:#fff8e8 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.55) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 10px rgba(0,0,0,.24) !important;
}
body.gurka-mode #chatMessages,
body.gurka-theme #chatMessages,
body[data-game="gurka"] #chatMessages,
body.gurka-mode #chatInput,
body.gurka-theme #chatInput,
body[data-game="gurka"] #chatInput,
body.gurka-mode .online-row input,
body.gurka-theme .online-row input,
body[data-game="gurka"] .online-row input,
body.gurka-mode .online-row select,
body.gurka-theme .online-row select,
body[data-game="gurka"] .online-row select,
body.gurka-mode .online-row textarea,
body.gurka-theme .online-row textarea,
body[data-game="gurka"] .online-row textarea,
body.gurka-mode .setting-row input[type="text"],
body.gurka-theme .setting-row input[type="text"],
body[data-game="gurka"] .setting-row input[type="text"],
body.gurka-mode .setting-row input[type="number"],
body.gurka-theme .setting-row input[type="number"],
body[data-game="gurka"] .setting-row input[type="number"]{
  background:rgba(14,8,4,.76) !important;
  border-color:rgba(185,130,55,.45) !important;
  color:#fff3d2 !important;
}
body.gurka-mode #chatTitle,
body.gurka-theme #chatTitle,
body[data-game="gurka"] #chatTitle,
body.gurka-mode #scoreboardTitle,
body.gurka-theme #scoreboardTitle,
body[data-game="gurka"] #scoreboardTitle,
body.gurka-mode .score-name,
body.gurka-theme .score-name,
body[data-game="gurka"] .score-name,
body.gurka-mode .score-extra,
body.gurka-theme .score-extra,
body[data-game="gurka"] .score-extra,
body.gurka-mode .muted,
body.gurka-theme .muted,
body[data-game="gurka"] .muted,
body.gurka-mode .online-row label,
body.gurka-theme .online-row label,
body[data-game="gurka"] .online-row label,
body.gurka-mode .setting-row label,
body.gurka-theme .setting-row label,
body[data-game="gurka"] .setting-row label{
  color:#e9dcc4 !important;
}
body.gurka-mode .score-card,
body.gurka-theme .score-card,
body[data-game="gurka"] .score-card,
body.gurka-mode .history-trick,
body.gurka-theme .history-trick,
body[data-game="gurka"] .history-trick,
body.gurka-mode .rules-content details,
body.gurka-theme .rules-content details,
body[data-game="gurka"] .rules-content details,
body.gurka-mode .online-box,
body.gurka-theme .online-box,
body[data-game="gurka"] .online-box,
body.gurka-mode .seat-card,
body.gurka-theme .seat-card,
body[data-game="gurka"] .seat-card,
body.gurka-mode .victory-ranks,
body.gurka-theme .victory-ranks,
body[data-game="gurka"] .victory-ranks,
body.gurka-mode .table-lobby-waiting,
body.gurka-theme .table-lobby-waiting,
body[data-game="gurka"] .table-lobby-waiting{
  background:rgba(255,243,210,.055) !important;
  border-color:rgba(185,130,55,.35) !important;
}
body.gurka-mode .chat-name,
body.gurka-theme .chat-name,
body[data-game="gurka"] .chat-name{color:#f0c977 !important;}
body.gurka-mode #table,
body.gurka-theme #table,
body[data-game="gurka"] #table{
  background:radial-gradient(ellipse at center,rgba(82,139,95,.62),rgba(31,80,56,.96) 46%,rgba(13,45,30,.98)) !important;
  border-color:rgba(73,42,20,.95) !important;
  outline-color:rgba(185,130,55,.65) !important;
  box-shadow:inset 0 0 70px rgba(0,0,0,.45),0 18px 38px rgba(0,0,0,.38) !important;
}
body.gurka-mode #table::before,
body.gurka-theme #table::before,
body[data-game="gurka"] #table::before{border-color:rgba(255,243,210,.28) !important;}
body.gurka-mode #gurkaInfoStrip,
body.gurka-theme #gurkaInfoStrip,
body[data-game="gurka"] #gurkaInfoStrip,
body.gurka-mode .gurka-play-name,
body.gurka-theme .gurka-play-name,
body[data-game="gurka"] .gurka-play-name{
  border-color:rgba(185,130,55,.72) !important;
  background:linear-gradient(180deg,rgba(58,33,15,.94),rgba(21,11,5,.94)) !important;
  color:#fff3d2 !important;
}
body.gurka-mode .gurka-play-slot,
body.gurka-theme .gurka-play-slot,
body[data-game="gurka"] .gurka-play-slot{
  border-color:rgba(255,243,210,.46) !important;
  background:rgba(11,25,17,.32) !important;
  color:#fff3d2 !important;
  z-index:12 !important;
  overflow:visible !important;
}
body.gurka-mode .gurka-play-slot.gurka-has-play,
body.gurka-theme .gurka-play-slot.gurka-has-play,
body[data-game="gurka"] .gurka-play-slot.gurka-has-play{
  background:rgba(11,25,17,.50) !important;
  border-style:solid !important;
  min-height:clamp(108px,16vh,172px) !important;
}
body.gurka-mode .gurka-play-slot .gurka-played-card,
body.gurka-theme .gurka-play-slot .gurka-played-card,
body[data-game="gurka"] .gurka-play-slot .gurka-played-card,
body.gurka-mode .gurka-play-slot .playing-card,
body.gurka-theme .gurka-play-slot .playing-card,
body[data-game="gurka"] .gurka-play-slot .playing-card{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:96px !important;
  height:138px !important;
  transform:none !important;
  z-index:13 !important;
  position:relative !important;
  flex:0 0 auto !important;
}
body.gurka-mode .gurka-played-card-label,
body.gurka-theme .gurka-played-card-label,
body[data-game="gurka"] .gurka-played-card-label{
  display:none;
  color:#fff3d2;
  font-weight:900;
  font-size:13px;
}
body.gurka-mode .gurka-play-slot:not(:has(.playing-card)) .gurka-played-card-label,
body.gurka-theme .gurka-play-slot:not(:has(.playing-card)) .gurka-played-card-label,
body[data-game="gurka"] .gurka-play-slot:not(:has(.playing-card)) .gurka-played-card-label{display:block;}
body.gurka-mode #hand,
body.gurka-theme #hand,
body[data-game="gurka"] #hand,
body.gurka-mode #log,
body.gurka-theme #log,
body[data-game="gurka"] #log,
body.gurka-mode #chatMessages,
body.gurka-theme #chatMessages,
body[data-game="gurka"] #chatMessages{scrollbar-color:#d7aa55 #21140c !important;}
body.gurka-mode #hand::-webkit-scrollbar-track,
body.gurka-theme #hand::-webkit-scrollbar-track,
body[data-game="gurka"] #hand::-webkit-scrollbar-track,
body.gurka-mode #log::-webkit-scrollbar-track,
body.gurka-theme #log::-webkit-scrollbar-track,
body[data-game="gurka"] #log::-webkit-scrollbar-track,
body.gurka-mode #chatMessages::-webkit-scrollbar-track,
body.gurka-theme #chatMessages::-webkit-scrollbar-track,
body[data-game="gurka"] #chatMessages::-webkit-scrollbar-track{background:#21140c !important;border-color:rgba(185,130,55,.35) !important;}
body.gurka-mode #hand::-webkit-scrollbar-thumb,
body.gurka-theme #hand::-webkit-scrollbar-thumb,
body[data-game="gurka"] #hand::-webkit-scrollbar-thumb,
body.gurka-mode #log::-webkit-scrollbar-thumb,
body.gurka-theme #log::-webkit-scrollbar-thumb,
body[data-game="gurka"] #log::-webkit-scrollbar-thumb,
body.gurka-mode #chatMessages::-webkit-scrollbar-thumb,
body.gurka-theme #chatMessages::-webkit-scrollbar-thumb,
body[data-game="gurka"] #chatMessages::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8a5b34,#d7aa55) !important;border-color:#21140c !important;}
@media(max-width:899px){
  body.gurka-mode .gurka-play-slot.gurka-has-play,
  body.gurka-theme .gurka-play-slot.gurka-has-play,
  body[data-game="gurka"] .gurka-play-slot.gurka-has-play{min-height:96px !important;}
  body.gurka-mode .gurka-play-slot .gurka-played-card,
  body.gurka-theme .gurka-play-slot .gurka-played-card,
  body[data-game="gurka"] .gurka-play-slot .gurka-played-card,
  body.gurka-mode .gurka-play-slot .playing-card,
  body.gurka-theme .gurka-play-slot .playing-card,
  body[data-game="gurka"] .gurka-play-slot .playing-card{width:64px !important;height:92px !important;}
}
body.gurka-mode .round-review-kitty, body[data-game="gurka"] .round-review-kitty{display:none!important;}

/* Shared multiplayer lobby status used by all card games. */
.shared-lobby-status {
  border: 1px solid rgba(215,170,85,0.42);
  border-radius: 14px;
  background: rgba(255,250,240,0.055);
  padding: 10px 12px;
  color: #f7ead1;
  display: grid;
  gap: 4px;
  line-height: 1.35;
  font-size: 14px;
  margin: 8px 0 10px;
}
.shared-lobby-status.ready {
  border-color: rgba(127, 214, 142, 0.65);
  background: rgba(48, 112, 62, 0.18);
}
.shared-lobby-status.waiting {
  border-color: rgba(215,170,85,0.42);
}
.shared-lobby-mini {
  color: #e9dcc4;
  font-size: 12px;
}
.shared-lobby-seat-grid {
  margin: 8px 0 10px;
}
.shared-lobby-seat-grid .seat-card.mine {
  border-color: #7fb2ff;
  box-shadow: 0 0 0 2px rgba(127,178,255,0.24) inset;
}

/* v21: Casino now uses the same table-lobby card pattern as the fixed-player lobby. */
.casino-table-lobby-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 90;
  pointer-events: none;
}
.casino-table-lobby-overlay .table-lobby-card,
.casino-table-lobby-overlay button,
.casino-table-lobby-overlay input,
.casino-table-lobby-overlay label { pointer-events: auto; }

.table-lobby-overlay,
.casino-table-lobby-overlay,
.sm-lobby-overlay { z-index: 90 !important; }

/* v22: Series Mattis lobby sits over its table board like the other games. */
.sm-lobby-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
}
.sm-lobby-overlay .sm-lobby,
.sm-lobby-overlay button,
.sm-lobby-overlay input,
.sm-lobby-overlay label { pointer-events: auto; }
.sm-lobby-overlay .sm-lobby { margin: 0; }