*{box-sizing:border-box}html{background:#061126}body{margin:0;color:#f5f7ff;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 85% 8%,#29105055,transparent 25%),radial-gradient(circle at 10% 25%,#092f6255,transparent 28%),#061126;min-height:100vh}body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:42px 42px;pointer-events:none}header,main,footer{position:relative;z-index:1}header{max-width:1500px;margin:auto;min-height:118px;padding:22px 28px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;gap:16px;align-items:center;color:white;text-decoration:none}.pad{font-size:52px;filter:drop-shadow(0 0 12px #00d9ff)}.logo b{font-size:31px;letter-spacing:-1.5px}.logo em{font-style:normal;background:linear-gradient(90deg,#d33cff,#874cff);background-clip:text;color:transparent}.logo small{display:block;font-size:13px;color:#b6cae7;margin-top:5px;font-weight:500}.slogan{text-align:center;font-size:27px;font-weight:700;font-style:italic;color:#8eb6ff;line-height:.9;transform:rotate(-4deg)}.slogan i{display:block;width:150px;height:7px;background:#7d39ff;border-radius:50%;margin-top:8px}.fun{border:1px solid #5639a0;border-radius:10px;padding:11px 20px;text-align:center;font-size:12px;color:#d6e3ff;background:#11193a99}main{max-width:1500px;margin:auto;padding:0 28px 35px}.toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:10px 0 16px}.filters{display:flex;gap:12px;flex-wrap:wrap}.filters button{background:#071c37;color:#d7e6ff;border:1px solid #1d5a93;padding:13px 18px;border-radius:10px;font-weight:800;cursor:pointer}.filters button.active,.filters button:hover{background:linear-gradient(135deg,#7d28ef,#5328d6);border-color:#b94cff;box-shadow:0 0 18px #8a2eff77}.search{width:265px;border:1px solid #395287;border-radius:11px;padding:10px 14px;background:#0b1831;color:#bcd2f1;font-size:23px}.search input{width:calc(100% - 30px);border:0;outline:0;background:transparent;color:white;padding:4px;font:inherit;font-size:13px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:linear-gradient(#071a35,#07152d);border:1px solid #1a4f81;border-radius:15px;overflow:hidden;box-shadow:0 12px 30px #0005;transition:.25s}.card:hover{transform:translateY(-5px);border-color:#4c9bd3}.cover{height:240px;position:relative;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}.card:hover .cover img{transform:scale(1.035)}.state{position:absolute;right:12px;top:12px;border:1px solid #00d897;border-radius:999px;background:#003d34dd;color:#61ffc8;font-size:11px;font-weight:900;padding:8px 12px}.body{padding:14px 15px 15px}.body h2{font-size:20px;margin:0 0 8px}.body p{color:#b2c4df;font-size:13px;line-height:1.45;min-height:57px;margin:0}.tags{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}.tags span{border-radius:999px;padding:5px 10px;font-size:10px;background:#432064;color:#e6a7ff;border:1px solid #7d38a8}.tags .t1{background:#122c67;color:#9ec2ff;border-color:#2454a4}.tags .t2{background:#074638;color:#77eec7;border-color:#08755d}.body a{display:block;text-align:center;background:linear-gradient(90deg,#7b2fff,#6840f2);color:#fff;text-decoration:none;border-radius:8px;padding:11px;font-weight:800;font-size:13px;box-shadow:0 0 15px #6d35ff44}.empty{grid-column:1/-1;text-align:center;padding:80px;color:#91a6c5}footer{border-top:1px solid #38226c;background:#0b1130cc;display:grid;grid-template-columns:repeat(4,1fr);padding:18px max(28px,calc((100vw - 1444px)/2));gap:18px}footer div{padding:0 18px;border-right:1px solid #273050}footer div:last-child{border:0}footer b{display:block;font-size:12px}footer span{display:block;color:#91add1;font-size:10px;margin:5px 0 0 25px}@media(max-width:1050px){.grid{grid-template-columns:repeat(2,1fr)}.toolbar{align-items:flex-start;flex-direction:column}.search{width:100%}.slogan,.fun{display:none}footer{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){header{padding:16px}.logo b{font-size:21px}.pad{font-size:37px}.logo small{font-size:10px}main{padding:0 14px 25px}.filters{display:grid;grid-template-columns:1fr 1fr;width:100%}.filters button:first-child{grid-column:1/-1}.grid{grid-template-columns:1fr}.cover{height:210px}footer{grid-template-columns:1fr}footer div{border-right:0;border-bottom:1px solid #273050;padding:10px 14px}.body p{min-height:0}}
/* Vegleges lablec */
.final-footer{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:105px;
  padding:22px 15px !important;
  border-top:1px solid #38226c;
  background:#080f27cc;
}
.final-footer .footer-inner{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
  text-align:center;
}
.final-footer .footer-copy{
  color:#f5f7ff;
  font-size:15px;
  font-weight:500;
}
.final-footer a{
  display:inline-block;
  padding:0 !important;
  border:0 !important;
}
.final-footer img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
}
.final-footer a:hover img{
  filter:drop-shadow(0 0 7px rgba(0,255,230,.45));
}


