/* La Élite del Tejo · colores de Elite Auto Full Service (negro, plateado y aguamarina) con amarillo de tejo */
:root{--fondo:#0d0d0d;--panel:#17191b;--panel2:#212427;--linea:#30353a;--texto:#f2f4f5;--suave:#a9b1b7;
  --arcilla:#16a3ad;   /* botones principales: aguamarina Elite Auto */
  --polvora:#3fd0d9;   /* títulos y resaltados */
  --oro:#f2c94c;       /* medallas, balota, Quemamecha */
  --verde:#5cb85c;--rojo:#e0594b;--r:12px;--titulo:'Barlow Condensed','Arial Narrow',sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--texto);font-family:'Source Sans 3',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%}
body{background:radial-gradient(1200px 500px at 50% -200px,#12383b 0%,transparent 70%) var(--fondo)}
button,input,select{font:inherit;color:inherit}
.barra{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#000,#0b0b0b);border-bottom:4px solid var(--arcilla);padding:10px 14px}
.marca{display:flex;gap:10px;align-items:center;max-width:820px;margin:0 auto}
.marca-ico{border-radius:10px;box-shadow:0 0 0 2px #2c2c2c}
.marca-txt{flex:1;min-width:0}
.marca-txt b{display:block;font-family:var(--titulo);font-weight:800;font-size:1.35rem;line-height:1;letter-spacing:.02em;background:linear-gradient(180deg,#fff,#b9c0c5);-webkit-background-clip:text;background-clip:text;color:transparent}
.marca-txt b span{background:linear-gradient(180deg,#6fe3ea,#16a3ad);-webkit-background-clip:text;background-clip:text;color:transparent}
.marca small{color:var(--suave);font-size:.78rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.patrocina{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.patrocina small{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em}
.patrocina img{display:block;width:96px;height:auto}
h2,h3,.menu button{font-family:var(--titulo);letter-spacing:.02em}
h2{text-transform:uppercase;font-weight:800}
/* portada con el practicante */
.portada{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--linea);background:linear-gradient(160deg,#e9ecee 0%,#cfd5d8 55%,#16a3ad 160%);color:#111;display:grid;grid-template-columns:1fr 46%;align-items:end;min-height:220px;margin-bottom:12px}
.portada .txt{padding:16px 0 16px 16px;align-self:center}
.portada .txt b{display:block;font-family:var(--titulo);font-weight:800;font-size:2rem;line-height:.95;color:#0d0d0d;text-transform:uppercase}
.portada .txt b span{color:#0f8e97}
.portada .txt small{display:block;margin-top:8px;color:#333;font-weight:600}
.portada img.pj{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.portada .sello{display:flex;align-items:center;gap:6px;margin-top:10px;background:#0d0d0d;border-radius:8px;padding:5px 8px;width:max-content}
.portada .sello img{width:90px;height:auto;display:block}
.portada .sello span{color:#ccc;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em}
main{max-width:820px;margin:0 auto;padding:14px 14px calc(96px + env(safe-area-inset-bottom,0px))}
.menu{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);background:#000;border-top:1px solid var(--linea);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.menu button{background:none;border:0;padding:10px 2px;border-radius:10px;font-size:.95rem;font-weight:700;color:var(--suave);cursor:pointer}
.menu button[aria-current=page]{color:var(--polvora);background:var(--panel)}
h2{font-size:1.35rem;margin:6px 0 12px}
h3{font-size:1.05rem;margin:18px 0 8px;color:var(--polvora)}
.panel{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:14px;margin-bottom:12px}
.vacio{text-align:center;color:var(--suave);padding:26px 14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--linea);background:var(--panel2);border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer;text-decoration:none}
.btn.prim{background:var(--arcilla);border-color:var(--arcilla);color:#fff}
.btn.oro{background:var(--oro);border-color:var(--oro);color:#111}
.btn.peligro{background:none;border-color:var(--rojo);color:var(--rojo)}
.btn.bloque{width:100%}
.btn:disabled{opacity:.45}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.campo{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.campo span{font-size:.8rem;color:var(--suave);font-weight:700}
input[type=text],input[type=number],input[type=date],select{background:#0b0b0b;border:1px solid var(--linea);border-radius:10px;padding:11px 12px;width:100%;font-size:16px}
.ayuda{color:var(--suave);font-size:.85rem}
/* partidos */
.ronda{margin-bottom:14px}
.partido{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:12px;margin-bottom:8px;cursor:pointer}
.partido .j{font-weight:700;overflow-wrap:anywhere}
.partido .j.b{text-align:right}
.partido .j.gana{color:var(--polvora)}
.partido .marcador{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.25rem;text-align:center;min-width:72px}
.partido .marcador small{display:block;font-size:.72rem;font-weight:600;color:var(--suave)}
.partido.pendiente .marcador{color:var(--suave);font-size:.9rem}
.progreso{height:10px;border-radius:6px;background:var(--panel2);overflow:hidden;margin:6px 0 4px}
.progreso i{display:block;height:100%;background:var(--polvora)}
/* tablas */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:9px 6px;border-bottom:1px solid var(--linea);text-align:center}
th{font-size:.75rem;color:var(--suave);text-transform:uppercase;letter-spacing:.04em}
td.nom,th.nom{text-align:left}
tr.clasif td{background:rgba(22,163,173,.12)}
tr.clasif td:first-child{box-shadow:inset 4px 0 var(--polvora)}
.pos{font-weight:800;color:var(--polvora)}
.mechas-top{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#3a3010,#17191b);border:1px solid var(--oro)}
.medalla{font-size:2.6rem;line-height:1}
/* registro de resultado */
.overlay{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.caja{background:var(--panel);border:1px solid var(--linea);border-radius:16px 16px 0 0;width:100%;max-width:560px;max-height:92vh;overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.overlay{align-items:center}.caja{border-radius:16px}}
.caja h2{margin-top:0}
.jugador-res{background:var(--panel2);border-radius:var(--r);padding:12px;margin-bottom:10px}
.jugador-res b{display:block;font-size:1.1rem;margin-bottom:8px}
.contador{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.contador span{font-size:.8rem;color:var(--suave);font-weight:700;grid-column:1/-1}
.contador button{width:52px;height:52px;border-radius:12px;border:1px solid var(--linea);background:#0b0b0b;font-size:1.6rem;font-weight:800;cursor:pointer}
.contador input{text-align:center;font-size:1.6rem;font-weight:800;height:52px}
.error{color:var(--rojo);font-weight:700;min-height:1.2em;margin:4px 0}
/* series (semis y final) */
.serie{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:14px;margin-bottom:12px}
.serie .vs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-weight:800;font-size:1.05rem}
.serie .vs .b{text-align:right}
.serie .vs .g{color:var(--polvora)}
.serie .ganados{font-size:1.6rem;text-align:center;font-variant-numeric:tabular-nums}
.chicos{margin:10px 0;display:flex;flex-direction:column;gap:6px}
.chico{display:flex;justify-content:space-between;background:var(--panel2);border-radius:8px;padding:8px 10px;font-variant-numeric:tabular-nums;cursor:pointer}
/* ruleta / balota */
.ruleta-zona{position:relative;width:300px;height:300px;margin:10px auto 16px}
.ruleta-zona svg{width:100%;height:100%;transition:transform 4.6s cubic-bezier(.12,.62,.08,1)}
.ruleta-flecha{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid #ffffff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));z-index:2}
.ruleta-centro{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff,#c9d0d4 45%,#5d666c);box-shadow:0 3px 10px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-weight:900;color:#1c1712}
.resultado-sorteo{text-align:center;font-family:var(--titulo);font-size:1.5rem;font-weight:800;color:var(--oro);min-height:1.5em}
.podio{display:grid;gap:8px}
.podio div{display:flex;align-items:center;gap:12px;background:var(--panel2);border-radius:var(--r);padding:12px;font-weight:800;font-size:1.05rem}
.podio div span{font-size:1.8rem}
#aviso{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#000;color:#fff;padding:10px 16px;border-radius:10px;z-index:30;max-width:90vw;text-align:center;font-weight:600}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.75rem;font-weight:800;background:var(--panel2);color:var(--suave)}
.chip.ok{background:rgba(92,184,92,.18);color:var(--verde)}
.lista-jug{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.lista-jug div{display:flex;gap:8px;align-items:center}
.lista-jug input{flex:1}

/* podio con el practicante */
.podio-portada{display:flex;align-items:flex-end;gap:10px;background:linear-gradient(160deg,#e9ecee,#cfd5d8);border-radius:12px;padding:0 12px 0 0;margin-bottom:10px;overflow:hidden;color:#111}
.podio-portada img{width:120px;height:auto;mix-blend-mode:multiply;display:block}
.podio-portada b{font-family:var(--titulo);font-size:1.5rem;line-height:1;text-transform:uppercase;padding-bottom:14px}
.podio-portada b span{color:#0f8e97}
.podio div:first-child{background:linear-gradient(135deg,#4a3c0f,#212427);border:1px solid var(--oro)}
.marcador,.ganados,.pos{font-family:var(--titulo)}
.serie .ganados{font-size:2rem}.ruleta-centro{overflow:hidden;border:4px solid #fff}.ruleta-centro img{width:100%;height:100%;object-fit:cover;display:block}

/* el tejo dorado: sombra debajo y borde dorado del logo del centro */
.ruleta-zona svg{filter:drop-shadow(0 8px 14px rgba(0,0,0,.65))}
.ruleta-centro{border-color:#fff1b8!important;box-shadow:0 0 0 3px #8f670b,0 3px 10px rgba(0,0,0,.6)}
/* brillo del metal: queda quieto mientras el tejo gira */
.ruleta-zona::after{content:'';position:absolute;inset:7.3%;border-radius:50%;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.5),rgba(255,255,255,0) 46%);pointer-events:none;z-index:1}

/* balota con tres tejos dorados sobre la greda */
.mesa{position:relative;height:230px;margin:6px 0 14px;border-radius:16px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%,#b07a4a 0%,#8a5a33 55%,#5e3c20 100%);box-shadow:inset 0 0 30px rgba(0,0,0,.6);border:3px solid #3a2614}
.mesa::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.6px),radial-gradient(rgba(255,230,190,.12) 1px,transparent 1.8px);background-size:9px 9px,13px 13px;background-position:0 0,4px 6px}
.tejo{position:absolute;top:50%;width:98px;height:98px;padding:0;border:0;background:none;cursor:default;perspective:600px;
  transition-property:left,transform;transition-duration:420ms;transition-timing-function:cubic-bezier(.45,.05,.35,1);z-index:1}
.tejo-giro{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.4,.5,1)}
.tejo-cara,.tejo-dorso{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 28%,#fff8d6 0%,#f6d56b 30%,#d1a024 65%,#8f670b 100%);
  box-shadow:0 0 0 5px #b8860b,0 0 0 7px #5a3f05,0 10px 16px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,241,184,.6)}
.tejo-cara img{width:56%;height:56%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff1b8,0 0 0 5px #8f670b}
.tejo-dorso{transform:rotateY(180deg)}
.tejo-dorso b{font-family:var(--titulo);font-size:1.25rem;font-weight:800;color:#0d0a04;line-height:1;text-align:center;padding:0 6px;overflow-wrap:anywhere}
.tejo-dorso small{font-size:.7rem;font-weight:800;color:#2a1e04;margin-top:3px}
.tejo.volteado .tejo-giro{transform:rotateY(180deg)}
.tejo.elegido{z-index:3}
.tejo.elegido .tejo-cara,.tejo.elegido .tejo-dorso{box-shadow:0 0 0 5px #b8860b,0 0 0 7px #5a3f05,0 0 0 11px #fff,0 0 26px 10px rgba(242,201,76,.9)}
.mesa.listo .tejo{cursor:pointer;animation:latir 1.1s ease-in-out infinite}
.mesa.listo .tejo:nth-child(2){animation-delay:.18s}.mesa.listo .tejo:nth-child(3){animation-delay:.36s}
@keyframes latir{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) drop-shadow(0 0 10px rgba(255,236,160,.8))}}

/* balota: canchita de tejo con 3 mechas y un tejo para lanzar */
.cancha{position:relative;width:100%;max-width:340px;margin:4px auto 10px;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:3px solid #3a1f0e;box-shadow:0 8px 20px rgba(0,0,0,.6);background:#1f1f1f}
.cancha-svg{display:block;width:100%;height:100%}
.tejo-lanzar{position:absolute;left:50%;top:86%;width:28%;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;filter:drop-shadow(0 8px 6px rgba(0,0,0,.6));animation:tejoListo 1.2s ease-in-out infinite;z-index:3}
.tejo-lanzar svg{display:block;width:100%;height:auto}
@keyframes tejoListo{50%{filter:drop-shadow(0 8px 6px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(242,201,76,.9))}}
.mecha-g{transition:opacity .15s}.mecha-g.estallada{opacity:0}
.mecha-nombre{position:absolute;transform:translate(-50%,-185%);background:linear-gradient(180deg,#fff3c4,#f2c94c);color:#0d0a04;font-family:var(--titulo);font-weight:800;font-size:.85rem;padding:2px 7px;border-radius:7px;white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,.6);opacity:0;transition:opacity .4s,transform .4s;z-index:4;pointer-events:none}
.mecha-nombre.visible{opacity:.9}
.mecha-nombre.ganadora{opacity:1;font-size:1.15rem;transform:translate(-50%,-150%) scale(1.08);box-shadow:0 0 0 3px #fff,0 0 18px 6px rgba(242,201,76,.9);z-index:5}
.fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.fx-destello,.fx-chispa,.fx-humo{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.fx-destello{width:22px;height:22px;background:radial-gradient(circle,#fff 0%,#fff6b0 30%,#ff9d2e 60%,rgba(255,80,0,0) 72%);animation:destello .55s ease-out forwards}
@keyframes destello{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(9);opacity:0}}
.fx-chispa{width:5px;height:5px;background:#ffd34d;box-shadow:0 0 6px 2px #ff8a1f;animation:chispa .75s ease-out forwards}
@keyframes chispa{0%{transform:translate(-50%,-50%);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)));opacity:0}}
.fx-humo{width:34px;height:34px;background:radial-gradient(circle,rgba(210,210,210,.85),rgba(140,140,140,.55) 55%,rgba(120,120,120,0) 72%);opacity:0;animation:humo 2.6s ease-out forwards}
@keyframes humo{0%{transform:translate(-50%,-50%) scale(.3);opacity:.95}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(var(--s));opacity:0}}
.cancha.temblor{animation:temblor .45s linear}
@keyframes temblor{10%,50%,90%{transform:translate(-4px,2px)}30%,70%{transform:translate(4px,-2px)}}
.quemado{opacity:0;transition:opacity .4s .2s}.quemado.visible{opacity:.85}

/* escoger la mecha: brillan para invitar a tocarlas; la escogida queda con aro dorado */
.mecha-btn{position:absolute;width:17%;aspect-ratio:1;transform:translate(-50%,-58%);border-radius:50%;border:0;background:transparent;padding:0;cursor:pointer;z-index:3;box-shadow:0 0 0 2px rgba(255,255,255,.55);animation:mechaInvita 1.4s ease-in-out infinite}
.mecha-btn:nth-of-type(2){animation-delay:.25s}.mecha-btn:nth-of-type(3){animation-delay:.5s}
@keyframes mechaInvita{50%{box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 14px 4px rgba(255,255,255,.45)}}
.mecha-btn.elegida{animation:none;box-shadow:0 0 0 4px #f2c94c,0 0 0 6px #fff,0 0 22px 8px rgba(242,201,76,.85)}
.mecha-btn:disabled{animation:none;box-shadow:none;cursor:default}
.cancha.pedir .mecha-btn{animation:mechaPide .5s ease-in-out 2}
@keyframes mechaPide{50%{box-shadow:0 0 0 5px #f2c94c,0 0 26px 10px rgba(242,201,76,.95)}}
.tejo-lanzar{animation:none}
.tejo-lanzar.apunta{animation:tejoListo 1s ease-in-out infinite}

/* la gente en las tribunas y la celebración */
.tribuna{position:absolute;inset:0;pointer-events:none;z-index:2}
.hincha{position:absolute;width:calc(11% * var(--s));transform:translate(-50%,-100%);transform-origin:50% 100%}
.hincha svg{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.hincha .brazo-i,.hincha .brazo-d{transition:transform .25s}
.hincha .brazo-i{transform-origin:12px 31px}.hincha .brazo-d{transform-origin:28px 31px}
.hincha{animation:hinchaMira 3s ease-in-out infinite;animation-delay:var(--d)}
@keyframes hinchaMira{50%{transform:translate(-50%,-100%) rotate(-3deg)}}
.celebra .hincha{animation:hinchaBrinca .42s ease-in-out infinite;animation-delay:var(--d)}
.celebra .hincha .brazo-i{transform:rotate(145deg)}.celebra .hincha .brazo-d{transform:rotate(-145deg)}
@keyframes hinchaBrinca{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-125%)}}
.confeti{position:absolute;top:-4%;width:7px;height:11px;border-radius:2px;opacity:.95;animation:confeti 2s ease-in forwards}
@keyframes confeti{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),115%) rotate(var(--r));top:100%;opacity:.9}}
.mecha-btn.apagada{animation:none;box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.tejo-lanzar{width:36%}
.tejo-lanzar img{display:block;width:100%;height:auto;pointer-events:none}