:root{
  --club-blue:#1f6feb;
  --club-blue2:#2b8cff;
  --club-orange:#ff8a00;
  --club-orange2:#ffb000;
  --club-ink:#0b1220;
  --club-card:#ffffff;
  --club-border:#e7e7e7;
}

.club-ruleta { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 980px){ .club-ruleta { grid-template-columns: 1.25fr 0.75fr; } }

.club-card {
  background: var(--club-card);
  border: 1px solid var(--club-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 26px rgba(11,18,32,0.08);
}

.club-header { display:flex; justify-content:space-between; gap: 16px; align-items:flex-start; }
.club-header-left{ max-width: 720px; }
.club-header h3 { margin: 0 0 8px 0; font-size: 18px; letter-spacing: .2px; }
.club-sub { margin: 0; color:#556; font-size: 13px; line-height:1.5; }

.club-timer{
  text-align:right;
  background: radial-gradient(120px 80px at 30% 20%, rgba(43,140,255,.35), transparent 60%),
              linear-gradient(180deg, #0f1a2f, #070d18);
  color: #e8f0ff;
  padding: 12px 14px;
  border-radius: 14px;
  min-width: 140px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 22px rgba(11,18,32,0.35);
}
.club-timer span { display:block; font-size:12px; color: rgba(232,240,255,0.8); }
.club-timer strong { font-size: 20px; letter-spacing: 1px; }
.club-timer-hot{
  border-color: rgba(255,138,0,0.55) !important;
  box-shadow: 0 0 0 3px rgba(255,138,0,0.18), 0 10px 22px rgba(11,18,32,0.35) !important;
}

.club-row { margin-top: 12px; }
.club-row label { display:block; font-weight:800; margin-bottom: 6px; color:#121826; }
.club-row input[type="email"], .club-row input[type="text"] {
  width:100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid #d7dbe6;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.club-row input[type="email"]:focus, .club-row input[type="text"]:focus{
  border-color: rgba(31,111,235,.55);
  box-shadow: 0 0 0 3px rgba(31,111,235,.12);
}
.club-row input:disabled { background:#f4f5f7; }
.club-muted { display:block; margin-top: 6px; font-size: 12px; color:#6b7280; }

.club-consent{ margin-top: 10px; }
.club-consent-label{
  display:flex; gap:10px; align-items:flex-start;
  font-size: 13px; color:#111827;
  background:#f7f8fb;
  border:1px solid #e7eaf3;
  padding:10px 12px;
  border-radius: 12px;
}
.club-consent-label input{ margin-top: 2px; }

.club-meta { display:flex; flex-wrap:wrap; gap: 8px; }
.club-chip {
  background:#f2f6ff;
  border:1px solid #d8e4ff;
  color:#234;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.club-chip-dark{
  background:#111827;
  border-color:#111827;
  color:#e8f0ff;
}

.club-actions { display:flex; gap: 10px; align-items:center; }

.club-btn{
  border: 0;
  padding: 11px 14px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:900;
  letter-spacing: .2px;
  transition: transform .06s ease, box-shadow .15s ease, opacity .15s ease;
}
.club-btn:active{ transform: translateY(1px); }
.club-btn:disabled { opacity: .55; cursor:not-allowed; }

/* Botón primario azul */
.club-btn-primary{
  color:#fff;
  background: linear-gradient(180deg, var(--club-blue2), var(--club-blue));
  box-shadow: 0 10px 18px rgba(31,111,235,.22);
}
.club-btn-primary:hover{ box-shadow: 0 12px 22px rgba(31,111,235,.28); }

/* Ghost (reiniciar) */
.club-btn-ghost{
  color:#111827;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
}

/* Botón acción alternativo (naranja) por si lo quieres para "Enviar solución" */
.club-btn-accent{
  color:#1a1205;
  background: linear-gradient(180deg, var(--club-orange2), var(--club-orange));
  box-shadow: 0 10px 18px rgba(255,138,0,.22);
}
.club-btn-accent:hover{ box-shadow: 0 12px 22px rgba(255,138,0,.28); }

.club-panel-wrap { margin-top: 14px; }

/* ===== PANEL TIPO CASILLAS, SIN SCROLL ===== */
.club-panel{
  --tile-w: 40;
  --tile-h: 46;
  --tile-font: 20;
  --tile-gap: 6;
  --word-gap: 18;

  background:
    radial-gradient(420px 220px at 30% 10%, rgba(255,232,106,.10), transparent 60%),
    radial-gradient(360px 220px at 80% 40%, rgba(43,140,255,.14), transparent 60%),
    linear-gradient(180deg, #0c1427, #070d18);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 28px rgba(11,18,32,0.25);
  overflow: hidden;
}

.club-panel-grid{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.club-word{
  display: inline-flex;
  gap: calc(var(--tile-gap) * 1px);
  align-items: center;
  white-space: nowrap;
}

.club-tile{
  width: calc(var(--tile-w) * 1px);
  height: calc(var(--tile-h) * 1px);
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-weight: 1000;
  font-size: calc(var(--tile-font) * 1px);
  letter-spacing: 1px;
  user-select: none;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22), 0 10px 18px rgba(0,0,0,0.18);
}

.club-hidden{
  background: linear-gradient(180deg, #d7d9de, #bfc3cc);
  border: 1px solid #aeb4c2;
  color: transparent;
}
.club-revealed{
  background: linear-gradient(180deg, #fff0a2, #ffe86a);
  border: 1px solid rgba(255,232,106,.65);
  color: #121212;
}
.club-given{
  background: linear-gradient(180deg, #e2eeff, #cfe3ff);
  border: 1px solid rgba(169,200,255,.8);
  color: #0b1220;
}

.club-gap{
  width: calc(var(--word-gap) * 1px);
  height: calc(var(--tile-h) * 1px);
  display:inline-block;
  flex: 0 0 auto;
}

.club-panel-empty{
  color: rgba(232,240,255,0.9);
  font-size: 14px;
}

/* Picks */
.club-pick-box{
  background:#fafafa;
  border:1px solid #eee;
  border-radius: 16px;
  padding: 12px;
}
.club-pick-title{ font-weight:1000; margin-bottom: 10px; color:#111827; }
.club-pick-ui{ display:flex; flex-wrap:wrap; gap: 6px; margin-bottom: 10px; }

.club-letter{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  font-weight:900;
  transition: transform .06s ease, box-shadow .15s ease;
}
.club-letter:hover{ box-shadow: 0 8px 14px rgba(17,24,39,0.08); }
.club-letter:active{ transform: translateY(1px); }
.club-letter-auto{
  background:#e8f5e9;
  border-color:#b7e2bb;
  color:#145a1a;
  cursor:not-allowed;
}
.club-letter-picked{
  background:#fff3cd;
  border-color:#ffe69c;
  color:#6b4b00;
  cursor:not-allowed;
}
.club-picked-info{ width:100%; margin-top: 8px; font-size: 12px; color:#6b7280; }

/* Result top */
.club-result{
  margin-top: 10px;
  font-weight:900;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.club-result-top{
  margin-top: 0;
}
.club-good{
  color:#145a1a;
  background:#eaf7ee;
  border-color:#bfe6c8;
}
.club-bad{
  color:#8a1c1c;
  background:#fdecec;
  border-color:#f6bcbc;
}
.club-warn{
  color:#7a5d00;
  background:#fff7df;
  border-color:#ffe29a;
}
.club-info{
  color:#0b3a72;
  background:#e9f2ff;
  border-color:#b8d5ff;
}

/* Leaderboard */
.club-leaderboard { margin-top: 10px; }
.club-rowline{
  display:grid;
  grid-template-columns: 52px 1fr 90px 70px;
  gap: 10px;
  align-items:center;
  padding: 10px 8px;
  border-bottom: 1px solid #eee;
}
.club-rank{ font-weight:1000; color:#111827; }
.club-player{ color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-score{ font-weight:1000; text-align:right; }
.club-time{ color:#6b7280; text-align:right; }