/* Bresh · Jugá: vinilo en bandeja y dados de peluche. Prefijo ju- */
html.sin-aviso .premio-aviso { display: none !important; }
.ju { overflow-x: clip; }
.ju-sec { display: grid; gap: 18px; padding-top: clamp(40px, 9vw, 72px); padding-bottom: clamp(48px, 8vw, 90px); }
.ju-texto { display: grid; gap: 14px; justify-items: start; }
.ju-tit { display: grid; gap: 0; font-size: clamp(56px, 18vw, 150px); line-height: .86; padding-top: .08em; }
.ju-tit span { display: block; }
.ju-tit .extruido { font-size: .62em; line-height: 1; margin-top: .06em; }
.ju-sub { max-width: 42ch; font-size: 1rem; line-height: 1.5; color: var(--t2); }
.ju-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-height: 44px; }
.ju-pul-t { rotate: -2deg; }
.ju-conseguir { font-weight: 700; color: var(--peluche); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; min-height: 44px; display: inline-flex; align-items: center; }
.ju-pie { display: grid; gap: 14px; justify-items: center; }
.ju-modos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ju-modos .pulsera { height: 40px; font-size: .74rem; }
.ju-modo { min-height: 48px; display: inline-flex; align-items: center; transition: transform .5s var(--rebote), opacity .3s; }
.ju-modo[aria-pressed="false"] { opacity: .65; }
.ju-modo[aria-pressed="true"] { transform: translateY(-2px) rotate(-1.5deg); }
.ju-modo:active { transform: scale(.95); }
.ju-modo[disabled] { pointer-events: none; opacity: .5; }
.ju-escena { position: relative; min-width: 0; }
.ju-juego { display: grid; gap: 22px; justify-items: center; }

