/* ═══════════════════════════════════════════════════════════════
   CARGA LA BURRA PRO — style.css (Completo con Menú Casino)
═══════════════════════════════════════════════════════════════ */

/* ── 1. VARIABLES GLOBALES ─────────────────────────────────── */
:root {
  --felt-dark:    #0f2e1a;
  --felt-mid:     #1a4a2e;
  --felt-light:   #2a6b42;
  --gold-deep:    #7a5a0e;
  --gold-mid:     #c89b2a;
  --gold-bright:  #f0c84a;
  --gold-shine:   #fff8c0;
  --wood-dark:    #2c1508;
  --wood-mid:     #5c3317;
  --verde-ok:     #4CAF50;
  --rojo-alerta:  #ff3b3b;
  --naranja:      #ff9800;
  --amarillo:     #ffeb3b;
  --blanco:       #fff;
  --font-deco:    'Cinzel Decorative', serif;
  --font-title:   'Cinzel', serif;
  --font-ui:      'Lato', sans-serif;
  --carta-w:      clamp(54px, 6vw, 80px);
  --carta-h:      calc(var(--carta-w) * 1.5);
  --carta-bot-w:  clamp(62px, 7vw, 90px);
  --carta-bot-h:  calc(var(--carta-bot-w) * 1.5);
  --r-carta:      8px;
  --r-ui:         10px;
  --r-modal:      15px;
  --sombra-carta: 0 4px 10px rgba(0,0,0,.55);
  --sombra-modal: 0 12px 40px rgba(0,0,0,.9);
  --z-tablero:    1;
  --z-cartas:     50;
  --z-hud:        100;
  --z-mazo:       150;
  --z-animacion:  200;
  --z-mensaje:    300;
  --z-descarte:   350;
  --z-notif:      400;
  --z-pantalla:   3000;
  --z-modal:      4000;
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-ui); background: var(--wood-dark); overflow: hidden;
  display: flex; justify-content: center; align-items: center; min-height: 100dvh; overscroll-behavior: none;
}

