@font-face {
  font-family: 'Fredoka';
  src: url('fonts/Fredoka.woff2') format('woff2');
  font-weight: 300 700;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter.woff2') format('woff2');
  font-weight: 100 800;
}
@font-face {
  font-family: 'Paytone One';
  src: url('fonts/PaytoneOne.woff2') format('woff2');
  font-weight: 400;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body { font-family: 'Inter', system-ui, sans-serif; background: #2a0f3d; }
button { font-family: inherit; border: none; background: transparent; cursor: pointer; }
.hidden { display: none !important; }

@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@keyframes breatheSoft { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes warmflicker { 0%,100% { opacity: 1; } 38% { opacity: .8; } 55% { opacity: .95; } 72% { opacity: .85; } }
@keyframes cardglow { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
@keyframes swingIn { 0% { transform: rotate(var(--sd,9deg)); } 17% { transform: rotate(calc(var(--sd,9deg) * -0.6)); } 34% { transform: rotate(calc(var(--sd,9deg) * 0.4)); } 51% { transform: rotate(calc(var(--sd,9deg) * -0.25)); } 68% { transform: rotate(calc(var(--sd,9deg) * 0.14)); } 84% { transform: rotate(calc(var(--sd,9deg) * -0.06)); } 100% { transform: rotate(0deg); } }
@keyframes markpulse { 0% { transform: scale(.6); opacity: .95; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes rollin { 0% { transform: translate(-34px,-26px) rotate(-160deg) scale(.65); opacity: 0; } 42% { opacity: 1; } 63% { transform: translate(0,7px) rotate(12deg) scale(1.14,.88); } 80% { transform: translate(0,-3px) rotate(-4deg) scale(.95,1.06); } 92% { transform: translate(0,1px) rotate(1deg) scale(1.02,.98); } 100% { transform: translate(0,0) rotate(0) scale(1); } }
@keyframes ribbon { 0% { transform: translateX(-20px) scale(.6); opacity: 0; } 14% { transform: translateX(0) scale(1); opacity: 1; } 74% { transform: translateX(0) scale(1); opacity: 1; } 100% { transform: translateX(0) scale(1); opacity: 0; } }
@keyframes winframe { 0%,100% { box-shadow: 0 0 0 3px rgba(255,209,102,.9), 0 0 20px 5px rgba(255,180,70,.7), inset 0 0 18px rgba(255,200,90,.7); } 50% { box-shadow: 0 0 0 3px rgba(255,244,190,1), 0 0 34px 9px rgba(255,205,90,.95), inset 0 0 26px rgba(255,220,120,.95); } }
@keyframes confettifall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } }
@keyframes letterdrop { 0% { transform: translateY(-360px) scale(.4) rotate(-12deg); opacity: 0; } 55% { opacity: 1; } 70% { transform: translateY(18px) scale(1.12) rotate(3deg); } 85% { transform: translateY(-8px) scale(.97) rotate(-1deg); } 100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; } }
@keyframes trophypop { 0% { transform: translateY(90px) scale(.5); opacity: 0; } 60% { opacity: 1; } 76% { transform: translateY(-10px) scale(1.08); } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes popin { 0% { opacity: 0; transform: scale(.6) rotate(-4deg); } 60% { opacity: 1; transform: scale(1.05) rotate(1deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
/* popin para lo que se centra con translateX(-50%): las propiedades animadas pisan la
   declaracion normal, asi que el translate tiene que viajar DENTRO de cada frame o el
   elemento queda corrido medio ancho a la derecha. */
@keyframes popinCentered { 0% { opacity: 0; transform: translateX(-50%) scale(.6) rotate(-4deg); } 60% { opacity: 1; transform: translateX(-50%) scale(1.05) rotate(1deg); } 100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } }

.door { position: fixed; inset: 0; overflow: hidden; background: #2a0f3d; }
.door-breathe { position: absolute; inset: 0; animation: breathe 9s ease-in-out infinite; transform-origin: 50% 44%; }
.door-bg { position: absolute; inset: 0; background: url('assets/booth-bg-v2.webp') center/cover no-repeat; }
.door-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 3vh; }
.door-title { margin-top: 11vh; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: .5px; color: #ffdf8a; text-shadow: 0 1px 0 #7a3b00, 0 2px 4px rgba(0,0,0,.6), 0 0 14px rgba(255,190,90,.5); animation: breathe 9s ease-in-out infinite; }
.door-logo { margin-top: 2vh; width: 52%; max-width: 240px; transform: rotate(2.5deg); filter: drop-shadow(0 0 18px rgba(255,196,96,.6)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); animation: breathe 9s ease-in-out infinite; }
.door-buttons { margin-top: 4vh; width: 72%; max-width: 320px; display: flex; flex-direction: column; gap: 16px; }
.door-opt { height: 108px; border-radius: 16px; display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 0 20px; animation: floaty 3.8s ease-in-out infinite; transition: transform .2s cubic-bezier(.34,1.4,.5,1); }
.door-opt:active { transform: scale(.95); }
.door-opt img { height: 58px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.door-opt span { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px; color: #fff2d6; text-shadow: 0 1px 3px rgba(0,0,0,.6); text-align: left; }
.door-opt-scan { border: 1px solid rgba(180,140,255,.45); background: linear-gradient(160deg, rgba(70,30,120,.55), rgba(30,12,55,.6)); box-shadow: 0 4px 16px -8px rgba(150,90,255,.5); }
.door-opt-code { border: 1px solid rgba(255,190,110,.45); background: linear-gradient(160deg, rgba(120,65,20,.55), rgba(55,28,10,.6)); box-shadow: 0 4px 16px -8px rgba(255,170,80,.5); animation-delay: .9s; }
.door-sub { margin-top: 3vh; width: 66%; text-align: center; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; color: rgba(255,235,200,.92); text-shadow: 0 1px 3px rgba(0,0,0,.6); animation: breathe 9s ease-in-out infinite; }
.door-back { margin-top: 2vh; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,235,200,.5); color: #fff2d6; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14px; background: rgba(20,8,36,.45); backdrop-filter: blur(4px); }

.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(10,4,20,.62); backdrop-filter: blur(3px); animation: fadein .3s ease both; }
.sheet-card { width: 86%; max-width: 380px; padding: 22px 20px; border-radius: 20px; background: linear-gradient(160deg, rgba(52,22,80,.97), rgba(26,10,44,.97)); box-shadow: 0 20px 44px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12); animation: popin .4s cubic-bezier(.34,1.4,.5,1) both; display: flex; flex-direction: column; gap: 10px; }
.sheet-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 17px; color: #ffdf9a; letter-spacing: .5px; text-align: center; margin-bottom: 4px; }
.sheet-label { font-size: 12px; color: #d8c8ec; }
.sheet-input, .sheet-code { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,220,150,.35); background: rgba(14,5,26,.7); color: #fff2d6; font-family: 'Inter', sans-serif; font-size: 15px; outline: none; }
.sheet-code { font-size: 11px; font-family: monospace; resize: none; }
.sheet-go { margin-top: 6px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #ffd98a, #f5a623); color: #3a1c00; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .5px; box-shadow: 0 8px 20px -8px rgba(245,166,35,.8); }
.sheet-go:active { transform: scale(.97); }
.sheet-cancel { height: 40px; color: rgba(255,235,200,.75); font-size: 13px; }

.play { position: fixed; inset: 0; overflow: hidden; background: #2a0f3d; display: flex; flex-direction: column; }
.play-bg { position: absolute; inset: -4%; background: url('assets/player-bg.webp') center 38%/cover no-repeat; transform-origin: 50% 42%; animation: breatheSoft 16s ease-in-out infinite; }
.play-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(135% 100% at 50% 32%, transparent 40%, rgba(6,2,14,.68) 100%); }
.play-warm { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(92% 48% at 50% -6%, rgba(255,198,120,.4), rgba(255,150,80,.12) 46%, transparent 66%); animation: warmflicker 4.5s ease-in-out infinite; }
.play-deco { position: absolute; top: 24%; width: 22%; filter: blur(4.5px); opacity: .28; animation: floaty 5s ease-in-out infinite; pointer-events: none; }
.play-deco-l { left: 2%; }
.play-deco-r { right: 2%; animation-delay: .8s; }

.banner-zone { position: relative; z-index: 30; flex: none; display: flex; justify-content: center; padding-top: 8px; perspective: 800px; }
.banner-wrap { position: relative; }
@keyframes bannersway { 0%,100% { transform: rotateY(-4deg); } 50% { transform: rotateY(4deg); } }
.banner { position: relative; display: flex; align-items: stretch; transform-origin: 50% 50%; animation: bannersway 4.6s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(255,60,20,.4)); }
.banner-tail { width: 20px; background: linear-gradient(#a30d0d, #5e0606); }
.banner-tail-l { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.banner-tail-r { clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
.banner-body { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 18px; background: linear-gradient(90deg, #7a0000, #ff2a2a 50%, #7a0000); border-bottom: 3px solid #5e0606; box-shadow: inset 0 2px 0 rgba(255,220,150,.35), inset 0 -3px 6px rgba(0,0,0,.4); }
.banner-body::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(62% 130% at 50% 46%, rgba(255,255,255,.34), transparent 68%); }
.banner-text { line-height: 1.05; }
.banner-carton { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 18px; color: #fff6df; letter-spacing: .5px; text-shadow: 0 1px 0 #6e0d0d, 0 2px 3px rgba(0,0,0,.7); }
.banner-num { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px; color: #ffd76a; letter-spacing: .5px; text-shadow: 0 1px 0 #6e0d0d, 0 2px 3px rgba(0,0,0,.7); }
.pattern-grid { width: 34px; height: 34px; display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; padding: 3px; background: rgba(40,8,8,.4); border-radius: 6px; border: 1px solid rgba(255,220,150,.5); }
.pattern-grid span { border-radius: 50%; background: rgba(255,246,223,.28); }
.pattern-grid span.lit { background: #ffd76a; box-shadow: 0 0 3px rgba(255,215,106,.9); }
.round-line { position: relative; z-index: 30; text-align: center; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1.2px; color: #ffe6a8; text-shadow: 0 1px 3px rgba(0,0,0,.7); margin-top: 4px; opacity: .9; }

.chips { position: relative; z-index: 30; display: flex; justify-content: center; gap: 8px; padding: 8px 12px 0; flex-wrap: wrap; }
.chip { padding: 7px 14px; border-radius: 999px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 12px; border: 1px solid rgba(255,220,150,.4); color: #ffe6a8; background: rgba(30,10,50,.55); backdrop-filter: blur(4px); }
.chip-active { background: linear-gradient(135deg, #ffd98a, #f5a623); color: #3a1c00; border-color: transparent; }
/* El de agregar se distingue del bingo en que estas: borde punteado y sin relleno, para que
   se lea como "hay lugar para otro" y no como uno mas al que podes cambiar. */
.chip-add { border-style: dashed; border-color: rgba(255,220,150,.55); background: transparent; color: #ffd98a; }

.tube-zone { position: relative; z-index: 6; flex: none; display: flex; justify-content: center; padding: max(12px, env(safe-area-inset-top)) 12px 2px; }
.tube { position: relative; width: 100%; max-width: 264px; border-radius: 26px; background: linear-gradient(to bottom, rgba(255,255,255,.20), rgba(255,255,255,.05)); border: 2px solid rgba(255,255,255,.18); box-shadow: inset 0 2px 6px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.18), 0 6px 16px -6px rgba(0,0,0,.5); backdrop-filter: blur(6px); padding: 17px 10px 7px; }
.tube-gloss { position: absolute; left: 12px; right: 12px; top: 5px; height: 6px; border-radius: 10px; background: rgba(255,255,255,.35); filter: blur(1px); pointer-events: none; }
.tube-label { position: absolute; top: 3px; left: 0; width: 100%; text-align: center; font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; color: #fff; opacity: .82; }
.tube-row { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 40px; }
.ball { position: relative; width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ball-new { animation: rollin .85s cubic-bezier(.22,1,.36,1) both; }
.ball-core { width: 66%; height: 66%; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #ffffff, #e7ebf1); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ball-letter { font-family: 'Paytone One', sans-serif; font-size: 7px; opacity: .85; }
.ball-num { font-family: 'Paytone One', sans-serif; font-size: 12px; }
.tube-empty { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,.75); display: flex; align-items: center; min-height: 48px; }

.stage { position: relative; z-index: 5; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 0 10px; margin-top: -40px; touch-action: pan-y; }
.peek { position: absolute; top: 24%; height: 46%; aspect-ratio: 1003/1214; z-index: 1; opacity: .9; pointer-events: none; filter: drop-shadow(0 12px 18px rgba(10,3,20,.5)) brightness(.8); }
.peek-l { left: 0; transform: translateX(-96%); }
.peek-r { right: 0; transform: translateX(96%); }
@keyframes peekNudgeL { 0% { transform: translateX(-96%); } 45% { transform: translateX(-88%); } 100% { transform: translateX(-96%); } }
@keyframes peekNudgeR { 0% { transform: translateX(96%); } 45% { transform: translateX(88%); } 100% { transform: translateX(96%); } }
.peek-l.peek-nudge { animation: peekNudgeL .8s cubic-bezier(.34,1.2,.5,1); }
.peek-r.peek-nudge { animation: peekNudgeR .8s cubic-bezier(.34,1.2,.5,1); }
@keyframes numzoom { 0% { transform: scale(1); } 34% { transform: scale(1.6); text-shadow: 0 0 14px rgba(255,215,106,.95), 0 0 26px rgba(255,158,30,.8); } 100% { transform: scale(1); } }
.num-pulse { display: inline-block; transform-origin: left center; animation: numzoom .9s ease both; }
@keyframes bannerIn { 0% { transform: translateX(var(--bntx, 0)); opacity: .3; } 100% { transform: translateX(0); opacity: 1; } }
.banner-slide { animation: bannerIn .55s cubic-bezier(.34,1.2,.5,1) both; }
@keyframes sparkfly { 0% { transform: translate(0,0) scale(0); opacity: 0; } 18% { transform: translate(var(--dx,0), var(--dy,-10px)) scale(1.5); opacity: 1; } 100% { transform: translate(calc(var(--dx,0) * 2.4), calc(var(--dy,-10px) * 2.4)) scale(.2); opacity: 0; } }
.banner-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.banner-sparks span { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0%, #fff2c4 45%, #ffb43c 75%, transparent 82%); box-shadow: 0 0 10px 3px #ffe08a, 0 0 18px 6px rgba(255,160,50,.7); animation: sparkfly .7s ease-out both; }
.rail { width: 116%; max-width: 460px; flex: none; z-index: 1; }
.rail img { width: 100%; display: block; transform: scaleY(.82); transform-origin: center; pointer-events: none; filter: drop-shadow(0 8px 12px rgba(10,3,20,.5)); }
@keyframes railslide { 0% { transform: translateX(0); } 45% { transform: translateX(var(--rtx, 0)); } 100% { transform: translateX(0); } }
.rail-slide { animation: railslide .9s cubic-bezier(.34,1.1,.5,1) both; }
.hanger { position: relative; flex: none; width: 100%; display: flex; align-items: flex-start; justify-content: center; margin-top: -2.6%; transform-origin: 50% -7%; }
.hanger-swing { animation: swingIn 1.7s cubic-bezier(.34,1.2,.5,1) both; }
.cord { position: absolute; top: -28px; width: 6px; height: 40px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.6); z-index: 3; transform-origin: top center; }
.cord-l { left: 8%; background: repeating-linear-gradient(-58deg, #e6b56e 0 3px, #a86e30 3px 6px); transform: rotate(9deg); }
.cord-r { right: 8%; background: repeating-linear-gradient(58deg, #e6b56e 0 3px, #a86e30 3px 6px); transform: rotate(-9deg); }
.knob { position: absolute; top: 10px; width: 18px; height: 18px; border-radius: 50%; border: 4px solid #b98a4a; background: radial-gradient(circle at 40% 35%, #d9ad63, #7c5628); transform: translate(-50%,-50%); box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,235,190,.6); z-index: 4; }
.knob-l { left: 10%; }
.knob-r { left: 90%; }
.card-box { position: relative; width: 300px; aspect-ratio: 1003/1214; margin-top: 30px; }
.card-glow { position: absolute; left: 2%; right: 2%; top: 16%; bottom: 6%; border-radius: 20px; background: radial-gradient(60% 55% at 50% 45%, rgba(255,206,120,.55), rgba(255,150,70,.18) 55%, transparent 75%); filter: blur(14px); pointer-events: none; animation: cardglow 3.5s ease-in-out infinite; }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 16px 22px rgba(10,3,20,.55)); }
.win-frame { position: absolute; left: 6%; right: 6%; top: 19%; bottom: 5.5%; border-radius: 14px; pointer-events: none; z-index: 6; animation: winframe 1s ease-in-out infinite; }
.cells { position: absolute; left: 7.14%; right: 6.74%; top: 19.77%; bottom: 7%; display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(5,1fr); z-index: 4; }
.cell { position: relative; display: grid; place-items: center; }
.cell-chip { width: 88%; height: 88%; border-radius: 22%; display: grid; place-items: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(15px, 5.4vw, 23px); color: #4a3618; background: rgba(255,255,255,.8); box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 1px 3px rgba(90,50,10,.28); }
.cell-colhi .cell-chip { background: rgba(255,255,255,.96); }
.cell-marked .cell-chip { border-radius: 50%; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.6); box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.cell-hit-ring { position: absolute; inset: 14%; border-radius: 50%; border: 2.5px solid #ffd76a; box-shadow: 0 0 16px #ffd76a; animation: markpulse .75s ease-out both; pointer-events: none; z-index: 3; }

.minis { position: relative; z-index: 22; flex: none; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding: 8px 12px 4px; overflow-x: auto; scrollbar-width: none; }
.minis::-webkit-scrollbar { display: none; }
.mini { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mini-thumb { display: block; width: 30px; aspect-ratio: 1003/1214; filter: brightness(.62); transition: width .25s cubic-bezier(.34,1.2,.5,1), transform .25s; }
.mini-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mini-label { display: none; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 9px; padding: 0 7px; border-radius: 999px; background: linear-gradient(135deg, #ffd98a, #f5a623); color: #3a1c00; box-shadow: 0 3px 8px -2px rgba(245,166,35,.7); }
.mini-active .mini-thumb { width: 42px; filter: none; transform: translateY(-3px); }
.mini-active .mini-thumb img { filter: drop-shadow(0 0 9px rgba(255,215,106,.95)) drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.mini-active .mini-label { display: block; }

.round-strip { position: relative; z-index: 22; flex: none; margin: 0 auto 4px; padding: 8px 18px; border-radius: 999px; background: linear-gradient(135deg, rgba(60,30,110,.92), rgba(30,12,60,.92)); box-shadow: 0 12px 30px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px; color: #fff2d0; text-align: center; animation: popin .4s cubic-bezier(.34,1.5,.5,1) both; }

.trophy { position: absolute; left: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); width: 58px; aspect-ratio: 450/571; z-index: 9; transition: transform .15s; }
.trophy:active { transform: scale(.93); }
.trophy img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 90%; animation: breatheSoft 4.5s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255,200,90,.8)) drop-shadow(0 5px 9px rgba(0,0,0,.55)); }
.prize-ribbon { position: absolute; left: 76px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 11; pointer-events: none; animation: ribbon 2.6s ease-out forwards; }
.prize-ribbon > div, .prize-ribbon { display: flex; }
.prize-ribbon span { display: flex; align-items: center; height: 40px; padding: 0 20px 0 26px; background: linear-gradient(90deg, #ff2a2a, #b81414); border-top: 2px solid #ffd67a; border-bottom: 2px solid #6f0f0f; box-shadow: 0 4px 12px rgba(0,0,0,.5); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px; color: #fff; letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; }

.mega { position: absolute; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); width: 76px; aspect-ratio: 408/375; z-index: 9; transition: transform .15s; }
.mega:active { transform: scale(.92); }
.mega img { width: 100%; height: 100%; object-fit: contain; }
.mega-off img { filter: saturate(.55) brightness(.82) drop-shadow(0 5px 9px rgba(0,0,0,.5)); }
.mega-on { animation: floaty 1.6s ease-in-out infinite; }
.mega-on img { filter: drop-shadow(0 0 14px #ffd75a) drop-shadow(0 0 26px rgba(255,170,60,.7)) drop-shadow(0 5px 9px rgba(0,0,0,.5)); }
.mega-badge { position: absolute; top: -12px; right: 0; background: #ff2a2a; color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 10px; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.5); animation: bob 1.4s ease-in-out infinite; }

.navbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; align-items: center; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(30,10,46,0) 0%, rgba(24,8,38,.34) 55%, rgba(16,6,28,.5) 100%); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px); mask-image: linear-gradient(180deg, transparent 0, #000 18px); }
.nav-btn { width: 46px; height: 46px; display: grid; place-items: center; transition: transform .18s cubic-bezier(.34,1.4,.5,1); }
.nav-btn:active { transform: scale(.9); }
.nav-btn img { max-width: 42px; max-height: 42px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255,215,130,.9)) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.nav-btn-big img { max-width: 58px; max-height: 58px; }

.log-chip { position: absolute; left: 8px; top: calc(8px + env(safe-area-inset-top)); z-index: 32; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(20,8,36,.35); border: 1px solid rgba(255,235,200,.18); backdrop-filter: blur(4px); opacity: .55; }
.log-chip span { font-size: 15px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

.toast { position: absolute; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 46; padding: 10px 20px; border-radius: 999px; background: linear-gradient(135deg, rgba(60,30,110,.94), rgba(30,12,60,.94)); box-shadow: 0 12px 30px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px; color: #fff2d0; white-space: nowrap; animation: popinCentered .35s cubic-bezier(.34,1.5,.5,1) both; pointer-events: none; }

.waiting { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #fff; }
.waiting-emoji { font-size: 44px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.waiting-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 19px; text-shadow: 0 2px 5px rgba(0,0,0,.5); }
.waiting-sub { font-family: 'Inter', sans-serif; font-size: 12.5px; opacity: .75; }

.celebrate { position: fixed; inset: 0; z-index: 70; overflow: hidden; cursor: pointer; background: radial-gradient(120% 90% at 50% 34%, rgba(24,10,46,.35), rgba(8,3,18,.6)); }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti span { position: absolute; top: -24px; animation: confettifall ease-in forwards; }
.celebrate-bottom { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.bingo-letters { display: flex; justify-content: center; gap: 3px; }
.bingo-letters span { display: inline-block; font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 32px; text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.4), 0 0 16px rgba(255,205,110,.85); animation: letterdrop .9s cubic-bezier(.3,1.5,.5,1) both; }
.celebrate-what { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 16px; color: #fff2d0; text-shadow: 0 2px 6px rgba(0,0,0,.7); animation: fadein .8s ease .6s both; }
.celebrate-trophy { width: 72%; max-width: 320px; object-fit: contain; filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)); animation: trophypop .9s cubic-bezier(.3,1.5,.5,1) .1s both; }

@keyframes flagglow { 0%,100% { transform: scale(1); filter: brightness(1.05) drop-shadow(0 0 10px rgba(255,205,120,.7)) drop-shadow(0 4px 8px rgba(0,0,0,.5)); } 50% { transform: scale(1.08); filter: brightness(1.28) drop-shadow(0 0 22px rgba(255,222,140,1)) drop-shadow(0 4px 8px rgba(0,0,0,.5)); } }
@keyframes halosweep { 0% { transform: translateX(-48%) translateY(2%); opacity: .4; } 25% { opacity: .85; } 50% { transform: translateX(48%) translateY(-6%); opacity: .55; } 75% { opacity: .85; } 100% { transform: translateX(-48%) translateY(2%); opacity: .4; } }
@keyframes sparkout { 0% { opacity: 1; transform: rotate(var(--rot,0deg)) translateX(0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--rot,0deg)) translateX(74px) scale(.3); } }

.lang-modal { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; background: rgba(10,4,20,.62); backdrop-filter: blur(3px); animation: fadein .3s ease both; }
.lang-panel { position: relative; width: 88%; max-width: 420px; animation: popin .5s cubic-bezier(.34,1.5,.5,1) both; }
.lang-close { position: absolute; right: -2%; top: -6%; width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,220,150,.7); background: radial-gradient(circle at 38% 32%, #4a2410, #1e0d05); color: #ffd99a; font-size: 20px; font-weight: 700; line-height: 1; z-index: 6; box-shadow: 0 4px 12px rgba(0,0,0,.55), 0 0 12px rgba(255,180,90,.5); transition: transform .18s cubic-bezier(.34,1.4,.5,1); }
.lang-close:active { transform: scale(1.12) rotate(90deg); }
.lang-pin { position: absolute; left: 50%; top: -9%; width: 29%; transform: translateX(-50%); z-index: 3; }
.lang-seal { width: 100%; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.lang-globe { position: absolute; left: 50%; top: 46%; width: 44%; transform: translate(-50%,-50%); filter: drop-shadow(0 0 10px rgba(255,196,96,.8)); }
.lang-board { width: 100%; display: block; filter: drop-shadow(0 18px 34px rgba(0,0,0,.6)); }
.lang-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 11% 10% 12%; }
.lang-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 19px; color: #fff2d0; text-shadow: 0 1px 0 #5a2400, 0 2px 5px rgba(0,0,0,.55); margin-bottom: 10px; text-align: center; line-height: 1.1; }
.lang-flags { position: relative; display: flex; gap: 20px; align-items: center; justify-content: center; }
.lang-halo { position: absolute; inset: -10% -4%; z-index: 0; pointer-events: none; margin: auto; width: 66%; height: 74%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,216,132,.55) 0%, rgba(255,172,80,.24) 42%, rgba(255,150,60,0) 72%); filter: blur(16px); animation: halosweep 4.5s ease-in-out infinite; }
.lang-flag { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: transform .2s cubic-bezier(.34,1.4,.5,1); }
.lang-flag:active { transform: translateY(-4px) scale(1.08); }
.lang-flag img { width: 104px; object-fit: contain; animation: flagglow 2.6s ease-in-out infinite; }
.lang-flag span { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13px; color: #fff2d0; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lang-sparks { position: absolute; left: 50%; top: 42%; z-index: 5; pointer-events: none; }
.lang-sparks i { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 7px #ffe08a, 0 0 13px #ffb43c; animation: sparkout .72s ease-out both; }

/* El "no" del organizador, en la puerta y no escondido en el registro. Rojo sobre el fondo
   oscuro de la puerta, con el ancho de la bajada para que se lea de un vistazo. */
.door-trouble { margin-top: 1.6vh; width: 78%; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,120,120,.45); background: rgba(90,12,12,.55); text-align: center; font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.45; color: #ffd8d8; }

/* El carnet: lo que el comprador le ENSENA a quien le vende. El numero se lee de lejos y
   con poca luz, asi que va grande, en dos grupos de cuatro y con cifras de ancho fijo; el
   QR sobre blanco puro porque la camara de enfrente lo lee de una pantalla. */
.door-badge { margin-top: 2.4vh; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 20px 10px; border-radius: 16px; border: 1px solid rgba(255,220,150,.42); background: rgba(20,8,36,.5); backdrop-filter: blur(4px); transition: transform .18s cubic-bezier(.34,1.4,.5,1); }
.door-badge:active { transform: scale(.96); }
.door-badge-tag { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 1.6px; color: rgba(255,214,150,.85); }
.door-badge-number { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 2px; color: #ffdf9a; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

.badge-modal { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; background: rgba(10,4,20,.72); backdrop-filter: blur(3px); animation: fadein .28s ease both; }
.badge-panel { position: relative; width: 84%; max-width: 360px; padding: 30px 22px 22px; border-radius: 22px; background: linear-gradient(160deg, rgba(52,22,80,.98), rgba(24,9,40,.98)); box-shadow: 0 22px 48px -14px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12); display: flex; flex-direction: column; align-items: center; gap: 10px; animation: popin .42s cubic-bezier(.34,1.4,.5,1) both; }
.badge-pin { position: absolute; left: 50%; top: -34px; width: 68px; transform: translateX(-50%); }
.badge-seal { width: 100%; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.badge-title { margin-top: 6px; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 2px; color: #ffdf9a; }
.badge-who { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; color: #fff2d6; }
.badge-qr-frame { padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); }
.badge-qr { display: block; width: 190px; height: 190px; image-rendering: pixelated; }
.badge-number { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: 4px; color: #ffdf9a; font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.badge-hint { width: 88%; text-align: center; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45; color: rgba(255,235,200,.8); }

.log-panel { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(10,4,20,.62); backdrop-filter: blur(3px); animation: fadein .25s ease both; }
.log-card { width: 90%; max-width: 420px; max-height: 76vh; padding: 18px 16px 10px; border-radius: 18px; background: linear-gradient(160deg, rgba(40,18,60,.97), rgba(22,8,34,.97)); box-shadow: 0 20px 44px -14px rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 10px; }
.log-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px; color: #ffdf9a; letter-spacing: .5px; }
.log-box { flex: 1; min-height: 120px; overflow-y: auto; font-family: monospace; font-size: 11px; line-height: 1.5; color: #d8c8ec; white-space: pre-wrap; word-break: break-word; }

/* ══ La vista horizontal ══════════════════════════════════════════════════
   El telefono acostado es otra mesa: el tubo se para (riel izquierdo, la bolita
   grande arriba), la navegacion se muda al borde derecho, y el centro es para
   TODOS los cartones a la vez. Con 1-2 cartones se conserva la feria completa
   (riel de madera, cordones, columpio); con 3 o mas el carton se queda solo con
   sus celdas: cada pixel de adorno se convierte en numero legible.
   Nada de esto existe en vertical: fuera del media query, .land es display:none
   y el resto de las reglas no aplican. */

@keyframes lmShake { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 35% { transform: rotate(8deg); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(4deg); } }
/* Las bolitas dentro de la jaula: se revuelven y vuelven a caer al fondo. */
@keyframes lmTumble { 0%,100% { transform: translate(0,0); } 25% { transform: translate(5px,-7px); } 50% { transform: translate(-6px,-3px); } 75% { transform: translate(3px,-5px); } }
@keyframes lmArc { 0% { transform: translate(-86px, 14px) scale(.5); opacity: 0; } 30% { opacity: 1; } 55% { transform: translate(-34px, -16px) scale(.9); } 82% { transform: translate(0, 3px) scale(1.12, .84); } 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes lmGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(255,215,106,.5)); } 50% { filter: drop-shadow(0 0 14px rgba(255,215,106,.95)); } }
@keyframes lmChase { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes lmSplat { 0% { transform: scale(.4); opacity: .95; } 70% { transform: scale(1.15); opacity: .75; } 100% { transform: scale(1); opacity: .55; } }
@keyframes landstep { 0% { transform: translateX(14px); } 100% { transform: translateX(0); } }
@keyframes landwave { 0% { filter: brightness(1); } 40% { filter: brightness(1.7); } 100% { filter: brightness(1); } }
@keyframes landrock { 0% { transform: rotate(0); } 28% { transform: rotate(1.4deg); } 62% { transform: rotate(-.9deg); } 100% { transform: rotate(0); } }
@keyframes faltapop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes faltaglow { 0%,100% { box-shadow: 0 0 3px rgba(255,215,106,.4); } 50% { box-shadow: 0 0 12px rgba(255,215,106,.95); } }
@keyframes landin { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
/* El cambio de pagina es un barrido de cartas: las que se van salen de canto
   hacia un lado y las que llegan entran del otro, se pasan de largo y se
   asientan. --dir es +1 cuando se avanza y -1 cuando se vuelve. */
@keyframes landSweepOut { 0% { transform: translateX(0) rotate(0) scale(1); opacity: 1; } 100% { transform: translateX(calc(var(--dir) * -132px)) rotate(calc(var(--dir) * -8deg)) scale(.78); opacity: 0; } }
@keyframes landSweepIn { 0% { transform: translateX(calc(var(--dir) * 148px)) rotate(calc(var(--dir) * 9deg)) scale(.76); opacity: 0; } 55% { opacity: 1; } 76% { transform: translateX(calc(var(--dir) * -10px)) rotate(calc(var(--dir) * -2deg)) scale(1.035); } 100% { transform: translateX(0) rotate(0) scale(1); opacity: 1; } }
@keyframes miniPop { 0% { transform: translateY(-3px) scale(1); } 45% { transform: translateY(-9px) scale(1.14); } 100% { transform: translateY(-3px) scale(1); } }

.land { display: none; }
.land-lupa { display: none; }

@media (orientation: landscape) and (max-height: 560px) {

  /* Lo vertical se guarda; sus nodos siguen ahi para volver intactos al girar. */
  .tube-zone, .banner-zone, .round-line, .stage, .minis, .play-deco,
  #trophy, #prizeRibbon { display: none !important; }

  .land { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; padding: 0 calc(52px + env(safe-area-inset-right)) 0 env(safe-area-inset-left); }

  /* La noche cambia de color con la tension: a una bolita del bingo, la escena
     entera se dora. Un overlay quieto con transicion; cero animacion permanente. */
  .land::after { content: ''; position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity .8s ease; background: radial-gradient(120% 120% at 50% 40%, rgba(255,205,90,.16), rgba(255,160,40,.07) 55%, transparent 75%); }
  .land.land-hot::after { opacity: 1; }

  /* ── la marquesina: el sorteo vive arriba ── */
  .lm { position: relative; z-index: 9; flex: none; height: 64px; margin-top: env(safe-area-inset-top); display: flex; align-items: center; gap: 8px; padding: 0 10px 0 6px; cursor: pointer;
    background: linear-gradient(180deg, rgba(64,20,32,.92), rgba(42,12,26,.88));
    border-bottom: 4px solid #6b421c; box-shadow: 0 6px 18px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,150,.25), inset 0 -8px 14px -8px rgba(0,0,0,.5); }
  .lm-bulbs { position: absolute; left: 0; right: 0; bottom: -3px; height: 8px; display: flex; justify-content: space-around; pointer-events: none; z-index: 3; }
  .lm-bulbs i { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff6d8, #ffca5f 60%, #b06a10); box-shadow: 0 0 6px rgba(255,200,90,.8); opacity: .55; }
  .lm-bulbs.lm-chasing i { animation: lmChase .5s ease-in-out both; animation-delay: calc(var(--nth) * 45ms); }
  /* La tombola: la jaula de alambre del bingo, dibujada. Antes habia un emoji de
     bola ocho — negra, redonda y con un numero, o sea justo lo que parecen las
     bolitas del sorteo que tiene al lado. Esta se lee como el aparato que las
     revuelve, no como una mas. */
  .lm-drum { flex: none; position: relative; width: 50px; height: 54px; display: flex; align-items: flex-start; justify-content: center; transform-origin: 50% 88%; }
  .lm-drum.lm-shaking { animation: lmShake .5s ease-in-out both; }

  .lm-cage { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 34% 26%, rgba(90,50,130,.5), rgba(26,10,44,.88) 62%);
    border: 2px solid #d9a441;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,.55), inset 0 3px 6px rgba(255,225,160,.3), 0 4px 10px rgba(0,0,0,.55), 0 0 8px rgba(217,164,65,.35); }
  /* Los dos aros de la jaula: el meridiano y el ecuador, en alambre dorado. */
  .lm-cage::before, .lm-cage::after { content: ''; position: absolute; border: 1.5px solid rgba(232,186,96,.7); border-radius: 50%; pointer-events: none; z-index: 2; }
  .lm-cage::before { inset: -1px 30%; }
  .lm-cage::after { inset: 32% -1px; border-color: rgba(232,186,96,.45); }
  /* Las bolitas adentro, con los colores de las bandas. */
  .lm-cage i { position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-shadow: inset -1px -2px 2px rgba(0,0,0,.35), inset 1px 2px 2px rgba(255,255,255,.5); }
  .lm-shaking .lm-cage i { animation: lmTumble .5s ease-in-out both; animation-delay: var(--d); }
  /* El brillo del vidrio, y el pie que la apoya en la madera. */
  .lm-cage-glint { position: absolute; left: 5px; top: 4px; width: 15px; height: 9px; border-radius: 50%; background: linear-gradient(120deg, rgba(255,255,255,.75), rgba(255,255,255,0)); transform: rotate(-24deg); pointer-events: none; z-index: 3; }
  .lm-cage-foot { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 26px; height: 9px; border-radius: 2px 2px 4px 4px; background: linear-gradient(#a8712f, #6b4116); box-shadow: inset 0 1px 0 rgba(255,236,192,.45), 0 2px 5px rgba(0,0,0,.5); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); }
  .lm-throne { flex: none; width: 58px; display: grid; place-items: center; }
  .lm-throne .ball { width: 54px; height: 54px; animation: lmGlow 2.5s ease-in-out infinite; }
  .lm-throne .ball-letter { font-size: 10px; }
  .lm-throne .ball-num { font-size: 20px; }
  .lm-throne .ball.lm-arc { animation: lmArc .6s cubic-bezier(.2,.9,.3,1.15) both, lmGlow 2.5s ease-in-out .6s infinite; }
  /* Cuando el ancho no alcanza (telefono chico + termometro caliente), lo que se
     encoge es la estela y la figura — NUNCA el termometro, que es el que importa
     en ese momento. */
  .lm-trail { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
  .lm-trail .ball { width: 32px; height: 32px; }
  .lm-trail .ball-letter { display: none; }
  .lm-trail .ball-num { font-size: 12px; }
  .lm-trail .ball:nth-child(4) { opacity: .7; }
  .lm-trail .ball:nth-child(5) { opacity: .45; }
  .lm-trail.land-stepped .ball { animation: landstep .28s ease-out both; animation-delay: calc(var(--nth) * 40ms); }
  .land-dim .lm-trail { visibility: hidden; }
  .lm-empty { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255,235,200,.8); white-space: nowrap; }
  .lm-round { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .lm-pattern { flex: none; width: 48px; height: 48px; }
  /* El bloque entero cabe en los 64px de la marquesina: figura a UNA linea y
     premio a dos como mucho — sin eso, juntos suman mas alto que la marquesina
     y el texto de la ronda aparece cortado. */
  .lm-round-text { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; max-width: 240px; max-height: 58px; overflow: hidden; }
  .lm-figure { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.15; color: #ffe6a8; text-shadow: 0 1px 3px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lm-prize { align-self: flex-start; max-width: 170px; padding: 2px 10px; background: linear-gradient(90deg, #7a0000, #ff2a2a 50%, #7a0000); border-top: 1px solid #ffd67a; border-bottom: 2px solid #5e0606; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.5); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

  /* El termometro: en calma cuenta, en alerta manda escuchar UN numero. */
  .lm-thermo { flex: none; display: flex; align-items: center; gap: 7px; margin-left: 4px; padding: 5px 12px; border-radius: 12px; border: 1px solid rgba(255,220,150,.3); background: rgba(20,8,36,.5); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px; color: #ffe6a8; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
  .lm-thermo .ball { width: 34px; height: 34px; }
  .lm-thermo .ball-letter { font-size: 7px; }
  .lm-thermo .ball-num { font-size: 13px; }
  .lm-thermo.lm-hot { border-color: transparent; background: linear-gradient(135deg, #ffd98a, #f5a623); color: #3a1c00; text-shadow: none; animation: faltapop .4s cubic-bezier(.34,1.4,.5,1) both; box-shadow: 0 0 16px rgba(255,205,90,.55); }
  .lm-state { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 22px; border-radius: 999px; background: linear-gradient(135deg, rgba(60,30,110,.96), rgba(30,12,60,.96)); box-shadow: 0 12px 30px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; color: #fff2d0; white-space: nowrap; }
  .lm-state img { height: 30px; }
  .land-hint { position: absolute; right: 4px; bottom: 2px; font-size: 11px; opacity: .5; pointer-events: none; }

  /* Con chips de bingos colgando de la marquesina, la mesa les cede su franja. */
  .land.land-chipsup .land-main { padding-top: 28px; }

  /* ── la mesa: los cartones, ahora a todo el ancho ── */
  .land-main { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 8px; }
  .land.land-dim .land-main { opacity: .85; }
  /* La mesa plana es una grilla con columnas EXACTAS: flex-wrap metia 4 cartones
     en la primera fila cuando cabian por ancho, y el arreglo 3x2 se volvia 4+2. */
  .land-shelf { position: relative; flex: 1; min-width: 0; height: 100%; display: grid; grid-template-columns: repeat(var(--cols, 1), max-content); justify-content: center; align-content: center; justify-items: center; align-items: center; gap: 10px; }

  /* El carton es el MISMO del vertical: card-box + card-img + las celdas
     absolutas encima, con las medidas de siempre. Aca solo se le dice cuanto
     mide la letra, porque el ancho lo decide la mesa y no el viewport. */
  .land-card { position: relative; flex: none; }
  .land-card.land-in { animation: landin .5s cubic-bezier(.34,1.2,.5,1) both; }
  .land-card.land-rock { animation: landrock .6s ease; transform-origin: 50% 12%; }

  /* La capa donde terminan de irse los cartones de la pagina anterior: quedan
     fuera del estante, con su lugar exacto, para que los que llegan puedan
     ocuparlo sin esperar a que la despedida termine. */
  .land-ghost { position: absolute; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; }
  .land-card.land-sweep-out { position: absolute; margin: 0; z-index: 1; animation: landSweepOut .32s cubic-bezier(.45,0,.75,.25) both; }
  .land-card.land-sweep-in { animation: landSweepIn .44s cubic-bezier(.22,.9,.35,1.12) both; }
  .land-card .card-box { margin: 0; }
  .land-card .cell-chip { font-size: var(--lfs, 16px); }
  .land-wave { animation: landwave .45s ease both; }

  /* La chapita del numero: es una FICHA del mismo carton, hablando el idioma de
     las de B-I-N-G-O que tiene tres milimetros mas abajo — mismo redondeo, misma
     luz arriba y sombra adentro, misma letra crema con su sombra dura. Antes era
     una placa de madera sobre un marco de madera: se perdia contra el, y el
     dorado plano de la alerta era de otro mundo que el resto del tablero.
     Descansa a medias sobre el borde de arriba, como una ficha puesta ahi. */
  .land-sign { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 5px; padding: 3px 13px 4px; border-radius: 9px; white-space: nowrap;
    background: linear-gradient(#a8712f, #784916);
    box-shadow: inset 0 2px 0 rgba(255,236,192,.5), inset 0 -3px 5px rgba(0,0,0,.35), 0 4px 9px rgba(10,3,20,.55);
    font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .3px;
    color: #fff3dc; text-shadow: 0 2px 0 rgba(74,40,4,.85); }
  /* Los dos estados toman los colores de las fichas del propio carton: el ambar
     de la I y el rojo de la B. */
  .land-sign-falta { background: linear-gradient(#ffcf68, #de8a10); color: #4a2a00; text-shadow: 0 1px 0 rgba(255,246,222,.65); }
  .land-sign-bingo { background: linear-gradient(#ff6d6d, #bf1717); text-shadow: 0 2px 0 rgba(110,10,10,.8); }
  .land-falta-hot .land-sign { animation: faltaglow 1.8s ease-in-out infinite; }

  /* El golpe no es un anillo: es la ESTAMPA del dauber, como el marcador de
     verdad. El nodo es el mismo cell-hit-ring del vertical, revestido. */
  .land .cell-hit-ring, .land-lupa .cell-hit-ring { border: none; box-shadow: none; inset: -6%; border-radius: 50%; animation: lmSplat .4s ease-out both; background:
    radial-gradient(circle at 50% 50%, rgba(58,28,0,.0) 55%, transparent 56%),
    radial-gradient(circle at 12% 30%, rgba(58,28,0,.5) 5%, transparent 7%),
    radial-gradient(circle at 88% 26%, rgba(58,28,0,.45) 4%, transparent 6%),
    radial-gradient(circle at 20% 85%, rgba(58,28,0,.5) 5%, transparent 7%),
    radial-gradient(circle at 82% 80%, rgba(58,28,0,.4) 4%, transparent 7%),
    radial-gradient(circle at 50% 6%, rgba(58,28,0,.45) 4%, transparent 6%); }

  /* Las miniaturas del paginado: el idioma de la vista vertical, abajo de la
     mesa. Todas las cartas a la vista; la etiqueta cuenta el estado. */
  .land-minis { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; z-index: 12; display: flex; justify-content: center; align-items: flex-end; gap: 12px; padding-bottom: 3px; }
  .land-minis .mini-thumb { width: 24px; }
  .land-minis .mini-active .mini-thumb { width: 32px; }
  .land-minis .mini-label { display: block; font-size: 10px; padding: 0 8px; }
  /* El estado colorea la etiqueta aunque la mini este apagada — la dorada
     importa MAS cuando su carton no esta a la vista. */
  .land-minis .mini:not(.mini-active) .mini-label { background: rgba(30,10,50,.75); color: #d8c8ec; box-shadow: none; }
  .land-minis .mini.land-mini-falta .mini-label { background: linear-gradient(135deg, #ffd98a, #f5a623); color: #3a1c00; }
  .land-minis .mini.land-mini-bingo .mini-label { background: linear-gradient(135deg, #ff5a5a, #b81414); color: #fff; }
  .land-minis .mini.land-mini-hot .mini-label { animation: faltaglow 1.8s ease-in-out infinite; }
  /* Las que acaban de subir a la mesa dan un saltito: el gesto tiene eco abajo. */
  .land-minis .mini.land-mini-jump .mini-thumb { animation: miniPop .4s cubic-bezier(.34,1.4,.5,1) both; }

  /* El panel del carton solitario: LOS NUMEROS QUE ESPERAS, como bolitas de
     verdad — la senora sabe exactamente que escuchar. */
  .land-panel { flex: none; width: 226px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(52,22,80,.6), rgba(26,10,44,.7)); border: 1px solid rgba(255,220,150,.25); backdrop-filter: blur(4px); }
  .land-panel-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.2px; color: #ffdf9a; }
  .land-fig { display: flex; flex-direction: column; gap: 5px; }
  .land-fig-name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; color: #fff2d6; }
  .land-waiting { display: flex; flex-wrap: wrap; gap: 6px; }
  .land-waiting .ball { width: 32px; height: 32px; }
  .land-waiting .ball-letter { font-size: 7px; }
  .land-waiting .ball-num { font-size: 12px; }
  .land-fig-count { font-family: 'Inter', sans-serif; font-size: 12px; color: #d8c8ec; }
  .land-close { margin-top: 2px; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 17px; color: #ffd76a; text-shadow: 0 0 8px rgba(255,215,106,.6); }

  /* La lupa: tocar un carton chico lo agranda; tocar afuera lo devuelve. El pop
     va solo al ABRIR (.land-pop lo pone el toque): la lupa se reconstruye con
     cada bolita y sin esa marca el carton saltaria cada vez. */
  .land-lupa { display: flex; position: fixed; inset: 0; z-index: 45; align-items: center; justify-content: center; background: rgba(10,4,20,.7); backdrop-filter: blur(3px); animation: fadein .2s ease both; }
  .land-lupa .land-card { animation: none; }
  .land-lupa .land-card.land-pop { animation: popin .3s cubic-bezier(.34,1.4,.5,1) both; }

  /* El foco del bingo: antes de que el confeti tape todo, "ESE es el carton".
     El plano se agranda; el colgado es IZADO por sus cuerdas. Se apagan las
     animaciones con fill both del nodo enfocado: un transform animado pisa al
     transform declarado y el foco no se veria. */
  .land-shelf.land-spotting .land-card { transition: opacity .3s, transform .35s ease-in-out; }
  .land-shelf.land-spotting .land-card:not(.land-spot) { opacity: .25; }
  .land-card.land-spot { z-index: 5; transform: scale(1.07); transform-origin: center; animation: none; }


  /* ── lo compartido que se muda de lugar ── */
  .navbar { left: auto; top: 0; bottom: 0; right: env(safe-area-inset-right); width: 52px; flex-direction: column; justify-content: center; gap: 12px; padding: 8px 4px; background: linear-gradient(270deg, rgba(16,6,28,.5), rgba(24,8,38,.28) 55%, rgba(30,10,46,0)); -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 18px), transparent); }
  .nav-btn { width: 40px; height: 40px; }
  .nav-btn img { max-width: 34px; max-height: 34px; }
  .nav-btn-big img { max-width: 44px; max-height: 44px; }
  .log-chip { top: auto; left: calc(8px + env(safe-area-inset-left)); bottom: 8px; }
  .mega { right: auto; left: calc(46px + env(safe-area-inset-left)); bottom: 4px; width: 44px; }
  /* Los chips de bingos cuelgan de la marquesina como taloncitos. */
  .chips { position: absolute; top: 62px; left: auto; right: calc(64px + env(safe-area-inset-right)); z-index: 24; padding: 0; justify-content: flex-end; }
  .chip { padding: 3px 12px; font-size: 12px; border-radius: 0 0 10px 10px; border-top: none; }
  /* El estado de la ronda vive en la marquesina (lm-state); el strip es del vertical. */
  .round-strip { display: none !important; }
  /* El toast es el papelito del megafono: se asoma bajo la marquesina. */
  .toast { top: 70px; bottom: auto; left: 0; right: 52px; margin: 0 auto; width: max-content; max-width: 72vw; transform: none; animation: landin .3s ease-out both; }

  /* ── overlays girados: mismos elementos, geometria revisada ── */
  .celebrate-trophy { width: auto; max-width: none; max-height: 38vh; }
  .bingo-letters span { font-size: 26px; }
  .celebrate-bottom { bottom: 3%; }
  /* El carnet girado: el QR a la izquierda y los textos en columna a la derecha,
     por grid puro — el DOM del modal queda identico al del vertical. */
  .badge-panel { display: grid; grid-template-columns: min-content auto; align-items: center; justify-items: center; column-gap: 22px; max-width: 640px; width: auto; padding: 22px 26px; }
  .badge-qr-frame { grid-column: 1; grid-row: 1 / span 4; }
  .badge-title, .badge-who, .badge-number, .badge-hint { grid-column: 2; }
  .badge-qr { width: min(190px, 52vh); height: min(190px, 52vh); }
  .badge-pin { top: -26px; left: 24%; width: 52px; }
  .lang-panel { max-width: min(420px, 104vh); }
  .sheet-card { max-height: 94vh; overflow-y: auto; }
  .log-card { max-height: 92vh; }

  /* ── la puerta, compactada para no romperse girada ── */
  .door-title { margin-top: 2.5vh; font-size: 22px; }
  .door-logo { margin-top: 1vh; width: auto; max-width: none; height: 24vh; }
  .door-buttons { margin-top: 2vh; flex-direction: row; width: 86%; max-width: 560px; }
  .door-opt { flex: 1; height: 76px; }
  .door-opt img { height: 44px; }
  .door-sub { margin-top: 1.4vh; }
  .door-badge { margin-top: 1.4vh; padding: 6px 16px 7px; }
  .door-badge-number { font-size: 16px; }
}


/* ── mis bingos, en la puerta ──────────────────────────────────────────────
     Misma paleta que el carnet y los botones de entrar: morado profundo, borde de oro
     tenue y desenfoque detras. Con techo de alto y scroll propio, para que diez bingos
     no empujen los botones de entrar fuera de la pantalla. */


/* Cabecera de la lista: el rotulo a la izquierda y el "+ otro bingo" a la derecha, en
   UN renglon. Como fila propia debajo de la lista gastaba 48px del cartel -- una fila
   entera de bingo que dejaba de verse. */
.mine-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 8 y no 10: los dos pixeles que faltaban para que la tercera fila entre ENTERA
     (218 de hueco - 34 de cabecera = 184 justos, tres filas con sus dos aires). */
  margin-bottom: 8px;
}

.mine-tag {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: rgba(255,214,150,.85);
}



.mine-one {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,220,150,.42);
  background: rgba(20,8,36,.5);
  backdrop-filter: blur(4px);
  text-align: left;
  transition: transform .18s cubic-bezier(.34,1.4,.5,1);
}

.mine-one:active { transform: scale(.97); }

/* El que estas jugando se distingue por el oro, igual que el chip activo. */
.mine-one-here { border-color: rgba(255,217,138,.9); box-shadow: 0 4px 16px -8px rgba(255,190,90,.55); }

.mine-side { flex: 1; min-width: 0; }

.mine-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: #fff2d6;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-much { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,235,200,.72); }

.mine-here {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1px;
  color: #3a1c00;
  background: linear-gradient(135deg, #ffd98a, #f5a623);
}

.mine-chev { flex: none; font-size: 20px; color: rgba(255,214,150,.75); line-height: 1; }


/* El bingo que no contesta: mismo renglon, en tono apagado. No se esconde ni se tacha --
   los cartones son suyos igual, lo unico que falta es que el organizador prenda el suyo. */
.mine-much.mine-off { color: rgba(255,205,150,.55); }

/* Entrar a uno nuevo cuando ya hay bingos: un boton chico y punteado en la cabecera.
   Lo frecuente es volver; lo raro puede costar un toque mas y no gastar el cartel. */
.mine-add {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(255,220,150,.55);
  background: rgba(20,8,36,.42);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #ffd98a;
}

/* La frase-guia vuelta camino de regreso: dorada y con flecha, tocable sin moverse de
   su renglon ni cambiar de alto -- el carnet de abajo ni se entera. */
.door-sub-link { font-family: 'Fredoka', sans-serif; color: #ffd98a; }

/* ── el hueco del cartel colgante ──────────────────────────────────────────
     Alto FIJO e igual al de los dos botones (232px), porque este layout esta medido en vh
     contra el fondo: si el hueco creciera con la cantidad de bingos, el mostrador, la
     placa y el carnet se saldrian de su parte del dibujo.

     Adentro el contenido se APRIETA ARRIBA. Estirarlo dejaba, con un solo bingo, un
     agujero de cien pixeles entre la fila y el boton que se leia como algo que no cargo.
     El sobrante queda abajo, sobre la madera, donde no se nota.

     Y con padding arriba: sin el, el rotulo caia justo sobre el marco de madera. */
.mine-slot {
  box-sizing: border-box;
  width: 64%;
  max-width: 286px;
  margin-top: 4vh;
  height: 232px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  /* Centrado, no apretado arriba: con un solo bingo, arriba dejaba media tabla pelada
     debajo y se leia como algo que no cargo. Centrado queda como letrero. */
  justify-content: center;
  align-items: stretch;
}

/* Scrollean las filas, no la tarjeta: la cabecera se queda quieta. 184 = tres filas
   enteras con sus dos aires; de la cuarta en adelante se scrollea. Antes daba para dos
   -- "los demas bingos no se ven" -- porque el + gastaba su propia fila. */
.mine-list { max-height: 184px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; }



/* El megafono ya cantado: deja de latir y se pone verde. Con el mismo brillo dorado
   del que espera, la persona tocaba de nuevo creyendo que no habia pasado nada. */
.mega-sent img { filter: drop-shadow(0 0 12px #52e0a4) drop-shadow(0 5px 9px rgba(0,0,0,.5)); }
.mega-sent .mega-badge { background: #0FA37A; animation: none; }