/*
 * ============================================================
 *  DICE CLASH  --  Extracted from style.css
 *  Includes: 3D Dice (single-player picker), Dice Clash arena,
 *            Dice Clash 3D dice, petal effect, and responsive
 *            overrides for all dice/clash selectors.
 * ============================================================
 */

/* ===== 3D DICE (single-player dice) ===== */
.dice-scene {
  width: 140px;
  height: 140px;
  perspective: 600px;
  margin: 1.5rem auto;
  position: relative;
  z-index: 1;
}
.dice-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dice-face {
  position: absolute;
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 18px;
  gap: 6px;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,0.1);
}
.dice-face-1 {
  background: linear-gradient(135deg, #e63946, #d62839);
  transform: rotateY(0deg) translateZ(70px);
}
.dice-face-2 {
  background: linear-gradient(135deg, #1d3557, #14213d);
  transform: rotateY(90deg) translateZ(70px);
}
.dice-face-3 {
  background: linear-gradient(135deg, #2a9d8f, #1a7a6e);
  transform: rotateX(90deg) translateZ(70px);
}
.dice-face-4 {
  background: linear-gradient(135deg, #e9c46a, #d4a843);
  transform: rotateX(-90deg) translateZ(70px);
}
.dice-face-5 {
  background: linear-gradient(135deg, #6a4c93, #553c7b);
  transform: rotateY(-90deg) translateZ(70px);
}
.dice-face-6 {
  background: linear-gradient(135deg, #f77f00, #e06c00);
  transform: rotateY(180deg) translateZ(70px);
}
.dice-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.dice-dot {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 -1px 2px rgba(0,0,0,0.1);
  align-self: center;
  justify-self: center;
}
/* Dice shadow */
.dice-shadow {
  width: 120px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, transparent 70%);
  margin: 0.75rem auto 0;
  border-radius: 50%;
}

/* Dice show-face transforms */
.dice-show-1 { transform: rotateX(0deg) rotateY(0deg); }
.dice-show-2 { transform: rotateX(0deg) rotateY(-90deg); }
.dice-show-3 { transform: rotateX(-90deg) rotateY(0deg); }
.dice-show-4 { transform: rotateX(90deg) rotateY(0deg); }
.dice-show-5 { transform: rotateX(0deg) rotateY(90deg); }
.dice-show-6 { transform: rotateX(0deg) rotateY(180deg); }

/* Rolling animation */
.dice-cube.rolling {
  animation: diceRoll 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes diceRoll {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  20% { transform: rotateX(240deg) rotateY(300deg) rotateZ(120deg); }
  40% { transform: rotateX(480deg) rotateY(120deg) rotateZ(240deg); }
  60% { transform: rotateX(720deg) rotateY(540deg) rotateZ(60deg); }
  80% { transform: rotateX(960deg) rotateY(300deg) rotateZ(180deg); }
  100% { transform: rotateX(1080deg) rotateY(720deg) rotateZ(360deg); }
}

/* Dice number picker */
.dice-number-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.dice-pick-btn {
  aspect-ratio: 1;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.3rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dice-pick-btn:hover { border-color: var(--secondary); background: rgba(124,58,237,0.05); }
.dice-pick-btn.active {
  border-color: var(--secondary);
  background: rgba(124,58,237,0.15);
  color: var(--secondary-hover);
  box-shadow: 0 0 12px var(--secondary-glow);
}

/* ===== DICE CLASH - JAPANESE ARENA ===== */
.clash-stage { background: radial-gradient(ellipse at 50% 50%, #2d1515, #1a0a0a 70%, #110505); border: none; }
.jp-pattern { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 35px, rgba(255,215,0,0.4) 35px, rgba(255,215,0,0.4) 36px),
    repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(255,215,0,0.4) 35px, rgba(255,215,0,0.4) 36px);
}
.jp-sun { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(230,57,70,0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.jp-border-top, .jp-border-bottom { position: absolute; left: 0; right: 0; height: 4px; z-index: 0; background: linear-gradient(90deg, transparent, #c9960c 20%, #ffd700 50%, #c9960c 80%, transparent); }
.jp-border-top { top: 0; } .jp-border-bottom { bottom: 0; }

.clash-field { display: flex; align-items: center; justify-content: center; gap: 1.5rem; position: relative; z-index: 1; width: 100%; max-width: 600px; }
.clash-side { flex: 1; text-align: center; padding: 1.2rem 0.75rem; border-radius: var(--radius); transition: all 0.3s; }
.clash-banner { font-size: 1.1rem; font-weight: 900; letter-spacing: 4px; margin-bottom: 1rem; text-transform: uppercase; padding: 0.3rem 0; border-bottom: 2px solid; }
.player-banner { color: var(--accent); border-color: rgba(0,212,170,0.3); text-shadow: 0 0 12px var(--accent-glow); }
.rival-banner { color: #e63946; border-color: rgba(230,57,70,0.3); text-shadow: 0 0 12px rgba(230,57,70,0.4); }

.clash-center { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.clash-vs-badge { font-size: 2rem; font-weight: 900; color: #ffd700; text-shadow: 0 0 25px var(--gold-glow), 0 0 50px rgba(255,215,0,0.15), 0 2px 6px rgba(0,0,0,0.6); letter-spacing: 3px; }

.clash-dice-pair { display: flex; gap: 10px; justify-content: center; margin-bottom: 1rem; }
.clash-total { font-size: 2.8rem; font-weight: 900; min-height: 3rem; transition: color 0.3s; }
.player-side .clash-total { color: var(--accent); text-shadow: 0 0 15px var(--accent-glow); }
.opponent-side .clash-total { color: #e63946; text-shadow: 0 0 15px rgba(230,57,70,0.4); }

.clash-winner { background: rgba(34,197,94,0.12); box-shadow: inset 0 0 40px rgba(34,197,94,0.15); }
.clash-loser { background: rgba(239,68,68,0.08); box-shadow: inset 0 0 40px rgba(239,68,68,0.1); }

.clash-roll-btn { background: linear-gradient(135deg, #e63946, #b91c1c) !important; color: #fff !important; box-shadow: 0 2px 16px rgba(230,57,70,0.5) !important; font-weight: 800 !important; letter-spacing: 1px; }
.clash-roll-btn:hover:not(:disabled) { background: linear-gradient(135deg, #f04050, #e63946) !important; box-shadow: 0 4px 24px rgba(230,57,70,0.6) !important; transform: translateY(-1px); }

/* ===== DICE CLASH - 3D DICE ===== */
.dc-scene { width: 85px; height: 85px; perspective: 450px; }
.dc-cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.25,0.46,0.45,0.94); }
.dc-face { position: absolute; width: 85px; height: 85px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 12px; gap: 3px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.12); }
.dc-face::after { content:''; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 50%); pointer-events: none; }
.dc-face.player-die { background: linear-gradient(135deg, #0d9488, #0f766e); box-shadow: 0 2px 8px rgba(13,148,136,0.3); }
.dc-face.opponent-die { background: linear-gradient(135deg, #dc2626, #991b1b); box-shadow: 0 2px 8px rgba(220,38,38,0.3); }
.dc-dot { width: 100%; height: 100%; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.35); align-self: center; justify-self: center; }
.dc-face-1 { transform: rotateY(0deg) translateZ(42.5px); }
.dc-face-2 { transform: rotateY(90deg) translateZ(42.5px); }
.dc-face-3 { transform: rotateX(90deg) translateZ(42.5px); }
.dc-face-4 { transform: rotateX(-90deg) translateZ(42.5px); }
.dc-face-5 { transform: rotateY(-90deg) translateZ(42.5px); }
.dc-face-6 { transform: rotateY(180deg) translateZ(42.5px); }
.dc-show-1 { transform: rotateX(0deg) rotateY(0deg); }
.dc-show-2 { transform: rotateX(0deg) rotateY(-90deg); }
.dc-show-3 { transform: rotateX(-90deg) rotateY(0deg); }
.dc-show-4 { transform: rotateX(90deg) rotateY(0deg); }
.dc-show-5 { transform: rotateX(0deg) rotateY(90deg); }
.dc-show-6 { transform: rotateX(0deg) rotateY(180deg); }
.dc-cube.rolling { animation: dcRoll 1.1s cubic-bezier(0.25,0.46,0.45,0.94); }
@keyframes dcRoll { 0%{transform:rotateX(0) rotateY(0) rotateZ(0)} 25%{transform:rotateX(270deg) rotateY(360deg) rotateZ(90deg)} 50%{transform:rotateX(540deg) rotateY(180deg) rotateZ(180deg)} 75%{transform:rotateX(810deg) rotateY(540deg) rotateZ(270deg)} 100%{transform:rotateX(1080deg) rotateY(720deg) rotateZ(360deg)} }

.petal { position: absolute; width: 9px; height: 9px; background: radial-gradient(circle, #ffb7c5, #ff69b4); border-radius: 50% 0 50% 0; pointer-events: none; z-index: 30; }

/* ===== RESPONSIVE - Tablet (max-width: 768px) ===== */
@media (max-width: 768px) {
  /* Dice Clash */
  .clash-field { gap: 0.75rem; }
  .dc-scene { width: 65px; height: 65px; }
  .dc-face { width: 65px; height: 65px; padding: 9px; gap: 2px; border-radius: 10px; }
  .dc-face-1 { transform: rotateY(0deg) translateZ(32.5px); }
  .dc-face-2 { transform: rotateY(90deg) translateZ(32.5px); }
  .dc-face-3 { transform: rotateX(90deg) translateZ(32.5px); }
  .dc-face-4 { transform: rotateX(-90deg) translateZ(32.5px); }
  .dc-face-5 { transform: rotateY(-90deg) translateZ(32.5px); }
  .dc-face-6 { transform: rotateY(180deg) translateZ(32.5px); }
  .clash-total { font-size: 2rem; }
  .clash-vs-badge { font-size: 1.4rem; }
}

/* ===== RESPONSIVE - Mobile (max-width: 480px) ===== */
@media (max-width: 480px) {
  /* Dice Clash */
  .clash-field { gap: 0.3rem; padding: 0 0.15rem; }
  .clash-side { padding: 0.5rem 0.25rem; }
  .clash-banner { font-size: 0.65rem; letter-spacing: 1px; margin-bottom: 0.35rem; padding-bottom: 0.15rem; }
  .clash-dice-pair { gap: 3px; margin-bottom: 0.35rem; }
  .dc-scene { width: 42px; height: 42px; }
  .dc-face { width: 42px; height: 42px; padding: 4px; gap: 1px; border-radius: 6px; border-width: 1px; }
  .dc-face-1 { transform: rotateY(0deg) translateZ(21px); }
  .dc-face-2 { transform: rotateY(90deg) translateZ(21px); }
  .dc-face-3 { transform: rotateX(90deg) translateZ(21px); }
  .dc-face-4 { transform: rotateX(-90deg) translateZ(21px); }
  .dc-face-5 { transform: rotateY(-90deg) translateZ(21px); }
  .dc-face-6 { transform: rotateY(180deg) translateZ(21px); }
  .clash-total { font-size: 1.4rem; min-height: 1.6rem; }
  .clash-vs-badge { font-size: 0.9rem; letter-spacing: 1px; }
  .jp-sun { width: 140px; height: 140px; }
  .jp-border-top, .jp-border-bottom { height: 2px; }
}

/* ===== RESPONSIVE - Very small/short screens (max-height: 600px) ===== */
@media (max-height: 600px) {
  .clash-field { transform: scale(0.75); transform-origin: center top; }
}