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

/* Body */
body { 
  font-family: Arial, sans-serif;
  background-color: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Dark Theme (Settings Toggle) */
body.dark-theme {
  background-color: #111;
  color: #eee;
}

body.dark-theme header { background: #000; }
body.dark-theme .tabs { background: #111; }
body.dark-theme .game-card { background: #111; }

/* Header */
header { 
  background: #111; 
  padding: 1rem; 
  text-align: center; 
  font-size: 2rem; 
  font-weight: bold; 
  border-bottom: 2px solid #444; 
}

/* Tabs */
.tabs { 
  display: flex; 
  justify-content: center; 
  background: #222; 
  border-bottom: 2px solid #444; 
}

.tab-button { 
  background: #333; 
  border: none; 
  color: #fff; 
  padding: 1rem 2rem; 
  margin: 0.5rem; 
  cursor: pointer; 
  font-size: 1rem; 
  border-radius: 5px 5px 0 0; 
  transition: 0.3s; 
}

.tab-button.active { background: #555; }
.tab-button:hover { background: #444; }

/* Main Content */
main { 
  flex: 1 1 auto; 
  display: flex; 
  flex-direction: column; 
  position: relative; 
  min-height: 0; 
}

/* Tabs Content */
.tab-content { 
  display: none; 
  flex-direction: column; 
  flex: 1 1 auto; 
  min-height: 0; 
}

.tab-content.active { display: flex; }

/* -------------------------
   GAME GRID
   ------------------------- */
.game-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  gap: 1rem; 
  margin-bottom: 0.5rem; 
}

/* LIST VIEW (Settings toggle OFF) */
.list-view {
  grid-template-columns: 1fr !important;
}

/* -------------------------
   GAME CARD
   ------------------------- */
.game-card { 
  background: #222; 
  border-radius: 8px; 
  overflow: hidden; 
  cursor: pointer; 
  text-align: center; 
  transition: transform 0.2s, background-color 0.2s;
}

.game-card img { 
  width: 100%; 
  display: block; 
  height: 150px; /* default (medium) */ 
  object-fit: cover;
}

.game-card span { 
  display: block; 
  padding: 0.5rem; 
  font-weight: bold; 
}

.game-card:hover { 
  transform: scale(1.05); 
  background: #333; 
}

/* -------------------------
   THUMBNAIL SIZE CLASSES
   ------------------------- */
.game-card.small img {
  height: 100px !important;
}

.game-card.medium img {
  height: 150px !important;
}

.game-card.large img {
  height: 200px !important;
}

/* -------------------------
   Iframe
   ------------------------- */
.tab-content iframe { 
  flex: 1 1 auto; 
  width: 100%; 
  height: 100%; 
  border: none; 
  display: block; 
}

/* Settings Sections */
.settings-section { 
  background: #222; 
  padding: 1rem; 
  margin: 0.5rem; 
  border-radius: 8px; 
}

.settings-section h3 { margin-bottom: 0.5rem; }
.settings-section label { display: block; margin-bottom: 0.3rem; }

textarea { 
  width: 100%; 
  height: 60px; 
  background: #333; 
  color: #fff; 
  border: none; 
  padding: 0.5rem; 
  border-radius: 5px; 
}

select { 
  background: #333; 
  color: #fff; 
  border: none; 
  padding: 0.3rem; 
  border-radius: 5px; 
}

/* Fullscreen Button */
#fullscreenBtn { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  padding: 0.5rem 1rem; 
  background: #555; 
  color: #fff; 
  border: none; 
  border-radius: 5px; 
  cursor: pointer; 
  z-index: 999; 
}

#fullscreenBtn:hover { background: #777; }

/* Hide Scrollbars for Iframes */
iframe::-webkit-scrollbar { display: none; }