/* ------------------------------------
   Custom theming + Bootstrap dark-mode
------------------------------------ */

/* Light mode rules */
:root[data-bs-theme="light"] {
  --brand-gradient: linear-gradient(135deg, #4f46e5, #0ea5e9);
  --feature-bg: rgba(79,70,229,0.1);
  --feature-fg: #4f46e5;
  --hero-text: #ffffff;
  --card-border: rgba(0,0,0,0.08);
}

/* Dark mode rules */
:root[data-bs-theme="dark"] {
  --brand-gradient: linear-gradient(135deg, #6366f1, #22d3ee);
  --feature-bg: rgba(99,102,241,0.18);
  --feature-fg: #a5b4fc;
  --hero-text: #ffffff; /* or #0b1220 if dark gradient is light */
  --card-border: rgba(255,255,255,0.12);
}

/* HERO */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 4.5rem 1rem;
  background: var(--brand-gradient);
  color: var(--hero-text);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  z-index: -1;
}

.hero .lead { max-width: 52ch; }

/* FEATURE ICON */
.feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--feature-bg);
  color: var(--feature-fg);
}

/* CARD + FOOTER */
.card { border-color: var(--card-border); }

.footer a { text-decoration: none; }
.footer a:hover,
.footer a:focus { text-decoration: underline; }

/* Utilities */
a { text-decoration: none; }

.clickable { cursor: pointer; }
.clickable:hover { opacity: 90%; }

/* Hide scrollbars */
html {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}

.game-card {
    border-radius: .75rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, #1b1e2a, #141624);
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
  }
  .game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
  .game-thumb {
    aspect-ratio: 16 / 9;
    background: #0e0f13;
    display: grid;
    place-items: center;
  }
  .game-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .game-body {
    padding: .75rem .9rem;
    display: flex; align-items: center; justify-content: space-between;
  }
  .game-title { margin: 0; font-weight: 600; font-size: 1rem; color: #e9ecf4; }
  .game-cta { color: #5b8cff; font-weight: 600; }

  /* Modal iframe should fill modal body */
  .modal-body {
    padding: 0;
    height: min(80vh, 100dvh);
  }
  #gameFrame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
  }