:root {
  --web-black: #050407;
  --web-panel: #0b0a0e;
  --web-pink: #e86fa4;
  --web-violet: #b14fe0;
  --web-green: #31d67a;
  --web-amber: #c9a227;
  --web-line: #2a2140;
  --web-mono: "MS Gothic", Fixedsys, "Lucida Console", "Courier New", monospace;
  --web-arte: Fixedsys, "Lucida Console", "Courier New", monospace;
}
* { box-sizing: border-box; border-radius: 0 !important; }
html { min-height: 100%; background: var(--web-black); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--web-pink);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, var(--web-panel) 3px 4px),
    radial-gradient(circle at 50% -20%, #2a2140 0, var(--web-black) 48%);
  font: 16px/1.45 var(--web-mono);
}
.arte { font-family: var(--web-arte); }
.mesa { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 40px; }
.cabecera { border-left: 8px solid var(--web-violet); padding: 4px 18px 12px; margin-bottom: 22px; }
.cabecera__marca { margin: 0; color: var(--web-green); font-size: 12px; letter-spacing: .08em; }
h1 { margin: 3px 0 0; color: var(--web-pink); font-size: clamp(32px, 7vw, 74px); line-height: .92; letter-spacing: -.06em; }
.cabecera p:last-child { margin: 8px 0 0; color: var(--web-violet); }
.maquina {
  position: relative;
  max-width: 820px;
  margin: 0 auto 24px;
  padding: 12px 30px 18px;
  color: var(--web-pink);
  background: var(--web-panel);
  border: 3px solid var(--web-pink);
  box-shadow: 8px 8px 0 var(--web-violet), 14px 14px 0 var(--web-line);
}
.maquina__barra { overflow: hidden; color: var(--web-amber); text-align: center; white-space: nowrap; }
.maquina__titulo, .panel__titulo { display: flex; justify-content: space-between; gap: 12px; margin: 7px 0; color: var(--web-black); background: var(--web-pink); font-weight: 800; padding: 4px 8px; }
.tambor {
  position: relative;
  overflow: hidden;
  height: 250px;
  padding: 10px 54px;
  border: 2px solid var(--web-violet);
  background: repeating-linear-gradient(90deg, var(--web-panel) 0 9px, var(--web-black) 9px 10px);
}
.tambor::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--web-panel), transparent 26%, transparent 74%, var(--web-panel)); }
.tambor__fila {
  height: 46px;
  overflow: hidden;
  color: var(--web-violet);
  border-bottom: 1px dashed var(--web-line);
  font-size: clamp(15px, 3vw, 25px);
  line-height: 45px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tambor__fila--centro { color: var(--web-amber); background: var(--web-black); border: 1px solid var(--web-amber); font-weight: 800; }
.puntero { position: absolute; z-index: 2; top: 106px; left: 14px; color: var(--web-green); font-size: 26px; line-height: 1; }
.puntero--derecha { right: 14px; left: auto; }
.resultado { min-height: 35px; margin: 8px 0 0; color: var(--web-green); font-size: clamp(18px, 4vw, 30px); font-weight: 800; text-align: center; }
.luces { overflow: hidden; margin-top: 9px; color: var(--web-amber); text-align: center; white-space: nowrap; }
[data-girando="si"] .luces { animation: luces 300ms steps(2, end) infinite; }
[data-fase="casi"] .tambor__fila--centro { color: var(--web-pink); border-color: var(--web-pink); animation: alarma 180ms steps(2, end) infinite; }
[data-fase="rebote"] { transform: translateY(2px); }
[data-fase="listo"] .tambor__fila--centro { color: var(--web-green); border-color: var(--web-green); background: var(--web-black); }
.panel { margin-top: 22px; padding: 14px; border: 2px solid var(--web-line); background: var(--web-panel); box-shadow: 5px 5px 0 var(--web-line); }
.panel__titulo { margin: -14px -14px 14px; background: var(--web-violet); }
.panel__titulo h2 { margin: 0; font: inherit; }
.panel__titulo span { font-size: 12px; }
.configuracion { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
label, legend { color: var(--web-violet); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
input, select, button { border: 2px solid var(--web-violet); color: var(--web-pink); background: var(--web-black); font: inherit; }
input, select { width: 100%; margin-top: 4px; padding: 8px; }
fieldset { margin: 16px 0; padding: 10px; border: 1px solid var(--web-line); }
.candidato { display: grid; grid-template-columns: minmax(180px, 1fr) 130px 82px; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px dashed var(--web-line); }
.candidato__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidato input[type="number"] { margin: 0; padding: 5px; }
.candidato__gana { color: var(--web-amber); }
.candidato__gana input { width: auto; accent-color: var(--web-amber); }
button { width: 100%; padding: 12px; border-color: var(--web-green); color: var(--web-green); font-weight: 800; cursor: pointer; box-shadow: 4px 4px 0 var(--web-green); }
button:hover, button:focus-visible { color: var(--web-black); background: var(--web-green); outline: 2px solid var(--web-pink); outline-offset: 3px; }
button:disabled { opacity: .45; cursor: wait; }
.tajada { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(180px, 2fr) 145px; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px dashed var(--web-line); }
.tajada__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tajada__barra { overflow: hidden; color: var(--web-green); letter-spacing: -1px; white-space: nowrap; }
.tajada__numero { color: var(--web-amber); text-align: right; }
.pie { overflow: hidden; margin-top: 26px; color: var(--web-violet); font-size: 12px; text-align: center; white-space: nowrap; }
@keyframes luces { 50% { color: var(--web-pink); } }
@keyframes alarma { 50% { background: var(--web-violet); color: var(--web-black); } }
@media (max-width: 620px) {
  .mesa { width: min(100% - 14px, 1120px); padding-top: 14px; }
  .maquina { padding: 8px 10px 14px; box-shadow: 4px 4px 0 var(--web-violet); }
  .maquina__barra { font-size: 11px; }
  .tambor { height: 210px; padding: 10px 32px; }
  .tambor__fila { height: 38px; line-height: 37px; }
  .puntero { top: 91px; left: 7px; }
  .puntero--derecha { right: 7px; left: auto; }
  .configuracion { grid-template-columns: 1fr; }
  .candidato { grid-template-columns: 1fr 88px 68px; gap: 7px; font-size: 12px; }
  .tajada { grid-template-columns: 1fr 100px; }
  .tajada__barra { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}