/* ============ 基础 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0b1220; --bg2:#111a2e; --panel:#16213a; --panel2:#1c2a47;
  --line:rgba(255,255,255,.08);
  --gold:#f5c451; --gold2:#d9a520;
  --green:#2ec971; --felt:#1e7d4f; --felt2:#15613b;
  --red:#e05252; --blue:#4f8ef7; --text:#e8edf7; --muted:#8b98b5;
  --radius:16px;
}
html,body { height:100%; }
body {
  font-family:'Noto Sans SC',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(245,196,81,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(46,201,113,.06), transparent 55%),
    var(--bg);
  color:var(--text); min-height:100%;
}
button { font-family:inherit; cursor:pointer; }
.gold { color:var(--gold); }
.muted { color:var(--muted); }
.tiny { font-size:12px; }

/* ============ 通用按钮 ============ */
.btn {
  border:none; border-radius:12px; padding:10px 18px;
  font-size:14px; font-weight:700; color:#fff;
  background:var(--panel2); transition:.18s transform,.18s filter;
  white-space:nowrap;
}
.btn:hover { transform:translateY(-1px); filter:brightness(1.12); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#231a05; }
.btn-green { background:linear-gradient(135deg,#37d97f,#1fa75c); }
.btn-outline { background:transparent; border:1px solid var(--line); }
.btn-lg { padding:14px 28px; font-size:16px; border-radius:14px; }
.btn-block { width:100%; margin-top:14px; }
.mini-btn {
  border:none; background:rgba(255,255,255,.12); color:var(--text);
  border-radius:8px; width:22px; height:22px; font-size:12px; line-height:1;
}
.mini-btn:hover { background:rgba(255,255,255,.25); }

/* ============ 顶栏 ============ */
.topbar {
  position:sticky; top:0; z-index:50;
  background:rgba(11,18,32,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-inner {
  max-width:1200px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px;
}
.logo { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.logo-suit {
  font-size:26px; color:var(--gold);
  background:linear-gradient(145deg,#1d2b49,#101a30);
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid rgba(245,196,81,.35);
}
.logo-text strong { display:block; font-size:16px; letter-spacing:.5px; }
.logo-text small { color:var(--muted); font-size:11px; }
.balance-group { display:flex; gap:10px; margin-left:auto; }
.balance-chip {
  display:flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--line);
  padding:8px 14px; border-radius:999px; font-size:13px;
}
.balance-chip b { color:var(--gold); font-size:14px; }
.balance-chip.free b { color:var(--green); }
.wallet-area { display:flex; align-items:center; gap:8px; }
.sound-btn {
  width:40px; height:40px; border-radius:12px; font-size:17px;
  background:var(--panel); border:1px solid var(--line); cursor:pointer;
  transition:.15s; line-height:1;
}
.sound-btn:hover { border-color:var(--gold); }
.wallet-pill {
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line);
  padding:8px 12px; border-radius:999px; font-size:13px;
}
.wallet-pill .dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.wallet-type { color:var(--muted); font-size:11px; background:rgba(255,255,255,.07); padding:2px 8px; border-radius:999px; }

/* ============ Hero ============ */
.view { max-width:1200px; margin:0 auto; padding:0 20px 40px; }
.hero {
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px;
  padding:56px 0 40px; align-items:center;
}
.hero-badge {
  display:inline-block; font-size:12px; font-weight:700; color:var(--gold);
  border:1px solid rgba(245,196,81,.4); background:rgba(245,196,81,.08);
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.hero h1 { font-size:52px; line-height:1.15; font-weight:900; margin-bottom:16px; }
.hero p { color:var(--muted); font-size:16px; line-height:1.8; max-width:520px; margin-bottom:26px; }
.hero-actions { display:flex; gap:14px; margin-bottom:32px; }
.hero-stats { display:flex; gap:36px; }
.hero-stats div { display:flex; flex-direction:column; }
.hero-stats b { font-size:24px; color:var(--gold); }
.hero-stats span { font-size:12px; color:var(--muted); margin-top:4px; }
.hero-right { position:relative; height:300px; }
.hero-cards { position:absolute; inset:0; }
.hcard {
  position:absolute; width:96px; height:136px; border-radius:12px;
  background:linear-gradient(160deg,#fdfdf6,#e9e9df);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:900; box-shadow:0 14px 34px rgba(0,0,0,.5);
  animation:float 5s ease-in-out infinite;
}
.hcard.c1 { color:#111; left:6%;  top:8%;  transform:rotate(-14deg); }
.hcard.c2 { color:#c0392b; left:20%; top:2%;  transform:rotate(-4deg);  animation-delay:.4s; }
.hcard.c3 { color:#c0392b; left:36%; top:6%;  transform:rotate(6deg);   animation-delay:.8s; }
.hcard.c4 { color:#111; left:50%; top:2%;  transform:rotate(-6deg);  animation-delay:1.2s; }
.hcard.c5 { color:#111; left:64%; top:10%; transform:rotate(14deg);  animation-delay:1.6s; }
@keyframes float { 0%,100%{ margin-top:0 } 50%{ margin-top:-14px } }
.hero-chips { position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; }
.pokerchip {
  width:54px; height:54px; border-radius:50%; display:inline-block; margin:0 -8px;
  border:5px dashed rgba(255,255,255,.85);
  box-shadow:0 10px 22px rgba(0,0,0,.5), inset 0 0 0 3px rgba(0,0,0,.15);
}
.pokerchip.gold  { background:radial-gradient(circle at 35% 35%, #ffe9a8, #d9a520); }
.pokerchip.blue  { background:radial-gradient(circle at 35% 35%, #9ec4ff, #3a6fd8); }
.pokerchip.red   { background:radial-gradient(circle at 35% 35%, #ff9e9e, #c33d3d); }
.pokerchip.black { background:radial-gradient(circle at 35% 35%, #7a869e, #232a38); }

/* ============ 分区 ============ */
.section { padding:34px 0 10px; }
.section-head {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:20px; flex-wrap:wrap;
}
.section-head h2 { font-size:26px; display:flex; align-items:center; gap:10px; }
.wallet-warning {
  font-size:12px; font-weight:500; color:var(--gold);
  background:rgba(245,196,81,.1); border:1px solid rgba(245,196,81,.35);
  padding:4px 12px; border-radius:999px;
}
.wallet-warning.ok { color:var(--green); background:rgba(46,201,113,.08); border-color:rgba(46,201,113,.4); }

/* ============ 牌桌卡片 ============ */
.tables-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; }
.tables-grid.five { grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); }
.table-card {
  background:linear-gradient(170deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; display:flex; flex-direction:column; gap:12px;
  transition:.2s transform,.2s border-color; position:relative; overflow:hidden;
}
.table-card:hover { transform:translateY(-4px); border-color:rgba(245,196,81,.4); }
.table-card.demo:hover { border-color:rgba(46,201,113,.5); }
.tc-top { display:flex; justify-content:space-between; align-items:center; }
.tc-tag { font-size:12px; font-weight:700; color:var(--gold); }
.table-card.demo .tc-tag { color:var(--green); }
.tc-live { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.tc-live i { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.tc-visual { display:flex; justify-content:center; }
.mini-felt {
  width:100%; height:86px; border-radius:50px;
  background:radial-gradient(ellipse at center, #2a9a5f, var(--felt2) 75%);
  border:5px solid #6b4a24; outline:1px solid #8a6430;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); letter-spacing:8px; font-size:15px;
}
.tc-info h3 { font-size:18px; margin-bottom:8px; }
.tc-info ul { list-style:none; display:flex; flex-direction:column; gap:5px; }
.tc-info li { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
.tc-info li b { color:var(--text); font-weight:600; }
.tc-btn { margin-top:auto; }
.tier-medal {
  position:absolute; right:-18px; top:-18px; width:74px; height:74px; border-radius:50%;
  display:flex; align-items:flex-end; justify-content:center; font-size:26px;
  opacity:.92; transform:rotate(18deg);
}
.tier-bronze  { background:radial-gradient(circle at 35% 30%, #f0b48a, #8c4d21); }
.tier-silver  { background:radial-gradient(circle at 35% 30%, #e9eef5, #7d8a99); }
.tier-gold    { background:radial-gradient(circle at 35% 30%, #ffe9a8, #c9930f); }
.tier-plat    { background:radial-gradient(circle at 35% 30%, #c9f3ff, #2f8fa3); }
.tier-whale   { background:radial-gradient(circle at 35% 30%, #a8c5ff, #3b4fd8); }

/* ============ 钱包条 ============ */
.wallets-strip {
  margin-top:34px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); padding:22px; text-align:center;
}
.ws-title { font-size:13px; color:var(--muted); margin-bottom:16px; letter-spacing:2px; }
.ws-list { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.ws-item { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; }
.ws-logo {
  min-width:42px; height:42px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center; font-weight:900; font-size:13px; color:#fff;
}
.ws-logo.okx { background:linear-gradient(135deg,#7cc0ff,#2050c8); }
.ws-logo.bnb { background:linear-gradient(135deg,#f3ba2f,#c88a06); color:#3a2a00; }
.ws-logo.sol { background:linear-gradient(135deg,#9945ff,#14f195); color:#0b0b16; }

/* ============ 页脚 ============ */
.footer {
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px;
}

/* ============ 牌桌视图 ============ */
#tableView { max-width:1240px; }
.table-topbar {
  display:flex; align-items:center; gap:16px; padding:16px 0;
}
.table-title { font-size:20px; font-weight:900; }
.table-title .gold { margin-left:8px; font-size:13px; font-weight:700; }
.table-meta { margin-left:auto; display:flex; gap:10px; }
.table-meta span {
  font-size:12px; color:var(--muted); background:var(--panel);
  border:1px solid var(--line); padding:5px 12px; border-radius:999px;
}
.table-stage { display:flex; justify-content:center; }
.felt {
  position:relative; width:100%; max-width:900px; height:480px;
  border-radius:240px;
  background:
    radial-gradient(ellipse at center, #2a9a5f 0%, var(--felt) 45%, var(--felt2) 100%);
  border:14px solid #6b4a24;
  outline:2px solid #8a6430;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 80px rgba(0,0,0,.35);
}
.brand {
  position:absolute; bottom:56px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.18); font-weight:900; letter-spacing:6px; font-size:15px;
  pointer-events:none;
}
.pot-area { position:absolute; top:150px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.community { display:flex; gap:8px; }
.ccard {
  width:56px; height:78px; border-radius:8px; font-size:20px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#fdfdf6,#e9e9df); color:#111;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.ccard.red { color:#c0392b; }
.ccard.back {
  background:repeating-linear-gradient(45deg,#3450b8 0 6px,#26409c 6px 12px);
  border:2px solid #fff; color:transparent;
}
.ccard.empty { background:rgba(0,0,0,.18); border:1px dashed rgba(255,255,255,.25); box-shadow:none; }
.pot {
  font-size:14px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.35); padding:6px 20px; border-radius:999px;
}

/* 座位 */
.seat {
  position:absolute; width:128px; display:flex; flex-direction:column; align-items:center; gap:5px;
  transition:.2s;
}
.seat-avatar {
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:linear-gradient(145deg,#2a3a5e,#182441);
  border:3px solid rgba(255,255,255,.15);
}
.seat.active .seat-avatar { border-color:var(--gold); box-shadow:0 0 18px rgba(245,196,81,.6); }
.seat.fold .seat-avatar { filter:grayscale(1) brightness(.6); }
.seat.winner .seat-avatar { border-color:var(--green); box-shadow:0 0 22px rgba(46,201,113,.8); }
.seat-name { font-size:12px; font-weight:600; max-width:128px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seat-stack {
  font-size:12px; font-weight:700; color:var(--gold);
  background:rgba(0,0,0,.4); padding:2px 10px; border-radius:999px;
}
.seat-cards { display:flex; gap:3px; height:34px; }
.scard {
  width:24px; height:34px; border-radius:4px; font-size:13px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#fdfdf6,#e9e9df); color:#111; box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.scard.red { color:#c0392b; }
.scard.back { background:repeating-linear-gradient(45deg,#3450b8 0 4px,#26409c 4px 8px); color:transparent; }
.seat-bet {
  position:absolute; font-size:12px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2);
  padding:2px 10px; border-radius:999px; white-space:nowrap;
}
.dealer-btn {
  position:absolute; width:20px; height:20px; border-radius:50%;
  background:#fff; color:#222; font-size:11px; font-weight:900;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.hand-tag {
  font-size:11px; color:var(--green); font-weight:700;
}
.seat-pos0 { left:38px;  top:200px; }
.seat-pos1 { left:150px; top:52px;  }
.seat-pos2 { left:50%;  top:14px;  transform:translateX(-50%); }
.seat-pos3 { right:150px; top:52px; }
.seat-pos4 { right:38px; top:200px; }
.seat-pos5 { left:50%;  bottom:6px; transform:translateX(-50%); }
.seat-pos5 .seat-bet { top:-24px; left:50%; transform:translateX(-50%); }
.seat-pos0 .seat-bet { right:-52px; top:14px; }
.seat-pos1 .seat-bet { left:-30px; top:40px; }
.seat-pos2 .seat-bet { left:-64px; top:22px; }
.seat-pos3 .seat-bet { right:-30px; top:40px; }
.seat-pos4 .seat-bet { left:-52px; top:14px; }

/* ============ 操作栏 ============ */
.action-bar {
  margin-top:18px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 18px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.hand-hint { font-size:14px; color:var(--muted); flex:1; min-width:200px; }
.hand-hint b { color:var(--gold); }
.action-btns { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
.abtn { padding:11px 22px; font-size:14px; }
.abtn.fold { background:linear-gradient(135deg,#e06363,#b23a3a); }
.abtn.check { background:linear-gradient(135deg,#5b6b8c,#3d4a66); }
.abtn.call { background:linear-gradient(135deg,#4f8ef7,#2f5fc4); }
.abtn.raise { background:linear-gradient(135deg,#37d97f,#1fa75c); }
.abtn.allin { background:linear-gradient(135deg,#f5c451,#d9a520); color:#231a05; }
.abtn.deal { background:linear-gradient(135deg,#8e6ff7,#5c3fd8); }
.raise-group { display:flex; align-items:center; gap:10px; }
.raise-amount {
  min-width:74px; text-align:center; font-weight:900; color:var(--gold);
  background:rgba(245,196,81,.1); border:1px solid rgba(245,196,81,.35);
  padding:9px 12px; border-radius:12px; font-size:14px;
}
input[type=range] { accent-color:var(--gold); width:160px; }

/* ============ 日志 ============ */
.log-panel {
  margin-top:14px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.log-head { padding:10px 16px; font-size:13px; font-weight:700; border-bottom:1px solid var(--line); }
.log-body { max-height:140px; overflow-y:auto; padding:10px 16px; font-size:13px; color:var(--muted); }
.log-body p { padding:2px 0; }
.log-body .hl { color:var(--gold); }
.log-body .wn { color:var(--green); }

/* ============ 弹窗 ============ */
.modal-mask {
  position:fixed; inset:0; z-index:100; background:rgba(4,8,16,.72);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal {
  width:100%; max-width:480px; background:linear-gradient(170deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:20px; box-shadow:0 40px 100px rgba(0,0,0,.6);
  animation:pop .22s ease;
}
@keyframes pop { from{ transform:scale(.94); opacity:0 } to{ transform:scale(1); opacity:1 } }
.modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--line);
}
.modal-head h3 { font-size:18px; }
.modal-x { background:none; border:none; color:var(--muted); font-size:16px; }
.modal-body { padding:20px 22px; }
.wallet-list { display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.wallet-opt {
  display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  padding:13px 16px; color:var(--text); transition:.15s;
}
.wallet-opt:hover { border-color:var(--gold); }
.wallet-opt small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.wallet-opt .arrow { margin-left:auto; color:var(--muted); }
.chip-packs { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:14px; }
.pack {
  background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  padding:14px 10px; color:var(--text); text-align:center; transition:.15s;
  display:flex; flex-direction:column; gap:5px;
}
.pack:hover { border-color:var(--gold); transform:translateY(-2px); }
.pack-chips { font-size:17px; font-weight:900; color:var(--gold); }
.pack-chips small { font-size:11px; color:var(--muted); font-weight:500; }
.pack-price { font-size:12px; color:var(--text); }
.pack-tier { font-size:11px; color:var(--muted); }
.buy-status { margin-top:14px; font-size:13px; min-height:20px; }
.buy-status .ok { color:var(--green); }
.buy-status .err { color:var(--red); }

/* ============ 官方收款钱包 ============ */
.official-wallets {
  margin-top:16px; border:1px solid var(--line); border-radius:14px;
  background:rgba(0,0,0,.25); overflow:hidden;
}
.ow-head {
  padding:10px 14px; font-size:13px; font-weight:700; color:var(--gold);
  border-bottom:1px solid var(--line); background:rgba(212,175,55,.06);
}
.ow-row {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.ow-row:last-child { border-bottom:none; }
.ow-row.active { background:rgba(34,197,94,.07); }
.ow-tag {
  flex:none; padding:4px 10px; border-radius:8px; font-size:12px; font-weight:700;
  background:var(--panel); border:1px solid var(--line); white-space:nowrap;
}
.ow-row.active .ow-tag { border-color:var(--green); color:var(--green); }
.ow-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ow-addr {
  font-family:Consolas,monospace; font-size:12px; color:#e8e8e8;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ow-info small { color:var(--muted); font-size:11px; }
.ow-copy {
  flex:none; padding:6px 12px; border-radius:8px; font-size:12px; cursor:pointer;
  background:var(--panel); color:var(--gold); border:1px solid var(--gold);
  transition:.15s;
}
.ow-copy:hover { background:var(--gold); color:#111; }
.ow-comm {
  padding:10px 14px; font-size:12px; color:var(--text);
  background:rgba(212,175,55,.05); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px;
}
.ow-comm small { color:var(--muted); font-size:11px; }

/* 卖出结算 */
.sell-section {
  margin-top:16px; border:1px solid var(--line); border-radius:14px;
  background:rgba(0,0,0,.25); overflow:hidden;
}
.sell-body {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px;
}
.sell-body input {
  flex:1; min-width:140px; padding:9px 12px; border-radius:8px;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  font-size:14px; outline:none;
}
.sell-body input:focus { border-color:var(--gold); }
.sell-quote { flex:1; min-width:150px; font-size:12px; color:var(--green); }
.sell-section .buy-status { padding:0 14px 10px; margin-top:0; min-height:16px; }

.sit-row { display:flex; justify-content:space-between; align-items:center; margin:14px 0 8px; font-size:14px; }
.sit-row b { color:var(--gold); font-size:20px; }
#sitSlider { width:100%; }

/* ============ Toast ============ */
#toastBox { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:rgba(20,30,52,.95); border:1px solid var(--line); color:var(--text);
  padding:11px 22px; border-radius:999px; font-size:14px; box-shadow:0 12px 40px rgba(0,0,0,.5);
  animation:tin .25s ease;
}
.toast.ok { border-color:rgba(46,201,113,.5); }
.toast.warn { border-color:rgba(245,196,81,.5); }
.toast.err { border-color:rgba(224,82,82,.5); }
@keyframes tin { from{ transform:translateY(-12px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* ============ 响应式 ============ */
@media (max-width:920px) {
  .hero { grid-template-columns:1fr; }
  .hero-right { display:none; }
  .hero h1 { font-size:36px; }
  .balance-group { display:none !important; }
}
@media (max-width:680px) {
  .felt { height:420px; border-width:10px; border-radius:150px; }
  .seat { width:100px; }
  .seat-pos0 { left:8px; top:220px; } .seat-pos4 { right:8px; top:220px; }
  .seat-pos1 { left:70px; top:44px; } .seat-pos3 { right:70px; top:44px; }
  .ccard { width:44px; height:62px; font-size:16px; }
}