/* ===================== v17 · DADOS DE PAREJA · v18 · DADOS EN GRUPO ===================== */
#s18 .dt-meta{display:flex;align-items:center;justify-content:space-between;margin:10px 2px 0}
#s18 .dt-round{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--muted)}
#s18 .dt-turn{display:flex;align-items:center;gap:12px;margin:14px 2px 2px;text-align:left}
#s18 .dt-turn small{display:block;font-size:10px;letter-spacing:.2em;font-weight:900;color:var(--muted)}
#s18 .dt-turn b{display:block;font-size:22px;font-weight:950;line-height:1.15;word-break:break-word}

/* Dados 3D */
.dt-stage{display:flex;justify-content:center;gap:14px;margin:12px 0 22px}
/* Pie fijo abajo: en móviles bajos HECHO / PASAR siguen a mano sin hacer scroll */
#s18 .footer{position:sticky;bottom:0;z-index:4;padding:16px 0 10px;background:linear-gradient(to top,var(--bg) 70%,transparent)}
.dt-die{width:88px;text-align:center}
.dt-lab{font-size:10px;font-weight:900;letter-spacing:.22em;margin-bottom:12px}
.dt-die:nth-child(1) .dt-lab{color:#ff7ab8}
.dt-die:nth-child(2) .dt-lab{color:#b79bff}
.dt-die:nth-child(3) .dt-lab{color:#ffc27a}
.dt-scene{position:relative;width:88px;height:88px;perspective:640px}
.dt-scene:after{content:"";position:absolute;left:10%;right:10%;bottom:-16px;height:12px;border-radius:50%;background:radial-gradient(ellipse at center,#000b,transparent 70%);pointer-events:none}
/* OJO: ni filter, ni opacity, ni overflow en el cubo ni en sus padres 3D: aplanan el 3D y las caras salen en espejo o desaparecen */
.dt-cube{position:relative;width:88px;height:88px;transform-style:preserve-3d;transform:translateZ(-44px);transition:transform 1.5s cubic-bezier(.2,.7,.2,1)}
.dt-face{transition:opacity .3s ease}
.dt-cube.idle .dt-face{opacity:.55}
.dt-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:7px;border-radius:18px;font-size:12px;font-weight:900;line-height:1.12;letter-spacing:.02em;text-align:center;overflow-wrap:normal;word-break:normal;hyphens:none;color:#fff;border:1.5px solid #ffffff40;box-shadow:inset 0 0 24px #ffffff1c,inset 0 -10px 20px #0000003a;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-shadow:0 1px 6px #0006}
.dt-die:nth-child(1) .dt-face{background:linear-gradient(145deg,#ff6db5,#a3286f)}
.dt-die:nth-child(2) .dt-face{background:linear-gradient(145deg,#a58bff,#4d2fb0)}
.dt-die:nth-child(3) .dt-face{background:linear-gradient(145deg,#ffb15c,#d1355f)}
/* La palabra más larga de cada cara decide el tamaño, para que nunca se parta a media palabra */
.dt-face.w9{font-size:11px}
.dt-face.w10{font-size:10px}
.dt-face.w11{font-size:9px;letter-spacing:0}
.dt-face.f0{transform:rotateY(0deg) translateZ(44px)}
.dt-face.f1{transform:rotateY(90deg) translateZ(44px)}
.dt-face.f2{transform:rotateY(180deg) translateZ(44px)}
.dt-face.f3{transform:rotateY(-90deg) translateZ(44px)}
.dt-face.f4{transform:rotateX(90deg) translateZ(44px)}
.dt-face.f5{transform:rotateX(-90deg) translateZ(44px)}

/* Resultado */
.dt-result{margin:10px 0 0;padding:16px 14px;min-height:118px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;line-height:1.55;font-weight:600}
.dt-result .dt-hint{color:var(--muted);font-size:14px;font-weight:600}
.dt-result .dt-sw{display:block;font-size:12px;font-weight:900;letter-spacing:.14em;color:#ffc27a;margin-bottom:4px}
.dt-a{color:#ff7ab8;font-weight:900}
.dt-z{color:#b79bff;font-weight:900}
.dt-h{color:#ffc27a;font-weight:900}
.dt-t{color:#58e39a;font-weight:900}

/* Temporizador */
.dt-timer{margin:10px 0 0;text-align:center}
.dt-tdisp{font-size:36px;font-weight:950;color:var(--pink);font-variant-numeric:tabular-nums;letter-spacing:-1px}
.dt-timer .progress{height:6px;margin:6px auto;max-width:220px}
.dt-timer .smallbtn{margin-top:4px;padding:10px 18px;font-weight:800;background:linear-gradient(135deg,var(--pink),var(--violet))}

/* Modo claro */
html[data-theme=light] .dt-a{color:#c21f78}
html[data-theme=light] .dt-z{color:#5a3fd0}
html[data-theme=light] .dt-h{color:#b86a00}
html[data-theme=light] .dt-t{color:#0f8a52}
html[data-theme=light] .dt-result .dt-sw{color:#b86a00}
html[data-theme=light] .dt-lab{filter:brightness(.7)}
html[data-theme=light] .dt-scene:after{background:radial-gradient(ellipse at center,#0003,transparent 70%)}
html[data-theme=light] .dt-face{border-color:#ffffff90}

/* Móviles bajos (≤ 700 px de alto): se compacta para que la frase y los botones quepan sin esfuerzo */
@media (max-height:700px){
  .dt-stage{margin:4px 0 20px}
  #s18 .dt-turn{margin-top:6px}
  #s18 .dt-meta{margin-top:6px}
  .dt-result{min-height:0;padding:12px;margin-top:4px;font-size:15px}
  .dt-tdisp{font-size:28px}
  .dt-timer{margin-top:6px}
  .dt-timer .smallbtn{padding:8px 14px}
  #s18 .note{font-size:11px;margin-top:6px}
  #s18 .footer{padding-top:10px;padding-bottom:8px}
}
@media (max-width:340px){
  .dt-stage{gap:8px}
}

/* ---------- v18 · Dados en grupo: quien tira  →  con quién (ruleta de nombres) ---------- */
#s18.dtg .dt-turn{gap:8px}
#s18.dtg .dt-turn>div{flex:1;min-width:0}
#s18.dtg .dt-turn b{font-size:18px;line-height:1.15;word-break:normal;overflow-wrap:normal}   /* un nombre largo encoge (dtFit) en vez de partirse a media palabra */
#s18 .dt-arrow{flex:none;font-size:22px;font-weight:900;color:var(--pink)}
#s18 .dt-tgt{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
#s18 .dt-tgt>div{min-width:0}
#s18 .dt-q{width:40px;height:40px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:2px dashed #ffffff55;font-size:18px;font-weight:900;color:var(--muted)}
#s18 .dt-tgt.idle b{color:var(--muted)}
#s18 .dt-tgt.spin b{color:#ffc27a}
#s18 .dt-tgt.hit b{color:var(--pink)}
#s18 .dt-tgt.hit .avatar{animation:dtHit .7s ease-out 1}
@keyframes dtHit{0%{transform:scale(.7)}55%{transform:scale(1.22);box-shadow:0 0 0 6px #ff4fa355}100%{transform:scale(1)}}
html[data-theme=light] #s18 .dt-tgt.spin b{color:#b86a00}
html[data-theme=light] #s18 .dt-q{border-color:#00000040}
@media (prefers-reduced-motion:reduce){#s18 .dt-tgt.hit .avatar{animation:none}}
/* Móviles de 360 px o menos: el nombre del elegido necesita todo el ancho de su columna, así que se quita su avatar */
@media (max-width:360px){
  #s18 #dtTAv{display:none}
}
@media (max-width:340px){
  #s18.dtg .dt-turn b{font-size:16px}
  #s18 .dt-arrow{font-size:18px}
}