/* Biriba: its home (the art, the rules to choose) and its table — a Greek table with a meander along its edges, in
   the admin's colours (.brt-*), cards in the admin's style (.brf-*). Shares cards.css and the dock of t21.css. */

/* ---------- home ---------- */
.br-art { position: relative; height: 150px; margin: -6px 0 6px; }
.br-fan { position: absolute; left: 50%; top: 14px; width: 0; height: 0; }
.br-fan .cd { --cw: 70px; position: absolute; left: -35px; top: 0; transform-origin: 50% 140%;
  transform: rotate(calc(var(--i) * 9deg)) translateY(calc(var(--i) * var(--i) * 1.2px));
  animation: brFanIn .7s cubic-bezier(.3,1.3,.5,1) backwards; animation-delay: calc((var(--i) + 3) * 70ms); }
.br-fan .cd:last-child { transform: rotate(38deg) translate(26px, -14px) scale(1.06); z-index: 2; box-shadow: 0 0 0 2px #ffd866, 0 14px 26px -8px rgba(0,0,0,.8); }
@keyframes brFanIn { from { transform: rotate(0) translateY(40px); opacity: 0; } }
.br-art-rib { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(-3deg); padding: 5px 16px; border-radius: 999px; font-weight: 900;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #3a2400; background: linear-gradient(#ffe38a, #e5b13a);
  box-shadow: 0 4px 0 #8a6412, 0 12px 20px -8px rgba(0,0,0,.8); white-space: nowrap; animation: brRib 2.6s ease-in-out infinite; }
@keyframes brRib { 50% { transform: translateX(-50%) rotate(2deg) scale(1.05); } }
.logo-br { position: relative; display: inline-block; width: 36px; height: 36px; flex: none; }
.logo-br i { position: absolute; font-style: normal; display: grid; place-items: center; border-radius: 6px; font-weight: 900; }
.logo-br .lb1 { left: 2px; top: 3px; width: 22px; height: 30px; background: #fffef9; color: #c3122e; font-family: Georgia, serif; font-size: 12px; line-height: 1;
  transform: rotate(-10deg); box-shadow: 0 2px 6px rgba(0,0,0,.45); flex-direction: column; }
.logo-br .lb1 b { font-size: 11px; }
.logo-br .lb2 { right: 1px; top: 5px; width: 22px; height: 30px; background: conic-gradient(#d8193a 0 25%, #f2b21b 0 50%, #1c1830 0 75%, #d8193a 0); color: #fff;
  font-size: 13px; transform: rotate(12deg); box-shadow: 0 2px 6px rgba(0,0,0,.45); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.br-teams { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 14px; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4;
  background: rgba(95,209,240,.1); border: 1px solid rgba(95,209,240,.35); color: #cfefff; }
.br-teams svg.i { flex: none; width: 20px; height: 20px; color: #5fd1f0; }
.br-teams.hidden { display: none; }
/* four players: your partner and the others marked on the seats */
.seat-wrap.br-mate .seat-row { box-shadow: inset 3px 0 0 #7fe25a; }
.seat-wrap.br-foe .seat-row { box-shadow: inset 3px 0 0 #ff7a8a; }
/* the button on each seat: partner (green) or opponent (red) — a tap makes that seat your partner */
.br-team { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font: 900 10px/1.4 'Inter', system-ui, sans-serif; letter-spacing: .4px;
  text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.br-team.mate { background: rgba(127,226,90,.2); color: #b5f58f; border-color: rgba(127,226,90,.55); }
.br-team.foe { background: rgba(255,122,138,.12); color: #ffb3bd; border-color: rgba(255,122,138,.3); }
.br-team.foe:hover { background: rgba(127,226,90,.14); color: #d8ffc4; border-color: rgba(127,226,90,.45); }
.br-to { display: flex; flex-wrap: wrap; gap: 6px; }
.br-to button { flex: 1 0 auto; min-width: 64px; font-variant-numeric: tabular-nums; }
.br-rules .inline { margin-top: 8px; }
.br-rules .inline:first-of-type { margin-top: 0; }
.br-how-b { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.br-how-b span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 11px; border-radius: 11px; background: rgba(0,0,0,.24);
  border: 1px solid var(--stroke); font-size: 12.5px; }
.br-how-b em { font-style: normal; color: var(--muted); font-weight: 700; }
.br-how-b b { color: #ffd866; font-weight: 900; white-space: nowrap; }
@media (max-width: 520px) { .br-how-b { grid-template-columns: 1fr; } .br-fan .cd { --cw: 58px; left: -29px; } .br-art { height: 128px; } }

/* ---------- the tables (the admin's choice) ---------- */
.brt-aegean { --f1: #1f63ad; --f2: #0f3c75; --f3: #07234a; --rim1: #f6f3ec; --rim2: #c9d2de; --rimd: #6f7f96; --mea: rgba(255,255,255,.5);
  --zone: rgba(3,18,44,.34); --zone-b: rgba(255,255,255,.14); --ink: #eef5ff; --soft: rgba(225,238,255,.72); --gold: #ffd866; --motto: rgba(255,255,255,.07); }
.brt-olive { --f1: #71833f; --f2: #475828; --f3: #2b3717; --rim1: #93613a; --rim2: #5e3a1e; --rimd: #2e1a09; --mea: rgba(246,233,200,.45);
  --zone: rgba(24,30,10,.34); --zone-b: rgba(246,233,200,.16); --ink: #fbf5e6; --soft: rgba(246,236,210,.75); --gold: #ffe08a; --motto: rgba(255,248,220,.07); }
.brt-velvet { --f1: #971d38; --f2: #5e0e21; --f3: #380613; --rim1: #e9c66f; --rim2: #a8792a; --rimd: #563c0e; --mea: rgba(255,214,120,.5);
  --zone: rgba(40,4,14,.35); --zone-b: rgba(255,214,120,.18); --ink: #fff3ea; --soft: rgba(255,226,210,.72); --gold: #ffd866; --motto: rgba(255,214,120,.07); }
.brt-night { --f1: #273241; --f2: #161c27; --f3: #0a0e14; --rim1: #384458; --rim2: #1e2533; --rimd: #07090d; --mea: rgba(80,236,255,.5);
  --zone: rgba(0,0,0,.3); --zone-b: rgba(80,236,255,.2); --ink: #e8f6ff; --soft: rgba(200,228,245,.7); --gold: #5ff2d8; --motto: rgba(80,236,255,.06); }
.brt-marble { --f1: #f7f5f0; --f2: #e6e1d6; --f3: #cfc7b6; --rim1: #ebc76c; --rim2: #b48a2c; --rimd: #6b500f; --mea: rgba(150,108,26,.55);
  --zone: rgba(255,255,255,.45); --zone-b: rgba(120,88,26,.25); --ink: #2b2418; --soft: rgba(60,48,26,.7); --gold: #9a6a08; --motto: rgba(120,88,26,.07); }

/* ---------- the table ---------- */
.br-felt { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; min-height: 660px; padding: 38px 28px 34px;
  border-radius: 38px; color: var(--ink);
  background: radial-gradient(90% 60% at 50% 42%, rgba(255,255,255,.1), transparent 70%), radial-gradient(130% 100% at 50% 35%, var(--f1), var(--f2) 60%, var(--f3));
  box-shadow: inset 0 0 0 9px var(--rim1), inset 0 0 0 11px var(--rimd), inset 0 0 0 13px var(--rim2), inset 0 0 0 14px rgba(0,0,0,.35),
              inset 0 22px 60px rgba(0,0,0,.4), 0 30px 60px -30px rgba(0,0,0,.9); }
.br-felt::after { content: ''; position: absolute; inset: 14px; border-radius: 26px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 5px 5px; }
/* the Greek key along the top and the bottom of the table */
.br-meander { position: absolute; left: 34px; right: 34px; height: 14px; z-index: 0; pointer-events: none; background: var(--mea);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Cpath d='M0 12.5H12.5V1.5H3.5V9H9V5H6.5M12.5 12.5H20' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") repeat-x left center / 20px 14px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Cpath d='M0 12.5H12.5V1.5H3.5V9H9V5H6.5M12.5 12.5H20' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") repeat-x left center / 20px 14px; }
.br-meander.top { top: 18px; }
.br-meander.bottom { bottom: 15px; transform: scaleY(-1); }
.br-motto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; font-size: 64px; font-weight: 900;
  letter-spacing: 18px; text-transform: uppercase; color: var(--motto); white-space: nowrap; }

/* ---- the sides: their name, players, biribaki, score and melds ---- */
.br-top { position: relative; z-index: 1; display: grid; gap: 12px; }
.br-top.n2 { grid-template-columns: 1fr 1fr; }
.br-zone { position: relative; z-index: 1; min-width: 0; padding: 8px 10px 10px; border-radius: 20px; background: var(--zone); border: 1px solid var(--zone-b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.br-zone.ours { min-height: 120px; }
.bz-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bz-name { flex: none; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: var(--soft); }
.bz-plates { display: flex; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.br-plate { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 3px 11px 3px 3px; border-radius: 999px; background: rgba(0,0,0,.26);
  transition: box-shadow .25s; }
.br-plate.turn { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255,216,102,.45); }
.br-plate.gone { opacity: .45; }
.bp-av { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--bg); color: #fff;
  font-weight: 900; font-size: 13px; }
.bp-av svg.i { width: 17px; height: 17px; }
.bp-av .ava-img, .bs-avs .ava-img { width: 100%; height: 100%; object-fit: cover; }
.bp-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.bp-t b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.bp-t small { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--soft); }
.bp-cards { display: inline-block; width: 9px; height: 12px; border-radius: 2px; background: linear-gradient(135deg, #e5b13a, #8e1b33); box-shadow: 2px -2px 0 -1px rgba(255,255,255,.5); }
.bz-pack { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  color: var(--soft); border: 1px dashed var(--zone-b); }
.bz-pack i { display: none; }
.bz-pack.took { border-style: solid; border-color: rgba(127,226,90,.6); color: #b5f58f; background: rgba(127,226,90,.12); }
.brt-marble .bz-pack.took { color: #2f7a1a; }
.bz-score { flex: none; margin-left: auto; font-size: 19px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
/* (the side's points: the number with its word, a little apart from the biribaki, so the two are never read as one) */
.bz-score { display: inline-flex; align-items: baseline; gap: 4px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
.bz-score small { font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; opacity: .7; }
.bz-melds { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-top: 8px; min-height: 62px; }
.bz-empty { align-self: center; font-size: 12px; color: var(--soft); font-style: italic; opacity: .8; }

/* a meld: its cards overlapping, how many, its biriba ribbon */
.br-meld { --cw: 40px; position: relative; display: flex; flex-direction: column; padding: 4px 6px 17px 4px; border-radius: 12px; transition: background .2s, box-shadow .2s; }
.br-zone.ours .br-meld { --cw: 48px; }
.bm-cards { display: flex; }
.bm-cards .cd { margin-left: calc(var(--cw) * -.64); box-shadow: -2px 0 4px rgba(0,0,0,.22), 0 6px 10px -6px rgba(0,0,0,.7), inset 0 0 0 1px #d9cfb6; }
.bm-cards .cd:first-child { margin-left: 0; }
.bm-cards .cd.wild { box-shadow: -2px 0 4px rgba(0,0,0,.22), inset 0 0 0 2px #e5b13a, 0 6px 10px -6px rgba(0,0,0,.7); }
.bm-foot { position: absolute; left: 5px; bottom: 0; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.bm-foot b { padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.35); color: #fff; font-variant-numeric: tabular-nums; }
.bm-rib { font-style: normal; padding: 1px 7px; border-radius: 6px; letter-spacing: .6px; text-transform: uppercase; }
.bm-rib.clean { background: linear-gradient(#ffe38a, #d9a321); color: #3a2400; box-shadow: 0 0 10px rgba(255,216,102,.55); }
.bm-rib.dirty { background: linear-gradient(#eef2f7, #9aa6b8); color: #1c2330; }
.bm-kz { font-style: normal; color: #ffd866; font-size: 12px; text-shadow: 0 0 8px rgba(255,216,102,.8); }
.br-meld.bir { background: rgba(255,216,102,.08); box-shadow: 0 0 0 1px rgba(255,216,102,.35); }
.br-meld.bir.clean { box-shadow: 0 0 0 1px rgba(255,216,102,.6), 0 0 22px rgba(255,216,102,.25); }
.br-meld.can { cursor: pointer; background: rgba(125,255,168,.12); box-shadow: 0 0 0 2px #7dffa8, 0 0 20px rgba(125,255,168,.45); animation: brCan 1.3s ease-in-out infinite; }
.br-meld.drop-on { background: rgba(125,255,168,.24); box-shadow: 0 0 0 3px #7dffa8, 0 0 28px rgba(125,255,168,.7); }
@keyframes brCan { 50% { box-shadow: 0 0 0 2px #7dffa8, 0 0 30px rgba(125,255,168,.7); } }
.br-meld.new { animation: brIn .45s cubic-bezier(.3,1.4,.5,1) backwards; animation-delay: var(--d, 0ms); }
@keyframes brIn { from { transform: translateY(-10px) scale(.8); opacity: 0; } }
.br-meld.land { animation: brLand .38s ease; }
@keyframes brLand { 40% { transform: scale(1.07); } }

/* ---- the middle: the deck, the biribakia, the pile, the kozi ---- */
.br-mid { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 140px; flex-wrap: wrap; }
.br-deck, .br-pile { position: relative; width: 88px; height: 120px; flex: none; }
.br-deck .pile-cards .cd { --cw: 66px; position: absolute; left: calc(8px + var(--i) * 1.4px); top: calc(12px - var(--i) * 1.6px); }
.br-pile .pile-cards .cd { --cw: 66px; position: absolute; left: calc(2px + var(--i) * 4px); top: 10px; transform: rotate(var(--t, 0deg)); }
.br-deck small, .br-pile small { position: absolute; left: -24px; right: -24px; top: 118px; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  color: var(--soft); white-space: nowrap; }
.br-deck .tap-hint, .br-pile .tap-hint { z-index: 6; display: flex; }
.br-deck .tap-hint.hidden, .br-pile .tap-hint.hidden { display: none; }
.br-deck.can, .br-pile.can { cursor: pointer; }
.br-deck.can .pile-cards, .br-pile.can .pile-cards { filter: drop-shadow(0 0 14px rgba(255,216,102,.7)); }
.br-pile.drop { cursor: pointer; }
.br-pile.drop .pile-cards, .br-pile.drop-on .pile-cards { filter: drop-shadow(0 0 16px rgba(125,255,168,.9)); }
.br-pile .pile-cards:empty::before { content: ''; position: absolute; left: 10px; top: 12px; width: 66px; height: 93px; border-radius: 7px; border: 2px dashed var(--zone-b); }
.br-deck.give .cd:last-child { animation: brGive .38s ease-out; }
@keyframes brGive { 40% { transform: translate(-6px, -4px) rotate(-6deg); } }
.br-deck.riffle .cd { animation: brRiffle .5s ease-in-out 2; }
.br-deck.riffle .cd:nth-child(odd) { animation-name: brRiffle2; }
@keyframes brRiffle { 50% { transform: translate(-22px, -4px) rotate(-8deg); } }
@keyframes brRiffle2 { 50% { transform: translate(22px, -2px) rotate(8deg); } }
.br-packs { display: flex; gap: 12px; }
.br-packs:empty { display: none; }
.br-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; }
.bk-cards { position: relative; width: 60px; height: 44px; }
.bk-cards .cd { --cw: 32px; position: absolute; left: 14px; top: -8px; transform: rotate(90deg) translate(calc(var(--i) * -2px), calc(var(--i) * 2px)); }
.br-pack small { max-width: 90px; font-size: 10px; font-weight: 800; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-kozi { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.br-kozi.hidden { display: none; }
.kz-s { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1; background: #fffef9; color: #18142e;
  box-shadow: 0 0 0 3px var(--gold), 0 8px 16px -6px rgba(0,0,0,.7); }
.kz-s.s-h, .kz-s.s-d { color: #c3122e; }
.br-kozi small { font-size: 10px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.br-kozi.kz-pop .kz-s { animation: brPop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes brPop { 40% { transform: scale(1.35) rotate(-10deg); } }
.br-score-mini { display: none; }
.br-banner { z-index: 8; }

/* ---- your cards ---- */
.br-rack { position: relative; z-index: 3; padding: 6px 6px 2px; border-radius: 24px; background: radial-gradient(120% 100% at 50% 100%, rgba(255,255,255,.08), transparent 70%); }
.br-rack .rack-tools { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.br-sort { display: inline-flex; gap: 6px; }
.br-rack .rk { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--zone-b);
  background: rgba(0,0,0,.2); color: var(--ink); font-size: 12px; font-weight: 800; cursor: pointer; }
.br-rack .rk.on { background: var(--ink); color: var(--f3); border-color: var(--ink); }
.br-rack .rack-tip { font-size: 11.5px; font-weight: 600; color: var(--soft); }
.br-hand { --cw: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 4px 6px; min-height: calc(72px * 1.41 + 32px); }
.br-row { display: flex; justify-content: center; max-width: 100%; }
.br-row .cd { --cw: inherit; margin-left: var(--ov, -20px); touch-action: none; cursor: pointer; transition: transform .2s cubic-bezier(.3,1.4,.5,1), box-shadow .2s; }
.br-row .cd:first-child { margin-left: 0; }
.br-hand.two .br-row + .br-row { margin-top: calc(var(--cw) * -.62); }
.br-row .cd:hover { transform: translateY(-8px); z-index: 2; }
.br-row .cd.sel { transform: translateY(-20px); z-index: 3; box-shadow: 0 0 0 3px var(--gold), 0 18px 26px -10px rgba(0,0,0,.9); }
.br-row .cd.must { box-shadow: 0 0 0 3px #ff9f43, 0 0 20px rgba(255,159,67,.8); animation: brMust 1.2s ease-in-out infinite; }
.br-row .cd.must.sel { box-shadow: 0 0 0 3px var(--gold), 0 0 20px rgba(255,159,67,.8); }
/* the card taken from the pile: a small "First" label above it */
.br-row .cd.must[data-first]::before { content: attr(data-first); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); z-index: 4;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap; font: 900 10px/1.5 'Inter', system-ui, sans-serif; letter-spacing: .5px; text-transform: uppercase;
  color: #3a1a00; background: linear-gradient(#ffc27a, #ff9f43); box-shadow: 0 2px 6px rgba(0,0,0,.45); pointer-events: none; }
.br-hand:has(.cd.must) { padding-top: 34px; }
@keyframes brMust { 50% { box-shadow: 0 0 0 3px #ff9f43, 0 0 30px rgba(255,159,67,1); } }
.br-row .cd.dragging { opacity: .25; }
.cd.drag-ghost { transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 0 3px #ffd866, 0 22px 34px -10px rgba(0,0,0,.9); }

/* ---- the cards in the admin's style: big letters, or every suit its own colour ---- */
.brf-big .cd[data-sy]:not(.jk) .pp, .brf-big .cd[data-sy]:not(.jk) .face, .brf-big .cd[data-sy]:not(.jk) .ace { display: none; }
.brf-big .cd[data-sy]:not(.jk)::after { content: attr(data-r) attr(data-sy); position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  font: 900 calc(var(--cw, 78px) * .36) / 1 Georgia, serif; letter-spacing: -.04em; white-space: nowrap; }
.brf-big .cd[data-s="h"]::after, .brf-big .cd[data-s="d"]::after { color: #c3122e; }
.brf-big .cd[data-s="s"]::after, .brf-big .cd[data-s="c"]::after { color: #18142e; }
.brf-big .cd .k { font-size: 1.12em; }
.brf-four .cd[data-s="d"] .red, .brf-four .cd[data-s="d"]::after { color: #1a5fd6; }
.brf-four .cd[data-s="c"] .blk, .brf-four .cd[data-s="c"]::after { color: #138a3c; }

/* ---- the end of a hand ---- */
.br-end { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(4,8,20,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.br-end.hidden { display: none; }
.be-box { width: min(620px, 100%); max-height: 100%; overflow: auto; border-radius: 26px; padding-bottom: 16px; color: #fff;
  background: linear-gradient(170deg, rgba(34,30,78,.97), rgba(16,14,40,.97)); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.95); animation: brBox .45s cubic-bezier(.3,1.3,.5,1); }
@keyframes brBox { from { transform: translateY(20px) scale(.94); opacity: 0; } }
.be-box .he-top { position: relative; padding: 26px 20px 10px; text-align: center; background: radial-gradient(120% 100% at 50% 0%, rgba(255,207,77,.2), transparent 70%); }
.be-box .he-top.over { background: radial-gradient(130% 110% at 50% 0%, rgba(255,207,77,.4), transparent 72%); }
.be-box .he-top h3 { margin: 6px 0 3px; font-size: 21px; font-weight: 900; background: linear-gradient(180deg, #fff, #ffe9a6); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.be-box .he-top small { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(223,228,255,.6); font-weight: 800; }
.be-crown svg { width: 46px; height: 46px; filter: drop-shadow(0 4px 10px rgba(255,207,77,.6)); animation: brPop .8s cubic-bezier(.3,1.6,.5,1); }
.be-sides { display: grid; gap: 10px; padding: 6px 16px 0; }
.be-side { padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  animation: brRow .45s cubic-bezier(.3,1.2,.5,1) backwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
@keyframes brRow { from { transform: translateX(-14px); opacity: 0; } }
.be-side.me { border-color: rgba(162,141,255,.45); background: rgba(124,92,255,.1); }
.be-side.win { border-color: rgba(255,216,102,.6); box-shadow: 0 0 24px rgba(255,216,102,.2); }
.be-h { display: flex; align-items: center; gap: 10px; }
.be-h > b { flex: 1; min-width: 0; font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-tot { font-size: 20px; font-weight: 900; color: #a6f56b; font-variant-numeric: tabular-nums; }
.be-tot.neg { color: #ff8b95; }
.bs-avs { display: flex; flex: none; }
.bs-avs i { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--bg); color: #fff; font-style: normal;
  font-size: 11px; font-weight: 900; box-shadow: 0 0 0 2px rgba(16,14,40,.9); }
.bs-avs i + i { margin-left: -7px; }
.bs-avs svg.i { width: 15px; height: 15px; }
.be-lines { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.he-l { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 9px; border-radius: 9px; background: rgba(0,0,0,.25); font-size: 12px; }
.he-l em { font-style: normal; color: rgba(223,228,255,.7); font-weight: 700; }
.he-l b { font-weight: 900; font-variant-numeric: tabular-nums; }
.he-l.gold b { color: #ffd866; } .he-l.good b { color: #a6f56b; } .he-l.bad b { color: #ff8b95; }
.be-cards { display: flex; flex-wrap: wrap; margin: 6px 0 2px; padding-left: 12px; }
.be-cards .cd { --cw: 28px; margin-left: -12px; }
.be-score { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.be-score .bs-bar { flex: 1; }
.be-score > b { font-size: 16px; font-weight: 900; color: #ffd866; }
.be-score small { font-size: 11px; color: rgba(223,228,255,.6); font-weight: 700; }
.bs-bar { display: block; height: 7px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.bs-bar b { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #5fd1f0, #ffd866); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.be-box .he-next { margin: 14px 18px 0; font-size: 12px; color: rgba(223,228,255,.7); text-align: center; }
.be-box .he-next i { display: block; height: 6px; margin-top: 7px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.be-box .he-next b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5fd1f0, #a28dff); transform-origin: left; animation: brBar linear forwards; }
@keyframes brBar { to { transform: scaleX(0); } }

/* ---- the tips of the first games: a small bubble next to what to tap (it never covers the whole table) ---- */
.br-tip { position: absolute; z-index: 80; width: max-content; max-width: min(280px, calc(100vw - 16px)); padding: 10px 12px 9px; border-radius: 14px;
  color: #1c1830; background: linear-gradient(170deg, #fffbe9, #ffeeb8); box-shadow: 0 14px 30px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(160,120,20,.35);
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .25s, transform .3s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.br-tip.below { transform: translateY(-6px) scale(.96); }
.br-tip.on { opacity: 1; transform: none; pointer-events: auto; }
.bt-t { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.bt-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.bt-acts button { border: 0; background: none; cursor: pointer; font: 800 11.5px 'Inter', system-ui, sans-serif; padding: 3px 0; }
.bt-ok { padding: 4px 12px !important; border-radius: 999px; color: #fff; background: linear-gradient(#ffe58f, #e3a61f) !important; box-shadow: 0 2px 0 #8a5a0a; }
.bt-off { color: #7a6a3a; text-decoration: underline; text-underline-offset: 2px; }
.bt-arrow { position: absolute; left: var(--ax, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: #ffeeb8;
  box-shadow: 1px 1px 0 rgba(160,120,20,.35); }
.br-tip.below .bt-arrow { top: -6px; bottom: auto; background: #fffbe9; box-shadow: -1px -1px 0 rgba(160,120,20,.35); }
@media (max-width: 620px) { .bt-t { font-size: 11.5px; } .br-tip { padding: 8px 10px 7px; } }

/* ---- the side panel: the score of every side ---- */
.br-score { display: grid; gap: 10px; }
.bs-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(0,0,0,.18); }
.bs-row.me { background: rgba(124,92,255,.14); box-shadow: inset 0 0 0 1px rgba(162,141,255,.35); }
.bs-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bs-mid > b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-mid small { display: flex; gap: 5px; font-size: 10.5px; color: var(--muted); font-weight: 700; }
.bs-mid small em { font-style: normal; color: #a6f56b; } .bs-mid small em.neg { color: #ff8b95; }
.bs-sc { font-size: 18px; font-weight: 900; color: #ffd866; font-variant-numeric: tabular-nums; }
.bs-to { text-align: right; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.br-tag { display: inline-block; margin: 2px 0 2px 4px; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; }
.br-tag.on { background: rgba(127,226,90,.16); color: #b5f58f; }
.br-tag.off { background: rgba(255,255,255,.06); color: var(--muted); text-decoration: line-through; }

/* ---- the bar under the table ---- */
.br-dock { grid-template-columns: auto minmax(0, 1fr) auto; }
.br-dock .avw, .br-dock .av { position: relative; }          /* (a player's photo stays inside its circle) */
.br-dock .av { overflow: hidden; }
.br-dock .turnlbl { align-items: center; }
.br-acts { flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: 0 !important; }
.br-acts .bt { height: 48px; padding: 0 16px; font-size: 13px; }
.br-acts .bt.hidden { display: none; }
.br-acts #bBrClear { padding: 0 12px; }
.pause-mini { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #dfe4ff; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.pause-mini:hover { background: rgba(255,255,255,.12); }
.pause-mini svg.i { width: 14px; height: 14px; }
.pause-mini.hidden { display: none; }

/* ---------- smaller screens: phones play it held upright, everything in one column ---------- */
@media (max-width: 900px) {
  .br-top.n2 { grid-template-columns: 1fr; }
  .br-motto { font-size: 44px; letter-spacing: 10px; }
}
@media (max-width: 620px) {
  .page#table:has(.br-layout) { padding: 8px 6px 20px; }
  .br-felt { min-height: 0; gap: 8px; padding: 24px 8px 22px; border-radius: 24px;
    box-shadow: inset 0 0 0 5px var(--rim1), inset 0 0 0 6px var(--rimd), inset 0 0 0 8px var(--rim2), inset 0 14px 36px rgba(0,0,0,.4), 0 20px 40px -24px rgba(0,0,0,.9); }
  .br-felt::after { inset: 8px; border-radius: 18px; }
  .br-meander { left: 18px; right: 18px; height: 10px; -webkit-mask-size: 14px 10px; mask-size: 14px 10px; }
  .br-meander.top { top: 10px; } .br-meander.bottom { bottom: 9px; }
  .br-motto { display: none; }
  .br-zone { padding: 6px 7px 7px; border-radius: 14px; }
  .br-zone.ours { min-height: 0; }
  .bz-head { gap: 6px; }
  .bz-name { font-size: 9.5px; letter-spacing: 1px; }
  .br-plate { padding: 2px 8px 2px 2px; gap: 5px; }
  .bp-av { width: 24px; height: 24px; font-size: 11px; }
  .bp-t b { font-size: 11px; max-width: 70px; }
  .bp-t small { font-size: 10px; }
  .bz-pack { padding: 2px 6px; font-size: 9.5px; }
  .bz-score { font-size: 15px; }
  .bz-melds { gap: 6px 8px; margin-top: 5px; min-height: 44px; }
  .br-meld { --cw: 29px; padding: 3px 4px 15px 3px; }
  .br-zone.ours .br-meld { --cw: 35px; }
  .bm-foot { font-size: 9px; }
  .br-mid { gap: 10px; min-height: 0; padding: 2px 0 16px; }
  .br-deck, .br-pile { width: 58px; height: 80px; }
  .br-deck .pile-cards .cd, .br-pile .pile-cards .cd { --cw: 44px; }
  .br-pile .pile-cards .cd { left: calc(2px + var(--i) * 2.5px); top: 6px; }
  .br-deck .pile-cards .cd { left: calc(6px + var(--i) * 1px); top: calc(8px - var(--i) * 1px); }
  .br-pile .pile-cards:empty::before { left: 6px; top: 8px; width: 44px; height: 62px; }
  .br-deck small, .br-pile small { top: 76px; font-size: 9.5px; letter-spacing: .3px; }
  .br-packs { gap: 4px; }
  .br-pack { width: 44px; }
  .bk-cards { width: 44px; height: 30px; }
  .bk-cards .cd { --cw: 22px; left: 11px; top: -6px; }
  .br-pack small { max-width: 50px; font-size: 9px; }
  .kz-s { width: 32px; height: 32px; font-size: 19px; }
  .br-kozi small { font-size: 8.5px; }
  /* the score of every side, here in the middle (the side panel is further down) */
  .br-score-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; flex-basis: 100%; order: 9; }
  .br-score-mini span { display: inline-flex; gap: 5px; align-items: baseline; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.25); font-size: 10.5px; }
  .br-score-mini span.me { box-shadow: inset 0 0 0 1px var(--gold); }
  .br-score-mini em { font-style: normal; color: var(--soft); font-weight: 700; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .br-score-mini b { font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
  .br-rack { padding: 4px 0 0; }
  .br-rack .rk { height: 25px; padding: 0 10px; font-size: 11px; }
  .br-rack .rack-tip { display: none; }
  .br-hand { padding: 20px 0 4px; min-height: calc(52px * 1.41 + 24px); }
  .br-row .cd.sel { transform: translateY(-14px); }
  .br-dock { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px 12px; }
  .br-dock > .avw { display: none; }
  .br-acts { justify-content: stretch; margin-top: 0 !important; }
  .br-acts .bt { flex: 1; justify-content: center; height: 44px; padding: 0 10px; font-size: 12px; }
  .br-acts #bBrClear { flex: 0 0 auto; }
  .br-acts:not(:has(.bt:not(.hidden))) { display: none; }
  .be-box { border-radius: 20px; }
  .be-sides { padding: 4px 10px 0; }
  .be-box .he-top h3 { font-size: 18px; }
  /* the chat button: small, at the bottom right, away from the buttons */
  body.game-biriba[data-page="table"] .chat-fab { width: 42px; height: 42px; right: 8px; bottom: 8px; }
}

/* ================= the overhaul (2026-10): melds in columns, each side's biribaki at its place, a quiet message,
   the table's own buttons, colour help, full screen ================= */
/* ---- a meld: a column of cards, each a little lower than the one before (as on a real table). Every column keeps
   the height of its row (--mh): a long meld packs its cards tighter, so the table never grows; the corner of each card
   (its number) always shows ---- */
.br-zone { --mh: 172px; }
.br-zone.ours { --mh: 204px; min-height: 0; }
.br-meld, .br-zone.ours .br-meld { --cw: 46px; padding: 4px 4px 19px; }
.br-zone.ours .br-meld { --cw: 54px; }
.br-meld { --st: max(calc(var(--cw) * .26), min(calc(var(--cw) * .44), calc((var(--mh) - var(--cw) * 1.41) / max(1, var(--n) - 1)))); }
.bm-cards { flex-direction: column; }
.bm-cards .cd, .bm-cards .cd:first-child { margin-left: 0; }
.bm-cards .cd + .cd { margin-top: calc(var(--cw) * -1.41 + var(--st)); }
.bm-cards .cd { box-shadow: 0 -2px 4px rgba(0,0,0,.2), 0 6px 10px -6px rgba(0,0,0,.7), inset 0 0 0 1px #d9cfb6; }
.bm-cards .cd.wild { box-shadow: 0 -2px 4px rgba(0,0,0,.2), inset 0 0 0 2px #e5b13a, 0 6px 10px -6px rgba(0,0,0,.7); }
/* (the melds of a side: one row of columns, always the same height; more columns than fit scroll sideways inside) */
.bz-melds { flex-wrap: nowrap; align-items: flex-start; gap: 8px; height: calc(var(--mh) + 28px); min-height: 0; margin-top: 6px;
  overflow: auto hidden; scrollbar-width: thin; overscroll-behavior: contain; }
.bz-melds > .br-meld { flex: none; }
.bz-empty { align-self: center; margin: 0 auto; }
/* a wild card says which card it stands for */
.bm-for { position: absolute; right: 4%; top: 3%; z-index: 1; padding: 0 .3em; border-radius: calc(var(--cw) * .07); font: 900 calc(var(--cw) * .2) / 1.25 'Inter', system-ui, sans-serif;
  font-style: normal; white-space: nowrap; color: #3a2400; background: linear-gradient(#ffe38a, #e5b13a); box-shadow: 0 1px 3px rgba(0,0,0,.45); }
/* the kozi: its suit on a small white badge, by the meld's count */
.bm-kz { padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: .3px; color: #18142e; background: #fffef9;
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 10px rgba(255,216,102,.45); text-shadow: none; }
.bm-kz.s-h, .bm-kz.s-d { color: #c3122e; }

/* ---- each side's biribaki by its name: two cards face down while it waits, a tick once taken ---- */
.bz-pack { gap: 5px; padding: 2px 9px 2px 4px; }
.bz-pack:has(.bk-cards) { border-style: solid; border-color: rgba(255,216,102,.45); color: var(--ink); background: rgba(255,216,102,.08); }
.bz-pack .bk-cards { position: relative; flex: none; width: 30px; height: 22px; }
.bz-pack .bk-cards .cd { --cw: 15px; position: absolute; left: 8px; top: -1px; transform: rotate(90deg) translate(calc(var(--i) * -2px), calc(var(--i) * 2px));
  box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.bk-ok { font-style: normal; color: #b5f58f; }
.br-pack.pop { animation: brPop .6s cubic-bezier(.3,1.6,.5,1); }

/* ---- what just happened: a small glass message on the top edge of the table (never over the deck, the pile or a card) ---- */
.br-felt > .br-banner { position: absolute; left: 50%; top: 5px; z-index: 30; transform: translateX(-50%); width: max-content; max-width: min(92%, 540px);
  padding: 5px 15px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(8,8,18,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,216,102,.35);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.8); animation: brBanIn .35s ease-out; pointer-events: none; }
.br-felt > .br-banner.blank { animation: none; }
@keyframes brBanIn { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ---- colour help (the table's choice): a card that goes onto your melds glows yellow; the card you chose to throw
   glows red when it goes onto the others' ---- */
.br-row .cd.fit { box-shadow: 0 0 0 2.5px #ffd866, 0 0 16px rgba(255,216,102,.65); }
.br-row .cd.feed, .br-row .cd.feed.sel { box-shadow: 0 0 0 3px #ff4d5e, 0 0 22px rgba(255,77,94,.85); animation: brFeed 1.1s ease-in-out infinite; }
@keyframes brFeed { 50% { box-shadow: 0 0 0 3px #ff4d5e, 0 0 32px rgba(255,77,94,1); } }

/* ---- the bar under the table and its buttons, in the table's colours: gold for the move, glass for the rest ---- */
.br-layout .br-dock { background: linear-gradient(160deg, color-mix(in srgb, var(--f2) 42%, #0c0b1a), color-mix(in srgb, var(--f3) 50%, #06050d));
  border: 1px solid var(--zone-b); }
.br-layout .br-dock.my-turn { border-color: rgba(255,216,102,.55); box-shadow: 0 0 0 3px rgba(255,216,102,.12), 0 20px 40px -20px rgba(255,216,102,.4); }
.br-layout .br-acts .bt-p { --ed: #7a4c10; color: #2a1800; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  background: linear-gradient(180deg, #fff1b8 0%, #ffd866 38%, #e5a92e 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.12), 0 5px 0 var(--ed), 0 12px 22px -10px rgba(0,0,0,.8); }
.br-layout .br-acts .bt-s { color: #f6f1e2; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 rgba(0,0,0,.35), 0 10px 18px -10px rgba(0,0,0,.8); }
.br-layout .br-acts .bt-s:hover { background: rgba(255,255,255,.14); }
.br-tools { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; }
.br-tools .pause-mini { margin-left: 0; }
.br-tools .fs-mini { padding: 0 7px; }
/* the end of a hand in the table's colours */
.br-layout .be-box { background: radial-gradient(120% 70% at 50% 0%, rgba(255,216,102,.14), transparent 60%),
  linear-gradient(170deg, color-mix(in srgb, var(--f2) 45%, #0d0c20), color-mix(in srgb, var(--f3) 55%, #07060f));
  border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

/* ---- phones ---- */
@media (max-width: 620px) {
  .br-zone { --mh: 122px; }
  .br-zone.ours { --mh: 146px; }
  .br-meld, .br-zone.ours .br-meld { --cw: 34px; padding: 3px 3px 16px; }
  .br-zone.ours .br-meld { --cw: 40px; }
  .bz-melds { gap: 5px; margin-top: 4px; height: calc(var(--mh) + 22px); }
  .br-felt { padding-top: 30px; }
  .br-felt > .br-banner { top: 3px; padding: 4px 12px; font-size: 11.5px; }
  .bz-pack .bk-cards { width: 24px; height: 18px; }
  .bz-pack .bk-cards .cd { --cw: 12px; left: 6px; }
  .bm-kz { font-size: 8.5px; padding: 0 4px; }
}

/* ---- full screen: the table on one screen (its melds scroll inside it), "Leave" always in sight ---- */
body.game-fs .br-layout { height: 100%; align-items: stretch; }
body.game-fs .br-layout .t21-main { display: flex; flex-direction: column; min-height: 0; height: 100%; }
body.game-fs .br-layout .br-felt { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
body.game-fs .br-layout .br-dock { flex: none; position: static; }
body.game-fs .br-layout > .t21-side { position: static; height: 100%; min-height: 0; overflow: hidden; }
body.game-fs .br-layout > .t21-side > .panel21 { flex: none; }
body.game-fs .br-layout > .t21-side > .panel21:has(.log21) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.game-fs .br-layout > .t21-side .log21 { flex: 1 1 auto; min-height: 0; max-height: none; }
body.game-fs .br-layout > .t21-side > .btn { flex: none; }
@media (max-width: 1100px) {
  body.game-fs .br-layout > .t21-side { display: none; }
  body.game-fs .br-dock .fs-leave { display: inline-flex !important; }
}
/* ================= the table on one screen (2026-10-04): no page scroll on a computer; your cards and the buttons
   always in sight; the labels of a meld on its top; your own order of your cards ================= */
.br-board { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.br-rack { flex: none; }
/* a meld's count, its biriba ribbon (clean, dirty) and its kozi: on top of the column, always in sight */
.br-meld, .br-zone.ours .br-meld { padding: 19px 4px 4px; }
.bm-foot { top: 1px; bottom: auto; }
/* your cards: a small gap where a group ends; the line where a dragged card goes; a card that arrives turned up */
.br-row .cd.gap + .cd { margin-left: calc(var(--cw) * .3); }
.br-row .cd.ins-l { box-shadow: -4px 0 0 0 #ffd866, -6px 0 16px 0 rgba(255,216,102,.85); }
.br-row .cd.ins-r { box-shadow: 4px 0 0 0 #ffd866, 6px 0 16px 0 rgba(255,216,102,.85); }
.br-row .cd.flipin { animation: brFlip .34s cubic-bezier(.3,.9,.4,1); }
@keyframes brFlip { from { transform: perspective(500px) rotateY(88deg); } }
.br-rack .rk-split { gap: 5px; }
.br-rack .rk-split svg.i { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .br-row .cd.flipin { animation: none; } }
/* a computer: the table as high as the screen; the buttons on the right, above the score and what happened; the board
   (the other sides, the middle, your side) gets the rest and, only on a low screen, scrolls inside the table */
@media (min-width: 1101px) {
  html:has(body.game-biriba[data-page="table"]) { overflow: hidden; }
  body.game-biriba[data-page="table"] .site-foot { display: none; }
  body.game-biriba[data-page="table"] #table.page { height: calc(100dvh - var(--top)); box-sizing: border-box; overflow: hidden; padding-top: 10px; padding-bottom: 10px; }
  .br-layout, body.game-fs .br-layout { height: 100%; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "felt side" "dock side"; gap: 12px 18px; align-items: stretch; }
  .br-layout .t21-main, body.game-fs .br-layout .t21-main { display: contents; }
  .br-layout .br-felt, body.game-fs .br-layout .br-felt { grid-area: felt; min-height: 0; height: auto; overflow: hidden; padding: 30px 20px 14px; gap: 8px; }
  .br-board { flex: 1 1 auto; gap: 10px; margin: 0 -6px; padding: 0 6px; overflow: hidden auto; scrollbar-width: thin; overscroll-behavior: contain; }
  .br-zone { --mh: clamp(88px, calc((100dvh - 740px) * .42), 172px); }
  .br-zone.ours { --mh: clamp(100px, calc((100dvh - 740px) * .58), 204px); }
  .br-mid { min-height: 128px; }
  /* the bar under the table, as wide as it: who plays and the time on the left, the buttons on the right */
  .br-layout .br-dock, body.game-fs .br-layout .br-dock { grid-area: dock; margin: 0; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 10px 14px;
    min-height: 66px; box-sizing: border-box; border-radius: 22px; position: static; }
  .br-layout .br-dock .avw { width: 44px; height: 44px; }
  .br-layout .br-dock .turnlbl { margin-bottom: 6px; }
  .br-layout .br-dock .br-acts { grid-column: auto; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
  .br-layout .br-dock .br-acts:not(:has(.bt:not(.hidden))) { display: none; }
  .br-layout .br-acts .bt { flex: 0 0 auto; justify-content: center; height: 46px; padding: 0 18px; font-size: 13px; }
  .br-layout .br-acts #bBrClear { flex: 0 0 auto; padding: 0 12px; }
  .br-layout > .t21-side, body.game-fs .br-layout > .t21-side { grid-area: side; display: flex; position: static; height: auto; min-height: 0; overflow: hidden; }
  .br-layout > .t21-side > .panel21 { flex: none; }
  .br-layout > .t21-side > .panel21:has(.log21) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .br-layout > .t21-side .log21 { flex: 1 1 auto; min-height: 0; max-height: none; }
  .br-layout > .t21-side > .btn { flex: none; }
}
/* full screen on a smaller screen: the board scrolls inside the table; your cards stay right above the buttons */
@media (max-width: 1100px) {
  body.game-fs .br-layout .br-felt { overflow: hidden; }
  body.game-fs .br-board { flex: 1 1 auto; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 620px) {
  .br-board { gap: 8px; }
  .br-meld, .br-zone.ours .br-meld { padding: 16px 3px 3px; }
}
/* ---------- phones (upright or sideways), full screen too: the whole table shows and the page scrolls; the bar stays at the bottom ---------- */
@media (max-width: 820px), (max-height: 620px) and (max-width: 1100px) {
  body.game-fs[data-page="table"]:has(.br-layout) { height: auto; min-height: 100dvh; overflow: visible; }
  body.game-fs[data-page="table"] .page#table:has(.br-layout) { height: auto; overflow: visible; }
  body.game-fs .br-layout, body.game-fs .br-layout .t21-main { height: auto; }
  body.game-fs .br-layout .br-felt { flex: none; min-height: 0; overflow: visible; }
  body.game-fs .br-board { flex: none; overflow: visible; }
  body.game-fs .br-layout .br-dock { position: sticky; bottom: max(6px, env(safe-area-inset-bottom)); z-index: 20; }
}
/* ---------- never wider than the screen (a phone, upright or sideways): the table's column, its parts and your
   hand keep to the width there is; a hand too wide packs its cards tighter instead of pushing the table out ---------- */
@media (max-width: 1100px) { .br-layout { grid-template-columns: minmax(0, 1fr); } }
.br-layout > .t21-main, .br-felt, .br-board, .br-ours, .br-rack, .br-hand, .br-row { min-width: 0; }
.br-top { grid-template-columns: minmax(0, 1fr); }
.br-top.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .br-top.n2 { grid-template-columns: minmax(0, 1fr); } }
.br-hand { max-width: 100%; overflow-x: clip; }
/* ---------- a meld's labels: its count (and kozi) on top, the biriba ribbon (clean / dirty) under them, both in the
   middle of the column, above the cards (never over them, never hidden) ---------- */
.bm-foot { left: 0; right: 0; top: 2px; bottom: auto; flex-direction: column; align-items: center; gap: 3px; }
.bm-top { display: inline-flex; align-items: center; gap: 4px; }
.bm-rib { font-size: 9px; padding: 1px 6px; }
.br-meld.bir, .br-zone.ours .br-meld.bir { padding-top: 36px; }
.bz-melds { height: calc(var(--mh) + 46px); }
@media (max-width: 620px) { .br-meld.bir, .br-zone.ours .br-meld.bir { padding-top: 31px; } .bm-rib { font-size: 8px; padding: 0 5px; } .bz-melds { height: calc(var(--mh) + 40px); } }
/* the cards you chose go onto a meld of the others: it lights up red (a warning: keep them, or they feed them) */
.br-meld.foe { background: rgba(255,90,110,.13); box-shadow: 0 0 0 2px #ff5a6e, 0 0 20px rgba(255,90,110,.55); animation: brFoe 1.2s ease-in-out infinite; }
@keyframes brFoe { 50% { box-shadow: 0 0 0 2px #ff5a6e, 0 0 30px rgba(255,90,110,.85); } }
@media (prefers-reduced-motion: reduce) { .br-meld.foe { animation: none; } }
/* (2026-10) the chosen cards dragged onto the empty space of your side: a new meld of their own (the space lights up) */
.bz-melds.drop-on { border-radius: 14px; background: rgba(125,255,168,.1); box-shadow: inset 0 0 0 2px rgba(125,255,168,.75), 0 0 22px rgba(125,255,168,.35); }

/* (2026-10-11) bigger cards: the hand 15% (biriba.js handSize), the melds 20%; the rows of melds keep their height and
   scroll sideways when they do not fit, so the table does not grow */
.br-hand { min-height: calc(83px * 1.41 + 32px); }
.br-meld, .br-zone.ours .br-meld { --cw: 55px; }
.br-zone.ours .br-meld { --cw: 65px; }
@media (max-width: 620px) {
  .br-hand { min-height: calc(60px * 1.41 + 24px); }
  .br-meld, .br-zone.ours .br-meld { --cw: 41px; }
  .br-zone.ours .br-meld { --cw: 48px; }
}

/* ================= (2026-10-11 b) the deck and the pile as big as your cards; a small kozi; melds that always fit;
   room for the glow of a card at the ends; a still hover; the bar under the table: you and your time, the buttons in the
   middle, small tools on the right — never changing its size ================= */
/* the deck and the pile: the size of the cards in your hand (biriba.js sets --hcw) */
.br-deck, .br-pile { width: calc(var(--hcw, 72px) + 22px); height: calc(var(--hcw, 72px) * 1.41 + 24px); }
.br-deck .pile-cards .cd, .br-pile .pile-cards .cd { --cw: var(--hcw, 72px); }
.br-deck small, .br-pile small { top: calc(var(--hcw, 72px) * 1.41 + 20px); }
.br-pile .pile-cards:empty::before { width: var(--hcw, 72px); height: calc(var(--hcw, 72px) * 1.41); }
.br-mid { padding-bottom: 14px; }
/* the kozi on a meld: only its suit on a small white dot with a gold ring, beside the count (the word on hover); the
   biriba ribbon has its own line under them */
.bm-kz { display: inline-grid; place-items: center; width: 15px; height: 15px; padding: 0; border-radius: 50%; font-size: 10px; line-height: 1; letter-spacing: 0;
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 8px rgba(255,216,102,.5); }
.bm-foot { gap: 4px; }
.br-meld.bir, .br-zone.ours .br-meld.bir { padding-top: 38px; }
@media (max-width: 620px) { .bm-kz { width: 13px; height: 13px; font-size: 9px; } .br-meld.bir, .br-zone.ours .br-meld.bir { padding-top: 33px; } }
/* the kozi: a small badge of a fixed size on the pile's top right corner (its suit on a white dot with a gold ring; the
   word on hover) — out of the way of the names and the biribakia */
.br-kozi { position: absolute; z-index: 7; right: -6px; top: 2px; display: block; padding: 0; background: none; border: 0; pointer-events: auto; }
.br-kozi.hidden { display: none; }
.br-kozi .kz-s { width: 26px; height: 26px; font-size: 15px; box-shadow: 0 0 0 2px var(--gold), 0 4px 10px -2px rgba(0,0,0,.6); }
@media (max-width: 620px) { .br-kozi .kz-s { width: 22px; height: 22px; font-size: 13px; } }
/* a meld always fits its row: a long one packs its cards tighter and, if it must, its cards get a little smaller
   (never under three quarters of their size); only beyond that the row scrolls */
.br-zone .br-meld { --mcw: 55px; } .br-zone.ours .br-meld { --mcw: 65px; }
@media (max-width: 620px) { .br-zone .br-meld { --mcw: 41px; } .br-zone.ours .br-meld { --mcw: 48px; } }
.br-zone .br-meld, .br-zone.ours .br-meld { --cw: min(var(--mcw), max(calc(var(--mcw) * .5), calc(var(--mh) / (1.41 + .2 * (var(--n, 1) - 1)))));
  --st: max(calc(var(--cw) * .2), min(calc(var(--cw) * .44), calc((var(--mh) - var(--cw) * 1.41) / max(1, var(--n) - 1)))); }
/* a computer with a low window: the middle and your hand take a little less height, the melds get it */
@media (min-width: 1101px) and (max-height: 980px) {
  .br-mid { min-height: 0; padding-bottom: 10px; }
  .br-hand { padding-top: 18px; min-height: calc(72px * 1.41 + 22px); }
  .br-meld.bir, .br-zone.ours .br-meld.bir { padding-top: 34px; }
  .br-board { gap: 6px; }
}
/* (the row keeps its height; a meld taller than it makes the row grow — the table scrolls inside — never cut) */
.bz-melds { height: auto; min-height: calc(var(--mh) + 46px); overflow: auto hidden; padding: 2px 6px 0; margin-top: 2px; }
@media (max-width: 620px) { .bz-melds { min-height: calc(var(--mh) + 40px); } }
@media (min-width: 1101px) {
  /* (biriba.js fitBoard: --fit lowers the rows of melds just enough for the whole board to fit, never cut) */
  .br-zone { --mh: calc(clamp(120px, calc((100dvh - 740px) * .42), 172px) * var(--fit, 1)); }
  .br-zone.ours { --mh: calc(clamp(140px, calc((100dvh - 740px) * .58), 204px) * var(--fit, 1)); }
}
@media (max-width: 1100px) { body.game-fs .br-zone { --mh: calc(122px * var(--fit, 1)); } body.game-fs .br-zone.ours { --mh: calc(146px * var(--fit, 1)); } }
/* your hand: room on both sides (the glow of a chosen card at an end shows whole) */
.br-hand { padding-left: 10px; padding-right: 10px; }
/* a card under the pointer rises; the space it leaves below still counts as the card, so it never flickers */
.br-row .cd:not([data-first]):hover::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }

/* ---- the bar under the table ---- */
.br-layout .br-dock, body.game-fs .br-layout .br-dock { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "me acts tools";
  align-items: center; gap: 14px; min-height: 72px; padding: 10px 14px; box-sizing: border-box; }
.br-dk-me { grid-area: me; display: flex; align-items: center; gap: 12px; min-width: 0; }
.br-dock .dock-mid { flex: 1; min-width: 0; }
/* the hourglass: the seconds of the move and of the whole turn, for whoever plays */
.br-hour { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  font: 800 12.5px 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--ink, #f6f1e2);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.br-hour.hidden { display: none; }
.br-hour.mine { color: #2a1800; background: linear-gradient(180deg, #ffeaa8, #f5c650); border-color: transparent; }
.br-hour.low { color: #fff; background: #d64545; border-color: transparent; animation: brHourLow .6s ease-in-out infinite alternate; }
@keyframes brHourLow { to { box-shadow: 0 0 0 3px rgba(214,69,69,.35); } }
/* (its place: the left end of the middle of the table, out of the flow — nothing around it moves it) */
.br-mid .br-hour { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 3; }
@media (max-width: 640px) { .br-hour { padding: 4px 8px; font-size: 11px; } .br-mid .br-hour { left: 6px; top: 2px; transform: none; } }
.br-dock .tbar { display: none; }
.br-layout .br-dock .turnlbl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
.br-dock .turnlbl b { max-width: 100%; font-size: 14px; }
.br-dock .turnlbl span { max-width: 100%; text-align: left; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-layout .br-dock .br-acts, .br-layout .br-dock .br-acts:not(:has(.bt:not(.hidden))) { grid-area: acts; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 10px; }
.br-dock .br-tools { grid-area: tools; justify-self: end; display: inline-flex; align-items: center; gap: 8px; margin: 0; }
/* the time of your turn: a ring round your picture, gold, red in its last seconds */
.br-layout .br-dock .avw, .br-layout .br-dock .avw.turn { position: relative; flex: none; width: 48px; height: 48px; padding: 4px; background: none; animation: none; box-shadow: none; }
.br-clock { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.br-clock circle { fill: none; stroke-width: 3; }
.br-clock .bg { stroke: rgba(255,255,255,.14); }
.br-clock .fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(255,216,102,.7)); }
.br-dock .avw.low .br-clock .fg { stroke: #ff5a6e; filter: drop-shadow(0 0 5px rgba(255,90,110,.9)); }
.br-dock .avw.timed .av { box-shadow: 0 0 16px -2px rgba(255,216,102,.55); }
/* the time of the others: a thin line under the name of the one who plays */
.br-plate { position: relative; }
.br-plate.timed::after { content: ''; position: absolute; left: 14px; right: 12px; bottom: 1px; height: 2.5px; border-radius: 2px; background: var(--gold); transform-origin: left;
  transform: scaleX(var(--k, 1)); box-shadow: 0 0 6px rgba(255,216,102,.8); }
.br-plate.low::after { background: #ff5a6e; box-shadow: 0 0 6px rgba(255,90,110,.9); }
/* the table's small tools: round glass icons (full screen, pause, leave) */
.br-ico { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--soft);
  background: rgba(255,255,255,.06); border: 1px solid var(--zone-b); transition: background .2s, color .2s, border-color .2s; }
.br-ico:hover { color: var(--ink); background: rgba(255,255,255,.13); }
.br-ico svg.i { width: 17px; height: 17px; }
.br-ico.hidden { display: none; }
.br-leave:hover { color: #ffb3ab; border-color: rgba(255,90,78,.6); }
.br-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.br-side > .btn[data-action="home"] { display: none; }
/* the buttons: gold for the move, glass with a gold edge for the rest; they rise a little under the pointer */
.br-layout .br-acts .bt { height: 44px; padding: 0 18px; border: 0; border-radius: 14px; font-size: 13px; font-weight: 900; gap: 8px; transition: transform .15s, box-shadow .2s, background .2s; }
.br-layout .br-acts .bt svg.i { width: 18px; height: 18px; }
.br-layout .br-acts .bt:hover { transform: translateY(-2px); }
.br-layout .br-acts .bt:active { transform: scale(.97); }
.br-layout .br-acts .bt-p { color: #2a1800; text-shadow: none; background: linear-gradient(180deg, #ffeaa8, #f5c650 55%, #e3a632);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px rgba(122,76,16,.35), 0 10px 20px -10px rgba(229,169,46,.95); }
.br-layout .br-acts .bt-s { color: var(--ink); background: color-mix(in srgb, var(--f1) 30%, rgba(255,255,255,.07)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 10px 18px -12px rgba(0,0,0,.85); }
.br-layout .br-acts .bt-s:hover { background: color-mix(in srgb, var(--f1) 45%, rgba(255,255,255,.12)); }
.br-layout .br-acts #bBrClear { width: 44px; padding: 0; justify-content: center; }
/* narrower screens: you and the tools on one line, the buttons under them (their line is always there) */
@media (max-width: 900px) {
  .br-layout .br-dock, body.game-fs .br-layout .br-dock { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "me tools" "acts acts"; gap: 8px 10px; padding: 10px 12px 12px; }
  .br-layout .br-dock .br-acts, .br-layout .br-dock .br-acts:not(:has(.bt:not(.hidden))) { min-height: 44px; }
  .br-layout .br-dock .br-acts .bt { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .br-layout .br-dock .br-acts #bBrClear { flex: 0 0 44px; }
}
@media (max-width: 620px) {
  .br-layout .br-dock .avw, .br-layout .br-dock .avw.turn { width: 40px; height: 40px; padding: 3px; }
  .br-ico { width: 32px; height: 32px; }
  .br-dock .turnlbl b { font-size: 13px; }
  .br-layout .br-acts .bt { font-size: 12px; }
}