/* ==========================================================================
   The poker table.

   Six seats around an oval, the board across the middle, the pot above it. The
   whole thing is drawn in one box on the page and scaled from a handful of
   custom properties, so a phone gets the same table smaller rather than a
   different table — one layout to look at rather than two to keep in step.

   Nothing here is a photograph. The rail, the felt, the grain in the cloth, the
   faces and the countdown are all painted by the browser: a table drawn this way
   weighs nothing, stays sharp at any size, and keeps to the colours of the site.
   Only the cards and the chips are pictures.
   ========================================================================== */

.poker {
  --seat: 122px;                 /* how wide a player's box is */
  --card-w: 72px;                /* a card on the board */
  --hand-w: 56px;                /* a card in somebody's hand */
  --mine-w: 104px;               /* and your own two, which you actually read */
  --rail-w: 3.4%;                /* how thick the padded rail is */
  --gold: #f0b93c;
  --ink: #f3ece0;
  position: relative;
  /* The table is as wide as it can be without pushing the buttons under it off
     the screen: the page around it takes about 250px, and the felt is 16:10, so
     whatever height is left decides the width. A short window gets a small
     table rather than a big one with its controls out of sight. */
  width: min(100%, 820px, calc((100vh - 250px) * 1.6));
  min-width: 280px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  container-type: inline-size;
}

/* --------------------------------- the table ------------------------------
   Three layers in one element: the padded rail on the outside, the cloth inside
   it, and a fine grain over the cloth so the green is fabric rather than paint. */

.poker-felt {
  position: absolute;
  inset: 0;
  border-radius: 50% / 46%;
  /* The rail: dark leather, lit from above, with a hair of gold where it meets
     the cloth and a deep shadow under the whole table. */
  background-color: #241806;
  background-image:
    url('/img/poker/felt.webp'),
    linear-gradient(180deg, #4a3416 0%, #2a1c08 42%, #150e04 100%);
  background-size: 220px 220px, cover;
  background-blend-mode: overlay, normal;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .62),
    0 2px 0 rgba(255, 255, 255, .06) inset,
    0 -18px 40px rgba(0, 0, 0, .5) inset;
}

/* The cloth. Lit from the far side, darkening towards the rail, so the middle
   of the table reads as the place to look. */
.poker-felt::before {
  content: '';
  position: absolute;
  inset: var(--rail-w);
  border-radius: 50% / 46%;
  background:
    radial-gradient(105% 115% at 50% 32%,
      #2a6642 0%, #1d5233 34%, #124026 66%, #0a2b17 88%, #061d0f 100%);
  box-shadow:
    0 0 0 2px rgba(240, 185, 60, .18),
    0 0 0 5px rgba(0, 0, 0, .45),
    inset 0 14px 34px rgba(0, 0, 0, .38),
    inset 0 -26px 70px rgba(0, 0, 0, .5);
}

/* The weave. A photograph of real cloth, in grey, laid over the green: the
   colour stays the table's own, the threads are somebody's actual fabric.
   (ambientCG Fabric022, CC0 — no attribution owed, but it is owed anyway.) */
.poker-felt::after {
  content: '';
  position: absolute;
  inset: var(--rail-w);
  border-radius: 50% / 46%;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url('/img/poker/felt.webp');
  background-size: 300px 300px;
  background-repeat: repeat;
}

/* ------------------------------- the middle ------------------------------- */

.poker-middle {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.poker-pot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .38));
  border: 1px solid rgba(240, 185, 60, .34);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--ink);
  font: 500 clamp(11px, 1.7cqw, 15px)/1 system-ui, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}
.poker-pot b { color: var(--gold); font-weight: 700; letter-spacing: 0; }

.poker-board { display: flex; gap: 7px; }

/* The pot in chips as well as in words: side-on chips, stacked. */
.poker-potchips {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
  height: 40px;
  margin-bottom: 2px;
}
.poker-stackchips {
  position: relative;
  display: block;
  width: clamp(22px, 3.4cqw, 32px);
  height: 40px;
}
.poker-stackchips img {
  position: absolute;
  left: 0;
  width: 100%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

/* -------------------------------- the cards ------------------------------- */

/* A card is a picture of a card, and the whole of it has to be on the screen.
   The height is worked out from the width rather than left to the browser, and
   the picture is fitted inside rather than cropped to fill: a card cut off at
   the corner is a card you cannot read, which is the one thing a card must be.
   Barely rounded, because it is a rectangle the size of the card itself. */
.pcard {
  position: relative;
  display: inline-block;
  width: var(--card-w);
  line-height: 0;                 /* the picture is the whole of it */
  border-radius: 3px;
  /* Dealt from the middle: a card starts small and flat where the dealer is,
     and lands where it belongs. */
  animation: deal .34s cubic-bezier(.2, .9, .3, 1.2) backwards;
}
/* The picture decides the height: whatever shape the card really is, that is
   the shape on the table. Nothing crops it and nothing stretches it. */
.pcard > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}
/* A place on the board with no card on it yet: the same rectangle, empty. */
.pcard.empty {
  height: calc(var(--card-w) * 350 / 240);
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 3px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .25);
  animation: none;
}
@keyframes deal {
  from { opacity: 0; transform: translate(-40%, -60%) scale(.6) rotate(-12deg); }
  to   { opacity: 1; transform: none; }
}


