*{box-sizing:border-box}
:root{
  --bg:#07101e;
  --bg2:#111c2f;
  --panel:#202b3d;
  --line:rgba(255,255,255,.14);
  --text:#fff;
  --muted:#d9e6f6;
  --green:#16e0aa;
  --yellow:#ffca2c;
  --orange:#ff941f;
  --red:#ff1744;
  --blue:#0094ff;
  --lime:#38e54d;
}
html,body{
  margin:0;
  min-height:100%;
  font-family:Arial,Helvetica,sans-serif;
  background:radial-gradient(circle at top left,#2b374b 0,#0b1220 42%,#050912 100%);
  color:var(--text);
}
button,input{font:inherit}
button{border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:inherit}
.dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.35);display:inline-block;vertical-align:middle;flex:0 0 auto}
.c0{background:#ff1744}.c1{background:#0094ff}.c2{background:#38e54d}.c3{background:#ff8c00}.c4{background:#9c27ff}.c5{background:#ff4fd8}.c6{background:#00d7c9}.c7{background:#ffd400}.c8{background:#9cff00}.c9{background:#3de5ff}.c10{background:#ff6f61}.c11{background:#5b6cff}
.kicker{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.title{margin:8px 0 6px;font-size:clamp(30px,7vw,64px);line-height:.88;letter-spacing:-.06em;text-transform:uppercase;font-weight:1000}
.subtitle{color:var(--muted);font-size:clamp(14px,1.8vw,20px);margin:0 0 14px;line-height:1.25}
.panel,.admin-panel{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));border:1px solid var(--line);box-shadow:0 18px 55px rgba(0,0,0,.35);border-radius:22px;padding:16px}
.page{min-height:100vh;padding:12px}
.mobile-shell{width:min(430px,100%);margin:0 auto}
.grid{display:grid;gap:12px}
.label{font-weight:900;color:#eff6ff}
.input{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.28);color:white;border-radius:14px;padding:13px 14px;outline:none;font-size:17px;font-weight:800}
.input:focus{border-color:rgba(22,224,170,.8);box-shadow:0 0 0 4px rgba(22,224,170,.14)}
.hint{color:#cbd5e1;font-size:13px;line-height:1.35}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:16px;padding:12px 16px;font-weight:1000;text-transform:uppercase;letter-spacing:.05em;color:#06111d;background:linear-gradient(180deg,#ffe39a,#ff9b15);box-shadow:0 7px 0 #a85f00,0 16px 26px rgba(0,0,0,.25)}
.btn:active{transform:translateY(3px);box-shadow:0 4px 0 #a85f00,0 10px 18px rgba(0,0,0,.22)}
.btn.secondary{color:#fff;background:rgba(255,255,255,.12);box-shadow:none;border:1px solid rgba(255,255,255,.14)}
.btn.danger{background:linear-gradient(180deg,#ff6b6b,#ef233c);color:white;box-shadow:0 7px 0 #8f0f1f,0 16px 26px rgba(0,0,0,.25)}
.btn.good{background:linear-gradient(180deg,#40f7c4,#0bd59c);color:#03140f;box-shadow:0 7px 0 #078b66,0 16px 26px rgba(0,0,0,.25)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:36px;border-radius:999px;padding:7px 16px;background:var(--green);color:#00150f;font-size:13px;font-weight:1000;text-transform:uppercase;letter-spacing:.06em}
.chip.waiting{background:var(--yellow);color:#1c1200}.chip.paused{background:#cbd5e1;color:#111827}.chip.finished{background:#ef233c;color:#fff}.chip.countdown{background:var(--orange);color:#1f1100}
.player-name{font-size:clamp(22px,6.5vw,32px);font-weight:1000;text-transform:uppercase;letter-spacing:-.04em;margin:14px 0 5px}
.player-stats{color:#eff6ff;font-size:15px}
.progress{height:14px;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);margin:10px 0 8px}
.progress>div{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#16e0aa,#ffca2c,#ff941f);transition:width .12s linear}
.horse-box{background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 8px 0 rgba(0,0,0,.33)) drop-shadow(0 0 14px var(--horse-glow,rgba(255,255,255,.2))); will-change:transform, background-image; transform:translateZ(0); backface-visibility:hidden}
.preview-card{display:grid;place-items:center;height:112px;margin:6px 0 0;border-radius:16px;background:rgba(0,0,0,.14);overflow:hidden;border:1px solid rgba(255,255,255,.09)}
.preview-horse{width:100%;height:108px}

/* Jugador: pantalla tipo control, botón enorme y salida protegida por engrane */
.player-panel{
  position:relative;
}
.gear-btn{
  position:absolute;
  right:10px;
  top:10px;
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  font-size:20px;
  font-weight:1000;
  z-index:3;
  box-shadow:none;
}
.gear-btn:active{transform:scale(.96);box-shadow:none}
.exit-panel{
  display:none;
  position:absolute;
  right:10px;
  top:56px;
  z-index:8;
  width:min(250px, calc(100% - 20px));
  border-radius:16px;
  padding:12px;
  background:#111827;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 45px rgba(0,0,0,.45);
}
.exit-panel.show{display:block}
.exit-panel p{margin:0 0 10px;color:#dbeafe;font-size:13px;line-height:1.3}
.exit-panel .btn{width:100%;margin-top:8px;min-height:38px}

.big-advance{
  width:calc(100% + 34px);
  margin-left:-17px;
  margin-right:-17px;
  min-height:250px;
  border-radius:26px;
  font-size:clamp(42px,13vw,66px);
  letter-spacing:-.075em;
  margin-top:10px;
  user-select:none;
}

body.player-mode .page{
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
body.player-mode .mobile-shell{
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
body.player-mode .mobile-shell>.kicker{display:none}
body.player-mode .mobile-shell>.title{font-size:clamp(20px,7vw,30px);line-height:.92;margin:0 0 4px;letter-spacing:-.04em}
body.player-mode .mobile-shell>.subtitle{display:none}
body.player-mode .player-panel{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto auto auto minmax(0,1fr);
  gap:6px;
}
body.player-mode .big-advance{
  height:100%;
  min-height:210px;
}

@media(max-width:520px){
  .page{padding:6px}
  .mobile-shell{width:100%}
  .mobile-shell .title{font-size:clamp(24px,9vw,34px);margin:5px 0 4px}
  .mobile-shell .subtitle{font-size:12px;line-height:1.15;margin-bottom:7px}
  .mobile-shell .panel{padding:10px;border-radius:18px}
  .mobile-shell .kicker{padding:5px 9px;font-size:10px}
  .mobile-shell .grid{gap:8px}
  .mobile-shell .input{padding:10px 11px;border-radius:12px;font-size:15px}
  .mobile-shell .chip{min-height:34px;padding:6px 14px}
  .mobile-shell .player-name{font-size:clamp(20px,7.5vw,27px);line-height:.95;margin:7px 0 2px}
  .mobile-shell .player-stats{font-size:12px;line-height:1.15;margin:2px 0}
  .mobile-shell .progress{height:10px;margin:5px 0 4px}
  .mobile-shell .preview-card{height:72px;margin:2px 0 0;border-radius:13px}
  .mobile-shell .preview-horse{height:70px}
  .mobile-shell .big-advance{
    width:calc(100% + 30px);
    margin-left:-15px;
    margin-right:-15px;
    min-height:230px;
    border-radius:22px;
    font-size:clamp(38px,15vw,58px);
    margin-top:6px
  }
  body.player-mode .big-advance{
    min-height:220px;
  }
  .mobile-shell .btn{min-height:39px;border-radius:13px;padding:9px 11px}
  .gear-btn{width:38px;height:38px;right:9px;top:9px}
}

/* Pantalla pública */
.screen-page{
  height:100vh;height:100dvh;min-height:0;padding:6px;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;
}
.screen-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:0;min-height:0}
.screen-title{margin:0;font-size:clamp(25px,3vw,48px);line-height:.88;letter-spacing:-.05em;text-transform:uppercase;font-weight:1000;white-space:nowrap}
.screen-subtitle{margin:2px 0 0;font-size:clamp(12px,1.1vw,16px);line-height:1.1;color:#d9e4f2}
.screen-status{display:flex;align-items:center;justify-content:flex-end}
.race-board{height:100%;min-height:0!important;display:grid;grid-template-rows:repeat(var(--lanes,1),minmax(0,1fr));gap:4px;overflow:hidden}
.lane{
  position:relative;
  display:grid;
  grid-template-columns:clamp(185px,19vw,330px) 1fr;
  min-height:0!important;
  height:100%;
  border-radius:13px;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.13)
}
.lane.winner{outline:3px solid #ffca2c;box-shadow:0 0 28px rgba(255,202,44,.32)}
.lane-side{
  position:relative;
  z-index:3;
  padding:6px 10px;
  background:linear-gradient(90deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border-right:1px solid rgba(255,255,255,.09);
  overflow:hidden;
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
  justify-items:center;
  text-align:center;
}
.lane-name{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  margin:0;
  font-size:clamp(15px,1.45vw,28px);
  line-height:.98;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:-.032em;
  text-shadow:0 4px 0 rgba(0,0,0,.45);
  white-space:normal;
  overflow:hidden;
  text-overflow:clip;
  text-align:center;
}
.lane-name.name-long{font-size:clamp(12px,1.18vw,21px);letter-spacing:-.02em}
.lane-name.name-xlong{font-size:clamp(10px,1vw,17px);letter-spacing:-.01em}
.lane-meta{
  position:static;
  color:#eaf2ff;
  font-weight:900;
  font-size:clamp(10px,.86vw,13px);
  text-align:center;
  width:100%;
}
.lane-track{position:relative;min-width:0;min-height:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 48px),linear-gradient(90deg,#192536,#111a2a);overflow:hidden}
.lane-track::before{content:"";position:absolute;left:0;right:62px;top:50%;height:7px;transform:translateY(-50%);border-radius:999px;background:rgba(255,255,255,.18);box-shadow:0 1px 0 rgba(255,255,255,.1) inset}
.finish{position:absolute;right:0;top:0;bottom:0;width:54px;display:grid;place-items:center;background:linear-gradient(180deg,#ffdf4b,#ff8a00);color:#07101e;font-size:14px;font-weight:1000;letter-spacing:.04em;text-shadow:none;z-index:2;border-left:3px solid #fff}
.finish::before{content:"";position:absolute;left:-5px;top:0;bottom:0;width:5px;background:#fff}
.horse-pos{position:absolute;top:50%;left:0;z-index:5;transform:translateY(-50%);transition:left .09s linear;width:min(11.8vw,185px);height:100%;display:grid;place-items:center;overflow:visible}
.track-horse{width:100%;height:94%}
.empty{display:grid;place-items:center;min-height:50vh;border-radius:24px;border:1px dashed rgba(255,255,255,.22);color:#dbeafe;text-align:center;padding:24px}
.countdown-number{position:fixed;inset:0;display:none;place-items:center;z-index:50;pointer-events:none;font-size:clamp(110px,20vw,300px);font-weight:1000;color:#ffca2c;text-shadow:0 14px 0 rgba(0,0,0,.4),0 0 60px rgba(255,202,44,.45);background:rgba(0,0,0,.25)}
.countdown-number.show{display:grid}
.winner-banner{position:fixed;right:12px;bottom:12px;z-index:60;display:none;width:min(350px,30vw);text-align:left;border-radius:18px;padding:10px 14px;background:linear-gradient(180deg,#ffe39a,#ff941f);color:#111827;box-shadow:0 18px 55px rgba(0,0,0,.5)}
.winner-banner.show{display:block}
.winner-banner h2{margin:0;font-size:clamp(24px,2.35vw,40px);line-height:.9;text-transform:uppercase;letter-spacing:-.05em}
.winner-banner p{margin:4px 0 0;font-size:clamp(12px,1.05vw,16px);font-weight:900}

/* Admin compacto */
.admin-page{height:100vh;height:100dvh;overflow:hidden;padding:8px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}
.admin-top{display:grid;grid-template-columns:1.2fr auto;gap:10px;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));border:1px solid var(--line);border-radius:20px;padding:10px 12px}
.admin-title{margin:0;font-size:clamp(24px,2.6vw,42px);line-height:.92;letter-spacing:-.045em;text-transform:uppercase;font-weight:1000}
.admin-actions{display:grid;grid-template-columns:repeat(5,auto);gap:8px;align-items:center}
.admin-actions .btn{min-height:38px;padding:8px 12px;border-radius:13px;font-size:12px}
.admin-settings{display:grid;grid-template-columns:105px 105px 105px auto;gap:8px;align-items:end;margin-top:8px}
.admin-settings label{font-size:11px;font-weight:900;color:#eaf2ff}
.admin-settings .input{height:36px;padding:7px 9px;border-radius:10px;font-size:14px}
.admin-players{min-height:0;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:20px;padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}
.admin-players h2{margin:0;font-size:18px}
.admin-list{min-height:0;display:grid;grid-template-rows:repeat(var(--admin-rows,1),minmax(0,1fr));gap:4px;overflow:hidden}
.admin-row{display:grid;grid-template-columns:78px 240px 1fr 58px;gap:10px;align-items:center;min-height:0;border-bottom:1px solid rgba(255,255,255,.08);padding:3px 0}
.admin-row:last-child{border-bottom:0}
.admin-horse{width:76px;height:42px}
.admin-name{font-weight:1000;text-transform:uppercase;font-size:14px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-meta{font-size:11px;color:#cbd5e1;margin-top:2px}
.admin-progress{height:11px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.admin-progress>div{height:100%;width:0%;background:linear-gradient(90deg,#16e0aa,#ffca2c,#ff941f)}
.admin-remove{min-height:32px!important;border-radius:10px!important;padding:5px 8px!important;font-size:10px!important;box-shadow:none!important}
.admin-empty{display:grid;place-items:center;border:1px dashed rgba(255,255,255,.2);border-radius:16px;color:#dbeafe;min-height:160px}

@media(max-width:900px){
  .screen-title{font-size:clamp(24px,7vw,42px);white-space:normal}
  .screen-subtitle{display:none}
  .lane{grid-template-columns:150px 1fr}
  .lane-side{padding:6px}
  .lane-name{font-size:15px}
  .lane-name.name-long{font-size:12px}
  .lane-name.name-xlong{font-size:10px}
  .lane-meta{font-size:10px}
  .finish{width:42px;font-size:11px}
  .lane-track::before{right:50px;height:6px}
  .horse-pos{width:120px}
  .winner-banner{left:8px;right:8px;width:auto;bottom:8px}
  .admin-page{overflow:auto;height:auto}
  .admin-top{grid-template-columns:1fr}
  .admin-actions{grid-template-columns:1fr 1fr}
  .admin-settings{grid-template-columns:1fr}
  .admin-players{overflow:visible}
  .admin-list{display:block;overflow:visible}
  .admin-row{grid-template-columns:70px 1fr;min-height:62px}
  .admin-row .admin-progress{grid-column:1/-1}
  .admin-remove{grid-column:1/-1}
}


/* V10: recuadro de color del jugador en pantalla */
.lane{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.lane-side{
  padding-left:clamp(42px,4.6vw,68px);
  position:relative;
}
.lane-side::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:clamp(30px,3.8vw,56px);
  background:linear-gradient(180deg, var(--player-color,#ff1744), color-mix(in srgb, var(--player-color,#ff1744) 72%, #000));
  border-right:3px solid rgba(0,0,0,.42);
  box-shadow:inset -8px 0 18px rgba(0,0,0,.22), 0 0 22px var(--player-glow,rgba(255,255,255,.18));
}
.lane-name{
  padding:0 6px;
}
@media(max-width:900px){
  .lane-side{
    padding-left:38px;
  }
  .lane-side::before{
    width:30px;
  }
}


/* V11: bloque de color proporcional por jugador en pantalla */
.lane-side{
  padding-left: clamp(62px, 26%, 122px);
}
.lane-side::before{
  width: clamp(50px, 22%, 96px);
  border-right: 4px solid rgba(0,0,0,.34);
  border-radius: 0 26px 26px 0;
  box-shadow: inset -10px 0 18px rgba(0,0,0,.22), 0 0 20px var(--player-glow,rgba(255,255,255,.18));
}
.lane-name{
  justify-content: center;
  text-align: center;
  width: 100%;
}
.lane-meta{
  display:flex;
  justify-content:space-evenly;
  gap:10px;
  align-items:center;
  width:100%;
}
.lane-meta span{white-space:nowrap;}
@media(max-width:900px){
  .lane-side{ padding-left: 44px; }
  .lane-side::before{ width: 34px; border-radius: 0 18px 18px 0; }
  .lane-meta{ gap:6px; font-size:10px; }
}


/* V12: aviso de ganador + fuegos artificiales */
.player-panel{overflow:hidden}
.player-panel::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:12px;
  background:var(--player-color,#16e0aa);
  border-radius:16px 0 0 16px;
  box-shadow:0 0 24px color-mix(in srgb, var(--player-color,#16e0aa) 70%, transparent);
}
.fireworks-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:70;
  display:none;
}
.fireworks-canvas.show{display:block}
.winner-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:80;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(4,10,20,.58);
}
.winner-overlay.show{display:flex}
.winner-card{
  width:min(520px,92vw);
  border-radius:24px;
  padding:22px 20px;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
}
.winner-card h3{margin:0 0 8px;font-size:clamp(28px,8vw,50px);line-height:.9;text-transform:uppercase;letter-spacing:-.05em}
.winner-card p{margin:0 0 12px;font-size:clamp(16px,4vw,22px);font-weight:900;color:#eef6ff}
.winner-card small{display:block;color:#d8e5f4;font-size:13px}
.winner-card.winner-self{background:linear-gradient(180deg,#ffe39a,#ffb33d);color:#111827}
.winner-card.winner-self p,.winner-card.winner-self small{color:#1b2432}
.lane.winner{
  outline:4px solid #ffca2c;
  box-shadow:0 0 36px rgba(255,202,44,.45), inset 0 0 36px rgba(255,202,44,.08);
}
.lane-side::before{
  background:linear-gradient(180deg, var(--player-color,#ff1744), color-mix(in srgb, var(--player-color,#ff1744) 65%, #000));
}
.lane-congrats{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:7;
  min-width:min(80%,560px);
  max-width:86%;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,202,44,.16);
  border:2px solid rgba(255,202,44,.8);
  box-shadow:0 0 26px rgba(255,202,44,.42);
  color:#fff6cf;
  font-weight:1000;
  text-align:center;
  font-size:clamp(14px,1.2vw,22px);
  text-shadow:0 2px 0 rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
}
.lane-congrats strong{color:#fff}


/* V13: refuerzo de visibilidad del carril y corrección de pantalla */
.lane-side::before{
  background: linear-gradient(180deg, var(--player-color,#ff1744), var(--player-color,#ff1744)) !important;
  opacity: .98;
}
.lane.winner .lane-side::before{
  box-shadow: inset -10px 0 18px rgba(0,0,0,.22), 0 0 32px var(--player-glow,rgba(255,255,255,.4));
}


/* V14: pantalla robusta y franja izquierda visible */
.lane-side{
  padding-left: clamp(62px, 26%, 122px) !important;
}
.lane-side::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width: clamp(50px, 22%, 96px) !important;
  background: var(--player-color,#ff1744) !important;
  border-right: 4px solid rgba(0,0,0,.34) !important;
  border-radius: 0 26px 26px 0 !important;
  box-shadow: inset -10px 0 18px rgba(0,0,0,.22), 0 0 20px var(--player-glow,rgba(255,255,255,.18)) !important;
  opacity: .98 !important;
}
.lane-name{
  justify-content:center !important;
  text-align:center !important;
}
.lane-meta{
  display:flex !important;
  justify-content:space-evenly !important;
  align-items:center !important;
  gap:10px !important;
}
.lane-meta span{
  white-space:nowrap;
}
@media(max-width:900px){
  .lane-side{
    padding-left:44px !important;
  }
  .lane-side::before{
    width:34px !important;
    border-radius:0 18px 18px 0 !important;
  }
}


/* V15: selector y modo Circuito */
.admin-settings{
  grid-template-columns:105px 105px 105px 140px auto !important;
}
@media(max-width:900px){
  .admin-settings{ grid-template-columns:1fr !important; }
}

.race-board.circuit-mode{
  display:block !important;
  height:100%;
  min-height:0 !important;
  overflow:hidden;
}

.circuit-wrap{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at center,rgba(22,224,170,.10),transparent 40%),
    linear-gradient(180deg,#102037,#08111f);
  box-shadow:inset 0 0 60px rgba(0,0,0,.25);
}

.circuit-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

.circuit-guide{
  fill:none;
  stroke:rgba(255,255,255,.10);
  stroke-width:46;
  stroke-linecap:round;
}

.circuit-path{
  fill:none;
  stroke-width:7;
  stroke-linecap:round;
  opacity:.88;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.08));
}

.circuit-finish{
  stroke:#fff;
  stroke-width:8;
  stroke-dasharray:16 10;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.4));
}

.circuit-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(36vw,440px);
  max-width:46%;
  aspect-ratio:16/9;
  border-radius:26px;
  display:grid;
  place-items:center;
  text-align:center;
  z-index:2;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}

.circuit-center h2{
  margin:0;
  font-size:clamp(28px,4vw,66px);
  line-height:.86;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.circuit-center p{
  margin:8px 0 0;
  color:#dbeafe;
  font-weight:900;
  font-size:clamp(12px,1.3vw,20px);
}

.circuit-labels{
  position:absolute;
  left:12px;
  top:12px;
  bottom:12px;
  width:min(250px,22vw);
  z-index:4;
  display:grid;
  grid-template-rows:repeat(var(--lanes,1), minmax(0,1fr));
  gap:4px;
  pointer-events:none;
}

.circuit-label{
  min-height:0;
  display:grid;
  grid-template-columns:16px 1fr;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:12px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

.circuit-label-color{
  width:16px;
  height:100%;
  min-height:18px;
  border-radius:999px;
  background:var(--player-color,#ff1744);
  box-shadow:0 0 14px var(--player-glow,rgba(255,255,255,.25));
}

.circuit-label-name{
  font-size:clamp(10px,1vw,15px);
  font-weight:1000;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.circuit-horse-pos{
  position:absolute;
  z-index:5;
  width:clamp(62px,6.2vw,108px);
  height:clamp(40px,4vw,68px);
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  pointer-events:none;
  transition:left .09s linear, top .09s linear;
}

.circuit-horse{
  width:100%;
  height:100%;
}

.circuit-congrats{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:15;
  display:none;
  min-width:min(700px,70%);
  max-width:86%;
  padding:12px 22px;
  border-radius:999px;
  background:rgba(255,202,44,.17);
  border:2px solid rgba(255,202,44,.8);
  box-shadow:0 0 28px rgba(255,202,44,.42);
  color:#fff6cf;
  font-weight:1000;
  text-align:center;
  font-size:clamp(16px,1.8vw,30px);
  text-shadow:0 2px 0 rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
}

.circuit-congrats.show{ display:block; }

@media(max-width:900px){
  .circuit-labels{
    width:138px;
    left:6px;
    top:6px;
    bottom:6px;
  }

  .circuit-label{
    grid-template-columns:10px 1fr;
    gap:5px;
    padding:3px 5px;
  }

  .circuit-label-name{ font-size:10px; }

  .circuit-horse-pos{
    width:64px;
    height:42px;
  }

  .circuit-center{ display:none; }
}


/* V18: textos de salida en celulares */
.big-advance{
  line-height:.9;
  text-align:center;
  white-space:normal;
}
.countdown-number{
  text-align:center;
  line-height:.9;
  padding:0 4vw;
  font-size:clamp(62px,12vw,190px) !important;
}


/* V20: botones discretos de sonidos en admin */
.admin-sound-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  margin-top:8px;
}

.admin-sound-actions button{
  min-height:28px;
  border-radius:10px;
  padding:5px 8px;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#eaf2ff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:none;
}

.admin-sound-actions button:hover{
  background:rgba(255,255,255,.16);
}

.mobile-sounds{
  justify-content:center;
  margin-top:12px;
}

@media(max-width:900px){
  .admin-sound-actions{
    justify-content:center;
  }
}