:root{
  --bg:#000; --topbar:#0ea5e9; --panel:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12); --text:#e5e7eb; --muted:#9ca3af; --accent:#10b981;
  --wrap:1200px; --gap:12px;
  --card-w:200px; --card-h:300px; --card-sm-w:64px; --card-sm-h:96px; --deck-gap:6px;
  --card-radius:12px; --card-shadow:0 10px 28px rgba(0,0,0,.35); --card-border:1px solid rgba(255,255,255,.14);
}

/* Fundo do XD por orientação */
@media (orientation:portrait){
  body{ background:#000 url('/poker/assets/skin/default/background-9x16.svg') center/cover fixed no-repeat; }
}
@media (orientation:landscape){
  body{ background:#000 url('/poker/assets/skin/default/background-16x9.svg') center/cover fixed no-repeat; }
}

*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text) }

/* Topo (logo à esquerda) */
.topbar{ position:sticky; top:0; z-index:20; background:var(--topbar); border-bottom:1px solid rgba(0,0,0,.25) }
.topbar .inner{ max-width:var(--wrap); margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; justify-content:flex-start }
.topbar .logo img{ height:44px; display:block }

.wrap{ max-width:var(--wrap); margin:14px auto 32px; padding:0 12px; display:flex; flex-direction:column; gap:12px }

/* Painéis (caixas do XD) */
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px }

/* KPIs: Créditos, Aposta, Extra, Ganhos */
.kpis{ display:grid; gap:10px; grid-template-columns:repeat(4,1fr) }
.kpi{ background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:12px; padding:10px; text-align:center }
.kpi small{ display:block; color:var(--muted); margin-bottom:4px }
.kpi strong{ font-variant-numeric:tabular-nums; letter-spacing:.3px }

/* Paytable (2 colunas visual — ajustaremos valores depois) */
.section-title{ margin:0 0 8px 0; font-weight:700 }
.paytable{ display:grid; gap:8px }
.pay-row{ display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:10px; padding:10px 12px }

/* ======= Grade 52 do XD: 11/11/11/11/8 ======= */
.deck{ overflow:auto }
.deck-rows{ display:flex; flex-direction:column; gap:var(--deck-gap); align-items:center }
.deck-row{ --cols:11; display:grid; grid-template-columns:repeat(var(--cols), var(--card-sm-w)); gap:var(--deck-gap); width:max-content; justify-content:center }
.deck-row.last{ --cols:8; } /* quinta linha com 8 cartas */

/* Cartas */
.cardwrap{ position:relative; width:var(--card-w); height:var(--card-h) }
.cardwrap.sm{ width:var(--card-sm-w); height:var(--card-sm-h) }
.card{
  position:absolute; inset:0; border-radius:var(--card-radius);
  box-shadow:var(--card-shadow); border:var(--card-border);
  background-size:cover; background-position:center;
  transition:transform .08s ease, filter .08s ease, box-shadow .08s ease;
}
.card--closed{} .card--open{}
.idx{ position:absolute; top:4px; right:6px; font-size:11px; background:rgba(0,0,0,.45); color:#fff; padding:2px 6px; border-radius:6px }

/* Mensagens */
.msgbar{ background:#fff7ed; color:#7c2d12; border:1px solid #fed7aa; border-radius:10px; padding:10px }

/* Mão de 5 (grandes) */
.grid5{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; justify-content:center }
.cardlabel{ position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,.55); color:#fff; padding:2px 6px; border-radius:6px; font-size:13px }
.placeholder{ opacity:.65; filter:grayscale(.2) }

/* Botões */
.actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.btn{ padding:12px 18px; border:none; border-radius:12px; cursor:pointer; font-weight:700; background:var(--accent); color:#062e24; box-shadow:0 4px 14px rgba(16,185,129,.35) }
.btn.secondary{ background:#38bdf8; color:#083344; box-shadow:0 4px 14px rgba(56,189,248,.3) }
.btn.warn{ background:#f59e0b; color:#3b0b04; box-shadow:0 4px 14px rgba(245,158,11,.3) }

/* Responsividade */
@media (max-width:900px){ :root{ --card-w:170px; --card-h:255px } }
@media (max-width:700px){
  :root{ --card-w:140px; --card-h:210px; --card-sm-w:56px; --card-sm-h:84px }
  .kpis{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:420px){
  :root{ --card-w:120px; --card-h:180px; --card-sm-w:48px; --card-sm-h:72px }
  .kpis{ grid-template-columns:1fr }
}