/* PokerBotsArena Riropo table component: styles.
   Uses Riropo's sprite sheets (img/, unmodified copies from https://github.com/vikcch/riropo,
   GPLv3) the way Riropo's canvas draws them: same cells, sizes, colours and Arial text.
   Copyright (C) Riropo authors (vikcch); this stylesheet Copyright (C) 2026 PokerBotsArena.
   Licensed under the GNU General Public License version 3, WITHOUT ANY WARRANTY (see COPYING.txt).
   Source and attribution: about.html. */

html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: #2b1508; color: #fff; font: 12px/1.2 Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 100%; }
.rt { display: flex; flex-direction: column; height: 100%; }

/* ---------- the table ---------- */
/* Letterbox in Riropo's camouflage, so the fitted table never sits on a bare band. */
.rt-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #b39a63 url(img/bg-vector-792x555.jpg) center / cover; }
.rt-scene { position: absolute; top: 0; left: 0; overflow: hidden; transform-origin: 0 0; }
.rt-camo { position: absolute; inset: 0; background: url(img/bg-vector-792x555.jpg) right center / cover; }
.rt-felt { position: absolute; left: 0; top: 0; width: 792px; height: 555px; background: url(img/bg-vector-792x555.jpg) 0 0 no-repeat; }
/* Phones: the same table turned upright; its top edge (the camouflage above the chip rack)
   fades into the camouflage behind, so the turn leaves no seam. */
.is-portrait .rt-felt {
  left: -206.5px; top: 121.5px; transform: rotate(90deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30px);
}
.rt-layer { position: absolute; inset: 0; }
.rt-layer > *, .rt-seat > *, .rt-stack > * { position: absolute; }
.rt-stack { position: absolute; inset: 0; }

