/* ====================================================================
   Escenas de juego: cada juego tiene su propio "mundo" (madera, neón,
   casino...) en vez del estilo de app compartido. La base (.escena) y las
   piezas genéricas (.g-*, .gbtn*) son comunes; el tema cambia solo el fondo.
   ==================================================================== */
.escena{
  position:relative; border-radius:22px; padding:12px 10px 14px; margin-bottom:14px;
  border:3px solid rgba(0,0,0,.4);
  box-shadow:inset 0 0 46px rgba(0,0,0,.4), 0 8px 18px rgba(15,42,77,.28);
  color:#fff; font-family:var(--font-juego);
}
/* Mesa de madera (Truco, Escoba, Chinchón) */
.escena-madera{
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 2px, rgba(255,255,255,.05) 2px 4px, transparent 4px 46px),
    radial-gradient(120% 90% at 50% 35%, #9A6A38 0%, #7A4F26 55%, #5A3A1C 100%);
  border-color:#3E2713;
}
/* Neón violeta (Trivia) */
.escena-neon{
  background:
    radial-gradient(60% 40% at 15% 8%, rgba(255,110,255,.30), transparent 70%),
    radial-gradient(55% 40% at 88% 92%, rgba(70,200,255,.26), transparent 70%),
    linear-gradient(180deg, #5326A6 0%, #34157A 55%, #1F0B4D 100%);
  border-color:#9B6BFF;
  box-shadow:inset 0 0 40px rgba(0,0,0,.35), 0 0 22px rgba(155,107,255,.45), 0 8px 18px rgba(15,42,77,.28);
}
/* Paño verde de casino (Bingo) */
.escena-casino{
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0/9px 9px,
    radial-gradient(120% 90% at 50% 30%, #22844A 0%, #115E33 65%, #0A4125 100%);
  border-color:#C9A227;
}
.g-hud{display:flex; gap:8px; margin-bottom:10px;}
.g-score{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(20,10,0,.55); border:2px solid rgba(255,255,255,.18); border-radius:14px; padding:6px 10px;
}
.g-score-yo{border-color:var(--orange-soft);}
.g-score-nombre{font-size:11px; font-weight:700; line-height:1.15; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.92;}
.g-score-puntos{font-size:28px; font-weight:800; line-height:1; flex-shrink:0;}
.g-score-puntos small{font-size:11px; font-weight:600; opacity:.65;}

.m-rivales{display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:8px;}
.m-rival{text-align:center;}
.m-rival-nombre{font-size:11px; font-weight:700; margin-bottom:4px; text-shadow:0 1px 2px rgba(0,0,0,.7);}
.m-rival-mano{display:flex; justify-content:center;}
.m-dorso{
  width:34px; height:52px; border-radius:6px; margin-left:-12px;
  background:var(--navy) url('icons/icon-192.png') center/72% no-repeat;
  border:2px solid #F7F5F0; box-shadow:0 3px 6px rgba(0,0,0,.4);
}
.m-dorso:first-child{margin-left:0;}

.m-tapete{
  border-radius:18px; padding:8px 8px 10px; margin:4px 0 8px; min-height:116px;
  background:radial-gradient(90% 100% at 50% 30%, #2F7D4F, #1E5C3A 80%);
  border:3px solid #2A1808; box-shadow:inset 0 3px 14px rgba(0,0,0,.5);
}
.truco-en-mesa .app-header{display:none;}
.g-chips{display:flex; gap:5px; flex-wrap:wrap; justify-content:center; align-items:center; margin-bottom:6px;}
.g-chip{
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25); border-radius:999px;
  padding:2px 9px; font-size:10px; font-weight:700;
}
.g-chip-rojo{background:linear-gradient(135deg, #E5484D, #B4252A); border-color:rgba(255,255,255,.4);}
.truco-rondas{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:8px;}
.truco-ronda{
  display:flex; align-items:center; gap:3px; background:rgba(0,0,0,.3);
  border-radius:10px; padding:4px 7px; border-left:4px solid #9AA3AE;
}
.truco-ronda-gane{border-left-color:#4ADE80;}
.truco-ronda-perdi{border-left-color:#F87171;}
.truco-ronda-res{font-size:12px; font-weight:800; margin-left:2px;}
.truco-jugadas{display:flex; justify-content:center; align-items:flex-end; gap:10px; flex-wrap:wrap; min-height:90px;}
.truco-jugada{text-align:center;}
.truco-jugada-nombre{font-size:10px; font-weight:700; margin-top:4px; text-shadow:0 1px 2px #000;}
.truco-jugada .tcarta{animation:trucoCaer .28s ease-out;}
@keyframes trucoCaer{ from{transform:translateY(-16px) scale(1.12); opacity:0;} to{transform:none; opacity:1;} }
.truco-vacio{align-self:center; font-size:12px; opacity:.85; text-align:center; padding:18px 0;}

.m-turno-wrap{text-align:center; margin-bottom:8px;}
.m-turno{
  display:inline-block; padding:5px 18px; border-radius:999px; font-size:14px; font-weight:800;
  background:rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.2);
}
.m-turno-mio{
  background:linear-gradient(180deg, var(--orange-soft), var(--orange)); border-color:transparent;
  box-shadow:0 3px 0 var(--orange-sombra); animation:trucoPulso 1.5s ease-in-out infinite;
}
@keyframes trucoPulso{ 50%{transform:scale(1.06);} }

.m-mano{display:flex; justify-content:center; gap:8px; margin:16px 0 12px;}

/* Cartas: naipe crema con número en dos esquinas y el palo repetido en el
   centro, como el mazo español real (las figuras 10/11/12 llevan un
   ilustración provisoria hasta tener el arte definitivo). */
.tcarta{
  position:relative; display:block; padding:0; flex-shrink:0; font-family:var(--font-juego);
  background:linear-gradient(160deg, #FFFDF6, #F3EAD3); border:2px solid #D9CBA8; border-radius:9px;
  box-shadow:0 3px 0 rgba(0,0,0,.3), 0 6px 10px rgba(0,0,0,.35);
}
.tcarta-grande{width:76px; height:116px;}
.tcarta-media{width:58px; height:88px; border-radius:8px;}
.tcarta-mini{width:26px; height:40px; border-radius:5px; border-width:1px; box-shadow:0 2px 3px rgba(0,0,0,.35);}
.tcarta-oro{color:#B8860B;} .tcarta-copa{color:#C0392B;} .tcarta-espada{color:#2D3E50;} .tcarta-basto{color:#6B4423;}
.tcarta-esquina{position:absolute; font-weight:800; line-height:1;}
.tcarta-grande .tcarta-esquina{font-size:16px;}
.tcarta-media .tcarta-esquina{font-size:13px;}
.tcarta-esquina-1{top:5px; left:6px;}
.tcarta-esquina-2{bottom:5px; right:6px; transform:rotate(180deg);}
.tcarta-centro{position:absolute; left:16%; right:16%; top:20%; bottom:20%; display:flex; align-items:center; justify-content:center;}
.tcarta-pips{width:100%; display:grid; justify-items:center; align-items:center; align-content:center; gap:2px 0; grid-template-columns:1fr;}
.tcarta-pips-4, .tcarta-pips-5, .tcarta-pips-6, .tcarta-pips-7{grid-template-columns:1fr 1fr;}
.tcarta-pips-5 svg:nth-child(5), .tcarta-pips-7 svg:nth-child(7){grid-column:1 / 3;}
.tcarta-figura{display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1;}
.tcarta-figura-emoji{font-size:30px;}
.tcarta-media .tcarta-figura-emoji{font-size:22px;}
.tcarta-mini-contenido{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:11px; font-weight:800; line-height:1;}
button.tcarta{cursor:default;}
.tcarta-jugable{
  cursor:pointer; transform:translateY(-8px);
  box-shadow:0 0 0 3px var(--orange-soft), 0 6px 0 rgba(0,0,0,.3), 0 10px 14px rgba(0,0,0,.4);
  transition:transform .1s ease;
}
.tcarta-jugable:active{transform:translateY(-2px) scale(.97);}

.g-acciones{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px;}
.g-acciones-3{grid-template-columns:repeat(3, 1fr);}
.gbtn{
  border:none; border-radius:14px; padding:11px 6px; font-family:var(--font-juego); font-weight:800;
  font-size:14px; color:#fff; cursor:pointer; text-shadow:0 1px 0 rgba(0,0,0,.28);
  background:linear-gradient(180deg, var(--orange-soft), var(--orange));
  box-shadow:0 4px 0 var(--orange-sombra), 0 8px 12px rgba(0,0,0,.3);
  transition:transform .08s ease, box-shadow .08s ease;
}
.gbtn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--orange-sombra), 0 3px 6px rgba(0,0,0,.3);}
.gbtn-chico{font-size:12px; padding:9px 4px;}
.gbtn-ancho{grid-column:1 / -1; font-size:17px; padding:13px 6px;}
.gbtn-rojo{background:linear-gradient(180deg, #F26A6F, #D6343A); box-shadow:0 4px 0 #8E1F23, 0 8px 12px rgba(0,0,0,.3);}
.gbtn-rojo:active{box-shadow:0 1px 0 #8E1F23, 0 3px 6px rgba(0,0,0,.3);}
.gbtn-quiero{background:linear-gradient(180deg, #4ADE80, #1E9E52); box-shadow:0 4px 0 #14532D, 0 8px 12px rgba(0,0,0,.3);}
.gbtn-quiero:active{box-shadow:0 1px 0 #14532D, 0 3px 6px rgba(0,0,0,.3);}
.gbtn-no{background:linear-gradient(180deg, #8794A6, #5B6878); box-shadow:0 4px 0 #343D4A, 0 8px 12px rgba(0,0,0,.3);}
.gbtn-no:active{box-shadow:0 1px 0 #343D4A, 0 3px 6px rgba(0,0,0,.3);}
.gbtn-sel{outline:3px solid #fff;}

.g-dialogo{
  background:rgba(0,0,0,.55); border:2px solid rgba(255,255,255,.25); border-radius:16px;
  padding:9px 12px; text-align:center; margin-bottom:8px;
}
.g-dialogo-titulo{font-size:19px; font-weight:800; line-height:1.15; text-shadow:0 2px 4px rgba(0,0,0,.6);}
.g-dialogo-sub{font-size:12px; opacity:.88; margin-top:4px;}
.g-pie{display:flex; justify-content:space-between; gap:8px; font-size:14px; font-weight:700; opacity:1; margin-top:8px;}
.g-pie span{cursor:pointer; text-decoration:underline; padding:6px 4px;}

/* ---- Trivia: neón violeta, pregunta con borde luminoso y respuestas-pastilla ---- */
.tv-escena{min-height:470px;}
.g-pill{
  display:inline-flex; align-items:center; gap:6px; background:rgba(10,4,40,.55);
  border:2px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 14px; font-size:15px; font-weight:800;
}
.tv-top{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px;}
.g-barra{height:8px; background:rgba(255,255,255,.18); border-radius:4px; overflow:hidden; margin:0 2px 12px;}
.g-barra-relleno{height:100%; background:linear-gradient(90deg,#FFD84D,#FF8A3D); border-radius:4px; transition:width .3s; box-shadow:0 0 10px rgba(255,216,77,.8);}
.tv-categoria{
  display:block; width:max-content; max-width:90%; margin:0 auto -14px; position:relative; z-index:1;
  background:linear-gradient(180deg,#FFD84D,#FF9F1C); color:#4A2A00; border-radius:999px; padding:4px 18px;
  font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; box-shadow:0 3px 0 #A85B00;
}
.tv-pregunta{
  background:linear-gradient(180deg, rgba(12,6,56,.92), rgba(24,10,82,.92));
  border:3px solid #7CE7FF; border-radius:20px; padding:24px 16px 20px; margin-bottom:16px; text-align:center;
  box-shadow:0 0 0 3px rgba(124,231,255,.25), 0 0 18px rgba(124,231,255,.55), inset 0 0 18px rgba(124,231,255,.12);
  font-size:20px; font-weight:800; line-height:1.25; text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.tv-opcion{
  display:block; width:100%; margin:0 0 12px; padding:14px 40px 15px 18px; border:none; border-radius:999px;
  font-family:var(--font-juego); font-size:17px; font-weight:800; color:#fff; text-align:center; cursor:pointer; position:relative;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
  transition:transform .08s ease, box-shadow .08s ease, opacity .2s ease;
}
.tv-opcion-0{background:linear-gradient(180deg,#F25BFF,#C42BDD); box-shadow:0 5px 0 #6E1285, 0 9px 14px rgba(0,0,0,.35);}
.tv-opcion-1{background:linear-gradient(180deg,#A07BFF,#6B43E0); box-shadow:0 5px 0 #34208A, 0 9px 14px rgba(0,0,0,.35);}
.tv-opcion-2{background:linear-gradient(180deg,#4FB8FF,#2678E0); box-shadow:0 5px 0 #123F8A, 0 9px 14px rgba(0,0,0,.35);}
.tv-opcion:active:not([disabled]){transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.4);}
.tv-opcion[disabled]{cursor:default;}
.tv-opcion.tv-ok{background:linear-gradient(180deg,#5BE88D,#1FAE55); box-shadow:0 5px 0 #0F6B33, 0 0 18px rgba(91,232,141,.7);}
.tv-opcion.tv-ok::after{content:"✓"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:22px;}
.tv-opcion.tv-mal{background:linear-gradient(180deg,#FF6B6B,#D12F3A); box-shadow:0 5px 0 #7A1620;}
.tv-opcion.tv-mal::after{content:"✗"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:22px;}
.tv-opcion.tv-off{opacity:.5;}
.tv-temas{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;}
.tv-tema{
  border:none; border-radius:18px; padding:14px 8px 12px; color:#fff; font-family:var(--font-juego); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; text-shadow:0 1px 0 rgba(0,0,0,.3);
  box-shadow:0 5px 0 rgba(0,0,0,.35), 0 9px 14px rgba(0,0,0,.3); transition:transform .08s, box-shadow .08s;
}
.tv-tema:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.35);}
.tv-tema-icono svg{width:34px; height:34px; stroke:#fff; color:#fff;}
.tv-tema-nombre{font-size:16px; font-weight:800; line-height:1.1;}
.tv-tema-sub{font-size:11px; opacity:.9; font-weight:600;}
.tv-resultado-trofeo{font-size:64px; text-align:center; line-height:1.1; margin:6px 0;}

/* ---- Piezas genéricas dentro de cualquier escena ---- */
.escena .section-label{color:rgba(255,255,255,.88); text-shadow:0 1px 2px rgba(0,0,0,.45);}
.escena .link-chico{color:rgba(255,255,255,.85);}
.gbtn:disabled{opacity:.5; filter:grayscale(.5); box-shadow:0 2px 0 rgba(0,0,0,.35); cursor:not-allowed; transform:none;}
.escena .bingo-input-numero{margin:8px 0;}

/* ---- Bingo: casino. La bola cantada grande y el cartón con fichas ---- */
.escena-casino .bingo-sorteo{
  background:rgba(0,0,0,.32); border:2px solid rgba(201,162,39,.65); border-radius:20px; padding:14px; margin-bottom:12px;
}
.escena-casino .bingo-ultimo{flex-direction:column; align-items:center; gap:8px; margin-bottom:12px; min-height:0;}
.escena-casino .bingo-numero-resaltado{
  width:104px; height:104px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:46px; font-weight:800; letter-spacing:0; color:#3A2400;
  background:radial-gradient(circle at 35% 28%, #fff 0%, #FFE680 45%, #E8A91C 100%);
  border:4px solid #fff; box-shadow:0 0 24px rgba(255,226,122,.85), 0 6px 0 #9A6B00;
}
.escena-casino .bingo-numero-significado{font-size:19px; font-weight:800; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.55);}
.escena-casino .bingo-sorteo .gbtn{width:100%;}
.escena-casino .bingo-espera{color:rgba(255,255,255,.85);}
.escena-casino .bingo-historial{gap:5px;}
.escena-casino .bingo-chip{
  width:34px; height:34px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #fff, #E9E2CF); border:2px solid #C9A227; color:#3A2400; font-size:12px; font-weight:800;
}
.escena-casino .bingo-chip-vacio{width:auto; border-radius:999px; padding:4px 12px; font-weight:600;}
.escena-casino .bingo-chip-ultimo{background:radial-gradient(circle at 35% 30%, #FFF2A8, #F0A81E); border-color:#fff; box-shadow:0 0 10px rgba(255,226,122,.9);}
.escena-casino .bingo-carton{background:#FFF8E6; border:4px solid #C9A227; border-radius:18px; box-shadow:0 5px 0 #7A5A00, 0 9px 14px rgba(0,0,0,.35);}
.escena-casino .bingo-carton-titulo{color:#3A2400;}
.escena-casino .bingo-badge-full{background:#D61F3A;}
.escena-casino .bingo-grid{gap:6px;}
.escena-casino .bingo-celda{background:#fff; border:2px solid #E6D9B0; border-radius:12px; color:#3A2400; font-size:30px; font-weight:800;}
.escena-casino .bingo-celda.bingo-marcada{
  background:radial-gradient(circle at 35% 28%, #FF8F9C, #D61F3A 70%); border-color:#8E1224; color:#fff;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.25), 0 2px 0 #8E1224;
}
.escena-casino .bingo-celda-disponible{background:#FFF3B8; color:#7A4B00; border-color:#F0A81E; box-shadow:0 0 0 3px rgba(240,168,30,.55);}
.escena-casino .bingo-lista-nombres{gap:7px; justify-content:center;}
.escena-casino .bingo-nombre-item{
  width:42px; height:42px; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #fff, #E9E2CF); border:2px solid #C9A227; color:#3A2400; font-size:13px; font-weight:800;
}
.escena-casino .bingo-nombre-item.bingo-nombre-elegido{background:radial-gradient(circle at 35% 28%, #FF8F9C, #D61F3A 70%); border-color:#fff; color:#fff; box-shadow:0 0 10px rgba(214,31,58,.8);}
.escena-casino .bingo-pin-error{color:#FFD84D;}

/* Bingo: bola y significado en una fila, para que el cartón entre en pantalla */
.escena-casino .bingo-ultimo{flex-direction:row; justify-content:center; gap:14px; margin-bottom:8px;}
.escena-casino .bingo-numero-resaltado{width:84px; height:84px; font-size:38px; flex-shrink:0;}
.escena-casino .bingo-numero-significado{font-size:20px; text-align:left; line-height:1.1; max-width:55%;}
.escena-casino .bingo-sorteo{padding:12px;}
.escena-casino .bingo-chip{width:30px; height:30px; font-size:11px;}
.escena-casino .bingo-historial{margin-bottom:10px;}
.escena-casino .bingo-celda{font-size:26px;}
.escena-casino .bingo-grid{gap:5px;}

/* Mientras se juega de verdad, el título de arriba sobra: ese lugar es para el juego. */
.juego-inmersivo .app-header{display:none;}

/* ---- Ahorcado: pizarrón con marco de madera y letras de tiza ---- */
.escena-pizarra{
  background:
    radial-gradient(70% 50% at 25% 15%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(90% 70% at 80% 85%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(180deg, #34543F, #22382C);
  border:8px solid #8B5A2B; border-radius:20px;
  box-shadow:inset 0 0 36px rgba(0,0,0,.5), 0 0 0 3px #5E3B17, 0 8px 18px rgba(15,42,77,.3);
}
.ah-tablero{text-align:center; margin-bottom:8px;}
.ah-dibujo{display:flex; justify-content:center; margin-bottom:2px; filter:drop-shadow(0 0 3px rgba(255,255,255,.35));}
.ah-vidas{font-size:15px; letter-spacing:2px; margin-bottom:10px;}
.ah-palabra{display:flex; flex-wrap:wrap; justify-content:center; gap:5px;}
.ah-slot{
  min-width:24px; height:42px; padding:0 2px; border-bottom:4px solid rgba(255,255,255,.9); text-align:center;
  font-size:30px; font-weight:800; line-height:42px; color:#fff; text-shadow:0 0 6px rgba(255,255,255,.4);
}
.ah-slot-perdida{color:#FF9B9B; text-shadow:none;}
.ah-teclado{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; margin-top:10px;}
.ah-tecla{
  border:none; border-radius:10px; padding:9px 0 8px; font-family:var(--font-juego); font-size:17px; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(180deg, #E0A864, #B97A3C); box-shadow:0 4px 0 #6B4423, 0 6px 8px rgba(0,0,0,.3);
  text-shadow:0 1px 0 rgba(0,0,0,.3); transition:transform .08s, box-shadow .08s;
}
.ah-tecla:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 #6B4423;}
.ah-tecla:disabled{cursor:default;}
.ah-tecla-ok{background:linear-gradient(180deg,#5BE88D,#1FAE55); box-shadow:0 4px 0 #0F6B33;}
.ah-tecla-mal{background:linear-gradient(180deg,#7A6A5A,#5A4B3E); box-shadow:0 2px 0 #3A2E24; opacity:.55; transform:translateY(2px);}

/* ---- Valija Express: cielo de aeropuerto, reloj circular y valija de cuero ---- */
.escena-cielo{
  background:
    radial-gradient(40% 14% at 18% 12%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(34% 12% at 82% 22%, rgba(255,255,255,.6), transparent 70%),
    linear-gradient(180deg, #2F9BF2 0%, #6CC3FF 48%, #FFE0A6 100%);
  border-color:#fff;
}
.escena-cielo .g-dialogo{background:rgba(10,40,90,.5); border-color:rgba(255,255,255,.55);}
.vj-portada{font-size:60px; text-align:center; line-height:1.1; margin:4px 0 8px; filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));}
.vj-top{
  position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:rgba(8,36,84,.72); border:2px solid rgba(255,255,255,.5); border-radius:16px; padding:8px 10px; margin-bottom:8px;
  backdrop-filter:blur(3px);
}
.vj-destino{display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; line-height:1.1; min-width:0;}
.vj-destino-emoji{font-size:26px;}
.vj-timer{
  width:54px; height:54px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:conic-gradient(#FFD84D var(--p), rgba(255,255,255,.28) 0);
}
.vj-timer span{width:42px; height:42px; border-radius:50%; background:#0B2A5E; display:grid; place-items:center; font-size:21px; font-weight:800;}
.vj-timer-urgente{background:conic-gradient(#FF4D4D var(--p), rgba(255,255,255,.28) 0);}
.vj-timer-urgente span{color:#FF9B9B;}
.vj-consigna{font-size:13px; font-weight:700; text-align:center; margin:2px 4px 8px; text-shadow:0 1px 3px rgba(0,0,0,.45);}
.vj-valija{
  position:relative; display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:10px 40px 10px 10px;
  background:linear-gradient(180deg, #A5683A, #7B4724); border:3px solid #4B2A12; border-radius:16px;
  box-shadow:0 4px 0 #3A200D, 0 8px 12px rgba(0,0,0,.28);
}
.vj-valija-emoji{font-size:30px; flex-shrink:0;}
.vj-contenido{display:flex; flex-wrap:wrap; gap:4px; min-height:30px; align-items:center;}
.vj-chip{background:#FFF3D6; color:#4B2A12; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:800;}
.vj-chip-vacio{opacity:.7; background:rgba(255,255,255,.25); color:#fff;}
.vj-contador{
  position:absolute; right:8px; top:8px; background:#FFD84D; color:#4A2A00; border-radius:999px; padding:2px 8px;
  font-size:12px; font-weight:800; box-shadow:0 2px 0 #A85B00;
}
.vj-items{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.vj-item{
  border:none; border-radius:14px; padding:11px 8px 12px; font-family:var(--font-juego); font-size:14px; font-weight:800; cursor:pointer;
  color:#143A66; background:linear-gradient(180deg,#FFFFFF,#E3EEFB); box-shadow:0 4px 0 #8FA9CC, 0 6px 8px rgba(0,0,0,.18);
  transition:transform .08s, box-shadow .08s; line-height:1.15;
}
.vj-item:active{transform:translateY(3px); box-shadow:0 1px 0 #8FA9CC;}
.vj-item-elegido{color:#fff; background:linear-gradient(180deg,#FFB547,#F08A1C); box-shadow:0 4px 0 #A85B00, 0 6px 8px rgba(0,0,0,.2); text-shadow:0 1px 0 rgba(0,0,0,.3);}
.vj-item-elegido::before{content:"✓ ";}
.vj-stats{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px;}
.vj-stat{
  background:rgba(8,36,84,.6); border:2px solid rgba(255,255,255,.4); border-radius:14px; padding:10px 6px;
  display:flex; flex-direction:column; align-items:center; font-size:12px; font-weight:700;
}
.vj-stat-num{font-size:26px; font-weight:800; line-height:1.1;}
.vj-nota{font-size:12px; text-align:center; margin:4px 0 10px; text-shadow:0 1px 3px rgba(0,0,0,.45);}

/* ---- Memoria: arcade de menta, cartas con el dorso de Bus Coin ---- */
.escena-menta{
  background:
    radial-gradient(50% 30% at 85% 8%, rgba(255,255,255,.28), transparent 70%),
    linear-gradient(180deg, #12B8A6 0%, #0E8F9A 55%, #0B5E7A 100%);
  border-color:#7FF0E0;
}
.mem-portada{font-size:56px; text-align:center; margin:4px 0 6px;}
.mem-grid{display:grid; gap:9px; margin-top:4px; grid-template-columns:repeat(4, 1fr);}
.mem-grid-4{grid-template-columns:repeat(4, 1fr);}
.mem-grid-16{grid-template-columns:repeat(4, 1fr); gap:6px;}
.mem-carta{
  aspect-ratio:3/4; border:none; border-radius:12px; cursor:pointer; padding:0; font-size:30px;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy) url('icons/icon-192.png') center/70% no-repeat;
  border:3px solid #F7F5F0; box-shadow:0 4px 0 rgba(0,0,0,.35), 0 7px 10px rgba(0,0,0,.25);
  transition:transform .08s;
}
.mem-carta:active{transform:translateY(3px);}
.mem-grid-16 .mem-carta{font-size:22px; border-width:2px; border-radius:9px;}
.mem-carta-cara{background:linear-gradient(160deg,#FFFDF6,#F3EAD3); border-color:#fff;}
.mem-carta-resuelta{background:linear-gradient(160deg,#C9FFD8,#7FE8A3); border-color:#fff; box-shadow:0 0 14px rgba(127,232,163,.8); cursor:default;}
.mem-logo-img{width:70%; height:70%; object-fit:contain; border-radius:20%;}
.mem-flip{animation:memGirar .28s ease-out;}
@keyframes memGirar{ from{transform:rotateY(90deg) scale(.9);} to{transform:rotateY(0) scale(1);} }
.mem-grid-16 .mem-carta{aspect-ratio:1/1;}

/* ---- Sudoku: noche índigo con tablero claro y resaltado de fila/columna/cuadro ---- */
.escena-noche{
  background:
    radial-gradient(60% 40% at 80% 5%, rgba(80,140,255,.28), transparent 70%),
    linear-gradient(180deg, #1B2A66 0%, #121C4A 60%, #0B1233 100%);
  border-color:#5B7CFF;
  box-shadow:inset 0 0 40px rgba(0,0,0,.4), 0 0 18px rgba(91,124,255,.4), 0 8px 18px rgba(15,42,77,.28);
}
.g-acciones-3{grid-template-columns:repeat(3, 1fr);}
.sd-tablero{display:flex; flex-direction:column; background:#fff; border:3px solid #7C9BFF; border-radius:10px; overflow:hidden; margin:6px 0 12px; box-shadow:0 0 14px rgba(124,155,255,.5);}
.sd-fila{display:flex;}
.sd-celda{
  flex:1; aspect-ratio:1; border:0; border-right:1px solid #CFD8F0; border-bottom:1px solid #CFD8F0; background:#fff; padding:0;
  font-family:var(--font-juego); font-size:20px; font-weight:800; color:#2563EB; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.sd-celda-fija{color:#0F1B4D; background:#EEF2FF; cursor:default;}
.sd-celda-correcta{color:#2563EB;}
.sd-celda-incorrecta{color:#E5484D; background:#FFE9EA;}
.sd-celda-relacion{background:#E3EBFF;}
.sd-celda-fija.sd-celda-relacion{background:#D6E1FF;}
.sd-celda-igual{background:#FFE9A8 !important;}
.sd-celda-elegida{background:#7CE7FF !important; box-shadow:inset 0 0 0 2px #1E8FB8;}
.sd-borde-derecho{border-right:2px solid #3B4F9A;}
.sd-borde-abajo{border-bottom:2px solid #3B4F9A;}
.sd-teclado{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;}
.sd-tecla{
  aspect-ratio:1; border:none; border-radius:12px; font-family:var(--font-juego); font-size:22px; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,#6C8CFF,#3F5FE0); box-shadow:0 4px 0 #1E2F86, 0 6px 8px rgba(0,0,0,.3); transition:transform .08s, box-shadow .08s;
}
.sd-tecla:active{transform:translateY(3px); box-shadow:0 1px 0 #1E2F86;}
.sd-tecla-borrar{background:linear-gradient(180deg,#FF7B7B,#D63A44); box-shadow:0 4px 0 #7A1620, 0 6px 8px rgba(0,0,0,.3);}
.sd-tecla-borrar:active{box-shadow:0 1px 0 #7A1620;}

/* ---- Papel (Sopa de letras, Tutti Frutti, Cadáver Exquisito): hoja de pasatiempos ---- */
.escena-papel{
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(120,150,200,.18) 27px 28px),
    linear-gradient(180deg, #FFF8E1, #FBEFCB);
  border-color:#D9B95F; color:#3A2A12;
  box-shadow:inset 0 0 30px rgba(180,140,40,.25), 0 8px 18px rgba(15,42,77,.22);
}
.escena-papel .g-pill{background:#fff; color:#3A2A12; border-color:#E0C98E;}
.escena-papel .g-dialogo{background:#FFFDF2; border-color:#E0C98E; color:#3A2A12;}
.escena-papel .g-dialogo-titulo{text-shadow:none;}
.escena-papel .section-label{color:#7A5C1C; text-shadow:none;}
.escena-papel .link-chico, .escena-papel .g-pie{color:#7A5C1C;}

/* Sopa de letras sobre papel: marcador amarillo al elegir, verde al encontrar */
.escena-papel .sopa-grilla{background:#FFFEF7; border:3px solid #3A2A12; border-radius:10px; box-shadow:0 4px 0 rgba(58,42,18,.35); margin:6px 0 12px;}
.escena-papel .sopa-celda{background:transparent; border:0; border-radius:8px; color:#3A2A12; font-weight:800;}
.escena-papel .sopa-celda-seleccionada{background:#FFE066; box-shadow:0 0 0 2px #E0B100 inset;}
.escena-papel .sopa-celda-encontrada{background:#9BE7A9; color:#134D22; box-shadow:0 0 0 2px #3FAE5C inset;}
.escena-papel .sopa-lista-palabras{gap:6px; margin-bottom:12px; justify-content:center;}
.escena-papel .sopa-palabra{background:#fff; color:#3A2A12; border:2px solid #E0C98E; border-radius:999px; padding:4px 11px; font-weight:800;}
.escena-papel .sopa-palabra-encontrada{background:#D4F5DB; border-color:#3FAE5C; color:#1E6B34; text-decoration:line-through;}
.escena-papel .sopa-grilla{container-type:inline-size; align-items:stretch; overflow:hidden; padding:6px;}
.escena-papel .sopa-fila{width:100%;}
.escena-papel .sopa-celda{flex:1 1 0; min-width:0; aspect-ratio:1; font-size:calc(100cqw / var(--cols, 8) * .52);}
.escena-papel{padding-left:6px; padding-right:6px;}
.escena-papel .sopa-grilla{padding:4px;}
.tcarta-sel{transform:translateY(-14px) !important; box-shadow:0 0 0 4px #4ADE80, 0 8px 0 rgba(0,0,0,.3), 0 12px 16px rgba(0,0,0,.4) !important;}

/* Piezas extra de mesas de cartas */
.g-chip-verde{background:linear-gradient(135deg,#4ADE80,#1E9E52); border-color:rgba(255,255,255,.5);}
.g-ayuda{text-align:center; font-size:12px; font-weight:700; opacity:.92; margin:0 0 6px; text-shadow:0 1px 2px rgba(0,0,0,.5);}

/* En el centro de la mesa las cartas elegibles no se levantan: solo se marcan */
.m-tapete .tcarta-jugable{transform:none; box-shadow:0 0 0 3px rgba(255,216,77,.85), 0 3px 0 rgba(0,0,0,.3), 0 6px 10px rgba(0,0,0,.35);}
.m-tapete .tcarta-sel{transform:translateY(-6px) !important;}
.m-tapete .g-chips{margin-bottom:10px;}

/* Chinchón: mano en abanico solapado, mazo con dorso, comodín */
.g-hud-varios{flex-wrap:wrap;}
.g-hud-varios .g-score{flex:1 1 calc(50% - 8px);}
.m-mano-solapada{gap:0; padding:0 8px;}
.m-mano-solapada .tcarta{margin-left:-20px;}
.m-mano-solapada .tcarta:first-child{margin-left:0;}
.m-dorso-media{
  width:58px; height:88px; border-radius:8px; padding:0; cursor:default;
  background:var(--navy) url('icons/icon-192.png') center/72% no-repeat; border:3px solid #F7F5F0;
  box-shadow:0 3px 0 rgba(0,0,0,.3), 0 6px 10px rgba(0,0,0,.35);
}
.m-dorso-media:disabled{opacity:.8;}
.m-dorso-activo{cursor:pointer; opacity:1; box-shadow:0 0 0 3px rgba(255,216,77,.9), 0 3px 0 rgba(0,0,0,.3), 0 6px 10px rgba(0,0,0,.35); animation:trucoPulso 1.5s ease-in-out infinite;}
.tcarta-comodin{background:linear-gradient(160deg,#F5E6FF,#D9B8F5); border-color:#B58AE0; color:#7B3FB5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.tcarta-comodin-estrella{font-size:30px; line-height:1;}
.tcarta-comodin-texto{font-size:10px; font-weight:800;}
.g-hud-compacto .g-score{flex-direction:column; align-items:center; gap:0; padding:4px 6px;}
.g-hud-compacto .g-score-nombre{font-size:10px; max-width:100%;}
.g-hud-compacto .g-score-puntos{font-size:22px;}
.m-rivales-chicos{gap:10px; margin-bottom:4px;}
.m-rivales-chicos .m-rival-nombre{font-size:10px; margin-bottom:2px;}
.m-rivales-chicos .m-dorso{width:24px; height:36px; margin-left:-13px; border-width:1.5px; border-radius:4px;}
.m-rivales-chicos .m-dorso:first-child{margin-left:0;}
.gbtn-chico-texto{font-size:13px; white-space:nowrap;}
.m-mano-solapada{margin-top:20px;}

/* ---- BusColor: grafito con destellos de los 4 colores, cartas estilo mazo de colores ---- */
.escena-grafito{
  background:
    radial-gradient(45% 30% at 0% 0%, rgba(232,93,93,.40), transparent 70%),
    radial-gradient(45% 30% at 100% 0%, rgba(74,130,212,.40), transparent 70%),
    radial-gradient(45% 30% at 0% 100%, rgba(79,190,115,.38), transparent 70%),
    radial-gradient(45% 30% at 100% 100%, rgba(247,209,84,.36), transparent 70%),
    linear-gradient(180deg, #2C3446, #151B27);
  border-color:#8FA0C0;
}
.m-tapete-grafito{background:radial-gradient(90% 100% at 50% 30%, #3B4660, #1F2638 80%); border-color:#0E1320;}
.gbtn-violeta{background:linear-gradient(180deg,#B66FE0,#8E44AD); box-shadow:0 4px 0 #522070, 0 8px 12px rgba(0,0,0,.3);}
.gbtn-violeta:active{box-shadow:0 1px 0 #522070;}
.escena-grafito .buscolor-carta{width:62px; height:92px; border-radius:11px; border:3px solid #fff; position:relative; box-shadow:0 3px 0 rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.35); overflow:hidden;}
.escena-grafito .buscolor-carta-rojo{--c:#C22F2F;} .escena-grafito .buscolor-carta-amarillo{--c:#C98A00;}
.escena-grafito .buscolor-carta-verde{--c:#2A8A4A;} .escena-grafito .buscolor-carta-azul{--c:#2258A8;}
.escena-grafito .buscolor-carta-negra{--c:#111;}
.bc-oval{
  width:76%; height:60%; border-radius:50%; background:#fff; transform:rotate(-24deg);
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);
}
.bc-oval > *{transform:rotate(24deg);}
.escena-grafito .buscolor-carta-simbolo{color:var(--c, #111); font-size:26px; font-weight:800; line-height:1;}
.escena-grafito .buscolor-carta-mas4{color:#111; font-size:12px; margin-top:0;}
.escena-grafito .buscolor-carta-comodin-icono{width:26px; height:26px; border-width:0;}
.bc-esq{position:absolute; font-size:11px; font-weight:800; line-height:1; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35);}
.buscolor-carta-amarillo .bc-esq{color:#5A3D00; text-shadow:none;}
.bc-esq-1{top:4px; left:5px;}
.bc-esq-2{bottom:4px; right:5px; transform:rotate(180deg);}
.escena-grafito .buscolor-carta:not(:disabled):not(.buscolor-carta-vista){transform:translateY(-6px); box-shadow:0 0 0 3px rgba(255,216,77,.9), 0 6px 0 rgba(0,0,0,.35), 0 10px 14px rgba(0,0,0,.4);}
.escena-grafito .buscolor-carta:disabled{opacity:.45; filter:grayscale(.5);}
.bc-mano{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:14px 0 10px;}
.escena-grafito .buscolor-rival-chip{background:rgba(255,255,255,.1); color:#fff; border:2px solid rgba(255,255,255,.28); box-shadow:none;}
.escena-grafito .buscolor-rival-cant{background:rgba(0,0,0,.35); color:#fff;}
.escena-grafito .buscolor-rival-chip-turno{background:linear-gradient(180deg,var(--orange-soft),var(--orange)); border-color:#fff; color:#3A2400;}
.escena-grafito .buscolor-rival-chip-turno .buscolor-rival-cant{background:rgba(255,255,255,.55); color:#3A2400;}
.escena-grafito .buscolor-rivales{justify-content:center; margin-bottom:8px;}
.escena-grafito .buscolor-elegir-color button{width:58px; height:58px; box-shadow:0 4px 0 rgba(0,0,0,.35);}
.bc-mano{gap:6px;}
.bc-mano .buscolor-carta{width:54px; height:80px;}
.bc-mano .buscolor-carta-simbolo{font-size:22px;}
.bc-mano .bc-esq{font-size:10px;}

/* ---- Tutti Frutti: hoja de cuaderno, letra grande y ¡BASTA! ---- */
.tf-top{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.tf-letra{
  width:58px; height:58px; border-radius:16px; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(180deg,#FF8A5B,#E5484D); color:#fff; font-size:38px; font-weight:800;
  box-shadow:0 4px 0 #8E1F23, 0 7px 10px rgba(0,0,0,.2); transform:rotate(-4deg); text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.tf-top-txt{flex:1; display:flex; flex-direction:column; line-height:1.1; font-size:12px; font-weight:700; color:#7A5C1C;}
.tf-top-txt strong{font-size:22px; color:#3A2A12;}
.tf-timer{
  width:54px; height:54px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(180deg,#FFD84D,#FF9F1C); color:#4A2A00; font-size:24px; font-weight:800;
  box-shadow:0 4px 0 #A85B00, 0 7px 10px rgba(0,0,0,.2);
}
.tf-timer.valija-timer-urgente{background:linear-gradient(180deg,#FF6B6B,#D12F3A); color:#fff; box-shadow:0 4px 0 #7A1620; animation:trucoPulso .6s ease-in-out infinite;}
.tf-nota{font-size:12px; font-weight:600; text-align:center; color:#7A5C1C; margin:8px 4px;}
.escena-papel .tuti-categorias{gap:8px; margin:8px 0 12px;}
.escena-papel .tuti-categoria label{color:#fff; background:linear-gradient(180deg,#7C9BFF,#4C6FE0); width:max-content; padding:2px 10px; border-radius:999px 999px 0 0; margin-left:8px; font-size:11px; letter-spacing:.5px;}
.escena-papel .tuti-categoria input{border:2px solid #4C6FE0; border-radius:12px; background:#fff; font-size:17px; font-weight:700; color:#3A2A12; padding:10px 14px; margin-top:-4px;}
.escena-papel .tuti-categoria input:focus{border-color:#E5484D; box-shadow:0 0 0 3px rgba(229,72,77,.25);}
.escena-papel .tuti-basta{font-size:22px; letter-spacing:1px; padding:14px 6px;}
.escena-papel .tuti-sorteo{margin:12px 0;}
.escena-papel .tuti-sorteo-letra{background:linear-gradient(180deg,#FF8A5B,#E5484D); width:150px; height:150px; border-radius:30px; box-shadow:0 6px 0 #8E1F23, 0 10px 16px rgba(0,0,0,.3); text-shadow:0 3px 0 rgba(0,0,0,.25);}
.escena-papel .rank-row{background:#fff; border:2px solid #E0C98E; border-radius:14px; padding:8px 10px;}
.escena-papel .rank-row.me{border-color:#4C6FE0; background:#EEF2FF;}
.escena-papel .rank-name{color:#3A2A12;}
.escena-papel .rank-pts{color:#E5484D; font-weight:800;}
.escena-papel .tuti-resultado-palabra{background:#FFF3D6; color:#3A2A12;}
.escena-papel .tuti-resultado-invalida{background:#FFE0DC; color:#A8432F;}
.escena-papel .tuti-resultado-cat{color:#7A5C1C;}
.escena-papel .tuti-categorias{gap:4px; margin:4px 0 8px;}
.escena-papel .tuti-categoria input{padding:7px 12px; font-size:16px; margin-top:-3px;}
.escena-papel .tuti-categoria label{font-size:10px; padding:1px 9px;}
.tf-top{margin-bottom:6px;}
.tf-letra{width:48px; height:48px; font-size:32px;}
.tf-timer{width:46px; height:46px; font-size:21px;}
.escena-papel .tuti-basta{font-size:20px; padding:11px 6px;}

/* ---- El Impostor: noche de espías con luz roja, tarjeta de rol secreta ---- */
.escena-espia{
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(229,72,77,.38), transparent 70%),
    radial-gradient(50% 30% at 100% 100%, rgba(120,60,200,.28), transparent 70%),
    linear-gradient(180deg, #221330, #0C0712);
  border-color:#E5484D;
  box-shadow:inset 0 0 40px rgba(0,0,0,.5), 0 0 22px rgba(229,72,77,.5), 0 8px 18px rgba(15,42,77,.28);
}
.im-portada{font-size:54px; text-align:center; line-height:1.1; margin:2px 0 6px; filter:drop-shadow(0 0 10px rgba(229,72,77,.7));}
.im-nota{font-size:12px; font-weight:600; text-align:center; opacity:.9; margin:8px 4px; text-shadow:0 1px 2px rgba(0,0,0,.6);}
.im-carta{
  background:linear-gradient(160deg,#FFF8E1,#F1E2B3); color:#2A1A00; border-radius:20px; border:4px solid #E5484D;
  padding:18px 14px; text-align:center; margin-bottom:10px;
  box-shadow:0 0 0 3px rgba(229,72,77,.3), 0 8px 0 rgba(0,0,0,.4), 0 0 24px rgba(229,72,77,.35);
}
.im-cat{display:inline-block; background:#2A1A00; color:#FFD84D; border-radius:999px; padding:3px 14px; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;}
.im-carta-sub{font-size:12px; font-weight:700; margin:10px 0 2px; opacity:.75;}
.im-palabra-grande{font-size:38px; font-weight:800; line-height:1.1; margin:2px 0 4px; word-break:break-word;}
.im-carta-impostor{background:linear-gradient(160deg,#2A0A0A,#120404); color:#FF8A8A; border-color:#FF3B3B; box-shadow:0 0 0 3px rgba(255,59,59,.35), 0 0 30px rgba(255,59,59,.7); animation:trucoPulso 2s ease-in-out infinite;}
.im-carta-emoji{font-size:56px; line-height:1.1;}
.im-carta-titulo{font-size:26px; font-weight:800; letter-spacing:.5px; margin:4px 0 8px; text-shadow:0 0 12px rgba(255,59,59,.8);}
.im-carta-texto{font-size:13px; font-weight:600; color:#FFD0D0; margin-bottom:10px;}
.im-carta-impostor .im-cat{background:#FF3B3B; color:#fff;}
.im-votos{display:flex; flex-direction:column; gap:8px; margin-top:8px;}
.im-voto{width:100%; text-align:left; padding:12px 14px; font-size:15px;}

/* ---- Cadáver Exquisito: libro de cuentos, hoja envejecida con tinta ---- */
.escena-libro{
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,214,120,.28), transparent 70%),
    linear-gradient(180deg, #6B3E75, #3F2150 60%, #2A1236);
  border-color:#C9A227;
}
.cu-portada{font-size:50px; text-align:center; line-height:1.1; margin:2px 0 6px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));}
.cu-nota{font-size:12px; font-weight:600; text-align:center; opacity:.9; margin:8px 4px;}
.cu-hoja{
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(120,80,30,.15) 25px 26px),
    linear-gradient(160deg, #FFF6DA, #F0DDAA);
  color:#3A2410; border:3px solid #C9A227; border-radius:6px 18px 18px 6px; padding:14px 14px 16px; margin-bottom:12px;
  box-shadow:0 6px 0 rgba(0,0,0,.35), -8px 0 0 -2px #8E6A1E inset;
}
.cu-hoja-sup{font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#8E6A1E; margin-bottom:8px;}
.cu-pregunta{font-size:21px; font-weight:800; line-height:1.2; margin-bottom:12px;}
.cu-input{
  width:100%; border:0; border-bottom:3px solid #8E6A1E; background:rgba(255,255,255,.55); border-radius:8px 8px 0 0;
  padding:10px 12px; font-family:var(--font-juego); font-size:18px; font-weight:700; color:#3A2410;
}
.cu-input:focus{outline:none; background:#fff; border-bottom-color:#E5484D;}
.cu-historia{font-size:19px; font-weight:700; line-height:1.55; margin:0;}
.cu-hoja-historia{padding:16px;}

/* ---- Dibujar y Adivinar: lienzo amarillo, alegre como un juego de dibujo ---- */
.escena-lienzo{
  background:
    radial-gradient(14% 10% at 12% 10%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(18% 12% at 90% 90%, rgba(255,255,255,.35), transparent 70%),
    linear-gradient(180deg, #FFD84D 0%, #FFB52E 100%);
  border-color:#E58A00; color:#4A2A00;
  box-shadow:inset 0 0 30px rgba(180,100,0,.25), 0 8px 18px rgba(15,42,77,.22);
}
.escena-lienzo .g-dialogo{background:rgba(255,255,255,.55); border-color:#E58A00; color:#4A2A00;}
.escena-lienzo .g-dialogo-titulo{text-shadow:none;}
.escena-lienzo .g-pie{color:#7A4A00;}
.db-portada{font-size:50px; text-align:center; line-height:1.1; margin:2px 0 6px;}
.db-nota{font-size:12px; font-weight:700; text-align:center; color:#7A4A00; margin:8px 4px;}
.db-banner{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:8px 10px; margin-bottom:10px;
  background:#fff; border:3px solid #E58A00; border-radius:16px; box-shadow:0 4px 0 #A85B00;
}
.db-banner-yo{background:linear-gradient(180deg,#5BE88D,#1FAE55); border-color:#0F6B33; color:#fff; box-shadow:0 4px 0 #0F6B33;}
.db-banner-sup{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; opacity:.85;}
.db-banner-palabra{font-size:22px; font-weight:800; line-height:1.1;}
.escena-lienzo .dibujar-canvas{border:4px solid #fff; border-radius:16px; box-shadow:0 0 0 3px #E58A00, 0 6px 0 rgba(0,0,0,.2); margin-bottom:12px;}
.escena-lienzo .dibujar-herramientas{margin-bottom:10px;}
.escena-lienzo .dibujar-color-swatch{width:32px; height:32px; border:3px solid #fff; box-shadow:0 2px 0 rgba(0,0,0,.3);}
.escena-lienzo .dibujar-color-swatch-selected{box-shadow:0 0 0 3px #4A2A00, 0 2px 0 rgba(0,0,0,.3); transform:scale(1.12);}
.escena-lienzo .dibujar-btn-borrar{width:auto; padding:8px 12px; font-size:13px;}
.escena-lienzo .dibujar-intento{background:#fff; border:2px solid #FFE08A; border-radius:14px; color:#4A2A00; font-size:13px; font-weight:600;}
.escena-lienzo .dibujar-intento-correcto{background:#D4F5DB; border-color:#3FAE5C; color:#1E6B34;}
.db-input{
  width:100%; border:3px solid #E58A00; border-radius:14px; background:#fff; padding:11px 14px; margin-bottom:8px;
  font-family:var(--font-juego); font-size:18px; font-weight:800; color:#4A2A00; text-align:center;
}
.db-input:focus{outline:none; box-shadow:0 0 0 3px rgba(229,138,0,.35);}

/* ---- Ruleta del día (Inicio) ---- */
.ruleta-card{text-align:center; margin-bottom:14px;}
.ruleta-titulo{font-size:22px; font-weight:800; text-shadow:0 2px 4px rgba(0,0,0,.5);}
.ruleta-mensaje{font-size:12.5px; font-weight:600; margin:2px 6px 4px; opacity:.92;}
.ruleta-rueda-wrap{width:min(270px, 100%); margin:0 auto 8px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));}
.ruleta-svg{display:block; width:100%; height:auto; overflow:visible;}

/* ====================================================================
   Pantallas de la app que no son juegos: entrada, Inicio, Juegos, Ranking,
   Premios, Comercios y la barra de abajo. Mismo lenguaje que los juegos.
   ==================================================================== */

/* Dorado festivo (Premios) */
.escena-oro{
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(255,216,77,.5), transparent 70%),
    linear-gradient(180deg, #7A3FD1 0%, #4B1FA0 55%, #2E0F70 100%);
  border-color:#FFD84D;
  box-shadow:inset 0 0 40px rgba(0,0,0,.35), 0 0 22px rgba(255,216,77,.45), 0 8px 18px rgba(15,42,77,.28);
}
.escena-oro .tienda-nota{color:rgba(255,255,255,.92); font-weight:700; text-align:center;}

/* Entrada y "sumate al viaje" */
.entrada-escena{padding-top:16px;}
.entrada-portada{display:flex; justify-content:center; margin:2px 0 12px;}
.entrada-portada img{width:92px; height:92px; border-radius:24px; border:4px solid #fff; box-shadow:0 6px 0 rgba(0,0,0,.25), 0 12px 18px rgba(0,0,0,.25);}
.entrada-input{
  width:100%; text-align:center; text-transform:uppercase; font-family:var(--font-juego); font-size:24px; font-weight:800; letter-spacing:2px;
  color:#143A66; background:#fff; border:4px solid #fff; border-radius:18px; padding:13px 14px; margin:4px 0 6px;
  box-shadow:0 5px 0 #8FA9CC, 0 8px 12px rgba(0,0,0,.2);
}
.entrada-input::placeholder{color:#8FA3BF; letter-spacing:0; font-weight:700; font-size:17px; text-transform:none;}
.entrada-input:focus{outline:none; border-color:#FFD84D;}
.entrada-input-normal{text-transform:none; letter-spacing:0; font-size:20px;}
.entrada-nota{font-size:13px; font-weight:700; text-align:center; margin:10px 6px 14px; text-shadow:0 1px 3px rgba(0,0,0,.4);}
.escena-cielo .chip{
  border:none; background:linear-gradient(180deg,#fff,#E3EEFB); color:#143A66; font-weight:800; font-size:15px; padding:10px 26px;
  box-shadow:0 4px 0 #8FA9CC, 0 6px 8px rgba(0,0,0,.18); transition:transform .08s, box-shadow .08s;
}
.escena-cielo .chip:active{transform:translateY(3px); box-shadow:0 1px 0 #8FA9CC;}
.escena-cielo .chip.selected{background:linear-gradient(180deg,#FFD84D,#FF9F1C); color:#4A2A00; box-shadow:0 4px 0 #A85B00, 0 6px 8px rgba(0,0,0,.2);}
.escena-cielo .btn-continuar-logo span{color:#fff; font-weight:800; font-size:15px; text-shadow:0 2px 4px rgba(0,0,0,.45);}
.escena-cielo .btn-continuar-logo:disabled{opacity:.55;}
.escena-cielo .btn-continuar-logo-img{border:3px solid #fff; box-shadow:0 5px 0 rgba(0,0,0,.25);}
.escena-cielo .bingo-roster-item{border-color:#E3EEFB;}

/* Inicio */
.escena-cielo .home-logo-banner{background:#fff; border-radius:20px; padding:10px 0; margin-bottom:12px; box-shadow:0 5px 0 rgba(0,0,0,.18);}
.escena-cielo .card{border:3px solid #fff; box-shadow:0 4px 0 rgba(0,0,0,.18);}
.chip-monedas-juego{
  background:linear-gradient(180deg,#FFE27A,#FFB52E); color:#4A2A00; border:2px solid #fff; font-size:14px; font-weight:800; padding:7px 14px;
  box-shadow:0 4px 0 #A85B00, 0 8px 12px rgba(0,0,0,.18);
}

/* Menú de Juegos: fichas de color */
.escena .categoria-juegos{border:3px solid rgba(255,255,255,.4);}
.juegos-escena{padding-bottom:6px;}
.juego-tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 14px;}
.juego-tile{
  border:none; border-radius:18px; padding:14px 8px 12px; color:#fff; font-family:var(--font-juego); cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:5px; text-shadow:0 1px 0 rgba(0,0,0,.3);
  box-shadow:0 5px 0 rgba(0,0,0,.35), 0 9px 12px rgba(0,0,0,.25); transition:transform .08s, box-shadow .08s;
}
.juego-tile:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.35);}
.juego-tile-icono{width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,.24); display:grid; place-items:center;}
.juego-tile-icono svg{width:28px; height:28px; stroke:#fff; color:#fff;}
.juego-tile-nombre{font-size:14px; font-weight:800; line-height:1.1;}
.juego-tile-sub{font-size:10px; font-weight:600; opacity:.92; line-height:1.2;}
.juego-tile-solo{background:linear-gradient(180deg,#5B7BE0,#2E4FB8);}
.juego-tile-cartas{background:linear-gradient(180deg,#3FBF73,#1E8A4E);}
.juego-tile-grupo{background:linear-gradient(180deg,#FFC247,#F08A1C);}
.juego-tile-video{background:linear-gradient(180deg,#F0647B,#B03060);}

/* Ranking: podio */
.rk-podio{display:flex; align-items:flex-end; justify-content:center; gap:8px; margin:6px 0 12px; min-height:200px;}
.rk-puesto{flex:1; max-width:104px; display:flex; flex-direction:column; align-items:center; text-align:center;}
.rk-corona{font-size:24px; line-height:1; margin-bottom:-6px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.rk-avatar{
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:17px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#6C8CFF,#3F5FE0); border:4px solid #C0C8D6; box-shadow:0 4px 8px rgba(0,0,0,.35);
}
.rk-1 .rk-avatar{width:62px; height:62px; font-size:21px; border-color:#FFD84D; box-shadow:0 0 16px rgba(255,216,77,.8);}
.rk-3 .rk-avatar{border-color:#D9965B;}
.rk-nombre{font-size:12px; font-weight:800; margin-top:5px; line-height:1.1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rk-pts{font-size:12px; font-weight:800; color:#FFD84D; margin-bottom:5px;}
.rk-base{
  width:100%; display:grid; place-items:center; border-radius:12px 12px 0 0; font-size:26px;
  background:linear-gradient(180deg,#D5DCE8,#9AA6BA); box-shadow:inset 0 3px 0 rgba(255,255,255,.5);
}
.rk-1 .rk-base{height:84px; background:linear-gradient(180deg,#FFE27A,#E5A91A);}
.rk-2 .rk-base{height:62px;}
.rk-3 .rk-base{height:46px; background:linear-gradient(180deg,#E7B27C,#B8793E);}
.rk-yo .rk-nombre{color:#FFD84D;}
.rk-yo .rk-avatar{box-shadow:0 0 0 3px #FFD84D, 0 0 16px rgba(255,216,77,.8);}
.rk-resto{display:flex; flex-direction:column; gap:7px;}
.rk-fila{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.22); border-radius:16px; padding:7px 12px;}
.rk-fila-yo{background:linear-gradient(180deg,rgba(255,216,77,.35),rgba(255,181,46,.25)); border-color:#FFD84D;}
.rk-fila-num{font-size:15px; font-weight:800; width:22px; text-align:center; opacity:.9;}
.rk-fila-avatar{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:linear-gradient(180deg,#6C8CFF,#3F5FE0); border:2px solid rgba(255,255,255,.6);}
.rk-fila-nombre{flex:1; font-size:14px; font-weight:800; line-height:1.1; display:flex; flex-direction:column;}
.rk-fila-nombre small{font-size:10px; font-weight:600; opacity:.75;}
.rk-fila-pts{font-size:14px; font-weight:800; color:#FFD84D;}

/* Comercios */
.cm-portada{font-size:50px; text-align:center; line-height:1.1; margin:2px 0 6px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));}
.cm-nota{font-size:13px; font-weight:700; text-align:center; margin:10px 6px; text-shadow:0 1px 3px rgba(0,0,0,.4);}
.escena-menta .comercio-fila{border:3px solid #fff; border-radius:18px; box-shadow:0 4px 0 rgba(0,0,0,.25);}
.comercio-fila-icono{font-size:26px; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex-shrink:0; background:linear-gradient(180deg,#FFE27A,#FFB52E);}
.escena-menta .comercio-qr-box{border:3px solid #fff; box-shadow:0 5px 0 rgba(0,0,0,.25);}
.escena-menta .comercio-flyer-box{background:rgba(255,255,255,.12); border-radius:16px; padding:10px; margin-bottom:10px;}

/* Barra de abajo: botones grandes, el activo se levanta en dorado */
.tabbar{
  padding:8px 6px 10px; background:linear-gradient(180deg,#fff,#F1EEFF); border-top:3px solid #E4DFFF;
  border-radius:22px 22px 0 0; box-shadow:0 -6px 14px rgba(40,20,120,.12);
}
.tab{gap:3px; padding:2px 6px; min-width:58px; color:#7C86A0; font-weight:700; font-size:10px;}
.tab .dot{width:38px; height:38px; border-radius:13px; background:#ECEEF8; color:#7C86A0; transition:transform .12s ease, background .12s ease;}
.tab .dot svg{width:24px; height:24px;}
.tab.active{color:var(--orange-sombra); font-weight:800;}
.tab.active .dot{background:linear-gradient(180deg,var(--orange-soft),var(--orange)); color:#fff; box-shadow:0 4px 0 var(--orange-sombra); transform:translateY(-5px);}
.tab:active .dot{transform:translateY(2px);}
.view > .entrada-escena{flex:1; display:flex; flex-direction:column; justify-content:center;}
.escena-cielo .home-logo-banner{padding:6px 0;}
.escena-cielo .home-logo-banner img{height:60px;}
.escena-cielo .card{padding:12px 14px; margin-bottom:6px;}

/* ====================================================================
   Panel del organizador (nuevo viaje, viajes, comercios, panel general):
   mismo lenguaje de juego, pero sobre fondo oscuro para que las tarjetas
   blancas con datos se lean de un vistazo.
   ==================================================================== */
.organizador-escena{margin:16px 0 14px; padding:14px 10px 16px;}
.organizador-escena .organizador-grid{margin-top:0;}
.organizador-escena .btn-organizador{border:3px solid #fff; box-shadow:0 4px 0 rgba(0,0,0,.35), 0 8px 12px rgba(0,0,0,.25);}
.organizador-escena .btn-organizador:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35);}

/* Botones: los de acción como los 3D de los juegos, los secundarios en blanco */
.organizador-escena .btn-primary{
  width:100%; border:none; border-radius:14px; padding:12px 8px; margin-top:8px; font-family:var(--font-juego); font-size:15px; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(180deg,var(--orange-soft),var(--orange)); text-shadow:0 1px 0 rgba(0,0,0,.28);
  box-shadow:0 4px 0 var(--orange-sombra), 0 8px 12px rgba(0,0,0,.3); transition:transform .08s, box-shadow .08s;
}
.organizador-escena .btn-primary:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 var(--orange-sombra);}
.organizador-escena .btn-primary:disabled{opacity:.5; filter:grayscale(.5); box-shadow:0 2px 0 rgba(0,0,0,.35); cursor:not-allowed;}
.organizador-escena .btn-ghost{
  width:100%; border:none; border-radius:14px; padding:11px 8px; margin-top:8px; font-family:var(--font-juego); font-size:14px; font-weight:800; color:#143A66; cursor:pointer;
  background:linear-gradient(180deg,#fff,#E3EEFB); box-shadow:0 4px 0 #8FA9CC, 0 6px 8px rgba(0,0,0,.2); transition:transform .08s, box-shadow .08s;
}
.organizador-escena .btn-ghost:active{transform:translateY(3px); box-shadow:0 1px 0 #8FA9CC;}

/* Campos de texto: blancos, grandes, con relieve */
.organizador-escena .bingo-input-numero,
.organizador-escena textarea{
  width:100%; text-align:center; font-family:var(--font-juego); font-size:16px; font-weight:700; color:#143A66; background:#fff;
  border:3px solid #fff; border-radius:14px; padding:11px 12px; margin:6px 0; box-shadow:0 4px 0 #8FA9CC, 0 6px 8px rgba(0,0,0,.2);
}
.organizador-escena textarea{text-align:left; font-size:13px; font-weight:600;}
.organizador-escena .bingo-input-numero::placeholder, .organizador-escena textarea::placeholder{color:#8FA3BF; font-weight:600; font-size:14px;}
.organizador-escena .bingo-input-numero:focus, .organizador-escena textarea:focus{outline:none; border-color:#FFD84D;}
.organizador-escena .comercio-admin-card .bingo-input-numero{box-shadow:0 3px 0 #C8D4E8; border-color:#E3EEFB; margin:5px 0;}

/* Listas y tarjetas */
.organizador-escena .bingo-roster-item{background:#fff; border:3px solid #fff; border-radius:14px; box-shadow:0 3px 0 rgba(0,0,0,.3); padding:9px 12px;}
.organizador-escena .bingo-roster-item span:first-child{font-weight:800;}
.organizador-escena .comercio-admin-card{background:#fff; border:3px solid #fff; border-radius:16px; box-shadow:0 4px 0 rgba(0,0,0,.35); padding:12px;}
.organizador-escena .comercio-admin-card h3{font-size:16px; font-weight:800;}
.organizador-escena .comercio-admin-checkbox input{accent-color:var(--orange); width:18px; height:18px;}
.organizador-escena .btn-finalizar-viaje{background:linear-gradient(180deg,var(--orange-soft),var(--orange)); color:#fff; border:none; box-shadow:0 2px 0 var(--orange-sombra); font-weight:800;}
.organizador-escena .btn-eliminar-pasajero{border-width:2px;}

/* Textos sobre el fondo oscuro */
.organizador-escena .link-chico{color:rgba(255,255,255,.92); font-weight:700; font-size:12px;}
.organizador-escena .bingo-pin-error{color:#FFD84D; font-weight:700;}
.organizador-escena .bingo-pin-box{margin-bottom:10px;}
.organizador-escena > div > p[style*="color:var(--gray)"], .organizador-escena p[style*="color:var(--gray)"]{color:rgba(255,255,255,.85) !important; font-weight:600;}
.organizador-escena .comercio-admin-card p[style*="color:var(--gray)"]{color:#5B6B85 !important;}
.organizador-escena #generar-codigo-content > .bingo-pin-box > p:last-of-type{color:rgba(255,255,255,.88);}
.organizador-escena .organizador-grid{margin-bottom:14px;}
.organizador-escena .link-chico:not([onclick]){text-decoration:none; font-weight:600; opacity:.92;}
.home-viaje-link{
  display:inline-block; background:#fff; border:2px solid #E3EEFB; border-radius:999px; padding:3px 11px; font-weight:700; color:#143A66; cursor:pointer;
  text-decoration:none; box-shadow:0 2px 0 #8FA9CC;
}
.home-viaje-link{white-space:nowrap; font-size:12px;}

/* Chinchón usa también el 8 y el 9; y la mano de 8 cartas (tras levantar) se solapa más para entrar */
.tcarta-pips-8, .tcarta-pips-9{grid-template-columns:1fr 1fr; gap:1px 0;}
.tcarta-pips-9 svg:nth-child(9){grid-column:1 / 3;}
.m-mano-solapada .tcarta{margin-left:calc(-1 * var(--solape, 20px));}
.m-mano-solapada .tcarta:first-child{margin-left:0;}

/* Versión de tienda (TWA): sin Panel general del dueño */
.modo-tienda .btn-solo-web{display:none;}
.entrada-legal{font-size:12px; font-weight:600; text-align:center; margin:4px 6px 10px; opacity:.85; text-shadow:0 1px 3px rgba(0,0,0,.4);}
.entrada-legal a{color:inherit; text-decoration:underline;}

/* Flecha de volver flotante: solo cuando el juego oculta su título y ocupa toda la escena */
.btn-back-flotante{display:none;}
.juego-inmersivo .btn-back-flotante, .truco-en-mesa .btn-back-flotante{
  display:flex; align-self:flex-start; margin:2px 0 6px 2px;
  width:34px; height:34px; font-size:19px;
}

/* ---- Juegos de acción (canvas): corredor, vuelo, serpiente ---- */
.arc-caja{position:relative; margin:0 auto; border-radius:16px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.25); line-height:0;}
.arc-canvas{display:block; width:100%; height:auto; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;}
.arc-overlay{position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; background:rgba(8,20,45,.58); line-height:1.3; text-align:center;}
.arc-overlay .g-acciones{width:100%;}
.arc-fin-icono{font-size:54px; line-height:1;}
.arc-escena .g-hud{justify-content:center;}

/* ---- Baraja francesa (poker) y Solitario ---- */
.fcarta{position:relative; width:var(--cw,44px); height:calc(var(--cw,44px) * 1.42); background:#fff; border-radius:calc(var(--cw,44px) * .12); box-shadow:0 1px 3px rgba(0,0,0,.5); font-family:var(--font-juego, Poppins, sans-serif); font-weight:800; line-height:1; flex-shrink:0; user-select:none; -webkit-user-select:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.fc-rojo{color:#D3202F;} .fc-negro{color:#1A1A1A;}
.fc-esq{position:absolute; left:calc(var(--cw,44px) * .07); top:calc(var(--cw,44px) * .05); font-size:calc(var(--cw,44px) * .27); white-space:nowrap; line-height:1;}
.fc-centro{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:calc(var(--cw,44px) * .12); font-size:calc(var(--cw,44px) * .6);}
.fc-figura{font-size:calc(var(--cw,44px) * .5); line-height:.9;}
.fc-figura-palo{font-size:calc(var(--cw,44px) * .3); line-height:1;}
.fc-sel{outline:3px solid #FFD84D; outline-offset:-1px; transform:translateY(-2px); z-index:3;}
.fc-dorso{background:linear-gradient(135deg,#2A4E9A,#0F2A4D); border:2px solid #fff; box-sizing:border-box;}
.fc-dorso img{position:absolute; left:50%; top:50%; width:62%; height:62%; transform:translate(-50%,-50%); object-fit:contain; background:rgba(255,255,255,.92); border-radius:50%; padding:2px; box-sizing:border-box;}
.fc-hueco{background:rgba(0,0,0,.16); border:2px dashed rgba(255,255,255,.5); box-shadow:none; box-sizing:border-box; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:calc(var(--cw,44px) * .45);}
.sol-palo-hueco{font-size:calc(var(--cw,44px) * .5); color:rgba(255,255,255,.75);} .sol-palo-hueco.fc-rojo{color:#FF9AA2;}
.sol-escena{padding:14px 8px 12px;}
.sol-tablero{width:100%; display:flex; flex-direction:column; gap:10px;}
.sol-fila-alta, .sol-fila-baja{display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--gap,4px); align-items:start;}
.sol-celda{display:flex; justify-content:center;}
.sol-col{position:relative;}
.sol-pos{position:absolute; left:50%; transform:translateX(-50%);}
.sol-acciones{display:flex; gap:8px; margin-top:12px;}
.sol-acciones .gbtn{flex:1; min-width:0; padding-left:6px; padding-right:6px;}
.sol-fin{margin-top:10px;}

/* ---- Poker de video ---- */
.vp-escena{padding:14px 8px 12px;}
.vp-ficha{width:16px; height:16px; object-fit:contain; vertical-align:-3px; background:#fff; border-radius:50%; padding:1px;}
.vp-tabla{background:rgba(0,0,0,.28); border:2px solid rgba(255,216,77,.5); border-radius:12px; padding:6px 10px; margin-bottom:10px; font-size:11.5px; font-weight:700; color:#fff;}
.vp-fila{display:flex; justify-content:space-between; padding:1.5px 4px; border-radius:6px;}
.vp-fila span:last-child{color:#FFD84D;}
.vp-gana{background:#FFD84D; color:#3A2A00;} .vp-gana span:last-child{color:#3A2A00;}
.vp-cartas{display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-bottom:6px; justify-items:center;}
.vp-celda{display:flex; flex-direction:column; align-items:center; gap:4px;}
.vp-mantener{font-size:9px; font-weight:800; color:#FFD84D; letter-spacing:.5px; height:11px;}
.vp-mensaje{text-align:center; color:#fff; font-weight:700; font-size:13px; min-height:34px; margin:8px 4px;}
.vp-mensaje-gana{color:#FFD84D;}
.vp-controles{display:flex; gap:8px; align-items:stretch;}
.vp-controles .gbtn-ancho{flex:1;}
.vp-controles .gbtn-chico-texto{width:46px; padding:0; flex:none; font-size:20px;}
.vp-aviso{text-align:center; color:rgba(255,255,255,.6); font-size:10.5px; margin:10px 6px 0;}

/* ---- Texas Hold'em ---- */
.tx-escena{padding:12px 8px 10px;}
.tx-hud{justify-content:center; flex-wrap:nowrap;}
.tx-hud .g-pill{white-space:nowrap; font-size:12.5px; padding:6px 12px;}
.tx-rivales{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:8px;}
.tx-rival{flex:1 1 30%; min-width:84px; max-width:112px; background:rgba(0,0,0,.28); border:2px solid transparent; border-radius:12px; padding:5px 4px; text-align:center; color:#fff; font-size:10.5px; font-weight:700; line-height:1.25;}
.tx-rival-nombre{font-size:11.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tx-rival-cartas{display:flex; justify-content:center; margin:3px 0; min-height:22px;}
.tx-dorsos{display:flex; gap:2px;}
.tx-rival-cartas .fcarta{margin:0 1px;}
.tx-rival-estado{font-size:9.5px; color:#FFE9A6; min-height:12px;}
.tx-turno{border-color:#FFD84D; box-shadow:0 0 10px rgba(255,216,77,.55);}
.tx-fuera{opacity:.5;}
.tx-ganador{border-color:#5BE88D; box-shadow:0 0 10px rgba(91,232,141,.6); opacity:1;}
.tx-ficha{display:inline-flex; align-items:center; gap:3px; font-weight:800;}
.tx-ficha img{width:14px; height:14px; object-fit:contain; background:#fff; border-radius:50%; padding:1px;}
.tx-insignia{display:inline-block; background:#FFD84D; color:#3A2A00; border-radius:8px; font-size:8px; font-weight:800; padding:1px 4px; margin-left:2px; vertical-align:1px;}
.tx-mesa{background:rgba(0,0,0,.22); border-radius:14px; padding:8px 4px 6px; text-align:center; margin-bottom:8px;}
.tx-comunes{display:flex; justify-content:center; gap:4px;}
.tx-ciegas{color:rgba(255,255,255,.65); font-size:10px; font-weight:700; margin-top:5px;}
.tx-yo{display:flex; justify-content:center; align-items:center; gap:14px; padding:7px; border-radius:14px; border:2px solid transparent;}
.tx-yo-cartas{display:flex; gap:5px;}
.tx-yo-datos{color:#fff; font-weight:800; font-size:13px; line-height:1.35;}
.tx-mi-mano{color:#FFD84D; font-size:11.5px;}
.tx-apostado{color:rgba(255,255,255,.8); font-size:10.5px; font-weight:700;}
.tx-estado{text-align:center; color:#fff; font-weight:700; font-size:13px; min-height:20px; margin:8px 6px;}
.tx-estado-turno{color:#FFD84D;}
.tx-acciones{display:flex; gap:8px; margin-bottom:8px;}
.tx-acciones .gbtn{flex:1;}
.tx-subir{display:flex; gap:8px; align-items:stretch;}
.tx-subir .gbtn-ancho{flex:1;}
.tx-subir .gbtn-chico-texto{width:46px; padding:0; flex:none; font-size:20px;}
.tx-rapidas{display:flex; justify-content:center; gap:16px; margin:8px 0 2px; color:#FFE9A6; font-size:12px; font-weight:800; text-decoration:underline; cursor:pointer;}
.tx-capacidades{display:grid; grid-template-columns:repeat(5, 1fr); gap:6px;}

/* ---- Mi personaje ---- */
.av-svg{display:block;}
.av-mini{display:inline-block; border-radius:50%; overflow:hidden; vertical-align:middle; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); flex-shrink:0;}
.av-mini .av-svg{width:100%; height:100%;}
.rk-avatar .av-mini, .rk-fila-avatar .av-mini{width:100% !important; height:100% !important; box-shadow:none;}
.rk-avatar, .rk-fila-avatar{overflow:hidden; padding:0;}
.home-avatar{display:inline-block; vertical-align:middle; margin-right:4px; cursor:pointer;}
.home-avatar .av-mini{box-shadow:0 2px 6px rgba(0,0,0,.25);}
.av-home{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.92); color:#0F2A4D; border-radius:18px; padding:8px 14px 8px 8px; margin-bottom:12px; cursor:pointer; box-shadow:0 3px 0 rgba(15,42,77,.18);}
.av-home-img{border-radius:14px; overflow:hidden; line-height:0; flex-shrink:0;}
.av-home-txt{flex:1; min-width:0;}
.av-home-txt h3{font-size:16px; margin:0 0 2px; font-family:var(--font-juego);}
.av-home-txt p{font-size:12px; margin:0; color:#5b6673; line-height:1.3;}
.av-home-flecha{font-size:26px; color:var(--orange,#E6A817); font-weight:800;}
.av-escena{padding:12px 10px 14px;}
.av-preview{display:flex; justify-content:center; margin:4px 0 10px; line-height:0;}
.av-preview .av-svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));}
.av-confirmar{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; color:#0F2A4D; border-radius:14px; padding:8px 10px; margin-bottom:10px; font-size:13px; font-weight:700;}
.av-confirmar-botones{display:flex; gap:6px;}
.av-confirmar-botones .gbtn{padding:0 12px; min-height:36px;}
.av-tabs{display:flex; gap:6px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none;}
.av-tabs::-webkit-scrollbar{display:none;}
.av-tab{flex:none; border:none; background:rgba(255,255,255,.55); color:#0F2A4D; font-weight:800; font-size:12.5px; padding:8px 13px; border-radius:20px; font-family:inherit; cursor:pointer;}
.av-tab-sel{background:var(--orange,#E6A817); color:#fff; box-shadow:0 2px 0 var(--orange-sombra,#B8830A);}
.av-cuerpo{background:rgba(255,255,255,.35); border-radius:16px; padding:10px 8px;}
.av-seccion{font-size:12px; font-weight:800; color:#0F2A4D; margin:4px 4px 6px;}
.av-seccion:not(:first-child){margin-top:12px;}
.av-grilla{display:grid; gap:8px;}
.av-grilla-3{grid-template-columns:repeat(3, 1fr);}
.av-grilla-4{grid-template-columns:repeat(4, 1fr);}
.av-item{display:flex; flex-direction:column; align-items:center; gap:2px; background:#fff; border:3px solid transparent; border-radius:14px; padding:6px 4px 6px; font-family:inherit; cursor:pointer; color:#0F2A4D; min-width:0;}
.av-item .av-svg{border-radius:10px; overflow:hidden;}
.av-item-sel{border-color:var(--orange,#E6A817); box-shadow:0 0 0 2px rgba(230,168,23,.35);}
.av-item-pend{border-color:#4F7BFF;}
.av-item-bloq .av-svg{filter:saturate(.7);}
.av-item-chico{padding:6px 2px;}
.av-item-nombre{font-size:11px; font-weight:800; line-height:1.15; text-align:center;}
.av-item-precio{font-size:10.5px; font-weight:800; color:#B8830A;}
.av-nada{width:76px; height:91px; border-radius:10px; background:#eef2f7; display:grid; place-items:center; font-size:34px; color:#9aa6b4;}
.av-colores{display:flex; flex-wrap:wrap; gap:8px; padding:0 4px;}
.av-color{width:34px; height:34px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer;}
.av-color-sel{outline:3px solid var(--orange,#E6A817); outline-offset:1px;}
.av-nota{font-size:10.5px; color:rgba(15,42,77,.7); text-align:center; margin:10px 6px 0;}

/* ---- Plaza Busmac ---- */
.plz-escena{padding:10px 8px 12px;}
.plz-caja{margin:0 auto; border-radius:16px; overflow:hidden; line-height:0; box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.3);}
.plz-canvas{display:block; width:100%; height:auto; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;}
.plz-accion{min-height:58px; margin:8px 0 4px; text-align:center;}
.plz-accion-sub{font-size:11.5px; color:#0F2A4D; opacity:.8; margin-top:4px; font-weight:700;}
.plz-botones{display:flex; gap:8px; margin-top:6px;}
.plz-botones .gbtn{flex:1; min-width:0;}
.plz-menu{display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; margin:8px 0 2px;}
.plz-frase{background:#fff; border:none; border-radius:12px; padding:9px 6px; font-weight:800; color:#0F2A4D; font-family:inherit; font-size:13px; cursor:pointer; box-shadow:0 2px 0 rgba(15,42,77,.15);}
.plz-home-img{font-size:46px; width:84px; height:84px; display:grid; place-items:center; background:linear-gradient(180deg,#BFE6FF,#7FC77A); border-radius:14px; flex-shrink:0; line-height:1;}

/* ---- Guerra de cursos ---- */
.cur-selector{display:flex; gap:8px; margin-bottom:10px;}
.cur-opcion{flex:1; border:none; background:rgba(255,255,255,.14); color:#fff; font-weight:800; font-size:13px; padding:9px 6px; border-radius:14px; font-family:inherit; cursor:pointer;}
.cur-opcion-sel{background:var(--orange,#E6A817); box-shadow:0 2px 0 var(--orange-sombra,#B8830A);}
.cur-elegir{background:rgba(255,255,255,.12); border-radius:14px; padding:10px; margin:10px 0; color:#fff;}
.cur-elegir-titulo{font-weight:800; font-size:14px;}
.cur-elegir-sub{font-size:11.5px; opacity:.85; margin:2px 0 8px;}
.cur-elegir-lista{display:flex; flex-wrap:wrap; gap:6px;}
.cur-chip{border:none; background:#fff; color:#0F2A4D; font-weight:800; font-size:12px; padding:7px 11px; border-radius:16px; font-family:inherit; cursor:pointer;}
.cur-lista{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.cur-fila{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.1); border:2px solid transparent; border-radius:14px; padding:8px 10px; color:#fff;}
.cur-fila-yo{border-color:#FFD84D; background:rgba(255,216,77,.14);}
.cur-puesto{font-size:22px; width:30px; text-align:center; font-weight:800;}
.cur-datos{flex:1; min-width:0;}
.cur-nombre{font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cur-nombre small{font-weight:700; color:#FFD84D;}
.cur-barra{height:7px; background:rgba(255,255,255,.18); border-radius:4px; margin:5px 0 3px; overflow:hidden;}
.cur-barra span{display:block; height:100%; background:linear-gradient(90deg,#FFD84D,#FF9A3D); border-radius:4px;}
.cur-sub{font-size:10.5px; opacity:.75;}
.cur-pts{font-weight:800; font-size:18px; text-align:right;}
.cur-pts small{font-size:10px; opacity:.8;}

/* ---- Aviso de sin conexión ---- */
.banner-sin-conexion{position:absolute; left:10px; right:10px; top:58px; z-index:200; background:#B3402A; color:#fff; font-size:12px; font-weight:800; text-align:center; padding:8px 12px; border-radius:12px; box-shadow:0 3px 10px rgba(0,0,0,.3); opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .25s, transform .25s;}
.banner-sin-conexion.show{opacity:1; transform:none;}

/* ---- Tarjeta del organizador en Inicio ---- */
.org-home-img{font-size:42px; width:84px; height:84px; display:grid; place-items:center; background:linear-gradient(180deg,#2A2F57,#12163A); border-radius:14px; flex-shrink:0; line-height:1;}
.org-home{border:2px solid rgba(255,216,77,.7);}

/* ---- Filas del panel del organizador: que no se salgan ---- */
.organizador-escena .bingo-roster-item{flex-wrap:wrap; row-gap:8px; box-sizing:border-box; max-width:100%;}
.organizador-escena .bingo-roster-item > span:first-child{flex:1 1 100%; min-width:0; overflow-wrap:anywhere;}
.organizador-escena .bingo-roster-derecha{flex:1 1 100%; flex-wrap:wrap; justify-content:flex-start; gap:6px; min-width:0;}
.organizador-escena .bingo-roster-derecha > span{font-size:12px; font-weight:700; margin-right:auto; white-space:nowrap;}
.organizador-escena .bingo-roster-derecha .btn-eliminar-pasajero{min-height:26px;}

/* ---- Logo sin recuadro ---- */
.fc-dorso img{background:none !important; border-radius:0 !important; padding:0 !important;}
.vp-ficha{background:none !important; border-radius:0 !important; padding:0 !important;}
.tx-ficha img{background:none !important; border-radius:0 !important; padding:0 !important;}
.logo-ancho .fc-dorso img{background:rgba(255,255,255,.95) !important; border-radius:6px !important; padding:2px !important; width:78%; height:auto;}
.logo-ancho .vp-ficha, .logo-ancho .tx-ficha img{background:#fff !important; border-radius:4px !important; padding:1px 2px !important; width:auto; height:14px;}

/* ---- Categorías Viajeras ---- */
.cat-escena{padding:10px 8px 14px;}
.cat-fila-mazo{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:12px;}
.cat-mazo-par{display:flex; gap:8px;}
.cat-botones{display:flex; flex-direction:column; gap:6px;}
.cat-botones .gbtn{min-height:34px; padding:0 14px; font-size:13px;}
.cat-tablero{width:100%;}
.cat-fila-slots, .cat-fila-cols{display:grid; grid-template-columns:repeat(var(--n, 3), 1fr); gap:6px; align-items:start;}
.cat-fila-slots{margin-bottom:12px;}
.cat-celda{display:flex; justify-content:center;}
.cat-col{position:relative;}
.cat-pos{position:absolute; left:50%; transform:translateX(-50%);}
.cat-carta{position:relative; width:var(--cw,60px); height:calc(var(--cw,60px) * 1.32); background:#FFFDF6; border-radius:calc(var(--cw,60px) * .12); border:2px solid #EADFC8; box-shadow:0 2px 3px rgba(0,0,0,.35); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:calc(var(--cw,60px) * .08) 2px 3px; color:#4A2F1B; font-weight:800; cursor:pointer; overflow:hidden; font-family:inherit; user-select:none; -webkit-tap-highlight-color:transparent;}
.cat-texto{font-size:max(8.5px, calc(var(--cw,60px) * .18)); line-height:1.1; text-align:center; overflow-wrap:break-word; hyphens:auto; margin-top:calc(var(--cw,60px) * .06);}
.cat-cab{border-color:#E6A817; background:#FFF9E5;}
.cat-barra{display:flex; align-items:center; justify-content:space-between; width:100%; gap:2px;}
.cat-logo-chico{width:calc(var(--cw,60px) * .26); height:calc(var(--cw,60px) * .26); object-fit:contain;}
.cat-cuenta{font-size:calc(var(--cw,60px) * .18); color:#9B7A2A;}
.cat-cuenta-sola{position:absolute; top:3px; right:5px;}
.cat-mini{font-size:max(8px, calc(var(--cw,60px) * .14)); color:#9B7A2A; width:100%; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:calc(var(--cw,60px) * .3);}
.cat-com{background:linear-gradient(180deg,#FFF3B0,#FFD84D); border-color:#C9A227; justify-content:center;}
.cat-logo-grande{width:60%; height:50%; object-fit:contain;}
.cat-texto-com{margin-top:2px; color:#6B4A00;}
.cat-dorso{background:repeating-conic-gradient(#4FA3FF 0 25%, #3B87E8 0 50%) 0 0 / calc(var(--cw,60px) * .28) calc(var(--cw,60px) * .28); border-color:#fff; align-items:center; justify-content:center; padding:0;}
.cat-logo-dorso{width:46%; height:46%; object-fit:contain;}
.cat-hueco{background:rgba(255,255,255,.2); border:2px dashed rgba(255,255,255,.6); box-shadow:none; align-items:center; justify-content:center;}
.cat-logo-hueco{width:55%; height:55%; opacity:.5; object-fit:contain;}
.cat-reciclar{font-size:calc(var(--cw,60px) * .45); color:rgba(255,255,255,.85);}
.cat-sel{outline:3px solid #FF7A1A; outline-offset:-1px; transform:translateY(-2px); z-index:3;}
.cat-pista{outline:3px solid #2FD27A; outline-offset:-1px; animation:catPulso 1s infinite;}
@keyframes catPulso{50%{box-shadow:0 0 12px 3px rgba(47,210,122,.9);}}
.cat-completa .cat-carta{border-color:#2FD27A; box-shadow:0 0 10px rgba(47,210,122,.7);}
.cat-mazo-wrap{position:relative;}
.cat-mazo-cuenta{position:absolute; top:-6px; right:-6px; background:#fff; color:#0F2A4D; border-radius:10px; font-size:11px; font-weight:800; padding:1px 7px; box-shadow:0 1px 3px rgba(0,0,0,.4);}
.cat-fin{margin-top:10px;}

/* ---- Feria de la plaza ---- */
.plz-escena{position:relative;}
.plz-modal{position:absolute; inset:0; z-index:30; background:rgba(8,20,45,.72); display:flex; align-items:center; justify-content:center; padding:14px; border-radius:inherit;}
.plz-modal-caja{background:#fff; color:#0F2A4D; border-radius:20px; padding:16px; width:100%; max-height:100%; overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,.4); text-align:center;}
.fer-titulo{margin:0 0 6px; font-size:20px; font-family:var(--font-juego);}
.fer-texto{font-size:14px; font-weight:700; margin:6px 0;}
.fer-sub{font-size:12px; color:#5b6673; margin:4px 0 8px; font-weight:600;}
.fer-grande{font-size:56px; line-height:1.1;}
.fer-pos{font-size:54px; font-weight:800; color:var(--orange,#E6A817); font-family:var(--font-juego); line-height:1.1; margin:2px 0;}
.fer-cupon{display:inline-block; font-size:28px; font-weight:800; letter-spacing:2px; color:#0F2A4D; background:#FFF3B0; border:3px dashed #E6A817; border-radius:14px; padding:8px 16px; margin:6px 0; font-family:var(--font-juego);}
.fer-items{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin:10px 0;}
.fer-item{display:flex; flex-direction:column; align-items:center; gap:2px; border:none; background:#FFF3D6; color:#0F2A4D; font-weight:800; font-size:13px; border-radius:14px; padding:10px 4px; font-family:inherit; cursor:pointer;}
.fer-item span{font-size:30px;}
.fer-promos{display:flex; flex-direction:column; gap:8px; margin:10px 0; text-align:left;}
.fer-promo{display:flex; align-items:center; justify-content:space-between; gap:8px; background:#EEF4FF; border-radius:14px; padding:8px 10px; font-size:13px;}
.fer-botones{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.fer-admin{background:#F7F5F0; border-radius:12px; padding:10px; margin:-6px 0 10px; color:#0F2A4D; font-size:12.5px;}
.fer-admin textarea, .fer-admin input[type=text]{width:100%; box-sizing:border-box; font-size:13px; border:1px solid #ccd; border-radius:10px; padding:8px; margin-bottom:6px; font-family:inherit;}
.fer-admin-t{font-weight:800; margin:12px 0 4px;} .fer-admin-t:first-child{margin-top:0;}
.fer-admin-t small{font-weight:600; color:#5b6673;}
.fer-check{display:flex; align-items:center; gap:6px; margin:4px 0 6px; font-weight:700;}
.fer-fila{display:flex; align-items:center; justify-content:space-between; gap:8px; background:#fff; border-radius:10px; padding:6px 8px; margin-bottom:4px;}
.fer-fila-ok{opacity:.6;}
.fer-mini{border:1.5px solid var(--orange,#E6A817); color:#B8830A; background:none; border-radius:14px; padding:4px 9px; font-size:11px; font-weight:800; cursor:pointer; font-family:inherit; flex-shrink:0;}
.fer-vacio{color:#8793a1; padding:4px 2px;}
.fer-sub-admin{margin:6px 0;}
.fer-botones-admin{display:flex; gap:8px; align-items:center;}
.fer-aviso{font-size:11px; color:#8a5a00; background:#FFF3D6; border-radius:8px; padding:6px 8px; margin-top:8px;}

/* ---- Salas de la plaza ---- */
.plz-sala-fila{display:flex; align-items:center; justify-content:space-between; gap:8px; background:#EEF4FF; border-radius:12px; padding:8px 10px; margin-bottom:6px; font-weight:800; font-size:13px; color:#0F2A4D; text-align:left;}
.plz-sala-fila small{color:#5b6673; font-weight:700; margin-left:6px;}
.plz-sala-fila.actual{background:#FFF3B0;}
.plz-sala-fila .gbtn{min-height:32px; padding:0 14px;}

/* ---- Botones de la plaza en dos filas ---- */
.plz-botones{flex-wrap:wrap;}
.plz-botones .gbtn{flex:1 1 40%;}

/* ---- Micro de dos pisos y bandeja de pedidos ---- */
.plz-botones .gbtn{flex:1 1 30%;}
.mic-caja{padding:10px 12px;}
.mic-buscar input{width:100%; box-sizing:border-box; border:1.5px solid #ccd; border-radius:12px; padding:8px 10px; font-size:14px; font-family:inherit; margin-bottom:6px; text-align:center;}
.mic-resumen{display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:#0F2A4D; margin:2px 2px 6px;}
.mic-tabs{display:flex; gap:6px; margin-bottom:6px;}
.mic-tab{flex:1; border:2px solid #0F2A4D; background:#fff; color:#0F2A4D; border-radius:12px; padding:6px 4px; font-weight:800; font-size:12px; font-family:inherit; cursor:pointer;}
.mic-tab.on{background:#0F2A4D; color:#fff;}
.mic-bus{background:linear-gradient(#DCEBFF,#EEF4FF); border:3px solid #0F2A4D; border-radius:18px; padding:8px 6px; max-height:168px; overflow:auto;}
.mic-arriba{background:linear-gradient(#FFF3D6,#FFF9EA);}
.mic-frente{font-size:11px; font-weight:800; color:#5b6673; text-align:center; margin-bottom:6px;}
.mic-fila{display:grid; grid-template-columns:1fr 1fr 12px 1fr 1fr; gap:4px; margin-bottom:4px; align-items:stretch;}
.mic-hueco{display:block;}
.mic-asiento{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:1px; border:2px solid transparent; background:#fff; border-radius:10px; padding:2px 0 3px; min-height:50px; font-family:inherit; cursor:pointer; color:#0F2A4D;}
.mic-asiento b{font-size:10px; font-weight:800; line-height:1;}
.mic-asiento .av-mini{border-radius:50%; overflow:hidden; display:inline-block;}
.mic-vacio{font-size:20px; opacity:.35; line-height:34px;}
.mic-asiento.plaza .av-mini{opacity:.35; filter:grayscale(.6);}
.mic-asiento em{position:absolute; right:0; bottom:0; font-style:normal; font-size:12px;}
.mic-asiento.yo{border-color:#E6A817; background:#FFF3B0;}
.mic-asiento.sel{border-color:#3A86FF; box-shadow:0 0 0 2px rgba(58,134,255,.35);}
.mic-detalle-caja{margin:6px 0 0;}
.mic-detalle{display:flex; align-items:center; gap:10px; background:#EEF4FF; border-radius:14px; padding:8px 10px; margin-bottom:6px; text-align:left;}
.mic-det-av{flex-shrink:0;}
.ped-panel{background:#F7F5F0; border-radius:12px; padding:10px; margin:-6px 0 10px; color:#0F2A4D; font-size:12.5px;}
.ped-titulo{font-weight:800; font-size:14px; margin-bottom:6px;}
.ped-titulo small{font-weight:700; color:#8a5a00; margin-left:6px;}
.ped-chips{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px;}
.ped-chip{border:1.5px solid #ccd; background:#fff; color:#0F2A4D; border-radius:14px; padding:4px 9px; font-size:11.5px; font-weight:800; cursor:pointer; font-family:inherit;}
.ped-chip.on{background:#0F2A4D; color:#fff; border-color:#0F2A4D;}
.ped-chip b{background:#E5586E; color:#fff; border-radius:9px; padding:0 5px; margin-left:2px;}
.ped-lista{display:flex; flex-direction:column; gap:5px; max-height:300px; overflow:auto;}
.ped-fila{display:flex; align-items:center; gap:8px; background:#fff; border-radius:10px; padding:7px 9px; border-left:4px solid #E6A817;}
.ped-fila.ped-urgente{border-left-color:#E5334B; background:#FFECEE;}
.ped-fila.ped-hecho{opacity:.55; border-left-color:#3B9B5A;}
.ped-emoji{font-size:22px; flex-shrink:0;}
.ped-txt{flex:1; min-width:0; text-align:left;}
.ped-txt small{color:#5b6673; font-weight:600;}
.ped-ok{color:#3B9B5A; font-weight:800; font-size:18px;}
.fer-aviso-fer{font-size:11px; color:#8a5a00; background:#FFF3D6; border-radius:8px; padding:5px 8px; margin:0 0 6px;}
.fer-item-txt{flex-direction:row; justify-content:center; min-height:44px;}
.fer-item-cumple{grid-column:1 / -1; width:100%; margin-top:6px;}
.fer-item-urgente{width:100%; margin-top:6px; background:#FFD9DD;}
.fer-tabla{margin:8px 0; text-align:left;}
.fer-barra{position:relative; background:#EEF4FF; border-radius:8px; margin-bottom:4px; height:26px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; padding:0 8px; font-size:12px; font-weight:800;}
.fer-barra i{position:absolute; left:0; top:0; bottom:0; background:rgba(58,134,255,.25);}
.fer-barra span, .fer-barra b{position:relative;}
.fer-sellos{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:8px 0;}
.fer-sello{position:relative; background:#F1F1F1; border-radius:12px; padding:6px 2px; opacity:.5;}
.fer-sello.ok{background:#FFF3B0; opacity:1; border:2px dashed #E6A817;}
.fer-sello span{font-size:24px; display:block;} .fer-sello small{font-size:9px; font-weight:800; display:block;}
.fer-sello b{position:absolute; top:-4px; right:-2px; color:#3B9B5A; font-size:15px;}
.fer-pregunta{margin:6px 0;} .fer-estrellas button{background:none; border:none; font-size:28px; color:#ccd; cursor:pointer; padding:0 2px;} .fer-estrellas button.on{color:#E6A817;}
.fer-cartelera{text-align:left; margin:8px 0;} .fer-cart-fila{display:flex; gap:10px; padding:6px 8px; background:#EEF4FF; border-radius:10px; margin-bottom:4px; font-size:13px;} .fer-cart-fila b{min-width:46px; color:#0F2A4D;}
.fer-foto{width:100%; border-radius:14px; background:#cde;}

/* ---- Volver a la plaza (desde boutique, ranking, comercios, premios, escenario, etc.) ---- */
.btn-volver-plaza{display:none; position:absolute; left:50%; transform:translateX(-50%); bottom:84px; z-index:60; border:none; border-radius:24px; padding:11px 22px; background:var(--orange,#E6A817); color:#fff; font-weight:800; font-size:15px; font-family:inherit; cursor:pointer; box-shadow:0 3px 0 var(--orange-sombra,#B8830A), 0 6px 16px rgba(15,42,77,.3);}
.btn-volver-plaza.visible{display:block;}
.btn-volver-plaza:active{transform:translateX(-50%) translateY(2px);}

/* ---- Plaza compacta ---- */
.plz-accion{min-height:48px; margin:4px 0 2px;}
.plz-botones{gap:5px; margin-top:2px;}
.plz-botones .gbtn{min-height:36px; height:36px; padding:0 4px; font-size:12.5px;}

/* ---- Cartitas ---- */
.car-input{width:100%; box-sizing:border-box; border:1.5px solid #ccd; border-radius:12px; padding:9px; font-size:15px; text-align:center; font-family:inherit; margin:4px 0 8px;}
.car-item{background:#EEF4FF; border-radius:12px; padding:8px 10px; margin-bottom:6px; text-align:left; font-size:13px; color:#0F2A4D;}
.car-item small{color:#5b6673; font-weight:600;}
.car-txt{font-weight:700; margin:2px 0 4px;}
.car-botones{display:flex; gap:6px; margin-top:6px;} .car-botones .gbtn{flex:1; min-height:34px; height:34px;}
.car-mas{margin-top:6px; font-size:11px; color:#8793a1;}
.car-chico{border:none; background:none; color:#8793a1; font-size:11px; text-decoration:underline; cursor:pointer; font-family:inherit; padding:0;}
.car-tipos{grid-template-columns:1fr;} .car-tipo{flex-direction:row; justify-content:flex-start; gap:8px; text-align:left; padding:8px 10px;} .car-tipo span{font-size:22px;}
.fer-select{width:100%; box-sizing:border-box; border:1px solid #ccd; border-radius:10px; padding:8px; font-size:13px; font-family:inherit; margin-bottom:4px; background:#fff;}

/* ---- Estación, paradas y micro por dentro ---- */
.est-escena{padding:12px 10px 14px;}
.est-cabecera{text-align:center; margin-bottom:8px;}
.est-bus{width:78%; max-width:260px; height:auto; display:block; margin:0 auto 4px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));}
.est-titulo{font-family:var(--font-juego); font-size:22px; font-weight:800; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.2);}
.est-sub{font-size:12px; color:#fff; opacity:.92; font-weight:700;}
.est-bingo{display:block; width:100%; border:none; border-radius:14px; background:#FFD84D; color:#0F2A4D; padding:9px 12px; font-family:inherit; font-size:13px; text-align:left; margin:8px 0; cursor:pointer; box-shadow:0 3px 0 #B8830A;}
.est-bingo span{display:block; font-size:11px; font-weight:700; opacity:.75;}
.est-recorrido{background:rgba(255,255,255,.92); color:#0F2A4D; border-radius:14px; padding:8px 12px; margin:8px 0; font-size:12.5px;}
.est-rec-t{font-weight:800; margin-bottom:3px;} .est-rec-ahora{font-weight:700;} .est-rec-sigue{color:#5b6673;}
.est-lista{display:flex; flex-direction:column; gap:7px; margin:10px 0;}
.est-parada{display:flex; align-items:center; gap:10px; border:none; border-left:6px solid var(--c,#E6A817); background:#fff; color:#0F2A4D; border-radius:14px; padding:9px 10px; font-family:inherit; text-align:left; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.14);}
.est-parada.aca{background:#FFF3B0;}
.est-emoji{font-size:30px; flex-shrink:0;}
.est-info{flex:1; min-width:0;} .est-info b{display:block; font-size:14px;} .est-info small{display:block; font-size:11px; color:#5b6673; font-weight:600; line-height:1.25;}
.est-cant{flex-shrink:0; font-size:12px; font-weight:800; background:var(--c,#E6A817); color:#fff; border-radius:12px; padding:4px 9px;}
.est-botones{margin:8px 0;}
.est-atajos{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:11.5px; color:#fff; font-weight:700;}
.est-atajos button{border:none; background:rgba(255,255,255,.9); color:#0F2A4D; border-radius:12px; padding:5px 9px; font-weight:800; font-size:11.5px; font-family:inherit; cursor:pointer;}
.est-micro-capa{position:absolute; inset:0; z-index:70; pointer-events:none;} .est-micro-capa .plz-modal{pointer-events:auto;}
.est-lista-chica{margin:6px 0; max-height:290px; overflow:auto;}
.est-lista-chica .est-parada{padding:6px 8px;} .est-lista-chica .est-emoji{font-size:24px;}
.mic-modos{display:flex; gap:6px; margin-bottom:8px;}
.mic-modos button{flex:1; border:2px solid #0F2A4D; background:#fff; color:#0F2A4D; border-radius:12px; padding:6px 4px; font-weight:800; font-size:12.5px; font-family:inherit; cursor:pointer;}
.mic-modos button.on{background:#0F2A4D; color:#fff;}
.plz-aviso:empty{display:none;}
.plz-aviso button{display:block; width:100%; border:none; background:#FFD84D; color:#0F2A4D; border-radius:12px; padding:5px 10px; font-size:12px; font-family:inherit; margin:6px 0 4px; cursor:pointer; font-weight:700;}

/* ---- Eventos, túnel y detalles ---- */
.est-evento{display:block; width:100%; border:none; border-radius:14px; background:#E5586E; color:#fff; padding:9px 12px; font-family:inherit; font-size:13px; font-weight:800; text-align:left; margin:8px 0; cursor:pointer; box-shadow:0 3px 0 #A63348;}
.est-evento span{display:block; font-size:11px; font-weight:700; opacity:.85;}
.est-rumor{background:rgba(15,42,77,.85); color:#fff; border-radius:14px; padding:8px 12px; margin:8px 0; font-size:12.5px; font-weight:600;}
.tun-caja{background:linear-gradient(#2a2d3d,#14161f); color:#fff;}
.tun-caja .fer-titulo,.tun-caja .fer-texto{color:#fff;} .tun-caja .fer-sub{color:#c9ced9;}
.tun-cofre{display:block; width:100%; border:none; border-radius:16px; background:#FFD84D; color:#0F2A4D; font-weight:800; font-size:16px; padding:12px; margin:8px 0; font-family:inherit; cursor:pointer; box-shadow:0 4px 0 #B8830A;} .tun-cofre span{font-size:28px; display:block;}
.tun-lista{text-align:left; font-size:12.5px; max-height:110px; overflow:auto; background:rgba(255,255,255,.08); border-radius:10px; padding:6px 10px;} .tun-lista b{color:#FFD84D;}

/* ---- Confitería bailable ---- */
.bol-caja{background:linear-gradient(#241447,#120a26); color:#fff;}
.bol-caja .fer-titulo,.bol-caja .fer-texto{color:#fff;} .bol-caja .fer-sub{color:#c9bfe6;} .bol-caja small{color:#c9bfe6;}
.bol-caja .fer-item{background:#3a2a66; color:#fff;}
.bol-caja .fer-item.bol-actual{outline:3px solid #FF4DDB;}

.bol-mano{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:4px 0 8px;}
.bol-copa{border:none; background:#3a2a66; color:#fff; border-radius:14px; padding:5px 10px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer;} .bol-copa span{font-size:16px; margin-right:4px;}

.est-boliche{background:linear-gradient(90deg,#1b1038,#3b1a6b); color:#fff; border-left-color:#FF4DDB;} .est-boliche .est-info small{color:#d9c7ff;}


.mus-btn{border:none; background:rgba(255,255,255,.9); border-radius:50%; width:30px; height:30px; font-size:15px; cursor:pointer; vertical-align:middle; margin-left:6px; box-shadow:0 2px 0 rgba(0,0,0,.18);}
.g-hud .mus-btn{margin-left:auto; flex-shrink:0;}

.bol-creditos{text-align:left; font-size:12.5px; max-height:200px; overflow:auto; background:rgba(255,255,255,.08); border-radius:10px; padding:6px 12px; margin:6px 0;} .bol-creditos div{padding:2px 0;}
.bol-link,.est-creditos a{text-decoration:underline; cursor:pointer;}
.est-creditos{text-align:center; margin-top:10px; font-size:11.5px; color:#fff; opacity:.9;}

/* ---- Casa de la Selección ---- */
.est-seleccion{background:linear-gradient(90deg,#ffffff,#d6e9fa);}
.sel-caja{background:linear-gradient(#0f3b66,#0a2644); color:#fff;} .sel-caja .fer-titulo,.sel-caja .fer-texto{color:#fff;} .sel-caja .fer-sub{color:#cfe3f7;}
.sel-tabs{display:flex; gap:6px; margin:6px 0;} .sel-tabs button{flex:1; border:2px solid #74ACDF; background:transparent; color:#fff; border-radius:12px; padding:6px 4px; font-weight:800; font-size:12.5px; font-family:inherit; cursor:pointer;} .sel-tabs button.on{background:#74ACDF; color:#0a2644;}
.sel-lista{max-height:250px; overflow:auto; text-align:left;} .sel-linea{font-size:11px; font-weight:800; color:#FFD84D; margin:8px 0 3px;}
.sel-chips{display:flex; flex-wrap:wrap; gap:5px;} .sel-chip{border:none; background:rgba(255,255,255,.14); color:#fff; border-radius:14px; padding:5px 10px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer;} .sel-chip.on{background:#FFD84D; color:#0a2644;}
.sel-rank{font-size:11.5px; background:rgba(255,255,255,.1); border-radius:10px; padding:6px 10px; margin:8px 0; text-align:left;}
.sel-quitar{border:none; background:none; color:#cfe3f7; text-decoration:underline; font-size:12px; cursor:pointer; font-family:inherit; margin:4px 0;}
.sel-aviso{font-size:10px; color:#9ec3e6; margin:6px 0 0;}
.sel-caja .fer-item{background:rgba(255,255,255,.14); color:#fff;} .sel-caja .fer-item.sel-puesta{outline:3px solid #FFD84D;}

.plz-escena .g-hud{flex-wrap:nowrap; gap:6px; align-items:center;}
.plz-escena .g-pill{white-space:nowrap; font-size:12.5px; padding:6px 11px;}

.sel-letra{text-align:center; font-size:12.5px; font-weight:700; line-height:1.45; max-height:190px; overflow:auto; background:rgba(255,255,255,.08); border-radius:10px; padding:8px 12px; margin:6px 0 10px; color:#fff;}

/* ---- Flyer propio ---- */
.flyer-subir{margin:2px 0 8px;} .flyer-subir-btn{display:block; text-align:center; cursor:pointer; margin:4px 0;}
.flyer-estado{font-size:11.5px; color:var(--gray); margin:2px 0 4px;} .flyer-estado a{text-decoration:underline; cursor:pointer;}
.flyer-pagina{display:block; width:100%; height:auto; border-radius:10px; margin:0 0 8px;}

/* ---- Salir de Premios/Ranking cuando el viaje terminó ---- */
.btn-back-salir{display:none;}
.viaje-cerrado #view-tienda .btn-back-salir, .viaje-cerrado #view-ranking .btn-back-salir{display:flex;}

/* ---- Padelbus: cancha de pádel ---- */
.pad-escena{padding:10px 8px 12px;}
.pad-hud{flex-wrap:nowrap; gap:6px; align-items:center; justify-content:center;}
.pad-pill{border:2px solid transparent; white-space:nowrap; font-size:12.5px; padding:6px 11px;}
.pad-pill b{font-size:15px; margin-left:3px;}
.pad-caja{position:relative; margin:8px auto 0; width:min(100%, calc((100vh - 270px) * 0.56)); min-width:210px; line-height:0; border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.3);}
.pad-canvas{width:100%; height:auto; display:block; touch-action:none; -webkit-user-select:none; user-select:none;}
.pad-cartel{position:absolute; left:6%; right:6%; top:36%; text-align:center; pointer-events:none; line-height:1.2;}
.pad-msg{display:inline-block; background:rgba(15,42,77,.9); color:#fff; font-weight:800; font-size:17px; padding:10px 16px; border-radius:14px; border:2px solid #FFD84D; box-shadow:0 4px 12px rgba(0,0,0,.4);}
.pad-msg small{display:block; font-size:12px; font-weight:700; opacity:.85; margin-top:3px;}
.pad-msg-chico{font-size:13px; padding:6px 12px; background:rgba(15,42,77,.75); border-color:rgba(255,255,255,.5);}
.pad-fin{background:rgba(15,42,77,.95); border:3px solid #FFD84D; border-radius:18px; padding:14px; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.5);}
.pad-fin-titulo{font-size:22px; font-weight:800;}
.pad-fin-sub{font-size:13px; font-weight:700; opacity:.85; margin:4px 0 8px;}
.pad-premio{font-size:20px; font-weight:800; color:#FFD84D; margin-bottom:8px;}
.pad-botones{grid-template-columns:1fr 1fr; margin-top:8px;}
.pad-botones .gbtn{font-size:15px; padding:11px 6px;}
#pad-globo{background:linear-gradient(180deg,#B66FE0,#8E44AD); box-shadow:0 4px 0 #522070, 0 8px 12px rgba(0,0,0,.3);}
#pad-globo.pad-armado{outline:3px solid #FFD84D; transform:translateY(2px);}
.pad-ayuda{text-align:center; font-size:11.5px; color:#fff; opacity:.85; font-weight:700; margin-top:6px;}
.pad-lugares{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 10px;}
.pad-lugar{background:rgba(255,255,255,.14); border:2px solid var(--c, #fff); border-radius:12px; padding:8px; color:#fff; text-align:center; line-height:1.2;}
.pad-lugar b{display:block; font-size:14px;}
.pad-lugar small{font-size:11px; opacity:.8;}
.estacion .est-padel, .est-padel{--c:#0E7C86;}
.screen:has(#view-padel.juego-inmersivo) .btn-volver-plaza{display:none !important;}

/* ---- Controles debajo del juego (el dedo no tapa lo que pasa) ---- */
.arc-pad{margin:10px auto 0; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;}
.arc-cruz{display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(2, 1fr); gap:8px; max-width:230px; margin:0 auto; height:128px;}
.arc-cruz button{border:none; border-radius:16px; font-size:28px; font-weight:800; color:#fff; font-family:inherit; background:linear-gradient(180deg,#5B8DEF,#3A62C8); box-shadow:0 4px 0 #223E8C, 0 7px 10px rgba(0,0,0,.3); touch-action:none; padding:0;}
.arc-cruz button.activa{transform:translateY(3px); box-shadow:0 1px 0 #223E8C; background:linear-gradient(180deg,#FFD84D,#E6A817); color:#3A2400;}
.arc-cruz [data-d="arr"]{grid-column:2; grid-row:1;} .arc-cruz [data-d="izq"]{grid-column:1; grid-row:2;} .arc-cruz [data-d="abj"]{grid-column:2; grid-row:2;} .arc-cruz [data-d="der"]{grid-column:3; grid-row:2;}
.arc-franja{height:84px; border-radius:18px; background:rgba(255,255,255,.14); border:2px dashed rgba(255,255,255,.55); color:#fff; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:800; font-size:14px; text-align:center; line-height:1.2; padding:0 12px;}
.arc-franja.activa{background:rgba(255,216,77,.28); border-color:#FFD84D;}
.arc-franja span{font-size:26px;}

/* ---- Bus-queda (juegos de escape) ---- */
.categoria-juegos-busqueda{background:linear-gradient(135deg, #3a2a66, #14102a); box-shadow:0 4px 0 #090614, 0 8px 18px rgba(20,16,42,.45);}
.categoria-juegos-busqueda:active{box-shadow:0 1px 0 #090614, 0 3px 8px rgba(20,16,42,.3);}
.esc-menu{padding:12px 10px 16px;}
.esc-card{display:flex; gap:12px; align-items:center; background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.22); border-radius:16px; padding:12px; margin:10px 0; color:#fff; cursor:pointer;}
.esc-card:active{transform:translateY(2px);}
.esc-card-prox{opacity:.55; cursor:default; filter:grayscale(.6);}
.esc-card-ico{font-size:38px; flex-shrink:0;}
.esc-card-txt h3{font-size:15px; margin:0 0 3px; color:#FFD84D;}
.esc-card-txt p{font-size:12px; margin:0 0 4px; color:rgba(255,255,255,.85); line-height:1.3;}
.esc-card-estado{font-size:11px; font-weight:800; color:#9fd0ff;}
.esc-portada{text-align:center; color:#fff; padding:6px 4px 2px;}
.esc-portada-ico{font-size:56px; line-height:1;}
.esc-portada h2{font-size:21px; margin:6px 0; color:#FFD84D;}
.esc-portada p{font-size:13px; line-height:1.4; opacity:.9;}
.esc-aviso{background:rgba(180,30,30,.22); border:2px solid rgba(255,110,110,.5); color:#fff; border-radius:12px; padding:10px; font-size:12.5px; line-height:1.4; margin:10px 0;}
.esc-nota{color:#cfe3ff; font-size:12px; text-align:center; margin-top:8px;}
.esc-escena{padding:6px 6px 8px; color:#fff;}
.esc-barra{display:flex; align-items:center; gap:6px; margin-bottom:6px;}
.esc-sala{flex:1; min-width:0; font-size:11px; line-height:1.05; font-weight:800; color:#FFD84D; padding-left:40px;}
.esc-btn{border:none; border-radius:11px; background:rgba(255,255,255,.14); color:#fff; font-size:14px; padding:5px 7px; font-family:inherit; font-weight:800; cursor:pointer; border:2px solid rgba(255,255,255,.25);}
.esc-btn:active{transform:translateY(2px);}
.esc-caja{position:relative; margin:0 auto; line-height:0; border-radius:14px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.18); background:#05060b;}
.esc-canvas{width:100%; height:auto; display:block; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;}
.esc-cap{position:absolute; left:8px; right:8px; top:64px; display:none; background:rgba(8,10,22,.9); border:2px solid rgba(255,255,255,.3); border-radius:14px; padding:9px 12px; font-size:13px; line-height:1.35; color:#fff; font-weight:600; cursor:pointer;}
.esc-cap-on{display:block;}
.esc-cap-q{color:#FFD84D;}
.esc-cap-bi{border-color:#E6A817; background:rgba(60,34,4,.92);}
.esc-cap-narra{font-style:italic; text-align:center; border-color:rgba(255,255,255,.12); color:#e6e9f5;}
.esc-cap-item{border-color:#5BE88D;}
.esc-cap-voz{border-color:#9fd0ff; background:rgba(10,26,52,.94); color:#cfe8ff; font-style:italic;}
.esc-cap-sig{float:right; color:#FFD84D; font-size:11px;}
.esc-ov{position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(4,5,12,.78); padding:10px; line-height:1.3; z-index:5;}
.esc-ov-on{display:flex;}
.esc-panel{width:100%; max-width:300px; max-height:100%; overflow:auto; background:linear-gradient(180deg,#1d2240,#10132a); border:2px solid rgba(255,255,255,.3); border-radius:16px; padding:10px; text-align:center; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.6);}
.esc-panel-t{font-size:15px; font-weight:800; color:#FFD84D; margin-bottom:4px;}
.esc-panel-s{font-size:12px; color:#cfd8f0; margin-bottom:8px; line-height:1.35;}
.esc-digs{display:flex; gap:6px; justify-content:center; margin:6px 0;}
.esc-dig{width:32px; height:38px; border-radius:8px; background:#05060b; border:2px solid #6f7a9e; color:#9dffb0; font-size:24px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.esc-dig-err{border-color:#ff5a5a !important; color:#ff8a8a !important; animation:escSacude .3s;}
@keyframes escSacude{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.esc-teclado{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:6px 0;}
.esc-teclado button, .esc-grupo button, .esc-rueda button, .esc-lista button{border:none; border-radius:10px; background:linear-gradient(180deg,#5B8DEF,#3A62C8); color:#fff; font-size:15px; font-weight:800; padding:5px 0; font-family:inherit; box-shadow:0 3px 0 #223E8C; cursor:pointer;}
.esc-teclado button:active, .esc-grupo button:active{transform:translateY(2px); box-shadow:0 1px 0 #223E8C;}
.esc-teclado .esc-ok{background:linear-gradient(180deg,#4ADE80,#1E9E52); box-shadow:0 3px 0 #14532D;}
.esc-visor{font-size:26px; letter-spacing:8px; font-weight:800; color:#9dffb0; background:#05060b; border:2px solid #6f7a9e; border-radius:10px; padding:8px; margin:8px 0;}
.esc-grupo{display:flex; gap:6px; margin:6px 0;} .esc-grupo button{flex:1;} .esc-grupo .esc-sel{background:linear-gradient(180deg,#FFD84D,#E6A817); color:#3A2400; box-shadow:0 3px 0 #8a6500;}
.esc-ruedas{display:flex; gap:6px; justify-content:center; margin:8px 0;}
.esc-rueda{display:flex; flex-direction:column; align-items:center; gap:4px;} .esc-rueda span{width:36px; height:42px; border-radius:8px; background:#05060b; border:2px solid #6f7a9e; color:#9dffb0; font-size:23px; font-weight:800; display:flex; align-items:center; justify-content:center;} .esc-rueda button{width:36px; padding:3px 0; font-size:13px;}
.esc-focos{display:grid; grid-template-columns:repeat(3, 56px); gap:7px; justify-content:center; margin:10px 0;}
.esc-foco{height:56px; border-radius:12px; border:2px solid #5a6488; background:#0a0c18; font-size:28px; cursor:pointer; font-family:inherit; padding:0;}
.esc-foco-on{background:radial-gradient(circle, #fff3b0, #E6A817 70%); border-color:#FFD84D; box-shadow:0 0 14px rgba(255,216,77,.7);}
.esc-acc{display:flex; gap:8px; margin-top:10px;}
.esc-cerrar, .esc-ok2{flex:1; border:none; border-radius:10px; padding:9px 6px; font-size:13px; font-weight:800; font-family:inherit; cursor:pointer; background:linear-gradient(180deg,#8794A6,#5B6878); color:#fff; box-shadow:0 3px 0 #343D4A;}
.esc-ok2{background:linear-gradient(180deg,#4ADE80,#1E9E52); box-shadow:0 3px 0 #14532D;}
.esc-panel > .esc-cerrar{width:100%; margin-top:8px;}
.esc-lista{display:flex; flex-direction:column; gap:6px; margin:6px 0;} .esc-lista button{font-size:13px; padding:9px 8px;}
.esc-papel{width:100%; max-width:310px; max-height:96%; overflow:auto; background:#f1e7c6; color:#2d2416; border-radius:6px; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.6); border:2px solid #b89b5e; text-align:left; line-height:1.4;}
.esc-papel-t{font-size:14px; font-weight:800; color:#7a4a12; text-align:center; border-bottom:2px dashed rgba(122,74,18,.4); padding-bottom:6px; margin-bottom:8px;}
.esc-papel-c{font-size:13px;}
.esc-manuscrito{font-family:"Segoe Script","Bradley Hand","Comic Sans MS",cursive; font-size:14.5px; line-height:1.5; margin:4px 0;} .esc-largo{font-size:12.5px;}
.esc-chico{font-size:11px; opacity:.75; margin-top:6px;}
.esc-cerrar-papel{display:block; width:100%; margin-top:10px; flex:none;}
.esc-tabla, .esc-cal, .esc-maquina{width:100%; border-collapse:collapse; font-size:12px;} .esc-tabla th, .esc-tabla td{border-bottom:1px solid rgba(0,0,0,.2); padding:4px 3px; text-align:left;} .esc-rojo td{color:#b3222a; font-weight:800;}
.esc-cal th{font-size:13px; background:#b3322e; color:#fff; padding:4px;} .esc-cal td{text-align:center; padding:3px 0; font-size:12px;} .esc-circ{outline:2px solid #d11; border-radius:50%; font-weight:800;}
.esc-maquina td{text-align:center; padding:6px; font-size:20px; border:1px solid rgba(0,0,0,.2);}
.esc-normas p{margin:5px 0; font-size:13px;} .esc-normas b{color:#b3322e; font-size:17px;}
.esc-nota{margin:8px 0; padding-bottom:8px; border-bottom:1px dashed rgba(0,0,0,.25); color:#2d2416; text-align:left; font-size:12.5px; line-height:1.4;} .esc-nota b{color:#7a4a12;}
.esc-cuaderno{background:#efe6cf;}
.esc-fin-ico{font-size:44px;} .esc-estrellas{font-size:30px; color:#FFD84D; letter-spacing:4px; margin:4px 0 8px;}
.esc-inv{display:flex; gap:6px; margin-top:7px; overflow-x:auto; padding-bottom:4px; min-height:54px; align-items:stretch;}
.esc-item{flex:0 0 auto; width:62px; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); border-radius:12px; color:#fff; font-family:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 2px; cursor:pointer;}
.esc-item-ico{font-size:24px; line-height:1.1;} .esc-item-nom{font-size:9px; line-height:1.1; text-align:center; font-weight:700; margin-top:2px;}
.esc-item-sel{border-color:#FFD84D; background:rgba(255,216,77,.22); box-shadow:0 0 10px rgba(255,216,77,.5);}
.esc-inv-vacia{font-size:11.5px; color:rgba(255,255,255,.6); align-self:center; padding:0 4px;}

.av-lienzo{width:200px; height:220px; touch-action:manipulation; cursor:pointer;}
.av-vista{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:-2px 0 10px;}
.av-vista-btn{border-radius:12px; padding:7px 12px; font-family:inherit; font-weight:800; font-size:12.5px; background:rgba(15,42,77,.85); color:#fff; border:2px solid rgba(255,255,255,.4); cursor:pointer;}
.av-pose-nombre{background:rgba(255,255,255,.85); color:#0F2A4D; border-radius:10px; padding:5px 10px; font-size:12px; font-weight:800;}
.av-vista-ayuda{width:100%; text-align:center; font-size:11px; color:#0F2A4D; opacity:.75; font-weight:700;}

.esc-visor-sec{font-size:22px; letter-spacing:2px; min-height:42px; line-height:1.2;}
.esc-secitems{display:grid; grid-template-columns:repeat(auto-fit, minmax(54px, 1fr)); gap:6px; margin:6px 0;}
.esc-secitems button{border:none; border-radius:10px; background:linear-gradient(180deg,#5B8DEF,#3A62C8); color:#fff; font-size:20px; font-weight:800; padding:8px 0; font-family:inherit; box-shadow:0 3px 0 #223E8C; cursor:pointer;}
.esc-espejo{display:inline-block; transform:scaleX(-1);}

/* Vidriera del pueblo (publicidad de negocios) */
.vid-cartel{position:absolute;inset:0;z-index:9000;background:rgba(8,18,35,.78);display:flex;align-items:center;justify-content:center;padding:16px;animation:vidAparece .25s ease-out;}
@keyframes vidAparece{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
.vid-cartel-caja{width:100%;max-width:340px;max-height:100%;overflow:auto;background:#fff;border-radius:22px;padding:12px;box-shadow:0 12px 40px rgba(0,0,0,.4);color:#0f2a4d;}
.vid-cartel-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.vid-etiqueta{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#7a8aa3;}
.vid-cruz{width:34px;height:34px;border-radius:50%;border:none;background:#eef2f8;color:#0f2a4d;font-weight:800;font-size:15px;cursor:pointer;}
.vid-cruz:disabled{opacity:.6;cursor:default;}
.vid-flyer{border-radius:14px;overflow:hidden;background:#f3f6fb;cursor:pointer;min-height:120px;display:flex;align-items:center;justify-content:center;}
.vid-flyer img{display:block;width:100%;max-height:330px;object-fit:contain;background:#fff;}
.vid-flyer-cargando{font-weight:800;color:#7a8aa3;padding:30px 10px;text-align:center;}
.vid-nombre{font-weight:800;font-size:17px;margin-top:8px;color:#0f2a4d;}
.vid-promo{font-size:14px;color:#3a4a63;margin-top:2px;}
.vid-promo-chica{font-size:12.5px;color:#3a4a63;}
.vid-botones{display:grid;gap:8px;margin-top:10px;}
.vid-botones .gbtn small, .g-acciones .gbtn small{display:block;font-size:11px;opacity:.9;}
.vid-card{display:flex;gap:10px;align-items:center;background:#fff;border-radius:16px;padding:10px;margin-bottom:10px;box-shadow:0 4px 0 rgba(15,42,77,.12);cursor:pointer;color:#0f2a4d;}
.vid-card-img{width:76px;height:76px;flex-shrink:0;border-radius:12px;overflow:hidden;background:#f3f6fb;display:flex;align-items:center;justify-content:center;font-size:30px;}
.vid-card-img img{width:100%;height:100%;object-fit:cover;}
.vid-card-datos{min-width:0;flex:1;}
.vid-card-estado{font-size:12px;font-weight:700;color:#1e7e34;margin-top:3px;}
.vid-sellos{display:inline-flex;gap:3px;flex-wrap:wrap;margin-top:4px;}
.vid-sello{width:18px;height:18px;border-radius:50%;border:2px dashed #8fa3c0;background:rgba(255,255,255,.55);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff;}
.vid-sello-on{border:2px solid #e8a21a;background:#f2b33d;}
.vid-flyer-grande{border-radius:16px;overflow:hidden;background:#fff;margin-bottom:10px;}
.vid-flyer-grande img{display:block;width:100%;}
.vid-cupon{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#fff;border:2px dashed #f2b33d;border-radius:14px;padding:10px;margin-bottom:8px;color:#0f2a4d;}
.vid-cupon-usado{opacity:.55;border-style:solid;border-color:#ccd;}
.vid-qr{background:#fff;padding:4px;border-radius:8px;flex-shrink:0;}

.plz-canvas3d{display:block; width:100%; height:auto; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;}

.plz-caja{position:relative;}
.plz-b3cam{position:absolute; right:8px; top:8px; border:none; border-radius:14px; padding:6px 10px; font-size:13px; font-weight:800; font-family:inherit; color:#fff; background:rgba(15,42,77,.8); border:2px solid rgba(255,255,255,.5); cursor:pointer; line-height:1.2;}

.plz-b3noche{top:46px;}

/* Aviso mientras se descarga una parte de la app (ver js/modulos.js) */
.cargando-modulo{position:fixed; left:50%; bottom:90px; transform:translate(-50%, 20px); background:rgba(15,42,77,.92); color:#fff; font-weight:800; font-size:14px; padding:10px 18px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9999;}
.cargando-modulo.show{opacity:1; transform:translate(-50%, 0);}
.cargando-modulo span{display:inline-block; animation:cargandoMov 1s ease-in-out infinite;}
@keyframes cargandoMov{0%,100%{transform:translateX(-3px);}50%{transform:translateX(3px);}}