:root{
  --bg: #f7f9fc;
  --bg-grad-a: #f7f9fc;
  --bg-grad-b: #eef3ff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #3b82f6;
  --primary-600:#2563eb;
  --border: #e5e7eb;
  --danger: #ef4444;
  --success: #16a34a;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, .07);
  --win: #22c55e;
  --lose: #ef4444;
  --gold: #fbbf24;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--text);
  background: linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b));
  position: relative;
}

.wrap{ min-height:100dvh; display:grid; place-items:center; padding:24px; }
.app{position:relative; }

/* Navegación principal */
.main-nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
.nav-brand h1{ margin:0; font-size:20px; color: var(--primary); }
.nav-links{ display:flex; gap:8px; }
.nav-link{
  background:none; border:1px solid var(--border); padding:8px 16px; border-radius:8px;
  cursor:pointer; font-size:14px; transition: all 0.2s ease; color:var(--text);
}
.nav-link:hover{ background: var(--primary); color:#fff; border-color: var(--primary); }
.nav-link.active{ background: var(--primary); color:#fff; border-color: var(--primary); }

.screen{
  display:none; padding:24px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  position:relative; overflow:hidden; margin-top: 80px;
}
.screen.active{ display:block; }

.title{ margin:0 0 16px; font-size: clamp(28px, 3.5vw, 42px); text-align:center; }
.subtitle{ margin:0 0 12px; font-size: clamp(20px, 2.6vw, 28px); text-align:center; }

.btn-group{ display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; margin-top:12px; }
.btn{
  appearance:none; border:1px solid var(--border); background:#fff; color:var(--text);
  padding:12px 18px; border-radius:999px; font-size:16px; cursor:pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 3px 10px rgba(15,23,42,.04); min-width: 240px;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn.primary{ background:var(--primary); color:#fff; border-color: transparent; }
.btn.primary:hover{ background:var(--primary-600); }
.btn.secondary{ background: var(--success); color:#fff; border-color: transparent; }
.btn.secondary:hover{ background:#15803d; }
.btn.outline{ background:#fff; border:1px dashed var(--border); color:var(--muted); }
.btn.small{ min-width:auto; padding:8px 12px; font-size:14px; }

.hint{ margin:16px 0 0; text-align:center; color:var(--muted); font-size:14px; }

/* Selector de dificultad */
.difficulty-selector{ margin:24px 0 0; text-align:center; }
.difficulty-selector h3{ margin:0 0 16px; color:var(--text); font-size:18px; }
.difficulty-options{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:12px; margin:0 auto; max-width:600px;
}
.difficulty-option{ cursor:pointer; }
.difficulty-option input[type="radio"]{ display:none; }
.difficulty-card{
  padding:16px; border:2px solid var(--border); border-radius:12px; background: var(--card);
  transition: all 0.2s ease; text-align:left;
}
.difficulty-card:hover{ border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.difficulty-option input[type="radio"]:checked + .difficulty-card{
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color:white;
}
.difficulty-card h4{ margin:0 0 8px; font-size:16px; font-weight:600; }
.difficulty-card p{ margin:4px 0; font-size:13px; opacity:0.9; }

/* setup */
.setup-form{ max-width:520px; margin: 12px auto 0; display:flex; flex-direction:column; gap:12px; }
.input{ width:100%; padding:14px 16px; border:1px solid var(--border); border-radius:12px; font-size:16px; }
.row.gap{ display:flex; align-items:center; gap:10px; }
.checkbox{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.error{ color:var(--danger); min-height: 1.2em; text-align:center; }

/* topbar */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; }
.status{ color:var(--muted); white-space:nowrap; }

.hints-area{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border);
  border-radius:999px; padding:8px 12px; background:#fff; cursor:pointer; box-shadow: 0 3px 10px rgba(15,23,42,.04);
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn.disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.icon-btn.insufficient-points{ animation: shake 0.5s ease-in-out; }
.hint-count{ font-size:12px; color:var(--muted); }
.hint-cost{ font-size:11px; color:var(--gold); font-weight:600; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }

.hint-chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hint-chip{ border:1px solid var(--border); background:#fff; border-radius:999px; padding:6px 10px; font-size:12px; cursor:pointer; box-shadow: 0 2px 6px rgba(15,23,42,.04); }
.hint-chip:hover{ background:#f8fafc; }

.scorebox{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.scorebox .sep{ opacity:.4; }

/* layout */
.game-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:20px; }
@media (max-width: 880px){ .game-grid{ grid-template-columns: 1fr; } }

.gallows{ background:#fafbff; border:1px solid var(--border); border-radius:12px; display:grid; place-items:center; padding:12px; }
.hangman{ width:min(100%, 420px); height:auto; stroke:#0f172a; stroke-width:4; fill:none; }
.base{ stroke:#cbd5e1; }
.post,.beam,.rope{ stroke:#94a3b8; }
.part{ opacity:0; transition: opacity .2s ease; }
.part.visible{ opacity:1; }

.board{ display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; }
.word{ display:flex; gap:10px; font-size: clamp(26px, 4vw, 40px); letter-spacing:.06em; justify-content:center; flex-wrap:wrap; }
.word .slot{ display:inline-flex; min-width:26px; padding:4px 2px; border-bottom:3px solid #cbd5e1; align-items:center; justify-content:center; text-transform:uppercase; }

/* teclado QWERTY */
.used{ min-height:1.2em; color:var(--muted); font-size:14px; }
.keyboard{ display:flex; flex-direction:column; gap:8px; width:100%; }
.keyboard-row{ display:flex; justify-content:center; gap:6px; width:100%; }
.keyboard-row[data-row="1"]{ padding-left: 18px; }
.keyboard-row[data-row="2"]{ padding-left: 36px; }
@media (max-width: 520px){
  .keyboard-row[data-row="1"]{ padding-left: 8px; }
  .keyboard-row[data-row="2"]{ padding-left: 16px; }
}
.key{
  padding:10px 0; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer;
  text-transform:uppercase; font-weight:600; user-select:none; transition: background .15s ease, transform .05s ease, border-color .15s ease;
  min-width: 32px; flex: 0 0 32px; text-align:center;
}
@media (min-width: 560px){ .key{ min-width: 38px; flex-basis: 38px; } }
.key:hover{ background:#f8fafc; transform: translateY(-1px); }
.key:active{ transform: translateY(0); }
.key[disabled]{ background:#f1f5f9; color:#94a3b8; cursor:not-allowed; }

/* modal */
.modal{ width:min(560px, 92%); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:var(--shadow); }
.modal::backdrop{ background: rgba(15,23,42,.45); }
.result-title{ margin:0 0 6px; text-align:center; }
.result-msg{ margin:0 0 16px; color:var(--muted); text-align:center; }
.result-sub{ margin:6px 0 8px; color:var(--muted); text-align:center; }
.result-points{ text-align:center; font-weight:600; margin:6px 0 10px; }

/* estrellas */
.stars{ display:flex; gap:8px; justify-content:center; margin:8px 0 4px; }
.star{ fill:#e5e7eb; opacity:0; transform: translateY(8px) scale(.9); }
.star.filled{ fill:var(--gold); }
.star.bounce-in{ animation: starIn .4s var(--delay, 0ms) ease-out forwards; }
@keyframes starIn{ 0%{opacity:0; transform: translateY(8px) scale(.9);} 60%{opacity:1; transform: translateY(-4px) scale(1.05);} 100%{opacity:1; transform: translateY(0) scale(1);} }

/* FIN: animaciones */
@keyframes winPulse { 0%{transform:scale(1); box-shadow:0 0 0 rgba(34,197,94,0);} 30%{transform:scale(1.04); box-shadow:0 0 0 10px rgba(34,197,94,.12);} 60%{transform:scale(1.02); box-shadow:0 0 0 6px rgba(34,197,94,.10);} 100%{transform:scale(1); box-shadow:0 0 0 rgba(34,197,94,0);} }
@keyframes loseShake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);} }

.screen.state-win .word { animation: winPulse .95s ease; border-radius:14px; }
.screen.state-win .word .slot{ border-bottom-color: var(--win); color: var(--win); filter: drop-shadow(0 2px 0 rgba(34,197,94,.18)); }

.screen.state-lose .hangman { animation: loseShake .6s ease; }
.screen.state-lose .part.visible{ stroke: var(--lose); }
.screen.state-lose .rope{ stroke: var(--lose); }

/* confetti canvas */
.confetti{ position:absolute; inset:0; pointer-events:none; }

/* Pantallas de Historia y Configuración */
.history-content, .settings-content{ max-width: 880px; margin: 0 auto; }
.history-section, .setting-group{ margin: 24px 0; padding: 20px; background: var(--bg); border-radius: 12px; border: 1px solid var(--border); }
.history-section h3, .setting-group h3{ margin: 0 0 12px; color: var(--primary); font-size: 18px; }
.history-section p{ margin: 8px 0; line-height: 1.6; }
.history-section ul{ margin: 12px 0; padding-left: 20px; }
.history-section li{ margin: 6px 0; }

/* Controles de personalización (colores) */
.grid2{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.form-field{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
.form-field input[type="color"]{ width:100%; height:42px; padding:0; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.preset-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.chip{ padding:8px 12px; border:1px solid var(--border); background:var(--card); border-radius:999px; cursor:pointer; font-size:13px; }
.chip:hover{ border-color: var(--primary); }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.sep-line{ border:none; height:1px; background:var(--border); margin:12px 0; }

/* Selector de tema */
.theme-selector{ display:flex; gap:12px; margin:12px 0; }
.theme-option{ cursor:pointer; }
.theme-option input[type="radio"]{ display:none; }
.theme-card{ display:flex; align-items:center; gap:8px; padding:12px 16px; border: 2px solid var(--border); border-radius: 8px; transition: all 0.2s ease; }
.theme-card:hover{ border-color: var(--primary); }
.theme-option input[type="radio"]:checked + .theme-card{ border-color: var(--primary); background: var(--primary); color: white; }
.theme-icon{ font-size: 18px; }
.theme-name{ font-weight: 500; }

/* Estadísticas */
.stats-display{ display: grid; gap: 12px; }
.stat-item{ display:flex; justify-content:space-between; align-items:center; padding:12px; background: var(--card); border-radius:8px; border:1px solid var(--border); }
.stat-label{ font-weight: 500; }
.stat-value{ font-weight: 600; color: var(--primary); }

/* Tema oscuro */
body.dark-theme{
  --bg: #0f172a;
  --bg-grad-a: #0f172a;
  --bg-grad-b: #1e293b;
  --card: #1e293b;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --border: #334155;
}
body.dark-theme .main-nav{ background:#1e293b; border-bottom-color:#334155; }
body.dark-theme .btn{ background:#1e293b; border:1px solid #475569; color:#f1f5f9; }
body.dark-theme .btn:hover{ background:#334155; color:#f1f5f9; border-color:#64748b; }
body.dark-theme .btn.primary{ background: var(--primary); color:#fff; border-color:transparent; }
body.dark-theme .btn.primary:hover{ background: var(--primary-600); }
body.dark-theme .btn.outline{ background:#1e293b; border:1px dashed #64748b; color:#cbd5e1; }
body.dark-theme .btn.outline:hover{ background:#334155; color:#f1f5f9; border-color:#94a3b8; }
body.dark-theme .btn.outline:disabled{ background:#1e293b; color:#64748b; border-color:#475569; }
body.dark-theme .btn[disabled]{ background:#1e293b; color:#64748b; border-color:#475569; }

/* accesibilidad */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Navbar simple */
nav.navbar { width:100%; background: var(--card, #f0f2f7); display:flex; justify-content:center; align-items:center; padding: .5rem 1rem; gap: 1.5rem; box-shadow: 0 2px 6px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; }
nav.navbar a { text-decoration:none; color: var(--text, #222); font-weight:600; transition: color .2s ease; }
nav.navbar a:hover { color: #0077ff; }
nav.navbar a.active { color: #0077ff; text-decoration: underline; }