/* ============================================
   GamesOMG — main.css
   Shared styles for all pages
   ============================================ */

/* ── VARIABLES ── */
:root {
  /* Light-theme accents (2026-07-13): orange = the brand #f08000, full stop — it
     matches the hardcoded nav/ad/cookie buttons so every orange on the page is the
     SAME orange (darkening it for contrast turned it burnt-red anyway). The blue
     darkens cleanly without a hue shift, so it carries the link contrast (4.4:1).
     Body-text readability is dark-on-light, independent of accent color. */
  --orange: #f08000;
  --orange-dim: rgba(240,128,0,0.15);
  --orange-border: rgba(240,128,0,0.35);
  --blue: #1668c9;
  --blue-dim: rgba(22,104,201,0.11);
  --blue-border: rgba(22,104,201,0.35);
  /* Warm light theme (2026-07-13) — off-white ground, white cards, near-black text, warm hairlines. Accents unchanged. */
  --bg: #ebe7df;
  --bg-surface: #e1dccf;
  --bg-card: #ffffff;
  --bg-nav: #ffffff;
  --border: #d8d1c3;
  --border-hover: #c3b9a4;
  --text: #1b1a16;
  --text-muted: #585b54;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Root size ramps up on bigger screens so desktop/laptop reads comfortably
   large (≈150% on wide displays), while phones keep their tuned size — 150%
   there would overflow. Everything on the site is sized in rem, so the whole
   layout (text, padding, boxes) scales from this one knob. Breakpoints are in
   px, so changing the root size never shifts them. */
html { scroll-behavior: smooth; font-size: 118.75%; }         /* phones: ~19px */
@media (min-width: 640px)  { html { font-size: 150%; } }      /* ~24px — your half-window lands here */
@media (min-width: 1024px) { html { font-size: 168.75%; } }   /* ~27px */
@media (min-width: 1280px) { html { font-size: 181.25%; } }   /* ~29px */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Urbanist', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── NAV ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(16,19,20,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 2rem;
}

.nav-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--orange);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.logo-accent { color: var(--orange); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text); }

.nav-cta {
  background: var(--orange);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
}

.nav-cta:hover { background: #ff8c00; color: #fff; transform: translateY(-1px); }

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text);
  flex-direction: column;
  gap: 5px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}

.nav-mobile {
  display: none;
  position: fixed;
  inset: 64px 0 0;
  background: var(--bg-nav);
  padding: 1.5rem 2rem;
  flex-direction: column;
  gap: 1rem;
  z-index: 99;
  border-top: 1px solid var(--border);
}

.nav-mobile.open { display: flex; }
.nav-mobile a { font-size: 1.1rem; font-weight: 500; color: var(--text-muted); padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.nav-mobile .nav-cta { border: none; text-align: center; margin-top: 0.5rem; padding: 0.75rem; font-size: 1rem; }

/* ── BREADCRUMB ── */
.breadcrumb {
  padding: 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--text); }

/* ── SECTION SHARED ── */
.section {
  padding: 1.5rem 2rem 3.5rem;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.35rem;
}

.section-title {
  font-family: 'Manrope', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}

.section-sub {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 0.3rem;
}

.view-all {
  color: var(--orange);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
  flex-shrink: 0;
}

.view-all:hover { gap: 7px; }

/* ── TAGS ── */
.tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
}

.tag-orange {
  background: var(--orange-dim);
  color: var(--orange);
  border: 1px solid rgba(240,128,0,0.2);
}

.tag-blue {
  background: var(--blue-dim);
  color: var(--blue);
  border: 1px solid var(--blue-border);
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-md);
  transition: background 0.2s, transform 0.1s;
  cursor: pointer;
  border: none;
}

.btn-primary:hover { background: #ff8c00; transform: translateY(-1px); color: #fff; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--blue);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--blue-border);
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}

.btn-secondary:hover { border-color: var(--blue); background: var(--blue-dim); color: var(--blue); }

.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── GAME CARDS ── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 12px;
}

.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
  display: block;
}

.game-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}

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

.game-card.featured {
  grid-column: span 2;
  grid-row: span 2;
  border-color: var(--blue-border);
}

.game-card.featured:hover { border-color: var(--blue); }

.game-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  position: relative;
  overflow: hidden;
}

.game-card.featured .game-thumb {
  aspect-ratio: 16/10;
  font-size: 3.5rem;
}

