/* KlipTok v29 · DADO CUADRADO + REPRODUCTOR ADAPTATIVO + SWIPE (assets/kt-v29-dado.css)
   Prefijo «kd-». Sustituye a los estilos .dc-* de kt-v22.css (retirados). Solo toca #v3d-dice y el carrusel (#v3d-ring).
   Rendimiento: el cubo solo anima `transform` (capa propia, will-change); el tamaño sale de container-queries (sin JS por frame). */

/* ---------- contenedor y reparto: [ranura superior] · [arena] · [dashboard] ---------- */
#v3d-dice { display: none; flex-direction: column; align-items: center; gap: 8px; align-self: stretch; flex: 1 1 0; min-width: 0; height: 100%; padding: 34px 12px 10px; position: relative; z-index: 4; box-sizing: border-box; }
#v3d-dice.on { display: flex; }
#v3d.dice-mode .v3d-nav, #v3d.dice-mode #v3d-bar { display: none !important; }

/* Ranura reservada (futuro): aquí irán las «redondas» animadas con vídeos cortos. Vacía = no ocupa nada. */
.kd-top { display: none; width: 100%; justify-content: center; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 0; overflow-x: auto; scrollbar-width: none; --kd-ring-size: clamp(56px, 9vh, 84px); }
.kd-top::-webkit-scrollbar { display: none; }
.kd-top:not(:empty) { display: flex; }

.kd-arena { flex: 1 1 0; min-height: 0; width: 100%; position: relative; display: grid; place-items: center; container-type: size; }

