/* HexaGameHub site UI enhancements (auth, theme, hex style) */
:root{
  --bg:#0a0b16;
  --bg2:#0c1022;
  --panel:rgba(12,16,34,.85);
  --border:rgba(255,255,255,0.08);
  --text:#e6e9ff;
  --muted:#a6aadc;
  --accent:#0ea5e9;
  --accent2:#9b5cf3;
  --success:#22c55e;
  --danger:#ef4444;
}
*{box-sizing:border-box}
.hx-nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(6px);background:rgba(10,11,22,.7);border-bottom:1px solid var(--border)}
.hx-nav .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px}
.hx-brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.04em}
.hx-brand .logo{width:28px;height:28px;display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent2));clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%)}
.hx-actions{display:flex;align-items:center;gap:8px}
.hx-btn{all:unset;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer}
.hx-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06121e;border:0;font-weight:900}
.hx-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:999px;background:var(--panel);font-size:13px}
.hx-avatar{width:28px;height:28px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.hx-muted{color:var(--muted)}
.hx-hex-bg{background:
  radial-gradient(800px 400px at 50% -10%, rgba(61,130,246,.25), transparent 60%),
  radial-gradient(600px 300px at 10% 110%, rgba(10,245,255,.15), transparent 60%),
  radial-gradient(700px 350px at 90% 120%, rgba(155,92,243,.15), transparent 60%),
  #0a0b16;
}
.hx-grid{
  --size: 28px;
  position:relative;
  background: repeating-linear-gradient(30deg, transparent 0, transparent calc(var(--size) - 1px), rgba(255,255,255,.04) calc(var(--size) - 1px), rgba(255,255,255,.04) var(--size)),
              repeating-linear-gradient(-30deg, transparent 0, transparent calc(var(--size) - 1px), rgba(255,255,255,.04) calc(var(--size) - 1px), rgba(255,255,255,.04) var(--size));
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}
dialog#authModal{z-index:10000;border:1px solid var(--border);border-radius:16px;background:var(--panel);color:var(--text);padding:0;max-width:720px;width:92%}
.auth-body{display:grid;grid-template-columns:1fr 1fr}
.auth-pane{padding:18px;border-right:1px solid var(--border)}
.auth-pane:last-child{border-right:0}
.auth-pane h3{margin:0 0 10px;font-size:18px}
.auth-pane form{display:grid;gap:8px}
.auth-pane input{all:unset;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0b1228}
.auth-pane button{all:unset;padding:10px 12px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06121e;font-weight:900;text-align:center;cursor:pointer}
.auth-error{min-height:18px;color:var(--danger);font-size:13px}
.auth-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.auth-head h2{margin:0;font-size:18px;letter-spacing:.04em}
@media (max-width:720px){
  .auth-body{grid-template-columns:1fr}
  .auth-pane{border-right:0;border-bottom:1px solid var(--border)}
  .auth-pane:last-child{border-bottom:0}
}


dialog#authModal::backdrop{background:rgba(0,0,0,.70)}