/* Play Your Cards Right — casino felt theme for host / player chrome and board shell */

.play-your-cards-right,
#player-play-your-cards-right-controls {
  --pycr-felt: #0f3f2a;
  --pycr-felt-deep: #07140f;
  --pycr-cream: #f3e9d2;
  --pycr-gold-bright: #ffd54f;
  --pycr-muted: #c9b896;
  --pycr-ink: #f3e9d2;
  --pycr-panel: rgba(7, 26, 18, 0.88);
  --pycr-panel-border: rgba(212, 180, 131, 0.35);
  --pycr-shadow: 0 18px 48px rgba(2, 8, 5, 0.45);
}

.play-your-cards-right {
  color-scheme: dark;
  color: var(--pycr-ink);
  font-family: "DM Sans", "Segoe UI", sans-serif;
  background-color: var(--pycr-felt-deep);
  background-image:
    radial-gradient(ellipse at 50% 28%, rgba(36, 122, 79, 0.38), transparent 58%),
    linear-gradient(165deg, #06120d 0%, var(--pycr-felt) 52%, #081811 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
}

.play-your-cards-right,
.play-your-cards-right * {
  box-sizing: border-box;
}

body.play-your-cards-right,
body.gtf--screen.play-your-cards-right {
  min-height: 100dvh;
  background-color: var(--pycr-felt-deep);
  background-image:
    radial-gradient(ellipse at 50% 28%, rgba(36, 122, 79, 0.38), transparent 58%),
    linear-gradient(165deg, #06120d 0%, var(--pycr-felt) 52%, #081811 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--pycr-cream);
}

body.gtf--screen .play-your-cards-right {
  height: 100%;
  min-height: 0;
  /* Inherit the fixed body wash — avoid a second tiled gradient on the frame. */
  background: transparent;
}

/* ——— Player mobile controls (prototype-aligned) ——— */
.play-your-cards-right a {
  color: var(--pycr-gold-bright);
}

/* Results ceremony + card fireworks */
.pycr-cardwork {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cardwork-size);
  height: calc(var(--cardwork-size) * 1.4);
  border-radius: 6px;
  background:
    linear-gradient(160deg, #fffaf0 0%, #f3e9d2 55%, #e7d7b3 100%);
  border: 2px solid color-mix(in srgb, var(--cardwork-accent) 75%, #2a1a0e);
  box-shadow:
    0 10px 22px rgba(2, 8, 5, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--start-rotate)) scale(0.35);
  transform-origin: center;
  animation: pycr-cardwork-burst var(--duration) cubic-bezier(0.16, 0.9, 0.25, 1) var(--delay) forwards;
  will-change: transform, opacity;
  display: grid;
  place-items: center;
}

.pycr-cardwork-face {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: calc(var(--cardwork-size) * 0.38);
  color: color-mix(in srgb, var(--cardwork-accent) 85%, #1a1208);
  line-height: 1;
  letter-spacing: 0.02em;
}

.pycr-cardwork.is-static {
  opacity: 0.92;
  transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--end-rotate)) scale(1);
  animation: none;
}

@keyframes pycr-cardwork-burst {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--start-rotate)) scale(0.35);
  }
  12%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--end-rotate)) scale(1.05);
  }
}