/* Shared playing-card kit. */
:is(.bj-vibe, .ce-vibe, .uno-vibe) .game-stage {
  padding: 12px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0%, #e8be7226, transparent 65%), #10291f;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-table {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 820px);
  min-height: 610px;
  padding: clamp(16px, 4vw, 36px);
  border: 2px solid #d2aa6255;
  border-radius: 28px;
  color: #f9f2df;
  background: radial-gradient(ellipse at 50% 36%, #245742 0%, #173e32 48%, #09291f 100%);
  box-shadow: inset 0 0 0 6px #ffffff0b, inset 0 0 70px #02160e99, 0 24px 45px #0004;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-table::before {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: -1;
  inset: 12px;
  border: 1px solid #d2aa6250;
  border-radius: 19px;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-table-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  border-bottom: 1px solid #ebdbaf35;
  padding-bottom: 13px;
  margin-bottom: 18px;
  color: #f3d998;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-table-heading strong {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .13em;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: #edd39e;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 124px;
  overflow-x: auto;
  padding: 6px 3px 12px;
  scrollbar-color: #d9ba76a1 transparent;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 116px;
  padding: 0;
  border: 2px solid #fffdf3;
  border-radius: 9px;
  background: linear-gradient(145deg, #fffdf8, #e6e3d9);
  color: #172b36;
  box-shadow: 1px 3px 0 #a8a697, 2px 7px 12px #04170f80;
  font-variant-numeric: tabular-nums;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card--red { color: #b42337; }

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card--back {
  border: 5px solid #fffdf3;
  background:
    repeating-linear-gradient(45deg, #ffffff20 0 2px, transparent 2px 8px),
    linear-gradient(140deg, #304e83, #172b57);
  color: #f5d896;
  outline: 1px solid #c99e6680;
  outline-offset: -11px;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card-back-mark {
  font-size: 2.7rem;
  text-shadow: 0 0 12px #fff9;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card-corner {
  position: absolute;
  top: 7px;
  left: 8px;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card-center {
  font-size: 3.8rem;
  line-height: 1;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card--button {
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card--button:not(:disabled):hover {
  transform: translateY(-9px);
  box-shadow: 1px 3px 0 #a8a697, 2px 15px 18px #04170f99;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card--button:disabled {
  cursor: not-allowed;
  opacity: .64;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card--button:not(:disabled) {
  border-color: #f6cb7b;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 8px;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-button {
  min-width: 105px;
  min-height: 48px;
  border: 1px solid #f7db9c;
  border-radius: 12px;
  padding: 10px 17px;
  background: linear-gradient(#ffe3aa, #dcb66e);
  color: #202619;
  font-size: .94rem;
  font-weight: 800;
  box-shadow: 0 4px 0 #6e4e27;
  transition: transform .12s ease, box-shadow .12s ease;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-button--quiet {
  color: #fff4d9;
  background: #ffffff19;
  border-color: #ffe3aa78;
  box-shadow: 0 4px 0 #0a241f;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-button:hover {
  transform: translateY(-2px);
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-button:active {
  transform: translateY(3px);
  box-shadow: none;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) :is(.cg-button, .cg-card--button, .reset-btn, .back-btn):focus-visible {
  outline: 3px solid #ffe18f;
  outline-offset: 4px;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-message {
  min-height: 1.5em;
  margin: 6px 0;
  color: #fff0c6;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 800;
  text-align: center;
}

:is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-rules {
  max-width: 550px;
  margin: 18px auto 0;
  color: #dbebddba;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
}

.bj-seat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 7px;
}

.bj-seat h2, .ce-table h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: .03em;
}

.bj-seat-head > span {
  border: 1px solid #f5d89275;
  border-radius: 40px;
  padding: 3px 12px;
  color: #f5d892;
  font-size: .87rem;
  font-weight: 800;
}

.bj-center {
  padding: 10px 0 14px;
  text-align: center;
  border-top: 1px solid #e6cd9540;
  border-bottom: 1px solid #e6cd9540;
  margin: 7px 0 16px;
}

.bj-round {
  color: #e0d3b4;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.bj-message[data-result="win"] { color: #c5f7b5; }
.bj-message[data-result="loss"] { color: #ffd1c0; }
.bj-record {
  padding-top: 12px;
  border-top: 1px solid #e6cd9540;
  color: #e9d2a3;
  font-size: .81rem;
  font-weight: 700;
  text-align: center;
}

.ce-table { min-height: 640px; }

.ce-curtain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 470px;
  gap: 18px;
  text-align: center;
}

.ce-curtain h3 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: #f5dcaa;
}

.ce-curtain-icon {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border: 2px solid #e9cc90;
  border-radius: 22px;
  background: repeating-linear-gradient(45deg, #ffffff13 0 2px, transparent 2px 9px), #264778;
  box-shadow: 0 10px 25px #04170f9c;
  color: #f5dcaa;
  font-size: 3rem;
}

.ce-curtain-instructions {
  max-width: 360px;
  margin: 0;
  color: #f1ead6;
  line-height: 1.5;
}

.ce-opponent, .ce-hand { min-width: 0; }
.ce-opponent .cg-card-row { min-height: 75px; overflow: hidden; padding-bottom: 6px; }
.ce-opponent .cg-card {
  width: 45px;
  height: 63px;
  margin-right: -25px;
}
.ce-opponent .cg-card-back-mark { font-size: 1.3rem; }
.ce-opponent .cg-card:last-child { margin-right: 0; }
.ce-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  border-top: 1px solid #e6cd9540;
  border-bottom: 1px solid #e6cd9540;
}
.ce-pile { display: flex; gap: 18px; padding: 4px; }
.ce-active-suit {
  margin: 0;
  color: #f9dc98;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .09em;
}
.ce-middle .cg-eyebrow { margin: 0; }
.ce-hand { padding-top: 8px; }
.ce-hand-cards { min-height: 132px; }

@media (max-width: 520px) {
  :is(.bj-vibe, .ce-vibe, .uno-vibe) .game-stage { padding: 4px; }
  :is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-table { padding: 17px 14px; border-radius: 18px; }
  :is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-table::before { inset: 7px; border-radius: 13px; }
  :is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card { width: 64px; height: 89px; }
  :is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card-row { min-height: 98px; }
  :is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card-center { font-size: 2.8rem; }
  :is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-card-corner { font-size: .95rem; }
  :is(.bj-vibe, .ce-vibe, .uno-vibe) .cg-button { min-width: 88px; padding: 9px 11px; font-size: .84rem; }
  .ce-opponent .cg-card { width: 37px; height: 54px; margin-right: -20px; }
  .ce-opponent .cg-card-row { min-height: 65px; }
  .ce-hand-cards { min-height: 100px; }
  .ce-pile { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.bj-vibe, .ce-vibe, .uno-vibe) :is(.cg-card--button, .cg-button) { transition: none; }
}

.card-room-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 600px);
  margin: 12px auto;
  padding: clamp(25px, 6vw, 56px);
  overflow: hidden;
  border: 2px solid #f5d0899c;
  border-radius: 28px;
  color: #fff5dc;
  background: radial-gradient(circle at 50% -10%, #db618c80, transparent 47%),
    radial-gradient(circle at 100% 110%, #45c4bd88, transparent 46%),
    linear-gradient(150deg, #2f244d, #132e32 70%);
  box-shadow: inset 0 0 0 6px #ffffff12, 0 24px 50px #0008;
  text-align: center;
}
.card-room-entry::before {
  position: absolute;
  inset: 12px;
  border: 1px solid #ffe8bb66;
  border-radius: 19px;
  content: '';
  pointer-events: none;
}
.card-room-entry-art {
  padding: 14px 23px;
  color: #fee3a3;
  font-size: clamp(2.7rem, 11vw, 5rem);
  letter-spacing: -.23em;
  text-shadow: 0 6px 0 #1b253a, 0 11px 20px #0009;
  transform: rotate(-8deg);
}
.card-room-entry-art i { color: #fb618c; font-style: normal; transform: translateY(-12px); display: inline-block; }
.card-room-entry h2 { margin: 0; font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1.1; }
.card-room-entry p { max-width: 360px; margin: 0 0 6px; font-weight: 650; }
.card-room-entry .card-room-entry-online {
  width: min(100%, 300px);
  min-height: 60px;
  font-size: 1.1rem;
  background: linear-gradient(125deg, #ffe7ab, #fbbb69);
  box-shadow: 0 5px 0 #4b3362, 0 10px 18px #0008;
}
.card-room-entry .card-room-entry-local { width: min(100%, 300px); }
.card-room-entry small { max-width: 350px; line-height: 1.5; color: #c9e3db; }
.card-room-entry-help { max-width: 350px; color: #c9e3db; }
.card-room-entry-help summary { cursor: pointer; font-size: .85rem; }
.card-room-entry-help summary:focus-visible { outline: 3px solid #ffe7ab; outline-offset: 4px; }
.card-room-entry-help small { display: block; margin-top: 10px; }
.card-room-entry-error { color: #ffe5a5; }

.uno-vibe .cg-table {
  border: 3px solid #dbb57b;
  background:
    radial-gradient(circle at 48% 30%, #6a539b70, transparent 52%),
    radial-gradient(circle at 10% 90%, #3fcda544, transparent 52%),
    repeating-linear-gradient(110deg, #ffffff06 0 2px, transparent 2px 10px),
    #152e3a;
  box-shadow: inset 0 0 0 7px #fee4aa14, inset 0 0 80px #071225, 0 22px 44px #0007;
}
.uno-table { min-height: 610px; }
.uno-curtain { min-height: 450px; }
.uno-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; padding-bottom: 18px; }
.uno-player {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 105px;
  padding: 9px 14px;
  border: 2px solid #d3d8eb45;
  border-radius: 16px;
  color: #faf1de;
  background: #0b1e32a8;
  box-shadow: 0 5px 0 #0718258c;
  text-align: center;
}
.uno-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.uno-player small { color: #d8d7e8; font-weight: 700; }
.uno-player--current {
  color: #fff;
  border-color: #ffe1a3;
  background: linear-gradient(120deg, #de537b8c, #5b47a3a6);
  box-shadow: 0 0 0 3px #f9d49142, 0 0 25px #f58caf80;
}
.uno-player--current::before { content: '✦ YOUR TURN' ; font-size: .58rem; letter-spacing: .15em; color: #ffdea2; font-weight: 900; }
.uno-middle {
  position: relative;
  text-align: center;
  border: 1px solid #f9d7a67a;
  border-radius: 100px;
  padding: 20px 12px 8px;
  background: radial-gradient(ellipse, #f5ac8d20, #0e23347a 70%);
  box-shadow: inset 0 0 20px #060f2080, 0 10px 15px #0004;
}
.uno-pile { display: flex; align-items: center; justify-content: center; gap: 25px; }
.uno-middle .cg-message {
  display: inline-block;
  border-radius: 30px;
  padding: 6px 16px;
  background: var(--active-color, #f3b664);
  color: #101d30;
  font-size: .82rem;
  box-shadow: 0 3px 0 #030e1e99;
}
.uno-vibe .uno-card {
  overflow: hidden;
  border: 4px solid #fff8e3;
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff50, transparent 42%),
    repeating-linear-gradient(-33deg, #ffffff14 0 4px, transparent 4px 17px),
    var(--uno-color, #272a4e);
  color: #fff;
  box-shadow: 1px 3px 0 #11202f, 2px 8px 13px #0009, inset 0 0 0 2px #111b3377;
}
.uno-vibe .uno-card--wild { background: conic-gradient(from 30deg, #e95b70, #edbc57 25%, #40bb87 50%, #508bdc 75%, #e95b70); }
.uno-vibe .uno-card.cg-card--back {
  background: conic-gradient(from 20deg at 50% 50%, #4288d6 0 25%, #3da978 25% 50%,
    #e9b34b 50% 75%, #db506b 75% 100%);
}
.uno-card-back-mark {
  display: grid;
  place-items: center;
  width: 70%;
  aspect-ratio: 1;
  border: 3px solid #ffe9b9;
  border-radius: 50%;
  background: #273451;
  color: #ffe39d;
  font-size: 2.5rem;
  box-shadow: 0 3px 12px #0008, inset 0 0 0 3px #4d4f73;
}
.uno-card-corner {
  position: absolute;
  top: 3px;
  left: 6px;
  z-index: 1;
  font-size: 1.1rem;
  font-weight: 950;
  text-shadow: 0 2px 3px #0007;
}
.uno-card-corner--bottom { inset: auto 6px 3px auto; transform: rotate(180deg); }
.uno-card-face {
  display: grid;
  place-items: center;
  width: 72%;
  height: 68%;
  border-radius: 50%;
  background: #fffdf2;
  box-shadow: 0 3px 8px #0005, inset 0 0 0 4px #ffffff5e;
  transform: rotate(-22deg);
}
.uno-card-symbol {
  color: var(--uno-color);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 1000;
  letter-spacing: -.08em;
  text-shadow: 1px 2px 0 #17223921;
  transform: rotate(22deg);
}
.uno-card--wild .uno-card-symbol { color: #273451; }
.uno-vibe .uno-card.cg-card--button:not(:disabled) { border-color: #fff7c6; }
.uno-vibe .uno-card.cg-card--button:not(:disabled):hover { transform: translateY(-13px) rotate(-3deg); }
.uno-vibe .uno-card.cg-card--button:disabled { opacity: .85; filter: brightness(.84); }
.uno-vibe .uno-color-choice {
  min-width: 74px;
  color: #fff;
  text-transform: capitalize;
  border-color: #fff8e3;
  background: var(--uno-color);
  box-shadow: 0 4px 0 #142135;
}
.uno-pile > .uno-card:last-child { animation: cg-deal .3s cubic-bezier(.2,.9,.25,1) both; }
@keyframes cg-deal { from { opacity: .5; transform: translateY(-15px) rotate(8deg) scale(.9); } }
.uno-hand { min-width: 0; padding: 14px 6px 3px; }
.uno-hand h3 { color: #fff0c6; margin: 3px 0 4px; }
.uno-hand .cg-card-row { padding-block: 10px 23px; }
.ce-vibe .cg-table {
  background: radial-gradient(ellipse at 50% 25%, #7559a980, transparent 62%),
    repeating-linear-gradient(140deg, #ffffff07 0 2px, transparent 2px 11px), #211d3c;
  border-color: #c4a6f1;
}
.ce-vibe .cg-card {
  border: 3px solid #fff4e6;
  border-radius: 13px;
  background: linear-gradient(135deg, #fff 5%, #fff7e8 55%, #e4d6ed);
  box-shadow: 0 4px 0 #786692, 2px 9px 15px #090b1cbd, inset 0 0 0 2px #9784a548;
}
.ce-vibe .cg-card--red { color: #dd3d72; }
.ce-vibe .cg-card-center { text-shadow: 2px 3px 0 #664e8238; transform: rotate(-14deg); }
.ce-vibe .cg-card-corner { text-shadow: 0 1px 0 #fff; }
.ce-vibe .cg-card--back {
  background: repeating-conic-gradient(from 45deg, #7353b6 0 25%, #503780 0 50%) 50% / 20px 20px;
  box-shadow: 0 4px 0 #38285b, 2px 9px 15px #090b1cbd, inset 0 0 0 5px #d5b7f2;
}
.ce-vibe .cg-card--back .cg-card-back-mark { border: 2px solid #f4d4a2; width: 75%; border-radius: 50%; text-align: center; background: #554291; box-shadow: 0 2px 8px #0008; }
.ce-vibe .cg-card--button:disabled { opacity: .84; }
.ce-vibe .ce-opponent {
  border: 1px solid #d5bbff65;
  border-radius: 15px;
  padding: 13px 17px 6px;
  background: #140e2e99;
}
.ce-vibe .ce-opponent h3::before { content: '♣ '; color: #e5a8f1; }
.ce-vibe .ce-middle {
  margin: 15px 0 8px;
  border: 1px solid #e6b6e677;
  border-radius: 24px;
  background: radial-gradient(circle, #be8bec2b, transparent 80%);
}
.ce-vibe .ce-active-suit {
  border-radius: 30px;
  padding: 5px 14px;
  background: #7054a8;
  box-shadow: 0 3px 0 #241a43;
}
.ce-vibe .ce-hand h3 { color: #ffdda9; }
.ce-vibe .ce-hand-cards { padding-block: 9px 22px; }
.uno-hand::after, .ce-hand::after { display: none; }
.ce-vibe .ce-curtain-icon { border-radius: 50%; background: conic-gradient(#c779cf, #593b8e, #ce9e71, #c779cf); }
.bj-vibe .cg-table-heading strong { text-shadow: 0 0 14px #f9cd73a6; }
@media (max-width: 520px) {
  .uno-player { min-width: 85px; padding: 7px 9px; }
  .uno-middle { padding: 16px 4px 6px; }
  .uno-pile { gap: 14px; }
  .uno-card-symbol { font-size: 2.1rem; }
  .uno-card-corner { font-size: .85rem; }
  .uno-hand .cg-card-row { min-height: 115px; }
  .uno-hand::after, .ce-hand::after {
    display: block;
    content: '↔ Swipe your hand to see more cards';
    color: #f4d4ae;
    font-size: .72rem;
    text-align: center;
    letter-spacing: .03em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .uno-pile > .uno-card:last-child { animation: none; }
}