/* ── 3. MENÚ PRINCIPAL (PANTALLA CASINO) ───────────────────── */
#pantalla-menu {
  position: fixed; inset: 0; display: flex; justify-content: center; align-items: flex-start;
  padding: calc(12px + var(--sat)) calc(10px + var(--sar)) calc(24px + var(--sab)) calc(10px + var(--sal));
  background: radial-gradient(ellipse 130% 80% at 50% 0%, #2d7a4a 0%, transparent 65%),
              radial-gradient(ellipse 80% 50% at 50% 100%, #091c0f 0%, transparent 70%), var(--felt-mid);
  z-index: var(--z-pantalla); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.tablero-menu {
  width: 100%; max-width: 420px; position: relative;
  background: radial-gradient(ellipse 95% 55% at 50% 25%, #2d7d4a 0%, #1a4a2e 55%, var(--felt-dark) 100%);
  border-radius: 48px; border: 10px solid var(--wood-mid); outline: 3px solid var(--gold-mid); outline-offset: -3px;
  box-shadow: 0 0 0 6px var(--wood-dark), 0 10px 50px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,255,255,.04), inset 0 0 80px rgba(0,0,0,.35);
  padding: 24px 18px 32px; overflow: hidden; animation: entradaTablero .55s cubic-bezier(.22,1,.36,1) both;
}
.tablero-menu::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Ccircle cx='.75' cy='.75' r='.5' fill='rgba(255,255,255,.025)'/%3E%3C/svg%3E");
}
.tablero-menu > * { position: relative; z-index: 1; }
.menu-titulo-wrap { text-align: center; margin-bottom: 4px; }
.menu-titulo {
  font-family: var(--font-deco); font-weight: 900; font-size: clamp(1.45rem, 6.5vw + .1rem, 2rem);
  line-height: 1.1; letter-spacing: .03em; text-transform: uppercase;
  background: linear-gradient(175deg, var(--gold-shine) 0%, var(--gold-bright) 35%, var(--gold-mid) 65%, var(--gold-deep) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.65)); animation: parpadeoTitulo 5s ease-in-out infinite;
}
.menu-sub { font-family: var(--font-title); font-weight: 600; font-size: clamp(.72rem, 3.2vw, .9rem); color: var(--gold-bright); letter-spacing: .09em; margin-top: 4px; text-shadow: 0 1px 5px rgba(0,0,0,.8); }
.menu-deco { position: relative; height: 112px; margin: 4px 0 8px; overflow: hidden; }
.m-sym { position: absolute; font-size: 1.25rem; color: var(--gold-bright); filter: drop-shadow(0 2px 5px rgba(0,0,0,.7)); animation: flotar var(--dur,3s) ease-in-out infinite var(--delay,0s); user-select: none; pointer-events: none; }
.ms1{top:4%;left:1%;--dur:3.2s;--delay:0s;font-size:1rem} .ms2{top:32%;left:5%;--dur:3.8s;--delay:.35s;font-size:.85rem} .ms3{top:62%;left:1%;--dur:3.4s;--delay:.7s} .ms4{top:82%;left:9%;--dur:4s;--delay:1.1s;font-size:.9rem} .ms5{top:4%;right:3%;--dur:3.5s;--delay:.25s} .ms6{top:30%;right:2%;--dur:3.1s;--delay:.6s;font-size:1.1rem} .ms7{top:60%;right:5%;--dur:3.7s;--delay:.95s;font-size:.8rem} .ms8{top:80%;right:2%;--dur:4.2s;--delay:1.4s}
.m-moneda { position: absolute; background: radial-gradient(circle at 35% 30%, var(--gold-shine), var(--gold-mid) 55%, var(--gold-deep)); border-radius: 50%; border: 1.5px solid rgba(255,220,80,.6); box-shadow: 0 2px 6px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,255,255,.35); animation: flotar var(--dur,3.5s) ease-in-out infinite var(--delay,0s); pointer-events: none; }
.mm1{width:18px;height:18px;top:8%;left:17%;--delay:.15s} .mm2{width:22px;height:22px;top:46%;left:13%;--delay:.85s} .mm3{width:16px;height:16px;top:8%;right:15%;--delay:.45s;--dur:3.8s} .mm4{width:22px;height:22px;top:42%;right:11%;--delay:1.2s} .mm5{width:14px;height:14px;top:76%;left:21%;--delay:1.65s} .mm6{width:18px;height:18px;top:73%;right:19%;--delay:.55s}
.menu-mazo-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.menu-mazo-stack { position: relative; width: 62px; height: 88px; }
.menu-carta-base { position: absolute; width: 62px; height: 88px; border-radius: 6px; border: 2px solid var(--gold-deep); }
.menu-carta-base.c3{top:-6px;left:-6px;background:linear-gradient(135deg,#d4b060,#a07830);opacity:.5} .menu-carta-base.c2{top:-3px;left:-3px;background:linear-gradient(135deg,#e0c070,#b08840);opacity:.7}
.menu-carta-top { position: relative; width: 62px; height: 88px; z-index: 2; background: linear-gradient(145deg,#f7eacc 0%,#e6d090 45%,#d0a85a 100%); border-radius: 6px; border: 2px solid var(--gold-mid); box-shadow: 0 5px 16px rgba(0,0,0,.65), inset 0 1px 3px rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.menu-carta-top::before { content: ''; position: absolute; inset: 4px; border: 1.5px solid rgba(139,105,20,.5); border-radius: 3px; background: repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(139,105,20,.1) 4px,rgba(139,105,20,.1) 5px), repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(139,105,20,.1) 4px,rgba(139,105,20,.1) 5px); }
.menu-carta-top::after { content: '⚜'; font-size: 2rem; color: var(--gold-deep); opacity: .75; position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.menu-btns-main { display: flex; flex-direction: column; gap: 11px; }
.menu-btn-juego { position: relative; width: 100%; min-height: 44px; padding: 13px 15px 11px; background: linear-gradient(180deg,#241200 0%,#160900 100%); border: 2px solid var(--gold-mid); border-radius: 10px; cursor: pointer; text-align: left; text-decoration: none; display: block; box-shadow: 0 0 0 1px rgba(240,200,74,.2), 0 5px 20px rgba(0,0,0,.65), inset 0 1px 0 rgba(240,200,74,.12); overflow: hidden; animation: bordePulso 3.8s ease-in-out infinite; transition: transform .1s, border-color .15s, box-shadow .15s; user-select: none; }
.menu-btn-juego::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg,transparent,rgba(240,200,74,.5),transparent); }
@media (hover: hover) { .menu-btn-juego:hover { transform: translateY(-2px); border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(240,200,74,.45), 0 10px 28px rgba(0,0,0,.7), inset 0 1px 0 rgba(240,200,74,.25); } }
.menu-btn-juego:active { transform: scale(.985) translateY(1px); box-shadow: 0 2px 10px rgba(0,0,0,.6); }
.menu-btn-header { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.menu-btn-badge { font-family: var(--font-deco); font-size: clamp(.95rem,4.5vw,1.1rem); font-weight: 900; color: var(--gold-bright); text-shadow: 0 0 10px rgba(240,200,74,.5); line-height: 1; flex-shrink: 0; }
.menu-btn-titulo { font-family: var(--font-title); font-weight: 700; font-size: clamp(.8rem,3.8vw,.95rem); color: var(--gold-bright); letter-spacing: .05em; line-height: 1.2; }
.menu-btn-sub { font-family: var(--font-ui); font-size: clamp(.68rem,2.9vw,.76rem); color: var(--gold-mid); letter-spacing: .04em; display: block; margin-top: 2px; }
.menu-btn-desc { font-family: var(--font-ui); font-size: clamp(.63rem,2.7vw,.71rem); color: rgba(200,155,42,.7); margin-top: 5px; display: block; font-style: italic; line-height: 1.35; }
.menu-btn-share { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 6px 14px; min-height: 36px; background: transparent; border: 1.5px solid var(--gold-mid); border-radius: 20px; color: var(--gold-bright); font-family: var(--font-title); font-size: clamp(.68rem,3vw,.75rem); font-weight: 600; letter-spacing: .06em; cursor: pointer; transition: background .18s, transform .1s; user-select: none; }
.menu-btn-share:active { transform: scale(.96); background: rgba(200,155,42,.18); }
@media (hover: hover) { .menu-btn-share:hover { background: rgba(200,155,42,.14); transform: scale(1.03); } }
.menu-btn-share svg { width: 13px; height: 13px; fill: var(--gold-bright); flex-shrink: 0; }
.menu-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 11px; }
.menu-sep-line { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,var(--gold-deep),transparent); }
.menu-sep-sym { color: var(--gold-mid); font-size: .85rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.menu-btns-sec { display: flex; flex-direction: column; gap: 9px; }
.menu-btn-sec { width: 68%; margin: 0 auto; min-height: 44px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg,rgba(200,155,42,.1) 0%,rgba(139,105,20,.06) 100%); border: 1.5px solid var(--gold-deep); border-radius: 8px; color: var(--gold-bright); font-family: var(--font-title); font-weight: 700; font-size: clamp(.7rem,3.2vw,.82rem); letter-spacing: .1em; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: background .18s, border-color .18s, transform .1s; overflow: hidden; position: relative; user-select: none; }
@media (hover: hover) { .menu-btn-sec:hover { background: linear-gradient(180deg,rgba(200,155,42,.22) 0%,rgba(139,105,20,.16) 100%); border-color: var(--gold-bright); transform: translateY(-1px); } }
.menu-btn-sec:active { transform: scale(.97); }
.menu-deco-bot { position: relative; height: 96px; margin-top: 6px; overflow: hidden; }
.menu-sym-c { position: absolute; font-size: 1.5rem; color: var(--gold-bright); filter: drop-shadow(0 2px 5px rgba(0,0,0,.6)); animation: flotar var(--dur,4s) ease-in-out infinite var(--delay,0s); pointer-events: none; }
.msc-tl{top:8px;left:6px;--delay:.5s} .msc-tr{top:8px;right:6px;--delay:1s} .msc-bl{bottom:4px;left:6px;--delay:1.5s} .msc-br{bottom:4px;right:6px;--delay:.2s}
.menu-moneda-b { position: absolute; background: radial-gradient(circle at 35% 30%,var(--gold-shine),var(--gold-mid) 55%,var(--gold-deep)); border-radius: 50%; border: 1.5px solid rgba(255,220,80,.55); box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.3); animation: flotar var(--dur,3.2s) ease-in-out infinite var(--delay,0s); pointer-events: none; }
.mmb1{width:16px;height:16px;top:18px;left:22px;--delay:.3s} .mmb2{width:20px;height:20px;top:52px;left:14px;--delay:.9s} .mmb3{width:14px;height:14px;top:18px;right:22px;--delay:.6s} .mmb4{width:20px;height:20px;top:55px;right:14px;--delay:1.2s}
.menu-mazo-bot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.menu-carta-bot { width: 46px; height: 65px; background: linear-gradient(145deg,#f5e6c8,#d4b870); border-radius: 5px; border: 1.5px solid var(--gold-mid); box-shadow: 0 3px 10px rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.menu-carta-bot::after { content: '⚜'; font-size: 1.3rem; color: var(--gold-deep); opacity: .6; }
.menu-carta-bot2 { width: 52px; height: 36px; margin-top: -4px; background: linear-gradient(145deg,#e6d090,#c0982a); border-radius: 5px; border: 1.5px solid var(--gold-deep); box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.menu-deco-star { position: absolute; bottom: 4px; right: 8px; font-size: 1.2rem; color: var(--gold-mid); opacity: .5; animation: parpadeoStar 4s ease-in-out infinite; }
.menu-ripple { position: absolute; border-radius: 50%; background: rgba(240,200,74,.22); transform: scale(0); animation: rippleAnim .55s ease-out; pointer-events: none; }


/* ── 4. TABLERO ────────────────────────────────────────────── */
#tablero {
  position: relative; width: min(1280px, 100vw); aspect-ratio: 16 / 9;
  background-image: url('image_2.png'); background-size: cover; background-position: center;
  border: 8px solid var(--wood-mid); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.7); overflow: hidden;
}

/* ── 5. HUD SUPERIOR ───────────────────────────────────────── */
.hud-superior {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); text-align: center; color: var(--blanco);
  z-index: var(--z-hud); background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 8px 18px; border-radius: var(--r-ui); width: max-content; max-width: 95%; border: 1px solid rgba(240,200,74,.2);
}
.hud-superior h1 { font-family: var(--font-title); font-size: clamp(.75rem, 1.5vw, 1.1rem); margin-bottom: 4px; color: var(--amarillo); display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ── 6. MAZO Y DESCARTE ────────────────────────────────────── */
#mazo-pile { position: absolute; top: 300px; left: 600px; width: var(--carta-w); height: var(--carta-h); background: transparent; cursor: pointer; transition: top 1.8s cubic-bezier(.4,0,.2,1), left 1.8s cubic-bezier(.4,0,.2,1), transform .4s ease; z-index: var(--z-mazo); border-radius: var(--r-carta); }
#mazo-pile.posicion-original { top: 68px; left: 1032px; transform: none; }
#mazo-pile.mazo-turno-jugador { top: 440px; left: 1032px; transform: translateY(0); box-shadow: 0 15px 35px rgba(0,0,0,.8), 0 0 20px rgba(255,235,59,.4); border-radius: 12px; animation: flotarBurbuja 2s ease-in-out infinite; z-index: 250; }
#mazo-pile.mazo-cargando .carta { box-shadow: 0 0 30px rgba(255,60,60,.9); border-radius: var(--r-carta); animation: palpitarMazo .8s alternate infinite; }
#descarte-pile { position: absolute; top: 68px; left: 168px; width: var(--carta-w); height: var(--carta-h); background: transparent; z-index: var(--z-descarte); border-radius: var(--r-carta); }
#cartas-mazo, #contador-descarte { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); color: var(--gold-bright); font-family: var(--font-title); font-weight: bold; font-size: clamp(.7rem, 1.2vw, .9rem); text-shadow: 1px 1px 3px rgba(0,0,0,.9); white-space: nowrap; }

/* ── 7. ÁREA MESA / POZO ───────────────────────────────────── */
#area-mesa-pozo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(260px, 50vw, 640px); height: clamp(100px, 15vw, 150px); display: flex; justify-content: center; align-items: center; gap: clamp(6px, 1vw, 15px); z-index: var(--z-cartas); flex-wrap: nowrap; }
#area-mesa-pozo .carta { flex-shrink: 0; }

/* ── 8. ÁREAS DE JUGADORES ─────────────────────────────────── */
.jugador-area { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#norte-area { top: 16px; left: 50%; transform: translateX(-50%); width: max-content; min-width: 280px; height: 180px; justify-content: flex-end; }
#oeste-area { top: 50%; left: 16px; transform: translateY(-50%) rotate(90deg); width: max-content; min-width: 280px; height: 180px; justify-content: flex-start; }
#oeste-area h3 { transform: rotate(-90deg); margin-bottom: 16px; }
#este-area { top: 50%; right: 16px; transform: translateY(-50%) rotate(-90deg); width: max-content; min-width: 280px; height: 180px; justify-content: flex-start; }
#este-area h3 { transform: rotate(90deg); margin-bottom: 16px; }
#sur-area { bottom: 16px; left: 50%; transform: translateX(-50%); width: max-content; min-width: 380px; max-width: 1100px; height: 190px; justify-content: flex-start; z-index: var(--z-hud); }

/* ── 9. JUGADOR / MANO ─────────────────────────────────────── */
.jugador { background: transparent; border: 2px solid transparent; border-radius: var(--r-ui); padding: 4px; width: 100%; text-align: center; }
.jugador h3 { color: var(--blanco); font-family: var(--font-title); font-size: clamp(.75rem, 1.2vw, .9rem); text-shadow: 1px 1px 3px rgba(0,0,0,.8); margin-bottom: 4px; }
.jugador.activo h3 { color: var(--amarillo); text-shadow: 0 0 12px rgba(255,235,59,.8); }
.mano { display: flex; justify-content: center; min-height: calc(var(--carta-h) - 10px); }

/* ── 10. CARTA ──────────────────────────────────────────────── */
.carta { width: var(--carta-w); height: var(--carta-h); border-radius: var(--r-carta); cursor: pointer; box-shadow: var(--sombra-carta); user-select: none; -webkit-user-select: none; transition: transform .18s ease, box-shadow .18s ease; background: transparent; border: none; padding: 0; position: relative; flex-shrink: 0; }
@media (hover: hover) { #sur-area .mano .carta:hover:not(.deshabilitada) { transform: translateY(-14px) scale(1.06); z-index: 100; } }
#sur-area .mano .carta:active:not(.deshabilitada) { transform: translateY(-8px) scale(1.04); }
.img-carta { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: var(--r-carta); background: var(--blanco); border: 2px solid rgba(255,255,255,.85); }
.carta.deshabilitada { filter: grayscale(100%) brightness(50%); cursor: not-allowed; }
.carta.reverso { background-image: url('cartas/reverso.png'); background-size: cover; background-position: center; cursor: default; border-radius: var(--r-carta); border: 2px solid rgba(255,255,255,.7); }
.carta.jugable { box-shadow: 0 0 16px rgba(76,175,80,.85), var(--sombra-carta); border: 3px solid var(--verde-ok); animation: palpitar 1.4s alternate infinite; }
.carta-animada { position: absolute; width: var(--carta-w); height: var(--carta-h); border-radius: var(--r-carta); background-image: url('cartas/reverso.png'); background-size: cover; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 6px 18px rgba(0,0,0,.65); z-index: var(--z-animacion); pointer-events: none; }

/* ── 11. CARTAS DE BOTS ────────────────────────────────────── */
#norte-area .mano, #oeste-area .mano, #este-area .mano { min-height: 60px; align-items: center; }
#norte-area .mano .carta, #oeste-area .mano .carta, #este-area .mano .carta { width: clamp(36px, 3.5vw, 46px); height: calc(clamp(36px, 3.5vw, 46px) * 1.5); border-radius: 4px; border: 1.5px solid rgba(255,255,255,.65); box-shadow: 0 2px 6px rgba(0,0,0,.6); cursor: default; }
.mano-bot-wrapper { position: relative; display: inline-flex; align-items: center; }
.badge-cartas-bot { position: absolute; top: -10px; right: -9px; background: var(--amarillo); color: #1a1a1a; font-size: .7rem; font-weight: 700; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,.5); z-index: 10; }

/* ── 12. BOTÓN CARGAR ──────────────────────────────────────── */
button.cargar-btn { background: rgba(255,235,59,.1); border: 2px solid rgba(255,235,59,.35); color: var(--amarillo); padding: 10px 14px; border-radius: 6px; cursor: pointer; width: 100%; max-width: 150px; margin-top: 8px; height: 42px; font-family: var(--font-title); font-size: clamp(.75rem, 1.2vw, .9rem); letter-spacing: .06em; transition: background .2s, transform .1s; z-index: 50; }
@media (hover: hover) { button.cargar-btn:hover { background: rgba(255,235,59,.2); } }
button.cargar-btn:active { transform: scale(.96); }

/* ── 13. MENSAJE CENTRO ────────────────────────────────────── */
#mensaje-centro { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.95); background: rgba(0,0,0,.88); border: 3px solid var(--amarillo); color: var(--blanco); padding: 20px 36px; border-radius: var(--r-modal); text-align: center; z-index: var(--z-mensaje); box-shadow: var(--sombra-modal); display: none; opacity: 0; transition: opacity .3s, transform .3s; }
#mensaje-centro.activo { display: block; animation: aparecerMensaje .45s cubic-bezier(.22,1,.36,1) forwards; }

/* ── 14. NOTIFICACIONES ────────────────────────────────────── */
#notificaciones-container { position: absolute; top: 85px; right: 16px; display: flex; flex-direction: column; gap: 12px; z-index: var(--z-notif); pointer-events: none; max-width: 280px; }
.notificacion-toast { background: rgba(0,0,0,.88); border-left: 5px solid var(--rojo-alerta); color: var(--blanco); padding: 12px 18px; border-radius: 6px; font-family: var(--font-ui); font-size: clamp(.78rem, 1.2vw, 1rem); font-weight: 700; box-shadow: 0 5px 18px rgba(0,0,0,.6); animation: deslizarEntrada .35s cubic-bezier(.22,1,.36,1), desvanecerSalida .35s ease-out 2.5s forwards; display: flex; align-items: center; gap: 8px; }

/* ── 15. PANTALLA INICIO Y ESPERA───────────────────────────── */
#pantalla-inicio { position: fixed; inset: 0; background-image: url('fondo_inicio.jpg'); background-size: cover; background-position: center; z-index: var(--z-pantalla); display: flex; justify-content: center; align-items: flex-end; padding-bottom: calc(6% + var(--sab)); }
.ui-transparente { width: 100%; text-align: center; padding: 20px; display: flex; flex-direction: column; align-items: center; }
.titulo-juego { font-family: var(--font-deco); color: var(--amarillo); font-size: clamp(2rem, 7vw, 3.5em); text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 10px 24px rgba(0,0,0,.75); margin-bottom: 20px; text-transform: uppercase; letter-spacing: .04em; }
#input-nombre-jugador, #input-sala-id { width: 80%; max-width: 300px; padding: 14px 18px; margin-bottom: 14px; border-radius: 25px; border: 2px solid var(--gold-mid); background: rgba(0,0,0,.65); color: var(--blanco); font-family: var(--font-title); font-size: clamp(1rem, 3vw, 1.2rem); text-align: center; outline: none; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 4px 18px rgba(0,0,0,.5); transition: border-color .2s, box-shadow .2s; touch-action: manipulation; }
#input-nombre-jugador:focus, #input-sala-id:focus { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(240,200,74,.25), 0 4px 18px rgba(0,0,0,.5); }
.contenedor-botones-inicio { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 8px; }
.btn-iniciar { background: linear-gradient(135deg, var(--gold-bright) 0%, var(--naranja) 100%); color: #1a1a1a; border: none; padding: 14px 36px; font-family: var(--font-title); font-size: clamp(1.1rem, 3vw, 1.45rem); font-weight: 700; border-radius: 30px; cursor: pointer; min-height: 52px; transition: transform .18s, box-shadow .18s; box-shadow: 0 5px 18px rgba(0,0,0,.75); text-transform: uppercase; letter-spacing: .05em; }
@media (hover: hover) { .btn-iniciar:hover { transform: scale(1.05); box-shadow: 0 8px 28px rgba(0,0,0,.9); } }
.btn-iniciar:active { transform: scale(.97); }
.btn-instrucciones { background: rgba(0,0,0,.6); color: var(--amarillo); border: 2px solid var(--amarillo); padding: 11px 28px; font-family: var(--font-title); font-size: clamp(.9rem, 2.5vw, 1.15rem); font-weight: 700; border-radius: 30px; cursor: pointer; min-height: 48px; transition: transform .18s, background .2s; text-transform: uppercase; width: 80%; max-width: 300px; }
@media (hover: hover) { .btn-instrucciones:hover { background: rgba(255,235,59,.12); transform: scale(1.03); } }

/* ── 16. MODAL INSTRUCCIONES ───────────────────────────────── */
#modal-instrucciones { position: fixed; inset: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: var(--z-modal); display: flex; justify-content: center; align-items: center; padding: 16px; }
.modal-contenido { background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%); border: 2px solid var(--amarillo); border-radius: var(--r-modal); width: 90%; max-width: 580px; max-height: 88dvh; padding: 28px; position: relative; color: var(--blanco); box-shadow: var(--sombra-modal); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.btn-cerrar { position: absolute; top: 12px; right: 16px; background: transparent; color: var(--rojo-alerta); border: none; font-size: 1.8rem; font-weight: 700; cursor: pointer; line-height: 1; padding: 4px 8px; min-width: 36px; min-height: 36px; }

/* ── 17. PANTALLA RESULTADOS ───────────────────────────────── */
#pantalla-resultados { position: fixed; inset: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: var(--z-pantalla); display: flex; justify-content: center; align-items: center; padding: 16px; }
.texto-sombra-fuerte { color: var(--blanco); font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.8; text-shadow: 2px 2px 4px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

/* ── 18. PANTALLA ESPERA ───────────────────────────────────── */
#pantalla-espera { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.88); border: 2px solid var(--gold-mid); border-radius: var(--r-modal); padding: 28px 32px; text-align: center; color: var(--blanco); z-index: var(--z-pantalla); min-width: 280px; max-width: 90vw; box-shadow: var(--sombra-modal); display: none; }
#pantalla-espera.visible { display: block; }
#pantalla-espera h2 { font-family: var(--font-title); color: var(--gold-bright); margin-bottom: 16px; }
#lista-jugadores-espera { list-style: none; text-align: left; margin: 12px 0; }
#lista-jugadores-espera li { padding: 6px 0; font-size: clamp(.85rem, 2vw, 1rem); border-bottom: 1px solid rgba(255,255,255,.08); }

/* ── 19. ANIMACIONES ───────────────────────────────────────── */
@keyframes entradaTablero { from{opacity:0;transform:scale(.96) translateY(14px)} to{opacity:1;transform:none} }
@keyframes flotar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes parpadeoTitulo { 0%,45%,55%,100%{opacity:.9} 50%{opacity:1} }
@keyframes parpadeoStar { 0%,100%{opacity:.3} 50%{opacity:.7} }
@keyframes bordePulso { 0%,100%{box-shadow:0 0 0 1px rgba(240,200,74,.18),0 5px 20px rgba(0,0,0,.65),inset 0 1px 0 rgba(240,200,74,.1)} 50%{box-shadow:0 0 0 2px rgba(240,200,74,.38),0 5px 20px rgba(0,0,0,.65),inset 0 1px 0 rgba(240,200,74,.2)} }
@keyframes rippleAnim { to{transform:scale(4.5);opacity:0} }
@keyframes palpitar { 0% { box-shadow: 0 0 10px var(--verde-ok); border-color: var(--verde-ok); } 100% { box-shadow: 0 0 26px #81C784; border-color: #81C784; } }
@keyframes flotarBurbuja { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes palpitarMazo { 0% { box-shadow: 0 0 15px var(--rojo-alerta); transform: scale(1); } 100% { box-shadow: 0 0 35px #ff0000; transform: scale(1.05); } }
@keyframes aparecerMensaje { from { opacity: 0; transform: translate(-50%, -42%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes deslizarEntrada { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes desvanecerSalida { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-18px); } }

/* ── 20. RESPONSIVE — MÓVIL (≤ 768px) ─────────────────────── */
@media (max-width: 768px) {
  #tablero { width: 100vw; height: 100dvh; aspect-ratio: unset; border: none; border-radius: 0; background-image: url('mobile_table.jpg'); }
  #pantalla-inicio { background-image: url('fondo_inicio_movil.jpg'); background-position: top center; align-items: flex-end; padding-bottom: calc(5% + var(--sab)); }
  .titulo-juego { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .hud-superior { width: 95%; top: calc(4px + var(--sat)); font-size: .78rem; padding: 6px 10px; }
  :root { --carta-w: clamp(52px, 18vw, 76px); --carta-bot-w: clamp(60px, 20vw, 84px); }
  #mazo-pile.posicion-original { top: 70px; left: calc(100% - 19vw); transform: scale(.88); }
  #mazo-pile.mazo-turno-jugador { top: calc(100dvh - 230px); left: calc(100% - 19vw); transform: scale(.92); animation: flotarBurbujaMovil 2s ease-in-out infinite; }
  #descarte-pile { top: 70px; left: 12px; transform: scale(.88); }
  #norte-area { top: calc(72px + var(--sat)); width: 100%; height: auto; }
  #oeste-area { left: -22px; top: 34%; height: auto; }
  #este-area { right: -22px; top: 34%; height: auto; }
  #norte-area .mano .carta, #oeste-area .mano .carta, #este-area .mano .carta { width: 46px; height: 69px; min-width: 46px; min-height: 69px; }
  .mano-bot-wrapper { width: 46px; height: 69px; display: block; position: relative; }
  #area-mesa-pozo { width: 94vw; height: auto; flex-wrap: nowrap; gap: 4px; }
  #sur-area { height: auto; width: 100%; bottom: 0; left: 50%; transform: translateX(-50%); justify-content: flex-end; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%); padding-bottom: calc(18px + var(--sab)); z-index: 200; max-width: unset; min-width: unset; }
  #sur-area .mano { overflow-x: auto; overflow-y: visible; justify-content: flex-start; padding: 0 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #sur-area .mano::-webkit-scrollbar { display: none; }
  #notificaciones-container { top: 55px; right: 8px; left: 8px; align-items: center; max-width: unset; }
  .notificacion-toast { font-size: .82rem; padding: 10px 14px; width: 96%; justify-content: center; text-align: center; }
  button.cargar-btn { width: 90%; max-width: 200px; height: 46px; font-size: .88rem; background: rgba(255,235,59,.18); border-color: var(--amarillo); border-radius: 24px; margin-top: 8px; }
}

/* ── 21. RESPONSIVE — LANDSCAPE MÓVIL ─────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  :root { --carta-w: clamp(42px, 10vh, 62px); }
  #sur-area { padding-bottom: calc(8px + var(--sab)); }
  #norte-area { top: calc(4px + var(--sat)); }
}

@keyframes flotarBurbujaMovil { 0%, 100% { transform: scale(.92) translateY(0); } 50% { transform: scale(.92) translateY(-11px); } }