/* Table view in the style of the reference videos (loaded after app.css and site.css).
   Full-screen table in a casino lounge, round avatars without plates, round action buttons,
   bet tags with a letter, a ribbon with the winning hand, quick replies after a hand. */

/* ---------- full screen: no site header at the table ---------- */
body.on-table #topbar, body.on-table #announcement { display: none !important; }
body.on-table .table-view.zy { height: 100dvh !important; }
.zy { --av: 92px; --av-me: 116px; --cw: 50px; --cw-me: 70px; --zb: 44px; --zi: 58px; }

/* ---------- the room around the table ---------- */
.zy .table-stage {
  background:
    radial-gradient(ellipse at 50% 62%, rgba(0,0,0,0) 35%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(8,6,14,.05) 0%, rgba(8,6,14,.35) 100%),
    #0b0710 !important; /* every table has its room picture on top: no extra 300 KB download here */
}
.zy .table-stage::before { display: none; }
.zy .table-stage[data-theme]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: soft-light; opacity: .55;
  background: radial-gradient(ellipse at 50% 70%, var(--tint, transparent), transparent 70%);
}
.zy .table-stage[data-theme=micro]  { --tint: #1fbf7a; }
.zy .table-stage[data-theme=low]    { --tint: #ff3b5c; }
.zy .table-stage[data-theme=free]   { --tint: #2fc8ff; }
.zy .table-stage[data-theme=medium] { --tint: #3fe0d0; }
.zy .table-stage[data-theme=high]   { --tint: #ffbf3f; }
.zy #scene3d { z-index: 1; }

/* ---------- round buttons in the corners ---------- */
.zbtn {
  width: var(--zb); height: var(--zb); border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none;
  background: rgba(22,12,28,.72); border: 1.5px solid rgba(255,255,255,.22); color: #fff; font-size: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); transition: transform .12s, background .15s;
}
.zbtn:hover { background: rgba(60,30,70,.85); }
.zbtn:active { transform: scale(.94); }
.zbtn svg { width: 22px; height: 22px; fill: currentColor; }
.zbtn--sm { width: 34px; height: 34px; font-size: 14px; }
.zbtn--back { position: absolute; top: 12px; left: 14px; z-index: 8; }
.ztitle { position: absolute; top: 14px; left: calc(14px + var(--zb) + 10px); z-index: 8; display: flex; flex-direction: column; pointer-events: none; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.ztitle b { font: 700 15px var(--font-display); color: #fff; white-space: nowrap; }
.ztitle span { font-size: 11px; color: rgba(255,255,255,.65); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: auto; }
.ztitle span a { color: var(--brass-l); }
.ztop-right { position: absolute; top: 12px; right: 14px; z-index: 8; display: flex; gap: 10px; align-items: center; }
.zwatch { font-size: 12px; color: rgba(255,255,255,.7); text-shadow: 0 2px 6px #000; }
.zbottom-left { position: absolute; left: 14px; bottom: 14px; z-index: 8; display: flex; gap: 12px; }
@media (min-width: 1101px) and (min-height: 501px) { .zy .chat-toggle { display: none; } }

/* ---------- dealer ---------- */
.zy .dealer-tip {
  background: rgba(30,18,34,.82); color: #fff; border: 1px solid rgba(255,255,255,.22); font: 600 12px var(--font-ui);
  box-shadow: 0 4px 12px rgba(0,0,0,.5); height: 26px; padding: 0 12px; transform: translate(-50%, -4px);
}
.zy .dealer-tip b { font: 700 11px var(--font-money); color: var(--brass-l); }
.zy .dealer-tip:hover { transform: translate(-50%, -5px) scale(1.04); }

/* ---------- players: big round avatars, no plates ---------- */
.zy .seat { width: var(--av); gap: 0; }
.zy .seat.far { flex-direction: column; transform: translate(-50%, -50%); }
.zy .seat .seat__ring {
  width: var(--av); height: var(--av); padding: 3px; background: rgba(10,6,14,.55);
  box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 12px 24px rgba(0,0,0,.55);
}
.zy .seat .seat-av { width: 100%; height: 100%; }
.zy .seat.turn .seat__ring { width: var(--av); height: var(--av); padding: 5px; background: conic-gradient(var(--tcol, #3ddc97) 0 var(--progress), rgba(255,255,255,.14) var(--progress) 100%); box-shadow: 0 0 22px color-mix(in srgb, var(--tcol, #3ddc97) 55%, transparent); }
.zy .seat .seat__timer { display: none !important; }
.zy .seat.me { width: var(--av-me); }
.zy .seat.me .seat__ring { width: var(--av-me); height: var(--av-me); }
.zy .seat.winner .seat__ring { box-shadow: 0 0 0 3px #ffd34a, 0 0 30px rgba(255,211,74,.75); }
.zy .seat.folded:not(.me) { opacity: 1; filter: none; }
.zy .seat.folded:not(.me) .seat__ring { filter: grayscale(.8) brightness(.7); }
.zy .seat.away { opacity: .55; }
.zy .seat__info { display: flex; flex-direction: column; align-items: center; margin-top: 4px; white-space: nowrap; text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 0 2px #000; pointer-events: none; }
.zy .seat__info .st { font: 800 15px var(--font-money); color: #fff; letter-spacing: .01em; }
.zy .seat.me .seat__info .st { font-size: 18px; }
.zy .seat__info .nm { font: 600 11px var(--font-ui); color: rgba(255,255,255,.72); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.zy .seat__info .nm i { font-style: normal; font-weight: 800; font-size: 9px; color: #1b1206; background: var(--brass-l); border-radius: 4px; padding: 0 3px; margin-right: 4px; vertical-align: 1px; }
.zy .seat__info .act { font: 800 11px var(--font-ui); color: #fff; margin-top: 2px; }
.zy .seat__info .act .pos { color: #ffd34a; }
.zy .seat__info .act .allin { color: #fff; background: #d9283f; border-radius: 4px; padding: 1px 6px; }
.zy .seat__info .hn { font: 700 11px var(--font-ui); color: var(--brass-l); }
.zy .seat .plate { display: none; }
.zy .seat__gift {
  position: absolute; top: -2px; right: -6px; width: 26px; height: 26px; border-radius: 50%; z-index: 4; cursor: pointer;
  display: grid; place-items: center; font-size: 13px; background: rgba(30,14,34,.85); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.zy .seat__gift:hover { transform: scale(1.12); }
.zy .seat .seat__gifts { left: calc(100% - 4px); top: 26px; }

/* empty seat: a round "sit" icon */
.zy .seat.empty { width: auto; }
.zy .seat .empty-seat {
  width: 58px; height: 58px; padding: 0; border-radius: 50%; flex-direction: column; justify-content: center; gap: 0;
  border: 2px dashed rgba(255,255,255,.35); background: rgba(20,10,24,.6); color: rgba(255,255,255,.85); font-size: 10px;
}
.zy .seat .empty-seat::before { content: none; }
.zy .seat .empty-seat svg { width: 24px; height: 24px; fill: currentColor; }
.zy .seat .empty-seat:hover { border-color: #fff; color: #fff; background: rgba(60,30,70,.75); }

/* ---------- cards ---------- */
.pcard {
  --c: var(--cw); position: relative; display: inline-block; flex: none; width: var(--c); height: calc(var(--c) * 1.4); border-radius: calc(var(--c) * .1);
  background: #fff; color: #17121a; box-shadow: 0 6px 14px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.12); overflow: hidden;
}
.pcard b { position: absolute; left: 7%; top: 3%; font: 800 calc(var(--c) * .4) / 1 var(--font-money); letter-spacing: -.04em; }
.pcard i { position: absolute; left: 9%; top: 34%; width: 26%; }
.pcard em { position: absolute; right: 6%; bottom: 5%; width: 54%; }
.pcard svg { display: block; width: 100%; height: auto; fill: currentColor; }
.pcard.red { color: #d1213a; }
.pcard.back { background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 7px), #7a1028; box-shadow: 0 6px 14px rgba(0,0,0,.55), inset 0 0 0 3px #fff; }
.pcard.win { box-shadow: 0 0 0 3px #ffd34a, 0 0 22px rgba(255,211,74,.8); }
/* my cards: big, over the lower half of my avatar */
.zy .seat__hole { position: absolute; left: 50%; top: calc(var(--av-me) * .44); transform: translateX(-50%); display: flex; z-index: 3; pointer-events: none; }
.zy .seat__hole .pcard { --c: var(--cw-me); }
.zy .seat__hole .pcard:first-child { transform: rotate(-6deg) translateY(2px); }
.zy .seat__hole .pcard:last-child { margin-left: calc(var(--cw-me) * -.18); transform: rotate(6deg); }
.zy .seat__hole.mucked .pcard { filter: grayscale(1) brightness(.55); }
.zy .seat__hole.deal .pcard { animation: zdeal .45s cubic-bezier(.2,.8,.3,1) both; }
.zy .seat__hole.deal .pcard:last-child { animation-delay: .22s; }
@keyframes zdeal { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -200px)) scale(.4) rotate(-30deg); } 30% { opacity: 1; } }
.zy .seat.me:has(.seat__hole) .seat__info { margin-top: calc(var(--cw-me) * 1.4 * .62); }
.zy .mucked-tag { position: absolute; left: -64px; bottom: 6px; font: 600 12px var(--font-ui); color: rgba(255,255,255,.7); text-shadow: 0 2px 4px #000; }
/* cards shown at showdown: over the avatar, top right */
.zy .seat .seat__cards.shown { position: absolute; top: -8%; left: 42%; height: auto; margin: 0; display: flex; z-index: 5; }
.zy .seat .seat__cards.shown .pcard { --c: var(--cw); }
.zy .seat .seat__cards.shown .pcard:last-child { margin-left: calc(var(--cw) * -.12); }
.zy .seat.far .seat__cards.shown .mini-card { margin-top: 0; }
/* card faces: the same normal cards on every table (white card, black and red suits) */
.zy .pcard:not(.back):not(.pic) { background: #fff; color: #17121a; }
.zy .pcard.red:not(.pic) { color: #d1213a; }

/* ---------- bets, checks, folds on the felt ---------- */
.zy .bet-chip { height: 24px; gap: 6px; padding: 0 11px 0 3px; background: rgba(12,6,16,.78); border: 1px solid rgba(255,255,255,.14); font: 800 13px var(--font-money); color: #fff; }
.zy .bet-chip::before { content: none; }
.zy .bet-chip .bl { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 900 11px var(--font-ui); font-style: normal; color: #fff; background: #1fa898; }
.zy .bet-chip .bl.bet, .zy .bet-chip .bl.raise { background: linear-gradient(#ffd25a, #e39a1a); color: #3a2400; }
.zy .bet-chip .bl.allin { background: #d9283f; }
.zy .bet-chip.mark { width: 22px; height: 22px; padding: 0; justify-content: center; border-radius: 50%; font: 900 13px var(--font-ui); border: 0; transform: translate(-50%, -50%); }
.zy .bet-chip.mark.check { background: #1fa898; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.zy .bet-chip.mark.fold { background: #c9213a; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }

/* pot: a dark pill with a chip, right above the board */
.zy .pot-label { transform: translate(-50%, -50%); height: 28px; gap: 8px; padding: 0 14px 0 5px; background: rgba(12,6,16,.75); border: 1px solid rgba(255,255,255,.14); backdrop-filter: none; }
.zy .pot-label::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; letter-spacing: 0;
  background: radial-gradient(circle, #1fa898 0 34%, #fff 35% 42%, #1fa898 43% 58%, transparent 59%), repeating-conic-gradient(#fff 0 18deg, #1fa898 18deg 45deg);
}
.zy .pot-label .v { font: 800 16px var(--font-money); background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }

/* the question on the felt: "CHECK or BET?" */
.zprompt {
  position: absolute; z-index: 4; transform: translate(-50%, -50%); translate: 0 var(--ay, 0px); pointer-events: none !important; white-space: nowrap;
  padding: 4px 18px; border-radius: 6px; background: rgba(12,6,16,.62); color: #fff; font: 700 17px var(--font-ui); letter-spacing: .02em; text-shadow: 0 2px 4px #000;
}
/* winning hand ribbon: "FULL HOUSE" */
.zribbon {
  position: absolute; z-index: 4; transform: translate(-50%, -50%); translate: 0 var(--ay, 0px); pointer-events: none !important;
  display: flex; flex-direction: column; align-items: center; min-width: min(520px, 62%); padding: 6px 48px 7px;
  background: linear-gradient(90deg, transparent, rgba(150,20,44,.94) 14%, rgba(176,28,52,.96) 50%, rgba(150,20,44,.94) 86%, transparent);
  border-top: 1px solid rgba(255,210,120,.45); border-bottom: 1px solid rgba(255,210,120,.45);
}
.zribbon b { font: 900 30px/1 var(--font-display); letter-spacing: .06em; background: linear-gradient(180deg, #fff6d0, #ffcf4a 55%, #d4890f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.zribbon span { font: 600 11px var(--font-ui); color: rgba(255,255,255,.85); margin-top: 2px; }
.zy .result-banner { display: none; }

/* ---------- action buttons: round, bottom right ---------- */
.zy .action-bar.zactions {
  left: auto; right: 16px; bottom: 12px; top: auto; min-height: 0; height: auto; width: auto; padding: 0; gap: 10px;
  background: none; border: 0; display: flex; flex-direction: column; align-items: flex-end; flex-wrap: nowrap;
  translate: 0 var(--ay, 0px);
}
.zrow { display: flex; align-items: flex-end; gap: 20px; }
.zact { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; color: #fff; }
.zact__label { font: 600 14px var(--font-ui); text-shadow: 0 2px 5px #000; white-space: nowrap; }
.zact__ico {
  width: var(--zi); height: var(--zi); border-radius: 50%; display: grid; place-items: center; font-style: normal; font: 800 22px var(--font-ui); color: #fff;
  background: rgba(14,8,18,.55); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 6px 16px rgba(0,0,0,.5); transition: transform .12s, filter .15s;
}
.zact__ico svg { width: 30px; height: 30px; fill: currentColor; }
.zact:hover .zact__ico { transform: translateY(-2px); filter: brightness(1.1); }
.zact:active .zact__ico { transform: scale(.94); }
.zact:disabled { opacity: .5; }
.zrow.pre .zact.on .zact__ico { background: #1fa898; border-color: #7ff0e4; box-shadow: 0 0 18px rgba(31,168,152,.7); }
.zrow.pre .zact.on .zact__label { color: #7ff0e4; }
.zrow.act .zact__ico { border: 3px solid rgba(255,255,255,.28); }
.zrow.act .zact.fold .zact__ico { background: radial-gradient(circle at 50% 35%, #ff5a6e, #b3122d); }
.zrow.act .zact.fold .zact__label { color: #ff8a98; }
.zrow.act .zact.check .zact__ico, .zrow.act .zact.call .zact__ico { background: radial-gradient(circle at 50% 35%, #2fd8c6, #0b7a70); }
.zrow.act .zact.check .zact__label, .zrow.act .zact.call .zact__label { color: #7ff0e4; }
.zrow.act .zact.raise .zact__ico { background: radial-gradient(circle at 50% 35%, #ffd65e, #d98b0f); color: #3a2400; }
.zrow.act .zact.raise .zact__label { color: #ffd65e; }
.zrow.act .zact.raise.on .zact__ico { box-shadow: 0 0 0 4px rgba(255,214,94,.4), 0 0 22px rgba(255,214,94,.7); }
.zact .amt { font: 800 12px var(--font-money); letter-spacing: -.02em; }
.ztime { align-self: center; display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 12px; cursor: pointer; background: rgba(14,8,18,.7); border: 1px solid rgba(255,255,255,.25); color: #fff; font: 800 13px var(--font-money); }
.ztime small { font: 600 10px var(--font-ui); color: rgba(255,255,255,.65); }
/* raise panel above the buttons */
.zraise {
  width: 290px; padding: 12px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px;
  background: rgba(16,8,20,.94); border: 1px solid rgba(255,214,94,.35); box-shadow: 0 16px 40px rgba(0,0,0,.6); translate: 0 var(--ay, 0px);
}
.zraise__amt { text-align: center; font: 900 26px var(--font-money); color: #ffd65e; }
.zraise input[type=range] { width: 100%; accent-color: #ffc94a; min-height: 26px; }
.zraise input[type=number] { display: none; }
.zraise__q { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.zraise__q button { height: 34px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; font: 700 12px var(--font-ui); }
.zraise__q button:hover { border-color: #ffd65e; color: #ffd65e; }
.zraise__go { min-height: 46px; font-size: 16px; }

/* "Show" next to my cards */
.zshow { position: absolute; z-index: 6; left: calc(50% - var(--av-me) * 1.25); bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; color: #fff; font: 600 13px var(--font-ui); text-shadow: 0 2px 4px #000; }
.zshow i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(22,12,28,.75); border: 1.5px solid rgba(255,255,255,.3); }
.zshow i svg { width: 20px; height: 20px; fill: #fff; }

/* quick replies after a hand */
.zreplies { position: absolute; z-index: 9; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 10px; }
.zreplies button {
  height: 40px; padding: 0 18px; border-radius: 10px; cursor: pointer; white-space: nowrap; translate: 0 var(--ay, 0px);
  background: linear-gradient(180deg, #4fd77d, #22964b); border: 1px solid rgba(255,255,255,.3); color: #fff; font: 700 14px var(--font-ui); text-shadow: 0 1px 2px rgba(0,0,0,.4);
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
}
.zreplies button:hover { filter: brightness(1.08); }
/* speech bubble over a player */
.zbubble {
  position: absolute; z-index: 11; transform: translate(-50%, -100%); scale: var(--pop, 1); pointer-events: none;
  padding: 5px 12px; border-radius: 14px; background: #1fb6cc; color: #fff; font: 700 12px var(--font-ui); white-space: nowrap; box-shadow: 0 6px 14px rgba(0,0,0,.45);
}
.zbubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: #1fb6cc; border-bottom: 0; }

/* options: a panel sliding in from the left */
.zoptions {
  position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; width: min(330px, 82%); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #4a1226, #2a0a16); border-right: 1px solid rgba(255,255,255,.12); box-shadow: 20px 0 50px rgba(0,0,0,.5);
  transform: translateX(-105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); padding-left: env(safe-area-inset-left);
}
.zoptions.open { transform: none; }
.zoptions__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.zoptions__head b { font: 800 24px var(--font-display); letter-spacing: .06em; color: #f3d9a4; }
.zoptions .my-controls { display: flex !important; position: static !important; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 12px; overflow-y: auto; min-width: 0; background: none; border: 0; box-shadow: none; }
.zoptions .my-controls .btn { justify-content: flex-start; min-height: 48px !important; padding: 0 12px !important; font: 600 16px var(--font-ui) !important; border: 0; background: transparent; color: #fff; border-radius: 12px; box-shadow: none; }
.zoptions .my-controls .btn:hover { background: rgba(255,255,255,.07); }
.zoptions .my-controls .btn.red { color: #ffb3bd; }
.zoptions .my-controls .btn.gold, .zoptions .my-controls .btn.green { color: #ffd65e; background: transparent; filter: none; }
.zshade { position: absolute; inset: 0; z-index: 29; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none !important; transition: opacity .25s; }
.zshade.open { opacity: 1; pointer-events: auto !important; }
.zy .ctl-toggle { display: none !important; }

/* other bits */
.zy .strength { left: 14px; bottom: calc(14px + var(--zb) + 12px); }
.zy .between-hands { bottom: calc(var(--zi) + 60px); }

/* ---------- phones (sideways, or upright with the view turned) ---------- */
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  .zy { --av: 54px; --av-me: 74px; --cw: 32px; --cw-me: 46px; --zb: 36px; --zi: 44px; }
  .zbtn svg { width: 18px; height: 18px; }
  .zbtn--back { top: 8px; left: 10px; }
  .ztitle { top: 9px; left: calc(10px + var(--zb) + 8px); }
  .ztitle b { font-size: 12px; }
  .ztitle span { display: none; }
  .ztop-right { top: 8px; right: 10px; gap: 8px; }
  .zbottom-left { left: 10px; bottom: 8px; gap: 8px; }
  .zy #scene3d { top: 0; bottom: 0; }
  .zy .seat__info .st { font-size: 12px; }
  .zy .seat.me .seat__info .st { font-size: 14px; }
  .zy .seat__info .nm { font-size: 9px; max-width: 86px; }
  .zy .seat__gift { width: 20px; height: 20px; font-size: 10px; top: -4px; right: -8px; }
  .zy .seat .empty-seat { width: 40px; height: 40px; font-size: 8px; }
  .zy .seat .empty-seat svg { width: 17px; height: 17px; }
  .zy .bet-chip { height: 19px; font-size: 10px; padding: 0 7px 0 2px; gap: 4px; }
  .zy .bet-chip .bl { width: 14px; height: 14px; font-size: 9px; }
  .zy .bet-chip.mark { width: 17px; height: 17px; font-size: 10px; }
  .zy .pot-label { height: 22px; padding: 0 10px 0 3px; gap: 5px; }
  .zy .pot-label::before { width: 15px; height: 15px; }
  .zy .pot-label .v { font-size: 12px; }
  .zprompt { font-size: 12px; padding: 2px 12px; }
  .zribbon { padding: 4px 30px 5px; min-width: 52%; }
  .zribbon b { font-size: 19px; }
  .zribbon span { font-size: 9px; }
  .zy .action-bar.zactions { right: 10px; bottom: 6px; padding: 0 !important; height: auto !important; min-height: 0 !important; }
  .zrow { gap: 12px; }
  .zact__label { font-size: 11px; }
  .zact__ico { font-size: 17px; }
  .zact__ico svg { width: 22px; height: 22px; }
  .zact .amt { font-size: 9px; }
  .zraise { width: 230px; padding: 8px; gap: 6px; }
  .zraise__amt { font-size: 18px; }
  .zraise__q button { height: 28px; font-size: 10px; }
  .zraise__go { min-height: 36px; font-size: 13px; }
  .zshow { bottom: 6px; font-size: 10px; }
  .zshow i { width: 32px; height: 32px; }
  .zreplies { bottom: 6px; gap: 6px; }
  .zreplies button { height: 30px; padding: 0 10px; font-size: 11px; }
  .zy .mucked-tag { left: -50px; font-size: 10px; }
  .zy .dealer-tip { height: 20px; font-size: 9px; padding: 0 8px; }
  .zy .dealer-tip b { font-size: 9px; }
  .zbubble { font-size: 10px; padding: 3px 8px; }
  .zy .strength { width: 160px; bottom: calc(8px + var(--zb) + 8px); left: 10px; }
}

/* the old "YOU WIN" banner and floating amounts, sized for the new layout */
.zy .fx-banner { top: 30%; font-size: clamp(30px, 6vw, 64px); }
.zy .fx-float { font-size: 18px; }
.zy .fx-float.me { font-size: 22px; }
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  .zy .fx-banner { font-size: 30px; top: 26%; }
  .zy .fx-float { font-size: 13px; }
  .zy .fx-float.me { font-size: 16px; }
}

/* phone held upright: the whole table view is turned sideways (app.css); keep its turned size */
@media (orientation: portrait) and (max-width: 700px) {
  body.on-table .table-view.zy { width: 100dvh !important; height: 100dvw !important; }
}

/* action buttons closer to the middle: they start right next to my cards instead of the screen edge */
.zy .action-bar.zactions { left: calc(50% + var(--av-me) * .78); right: auto; align-items: flex-start; }
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  .zy .action-bar.zactions { left: calc(50% + var(--av-me) * .72); right: auto; }
}

/* "Tip the Dealer" sits over the dealer's hands (like the reference), the pot pill below it */
.zy .dealer-tip { top: auto; bottom: 10%; transform: translate(-50%, 0); }
.zy .dealer-tip:hover { transform: translate(-50%, -1px) scale(1.04); }
.zy .dealer-tip:active { transform: translate(-50%, 0) scale(.96); }

/* show one card, the other or both (after a fold, or after winning without a showdown) */
.zshow { cursor: default; }
.zshow__opts { display: flex; gap: 6px; align-items: flex-end; }
.zshow__card { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 8px; transition: transform .15s; }
.zshow__card .pcard { --c: 38px; box-shadow: 0 4px 10px rgba(0,0,0,.6), 0 0 0 2px rgba(255,211,74,.75); }
.zshow__card:hover, .zshow__card:focus-visible { transform: translateY(-4px); }
.zshow__all { align-self: center; padding: 8px 12px; border-radius: 12px; border: 1.5px solid rgba(255,211,74,.75); background: rgba(22,12,28,.85); color: #ffd34a; font: 700 13px var(--font-ui); cursor: pointer; }
.zy .seat .seat__cards.shown.after-fold { opacity: .82; filter: saturate(.85); }
@media (max-width: 760px), (max-height: 500px) {
  .zshow__card .pcard { --c: 28px; }
  .zshow__all { padding: 5px 8px; font-size: 11px; }
}

/* free drinks drawn as real glasses */
.drink-img { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.drink-img.fly { width: 64px; height: 64px; }
.fx-fly.drink .fx-fly__ico { font-size: 0; background: none; box-shadow: none; }
.zy .seat .seat__gifts span.drink .drink-img { width: 26px; height: 26px; }
.gift-sec { margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.gift-grid.drinks { grid-template-columns: repeat(4, 1fr); }
.gift-opt.drink .gift-ico .drink-img { width: 58px; height: 58px; }
.gift-opt.drink { padding-top: 10px; }
.gift-opt.drink:hover .drink-img { transform: translateY(-3px) rotate(-4deg); transition: transform .15s; }
@media (max-width: 520px) { .gift-grid.drinks { grid-template-columns: repeat(4, 1fr); gap: 6px; } .gift-opt.drink .gift-ico .drink-img { width: 42px; height: 42px; } .gift-opt.drink b { font-size: 11px; } }

/* Omaha: four hole cards */
.zy .seat__hole.four .pcard { --c: calc(var(--cw-me) * .8); transform: none; }
.zy .seat__hole.four .pcard + .pcard { margin-left: calc(var(--cw-me) * -.34); }
.zy .seat__hole.four .pcard:nth-child(1) { transform: rotate(-9deg) translateY(4px); }
.zy .seat__hole.four .pcard:nth-child(2) { transform: rotate(-3deg) translateY(0); }
.zy .seat__hole.four .pcard:nth-child(3) { transform: rotate(3deg) translateY(0); }
.zy .seat__hole.four .pcard:nth-child(4) { transform: rotate(9deg) translateY(4px); }
.zy .seat__hole.four.deal .pcard:nth-child(3) { animation-delay: .44s; } .zy .seat__hole.four.deal .pcard:nth-child(4) { animation-delay: .66s; }
.zy .seat .seat__cards.shown.four { left: 30%; }
.zy .seat .seat__cards.shown.four .pcard { --c: calc(var(--cw) * .82); }
.zy .seat .seat__cards.shown.four .pcard + .pcard { margin-left: calc(var(--cw) * -.32); }
/* the show-cards picker sits left of my avatar and grows to the left (4 cards in Omaha) */
.zy .zshow { left: auto; right: calc(50% + var(--av-me) * .95); bottom: 16px; align-items: flex-end; }

/* cards shown by choice: a tag, a gold edge, and the new card flips in */
.show-tag { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); z-index: 6; white-space: nowrap; padding: 2px 9px; border-radius: 10px;
  font: 800 11px var(--font-ui); letter-spacing: .04em; color: #1b1206; background: linear-gradient(180deg, #ffe27a, #f0b429); box-shadow: 0 3px 10px rgba(0,0,0,.5), 0 0 12px rgba(255,211,74,.55); }
.show-tag.pop { animation: showTag .45s cubic-bezier(.2,.9,.3,1.4) both; } /* only when just shown: the seats are redrawn on every update */
.show-tag.me { top: calc(var(--av-me) * .44 - 26px); z-index: 7; }
.zy .seat .seat__cards.shown.by-choice { top: -14%; }
.pcard.is-shown { box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 0 0 2px #ffd34a, 0 0 16px rgba(255,211,74,.6) !important; }
.zy .seat__hole .pcard.is-shown { filter: none !important; }
.zy .seat__hole .pcard.is-shown::after { content: '👁'; position: absolute; right: -6px; top: -8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #ffd34a; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.pcard.flip-in { animation: flipIn .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes flipIn { 0% { transform: perspective(400px) rotateY(90deg) scale(1.15); filter: brightness(1.8); } 60% { transform: perspective(400px) rotateY(-8deg) scale(1.08); } 100% { transform: none; filter: none; } }
@keyframes showTag { from { opacity: 0; transform: translate(-50%, 6px) scale(.7); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* training program: the bots see all cards */
.training-flag { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 30; padding: 5px 14px; border-radius: 12px; font: 800 12px var(--font-ui); letter-spacing: .06em; color: #fff; background: linear-gradient(180deg, #e8343c, #a8102a); box-shadow: 0 4px 14px rgba(0,0,0,.5); pointer-events: none; white-space: nowrap; }
.training-flag.hidden { display: none; }

/* Free money 2 without money */
.no-money { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; pointer-events: none; }
.no-money.hidden { display: none; }
.no-money__card { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 22px 26px; max-width: 320px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(40,16,28,.96), rgba(18,10,20,.97)); border: 1px solid rgba(255,214,120,.35); box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 30px rgba(255,211,74,.15); }
.no-money__card b { font: 800 20px var(--font-display, var(--font-ui)); color: #ffd34a; }
.no-money__card p { margin: 0 0 6px; color: rgba(241,234,216,.75); font-size: 14px; }
.no-money__ico { font-size: 40px; }
.no-money__card .btn.gold { min-height: 46px; padding: 0 22px; font-size: 16px; }

/* ---- gift effects ---- */
/* hot pepper: the whole face goes red, the seat trembles */
.zy .seat.fx-hot .seat-av { filter: sepia(1) saturate(7) hue-rotate(-30deg) brightness(.9) contrast(1.15); transition: filter .35s; }
.zy .seat.fx-hot .seat__ring { box-shadow: 0 0 0 3px #ff3b2f, 0 0 28px rgba(255,59,47,.9); animation: fxHotPulse .4s ease-in-out infinite alternate; }
.zy .seat.fx-hot { animation: fxTremble .11s linear infinite; }
@keyframes fxTremble { 0% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } 100% { rotate: -2.5deg; } }
@keyframes fxHotPulse { to { box-shadow: 0 0 0 5px #ff7a2f, 0 0 44px rgba(255,90,30,1); } }
/* tipsy: sways (more with every drink), red cheeks, a bit blurry after a few */
.zy .seat.fx-tipsy { transform-origin: 50% 85%; animation: fxSway var(--sway-t, 3.2s) ease-in-out infinite; }
.zy .seat.fx-tipsy1 { --sway: 2.5deg; --sway-t: 3.4s; --blush: .35; }
.zy .seat.fx-tipsy2 { --sway: 4.5deg; --sway-t: 2.9s; --blush: .5; }
.zy .seat.fx-tipsy3 { --sway: 7deg; --sway-t: 2.4s; --blush: .65; }
.zy .seat.fx-tipsy4 { --sway: 10deg; --sway-t: 2s; --blush: .8; }
@keyframes fxSway { 0%, 100% { rotate: calc(var(--sway, 3deg) * -1); } 50% { rotate: var(--sway, 3deg); } }
.zy .seat.fx-tipsy .seat__ring { position: relative; }
.zy .seat.fx-tipsy .seat__ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 33% 63%, rgba(255,70,100,var(--blush,.4)) 0 8%, transparent 15%), radial-gradient(circle at 67% 63%, rgba(255,70,100,var(--blush,.4)) 0 8%, transparent 15%);
}
.zy .seat.fx-tipsy3 .seat-av, .zy .seat.fx-tipsy4 .seat-av { filter: saturate(1.35) blur(.4px); }
.zy .seat.fx-tipsy4 .seat-av { filter: saturate(1.5) blur(.8px) hue-rotate(-8deg); }
.zy .seat.fx-hot.fx-tipsy { animation: fxTremble .11s linear infinite; }
/* passing looks after a gift */
.zy .seat.fx-cold .seat-av { filter: hue-rotate(180deg) saturate(1.6) brightness(1.05); transition: filter .35s; }
.zy .seat.fx-cold .seat__ring { box-shadow: 0 0 0 3px #8fd8ff, 0 0 26px rgba(140,210,255,.9); }
.zy .seat.fx-cold { animation: fxTremble .09s linear infinite; }
.zy .seat.fx-jitter { animation: fxTremble .07s linear infinite; }
.zy .seat.fx-jitter .seat__ring { box-shadow: 0 0 0 3px #ffe14a, 0 0 22px rgba(255,225,74,.85); }
.zy .seat.fx-chew .seat__ring { animation: fxChew .28s ease-in-out infinite alternate; }
@keyframes fxChew { from { scale: 1 1; } to { scale: 1.06 .94; } }
.zy .seat.fx-shield .seat__ring { box-shadow: 0 0 0 4px #2f7bff, 0 0 0 9px rgba(255,255,255,.55), 0 0 40px rgba(47,123,255,.9); animation: fxHotPulse 1s ease-in-out infinite alternate; }
.zy .seat.fx-fishy .seat-av { filter: hue-rotate(110deg) saturate(1.4); }
.zy .seat.fx-fishy { animation: fxSway 0.8s ease-in-out infinite; --sway: 6deg; }
.zy .seat.fx-boss .seat-av { filter: contrast(1.2) brightness(.85) sepia(.35); }
.zy .seat.fx-boss .seat__ring { box-shadow: 0 0 0 3px #c9a24a, 0 0 30px rgba(120,120,120,.9); }
.zy .seat.fx-glow-gold .seat__ring { box-shadow: 0 0 0 3px #ffd34a, 0 0 34px rgba(255,211,74,.95); }
.zy .seat.fx-glow-pink .seat__ring { box-shadow: 0 0 0 3px #ff7ab6, 0 0 34px rgba(255,122,182,.95); }
.zy .seat.fx-glow-green .seat__ring { box-shadow: 0 0 0 3px #3ddc97, 0 0 34px rgba(61,220,151,.95); }
.zy .seat.fx-glow-wine .seat__ring { box-shadow: 0 0 0 3px #9b2048, 0 0 34px rgba(155,32,72,.95); }
.fx-float.cold { color: #c9ecff; text-shadow: 0 0 14px rgba(120,200,255,.95), 0 2px 4px rgba(0,0,0,.9); }
.fx-puff.smoke { opacity: .8; filter: grayscale(1) drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.fx-puff { position: absolute; font-size: 22px; pointer-events: none !important; z-index: 9; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.fx-puff.steam { font-size: 24px; }
.fx-float.hic { font-size: 18px; color: #ffd1e0; text-shadow: 0 0 12px rgba(255,120,170,.8), 0 2px 4px rgba(0,0,0,.9); }
.fx-float.hot { color: #ffb199; text-shadow: 0 0 16px rgba(255,60,30,.95), 0 2px 4px rgba(0,0,0,.9); }
.fx-float.cheers { font-size: 30px; color: #fff3c4; }
.fx-glass { z-index: 10; }
.cheers-opt { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 14px; cursor: pointer; }
.fx-puff.money { font-size: 26px; z-index: 10; }
.fx-puff.gun { font-size: 40px; z-index: 11; }

/* connection problems */
.zy .seat.offline .seat-av { filter: grayscale(.7) brightness(.6); }
.seat__net { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; border-radius: 50%; background: rgba(0,0,0,.45); pointer-events: none; }
.seat__net i { position: absolute; inset: 4px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: #ffd34a; animation: netSpin .9s linear infinite; }
@keyframes netSpin { to { rotate: 360deg; } }
#netSign { position: fixed; top: 12px; left: 50%; translate: -50% -80px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  background: rgba(20,20,24,.92); color: #fff; font-weight: 700; box-shadow: 0 6px 24px rgba(0,0,0,.5); border: 1px solid rgba(255,211,74,.5); transition: translate .3s ease; pointer-events: none; }
#netSign.show { translate: -50% 0; }
#netSign .spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #ffd34a; animation: netSpin .8s linear infinite; }
.seat__back { position: absolute; inset: 0; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-content: center; gap: 2px; background: rgba(20,120,70,.78); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 0 0 3px #3ddc97, 0 0 26px rgba(61,220,151,.8); animation: backPulse 1.2s ease-in-out infinite alternate; z-index: 3; pointer-events: auto; }
.seat__back b { font-size: 13px; letter-spacing: .3px; }
.seat__back:hover { background: rgba(30,150,90,.9); }
@keyframes backPulse { to { box-shadow: 0 0 0 5px #3ddc97, 0 0 40px rgba(61,220,151,1); } }
/* hit by a rock: a red flash, a strong shake, then dizzy */
.zy .seat.fx-hit { animation: fxHit .6s ease-out 1, fxSway 1.1s ease-in-out .6s infinite; --sway: 7deg; }
.zy .seat.fx-hit .seat-av { animation: fxHitFlash .5s ease-out 1; }
@keyframes fxHit { 0% { rotate: 0deg; } 15% { rotate: -16deg; } 30% { rotate: 12deg; } 45% { rotate: -9deg; } 60% { rotate: 6deg; } 80% { rotate: -3deg; } 100% { rotate: 0deg; } }
@keyframes fxHitFlash { 0% { filter: brightness(2) sepia(1) saturate(8) hue-rotate(-30deg); } 100% { filter: none; } }
.fx-puff.boom { font-size: 34px; z-index: 11; }
/* the rock */
.fx-puff.bonk { z-index: 12; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.fx-puff.bonk svg { display: block; }
.fx-puff.hitline { width: 22px; height: 4px; border-radius: 2px; background: #fff6c8; box-shadow: 0 0 8px #ffd21f; z-index: 11; transform-origin: 0 50%; }
.fx-puff.rockdrop img { width: 46px; height: 46px; display: block; }
.fx-puff.rockdrop { z-index: 11; }
.fx-puff.bump { width: 26px; height: 20px; border-radius: 50% 50% 45% 45%; z-index: 11;
  background: radial-gradient(circle at 38% 32%, #ffd0d0 0 14%, #ff6b6b 38%, #c92a3a 75%, #8a1424 100%); box-shadow: 0 2px 5px rgba(0,0,0,.45), inset 0 -2px 3px rgba(0,0,0,.25); }
.fx-puff.bandaid { z-index: 12; }
.fx-puff.bandaid svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.zy .seat.fx-hit { animation: fxHit .7s cubic-bezier(.2,.9,.3,1) 1, fxSway 1.1s ease-in-out .7s infinite; --sway: 8deg; }
@keyframes fxHit { 0% { rotate: 0deg; } 10% { rotate: -22deg; } 25% { rotate: 15deg; } 40% { rotate: -10deg; } 55% { rotate: 6deg; } 75% { rotate: -3deg; } 100% { rotate: 0deg; } }
/* rock v2: dent, flash, dust, a red throbbing face */
.fx-puff.dent { z-index: 11; pointer-events: none; mix-blend-mode: multiply; }
.fx-puff.dent svg { display: block; overflow: visible; }
.fx-puff.hitflash { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255,255,255,0) 70%); z-index: 12; }
.fx-puff.dust { width: 6px; height: 6px; border-radius: 50%; background: #9a948b; box-shadow: 0 0 2px rgba(0,0,0,.4); z-index: 11; }
.zy .seat.fx-hit .seat-av { animation: fxHurt 1.1s ease-in-out infinite; }
@keyframes fxHurt { 0%, 100% { filter: sepia(.4) saturate(2.4) hue-rotate(-25deg) brightness(.92); } 50% { filter: sepia(.15) saturate(1.4) hue-rotate(-12deg) brightness(.98); } }
.zy .seat.fx-hit { animation: fxHit .55s cubic-bezier(.2,.9,.3,1) 1; }
.fx-float.hurt { color: #ffc2b8; font-size: 20px; text-shadow: 0 0 12px rgba(200,30,30,.9), 0 2px 4px rgba(0,0,0,.9); }

/* phones (like the big poker apps): my cards lie over the right half of my avatar, big and clear;
   my bet goes up on the felt, Show is on the left */
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  .zy { --av-me: 80px; --cw-me: 50px; }
  .zy .seat.me .seat__hole { left: 46%; right: auto; top: 28%; transform: none; z-index: 4; }
  .zy .seat.me .seat__hole .pcard { box-shadow: 0 6px 16px rgba(0,0,0,.55); }
  .zy .seat.me .seat__hole .pcard:first-child { transform: rotate(-6deg); }
  .zy .seat.me .seat__hole .pcard:last-child { margin-left: calc(var(--cw-me) * -.2); transform: rotate(6deg) translateY(1px); }
  .zy .seat.me:has(.seat__hole) .seat__info { margin-top: 2px; position: relative; z-index: 5; }
  .zy .seat.me .show-tag.me { left: 50%; right: auto; top: -22px; bottom: auto; transform: translateX(-50%); }
  .zy .seat.me .mucked-tag { left: auto; right: calc(100% + 8px); top: auto; bottom: 30px; transform: none; }
}
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  /* "Show" sits right of my avatar on phones (my cards are on the left) */
  .zy .zshow { left: auto; right: calc(50% + var(--av-me) * .78); align-items: flex-end; }
}
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  /* quick replies after a hand: a small column in the bottom-right corner, away from my cards */
  .zy .zreplies { left: auto; right: 10px; bottom: 8px; transform: none; flex-direction: column; align-items: flex-end; gap: 5px; }
  .zy .zreplies button { height: 28px; }
}

/* phones: the corner buttons (back, sound, friends, menu, chat ...) keep clear of the rounded screen
   corners, the Dynamic Island / notch and the home bar, so they are easy to tap */
@media (orientation: landscape) and (max-height: 500px) {
  .zy { --sl: max(20px, calc(env(safe-area-inset-left) + 6px)); --sr: max(20px, calc(env(safe-area-inset-right) + 6px)); --sb: max(14px, calc(env(safe-area-inset-bottom) + 4px)); --st: 14px; }
}
/* upright phone, table turned sideways: the turned view's left is the top of the phone (notch),
   its right is the bottom of the phone (home bar) */
@media (orientation: portrait) and (max-width: 500px) {
  .zy { --sl: max(22px, calc(env(safe-area-inset-top) + 6px)); --sr: max(22px, calc(env(safe-area-inset-bottom) + 8px)); --sb: 16px; --st: 16px; }
}
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  .zbtn--back { top: var(--st); left: var(--sl); }
  .ztitle { top: calc(var(--st) + 2px); left: calc(var(--sl) + var(--zb) + 10px); }
  .ztop-right { top: var(--st); right: var(--sr); gap: 12px; }
  .zbottom-left { left: var(--sl); bottom: var(--sb); gap: 12px; }
  .zy .strength { left: var(--sl); bottom: calc(var(--sb) + var(--zb) + 10px); }
  .zy .zreplies { right: var(--sr); bottom: var(--sb); }
  .zy .action-bar.zactions { bottom: var(--sb); }
  .zbtn { min-width: 40px; min-height: 40px; }
}
/* photographed room: the picture is the whole room, no extra wallpaper or tint around it */
.zy .table-stage.photo { background: #0b0605 !important; }
.zy .table-stage.photo::after { display: none; }
.zy .table-stage.photo #scene3d { background-color: #0b0605; }
/* picture decks (the classic cards of the photographed room): the whole card is the image */
.pcard.pic, .zy .pcard.pic:not(.back), .zy [data-theme] .pcard.pic:not(.back) { background-color: #fff !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; background-position: center !important; border-radius: calc(var(--c) * .08); box-shadow: 0 6px 14px rgba(0,0,0,.5); color: transparent; }
.pcard.pic > * { display: none; }
.pcard.pic.back { background-color: #8a1020; box-shadow: 0 6px 14px rgba(0,0,0,.55); }
/* living lights of the photographed room: above the picture, under the cards */
.zy #scene3d > canvas:not(.zlights) { position: relative; z-index: 1; }
.zy #scene3d > .zlights { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }

/* the room picture: sharp, and the same picture blurred around it when the table is shown smaller */
.zy #scene3d > .zphoto, .zy #scene3d > .zphoto-blur { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; }
.zy #scene3d > .zphoto-blur { inset: -40px; background-size: cover; background-position: center; filter: blur(26px) brightness(.5) saturate(1.2); }

/* private room: the host's chips list on the table */
.hledger { position: absolute; z-index: 8; left: var(--sl, 14px); top: 64px; width: 230px; max-height: 46%; display: flex; flex-direction: column;
  border-radius: 14px; background: rgba(12,8,18,.82); border: 1px solid rgba(255,211,74,.45); box-shadow: 0 10px 26px rgba(0,0,0,.5); overflow: hidden; pointer-events: auto; }
.hledger.hidden { display: none; }
.hledger__head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; background: rgba(255,211,74,.12); color: #ffe9a8; font: 700 12px var(--font-ui); cursor: pointer; text-align: left; }
.hledger__head b { margin-left: auto; font: 800 13px var(--font-money, var(--font-ui)); color: #ffd34a; }
.hledger__head span { opacity: .8; }
.hledger__list { overflow-y: auto; padding: 4px 6px 6px; }
.hledger__row { display: grid; grid-template-columns: 1fr auto auto 24px; align-items: center; gap: 6px; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.06); font: 600 12px var(--font-ui); color: #fff; }
.hledger__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hledger__num { color: #ffd34a; font-family: var(--font-money, var(--font-ui)); }
.hledger__now { color: #bfe9d2; font-family: var(--font-money, var(--font-ui)); font-weight: 500; }
.hledger__give { width: 22px; height: 22px; border-radius: 50%; border: 0; background: #2fbf71; color: #fff; font: 800 15px/1 var(--font-ui); cursor: pointer; }
.hledger__empty { padding: 8px; font: 500 12px var(--font-ui); color: #aaa; }
.hledger__legend { display: flex; justify-content: flex-end; gap: 22px; padding: 4px 34px 0 0; font: 600 9px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  .hledger { top: calc(var(--st, 10px) + 46px); width: 190px; max-height: 52%; }
  .hledger__row { font-size: 11px; gap: 4px; padding: 4px 2px; }
}
/* host panel: + and − per player, and the history */
.hledger__row { grid-template-columns: 1fr auto auto auto; }
.hledger__btns { display: inline-flex; gap: 4px; }
.hledger__take { width: 22px; height: 22px; border-radius: 50%; border: 0; background: #d94452; color: #fff; font: 800 15px/1 var(--font-ui); cursor: pointer; padding: 0; }
.hledger__give { padding: 0; }
.hledger__legend { padding-right: 58px; }
.hledger__histT { margin: 8px 2px 2px; font: 700 11px var(--font-ui); color: #ffe9a8; }
.hledger__hist { max-height: 130px; overflow-y: auto; }
.hledger__h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 2px; font: 500 11px/1.35 var(--font-ui); color: rgba(255,255,255,.85); }
.hledger__h .t { color: rgba(255,255,255,.45); }
.hledger__h .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hledger__h .k { font-family: var(--font-money, var(--font-ui)); white-space: nowrap; }
.hledger__h .k-give, .hledger__h .k-cashout { color: #6fe3a1; }
.hledger__h .k-take, .hledger__h .k-askNo { color: #ff8a94; }
.hledger__h .k-asked { color: #ffd34a; }
.hledger { width: 260px; }
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) { .hledger { width: 220px; } .hledger__hist { max-height: 90px; } }

/* host panel: hide button and the requests waiting for an answer */
.hledger__top { display: flex; align-items: stretch; }
.hledger__top .hledger__head { flex: 1; }
.hledger__x { border: 0; background: rgba(255,211,74,.12); color: #ffe9a8; padding: 0 10px; cursor: pointer; font: 700 13px var(--font-ui); border-left: 1px solid rgba(255,211,74,.25); }
.hledger__reqs { padding: 4px 6px; background: rgba(61,220,151,.1); border-bottom: 1px solid rgba(61,220,151,.3); animation: reqGlow 1.4s ease-in-out infinite alternate; }
@keyframes reqGlow { from { background: rgba(61,220,151,.06); } to { background: rgba(61,220,151,.2); } }
.hledger__req { display: flex; align-items: center; gap: 6px; padding: 4px 2px; font: 500 12px var(--font-ui); color: #fff; }
.hledger__req b { font-weight: 700; }
.hledger__req span { margin-left: auto; display: inline-flex; gap: 4px; }
.hledger__ok, .hledger__no { width: 24px; height: 24px; border-radius: 50%; border: 0; color: #fff; font: 800 13px/1 var(--font-ui); cursor: pointer; padding: 0; }
.hledger__ok { background: #2fbf71; } .hledger__no { background: #d94452; }

/* link break: the table waits for the players */
.link-break { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5,3,10,.55); pointer-events: none; } /* the menu and Stand up stay usable */
.link-break.hidden { display: none; }
.link-break__card { max-width: 340px; margin: 16px; padding: 18px 20px; border-radius: 18px; text-align: center; background: rgba(16,10,24,.94); border: 1px solid rgba(255,211,74,.5); box-shadow: 0 18px 40px rgba(0,0,0,.6); color: #fff; pointer-events: auto; font: 500 14px var(--font-ui); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.link-break__ico { font-size: 34px; line-height: 1; }
.link-break__card b { font: 800 18px var(--font-ui); color: #ffd34a; }
.link-break__card p { margin: 0; opacity: .9; }
.link-break__card small { opacity: .7; font-size: 12px; }