/* Twenty-one: the page's own look (loaded only on the twenty-one page, on top of app.css). */

/* ---------- top bar: two cards and the game's name ---------- */
.logo21 { position: relative; width: 40px; height: 40px; flex: none; }
.logo21 span { position: absolute; width: 24px; height: 33px; border-radius: 5px; background: linear-gradient(160deg, #fffef9, #efe7d4);
  box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 0 0 1px #d9cfb6; font: 700 12px Georgia, 'Times New Roman', serif; color: #18142e;
  display: flex; align-items: flex-start; justify-content: flex-start; padding: 2px 3px; }
.logo21 span:nth-child(1) { left: 3px; top: 4px; transform: rotate(-14deg); }
.logo21 span:nth-child(2) { left: 13px; top: 2px; transform: rotate(12deg); }
.logo21 .red { color: #c3122e; }
.brand-t { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.brand-t b { font-size: 16px; font-weight: 900; letter-spacing: .3px; }
.brand-t small { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.brand-t small, .brand-t b { white-space: nowrap; }

/* ---------- home ---------- */
.hero21 .h21-art { position: relative; height: 150px; }
.hero21 .fan { position: absolute; left: 10px; top: 6px; width: 200px; height: 140px; }
.hero21 .fan .cd { --cw: 80px; position: absolute; left: 50px; top: 8px; transform-origin: 50% 120%; transform: rotate(calc(var(--i) * 16deg)) translateX(calc(var(--i) * 8px));
  animation: fanIn .8s cubic-bezier(.3,1.4,.5,1) backwards; animation-delay: calc((var(--i) + 1) * .12s); }
@keyframes fanIn { from { transform: rotate(0) translateY(30px); opacity: 0; } }
.hero21 .fan-chips { position: absolute; left: 190px; top: 70px; }
.hero21 .fan-chips .ch { position: absolute; }
.hero21 .fan-chips .c-a { left: 0; top: 30px; } .hero21 .fan-chips .c-b { left: 36px; top: 16px; } .hero21 .fan-chips .c-c { left: 18px; top: 0; }
.hero21 .fan-chips .ch { animation: chipIn .6s cubic-bezier(.3,1.6,.5,1) .5s backwards, bob 3.4s ease-in-out 1.2s infinite; }
.hero21 .fan-21 { position: absolute; left: 300px; top: 20px; font-size: 76px; font-weight: 900; letter-spacing: -3px; line-height: 1;
  background: linear-gradient(180deg, #ffe9a6, #ffcf4d 55%, #c98f1d); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); animation: in .8s .3s cubic-bezier(.2,.9,.3,1) backwards; }
/* phones: the fan a little smaller, so the chips and the 21 fit beside it (the 21 on the right, in the free space) */
@media (max-width: 520px) { .hero21 .fan { transform: scale(.85); transform-origin: left top; } .hero21 .fan-chips { left: 150px; } .hero21 .fan-21 { left: auto; right: 11%; font-size: 64px; top: 18px; } }
@media (max-width: 400px) { .hero21 .fan { transform: scale(.75); } .hero21 .fan-chips { left: 128px; top: 64px; } .hero21 .fan-21 { right: 7%; font-size: 58px; top: 24px; } }
.rules21 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rules21 span { padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.2); border: 1px solid var(--stroke); font-size: 12px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.rules21 b { font-size: 18px; font-weight: 900; color: #ffd866; font-variant-numeric: tabular-nums; }
.rules21.compact { grid-template-columns: repeat(3, 1fr); margin: 4px 0 8px; }
.rules21.compact b { font-size: 16px; }
.values21 { display: flex; flex-wrap: wrap; gap: 6px; }
.values21 span { display: flex; align-items: baseline; gap: 6px; padding: 7px 11px; border-radius: 11px; background: rgba(0,0,0,.24); border: 1px solid var(--stroke); font-weight: 800; font-size: 14px; }
.values21 b { font-family: Georgia, serif; color: #ffd866; }
.st .tot.up { color: #a6f56b; } .st .tot.down { color: #ff8b95; }

/* ---------- the table ---------- */
.page#table { max-width: 1400px; }
.t21-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.felt { position: relative; height: 660px; border-radius: 320px / 250px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 40%, #23946a 0%, #136246 52%, #093626 100%);
  box-shadow: inset 0 0 0 12px #7a4c25, inset 0 0 0 16px #4a2b12, inset 0 0 0 18px #d9b46a, inset 0 0 0 21px #3a220e, inset 0 18px 50px rgba(0,0,0,.6), 0 30px 60px -30px rgba(0,0,0,.9); }
.felt::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 5px 5px; }
/* the light that sweeps the felt: a spot on its own layer that moves from 12% to 88% of the felt (was the felt's gradient
   drawn again in a new place every frame — the whole table, sixty times a second) */
.felt-sweep { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; container-type: size; }
.felt-sweep::before { content: ''; position: absolute; left: calc(12% - 340px); top: calc(35% - 200px); width: 680px; height: 400px;
  background: radial-gradient(340px 200px at 50% 50%, rgba(255,255,255,.08), transparent 70%); will-change: transform;
  animation: sweep21 10s ease-in-out infinite alternate; }
@keyframes sweep21 { from { transform: translateX(0); } to { transform: translateX(76cqw); } }
.felt-arc { position: absolute; left: 50%; top: 50%; width: 58%; height: 60%; transform: translate(-50%, -50%); border: 1.5px dashed rgba(217,180,106,.3); border-radius: 50%; z-index: -1; }
.felt-motto { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: rgba(217,180,106,.35); white-space: nowrap; z-index: -1; }
/* the middle: the deck next to the pot (the cards fly from here to every seat) */
.center21 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
/* the deck: top right, turned a little, as it was */
.shoe { position: absolute; right: 9%; top: 14%; width: 82px; height: 128px; z-index: 3; }
.shoe .cd { --cw: 66px; position: absolute; left: calc(var(--i) * 1.5px); top: calc(var(--i) * -2px); transform: rotate(14deg); }
.shoe small { position: absolute; left: -20px; right: -20px; top: 110px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: rgba(217,180,106,.75); white-space: nowrap; }
/* the discard pile, top left (the played cards wait there until the deck runs out), a little untidy */
.discard { position: absolute; left: 9%; top: 14%; width: 82px; height: 128px; z-index: 3; }
.discard .cd { --cw: 54px; position: absolute; left: calc(8px + var(--i) * 1px); top: calc(12px - var(--i) * 1.5px); transform: rotate(var(--t, 0deg)); }
.discard small { position: absolute; left: -20px; right: -20px; top: 110px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: rgba(217,180,106,.75); white-space: nowrap; }
/* a card leaves the deck: the top card gives a little, the count blinks — light and short */
.shoe.give .cd:last-child { animation: give21 .38s ease-out; }
.shoe.give small { animation: giveN21 .38s ease-out; }
@keyframes give21 { 40% { transform: translate(-6px, -4px) rotate(9deg); } }
@keyframes giveN21 { 40% { color: #ffe9a6; } }
/* the deck being shuffled in front of everybody: the cards split, riffle and square up */
.shoe.shuffling .cd { animation: riffle21 .5s ease-in-out 3; }
.shoe.shuffling .cd:nth-child(odd) { animation-name: riffle21b; }
@keyframes riffle21 { 50% { transform: translate(-26px, -6px) rotate(-8deg); } }
@keyframes riffle21b { 50% { transform: translate(26px, -2px) rotate(28deg); } }
/* paused (a table with bots only) */
.paused21 { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(6,20,14,.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.paused21 b { padding: 12px 26px; border-radius: 999px; background: rgba(12,10,32,.9); border: 1px solid rgba(255,255,255,.2); font-size: 18px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
/* how much went into or out of the pot: over the message, it grows in, stays a moment and shrinks away */
.pot-float { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) scale(0); z-index: 6; opacity: 0; pointer-events: none;
  font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 22px currentColor; }
.pot-float.up { color: #ffe08a; } .pot-float.down { color: #ff9aa4; }
.pot-float.show { animation: potFloat21 2.8s cubic-bezier(.3,1.3,.5,1) forwards; }
@keyframes potFloat21 { 0% { transform: translateX(-50%) scale(.2); opacity: 0; } 14% { transform: translateX(-50%) scale(1.15); opacity: 1; }
  22% { transform: translateX(-50%) scale(1); } 80% { transform: translateX(-50%) translateY(-6px) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-14px) scale(.3); opacity: 0; } }/* the pot: its name, the amount, the chips, and which round of this bank */
.pot21 { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 20px 12px; border-radius: 22px; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px rgba(217,180,106,.25); }
.pot21 small { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #bfe7d3; font-weight: 700; }
.pot21 b { font-size: 28px; font-weight: 900; color: #ffd866; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #6b4a0a, 0 0 18px rgba(255,207,77,.55); }
.pot-chips { display: flex; align-items: flex-end; justify-content: center; min-height: 40px; margin-top: 2px; }
.pot-round { font-size: 12px; font-weight: 700; color: #bfe7d3; opacity: .85; white-space: nowrap; }

/* the seats: each one always in the same place, a plate (avatar, name, chips, what it is doing) and its cards */
.t21-seats { position: absolute; inset: 0; }
.s21 { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 4; transition: opacity .3s, filter .3s; }
.s21 .plate { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 999px; white-space: nowrap; background: linear-gradient(160deg, rgba(36,30,80,.95), rgba(18,15,46,.95));
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 24px -12px rgba(0,0,0,.9); transition: border-color .3s, box-shadow .3s; }
.s21.me .plate { border-color: rgba(162,141,255,.6); }
.s21.bank .plate { border-color: #d9b46a; }
.s21.actor .plate { border-color: #a28dff; box-shadow: 0 0 0 3px rgba(162,141,255,.2), 0 0 28px rgba(162,141,255,.45); }
.s21 .avw { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; padding: 3px; background: conic-gradient(#8a86b0, #d9d6ef, #5a567e, #8a86b0); box-shadow: 0 6px 12px -6px rgba(0,0,0,.8); }
.s21 .av, .dock21 .av { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), transparent 42%), radial-gradient(circle at 50% 120%, rgba(0,0,0,.45), transparent 60%), var(--bg); box-shadow: inset 0 -3px 6px rgba(0,0,0,.35); }
.s21 .av svg.i { width: 22px; height: 22px; }
/* the ring turns: gold for the bank, violet for whoever is on move (the bank too, when it draws) */
/* (the ring itself turns, on its own layer, under the photo — its gradient is drawn once) */
.s21.bank .avw, .s21.actor .avw, .dock21 .avw.turn { position: relative; isolation: isolate; background: none; }
.s21.bank .avw::before, .s21.actor .avw::before, .dock21 .avw.turn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  will-change: transform; animation: spin21 1.6s linear infinite; }
.s21.bank .avw::before { background: conic-gradient(#ffcf4d, #fff3c4, #c98f1d, #ffcf4d); animation-duration: 5s; }
.s21.actor .avw::before, .dock21 .avw.turn::before { background: conic-gradient(#a28dff, #fff, #5f3fe6, #a28dff); animation-duration: 1.6s; }
.s21.actor .avw, .dock21 .avw.turn { box-shadow: 0 0 0 4px rgba(162,141,255,.25), 0 0 22px rgba(162,141,255,.6); }
@keyframes spin21 { to { transform: rotate(360deg); } }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rot21 { to { --a: 360deg; } }
.s21 .bank-mark { display: none; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: linear-gradient(#ffe08a, #ffcf4d); color: #3a2400; font-size: 9px; font-weight: 900; letter-spacing: .5px; white-space: nowrap; box-shadow: 0 2px 0 #7a4c10; }
.s21.bank .bank-mark { display: block; }
.pinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.s21 .nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 800; }
.s21 .sb { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #d6f0e3; font-weight: 800; font-variant-numeric: tabular-nums; }
.coin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcf4d 55%, #b8860b); box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.s21 .tg { font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; animation: pop21 .35s cubic-bezier(.3,1.6,.5,1); }
.tg.win { background: linear-gradient(#1f5a33, #123a20); border: 1px solid #3f9a5f; color: #c6ffa6; }
.tg.bust { background: linear-gradient(#5a1f28, #3a1219); border: 1px solid #9a3f4f; color: #ffb3bd; }
.tg.wait { background: #1d1733; border: 1px solid #4a4270; color: #c9c3ee; }
.tg.out { background: #1a1a1a; border: 1px solid #444; color: #999; }
.s21.out { opacity: .55; filter: grayscale(.6); }
@keyframes pop21 { from { transform: scale(.4); opacity: 0; } }
/* a seat's cards of this round: in front of it, towards the middle (placed by the page, never over a plate) */
.hspot { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hand21 { --cw: var(--hcw, 78px); display: flex; justify-content: center; align-items: flex-end; min-height: calc(var(--cw) * 1.41); }
.hand21 .cd { transform: rotate(var(--r, 0deg)); }
.hand21 .cd + .cd { margin-left: calc(var(--cw) * -.38); }
.hmeta { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.hbet { display: flex; align-items: center; gap: 5px; animation: pop21 .35s cubic-bezier(.3,1.6,.5,1); }
.hbet .ch { width: 24px; height: 24px; } .hbet .ch::after { font-size: 0; }
.hbet b { font-size: 12px; font-weight: 900; color: #c6ffa6; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.4); font-variant-numeric: tabular-nums; }
.hbet.pending b { color: #fff; opacity: .85; }
.gem { min-width: 28px; height: 28px; padding: 0 5px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.6), transparent 40%), radial-gradient(circle at 50% 110%, #2a1485, transparent 70%), #7c5cff;
  box-shadow: 0 0 0 2px #ffcf4d, 0 0 0 4px #7a4c10, 0 6px 12px -4px rgba(0,0,0,.8), 0 0 14px rgba(162,141,255,.5); animation: pop21 .4s cubic-bezier(.3,1.6,.5,1) backwards; }
.gem.bad { background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.6), transparent 40%), radial-gradient(circle at 50% 110%, #6b0a1a, transparent 70%), #e0294a; box-shadow: 0 0 0 2px #ffcf4d, 0 0 0 4px #7a4c10, 0 0 18px rgba(255,77,94,.8); }
.gem.best { background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.7), transparent 40%), #e0a91d; color: #3a2400; text-shadow: none; box-shadow: 0 0 0 2px #fff3c4, 0 0 0 4px #7a4c10, 0 0 22px rgba(255,207,77,.9); }/* the message about what just happened: inside the table, over the pot (which fades under it), for a moment;
   it takes no room of its own */
.t21-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: max-content; max-width: 280px;
  padding: 12px 18px; border-radius: 18px; text-align: center; font-size: 16px; font-weight: 900; line-height: 1.25; letter-spacing: .2px; color: #fff;
  background: rgba(12,10,32,.9); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 16px 34px -12px rgba(0,0,0,.85);
  transition: opacity .3s; animation: banner21 .4s cubic-bezier(.3,1.5,.5,1); pointer-events: none; }
.t21-banner.blank { opacity: 0; animation: none; }
.t21-banner.good { border-color: #3f9a5f; color: #c6ffa6; }
.t21-banner.bad { border-color: #9a3f4f; color: #ffb3bd; }
.t21-banner.gold { border-color: #d9b46a; color: #ffe08a; }
@keyframes banner21 { from { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }
.pot21 { transition: opacity .3s; }
.center21:has(.t21-banner:not(.blank)) .pot21 { opacity: .15; }
/* ---------- your controls ---------- */
.dock21 { margin-top: 12px; border-radius: 22px; padding: 14px 16px; background: linear-gradient(160deg, rgba(30,25,72,.85), rgba(18,15,46,.82)); border: 1px solid var(--stroke);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; transition: border-color .3s, box-shadow .3s; }
.dock21.my-turn { border-color: rgba(162,141,255,.55); box-shadow: 0 0 0 3px rgba(124,92,255,.15), 0 20px 40px -20px rgba(124,92,255,.6); }
.dock21 .avw { width: 52px; height: 52px; border-radius: 50%; padding: 3px; background: conic-gradient(#8a86b0, #d9d6ef, #5a567e, #8a86b0); }
.dock21 .av { font-size: 18px; }
.turnlbl { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 8px; font-weight: 800; }
.turnlbl b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turnlbl span { color: #b5afd8; font-weight: 600; font-size: 13px; text-align: right; }
.tbar { position: relative; height: 16px; border-radius: 9px; background: #15122f; box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08); overflow: hidden; }
.tbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 9px; transform-origin: left; transform: scaleX(0);
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px), linear-gradient(#5ff2d8, #15b89c); background-size: 32px 100%, 100% 100%;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 0 14px rgba(45,224,196,.75); }
.tbar i::after { content: ''; position: absolute; top: 0; bottom: 0; width: 36%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: shine21 1.8s ease-in-out infinite; }
@keyframes shine21 { from { left: -40%; } to { left: 110%; } }
.tbar.low i { background: repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px), linear-gradient(#ff9aa4, #e0294a); background-size: 32px 100%, 100% 100%; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 0 14px rgba(255,77,94,.75); }
.tbar.idle { opacity: .35; }
.bets { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.bets .lb { font-size: 12px; color: var(--muted); font-weight: 700; }
.bet-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.betc { position: relative; width: 46px; height: 48px; border: 0; padding: 0; background: none; transition: transform .15s; }
.betc:hover { transform: translateY(-4px); }
.betc:active { transform: translateY(1px) scale(.95); }
.banko { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.25); background: none; color: #8f8bb5; font-size: 12px; font-weight: 800; }
.banko.on { border: 1px solid #d9b46a; color: #ffe08a; background: rgba(255,207,77,.1); }
.banko.on:hover { background: rgba(255,207,77,.18); }
.banko:disabled { cursor: default; }
.dock-act { display: flex; gap: 12px; align-items: flex-end; }
.hint-wrap { position: relative; display: inline-flex; }
.hint-wrap .tap-hint { display: flex; animation: tapBob 1.2s ease-in-out infinite; }
.hint-wrap .bt { animation: turnGlow21 1.6s ease-in-out infinite; }
.hint-wrap.quiet .tap-hint { display: none; }
.hint-wrap.quiet .bt { animation: none; }
.betc:disabled { opacity: .4; pointer-events: none; }
@keyframes turnGlow21 { 50% { filter: brightness(1.15); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.18), 0 6px 0 var(--ed), 0 0 0 6px rgba(162,141,255,.28), 0 0 34px rgba(124,92,255,.55); } }
.t21-banner.win { background: linear-gradient(160deg, rgba(31,90,51,.95), rgba(18,58,32,.95)); font-size: 18px; }
.bt { position: relative; height: 56px; padding: 0 22px; border: 0; border-radius: 18px; color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.28); transition: transform .09s, box-shadow .09s, filter .15s;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.18), 0 6px 0 var(--ed), 0 14px 22px -12px rgba(0,0,0,.8); display: inline-flex; align-items: center; gap: 9px; }
.bt::before { content: ''; position: absolute; left: 10px; right: 10px; top: 5px; height: 38%; border-radius: 12px 12px 18px 18px / 10px 10px 16px 16px; background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
.bt:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bt:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 var(--ed); }
.bt:disabled, .bt.loading { opacity: .5; pointer-events: none; }
.bt-p { --ed: #8a5a0a; background: linear-gradient(180deg, #ffe58f 0%, #f6c84a 48%, #e3a61f 100%); }
.bt-s { --ed: #120e2e; background: linear-gradient(180deg, #3b3570 0%, #2a2556 100%); }
.bt svg.i { width: 20px; height: 20px; stroke-width: 2.6; }
.bt b { padding: 2px 8px; border-radius: 9px; background: rgba(0,0,0,.25); font-variant-numeric: tabular-nums; }

/* ---------- side panel ---------- */
.t21-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.panel21 { border-radius: 22px; background: linear-gradient(160deg, rgba(30,25,72,.8), rgba(18,15,46,.78)); border: 1px solid var(--stroke); padding: 16px; }
.panel21 h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.panel21 .kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.panel21 .kv:last-child { border: 0; }
.panel21 .kv span { color: var(--muted); } .panel21 .kv b { font-weight: 800; text-align: right; }
.panel21 .kv small { color: var(--muted); font-weight: 600; }
.panel21 .gold { color: #ffd866; }
.log21 { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; }
.lg { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.lg i { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: #8f8bb5; }
.lg.good i { background: #a6f56b; } .lg.bad i { background: #ff4d5e; } .lg.gold i { background: #ffcf4d; } .lg.info i { background: #6cc6ff; }
.lg.muted { color: var(--muted); }
.lg:first-child { animation: in .4s cubic-bezier(.2,.9,.3,1); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .t21-layout { grid-template-columns: 1fr; }
  .t21-side { position: static; }
}
@media (max-width: 820px) {
  .felt { height: 600px; }
  .s21 .avw { width: 44px; height: 44px; }
  .s21 .plate { gap: 7px; padding: 5px 10px 5px 5px; }
  .s21 .nm { font-size: 12px; max-width: 84px; }
  .dock21 { grid-template-columns: minmax(0, 1fr); }
  .dock21 > .avw { display: none; }
  .dock-act { justify-content: stretch; margin-top: 26px; }
  .dock-act .bt, .dock-act .hint-wrap { flex: 1; justify-content: center; }
  .hint-wrap .bt { width: 100%; }
}
/* phones held upright: the same round table, taller than wide — the pot in the middle, the players round the edge,
   each one's cards in front of it towards the middle (their size follows the table: naumachia.js-like, set by
   placeHands); the deck and the discard pile small in the top corners; a tighter dock */
@media (max-width: 620px) {
  .page#table { padding: 6px 8px 24px; }
  .felt { height: clamp(470px, calc(100dvh - var(--top) - 230px), 660px); border-radius: 46% / 30%; background: #178057;
    box-shadow: inset 0 0 0 6px #7a4c25, inset 0 0 0 8px #d9b46a, inset 0 0 0 10px #3a220e, inset 0 12px 30px rgba(0,0,0,.55), 0 20px 40px -24px rgba(0,0,0,.9); }
  .felt-motto, .felt-sweep { display: none; }
  .felt-arc { width: 72%; height: 48%; }
  .center21 { width: 62%; display: flex; justify-content: center; }
  .pot21 { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 10px; padding: 8px 14px; border-radius: 16px; }
  .pot21 b { font-size: 20px; }
  .pot-chips { min-height: 0; margin: 0; transform: scale(.7); transform-origin: center; height: 30px; }
  .pot-round { flex-basis: 100%; text-align: center; font-size: 11px; }
  .shoe { right: 17%; top: 5%; transform: scale(.5); transform-origin: right top; }
  .discard { left: 17%; top: 5%; transform: scale(.5); transform-origin: left top; }
  .pot-float { font-size: 24px; }
  .s21 .plate { gap: 5px; padding: 3px 8px 3px 3px; }
  .s21 .avw { width: 30px; height: 30px; padding: 2px; }
  .s21 .av { font-size: 12px; }
  .s21 .av svg.i { width: 15px; height: 15px; }
  .s21 .bank-mark { font-size: 8px; bottom: -7px; padding: 0 5px; }
  .pinfo { gap: 1px; }
  .s21 .nm { font-size: 11px; max-width: 64px; }
  .s21 .sb { font-size: 10.5px; }
  .s21 .tg { font-size: 9px; padding: 1px 6px; }
  .hspot { gap: 2px; }
  .hmeta { min-height: 22px; }
  .pot-round { min-height: 14px; }
  .gem { min-width: 22px; height: 22px; font-size: 11px; }
  .t21-banner { font-size: 13.5px; max-width: 94%; padding: 9px 14px; border-radius: 14px; }
  .dock21 { margin-top: 8px; padding: 10px; gap: 8px; border-radius: 18px; }
  /* the controls stay at the bottom of the screen: the buttons never need scrolling (solid, over the table) */
  .dock21 { position: sticky; bottom: max(6px, env(safe-area-inset-bottom)); z-index: 20; background: linear-gradient(160deg, #1f1a4b, #13102f); }
  .turnlbl { flex-direction: column; gap: 2px; font-size: 13px; margin-bottom: 6px; }
  .turnlbl span { text-align: left; font-size: 12px; }
  .tbar { height: 10px; }
  .bets { gap: 6px; margin-top: 8px; }
  .betc { width: 40px; height: 42px; } .betc .ch { width: 38px; height: 38px; }
  .banko { height: 32px; padding: 0 10px; font-size: 11px; }
  .dock-act { gap: 8px; margin-top: 24px; min-height: 48px; }
  .bt { height: 48px; padding: 0 10px; font-size: 12.5px; letter-spacing: .4px; gap: 6px; border-radius: 15px; }
  .bt svg.i { width: 17px; height: 17px; }
  .t21-side { gap: 10px; }
  .log21 { max-height: 160px; }
  .pinfo { min-width: 0; }
  .turnlbl { flex-direction: row; align-items: baseline; gap: 8px; }
  .turnlbl b { flex: 1; min-width: 0; }
  .turnlbl span { max-width: 55%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock-act { margin-top: 20px; }
}
/* a picture in a seat */
.s21 .av .ava-img, .dock21 .av .ava-img { border-radius: 50%; }

/* ================= twenty-one: the setup's time limit ================= */
.t21-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; transition: opacity .2s; }
.t21-times.off { opacity: .35; }
.t21-times .btn.on { background: linear-gradient(#ffe38a, #e5b13a); color: #2a1800; border-color: transparent; }

/* ================= "Stop" and "Bust!" over a seat: a stamp that pops and goes away by itself ================= */
.stamp21 { position: absolute; left: 50%; top: -4px; z-index: 30; pointer-events: none; padding: 5px 14px; border-radius: 10px;
  font: 900 15px/1 'Inter', system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -100%) rotate(-8deg); animation: stamp21 1.9s cubic-bezier(.2,1.4,.4,1) forwards; }
.stamp21.stop { color: #2a1800; background: linear-gradient(#fff1b8, #ffcf4d); box-shadow: 0 0 0 2px #fff, 0 6px 16px -4px rgba(0,0,0,.7), 0 0 22px rgba(255,207,77,.6); }
.stamp21.bust { color: #fff; background: linear-gradient(#ff8a5c, #e3263f 60%, #8f0f22); box-shadow: 0 0 0 2px #ffd0c0, 0 6px 16px -4px rgba(0,0,0,.7), 0 0 26px rgba(255,90,40,.75); }
@keyframes stamp21 { 0% { transform: translate(-50%, -100%) rotate(-8deg) scale(2.2); opacity: 0; } 14% { transform: translate(-50%, -100%) rotate(-8deg) scale(.92); opacity: 1; }
  22% { transform: translate(-50%, -100%) rotate(-8deg) scale(1.04); } 78% { transform: translate(-50%, -100%) rotate(-8deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -130%) rotate(-8deg) scale(.9); opacity: 0; } }
@media (max-width: 620px) { .stamp21 { font-size: 12px; padding: 4px 10px; } }

/* ================= a new bank: its mark travels to the new seat, which glows a moment ================= */
.bankfly { position: absolute; z-index: 35; pointer-events: none; padding: 2px 9px; border-radius: 999px; transform-origin: 0 0; margin-left: -18px;
  background: linear-gradient(#ffe08a, #ffcf4d); color: #3a2400; font: 900 11px/1.4 'Inter', system-ui, sans-serif; letter-spacing: .5px;
  box-shadow: 0 2px 0 #7a4c10, 0 0 18px rgba(255,207,77,.8); transition: transform .9s cubic-bezier(.45,.05,.25,1), opacity .35s; }
.s21.bank-new .avw { animation: bankNew21 1.5s ease-out; }
@keyframes bankNew21 { 0% { box-shadow: 0 0 0 0 rgba(255,207,77,.9); } 40% { box-shadow: 0 0 0 10px rgba(255,207,77,.35), 0 0 30px rgba(255,207,77,.8); } 100% { box-shadow: 0 0 0 0 rgba(255,207,77,0); } }
@media (prefers-reduced-motion: reduce) { .stamp21, .s21.bank-new .avw { animation: none; } }

/* ================= the buttons of the twenty-one table, in the casino's colours (gold on green felt) ================= */
.k21-layout .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); }
.k21-layout .bt-s { --ed: #06261a; color: #f3e3c4;
  background: linear-gradient(180deg, #1f6b4c 0%, #145238 100%); box-shadow: inset 0 0 0 1.5px rgba(217,180,106,.65), inset 0 2px 0 rgba(255,255,255,.18), 0 5px 0 var(--ed), 0 12px 22px -10px rgba(0,0,0,.8); }
.k21-layout .bt b { background: rgba(0,0,0,.18); }
.k21-layout .banko.on { border-color: #ffd866; color: #2a1800; background: linear-gradient(#fff1b8, #ffcf4d); box-shadow: 0 3px 0 #7a4c10; }
.k21-layout .banko.on:hover { background: linear-gradient(#fff6cf, #ffd866); }

/* ================= full screen: the twenty-one table on one screen ================= */
body.game-fs .k21-layout { height: 100%; align-items: stretch; }
body.game-fs .k21-layout .t21-main { display: flex; flex-direction: column; min-height: 0; height: 100%; }
body.game-fs .k21-layout .felt { flex: 1 1 auto; height: auto; min-height: 0; }
body.game-fs .k21-layout .dock21 { flex: none; position: static; }
body.game-fs .k21-layout > .t21-side { position: static; height: 100%; min-height: 0; overflow: hidden; }
body.game-fs .k21-layout > .t21-side > .panel21 { flex: none; }
body.game-fs .k21-layout > .t21-side > .panel21:has(.log21) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.game-fs .k21-layout > .t21-side .log21 { flex: 1 1 auto; min-height: 0; max-height: none; }
@media (max-width: 1100px) {
  body.game-fs .k21-layout > .t21-side { display: none; }
}.stamp21 { top: -30px; }
@media (max-width: 620px) { .stamp21 { top: -22px; } }
/* ================= the table's tools: full screen, pause, leave — small, above the table, never among the moves ================= */
/* (on a big screen in the empty top corner beside the oval table; on a phone a thin line over the table) */
.k21-layout .t21-main { position: relative; }
.tools21 { position: absolute; top: 4px; right: 4px; z-index: 6; display: flex; gap: 6px; pointer-events: none; }
.tool21 { pointer-events: auto; height: 32px; min-width: 32px; padding: 0 9px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid rgba(217,180,106,.45); background: rgba(10,44,30,.78); color: #f3e3c4; font: 800 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .3px; cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .15s, border-color .15s; }
.tool21:hover { background: rgba(20,74,50,.9); border-color: rgba(255,216,102,.7); }
.tool21:active { transform: translateY(1px); }
.tool21 svg.i { width: 16px; height: 16px; flex: none; }
.tool21.hidden { display: none; }
.tool21 span:empty { display: none; }
@media (max-width: 620px) {
  .tools21 { position: static; justify-content: flex-end; margin: 0 2px 4px; }
  .tools21:not(:has(.tool21:not(.hidden))) { display: none; }
  body.game-fs .tools21 { display: flex; }
  .tool21 { height: 26px; min-width: 26px; padding: 0 7px; border-radius: 8px; font-size: 11px; gap: 4px; }
  .tool21 svg.i { width: 14px; height: 14px; }
}
/* ---------- the felt (the admin's choice, or each player's own on their screen): twenty-one and Ten Steps ---------- */
.felt.tf-green, .p10-felt.tf-green, .lkp-tf.tf-green { background: radial-gradient(ellipse at 50% 40%, #23946a 0%, #136246 52%, #093626 100%); }
.felt.tf-blue, .p10-felt.tf-blue, .lkp-tf.tf-blue { background: radial-gradient(ellipse at 50% 38%, #3a4bb0 0%, #24327f 46%, #121a4c 100%); }
.felt.tf-burgundy, .p10-felt.tf-burgundy, .lkp-tf.tf-burgundy { background: radial-gradient(ellipse at 50% 40%, #a3283e 0%, #6e1427 50%, #3a0812 100%); }
.felt.tf-black, .p10-felt.tf-black, .lkp-tf.tf-black { background: radial-gradient(ellipse at 50% 40%, #33333b 0%, #1c1c22 52%, #0a0a0d 100%); }
.felt.tf-black .felt-arc, .p10-felt.tf-black::before { border-color: rgba(217,180,106,.45); }
.lkp-tf { display: flex; align-items: center; justify-content: center; width: 88px; height: 58px; border-radius: 12px;
  box-shadow: inset 0 0 0 3px #7a4c25, inset 0 0 0 4px #d9b46a, inset 0 0 0 6px #3a220e, inset 0 6px 14px rgba(0,0,0,.5), 0 8px 16px -8px rgba(0,0,0,.8); }
.lkp-tf .lkp-cards .lkp-cd { --cw: 26px; }
/* ---------- phones: the little buttons in the line of the bar (leave, full screen, pause) are never cut: the line wraps instead ---------- */
@media (max-width: 620px) {
  .turnlbl { flex-wrap: wrap; row-gap: 6px; }
  .turnlbl > .ld-tools, .turnlbl > .br-tools, .turnlbl > .pause-mini, .turnlbl .pause-mini, .turnlbl .pause-mini span, .turnlbl .tool21 span {
    max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
  .turnlbl > .ld-tools, .turnlbl > .br-tools { margin-left: auto; }
}
/* phones held upright: your own cards a little bigger than the others' */
@media (max-width: 620px) { .s21.me .hand21 { --cw: calc(var(--hcw, 38px) * 1.25); } .hand21 .cd + .cd { margin-left: calc(var(--cw) * -.5); } }