/* Poker HUD (see poker-ui.js). The cards are only on the 3D table; seat plates and bet labels are placed over it by
   script. While seated at the table the screen belongs to the game: no joystick, no title, small «ВСТАТЬ». */
/* The sharp layer with the cards and chips (its own WebGL canvas over the room, see bar.js). */
#poker-layer{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;visibility:hidden;touch-action:none}
#poker-hud{position:absolute;inset:0;pointer-events:none;z-index:6;font-family:inherit}
#poker-hud .hidden{display:none!important}
.pk-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 58px);left:50%;transform:translateX(-50%);text-align:center;max-width:min(80vw,420px);
  padding:5px 14px 6px;border-radius:12px;background:linear-gradient(145deg,#231c17d9,#100f0dd9);border:1px solid #b6934f55}
.pk-pot{font:700 clamp(15px,4.2vw,19px)/1.15 Georgia,serif;color:#f4d77a;letter-spacing:.04em}
.pk-pot:empty{display:none}
.pk-status{margin-top:1px;font-size:clamp(10.5px,2.9vw,12.5px);line-height:1.3;color:#f1e8d6;opacity:.92;max-height:2.6em;overflow:hidden}
.pk-plate{position:absolute;left:0;top:0;min-width:64px;max-width:112px;padding:2px 7px 3px;border-radius:9px;background:rgba(18,12,10,.8);border:1px solid rgba(214,170,90,.5);
  color:#f6ecd8;text-align:center;line-height:1.15;white-space:nowrap;will-change:transform}
.pk-plate b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.pk-plate .chips{display:block;font-size:12px;color:#f4d77a;font-weight:700}
.pk-plate em{display:block;font-size:9.5px;font-style:normal;color:#cdbb95;overflow:hidden;text-overflow:ellipsis}
.pk-plate em:empty{display:none}
.pk-plate.me{border-color:#7fd8a2;box-shadow:0 0 0 1px rgba(127,216,162,.4)}
.pk-plate.turn{border-color:#ffd24d;box-shadow:0 0 12px rgba(255,210,77,.85);animation:pk-pulse 1s ease-in-out infinite}
.pk-plate.folded{opacity:.55}
.pk-plate.win{border-color:#ffd24d;background:rgba(70,48,8,.92)}
/* what the player just did: a speech bubble above the plate */
.pk-say{position:absolute;left:50%;bottom:calc(100% + 5px);transform:translate(-50%,4px);padding:2px 8px;border-radius:9px;background:#f4ead2;color:#2a1d12;
  font:800 10.5px/1.3 system-ui,sans-serif;font-style:normal;letter-spacing:.03em;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s;box-shadow:0 2px 6px #0007}
.pk-say::after{content:'';position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#f4ead2}
.pk-plate.saying .pk-say{opacity:1;transform:translate(-50%,0)}
/* plates lined up along a screen edge say it sideways, towards the middle of the screen */
.pk-plate[data-edge=L] .pk-say{left:calc(100% + 7px);bottom:auto;top:50%;transform:translate(-4px,-50%)}
.pk-plate[data-edge=R] .pk-say{left:auto;right:calc(100% + 7px);bottom:auto;top:50%;transform:translate(4px,-50%)}
.pk-plate[data-edge=L].saying .pk-say,.pk-plate[data-edge=R].saying .pk-say{transform:translate(0,-50%)}
.pk-plate[data-edge=L] .pk-say::after{left:auto;right:100%;top:50%;margin:-5px 0 0;border-top-color:transparent;border-right-color:#f4ead2}
.pk-plate[data-edge=R] .pk-say::after{left:100%;top:50%;margin:-5px 0 0;border-top-color:transparent;border-left-color:#f4ead2}
.pk-bet{position:absolute;left:0;top:0;padding:1px 7px;border-radius:10px;background:rgba(0,0,0,.62);color:#fff;font-weight:800;font-size:11.5px;will-change:transform}
@keyframes pk-pulse{50%{box-shadow:0 0 4px rgba(255,210,77,.5)}}
.pk-bottom{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);display:flex;flex-direction:column;align-items:center;gap:8px}
.pk-actions{width:min(95vw,440px);box-sizing:border-box;pointer-events:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:15px;
  background:linear-gradient(145deg,#292019f2,#14120ff2);border:1px solid rgba(188,152,89,.45)}
.pk-timer{height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.pk-timer i{display:block;height:100%;width:100%;background:#ffd24d;transition:background .3s}
.pk-timer i.low{background:#ff6a4d}
.pk-row{display:flex;gap:6px}
.pk-btn{flex:1;min-height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.18);font-weight:800;font-size:13px;letter-spacing:.03em;color:#fff;background:#3a2a1f;touch-action:manipulation}
.pk-btn.fold{background:#5a2b28;color:#f2d5cf}.pk-btn.call{background:#2f5a46}.pk-btn.raise{background:#a07a3e;color:#fff8df}
.pk-raise{display:flex;flex-direction:column;gap:6px}
.pk-line{display:flex;align-items:center;gap:10px}
.pk-amount{min-width:58px;text-align:center;font:700 19px Georgia,serif;color:#f4d77a}
.pk-slider{flex:1;min-width:0;height:36px;margin:0;accent-color:#c59d58;touch-action:none;cursor:pointer}
.pk-quick{display:flex;gap:5px}
.pk-q{flex:1;min-height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#2c2119;color:#f1e8d6;font-size:11px;font-weight:700;touch-action:manipulation}
.pk-q.all{background:#6b2424}
/* seated at the poker table */
body.seated .joystick-zone,body.seated .bar-title,body.seated .act-row,body.seated .hud.top-left{display:none}
/* (on wide screens the footer is centred with a transform, which would pin the fixed button to the footer instead
   of the screen) */
body.seated .footer-ui{transform:none;left:0;max-width:none}
body.seated .right-controls{position:fixed;left:12px;right:auto;top:calc(env(safe-area-inset-top,0px) + 14px);bottom:auto;align-items:flex-start}
body.seated #interact{min-height:34px;font-size:10.5px;padding:5px 12px;border-radius:11px}
@media(max-height:650px){.pk-btn{min-height:42px}.pk-top{top:calc(env(safe-area-inset-top,0px) + 50px)}}