/* ---------- 421: pano de veludo e três dados de cores distintas ---------- */

.g421-felt {
  position: relative;
  border-radius: 18px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(28, 104, 58, .75), rgba(6, 38, 20, .98) 78%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .02) 0 3px, transparent 3px 6px);
  border: 6px solid transparent;
  border-image: linear-gradient(135deg, #caa24a, #6b4f18, #e8c877, #6b4f18, #caa24a) 1;
  box-shadow: 0 0 60px rgba(0, 0, 0, .6) inset, 0 20px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .4);
}

.g421-felt::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 130, .16);
  pointer-events: none;
}

.g421-zone {
  position: relative;
  padding: .4rem .2rem;
}

.g421-zone-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255, 245, 210, .6);
  margin-bottom: .3rem;
  text-align: center;
}

.g421-combo-worth {
  color: #ffd479;
  font-weight: 700;
}

.g421-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 130, .35), transparent);
}

.g421-tray {
  position: relative;
  min-height: 110px;
}

/* ---------- dados ---------- */

.g421-die {
  position: absolute;
  width: 66px;
  height: 66px;
  perspective: 420px;
  transition: top .35s ease, left .35s ease;
}

.g421-tray.interactive .g421-die { cursor: pointer; }

.g421-die-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.g421-die-cube.rolling {
  animation: g421-die-roll .6s cubic-bezier(.3, .8, .4, 1);
}

@keyframes g421-die-roll {
  0% { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(720deg) rotateY(1080deg); }
}

.g421-die-face {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset, 0 5px 10px rgba(0, 0, 0, .45);
}

/* Fora da animação só a face da frente é desenhada: qualquer filter/opacity no
   cubo achata o contexto 3D e passaria a deixar ver as faces de trás. */
.g421-die-face:not(.front) { visibility: hidden; }
.g421-die-cube.rolling .g421-die-face { visibility: visible; }

.g421-die-face.front { transform: translateZ(33px); }
.g421-die-face.back { transform: rotateY(180deg) translateZ(33px); }
.g421-die-face.right { transform: rotateY(90deg) translateZ(33px); }
.g421-die-face.left { transform: rotateY(-90deg) translateZ(33px); }
.g421-die-face.top { transform: rotateX(90deg) translateZ(33px); }
.g421-die-face.bottom { transform: rotateX(-90deg) translateZ(33px); }

/* cada dado tem a sua cor própria */
.g421-die.c-red .g421-die-face { background: linear-gradient(160deg, #ff6b6b, #b3121b); }
.g421-die.c-red .g421-pip { background: #fff4f4; }
.g421-die.c-ivory .g421-die-face { background: linear-gradient(160deg, #fffdf3, #d9d2b8); }
.g421-die.c-ivory .g421-pip { background: #17140d; }
.g421-die.c-blue .g421-die-face { background: linear-gradient(160deg, #5fb2ff, #10428f); }
.g421-die.c-blue .g421-pip { background: #f2f8ff; }

.g421-die.held .g421-die-cube {
  filter: drop-shadow(0 0 12px rgba(0, 255, 156, .9));
}

.g421-die.held::after {
  content: '\f023';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: .6rem;
  color: #00ff9c;
  text-shadow: 0 0 6px rgba(0, 0, 0, .8);
}

/* nunca usar opacity nos dados: o cubo é 3D e as faces de trás passariam a ver-se */
.g421-die.stale .g421-die-cube { filter: brightness(.6) saturate(.55); }

/* dado ainda por lançar: fica pousado na mesa, com a sua cor mas sem pontos */
.g421-die.blank .g421-die-cube { filter: brightness(.85); }

/* dado escondido: o adversário está a meio da mão e não podemos ver a jogada */
.g421-die.hidden-die .g421-die-face {
  background: linear-gradient(160deg, #2a3450, #131a2c) !important;
}
.g421-die.hidden-die .g421-pip { opacity: 0 !important; }

.g421-die.hidden-die .g421-die-cube::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Orbitron, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .3);
  transform: translateZ(34px);
  pointer-events: none;
}

.g421-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: auto;
  opacity: 0;
}

.g421-pip.on { opacity: 1; }

/* ---------- fichas ---------- */

.g421-chips-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.g421-chip-side { flex: 1 1 0; text-align: center; }

.g421-chip-name {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .55);
}

.g421-chip-count {
  font-size: .75rem;
  color: #cfe9ff;
  margin-top: .2rem;
}

.g421-chip-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  min-height: 18px;
  margin-top: .3rem;
}

.g421-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #c9962c 60%, #7a5a13);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .35) inset;
}

.g421-phase-pill {
  flex: 0 0 auto;
  font-family: Orbitron, sans-serif;
  font-size: .65rem;
  letter-spacing: .1em;
  padding: .35rem .8rem;
  border-radius: 999px;
  color: #ffd479;
  border: 1px solid rgba(255, 212, 121, .45);
  background: rgba(255, 212, 121, .08);
  white-space: nowrap;
}

/* ---------- histórico e tabela ---------- */

.g421-log {
  max-height: 170px;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: .3rem;
  font-size: .78rem;
  color: #cfe9ff;
}

.g421-log div {
  padding: .25rem .4rem;
  border-left: 2px solid rgba(0, 229, 255, .35);
  background: rgba(255, 255, 255, .03);
  border-radius: 0 6px 6px 0;
}

.g421-combo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}

.g421-combo-table td {
  padding: .3rem .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: #cfe9ff;
}

.g421-combo-name { color: rgba(255, 255, 255, .7); }
.g421-combo-value { text-align: right; color: #ffd479; font-weight: 700; white-space: nowrap; }

.g421-action-btn {
  padding: .8rem 2rem;
  font-size: 1rem;
}
.g421-action-btn:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 520px) {
  .g421-die { width: 48px; height: 48px; }
  .g421-die-face { padding: 7px; }
  .g421-die-face.front { transform: translateZ(24px); }
  .g421-die-face.back { transform: rotateY(180deg) translateZ(24px); }
  .g421-die-face.right { transform: rotateY(90deg) translateZ(24px); }
  .g421-die-face.left { transform: rotateY(-90deg) translateZ(24px); }
  .g421-die-face.top { transform: rotateX(90deg) translateZ(24px); }
  .g421-die-face.bottom { transform: rotateX(-90deg) translateZ(24px); }
  .g421-pip { width: 6px; height: 6px; }
  .g421-tray { min-height: 86px; }
  .g421-chips-bar { flex-wrap: wrap; }
}