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

:root {
  --tile: 58px;
  --hit:  #2a7d4f;     /* letra en su sitio */
  --near: #c58a1d;     /* letra en otra posición */
  --miss: var(--border);     /* letra que no está */
}

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:16px;
}

/* Header */
.header { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.header-title-row { display:flex; align-items:center; justify-content:center; gap:16px; 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; font-weight:400; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; text-align:center; }

/* Modo y ligas */
.modes { display:flex; gap:8px; }
.mode-btn, .league-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;
  border-radius:6px; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.mode-btn   { font-size:.9rem; padding:8px 18px; }
.league-btn { font-size:.78rem; padding:5px 11px; }
.mode-btn:hover, .league-btn:hover { color:var(--text); border-color:var(--dim); }
.mode-btn.active, .league-btn.active { color:var(--gold); border-color:var(--gold); background:rgb(var(--gold-rgb) / .08); }
.leagues { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:420px; }
.day-info { font-family:var(--font-mono); font-size:.72rem; font-weight:400; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; min-height:1em; margin:-6px 0 -4px; }
.day-info:empty { display:none; }

/* Tablero */
.board { display:grid; grid-template-rows:repeat(6, var(--tile)); gap:6px; }
.row { display:grid; grid-template-columns:repeat(5, var(--tile)); gap:6px; }
.row.shake { animation:shake .35s ease; }
.tile {
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--border); border-radius:4px; background:var(--surface);
  font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:var(--text);
  text-transform:uppercase; user-select:none;
}
.tile.filled { border-color:var(--dim); animation:pop .1s ease; }
.tile.hit, .tile.near, .tile.miss { border-color:transparent; color:#fff; animation:flip .45s ease both; }
.tile.near { color:#1a1204; }
.tile.hit  { background:var(--hit); }
.tile.near { background:var(--near); }
.tile.miss { background:var(--miss); color:var(--dim); }
.row .tile:nth-child(2) { animation-delay:.08s; }
.row .tile:nth-child(3) { animation-delay:.16s; }
.row .tile:nth-child(4) { animation-delay:.24s; }
.row .tile:nth-child(5) { animation-delay:.32s; }
.row.restored .tile { animation:none; }
@keyframes pop  { 50% { transform:scale(1.08); } }
@keyframes flip { 0% { transform:rotateX(90deg); } 100% { transform:rotateX(0); } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

/* Aviso */
.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; }

/* Teclado */
.keyboard { display:flex; flex-direction:column; gap:6px; width:min(500px, 100%); }
.kb-row { display:flex; gap:5px; justify-content:center; }
.key {
  flex:1; max-width:44px; height:52px; border:none; border-radius:5px; cursor:pointer;
  background:var(--surface2); color:var(--text);
  font-family:var(--font-body); font-size:1rem; font-weight:600; text-transform:uppercase;
  transition:background .15s, filter .15s; touch-action:manipulation;
}
.key:hover { filter:brightness(1.2); }
.key.wide { max-width:68px; flex:1.5; font-size:.72rem; letter-spacing:1px; }
.key.hit  { background:var(--hit);  color:#fff; }
.key.near { background:var(--near); color:#1a1204; }
.key.miss { background:var(--surface); color:var(--dim); }

/* Modal (resultado y código beta) */
.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(380px,100%);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:cardIn .28s ease;
}
@keyframes cardIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.modal-body { padding:22px 24px 24px; }
.cell-context { display:flex; align-items:center; gap:10px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:10px 14px; margin-bottom:18px; }
.cell-context-icons { font-size:1.1rem; white-space:nowrap; }
.cell-context-text { font-size:.85rem; font-weight:500; line-height:1.4; color:var(--text); }
.cell-context-text strong { color:var(--gold); font-weight:700; }
.input-wrap { position:relative; margin-bottom:18px; }
.modal-input {
  width:100%; height:48px; background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:0 14px; font-family:var(--font-body);
  font-size:1rem; font-weight:500; color:var(--text); outline:none;
}
.modal-input:focus { border-color:var(--gold); }
.modal-input::placeholder { color:var(--dim); font-weight:400; }
.error-msg { min-height:18px; margin:-8px 0 8px; font-size:.78rem; font-weight:600; color:var(--red); letter-spacing:.5px; }
.btn-row { display:flex; gap:10px; }
.btn { flex:1; padding:9px 0; 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,box-shadow .18s; }
.btn-confirm { background:var(--gold); border:1px solid var(--gold); color:var(--bg); }
.btn-confirm:hover { background:var(--text); border-color:var(--text); }
.btn-cancel { background:transparent; border:1px solid var(--border); color:var(--dim); }
.btn-cancel:hover { border-color:var(--dim); color:var(--text); }

/* Resultado */
.end-body { text-align:center; }
.end-title { font-family:var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.end-word { font-family:var(--font-display); font-size:2.6rem; font-weight:700; letter-spacing:.1em; line-height:1.1; color:var(--text); margin:6px 0 14px; text-transform:uppercase; }
.end-player { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:18px; text-align:left; font-size:.9rem; line-height:1.6; }
.end-player b { color:var(--gold); font-weight:700; }
.end-player .tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.end-player .tag { font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.04em; padding:2px 7px; border-radius:4px; border:1px solid var(--border); color:var(--text); }
.end-player .path { font-size:.8rem; color:var(--text); line-height:1.5; margin-top:4px; }
.end-player .path .team-logo { margin-right:4px; }
.end-head { display:flex; align-items:center; gap:12px; }
.end-player .path-league { font-family:var(--font-mono); font-size:.62rem; font-weight:600; letter-spacing:.04em; color:var(--dim); }
.end-player .also { color:var(--dim); font-size:.78rem; margin-top:6px; }
.end-actions { display:flex; gap:8px; }
.end-next { margin-top:12px; font-size:.76rem; color:var(--dim); letter-spacing:1px; min-height:1em; }

@media (max-width:420px) {
  :root { --tile: 46px; }
  .page { padding:14px 12px 20px; gap:10px; }
  .header-sub { font-size:.62rem; letter-spacing:.06em; }
  .leagues { gap:4px; flex-wrap:wrap; }
  .league-btn { padding:5px 8px; font-size:.7rem; letter-spacing:.06em; }
  .board, .row { gap:5px; }
  .tile { font-size:1.35rem; }
  .toast { min-height:18px; }
  .keyboard { gap:5px; }
  .kb-row { gap:4px; }
  .key { height:46px; font-size:.9rem; }
}
@media (max-height:700px) {
  :root { --tile: 46px; }
  .tile { font-size:1.3rem; }
}