/* ------------------------------- the seats -------------------------------- */

.poker-seat {
  position: absolute;
  width: var(--seat);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* The two cards sit behind the name plate, tucked under its top edge the way
   they are on a real table — so the name and the stack are never covered. */
.poker-hand {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: -16px;
  position: relative;
  z-index: 1;
}
.poker-hand .pcard { width: var(--hand-w); }
.poker-hand .pcard.empty { height: calc(var(--hand-w) * 350 / 240); }
.poker-hand .pcard:first-child { transform: rotate(-6deg); }
.poker-hand .pcard:last-child { transform: rotate(6deg); }

/* Your own two are read every hand, so they are the biggest on the table, they
   stand a little clear of each other, and nothing is drawn on top of them. */
.poker-seat.mine .poker-hand {
  gap: 8px;
  z-index: 5;
  /* Clear of the name plate rather than lying across it: the two cards you read
     every hand should not have your own name printed over them. */
  margin-bottom: 6px;
  transform: translateY(-6px);
}
.poker-seat.mine .poker-hand .pcard { width: var(--mine-w); }
.poker-seat.mine .poker-hand .pcard > img {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .85),
    0 10px 22px rgba(0, 0, 0, .6);
}
.poker-seat.mine .poker-hand .pcard:first-child { transform: rotate(-4deg); }
.poker-seat.mine .poker-hand .pcard:last-child { transform: rotate(4deg); }
/* And the pill and the chips move up out of their way. */
.poker-seat.mine .poker-said { top: -30px; }
.poker-seat.mine.bottom .poker-bet { top: -58px; }

/* Seats above the middle wear their cards below the plate rather than above it:
   at the top of the table there is nothing above them but the rail. */
.poker-seat.top { display: flex; flex-direction: column-reverse; }
.poker-seat.top .poker-hand { margin-bottom: 0; margin-top: -16px; }
.poker-seat.top .poker-hand .pcard:first-child { transform: rotate(6deg); }
.poker-seat.top .poker-hand .pcard:last-child { transform: rotate(-6deg); }

/* A player's pod: a face on the left, the name and what they have on the right. */
.poker-plate {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(22, 18, 12, .95), rgba(9, 7, 4, .95));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  text-align: left;
}

/* The face. No picture to fetch: initials, and a colour taken from the name. */
.poker-face {
  position: relative;
  flex: 0 0 auto;
  width: clamp(26px, 4.4cqw, 38px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg,
      hsl(var(--hue, 40) 42% 46%) 0%,
      hsl(var(--hue, 40) 46% 26%) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .45);
}
.poker-face span {
  font: 700 clamp(10px, 1.6cqw, 14px)/1 system-ui, sans-serif;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .02em;
}

.poker-who { min-width: 0; }
.poker-name {
  font: 500 clamp(10px, 1.5cqw, 13px)/1.25 system-ui, sans-serif;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(var(--seat) - 58px);
}
.poker-stack {
  font: 700 clamp(11px, 1.7cqw, 15px)/1.25 system-ui, sans-serif;
  color: var(--gold);
}

.poker-seat.folded .poker-plate,
.poker-seat.folded .poker-hand { opacity: .36; filter: grayscale(1); }

.poker-seat.empty .poker-plate {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(10, 8, 5, .5);
  box-shadow: none;
  color: rgba(243, 236, 224, .4);
}
.poker-seat.empty .poker-face {
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.poker-seat.empty .poker-face span { color: rgba(243, 236, 224, .45); font-weight: 400; }
.poker-seat.empty .poker-name { color: rgba(243, 236, 224, .45); font-size: clamp(9px, 1.3cqw, 12px); }
.poker-seat.empty .poker-stack { display: none; }

/* Whose turn it is: the pod lifts, and a ring runs out round their face. */
.poker-seat.acting .poker-plate {
  border-color: rgba(240, 185, 60, .75);
  box-shadow:
    0 0 0 1px rgba(240, 185, 60, .35),
    0 0 22px rgba(240, 185, 60, .22),
    0 12px 26px rgba(0, 0, 0, .55);
}
.poker-ring {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
  overflow: visible;
}
.poker-ring circle { fill: none; stroke-width: 3.5; }
.poker-ring-track { stroke: rgba(255, 255, 255, .12); }
.poker-ring-run {
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 126;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(240, 185, 60, .6));
  animation: ringout var(--turn, 20s) linear forwards;
}
@keyframes ringout { to { stroke-dashoffset: 126; } }