/* Játékborítók – egységes 2:1 képarány */
.cover{
  height:auto !important;
  aspect-ratio:2 / 1 !important;
  overflow:hidden;
  background:#061326;
}
.cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block;
}
@media(max-width:650px){
  .cover{height:auto !important;aspect-ratio:2 / 1 !important;}
}


/* Játéklista lapozás – PC: 6 / oldal, mobil: 3 / oldal */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0 8px;
}
.pagination button{
  min-width:40px;
  height:40px;
  padding:0 12px;
  border:1px solid #285d8d;
  border-radius:10px;
  background:#081a34;
  color:#a9bed9;
  font:700 13px Inter,Arial,sans-serif;
  cursor:pointer;
  transition:.2s;
}
.pagination button:hover:not(:disabled){
  color:#fff;
  border-color:#6f57ff;
  background:#10284b;
  box-shadow:0 0 18px rgba(105,72,255,.22);
}
.pagination button.active{
  color:#fff;
  border-color:#7c4dff;
  background:linear-gradient(135deg,#7038ef,#3d5ee9);
  box-shadow:0 0 18px rgba(105,72,255,.32);
}
.pagination button:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.pagination-info{
  width:100%;
  text-align:center;
  margin-top:3px;
  color:#7189aa;
  font-size:11px;
}


/* Mobil kategória hamburger menü */
.filter-menu-toggle{
  display:none;
}

@media(max-width:650px){
  .toolbar{
    position:relative;
    align-items:stretch;
  }

  .filter-menu-toggle{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border:1px solid #285d8d;
    border-radius:11px;
    background:linear-gradient(180deg,#0c2241,#081932);
    color:#fff;
    font:800 13px Inter,Arial,sans-serif;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.2);
  }

  .filter-menu-toggle .hamburger-icon{
    font-size:20px;
    line-height:1;
  }

  .filter-menu-toggle .menu-arrow{
    color:#78cfff;
    transition:transform .2s ease;
  }

  .filter-menu-toggle.open .menu-arrow{
    transform:rotate(180deg);
  }

  .filters{
    display:none !important;
    width:100%;
    margin-top:8px;
    padding:8px;
    flex-direction:column !important;
    gap:6px !important;
    border:1px solid #285d8d;
    border-radius:12px;
    background:#07172e;
    box-shadow:0 15px 35px rgba(0,0,0,.38);
  }

  .filters.mobile-open{
    display:flex !important;
  }

  .filters button{
    width:100%;
    text-align:left;
    justify-content:flex-start;
    min-height:44px;
  }

  .search{
    width:100%;
    margin-top:10px;
  }

  .search input{
    width:100%;
  }
}


/* Fejlesztés alatt lévő, csak adminnak látható játék */
.cover{position:relative}
.dev-card{
  border-color:#a367ff !important;
  box-shadow:0 0 0 1px rgba(162,92,255,.18),0 14px 34px rgba(0,0,0,.28);
}
.dev-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  max-width:calc(100% - 20px);
  padding:7px 10px;
  border:1px solid rgba(255,195,76,.72);
  border-radius:999px;
  background:rgba(18,12,32,.88);
  color:#ffd46b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.55px;
  box-shadow:0 0 18px rgba(255,171,44,.22);
  backdrop-filter:blur(7px);
}