/*
 * /sudokuparadise.com/cribbage/css/CribbagePlay.css
 * ==========================================================
 * Cribbage Paradise — Playable Card Table 1.2.0
 * Requires CribbageParadise.css to load first.
 * ==========================================================
 */

.mode-buttons button {
  cursor: pointer;
}

.mode-buttons button:focus-visible,
.cp-play-console button:focus-visible,
.cp-play-console input:focus-visible {
  outline: 2px solid var(--gold-leaf-light);
  outline-offset: 3px;
}

.mode-buttons button:disabled {
  cursor: not-allowed;
  filter: saturate(0.55);
  opacity: 0.52;
}

.cp-play-console {
  position: relative;
  margin: 0 3px 30px;
  overflow: hidden;
  border: 1px solid #d2a552;
  border-radius: 24px;
  color: var(--cream);
  background:
    repeating-linear-gradient(
      93deg,
      rgb(255 219 158 / 3%) 0,
      rgb(255 219 158 / 3%) 1px,
      transparent 1px,
      transparent 9px
    ),
    linear-gradient(
      180deg,
      #7b392b,
      #4a1b16
    );
  box-shadow:
    inset 0 0 0 4px #2e0d0a,
    inset 0 0 0 6px rgb(188 112 62 / 70%),
    0 15px 28px rgb(0 0 0 / 31%);
}

.cp-play-console::before {
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(238 196 105 / 25%);
  border-radius: 16px;
  content: "";
  pointer-events: none;
}

.cp-play-header {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 27px 30px 21px;
}

.cp-intelligence-label {
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.8rem, 1.45vw, 1.05rem);
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / 55%);
  white-space: nowrap;
}

.cp-play-header h3 {
  margin: 2px 0 7px;
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 400;
  text-shadow:
    0 1px 0 var(--gold-leaf-shadow),
    0 -1px rgb(255 244 200 / 18%);
}

.cp-play-header p {
  max-width: 620px;
  margin: 0;
  color: #dfc7a0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.84rem;
  line-height: 1.45;
}

