/* /sudokuparadise.com/cribbage/css/CribbageParadise.css
   Cribbage Paradise — approved billiards-room board shell
   ------------------------------------------------------- */

:root {
  --felt: #0c4b3d;
  --felt-deep: #07362d;
  --cream: #f2e6c8;
  --cream-dim: #cdbf9d;
  --gold: #cda85a;
  --gold-bright: #ead18e;
  --gold-leaf: #e5bd64;
  --gold-leaf-light: #f6dda0;
  --gold-leaf-shadow: #6d3a18;
  --mahogany-deep: #421713;
  --mahogany: #713025;
  --mahogany-light: #98543b;
  --parchment: #ead2a6;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--felt-deep);
}

body {
  margin: 0;
  color: var(--cream);
  background: var(--felt-deep);
  font-family: Arial, Helvetica, sans-serif;
}

button {
  font: inherit;
}

.billiards-room {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(24px, 4vw, 58px);
  background:
    radial-gradient(circle at 50% 8%, rgb(67 151 119 / 24%), transparent 38rem),
    radial-gradient(circle at 8% 85%, rgb(4 24 20 / 38%), transparent 31rem),
    linear-gradient(135deg, var(--felt), var(--felt-deep));
}

.billiards-room::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  content: "";
  opacity: 0.24;
  background-image:
    repeating-radial-gradient(
      circle at 20% 30%,
      transparent 0,
      transparent 1px,
      rgb(255 255 255 / 3%) 1.5px,
      transparent 2px
    ),
    repeating-linear-gradient(
      17deg,
      rgb(255 255 255 / 1.4%) 0,
      rgb(255 255 255 / 1.4%) 1px,
      transparent 1px,
      transparent 4px
    );
  background-size: 5px 5px, 7px 7px;
}

.billiards-room::after {
  position: fixed;
  z-index: -1;
  inset: 18px;
  border: 1px solid rgb(232 206 139 / 18%);
  border-radius: 26px;
  box-shadow:
    inset 0 0 80px rgb(0 0 0 / 22%),
    0 0 0 9px rgb(31 13 7 / 18%);
  content: "";
  pointer-events: none;
}

.room-header,
.board-stage,
.room-footer {
  width: min(100%, 1240px);
  margin-inline: auto;
}

.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 18px 38px;
}

.room-kicker,
.section-kicker {
  margin: 0 0 13px;
  color: var(--gold-bright);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.room-header h1,
.stage-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1;
}

.room-header h1 {
  font-size: clamp(2.8rem, 5vw, 4.45rem);
}

.room-subtitle {
  margin: 17px 0 0;
  color: var(--cream-dim);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
}

.cp-emblem {
  display: inline-flex;
  min-width: 288px;
  min-height: 90px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 13px 28px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-bright);
  background:
    radial-gradient(circle at 25% 22%, rgb(255 255 255 / 8%), transparent 32%),
    linear-gradient(135deg, #54241a, #2d110d);
  box-shadow:
    inset 0 0 0 3px #6f4821,
    0 8px 18px rgb(0 0 0 / 28%);
}

.cp-monogram {
  padding-right: 19px;
  border-right: 1px solid rgb(229 189 100 / 48%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 700;
}

.cp-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.75rem;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.cp-emblem--compact {
  min-width: 210px;
  min-height: 66px;
  gap: 14px;
  padding: 9px 19px;
}

.cp-emblem--compact .cp-monogram {
  padding-right: 14px;
  font-size: 1.55rem;
}

.cp-emblem--compact .cp-name {
  max-width: 88px;
  font-size: 0.58rem;
}

.board-stage {
  padding: 30px 31px 23px;
  border: 1px solid rgb(232 206 139 / 12%);
  border-radius: 28px;
  background: rgb(2 31 25 / 28%);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}

.stage-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 0 3px 24px;
}

.stage-heading h2 {
  font-size: clamp(2rem, 3.5vw, 3.05rem);
}

