/* KlipTok v47 · DADO CÚBICO 3D REUTILIZABLE — estilos (assets/kt-v47-dice.css) — archivo NUEVO, aditivo.
   Todo va con el prefijo de ámbito `.ktd` para no interferir con el CSS existente (#v3d-dice, #kcrush).
   Reúne el mismo aspecto del dado de la Vista 3D: cubo estrictamente cuadrado y grande, panel lateral
   con el botón «Tirar», sombra, pista de gesto y botón de sonido. Quitar = borrar este archivo y su <link>. */

.ktd { display: flex; flex-direction: row; align-items: stretch; gap: 14px; flex: 1 1 auto; width: 100%; height: 100%; min-height: min(60vh, 520px); min-width: 0; box-sizing: border-box; }
#v3d-dice .ktd { min-height: 0; }

/* cara atenuada (ya valorada) reutilizable en cualquier dado de fotos */
.ktd .dc-face.kc-used .dc-ph { filter: grayscale(1) brightness(.55); }
.ktd .dc-face.kc-used::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.2rem; color: rgba(255,255,255,.9); }

/* Arena: zona de gesto. Es un contenedor de tamaño → el cubo se calcula con cqw/cqh y es SIEMPRE cuadrado. */
.ktd .dc-arena { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 24px; }
.ktd .dc-arena.grab { cursor: grabbing; }
.ktd .dc-stage { --s: calc(min(100cqw, 100cqh) * .64); --dw: var(--s); --ds: var(--s); width: var(--s); height: var(--s); position: relative; perspective: calc(var(--s) * 4.2); flex: 0 0 auto; }
.ktd .dc-hop { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ktd .dc-cube { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ktd .dc-face { position: absolute; inset: 0; border-radius: calc(var(--dw) * .12); overflow: hidden; border: 3px solid rgba(255,255,255,.75); backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; text-align: center;
  box-shadow: inset 0 0 28px rgba(255,255,255,.28), inset 0 -14px 30px rgba(0,0,0,.16); }
.ktd .dc-face:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.ktd .dc-face:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.ktd .dc-face:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.ktd .dc-face:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.ktd .dc-face:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.ktd .dc-face:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.ktd .dc-shadow { position: absolute; left: 10%; right: 10%; width: auto; margin: 0; bottom: calc(var(--s) * -.1); height: calc(var(--s) * .08); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.42), transparent 70%); pointer-events: none; }
.ktd .dc-hint { position: absolute; top: 4px; left: 0; right: 0; margin: 0; text-align: center; font-size: 12px; color: #6b6490; pointer-events: none; }

/* contenido de las caras */
.ktd .dc-face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ktd .dc-face .dc-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.ktd .dc-face .dc-e { font-size: calc(var(--ds) * .3); filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); position: relative; }
.ktd .dc-face .dc-k { font-size: calc(var(--ds) * .075); font-weight: 800; letter-spacing: .08em; background: rgba(255,255,255,.28); padding: 2px 10px; border-radius: 999px; position: relative; }
.ktd .dc-face .dc-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px 7px; font-size: calc(var(--ds) * .068); font-weight: 700; background: linear-gradient(transparent, rgba(0,0,0,.55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktd .dc-face .dc-eq { display: none; position: absolute; left: 0; right: 0; top: 14%; justify-content: center; align-items: flex-end; gap: 4px; height: 22%; }
.ktd .dc-face.playing .dc-eq { display: flex; }
.ktd .dc-eq i { width: 6px; background: #fff; border-radius: 3px; animation: dcEq .8s ease-in-out infinite alternate; height: 30%; }
.ktd .dc-eq i:nth-child(2) { animation-delay: .15s } .ktd .dc-eq i:nth-child(3) { animation-delay: .3s } .ktd .dc-eq i:nth-child(4) { animation-delay: .1s } .ktd .dc-eq i:nth-child(5) { animation-delay: .25s }
@keyframes dcEq { to { height: 100%; } }
.ktd .dc-face.vplay .dc-e, .ktd .dc-face.vplay .dc-k { opacity: 0; transition: opacity .3s; }

/* Panel de control del dado, a un lado del cubo (nunca debajo) */
.ktd .dc-side { flex: 0 0 auto; width: clamp(180px, 20vw, 250px); align-self: center; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 22px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(99,60,200,.2); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(99,60,200,.12); color: #1e1b3a; }
.ktd .dc-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b6490; }
.ktd .dc-roll { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 18px; border: 0; border-radius: 18px; cursor: pointer; color: #fff; font-weight: 800; font-size: 18px;
  background: linear-gradient(100deg, #2563eb, #7c3aed 50%, #ec4899); box-shadow: 0 10px 24px rgba(124,58,237,.38); transition: transform .15s, box-shadow .15s; }
.ktd .dc-roll:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(124,58,237,.45); } .ktd .dc-roll:active { transform: scale(.97); } .ktd .dc-roll:disabled { opacity: .55; cursor: default; transform: none; }
.ktd .dc-roll-i { font-size: 26px; line-height: 1; }
.ktd .dc-tip { margin: 0; font-size: 12px; line-height: 1.45; color: #4b4670; }
.ktd .dc-row { display: flex; gap: 8px; }
.ktd .dc-snd { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(99,60,200,.25); background: rgba(255,255,255,.85); color: #1e1b3a; font-size: 18px; cursor: pointer; }
.ktd .dc-snd[aria-pressed="false"] { opacity: .55; }
.ktd[data-kt-theme="dark"] .dc-side { background: rgba(15,23,42,.78); color: #e2e8f0; border-color: rgba(255,255,255,.14); }
.ktd[data-kt-theme="dark"] .dc-tip, .ktd[data-kt-theme="dark"] .dc-title { color: #94a3b8; }

/* Móvil / pantallas estrechas: el panel pasa a una columna estrecha A UN LADO con el botón redondo */
@media (max-width: 760px) {
  .ktd { gap: 6px; }
  .ktd .dc-side { width: 76px; padding: 10px 6px; gap: 10px; align-items: center; border-radius: 20px; }
  .ktd .dc-title, .ktd .dc-tip { display: none; }
  .ktd .dc-roll { width: 62px; height: 62px; padding: 0; border-radius: 50%; flex-direction: column; gap: 2px; font-size: 11px; }
  .ktd .dc-roll-i { font-size: 26px; }
  .ktd .dc-stage { --s: calc(min(100cqw, 100cqh) * .72); }
}
@media (prefers-reduced-motion: reduce) { .ktd .dc-roll { transition: none; } .ktd .dc-eq i { animation: none; height: 60%; } }