/* =====================================================================
   WBC SCACCHI - Style Globale
   Tema dark, accenti mint VGEM e oro per i premi
   ===================================================================== */

:root{
  --bg:#06080d;
  --bg-soft:#0c1018;
  --panel:#0f1420;
  --panel-2:#151b2a;
  --panel-3:#1c2336;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);
  --text:#e6e9f0;
  --text-dim:#8b93a8;
  --text-faint:#525a72;
  --vgem:#70f6d1;
  --vgem-2:#67b2ff;
  --gold:#fbbf24;
  --gold-2:#f59e0b;
  --danger:#f87171;
  --success:#84e1bc;

  --board-light:#e8d5a6;   /* legno chiaro */
  --board-dark:#7a5d3d;    /* legno scuro  */
  --board-light-alt:#d4faef; /* alternativa mint */
  --board-dark-alt:#1f8d72;

  --highlight:rgba(251,191,36,.45);
  --legal-move:rgba(112,246,209,.45);
  --check:rgba(248,113,113,.6);

  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-body:'Manrope', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(112,246,209,.06), transparent 70%),
    radial-gradient(ellipse 50% 35% at 90% 30%, rgba(103,178,255,.05), transparent 70%),
    var(--bg);
}
a{color:var(--vgem);text-decoration:none}
a:hover{color:#fff}
button{font-family:var(--font-body);cursor:pointer;border:none;background:none;color:inherit}

/* ----- TOPBAR ----- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  border-bottom:1px solid var(--line);
  background:rgba(6,8,13,.75);
  backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:50;
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);
  font-weight:600;font-size:20px;letter-spacing:-.01em;
}
.brand-logo{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg, var(--vgem), var(--vgem-2));
  display:grid;place-items:center;
  color:#06080d;font-weight:700;
  box-shadow:0 4px 16px -4px rgba(112,246,209,.5);
}
.nav{display:flex;gap:8px;align-items:center}
.nav a{
  padding:8px 14px;border-radius:8px;
  color:var(--text-dim);font-size:14px;font-weight:500;
  transition:all .2s;
}
.nav a:hover, .nav a.active{color:#fff;background:var(--panel)}

.user-pill{
  display:flex;align-items:center;gap:10px;
  padding:6px 6px 6px 14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px;
}
.user-pill .balance{
  background:linear-gradient(135deg, var(--vgem), var(--vgem-2));
  color:#06080d;
  padding:5px 12px;
  border-radius:999px;
  font-family:var(--font-mono);font-weight:600;
}

/* ----- BUTTONS ----- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:10px;
  font-weight:600;font-size:14px;
  background:var(--panel-2);
  border:1px solid var(--line-strong);
  color:var(--text);
  transition:all .2s;
}
.btn:hover{background:var(--panel-3);transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, var(--vgem), var(--vgem-2));
  color:#06080d;border-color:transparent;
}
.btn-primary:hover{box-shadow:0 6px 22px -6px var(--vgem)}
.btn-gold{background:linear-gradient(135deg, var(--gold), var(--gold-2));color:#06080d;border-color:transparent}
.btn-danger{background:rgba(248,113,113,.1);color:var(--danger);border-color:rgba(248,113,113,.3)}
.btn-danger:hover{background:rgba(248,113,113,.18)}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ----- CARDS / FORMS ----- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
}
.card-title{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  margin-bottom:18px;
  letter-spacing:-.01em;
}
input[type=text], input[type=email], input[type=password], input[type=number], select{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--text);
  padding:12px 14px;
  border-radius:10px;
  font-family:var(--font-body);
  font-size:14px;
  outline:none;
  transition:border-color .2s, background .2s;
}
input:focus, select:focus{border-color:var(--vgem);background:var(--panel-3)}
label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.1em;font-weight:500}

/* ----- ALERTS ----- */
.alert{
  padding:12px 16px;border-radius:10px;font-size:14px;margin-bottom:16px;
  border:1px solid;
}
.alert-error{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.3);color:#fca5a5}
.alert-success{background:rgba(132,225,188,.08);border-color:rgba(132,225,188,.3);color:#86efac}
.alert-info{background:rgba(103,178,255,.08);border-color:rgba(103,178,255,.3);color:#93c5fd}

/* ----- LAYOUT ----- */
.container{max-width:1280px;margin:0 auto;padding:32px}
.container-narrow{max-width:560px;margin:0 auto;padding:32px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:16px}
@media (max-width:760px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .container,.container-narrow{padding:20px}
  .topbar{padding:12px 16px}
  .nav{gap:0}
  .nav a{padding:8px 10px;font-size:13px}
}