/*
  Royal casino skin for the Points / Pool / Deals practice tables.
  Loaded after the table CSS. Colours and ornament only at every size; layout
  changes are limited to phones (max-width: 767px) and never touch the felt
  border width, stage height or hand card size the --pg-lead maths depends on.
*/

.points-game-page .points-game {
  --pg-gold: #e3b04b;
  --pg-gold-hi: #f6d98a;
  --pg-ivory: #f7ecd4;
  --pg-muted: rgba(247, 236, 212, 0.78);
  --pg-panel: #2a0c12;
  --pg-deep: #1d070c;
  border-color: rgba(227, 176, 75, 0.6);
  background-color: #1d070c;
  background-image:
    radial-gradient(90% 40% at 50% 0%, rgba(179, 38, 46, 0.35), transparent 70%),
    radial-gradient(circle, rgba(227, 176, 75, 0.08) 1.2px, transparent 1.8px),
    linear-gradient(180deg, #3a1019 0%, #1d070c 100%);
  background-size: auto, 22px 22px, auto;
  box-shadow:
    inset 0 0 0 1px rgba(227, 176, 75, 0.22),
    0 0 0 3px rgba(20, 6, 10, 0.9),
    0 0 0 4px rgba(227, 176, 75, 0.35),
    0 16px 34px rgba(0, 0, 0, 0.5);
}

/* ---------- Top bar ---------- */

.points-game-page .points-game .points-game-bar-links a + a {
  display: none;
}

.points-game-page .points-game .points-game-bar-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  color: var(--pg-gold-hi);
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
}

.points-game-page .points-game .points-game-bar-links a::before {
  content: "\2039";
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(227, 176, 75, 0.6);
  font-size: 1.05rem;
  line-height: 1;
}

