/* JW-005.1 — color shell: subtle, per-screen identity, mobile-first */
:root{
  --jr-ink:#172033;
  --jr-muted:#667085;
  --jr-line:#dfe5ef;
  --jr-shadow:0 10px 28px rgba(31,41,55,.07);
}
html{background:#f5f7fb}
body{
  min-height:100vh;
  color:var(--jr-ink);
  background:
    radial-gradient(circle at 8% 0%,rgba(79,70,229,.08),transparent 28rem),
    radial-gradient(circle at 92% 8%,rgba(14,165,233,.07),transparent 25rem),
    #f5f7fb;
}

/* Authentication: give the entry screens some personality without becoming noisy. */
.auth-shell{
  position:relative;
}
.auth-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 12%,rgba(79,70,229,.16),transparent 24rem),
    radial-gradient(circle at 88% 80%,rgba(14,165,233,.12),transparent 28rem);
}
.auth-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(99,102,241,.18)!important;
  box-shadow:var(--jr-shadow);
}
.auth-card::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:6px;
  background:linear-gradient(90deg,#4f46e5,#2563eb,#06b6d4);
}
.auth-card h1{letter-spacing:-.025em}
.auth-button{
  background:linear-gradient(135deg,#4f46e5,#2563eb)!important;
  box-shadow:0 7px 18px rgba(37,99,235,.18);
}

/* Common "partidas" screen */
.sessions-page{
  background:
    radial-gradient(circle at 10% 0%,rgba(124,58,237,.09),transparent 22rem),
    transparent;
}
.session-card,.sessions-empty{
  border-color:rgba(124,58,237,.14)!important;
  box-shadow:0 7px 20px rgba(59,40,120,.05);
}
.sessions-primary{background:linear-gradient(135deg,#6d28d9,#4f46e5)!important}

/* Sudoku = cool blue / indigo identity */
.sudoku-page{
  background:
    radial-gradient(circle at 10% 3%,rgba(37,99,235,.10),transparent 22rem),
    radial-gradient(circle at 96% 24%,rgba(79,70,229,.07),transparent 18rem);
  border-radius:22px;
}
.sudoku-card{
  border-color:rgba(37,99,235,.14)!important;
  box-shadow:0 7px 20px rgba(37,99,235,.055);
}
.sudoku-top h1{color:#1e3a8a}
.sudoku-top::after{
  content:"";
  height:4px;
  width:54px;
  border-radius:99px;
  background:linear-gradient(90deg,#4f46e5,#2563eb);
  align-self:flex-end;
  margin-left:auto;
}
.sudoku-game .game-status{
  background:linear-gradient(135deg,rgba(238,242,255,.9),rgba(239,246,255,.9));
  border:1px solid rgba(37,99,235,.12);
  border-radius:13px;
  padding:8px 10px;
}

/* Word search = warm orange / amber identity */
.ws-page{
  background:
    radial-gradient(circle at 8% 2%,rgba(249,115,22,.10),transparent 23rem),
    radial-gradient(circle at 97% 22%,rgba(245,158,11,.08),transparent 19rem);
  border-radius:22px;
}
.ws-card{
  border-color:rgba(249,115,22,.16)!important;
  box-shadow:0 7px 20px rgba(249,115,22,.055);
}
.ws-top h1{color:#9a3412}
.ws-top::after{
  content:"";
  height:4px;
  width:54px;
  border-radius:99px;
  background:linear-gradient(90deg,#f97316,#f59e0b);
  align-self:flex-end;
  margin-left:auto;
}
.ws-game .game-status{
  background:linear-gradient(135deg,rgba(255,247,237,.94),rgba(255,251,235,.94));
  border:1px solid rgba(249,115,22,.13);
  border-radius:13px;
  padding:8px 10px;
}
.ws-page .primary-big{background:linear-gradient(135deg,#f97316,#f59e0b)!important}
.ws-page .difficulty-grid input:checked+span,
.ws-page .mode-grid input:checked+span{border-color:#f97316!important;background:#fff7ed!important}

/* PWA installation helper */
.install-help{
  width:min(620px,100%);
  margin:0 auto;
  padding:18px 12px 48px;
  box-sizing:border-box;
}
.install-help-card{
  background:#fff;
  border:1px solid rgba(79,70,229,.15);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--jr-shadow);
}
.install-help-card h1{margin:.15rem 0 .5rem}
.install-help-card p{color:var(--jr-muted)}
.install-steps{display:grid;gap:10px;margin:16px 0}
.install-step{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:10px;
  align-items:start;
  border:1px solid var(--jr-line);
  border-radius:13px;
  padding:11px;
  background:linear-gradient(135deg,#fff,#f8faff);
}
.install-step b{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#eef2ff;color:#4338ca;
}
.install-help-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.install-help-actions a,.install-help-actions button{
  min-height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;font:inherit;font-weight:850;
}
.install-native{border:0;background:linear-gradient(135deg,#4f46e5,#2563eb);color:#fff}
.install-back{border:1px solid var(--jr-line);background:#fff;color:inherit}

@media(max-width:600px){
  body{background-color:#f6f8fc}
  .sudoku-page,.ws-page{border-radius:0}
  .sudoku-top::after,.ws-top::after{display:none}
  .auth-card{box-shadow:0 8px 22px rgba(31,41,55,.06)}
}
@media(max-width:380px){
  .install-help-actions{grid-template-columns:1fr}
}