/* XPoker Lite — UI. Dark felt, brass accents, no framework. */

:root {
  --bg: #0a0d0b;
  --bg-2: #111714;
  --panel: #151d19;
  --panel-2: #1b2620;
  --line: #26332c;
  --ink: #e9f1ea;
  --muted: #88988d;
  --gold: #d8b45a;
  --gold-dim: #8a7333;
  --green: #2f9e64;
  --green-soft: #1d6f47;
  --red: #d9534f;
  --blue: #5b8fd6;
  --felt-1: #1d6b46;
  --felt-2: #0f3f2a;
  --card: #f6f4ec;
  --card-line: #d9d5c6;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1200px 700px at 50% -10%, #16321f 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 110%, #1a2b22 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px;
}

button, input, select { font: inherit; color: inherit; }

/* ------------------------------------------------------------- topbar --- */

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  /* iPhone: com viewport-fit=cover o conteúdo passa por baixo do notch/barra de
     status. Somar a área segura mantém o menu clicável. */
  padding: calc(10px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 10px calc(18px + env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: rgba(10, 13, 11, .86);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; color: inherit; background: none; cursor: pointer; }
.brand-mark { color: var(--gold); font-size: 22px; line-height: 1; }
.brand-app-icon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; box-shadow: 0 0 14px rgba(0, 230, 118, .3); }
.brand-name { font-weight: 700; letter-spacing: .04em; }
.brand-lite { color: var(--gold); font-weight: 400; margin-left: 5px; font-size: .82em; letter-spacing: .18em; text-transform: uppercase; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav-btn {
  background: none; border: 0; color: var(--muted);
  padding: 8px 12px; border-radius: 9px; cursor: pointer; font-size: .9rem;
}
.nav-btn:hover { color: var(--ink); background: var(--panel); }
.nav-btn.active { color: var(--gold); background: var(--panel); }

.wallet { display: flex; align-items: center; gap: 10px; }
.wallet-label { color: var(--muted); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.wallet-chips { font-family: var(--mono); color: var(--gold); font-weight: 600; font-size: 1.05rem; }
.wallet-user { color: var(--muted); font-size: .85rem; }
.wallet-user::before { content: "·"; margin-right: 8px; }

/* -------------------------------------------------------------- views --- */

#app { padding: 22px clamp(12px, 3vw, 36px) 108px; max-width: 1480px; margin: 0 auto; }
.view[hidden] { display: none; }

.view-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.view-head h2 { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: .01em; }
h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; margin: 26px 0 10px; }

.hint { color: var(--muted); font-size: .85rem; }

/* --------------------------------------------------------------- auth --- */

.auth-card {
  max-width: 400px; margin: 8vh auto 0; padding: 30px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
}
.auth-title { margin: 0 0 6px; font-size: 1.5rem; }
.auth-sub { margin: 0 0 20px; color: var(--muted); font-size: .88rem; }
.form-message { min-height: 20px; color: var(--gold); font-size: .85rem; }
.stack { display: grid; gap: 14px; }

.field { display: grid; gap: 6px; font-size: .8rem; color: var(--muted); }
.field > span { letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; }
.field input, .field select {
  background: #0c1310; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(216, 180, 90, .12); }
.field.check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* ------------------------------------------------------------- buttons --- */

.btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  border-radius: 10px; padding: 9px 16px; cursor: pointer; transition: transform .08s, background .15s, border-color .15s;
  font-size: .9rem;
}
.btn:hover { background: #23302a; border-color: #33443a; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #2b8f5d, #1d6b46); border-color: #35a86f; font-weight: 600; }
.btn.primary:hover { background: linear-gradient(180deg, #33a76d, #21794f); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: .8rem; border-radius: 8px; }
.btn.wide { width: 100%; padding: 12px; }
.btn.danger { border-color: #5c2b2b; color: #f0a5a2; }
.btn.danger:hover { background: #2a1414; }

/* -------------------------------------------------------------- tabs --- */

.tabs { display: flex; gap: 4px; background: #0b1210; padding: 4px; border-radius: 11px; border: 1px solid var(--line); }
.tabs.small .tab { padding: 6px 12px; font-size: .82rem; }
.tab { flex: 1; background: none; border: 0; color: var(--muted); padding: 9px 14px; border-radius: 8px; cursor: pointer; }
.tab.active { background: var(--panel-2); color: var(--gold); }

/* --------------------------------------------------------- table grid --- */

.xpoker-lobby-filters {
  margin-bottom: 18px; padding: 0 0 12px;
  border-bottom: 1px solid rgba(68, 143, 181, .35);
  background: linear-gradient(180deg, rgba(7, 35, 55, .5), rgba(3, 20, 32, .2));
  box-shadow: inset 0 -1px 0 rgba(57, 170, 220, .08);
}
.game-filter-tabs, .stake-filter-tabs { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.game-filter-tabs::-webkit-scrollbar, .stake-filter-tabs::-webkit-scrollbar { display: none; }
.game-filter-tabs button, .stake-filter-tabs button {
  position: relative; flex: 1 0 auto; min-width: 66px; padding: 11px 12px;
  border: 0; color: #70a7c3; background: transparent; cursor: pointer;
  transition: color .16s, background .16s, box-shadow .16s;
}
.game-filter-tabs button:hover, .stake-filter-tabs button:hover { color: #d8f3ff; background: rgba(29, 113, 157, .2); }
.game-filter-tabs button.active {
  color: #dff7ff; background: linear-gradient(180deg, #1675a8, #0c4e78);
  box-shadow: inset 0 1px 0 rgba(174, 229, 255, .35), 0 0 16px rgba(37, 154, 211, .25);
}
.game-filter-tabs button.active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px;
  background: #a7e6ff; box-shadow: 0 0 8px #63cfff;
}
.stake-filter-tabs { gap: 12px; margin: 12px 10px 8px; }
.stake-filter-tabs button { padding: 8px 16px; background: rgba(4, 31, 49, .88); border: 1px solid transparent; }
.stake-filter-tabs button.active { color: #e8f8ff; border-color: #277da7; background: linear-gradient(180deg, #125d85, #0a3b5b); box-shadow: 0 0 12px rgba(48, 159, 211, .2); }
.lobby-filter-options { display: flex; align-items: center; gap: clamp(20px, 8vw, 90px); padding: 2px 12px 0; color: #72a8c1; font-size: .83rem; }
.lobby-filter-options label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lobby-filter-options input { width: 18px; height: 18px; accent-color: #2495ca; }
.filter-symbol { margin-left: auto; font-size: 1.35rem; color: #9ddaf5; }

.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.table-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s;
  display: grid; gap: 10px;
}
.table-card:hover { transform: translateY(-2px); border-color: var(--gold-dim); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.tc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tc-name { font-weight: 600; }
.tc-variant { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.tc-stakes { font-family: var(--mono); color: var(--ink); font-size: 1.05rem; }
.tc-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; }
.tc-seats { display: flex; gap: 3px; }
.pip { width: 9px; height: 9px; border-radius: 50%; background: #22302a; border: 1px solid #2f4038; }
.pip.on { background: var(--green); border-color: #3fd48a; }
.pip.playing { background: var(--gold); border-color: #f3d491; }
.live-dot { color: var(--green); }
.live-dot::before { content: "●"; margin-right: 5px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* -------------------------------------------------------------- felt --- */

.table-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(260px, 300px); gap: 24px; align-items: start; justify-content: center; }
.table-layout .felt-wrap { grid-column: 1; }
.table-layout .side { grid-column: 2; }
@media (max-width: 1180px) {
  .table-layout { grid-template-columns: minmax(0, 1fr); }
  .table-layout .felt-wrap, .table-layout .side { grid-column: 1; }
  .table-layout .side { width: min(100%, 820px); margin-inline: auto; }
}

#view-table.table-compact { max-width: 480px; margin: 0 auto; }
#view-table.table-compact .table-layout { grid-template-columns: 1fr; }
#view-table.table-compact .table-layout::before { display: none; }
#view-table.table-compact .table-layout .felt-wrap,
#view-table.table-compact .table-layout .side { grid-column: 1; }
#view-table.table-compact .felt {
  width: min(100%, calc(clamp(520px, 68vh, 680px) * .6));
  aspect-ratio: 9 / 15;
  min-height: 0;
  margin-inline: auto;
  border-radius: 45% / 27%;
}
#view-table.table-compact .seat { width: 118px; }
#view-table.table-compact .board .card { width: 45px; height: 63px; }
#view-table.table-compact .side { height: 420px; }
#view-table.table-compact .table-head {
  top: 12px; width: min(190px, 58%); padding: 7px 12px;
  border: 1px solid rgba(101, 171, 207, .25); border-radius: 0 0 12px 12px;
}
#view-table.table-compact .table-name,
#view-table.table-compact .table-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-table.table-compact .table-name { font-size: .92rem; }
#view-table.table-compact .table-meta { font-size: .62rem; }

.felt-wrap {
  position: relative;
  display: grid; gap: 18px; padding: 10px 8px 24px;
  width: min(100%, 820px); margin-inline: auto;
  perspective: 1200px;
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 89, 132, .14), transparent 67%);
}

.table-settings { position: absolute; top: 18px; right: 18px; z-index: 30; }
.table-settings summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 8px 12px; border: 1px solid rgba(91, 177, 219, .45); border-radius: 10px;
  color: #cceeff; background: rgba(4, 18, 28, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .42);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}
.table-settings summary::-webkit-details-marker { display: none; }
.table-settings[open] summary { color: #fff0a6; border-color: rgba(234, 198, 91, .62); }
.table-settings-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  display: grid; gap: 10px; width: min(300px, calc(100vw - 32px)); padding: 14px;
  border: 1px solid rgba(78, 160, 201, .5); border-radius: 14px;
  color: #c8dde8; background: rgba(5, 19, 29, .97); box-shadow: 0 18px 42px rgba(0, 0, 0, .68);
  backdrop-filter: blur(12px);
}
.table-settings-panel > strong { color: #f1f8fb; }
.table-settings-panel .field { gap: 5px; }
.table-settings-panel select { width: 100%; }
.quick-label { color: #83aebe; font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
.current-avatar { display: flex; align-items: center; gap: 11px; color: #d8edf6; font-size: .78rem; }
.current-avatar .avatar-sprite { width: 58px; height: 58px; flex: 0 0 auto; }
.quick-avatar-grid { display: grid; grid-template-columns: repeat(4, 44px); gap: 8px; }
.quick-avatar-grid .avatar-choice { width: 44px; height: 44px; }
.table-settings-panel #quick-sound { justify-self: stretch; }

.felt {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9.2;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin-inline: auto;
  border-radius: 48% / 44%;
  background:
    radial-gradient(circle at 1px 1px, rgba(122, 188, 225, .075) 1px, transparent 1.5px) padding-box,
    radial-gradient(ellipse at 50% 38%, #18547a 0%, #0c3555 38%, #071e33 78%, #041522 100%) padding-box,
    linear-gradient(145deg, #43677e 0%, #102432 16%, #05090e 43%, #29485c 70%, #070b10 100%) border-box;
  background-size: 13px 13px, auto, auto;
  border: 18px solid transparent;
  box-shadow:
    0 9px 0 #02070b,
    0 18px 0 #07121a,
    0 34px 48px rgba(0, 0, 0, .72),
    inset 0 0 110px rgba(0, 0, 0, .64),
    inset 0 2px 0 rgba(150, 214, 244, .16);
  padding: 22px;
  transform: rotateX(1deg);
}

.felt::before {
  content: ""; position: absolute; inset: 7px; z-index: 0; pointer-events: none;
  border-radius: inherit; border: 5px solid rgba(43, 132, 188, .78);
  box-shadow:
    0 0 0 4px rgba(1, 9, 15, .92),
    0 0 18px rgba(47, 158, 216, .28),
    inset 0 0 0 2px rgba(116, 195, 235, .18),
    inset 0 0 32px rgba(0, 0, 0, .55);
}

.felt::after {
  content: ""; position: absolute; inset: 31px; z-index: 0; pointer-events: none;
  border-radius: inherit; border: 1px solid rgba(153, 208, 233, .14);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .2);
}

.table-engraving {
  position: absolute; left: 50%; top: 68%; z-index: 1; transform: translate(-50%, -50%);
  display: grid; justify-items: center; line-height: 1; color: #a8d5eb;
  text-shadow: 0 2px 12px #000; opacity: .16; pointer-events: none;
}
.table-engraving span { font-size: 2.1rem; }
.table-engraving strong { font-size: clamp(1.1rem, 2.4vw, 2rem); letter-spacing: .24em; margin-right: -.24em; }
.table-engraving small { font-size: .55rem; letter-spacing: .48em; margin: 5px -.48em 0 0; }
#view-table.table-compact .table-engraving { top: 65%; }
#view-table.table-compact .table-engraving strong { font-size: 1.2rem; }
#view-table.table-compact .table-engraving span { font-size: 1.5rem; }

.table-head {
  position: absolute; top: 17px; left: 50%; z-index: 5; transform: translateX(-50%);
  text-align: center; display: grid; gap: 2px; pointer-events: none;
  padding: 6px 18px 7px; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(4, 12, 18, .9), rgba(6, 22, 34, .72));
  border: 1px solid rgba(101, 171, 207, .25); border-top: 0;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .38);
}
.table-name { font-weight: 700; letter-spacing: .05em; color: #f0f7fb; text-shadow: 0 2px 8px #000; }
.table-meta { font-size: .68rem; color: rgba(187, 218, 233, .72); font-family: var(--mono); }

.board { position: absolute; top: 44%; left: 50%; z-index: 5; transform: translate(-50%, -50%); display: flex; gap: 8px; }
.board:not(:empty) { padding: 9px 12px; border-radius: 13px; background: rgba(1, 10, 17, .3); border: 1px solid rgba(116, 192, 229, .12); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .38), 0 8px 18px rgba(0, 0, 0, .2); }
.pot {
  position: absolute; top: 61%; left: 50%; z-index: 5; transform: translateX(-50%);
  font-family: var(--mono); color: #fff2b9; font-weight: 800; font-size: .92rem;
  background: linear-gradient(180deg, rgba(18, 35, 45, .95), rgba(4, 12, 18, .94));
  padding: 5px 15px 5px 34px; border-radius: 999px;
  border: 1px solid rgba(227, 191, 91, .52); white-space: nowrap;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.pot::before { content: ""; position: absolute; left: 7px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); border-radius: 50%; background: repeating-conic-gradient(#f7d974 0 12deg, #9b7020 12deg 24deg); border: 2px solid #f9e8a7; box-shadow: 0 2px 4px #000; }
.pot:empty { display: none; }

.seats { position: absolute; inset: 0; z-index: 6; }

/* -------------------------------------------------------------- seat --- */

.seat {
  position: absolute; transform: translate(-50%, -50%);
  width: 128px; height: 108px;
  transition: left .28s cubic-bezier(.22, 1, .36, 1), top .28s cubic-bezier(.22, 1, .36, 1);
}

.seat-box {
  position: absolute; left: 6px; top: 42px; z-index: 2;
  width: 116px; margin: 0; padding: 16px 9px 8px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(18, 32, 42, .97), rgba(3, 9, 14, .97));
  border: 1px solid #315064;
  box-shadow: 0 5px 0 #020609, 0 11px 22px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .08);
  display: grid; gap: 2px; text-align: center; position: relative;
}
.seat.empty { opacity: .7; }
.seat.empty .seat-box { left: 40px; top: 30px; width: 48px; height: 48px; margin: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(113, 178, 210, .45); background: radial-gradient(circle at 42% 35%, #183f58, #071722 70%); box-shadow: 0 5px 0 #02070b, 0 9px 18px rgba(0, 0, 0, .55), inset 0 2px 5px rgba(255, 255, 255, .08); }
.seat.empty .seat-box::before { content: "+"; display: grid; place-items: center; position: absolute; inset: 0; color: #9bcce3; font-size: 1.7rem; font-weight: 300; }
.seat.empty .seat-tag { display: none; }

.seat.turn .seat-box { border-color: #ffe88d; box-shadow: 0 0 0 3px rgba(255, 224, 101, .35), 0 0 24px rgba(255, 218, 80, .42), 0 5px 0 #201703, 0 12px 24px rgba(0, 0, 0, .6); }
.seat.folded .seat-box { opacity: .42; }
.seat.winner .seat-box { border-color: #5cf1aa; box-shadow: 0 0 0 3px rgba(70, 217, 138, .35), 0 0 26px rgba(70, 217, 138, .42), 0 8px 26px rgba(0, 0, 0, .55); }
.seat.allin .seat-box { border-color: #d98b46; }

.seat-name { font-size: .78rem; font-weight: 700; color: #eef7fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 3px #000; }
.seat-stack { font-family: var(--mono); color: #ffe27a; font-weight: 800; font-size: .82rem; text-shadow: 0 2px 4px #000; }
.seat-tag { font-size: .64rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

.dealer {
  position: absolute; right: -9px; top: -9px;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(145deg, #fff, #cbd4d8); color: #13202a; font-size: .62rem; font-weight: 900;
  display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .62);
}

.seat-bet {
  position: absolute; z-index: 5; margin: 0;
  font-family: var(--mono); font-size: .72rem; font-weight: 800; color: #171304;
  background: linear-gradient(180deg, #ffe995, #d2a633); border: 1px solid #fff0a5; border-radius: 999px; padding: 2px 9px 2px 22px; min-height: 20px;
  display: inline-grid; place-items: center; box-shadow: 0 4px 8px rgba(0, 0, 0, .5); white-space: nowrap;
}
.seat-bet:not(:empty)::before { content: ""; position: absolute; left: 4px; width: 13px; height: 13px; border-radius: 50%; background: repeating-conic-gradient(#ec5353 0 15deg, #fff 15deg 30deg); border: 1px solid #762424; }
.seat-bet:empty { visibility: hidden; }

.seat-action {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  font-size: .68rem; padding: 2px 8px; border-radius: 999px;
  background: rgba(3, 10, 15, .94); border: 1px solid #36576b; white-space: nowrap; color: #dcecf3;
  box-shadow: 0 4px 9px rgba(0, 0, 0, .5);
}
.seat-action:empty { display: none; }

.seat-timer { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; width: 100%; box-shadow: inset 0 1px 2px #000; }
.seat-timer > i { display: block; height: 100%; background: linear-gradient(90deg, #37d98b, #ffe06d); width: 100%; transition: width .25s linear; box-shadow: 0 0 6px #56e7a0; }

.seat-cards { position: absolute; z-index: 3; display: flex; gap: 3px; min-height: 0; }
.seat-avatar { position: absolute; left: 35px; top: 0; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background-color: #08141c; border: 3px solid #476e84; font-size: 1.5rem; overflow: hidden; box-shadow: 0 5px 0 #02070b, 0 10px 18px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .16); z-index: 3; }
.seat-top .seat-cards { left: 50%; top: 105px; transform: translateX(-50%); }
.seat-bottom .seat-cards { left: 50%; bottom: 112px; transform: translateX(-50%); }
.seat-left .seat-cards { left: 120px; top: 18px; }
.seat-right .seat-cards { right: 120px; top: 18px; }
.seat-top .seat-bet { left: 50%; top: 160px; transform: translateX(-50%); }
.seat-bottom .seat-bet { left: 50%; bottom: 124px; transform: translateX(-50%); }
.seat-left .seat-bet { left: 126px; top: 73px; }
.seat-right .seat-bet { right: 126px; top: 73px; }
.avatars-characters .seat-avatar { font-size: 0; border-color: var(--gold-dim); }
#view-table.table-compact .seat-avatar { width: 58px; height: 58px; }
.seat-reaction {
  position: absolute; top: 10px; right: 26px; z-index: 4;
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: #f7f1de; border: 2px solid #fff;
  font-size: 1.35rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .55);
  animation: reaction-pop 2.8s ease both; pointer-events: none;
}
.react-sad .seat-avatar { animation: avatar-sad 1s ease-in-out 3; }
.react-happy .seat-avatar { animation: avatar-happy .65s ease-in-out 4; }
.react-angry .seat-avatar { animation: avatar-angry .22s linear 10; filter: saturate(1.5) sepia(.25); }
.react-celebrate .seat-avatar { animation: avatar-celebrate .55s ease-in-out 5; box-shadow: 0 0 22px #f0c85d; }
@keyframes reaction-pop { 0% { opacity: 0; transform: scale(.3) translateY(12px); } 12%, 82% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(.8) translateY(-14px); } }
@keyframes avatar-sad { 50% { transform: translateY(5px) rotate(-5deg); filter: grayscale(.45); } }
@keyframes avatar-happy { 50% { transform: translateY(-9px) scale(1.08); } }
@keyframes avatar-angry { 25% { transform: translateX(-4px) rotate(-4deg); } 75% { transform: translateX(4px) rotate(4deg); } }
@keyframes avatar-celebrate { 35% { transform: translateY(-13px) rotate(-8deg) scale(1.12); } 70% { transform: translateY(-5px) rotate(8deg) scale(1.08); } }

.seat-delta {
  position: absolute; left: 50%; top: -25px; z-index: 6; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--mono); font-size: .76rem; font-weight: 700;
  padding: 1px 8px; border-radius: 999px; letter-spacing: .02em;
}
.seat-delta.up { color: #0c1a12; background: #6fe3a3; }
.seat-delta.down { color: #f6dedd; background: #5a2422; }

/* --------------------------------------------------------------- hero --- */

.hero {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #182b37, #08131b);
  border: 1px solid #315065; border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.hero[hidden] { display: none; }
.hero-cards { display: flex; gap: 6px; min-height: 58px; align-items: center; }
.hero-cards .card.big { width: 44px; height: 60px; border-radius: 6px; }
.hero-cards .card.big .r { font-size: 1rem; }
.hero-cards .card.big .s { font-size: 1.3rem; }
.hero-meta { display: grid; gap: 2px; }
.hero-hand { font-size: .92rem; color: var(--gold); font-weight: 600; }
.hero-hand:empty { display: none; }
.hero-sub { font-size: .78rem; color: var(--muted); font-family: var(--mono); }

/* --------------------------------------------------------- pre-actions --- */

.preactions { gap: 6px; }
.ab-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.btn.pre { padding: 5px 12px; font-size: .78rem; border-radius: 999px; }
.btn.pre.active { border-color: var(--gold); color: var(--gold); background: #221d0e; }

/* -------------------------------------------------------------- card --- */

.card {
  width: 36px; height: 50px; border-radius: 6px;
  background: linear-gradient(145deg, #fff 0%, #fbfaf3 58%, #d9d8cf 100%);
  border: 1px solid #f7f5eb;
  color: #1a1f1c; font-family: var(--mono); font-weight: 700;
  display: grid; grid-template-rows: auto 1fr; padding: 3px 4px;
  box-shadow: 0 2px 0 #aaa99f, 0 6px 11px rgba(0, 0, 0, .52), inset 0 1px 0 #fff;
  position: relative; user-select: none;
}
.card .r { font-size: .8rem; line-height: 1; }
.card .s { font-size: 1rem; line-height: 1; align-self: end; justify-self: end; }
.card.red { color: #c0392b; }
.cards-four-color .card:not(.back) {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.cards-four-color .card.suit-0 { background: linear-gradient(160deg, #338b5b, #17613a); }
.cards-four-color .card.suit-1 { background: linear-gradient(160deg, #3488bd, #18527d); }
.cards-four-color .card.suit-2 { background: linear-gradient(160deg, #c84d48, #812b2b); }
.cards-four-color .card.suit-3 { background: linear-gradient(160deg, #4b5863, #252e36); }
.cards-four-color .card .r { font-weight: 800; }
.cards-four-color .card .s { color: #fff; }
.card.back {
  background:
    radial-gradient(circle at center, transparent 0 25%, rgba(255,255,255,.18) 26% 28%, transparent 29%),
    repeating-linear-gradient(45deg, #26638a 0 5px, #133c59 5px 10px);
  border: 3px solid #e9f5fa;
  box-shadow: 0 2px 0 #8094a0, 0 6px 11px rgba(0, 0, 0, .55);
}
.card.back .r, .card.back .s { display: none; }
.board .card { width: 56px; height: 78px; border-radius: 8px; }
.board .card .r { font-size: 1.15rem; }
.board .card .s { font-size: 1.5rem; }
.board .card:nth-child(1) { transform: rotate(-1.2deg); }
.board .card:nth-child(2) { transform: rotate(-.4deg); }
.board .card:nth-child(4) { transform: rotate(.4deg); }
.board .card:nth-child(5) { transform: rotate(1.2deg); }
.card.small { width: 26px; height: 36px; }
.card.small .r { font-size: .68rem; }
.card.small .s { font-size: .8rem; }
.card.win { outline: 2px solid #46d98a; outline-offset: 1px; }

/* cards that make up my current best five */
.card.mine { outline: 2px solid var(--gold); outline-offset: 1px; }
.board .card.mine { box-shadow: 0 0 16px rgba(216, 180, 90, .55), 0 3px 10px rgba(0, 0, 0, .45); }
.hero-cards .card.mine { box-shadow: 0 0 14px rgba(216, 180, 90, .5); }

/* "Straight" style label over the felt */
.felt-hand {
  position: absolute; top: 28%; left: 50%; z-index: 5; transform: translateX(-50%);
  padding: 3px 14px; border-radius: 999px;
  background: rgba(3, 12, 19, .78); border: 1px solid rgba(115, 185, 219, .32);
  color: #ffe187; font-weight: 800; font-size: .95rem; letter-spacing: .01em;
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
.felt-hand[hidden] { display: none; }

/* --------------------------------------------------------- action bar --- */

.actionbar {
  background: linear-gradient(180deg, #172934, #08131a);
  border: 1px solid #2c4a5c; border-radius: var(--radius); padding: 12px 14px;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
  display: grid; gap: 10px; min-height: 74px;
}
.reactionbar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--muted); font-size: .78rem;
}
.reactionbar[hidden] { display: none; }
.reactionbar .btn { padding: 7px 10px; }
.ab-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ab-row.right { justify-content: flex-end; }
.ab-info { color: var(--muted); font-size: .82rem; margin-left: auto; font-family: var(--mono); }

.btn.act { padding: 12px 18px; font-weight: 600; min-width: 108px; }
.btn.fold { border-color: #5c2b2b; }
.btn.fold:hover { background: #2a1414; }
.btn.check { border-color: #2f4f3d; }
.btn.call { border-color: #2f4f3d; background: #1a2c22; }
.btn.raise { border-color: #6d5a22; background: linear-gradient(180deg, #3a2f11, #2a2210); color: #f0dca0; }
.btn.raise:hover { background: linear-gradient(180deg, #4a3c16, #322814); }
.btn.allin { border-color: #7a3b1c; background: linear-gradient(180deg, #4a2313, #34180d); color: #ffcda8; }

.bet-controls { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; }
input[type="range"] { flex: 1; accent-color: var(--gold); }
.bet-value {
  font-family: var(--mono); background: #0c1310; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; width: 96px; text-align: right;
}
.presets { display: flex; gap: 4px; }
.presets .btn { padding: 5px 8px; font-size: .74rem; border-radius: 7px; }

/* -------------------------------------------------------------- side --- */

.side {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-rows: auto 1fr auto auto; height: clamp(420px, 56vh, 540px); overflow: hidden;
}
.side-body { overflow-y: auto; padding: 4px 12px 12px; font-size: .84rem; line-height: 1.5; }
.side-body[hidden] { display: none; }
.side-body .line { padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .03); color: #c8d6cc; }
.side-body .line.action { color: #a9bdb0; }
.side-body .line.result { color: var(--gold); }
.side-body .line.system { color: var(--muted); font-style: italic; }
.side-body .line.chat b { color: var(--gold); font-weight: 600; }
.side-body .empty { color: var(--muted); padding: 10px 0; }

.chat-form { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; background: #0c1310; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.chat-form[hidden] { display: none; }
.side-foot { display: flex; gap: 6px; padding: 8px 10px 12px; border-top: 1px solid var(--line); }

.hand-item { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; background: #101713; }
.hand-item h4 { margin: 0 0 4px; font-size: .8rem; color: var(--gold); font-weight: 600; }
.hand-item .cards { display: flex; gap: 3px; margin: 5px 0; }
.hand-item .muted { color: var(--muted); font-size: .76rem; }

/* ------------------------------------------------------------- admin --- */

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.owner-controls { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.owner-controls .btn { min-height: 40px; }
.owner-table { overflow-x: auto; }
.owner-table > p { padding: 0 14px; }
.customization-panel { display: grid; gap: 18px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.customization-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.customization-previews > div { display: grid; gap: 8px; align-content: start; }
.preview-label { color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.custom-table-preview { width: 180px; aspect-ratio: 16 / 9; border: 8px solid #142a38; border-radius: 48% / 44%; background: radial-gradient(ellipse at 50% 38%, #18547a, #071e33 75%); box-shadow: 0 5px 0 #040a0f, inset 0 0 0 3px #2b83b6, 0 10px 18px rgba(0,0,0,.45); position: relative; transition: width .2s, aspect-ratio .2s; }
.custom-table-preview.compact { width: 105px; aspect-ratio: 9 / 16; border-radius: 46% / 24%; }
.custom-table-preview i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid #0b1210; }
.custom-table-preview i:nth-child(1) { left: 8%; top: 18%; }.custom-table-preview i:nth-child(2) { right: 8%; top: 18%; }
.custom-table-preview i:nth-child(3) { left: 4%; top: 62%; }.custom-table-preview i:nth-child(4) { right: 4%; top: 62%; }
.custom-table-preview i:nth-child(5) { left: 46%; top: -8px; }.custom-table-preview i:nth-child(6) { left: 46%; bottom: -8px; }
.custom-card-preview { display: flex; gap: 4px; align-items: center; min-height: 72px; }
.character-preview { display: flex; gap: 6px; flex-wrap: wrap; max-width: 230px; }
.avatar-sprite, .avatars-characters .seat-avatar, .seat-avatar.chosen-avatar { background-image: url('/assets/poker-avatars.png'); background-size: 400% 200%; background-repeat: no-repeat; }
.seat-avatar.chosen-avatar { font-size: 0; border-color: var(--gold-dim); }
.avatar-sprite { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--gold-dim); font-size: 0; background-color: #101713; }
.character-preview.simple .avatar-sprite { background-image: none; display: grid; place-items: center; font-size: 1.8rem; }
.avatar-0 { background-position: 0% 0%; }.avatar-1 { background-position: 33.333% 0%; }.avatar-2 { background-position: 66.666% 0%; }.avatar-3 { background-position: 100% 0%; }
.avatar-4 { background-position: 0% 100%; }.avatar-5 { background-position: 33.333% 100%; }.avatar-6 { background-position: 66.666% 100%; }.avatar-7 { background-position: 100% 100%; }

/* Raposa animada: olha para a mesa, pisca e reage ao andamento da mao. */
.avatar-sprite.avatar-4,
.seat-avatar.avatar-4 {
  background-image: url('/assets/fox-eyes.png?v=20261105');
  background-size: 400% 133.333%;
  background-position: 0 50%;
  animation: fox-eye-motion 7s step-end infinite;
}

@keyframes fox-eye-motion {
  0%, 30% { background-position: 33.333% 50%; }
  36%, 48% { background-position: 0 50%; }
  54%, 70% { background-position: 66.666% 50%; }
  74%, 77% { background-position: 100% 50%; }
  81%, 100% { background-position: 33.333% 50%; }
}

.seat.turn .seat-avatar.avatar-4,
.seat.react-happy .seat-avatar.avatar-4,
.seat.react-sad .seat-avatar.avatar-4,
.seat.react-angry .seat-avatar.avatar-4,
.seat.react-celebrate .seat-avatar.avatar-4 {
  background-image: url('/assets/fox-expressions.png?v=20261105');
  background-size: 300% 200%;
}
.seat.turn .seat-avatar.avatar-4 { background-position: 50% 0; animation: avatar-thinking 1.2s ease-in-out infinite; }
.seat.react-happy .seat-avatar.avatar-4 { background-position: 100% 0; }
.seat.react-sad .seat-avatar.avatar-4 { background-position: 0 100%; }
.seat.react-angry .seat-avatar.avatar-4 { background-position: 50% 100%; }
.seat.react-celebrate .seat-avatar.avatar-4 { background-position: 100% 100%; }

@keyframes avatar-thinking {
  50% { transform: translateY(-2px) rotate(2deg); }
}

.hero-cards.premium-pair {
  position: relative;
  padding: 7px 11px;
  border-radius: 12px;
  perspective: 500px;
}
.hero-cards.premium-pair::after {
  content: "PAR PREMIUM";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  color: #081109;
  background: #ffe26a;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.hero-cards.premium-pair .card {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  animation: premium-card-reveal .72s cubic-bezier(.2, .85, .2, 1) both;
}
.hero-cards.premium-pair .card:nth-child(2) { animation-delay: .13s; }
.hero-cards.pair-aa { box-shadow: 0 0 24px rgba(255, 210, 54, .55), inset 0 0 18px rgba(255, 217, 67, .13); }
.hero-cards.pair-kk { box-shadow: 0 0 24px rgba(0, 230, 118, .5), inset 0 0 18px rgba(0, 230, 118, .12); }
.hero-cards.pair-qq { box-shadow: 0 0 24px rgba(190, 106, 255, .5), inset 0 0 18px rgba(190, 106, 255, .12); }

@keyframes premium-card-reveal {
  0% { opacity: 0; transform: translateY(-18px) rotateY(90deg) scale(.76); }
  65% { opacity: 1; transform: translateY(2px) rotateY(-8deg) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-sprite.avatar-4,
  .seat-avatar.avatar-4,
  .hero-cards.premium-pair .card { animation: none !important; }
}
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font-family: var(--mono); font-size: 1.25rem; color: var(--gold); }
.stat span { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.player-profile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px; }
.player-profile > div { display: grid; gap: 4px; margin-right: auto; }
.player-profile strong { color: var(--gold); font-family: var(--mono); font-size: 1.2rem; }
.player-appearance { display: grid; gap: 12px; padding: 14px; }
.appearance-options { display: grid; grid-template-columns: repeat(2, minmax(180px, 260px)); gap: 12px; }
.player-avatar-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.avatar-choice { appearance: none; padding: 0; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.avatar-choice:hover { transform: translateY(-3px); border-color: var(--gold); }
.avatar-choice.selected { border-color: #58df99; box-shadow: 0 0 0 3px rgba(88, 223, 153, .3); }
table.grid { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.grid th, table.grid td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
table.grid th { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid td.mono { font-family: var(--mono); color: var(--gold); }
.grant { display: flex; gap: 4px; }
.grant input { width: 84px; background: #0c1310; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: .8rem; }

/* ----------------------------------------------------------- dialogs --- */

.dlg {
  border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--ink); padding: 22px; box-shadow: var(--shadow); max-width: 420px; width: calc(100vw - 32px);
}
.dlg.wide-dlg { max-width: 620px; }
.dlg::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
.dlg h3 { margin: 0 0 14px; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 1.15rem; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ------------------------------------------------------------ toasts --- */

#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 60; max-width: 340px; }
.toast {
  background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 10px 14px; font-size: .85rem; box-shadow: var(--shadow);
  animation: slide .18s ease-out;
}
.toast.err { border-left-color: var(--red); }
.toast.ok { border-left-color: #46d98a; }
@keyframes slide { from { transform: translateX(14px); opacity: 0; } }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #26332c; border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 720px) {
  .felt { min-height: 320px; border-width: 12px; border-radius: 46% / 40%; padding: 14px; }
  .seat { width: 104px; }
  .card { width: 27px; height: 38px; }
  .board .card { width: 40px; height: 56px; }
  .board .card .r { font-size: .9rem; }
  .board .card .s { font-size: 1.1rem; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .side { height: 46vh; }
  #view-table.table-compact .felt { width: min(100%, calc(clamp(500px, 65vh, 620px) * .6)); min-height: 0; border-radius: 44% / 25%; }
  #view-table.table-compact .table-settings { top: 20px; right: 10px; }
  #view-table.table-compact .table-settings summary { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; font-size: 0; }
  #view-table.table-compact .table-settings summary::after { content: "⚙"; font-size: 1rem; }
}

/* ===== abas (XPoker Lite) ===== */
/* Barra de abas estilo cliente de referencia: icone + rotulo, ativa com
   sublinhado dourado, e barra inferior no celular. */

.nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-left: auto;
  padding: 4px;
  border-radius: 12px;
  background: rgba(8, 12, 10, .72);
  border: 1px solid var(--line);
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font-size: .88rem;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.nav-btn:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.nav-btn.active { color: var(--gold); background: rgba(216, 180, 90, .10); }
.nav-btn.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--gold);
}
.nav-ico { font-style: normal; font-size: .95rem; opacity: .85; }
.nav-btn.active .nav-ico { opacity: 1; }
.nav-link { opacity: .92; }

@media (max-width: 760px) {
  .appearance-options { grid-template-columns: 1fr; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
    z-index: 40; border-radius: 0; border-width: 1px 0 0;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    justify-content: space-around;
    background: rgba(8, 12, 10, .96);
    backdrop-filter: blur(10px);
  }
  .nav-btn { flex-direction: column; gap: 2px; padding: 6px 10px; font-size: .68rem; }
  .nav-btn.active::after { left: 6px; right: 6px; }
  #app { padding-bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .seat-avatar, .seat-reaction { animation: none !important; }
}

/* ===== abas em breve ===== */
/* Espelham o sitemap do cliente original (Torneios, Ranking) enquanto a
   funcionalidade não existe. Ficam apagadas e avisam ao clicar. */

.nav-btn.nav-soon { opacity: .42; cursor: default; }
.nav-btn.nav-soon:hover { background: none; color: var(--muted); }
.nav-btn.nav-soon .nav-ico { opacity: .5; }

/* ------------------------------------------------ player experience --- */

body.player-app {
  background:
    radial-gradient(1000px 620px at 50% -12%, rgba(28, 100, 143, .28), transparent 63%),
    radial-gradient(700px 460px at 100% 90%, rgba(17, 66, 96, .2), transparent 68%),
    linear-gradient(180deg, #07131d, #04090d 68%);
  background-attachment: fixed;
}

.player-app .topbar {
  min-height: 64px; padding: 9px clamp(14px, 2.5vw, 28px);
  background: linear-gradient(180deg, rgba(10, 25, 36, .97), rgba(4, 12, 18, .94));
  border-bottom-color: rgba(72, 126, 157, .36);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .42), inset 0 -1px 0 rgba(115, 184, 219, .08);
}
.player-app .brand { align-items: center; }
.player-app .brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  color: #d8f1ff; background: linear-gradient(145deg, #286f9b, #0a2940);
  border: 1px solid #468aae; box-shadow: 0 5px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.player-app .brand-name { color: #f0f7fa; font-size: 1.02rem; text-shadow: 0 2px 8px #000; }
.player-app .brand-lite { color: #74bddd; }
.player-app .nav {
  position: fixed; left: 50%; right: auto; bottom: 14px; z-index: 60; transform: translateX(-50%);
  width: min(520px, calc(100% - 20px)); margin: 0; padding: 5px 8px;
  justify-content: space-around; border: 1px solid rgba(68, 113, 139, .5); border-radius: 16px;
  background: rgba(3, 16, 27, .94); box-shadow: 0 12px 32px rgba(0, 0, 0, .68), inset 0 1px 8px rgba(52, 135, 179, .12);
  backdrop-filter: blur(14px);
}
.player-app .nav-btn { flex: 1; flex-direction: column; gap: 2px; padding: 7px 8px; color: #849fac; font-size: .67rem; }
.player-app .nav-ico { font-size: 1.35rem; line-height: 1; }
.player-app .nav-btn:hover { color: #e9f7fd; background: rgba(65, 132, 168, .1); }
.player-app .nav-btn.active { color: #bfeaff; background: linear-gradient(180deg, rgba(49, 126, 170, .2), rgba(22, 66, 92, .14)); }
.player-app .nav-btn.active::after { height: 3px; background: linear-gradient(90deg, #4ba8d7, #9fdcf7); box-shadow: 0 0 9px #4baddc; }
.player-app .wallet {
  padding: 6px 7px 6px 12px; border: 1px solid rgba(74, 125, 153, .35); border-radius: 12px;
  background: rgba(3, 11, 17, .62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.player-app .wallet-label { color: #7d9bab; }
.player-app .wallet-chips { color: #ffe17c; text-shadow: 0 0 10px rgba(255, 211, 82, .3); }
.player-app .wallet-user { color: #b1c7d2; }

.player-app .view-head h2 { font-size: 1.5rem; color: #f1f8fb; letter-spacing: .03em; }
.player-app .view-head h2::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 7px; border-radius: 3px; background: linear-gradient(90deg, #429dce, transparent); }
.player-app h3 { color: #86aabd; }

.player-app .auth-card,
.player-app .panel,
.player-app .side,
.player-app .dlg {
  background: linear-gradient(180deg, rgba(20, 40, 53, .98), rgba(6, 17, 24, .98));
  border-color: rgba(63, 111, 137, .48);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .055);
}
.player-app .auth-card { border-radius: 22px; }
.player-app .auth-title { color: #f3f9fc; }
.player-app .tabs { background: rgba(2, 9, 14, .74); border-color: rgba(62, 105, 130, .4); }
.player-app .tab.active { background: linear-gradient(180deg, #173e56, #0d2a3d); color: #d6f2ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.player-app .field input,
.player-app .field select,
.player-app .chat-form input,
.player-app .bet-value { background: #06121a; border-color: #29475a; }
.player-app .field input:focus,
.player-app .field select:focus { border-color: #4ba7d5; box-shadow: 0 0 0 3px rgba(60, 159, 209, .15); }

.player-app .btn { border-color: #315064; background: linear-gradient(180deg, #1c3544, #0e222e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 9px rgba(0, 0, 0, .22); }
.player-app .btn:hover { border-color: #4d829e; background: linear-gradient(180deg, #25485d, #143143); }
.player-app .btn:focus-visible,
.player-app .tab:focus-visible,
.player-app .nav-btn:focus-visible,
.player-app .avatar-choice:focus-visible { outline: 3px solid rgba(95, 190, 235, .62); outline-offset: 2px; }
.player-app .btn.primary { background: linear-gradient(180deg, #2d9bcc, #17658e); border-color: #55b9e5; color: #fff; }
.player-app .btn.primary:hover { background: linear-gradient(180deg, #3ab0e2, #1b729f); }

.player-app .table-grid { gap: 18px; }
.player-app .table-card {
  position: relative; overflow: hidden; padding: 18px;
  background: linear-gradient(145deg, rgba(22, 47, 62, .98), rgba(6, 18, 26, .98));
  border-color: rgba(61, 112, 140, .48); border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.player-app .table-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, #4aa5d2, transparent); opacity: .65; }
.player-app .table-card:hover { transform: translateY(-4px); border-color: #458db2; box-shadow: 0 20px 38px rgba(0, 0, 0, .48), 0 0 0 1px rgba(66, 158, 204, .13); }
.player-app .tc-name { color: #f0f8fc; font-size: 1rem; }
.player-app .tc-variant { color: #70c3ea; }
.player-app .tc-stakes { color: #ffe27d; font-weight: 800; }
.player-app .tc-meta { color: #8da8b5; }
.player-app .pip { background: #102a38; border-color: #31546a; box-shadow: inset 0 1px 2px #000; }
.player-app .pip.on { background: #43bde9; border-color: #9de5ff; box-shadow: 0 0 7px rgba(67, 189, 233, .7); }
.player-app .pip.playing { background: #ffd65d; border-color: #fff0a8; box-shadow: 0 0 7px rgba(255, 214, 93, .7); }

.player-app .side { border-radius: 16px; }
.player-app .side-body .line { border-bottom-color: rgba(100, 155, 184, .08); color: #b9cdd7; }
.player-app .side-body .line.action { color: #9ebdcc; }
.player-app .side-body .line.result { color: #ffe17a; }
.player-app .side-body .line.chat b { color: #75c8ed; }
.player-app .side-foot,
.player-app .chat-form { border-top-color: rgba(70, 120, 148, .3); background: rgba(2, 10, 15, .28); }
.player-app .reactionbar { background: linear-gradient(180deg, #122734, #081821); border-color: #29495c; box-shadow: 0 7px 18px rgba(0, 0, 0, .3); }

.player-app .btn.fold { border-color: #8a3f48; background: linear-gradient(180deg, #54232a, #2c1116); color: #ffc5ca; }
.player-app .btn.check { border-color: #39769a; background: linear-gradient(180deg, #1b4c69, #0d2b40); color: #c9edff; }
.player-app .btn.call { border-color: #398468; background: linear-gradient(180deg, #1b5b46, #0d3327); color: #c4f4df; }
.player-app .btn.raise { border-color: #9b792d; background: linear-gradient(180deg, #5d4919, #302408); color: #ffe9a2; }
.player-app .btn.allin { border-color: #aa5c30; background: linear-gradient(180deg, #6a3218, #35160b); color: #ffd2b7; }
.player-app .btn.act { min-height: 46px; border-radius: 11px; text-transform: uppercase; letter-spacing: .045em; font-size: .8rem; }

.player-app table.grid th { background: rgba(3, 12, 18, .42); color: #83a7ba; }
.player-app table.grid th,
.player-app table.grid td { border-bottom-color: rgba(94, 146, 174, .1); }
.player-app table.grid td.mono { color: #ffe17b; }
.player-app .toast { background: linear-gradient(180deg, #193344, #091923); border-color: #365e75; }
.player-app ::-webkit-scrollbar-thumb { background: #284b60; }

@media (max-width: 760px) {
  .player-app .topbar { min-height: 56px; padding: 8px 12px; }
  .player-app .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .player-app .wallet { margin-left: auto; padding-left: 9px; }
  .player-app .wallet-label,
  .player-app .wallet-user { display: none; }
  .player-app .nav { background: rgba(4, 15, 22, .97); border-color: #29495c; }
  .player-app .table-card { padding: 15px; }
  .player-app .btn.act { flex: 1 1 42%; min-width: 0; }
  .player-app .presets { width: 100%; justify-content: space-between; }
  .table-settings { top: 9px; right: 9px; }
  .table-settings summary { padding: 7px 9px; font-size: .65rem; }
}

/* ----------------------------------------------- technological effects --- */

.player-app::before {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .055;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(130, 210, 247, .18) 4px);
  mix-blend-mode: screen;
}
.connection-state { display: inline-flex; align-items: center; gap: 5px; color: #7ec9a6; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.connection-state i { width: 7px; height: 7px; border-radius: 50%; background: #4ce49c; box-shadow: 0 0 9px #4ce49c; animation: online-pulse 2s ease-in-out infinite; }
.connection-state.offline { color: #e89a9a; }
.connection-state.offline i { background: #df5d63; box-shadow: 0 0 8px #df5d63; animation: none; }
.sound-toggle { width: 34px; padding-inline: 0 !important; font-size: 1rem !important; }
.sound-toggle[aria-pressed="true"] { border-color: #4aa4d1; background: rgba(38, 112, 151, .3); box-shadow: 0 0 12px rgba(63, 169, 220, .22); }
@keyframes online-pulse { 50% { opacity: .55; transform: scale(.82); } }

.street-label {
  justify-self: center; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  color: #9bdcff; background: rgba(34, 107, 146, .22); border: 1px solid rgba(94, 180, 221, .35);
  font-size: .56rem; font-weight: 800; letter-spacing: .16em; line-height: 1.4;
  box-shadow: 0 0 11px rgba(59, 159, 207, .18);
}
.table-fx { position: absolute; inset: 28px; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; }
.table-fx::before {
  content: ""; position: absolute; left: -15%; right: -15%; top: -25%; height: 16%; opacity: .16;
  background: linear-gradient(180deg, transparent, rgba(102, 204, 247, .5), transparent);
  filter: blur(5px); animation: table-scan 7s linear infinite;
}
.table-fx::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at center, rgba(91, 195, 238, .45), transparent 58%);
}
@keyframes table-scan { from { transform: translateY(-130%); } to { transform: translateY(850%); } }
@keyframes fx-blue { 0% { opacity: 0; transform: scale(.7); } 28% { opacity: .9; } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes fx-gold { 0% { opacity: 0; transform: scale(.45) rotate(0); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3) rotate(8deg); } }
@keyframes your-turn-glow { 50% { filter: drop-shadow(0 0 14px rgba(255, 221, 93, .58)); } }
@keyframes deal-card { 0% { opacity: 0; transform: translateY(-38px) scale(.72) rotateY(90deg) rotate(-7deg); } 65% { opacity: 1; transform: translateY(3px) scale(1.03) rotateY(0); } 100% { transform: translateY(0) scale(1) rotateY(0); } }
@keyframes seat-fold { 45% { transform: translateY(5px) scale(.9); filter: grayscale(1) brightness(.55); } }
@keyframes seat-check { 50% { box-shadow: 0 0 0 4px rgba(90, 198, 244, .4), 0 0 24px rgba(73, 184, 231, .7), 0 5px 0 #020609; } }
@keyframes seat-chips { 40% { translate: 0 -8px; scale: 1.16; filter: brightness(1.35); } }

#view-table.fx-hand-start .table-fx::after,
#view-table.fx-street .table-fx::after { animation: fx-blue .9s ease-out; }
#view-table.fx-win .table-fx::after { background: radial-gradient(circle at center, rgba(255, 222, 96, .62), rgba(59, 184, 230, .18) 35%, transparent 68%); animation: fx-gold 1.6s ease-out; }
#view-table.fx-your-turn .felt { animation: your-turn-glow .58s ease-in-out 2; }
.board.dealing .card { animation: deal-card .48s cubic-bezier(.2, .8, .2, 1) both; }
.board.dealing .card:nth-child(2) { animation-delay: .05s; }
.board.dealing .card:nth-child(3) { animation-delay: .1s; }
.board.dealing .card:nth-child(4) { animation-delay: .15s; }
.board.dealing .card:nth-child(5) { animation-delay: .2s; }
.seat.fx-fold .seat-avatar { animation: seat-fold .62s ease-out; }
.seat.fx-check .seat-box { animation: seat-check .5s ease-out; }
.seat.fx-chips .seat-bet { animation: seat-chips .58s ease-out; }
.seat.turn .seat-avatar { box-shadow: 0 5px 0 #231b04, 0 0 21px rgba(255, 222, 91, .65), inset 0 1px 0 rgba(255,255,255,.2); }
.seat-bet:not(:empty) { animation: chip-arrive .28s ease-out; }
@keyframes chip-arrive { from { opacity: 0; translate: 0 -7px; scale: .75; } }

@media (prefers-reduced-motion: reduce) {
  .player-app::before, .table-fx::before { display: none; }
  .connection-state i, #view-table.fx-your-turn .felt, .board.dealing .card, .seat-bet:not(:empty), .seat.fx-fold .seat-avatar, .seat.fx-check .seat-box, .seat.fx-chips .seat-bet { animation: none !important; }
}

/* ------------------------------------------------ marca Clube Multiplay + --- */
/* "MULTIPLAY" em dourado com o "+" verde neon, igual ao logotipo. */
.brand-name { text-transform: none; }
.brand-plus {
  margin-left: 2px;
  color: #6bff3d;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(107, 255, 61, .55), 0 1px 0 #0a2d05;
}
/* logotipo na tela de acesso (o arquivo é largo: 1280x426) */
.auth-logo {
  display: block;
  width: min(100%, 340px);
  height: auto;
  margin: 2px auto 14px;
  border-radius: 10px;
}
@media (max-width: 720px) {
  .auth-logo { width: min(100%, 280px); margin-bottom: 10px; }
}

/* ------------------------------------------------------- sair da conta --- */
.logout-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px;
  margin-bottom: 14px;
}
.logout-info { display: grid; gap: 2px; margin-right: auto; }
.logout-info strong { color: var(--gold); font-family: var(--mono); font-size: 1.05rem; }
.logout-panel .btn.danger { white-space: nowrap; }
/* botão de sair do topo: discreto, mas com alvo de dedo confortável */
.btn-exit { min-height: 32px; padding: 4px 12px; }
@media (max-width: 720px) {
  .logout-panel { flex-direction: column; align-items: stretch; gap: 10px; }
  .logout-panel .btn.danger { width: 100%; min-height: 44px; font-size: 1rem; }
}

/* ------------------------------------------- código de convite do clube --- */
.invite-panel { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px; }
.invite-code {
  font-family: var(--mono);
  font-size: 1.9rem;
  letter-spacing: .22em;
  color: var(--gold);
  cursor: pointer;
  user-select: all;
  padding: 4px 10px;
  border: 1px dashed rgba(240, 217, 154, .45);
  border-radius: 10px;
}
.invite-code:hover { border-color: var(--gold); }
@media (max-width: 720px) {
  .invite-panel { flex-direction: column; align-items: stretch; }
  .invite-code { text-align: center; font-size: 2.1rem; }
  /* código digitado no celular: fonte grande, sem zoom automático do iOS */
  #club-join-code { font-size: 1.35rem; letter-spacing: .18em; text-transform: uppercase; text-align: center; }
  .club-join-panel .btn { min-height: 46px; }
}

/* ----------------------------------------- identidade Clube Multiplay + --- */
body.player-app {
  --bg: #03100c; --bg-2: #061a12; --panel: #071b14; --panel-2: #0a281b;
  --line: rgba(29, 193, 91, .28); --ink: #f3f7f4; --muted: #91aa9b;
  --gold: #ffc107; --gold-dim: #9b7a0c; --green: #00e676; --green-soft: #08783f;
  background: linear-gradient(rgba(1, 13, 9, .72), rgba(1, 10, 7, .9)), url('/assets/multiplay-neon-bg.png') center top / cover fixed, #03100c;
}
.player-app .topbar {
  background: linear-gradient(180deg, rgba(3, 21, 14, .98), rgba(2, 12, 9, .95));
  border-bottom-color: rgba(0, 230, 118, .42);
  box-shadow: 0 9px 30px rgba(0, 0, 0, .62), 0 1px 18px rgba(0, 230, 118, .12);
}
.player-app .brand-mark {
  color: #ecfff4; background: linear-gradient(145deg, #10c95d, #075229); border-color: #39f887;
  box-shadow: 0 0 16px rgba(0, 230, 118, .34), inset 0 1px 0 rgba(255, 255, 255, .24);
}
.player-app .brand-name { color: #f5f7f5; font-weight: 800; text-transform: uppercase; }
.player-app .brand-plus { color: #55ff45; text-shadow: 0 0 12px rgba(85, 255, 69, .72); }
.player-app .wallet { border-color: rgba(0, 230, 118, .34); background: rgba(2, 18, 12, .78); }
.player-app .wallet-chips { color: #ffd338; }
.player-app .connection-state { color: #57f49d; }

.player-app .auth-card, .player-app .panel, .player-app .side, .player-app .dlg {
  background: linear-gradient(160deg, rgba(8, 40, 27, .97), rgba(2, 15, 10, .98));
  border-color: rgba(20, 216, 102, .35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 28px rgba(0, 230, 118, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.player-app .auth-card { backdrop-filter: blur(9px); }
.player-app .auth-logo { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .62)); }
.player-app .tabs { background: rgba(1, 12, 8, .82); border-color: rgba(0, 230, 118, .26); }
.player-app .tab.active { color: #eaffef; background: linear-gradient(180deg, #0ab954, #067437); }
.player-app .field input, .player-app .field select, .player-app .chat-form input, .player-app .bet-value { background: #03130d; border-color: rgba(30, 173, 91, .38); }
.player-app .field input:focus, .player-app .field select:focus { border-color: #00e676; box-shadow: 0 0 0 3px rgba(0, 230, 118, .15); }

.player-app .btn { border-color: rgba(36, 164, 88, .38); background: linear-gradient(180deg, #123d29, #082319); }
.player-app .btn:hover { border-color: #19d768; background: linear-gradient(180deg, #185537, #0b3021); }
.player-app .btn.primary {
  color: #041109; background: linear-gradient(180deg, #53ff59, #00c845); border-color: #79ff7c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 17px rgba(0, 230, 77, .25);
}
.player-app .btn.primary:hover { background: linear-gradient(180deg, #75ff71, #09e553); }
.player-app .btn:focus-visible, .player-app .tab:focus-visible, .player-app .nav-btn:focus-visible, .player-app .avatar-choice:focus-visible { outline-color: rgba(58, 255, 124, .7); }

.multiplay-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 150px; margin-bottom: 22px; padding: 20px clamp(18px, 4vw, 42px);
  border: 1px solid rgba(42, 239, 113, .38); border-radius: 20px;
  background: linear-gradient(90deg, rgba(2, 19, 12, .9), rgba(4, 45, 25, .6), rgba(2, 18, 12, .86)), url('/assets/multiplay-neon-bg.png') center / cover;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .48), inset 0 0 35px rgba(0, 230, 118, .08);
}
.multiplay-hero::after { content: "♠  ♥  ♣  ♦"; position: absolute; right: 4%; bottom: -12px; z-index: -1; color: rgba(0, 255, 104, .13); font-size: clamp(3rem, 8vw, 7rem); letter-spacing: .08em; }
.multiplay-hero img { width: min(390px, 46%); height: auto; border-radius: 12px; filter: drop-shadow(0 9px 16px rgba(0, 0, 0, .7)); }
.multiplay-hero-copy { display: grid; gap: 6px; max-width: 340px; text-align: right; }
.multiplay-hero-copy strong { color: #fff; font-size: clamp(1.25rem, 2.6vw, 2.1rem); line-height: 1.04; }
.multiplay-hero-copy span { color: #b8d4c1; }

.player-app .view-head h2::after { background: linear-gradient(90deg, #00e676, #ffc107, transparent); }
.player-app .xpoker-lobby-filters { border-bottom-color: rgba(0, 230, 118, .34); background: linear-gradient(180deg, rgba(5, 51, 30, .56), rgba(2, 22, 14, .3)); }
.player-app .game-filter-tabs button, .player-app .stake-filter-tabs button { color: #8cb9a0; }
.player-app .game-filter-tabs button:hover, .player-app .stake-filter-tabs button:hover { color: #eaffef; background: rgba(0, 190, 83, .18); }
.player-app .game-filter-tabs button.active, .player-app .stake-filter-tabs button.active {
  color: #fff; border-color: #1ee973; background: linear-gradient(180deg, #0aa94d, #056b34); box-shadow: 0 0 16px rgba(0, 230, 118, .24);
}
.player-app .game-filter-tabs button.active::after { background: #75ff81; box-shadow: 0 0 8px #00e676; }
.player-app .lobby-filter-options { color: #92bca1; }
.player-app .lobby-filter-options input { accent-color: #00e676; }

.player-app .table-card { background: linear-gradient(145deg, rgba(10, 49, 31, .98), rgba(2, 19, 12, .98)); border-color: rgba(29, 199, 91, .34); }
.player-app .table-card::before { background: linear-gradient(90deg, transparent, #00e676, #ffc107, transparent); }
.player-app .table-card:hover { border-color: #21eb72; box-shadow: 0 20px 38px rgba(0, 0, 0, .55), 0 0 20px rgba(0, 230, 118, .12); }
.player-app .tc-variant { color: #69f3a0; }
.player-app .tc-meta { color: #94b3a0; }
.player-app .pip { background: #0b2f20; border-color: #17623b; }
.player-app .pip.on { background: #00e676; border-color: #94ffad; box-shadow: 0 0 7px rgba(0, 230, 118, .75); }

.player-app .nav { border-color: rgba(0, 230, 118, .35); background: rgba(2, 19, 12, .96); box-shadow: 0 12px 32px rgba(0, 0, 0, .68), inset 0 1px 8px rgba(0, 230, 118, .1); }
.player-app .nav-btn { color: #84a891; }
.player-app .nav-btn:hover { color: #effff3; background: rgba(0, 230, 118, .1); }
.player-app .nav-btn.active { color: #9dffb5; background: linear-gradient(180deg, rgba(0, 230, 118, .2), rgba(0, 120, 59, .14)); }
.player-app .nav-btn.active::after { background: linear-gradient(90deg, #00e676, #d5ff55); box-shadow: 0 0 9px #00e676; }
.player-app ::-webkit-scrollbar-thumb { background: #176b3a; }

@media (max-width: 720px) {
  .multiplay-hero { min-height: 0; padding: 14px; border-radius: 15px; }
  .multiplay-hero img { width: 58%; }
  .multiplay-hero-copy { gap: 3px; }
  .multiplay-hero-copy strong { font-size: 1rem; }
  .multiplay-hero-copy span { font-size: .72rem; }
  .player-app .auth-card { width: 100%; margin-top: 4vh; padding: 22px 20px; }
  .player-app .auth-logo { width: 100%; max-width: 280px; }
}

/* ==========================================================================
   CAMADA DE ESCALA + POSIÇÕES AJUSTÁVEIS  (estúdio da mesa)
   --------------------------------------------------------------------------
   Problema que isto resolve: o desenho da mesa era em px fixo (assento 128px,
   avatar 58px, carta 56px) enquanto a POSIÇÃO era em %. No celular a mesa
   encolhe, as peças não — os jogadores ficavam desproporcionais e o texto
   estourava.

   Agora tudo dentro do feltro é medido em `--u` (1 = mesa de 820px de largura,
   ajustado por JS conforme o tamanho real). E cada peça tem um deslocamento
   `--<peça>-dx/dy` que o estúdio muda arrastando com o mouse/dedo.
   Sem layout salvo, todos os valores caem no padrão antigo: nada muda.
   ========================================================================== */

.felt {
  --u: 1;              /* unidade de escala (JS atualiza) */
  --t: 1;              /* multiplicador de tipografia */
  --avatar-mult: 1;    /* tamanho do avatar */
  --card-mult: 1;      /* tamanho das cartas */
  --ring-margin: 6%;   /* margem dos assentos em relação à borda */
  touch-action: none;
}
#view-table:not(.layout-edit) .felt { touch-action: auto; }

/* ---------------------------------------------------------------- assento --- */
.seat,
#view-table.table-compact .seat {
  width: calc(128px * var(--u));
  height: calc(108px * var(--u));
}

.seat-box {
  left: calc(6px * var(--u) + var(--box-dx, 0px));
  top: calc(42px * var(--u) + var(--box-dy, 0px));
  width: calc(116px * var(--u));
  padding: calc(16px * var(--u)) calc(9px * var(--u)) calc(8px * var(--u));
  gap: calc(2px * var(--u));
  border-radius: calc(11px * var(--u));
}
.seat.empty .seat-box {
  left: calc(40px * var(--u) + var(--box-dx, 0px));
  top: calc(30px * var(--u) + var(--box-dy, 0px));
  width: calc(48px * var(--u));
  height: calc(48px * var(--u));
}
.seat.empty .seat-box::before { font-size: calc(1.7rem * var(--u) * var(--t)); }

.seat-avatar,
#view-table.table-compact .seat-avatar {
  left: calc(35px * var(--u) + var(--avatar-dx, 0px));
  top: calc(0px * var(--u) + var(--avatar-dy, 0px));
  width: calc(58px * var(--u) * var(--avatar-mult));
  height: calc(58px * var(--u) * var(--avatar-mult));
  border-width: calc(3px * var(--u));
  font-size: calc(1.5rem * var(--u) * var(--avatar-mult));
}

.seat-name { font-size: calc(.78rem * var(--t) * var(--u)); }
.seat-stack { font-size: calc(.82rem * var(--t) * var(--u)); }
.seat-tag { font-size: calc(.64rem * var(--t) * var(--u)); }
.seat-action { font-size: calc(.68rem * var(--t)); bottom: calc(-13px * var(--u)); }
.seat-timer { height: calc(4px * var(--u)); }

/* cartas e fichas do jogador: cada lado tem seu encaixe, todos somam o delta */
.seat-top .seat-cards { left: calc(50% + var(--cards-dx, 0px)); top: calc(105px * var(--u) + var(--cards-dy, 0px)); }
.seat-bottom .seat-cards { left: calc(50% + var(--cards-dx, 0px)); bottom: calc(112px * var(--u) - var(--cards-dy, 0px)); }
.seat-left .seat-cards { left: calc(120px * var(--u) + var(--cards-dx, 0px)); top: calc(18px * var(--u) + var(--cards-dy, 0px)); }
.seat-right .seat-cards { right: calc(120px * var(--u) - var(--cards-dx, 0px)); top: calc(18px * var(--u) + var(--cards-dy, 0px)); }

.seat-top .seat-bet { left: calc(50% + var(--bet-dx, 0px)); top: calc(160px * var(--u) + var(--bet-dy, 0px)); }
.seat-bottom .seat-bet { left: calc(50% + var(--bet-dx, 0px)); bottom: calc(124px * var(--u) - var(--bet-dy, 0px)); }
.seat-left .seat-bet { left: calc(126px * var(--u) + var(--bet-dx, 0px)); top: calc(73px * var(--u) + var(--bet-dy, 0px)); }
.seat-right .seat-bet { right: calc(126px * var(--u) - var(--bet-dx, 0px)); top: calc(73px * var(--u) + var(--bet-dy, 0px)); }
.seat-bet { font-size: calc(.72rem * var(--t) * var(--u)); padding: calc(2px * var(--u)) calc(9px * var(--u)) calc(2px * var(--u)) calc(22px * var(--u)); min-height: calc(20px * var(--u)); }

.dealer {
  right: calc(-9px * var(--u)); top: calc(-9px * var(--u));
  width: calc(22px * var(--u)); height: calc(22px * var(--u));
  font-size: calc(.62rem * var(--u));
}

.seat-delta { font-size: calc(.68rem * var(--t)); }

/* ------------------------------------------------------ cartas da mesa --- */
.board { left: calc(50% + var(--board-dx, 0px)); top: calc(44% + var(--board-dy, 0px)); gap: calc(8px * var(--u)); }
.board:not(:empty) { padding: calc(9px * var(--u)) calc(12px * var(--u)); border-radius: calc(13px * var(--u)); }
.board .card,
#view-table.table-compact .board .card {
  width: calc(56px * var(--u) * var(--card-mult));
  height: calc(78px * var(--u) * var(--card-mult));
  border-radius: calc(8px * var(--u));
}
.board .card .r,
#view-table.table-compact .board .card .r { font-size: calc(1.15rem * var(--t) * var(--card-mult)); }
.board .card .s,
#view-table.table-compact .board .card .s { font-size: calc(1.5rem * var(--t) * var(--card-mult)); }

.seat-cards .card.small {
  width: calc(26px * var(--u) * var(--card-mult));
  height: calc(36px * var(--u) * var(--card-mult));
}

/* ---------------------------------------------------------------- pote --- */
.pot {
  left: calc(50% + var(--pot-dx, 0px));
  top: calc(61% + var(--pot-dy, 0px));
  font-size: calc(.92rem * var(--t) * var(--u));
  padding: calc(5px * var(--u)) calc(15px * var(--u)) calc(5px * var(--u)) calc(34px * var(--u));
}
.pot::before { left: calc(7px * var(--u)); width: calc(18px * var(--u)); height: calc(18px * var(--u)); }

/* ------------------------------------------------- placa do nome da mesa --- */
.table-head,
#view-table.table-compact .table-head {
  left: calc(50% + var(--head-dx, 0px));
  top: calc(17px * var(--u) + var(--head-dy, 0px));
  padding: calc(6px * var(--u)) calc(18px * var(--u)) calc(7px * var(--u));
  border-radius: 0 0 calc(12px * var(--u)) calc(12px * var(--u));
  max-width: 46%;
}
.table-name,
#view-table.table-compact .table-name { font-size: calc(.92rem * var(--t) * var(--u)); }
.table-meta,
#view-table.table-compact .table-meta { font-size: calc(.68rem * var(--t) * var(--u)); }

/* -------------------------------------------------- marca gravada no pano --- */
.table-engraving {
  left: calc(50% + var(--brand-dx, 0px));
  top: calc(68% + var(--brand-dy, 0px));
}
.table-engraving span { font-size: calc(2.1rem * var(--u) * var(--t)); }
.table-engraving strong { font-size: calc(2rem * var(--u) * var(--t)); }
.table-engraving small { font-size: calc(.55rem * var(--u) * var(--t)); }
#view-table.table-compact .table-engraving strong { font-size: calc(1.2rem * var(--u) * var(--t)); }
#view-table.table-compact .table-engraving span { font-size: calc(1.5rem * var(--u) * var(--t)); }

/* ============================================================== ESTÚDIO === */
#layout-studio {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 80; width: min(680px, calc(100vw - 24px));
  display: grid; gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(234, 198, 91, .5); border-radius: 14px;
  background: rgba(4, 14, 21, .97); color: #d7e9f2;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .7);
  backdrop-filter: blur(10px);
  font-size: .8rem;
}
#layout-studio[hidden] { display: none; }
#layout-studio .studio-head { display: flex; align-items: center; gap: 10px; }
#layout-studio .studio-head strong { color: var(--gold); margin-right: auto; }
#layout-studio .studio-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 14px;
}
#layout-studio label { display: grid; gap: 3px; font-size: .7rem; color: #9dc0d0; }
#layout-studio input[type="range"] { width: 100%; accent-color: #d8b45a; }
#layout-studio .studio-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#layout-studio .studio-hint { color: #8fb2c2; font-size: .72rem; }

/* no modo ajuste: contornos e peças vazias visíveis para arrastar */
#view-table.layout-edit .felt { outline: 2px dashed rgba(234, 198, 91, .45); outline-offset: 4px; }
#view-table.layout-edit [data-drag] {
  cursor: grab;
  outline: 1px dashed rgba(120, 200, 240, .55);
  outline-offset: 2px;
  /* a placa do nome e a marca do pano são pointer-events:none no jogo normal;
     no estúdio precisam receber o clique para arrastar */
  pointer-events: auto !important;
}
#view-table.layout-edit [data-drag]:hover { outline-color: #ffe88d; box-shadow: 0 0 0 2px rgba(255, 224, 101, .25); }
#view-table.layout-edit .pot:empty,
#view-table.layout-edit .board:empty,
#view-table.layout-edit .seat-bet:empty,
#view-table.layout-edit .table-head:empty { display: revert; visibility: visible; }
#view-table.layout-edit .pot:empty::after { content: "pote"; opacity: .55; }
#view-table.layout-edit .seat-bet:empty::after { content: "aposta"; opacity: .55; }
#view-table.layout-edit .table-engraving { opacity: .5; }
#view-table.layout-edit .seat,
#view-table.layout-edit .seat * { pointer-events: auto; }