* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
    :root {
      --bg1:#091540; --bg2:#1c1f5a; --bg3:#3d1670; --bg4:#0d2f66;
      --glass:rgba(8,10,28,.72); --glass-border:rgba(255,255,255,.1); --text-soft:rgba(255,255,255,.75);
      --green1:#14b85f; --green2:#23d77d; --blue1:#4d7cff; --purple1:#7c4dff; --danger1:#b3253b; --danger2:#ea475f; --warn1:#b57a16; --warn2:#f0ae2b;
    }
    body {
      min-height:100vh; overflow:hidden; color:white; background:linear-gradient(-45deg,var(--bg1),var(--bg2),var(--bg3),var(--bg4));
      background-size:400% 400%; animation:gradientShift 14s ease infinite; position:relative;
    }
    @keyframes gradientShift {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    .stars { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .star { position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 8px rgba(255,255,255,.6); animation:twinkle linear infinite; }
    @keyframes twinkle {0%,100%{opacity:.25; transform:scale(1)}50%{opacity:1; transform:scale(1.8)}}
    .skyline {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 300px;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      perspective: 1000px;
    }
    .skyline-layer {
      position: absolute;
      bottom: 0;
      left: -10%;
      width: 120%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: bottom center;
      transition: transform .18s ease-out;
      will-change: transform;
      filter: drop-shadow(0 0 18px rgba(255,255,255,.04));
    }
    .skyline-layer::before {
      content: "";
      position: absolute;
      inset: 0;
      background-repeat: repeat-x;
      background-position: bottom left;
      background-size: 100% 100%;
    }
    .skyline-layer.back {
      opacity: .22;
      height: 108%;
    }
    .skyline-layer.mid {
      opacity: .42;
      height: 114%;
    }
    .skyline-layer.front {
      opacity: 1;
      height: 122%;
    }
    .skyline-layer.back::before {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' preserveAspectRatio='none'><path fill='%236a6f78' d='M0 260V78h36v-20h22v20h28v182h26V50h34v-28h12v28h18v210h42V118h24v-26h14v26h22v142h20V96h34v-18h16v18h25v164h32V38h20v-18h8v18h16v222h34V82h22v-16h10v16h28v178h30V124h26v-26h10v26h20v136h22V66h32v-22h12v22h22v194h24V106h30v-14h10v14h24v154h36V70h26v-24h12v24h18v190h30V92h24v-18h12v18h18v168h28V52h26v-30h12v30h24v208h40V260Z'/></svg>");
    }
    .skyline-layer.mid::before {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 260' preserveAspectRatio='none'><path fill='%23424750' d='M0 260V104h52V28h40v76h60v-44h32v44h46v156h42V76h34v-20h18v20h42v184h36V50h28V32h10v18h18v210h34V124h24V96h12v28h28v136h34V90h30V74h12v16h18v170h34V68h36v-26h16v26h24v192h30V110h28V90h14v20h32v150h38V84h30V58h14v26h24v176h36V128h22v-18h12v18h26v132h30V102h22v-28h10v28h28v158h34V260Z'/></svg>");
    }
    .skyline-layer.front::before {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 300' preserveAspectRatio='none'><path fill='%23000000' d='M0 300L0 188L52 188L52 84L118 84L118 138L170 138L170 52L242 52L242 146L306 146L306 28L382 28L382 118L450 118L450 44L530 44L530 158L604 158L604 70L682 70L682 184L756 184L756 24L836 24L836 136L910 136L910 62L988 62L988 170L1064 170L1064 42L1146 42L1146 186L1216 186L1216 92L1288 92L1288 160L1350 160L1350 126L1400 126L1400 300Z'/></svg>");
    }
    .skyline::after {
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:88px;
      background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
      pointer-events:none;
    }


    .moon-wrap {
      position:fixed; top:34px; left:34px; width:118px; height:118px; z-index:1; pointer-events:auto;
      display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 28px rgba(255,245,200,.22));
    }
    .moon, .moon-glow, .moon-halo { position:absolute; border-radius:50%; transition:transform .18s ease, filter .18s ease; }
    .moon-glow {
      width:118px; height:118px; background:radial-gradient(circle, rgba(255,251,214,.45) 0%, rgba(255,245,185,.18) 38%, rgba(255,255,255,0) 72%);
      animation:moonPulse 4s ease-in-out infinite;
    }
    .moon {
      width:74px; height:74px; background:radial-gradient(circle at 32% 30%, #fffdf2 0%, #f4edc9 52%, #d9d1a6 100%);
      box-shadow:inset -12px -10px 0 rgba(179,170,120,.15), inset 8px 6px 0 rgba(255,255,255,.38), 0 0 26px rgba(255,244,190,.28);
    }
    .moon::before, .moon::after {
      content:""; position:absolute; border-radius:50%; background:rgba(175,165,120,.16);
    }
    .moon::before { width:13px; height:13px; left:18px; top:18px; }
    .moon::after { width:9px; height:9px; right:18px; bottom:16px; }
    .moon-halo {
      width:86px; height:86px; border:1px solid rgba(255,250,225,.18);
      box-shadow:0 0 0 10px rgba(255,250,225,.05), 0 0 0 20px rgba(255,250,225,.03);
    }
    .moon-wrap:hover .moon, .moon-wrap:hover .moon-glow, .moon-wrap:hover .moon-halo {
      animation:moonHoverShake .28s linear 3;
      transform:scale(1.04);
      filter:brightness(1.08);
    }
    @keyframes moonPulse { 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.04); opacity:1; } }
    @keyframes moonHoverShake { 0%,100%{ transform:translateX(0) scale(1.04);} 25%{ transform:translateX(-1.5px) rotate(-1deg) scale(1.04);} 75%{ transform:translateX(1.5px) rotate(1deg) scale(1.04);} }
    .premium-aurora, .premium-vignette { position:fixed; inset:0; pointer-events:none; }
    .premium-aurora {
      z-index:0;
      background:
        radial-gradient(ellipse at 18% 8%, rgba(255,248,193,.10), transparent 32%),
        radial-gradient(ellipse at 75% 18%, rgba(88,143,255,.13), transparent 38%),
        radial-gradient(ellipse at 54% 12%, rgba(148,88,255,.12), transparent 40%);
      filter:blur(10px);
      animation:auroraShift 14s ease-in-out infinite alternate;
    }
    .premium-vignette {
      z-index:1;
      background:radial-gradient(circle at center, transparent 46%, rgba(0,0,0,.14) 78%, rgba(0,0,0,.34) 100%);
    }
    @keyframes auroraShift { from{ transform:translateY(0) scale(1);} to{ transform:translateY(-8px) scale(1.02);} }

    .blackjack-screen { position:relative; z-index:2; width:100%; min-height:100vh; padding:20px 20px 40px; display:none; flex-direction:column; animation:panelFloat .35s ease; }
    .blackjack-layout {
      width:min(1460px, 100%); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; align-items:stretch;
    }
    .blackjack-table {
      width:100%; min-height:560px; border-radius:42px;
      background:radial-gradient(circle at 50% 40%, rgba(25,120,70,.30), rgba(9,61,36,.88)), linear-gradient(135deg, rgba(16,84,48,.96), rgba(8,48,29,.98));
      border:10px solid #29170d; box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 30px 70px rgba(0,0,0,.45);
      position:relative; padding:28px; display:flex; flex-direction:column; gap:22px; overflow:hidden;
    }
    .blackjack-table::before { content:""; position:absolute; inset:18px; border:2px solid rgba(255,255,255,.08); border-radius:30px; pointer-events:none; }
    .blackjack-table::after {
      content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.06), transparent 24%, transparent 72%, rgba(255,255,255,.04));
      pointer-events:none; mix-blend-mode:screen;
    }
    .blackjack-header { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
    .blackjack-dealer-title { font-size:1rem; font-weight:800; color:rgba(255,255,255,.92); }
    .blackjack-subtitle { font-size:.92rem; color:rgba(255,255,255,.72); }
    .blackjack-hands { position:relative; z-index:1; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:auto; }
    .blackjack-seat {
      min-height:120px; border-radius:18px; background:linear-gradient(180deg, rgba(18,28,40,.78), rgba(12,24,34,.66)); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px);
      box-shadow:0 10px 24px rgba(0,0,0,.25); padding:14px; transition:transform .2s ease, box-shadow .2s ease, outline-color .2s ease;
    }
    .blackjack-seat.turn { outline:2px solid rgba(60,255,150,.7); box-shadow:0 0 24px rgba(60,255,150,.28); transform:translateY(-2px); }
    .blackjack-seat-name { font-weight:800; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .blackjack-seat-stack, .blackjack-seat-state { font-size:.84rem; color:rgba(255,255,255,.72); }
    .blackjack-seat-cards { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:10px; min-height:84px; }
    .blackjack-bottom-ui {
      min-height:560px; display:flex; flex-direction:column; gap:14px; margin:0; padding:18px;
      background:linear-gradient(180deg, rgba(10,12,24,.78), rgba(9,12,26,.6)); border:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(14px); border-radius:34px; box-shadow:0 24px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
      position:relative; overflow:hidden;
    }
    .blackjack-bottom-ui::before {
      content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 24%); pointer-events:none;
    }
    .blackjack-bottom-ui .player-hand-box,
    .blackjack-bottom-ui .summary-box,
    .blackjack-bottom-ui .blackjack-actions { width:100%; align-self:stretch; position:relative; z-index:1; }
    .blackjack-bottom-ui .player-hand-box,
    .blackjack-bottom-ui .summary-box { padding:16px; border-radius:22px; background:rgba(255,255,255,.04); }
    .blackjack-bottom-ui .player-hand-box { flex:0 0 auto; }
    .blackjack-bottom-ui .summary-box { margin-top:auto; }
    .blackjack-bottom-ui .cards-row { justify-content:flex-start; min-height:auto; }
    .blackjack-bottom-ui .card,
    .blackjack-bottom-ui .dealing-card { width:58px; height:84px; font-size:1.1rem; }
    .blackjack-actions { display:grid; grid-template-columns:1fr; gap:12px; }
    .blackjack-actions button { padding:15px 14px; border:none; border-radius:16px; font-size:1rem; font-weight:800; cursor:pointer; transition:transform .15s ease, opacity .2s ease, filter .2s ease; color:white; }
    .blackjack-actions button:hover { transform:translateY(-1px); }
    .blackjack-actions button:disabled { opacity:.42; cursor:not-allowed; filter:grayscale(.2); box-shadow:none; transform:none !important; }
    @media (max-width:1100px){
      .blackjack-layout{grid-template-columns:minmax(0,1fr) 320px}
      .blackjack-hands{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media (max-width:760px){
      .blackjack-screen{padding:12px 12px 28px}
      .blackjack-layout{grid-template-columns:1fr}
      .blackjack-table{padding:18px; border-radius:28px}
      .blackjack-hands{grid-template-columns:1fr}
      .blackjack-bottom-ui { min-height:unset; }
      .blackjack-bottom-ui .cards-row { justify-content:center; }
      .blackjack-bottom-ui .card,
      .blackjack-bottom-ui .dealing-card { width:56px; height:82px; }
    }

    .mode-select {
      margin: 16px 0 8px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .mode-btn {
      padding: 14px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.08);
      color: white;
      font-weight: 800;
      cursor: pointer;
      transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .mode-btn:hover { transform: translateY(-2px); }
    .mode-btn.active {
      background: linear-gradient(135deg,var(--blue1),var(--purple1));
      border-color: rgba(255,255,255,.28);
      box-shadow: 0 10px 25px rgba(86,96,255,.28);
    }
    .game-type-pill {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      font-size:.86rem;
      font-weight:800;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:rgba(255,255,255,.92);
      margin-top:12px;
    }

    .container { position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
    .panel {
      width:100%; max-width:460px; background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--glass-border);
      border-radius:24px; padding:28px; box-shadow:0 20px 50px rgba(0,0,0,.45); text-align:center; animation:panelFloat .5s ease;
    }
    @keyframes panelFloat {from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:translateY(0)}}
    .title { font-size:2.3rem; font-weight:800; margin-bottom:10px; letter-spacing:.5px; }
    .subtitle { font-size:.98rem; color:var(--text-soft); margin-bottom:24px; }
    .input {
      width:100%; padding:14px 16px; margin-bottom:14px; border:1px solid rgba(255,255,255,.14); border-radius:14px;
      background:rgba(255,255,255,.08); color:white; font-size:1rem; outline:none; transition:.2s ease;
    }
    .input::placeholder { color:rgba(255,255,255,.5); }
    .input:focus { border-color:rgba(130,170,255,.65); background:rgba(255,255,255,.12); box-shadow:0 0 0 3px rgba(90,140,255,.14); }
    .btn {
      width:100%; padding:14px 16px; border:none; border-radius:14px; font-size:1rem; font-weight:700; cursor:pointer; margin-top:10px;
      transition:transform .15s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .btn:hover { transform:translateY(-2px); }
    .btn-primary { background:linear-gradient(135deg,var(--blue1),var(--purple1)); color:white; box-shadow:0 10px 25px rgba(86,96,255,.3); }
    .btn-secondary { background:rgba(255,255,255,.1); color:white; }
    .btn-success { background:linear-gradient(135deg,var(--green1),var(--green2)); color:white; box-shadow:0 10px 25px rgba(31,210,114,.28); }
    .btn-danger { background:linear-gradient(135deg,var(--danger1),var(--danger2)); color:white; }
    .btn-warning { background:linear-gradient(135deg,var(--warn1),var(--warn2)); color:white; }
    .btn-disabled { background:rgba(255,255,255,.16); color:rgba(255,255,255,.5); cursor:not-allowed; box-shadow:none; }
    .hidden { display:none !important; }
    .room-code-box, .settings-box, .info-box {
      margin-top:18px; padding:14px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); font-size:1rem;
    }
    .room-code-box { font-weight:700; letter-spacing:1px; }
    .settings-box { text-align:left; }
    .settings-row { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:8px 0; }
    .settings-row span { color:rgba(255,255,255,.82); }
    .settings-row input { width:110px; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); color:white; }
    .settings-row input:disabled { opacity:.55; cursor:not-allowed; }
    .player-list {
      margin-top:18px; text-align:left; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:14px; max-height:220px; overflow-y:auto;
    }
    .player-item { display:flex; justify-content:space-between; align-items:center; padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.05); margin-bottom:10px; font-size:.98rem; }
    .player-item:last-child { margin-bottom:0; }
    .host-badge, .dealer-badge, .blind-badge {
      font-size:.8rem; padding:5px 9px; border-radius:999px; font-weight:700;
    }
    .host-badge { background:linear-gradient(135deg,var(--blue1),var(--purple1)); }
    .dealer-badge { background:linear-gradient(135deg,#f0ae2b,#b57a16); }
    .blind-badge { background:linear-gradient(135deg,#1bc76e,#119a53); }
    .section-label { margin-top:18px; margin-bottom:10px; font-size:.92rem; color:rgba(255,255,255,.78); text-align:left; font-weight:700; }
    .table-screen { position:relative; z-index:2; width:100%; min-height:100vh; padding:20px 20px 96px; display:none; flex-direction:column; justify-content:space-between; animation:panelFloat .35s ease; }
    .top-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
    .glass-box { background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(12px); border-radius:18px; padding:12px 16px; box-shadow:0 16px 35px rgba(0,0,0,.28); }
    .table-area { flex:1; display:flex; align-items:center; justify-content:center; padding:10px 0 20px; position:relative; }
    .poker-table {
      width:min(1000px,100%); min-height:520px; border-radius:999px;
      background:radial-gradient(circle at center, rgba(30,140,90,.34), rgba(10,73,44,.78)), linear-gradient(135deg, rgba(20,90,45,.95), rgba(10,55,35,.98));
      border:10px solid #29170d; box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 30px 70px rgba(0,0,0,.45);
      position:relative; padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
    }
    .poker-table::before { content:""; position:absolute; inset:18px; border:2px solid rgba(255,255,255,.08); border-radius:999px; pointer-events:none; }
    .poker-table::after { content:""; position:absolute; width:50%; height:180%; top:-40%; left:-20%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); transform:rotate(18deg); pointer-events:none; }
    .seat {
      --seat-transform:none;
      position:absolute; width:128px; min-height:78px; text-align:center; padding:10px 12px; border-radius:16px; background:rgba(10,12,24,.72);
      border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); box-shadow:0 10px 24px rgba(0,0,0,.25); transition:transform .2s ease, box-shadow .2s ease, outline-color .2s ease;
      transform:var(--seat-transform);
    }
    .seat-name { font-weight:700; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .seat-stack, .seat-state { font-size:.84rem; color:rgba(255,255,255,.72); }
    .seat.turn { outline:2px solid rgba(60,255,150,.7); box-shadow:0 0 24px rgba(60,255,150,.28); animation:turnPulse 1.4s ease-in-out infinite; }
    .seat.folded { opacity:.55; filter:grayscale(.45); }
    .seat.all-in { box-shadow:0 0 24px rgba(240,174,43,.25); }
    @keyframes turnPulse {0%,100%{transform:var(--seat-transform) scale(1)}50%{transform:var(--seat-transform) scale(1.03)}}
    .seat-1 { top:10px; left:50%; --seat-transform:translateX(-50%); }
    .seat-2 { top:88px; right:60px; }
    .seat-3 { bottom:120px; right:40px; }
    .seat-4 { bottom:20px; left:50%; --seat-transform:translateX(-50%); }
    .seat-5 { bottom:120px; left:40px; }
    .seat-6 { top:88px; left:60px; }
    .table-center { position:absolute; top:57%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:20px; z-index:2; width:min(62%, 520px); pointer-events:none; }
    .pot-wrap { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; }
    .chip-stack { position:relative; width:42px; height:46px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)); animation:chipBob 2.2s ease-in-out infinite; }
    @keyframes chipBob {0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
    .chip { position:absolute; left:0; width:42px; height:12px; border-radius:999px; border:2px solid rgba(255,255,255,.35); background:linear-gradient(180deg,#d02a43,#9f1c31); }
    .chip:nth-child(1){bottom:0}.chip:nth-child(2){bottom:8px;background:linear-gradient(180deg,#324eff,#2337b5)}.chip:nth-child(3){bottom:16px;background:linear-gradient(180deg,#1bc76e,#119a53)}.chip:nth-child(4){bottom:24px;background:linear-gradient(180deg,#f0ae2b,#b57a16)}
    .pot-box { text-align:center; padding:12px 24px; border-radius:18px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.09); min-width:170px; box-shadow:0 0 20px rgba(255,255,255,.04); }
    .pot-label { font-size:.88rem; color:rgba(255,255,255,.72); margin-bottom:4px; }
    .pot-value { font-size:1.5rem; font-weight:800; }
    .cards-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; min-height:110px; }
    .card {
      width:72px; height:102px; border-radius:14px; background:linear-gradient(180deg,#ffffff,#e8edf7); color:#111827; display:flex; align-items:center; justify-content:center;
      font-size:1.35rem; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.7);
      transition:transform .12s ease, box-shadow .18s ease, filter .18s ease, opacity .2s ease; transform-origin:center center; will-change:transform; position:relative; transform-style:preserve-3d; overflow:hidden;
    }
    .card::after { content:""; position:absolute; top:-120%; left:-40%; width:60%; height:300%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform:rotate(24deg); opacity:0; transition:opacity .18s ease; pointer-events:none; }
    .card:hover::after { opacity:1; }
    .card:hover { box-shadow:0 18px 30px rgba(0,0,0,.34), 0 0 18px rgba(255,255,255,.10); filter:brightness(1.04); z-index:5; }
    .card.back { background:linear-gradient(180deg,#243b77,#1a2452); color:white; border:2px solid rgba(255,255,255,.16); }
    .card.red { color:#b91c1c; }
    .dealing-card { position:absolute; width:72px; height:102px; border-radius:14px; background:linear-gradient(180deg,#243b77,#1a2452); border:2px solid rgba(255,255,255,.16); box-shadow:0 10px 24px rgba(0,0,0,.25); pointer-events:none; z-index:30; transform:translate(-50%, -50%); }
    .card-slot { width:72px; height:102px; display:flex; align-items:center; justify-content:center; perspective:900px; }
    .seat-mini-cards, .seat-mini-cards-user { display:flex; gap:6px; justify-content:center; margin-top:8px; min-height:28px; }
    .mini-card {
      width:20px; height:28px; border-radius:6px; background:linear-gradient(180deg,#243b77,#1a2452);
      border:1px solid rgba(255,255,255,.16); box-shadow:0 4px 10px rgba(0,0,0,.25); opacity:.92;
    }
    .mini-card.revealed { background:linear-gradient(180deg,#ffffff,#e8edf7); color:#111827; display:flex; align-items:center; justify-content:center; font-size:.52rem; font-weight:800; }
    .mini-card.revealed.red { color:#b91c1c; }
    .card.deal-in { animation:cardDealIn .45s cubic-bezier(.2,.85,.2,1) both; }
    .card.board-pop { animation:boardPop .42s cubic-bezier(.2,.85,.2,1) both; }
    .card.reveal-flip { animation:revealFlip .55s cubic-bezier(.25,.85,.2,1) both; }
    .card.dim-back { opacity:.42; filter:saturate(.8); }
    @keyframes cardDealIn {
      0% { opacity:0; transform:translateY(26px) scale(.86) rotate(-8deg); }
      100% { opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
    }
    @keyframes boardPop {
      0% { opacity:0; transform:translateY(-18px) scale(.82); }
      100% { opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes revealFlip {
      0% { opacity:0; transform:rotateY(88deg) scale(.9); }
      100% { opacity:1; transform:rotateY(0deg) scale(1); }
    }
    .bottom-ui { display:flex; flex-direction:column; gap:16px; margin-top:18px; margin-bottom:28px; }
    .player-hand-box, .summary-box {
      align-self:center; width:min(850px,100%); background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(12px);
      border-radius:24px; padding:18px; box-shadow:0 16px 35px rgba(0,0,0,.28); text-align:center;
    }
    .hand-title { font-size:.95rem; color:rgba(255,255,255,.72); margin-bottom:12px; font-weight:700; }
    .actions { width:min(850px,100%); align-self:center; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
    .actions button { padding:15px 14px; border:none; border-radius:16px; font-size:1rem; font-weight:800; cursor:pointer; transition:transform .15s ease, opacity .2s ease, filter .2s ease; color:white; }
    .actions button:hover { transform:translateY(-1px); }
    .actions button:disabled, .small-btn:disabled, .raise-box input:disabled {
      opacity:.42; cursor:not-allowed; filter:grayscale(.2); box-shadow:none; transform:none !important;
    }
    .actions button:disabled:hover, .small-btn:disabled:hover { transform:none; }
    .actions button.locked, .small-btn.locked, .raise-box input.locked {
      opacity:.42; cursor:not-allowed; filter:grayscale(.2); box-shadow:none; transform:none !important;
    }
    .raise-box { width:min(850px,100%); align-self:center; display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(12px); border-radius:20px; padding:14px; }
    .raise-box input { width:160px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:white; outline:none; }
    .small-btn { padding:12px 16px; border:none; border-radius:12px; font-weight:700; cursor:pointer; color:white; background:linear-gradient(135deg,var(--blue1),var(--purple1)); }
    .status-line, .summary-line { text-align:center; color:rgba(255,255,255,.82); font-size:.95rem; }
    .summary-line + .summary-line { margin-top:8px; }
    .leave-btn { width:auto; padding:12px 16px; margin:0; }
    .toast {
      position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-16px); background:rgba(8,10,28,.9); border:1px solid rgba(255,255,255,.12);
      color:white; padding:12px 18px; border-radius:14px; z-index:50; box-shadow:0 18px 30px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:.25s ease; backdrop-filter:blur(12px); font-weight:700;
    }
    .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
    .muted { color:rgba(255,255,255,.65); font-size:.92rem; }

    .roulette-screen { position:relative; z-index:2; width:100%; min-height:100vh; padding:20px 20px 40px; display:none; flex-direction:column; animation:panelFloat .35s ease; }
    .roulette-layout { width:min(1460px,100%); display:grid; grid-template-columns:minmax(360px,430px) minmax(620px,1fr); gap:22px; align-items:stretch; }
    .roulette-side, .roulette-main {
      background:rgba(7,11,28,.74); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(16px); border-radius:30px;
      box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08); position:relative; overflow:hidden;
    }
    .roulette-side::before, .roulette-main::before, .panel::before, .glass-box::before, .blackjack-bottom-ui::before {
      content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%, transparent 66%, rgba(255,255,255,.04)); pointer-events:none;
    }
    .roulette-side { padding:20px; display:flex; flex-direction:column; gap:16px; }
    .roulette-main { padding:18px; display:flex; flex-direction:column; gap:18px; background:linear-gradient(180deg, rgba(12,23,55,.82), rgba(9,13,29,.9)); }
    .roulette-wheel-stage {
      position:relative; min-height:330px; border-radius:26px; background:radial-gradient(circle at 50% 42%, rgba(28,124,255,.14), rgba(5,10,30,.0) 45%), radial-gradient(circle at 50% 55%, rgba(29,191,120,.10), transparent 58%), rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; overflow:hidden;
    }
    .roulette-wheel-stage::after {
      content:""; position:absolute; width:110%; height:110%; background:radial-gradient(circle at center, rgba(255,255,255,.08), transparent 46%); filter:blur(20px); opacity:.35; animation:rouletteStagePulse 5s ease-in-out infinite;
    }
    @keyframes rouletteStagePulse {0%,100%{transform:scale(.96);opacity:.22}50%{transform:scale(1.02);opacity:.45}}
    .roulette-wheel-shell { position:relative; width:292px; height:292px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 20px 38px rgba(0,0,0,.42)); }
    .roulette-wheel {
      width:292px; height:292px; border-radius:50%; position:relative;
      background:conic-gradient(from -90deg,
        #18a35b 0deg 9.73deg,
        #94283a 9.73deg 19.46deg,
        #131927 19.46deg 29.19deg,
        #94283a 29.19deg 38.92deg,
        #131927 38.92deg 48.65deg,
        #94283a 48.65deg 58.38deg,
        #131927 58.38deg 68.11deg,
        #94283a 68.11deg 77.84deg,
        #131927 77.84deg 87.57deg,
        #94283a 87.57deg 97.30deg,
        #131927 97.30deg 107.03deg,
        #94283a 107.03deg 116.76deg,
        #131927 116.76deg 126.49deg,
        #94283a 126.49deg 136.22deg,
        #131927 136.22deg 145.95deg,
        #94283a 145.95deg 155.68deg,
        #131927 155.68deg 165.41deg,
        #94283a 165.41deg 175.14deg,
        #131927 175.14deg 184.87deg,
        #94283a 184.87deg 194.60deg,
        #131927 194.60deg 204.33deg,
        #94283a 204.33deg 214.06deg,
        #131927 214.06deg 223.79deg,
        #94283a 223.79deg 233.52deg,
        #131927 233.52deg 243.25deg,
        #94283a 243.25deg 252.98deg,
        #131927 252.98deg 262.71deg,
        #94283a 262.71deg 272.44deg,
        #131927 272.44deg 282.17deg,
        #94283a 282.17deg 291.90deg,
        #131927 291.90deg 301.63deg,
        #94283a 301.63deg 311.36deg,
        #131927 311.36deg 321.09deg,
        #94283a 321.09deg 330.82deg,
        #131927 330.82deg 340.55deg,
        #94283a 340.55deg 350.28deg,
        #131927 350.28deg 360deg);
      border:12px solid #5a3b1f; box-shadow:inset 0 0 0 6px rgba(255,255,255,.08), 0 18px 32px rgba(0,0,0,.35); transition:transform 5.8s cubic-bezier(.08,.95,.1,1);
    }
    .roulette-wheel::before { content:""; position:absolute; inset:18px; border-radius:50%; border:2px solid rgba(255,255,255,.18); }
    .roulette-wheel::after { content:""; position:absolute; inset:76px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.2), rgba(32,21,10,.95)); box-shadow:inset 0 6px 18px rgba(255,255,255,.12); }
    .roulette-wheel-labels { position:absolute; inset:0; }
    .roulette-wheel-labels span {
      position:absolute; left:50%; top:50%; transform-origin:0 0; font-size:.78rem; font-weight:800; color:white; text-shadow:0 1px 3px rgba(0,0,0,.6); width:20px; text-align:center;
    }
    .roulette-wheel-pointer {
      position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-top:28px solid #f7d97d; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); z-index:4;
    }
    .roulette-ball-orbit { position:absolute; inset:16px; border-radius:50%; pointer-events:none; }
    .roulette-ball {
      position:absolute; top:0; left:50%; width:16px; height:16px; border-radius:50%; transform:translate(-50%, -50%); background:radial-gradient(circle at 35% 35%, white, #d8e5ff 68%, #93a9d1 100%);
      box-shadow:0 0 16px rgba(255,255,255,.6), 0 3px 9px rgba(0,0,0,.35); transition:transform 5.7s cubic-bezier(.08,.95,.1,1);
    }
    .roulette-stage-burst { position:absolute; inset:auto 50% 18px auto; transform:translateX(50%); font-weight:900; letter-spacing:.08em; color:rgba(255,255,255,.18); font-size:2.3rem; pointer-events:none; }
    .roulette-result-chip {
      position:absolute; right:18px; top:18px; min-width:90px; padding:12px 14px; border-radius:18px; background:rgba(10,15,34,.76); border:1px solid rgba(255,255,255,.12); text-align:center; box-shadow:0 12px 24px rgba(0,0,0,.24);
    }
    .roulette-result-chip .n { font-size:2rem; font-weight:900; }
    .roulette-result-chip .t { font-size:.78rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.08em; }
    .roulette-result-chip.red { background:linear-gradient(180deg, rgba(185,48,72,.95), rgba(126,31,49,.88)); }
    .roulette-result-chip.black { background:linear-gradient(180deg, rgba(40,48,65,.95), rgba(17,21,31,.9)); }
    .roulette-result-chip.green { background:linear-gradient(180deg, rgba(19,160,86,.94), rgba(14,117,63,.88)); }
    .roulette-chip-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
    .roulette-chip {
      position:relative; min-height:62px; border:none; cursor:pointer; border-radius:18px; color:white; font-weight:900; font-size:1rem;
      background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(255,255,255,.08) 34%, rgba(0,0,0,.12) 35%), linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
      box-shadow:0 12px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16); transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
      border:1px solid rgba(255,255,255,.08);
    }
    .roulette-chip:hover { transform:translateY(-2px) scale(1.02); }
    .roulette-chip.active { outline:2px solid rgba(123,221,255,.85); box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 12px 26px rgba(0,0,0,.32); }
    .roulette-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .roulette-stat { padding:14px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
    .roulette-stat .label { font-size:.78rem; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
    .roulette-stat .value { font-size:1.24rem; font-weight:900; }
    .roulette-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .roulette-actions button, .roulette-outside button, .roulette-number-cell {
      transition:transform .12s ease, filter .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .roulette-actions button:hover, .roulette-outside button:hover, .roulette-number-cell:hover { transform:translateY(-2px); }
    .roulette-outside { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .roulette-betting-board { display:flex; flex-direction:column; gap:12px; }
    .roulette-board-glass { padding:14px; border-radius:24px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08); }
    .roulette-zero-row { display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:stretch; }
    .roulette-zero-cell, .roulette-number-cell, .roulette-dozen, .roulette-column {
      border:none; cursor:pointer; border-radius:14px; color:white; font-weight:800; position:relative; overflow:hidden;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18);
    }
    .roulette-zero-cell::after, .roulette-number-cell::after, .roulette-dozen::after, .roulette-column::after, .roulette-outside button::after {
      content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 36%, transparent 64%, rgba(255,255,255,.06)); pointer-events:none;
    }
    .roulette-zero-cell { min-height:188px; background:linear-gradient(180deg, #13a056, #0e753f); font-size:1.8rem; }
    .roulette-numbers-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:8px; }
    .roulette-number-cell { min-height:56px; font-size:1rem; }
    .roulette-number-cell.red { background:linear-gradient(180deg, #b93048, #7e1f31); }
    .roulette-number-cell.black { background:linear-gradient(180deg, #283041, #11151f); }
    .roulette-number-cell.active-bet, .roulette-zero-cell.active-bet, .roulette-dozen.active-bet, .roulette-column.active-bet, .roulette-outside button.active-bet {
      outline:2px solid rgba(123,221,255,.9); box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 10px 24px rgba(0,0,0,.24);
    }
    .bet-badge {
      position:absolute; bottom:6px; right:6px; min-width:28px; padding:4px 7px; border-radius:999px; background:rgba(6,10,22,.85); color:#9ee7ff; font-size:.72rem; font-weight:900; border:1px solid rgba(255,255,255,.12);
    }
    .roulette-dozens, .roulette-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .roulette-dozen, .roulette-column, .roulette-outside button { min-height:58px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); color:white; }
    .roulette-history { display:flex; gap:8px; flex-wrap:wrap; }
    .roulette-history-pill { min-width:38px; padding:8px 10px; border-radius:999px; text-align:center; font-weight:900; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.18); }
    .roulette-history-pill.red { background:linear-gradient(180deg, rgba(185,48,72,.86), rgba(126,31,49,.76)); }
    .roulette-history-pill.black { background:linear-gradient(180deg, rgba(40,48,65,.9), rgba(17,21,31,.84)); }
    .roulette-history-pill.green { background:linear-gradient(180deg, rgba(19,160,86,.9), rgba(14,117,63,.82)); }
    .roulette-summary-box { margin-top:auto; padding:16px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
    .roulette-side-title { font-size:.88rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.62); font-weight:800; }
    .roulette-board-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .roulette-board-title strong { font-size:1.18rem; }
    @keyframes rouletteChipPop {0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
    .bet-badge { animation:rouletteChipPop .2s ease; }
    @media (max-width:1150px){ .roulette-layout{grid-template-columns:1fr}.roulette-wheel-stage{min-height:290px} }
    @media (max-width:700px){ .roulette-screen{padding:12px 12px 28px}.roulette-chip-row{grid-template-columns:repeat(2,1fr)}.roulette-zero-row{grid-template-columns:1fr}.roulette-zero-cell{min-height:70px}.roulette-numbers-grid{grid-template-columns:repeat(6,1fr)}.roulette-outside,.roulette-dozens,.roulette-columns,.roulette-actions,.roulette-meta-grid{grid-template-columns:1fr 1fr} }

    @media (max-width:900px){
      .poker-table{min-height:620px; border-radius:40px}.poker-table::before{border-radius:28px}.seat{width:106px; min-height:72px; padding:8px 10px; font-size:.9rem}
      .seat-1{top:10px}.seat-2{top:84px; right:16px}.seat-3{bottom:150px; right:10px}.seat-4{bottom:16px}.seat-5{bottom:150px; left:10px}.seat-6{top:84px; left:16px}.table-center{top:58%; width:min(72%,460px)}
      .actions{grid-template-columns:repeat(2,1fr)} .card,.dealing-card{width:64px; height:92px; font-size:1.2rem}
    }
    @media (max-width:560px){
      .panel{padding:22px 18px; border-radius:20px}.title{font-size:1.95rem}.table-screen{padding:12px 12px 104px}.poker-table{min-height:680px; padding:18px}.top-bar{gap:10px}.glass-box{width:100%}
      .card,.dealing-card{width:56px; height:82px; border-radius:12px}.seat{width:88px; min-height:68px; font-size:.8rem}.seat-stack,.seat-state{font-size:.76rem}.table-center{top:59%; width:min(78%,380px)}.actions{grid-template-columns:1fr 1fr}.raise-box{flex-direction:column}.raise-box input{width:100%}
    }