/* ═════════════════════════════════════════════════════════════════
   BURACO — its own design system (buraco-app.js)   B65 W8
   The approved sample: samples/b65/buraco-a.html (Direction A · Salón, round 2)
   — petrol felt + pewter/silver, ivory cards, Source Serif 4 + Inter,
   high-contrast text on the felt, a two-column New table with a live summary.
   Dark = the sample's evening salon; light = the salon by day (pale pewter
   room, the same ivory cards and petrol felt accents).
   Class-only selectors near icons (the icon-font rule): nothing here styles a
   bare span/i inside a container that holds a .mi.
   ═════════════════════════════════════════════════════════════════ */

/* ── which chrome shows ─────────────────────────────────────────── */
html:not([data-app="buraco"]) #buxShell{ display:none !important; }
html[data-app="buraco"] #shell{ display:block; height:auto; min-height:100dvh; overflow:visible; background:transparent; }
html[data-app="buraco"] #shell > .nav,
html[data-app="buraco"] #shell > .sb,
html[data-app="buraco"] #shell > #scrim,
html[data-app="buraco"] #shell > .tb,
html[data-app="buraco"] #shell > #pageFab,
html[data-app="buraco"] #shell > main.body,
html[data-app="buraco"] .route-fab{ display:none !important; }
html[data-app="buraco"] body{ background:#e4ebea; }
html[data-app="buraco"][data-theme="dark"] body{ background:#0a2125; }

/* ── tokens ─────────────────────────────────────────────────────── */
.bux{
  --felt:#0f2e33; --felt2:#0a2125; --felt3:#17434a; --ruby:#a3243a; --ok:#2f7d6d;
  --ivory:#f7f5ef; --ivory2:#ece9e0; --ink:#16191b; --ink2:#4c5559; --inkline:rgba(22,25,27,.1);
  /* the room (light: salon by day) */
  --room:radial-gradient(120% 80% at 50% 0%,#f3f6f5,#e4ebea 55%,#d9e2e1);
  --on:#0f2e33; --on2:#4a5d61; --silver:#3f6a71; --silver2:#0f2e33; --line:rgba(15,46,51,.14);
  --item:rgba(255,255,255,.7); --item-bd:rgba(15,46,51,.1); --item2:rgba(15,46,51,.06); --pop:#fbfaf6;
  --fab-bg:var(--felt); --fab-fg:#eef3f3; --bar:rgba(243,246,245,.86); --noise:.05;
  --serif:'Source Serif 4',Georgia,'Noto Naskh Arabic','Times New Roman',serif; --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  position:relative; isolation:isolate; /* the felt noise stays under the page (it bled over the cards as a band) */ min-height:100dvh; color:var(--on); font-family:var(--ui); -webkit-font-smoothing:antialiased; background:var(--room);
}
html[data-theme="dark"] .bux{
  --room:radial-gradient(120% 80% at 50% 0%,#17434a,#0f2e33 50%,#0a2125);
  --on:#eef3f3; --on2:#b8cbcd; --silver:#c7d4d6; --silver2:#eef3f3; --line:rgba(199,212,214,.24);
  --item:rgba(238,243,243,.06); --item-bd:rgba(199,212,214,.24); --item2:rgba(238,243,243,.1); --pop:#0d2a2f;
  --fab-bg:var(--ivory); --fab-fg:var(--felt); --bar:rgba(10,33,37,.9); --noise:.14;
}
.bux::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--noise);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
html[lang^="ar"] .bux{ --ui:'Inter','Noto Sans Arabic',system-ui,sans-serif; }
:where(.bux) :where(button){ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:where(.bux) :where(input){ font:inherit; color:inherit; }
.bux button:focus-visible, .bux input:focus-visible{ outline:2px solid var(--silver); outline-offset:2px; }
.bux .bux-card button:focus-visible, .bux .bux-card input:focus-visible{ outline-color:var(--felt); }
.bux [hidden]{ display:none !important; }

/* signed-out ⇄ signed-in */
#shell.signed-out .bux-top, #shell.signed-out .bux-main, #shell.signed-out .bux-bn, #shell.signed-out .bux-fab, #shell.signed-out .bux-pop{ display:none !important; }
#shell.signed-in .bux-out{ display:none; }

/* ── the top bar ────────────────────────────────────────────────── */
.bux-top{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px; max-width:1180px; margin:0 auto; padding:14px 24px; border-bottom:1px solid var(--line); background:var(--bar); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.bux-brand{ display:flex; align-items:center; gap:12px; text-align:start; }
.bux-crest{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--felt); color:var(--ivory); box-shadow:0 8px 20px -10px rgba(0,0,0,.6); flex:0 0 auto; }
html[data-theme="dark"] .bux-crest{ background:var(--ivory); color:var(--felt); }
.bux-crest > svg{ width:24px; height:24px; display:block; }
.bux-crest.is-lg{ width:64px; height:64px; border-radius:16px; } .bux-crest.is-lg > svg{ width:36px; height:36px; }
.bux-word{ display:flex; flex-direction:column; }
.bux-word > b{ font:600 23px/1 var(--serif); letter-spacing:.005em; color:var(--silver2); }
.bux .mk-by{ display:inline-flex; align-items:center; gap:4px; margin-top:5px; font:500 11px/1 var(--ui); color:var(--on2); white-space:nowrap; }
.bux .mk-by > .mk-by-ic{ height:12px; width:12px; display:block; border-radius:3px; }
.bux .mk-by > .mk-by-wm{ height:10px; width:auto; display:block; }
.bux .mk-by > .mk-by-wm.is-ar{ height:12px; }
.bux .mk-by > .is-d, html[data-theme="dark"] .bux .mk-by > .is-l{ display:none; }
html[data-theme="dark"] .bux .mk-by > .is-d{ display:block; }
.bux .mk-by > .is-ar, html[lang^="ar"] .bux .mk-by > .is-lat{ display:none !important; }
html[lang^="ar"] .bux .mk-by > .is-ar.is-l{ display:block !important; }
html[lang^="ar"][data-theme="dark"] .bux .mk-by > .is-ar.is-l{ display:none !important; }
html[lang^="ar"][data-theme="dark"] .bux .mk-by > .is-ar.is-d{ display:block !important; }
.bux-tabs{ display:flex; gap:2px; margin-inline-start:22px; }
.bux-tab{ height:40px; padding:0 14px !important; border-radius:10px; font:600 13.5px var(--ui) !important; color:var(--on2) !important; display:inline-flex; align-items:center; gap:7px; }
.bux-tab > .mi{ font-size:20px; }
.bux-tab:hover{ color:var(--on) !important; }
.bux-tab.on{ color:var(--on) !important; background:var(--item2) !important; box-shadow:inset 0 -2px 0 var(--silver); }
.bux-sp{ flex:1; }
.bux-orb{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line) !important; background:var(--item) !important; color:var(--on) !important; flex:0 0 auto; }
.bux-orb > .mi{ font-size:20px; }
.bux-me{ width:38px; height:38px; border-radius:50%; background-color:var(--item2) !important; background-position:center; background-size:cover; background-repeat:no-repeat; border:2px solid var(--silver) !important; flex:0 0 auto; }
.bux-me.is-sm{ width:40px; height:40px; }

/* the profile menu */
.bux-pop{ position:fixed; z-index:60; top:66px; inset-inline-end:max(16px, calc((100vw - 1180px) / 2 + 20px)); width:min(300px, calc(100vw - 32px)); padding:10px; border-radius:16px; background:var(--pop); border:1px solid var(--line); box-shadow:0 26px 50px -24px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:2px; }
.bux-menu-h{ display:flex; align-items:center; gap:10px; padding:6px 6px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.bux-menu-h > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.bux-menu-h b{ font:600 15px var(--serif); color:var(--silver2); }
.bux-menu-h small{ font:500 12px var(--ui); color:var(--on2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bux-menu-l{ font:600 11px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--silver); padding:6px 8px 4px; }
.bux-menu > [role="menuitem"]{ display:flex; align-items:center; gap:10px; height:42px; padding:0 10px !important; border-radius:10px; font:600 14px var(--ui) !important; color:var(--on) !important; text-align:start; }
.bux-menu > [role="menuitem"]:hover{ background:var(--item2) !important; }
.bux-menu > [role="menuitem"] > .mi{ font-size:20px; color:var(--silver); }
.bux-langs{ display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--item2); margin:0 2px 4px; }
.bux-langs > button{ flex:1; height:34px; border-radius:9px; font:600 13px var(--ui) !important; color:var(--on2) !important; }
.bux-langs > button[aria-pressed="true"]{ background:var(--pop) !important; color:var(--on) !important; box-shadow:0 1px 3px rgba(0,0,0,.15); }

/* ── the page ───────────────────────────────────────────────────── */
.bux-main{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:24px 24px 120px; }
.bux-eyebrow{ font:600 11.5px/1.3 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--silver); }
.bux-eyebrow.is-ink{ color:var(--ink2); }
html[lang^="ar"] .bux-eyebrow{ letter-spacing:0; }
.bux-h1{ font:600 clamp(30px,4vw,42px)/1.08 var(--serif); letter-spacing:-.015em; margin:8px 0 4px; color:var(--silver2); }
.bux-lede{ font:400 15px/1.5 var(--ui); color:var(--on2); margin:0; }
.bux-none{ margin:0; padding:14px 16px; border-radius:14px; border:1px dashed var(--line); color:var(--on2); font:500 14px var(--ui); }

/* buttons */
.bux-btn{ height:44px; padding:0 18px !important; border-radius:11px; border:1px solid var(--line) !important; background:var(--item) !important; color:var(--on) !important; font:600 14px var(--ui) !important; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
.bux-btn > .mi{ font-size:20px; }
.bux-btn.is-pri{ background:var(--felt) !important; color:#eef3f3 !important; border-color:transparent !important; }
.bux-btn.is-silver{ background:var(--felt) !important; color:#eef3f3 !important; }
html[data-theme="dark"] .bux-btn.is-silver, html[data-theme="dark"] .bux-btn.is-pri.is-felt{ background:var(--ivory) !important; color:var(--felt) !important; }
.bux-btn.is-danger{ background:var(--ruby) !important; }
.bux-btn.is-wide{ width:100%; height:50px; }
.bux-btn:disabled{ opacity:.45; cursor:default; }
.bux-card .bux-btn{ color:var(--felt) !important; border-color:rgba(15,46,51,.2) !important; background:#fff !important; }
.bux-card .bux-btn.is-pri{ background:var(--felt) !important; color:#eef3f3 !important; border-color:transparent !important; }
.bux-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.bux-row.is-top{ margin:0 0 4px; }

/* ivory cards */
.bux-card{ background:linear-gradient(180deg,var(--ivory),var(--ivory2)); color:var(--ink); border-radius:16px; box-shadow:0 26px 50px -28px rgba(0,0,0,.55); border:1px solid rgba(22,25,27,.06); }
.bux-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:22px; margin-top:22px; align-items:start; }
.bux-col{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.bux-live{ padding:22px 24px; }
.bux-live-hd{ display:flex; align-items:center; gap:10px; }
.bux-dot{ width:9px; height:9px; border-radius:50%; background:var(--ruby); box-shadow:0 0 0 4px rgba(163,36,58,.18); animation:bux-pulse 1.6s infinite; flex:0 0 auto; }
@keyframes bux-pulse{ 50%{ box-shadow:0 0 0 8px rgba(163,36,58,0); } }
.bux-live h2{ margin:0; font:600 22px/1.2 var(--serif); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bux-meta-s{ font:500 13px var(--ui); color:var(--ink2); white-space:nowrap; }
.bux-vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:end; margin:20px 0 14px; }
.bux-team{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.bux-team.is-r{ align-items:flex-end; text-align:end; }
.bux-team > b{ font:600 46px/1 var(--serif); letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums; }
.bux-team > span:last-child{ font:600 13.5px var(--ui); color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.bux-x{ font:600 14px var(--ui); color:var(--ink2); padding-bottom:18px; letter-spacing:.1em; text-transform:uppercase; }
.bux-rk{ display:flex; flex-direction:column; gap:6px; margin:16px 0 12px; }
.bux-rk-r{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px; background:#fff; border:1px solid var(--inkline); }
.bux-rk-r > em{ font:600 16px var(--serif); font-style:normal; color:var(--ink2); min-width:16px; }
.bux-rk-r > span:not(.bux-pair){ flex:1; min-width:0; font:600 14px var(--ui); }
.bux-rk-r > b{ font:600 22px var(--serif); font-variant-numeric:tabular-nums lining-nums; }
.bux-pair{ display:inline-flex; flex:0 0 auto; }
.bux-av{ width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; font:700 12px var(--ui); color:#16191b; background:center/cover no-repeat hsl(var(--h,200) 55% 72%); border:2px solid var(--ivory); flex:0 0 auto; }
.bux-pair > .bux-av + .bux-av{ margin-inline-start:-8px; }
.bux-av.is-open{ background:transparent; border:1.5px dashed rgba(22,25,27,.3); color:var(--ink2); }
.bux-av.is-open > .mi{ font-size:17px; }
.bux-av.is-q{ border-style:dashed; }
.bux-race{ height:8px; border-radius:999px; background:rgba(22,25,27,.1); position:relative; overflow:hidden; }
.bux-race > i{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:999px; background:var(--felt); }
.bux-race.is-sm{ height:6px; flex:1; }
.bux-meta{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font:500 13px var(--ui); color:var(--ink2); margin-top:8px; }
.bux-side{ display:flex; align-items:center; gap:8px; margin-top:16px; padding:10px 12px; border-radius:10px; background:rgba(15,46,51,.07); font:600 13.5px/1.35 var(--ui); color:var(--felt); }
.bux-side > .mi{ font-size:19px; }
.bux-side.is-warn{ color:var(--ruby); background:rgba(163,36,58,.07); }
.bux-mks{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.bux-mk{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px; background:rgba(22,25,27,.06); font:600 12px var(--ui); color:var(--ink2); white-space:nowrap; }
.bux-mk > .mi{ font-size:15px; }
.bux-mk.is-done{ color:var(--ok); background:rgba(47,125,109,.12); }
.bux-empty{ padding:28px 24px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.bux-empty > .mi{ font-size:30px; color:var(--felt); }
.bux-empty h2{ margin:4px 0 0; font:600 22px var(--serif); }
.bux-empty p{ margin:0; font:500 14px/1.5 var(--ui); color:var(--ink2); }

/* lists (on the room) */
.bux-sec-h{ display:flex; align-items:baseline; justify-content:space-between; margin:30px 2px 12px; }
.bux-sec-h.is-first{ margin-top:0; }
.bux-sec-h h3{ margin:0; font:600 20px var(--serif); color:var(--silver2); }
.bux-list{ display:flex; flex-direction:column; gap:10px; }
.bux-list.is-2{ display:grid; grid-template-columns:1fr 1fr; }
.bux-item{ display:flex; align-items:center; gap:14px; padding:14px 16px !important; border-radius:14px; background:var(--item) !important; border:1px solid var(--item-bd) !important; text-align:start; width:100%; min-width:0; }
.bux-item:hover{ background:var(--item2) !important; }
.bux-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bux-m > b{ font:600 16px/1.25 var(--serif); color:var(--silver2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bux-m > span:not(.bux-pair){ font:500 13px/1.4 var(--ui); color:var(--on2); }
.bux-m > .bux-pair{ margin-top:8px; }
.bux-m .bux-av, .bux-item > .bux-pair .bux-av{ width:30px; height:30px; font-size:10.5px; border-color:var(--pop); }
.bux-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--item2); color:var(--silver); flex:0 0 auto; }
.bux-ic > .mi{ font-size:20px; }
.bux-acc{ font:600 12.5px var(--ui); color:var(--silver2); background:var(--item2); padding:4px 10px; border-radius:999px; white-space:nowrap; flex:0 0 auto; }
.bux-acc.is-inv{ background:var(--felt); color:#eef3f3; }
html[data-theme="dark"] .bux-acc.is-inv{ background:var(--ivory); color:var(--felt); }

/* segmented controls */
.bux-seg{ display:inline-flex; flex-wrap:wrap; padding:4px; border-radius:12px; background:rgba(15,46,51,.07); gap:2px; align-self:flex-start; }
.bux-seg > button{ min-height:38px; padding:0 16px !important; border-radius:9px; font:600 13.5px var(--ui) !important; color:var(--ink2) !important; }
.bux-seg > button.on{ background:#fff !important; color:var(--felt) !important; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.bux-seg.is-felt{ background:var(--item2); margin-top:16px; }
.bux-seg.is-felt > button{ color:var(--on2) !important; }
.bux-seg.is-felt > button.on{ background:var(--pop) !important; color:var(--on) !important; }
.bux-seg.is-felt > button em{ font-style:normal; font-weight:500; opacity:.75; }
.bux-seg.is-sm > button{ min-height:32px; padding:0 11px !important; font-size:12.5px !important; }
.bux-for{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bux-for > span{ font:600 12px var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--silver); margin-top:16px; }
.bux-note{ display:flex; align-items:center; gap:8px; margin-top:16px; padding:11px 14px; border-radius:12px; background:var(--item2); border:1px solid var(--item-bd); font:600 13.5px/1.4 var(--ui); color:var(--on); }
.bux-note > .mi{ font-size:19px; color:var(--silver); }
.bux-note.is-ink{ background:rgba(15,46,51,.06); border-color:transparent; color:var(--felt); margin:0; }
.bux-note.is-ink > .mi{ color:var(--felt); }
html[data-theme="dark"] .bux-sheet .bux-note.is-ink{ background:rgba(238,243,243,.08); color:var(--on); }
html[data-theme="dark"] .bux-sheet .bux-note.is-ink > .mi{ color:var(--silver); }

/* ── the score sheet ────────────────────────────────────────────── */
.bux-sheet-g{ display:grid; grid-template-columns:1.25fr 1fr; gap:22px; margin-top:22px; align-items:start; }
.bux-pad{ padding:20px 22px; }
.bux-pad h3{ margin:0 0 4px; font:600 19px var(--serif); }
.bux-bks{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.bux-bk{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 10px 14px; border-radius:12px; background:#fff; border:1px solid rgba(22,25,27,.08); min-width:0; }
[dir="rtl"] .bux-bk{ padding:10px 14px 10px 10px; }
.bux-bk.is-on{ border-color:rgba(15,46,51,.35); box-shadow:0 0 0 2px rgba(15,46,51,.08); }
.bux-bk > div{ min-width:0; }
.bux-bk b{ font:600 14px/1.25 var(--ui); display:block; }
.bux-bk small{ font:600 12.5px var(--ui); color:var(--ok); }
.bux-bk.is-neg small{ color:var(--ruby); }
.bux-stp{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.bux-stp > button{ width:34px; height:34px; border-radius:9px; border:1px solid rgba(22,25,27,.14) !important; background:var(--ivory) !important; display:grid; place-items:center; color:var(--ink) !important; }
.bux-stp > button:disabled{ opacity:.35; cursor:default; }
.bux-stp > button > .mi{ font-size:17px; }
.bux-stp > em{ min-width:22px; text-align:center; font:600 18px var(--serif); font-style:normal; font-variant-numeric:tabular-nums; }
.bux-tg{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px; border-top:1px solid var(--inkline); font:600 14.5px/1.3 var(--ui); }
.bux-tg.is-first{ margin-top:14px; }
.bux-tg small{ display:block; font:500 12.5px/1.35 var(--ui); color:var(--ink2); margin-top:2px; }
.bux-tg label{ cursor:pointer; }
.bux-tg.is-note{ justify-content:flex-start; color:var(--ink2); font-weight:500; font-size:13.5px; }
.bux-tg.is-note > .mi{ font-size:19px; color:var(--felt); }
.bux-sw{ width:50px; height:30px; border-radius:999px; background:rgba(22,25,27,.2) !important; position:relative; flex:0 0 auto; }
.bux-sw::after{ content:''; position:absolute; top:4px; inset-inline-start:4px; width:22px; height:22px; border-radius:50%; background:#fff; transition:inset-inline-start .2s; box-shadow:0 2px 4px rgba(0,0,0,.25); }
.bux-sw.on{ background:var(--felt) !important; }
.bux-sw.on::after{ inset-inline-start:24px; }
.bux-cardin{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
.bux-cardin > input{ width:110px; height:44px; border-radius:10px; border:1px solid rgba(22,25,27,.2); background:#fff; text-align:end; padding:0 12px; font:600 18px var(--serif); color:var(--ink); font-variant-numeric:tabular-nums; }
.bux-neg{ width:40px; height:44px; border-radius:10px; border:1px solid rgba(22,25,27,.2) !important; background:#fff !important; font:600 20px var(--serif) !important; color:var(--ink2) !important; }
.bux-neg.on{ background:var(--ruby) !important; color:#fff !important; border-color:transparent !important; }
.bux-tot{ padding:20px 22px; display:flex; flex-direction:column; gap:4px; }
.bux-n{ font:600 58px/1 var(--serif); letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums; margin:6px 0 10px; }
.bux-br{ display:flex; justify-content:space-between; gap:10px; font:500 14px var(--ui); color:var(--ink2); padding:7px 0; border-bottom:1px solid rgba(22,25,27,.08); }
.bux-br em{ font-style:normal; font-size:12px; color:var(--ruby); }
.bux-br > b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bux-br > b.is-neg{ color:var(--ruby); }
.bux-warn{ display:flex; align-items:center; gap:8px; margin-top:10px; padding:9px 11px; border-radius:10px; background:rgba(163,36,58,.08); color:var(--ruby); font:600 13px/1.35 var(--ui); }
.bux-warn > .mi{ font-size:18px; }
.bux-oth{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--inkline); font:600 14px var(--ui); }
.bux-oth:first-of-type{ border-top:0; }
.bux-oth > span:not(.bux-pair):not(.bux-mk){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bux-oth .bux-av{ width:30px; height:30px; font-size:10.5px; }
.bux-tbl{ width:100%; border-collapse:collapse; font:500 14px var(--ui); margin-top:10px; }
.bux-tbl th{ font:600 11px var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); text-align:end; padding:6px; }
.bux-tbl td{ padding:9px 6px; border-top:1px solid var(--inkline); text-align:end; font:600 16px var(--serif); font-variant-numeric:tabular-nums lining-nums; }
.bux-tbl td.is-neg{ color:var(--ruby); }
.bux-tbl td:first-child, .bux-tbl th:first-child{ text-align:start; }
.bux-tbl tfoot td{ border-top:2px solid var(--ink); }
.bux-tbl td.bux-none-td{ text-align:center; font:500 14px var(--ui); color:var(--ink2); }
html[lang^="ar"] .bux-tbl th{ letter-spacing:0; }

/* ── new table — two columns, room to breathe ───────────────────── */
.bux-nt{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; margin-top:22px; align-items:start; }
.bux-form{ padding:0; }
.bux-fs{ padding:22px 24px; border-top:1px solid rgba(22,25,27,.08); display:flex; flex-direction:column; gap:12px; }
.bux-fs:first-child{ border-top:0; }
.bux-fs h4{ margin:0; font:600 17px var(--serif); }
.bux-hint{ font:500 13px/1.5 var(--ui); color:var(--ink2); margin:0; }
.bux-err{ font:600 13px var(--ui); color:var(--ruby); margin:-4px 0 0; }
.bux-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bux-fld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.bux-fld > span{ font:600 12px var(--ui); color:var(--ink2); }
.bux-inp{ height:46px; border-radius:11px; border:1px solid rgba(22,25,27,.18); background:#fff; padding:0 14px; font:500 15px var(--ui); color:var(--ink); width:100%; min-width:0; }
.bux-inp.is-err{ border-color:var(--ruby); box-shadow:0 0 0 3px rgba(163,36,58,.12); }
.bux-pairs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bux-pairbox{ padding:14px; border-radius:13px; background:#fff; border:1px solid rgba(22,25,27,.1); display:flex; flex-direction:column; gap:10px; min-width:0; }
.bux-pairbox-h{ display:flex; align-items:center; justify-content:space-between; }
.bux-pairbox-h > b{ font:600 15px var(--serif); }
.bux-pairbox.is-add{ flex-direction:row; align-items:center; justify-content:center; gap:8px; border-style:dashed !important; border:1px dashed rgba(22,25,27,.25) !important; background:transparent !important; color:var(--ink2) !important; font:600 14px var(--ui) !important; min-height:64px; }
.bux-who{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bux-pchip{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 8px 0 3px; border-radius:999px; background:var(--ivory); border:1px solid rgba(22,25,27,.1); font:600 13.5px var(--ui); color:var(--ink); max-width:100%; }
[dir="rtl"] .bux-pchip{ padding:0 3px 0 8px; }
.bux-pchip > span:not(.bux-av):not(.mi){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bux-pchip > .bux-av{ width:34px; height:34px; border-width:0; }
.bux-pchip.is-inv{ border:1px dashed rgba(22,25,27,.3) !important; background:none !important; color:var(--ink2) !important; padding:0 14px !important; font:600 13.5px var(--ui) !important; }
.bux-pchip.is-inv > .mi{ font-size:18px; }
.bux-pchip.is-sm{ height:32px; padding:0 10px !important; font-size:12.5px !important; }
.bux-x-b{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--ink2) !important; }
.bux-x-b:hover{ background:rgba(22,25,27,.08) !important; }
.bux-x-b > .mi{ font-size:17px; }
.bux-opts{ display:grid; gap:8px; }
.bux-opt{ display:flex; align-items:center; gap:12px; padding:12px 14px !important; border-radius:12px; border:1px solid rgba(22,25,27,.12) !important; background:#fff !important; text-align:start; color:var(--ink) !important; }
.bux-opt > span:not(.mi){ display:flex; flex-direction:column; flex:1; min-width:0; }
.bux-opt b{ font:600 14px var(--ui); }
.bux-opt small{ font:500 12.5px var(--ui); color:var(--ink2); margin-top:2px; }
.bux-opt.on{ border-color:var(--felt) !important; box-shadow:0 0 0 3px rgba(15,46,51,.14); }
.bux-opt > .mi{ color:var(--felt); }
.bux-rb{ margin-inline-start:auto; width:20px; height:20px; border-radius:50%; border:2px solid rgba(22,25,27,.3); flex:0 0 auto; }
.bux-opt.on .bux-rb{ border:6px solid var(--felt); }
.bux-summary{ padding:22px; position:sticky; top:96px; display:flex; flex-direction:column; gap:14px; background:var(--item); border:1px solid var(--item-bd); border-radius:16px; }
.bux-summary h4{ margin:0; font:600 18px var(--serif); color:var(--silver2); overflow-wrap:anywhere; }
.bux-sm-vs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; align-items:center; text-align:center; }
.bux-sm-vs > div{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.bux-sm-vs > div > span:last-child{ font:600 13px var(--ui); color:var(--on2); }
.bux-sm-vs .bux-av{ border-color:var(--pop); }
.bux-sm-vs .bux-av.is-open{ border-color:var(--line); color:var(--on2); }
.bux-sm-row{ display:flex; justify-content:space-between; gap:12px; font:500 14px var(--ui); color:var(--on2); padding:8px 0; border-top:1px solid var(--line); }
.bux-sm-row > b{ color:var(--silver2); font-weight:600; text-align:end; }

/* ── FAB + phone tabs ───────────────────────────────────────────── */
.bux-fab{ position:fixed; z-index:40; inset-inline-end:max(22px, calc((100vw - 1180px) / 2 + 22px)); bottom:24px; width:58px; height:58px; border-radius:16px; background:var(--fab-bg) !important; color:var(--fab-fg) !important; display:grid; place-items:center; box-shadow:0 16px 30px -12px rgba(0,0,0,.6); }
.bux-fab > .mi{ font-size:30px; }
.bux.is-new .bux-fab, .bux.is-score .bux-fab, html.bux-sheet-open .bux-fab{ opacity:0; pointer-events:none; visibility:hidden; }   /* B67 R67-033 — and out of the Tab order */
.bux-bn{ display:none; }

/* ── the sheet ──────────────────────────────────────────────────── */
.bux-sh-bg{ position:fixed; inset:0; z-index:600; background:rgba(4,20,22,.4); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .25s; }
.bux-sh-bg.open{ opacity:1; pointer-events:auto; }
.bux-sheet{ position:fixed; z-index:610; top:12px; bottom:12px; inset-inline-end:12px; width:min(500px, calc(100% - 24px)); border-radius:20px; display:flex; flex-direction:column; overflow:hidden;
  background:var(--pop); border:1px solid var(--line); box-shadow:0 30px 70px -30px rgba(0,0,0,.7); color:var(--on); transform:translateX(112%); visibility:hidden; transition:transform .3s ease, visibility 0s .3s; }
[dir="rtl"] .bux-sheet{ transform:translateX(-112%); }
.bux-sheet.open{ transform:none; visibility:visible; transition:transform .38s cubic-bezier(.3,1.1,.4,1), visibility 0s; }
.bux-grab{ display:none; }
.bux-sh-hd{ display:flex; align-items:center; gap:8px; padding:14px 14px 10px 18px; flex:none; border-bottom:1px solid var(--line); }
[dir="rtl"] .bux-sh-hd{ padding:14px 18px 10px 14px; }
.bux-sh-t{ flex:1; margin:0; min-width:0; font:600 21px/1.2 var(--serif); color:var(--silver2); display:flex; flex-direction:column; }
.bux-sh-t > small{ font:600 11px/1.3 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--silver); margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[lang^="ar"] .bux-sh-t > small{ letter-spacing:0; }
.bux-sh-t > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bux-sh-acts{ display:flex; align-items:center; gap:6px; flex:none; }
.bux-sh-hd .ast-launch-panel{ height:40px; min-width:40px; padding:0 12px !important; border-radius:999px !important; border:1px solid var(--line) !important; background:var(--item) !important; color:var(--on) !important; display:inline-flex; align-items:center; justify-content:center; gap:6px; font:600 13px var(--ui) !important; }
.bux-sh-vp{ position:relative; flex:1; min-height:0; overflow:hidden; }
.bux-sl{ position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; padding:16px 18px 24px; display:flex; flex-direction:column; gap:14px; transition:transform .32s cubic-bezier(.3,1.1,.4,1), opacity .25s; }
.bux-sl > *{ flex-shrink:0; }
.bux-sl.is-r{ transform:translateX(100%); opacity:0; } .bux-sl.is-l{ transform:translateX(-30%); opacity:0; }
[dir="rtl"] .bux-sl.is-r{ transform:translateX(-100%); } [dir="rtl"] .bux-sl.is-l{ transform:translateX(30%); }
.bux-sl.is-chat{ padding:0; }
.bux-sh-ft{ flex:none; display:flex; align-items:center; gap:8px; padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); background:var(--pop); }
.bux-sh-ft .bux-btn{ height:50px; }
.bux-sh-ft .bux-btn.is-pri{ flex:1; }
html[data-theme="dark"] .bux-sh-ft .bux-btn.is-pri{ background:var(--ivory) !important; color:var(--felt) !important; }
.bux-sheet .bux-row .bux-btn{ height:40px; padding:0 14px !important; font-size:13.5px !important; }
.bux-kvs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bux-kv{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:var(--item2); min-width:0; }
.bux-kv > span{ font:600 11px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--silver); }
html[lang^="ar"] .bux-kv > span{ letter-spacing:0; }
.bux-kv > b{ font:600 14.5px/1.3 var(--ui); color:var(--on); overflow-wrap:anywhere; }
.bux-sides{ display:grid; gap:10px; }
.bux-sidec{ padding:12px 14px; border-radius:14px; background:linear-gradient(180deg,var(--ivory),var(--ivory2)); color:var(--ink); display:flex; flex-direction:column; gap:8px; border:1px solid rgba(22,25,27,.06); }
.bux-sidec-h{ display:flex; align-items:center; gap:8px; }
.bux-sidec-h > b{ flex:1; min-width:0; font:600 16px var(--serif); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bux-seat{ display:flex; align-items:center; gap:10px; min-width:0; }
.bux-seat .bux-av{ width:32px; height:32px; font-size:11px; }
.bux-seat-nm{ flex:1; min-width:0; font:600 14px var(--ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bux-seat-nm em{ font-style:normal; font:600 11px var(--ui); color:var(--ink2); }
.bux-pst{ display:inline-flex; align-items:center; gap:4px; font:600 12px var(--ui); color:var(--ink2); flex:0 0 auto; }
.bux-pst > .mi{ font-size:16px; }
.bux-pst.is-in{ color:var(--ok); } .bux-pst.is-pend{ color:var(--felt); } .bux-pst.is-left, .bux-pst.is-decl{ color:var(--ruby); }
.bux-meldc{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; padding-top:10px; border-top:1px dashed rgba(22,25,27,.15); font:600 13px/1.35 var(--ui); color:var(--felt); }
.bux-meldc > .mi{ font-size:18px; }
.bux-meldc-l{ color:var(--ink2); }
.bux-meldc > small{ flex-basis:100%; font:500 12px var(--ui); color:var(--ink2); }
.bux-meldc .bux-seg{ flex-basis:100%; }
.bux-races{ display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:14px; background:var(--item2); }
.bux-rrow{ display:grid; grid-template-columns:minmax(80px,1fr) 2fr auto; gap:10px; align-items:center; font:600 13px var(--ui); }
.bux-rrow > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bux-rrow > b{ font:600 16px var(--serif); font-variant-numeric:tabular-nums; }
.bux-races .bux-race{ background:var(--line); }
.bux-races .bux-race > i{ background:var(--silver); }
.bux-sh-sec{ margin:6px 0 0; font:600 17px var(--serif); color:var(--silver2); }
.bux-sets{ display:flex; flex-direction:column; gap:8px; }
.bux-setrow{ display:flex; align-items:center; gap:10px; padding:12px 14px !important; border-radius:12px; background:var(--item) !important; border:1px solid var(--item-bd) !important; font:600 14px var(--ui) !important; color:var(--on) !important; text-align:start; }
.bux-setrow > b{ font:600 15px var(--serif); }
.bux-setrow .bux-av{ width:26px; height:26px; font-size:9.5px; border-color:var(--pop); }
.bux-setrow > .mi{ font-size:20px; color:var(--on2); }
.bux-tagc{ font:600 11px var(--ui); padding:3px 8px; border-radius:999px; background:var(--item2); color:var(--on2); }
.bux-tagc.is-done{ color:var(--ok); background:rgba(47,125,109,.14); }
html[data-theme="dark"] .bux-tagc.is-done{ color:#8fd6c4; }
.bux-sheet .bux-tbl{ color:var(--on); }
.bux-sheet .bux-tbl th{ color:var(--on2); }
.bux-sheet .bux-tbl td{ border-top-color:var(--line); }
.bux-sheet .bux-tbl tfoot td{ border-top-color:var(--on); }
html[data-theme="dark"] .bux-sheet .bux-tbl td.is-neg{ color:#ff9fae; }
/* the people picker */
.bux-find{ display:flex; align-items:center; gap:8px; height:46px; padding:0 14px; border-radius:12px; background:var(--item2); border:1px solid var(--item-bd); }
.bux-find > .mi{ font-size:20px; color:var(--on2); }
.bux-find:focus-within{ outline:2px solid var(--silver); outline-offset:2px; }
.bux .bux-find > input:focus-visible{ outline:none; }
.bux-find > input{ flex:1; min-width:0; border:0; background:none; outline:none; font:500 15px var(--ui); color:var(--on); }
.bux-plist{ display:flex; flex-direction:column; gap:4px; }
.bux-prow{ display:flex; align-items:center; gap:12px; padding:8px 10px !important; border-radius:12px; text-align:start; font:600 14.5px var(--ui) !important; color:var(--on) !important; }
.bux-prow:hover{ background:var(--item2) !important; }
.bux-prow > span:not(.bux-av):not(.mi){ flex:1; min-width:0; }
.bux-prow .bux-av{ border-color:var(--pop); }
.bux-prow > .mi{ color:var(--on2); }
.bux-cb{ width:24px; height:24px; border-radius:7px; border:2px solid var(--line); display:grid; place-items:center; color:transparent; flex:0 0 auto; }
.bux-cb > .mi{ font-size:16px; }
.bux-prow.on .bux-cb{ background:var(--felt); border-color:var(--felt); color:#eef3f3; }
html[data-theme="dark"] .bux-prow.on .bux-cb{ background:var(--ivory); border-color:var(--ivory); color:var(--felt); }
/* the chat (the shared one, MoccaChat) */
.bux-chat-host{ height:100%; }
.bux-chat-host .wl-chat-slide{ height:100%; display:flex; flex-direction:column; }
.bux-chat-host .wl-chat-msgs{ flex:1; overflow:auto; padding:12px 16px; }
.bux-chat-host .wl-chat-composer{ padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); }
/* confirm (above every sheet — the fixed layering order) */
.bux-confirm{ position:fixed; inset:0; z-index:660; display:grid; place-items:center; padding:20px; background:rgba(4,20,22,.45); }
.bux-cf-card{ width:min(400px, 100%); border-radius:18px; padding:22px; background:var(--pop); border:1px solid var(--line); color:var(--on); display:flex; flex-direction:column; gap:8px; box-shadow:0 30px 60px -24px rgba(0,0,0,.7); }
.bux-cf-card h3{ margin:0; font:600 20px/1.25 var(--serif); color:var(--silver2); }
.bux-cf-card p{ margin:0; color:var(--on2); font:500 14px/1.5 var(--ui); }
.bux-cf-acts{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; flex-wrap:wrap; }
/* signed out */
.bux-out{ position:relative; z-index:1; min-height:100dvh; display:grid; place-items:center; padding:24px; }
.bux-out-card{ width:min(420px, 100%); border-radius:20px; padding:32px 26px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; background:var(--item); border:1px solid var(--item-bd); }
.bux-out-card h1{ margin:6px 0 0; font:600 42px/1 var(--serif); color:var(--silver2); }
.bux-out-card p{ margin:6px 0 8px; color:var(--on2); font:500 15px/1.5 var(--ui); }
.bux-out-card .bux-langs{ width:100%; margin:8px 0 0; }

/* ── tablet: one column, the sheet rises from the bottom ────────── */
@media (max-width:960px){
  .bux-grid, .bux-sheet-g, .bux-nt{ grid-template-columns:1fr; }
  .bux-summary{ position:static; }
  .bux-tab > span:not(.mi){ display:none; }
  .bux-tab{ padding:0 12px !important; }
  .bux-list.is-2{ grid-template-columns:1fr; }
}
@media (max-width:1024px) and (min-height:561px){
  .bux-sheet{ top:auto; bottom:0; inset-inline:0; width:100%; height:88dvh; border-radius:22px 22px 0 0; transform:translateY(105%); }
  [dir="rtl"] .bux-sheet{ transform:translateY(105%); }
  .bux-sheet.open{ transform:none; }
  .bux-grab{ display:block; width:40px; height:5px; border-radius:999px; background:var(--line); margin:8px auto 0; flex:none; }
}
/* ── phone portrait: bottom tabs, the FAB above them ────────────── */
@media (max-width:600px) and (orientation:portrait){
  .bux-top{ padding:10px 16px; gap:10px; }
  .bux-tabs{ display:none; }
  .bux-crest{ width:38px; height:38px; }
  .bux-word > b{ font-size:21px; }
  .bux-main{ padding:18px 16px 130px; }
  .bux-pairs, .bux-two, .bux-bks, .bux-kvs{ grid-template-columns:1fr; }
  .bux-bn{ display:flex; position:fixed; inset-inline:0; bottom:0; z-index:35; justify-content:space-around; padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background:var(--bar); border-top:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  .bux-bn > .bux-tab{ flex:1 1 0; min-width:0; height:auto; flex-direction:column; gap:3px; padding:5px 4px !important; font:600 11px var(--ui) !important; box-shadow:none; }
  .bux-bn > .bux-tab > span:not(.mi){ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bux-bn > .bux-tab > .mi{ font-size:22px; }
  .bux-bn > .bux-tab.on{ background:var(--item2) !important; }
  .bux-fab{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); inset-inline-end:16px; }
  .bux-team > b{ font-size:36px; }
  .bux-live{ padding:18px; }
  .bux-fs{ padding:18px; }
  .bux-pad, .bux-tot{ padding:18px; }
  .bux-n{ font-size:48px; }
  .bux-pop{ top:60px; }
  .bux-meta-s{ display:none; }
  .bux-row > .bux-btn{ flex:1 1 auto; }
}
/* ── phone landscape: a rail on the start side ──────────────────── */
@media (max-height:520px) and (orientation:landscape){
  .bux-top{ position:fixed; inset-block:0; inset-inline-start:0; width:84px; max-width:none; flex-direction:column; border:0; border-inline-end:1px solid var(--line); padding:12px 0; margin:0; z-index:35; }
  .bux-word{ display:none; }
  .bux-tabs{ flex-direction:column; margin:8px 0 0; gap:4px; }
  .bux-tabs > .bux-tab{ flex-direction:column; height:auto; padding:8px 6px !important; font-size:10px !important; gap:3px; }
  .bux-tabs > .bux-tab > span:not(.mi){ display:block; }
  .bux-tab.on{ box-shadow:inset 2px 0 0 var(--silver); }
  [dir="rtl"] .bux-tab.on{ box-shadow:inset -2px 0 0 var(--silver); }
  .bux-main{ padding:14px 20px 24px 104px; max-width:none; }
  [dir="rtl"] .bux-main{ padding:14px 104px 24px 20px; }
  .bux-pop{ top:auto; bottom:12px; inset-inline-start:96px; inset-inline-end:auto; }
  .bux-fab{ bottom:14px; }
  .bux-sheet{ top:8px; bottom:8px; inset-inline-end:8px; width:min(460px, calc(100% - 100px)); }
}
@media (prefers-reduced-motion:reduce){ .bux-dot{ animation:none; } .bux *{ transition:none !important; } }
/* ═══ B66 W8 (066-089 · 090 · R2-04 · 05 · 06) ═══════════════════════════════════════════════════════════════════════════
   The bar spans the full width (its content stays on the page's column); no tabs; a back to Home on New game and the score;
   the table to seat the players (drag to swap, rotation order, partners opposite); the target a number + quick picks. */
.bux-top{ max-width:none; padding-inline:max(24px, calc((100vw - 1180px) / 2 + 24px)); }
.bux-back{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px 0 8px; margin-bottom:10px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--ink2); font:600 13px var(--ui); cursor:pointer; }
.bux-back .mi{ font-size:18px; }
/* B67 R67-060 — the back pill sits on the room, not on a card: the card ink (--ink2, never flips) was #4c5559 on the dark felt —
   "← Mesas" all but vanished in dark. The room's own ink (--on2: #4a5d61 by day, #b8cbcd at night). */
.bux-back{ color:var(--on2); }
.bux-tbl-seat{ position:relative; width:min(100%, 420px); aspect-ratio:1.35; margin:6px auto 4px; }
.bux-tbl-felt{ position:absolute; inset:20% 20%; border-radius:28px; background:var(--felt, #1F4D3A); box-shadow:inset 0 0 0 6px rgba(255,255,255,.06), 0 18px 40px -24px rgba(0,0,0,.6); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:rgba(255,255,255,.75); }
.bux-tbl-felt .bux-eyebrow{ color:rgba(255,255,255,.7); max-width:100%; box-sizing:border-box; padding-inline:12px; text-align:center; white-space:normal; }
.bux-tbl-felt .mi{ font-size:22px; }
.bux-seat{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:4px; z-index:1; border-radius:16px; padding:4px; }
.bux-seat.is-over{ outline:2px dashed var(--silver, #A7ADB3); outline-offset:2px; }
.bux-seat-av{ touch-action:none; }
.bux-seat-av.is-drag{ z-index:5; cursor:grabbing; }
.bux-seat:has(.is-drag){ z-index:6; }
.bux-seat-av:focus-visible{ outline:2px solid var(--ink, #16191B); outline-offset:3px; }
.bux-seat-av, .bux-seat-add{ position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:grab; }
.bux-seat-av .bux-av, .bux-seat-av img{ width:52px; height:52px; }
.bux-seat-add{ border:2px dashed var(--line); background:var(--ivory, #F4F1EA); color:var(--ink2); cursor:pointer; }
.bux-seat-av em, .bux-seat-add em{ position:absolute; bottom:-4px; inset-inline-end:-4px; min-width:20px; height:20px; border-radius:999px; display:grid; place-items:center; background:var(--ink, #16191B); color:#fff; font:700 11px var(--ui); font-style:normal; }
.bux-seat-l{ font:600 12px var(--ui); color:var(--ink2); white-space:nowrap; }
.bux-seat .bux-x-b{ position:absolute; top:-2px; inset-inline-start:-2px; }
.bux-target{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.bux-target .bux-inp{ width:120px; font-variant-numeric:tabular-nums; }
.bux-qp{ height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--ink2); font:600 13px var(--ui); cursor:pointer; font-variant-numeric:tabular-nums; }
.bux-qp.on{ background:var(--ink, #16191B); color:#fff; border-color:transparent; }
/* Audit A — on a phone a side seat's "Invitar · Pareja 2" ran under the table: side labels wrap to the seat's own column */
@media (max-width:600px){ .bux-seat.is-side .bux-seat-l{ white-space:normal; width:56px; text-align:center; line-height:1.25; } }
@media (max-width:600px){ .bux-tbl-seat{ aspect-ratio:1.05; } .bux-seat-av, .bux-seat-add, .bux-seat-av .bux-av, .bux-seat-av img{ width:44px; height:44px; } }

/* Audit A (Pablo 2026-10-07) — Mocca's date-time picker, dressed in Buraco's felt and pewter (date-field.js opens it) */
html[data-app="buraco"] .cb-date-pop{ --accent:#0f2e33; --accent-fg:#eef3f3; --mk-blue-400:#3f6a71; --bg-1:#fbfaf6; --bg-input:#fff;
  --fg-1:#16191b; --fg-2:#4c5559; --fg-3:#6b7579; --border:rgba(15,46,51,.16); --divider:rgba(15,46,51,.1);
  --mk-font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; }
html[data-app="buraco"][data-theme="dark"] .cb-date-pop{ --accent:#c7d4d6; --accent-fg:#0f2e33; --mk-blue-400:#c7d4d6; --bg-1:#0d2a2f; --bg-input:#123a40;
  --fg-1:#eef3f3; --fg-2:#b8cbcd; --fg-3:#8fa6a9; --border:rgba(199,212,214,.24); --divider:rgba(199,212,214,.16); }