/* Yatai Yatoi — logo original, karaoke y dado sobre la mesa (se suma a estilos.css) */

/* ---------- logo original ---------- */
.marca img { height: 38px; width: auto; }
.pie .marca img { height: 40px; }
.titulo-fondo h1 { font-size: 0; -webkit-text-stroke: 0; line-height: 0; }
.logo-partido { position: relative; display: block; width: min(78vw, 880px); aspect-ratio: 1000 / 334; margin: 0 auto; }
.logo-partido img { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform, opacity; filter: drop-shadow(0 10px 36px #000a); }
.titulo-fondo p { margin-top: 26px; }

/* ---------- karaoke ---------- */
.karaoke .mini { margin: 26px 0 0; font: 700 13px var(--texto); letter-spacing: .3em; text-transform: uppercase; color: var(--oro); }
.premios.turnos { margin-top: 10px; }
.premios.turnos li { font: 400 22px var(--titulo); padding: 8px 20px; letter-spacing: .04em; }
.lista-k { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; color: #e9dcc2; }
.lista-k li::before { content: '▸ '; color: var(--rojo); }
.labios { justify-self: center; position: relative; width: min(380px, 70vw); }
.labios::before { content: ''; position: absolute; inset: 6% 4%; background: var(--rojo); border-radius: 50%; opacity: .22; filter: blur(30px); }
.labios img { position: relative; width: 100%; height: auto; animation: flota 4.5s ease-in-out infinite; filter: drop-shadow(0 14px 24px #000a); }

/* ---------- dado sobre la mesa ---------- */
.dado-sec { background: radial-gradient(ellipse at 50% 30%, #2a0f10, var(--negro) 70%); text-align: center; }
.dado-sec .in { display: grid; justify-items: center; }
.dado-sec .intro { color: #e9dcc2; margin: 0 0 8px; }
.dado-sec .etq { color: var(--oro); }
.mesa { --d: clamp(120px, 22vw, 168px); position: relative; width: min(640px, 92vw); height: clamp(330px, 56vw, 400px); margin: 10px auto 0; perspective: 1000px; }
.tapete { position: absolute; left: 4%; right: 4%; bottom: 0; height: 46%; background: radial-gradient(ellipse at 50% 30%, #3d6b4a, #1f3d2b 75%); border-radius: 14px; transform: rotateX(62deg); transform-origin: 50% 100%; border: 6px solid #5b2a14; box-shadow: 0 0 0 3px #2b140a, 0 30px 50px #000c, inset 0 0 50px #0009; }
.tapete::after { content: ''; position: absolute; inset: 12%; border: 2px dashed #ffffff22; border-radius: 10px; }
.rebote { position: absolute; left: 50%; bottom: 17%; width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2); }
.escena-dado { width: 100%; height: 100%; perspective: 700px; }
.inclina { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-30deg); }
.dado3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(0) rotateY(0); transition: transform 1.9s cubic-bezier(.12,.7,.18,1); }
.cara { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; text-align: center; background: linear-gradient(145deg, #ff3a41, var(--rojo-osc)); border: 3px solid #fff3; border-radius: 14%; color: var(--crema); backface-visibility: hidden; box-shadow: inset 0 0 22px #0006; }
.cara b { font: 900 calc(var(--d) * .34)/1 var(--kanji); }
.cara span { font: 700 calc(var(--d) * .1) var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--oro); }
.cara.c4, .cara.c5 { background: linear-gradient(145deg, #2a1a1a, #0D0909); }
.cara.c4 b, .cara.c5 b { color: var(--oro); }
.c0 { transform: translateZ(calc(var(--d) / 2)); }
.c1 { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.c2 { transform: rotateY(90deg) translateZ(calc(var(--d) / 2)); }
.c3 { transform: rotateY(-90deg) translateZ(calc(var(--d) / 2)); }
.c4 { transform: rotateX(90deg) translateZ(calc(var(--d) / 2)); }
.c5 { transform: rotateX(-90deg) translateZ(calc(var(--d) / 2)); }
.rebote.tira { animation: rebota 1.9s cubic-bezier(.3,0,.4,1) both; }
@keyframes rebota {
  0% { transform: translateY(-330px) translateX(-40px); }
  26% { transform: translateY(0) translateX(0); animation-timing-function: ease-out; }
  44% { transform: translateY(-80px) translateX(18px); animation-timing-function: ease-in; }
  60% { transform: translateY(0) translateX(24px); animation-timing-function: ease-out; }
  74% { transform: translateY(-26px) translateX(14px); animation-timing-function: ease-in; }
  86% { transform: translateY(0) translateX(8px); }
  93% { transform: translateY(-6px) translateX(4px); }
  100% { transform: translateY(0) translateX(0); }
}
.resultado { min-height: 2.2em; margin: 14px 0 12px; font: 400 clamp(20px, 3vw, 30px) var(--titulo); text-transform: uppercase; color: var(--oro); }
.dado-sec .btn { margin-bottom: 8px; }
.dado-sec .premios { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .dado3d { transition: none; } .rebote.tira, .labios img { animation: none; } }

.ramen { height: 840vh; }
.bowl-caja { will-change: opacity; }

/* sin barra de desplazamiento horizontal */
html, body { overflow-x: clip; max-width: 100%; }

.titulo-fondo { z-index: 2; }
.bowl-caja { z-index: 1; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .logo-partido { width: 94vw; }
  .bowl-caja { top: 45%; width: min(74vw, 41vh); }
  .nota { bottom: 3.5%; }
  .nota .kj { font-size: 54px; }
  .final { bottom: 3%; }
  .final h2 { font-size: 22px; margin-bottom: 10px; }
  .final .btn { margin: 0 3px; padding: 0 16px; min-height: 42px; font-size: 13px; }
  .nota.f1, .nota.f2, .nota.f3 { top: auto; }
  .titulo-fondo p { margin-top: 18px; font-size: 12px; letter-spacing: .4em; }
  .premios.turnos { flex-wrap: nowrap; gap: 8px; }
  .premios.turnos li { flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 0; font-size: clamp(16px, 5.6vw, 22px); }
  .labios { width: min(210px, 46vw); }
}


/* ---------- notas del ramen en PC: que no se pisen en pantallas bajas (el tamaño se ajusta al alto de la ventana) ---------- */
@media (min-width: 861px) {
  .nota { width: min(320px, 26vw); }
  .nota .kj { font-size: clamp(34px, 8.5vh, 84px); margin: 0; }
  .nota h3 { font-size: clamp(17px, 3.4vh, 26px); }
  .nota p { font-size: clamp(12.5px, 2.2vh, 16.5px); line-height: 1.35; }
  .nota.f1 { top: 12%; } .nota.f2 { top: 38%; } .nota.f3 { top: 64%; }
}