@import '../../shared/css/base.css';

:root {
  --lv-yellow: #e5c04a;
  --lv-green:  #6fbf73;
  --lv-blue:   #5b9bd5;
  --lv-purple: #a779d6;
  --lv-ink:    #14120a;     /* texto sobre los colores de familia */
  --tile-w: 100px;
}

html,body { min-height:100%; background:var(--bg); color:var(--text); font-family:var(--font-body); overflow-x:hidden; }
body { background:var(--bg); }

.page {
  position:relative; z-index:10;
  display:flex; flex-direction:column; align-items:center;
  padding:20px 16px 28px; gap:14px;
}

.header { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.header-title-row { display:flex; align-items:center; justify-content:center; width:100%; max-width:560px; }
.header-line { display:none; }
h1 {
  font-family:var(--font-display); font-size:clamp(2.2rem,7vw,3.4rem); font-weight:700; line-height:1;
  color:var(--text); letter-spacing:.01em; white-space:nowrap; text-transform:uppercase;
}
.header-sub { font-family:var(--font-mono); font-size:.72rem; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; text-align:center; }

.modes { display:flex; gap:8px; }
.mode-btn {
  background:transparent; border:1px solid var(--border); color:var(--dim);
  font-family:var(--font-display); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-size:.9rem; padding:8px 18px; border-radius:6px; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.mode-btn:hover { color:var(--text); border-color:var(--dim); }
.mode-btn.active { color:var(--gold); border-color:var(--gold); background:rgb(var(--gold-rgb) / .08); }
.day-info { font-family:var(--font-mono); font-size:.72rem; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; min-height:1em; margin:-6px 0 -4px; }
.day-info:empty { display:none; }

/* Familias resueltas */
.solved { display:flex; flex-direction:column; gap:8px; width:min(100%, calc(4 * var(--tile-w) + 3 * 8px)); }
.group {
  border-radius:8px; padding:10px 12px; text-align:center; color:var(--lv-ink);
  animation:cardIn .3s ease;
}
.group.yellow { background:var(--lv-yellow); }
.group.green  { background:var(--lv-green); }
.group.blue   { background:var(--lv-blue); }
.group.purple { background:var(--lv-purple); }
.group-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:.05em; text-transform:uppercase; line-height:1.15; }
.group-names { font-size:.82rem; font-weight:600; margin-top:3px; opacity:.85; }

/* Cuadrícula de jugadores */
.board { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; width:min(100%, calc(4 * var(--tile-w) + 3 * 8px)); }
.board:empty { display:none; }
.tile {
  position:relative; display:flex; flex-direction:column; align-items:stretch;
  background:var(--surface); border:2px solid var(--border); border-radius:8px; padding:0; overflow:hidden;
  color:var(--text); font-family:var(--font-body); cursor:pointer; touch-action:manipulation;
  transition:border-color .12s, transform .12s, background .12s;
}
.tile:hover { border-color:var(--dim); }
.tile:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.tile.on { border-color:var(--gold); background:rgb(var(--gold-rgb) / .12); transform:translateY(-2px); }
.tile.shake { animation:shake .35s ease; }
.tile .ph { aspect-ratio:1/1; width:100%; background:var(--surface2); display:block; }
.tile img.ph { object-fit:cover; object-position:top center; }
.tile .nick { padding:6px 4px 7px; font-family:var(--font-display); font-weight:700; font-size:.98rem; letter-spacing:.03em; line-height:1.1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile.on .nick { color:var(--gold); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.toast { min-height:22px; font-size:.9rem; font-weight:600; color:var(--text); text-align:center; opacity:0; transition:opacity .2s; }
.toast.show { opacity:1; }

.lives { display:flex; gap:6px; align-items:center; min-height:14px; }
.life { width:12px; height:12px; border-radius:50%; background:var(--gold); transition:background .2s, opacity .2s; }
.life.lost { background:var(--border); opacity:.6; }

.actions { display:flex; gap:8px; }
.btn { padding:9px 18px; border-radius:6px; font-family:var(--font-display); font-size:.95rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background .18s,color .18s,border-color .18s; }
.btn-confirm { background:var(--gold); border:1px solid var(--gold); color:var(--bg); }
.btn-confirm:hover:not(:disabled) { background:var(--text); border-color:var(--text); }
.btn-confirm:disabled { opacity:.4; cursor:not-allowed; }
.btn-cancel { background:transparent; border:1px solid var(--border); color:var(--dim); }
.btn-cancel:hover:not(:disabled) { border-color:var(--dim); color:var(--text); }
.btn-cancel:disabled { opacity:.4; cursor:not-allowed; }

/* Modal */
.overlay { position:fixed; inset:0; z-index:100; background:rgb(var(--bg-rgb) / .88); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; animation:fadeIn .18s ease; padding:16px; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; width:min(420px,100%); box-shadow:0 24px 60px rgba(0,0,0,.6); animation:cardIn .28s ease; max-height:calc(100dvh - 32px); overflow:auto; }
@keyframes cardIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
.modal-body { padding:22px 24px 24px; }
.end-body { text-align:center; }
.end-title { font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.end-groups { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.end-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.end-next { margin-top:12px; font-size:.76rem; color:var(--dim); letter-spacing:1px; min-height:1em; }

@media (max-width:480px) {
  :root { --tile-w: 84px; }
  .page { padding:14px 10px 20px; gap:10px; }
  .header-sub { font-size:.62rem; letter-spacing:.06em; }
  .board, .solved { width:100%; gap:6px; }
  .tile .nick { font-size:.82rem; padding:5px 2px 6px; }
  .btn { padding:9px 12px; font-size:.85rem; letter-spacing:.08em; }
  .group-title { font-size:.92rem; }
}
@media (min-width:481px) and (max-height:960px) {
  :root { --tile-w: 84px; }
  .page { gap:10px; }
  .tile .nick { font-size:.88rem; padding:4px 3px 5px; }
}