.table-modes {
  display: flex;
  align-items: center;
  gap: 13px;
}

.table-modes > span {
  color: var(--cream-dim);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mode-buttons {
  display: flex;
  padding: 3px;
  border: 1px solid rgb(234 210 151 / 20%);
  border-radius: 999px;
  background: rgb(1 25 20 / 55%);
}

.mode-buttons button {
  min-height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  color: #bcb08f;
  background: transparent;
  cursor: default;
  font-size: 0.62rem;
  font-weight: 700;
}

.mode-buttons .is-active {
  color: #3c2816;
  background: linear-gradient(#f4d98e, #c99a46);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 58%),
    0 2px 5px rgb(0 0 0 / 35%);
}

.board-scroll {
  overflow-x: auto;
  padding: 5px 4px 14px;
  scrollbar-color: #9f7a3e rgb(3 33 27 / 70%);
  scrollbar-width: thin;
}

.cribbage-board {
  position: relative;
  min-width: 1080px;
  padding: 31px 38px 25px;
  overflow: hidden;
  border: 1px solid #d8ad5d;
  border-radius: 34px;
  color: var(--parchment);
  background:
    radial-gradient(ellipse at 50% -10%, rgb(255 201 128 / 17%), transparent 56%),
    linear-gradient(
      90deg,
      rgb(44 8 8 / 28%),
      transparent 9%,
      transparent 90%,
      rgb(44 8 8 / 28%)
    ),
    repeating-linear-gradient(
      94deg,
      rgb(255 215 151 / 4.5%) 0,
      rgb(255 215 151 / 4.5%) 1px,
      transparent 1px,
      transparent 9px
    ),
    linear-gradient(
      180deg,
      var(--mahogany-light),
      var(--mahogany) 48%,
      var(--mahogany-deep)
    );
  box-shadow:
    inset 0 0 0 5px #32100d,
    inset 0 0 0 7px #a8653d,
    inset 0 0 34px rgb(27 5 5 / 42%),
    0 20px 34px rgb(0 0 0 / 36%),
    0 4px 0 #1b0908;

  /*
   * Display the complete pegboard at half scale.
   * CSS zoom also reduces its occupied layout space.
   */    
  zoom: 0.5;
  margin-inline: auto;    
}

.cribbage-board::before {
  position: absolute;
  inset: 11px;
  border: 1px solid rgb(232 186 91 / 36%);
  border-radius: 23px;
  box-shadow: inset 0 0 0 1px rgb(74 24 17 / 70%);
  content: "";
  pointer-events: none;
}

.svg-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.corner-troll {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  color: #3b100e;
  filter:
    drop-shadow(0 1px 0 rgb(241 194 103 / 32%))
    drop-shadow(0 -1px 0 rgb(35 5 5 / 48%));
  opacity: 0.88;
  pointer-events: none;
  transform-origin: center;
}

.corner-troll__stone {
  fill: rgb(55 10 9 / 11%);
  stroke: currentcolor;
  stroke-width: 1.35px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.corner-troll__carve {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.55px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.corner-troll__detail {
  stroke-width: 1.25px;
}

.corner-troll__eye {
  fill: #2b0908;
  stroke: rgb(231 183 88 / 32%);
  stroke-width: 0.65px;
}

.corner-troll--tl {
  top: 7px;
  left: 8px;
  transform: rotate(-45deg);
}

.corner-troll--tr {
  top: 7px;
  right: 8px;
  transform: rotate(45deg);
}

.corner-troll--bl {
  bottom: 7px;
  left: 8px;
  transform: rotate(-135deg);
}

.corner-troll--br {
  right: 8px;
  bottom: 7px;
  transform: rotate(135deg);
}

.player-route {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  min-width: 0;
  padding: 10px 15px 10px 10px;
  border: 1px solid rgb(229 183 91 / 14%);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgb(255 222 166 / 8%), transparent 34%),
    rgb(46 8 8 / 10%);
  box-shadow: inset 0 1px rgb(255 218 156 / 7%);
}

.player-plate {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding-left: 5px;
}

.player-color {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 43px;
  border: 1px solid rgb(48 20 10 / 48%);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 20%), transparent 42%),
    var(--peg-color);
  box-shadow:
    inset 1px 0 rgb(255 255 255 / 35%),
    0 2px 3px rgb(62 27 10 / 30%);
}

.player-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.player-copy strong {
  overflow: hidden;
  color: #f0d6b1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.87rem;
  text-shadow: 0 1px 0 #3d130e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-copy small,
.player-copy > span {
  color: #c9aa82;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.player-copy > span {
  color: #dfc49d;
}

.route-lanes {
  display: grid;
  position: relative;
  min-width: 0;
  gap: 4px;
  padding-right: 52px;
}

.street-lane {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  align-items: end;
  min-width: 0;
  min-height: 43px;
}

.lane-end {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}

.end-label {
  color: var(--gold-leaf);
  font-size: 0.47rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 var(--gold-leaf-shadow);
  text-transform: uppercase;
}

.parking-holes {
  display: flex;
  gap: 7px;
}

.street-run {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.street-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 5px;
  color: #d5af68;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.street-caption strong {
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 var(--gold-leaf-shadow);
}

.street-lane--return .street-caption {
  flex-direction: row-reverse;
}

.hole-track {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(5px, 0.7vw, 11px);
}

.five-group {
  display: flex;
  min-width: 0;
  justify-content: space-around;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid rgb(229 183 91 / 14%);
  border-radius: 999px;
  background: rgb(30 4 4 / 14%);
}

.street-median {
  height: 1px;
  margin-left: 70px;
  border-top: 1px dashed rgb(229 183 91 / 34%);
}

.turnaround {
  display: grid;
  position: absolute;
  top: 19px;
  right: 0;
  width: 43px;
  height: 72px;
  grid-template-rows: 1fr auto 1fr;
  place-items: center;
  border: 2px solid rgb(229 183 91 / 42%);
  border-left: 0;
  border-radius: 0 25px 25px 0;
  color: var(--gold-leaf);
  background: rgb(42 7 7 / 20%);
  font-size: 0.47rem;
  font-weight: 900;
  text-shadow: 0 1px 0 var(--gold-leaf-shadow);
}

.turnaround i {
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: normal;
  line-height: 0.7;
}

.board-hole {
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(229 183 91 / 64%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 45% 42%,
    #35130d 0 28%,
    #140504 56%,
    #5f281b 80%
  );
  box-shadow:
    inset 0 1px 2px #080202,
    0 1px rgb(255 226 169 / 42%);
}

.board-hole--game {
  width: 14px;
  height: 14px;
  border-color: var(--gold-leaf-light);
  box-shadow:
    0 0 0 3px rgb(229 183 91 / 16%),
    inset 0 1px 2px #080202,
    0 1px rgb(255 226 169 / 45%);
}

.peg {
  position: absolute;
  z-index: 3;
  bottom: 2px;
  width: 5px;
  height: 21px;
  border: 1px solid rgb(41 15 8 / 68%);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgb(0 0 0 / 28%),
      transparent 34%,
      rgb(255 255 255 / 30%) 62%,
      transparent 82%
    ),
    var(--peg-color);
  box-shadow:
    0 4px 4px rgb(38 10 7 / 48%),
    inset 0 1px rgb(255 255 255 / 45%);
  transform: translateY(-3px);
}

.peg::before,
.peg::after {
  position: absolute;
  left: 50%;
  border: 1px solid rgb(41 15 8 / 68%);
  content: "";
  transform: translateX(-50%);
}

.peg::before {
  z-index: 2;
  top: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgb(255 255 255 / 58%), transparent 21%),
    radial-gradient(ellipse at 52% 68%, transparent 42%, rgb(0 0 0 / 18%) 78%),
    var(--peg-color);
  box-shadow:
    0 2px 2px rgb(35 9 6 / 45%),
    inset 0 -1px rgb(0 0 0 / 18%);
}

