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

/* Light mode rules */
:root[data-bs-theme="light"] {
  --brand-gradient: linear-gradient(135deg, #A8FF70, #00B36A);
  --brand-gradient2: linear-gradient(135deg, #00B36A, #A8FF70);
  --feature-bg: rgba(0, 179, 106, 0.10);
  --feature-fg: #00B36A;
  --feature-text: #00B36A;
  --link-text-hover: #A8FF70;
  --link-text: #00B36A;
  --hero-text: #0B1220;
  --card-border: rgba(0,0,0,0.08);
}

/* Dark mode rules */
:root[data-bs-theme="dark"] {
  --brand-gradient: linear-gradient(135deg, #A8FF70, #00B36A);
  --brand-gradient2: linear-gradient(135deg, #00B36A, #A8FF70);
  --feature-bg: rgba(0, 163, 96, 0.18);
  --feature-fg: #9AF7CA;
  --feature-text: #9AF7CA;
  --link-text: #9AF7CA;
  --link-text-hover: #A8FF70;
  --hero-text: #ffffff;
  --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);
}

.text-green {
    color: var(--feature-fg);
}
.btn-green {
	background: var(--brand-gradient);
	color: black;
}

.btn-green:hover {
	background: var(--brand-gradient2);
	color: white;
}

.btn-outline-green {
	border-style: solid;
	border-color: #9AF7CA;
	color: #9AF7CA;
}

.btn-outline-green:hover {
	border-style: solid;
	border-color: #A8FF70;
	color: #A8FF70;
}

/* 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; color: var(--link-text); }
a:hover { text-decoration: none; color: var(--link-text-hover); }

.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;
  }