/* Shared styles for the couples games in /games/ (wheel, dice, board). */

/* Player chips (_includes/game-players.html) */
.gp-chip { position: relative; display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border-radius: 1rem;
  background: rgba(17, 24, 39, .7); border: 1px solid #374151; transition: box-shadow .2s, border-color .2s; }
.gp-chip input { width: 100%; min-width: 0; background: transparent; color: #fff; font-weight: 600; outline: none; }
.gp-chip input::placeholder { color: #9ca3af; }
.gp-dot { width: .75rem; height: .75rem; flex: none; border-radius: 9999px; }
[data-player="0"] .gp-dot { background: #ec4899; }
[data-player="1"] .gp-dot { background: #a855f7; }
.gp-active { border-color: #ec4899; box-shadow: 0 0 0 1px #ec4899, 0 0 18px rgba(236, 72, 153, .35); }
.gp-active::before { content: 'YOUR TURN'; position: absolute; top: -9px; left: 12px; padding: 1px 7px; border-radius: 9999px;
  background: #ec4899; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .1em; }

/* Heat chips (_includes/game-heat.html) */
.g-flirty { background: linear-gradient(160deg, #f472b6, #be185d); }
.g-hot { background: linear-gradient(160deg, #fb923c, #dc2626 60%, #7f1d1d); }
.g-wild { background: linear-gradient(160deg, #a855f7, #6d28d9 55%, #2e1065); }
.g-chip { transition: opacity .2s, filter .2s, transform .2s; }
.g-chip[aria-pressed="false"] { opacity: .4; filter: grayscale(.7); transform: scale(.95); }

/* 3D die: .die-scene > .die > 6 faces (front, back, right, left, top, bottom) */
.die-scene { --s: clamp(72px, 22vw, 96px); width: var(--s); height: var(--s); perspective: 600px; }
.die { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(24deg) rotateX(0deg) rotateY(0deg); transition: transform 1.2s cubic-bezier(.2, .8, .25, 1); }
.die > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 4px; border-radius: 16%; text-align: center; font-size: clamp(11px, 3.2vw, 14px); font-weight: 800; line-height: 1.1;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(145deg, #fff, #e5e7eb); color: #111827;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06), inset 0 -6px 12px rgba(0, 0, 0, .1); }
.die > div:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.die > div:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die > div:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.die > div:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die > div:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.die > div:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.heat-flirty .die > div { background: linear-gradient(145deg, #fff, #fce7f3); color: #831843; }
.heat-hot .die > div { background: linear-gradient(145deg, #fff7ed, #fed7aa); color: #7c2d12; }
.heat-wild .die > div { background: linear-gradient(145deg, #3b0764, #111827); color: #f5d0fe;
  box-shadow: inset 0 0 0 2px rgba(236, 72, 153, .55), inset 0 -6px 12px rgba(0, 0, 0, .3); }
.die-hop { animation: die-hop 1.2s ease-out; }
@keyframes die-hop {
  25% { transform: translateY(-46px); }
  55% { transform: translateY(0); }
  70% { transform: translateY(-12px); }
  85% { transform: translateY(0); }
}

.g-pop { animation: g-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes g-pop { from { opacity: 0; transform: scale(.8); } }

@media (prefers-reduced-motion: reduce) {
  .die, .die-hop, .g-pop { animation: none !important; transition-duration: .01ms !important; }
}