/* Cards: Riropo's 50x70 deck, 13 values by 4 suits (clubs, hearts, spades, diamonds). */
.rt-card {
  width: 50px; height: 70px; transform: scale(var(--z, 1)); transform-origin: 0 0;
  background: url(img/deck-ps-50x70-650x280.png) calc(var(--v) * -50px) calc(var(--s) * -70px) no-repeat;
}
.rt-board, .rt-hole, .rt-backs { position: absolute; }
.rt-board > *, .rt-hole > *, .rt-backs > * { position: absolute; }
.rt-hole { z-index: 3; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
/* Face-down hole cards: Riropo's in-play card, fanned one per hole card. */
.rt-back { width: 25px; height: 30px; transform: scale(var(--z, 1)); transform-origin: 0 0; background: url(img/in-play-25x30.png) no-repeat; }

/* Chips: Riropo's sheet, the dealer button first, then 21 denominations. */
.rt-chip { width: 22px; height: 20px; transform: scale(var(--z, 1)); transform-origin: 0 0; background: url(img/chips-22-484x20.png) calc(var(--i) * -22px) 0 no-repeat; }

/* ---------- seats ---------- */
.rt-seat { position: absolute; inset: 0; pointer-events: none; }
.rt-disc { width: 90px; height: 90px; background: url(img/empty-seat-90x90.png) no-repeat; }
.rt-disc svg { position: absolute; left: 13px; top: 13px; width: 64px; height: 64px; }
.rt-plate { display: grid; grid-template-rows: auto auto; z-index: 2; color: #fff; font-size: var(--F); line-height: 1.18; text-align: center; }
.rt-who, .rt-stack-text {
  display: grid; justify-items: center; align-content: center; min-width: 0; padding: 1px 5px;
  background: url(img/status-93x33.png) center top / 100% 200% no-repeat;
}
.rt-who { padding-bottom: 2px; }
.rt-stack-text { background-position: center bottom; font-weight: 700; padding-top: 2px; }
.rt-who > span, .rt-stack-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.rt-name { font-weight: 700; }
.rt-meta { color: #f6d37f; }
.rt-pos { font-weight: 700; }
.rt-mark { width: 1em; height: 1em; margin-right: 3px; vertical-align: -0.15em; }
.rt-pos:not(:empty)::after { content: " · "; }
/* Very small tables (320px phones): name and stack only, so the 12px text still fits. */
.is-compact .rt-meta { display: none; }
/* Waiting to act: Riropo's gold plate with black text, blinking every half second. */
.is-next .rt-plate { animation: rt-blink-plate 1s steps(1) infinite; }
.is-next .rt-who { animation: rt-blink-who 1s steps(1) infinite; }
.is-next .rt-stack-text { animation: rt-blink-stack 1s steps(1) infinite; }
.is-next .rt-meta { animation: rt-blink-meta 1s steps(1) infinite; }
@keyframes rt-blink-plate { 0% { background: url(img/status-highlight-97x37.png) 0 0 / 100% 100% no-repeat; } 50% { background: none; } }
@keyframes rt-blink-who { 0% { background: none; color: #000; } 50% { background: url(img/status-93x33.png) center top / 100% 200% no-repeat; color: #fff; } }
@keyframes rt-blink-stack { 0% { background: none; color: #000; } 50% { background: url(img/status-93x33.png) center bottom / 100% 200% no-repeat; color: #fff; } }
@keyframes rt-blink-meta { 0% { color: #3a1d0b; } 50% { color: #f6d37f; } }
.is-folded .rt-disc { opacity: .4; }
.is-folded .rt-plate { opacity: .55; }
.rt-action { z-index: 4; width: 60px; height: 22px; background: url(img/actions-300x22.png) calc(var(--a) * -60px) 0 no-repeat; }
.rt-auto, .rt-pot, .rt-message {
  z-index: 4; padding: 1px 7px; border: 1px solid #000; background: #ffffe1; color: #000; font: 700 var(--F, 12px)/1.3 Arial, Helvetica, sans-serif;
  white-space: nowrap; transform: translate(-50%, 0);
}
.rt-pot { transform: translate(-50%, -50%); font-size: calc(var(--F) * 1.1); }
.rt-pot[data-anchor="left"] { transform: translate(0, -50%); }
.rt-pot[data-anchor="right"] { transform: translate(-100%, -50%); }
.rt-sample { color: #7a3956; }
.rt-message { position: absolute; max-width: 80%; white-space: normal; text-align: center; transform: translate(-50%, -50%); }

/* Bet and pot amounts: Riropo's white text beside the chips, with a soft shadow for phones. */
.rt-amount { z-index: 3; color: #fff; font: 700 var(--F)/1.2 Arial, Helvetica, sans-serif; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, .8); }
.rt-amount[data-side="left"] { transform: translate(-100%, -50%); }
.rt-amount[data-side="right"] { transform: translate(0, -50%); }
.rt-amount[data-side="below"] { transform: translate(-50%, 0); }
.rt-amount[data-side="center"] { transform: translate(-50%, -50%); }
.rt-pot-chips.is-collected { transition: transform .3s linear; }

/* ---------- navigation: Riropo's wooden buttons ---------- */
.rt-nav {
  --f: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px;
  padding: 4px; background: linear-gradient(#4a260f, #2b1508); border-top: 1px solid #f6d37f;
}
.rt-nav-group { display: flex; gap: 2px; }
.rt-btn { position: relative; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; --col: 0; }
.rt-btn::before { content: ""; display: block; background: url(img/navigation-150x168.png) no-repeat; }
.rt-nav-btn { width: calc(50px * var(--f)); }
.rt-nav-btn::before {
  width: calc(50px * var(--f)); height: calc(28px * var(--f));
  background-size: calc(150px * var(--f)) calc(168px * var(--f));
  background-position: calc(var(--col) * -50px * var(--f)) calc(var(--row) * -28px * var(--f));
}
.rt-full::before {
  width: calc(26px * var(--f) * 1.2); height: calc(24px * var(--f) * 1.2);
  background-image: url(img/full-windowed-26x24-52x48.png);
  background-size: calc(52px * var(--f) * 1.2) calc(48px * var(--f) * 1.2);
  background-position: calc(var(--col) * -26px * var(--f) * 1.2) calc(var(--row, 0) * -24px * var(--f) * 1.2);
}
.rt-btn:hover:not(:disabled) { --col: 1; }
.rt-btn:disabled { --col: 2; cursor: default; }
.rt-full:disabled { --col: 1; }
.rt-btn:focus-visible, .rt-credit:focus-visible { outline: 2px solid #ffe14a; outline-offset: 1px; border-radius: 4px; }
.rt-credit { flex: 1 1 0; min-width: 0; color: #f6d37f; font: 12px/1.3 Arial, Helvetica, sans-serif; text-decoration: underline; text-underline-offset: 2px; }
.rt-full { flex: 0 0 44px; }
@media (max-width: 300px) {
  .rt-btn { min-width: 40px; }
  .rt-full { flex-basis: 40px; }
}
@media (max-width: 460px) {
  .rt-nav { justify-content: center; }
  .rt-nav-group { order: 1; }
  .rt-full { order: 2; }
  .rt-credit { order: 3; flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* No blinking: the gold plate stays lit. */
  .is-next :is(.rt-plate, .rt-who, .rt-stack-text, .rt-meta) { animation: none; }
  .is-next .rt-plate { background: url(img/status-highlight-97x37.png) 0 0 / 100% 100% no-repeat; }
  .is-next :is(.rt-who, .rt-stack-text) { background: none; color: #000; }
  .is-next .rt-meta { color: #3a1d0b; }
  .rt-pot-chips.is-collected { transition: none; }
}
@media (forced-colors: active) {
  .rt-btn::before { forced-color-adjust: none; }
  .rt-btn { border: 1px solid ButtonText; }
}