*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#e6e6e6;
font-family:'Luckiest Guy', cursive;
min-height:100vh;
display:flex;
flex-direction:column;
}

.topbar{
background:#444444;
padding:24px 0;
text-align:center;
}

.topbar h1{
color:white;
font-size:34px;
letter-spacing:1px;
}

.container{
padding-top:110px;
padding-left:18px;
padding-right:18px;
padding-bottom:18px;
}

.card{
background:#4d4d4d;
border:4px solid #2d2d2d;
overflow:hidden;
margin-bottom:32px;
}

.card-image{
width:100%;
aspect-ratio:16/9;
overflow:hidden;
background:black;
}

.card-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.card-bottom{
background:white;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:18px;
}

.age{
font-size:28px;
color:black;
flex-shrink:0;
}

.card-title{
flex:1;
font-size:28px;
color:black;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.android-logo{
font-size:34px;
color:black;
flex-shrink:0;
}

.card-link{
text-decoration:none;
}

.detail-container{
padding:18px;
}

.detail-banner{
width:100%;
display:block;
}

.section-title{
display:flex;
align-items:center;
gap:14px;
margin-top:38px;
margin-bottom:26px;
}

.red-line{
width:10px;
height:64px;
background:#ff4a4a;
}

.section-title h2{
font-size:48px;
color:black;
}

.info-box{
border-left:8px solid #444;
padding-left:18px;
}

.info-box p{
font-size:28px;
line-height:1.5;
margin-bottom:16px;
}

.description{
font-size:28px;
line-height:1.5;
margin-bottom:34px;
}

.discord-btn,
.wa-btn{
height:102px;
border-radius:24px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
text-decoration:none;
margin-bottom:28px;
}

.discord-btn{
background:#5360ff;
}

.wa-btn{
background:#1fe916;
}

.btn-icon{
width:70px;
display:flex;
justify-content:center;
align-items:center;
flex-shrink:0;
}

.btn-icon i{
font-size:52px;
color:white;
}

.btn-text{
flex:1;
text-align:center;
color:white;
font-size:40px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.ss-title{
font-size:42px;
margin-bottom:24px;
}

.ss-img{
width:100%;
display:block;
margin-bottom:30px;
}

.tags{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:16px;
margin-top:8px;
}

.tags h3{
font-size:42px;
}
.tag{
display:inline-flex;
align-items:center;
justify-content:center;
border:4px solid #222;
background:white;
padding:10px 24px;
border-radius:16px;
font-size:26px;
text-decoration:none;
color:black;
}

.download-box{
display:flex;
gap:18px;
margin-top:55px;
margin-bottom:35px;
}

.download-btn{
flex:1;
background:#5360ff;
color:white;
text-decoration:none;
text-align:center;
padding:28px 10px;
border-radius:20px;
font-size:28px;
}

@media(max-width:700px){

.topbar{
padding:18px 0;
}

.topbar h1{
font-size:24px;
}

.container,
.detail-container{
padding:12px;
}

.card-bottom{
padding:14px;
gap:10px;
}

.age{
font-size:18px;
}

.card-title{
font-size:18px;
}

.android-logo{
font-size:24px;
}

.section-title{
margin-top:30px;
margin-bottom:22px;
}

.red-line{
width:7px;
height:42px;
}

.section-title h2{
font-size:28px;
}

.info-box{
padding-left:14px;
}

.info-box p{
font-size:18px;
margin-bottom:12px;
}

.description{
font-size:20px;
margin-bottom:26px;
}

.discord-btn,
.wa-btn{
height:76px;
padding:0 16px;
border-radius:18px;
margin-bottom:20px;
}

.btn-icon{
width:42px;
}

.btn-icon i{
font-size:34px;
}

.btn-text{
font-size:22px;
}

.ss-title{
font-size:28px;
}

.tags{
gap:12px;
}

.tags h3{
font-size:28px;
}

.tag{
font-size:18px;
padding:8px 14px;
border-radius:12px;
}

.download-box{
gap:14px;
margin-top:40px;
}

.download-btn{
font-size:18px;
padding:18px 8px;
border-radius:16px;
}

}

.topbar{
background:#444;
padding:20px 0;
text-align:center;
position:fixed;
top:0;
left:0;
width:100%;
z-index:99999;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

.topbar h1{
color:white;
font-size:35px;
font-family:'Luckiest Guy', cursive;
}

.search-icon{
position:absolute;
right:25px;
top:50%;
transform:translateY(-50%);
font-size:42px;
text-decoration:none;
color:white;
}

.search-icon:visited{
color:white;
}
@media(max-width:700px){

.topbar{
padding:18px;
}

.topbar h1{
font-size:24px;
}

.search-icon{
font-size:30px;
right:18px;
}

.card-bottom{
font-size:15px;
padding:12px;
}

.search-box input{
font-size:18px;
}

.discord-btn,
.whatsapp-btn{
font-size:18px;
padding:16px;
}

.left-icon,
.right-icon{
font-size:28px;
}

.title{
font-size:22px;
}

.img-grid{
grid-template-columns:1fr;
}

.img-grid img{
height:240px;
}

.download-btn{
width:180px;
font-size:20px;
padding:15px;
}

}

body{
  margin:0;
  background:#ececec;
  font-family:'Luckiest Guy', cursive;
}

header{
  background:#4b4b4b;
  padding:22px 0;
  text-align:center;
}

header h1{
  color:white;
  margin:0;
  font-size:38px;
  font-weight:normal;
  letter-spacing:1px;
}

.search-page{
  width:100%;
  max-width:900px;
  margin:auto;
  padding:25px 18px 40px;
  box-sizing:border-box;
}

.search-box{
  width:100%;
  height:95px;
  background:white;
  border:4px solid black;
  border-radius:28px;
  display:flex;
  align-items:center;
  overflow:hidden;
  box-sizing:border-box;
}

.search-box input{
  flex:1;
  height:100%;
  border:none;
  outline:none;
  padding:0 25px;
  font-size:32px;
  font-family:'Luckiest Guy', cursive;
  background:none;
}

.search-box input::placeholder{
  color:black;
}

.search-box button{
  width:110px;
  height:100%;
  border:none;
  background:none;
  font-size:52px;
  cursor:pointer;
}

.discord-btn,
.whatsapp-btn{
  width:100%;
  height:105px;
  margin-top:38px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  box-sizing:border-box;
  text-decoration:none;
  color:white;
  font-size:33px;
  box-shadow:0 5px 0 rgba(0,0,0,0.25);
}

.discord-btn{
  background:#4b57ff;
}

.whatsapp-btn{
  background:#19e414;
}

.discord-btn i,
.whatsapp-btn i{
  font-size:58px;
}

.big-title{
  text-align:center;
  margin-top:50px;
  margin-bottom:35px;
  font-size:38px;
  line-height:1.3;
  padding:0 10px;
}

.img-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.img-grid img{
  width:100%;
  border:4px solid black;
  display:block;
  object-fit:cover;
  aspect-ratio:9/16;
}

.blue-btn{
  width:260px;
  height:88px;
  margin:38px auto 0;
  background:#4b57ff;
  border:4px solid black;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  text-decoration:none;
  font-size:32px;
  box-shadow:0 5px 0 rgba(0,0,0,0.3);
}

@media(max-width:600px){

header{
padding:16px 0;
}

header h1{
font-size:24px;
}

.search-page{
padding:14px;
}

.search-box{
height:68px;
border-radius:18px;
}

.search-box input{
font-size:18px;
padding:0 15px;
}

.search-box button{
width:65px;
font-size:28px;
}

.discord-btn,
.whatsapp-btn{
height:72px;
font-size:18px;
padding:0 16px;
border-radius:18px;
margin-top:18px;
}

.discord-btn i,
.whatsapp-btn i{
font-size:30px;
}

.big-title{
font-size:22px;
margin-top:35px;
margin-bottom:22px;
line-height:1.4;
}

.img-grid{
gap:10px;
}

.img-grid img{
border:3px solid black;
border-radius:4px;
}

.blue-btn{
width:170px;
height:58px;
font-size:20px;
border-radius:14px;
margin-top:25px;
}

}
.not-found{
display:none;
text-align:center;
font-size:32px;
margin-top:40px;
color:black;
}
img{
pointer-events:none;
user-select:none;
-webkit-user-drag:none;
-webkit-touch-callout:none;
}

body{
-webkit-touch-callout:none;
}
@media(max-width:700px){

.container{
padding-top:95px;
}

.detail-container{
padding-top:95px;
}

}

@media(min-width:701px){

.container{
padding-top:110px;
}

.detail-container{
padding-top:110px;
}

}
.container{
flex:1;
}

.copyright{
text-align:center;
padding:25px 10px;
font-size:18px;
color:white;
background:#444;
line-height:1.6;
margin-top:auto;
}
.menu-btn{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
background:none;
border:none;
color:white;
font-size:34px;
z-index:1000000;
cursor:pointer;
}

.menu-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.15);
opacity:0;
pointer-events:none;
transition:0.25s;
z-index:999998;
}

.menu-overlay.active{
opacity:1;
pointer-events:auto;
}

.sidebar{
position:fixed;
top:0;
left:-285px;
width:285px;
height:100%;
background:#4a4a4a;
z-index:999999;
transition:0.25s;
overflow-y:auto;
}

.sidebar.active{
left:0;
}

.sidebar-top{
margin-top:108px;
border-top:4px solid white;
border-bottom:4px solid white;
padding:26px 0;
}

.menu-link{
position:relative;
display:flex;
align-items:center;
padding-left:70px;
height:72px;
color:white;
text-decoration:none;
font-size:28px;
font-family:'Luckiest Guy', cursive;
}

.menu-link::before{
content:"";
position:absolute;
left:18px;
width:34px;
height:34px;
border:4px solid white;
border-radius:50%;
box-sizing:border-box;
}

.sidebar-banner{
padding:28px 18px 40px;
text-align:center;
}

.sidebar-banner h2{
font-size:26px;
line-height:1.35;
color:white;
margin-bottom:24px;
}

.sidebar-banner img{
width:100%;
display:block;
margin-bottom:26px;
}

.sidebar-btn{
display:flex;
align-items:center;
justify-content:center;
width:170px;
height:68px;
margin:auto;
background:white;
color:black;
text-decoration:none;
font-size:24px;
border-radius:20px;
border:4px solid black;
box-shadow:0 5px 0 rgba(0,0,0,0.4);
}

.topbar{
background:#444;
height:82px;
display:flex;
align-items:center;
justify-content:center;
position:fixed;
top:0;
left:0;
width:100%;
z-index:99999;
box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

.topbar h1{
color:white;
font-size:26px;
font-family:'Luckiest Guy', cursive;
white-space:nowrap;
overflow:hidden;
padding:0 70px;
}

.search-icon{
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
font-size:28px;
text-decoration:none;
color:white;
}
.genre-box{
display:flex;
align-items:center;
justify-content:center;
width:145px;
height:58px;
padding:0 8px;
background:white;
color:black;
text-decoration:none;
font-size:clamp(11px,3vw,15px);
border-radius:18px;
border:3px solid black;
box-sizing:border-box;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.genres-wrap{
padding-top:110px;
padding-left:14px;
padding-right:14px;
display:flex;
flex-wrap:wrap;
gap:14px;
justify-content:center;
}
.pagination{
display:flex;
justify-content:center;
gap:10px;
margin-top:30px;
flex-wrap:wrap;
}

.pagination a{
min-width:45px;
height:45px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
background:white;
border:3px solid black;
border-radius:12px;
text-decoration:none;
color:black;
font-size:18px;
white-space:nowrap;
}

.pagination a.active-page{
background:#5360ff;
color:white;
}

.wa-btn{
background:#1fe916;
box-shadow:0 5px 0 rgba(0,0,0,0.25);
}