@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900;1000&family=Space+Mono:wght@700&display=swap');

/* ── TOKENS ── */
:root {
  --red:     #ff3c3c;
  --orange:  #ff6b00;
  --yellow:  #ffd000;
  --green:   #00c853;
  --blue:    #2979ff;
  --purple:  #aa00ff;
  --bg:      #1a1a2e;
  --bg2:     #16213e;
  --bg3:     #0f3460;
  --surf:    #1e2a45;
  --surf2:   #253552;
  --b1:      rgba(255,255,255,0.07);
  --b2:      rgba(255,255,255,0.14);
  --t1:      #ffffff;
  --t2:      #b0bcd4;
  --t3:      #6878a0;
  --accent:  #ff6b00;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust:100%; }
body {
  background: var(--bg);
  color: var(--t1);
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
img { display: block; }

/* ── NAV ── */
.nav {
  background: var(--bg2);
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: 2px solid var(--bg3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  align-self: stretch;
}
.brand img {
  height: 100%;
  width: auto;
  max-width: 220px;
  flex-shrink: 0;
  object-fit: contain;
}
.brand-txt { display: none; }

.nav-srch {
  flex: 1;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3);
  border: 2px solid var(--b2);
  border-radius: 50px;
  padding: 0 16px;
  height: 38px;
  transition: border-color .15s;
}
.nav-srch:focus-within { border-color: var(--orange); }
.nav-srch input {
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
}
.nav-srch input::placeholder { color: var(--t3); font-weight: 700; }

.nav-r { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }

.live {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,200,80,.15);
  border: 1px solid rgba(0,200,80,.3);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  white-space: nowrap;
}
.ldot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: lp 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lp { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── TICKER ── */
.ticker {
  background: var(--orange);
  height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker-track {
  display: inline-flex;
  animation: tk 25s linear infinite;
  white-space: nowrap;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes tk { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.tkitem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tkdot { font-size: 8px; opacity: .6; }

/* ── AD SLOTS ── */
.ad-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--b1);
  min-height: 68px;
}
.ad-mid {
  display: flex;
  justify-content: center;
  padding: 4px 0 20px;
}

/* ── FILTER BAR ── */
.fbar {
  background: var(--bg2);
  border-bottom: 2px solid var(--bg3);
  padding: 0 16px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fbar::-webkit-scrollbar { display: none; }

.fp {
  font-size: 12px;
  font-weight: 900;
  padding: 6px 16px;
  border-radius: 50px;
  border: 2px solid var(--b2);
  color: var(--t2);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
  letter-spacing: .3px;
}
.fp:hover { color: #fff; border-color: var(--orange); }
.fp.on {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* ── SECTION HEAD ── */
.sh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 2px;
}
.sh-title {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sh-more {
  font-size: 12px;
  font-weight: 800;
  color: var(--orange);
  transition: opacity .15s;
}
.sh-more:hover { opacity: .75; }

/* ── GAME GRID ── */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

/* ── GAME CARD ── */
.gcard {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surf);
  border: 2px solid var(--b1);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .15s;
}
.gcard:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--orange);
}
.gcard:active { transform: scale(.97); }

.gcard-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--bg3);
  display: block;
}
.gcard-img-ph {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.gcard-body {
  padding: 8px 10px 10px;
}
.gcard-name {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  line-height: 1.2;
}
.gcard-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 50px;
  background: var(--bg3);
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.gbadge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 50px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.badge-hot { background: var(--red); color: #fff; }
.badge-new { background: var(--green); color: #fff; }

/* ── MAIN WRAP ── */
.main { padding: 18px 16px; }
.shelf { margin-bottom: 28px; }

/* ── LOAD MORE ── */
.load-wrap { display: flex; justify-content: center; padding: 8px 0 28px; }
.load-btn {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: var(--surf2);
  border: 2px solid var(--b2);
  padding: 12px 32px;
  border-radius: 50px;
  transition: all .15s;
  letter-spacing: .3px;
}
.load-btn:hover { background: var(--orange); border-color: var(--orange); }

/* ── EMPTY ── */
.empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  text-align: center;
}
.empty.show { display: flex; }
.empty-icon { font-size: 48px; }
.empty-msg { font-size: 15px; font-weight: 800; color: var(--t2); }

/* ── FOOTER ── */
.footer {
  background: var(--bg2);
  border-top: 2px solid var(--bg3);
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-copy { font-size: 12px; font-weight: 700; color: var(--t3); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px; }
.footer-links a {
  font-size: 11px;
  font-weight: 800;
  color: var(--t3);
  padding: 4px 10px;
  border-radius: 50px;
  transition: color .15s, background .15s;
}
.footer-links a:hover { color: #fff; background: var(--surf2); }

/* ── SKELETON LOADING ── */
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.skel-card {
  pointer-events: none;
  cursor: default;
}
.skel-card:hover {
  transform: none !important;
  border-color: var(--b1) !important;
}
.skel-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(90deg, var(--bg3) 25%, var(--surf2) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skel-line {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg3) 25%, var(--surf2) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skel-title  { height: 14px; margin-bottom: 7px; }
.skel-tag-line { height: 10px; width: 42%; }

/* ── RESPONSIVE ── */
@media (max-width: 580px) {
  .brand-txt { display: none; }
  .live { display: none; }
  .nav-srch { max-width: none; }
  .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .footer { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}
@media (max-width: 340px) {
  .game-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}