.points-game-page .points-game .points-game-btn {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--pg-ivory);
  background-color: #2a0c12;
  background-image: linear-gradient(180deg, #4a1520 0%, #2a0c12 100%);
  border-color: rgba(227, 176, 75, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 8px rgba(0, 0, 0, 0.35);
}

.points-game-page .points-game .points-game-btn-primary,
.points-game-page .points-game .points-game-bar .pool-mode[aria-pressed="true"],
.points-game-page .points-game .points-game-bar .deals-length[aria-pressed="true"] {
  color: #2a0f05;
  background-color: #e3b04b;
  background-image: linear-gradient(180deg, #fbe9ad 0%, #e8b850 50%, #b4832a 100%);
  border-color: #7a5418;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* ---------- Pool / Deals status strip ---------- */

.points-game-page .points-game .pool-board,
.points-game-page .points-game .deals-board {
  color: var(--pg-ivory);
  background: linear-gradient(90deg, rgba(110, 18, 25, 0.75), rgba(42, 12, 18, 0.85));
  border: 1px solid rgba(227, 176, 75, 0.45);
  border-radius: 8px;
}

.points-game-page .points-game .pool-board-mode,
.points-game-page .points-game .deals-board-deal {
  color: var(--pg-gold-hi);
}

/* ---------- Felt + gold rail ---------- */

.points-game-page .points-game .points-game-felt {
  border-color: #c99a40;
  background-color: #0d5a3f;
  background-image:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.1), transparent 55%),
    repeating-linear-gradient(45deg, rgba(246, 217, 138, 0.045) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(246, 217, 138, 0.035) 0 1px, transparent 1px 14px),
    radial-gradient(ellipse at 50% 45%, #15784f 0%, #0d5a3f 55%, #073523 100%);
  box-shadow:
    inset 0 0 0 1px #f6d98a,
    inset 0 0 0 4px #2a0c12,
    inset 0 0 0 5px rgba(227, 176, 75, 0.75),
    inset 0 0 38px rgba(0, 0, 0, 0.5),
    0 0 0 2px #1a070b,
    0 0 0 3px rgba(227, 176, 75, 0.45),
    0 12px 24px rgba(0, 0, 0, 0.5);
}

/* ---------- Seats: maroon nameplates with gold pinstripe ---------- */

.points-game-page .points-game .points-game-seat {
  border-color: rgba(227, 176, 75, 0.85);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(74, 21, 32, 0.96) 0%, rgba(38, 9, 15, 0.97) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 208, 0.22),
    inset 0 0 0 2px rgba(20, 6, 10, 0.85),
    inset 0 0 0 3px rgba(227, 176, 75, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.45);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.points-game-page .points-game .points-game-seat.is-current,
.points-game-page .points-game .points-game-rail .points-game-seat-you.is-current {
  border-color: #f6d98a;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 208, 0.3),
    inset 0 0 0 2px rgba(20, 6, 10, 0.85),
    inset 0 0 0 3px rgba(246, 217, 138, 0.6),
    0 0 0 2px rgba(246, 217, 138, 0.55),
    0 0 18px rgba(246, 217, 138, 0.45);
}

.points-game-page .points-game .points-game-seat h3 {
  color: #2a0f05;
  background-image: linear-gradient(180deg, #fbe9ad 0%, #e8b850 55%, #c4922a 100%);
  border-color: #7a5418;
}

.points-game-page .points-game .points-game-score,
.points-game-page .points-game .points-game-bank {
  color: var(--pg-ivory);
}

/* ---------- Centre: piles + status ---------- */

.points-game-page .points-game .points-game-piles::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 13rem;
  height: 13rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(246, 217, 138, 0.22);
  box-shadow:
    0 0 0 0.55rem rgba(246, 217, 138, 0.03),
    0 0 0 0.6rem rgba(246, 217, 138, 0.14),
    inset 0 0 40px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.points-game-page .points-game .points-game-status {
  color: var(--pg-gold-hi);
  background: rgba(20, 6, 10, 0.78);
  border: 1px solid rgba(227, 176, 75, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.points-game-page .points-game .points-game-deck,
.points-game-page .points-game .points-game-back,
.points-game-page .points-game .points-game-pile.is-ready [data-act="draw-stock"]:not(:disabled),
.points-game-page .points-game .points-game-card.is-flight.is-back {
  background-color: #6e1219;
  background-image: url("../images/points-rummy/card-back-ruby.svg");
}

.points-game-page .points-game .points-game-deck {
  box-shadow:
    -4px -3px 0 0 #4a0d13,
    -4px -3px 0 1px #d6b779,
    -8px -6px 0 0 #4a0d13,
    -8px -6px 0 1px rgba(214, 183, 121, 0.85),
    0 8px 16px rgba(0, 0, 0, 0.45);
}

.points-game-page .points-game .points-game-pile.is-ready .points-game-deck:not(:disabled),
.points-game-page .points-game .points-game-pile.is-ready .points-game-discard:not(:disabled) {
  outline: 2px solid rgba(246, 217, 138, 0.85);
  outline-offset: 3px;
}

/* ---------- Dock: ruby discard, gold declare, wood chips ---------- */

.points-game-page .points-game .points-game-actions .points-game-btn {
  color: var(--pg-ivory);
  background-image: linear-gradient(180deg, #4a1520 0%, #2a0c12 100%);
  border-color: rgba(227, 176, 75, 0.7);
}

.points-game-page .points-game .points-game-actions [data-act="discard"] {
  color: #fff6e6;
  background-color: #8e1820;
  background-image: linear-gradient(180deg, #c3313a 0%, #8e1820 55%, #6e1219 100%);
  border-color: #e3b04b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.points-game-page .points-game .points-game-btn-declare,
.points-game-page .points-game .points-game-actions [data-act="declare"] {
  color: #2a0f05;
  background-color: #e3b04b;
  background-image: linear-gradient(180deg, #fbe9ad 0%, #e8b850 50%, #b4832a 100%);
  border-color: #7a5418;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.points-game-page .points-game .points-game-btn:disabled,
.points-game-page .points-game .points-game-actions .points-game-btn:disabled {
  opacity: 0.42;
  filter: saturate(0.55);
  box-shadow: none;
}

.points-game-page .points-game .points-game-btn:not(:disabled):active {
  transform: translateY(1px);
  filter: brightness(1.08);
}

/* ---------- Overlays: declare prompt, result, deals confirm ---------- */

.points-game-page .points-game .points-game-declare-card,
.points-game-page .points-game .points-game-result.is-open {
  color: var(--pg-ivory);
  background-color: #2a0c12;
  background-image: linear-gradient(180deg, #4a1520 0%, #1d070c 100%);
  border-color: #e3b04b;
  box-shadow:
    inset 0 0 0 3px #1d070c,
    inset 0 0 0 4px rgba(227, 176, 75, 0.6),
    0 18px 36px rgba(0, 0, 0, 0.6);
}

.points-game-page .points-game .points-game-declare-card h2,
.points-game-page .points-game .points-game-result h3,
.points-game-page .points-game .points-game-result-kicker {
  color: var(--pg-gold-hi);
}

.points-game-page .points-game .deals-confirm {
  background: rgba(20, 6, 10, 0.78);
}

.points-game-page .points-game .deals-confirm-card {
  color: #2d150b;
  background: linear-gradient(180deg, #f8edcf, #ead6a4);
  border-color: #8a6424;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6);
}

/* ---------- Below-table panels ---------- */

.points-game-page .points-game .points-game-session,
.points-game-page .points-game .points-game-rules {
  border-color: rgba(227, 176, 75, 0.35);
}

.points-game-page .points-game-session {
  border: 1px solid #c99a40;
  border-radius: 10px;
  background-color: #2a0c12;
  background-image: linear-gradient(180deg, #4a1520 0%, #22090e 100%);
  box-shadow:
    inset 0 0 0 3px #22090e,
    inset 0 0 0 4px rgba(227, 176, 75, 0.45);
}

.points-game-page .points-game-session dl div,
.points-game-page .points-game-session li {
  border-color: rgba(227, 176, 75, 0.35);
  border-radius: 8px;
  background: rgba(20, 6, 10, 0.55);
}

.points-game-page .points-game-session li.is-won {
  background: rgba(31, 92, 58, 0.55);
}

.points-game-page .points-game-session li.is-lost,
.points-game-page .points-game-session li.is-invalid {
  background: rgba(179, 38, 46, 0.35);
}

.points-game-page .points-game-session dt {
  color: #d9c7a4;
}

.points-game-page .points-game .points-game-pile [data-stock-count] {
  border-color: #e3b04b;
  background: #2a0c12;
  color: #f6d98a;
}

.points-game-page .points-game .points-game-actions [data-act="hint"]:not(:disabled),
.points-game-page .points-game .points-game-actions [data-act="again"]:not(:disabled) {
  background: linear-gradient(180deg, #5a1a24 0%, #2a0c12 100%);
}

.points-game-page .points-game:has(.points-game-result.is-open) {
  border-color: #e3b04b;
  background-color: #2a0c12;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(246, 217, 138, 0.18), transparent 55%),
    repeating-linear-gradient(45deg, rgba(227, 176, 75, 0.04) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #4a1520 0%, #22090e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.3),
    inset 0 0 0 4px #22090e,
    inset 0 0 0 5px rgba(227, 176, 75, 0.85),
    0 18px 40px rgba(0, 0, 0, 0.6);
}

.points-game-page .points-game:has(.points-game-result.is-open) .points-game-result-actions {
  background: linear-gradient(180deg, rgba(42, 12, 18, 0.96), #1d070c);
}

.points-game-page .points-game:has(.points-game-result.is-open) .points-game-result-verdict,
.points-game-page .points-game:has(.points-game-result.is-open) .points-game-result.is-open .points-game-result-score,
.points-game-page .points-game:has(.points-game-result.is-open) .points-game-result-back {
  border-color: rgba(227, 176, 75, 0.55);
  background: rgba(20, 6, 10, 0.6);
}

/* ---------- Phones: concise chrome ---------- */

@media (max-width: 767px) {
  /* Points bar: rules link + two buttons on one row */
  .points-game-page .points-game .points-game-bar:has([data-act="refill"]) {
    flex-wrap: nowrap;
    align-items: center;
  }

  .points-game-page .points-game .points-game-bar:has([data-act="refill"]) .points-game-bar-links {
    flex: 0 0 auto;
    width: auto;
  }

  .points-game-page .points-game .points-game-bar:has([data-act="refill"]) .points-game-btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
  }

  .points-game-page .points-game .points-game-bar-links a {
    font-size: 0.82rem;
  }

  /* Pool / Deals bar: icon-only rules link so the mode buttons share one row */
  .points-game-page .points-game .points-game-bar:not(:has([data-act="refill"])) {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
  }

  .points-game-page .points-game .points-game-bar:not(:has([data-act="refill"])) .points-game-btn {
    font-size: 0.78rem;
  }

  .points-game-page .points-game .points-game-bar:not(:has([data-act="refill"])) .points-game-btn[data-act="new"] {
    flex-grow: 1.3;
  }

  .points-game-page .points-game .points-game-bar:not(:has([data-act="refill"])) .points-game-bar-links {
    flex: 0 0 auto;
    width: auto;
  }

  .points-game-page .points-game .points-game-bar:not(:has([data-act="refill"])) .points-game-bar-links a {
    justify-content: center;
    width: 44px;
    font-size: 0;
  }

  .points-game-page .points-game .points-game-bar:not(:has([data-act="refill"])) .points-game-bar-links a::before {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.3rem;
  }

  .points-game-page .points-game .points-game-bar:not(:has([data-act="refill"])) .points-game-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0.35rem;
    white-space: nowrap;
  }

  /* Pool hub: the 101 / 201 links line under h1 is part of the first screen */
  .points-game-page > .wrap > h1 + p {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .points-game-page:has(> .wrap > h1 + p) .points-game .points-game-stage {
    min-height: calc(100svh - var(--header-h) - var(--pg-lead) - 1.1rem);
    min-height: calc(100dvh - var(--header-h) - var(--pg-lead) - 1.1rem);
  }

  .points-game-page .points-game .points-game-center > .points-game-status {
    flex: 0 0 auto;
    width: max-content;
    max-width: 19rem;
  }

  /* Opponent plates: name + score only; turn shows as the gold glow */
  .points-game-page .points-game .points-game-seat:not(.points-game-seat-you) [data-seat-status] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .points-game-page .points-game .points-game-seat:not(.points-game-seat-you) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar name name"
      "avatar score bank";
  }

  .points-game-page .points-game .points-game-felt {
    box-shadow:
      inset 0 0 0 1px #f6d98a,
      inset 0 0 0 4px #2a0c12,
      inset 0 0 0 5px rgba(227, 176, 75, 0.75),
      inset 0 0 26px rgba(0, 0, 0, 0.5),
      0 0 0 2px #1a070b,
      0 8px 18px rgba(0, 0, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .points-game-page .points-game .points-game-seat {
    transition: none;
  }

  .points-game-page .points-game .points-game-btn:not(:disabled):active {
    transform: none;
  }
}