body{
  font-family: Arial, sans-serif;
  background:#173e8f;
  color:white;
  text-align:center;
  margin:0;
  padding:0;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:30px 20px 60px;
}

h1{
  margin-top:20px;
  font-size:56px;
  font-weight:800;
}

h2{
  font-size:22px;
  margin-bottom:20px;
}

.numero{
  font-size:110px;
  margin:25px 0 10px;
  font-weight:700;
}

.letra{
  font-size:70px;
  font-weight:800;
  margin-top:10px;
}

button{
  padding:15px 28px;
  font-size:20px;
  background:gold;
  border:none;
  border-radius:12px;
  cursor:pointer;
  margin:8px;
  font-weight:700;
}

button:hover{
  opacity:.95;
}

.cartones{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
  margin:30px auto;
  max-width:900px;
}

.carton{
  background:white;
  color:#111;
  padding:22px 10px;
  cursor:pointer;
  border-radius:14px;
  font-size:22px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.carton:hover{
  transform:translateY(-2px);
}

.panel{
  background:rgba(255,255,255,.1);
  border-radius:18px;
  padding:20px;
  margin:20px auto;
  max-width:900px;
}

.historial{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:25px;
}

.columna{
  background:rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
}

.columna h3{
  margin:0 0 10px;
  font-size:28px;
}

.lista{
  min-height:80px;
  font-size:18px;
  line-height:1.8;
  word-wrap:break-word;
}

.info{
  font-size:20px;
  margin-top:12px;
}

.nombreJugador{
  font-size:28px;
  font-weight:700;
  margin:15px 0;
}

.hidden{
  display:none;
}

@media (max-width:768px){
  h1{font-size:40px;}
  .numero{font-size:82px;}
  .letra{font-size:52px;}
  .historial{grid-template-columns:1fr;}
}