@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

* { box-sizing:border-box; margin:0; padding:0; }

body {
  background:#0a0e17;
  color:#00f5ff;
  font-family:'Orbitron',sans-serif;
  overflow-x:hidden;
  min-height:100vh;
}

/* ── ANIMATED BACKGROUND ── */
.bg-grid {
  position:fixed; inset:0; z-index:0;
  background:
    linear-gradient(0deg, transparent 24%, rgba(0,245,255,.03) 25%, rgba(0,245,255,.03) 26%, transparent 27%, transparent 74%, rgba(0,245,255,.03) 75%, rgba(0,245,255,.03) 76%, transparent 77%),
    linear-gradient(90deg, transparent 24%, rgba(0,245,255,.03) 25%, rgba(0,245,255,.03) 26%, transparent 27%, transparent 74%, rgba(0,245,255,.03) 75%, rgba(0,245,255,.03) 76%, transparent 77%);
  background-size:50px 50px;
  animation:gridScroll 20s linear infinite;
  pointer-events:none;
}
@keyframes gridScroll {
  0%   { transform:translate(0,0); }
  100% { transform:translate(50px,50px); }
}

.scanlines {
  position:fixed; inset:0; z-index:1;
  background:linear-gradient(0deg, transparent 50%, rgba(0,245,255,.015) 51%);
  background-size:100% 4px;
  pointer-events:none;
  animation:scanMove 8s linear infinite;
}
@keyframes scanMove {
  0%   { transform:translateY(0); }
  100% { transform:translateY(4px); }
}

/* ── HEADER ── */
header {
  position:relative; z-index:10;
  padding:60px 20px 40px;
  text-align:center;
  border-bottom:2px solid rgba(0,245,255,.2);
  background:linear-gradient(180deg, rgba(10,14,23,.95), rgba(10,14,23,.7));
  box-shadow:0 4px 30px rgba(0,245,255,.1);
}

h1 {
  font-size:clamp(40px, 8vw, 90px);
  font-weight:900;
  letter-spacing:12px;
  color:#00f5ff;
  text-shadow:
    0 0 20px #00f5ff,
    0 0 60px #00f5ff,
    0 0 100px rgba(0,245,255,.5);
  animation:glitchPulse 3s ease-in-out infinite, flicker 0.15s infinite;
  position:relative;
}

@keyframes glitchPulse {
  0%, 100% { text-shadow:0 0 20px #00f5ff, 0 0 60px #00f5ff, 0 0 100px rgba(0,245,255,.5); }
  50%      { text-shadow:0 0 40px #00f5ff, 0 0 120px #00f5ff, 0 0 200px rgba(0,245,255,.8); }
}

@keyframes flicker {
  0%, 100% { opacity:1; }
  41.99%   { opacity:1; }
  42%      { opacity:0.92; }
  43%      { opacity:1; }
  45.99%   { opacity:1; }
  46%      { opacity:0.88; }
  46.5%    { opacity:1; }
}

.tagline {
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(10px, 2vw, 14px);
  letter-spacing:6px;
  color:#ff00c8;
  text-shadow:0 0 10px #ff00c8;
  margin-top:10px;
  animation:pulseSlow 4s ease-in-out infinite;
}

@keyframes pulseSlow {
  0%, 100% { opacity:0.7; }
  50%      { opacity:1; }
}

.subtitle {
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  color:#4a6070;
  margin-top:20px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}

/* ── MAIN CONTENT ── */
main {
  position:relative; z-index:10;
  max-width:1400px;
  margin:0 auto;
  padding:60px 20px;
}

/* ── FEATURED SECTION ── */
.featured-section {
  margin-bottom:80px;
}

.section-title {
  font-size:24px;
  font-weight:700;
  letter-spacing:4px;
  color:#ff00c8;
  text-shadow:0 0 15px #ff00c8;
  margin-bottom:30px;
  text-align:center;
  position:relative;
  display:inline-block;
  left:50%;
  transform:translateX(-50%);
}

.section-title::before,
.section-title::after {
  content:'';
  position:absolute;
  top:50%;
  width:80px;
  height:2px;
  background:linear-gradient(90deg, transparent, #ff00c8);
}
.section-title::before { right:calc(100% + 20px); }
.section-title::after  { left:calc(100% + 20px); transform:scaleX(-1); }

.featured-game {
  background:linear-gradient(135deg, rgba(0,245,255,.05), rgba(255,0,200,.05));
  border:2px solid rgba(0,245,255,.3);
  border-radius:12px;
  padding:40px;
  box-shadow:0 0 40px rgba(0,245,255,.2);
  position:relative;
  overflow:hidden;
  transition:all 0.3s;
}

.featured-game::before {
  content:'';
  position:absolute;
  top:-2px; left:-2px; right:-2px; bottom:-2px;
  background:linear-gradient(45deg, #00f5ff, #ff00c8, #a8ff00, #00f5ff);
  background-size:300% 300%;
  animation:gradientShift 6s ease infinite;
  z-index:-1;
  border-radius:12px;
  opacity:0;
  transition:opacity 0.3s;
}

.featured-game:hover::before { opacity:1; }
.featured-game:hover { transform:translateY(-5px); box-shadow:0 10px 60px rgba(0,245,255,.4); }

@keyframes gradientShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

.featured-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.featured-info h2 {
  font-size:36px;
  font-weight:900;
  letter-spacing:3px;
  color:#00f5ff;
  text-shadow:0 0 20px #00f5ff;
  margin-bottom:15px;
}

.featured-meta {
  display:flex;
  gap:15px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.meta-badge {
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  letter-spacing:2px;
  padding:6px 14px;
  border:1px solid rgba(0,245,255,.5);
  border-radius:4px;
  color:#00f5ff;
  text-shadow:0 0 8px #00f5ff;
  background:rgba(0,245,255,.05);
}

.meta-badge.genre { border-color:#ff00c8; color:#ff00c8; background:rgba(255,0,200,.05); text-shadow:0 0 8px #ff00c8; }
.meta-badge.difficulty { border-color:#a8ff00; color:#a8ff00; background:rgba(168,255,0,.05); text-shadow:0 0 8px #a8ff00; }

.featured-desc {
  font-family:'Share Tech Mono',monospace;
  font-size:14px;
  line-height:1.8;
  color:#8aa8b8;
  margin-bottom:20px;
}

.featured-controls {
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  color:#4a6070;
  margin-bottom:25px;
}

.featured-controls strong {
  color:#00f5ff;
  text-shadow:0 0 8px #00f5ff;
}

.play-btn {
  display:inline-block;
  padding:16px 50px;
  background:rgba(0,245,255,.1);
  border:2px solid #00f5ff;
  color:#00f5ff;
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:4px;
  text-decoration:none;
  text-shadow:0 0 10px #00f5ff;
  box-shadow:0 0 30px rgba(0,245,255,.3);
  transition:all 0.3s;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.play-btn::before {
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(0,245,255,.3), transparent);
  transition:left 0.5s;
}

.play-btn:hover::before { left:100%; }
.play-btn:hover {
  background:rgba(0,245,255,.2);
  box-shadow:0 0 50px rgba(0,245,255,.6);
  transform:translateY(-2px);
}

.featured-thumb {
  position:relative;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 0 40px rgba(0,245,255,.3);
  border:2px solid rgba(0,245,255,.3);
}

.featured-thumb img {
  width:100%;
  height:auto;
  display:block;
  filter:brightness(0.9) contrast(1.1);
  transition:all 0.3s;
}

.featured-thumb:hover img {
  filter:brightness(1.1) contrast(1.2);
  transform:scale(1.05);
}

/* ── GAMES GRID ── */
.games-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:30px;
  margin-top:40px;
}

.game-card {
  background:rgba(10,20,35,.8);
  border:2px solid rgba(0,245,255,.2);
  border-radius:8px;
  overflow:hidden;
  transition:all 0.3s;
  cursor:pointer;
  position:relative;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}

.game-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0,245,255,.1), rgba(255,0,200,.1));
  opacity:0;
  transition:opacity 0.3s;
  pointer-events:none;
}

.game-card:hover { 
  border-color:#00f5ff;
  box-shadow:0 8px 40px rgba(0,245,255,.4);
  transform:translateY(-8px);
}

.game-card:hover::before { opacity:1; }

.game-thumb {
  width:100%;
  height:200px;
  background:linear-gradient(135deg, #0a1423, #1a2433);
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid rgba(0,245,255,.2);
  position:relative;
  overflow:hidden;
}

.game-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.8);
  transition:all 0.3s;
}

.game-card:hover .game-thumb img {
  filter:brightness(1);
  transform:scale(1.1);
}

.game-thumb .placeholder {
  font-size:60px;
  opacity:0.2;
}

.game-info {
  padding:20px;
}

.game-title {
  font-size:18px;
  font-weight:700;
  letter-spacing:2px;
  color:#00f5ff;
  text-shadow:0 0 10px #00f5ff;
  margin-bottom:10px;
}

.game-desc {
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  line-height:1.6;
  color:#6a8090;
  margin-bottom:15px;
  min-height:40px;
}

.game-meta {
  display:flex;
  gap:10px;
  margin-bottom:15px;
  flex-wrap:wrap;
}

.game-controls {
  font-family:'Share Tech Mono',monospace;
  font-size:10px;
  color:#4a6070;
  margin-bottom:15px;
}

.game-controls strong {
  color:#00f5ff;
}

.game-play-btn {
  display:block;
  text-align:center;
  padding:12px;
  background:rgba(0,245,255,.05);
  border:1px solid #00f5ff;
  color:#00f5ff;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  text-decoration:none;
  text-shadow:0 0 8px #00f5ff;
  transition:all 0.3s;
}

.game-play-btn:hover {
  background:rgba(0,245,255,.15);
  box-shadow:0 0 20px rgba(0,245,255,.4);
}

/* ── EMPTY STATE ── */
.empty-state {
  text-align:center;
  padding:80px 20px;
  color:#4a6070;
  font-family:'Share Tech Mono',monospace;
}

.empty-state .icon {
  font-size:80px;
  opacity:0.3;
  margin-bottom:20px;
}

/* ── GLITCH EFFECT ON HOVER ── */
@keyframes glitch {
  0%   { transform:translate(0); }
  20%  { transform:translate(-2px, 2px); }
  40%  { transform:translate(-2px, -2px); }
  60%  { transform:translate(2px, 2px); }
  80%  { transform:translate(2px, -2px); }
  100% { transform:translate(0); }
}

.game-card:hover .game-title {
  animation:glitch 0.3s ease-in-out;
}

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .featured-content {
    grid-template-columns:1fr;
  }
  
  .games-grid {
    grid-template-columns:1fr;
  }
  
  header { padding:40px 20px 30px; }
  
  h1 { letter-spacing:6px; }
  
  .section-title::before,
  .section-title::after { display:none; }
}