/* Game background gradients */
.ark-bg       { background: linear-gradient(135deg, #1a2830 0%, #243d35 50%, #1e3028 100%); }
.valheim-bg   { background: linear-gradient(135deg, #1e1a2e 0%, #3a2b58 50%, #1e1a2e 100%); }
.rust-bg      { background: linear-gradient(135deg, #2e1a1a 0%, #5a2a2a 50%, #2e1a1a 100%); }
.palworld-bg  { background: linear-gradient(135deg, #1a2a2e 0%, #28485c 50%, #1a2a2e 100%); }
.mc-bg        { background: linear-gradient(135deg, #1a2e1e 0%, #28582e 50%, #1a2e1e 100%); }
.conan-bg     { background: linear-gradient(135deg, #2a1e14 0%, #583c18 50%, #2a1e14 100%); }
.corekeeper-bg{ background: linear-gradient(135deg, #10242b 0%, #15454d 50%, #0e2a2e 100%); }
.zomboid-bg   { background: linear-gradient(135deg, #1a2214 0%, #385818 50%, #1a2214 100%); }
.enshrouded-bg { background: linear-gradient(135deg, #1a1a2e 0%, #2a2a58 50%, #1a1a2e 100%); }
.vrising-bg   { background: linear-gradient(135deg, #2e1a1a 0%, #4a1a2e 50%, #2e1a1a 100%); }
.sevendays-bg { background: linear-gradient(135deg, #1e1a14 0%, #3d2e14 50%, #1e1a14 100%); }
.vein-bg      { background: linear-gradient(135deg, #240e12 0%, #5e1820 50%, #240e12 100%); }
.astroneer-bg { background: linear-gradient(135deg, #1e1430 0%, #45236a 50%, #1e1430 100%); }
.renown-bg    { background: linear-gradient(135deg, #20242a 0%, #3a4450 50%, #20242a 100%); }
.windrose-bg  { background: linear-gradient(135deg, #12202e 0%, #1c3a52 50%, #12202e 100%); }
.soulmask-bg  { background: linear-gradient(135deg, #16241e 0%, #214a38 50%, #16241e 100%); }
.empyrion-bg  { background: linear-gradient(135deg, #0f1626 0%, #213a66 50%, #0f1626 100%); }
.abiotic-bg   { background: linear-gradient(135deg, #0e2420 0%, #155040 50%, #0e2420 100%); }
.sotf-bg      { background: linear-gradient(135deg, #141e22 0%, #284a52 50%, #141e22 100%); }
.dayz-bg      { background: linear-gradient(135deg, #1e201a 0%, #3e4226 50%, #1e201a 100%); }
.dune-bg      { background: linear-gradient(135deg, #2e1a0a 0%, #8a4a12 50%, #2e1a0a 100%); }
.hytale-bg    { background: linear-gradient(135deg, #161a32 0%, #2e3580 50%, #161a32 100%); }

.game-thumb-emoji {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.game-thumb-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.04) 0%, transparent 70%);
}

/* Branded game tile: game name as a wordmark on the themed gradient, with a
   faint oversized emoji watermark for instant identification. Zero copyright
   risk (no publisher art), consistent look, no image loading. Replaces the
   old single centered .game-thumb-emoji. */
.game-thumb-name {
  position: relative;
  z-index: 2;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  text-align: center;
  padding: 0 1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.game-card.featured .game-thumb-name { font-size: 2rem; }

.game-thumb-watermark {
  position: absolute;
  right: -8px;
  bottom: -14px;
  z-index: 1;
  font-size: 4.5rem;
  line-height: 1;
  opacity: 0.16;
  transform: rotate(-10deg);
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.game-card.featured .game-thumb-watermark { font-size: 7.5rem; right: -4px; bottom: -22px; }

.game-info { padding: 0.7rem 0.9rem; }
.game-card.featured .game-info { padding: 1rem 1.1rem; }

.game-info-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.game-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.3;
}

.game-card.featured .game-name { font-size: 1.05rem; }

.game-arrow {
  opacity: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: opacity 0.2s;
  flex-shrink: 0;
  margin-top: 2px;
}

.game-tags { display: flex; gap: 5px; flex-wrap: wrap; }

.game-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  z-index: 2;
}

.badge-new     { background: var(--orange); color: #fff; }
.badge-updated { background: var(--blue); color: #fff; }

.coming-soon-overlay {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  background: rgba(31,41,51,0.85);
  border: 1px solid var(--blue-border);
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  cursor: default;
}

/* Coming-soon tiles stay identifiable (branded plate shows through) but read
   as muted, and don't fake a hover/click affordance since they aren't links. */
.game-card:has(.coming-soon-overlay) .game-thumb { filter: saturate(0.55) brightness(0.82); }
.game-card:has(.coming-soon-overlay):hover { transform: none; border-color: var(--border); }

/* ── WHY CARDS ── */
.why-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.why-card {
  background: var(--bg-card);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
}

.why-icon {
  width: 42px;
  height: 42px;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.why-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--blue);
  margin-bottom: 0.4rem;
}

.why-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── PREVIEW WINDOW ── */
.preview-window {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 2rem;
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.75rem 1.2rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.win-dot   { width: 10px; height: 10px; border-radius: 50%; }
.win-red   { background: #ff5f57; }
.win-yellow { background: #febc2e; }
.win-green { background: #28c840; }

.window-title {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: 8px;
}

.preview-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.preview-left {
  padding: 1.5rem;
  border-right: 1px solid var(--border);
}

.preview-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}

.setting-name { font-size: 0.82rem; color: var(--text-muted); flex: 1; }

.slider-wrap {
  width: 80px;
  height: 4px;
  background: var(--bg-surface);
  border-radius: 2px;
  flex-shrink: 0;
}

.slider-fill { height: 100%; background: var(--orange); border-radius: 2px; }

.setting-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--orange);
  min-width: 32px;
  text-align: right;
}

.preview-right {
  padding: 1.5rem;
  background: transparent;
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  overflow: hidden;
}

.code-comment { color: var(--text-muted); line-height: 1.9; display: block; }
.code-line    { line-height: 1.9; white-space: nowrap; display: block; }
.code-key     { color: var(--text); }
.code-eq      { color: var(--text-muted); }
.code-val     { color: var(--orange); }

/* ── FOOTER CTA ── */
.footer-cta {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 4rem 2rem;
  text-align: center;
}

.footer-cta h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.footer-cta p {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* ── FOOTER ── */
.footer {
  background: var(--bg-nav);
  border-top: 1px solid var(--border);
  padding: 2rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-logo {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.footer-logo span { color: var(--orange); }

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  flex-wrap: wrap;
}

.footer-links a { color: var(--text-muted); font-size: 0.85rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }

.footer-copy { color: var(--text-muted); font-size: 0.8rem; }

/* ── ANIMATIONS ── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: blink 2s ease-in-out infinite;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .games-grid { grid-template-columns: repeat(2, 1fr); }
  .game-card.featured { grid-column: span 2; grid-row: span 1; }
  .why-grid { grid-template-columns: 1fr; }
  .preview-body { grid-template-columns: 1fr; }
  .preview-right { display: none; }
}

@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .section { padding: 2.5rem 1.5rem; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .games-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .game-card.featured { grid-column: span 2; }
  .footer-inner { flex-direction: column; text-align: center; }
  .cta-buttons { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   Sitewide scrollbar styling
   - Firefox uses scrollbar-color / scrollbar-width
   - Webkit (Chrome/Edge/Safari) uses ::-webkit-scrollbar-*
   Brand orange thumb, dark track that blends with surfaces.
════════════════════════════════════════════════════════════════ */

* {
  scrollbar-width: thin;
  scrollbar-color: #f08000 #0d0f0e;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #0d0f0e;
  border-radius: 0;
}
*::-webkit-scrollbar-thumb {
  background: #f08000;
  border: 2px solid #0d0f0e;
  border-radius: 8px;
  transition: background 0.15s;
}
*::-webkit-scrollbar-thumb:hover {
  background: #ff9420;
}
*::-webkit-scrollbar-thumb:active {
  background: #d66e00;
}
*::-webkit-scrollbar-corner {
  background: #0d0f0e;
}

/* ── AD SLOTS ──
   Wrapper around any AdSense <ins> on the site. Two slot types in use:
   .ad-slot-post-generator — bottom of generator pages, between the tool and SEO block
   .ad-slot-post-content   — bottom of content/guide pages, before the footer
   Both centered, capped at a leaderboard width, with breathing room so the ad
   doesn't crash into the surrounding content.
*/
.ad-slot {
  margin: 2.5rem auto;
  max-width: 728px;
  padding: 0 1rem;
  text-align: center;
}
.ad-slot ins.adsbygoogle {
  display: block;
  min-height: 90px; /* prevents layout jump before the ad fills */
}

/* Rail AdSense — center the served ad within the sidebar box (global, so it
   applies to every page's .rail-adsense regardless of inline/effigy CSS). */
.rail-adsense { text-align: center; }
.rail-adsense ins.adsbygoogle { display: block; }
.rail-adsense ins.adsbygoogle iframe { margin-left: auto; margin-right: auto; }