/* The dealer button, sitting on the edge of the pod like a chip on the felt. */
/* Who is on the button. It used to be a white ball the size of a chip, which
   sat over the cards and read as something gone wrong; it is now a small dark
   marker on the plate itself, out of the way of everything. */
.poker-dealer {
  position: absolute;
  right: 8px; bottom: -7px;
  z-index: 1;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: rgba(18, 14, 8, .92);
  border: 1px solid rgba(226, 190, 110, .75);
  color: #f0d79a;
  font: 800 10px/15px system-ui, sans-serif;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}

/* What a player has put in front of them, on the felt between them and the pot. */
.poker-bet {
  position: absolute;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .45));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
  font: 700 clamp(10px, 1.4cqw, 13px)/1 system-ui, sans-serif;
  color: var(--gold);
  white-space: nowrap;
  animation: pushed .28s ease-out backwards;
}
.poker-bet img { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
@keyframes pushed {
  from { opacity: 0; transform: translate(-50%, 14px) scale(.8); }
  to   { opacity: 1; transform: translateX(-50%); }
}
/* Seats above the middle push their chips down, seats below push them up. */
.poker-seat.top .poker-bet { bottom: -34px; }
.poker-seat.bottom .poker-bet { top: -46px; }

/* What somebody just did, said once and then gone. */
.poker-said {
  position: absolute;
  z-index: 4;
  left: 50%; top: -22px;
  transform: translateX(-50%);
  padding: 3px 11px;
  border-radius: 999px;
  font: 700 11px/1.5 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: linear-gradient(180deg, rgba(20, 16, 10, .97), rgba(8, 6, 4, .97));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
  color: var(--ink);
  white-space: nowrap;
}
.poker-said.raise { border-color: var(--gold); color: var(--gold); }
.poker-said.fold { color: rgba(243, 236, 224, .45); }
.poker-said.call { border-color: rgba(90, 200, 130, .55); color: #7fd8a0; }

/* ------------------------------ the controls ------------------------------ */

.poker-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.poker-actions .btn { min-width: 96px; }

/* The raise bar: how much, said twice — a slider to drag and a box to type in,
   with the button carrying the number so it can be read without looking up. */
.poker-raise {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.poker-raise input[type="range"] { width: 160px; accent-color: #f0b93c; }
.poker-raise input[type="number"] {
  width: 96px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-family: var(--mono);
}
.poker-raise .btn b { font-weight: 700; }

/* On a narrow screen the table keeps its shape and simply gets smaller — the
   sizes above are already in container units, so this is only the seats. */
@container (max-width: 700px) {
  .poker { --seat: 104px; --card-w: 52px; --hand-w: 42px; --mine-w: 74px; }
  .poker-plate { padding: 5px 9px 5px 5px; gap: 6px; }
  .poker-name { max-width: calc(var(--seat) - 46px); }
}
@container (max-width: 480px) {
  .poker { --seat: 84px; --card-w: 40px; --hand-w: 32px; --mine-w: 58px; }
  .poker-dealer { width: 15px; height: 15px; font-size: 9px; line-height: 13px; }
  .poker-said { font-size: 10px; padding: 2px 7px; top: -18px; }
  .poker-potchips { height: 30px; }
  .poker-stackchips { height: 30px; }
}

/* What beats what. The same card faces as the table, small, one row a hand. */
.pkguide .pkgrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.pkguide .pkgrow:last-of-type { border-bottom: 0; }
.pkgname { display: flex; flex-direction: column; min-width: 190px; }
.pkgcards { display: flex; gap: 4px; }
.pkgcards .pcard {
  width: 34px;
  border-radius: 3px;
  animation: none;
}
.pkgcards .pcard > img { box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
@media (max-width: 620px) {
  .pkgname { min-width: 130px; }
  .pkgcards .pcard { width: 26px; height: 37px; }
}

/* The seat that took the pot: said in gold, and the pod lit to match. */
.poker-said.win {
  border-color: var(--gold);
  color: #1a1204;
  background: linear-gradient(180deg, #ffd873, var(--gold));
  box-shadow: 0 4px 16px rgba(240, 185, 60, .38);
}
.poker-seat:has(.poker-said.win) .poker-plate {
  border-color: rgba(240, 185, 60, .7);
  box-shadow: 0 0 26px rgba(240, 185, 60, .3), 0 12px 26px rgba(0, 0, 0, .55);
}
.poker-seat:has(.poker-said.win) .poker-hand .pcard {
  box-shadow: 0 0 0 2px var(--gold), 0 8px 18px rgba(0, 0, 0, .55);
}

/* A face from Discord, laid over the initials rather than instead of them: if
   the picture never arrives, the letters are already there underneath. */
.poker-face { overflow: hidden; }
.poker-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* The seconds left on the clock, in the middle of the ring: a bar running out
   says "soon", a number says how soon. */
.poker-count {
  position: absolute;
  right: -10px;
  bottom: -8px;
  min-width: 20px;
  padding: 1px 4px;
  border-radius: 8px;
  background: rgba(10, 8, 5, .92);
  border: 1px solid var(--gold);
  color: var(--gold);
  font: 700 11px/1.5 var(--mono, ui-monospace), monospace;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.poker-count.low {
  color: #ff6b6b;
  border-color: #ff6b6b;
  animation: bosspulse 1s ease-in-out infinite;
}

/* ========================================================================== */
/*  The card room, away from the table                                        */
/*                                                                            */
/*  The felt is only half the room: the lobby, the chips and the lists around  */
/*  it were the same grey as the raid schedule, which made the table look like */
/*  a picture somebody had pasted onto a spreadsheet. These pages wear the     */
/*  colours of the table — the cloth in the card heads, gold on the numbers,   */
/*  a warmer border. The working side of the site is not touched: the class is */
/*  only on the pages of the room.                                            */
/* ========================================================================== */

body.in-card-room .card {
  border-color: rgba(240, 185, 60, .16);
  background:
    linear-gradient(180deg, rgba(240, 185, 60, .035), transparent 120px),
    var(--panel);
}
body.in-card-room .card-head {
  border-bottom-color: rgba(240, 185, 60, .16);
  background-image:
    url('/img/poker/felt.webp'),
    linear-gradient(90deg, rgba(29, 82, 51, .55), rgba(29, 82, 51, .12) 45%, transparent 75%);
  background-size: 220px 220px, cover;
  background-blend-mode: overlay, normal;
}
body.in-card-room .card-head h2 {
  color: #f3ece0;
  letter-spacing: .01em;
}
body.in-card-room .card-head h2::first-letter { color: #f0b93c; }

/* The numbers that matter in a card room are chips, and chips are gold. */
body.in-card-room .badge.amber,
body.in-card-room .statcard .value { color: #f0b93c; }

/* One press that costs chips is the gold one; everything else stays quiet. */
body.in-card-room .btn.primary {
  background: linear-gradient(180deg, #f0c257, #c98a1e);
  border-color: #a9720f;
  color: #1a1204;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
body.in-card-room .btn.primary:hover { filter: brightness(1.07); }

/* A table waiting for players, in a list: warmer rows, gold on the hover. */
body.in-card-room tbody tr:hover > td { background: rgba(240, 185, 60, .06); }
body.in-card-room .seg button.active {
  background: linear-gradient(180deg, #f0c257, #c98a1e);
  border-color: #a9720f;
  color: #1a1204;
}

/* An empty chair is a button, and looks like one only when the pointer is on it. */
button.poker-plate {
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
button.poker-plate:hover {
  border-color: rgba(240, 185, 60, .55);
  background: linear-gradient(180deg, rgba(30, 24, 14, .95), rgba(14, 11, 6, .95));
}
button.poker-plate:hover .poker-face { box-shadow: inset 0 0 0 1px rgba(240, 185, 60, .5); }
button.poker-plate:hover .poker-name { color: var(--gold); }

/* ---- the clock on the move, in words ------------------------------------ */
/* The ring round the face says how much is left; this says how many seconds,
   next to the buttons, where the person who has to move is already looking. */
.poker-actions .pk-turn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  color: #f2e2b8;
}
.pk-clock {
  display: inline-block;
  min-width: 40px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .35);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 13px;
  color: #ffe9a8;
  text-align: center;
}
.pk-clock.mine { border-color: rgba(255, 214, 120, .5); }
/* The last few seconds are red and they blink, because at that point the table
   is about to fold the hand for you. */
.pk-clock.low {
  color: #fff;
  border-color: rgba(255, 90, 80, .8);
  background: rgba(190, 32, 26, .85);
  animation: pk-clock-blink 1s steps(2, start) infinite;
}
@keyframes pk-clock-blink { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pk-clock.low { animation: none; } }