/* ---------- EL DADO: pieza CUADRADA y grande ---------- */
.kd-stage { --k: .74; --ds: clamp(160px, calc(min(100cqw - 24px, 100cqh - 28px) * var(--k)), 720px); width: var(--ds); height: var(--ds); position: relative; perspective: calc(var(--ds) * 4.6); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity .3s, transform .3s, visibility 0s; }
.kd-stage.kd-grab { cursor: grabbing; }
@media (max-width: 640px) { .kd-stage { --k: .68; } #v3d-dice { padding: 46px 8px 60px; } }
@supports not (width: 1cqw) { .kd-stage { --ds: clamp(160px, min(58vh, 88vw), 640px); } }
.kd-hop { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.kd-cube { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.kd-face { position: absolute; inset: 0; border-radius: calc(var(--ds) * .09); 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); contain: layout paint; }
.kd-face:nth-child(1) { transform: translateZ(calc(var(--ds) / 2)); }
.kd-face:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); }
.kd-face:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.kd-face:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.kd-face:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); }
.kd-face:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
.kd-face video, .kd-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.kd-face .kd-e { font-size: calc(var(--ds) * .24); filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); position: relative; }
.kd-face .kd-k { font-size: calc(var(--ds) * .052); font-weight: 800; letter-spacing: .08em; background: rgba(0,0,0,.35); padding: 2px 10px; border-radius: 999px; position: relative; }
.kd-face .kd-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px 9px; font-size: calc(var(--ds) * .05); font-weight: 700; background: linear-gradient(transparent, rgba(0,0,0,.65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-shadow { position: absolute; left: 10%; right: 10%; bottom: calc(var(--ds) * -.09); height: calc(var(--ds) * .06); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%); transform-origin: center; pointer-events: none; }

/* con carta abierta, el dado se aparta (no se renderiza detrás) */
#v3d-dice.kd-has-card .kd-stage { opacity: 0; transform: scale(.55); pointer-events: none; visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
#v3d-dice.kd-has-card .kd-shadow { display: none; }

/* ---------- REPRODUCTOR ADAPTATIVO (carta revelada): vertical, horizontal o cuadrado según el contenido ---------- */
.kd-card { position: absolute; inset: 0; margin: auto; display: none; touch-action: none; }
.kd-card.on { display: block; }
.kd-in { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -18px rgba(0,0,0,.75), 0 0 46px rgba(147,51,234,.4); will-change: transform; touch-action: none; user-select: none; -webkit-user-select: none; animation: kdPop .42s cubic-bezier(.2,.9,.25,1.12) backwards; }
.kd-card[data-ar="landscape"] .kd-in { border-radius: 16px; }
.kd-card[data-type="yt"] .kd-in { touch-action: auto; }
@keyframes kdPop { from { transform: scale(.35) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kdNext { from { transform: translateY(26px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.kd-in.kd-next { animation: kdNext .3s ease-out backwards; }
.kd-media, .kd-media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.kd-media video { object-fit: contain; background: #000; display: block; }    /* contain: nunca recorta; la caja ya tiene la proporción del vídeo */
.kd-media iframe { border: 0; background: #000; }
.kd-aud { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #0f172a, #3b0764 60%, #020617); color: #fff; }
.kd-aud .kd-disc { width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(34px, 9cqmin, 80px); background: linear-gradient(135deg, #2563eb, #9333ea, #ec4899); box-shadow: 0 10px 40px rgba(147,51,234,.5); }
.kd-aud.kd-spin .kd-disc { animation: kdSpin 6s linear infinite; }
@keyframes kdSpin { to { rotate: 360deg; } }
.kd-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 14px 54px; background: linear-gradient(transparent, rgba(0,0,0,.78)); pointer-events: none; color: #fff; text-shadow: 0 1px 3px #000; }
.kd-card[data-type="yt"] .kd-cap { display: none; }
.kd-cap .kd-b { font-size: 10px; font-weight: 800; background: rgba(147,51,234,.9); padding: 2px 8px; border-radius: 999px; }
.kd-cap h3 { margin: 6px 0 2px; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kd-cap p { margin: 0; font-size: 12px; color: #cbd5e1; }
.kd-ctl { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); color: #fff; }
.kd-card[data-type="yt"] .kd-ctl { display: none; }
.kd-ctl button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; flex: 0 0 auto; font-size: 13px; }
.kd-ctl input[type=range] { flex: 1; min-width: 0; accent-color: #c084fc; height: 18px; }
/* sellos del swipe */
.kd-stamp { position: absolute; top: 22px; padding: 4px 12px; border: 3px solid; border-radius: 10px; font-weight: 900; font-size: clamp(16px, 4.2cqmin, 28px); letter-spacing: .06em; opacity: 0; pointer-events: none; z-index: 3; background: rgba(0,0,0,.25); }
.kd-stamp.like { left: 18px; color: #34d399; border-color: #34d399; rotate: -14deg; }
.kd-stamp.nope { right: 18px; color: #f87171; border-color: #f87171; rotate: 14deg; }
/* agarres de swipe sobre iframes (YouTube): las zonas del propio iframe no reciben eventos del documento */
.kd-grip { display: none; position: absolute; z-index: 4; touch-action: none; cursor: grab; }
.kd-card[data-type="yt"] .kd-grip { display: block; }
.kd-grip.t { left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(rgba(0,0,0,.55), transparent); color: #e2e8f0; font-size: 10px; text-align: center; line-height: 22px; letter-spacing: .08em; }
.kd-grip.l, .kd-grip.r { top: 26px; bottom: 56px; width: 16px; }
.kd-grip.l { left: 0; } .kd-grip.r { right: 0; }
.kd-card.kd-full .kd-in { border-radius: 0; }

/* ---------- DASHBOARD del dado (fuera de la pieza): tirar, valorar, sonido ---------- */
.kd-dock { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 8px 12px; flex: 0 0 auto; width: min(100%, 680px); padding: 8px 12px; border-radius: 22px; background: rgba(15,23,42,.62); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); }
.kd-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.kd-roll { flex: 0 1 auto; padding: 12px 26px; font-size: 16px; font-weight: 800; color: #fff; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, #ff6b6b, #feca57 45%, #1dd1a1); box-shadow: 0 8px 22px rgba(255,107,107,.45); transition: transform .15s; white-space: nowrap; }
.kd-roll:hover { transform: translateY(-2px) scale(1.03); } .kd-roll:active { transform: scale(.97); } .kd-roll:disabled { opacity: .6; cursor: default; transform: none; }
.kd-roll.kd-pulse { animation: kdPulse 1.2s ease-in-out infinite; }
@keyframes kdPulse { 50% { box-shadow: 0 0 0 10px rgba(255,107,107,.0), 0 8px 30px rgba(254,202,87,.8); } }
.kd-vote { width: 52px; height: 52px; border-radius: 50%; border: 2px solid; background: rgba(255,255,255,.06); font-size: 22px; cursor: pointer; flex: 0 0 auto; transition: transform .15s, background .15s; color: #fff; }
.kd-vote.nope { border-color: #f87171; } .kd-vote.like { border-color: #34d399; }
.kd-vote:hover:not(:disabled) { transform: scale(1.1); background: rgba(255,255,255,.16); }
.kd-vote:disabled { opacity: .3; cursor: default; }
.kd-mini { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; font-size: 12px; cursor: pointer; }
.kd-mini[aria-pressed="false"] { opacity: .55; }
.kd-mini[hidden], .kd-count[hidden] { display: none; }
.kd-count { font-size: 12px; color: #cbd5e1; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.kd-hint { margin: 0; color: #e2e8f0; font-size: 12px; text-align: center; max-width: 440px; padding: 3px 12px; border-radius: 999px; background: rgba(15,23,42,.55); }
.kd-hint:empty { display: none; }

@media (max-width: 640px) { .kd-roll { padding: 11px 20px; font-size: 15px; } .kd-vote { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .kd-in, .kd-in.kd-next, .kd-roll.kd-pulse, .kd-aud.kd-spin .kd-disc { animation: none; } .kd-stage { transition: none; } }

/* ---------- carrusel: tamaño adaptado al contenido (vertical / horizontal / cuadrado) + YouTube ---------- */
#v3d #v3d-ring { transition: width .35s ease, height .35s ease, transform .25s ease-out; }
.v3d-card iframe.kd-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }