:root{
  --red:#ff1e00;
  --black:#121212;
  --gray:#f5f5f7;
  --text:#222;
  --muted:#666;
  --white:#fff;
  --border:#e5e5e5;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',sans-serif;background:#fff;color:var(--text)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

 #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; display: flex;  justify-content: center; align-items: center; z-index: 9999; }

    /* Spinning circle */
 .spinner { border: 8px solid #f3f3f3; border-top: 8px solid var(--red); border-radius: 50%; width: 60px; height: 60px; animation: spin 1.2s linear infinite; }

 @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

.kh-header{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:11px; padding:10px 14px;background:var(--white);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.brand-dot{width:48px;height:48px;/* border-radius:50%;background:var(--red); */ display:inline-block;}
.brand-text{letter-spacing:.2px; font-size: 28px; text-align: center;}
.menu-toggle{background:none;border:1px solid var(--border);padding:4px 8px;border-radius:1px;cursor:pointer}
.header-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.points{background:var(--gray);padding:6px 10px;border-radius:999px;font-size:14px}
.profile-img { width:34px; height:34px; border-radius:50%; cursor:pointer; transition:transform 0.2s; border:2px solid #FF1E00; object-fit:cover; display:inline-block; }
.profile-img:hover { transform:scale(1.08); }

.side-menu{
  position:fixed;left:0;top:52px;bottom:0;width:250px;background:var(--white);border-right:1px solid var(--border);
  padding:12px;transform:translateX(-100%);transition:transform .25s ease;z-index:900} 
.side-menu.open{transform:translateX(0)}
.side-menu nav{display:flex;flex-direction:column;gap:10px}
.side-menu a{ padding:10px 12px;border-radius:1px;border:1px solid var(--border);background:#fff;text-align:left;cursor:pointer }
.side-menu a.active{border-color:var(--red);color:var(--red)}

/* COOKIE BANNER */
  .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; color: #000; padding: 15px; text-align: center;
    font-size: 14px; border-top: 3px solid #FF1E00; display: none; /* hidden by default */ z-index: 1500; }
  .cookie-banner.show { display: block; }
  .cookie-banner button { margin-left: 10px; padding: 5px 12px; border: none; cursor: pointer; font-weight: bold; }
  .accept-btn { background: #FF1E00; color: #fff; border-radius: 3px; }
  .reject-btn { background: transparent; color: #000; border: 1px solid #000; border-radius: 3px; }

.container{max-width:1200px;margin:20px auto;padding:0 16px}
.games-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.game-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;transition:transform .15s}
.game-card:hover{transform:translateY(-2px)}
.game-card h2{font-size:16px;margin:10px 12px}
.game-card p{font-size:14px;color:var(--muted);margin:0 12px 12px}

.game-tile {
  max-width:208px; height:288px; background:var(--black); border-radius:18px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 12px #f0ddda; }
.game-tile img {width:100%; height:100%; object-fit:cover;}
#gamesSlider::-webkit-scrollbar {display: none;}

.kh-footer{ border-top: 1px solid var(--border); padding: 8px; margin-top: 4px; margin-bottom: 4px; background: #fff; max-width: 1500px; display: flex; gap:10px; align-items: center; justify-content: space-between;flex-wrap: wrap; color: var(--muted); font-size: 14px; text-align: center;}
.footer-nav{display:flex;gap:10px;margin-top:6px; text-align: center;}

.playbar{ display:flex;align-items:center;gap:12px;justify-content:space-between; padding:10px;border:1px solid var(--border);border-radius:2px;background:#fff;margin-bottom:2px}

.game-title{font-size:18px;margin:0}
.control-group{display:flex;gap:8px}
.btn{background:var(--red);color:#fff;border:none;border-radius:4px;padding:8px 12px;cursor:pointer}
.btn-outline{background:#fff;color:var(--red);border:1px solid var(--red)}
.share-btn{display:block; margin:12px auto 0; padding:8px 14px; background:#FF1E00; color:#fff; border:none; border-radius:2px; cursor:pointer; font-weight:bold;}

.game-stage{height:90vh;border:1px solid var(--border);border-radius:2px;overflow:hidden;background:#000}
.game-stage iframe{width:100%;height:100%;border:0}

.back-to-top{
  position:fixed;right:16px;bottom:16px;background:var(--black);color:#fff;border:none;border-radius:999px;width:44px;height:44px;cursor:pointer;display:none
}
.back-to-top.show{display:block}

#google_translate_element {
  max-width: 198px !important;
  text-align: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* Force dropdown width */
.goog-te-combo {
  width: 198px !important;
  min-width: 198px !important;
  max-width: 198px !important;
  box-sizing: border-box;
  white-space: nowrap;
}


.guest-dialog::backdrop{background:rgba(0,0,0,0.6)}
.guest-dialog{padding:0px; border: none; border-radius:10px;}
.guest-content{min-width:320px;max-width:92vw; border-radius:10px; padding:18px; position:relative;
    box-shadow:0 10px 30px rgba(0,0,0,0.4); animation:pop .25s ease; max-height:90vh; overflow-y:auto;display:flex;flex-direction:column;gap:8px;background:#f0ddda;color:#333;}
 .guest-content img { width:120px; height:120px; border-radius:50%; margin:6px auto 12px; display:block; border:3px solid #FF1E00; object-fit:cover; }
.guest-dialog h2 { margin:6px 0 8px; color:#FF1E00; }
.close-btn { padding:0px; border: none; font-size:21px; cursor:pointer; color:#000; background:#f0ddda;}
.share-btn { display:block; margin:12px auto 0; padding:8px 14px; background:#FF1E00; color:#fff; border:none; border-radius:2px; cursor:pointer; font-weight:bold; }

.HideText {display: inline;}

.dropbtn {
  background-color: #fff;
  color: #000;
  padding: 10px 2px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  min-width: 198px;
 text-align: start;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  // position: absolute;
  background-color: #fff;
  min-width: 198px;
  // box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  border-radius: 4px;
  z-index: 1;
}
.dropdown-content a {
  color: #000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #222;
  color: #fff;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #fff;
}


@media (max-width:1024px){
  .games-grid{grid-template-columns:repeat(4,1fr)}
  .game-stage{height:50vh}
}
@media (max-width:880px){
  .game-stage{height:61vh}
}
@media (max-width:768px){
  .brand-text{letter-spacing:.2px; font-size: 21px; text-align: center;}
  .games-grid{grid-template-columns:repeat(2,1fr)}
  .game-stage{height:64vh}
}
@media (max-width:520px){
  .brand-text{letter-spacing:.1px; font-size: 17px; text-align: center;}
  .games-grid{grid-template-columns:2, 1fr}
  .brand-text{display:inline}
  .container{margin-top:14px}
  .HideText {display: none;}
}

@media only screen and (max-width: 480px) {
  .game-stage{height:78vh;margin:0px; padding:0px}
  .brand-dot{width:31px;height:31px;}
}

@media only screen and (max-width: 400px) {
  .game-stage{height:98vh;margin:0px; padding:0px}
  .brand-dot{width:28px;height:28px;}
}