*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#120b10;overflow:hidden;-webkit-tap-highlight-color:transparent}
body{
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  color:#f6efe4;
  display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;
}
#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center}

.stage{
  position:relative;
  width:min(100vw, calc(100vh * 16 / 9));
  height:min(100vh, calc(100vw * 9 / 16));
  background:#1a1016;
  overflow:hidden;
}
#cv{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* ---------- pantallas ---------- */
.screen{
  position:absolute;inset:0;
  display:none;
  align-items:center;justify-content:center;
  padding:3%;
  background:rgba(18,11,16,.9);
  z-index:5;
}
.screen.active{display:flex}

.panel{
  width:100%;max-width:min(78ch, 94%);
  text-align:center;
  border:2px solid #c1121f;
  background:#160e14;
  padding:clamp(12px,3vh,28px) clamp(14px,3vw,34px);
}
.panel-pin{max-width:min(44ch,92%)}

.kicker{
  font-size:clamp(8px,1.5vh,12px);
  letter-spacing:.28em;text-transform:uppercase;
  color:#e8a33d;margin-bottom:.7em;
}
h1{
  font-size:clamp(28px,8vh,70px);
  letter-spacing:.06em;line-height:.95;
  color:#f6efe4;font-weight:800;
}
h2{
  font-size:clamp(18px,4.8vh,40px);
  letter-spacing:.05em;line-height:1;
  color:#e8a33d;font-weight:800;margin-bottom:.35em;
}
.pin-h{color:#f6efe4;font-size:clamp(16px,3.6vh,28px)}
.lead{
  font-size:clamp(10px,2vh,15px);
  line-height:1.55;color:#cbbcb4;
  margin:.8em auto 0;max-width:62ch;
}
.lead b{color:#f6efe4}
.legal{
  font-size:clamp(7px,1.4vh,11px);
  line-height:1.5;color:#8c7c80;
  margin-top:1.1em;border-top:1px solid #33222c;padding-top:.8em;
}
.legal b{color:#c1121f}

.btn{
  margin-top:1.2em;
  font-family:inherit;font-weight:800;
  font-size:clamp(12px,2.4vh,19px);
  letter-spacing:.18em;
  color:#160e14;background:#e8a33d;
  border:0;padding:.62em 2.2em;cursor:pointer;
}
.btn:hover,.btn:focus-visible{background:#f6efe4;outline:0}
.btn:active{transform:translateY(1px)}

/* ---------- PIN ---------- */
.dots{display:flex;gap:.8em;justify-content:center;margin:1em 0 .3em}
.dot{
  width:clamp(9px,1.8vh,14px);height:clamp(9px,1.8vh,14px);
  border:2px solid #6b4a55;background:transparent;display:block;
}
.dot.on{background:#e8a33d;border-color:#e8a33d}
.pin-msg{min-height:1.3em;font-size:clamp(8px,1.5vh,12px);color:#c1121f;letter-spacing:.1em}
.pad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(4px,1vh,9px);
  max-width:min(260px,62vh);margin:.4em auto 0;
}
.pad button{
  font-family:inherit;font-weight:700;
  font-size:clamp(13px,2.6vh,20px);
  color:#f6efe4;background:#241720;border:2px solid #3d2a34;
  padding:clamp(6px,1.5vh,12px) 0;cursor:pointer;
}
.pad button:hover,.pad button:focus-visible{border-color:#e8a33d;outline:0}
.pad button:active{background:#c1121f;color:#160e14}
.pad .del{color:#8c7c80}
.pad.mal button{border-color:#c1121f}

/* ---------- roster ---------- */
.roster{display:flex;gap:clamp(10px,3vw,34px);justify-content:center;margin-top:.8em}
.card{
  font-family:inherit;cursor:pointer;
  background:#241720;border:2px solid #3d2a34;
  padding:clamp(5px,1.4vh,12px) clamp(8px,2vw,20px);
  display:flex;flex-direction:column;align-items:center;gap:.45em;
  color:#cbbcb4;
}
.card:hover,.card:focus-visible{border-color:#e8a33d;color:#f6efe4;outline:0}
.card .mini{
  width:auto;height:clamp(58px,16vh,130px);
  image-rendering:pixelated;
}
.card .nom{font-size:clamp(8px,1.6vh,13px);letter-spacing:.14em;font-weight:800}
.card .club{font-size:clamp(7px,1.3vh,10px);letter-spacing:.2em;color:#e8a33d}

.resumen{
  list-style:none;margin:1em auto 0;
  display:flex;flex-wrap:wrap;gap:.4em clamp(10px,3vw,28px);justify-content:center;
  font-size:clamp(9px,1.8vh,14px);color:#cbbcb4;
}
.resumen b{color:#e8a33d}

/* ---------- controles táctiles ---------- */
.touch{
  position:absolute;left:0;right:0;bottom:0;
  display:none;gap:2px;z-index:4;
}
.touch.on{display:flex}
.tbtn{
  flex:1;font-family:inherit;font-weight:800;
  font-size:clamp(9px,2vh,14px);letter-spacing:.14em;
  color:#f6efe4;background:rgba(22,14,20,.66);
  border:0;border-top:2px solid #3d2a34;
  padding:.9em 0;cursor:pointer;
}
.tbtn:active{background:#c1121f;color:#160e14}
.tbtn-sell{border-top-color:#e8a33d;color:#e8a33d}