.peg::after {
  z-index: 3;
  top: 0;
  width: 9px;
  height: 3px;
  border-radius: 50%;
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 38%),
      transparent 45%,
      rgb(0 0 0 / 22%)
    ),
    var(--peg-color);
  box-shadow: 0 1px 1px rgb(35 9 6 / 38%);
}

.board-hole--previous .peg {
  height: 16px;
  filter: saturate(0.82) brightness(0.92);
  transform: translateY(-2px);
}

.board-panel {
  display: grid;
  position: relative;
  z-index: 1;
  min-height: 145px;
  grid-template-columns: 178px minmax(0, 1fr) 178px;
  align-items: center;
  gap: 18px;
  margin: 14px 15px;
  padding: 13px 0;
  border-block: 1px solid rgb(229 189 100 / 27%);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(42 8 8 / 14%) 15%,
    rgb(42 8 8 / 14%) 85%,
    transparent
  );
}

.board-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.board-identity p {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--parchment);
}

.board-identity strong {
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.97rem;
  text-shadow:
    0 1px 0 var(--gold-leaf-shadow),
    0 -1px rgb(255 243 188 / 20%);
}

.board-identity p > span {
  color: var(--gold-leaf);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.led-key {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: #d9c09a;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.led-key i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border: 1px solid #4c2c1b;
  border-radius: 50%;
  box-shadow: inset 0 1px rgb(255 255 255 / 33%);
}

.led-key i:first-child {
  margin-left: 0;
}

.led-key--green {
  background: #45b96b;
}

.led-key--red {
  background: #bf3e35;
}

.led-key--yellow {
  background: #e0b43c;
}

.street-light {
  display: grid;
  width: 174px;
  grid-template-columns: 84px 70px;
  align-items: start;
  justify-content: center;
  gap: 9px;
  color: var(--gold-leaf);
  filter: drop-shadow(0 4px 3px rgb(65 27 10 / 26%));
}

.street-light--right {
  grid-template-columns: 70px 84px;
}

.street-light--right .traffic-labels {
  order: 2;
  text-align: left;
}

.street-light--right .traffic-standard {
  order: 1;
}

.traffic-labels {
  display: grid;
  grid-template-rows: repeat(2, 56px);
  align-items: center;
  padding-top: 10px;
  text-align: right;
}

.traffic-labels span {
  display: grid;
  line-height: 1;
  text-shadow:
    0 1px 0 var(--gold-leaf-shadow),
    0 -1px rgb(255 243 188 / 18%);
}

.traffic-labels strong {
  color: var(--gold-leaf-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
}

.traffic-labels small {
  margin-top: 3px;
  color: var(--gold-leaf);
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.traffic-standard {
  display: grid;
  justify-items: center;
  width: 70px;
}

.traffic-cap {
  position: relative;
  z-index: 2;
  width: 57px;
  height: 9px;
  margin-bottom: -2px;
  border: 1px solid #131711;
  border-radius: 50% 50% 2px 2px;
  background: linear-gradient(#5e6658, #242a22);
  box-shadow: inset 0 1px rgb(255 255 255 / 10%);
}

.traffic-housing {
  display: grid;
  position: relative;
  z-index: 1;
  width: 64px;
  gap: 3px;
  padding: 8px 7px;
  border: 2px solid #11150f;
  border-radius: 10px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 9px,
      rgb(255 255 255 / 2%) 9px,
      rgb(255 255 255 / 2%) 10px
    ),
    linear-gradient(135deg, #4b5146, #242a23 48%, #141914);
  box-shadow:
    inset 0 0 0 2px #5f6658,
    inset 0 0 13px #080b08,
    0 4px 6px rgb(57 28 12 / 30%);
}

.traffic-housing::before,
.traffic-housing::after {
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border: 1px solid #0a0d09;
  background: #343b31;
  content: "";
}

.traffic-housing::before {
  left: -5px;
}

.traffic-housing::after {
  right: -5px;
}

.traffic-lens {
  display: grid;
  position: relative;
  width: 46px;
  height: 49px;
  place-items: center;
  margin-inline: auto;
  border: 2px solid #0d100c;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 57%, #10150f 0 48%, #050705 72%);
  box-shadow:
    inset 0 0 0 2px #4a5045,
    inset 0 -3px 8px #000;
}

.lens-hood {
  position: absolute;
  z-index: 2;
  top: -6px;
  left: 50%;
  width: 49px;
  height: 23px;
  transform: translateX(-50%);
  border: 2px solid #11150f;
  border-bottom: 0;
  border-radius: 25px 25px 7px 7px;
  background: linear-gradient(180deg, #53594d, #282e27);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 3px 3px rgb(0 0 0 / 35%);
  clip-path: polygon(0 0, 100% 0, 86% 72%, 14% 72%);
}

.signal-bulbs {
  display: grid;
  position: relative;
  z-index: 3;
  grid-template-columns: repeat(2, 9px);
  grid-auto-rows: 9px;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}

.signal-bulbs i {
  width: 9px;
  height: 9px;
  border: 1px solid #34120d;
  border-radius: 50%;
  background: #bf3e35;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 30%),
    0 0 3px rgb(122 21 18 / 38%);
}

.signal-bulbs .is-active {
  background: #45b96b;
  box-shadow:
    0 0 6px 1px #45b96b,
    inset 0 1px rgb(255 255 255 / 55%);
}

.signal-bulbs .is-risk {
  background: #e0b43c;
  box-shadow:
    0 0 7px 1px #e0b43c,
    inset 0 1px rgb(255 255 255 / 60%);
}

.lamp-post {
  width: 7px;
  height: 19px;
  border-inline: 1px solid #171c15;
  background: linear-gradient(90deg, #22291f, #606857 48%, #1a2018);
}

.lamp-foot {
  width: 41px;
  height: 6px;
  margin-top: -1px;
  border: 1px solid #171b15;
  border-radius: 50% 50% 2px 2px;
  background: linear-gradient(#596051, #242a22);
}

.board-footer {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 21px 17px 0;
  padding-top: 14px;
  border-top: 1px solid rgb(229 183 91 / 24%);
  color: var(--parchment);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.69rem;
  font-style: italic;
}

.board-footer strong {
  flex: 0 0 auto;
  color: var(--gold-leaf-light);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 0 var(--gold-leaf-shadow);
  text-transform: uppercase;
}

.build-note {
  margin: 0;
  padding: 2px 7px 0;
  color: var(--cream-dim);
  font-size: 0.82rem;
  line-height: 1.55;
}

.build-note strong {
  color: #f1dfb4;
}

.room-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 20px 2px;
  color: #9eac98;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-style: italic;
}

.room-footer span:first-child {
  color: #d7c699;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================
 * PARADISE GAME ROOMS NAVIGATOR
 * Existing CP badge becomes the franchise doorway.
 * ========================================================= */

.cp-franchise-nav {
  position: relative;
  z-index: 100;
  flex: 0 0 auto;
}

button.cp-franchise-toggle {
  appearance: none;
  position: relative;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
  transition:
    transform 120ms ease,
    filter 120ms ease,
    box-shadow 120ms ease;
}

button.cp-franchise-toggle:hover {
  filter: brightness(1.08);
}

button.cp-franchise-toggle:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 5px
      rgb(20 4 2 / 42%),
    inset 0 0 0 3px
      #6f4821,
    0 4px 9px
      rgb(0 0 0 / 25%);
}

button.cp-franchise-toggle:focus-visible,
.cp-franchise-menu a:focus-visible {
  outline:
    2px solid
    var(--gold-bright);
  outline-offset: 4px;
}

.cp-franchise-chevron {
  margin-left: -5px;
  color: var(--gold);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.9rem;
  line-height: 1;
  transition:
    transform 150ms ease;
}

.cp-franchise-nav.is-open
.cp-franchise-chevron {
  transform: rotate(180deg);
}

.cp-franchise-menu {
  position: absolute;
  z-index: 500;
  top: calc(100% + 13px);
  right: 10px;
  width: min(290px, 82vw);
  padding: 9px;
  border:
    1px solid var(--gold);
  border-radius: 15px;
  color: var(--cream);
  background:
    repeating-linear-gradient(
      93deg,
      rgb(255 219 158 / 3%) 0,
      rgb(255 219 158 / 3%) 1px,
      transparent 1px,
      transparent 8px
    ),
    linear-gradient(
      180deg,
      #54241a,
      #2d110d
    );
  box-shadow:
    inset 0 0 0 3px
      #6f4821,
    0 14px 28px
      rgb(0 0 0 / 42%);
}

.cp-franchise-menu[hidden] {
  display: none;
}

.cp-franchise-menu::before {
  position: absolute;
  top: -8px;
  right: 42px;
  width: 14px;
  height: 14px;
  border-top:
    1px solid var(--gold);
  border-left:
    1px solid var(--gold);
  background: #54241a;
  content: "";
  transform: rotate(45deg);
}

.cp-franchise-menu p {
  margin: 0;
  padding: 7px 10px 8px;
  color: var(--gold-bright);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cp-franchise-menu a {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border:
    1px solid transparent;
  border-radius: 9px;
  color: var(--cream);
  text-decoration: none;
}

.cp-franchise-menu a + a {
  margin-top: 4px;
}

.cp-franchise-menu a:hover,
.cp-franchise-menu a:focus-visible {
  border-color:
    rgb(226 183 90 / 28%);
  background:
    rgb(255 230 173 / 8%);
}

.cp-franchise-menu strong {
  color: var(--gold-bright);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 1rem;
  font-weight: 700;
}

.cp-franchise-menu a span {
  color: var(--cream-dim);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 0.72rem;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .billiards-room {
    padding: 25px 14px;
  }

  .room-header {
    align-items: flex-start;
    padding-inline: 8px;
  }

  .room-header > .cp-emblem {
    min-width: 96px;
    min-height: 62px;
    padding: 10px 14px;
  }

  .room-header > .cp-emblem .cp-monogram {
    padding-right: 0;
    border-right: 0;
  }

  .room-header > .cp-emblem .cp-name {
    display: none;
  }

  .stage-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .board-stage {
    padding: 20px 12px;
    border-radius: 20px;
  }

  .board-scroll {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .table-modes {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
  }

  .mode-buttons {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .room-header h1 {
    font-size: 2.55rem;
  }

  .room-subtitle {
    font-size: 0.9rem;
  }

  .room-footer {
    flex-direction: column;
    gap: 8px;
  }

  .room-footer span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cribbage-board {
    animation: board-arrive 520ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }

  @keyframes board-arrive {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 900px) {
  .room-header
  > .cp-franchise-nav
  > .cp-emblem {
    min-width: 96px;
    min-height: 62px;
    padding: 10px 14px;
  }

  .room-header
  > .cp-franchise-nav
  > .cp-emblem
  .cp-monogram {
    padding-right: 0;
    border-right: 0;
  }

  .room-header
  > .cp-franchise-nav
  > .cp-emblem
  .cp-name {
    display: none;
  }

  .cp-franchise-chevron {
    margin-left: -10px;
  }

  .cp-franchise-menu {
    right: 0;
  }
}

@media (max-width: 560px) {
  .cp-franchise-menu {
    position: fixed;
    top: 92px;
    right: 14px;
    left: 14px;
    width: auto;
  }

  .cp-franchise-menu::before {
    display: none;
  }

  .cp-franchise-menu a {
    min-height: 58px;
    justify-content: center;
  }
}