.cp-play-kicker {
  color: var(--gold-bright) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.55rem !important;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cp-live-scores {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cp-score-chip {
  display: grid;
  min-width: 82px;
  min-height: 53px;
  place-items: center;
  gap: 2px;
  padding: 7px 11px;
  border: 1px solid rgb(234 197 116 / 28%);
  border-radius: 12px;
  background: rgb(35 9 7 / 42%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 6%),
    0 2px 4px rgb(0 0 0 / 18%);
}

.cp-score-chip small {
  color: #cfb68d;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.cp-score-chip strong {
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
}

.cp-score-chip.is-winner {
  border-color: var(--gold-leaf-light);
  background: rgb(101 60 18 / 50%);
  box-shadow:
    0 0 12px rgb(235 194 95 / 38%),
    inset 0 1px rgb(255 255 255 / 12%);
}

.cp-card-table {
  display: grid;
  position: relative;
  z-index: 1;
  min-height: 548px;
  grid-template-rows: auto minmax(230px, 1fr) auto;
  gap: 18px;
  margin: 0 18px;
  padding: 23px 25px 27px;
  border: 2px solid #1d0a07;
  border-radius: 50px;
  background:
    radial-gradient(
      ellipse at 50% 47%,
      rgb(54 137 104 / 26%),
      transparent 52%
    ),
    repeating-radial-gradient(
      circle at 18% 27%,
      transparent 0,
      transparent 2px,
      rgb(255 255 255 / 2%) 2.4px,
      transparent 3px
    ),
    linear-gradient(
      135deg,
      #0d5947,
      #073a30
    );
  box-shadow:
    inset 0 0 0 7px #5e281e,
    inset 0 0 0 9px #a45f39,
    inset 0 0 48px rgb(0 0 0 / 33%),
    0 5px 0 #2c0e0b;
}

.cp-card-table::before {
  position: absolute;
  inset: 16px;
  border: 1px solid rgb(237 205 132 / 14%);
  border-radius: 37px;
  content: "";
  pointer-events: none;
}

.cp-opponent-grid {
  display: flex;
  position: relative;
  z-index: 2;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(18px, 4vw, 64px);
}

.cp-opponent-grid[data-count="2"],
.cp-opponent-grid[data-count="3"] {
  justify-content: space-around;
}

.cp-player-rack {
  position: relative;
  border: 1px solid transparent;
  border-radius: 16px;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.cp-player-rack.is-turn {
  border-color: rgb(241 205 120 / 48%);
  background: rgb(3 29 24 / 28%);
  box-shadow:
    0 0 14px rgb(229 189 100 / 14%),
    inset 0 0 14px rgb(255 255 255 / 3%);
}

.cp-player-rack header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin-bottom: 8px;
  color: #e7d2ad;
}

.cp-player-rack header strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.77rem;
  font-weight: 700;
  text-shadow: 0 1px rgb(0 0 0 / 46%);
}

.cp-player-rack header > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cp-player-rack--opponent {
  min-width: 165px;
  max-width: 260px;
  padding: 9px 12px 12px;
}

.cp-player-rack--human {
  z-index: 2;
  width: min(100%, 720px);
  min-height: 154px;
  justify-self: center;
  padding: 12px 18px 15px;
  background: rgb(3 28 23 / 15%);
}

.cp-player-rack--human header strong {
  color: var(--gold-leaf-light);
  font-size: 0.9rem;
}

.cp-table-badge {
  display: inline-flex;
  min-height: 19px;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid rgb(230 188 97 / 34%);
  border-radius: 999px;
  color: var(--gold-leaf-light);
  background: rgb(69 29 12 / 47%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.41rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-table-badge--turn {
  color: #d9ffe4;
  border-color: rgb(89 201 120 / 44%);
  background: rgb(18 91 52 / 55%);
}

.cp-table-badge--go {
  color: #fff1b3;
  border-color: rgb(232 187 59 / 54%);
  background: rgb(110 73 12 / 58%);
}

.cp-opponent-hand,
.cp-human-hand {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cp-opponent-hand {
  min-height: 64px;
  padding-left: 25px;
}

.cp-opponent-hand .cp-playing-card {
  margin-left: -25px;
}

.cp-human-hand {
  min-height: 117px;
  gap: clamp(5px, 1vw, 12px);
  padding-top: 5px;
}

.cp-playing-card {
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 108px;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid #c6b58d;
  border-radius: 9px;
  color: #151713;
  background:
    linear-gradient(
      135deg,
      #fffdf3,
      #e8e1ca
    );
  box-shadow:
    0 6px 9px rgb(0 0 0 / 30%),
    inset 0 0 0 2px rgb(255 255 255 / 45%);
  font-family: Georgia, "Times New Roman", serif;
  vertical-align: middle;
  transition:
    transform 150ms ease,
    filter 150ms ease,
    opacity 150ms ease,
    box-shadow 150ms ease;
}

button.cp-playing-card {
  cursor: pointer;
}

.cp-playing-card.is-red {
  color: #a42122;
}

.cp-playing-card.is-black {
  color: #171b18;
}

.cp-playing-card.is-playable:not(:disabled):hover {
  transform: translateY(-7px);
  box-shadow:
    0 11px 13px rgb(0 0 0 / 36%),
    0 0 0 2px rgb(235 202 120 / 52%);
}

.cp-playing-card.is-selected {
  transform: translateY(-16px);
  border-color: var(--gold-leaf-light);
  box-shadow:
    0 15px 15px rgb(0 0 0 / 38%),
    0 0 0 3px rgb(235 196 104 / 48%),
    0 0 15px rgb(240 198 94 / 36%);
}

.cp-playing-card.is-disabled {
  cursor: not-allowed;
  filter:
    saturate(0.5)
    brightness(0.77);
  opacity: 0.72;
}

/*
 * Card lighting is instructional. Only the hand, crib,
 * starter, or pegging cards involved in the current action
 * remain fully illuminated.
 */
.cp-player-rack.is-card-dimmed .cp-playing-card,
.cp-center-slot.is-card-dimmed .cp-playing-card,
.cp-played-card-wrap.is-card-dimmed .cp-playing-card {
  filter:
    saturate(0.28)
    brightness(0.58);
  opacity: 0.42;
  box-shadow:
    0 3px 6px rgb(0 0 0 / 24%),
    inset 0 0 0 2px rgb(255 255 255 / 18%);
}

.cp-player-rack.is-card-dimmed > header,
.cp-center-slot.is-card-dimmed > small,
.cp-played-card-wrap.is-card-dimmed > small {
  opacity: 0.48;
}

.cp-player-rack.is-card-lit .cp-playing-card:not(.is-disabled),
.cp-center-slot.is-card-lit .cp-playing-card,
.cp-played-card-wrap.is-card-lit .cp-playing-card {
  filter:
    saturate(1.04)
    brightness(1.04);
  opacity: 1;
  box-shadow:
    0 8px 12px rgb(0 0 0 / 34%),
    0 0 0 1px rgb(236 200 112 / 42%),
    0 0 15px rgb(232 191 91 / 18%),
    inset 0 0 0 2px rgb(255 255 255 / 48%);
}

.cp-player-rack.is-card-lit {
  border-color: rgb(238 201 116 / 34%);
  background: rgb(3 29 24 / 28%);
  box-shadow:
    0 0 15px rgb(229 189 100 / 11%),
    inset 0 0 14px rgb(255 255 255 / 2%);
}

.cp-center-slot.is-card-lit .cp-single-card-slot,
.cp-center-slot.is-card-lit .cp-crib-stack {
  border-color: rgb(235 197 109 / 62%);
  box-shadow:
    inset 0 0 16px rgb(0 0 0 / 17%),
    0 0 15px rgb(232 191 91 / 17%);
}

.cp-card-corner {
  display: grid;
  position: absolute;
  left: 7px;
  justify-items: center;
  line-height: 0.83;
}

.cp-card-corner strong {
  font-size: 1rem;
}

.cp-card-corner i {
  margin-top: 2px;
  font-family:
    "Segoe UI Symbol",
    "Noto Sans Symbols 2",
    "Arial Unicode MS",
    sans-serif;
  font-size: 1.08rem;
  font-style: normal;
  font-weight: 700;
  line-height: 0.9;
}

.cp-card-corner--top {
  top: 7px;
}

.cp-card-corner--bottom {
  right: 7px;
  bottom: 7px;
  left: auto;
  transform: rotate(180deg);
}

.cp-card-suit {
  font-size: 2.55rem;
  text-shadow: 0 1px rgb(255 255 255 / 60%);
}

.cp-card-mini {
  width: 43px;
  height: 61px;
  border-radius: 6px;
}

.cp-card-mini .cp-card-corner {
  left: 4px;
  line-height: 0.72;
}

.cp-card-mini .cp-card-corner--top {
  top: 4px;
}

.cp-card-mini .cp-card-corner--bottom {
  right: 4px;
  bottom: 4px;
  left: auto;
}

.cp-card-mini .cp-card-corner strong {
  font-size: 0.61rem;
}

.cp-card-mini .cp-card-corner i {
  margin-top: 1px;
  font-size: 0.7rem;
  line-height: 0.9;
}

.cp-card-mini .cp-card-suit {
  font-size: 1.37rem;
}

.cp-card-back {
  border-color: #bb9149;
  color: var(--gold-leaf-light);
  background:
    radial-gradient(
      circle at center,
      transparent 0 15px,
      rgb(231 190 99 / 32%) 16px 17px,
      transparent 18px
    ),
    repeating-linear-gradient(
      45deg,
      rgb(255 255 255 / 4%) 0,
      rgb(255 255 255 / 4%) 2px,
      transparent 2px,
      transparent 6px
    ),
    linear-gradient(
      135deg,
      #67291f,
      #32100d
    );
  box-shadow:
    0 6px 9px rgb(0 0 0 / 30%),
    inset 0 0 0 3px #7e4e26,
    inset 0 0 0 5px rgb(230 187 91 / 33%);
}

.cp-card-back-mark {
  display: inline-grid;
  width: 38px;
  height: 25px;
  place-items: center;
  border: 1px solid rgb(235 195 104 / 52%);
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.69rem;
  font-weight: 700;
}

.cp-card-mini .cp-card-back-mark {
  width: 25px;
  height: 17px;
  font-size: 0.46rem;
}

.cp-table-center {
  display: grid;
  position: relative;
  z-index: 2;
  grid-template-columns:
    minmax(180px, 220px)
    125px
    104px
    125px;
  grid-template-rows: auto minmax(75px, auto);
  align-items: center;
  justify-content: center;
  gap: 15px 18px;
}

.cp-felt-narration {
  display: grid;
  width: 100%;
  min-height: 126px;
  align-content: center;
  gap: 8px;
  padding: 13px 3px 13px 27px;
  border-top: 1px solid rgb(231 196 112 / 30%);
  border-bottom: 1px solid rgb(231 196 112 / 30%);
  color: #ead7b2;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgb(2 31 25 / 40%) 12%,
      rgb(2 31 25 / 40%) 88%,
      transparent
    );
  font-family: Georgia, "Times New Roman", serif;
}

.cp-felt-narration > span {
  color: var(--gold-bright);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.44rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cp-felt-narration ol {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-felt-narration li {
  color: #ab9d80;
  font-size: 0.62rem;
  line-height: 1.3;
}

.cp-felt-narration li.is-current {
  color: #f0ddb5;
  font-size: 0.7rem;
}

.cp-felt-narration li.is-important {
  color: var(--gold-leaf-light);
}

/*
 * ==========================================================
 * AI Declared-Count Accounting
 * ----------------------------------------------------------
 * Appears in the felt narration area while a computer
 * player's declared count remains open for review.
 *
 * This panel contains only the combinations claimed by the
 * opponent. It must never expose the Referee's complete
 * private audit before Muggins is called.
 * ==========================================================
 */

.cp-declaration-audit {
  display: grid;
  max-height: 105px;
  gap: 7px;
  padding-right: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color:
    rgb(209 170 83 / 55%)
    rgb(1 24 20 / 28%);
  scrollbar-width: thin;
}

.cp-declaration-audit ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-declaration-audit li {
  padding-bottom: 3px;
  border-bottom:
    1px solid
    rgb(231 196 112 / 9%);
  color: #ead7b2;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 0.58rem;
  line-height: 1.28;
}

.cp-declaration-audit li:last-child {
  border-bottom: 0;
}

.cp-declaration-audit > strong {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: block;
  padding: 5px 0 3px;
  color: var(--gold-leaf-light);
  background:
    linear-gradient(
      180deg,
      rgb(7 58 48 / 82%),
      #073a30 38%
    );
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.53rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  text-shadow:
    0 1px 2px
    rgb(0 0 0 / 55%);
}

.cp-center-slot {
  display: grid;
  justify-items: center;
  gap: 7px;
}

.cp-center-slot > small {
  color: #d9c39c;
  font-size: 0.47rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-shadow: 0 1px rgb(0 0 0 / 48%);
  text-transform: uppercase;
}

.cp-single-card-slot,
.cp-crib-stack {
  display: grid;
  width: 94px;
  height: 126px;
  place-items: center;
  border: 1px dashed rgb(230 199 131 / 33%);
  border-radius: 12px;
  background: rgb(1 24 20 / 24%);
  box-shadow: inset 0 0 16px rgb(0 0 0 / 17%);
}

.cp-single-card-slot .cp-playing-card {
  width: 70px;
  height: 100px;
}

.cp-crib-stack {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding-left: 19px;
}

.cp-crib-stack .cp-playing-card {
  margin-left: -19px;
}

.cp-card-placeholder {
  color: rgb(229 210 164 / 42%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  font-style: italic;
}

.cp-count-dial {
  display: grid;
  width: 102px;
  height: 102px;
  place-items: center;
  align-content: center;
  border: 2px solid #c49a4b;
  border-radius: 50%;
  color: var(--gold-leaf-light);
  background:
    radial-gradient(
      circle at 35% 25%,
      rgb(255 255 255 / 8%),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #552218,
      #2b0d09
    );
  box-shadow:
    inset 0 0 0 4px #70451f,
    0 8px 13px rgb(0 0 0 / 30%);
}

.cp-count-dial small,
.cp-count-dial span {
  color: #cdb688;
  font-size: 0.43rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cp-count-dial strong {
  margin: 1px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.cp-play-pile {
  display: flex;
  min-height: 73px;
  grid-column: 1 / -1;
  align-items: flex-end;
  justify-content: center;
  padding-left: 15px;
}

.cp-played-card-wrap {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin-left: -15px;
}

.cp-played-card-wrap small {
  max-width: 52px;
  overflow: hidden;
  color: #d1bc93;
  font-size: 0.38rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-empty-pile {
  align-self: center;
  color: rgb(220 205 162 / 36%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.69rem;
  font-style: italic;
}

.cp-action-rail {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 25px;
  margin: 22px 27px 0;
  padding: 16px 4px 0;
  border-top: 1px solid rgb(232 190 100 / 24%);
}

.cp-action-rail p {
  margin: 0;
  color: #ddc8a3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  line-height: 1.45;
}

.cp-action-controls,
.cp-rule-vote,
.cp-score-declaration {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.cp-primary-action {
  min-width: 160px;
  min-height: 42px;
  flex: 0 0 auto;
  padding: 8px 18px;
  border: 1px solid #e4bf6b;
  border-radius: 999px;
  color: #38220f;
  background:
    linear-gradient(
      180deg,
      #f5dea0,
      #c99c4a
    );
  box-shadow:
    inset 0 1px rgb(255 255 255 / 62%),
    0 4px 7px rgb(0 0 0 / 28%);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-primary-action:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.cp-primary-action--go {
  color: #fff0c8;
  border-color: #e4ad46;
  background:
    linear-gradient(
      180deg,
      #a05d20,
      #64300e
    );
}

.cp-primary-action:disabled {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.48;
}

.cp-secondary-action,
.cp-muggins-action {
  min-width: 136px;
  min-height: 42px;
  flex: 0 0 auto;
  padding: 8px 17px;
  border-radius: 999px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-secondary-action {
  border: 1px solid rgb(225 188 108 / 48%);
  color: #ead6ac;
  background:
    linear-gradient(
      180deg,
      rgb(101 48 34 / 94%),
      rgb(54 21 17 / 96%)
    );
  box-shadow:
    inset 0 1px rgb(255 255 255 / 9%),
    0 4px 7px rgb(0 0 0 / 24%);
}

.cp-secondary-action:hover {
  border-color: rgb(235 199 118 / 72%);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/*
 * The Muggins control deliberately has one visual state.
 * Availability and missed points are never exposed through
 * color, brightness, opacity, cursor, or button geometry.
 */
.cp-muggins-action,
.cp-muggins-action:hover,
.cp-muggins-action:active {
  min-width: 118px;
  border: 1px solid #b98538;
  color: #f3ddb0;
  background:
    radial-gradient(
      circle at 50% 16%,
      rgb(255 235 170 / 11%),
      transparent 46%
    ),
    linear-gradient(
      180deg,
      #6d3324,
      #35130f
    );
  box-shadow:
    inset 0 1px rgb(255 255 255 / 10%),
    inset 0 0 0 2px rgb(112 64 29 / 42%),
    0 4px 7px rgb(0 0 0 / 28%);
  filter: none;
  opacity: 1;
  transform: none;
}

.cp-score-declaration {
  padding: 5px 6px 5px 12px;
  border: 1px solid rgb(229 190 103 / 28%);
  border-radius: 999px;
  background: rgb(35 10 8 / 32%);
  box-shadow:
    inset 0 1px 5px rgb(0 0 0 / 18%),
    0 1px rgb(255 255 255 / 3%);
}

.cp-score-declaration.is-awaiting-score {
  border-color: rgb(239 202 117 / 62%);
  background:
    radial-gradient(
      circle at 78% 50%,
      rgb(242 203 112 / 12%),
      transparent 42%
    ),
    rgb(35 10 8 / 44%);
  box-shadow:
    inset 0 1px 5px rgb(0 0 0 / 20%),
    0 0 0 1px rgb(235 197 107 / 10%),
    0 0 16px rgb(232 189 89 / 20%);
  animation: cp-score-ready 1.9s ease-in-out infinite;
}

@keyframes cp-score-ready {
  0%,
  100% {
    box-shadow:
      inset 0 1px 5px rgb(0 0 0 / 20%),
      0 0 0 1px rgb(235 197 107 / 8%),
      0 0 12px rgb(232 189 89 / 14%);
  }

  50% {
    box-shadow:
      inset 0 1px 5px rgb(0 0 0 / 20%),
      0 0 0 1px rgb(239 204 121 / 18%),
      0 0 20px rgb(232 189 89 / 27%);
  }
}

.cp-score-declaration label,
.cp-muggins-complaint label {
  display: grid;
  gap: 4px;
  color: #cdb78f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.43rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cp-score-declaration input,
.cp-muggins-complaint input {
  min-height: 34px;
  border: 1px solid rgb(221 181 93 / 45%);
  border-radius: 8px;
  color: #f3e2bd;
  background:
    linear-gradient(
      180deg,
      rgb(24 10 8 / 88%),
      rgb(49 18 14 / 88%)
    );
  box-shadow:
    inset 0 2px 5px rgb(0 0 0 / 35%),
    0 1px rgb(255 255 255 / 4%);
  font-family: Georgia, "Times New Roman", serif;
}

.cp-score-declaration input {
  width: 62px;
  padding: 4px 8px;
  font-size: 1rem;
  text-align: center;
}

.cp-muggins-complaint {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns:
    auto
    92px
    minmax(180px, 1fr)
    auto
    auto;
  align-items: end;
  gap: 10px;
  padding: 18px 22px;
  border: 1px solid rgb(219 175 82 / 30%);
  border-radius: 14px;
  background:
    linear-gradient(
      90deg,
      rgb(20 6 5 / 58%),
      transparent 10%,
      transparent 90%,
      rgb(20 6 5 / 58%)
    ),
    repeating-linear-gradient(
      91deg,
      rgb(255 224 160 / 2%) 0,
      rgb(255 224 160 / 2%) 1px,
      transparent 1px,
      transparent 8px
    ),
    linear-gradient(
      180deg,
      rgb(67 25 19 / 72%),
      rgb(37 12 10 / 78%)
    );
  box-shadow:
    inset 0 1px rgb(255 255 255 / 5%),
    inset 0 0 22px rgb(10 3 3 / 46%),
    0 5px 11px rgb(0 0 0 / 17%);
}

.cp-muggins-complaint > strong {
  align-self: center;
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  font-weight: 700;
  text-shadow:
    0 1px 2px #160605,
    0 0 5px rgb(0 0 0 / 45%);
  white-space: nowrap;
}

.cp-muggins-complaint label {
  text-shadow: 0 1px 2px #160605;
}

.cp-muggins-complaint input {
  width: 100%;
  padding: 5px 9px;
  font-size: 0.8rem;
}

.cp-muggins-complaint input::placeholder {
  color: rgb(210 188 148 / 44%);
  font-style: italic;
}

.cp-muggins-reason {
  min-width: 0;
}

/*
 * ==========================================================
 * Restores the large Count Review, Learning, GO,
 * and Referee interface.
 * ==========================================================
 */

.cp-action-rail:has(.cp-state-gate) {
  grid-template-columns: 1fr;
}

.cp-action-controls:has(.cp-state-gate) {
  display: flex;
  width: 100%;
  align-items: stretch;
  justify-content: stretch;
  gap: 12px;
}

.cp-action-controls:has(.cp-state-gate) > .cp-muggins-action {
  width: 90px;
  min-width: 90px;
  min-height: 104px;
  padding-inline: 8px;
  border-radius: 50%;
}

.cp-state-gate {
  display: grid;
  min-width: 0;
  min-height: 104px;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: center;
  column-gap: 22px;
  padding: 16px 20px 15px 24px;
  border: 1px solid #c99743;
  border-radius: 13px;
  background:
    radial-gradient(
      ellipse at 54% 45%,
      rgb(112 53 31 / 38%),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgb(45 13 11 / 97%),
      rgb(24 7 7 / 98%)
    );
  box-shadow:
    inset 0 1px rgb(255 255 255 / 6%),
    0 5px 10px rgb(0 0 0 / 24%);
}

.cp-state-gate > span,
.cp-state-gate > strong,
.cp-state-gate > p {
  min-width: 0;
  grid-column: 1;
}

.cp-state-gate > span {
  margin-bottom: 7px;
  color: var(--gold-bright);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.46rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cp-state-gate > strong {
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  line-height: 1.15;
}

.cp-state-gate > p {
  margin: 5px 0 0;
  color: #ead7b5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  line-height: 1.35;
}

.cp-state-gate > .cp-primary-action,
.cp-state-gate > .cp-secondary-action {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
}

.cp-state-gate__breakdown {
  color: var(--gold-leaf-light) !important;
}

.cp-scorecard {
  position: relative;
  z-index: 1;
  margin: 18px 27px 28px;
  padding: 15px 17px 17px;
  border: 1px solid rgb(231 190 100 / 20%);
  border-radius: 14px;
  background: rgb(35 8 7 / 24%);
}

.cp-scorecard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.cp-scorecard h4 {
  margin: 0;
  color: var(--gold-leaf);
  font-size: 0.51rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cp-scorecard > header span {
  color: #a99574;
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-scorecard .cp-count-log {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

/*
 * ==========================================================
 * Referee's Bench
 * ----------------------------------------------------------
 * Neutral ground used only after Muggins is called.
 *
 * The ordinary historical scorecard is temporarily replaced
 * with an independent itemized audit and final judgment.
 * ==========================================================
 */

.cp-scorecard.is-referee-active {
  border-color:
    rgb(221 178 82 / 58%);
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgb(143 77 35 / 22%),
      transparent 62%
    ),
    rgb(28 7 6 / 52%);
  box-shadow:
    inset 0 1px
      rgb(255 255 255 / 5%),
    0 0 18px
      rgb(0 0 0 / 14%);
}

.cp-scorecard.is-referee-active > header {
  padding-bottom: 9px;
  border-bottom:
    1px solid
    rgb(225 184 94 / 18%);
}

.cp-scorecard.is-referee-active h4 {
  color: var(--gold-leaf-light);
}

.cp-referee-bench {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.cp-referee-bench__summary {
  display: grid;
  min-width: 0;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cp-referee-bench__summary span {
  min-width: 0;
  padding: 8px 10px;
  border:
    1px solid
    rgb(226 187 101 / 17%);
  border-radius: 9px;
  color: #bca783;
  background:
    rgb(27 7 6 / 32%);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.cp-referee-bench__summary strong {
  margin-left: 4px;
  color: var(--gold-leaf-light);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 0.82rem;
  font-weight: 700;
}

.cp-referee-bench__audit {
  display: grid;
  max-height: 145px;
  min-width: 0;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 6px 22px;
  margin: 0;
  padding: 0 8px 0 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #dbc7a3;
  scrollbar-color:
    rgb(209 170 83 / 55%)
    rgb(35 8 7 / 25%);
  scrollbar-width: thin;
}

.cp-referee-bench__audit li {
  min-width: 0;
  padding-bottom: 5px;
  border-bottom:
    1px solid
    rgb(230 192 106 / 9%);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 0.64rem;
  line-height: 1.32;
}

.cp-referee-bench__judgment {
  display: block;
  padding: 10px 13px;
  border:
    1px solid
    rgb(219 178 86 / 27%);
  border-radius: 10px;
  color: #ead7b5;
  background:
    rgb(35 8 7 / 42%);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-shadow:
    0 1px 2px
    rgb(0 0 0 / 48%);
}

.cp-referee-bench__judgment.is-upheld {
  color: #dff3c7;
  border-color:
    rgb(139 193 103 / 36%);
  background:
    rgb(31 74 37 / 28%);
}

.cp-referee-bench__judgment.is-denied {
  color: #f0d4b4;
  border-color:
    rgb(194 127 73 / 34%);
  background:
    rgb(92 35 22 / 27%);
}

.cp-table-ledger {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 20px 27px 28px;
}

.cp-table-ledger section {
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid rgb(231 190 100 / 17%);
  border-radius: 14px;
  background: rgb(35 8 7 / 22%);
}

.cp-table-ledger h4 {
  margin: 0 0 11px;
  color: var(--gold-leaf);
  font-size: 0.51rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cp-message-log,
.cp-count-log {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-message-log li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #cdb996;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.69rem;
  line-height: 1.35;
}

.cp-message-log li.is-important {
  color: #f1dcad;
}

.cp-log-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: #c79642;
  box-shadow: 0 0 4px rgb(222 178 79 / 38%);
}

.cp-count-log li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(230 192 106 / 10%);
  color: #d5c19d;
}

.cp-count-log li > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.cp-count-log li > span strong {
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-count-log li small {
  overflow: hidden;
  color: #a99574;
  font-size: 0.49rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-count-log li > strong {
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

/* =========================================================
 * THE RULE BOOK
 * Permanent table authority and concise rules reference
 * ========================================================= */

.cp-header-reference {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.cp-rule-book-button {
  display: inline-flex;
  min-width: 214px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 12px 4px;
  cursor: pointer;
  border: 1px solid #d8aa55;
  border-radius: 8px;
  color: #f4d98c;
  background:
    repeating-linear-gradient(
      91deg,
      rgb(255 222 160 / 5%) 0,
      rgb(255 222 160 / 5%) 1px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(
      180deg,
      #8e4b2f 0%,
      #642b20 48%,
      #451712 100%
    );
  box-shadow:
    inset 0 2px 0
      rgb(255 225 171 / 23%),
    inset 0 -3px 0
      rgb(28 5 3 / 55%),
    0 3px 0 #2c0d09,
    0 6px 10px
      rgb(0 0 0 / 28%);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-shadow:
    0 1px 1px #250704;
  transition:
    transform 100ms ease,
    box-shadow 100ms ease,
    filter 100ms ease;
}

.cp-rule-book-button:hover {
  filter: brightness(1.08);
}

.cp-rule-book-button:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 5px
      rgb(20 4 2 / 48%),
    inset 0 -1px 0
      rgb(255 225 171 / 14%),
    0 1px 0 #2c0d09;
}

.cp-rule-book-button__label {
  white-space: nowrap;
}

.cp-rule-book-button__troll {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  overflow: visible;
  color: #2a0b07;
  filter:
    drop-shadow(
      0 1px 0
      rgb(238 195 103 / 35%)
    )
    drop-shadow(
      0 -1px 0
      rgb(19 3 2 / 58%)
    );
}

.cp-rule-book-button__troll
.corner-troll__stone {
  fill:
    rgb(45 14 9 / 72%);
  stroke: #d0a052;
  stroke-width: 1.35;
}

.cp-rule-book-button__troll
.corner-troll__carve {
  fill: none;
  stroke: #d6aa5d;
  stroke-width: 1.45;
}

.cp-rule-book-button__troll
.corner-troll__detail {
  stroke-width: 1.15;
}

.cp-rule-book-button__troll
.corner-troll__eye {
  fill: #e5bd67;
}

.cp-rule-book-button__troll--left {
  transform: rotate(-7deg);
}

.cp-rule-book-button__troll--right {
  transform:
    scaleX(-1)
    rotate(-7deg);
}

/*
 * The fixed backdrop remains inside the UI component
 * but covers the viewport while the reference is open.
 */
.cp-rule-book-backdrop {
  display: grid;
  position: fixed;
  z-index: 10000;
  inset: 0;
  place-items: center;
  padding:
    clamp(12px, 3vw, 32px);
  background:
    rgb(13 4 3 / 78%);
  backdrop-filter: blur(3px);
}

.cp-rule-book {
  display: grid;
  width: min(960px, 100%);
  max-height:
    min(88vh, 820px);
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;
  overflow: hidden;
  border:
    2px solid #c99a49;
  border-radius: 18px;
  color: #2d1a0e;
  background:
    repeating-linear-gradient(
      90deg,
      rgb(98 48 24 / 3%) 0,
      rgb(98 48 24 / 3%) 1px,
      transparent 1px,
      transparent 8px
    ),
    #f4e8c9;
  box-shadow:
    inset 0 0 0 5px
      #5d281c,
    inset 0 0 0 7px
      #b2763d,
    0 24px 70px
      rgb(0 0 0 / 62%);
}

.cp-rule-book__header {
  display: flex;
  align-items: center;
  justify-content:
    space-between;
  gap: 24px;
  padding:
    23px 27px 21px;
  border-bottom:
    3px double #a2763d;
  color: #f3dfad;
  background:
    repeating-linear-gradient(
      93deg,
      rgb(255 222 160 / 5%) 0,
      rgb(255 222 160 / 5%) 1px,
      transparent 1px,
      transparent 8px
    ),
    linear-gradient(
      180deg,
      #713321,
      #451612
    );
}

.cp-rule-book__header p,
.cp-rule-book__header h2,
.cp-rule-book__header span {
  margin: 0;
}

.cp-rule-book__header p {
  color: #d9b76e;
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cp-rule-book__header h2 {
  margin-block: 3px;
  color: #f6dd94;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size:
    clamp(
      1.65rem,
      4vw,
      2.45rem
    );
  font-weight: 400;
  text-shadow:
    0 2px 2px #210603;
}

.cp-rule-book__header span {
  color: #dfcda4;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 0.84rem;
}

.cp-rule-book__close {
  min-width: 82px;
  padding: 8px 13px;
  cursor: pointer;
  border:
    1px solid #d3a750;
  border-radius: 7px;
  color: #f2d98d;
  background:
    linear-gradient(
      180deg,
      #85462d,
      #4a1913
    );
  box-shadow:
    inset 0 1px
      rgb(255 225 168 / 20%),
    0 3px 0 #260906;
  font-weight: 800;
}

.cp-rule-book__close:hover {
  filter: brightness(1.09);
}

.cp-rule-book__close:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px
      rgb(20 4 2 / 45%),
    0 1px 0 #260906;
}

.cp-rule-book__body {
  display: grid;
  min-height: 0;
  grid-template-columns:
    minmax(190px, 235px)
    minmax(0, 1fr);
}

.cp-rule-book__toc {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  padding:
    21px 18px 24px 22px;
  border-right:
    1px solid #b9945b;
  background:
    rgb(112 67 31 / 8%);
}

.cp-rule-book__toc strong {
  margin-bottom: 7px;
  color: #67321f;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1rem;
}

.cp-rule-book__toc a {
  padding: 7px 8px;
  border-radius: 5px;
  color: #55301d;
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.cp-rule-book__toc a:hover,
.cp-rule-book__toc a:focus-visible {
  color: #32150d;
  background:
    rgb(126 71 32 / 14%);
  outline:
    2px solid #a66f31;
  outline-offset: 1px;
}

.cp-rule-book__rules {
  min-height: 0;
  overflow-y: auto;
  padding:
    8px 29px 30px;
  scroll-behavior: smooth;
  scroll-padding-top: 12px;
}

.cp-rule-book__rules:focus-visible {
  outline:
    2px solid #a66f31;
  outline-offset: -4px;
}

.cp-rule-book__rules article {
  padding-block:
    20px 18px;
  border-bottom:
    1px solid
    rgb(111 67 32 / 22%);
  scroll-margin-top: 8px;
}

.cp-rule-book__rules
article:last-child {
  border-bottom: 0;
}

.cp-rule-book__rules h3 {
  margin: 0 0 8px;
  color: #6c301c;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.22rem;
}

.cp-rule-book__rules p,
.cp-rule-book__rules li {
  color: #2d2118;
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.94rem;
  line-height: 1.55;
}

.cp-rule-book__rules p {
  margin: 0;
}

.cp-rule-book__rules ul {
  margin: 0;
  padding-left: 21px;
}

.cp-rule-book__rules li + li {
  margin-top: 5px;
}

.cp-rule-book__footer {
  padding: 10px 24px 11px;
  border-top:
    1px solid #b98e4f;
  color: #ead5a1;
  background: #572219;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 0.76rem;
  letter-spacing: 0.025em;
  text-align: center;
}

@media (max-width: 900px) {
  .cp-play-header {
    align-items: flex-start;
  }

  .cp-card-table {
    padding-inline: 17px;
  }

  .cp-opponent-grid {
    gap: 8px;
  }

  .cp-player-rack--opponent {
    min-width: 125px;
    padding-inline: 7px;
  }

  .cp-player-rack--opponent header {
    display: grid;
  }

  .cp-table-center {
    grid-template-columns:
      minmax(150px, 190px)
      112px
      92px
      112px;
    gap: 12px;
  }

  .cp-muggins-complaint {
    grid-template-columns:
      auto
      82px
      minmax(145px, 1fr)
      auto
      auto;
    padding-inline: 18px;
  }

  .cp-muggins-complaint .cp-primary-action,
  .cp-muggins-complaint .cp-secondary-action {
    min-width: 116px;
    padding-inline: 12px;
  }
}

@media (max-width: 700px) {
  .cp-play-console {
    margin-inline: 0;
    border-radius: 18px;
  }

  .cp-play-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 23px 20px 18px;
  }

  .cp-intelligence-label {
    text-align: left;
  }

  .cp-live-scores {
    justify-content: flex-start;
  }

  .cp-score-chip {
    min-width: 70px;
  }

  .cp-card-table {
    min-height: 510px;
    margin-inline: 10px;
    padding: 20px 11px 22px;
    border-radius: 32px;
  }

  .cp-card-table::before {
    inset: 12px;
    border-radius: 23px;
  }

  .cp-opponent-grid {
    align-items: stretch;
  }

  .cp-player-rack--opponent {
    min-width: 0;
    flex: 1 1 0;
  }

  .cp-player-rack--opponent header strong {
    font-size: 0.58rem;
  }

  .cp-opponent-hand {
    min-height: 49px;
    padding-left: 19px;
  }

  .cp-opponent-hand .cp-playing-card {
    margin-left: -19px;
  }

  .cp-card-mini {
    width: 34px;
    height: 48px;
  }

  .cp-card-mini .cp-card-suit {
    font-size: 1rem;
  }

  .cp-card-mini .cp-card-corner strong {
    font-size: 0.48rem;
  }

  .cp-card-mini .cp-card-corner i {
    font-size: 0.58rem;
  }

  .cp-table-center {
    grid-template-columns: 88px 78px 88px;
    gap: 10px;
  }

  .cp-felt-narration {
    min-height: 62px;
    grid-column: 1 / -1;
    padding: 9px 12px;
    text-align: center;
  }

  .cp-felt-narration > span {
    display: none;
  }
  
  /*
   * Ordinary Live Play headings remain hidden on narrow
   * screens, but an opponent's active declaration heading
   * is evidence and must remain visible.
   */
  .cp-felt-narration:has(.cp-declaration-audit) > span {
    display: block;
    text-align: left;
  }  

  .cp-felt-narration ol {
    gap: 3px;
  }

  .cp-felt-narration li {
    font-size: 0.55rem;
  }

  .cp-felt-narration li.is-current {
    font-size: 0.62rem;
  }
  
  .cp-declaration-audit {
    max-height: 96px;
    text-align: left;
  }
  
  .cp-declaration-audit li {
    font-size: 0.56rem;
  }
  
  .cp-declaration-audit > strong {
    font-size: 0.5rem;
  }  

  .cp-single-card-slot,
  .cp-crib-stack {
    width: 78px;
    height: 101px;
  }

  .cp-single-card-slot .cp-playing-card {
    width: 57px;
    height: 82px;
  }

  .cp-count-dial {
    width: 76px;
    height: 76px;
  }

  .cp-count-dial strong {
    font-size: 1.55rem;
  }

  .cp-playing-card {
    width: 56px;
    height: 82px;
    border-radius: 7px;
  }

  .cp-card-corner {
    left: 5px;
  }

  .cp-card-corner--top {
    top: 5px;
  }

  .cp-card-corner--bottom {
    right: 5px;
    bottom: 5px;
    left: auto;
  }

  .cp-card-corner strong {
    font-size: 0.72rem;
  }

  .cp-card-corner i {
    font-size: 0.82rem;
  }

  .cp-card-suit {
    font-size: 1.9rem;
  }

  .cp-player-rack--human {
    min-height: 128px;
    padding-inline: 8px;
  }

  .cp-human-hand {
    min-height: 93px;
    gap: 4px;
  }

  .cp-action-rail {
    display: grid;
    grid-template-columns: 1fr;
    margin-inline: 20px;
  }

  .cp-action-controls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .cp-action-controls > .cp-primary-action,
  .cp-action-controls > .cp-muggins-action {
    width: auto;
    min-width: 135px;
    flex: 1 1 135px;
  }

  .cp-rule-vote {
    width: 100%;
  }

  .cp-rule-vote .cp-primary-action,
  .cp-rule-vote .cp-secondary-action {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }

  .cp-score-declaration {
    display: grid;
    width: 100%;
    grid-template-columns: auto minmax(135px, 1fr);
    border-radius: 14px;
    padding: 8px 8px 8px 12px;
  }

  .cp-score-declaration .cp-primary-action {
    width: 100%;
  }

  .cp-muggins-complaint {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: end;
  }

  .cp-muggins-complaint > strong,
  .cp-muggins-reason {
    grid-column: 1 / -1;
  }

  .cp-muggins-complaint > strong {
    text-align: center;
    transform: none;
  }

  .cp-muggins-complaint .cp-primary-action,
  .cp-muggins-complaint .cp-secondary-action {
    width: 100%;
    min-width: 0;
  }

  .cp-scorecard {
    margin-inline: 20px;
  }

  .cp-scorecard .cp-count-log {
    grid-template-columns: 1fr;
  }
  
  .cp-referee-bench__summary,
  .cp-referee-bench__audit {
    grid-template-columns: 1fr;
  }
  
  .cp-referee-bench__audit {
    max-height: 180px;
  }
  
  .cp-referee-bench__summary span {
    text-align: left;
  }
  
  .cp-referee-bench__judgment {
    font-size: 0.68rem;
  }

  .cp-table-ledger {
    grid-template-columns: 1fr;
    padding-inline: 20px;
  }
}

@media (max-width: 470px) {
  .cp-play-header {
    padding-inline: 16px;
  }

  .cp-live-scores {
    gap: 5px;
  }

  .cp-score-chip {
    min-width: 62px;
    min-height: 48px;
    padding-inline: 7px;
  }

  .cp-card-table {
    margin-inline: 5px;
    padding-inline: 8px;
  }

  .cp-player-rack--opponent {
    padding-inline: 4px;
  }

  .cp-player-rack--opponent header {
    gap: 3px;
  }

  .cp-table-badge {
    padding-inline: 4px;
    font-size: 0.36rem;
  }

  .cp-playing-card {
    width: 47px;
    height: 70px;
  }

  .cp-human-hand {
    gap: 2px;
  }

  .cp-player-rack--human {
    min-height: 112px;
    padding-inline: 4px;
  }

  .cp-card-suit {
    font-size: 1.55rem;
  }

  .cp-action-rail,
  .cp-scorecard {
    margin-inline: 16px;
  }

  .cp-rule-vote,
  .cp-action-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cp-action-controls > .cp-primary-action,
  .cp-action-controls > .cp-muggins-action,
  .cp-rule-vote .cp-primary-action,
  .cp-rule-vote .cp-secondary-action {
    width: 100%;
  }

  .cp-score-declaration {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .cp-muggins-complaint {
    grid-template-columns: 1fr;
  }

  .cp-muggins-complaint > strong,
  .cp-muggins-complaint label,
  .cp-muggins-complaint .cp-primary-action,
  .cp-muggins-complaint .cp-secondary-action {
    grid-column: 1;
  }
}

/* =========================================================
 * THE RULE BOOK — RESPONSIVE LAYOUT
 * ========================================================= */

@media (max-width: 700px) {
  .cp-header-reference {
    justify-self: center;
    justify-items: center;
  }

  .cp-intelligence-label {
    text-align: center;
  }

  .cp-rule-book-backdrop {
    place-items: stretch;
    padding: 8px;
  }

  .cp-rule-book {
    width: 100%;
    max-height:
      calc(100vh - 16px);
    border-radius: 13px;
  }

  .cp-rule-book__header {
    padding:
      18px 18px 16px;
  }

  .cp-rule-book__body {
    grid-template-columns: 1fr;
    grid-template-rows:
      auto
      minmax(0, 1fr);
  }

  .cp-rule-book__toc {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
    max-height: 166px;
    gap: 2px 6px;
    padding: 13px 14px;
    border-right: 0;
    border-bottom:
      1px solid #b9945b;
  }

  .cp-rule-book__toc strong {
    grid-column: 1 / -1;
    margin-bottom: 3px;
  }

  .cp-rule-book__toc a {
    padding: 5px 6px;
    font-size: 0.69rem;
  }

  .cp-rule-book__rules {
    padding:
      3px 20px 24px;
  }
}

@media (max-width: 470px) {
  .cp-rule-book-button {
    min-width: 204px;
  }

  .cp-rule-book-button__troll {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .cp-rule-book__header {
    gap: 12px;
    padding:
      15px 14px 13px;
  }

  .cp-rule-book__header span {
    display: none;
  }

  .cp-rule-book__close {
    min-width: 68px;
    padding-inline: 9px;
  }

  .cp-rule-book__toc {
    max-height: 145px;
    padding: 10px;
  }

  .cp-rule-book__toc a {
    font-size: 0.64rem;
  }

  .cp-rule-book__rules {
    padding-inline: 16px;
  }

  .cp-rule-book__rules article {
    padding-block:
      16px 14px;
  }

  .cp-rule-book__rules p,
  .cp-rule-book__rules li {
    font-size: 0.88rem;
  }

  .cp-rule-book__footer {
    padding-inline: 12px;
    font-size: 0.69rem;
  }
}

/* =========================================================
 * MULTIPLAYER TABLE ENTRY
 * ========================================================= */

.cp-table-entry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.cp-table-entry-actions > button {
  white-space: nowrap;
}

/* =========================================================
 * MULTIPLAYER LOBBY
 * ========================================================= */

.cp-online-console {
  position: relative;
  margin: 0 3px 30px;
  padding: 23px 25px 25px;
  overflow: hidden;
  border: 1px solid #d2a552;
  border-radius: 22px;
  color: var(--cream);
  background:
    repeating-linear-gradient(
      93deg,
      rgb(255 219 158 / 3%) 0,
      rgb(255 219 158 / 3%) 1px,
      transparent 1px,
      transparent 9px
    ),
    linear-gradient(
      180deg,
      #713326,
      #441914
    );
  box-shadow:
    inset 0 0 0 4px #2e0d0a,
    inset 0 0 0 6px
      rgb(188 112 62 / 70%),
    0 13px 25px
      rgb(0 0 0 / 29%);
}

.cp-online-console[hidden] {
  display: none;
}

.cp-online-console::before {
  position: absolute;
  inset: 10px;
  border:
    1px solid
    rgb(238 196 105 / 20%);
  border-radius: 14px;
  content: "";
  pointer-events: none;
}

.cp-online-header,
.cp-online-body,
.cp-online-feedback {
  position: relative;
  z-index: 1;
}

.cp-online-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 2px 17px;
  border-bottom:
    1px solid
    rgb(234 197 116 / 24%);
}

.cp-online-header > div > p {
  margin: 0 0 5px;
  color: var(--gold-bright);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.cp-online-header h3 {
  margin: 0;
  color: var(--gold-leaf-light);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size:
    clamp(
      1.3rem,
      2.5vw,
      1.85rem
    );
  font-weight: 400;
  text-shadow:
    0 1px 0
      var(--gold-leaf-shadow);
}

.cp-online-body {
  padding-top: 19px;
}

/* =========================================================
 * MULTIPLAYER FEEDBACK
 * ========================================================= */

.cp-online-feedback {
  margin: 15px 0 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 0.84rem;
  line-height: 1.4;
}

.cp-online-feedback.is-error {
  border-color:
    rgb(237 110 95 / 48%);
  color: #ffdfd8;
  background:
    rgb(126 40 33 / 37%);
}

.cp-online-feedback.is-notice {
  border-color:
    rgb(111 192 140 / 43%);
  color: #e0f2db;
  background:
    rgb(37 102 64 / 36%);
}

/* =========================================================
 * HOST AND JOIN FORMS
 * ========================================================= */

.cp-online-form {
  display: grid;
  max-width: 580px;
  gap: 9px;
}

.cp-online-form label {
  margin-top: 5px;
  color: var(--gold-bright);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.045em;
}

.cp-online-form input,
.cp-online-chat-form input {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border:
    1px solid
    rgb(223 188 119 / 43%);
  border-radius: 8px;
  color: var(--cream);
  background:
    rgb(25 8 6 / 47%);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.9rem;
}

.cp-online-form input::placeholder,
.cp-online-chat-form input::placeholder {
  color:
    rgb(216 194 154 / 59%);
}

.cp-online-form input:focus-visible,
.cp-online-chat-form input:focus-visible,
.cp-online-console button:focus-visible {
  outline:
    2px solid
    var(--gold-leaf-light);
  outline-offset: 3px;
}

.cp-online-code-input {
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cp-online-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* =========================================================
 * TABLE CODE AND STATUS
 * ========================================================= */

.cp-online-table-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border:
    1px solid
    rgb(225 184 103 / 33%);
  border-radius: 12px;
  background:
    rgb(30 8 6 / 34%);
}

.cp-online-table-summary > div {
  display: grid;
  gap: 4px;
}

.cp-online-table-summary > div > span {
  color: #d5bd96;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cp-online-table-summary > div > strong {
  color: var(--gold-leaf-light);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.58rem;
  letter-spacing: 0.18em;
  text-shadow:
    0 1px 0
      var(--gold-leaf-shadow);
}

.cp-online-status {
  margin: 15px 1px 16px;
  color: #ead6b6;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* =========================================================
 * TABLE SEATS
 * ========================================================= */

.cp-online-seats {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 12px;
}

.cp-online-seat {
  display: grid;
  gap: 5px;
  min-height: 91px;
  padding: 12px 13px;
  border:
    1px solid
    rgb(223 184 112 / 30%);
  border-radius: 11px;
  background:
    rgb(34 10 8 / 34%);
}

.cp-online-seat.is-occupied {
  border-color:
    rgb(120 196 145 / 38%);
  background:
    rgb(27 77 51 / 29%);
}

.cp-online-seat.is-empty {
  border-style: dashed;
}

.cp-online-seat > span,
.cp-online-seat > small {
  color: #d2bd9a;
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.64rem;
}

.cp-online-seat > span {
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cp-online-seat > strong {
  overflow: hidden;
  color: var(--gold-leaf-light);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
 * HOST APPROVAL REQUESTS
 * ========================================================= */

.cp-online-requests {
  margin-top: 20px;
}

.cp-online-requests > h4,
.cp-online-chat-header > h4 {
  margin: 0;
  color: var(--gold-leaf-light);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1.05rem;
  font-weight: 400;
}

.cp-online-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding: 12px;
  border:
    1px solid
    rgb(229 187 102 / 31%);
  border-radius: 10px;
  background:
    rgb(40 13 9 / 36%);
}

.cp-online-request > div:first-child {
  display: grid;
  gap: 3px;
}

.cp-online-request > div:first-child > strong {
  color: var(--gold-leaf-light);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 0.96rem;
}

.cp-online-request > div:first-child > span {
  color: #dec9a7;
  font-size: 0.72rem;
}

.cp-online-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =========================================================
 * PRIVATE TABLE CHAT
 * ========================================================= */

.cp-online-chat {
  margin-top: 22px;
  padding-top: 18px;
  border-top:
    1px solid
    rgb(230 187 107 / 25%);
}

.cp-online-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.cp-online-chat-header > span {
  color: #cbb693;
  font-size: 0.68rem;
}

.cp-online-chat-messages {
  display: grid;
  max-height: 250px;
  gap: 9px;
  overflow-y: auto;
  margin: 0 0 12px;
  padding: 11px;
  border:
    1px solid
    rgb(221 186 115 / 23%);
  border-radius: 10px;
  background:
    rgb(20 8 6 / 37%);
  list-style: none;
  scrollbar-color:
    #9f7a3e
    rgb(25 9 7 / 72%);
  scrollbar-width: thin;
}

.cp-online-chat-empty {
  color: #cbb693;
  font-size: 0.82rem;
  font-style: italic;
}

.cp-online-chat-message {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-left:
    2px solid
    rgb(229 186 101 / 48%);
  border-radius: 0 7px 7px 0;
  background:
    rgb(255 236 197 / 5%);
}

.cp-online-chat-message.is-own {
  border-left-color:
    rgb(101 191 137 / 75%);
  background:
    rgb(57 116 77 / 15%);
}

.cp-online-chat-message.is-system {
  border-left-color:
    rgb(231 184 88 / 77%);
  background:
    rgb(135 96 36 / 17%);
}

.cp-online-chat-message > strong {
  color: var(--gold-leaf-light);
  font-size: 0.73rem;
}

.cp-online-chat-message > span {
  color: #eee0c5;
  font-size: 0.84rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.cp-online-chat-form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 9px;
}

.cp-online-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
 * MULTIPLAYER RESPONSIVE LAYOUT
 * ========================================================= */

@media (max-width: 700px) {
  .cp-table-entry-actions {
    width: 100%;
    justify-content: center;
  }

  .cp-online-console {
    margin-inline: 0;
    padding: 19px 17px 20px;
    border-radius: 16px;
  }

  .cp-online-header {
    align-items: flex-start;
    gap: 12px;
  }

  .cp-online-form {
    max-width: none;
  }

  .cp-online-request {
    align-items: stretch;
    flex-direction: column;
  }

  .cp-online-request-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 470px) {
  .cp-table-entry-actions {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .cp-table-entry-actions >
  .cp-primary-action {
    grid-column: 1 / -1;
  }

  .cp-table-entry-actions > button {
    width: 100%;
  }

  .cp-online-console {
    padding: 17px 13px 18px;
  }

  .cp-online-header h3 {
    font-size: 1.2rem;
  }

  .cp-online-table-summary {
    gap: 9px;
    padding: 11px;
  }

  .cp-online-table-summary >
  div > strong {
    font-size: 1.3rem;
  }

  .cp-online-seats {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .cp-online-form-actions,
  .cp-online-request-actions {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .cp-online-form-actions > button,
  .cp-online-request-actions > button {
    width: 100%;
  }

  .cp-online-chat-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .cp-online-chat-form {
    grid-template-columns: 1fr;
  }

  .cp-online-chat-form >
  .cp-primary-action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-playing-card,
  .cp-player-rack,
  .cp-primary-action,
  .cp-secondary-action,
  .cp-muggins-action {
    transition: none;
  }

  .cp-score-declaration.is-awaiting-score {
    animation: none;
  }
}