#topbar{
  position:sticky;
  top:0;
  z-index:900;
  display:flex;
  align-items:center;
  gap:12px;
  height:var(--topbar-h);
  padding:0 16px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
#hamburger{display:none}
.logo{display:flex;align-items:center;flex:0 0 auto;border-radius:var(--r-sm)}
.logo img{height:var(--logo-h, 40px);width:auto}

#topnav{display:flex;align-items:center;gap:4px}
#topnav a{
  padding:8px 14px;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:14px;
  color:var(--dim);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
#topnav a:hover{color:var(--text);background:var(--surface-2)}
#topnav a.active{color:var(--text);background:var(--accent-soft)}

#search-wrap{position:relative;flex:1 1 320px;max-width:520px;margin-left:auto}

#search-wrap .search-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  color:var(--dim);
  pointer-events:none;
}
#search-wrap .search-icon svg{width:16px;height:16px}
#search-wrap .search-icon + #search-input{padding-left:38px}
#search-input{
  width:100%;
  height:38px;
  padding:0 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  color:var(--text);
  font-size:14px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
#search-input::placeholder{color:var(--dim);opacity:.8}
#search-input:hover{border-color:var(--dim)}
#search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface-2)}

#top-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
#top-actions .btn{flex:0 0 auto}
#fav-btn{position:relative}

#sidebar{
  position:fixed;
  top:var(--topbar-h);
  left:0;
  bottom:0;
  z-index:850;
  width:var(--rail-w);
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-right:1px solid var(--border);
  overflow:hidden;
  transition:width var(--t-med) var(--ease),transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
#sidebar:hover,
#sidebar[data-pinned="1"]{width:var(--rail-w-open)}
#sidebar:hover{box-shadow:var(--shadow)}
#sidebar[data-pinned="1"]{box-shadow:none}

#rail{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rail-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:44px;
  padding:0 12px;
  border-radius:var(--r-md);
  color:var(--dim);
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.rail-item svg{flex:0 0 24px;width:24px;height:24px}
.rail-item:hover{background:var(--surface-2);color:var(--text)}
.rail-item.active{background:var(--accent-soft);color:var(--accent)}
.rail-label{
  opacity:0;
  transform:translateX(-6px);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
#sidebar:hover .rail-label,
#sidebar[data-pinned="1"] .rail-label{opacity:1;transform:translateX(0)}

#pin-btn{
  flex:0 0 auto;
  margin:8px;
  border-top:1px solid var(--border);
  padding-top:10px;
  border-radius:0 0 var(--r-md) var(--r-md);
}
#pin-btn svg{transition:transform var(--t-med) var(--ease)}
#sidebar[data-pinned="1"] #pin-btn{color:var(--accent)}
#sidebar[data-pinned="1"] #pin-btn svg{transform:rotate(45deg)}

#sidebar-overlay{
  position:fixed;
  inset:0;
  z-index:840;
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  opacity:0;
  transition:opacity var(--t-med) var(--ease);
}
#sidebar-overlay:not([hidden]){opacity:1}

#main{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--right-rail-w);
  gap:24px;
  max-width:1720px;
  margin:0 auto;
  padding:16px 24px 40px calc(var(--rail-w) + 24px);
  transition:padding var(--t-med) var(--ease);
}
#sidebar[data-pinned="1"] ~ #main{padding-left:calc(var(--rail-w-open) + 24px)}

#home-feed{min-width:0;display:flex;flex-direction:column;gap:24px}
#hero-section,#all-games-section{min-width:0}

#right-rail{min-width:0}
#right-rail .ad-slot.sticky{position:sticky;top:calc(var(--topbar-h) + 16px)}

#pills-bar{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 8px;
  margin:-2px -2px 0;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,black 12px,black calc(100% - 12px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,black 12px,black calc(100% - 12px),transparent 100%);
}
#pills-bar::-webkit-scrollbar{display:none}
#pills-bar .pill{flex:0 0 auto}

#footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:18px 24px 18px calc(var(--rail-w) + 24px);
  border-top:1px solid var(--border);
  color:var(--dim);
  font-size:13px;
  transition:padding var(--t-med) var(--ease);
}
#sidebar[data-pinned="1"] ~ #footer{padding-left:calc(var(--rail-w-open) + 24px)}

@media (max-width:1199px){
  #main{grid-template-columns:minmax(0,1fr)}
  #right-rail{display:none}
}

@media (max-width:859px){
  #hamburger{display:inline-flex}
  #sidebar{
    top:0;
    bottom:0;
    width:var(--rail-w-open);
    transform:translateX(-100%);
    box-shadow:var(--shadow);
    z-index:950;
  }
  #sidebar:hover{width:var(--rail-w-open)}
  
  #sidebar.mobile-open{transform:translateX(0)}
  #sidebar .rail-label{opacity:1;transform:none}
  #main,#footer{padding-left:24px}
  #topnav{display:none}
  #search-wrap{margin-left:0}
  #login-btn{display:none}
}
@media (max-width:560px){
  #topbar{gap:8px;padding:0 12px}
  #top-actions{gap:2px}
  #main{padding:12px 12px 32px}
  #footer{padding:14px 12px}
}