*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

body{
margin:0;

font-family:
system-ui,
-apple-system,
Segoe UI,
Roboto,
sans-serif;

background:
radial-gradient(circle at 20% 20%,#2d323d 0%,#14161c 40%),
#0f1115;

color:white;
}

/* LIGHT MODE */

body.light{
background:
radial-gradient(circle at 20% 20%,#ffffff 0%,#e9edf3 40%),
#e9edf3;
color:#111;
}

body.light .logo{
background:none;
-webkit-text-fill-color:#111;

text-shadow:
0 0 6px rgba(255,0,0,0.5),
0 0 8px rgba(255,0,0,0.35),
0 0 14px rgba(255,0,0,0.2);

}

body.light .header::after{
background:#111;
}

body.light .logo-gear{
color:#444;
}

body.light .games{
background:none;
}

body.light .game{
background:linear-gradient(
180deg,
#ffffff,
#f2f4f7
);
color:#111;

box-shadow:
0 6px 14px rgba(0,0,0,0.15);
}

body.light .game:active{
background:#e7eaf0;
}

body.light .arrow{
opacity:0.5;
color:#444;
}

body.light .settings svg{
fill:#222;
}

body.light .settings-group h3{
color:#444;
}

body.light .back-btn{
color:#333;
}

body.light .settings{
color:#222;
}

.main-container{
max-width:420px;
margin:auto;
padding:16px;
}

/* HEADER */

.header{
display:flex;
justify-content:space-between;
align-items:center;

padding:
calc(env(safe-area-inset-top) + 10px)
20px
5px
20px;

position:sticky;
top:0;
z-index:100;

backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2.5px);
isolation:isolate;
}

.header::after{
content:"";
position:absolute;
left:20px;
right:20px;
bottom:0;
height:1.5px;
background:linear-gradient(
90deg,
#ffd700,
#fff6b0,
#ffd700
);
opacity:0.5;
}

.logo{
display:flex;
align-items:center;
gap:6px;

font-size:32px;
font-weight:700;
letter-spacing:1px;

background:linear-gradient(
90deg,
#ffd700 0%,
#fff6b0 45%,
#ffd700 100%
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 6px rgba(255,215,0,0.35),
0 0 12px rgba(255,215,0,0.15);

}

.logo img{
height:150px;
width:auto;
margin-right:-25px;
margin-left:-33px;
}

.logo-gear{
display:flex;
align-items:center;
gap:6px;

font-size:32px;
font-weight:700;
letter-spacing:1px;

color:grey;

text-shadow:
0 0 10px #ff3b3b,
0 0 10px #ff0000,
0 0 16px rgba(255,0,0,0.7);

}

.logo-gear img{
height:50px;
width:auto;
margin-right:3px;
margin-left:30px;
}

.back-btn{
display:flex;
align-items:center;
gap:6px;
background:none;
border:none;
color:#cfcfcf;
font-size:18px;
font-weight:500;
cursor:pointer;
padding:6px 8px;
transition:0.15s;
}

.back-btn svg{
display:block;
}

.back-btn:active{
transform:scale(0.9);
opacity:0.7;
}

.back-btn:hover{
text-shadow: 0 0 20px white;
}

.settings{
font-size:25px;
background:none;
border:none;
color:white;
opacity:0.7;
cursor:pointer;
transition:0.2s;

padding:10px;
border-radius:10px;

position:relative;
right:2px;
top:-45px;
}

.settings svg{
display:block;
}

.settings:active{

transform:scale(0.9);

}

.settings-container{
margin-top:30px;
}

.settings-group{
margin-bottom:28px;
}

.settings-group h3{
margin-bottom:10px;
color:#cfcfcf;
font-weight:600;
}

.settings-group label{
display:block;
margin:6px 0;
font-size:16px;
}


/* GRID */

.games{
max-width:620px;
margin:auto;
display:flex;
flex-direction:column;
gap:12px;
padding:10px 16px 40px;
padding-bottom:70px;
}


/* TABLET */

@media (min-width:600px){

.games{

grid-template-columns:1fr 1fr;

}

}



/* CARD */

.game{
display:flex;
align-items:center;
gap:16px;
padding:12px;
border-radius:16px;
background:linear-gradient(
180deg,
#1f232b,
#191c23
);
text-decoration:none;
color:white;
box-shadow:
0 6px 18px rgba(0,0,0,0.5);
transition:
transform 0.18s,
box-shadow 0.18s,
background 0.18s;
}

.game h2{
margin:0;
font-size:18px;
font-weight:600;
letter-spacing:0.2px;
}

.game img{
width:70px;
height:70px;
object-fit:cover;
border-radius:10px;
flex-shrink:0;
}

.title{
font-size:18px;
font-weight:600;
flex:1;
letter-spacing:0.3px;
}

.arrow{
font-size:26px;
opacity:0.35;
transition:0.2s;
}

/* TOUCH FEEDBACK */

.game:active{
transform:scale(0.97);
background:#242833;

}


/* DESKTOP HOVER */

@media (hover:hover){

.game{

transition:0.35s;

}

.game:hover{
transform:translateY(-8px) scale(1.03);
box-shadow:
0 25px 70px rgba(0,0,0,0.9);
}

.game:hover img{
transform:scale(1.08);
filter:brightness(1);
}

}

.hidden{
display:none;
}

/* SAFE AREA IOS */

@supports(padding:max(0px)){

body{
padding-left:max(0px,env(safe-area-inset-left));
padding-right:max(0px,env(safe-area-inset-right));

}

}

.signature-logo{
position:fixed;
bottom:12px;
right:12px;

width:55px;
height:auto;

opacity:0.65;
pointer-events:none;

z-index:1000;

transition:0.25s ease;
}

/* pe mobile mai mic */
@media (max-width:480px){
.signature-logo{
width:34px;
bottom:18px;
right:20px;
opacity:0.65;
}
}

/* optional: hover pe desktop */
@media (hover:hover){
.signature-logo:hover{
opacity:0.9;
transform:scale(1.08);
}
}

/* PAGE TRANSITIONS */

body{
opacity:0;
transform:scale(0.98);
transition:
opacity 0.35s ease,
transform 0.35s ease;
}

body.page-enter{
opacity:1;
transform:scale(1);
}

body.page-exit{
opacity:0;
transform:scale(0.98);
pointer-events:none;
}