:root {
  --bg:				#111111;
  --card-bg:		#111723;
  --text:			#e3e3e3;
  --title:			#ffffff;
  --subtitle:		#00e8ff;
  --green:			#8dff8d;
  --blue:			#75caff;
  --purple:			#c390ff;
  --orange:         #ffb347;  /* 🔶 bright orange for dark mode */
  --red:            #ff6b6b;  /* 🔴 new red for dark mode */
  --gray:			#666666;
  --underline:		#ffffff;
}

.light-theme {
  --bg:				#ffffff;
  --card-bg:		#daefff;
  --text:			#111111;
  --title:			#111111;
  --subtitle:		#00a2bb;
  --green:			#00bb20;
  --blue:			#0085e3;
  --purple:			#9134ff;
  --orange:         #e66b00;  /* 🟧 rich orange for light mode */
  --red:            #d10000;  /* 🔴 rich red for light mode */
  --gray:			#666666;
  --underline:		#2b2b2b;
}


body {
  font-family:		'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:		var(--bg);
  color:			var(--text);
  max-width:		1400px;
  margin:			0px auto 50px auto;
  line-height:		1.6;
}

header			{ text-align: center; }
.title			{ color: var(--title); margin: 20px 0px 0px; }
.subtitle		{ color: var(--subtitle); margin: 0; font-weight: 500; font-style: oblique;}
.green			{ color: var(--green); }
.blue			{ color: var(--blue); }
.purple			{ color: var(--purple); }
.orange			{ color: var(--orange); }
.red			{ color: var(--red); }
.grey			{ color: var(--grey); }
a				{ text-decoration: none; color: inherit; }
h2				{ margin: 30px 0px 0px 10px; font-size: 1.2em; }h4				{ margin: 30px 0px 0px 10px; }
b				{ font-weight: 500; text-decoration: underline; text-decoration-color: var(--underline);}

#theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 1000;
}

.game-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
}

.game-card {
  width: 260px;
  border: 1px solid #3d6fcf;
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.9em;
  background: var(--card-bg);
  color: inherit;
}

.game-card img {
  width: 100%;
  display: block;
}

.card-row {
  margin: 3px 0px;
  padding: 0px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section { padding-left: 2em; }

.playlist-thumb { max-width: 400px; width: 100%; height: auto; }

ul li::before { content: "•"; color: var(--green); margin-right: 0.8em; }
ul { list-style-type: none; /* removes bullets */ padding-left: 1.5em; /* gentle indent inside the section */ }
ul li { text-indent: -1.2em; /* brings the first line back if you prefer no visual indent */ }