/* Version visuelle sûre : style inspiré sans casser le JS */
:root{
  --nx-sidebar-w: 230px;
  --nx-sidebar-gap: 34px;
}

html,body{overflow-x:hidden;}
body{
  background:
    radial-gradient(circle at 18% 18%, rgba(105,70,255,.18), transparent 20%),
    radial-gradient(circle at 84% 20%, rgba(0,190,255,.12), transparent 18%),
    radial-gradient(circle at 64% 78%, rgba(0,185,110,.10), transparent 16%),
    linear-gradient(180deg,#040915 0%,#030813 100%) !important;
}
body::before{opacity:.05 !important;background-size:220px 220px !important;}

.app-shell{width:100%;max-width:none;margin:0;}
.topbar{
  display:grid !important;
  grid-template-columns: 150px 1fr auto !important;
  gap:18px !important;
  align-items:center;
  padding:16px 18px 16px !important;
  background:rgba(8,10,18,.82) !important;
  backdrop-filter: blur(8px);
}
.brand{font-size:1.8rem;font-weight:800;letter-spacing:-.03em;}
.searchbox-wrapper{width:100%;max-width:620px;}
.topbar .searchbox-wrapper{display:none;}
.content-head .searchbox-wrapper{
  display:block !important;
  grid-column:1 / -1;
  justify-self:center;
  width:min(100%, 620px);
  max-width:620px;
  margin:6px 0 2px;
}
.searchbox{
  height:50px;
  border-radius:16px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}

/* garder admin, masquer visiteur et soutenir */
.mode-switch > .mode-btn:first-child,
.mode-switch > .donate-btn{display:none !important;}
.mode-switch{justify-self:end;}
.mode-btn{border-radius:12px !important;}

/* Sidebar consoles à gauche */
.top-tabs{
  position:fixed !important;
  top:92px;
  left:24px;
  width:var(--nx-sidebar-w);
  display:flex !important;
  flex-direction:column;
  align-items:stretch !important;
  gap:10px !important;
  max-height:calc(100vh - 120px);
  overflow:auto;
  padding:12px;
  z-index:40;
  border-radius:24px;
  background:rgba(9,14,27,.74);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 20px 40px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
.top-tabs::-webkit-scrollbar{width:6px;}
.top-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px;}
.top-tabs::before{
  content:'CONSOLES';
  color:rgba(255,255,255,.5);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.13em;
  margin:0 0 6px 6px;
}
.tab{
  width:100%;
  justify-content:flex-start !important;
  text-align:left !important;
  border-radius:16px !important;
  padding:14px 16px !important;
  background:rgba(14,20,34,.9) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  box-shadow:none !important;
  transform:none !important;
}
.tab:hover{background:rgba(255,255,255,.07) !important;}
.tab-active{
  background:linear-gradient(180deg,rgba(59,130,246,.30),rgba(59,130,246,.16)) !important;
  border-color:rgba(96,165,250,.34) !important;
}

/* Réserver clairement la place du menu gauche */
.main-no-sidebar{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  padding:20px 18px 34px calc(24px + var(--nx-sidebar-w) + var(--nx-sidebar-gap)) !important;
}
.content{
  min-width:0;
  width:100%;
}
.content-head{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center;
  gap:16px;
  margin-bottom:22px !important;
}
.content-head h1{
  grid-column:1/-1;
  text-align:center;
  font-size:3rem;
  line-height:1.05;
  letter-spacing:-.04em;
  margin:8px 0 2px;
}
.filters{
  grid-column:1 / -1;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center;
  gap:12px !important;
  color:rgba(255,255,255,.8) !important;
}
.filters > :first-child{justify-self:start;}
.filters select{justify-self:end;}
.filters select{
  min-width:160px;
  border-radius:12px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.admin-panel{
  background:rgba(14,20,34,.46) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:22px !important;
  margin-bottom:24px !important;
}
.games-grid{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}
.game-card{
  min-height:360px !important;
  padding:0 !important;
  overflow:hidden;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(31,43,72,.92), rgba(20,22,28,.96) 72%) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 18px 36px rgba(0,0,0,.22) !important;
}
.game-cover{min-height:240px !important;border-radius:0 !important;background:#1b2740 !important;}
.game-info{padding:14px 14px 0;}
.game-info h3{font-size:1rem !important;min-height:3.2em !important;}
.game-info .meta{font-size:.82rem !important;color:rgba(255,255,255,.64) !important;}
.game-actions{padding:12px 14px 14px;margin-top:auto;}
.btn,.edit-btn,.delete-btn{border-radius:10px !important;}
.footer{padding-left:calc(24px + var(--nx-sidebar-w) + var(--nx-sidebar-gap)) !important;}

@media (max-width: 1180px){
  :root{--nx-sidebar-w:210px;--nx-sidebar-gap:26px;}
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;}
}

@media (max-width: 980px){
  .topbar{
    grid-template-columns:1fr auto !important;
    padding:14px 14px 8px !important;
  }
  .brand{grid-column:1/-1;text-align:center;}
  .searchbox-wrapper{grid-column:1/-1;max-width:none;}
  .top-tabs{
    position:static !important;
    width:100%;
    max-height:none;
    flex-direction:row !important;
    flex-wrap:nowrap;
    overflow:auto;
    left:auto;top:auto;
    margin:0 0 14px;
    padding:0;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  .top-tabs::before{display:none;}
  .tab{min-width:max-content;}
  .main-no-sidebar{padding:10px 14px 26px !important;}
  .content-head h1{font-size:2.2rem;}
  .footer{padding-left:14px !important;}
}

@media (max-width: 640px){
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important;}
  .content-head{grid-template-columns:1fr !important;}
  .filters{justify-self:start;flex-wrap:wrap;}
}


.game-actions .btn{padding:.6rem 1.05rem !important;font-size:.9rem !important;font-weight:700 !important;min-width:96px !important;border-radius:12px !important;justify-content:center !important;}

/* Download button update */
.game-actions{
  justify-content:center !important;
  align-items:center !important;
}

.game-actions .btn{
  width:min(100%, 168px) !important;
  min-width:168px !important;
  padding:.82rem 1.25rem !important;
  font-size:1rem !important;
  font-weight:800 !important;
  text-align:center !important;
  justify-content:center !important;
  margin:0 auto !important;
}

.game-actions .btn.disabled{
  width:min(100%, 168px) !important;
  min-width:168px !important;
}