/* Cyber Home Theme — dark neon blue + bursts */

:root{
  --bg-0:#070707; --bg-1:#0d0d10;
  --grid:#1a1a1a; --trace:#7a0c12; --node:#a3121c;
  --electric:#e02424; --electric-2:#ff4b4b;
  --text:#e9e9ea; --muted:#b9b9bb; --error:#ff5c7c;
  --glass:rgba(12,12,14,.65); --radius:18px;
  --glow:0 0 18px rgba(224,36,36,.45),0 0 50px rgba(224,36,36,.2);
  --zap-a:7.5s; --zap-b:8.6s; --zap-c:9.4s;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  background:
    radial-gradient(1400px 700px at 10% 10%, #0a0a0a 0%, transparent 60%),
    radial-gradient(1200px 700px at 90% 90%, #0a0a0a 0%, transparent 60%),
    linear-gradient(160deg,var(--bg-0),var(--bg-1));
  font:500 16px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
  overflow:clip;
}

/* Start page hero panel: full-bleed below the top bar */
.panel.panel-hero{width:100%;max-width:100vw;padding:0;border:none;background:transparent;box-shadow:none;height:calc(100vh - 58px)}
.panel.panel-hero .hero-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: top center;
}

/* Background layers */
.bg{position:fixed;inset:0;z-index:-1}
.bg-grid,.bg-circuit{position:absolute;inset:0}

.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(1200px 900px at 50% 50%, #000 60%, transparent);
  opacity:.25;
}
.bg-circuit::before,.bg-circuit::after{
  content:"";position:absolute;inset:-10% -10%;
  background:
    repeating-linear-gradient(0deg,transparent 0 34px,rgba(39,176,255,.12) 34px 35px,transparent 35px 70px),
    repeating-linear-gradient(90deg,transparent 0 42px,rgba(39,176,255,.12) 42px 43px,transparent 43px 86px);
  filter:drop-shadow(0 0 6px rgba(39,176,255,.15));
}
.bg-circuit::after{
  background-image:
    radial-gradient(circle at 10% 20%, rgba(124,211,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 72%, rgba(124,211,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 34%, rgba(124,211,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 80%, rgba(124,211,255,.18) 0 2px, transparent 3px);
}

/* Lightning bursts */
.bg-lightning{position:absolute;inset:0;width:100%;height:100%;opacity:.8;pointer-events:none}
.bolt{
  stroke:var(--electric);stroke-width:2;fill:none;filter:url(#glow);
  stroke-dasharray:14 20;animation:zap var(--zap-a) linear infinite both;
}
.bolt-a{animation-duration:var(--zap-a);animation-delay:.0s}
.bolt-b{animation-duration:var(--zap-b);animation-delay:1.3s}
.bolt-c{animation-duration:var(--zap-c);animation-delay:2.4s}
@keyframes zap{
  0%{opacity:0;stroke-dashoffset:0}
  60%{opacity:0;stroke-dashoffset:60}
  68%{opacity:.35;stroke:var(--electric)}
  72%{opacity:.95;stroke:var(--electric-2);stroke-width:2.4}
  76%{opacity:.55;stroke:var(--electric)}
  84%{opacity:.25}
  92%{opacity:.08}
  100%{opacity:0;stroke-dashoffset:120}
}

/* Top bar */
.topbar{
  position:fixed;top:0;left:0;right:0;height:58px;
  display:flex;align-items:center;gap:16px;padding:0 16px;
  background:linear-gradient(to bottom, rgba(10,10,12,.7), rgba(10,10,12,.25));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(224,36,36,.25);
  z-index:5;
}
.brand{font-weight:800;letter-spacing:.5px;color:var(--electric-2);text-shadow:0 0 8px var(--electric)}
.brand span{color:var(--electric)}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:10px}
.pill{
  display:inline-block;padding:.25rem .6rem;border-radius:999px;
  border:1px solid rgba(124,211,255,.35);color:var(--muted);font-size:.85rem;
}

/* Shell and panel */
.shell{
  display:flex;
  align-items:center;
  justify-content:center;
  height:calc(100vh - 58px);
  margin-top:58px;
  padding-top:0;
}
.panel{
  width:min(880px,92vw);margin-top:0;
  background:var(--glass);backdrop-filter:blur(12px);
  border:2px solid var(--electric);border-radius:var(--radius);
  box-shadow:var(--glow);padding:2rem;
}
/* Scrollable content area inside panels (e.g., large lists) */
.heroes-scroll{
  max-height:calc(100vh - 180px); /* account for topbar and panel padding */
  overflow:auto;
  padding-right:.4rem; /* avoid overlaying scrollbar */
}

/* (hero panel styles defined above) */

/* Search row */
h1{margin:0 0 1rem;font-size:1.25rem;color:var(--electric-2)}
.search{display:flex;gap:.75rem}
.input{
  flex:1;min-width:0;padding:.7rem .9rem;border-radius:10px;
  border:1px solid var(--grid);background:rgba(0,0,0,.35);color:var(--text);
}
.input:focus{outline:none;border-color:var(--electric);box-shadow:0 0 10px rgba(39,176,255,.5)}
.actions{margin-top:1.1rem;display:flex;gap:.6rem;flex-wrap:wrap}

/* Game buttons grid */
.game-grid{
  margin-top:1rem;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}
.game-card{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-decoration:none;color:var(--text);
  background:rgba(0,0,0,.25);
  border:1px solid rgba(224,36,36,.25);
  border-radius:12px;
  padding:12px;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.game-card:hover{
  transform:none;
  border-color:rgba(224,36,36,.25);
  box-shadow:none;
}
.game-card .thumb{
  width:100%;
  height:220px;
  object-fit:contain;
  background:#000;
  border-radius:8px;
}
.game-card .label{
  display:block;
  margin-top:.6rem;
  font-weight:700;
  letter-spacing:.3px;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1rem;border-radius:10px;text-decoration:none;
  font-weight:600;cursor:pointer;user-select:none;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px)}

.btn.primary{background:var(--electric);color:#001428;border:1px solid transparent}
.btn.primary:hover{background:var(--electric);box-shadow:none}

.btn.outline{background:rgba(0,0,0,.25);color:var(--electric);border:1px solid rgba(124,211,255,.45)}
.btn.outline:hover{border-color:rgba(124,211,255,.45);box-shadow:none}

.btn.ghost{background:transparent;color:var(--muted);border:1px solid rgba(224,36,36,.25)}
.btn.ghost:hover{color:var(--muted);border-color:rgba(224,36,36,.25)}

/* Top-right login button */
.btn.login-top{background:#000;color:#fff;border:1px solid #222}
.btn.login-top:hover{background:#000;color:#fff;box-shadow:none}

/* Small square toggle button (used in Dota heroes) */
.btn.toggle{
  width:40px;height:40px;padding:0;border-radius:8px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(124,211,255,.45);
  color:var(--text);
}
.btn.toggle:hover{background:rgba(0,0,0,.25);box-shadow:none;border-color:rgba(124,211,255,.45)}
.btn.toggle.is-checked{
  background:#16a34a; /* green */
  border-color:#16a34a;
  color:#fff;
}



/* Flash messages */
ul.flash{margin-top:1rem;list-style:none;padding:0;color:var(--error);font-size:.95rem}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bolt, .bg-lightning{animation:none !important}
}
/* Inline password sheet (collapsible) */
.sheet{
  margin-top:1rem;
  background: var(--glass);
  border:1px solid rgba(124,211,255,.35);
  border-radius: 12px;
  padding:1rem 1.2rem;
  box-shadow: 0 0 12px rgba(39,176,255,.18);
  transition: transform .2s ease, opacity .2s ease;
}
.sheet h2{
  margin:.2rem 0 1rem;
  font-size:1.05rem;
  color: var(--electric-2);
}
.sheet.collapsed{
  opacity:0;
  transform: translateY(-6px);
}

/* Simple grid for the form */
.form.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:.9rem;
}
.form.grid label span{
  display:block;
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.3rem;
}
.form.grid input{
  width:100%;
  padding:.6rem .8rem;
  border-radius: 8px;
  border:1px solid var(--grid);
  background: rgba(0,0,0,.35);
  color: var(--text);
}
.form.grid input:focus{
  outline:none;
  border-color: var(--electric);
  box-shadow: 0 0 10px rgba(39,176,255,.5);
}

.row{ display:flex; gap:.6rem; flex-wrap:wrap; }

.result{
  margin-top: .9rem;
  padding: .9rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(124,211,255,.35);
  background: rgba(10,20,40,.55);
  box-shadow: 0 0 10px rgba(39,176,255,.18);
  color: var(--text);
}