:root {
        --felt: #0a0a0a;
        --felt-light: #141414;
        --card-w: 92px;
        --card-h: 132px;
      }

      .baccarat-main {
        padding: 40px 64px 80px;
      }

      .table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32px;
        flex-wrap: wrap;
        gap: 16px;
      }

      .table-title {
        color: var(--yellow);
        font-size: clamp(40px, 7vw, 88px);
        font-weight: 900;
        letter-spacing: -0.045em;
        line-height: 0.95;
      }

      .balance-box {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 28px;
        border: 1px solid var(--red);
        background: #0a0a0a;
      }

      .balance-label {
        color: var(--yellow);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .balance-amount {
        color: var(--yellow);
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -0.01em;
        min-width: 80px;
        text-align: right;
      }

      .table {
        position: relative;
        background: radial-gradient(
            ellipse at 50% 30%,
            rgba(229, 30, 71, 0.18),
            transparent 65%
          ),
          radial-gradient(
            ellipse at 50% 90%,
            rgba(255, 230, 0, 0.08),
            transparent 60%
          ),
          var(--felt);
        border: 1px solid #1f1f1f;
        padding: 48px 32px 32px;
        min-height: 520px;
        overflow: hidden;
      }

      .table::before {
        content: "";
        position: absolute;
        inset: 12px;
        border: 1px solid rgba(255, 230, 0, 0.08);
        pointer-events: none;
      }

      .seat {
        position: relative;
        margin-bottom: 32px;
      }

      .seat:last-child {
        margin-bottom: 0;
      }

      .seat-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
      }

      .seat-name {
        color: var(--yellow);
        font-size: 22px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .seat-total {
        color: var(--yellow);
        font-size: 22px;
        font-weight: 800;
        min-width: 36px;
        text-align: center;
        padding: 6px 18px;
        border: 1px solid var(--red);
        background: #0a0a0a;
      }

      .seat-total.hidden {
        visibility: hidden;
      }

      .seat-cards {
        display: flex;
        gap: 14px;
        min-height: var(--card-h);
        align-items: center;
      }

      .deck {
        position: absolute;
        top: 24px;
        right: 32px;
        width: var(--card-w);
        height: var(--card-h);
        perspective: 1000px;
      }

      .deck::before,
      .deck::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 6px;
        background: linear-gradient(135deg, #2a0008 0%, #1a0007 100%);
        border: 1px solid var(--red);
      }

      .deck::before {
        transform: translate(-3px, -3px);
        background: linear-gradient(135deg, #1a0007 0%, #0a0a0a 100%);
        border-color: rgba(229, 30, 71, 0.4);
      }

      .deck::after {
        background: repeating-linear-gradient(
            45deg,
            #1a0007 0px,
            #1a0007 6px,
            #2a0008 6px,
            #2a0008 12px
          ),
          var(--red);
      }

      .deck-label {
        position: absolute;
        top: -22px;
        right: 0;
        color: var(--yellow);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        opacity: 0.5;
      }

      /* ---------- Card ---------- */
      .card {
        width: var(--card-w);
        height: var(--card-h);
        position: relative;
        transform-style: preserve-3d;
        will-change: transform;
        flex-shrink: 0;
      }

      .card.dealing {
        animation: deal 0.9s cubic-bezier(0.4, 0.1, 0.3, 1) forwards;
      }

      .card.flipping .card-inner {
        animation: flip 0.7s cubic-bezier(0.4, 0.1, 0.3, 1) forwards;
      }

      .card-inner {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
      }

      .card-face,
      .card-back {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 6px;
        border: 1px solid #2a2a2a;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6),
          0 1px 0 rgba(255, 255, 255, 0.04) inset;
      }

      .card-back {
        background: repeating-linear-gradient(
            45deg,
            #1a0007 0px,
            #1a0007 6px,
            #2a0008 6px,
            #2a0008 12px
          ),
          var(--red);
        border-color: var(--red);
      }

      .card-back::after {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1px solid rgba(255, 230, 0, 0.25);
        border-radius: 3px;
      }

      .card-face {
        background: #f8f4e6;
        transform: rotateY(180deg);
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: "Poppins", sans-serif;
      }

      .card-corner {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
      }

      .card-corner.bottom {
        align-self: flex-end;
        transform: rotate(180deg);
      }

      .card-rank {
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.05em;
      }

      .card-suit-small {
        font-size: 18px;
        line-height: 1;
        margin-top: 2px;
      }

      .card-suit-big {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 44px;
      }

      .card-face.red .card-rank,
      .card-face.red .card-suit-small,
      .card-face.red .card-suit-big {
        color: #c8102e;
      }

      .card-face.black .card-rank,
      .card-face.black .card-suit-small,
      .card-face.black .card-suit-big {
        color: #111;
      }

      /* ---------- Result banner ---------- */
      .result-banner {
        margin-top: 32px;
        padding: 28px 32px;
        background: #0a0a0a;
        border: 1px solid #1f1f1f;
        min-height: 96px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }

      .result-text {
        color: var(--yellow);
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.1;
      }

      .result-text.win {
        color: var(--yellow);
      }

      .result-text.lose {
        color: var(--red);
      }

      .result-text.tie {
        color: #f5c518;
      }

      .result-sub {
        color: var(--yellow);
        font-size: 14px;
        font-weight: 500;
        opacity: 0.7;
        letter-spacing: 0.05em;
        margin-top: 6px;
      }

      /* ---------- Betting panel ---------- */
      .bet-panel {
        margin-top: 32px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 18px;
      }

      .bet-btn {
        position: relative;
        padding: 24px 16px;
        background: #0a0a0a;
        border: 1px solid var(--red);
        color: var(--yellow);
        font-family: inherit;
        font-weight: 800;
        font-size: 18px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
        min-height: 88px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 0;
      }

      .bet-btn:hover:not(:disabled) {
        background: #1a0007;
        filter: brightness(1.1);
      }

      .bet-btn .bet-payout {
        font-size: 12px;
        font-weight: 500;
        opacity: 0.7;
        letter-spacing: 0.08em;
      }

      .bet-btn.selected {
        background: var(--red);
        color: var(--yellow);
        border-color: var(--yellow);
      }

      .bet-btn .bet-stake {
        font-size: 14px;
        font-weight: 700;
        color: var(--yellow);
        min-height: 14px;
      }

      .bet-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      /* ---------- Chip rail ---------- */
      .controls {
        margin-top: 24px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

      .chip-rail {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }

      .chip {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 3px dashed var(--yellow);
        background: var(--red);
        color: var(--yellow);
        font-weight: 800;
        font-size: 14px;
        cursor: pointer;
        font-family: inherit;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease-in-out;
        flex-shrink: 0;
      }

      .chip:hover:not(:disabled) {
        transform: translateY(-3px);
      }

      .chip.selected {
        background: var(--yellow);
        color: var(--red);
        border-color: var(--red);
      }

      .chip:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      .action-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }

      .action-btn {
        background: var(--yellow);
        border: none;
        color: #1a0007;
        padding: 16px 36px;
        font-weight: 800;
        font-size: 16px;
        font-family: inherit;
        border-radius: var(--border-radius);
        cursor: pointer;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        transition: filter 0.15s ease-in-out;
        min-height: 54px;
      }

      .action-btn:hover:not(:disabled) {
        filter: brightness(1.05);
      }

      .action-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      .action-btn.secondary {
        background: transparent;
        border: 1px solid var(--red);
        color: var(--yellow);
      }

      .action-btn.secondary:hover:not(:disabled) {
        background: #1a0007;
        filter: brightness(1.1);
      }

      .rules-link {
        background: none;
        border: none;
        color: var(--yellow);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 4px;
        padding: 8px 4px;
        min-height: auto;
      }

      .rules-panel {
        margin-top: 24px;
        padding: 28px 32px;
        background: #0a0a0a;
        border: 1px solid #1f1f1f;
        color: var(--yellow);
      }

      .rules-panel h4 {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 12px;
      }

      .rules-panel p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 10px;
        opacity: 0.85;
      }

      .rules-panel p:last-child {
        margin-bottom: 0;
      }

      .rules-panel[hidden] {
        display: none;
      }

      /* ---------- Animations ---------- */
      @keyframes deal {
        0% {
          transform: translate(var(--dx), var(--dy)) rotate(-12deg) scale(0.95);
          opacity: 0.6;
        }
        60% {
          opacity: 1;
        }
        100% {
          transform: translate(0, 0) rotate(0deg) scale(1);
          opacity: 1;
        }
      }

      @keyframes flip {
        0% {
          transform: rotateY(0deg);
        }
        100% {
          transform: rotateY(180deg);
        }
      }

      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }

      .status-pill {
        display: inline-block;
        padding: 6px 14px;
        background: rgba(255, 230, 0, 0.1);
        border: 1px solid var(--yellow);
        color: var(--yellow);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        animation: pulse 1.4s ease-in-out infinite;
      }

      /* ---------- Name input ---------- */
      .name-input-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 28px;
        border: 1px solid #1f1f1f;
        background: #0a0a0a;
      }

      .name-label {
        color: var(--yellow);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .name-field {
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--red);
        color: var(--yellow);
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 4px 6px;
        width: 120px;
        outline: none;
      }

      .name-field::placeholder {
        color: rgba(255, 230, 0, 0.35);
        font-weight: 400;
      }

      /* ---------- Leaderboard ---------- */
      .leaderboard {
        margin-top: 24px;
        padding: 28px 32px;
        background: #0a0a0a;
        border: 1px solid #1f1f1f;
        color: var(--yellow);
      }

      .leaderboard[hidden] { display: none; }

      .leaderboard-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
      }

      .leaderboard-title {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .leaderboard-rank-badge {
        font-size: 13px;
        font-weight: 700;
        color: var(--red);
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .leaderboard-table {
        width: 100%;
        border-collapse: collapse;
      }

      .leaderboard-table th {
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.5;
        padding-bottom: 10px;
        border-bottom: 1px solid #1f1f1f;
      }

      .leaderboard-table td {
        padding: 10px 0;
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid #111;
      }

      .leaderboard-table td:first-child {
        width: 36px;
        opacity: 0.5;
        font-size: 13px;
      }

      .leaderboard-table td:last-child {
        text-align: right;
        color: var(--red);
        font-weight: 800;
      }

      .leaderboard-table tr.highlight td {
        color: var(--yellow);
      }

      .leaderboard-table tr.highlight td:last-child {
        color: var(--yellow);
      }

      .leaderboard-loading {
        font-size: 13px;
        opacity: 0.5;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      @media (max-width: 960px) {
        .baccarat-main {
          padding: 24px;
        }
        .table {
          padding: 32px 16px 16px;
        }
        .deck {
          top: 16px;
          right: 16px;
        }
        .bet-panel {
          grid-template-columns: 1fr;
        }
        :root {
          --card-w: 70px;
          --card-h: 100px;
        }
        .card-rank {
          font-size: 18px;
        }
        .card-suit-small {
          font-size: 14px;
        }
        .card-suit-big {
          font-size: 32px;
        }
      }

      @media (max-width: 640px) {
        :root {
          --card-w: 46px;
          --card-h: 64px;
        }
        .baccarat-main {
          padding: 8px 12px 10px;
        }
        .table-header {
          margin-bottom: 8px;
          gap: 8px;
          flex-wrap: nowrap;
        }
        .table-title {
          font-size: 30px;
          line-height: 1;
        }
        .balance-box {
          padding: 7px 12px;
          gap: 8px;
          flex-shrink: 0;
        }
        .balance-label {
          font-size: 10px;
          letter-spacing: 0.06em;
        }
        .balance-amount {
          font-size: 17px;
          min-width: 46px;
        }
        .table {
          padding: 12px 10px 8px;
          min-height: 0;
        }
        .table::before {
          inset: 6px;
        }
        .deck {
          top: 6px;
          right: 10px;
          width: 32px;
          height: 46px;
        }
        .deck-label {
          font-size: 9px;
          top: -13px;
          letter-spacing: 0.08em;
        }
        .seat {
          margin-bottom: 8px;
        }
        .seat-row {
          margin-bottom: 5px;
        }
        .seat-name {
          font-size: 13px;
          letter-spacing: 0.04em;
        }
        .seat-total {
          font-size: 13px;
          padding: 2px 10px;
          min-width: 22px;
        }
        .seat-cards {
          gap: 7px;
        }
        .card-face {
          padding: 4px 5px;
        }
        .card-rank {
          font-size: 12px;
        }
        .card-suit-small {
          font-size: 10px;
          margin-top: 1px;
        }
        .card-suit-big {
          font-size: 20px;
        }
        .result-banner {
          margin-top: 8px;
          padding: 8px 12px;
          min-height: 0;
          gap: 8px;
        }
        .result-text {
          font-size: 14px;
          line-height: 1.15;
        }
        .result-sub {
          font-size: 11px;
          margin-top: 2px;
        }
        .status-pill {
          font-size: 9px;
          padding: 3px 8px;
        }
        .bet-panel {
          margin-top: 8px;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 7px;
        }
        .bet-btn {
          padding: 8px 4px;
          font-size: 12px;
          min-height: 54px;
          gap: 2px;
          letter-spacing: 0.03em;
        }
        .bet-btn .bet-payout {
          font-size: 9px;
          letter-spacing: 0.04em;
        }
        .bet-btn .bet-stake {
          font-size: 11px;
          min-height: 11px;
        }
        .controls {
          margin-top: 8px;
          gap: 8px;
          justify-content: center;
        }
        .chip-rail {
          gap: 7px;
          justify-content: center;
          width: 100%;
        }
        .chip {
          width: 40px;
          height: 40px;
          font-size: 12px;
          border-width: 2px;
        }
        .action-row {
          width: 100%;
          justify-content: center;
          gap: 8px;
        }
        .action-btn {
          padding: 8px 16px;
          font-size: 13px;
          min-height: 36px;
        }
        .rules-link {
          font-size: 11px;
          padding: 4px;
        }
        .rules-panel {
          margin-top: 8px;
          padding: 12px 14px;
        }
        .rules-panel h4 {
          font-size: 13px;
        }
        .rules-panel p {
          font-size: 12px;
          line-height: 1.5;
        }

        /* Tighter header + footer so the game fits in a phone viewport */
        .site-header {
          padding: 8px 14px;
        }
        .nav {
          gap: 14px;
        }
        .nav-link {
          font-size: 13px;
        }
        .login-btn {
          padding: 6px 14px;
          font-size: 12px;
        }
        .site-footer {
          padding: 8px 14px 8px;
          margin-top: 4px;
        }
        .footer-row {
          gap: 8px;
          margin-bottom: 4px;
        }
        .footer-link,
        .footer-copy {
          font-size: 9px;
          letter-spacing: 0.03em;
        }
      }