/* ───────── vinilo en bandeja ───────── */
.ju-bandeja { position: relative; width: calc(100% + 28px); max-width: 680px; margin-inline: -14px; aspect-ratio: 1000 / 868; user-select: none; -webkit-user-select: none; }
.ju-base { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 34px 38px rgba(0,0,0,.75)); pointer-events: none; }
.ju-disco { position: absolute; left: calc(var(--cx) - var(--d) / 2); top: calc(var(--cy) - var(--dh) / 2); width: var(--d); aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; will-change: transform; }
.ju-bandeja.agarrado .ju-disco { cursor: grabbing; }
.ju-disco:focus-visible { outline: 3px solid var(--lavanda); outline-offset: 4px; }
.ju-vinilo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ju-gajos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ju-gajos text { font-family: var(--display); font-weight: 900; font-stretch: 125%; fill: #fff; stroke: #8E0051; stroke-width: 10px; paint-order: stroke fill; stroke-linejoin: round; text-transform: uppercase; }
.ju-gajos .g1 { font-size: 96px; }
.ju-gajos .g2 { font-size: 40px; stroke-width: 7px; fill: #FFE3F1; }
.ju-gajos .rayas line { stroke: rgba(255,255,255,.6); stroke-width: 3.4; stroke-dasharray: 12 9; stroke-linecap: round; }
.ju-gajos .aro { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 3.5; }
.ju-etiqueta { position: absolute; left: 50%; top: 50%; width: 31%; translate: -50% -50%; display: grid; place-items: center; pointer-events: none; }
.ju-logo { width: 100%; height: auto; }
.ju-brillo { position: absolute; left: calc(var(--cx) - var(--d) / 2); top: calc(var(--cy) - var(--dh) / 2); width: var(--d); aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: .75;
  background: conic-gradient(from 18deg, transparent 0 9%, rgba(255,255,255,.36) 12%, transparent 17% 52%, rgba(255,255,255,.28) 57%, transparent 63%), radial-gradient(circle at 30% 24%, rgba(255,255,255,.28), transparent 38%); }
.ju-brazo { position: absolute; inset: 0; pointer-events: none; }
.ju-brazo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ju-aguja { position: absolute; left: var(--ax); top: var(--ay); width: 9%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: .5; transition: opacity .4s, scale .4s var(--rebote);
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 8%, rgba(255,31,154,.85) 22%, rgba(255,31,154,0) 66%); }
.ju-bandeja.girando .ju-aguja { opacity: .95; }
.ju-bandeja.para .ju-aguja { opacity: 1; scale: 1.9; animation: ju-fin 1s var(--suave); }
.ju-aguja.tac { animation: ju-tac .16s ease-out; }
@keyframes ju-tac { 0% { scale: 1; } 40% { scale: 1.6; opacity: 1; } 100% { scale: 1; } }
@keyframes ju-fin { 0% { scale: .6; } 40% { scale: 2.6; } 100% { scale: 1.9; } }
.ju-ctl { display: grid; justify-items: center; gap: 12px; text-align: center; }
.ju-girar { min-width: 230px; min-height: 62px; font-size: 1.1rem; }
.ju-ayuda { font-size: .88rem; line-height: 1.45; color: var(--t3); }

/* ───────── dados de acrílico rosa ───────── */
.ju-parabrisas { position: relative; width: min(100%, 560px); height: 372px; border-radius: 36px; overflow: hidden;
  background: radial-gradient(130% 90% at 50% 0%, #351626, #14080F 62%, #0B0609); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1), 0 34px 50px -24px rgba(0,0,0,.9); }
.ju-bokeh { position: absolute; border-radius: 50%; filter: blur(7px); opacity: .55; pointer-events: none; }
.ju-bokeh.b1 { left: 8%; bottom: 14%; width: 46px; height: 46px; background: var(--vivo); }
.ju-bokeh.b2 { left: 26%; bottom: 30%; width: 28px; height: 28px; background: var(--lavanda); }
.ju-bokeh.b3 { right: 12%; bottom: 20%; width: 58px; height: 58px; background: var(--fucsia); }
.ju-bokeh.b4 { right: 30%; bottom: 38%; width: 30px; height: 30px; background: #FFE3F1; opacity: .35; }
.ju-espejo { position: absolute; z-index: 2; top: 0; left: 50%; translate: -50% 0; width: 76%; height: 40px; border-radius: 0 0 26px 26px; background: linear-gradient(#3b2230, #160b12); box-shadow: 0 8px 0 #000, inset 0 -2px 0 rgba(255,255,255,.1); }
.ju-colgantes { position: absolute; z-index: 3; top: 36px; left: 0; right: 0; display: flex; justify-content: center; gap: clamp(20px, 9vw, 64px); }
.ju-dado-col { display: grid; justify-items: center; transform-origin: 50% 0; perspective: 560px; cursor: pointer; touch-action: manipulation; }
@keyframes ju-balanceo { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.ju-cordon { width: 6px; height: 74px; border-radius: 3px; background: repeating-linear-gradient(180deg, #FF1F9A 0 5px, #fff 5px 9px); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.ju-dado { --dd: clamp(104px, 29vw, 138px); --h: calc(var(--dd) / 2); position: relative; width: var(--dd); height: var(--dd); margin-top: -4px; transform-style: preserve-3d; will-change: transform; }
.ju-dado .cara {
  position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 17%; border-radius: 22%; transform: var(--t); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(120% 120% at 24% 18%, #FFD2EA 0%, #FF8CCB 36%, #F0399B 70%, #C4146F 100%);
  box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.4), inset 0 -18px 26px rgba(122,0,69,.42), inset 0 14px 22px rgba(255,255,255,.55);
}
.ju-dado .cara::before { content: ''; position: absolute; inset: 7% 7% 52% 9%; border-radius: 40% 60% 50% 50% / 60% 50% 50% 40%; background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,0) 70%); pointer-events: none; }
.ju-dado .cara[data-v="3"] { filter: brightness(.93); } .ju-dado .cara[data-v="4"] { filter: brightness(.86); }
.ju-dado .cara[data-v="2"] { filter: brightness(1.07); } .ju-dado .cara[data-v="5"] { filter: brightness(.78); } .ju-dado .cara[data-v="6"] { filter: brightness(.82); }
.ju-dado .pip { place-self: center; width: 84%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff 0%, #FFF0F7 55%, #FFC4E3 100%); box-shadow: 0 2px 3px rgba(122,0,69,.6), inset 0 -2px 3px rgba(255,150,205,.7); }
.ju-suma { position: absolute; z-index: 4; left: 50%; bottom: 20px; translate: -50% 0; padding: 8px 20px; border-radius: 12px; background: #fff; color: var(--fucsia); font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: 1.3rem; letter-spacing: .02em; opacity: 0; box-shadow: 0 4px 0 #E3A8C4; }
.ju-suma.si { opacity: 1; animation: ju-pop .6s var(--rebote); }
@keyframes ju-pop { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }

/* ───────── premio: oso, sticker, glowstick ───────── */
.ju-premio { position: relative; display: grid; gap: 18px; justify-items: center; text-align: center; padding: 6px 0 4px; }
.ju-premio-cab { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.ju-premio-oso { width: min(44%, 210px); position: relative; z-index: 1; margin-right: -10px; }
.ju-premio-oso img { width: 100%; height: auto; filter: drop-shadow(0 20px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(255,31,154,.45)); }
.recien .ju-premio-oso { animation: ju-oso 1.1s cubic-bezier(.3, 1.55, .5, 1) both; }
@keyframes ju-oso { 0% { transform: translateY(150%) scale(.7) rotate(-14deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.ju-premio-st { position: relative; z-index: 2; }
.recien .ju-premio-st { animation: ju-sticker .9s var(--rebote) .35s both; }
@keyframes ju-sticker { from { transform: scale(2.4) rotate(24deg); opacity: 0; } 30% { opacity: 1; } }
.ju-st .s-centro b { font-size: 2.7rem; letter-spacing: -.02em; }
.ju-st .s-centro small { font-size: .8rem; letter-spacing: .12em; }
.ju-premio-t { display: grid; gap: 8px; justify-items: center; }
.ju-premio-tit { font-size: clamp(34px, 9.4vw, 66px); line-height: .9; max-width: 14ch; }
.ju-premio-det { color: var(--t2); font-size: 1rem; max-width: 34ch; }
.ju-glow { width: 100%; display: grid; gap: 12px; justify-items: center; margin-top: 4px; }
.ju-glow-tubo { --resta: 1; position: relative; width: 100%; height: 48px; border-radius: 24px; overflow: hidden; background: rgba(255,31,154,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 0 0 5px rgba(0,0,0,.45), 0 0 calc(10px + var(--resta) * 34px) rgba(255,31,154,calc(.25 + var(--resta) * .5)); }
.ju-glow-lleno { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--resta) * 100%); min-width: 0; border-radius: 24px; background: linear-gradient(180deg, #FFD4EC, #FF1F9A 46%, #D8007A); box-shadow: 0 0 36px 4px rgba(255,31,154,.9); transition: width .5s linear; }
.ju-glow-brillo { position: absolute; left: 16px; right: 16px; top: 8px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.55); mix-blend-mode: overlay; }
.ju-glow-tubo.urgente .ju-glow-lleno { animation: ju-parpadeo .55s steps(2) infinite; }
@keyframes ju-parpadeo { 50% { opacity: .45; } }
.ju-glow-led { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
.ju-glow-led .led .led-et { display: none; }
.ju-glow-et { font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--peluche); }
.ju-premio-btns { display: grid; gap: 12px; justify-items: center; width: 100%; }
.ju-usar { width: min(100%, 360px); min-height: 62px; font-size: 1.1rem; }
.ju-aparte { max-width: 38ch; font-size: .86rem; line-height: 1.45; color: var(--t3); }

/* ───────── sin tiradas ───────── */
.ju-vacio { display: grid; gap: 14px; justify-items: center; text-align: center; }
.ju-vacio-oso { width: min(56%, 230px); }
.ju-vacio-oso img { width: 100%; height: auto; filter: drop-shadow(0 20px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(255,31,154,.4)); }
.ju-vacio-t { display: grid; gap: 14px; justify-items: center; }
.ju-vacio-t .mano { font-size: 1.7rem; }
.ju-vacio-t .d-m { max-width: 14ch; }
.ju-pasos { display: grid; gap: 10px; text-align: left; counter-reset: p; max-width: 380px; }
.ju-pasos li { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; font-size: .96rem; line-height: 1.4; }
.ju-pasos b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fucsia); color: #fff; font-family: var(--display); font-weight: 900; font-stretch: 118%; box-shadow: 0 3px 0 var(--fucsia-oo); }
.ju-vacio-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 4px; }

/* ───────── historial ───────── */
.ju-hist-sec .sec { display: grid; gap: 10px; }
.ju-hist { display: grid; gap: 10px; max-width: 680px; }
.ju-h { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #EFB4CE; }
.ju-h b { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: .95rem; text-transform: uppercase; color: var(--tinta); }
.ju-h span { grid-column: 1; font-size: .8rem; color: rgba(26,10,18,.62); }
.ju-h em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-family: var(--display); font-weight: 900; font-stretch: 115%; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: var(--tinta); color: var(--peluche); rotate: -3deg; }
.ju-h.vencido { opacity: .8; } .ju-h.vencido b { text-decoration: line-through; text-decoration-color: var(--fucsia); }
.ju-h.vencido em { background: transparent; color: var(--fucsia); outline: 2.5px solid var(--fucsia); outline-offset: -2.5px; }

/* ───────── compu ───────── */
@media (min-width: 900px) {
  .ju-sec { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'texto escena' 'modos escena'; gap: 28px 56px; align-items: center; min-height: calc(100svh - var(--top-h) - 40px); }
  .ju-texto { grid-area: texto; align-self: end; }
  .ju-escena { grid-area: escena; }
  .ju-pie { grid-area: modos; justify-items: start; align-self: start; }
  .ju-modos { justify-content: flex-start; }
  .ju-tit { font-size: clamp(90px, 9vw, 150px); }
  .ju-bandeja { width: 100%; margin-inline: 0; }
  .ju-premio-oso { width: min(40%, 240px); }
  .ju-premio-tit { font-size: clamp(40px, 4.4vw, 72px); }
}
@media (max-width: 380px) {
  .ju-parabrisas { height: 330px; }
  .ju-girar { min-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .recien .ju-premio-oso, .recien .ju-premio-st, .ju-suma.si, .ju-aguja.tac, .ju-bandeja.para .ju-aguja { animation: none !important; }
  .ju-dado-col { animation: none !important; }
  .ju-glow-lleno { transition: none; }
}

/* Con premio: sin títulos y todo en una pantalla, sin deslizar (pedido de Santiago) */
.ju:has(.ju-premio) .ju-texto, .ju:has(.ju-premio) .ju-pie, .ju:has(.ju-premio) .ju-premio-t .sobre { display: none; }
.ju:has(.ju-premio) .ju-cab .sec { padding-block: 8px 12px; min-height: calc(100svh - 54px - 18px - var(--seg-t) - 66px - 12px - 28px - var(--seg-b)); display: grid; align-content: center; }
.ju-premio { gap: 10px; padding: 0; }
.ju-premio-cab { height: clamp(150px, 26svh, 230px); }
.ju-premio-oso { width: auto; height: 100%; margin-right: -14px; }
.ju-premio-oso img { width: auto; height: 100%; }
.ju-premio-st .sticker { --s-tam: clamp(120px, 21svh, 176px) !important; }
.ju-premio-tit { font-size: clamp(30px, 7.6vw, 56px); }
.ju-premio-det { font-size: .92rem; }
.ju-glow { gap: 8px; margin-top: 0; }
.ju-glow-tubo { height: 34px; }
.ju-glow-led .led { --led-alto: 34px !important; }
.ju-premio-btns { gap: 8px; }
.ju-aparte { font-size: .78rem; }
@media (max-height: 700px) { .ju-premio-det { display: none; } .ju-premio-cab { height: 130px; } }
.ju-premio-st .sticker .s-centro { max-width: 74%; }
.ju-premio-st .sticker .s-centro b { font-size: clamp(1.5rem, 7.4vw, 2.6rem); letter-spacing: -.03em; line-height: .9; overflow-wrap: anywhere; }

/* ───────── todo en una pantalla: título chico, modos arriba, el juego y el botón sin deslizar (pedido de Santiago) ───────── */
.ju-cab .ju-sec { gap: 10px !important; padding-top: 6px !important; padding-bottom: 14px !important; }
.ju-texto { gap: 2px !important; order: 0; }
.ju-texto .sobre { display: none; }
.ju-tit { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 .28em !important; font-size: clamp(30px, 8.6vw, 44px) !important; line-height: 1 !important; padding-top: 0 !important; }
.ju-tit .extruido { font-size: 1em !important; margin-top: 0 !important; }
.ju-sub { font-size: .82rem !important; line-height: 1.35 !important; }
.ju-pie { order: 1; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between !important; gap: 8px !important; }
.ju-pie .ju-meta { min-height: 0 !important; }
.ju-modos { gap: 6px !important; }
.ju-modos .pulsera, .ju-pie .pulsera { height: 34px !important; font-size: .66rem !important; padding: 0 10px 0 13px !important; }
.ju-modos .pulsera .precinto, .ju-pie .pulsera .precinto { width: 16px; height: 22px; }
.ju-escena { order: 2; }
.ju-bandeja { width: min(calc(100% + 28px), calc((100svh - 360px) * 1.152)) !important; margin-inline: auto !important; }
.ju-parabrisas { max-height: calc(100svh - 360px); }
.ju-ctl { gap: 6px !important; margin-top: 4px; }
.ju-girar { min-height: 56px !important; }
.ju-ayuda { font-size: .76rem !important; line-height: 1.3 !important; }
.ju-ayuda br { display: none; }
@media (max-height: 700px) { .ju-sub, .ju-ayuda { display: none; } .ju-bandeja { width: min(calc(100% + 28px), calc((100svh - 300px) * 1.152)) !important; } }
@media (min-width: 900px) {
  .ju-cab .ju-sec { padding-top: 24px !important; min-height: calc(100svh - 72px - 120px) !important; }
  .ju-tit { font-size: clamp(48px, 4.4vw, 72px) !important; }
  .ju-sub { font-size: .98rem !important; }
  .ju-pie { justify-content: flex-start !important; }
  .ju-bandeja { width: min(100%, calc((100svh - 260px) * 1.152)) !important; }
}
.ju-parabrisas { height: min(372px, calc(100svh - 360px)) !important; }
@media (max-height: 700px) { .ju-parabrisas { height: min(372px, calc(100svh - 300px)) !important; } }
@media (max-height: 700px) {
  .ju-bandeja { width: min(calc(100% + 28px), calc((100svh - 390px) * 1.152)) !important; }
  .ju-parabrisas { height: min(372px, calc(100svh - 345px)) !important; }
}
.ju-ayuda { white-space: normal !important; text-align: center; max-width: 36ch; }
.ju-cab .ju-sec { padding-top: 14px !important; }
@media (max-height: 700px) { .ju-parabrisas { height: min(372px, calc(100svh - 385px)) !important; } }
/* tiradas y vinilo/dados en una sola fila */
.ju-pie { flex-wrap: nowrap !important; }
.ju-pie .ju-meta { flex: none !important; width: auto !important; }
.ju-pie .ju-modos { flex: none; flex-wrap: nowrap !important; }
@media (max-width: 370px) { .ju-modos .pulsera, .ju-pie .pulsera { padding: 0 8px 0 10px !important; font-size: .6rem !important; } }