:root{--bg:#0b0b0f;--card:#111218;--panel:#0f1016;--ink:#e9ecf1;--muted:#9aa3b2;--pri:#7c5cff;--pri-2:#34d399;--line:#1b1d25;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{height:100%}
html{overflow-x:hidden; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 20% -10%,#1b1f3a 0%,transparent 60%),
    radial-gradient(900px 500px at 120% -20%,#0d2a2a 0%,transparent 60%),
    linear-gradient(180deg,#0a0b10,#0a0b10 60%,#0a0c12);
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img, svg, canvas, video{max-width:100%; height:auto}
.container{max-width:1100px;width:100%;margin:0 auto;padding:0 8px}
.link{color:var(--muted);text-decoration:none}.link:hover{color:var(--ink)}
.muted{color:var(--muted)}
.h1{font-size:clamp(28px,3.2vw,44px);line-height:1.1;font-weight:800}
.h2{font-size:clamp(22px,2.4vw,32px);font-weight:800}
.h3{font-size:20px;font-weight:800}
.h4{font-size:16px;font-weight:700}

/* Top bar */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,12,18,.8);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #171923
}
/* brand | spacer | actions (search+fav+hamburger) */
.topbar__row{
  display:grid;
  grid-template-columns:auto 1fr auto;   /* changed from 1fr auto 1fr */
  align-items:center;
  gap:12px;
  padding:12px 0;
  min-width:0;
}
.topbar__left{display:flex;align-items:center;gap:10px;justify-self:start;min-width:0}
.topbar__center{display:flex;justify-content:center;align-items:center;min-width:0}
.topbar__right{
  display:flex;align-items:center;gap:8px;justify-self:end;
  min-width:0; /* allow shrinking */
}
.brand__badge{background:linear-gradient(135deg,var(--pri),#9b7bff);color:#fff;padding:6px 10px;border-radius:14px;box-shadow:var(--shadow);margin-right:10px;}
.brand__title{letter-spacing:.2px;font-weight:800}

.input{
  background:#0c0e14;border:1px solid var(--line);color:var(--ink);
  padding:10px 12px;border-radius:12px;outline:none;
  width:min(320px,60vw);
  flex:1 1 320px;        /* let it shrink before the buttons */
  min-width:0;
}
.input:focus{border-color:#2a2f3f;box-shadow:0 0 0 2px rgba(124,92,255,.25)}
.btn{border:1px solid var(--line);background:#10121a;color:var(--ink);padding:10px 14px;border-radius:12px;cursor:pointer;flex:0 0 auto}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.btn--ghost{background:#0e1016}
.btn--icon{background:#0f1118;width:38px;height:38px;display:grid;place-items:center;border-radius:12px}
.btn--primary{background:linear-gradient(135deg,var(--pri),#9b7bff);border-color:transparent}

/* Category chips (used inside menu) */
.catbar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;
  padding:8px 0 2px;
}
.tag{font-size:12px;color:#cdd3df;background:#121520;border:1px solid #1b2030;padding:8px 12px;border-radius:999px}
.tag--on{background:#1d2336;border-color:#334072}

/* Category menu */
.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:49;
}
.catmenu{
  position:fixed;
  right:12px; top:68px;
  width:420px; max-width:calc(100% - 24px);
  background:#0f1016;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  padding:12px;
  z-index:50;
}
.catmenu[hidden], .scrim[hidden]{display:none!important;}
.catmenu__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}

/* Mobile: full-screen sheet & header layout fix */
@media (max-width:840px){
  .catmenu{
    left:0; right:0; top:0; width:auto; max-width:none; height:100svh;
    border-radius:0;
    padding:14px 12px 18px;
    display:flex; flex-direction:column;
  }
  .catbar{margin-top:8px}
}
@media (max-width:700px){
  .topbar__center{display:none;}                 /* drop the empty middle on phones */
  .topbar__row{grid-template-columns:auto 1fr;}  /* brand | actions */
  .topbar__right{min-width:0;}
  .topbar__right .input{
    width:auto;
    max-width:none;
    flex:1 1 auto;                                /* search gives up space first */
    min-width:0;
  }
  .topbar__right .btn{flex:0 0 auto;}            /* keep ★ + ☰ visible */
}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center;padding:28px 0 6px}
.hero__text{display:flex;flex-direction:column;gap:12px;min-width:0;}
.hero__cta{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.hero__art{width:100%;height:auto}
@media(max-width:800px){.hero{grid-template-columns:1fr;}}

/* Sections */
.section{padding:24px 0}
.section__title{margin:0 0 12px}

/* Game grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  min-width:0;
}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;}
.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#0f1220,#0e1328);display:grid;place-items:center}
.card__body{padding:14px;display:flex;flex-direction:column;gap:10px}
.card__head{display:flex;align-items:center;gap:8px}
.card .btn{width:100%}

/* Info / Footer */
.info-section{min-height:10vh;border-top:1px solid var(--line);background:#0a0c12}
.info__wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:24px 0}
.info__col{background:#0f1016;border:1px solid var(--line);border-radius:14px;padding:16px}
.footer{border-top:1px solid var(--line);background:#0a0c12}
.footer__inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.footer__links{display:flex;gap:14px}

/* Utilities */
.empty{padding:24px;text-align:center;color:var(--muted)}
.hidden{display:none!important}

/* Sticky footer / fluid middle */
.page{min-height:100svh;display:flex;flex-direction:column;min-width:0;}
.site-main{flex:1;display:flex;flex-direction:column;min-width:0;}

@media (max-width:700px){ .info-section{min-height:auto;} }
@media (max-width:840px){
  main.container:not(.main){display:block !important;}
  .info__col{margin-top:16px;}
}

/* Canvas default */
.canvas{touch-action:none;}
@media (max-width:840px){ .canvas{width:100% !important;height:auto !important;} }

/* Background layers */
.bgfx,.gridfx{position:fixed;inset:0;width:100%;height:100svh;pointer-events:none;z-index:-1}
.bgfx{
  background:
    radial-gradient(1200px 600px at 20% -10%, #1b1f3a 0%, transparent 60%),
    radial-gradient(900px 500px at 120% -20%, #0d2a2a 0%, transparent 60%),
    linear-gradient(180deg, #0a0b10, #0a0b10 60%, #0a0c12);
}
.gridfx{
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,0.03) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,0.03) 32px);
  background-size:32px 32px,32px 32px;
  mix-blend-mode:normal;
  opacity:.25;
}

/* Tiny phones */
@media (max-width:380px){
  .container{padding-left:6px;padding-right:6px}
  .btn--icon{width:36px;height:36px}
  .btn{padding:9px 12px}
}