:root{
  --bg:#05050f;
  --bg2:#0b0b22;
  --neon1:#00f6ff;
  --neon2:#ff00e6;
  --neon3:#aaff00;
  --neon4:#ffb000;
  --text:#e8f6ff;
  --muted:#8aa0c0;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  background:radial-gradient(ellipse at top, #11113a 0%, #05050f 60%, #020208 100%);
  color:var(--text);
  font-family:'Segoe UI',Arial,sans-serif;
  min-height:100%;
  overscroll-behavior:none;
}
a{color:inherit;text-decoration:none;}
.arcade-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid rgba(0,246,255,0.25);
  background:rgba(5,5,20,0.7);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(6px);
}
.arcade-header .brand{
  font-weight:800;font-size:1.25rem;letter-spacing:1px;
  color:var(--neon1);
  text-shadow:0 0 10px rgba(0,246,255,0.7);
}
.arcade-header .brand span{color:var(--neon2);text-shadow:0 0 10px rgba(255,0,230,0.7);}
.back-link{
  padding:8px 14px;border-radius:8px;
  border:1px solid var(--neon1);
  color:var(--neon1);
  font-size:0.85rem;
  transition:all .2s;
}
.back-link:hover{background:rgba(0,246,255,0.15);box-shadow:0 0 14px rgba(0,246,255,0.5);}

.game-shell{
  max-width:720px;
  margin:0 auto;
  padding:18px 14px 60px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.game-title{
  font-size:1.5rem;font-weight:800;
  color:var(--neon1);
  text-shadow:0 0 12px rgba(0,246,255,0.6);
  text-align:center;
}
.game-desc{color:var(--muted);text-align:center;font-size:0.9rem;max-width:560px;}
canvas{
  background:#070716;
  border:2px solid rgba(0,246,255,0.4);
  border-radius:10px;
  box-shadow:0 0 30px rgba(0,246,255,0.15), inset 0 0 40px rgba(0,0,0,0.6);
  touch-action:none;
  max-width:100%;
}
.hud{
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
  font-size:0.95rem;color:var(--neon3);
}
.hud b{color:var(--text);}
.controls-row{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
}
.btn{
  background:linear-gradient(135deg, rgba(0,246,255,0.15), rgba(255,0,230,0.15));
  border:1px solid var(--neon1);
  color:var(--text);
  padding:10px 18px;
  border-radius:10px;
  font-size:0.95rem;
  cursor:pointer;
  transition:all .15s;
}
.btn:hover{box-shadow:0 0 16px rgba(0,246,255,0.5);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.alt{border-color:var(--neon2);}
.btn.alt:hover{box-shadow:0 0 16px rgba(255,0,230,0.5);}
.overlay-msg{
  font-size:1.1rem;color:var(--neon4);
  text-align:center;min-height:1.4em;
}
.dpad{
  display:grid;grid-template-columns:60px 60px 60px;grid-template-rows:60px 60px 60px;
  gap:4px;
  user-select:none;
}
.dpad button{
  background:rgba(0,246,255,0.1);border:1px solid rgba(0,246,255,0.4);
  border-radius:10px;color:var(--neon1);font-size:1.4rem;
}
.dpad .up{grid-column:2;grid-row:1;}
.dpad .left{grid-column:1;grid-row:2;}
.dpad .center{grid-column:2;grid-row:2;}
.dpad .right{grid-column:3;grid-row:2;}
.dpad .down{grid-column:2;grid-row:3;}

/* Hub page */
.hub-wrap{max-width:1200px;margin:0 auto;padding:30px 18px 70px;}
.hub-hero{text-align:center;margin-bottom:28px;}
.hub-hero h1{
  font-size:2.6rem;margin:10px 0 6px;
  color:var(--neon1);text-shadow:0 0 20px rgba(0,246,255,0.6);
  letter-spacing:1px;
}
.hub-hero h1 span{color:var(--neon2);text-shadow:0 0 20px rgba(255,0,230,0.6);}
.hub-hero p{color:var(--muted);font-size:1rem;}
.search-row{
  display:flex;justify-content:center;margin:18px 0 6px;
}
.search-row input{
  width:100%;max-width:420px;
  padding:12px 16px;border-radius:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(0,246,255,0.35);
  color:var(--text);font-size:1rem;
}
.search-row input:focus{outline:none;box-shadow:0 0 14px rgba(0,246,255,0.4);}
.cat-nav{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 26px;
}
.cat-pill{
  padding:7px 16px;border-radius:999px;
  border:1px solid rgba(170,255,0,0.4);
  color:var(--neon3);font-size:0.85rem;cursor:pointer;
  background:rgba(170,255,0,0.05);
  transition:all .15s;
}
.cat-pill.active, .cat-pill:hover{
  background:rgba(170,255,0,0.2);box-shadow:0 0 12px rgba(170,255,0,0.4);
}
.cat-section{margin-bottom:34px;}
.cat-section h2{
  font-size:1.3rem;color:var(--neon4);
  text-shadow:0 0 10px rgba(255,176,0,0.5);
  border-bottom:1px solid rgba(255,176,0,0.25);
  padding-bottom:8px;margin-bottom:16px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:16px;
}
.card{
  background:linear-gradient(155deg, rgba(0,246,255,0.08), rgba(255,0,230,0.05));
  border:1px solid rgba(0,246,255,0.25);
  border-radius:14px;
  padding:16px;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .15s, box-shadow .15s;
  cursor:pointer;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 26px rgba(0,246,255,0.25);
  border-color:rgba(0,246,255,0.6);
}
.card .icon{
  font-size:2rem;height:46px;display:flex;align-items:center;
}
.card h3{margin:0;font-size:1.02rem;color:var(--text);}
.card p{margin:0;color:var(--muted);font-size:0.8rem;flex-grow:1;}
.card .play{
  align-self:flex-start;
  font-size:0.78rem;
  color:var(--neon1);
  border:1px solid var(--neon1);
  padding:5px 12px;border-radius:8px;
}
footer.hub-footer{
  text-align:center;color:var(--muted);font-size:0.8rem;margin-top:40px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,0.08);
}
.hidden{display:none !important;}
@media (max-width:480px){
  .hub-hero h1{font-size:2rem;}
  canvas{width:100%;height:auto;}
}