/*
Theme Name: GameLevel Pro
Theme URI: https://gamelevel.net/
Author: GameLevel
Description: Standalone professional gaming utility theme for GameLevel guides, tools, browser games, codes, and hubs.
Version: 1.0.0
Text Domain: gamelevel-pro
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
*/

:root {
  --gl-bg: #f6f7f9;
  --gl-bg-strong: #eceff3;
  --gl-surface: #ffffff;
  --gl-surface-soft: #fafbfc;
  --gl-ink: #111419;
  --gl-heading: #080a0f;
  --gl-muted: #586170;
  --gl-muted-2: #737d8c;
  --gl-border: #dce2ea;
  --gl-border-strong: #bac5d2;
  --gl-teal: #087f72;
  --gl-coral: #d83b4c;
  --gl-amber: #a86f00;
  --gl-indigo: #4257c8;
  --gl-lime: #4f7f11;
  --gl-focus: #f4b63f;
  --gl-radius: 8px;
  --gl-wide: 1200px;
  --gl-content: 760px;
  --gl-shadow: 0 16px 36px rgba(17, 20, 25, 0.08);
  --gl-shadow-soft: 0 6px 18px rgba(17, 20, 25, 0.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--gl-bg);
  color: var(--gl-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { max-width: 100%; }
img { height: auto; }
a { color: var(--gl-teal); text-underline-offset: 0.18em; }
a:hover { color: #065e55; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 3px; }
.screen-reader-text, .gl-skip-link {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}
.gl-skip-link:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  left: 16px;
  top: 16px;
  width: auto;
  z-index: 1000;
}
.gl-container {
  margin: 0 auto;
  max-width: var(--gl-wide);
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}
.gl-narrow { margin-left: auto; margin-right: auto; max-width: var(--gl-content); }
.gl-site { min-height: 100vh; }

.gl-site-header {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--gl-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.gl-site-header::before {
  background: linear-gradient(90deg, var(--gl-teal), var(--gl-coral), var(--gl-amber), var(--gl-indigo));
  content: "";
  display: block;
  height: 3px;
}
.gl-header-row {
  align-items: center;
  display: flex;
  gap: 18px;
  min-height: 68px;
}
.gl-brand {
  align-items: center;
  color: var(--gl-heading);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  text-decoration: none;
}
.gl-brand__mark {
  align-items: center;
  background: var(--gl-heading);
  border-radius: 7px;
  color: #fff;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 950;
  height: 38px;
  justify-content: center;
  letter-spacing: 0;
  width: 38px;
}
.gl-brand__text { display: grid; gap: 0; line-height: 1.05; }
.gl-brand__name { color: var(--gl-heading); font-size: 1.08rem; font-weight: 950; letter-spacing: 0; }
.gl-brand__tagline { color: var(--gl-muted); font-size: 0.74rem; font-weight: 750; }
.gl-menu-toggle {
  align-items: center;
  background: var(--gl-surface);
  border: 1px solid var(--gl-border-strong);
  border-radius: var(--gl-radius);
  color: var(--gl-heading);
  display: none;
  height: 44px;
  justify-content: center;
  margin-left: auto;
  width: 44px;
}
.gl-menu-toggle span, .gl-menu-toggle span::before, .gl-menu-toggle span::after {
  background: currentColor;
  border-radius: 2px;
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 18px;
}
.gl-menu-toggle span::before { position: absolute; top: -6px; }
.gl-menu-toggle span::after { position: absolute; top: 6px; }
.gl-primary-nav { align-items: center; display: flex; flex: 1 1 auto; gap: 6px; justify-content: center; }
.gl-primary-nav .gl-menu, .gl-primary-nav ul { align-items: center; display: flex; gap: 6px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.gl-primary-nav li { margin: 0; }
.gl-primary-nav a {
  align-items: center;
  border-radius: var(--gl-radius);
  color: var(--gl-heading);
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 850;
  min-height: 42px;
  padding: 8px 10px;
  text-decoration: none;
}
.gl-primary-nav a:hover, .gl-primary-nav a[aria-current="page"] { background: var(--gl-bg-strong); }
.gl-header-search { flex: 0 1 230px; }
.gl-search-form { align-items: center; display: flex; gap: 8px; }
.gl-search-form label { flex: 1 1 auto; min-width: 0; }
.gl-search-form input[type="search"] {
  background: var(--gl-surface-soft);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  color: var(--gl-ink);
  min-height: 42px;
  padding: 9px 11px;
  width: 100%;
}
input[type="text"], input[type="email"], input[type="url"], input[type="number"], textarea, select {
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  color: var(--gl-ink);
  min-height: 42px;
  padding: 9px 11px;
}
.gl-search-form button, .search-submit, input[type="submit"] {
  background: var(--gl-heading);
  border: 1px solid var(--gl-heading);
  border-radius: var(--gl-radius);
  color: #fff;
  font-weight: 850;
  min-height: 42px;
  padding: 8px 12px;
}
.gl-search-form button:hover, .search-submit:hover, input[type="submit"]:hover { background: #2b3039; }
.gl-section-rail { background: var(--gl-surface-soft); border-top: 1px solid var(--gl-border); }
.gl-section-rail__links { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 9px; padding-top: 9px; scrollbar-width: thin; }
.gl-section-rail a {
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: 999px;
  color: var(--gl-heading);
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 850;
  min-height: 34px;
  padding: 6px 11px;
  text-decoration: none;
}
.gl-section-rail a:hover { border-color: var(--gl-border-strong); box-shadow: var(--gl-shadow-soft); }

.gl-dashboard { padding-bottom: 42px; }
.gl-dashboard-top { background: var(--gl-bg-strong); border-bottom: 1px solid var(--gl-border); }
.gl-dashboard-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); padding-bottom: 28px; padding-top: 28px; }
.gl-kicker {
  color: var(--gl-teal);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.gl-dashboard-title {
  color: var(--gl-heading);
  font-size: clamp(2.05rem, 4.6vw, 4rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 14px;
  max-width: 900px;
}
.gl-dashboard-copy { color: var(--gl-muted); font-size: 1.07rem; margin: 0 0 18px; max-width: 760px; }
.gl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gl-button {
  align-items: center;
  background: var(--gl-heading);
  border: 1px solid var(--gl-heading);
  border-radius: var(--gl-radius);
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  text-decoration: none;
}
.gl-button:hover { background: #2b3039; color: #fff; }
.gl-button--secondary { background: #fff; border-color: var(--gl-border-strong); color: var(--gl-heading); }
.gl-button--secondary:hover { background: var(--gl-surface-soft); color: var(--gl-heading); }
.gl-dashboard-panel {
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-soft);
  padding: 18px;
}
.gl-playlist { display: grid; gap: 10px; }
.gl-playlist a {
  align-items: center;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  color: var(--gl-heading);
  display: grid;
  gap: 12px;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  min-height: 78px;
  padding: 8px;
  text-decoration: none;
}
.gl-playlist a:hover { border-color: var(--gl-border-strong); box-shadow: var(--gl-shadow-soft); }
.gl-playlist img { aspect-ratio: 16 / 9; border-radius: 6px; display: block; object-fit: cover; width: 78px; }
.gl-playlist strong { display: block; line-height: 1.2; }
.gl-playlist span { color: var(--gl-muted); display: block; font-size: 0.83rem; font-weight: 750; margin-top: 2px; }
.gl-playlist em { color: var(--gl-coral); font-size: 0.82rem; font-style: normal; font-weight: 950; }
.gl-metrics { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.gl-metric { background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); padding: 14px; }
.gl-metric:nth-child(1) { border-top: 4px solid var(--gl-teal); }
.gl-metric:nth-child(2) { border-top: 4px solid var(--gl-coral); }
.gl-metric:nth-child(3) { border-top: 4px solid var(--gl-amber); }
.gl-metric:nth-child(4) { border-top: 4px solid var(--gl-indigo); }
.gl-metric span { color: var(--gl-heading); display: block; font-size: 1.68rem; font-weight: 950; line-height: 1; }
.gl-metric strong { color: var(--gl-muted); display: block; font-size: 0.83rem; margin-top: 6px; }
.gl-section { margin: 30px auto; }
.gl-section__head, .gl-page-head { align-items: end; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 14px; }
.gl-section__head h1, .gl-section__head h2, .gl-page-head h1, .gl-page-head h2 { color: var(--gl-heading); letter-spacing: 0; line-height: 1.08; margin: 0; }
.gl-section__head h2 { font-size: 1.42rem; }
.gl-page-head h1, .gl-page-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
.gl-section__head p, .gl-page-head p { color: var(--gl-muted); margin: 4px 0 0; max-width: 760px; }
.gl-section__head > a { font-weight: 900; white-space: nowrap; }
.gl-page-head {
  align-items: start;
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  display: block;
  padding: 20px;
}
.gl-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gl-card {
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gl-card:hover { border-color: var(--gl-border-strong); box-shadow: var(--gl-shadow); color: inherit; transform: translateY(-2px); }
.gl-card:focus-visible { border-color: var(--gl-teal); box-shadow: 0 0 0 4px rgba(8, 127, 114, .18); outline: 0; }
.gl-card__thumb { background: var(--gl-bg-strong); display: block; overflow: hidden; width: 100%; }
.gl-card__thumb img { aspect-ratio: 16 / 9; display: block; object-fit: cover; transform: scale(1.001); transition: transform .22s ease; width: 100%; }
.gl-card:hover .gl-card__thumb img { transform: scale(1.035); }
.gl-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 14px; }
.gl-card > .gl-card__meta, .gl-card > h3, .gl-card > p { margin-left: 14px; margin-right: 14px; }
.gl-card > .gl-card__meta { margin-top: 14px; }
.gl-card > p:last-child { margin-bottom: 14px; }
.gl-card__meta { align-items: center; color: var(--gl-teal); display: flex; flex-wrap: wrap; font-size: 0.73rem; font-weight: 950; gap: 6px; letter-spacing: 0.08em; margin-bottom: 8px; text-transform: uppercase; }
.gl-card__pill { background: #eef8f6; border: 1px solid #cfe8e4; border-radius: 999px; color: #06675d; letter-spacing: 0; padding: 2px 7px; text-transform: none; }
.gl-card__pill--muted { background: #fff8e9; border-color: #efd18f; color: #755000; }
.gl-card h3 { color: var(--gl-heading); font-size: 1.04rem; line-height: 1.28; margin: 0 0 8px; }
.gl-card p { color: var(--gl-muted); font-size: 0.93rem; line-height: 1.48; margin: 0 0 14px; }
.gl-card__footer { align-items: center; border-top: 1px solid var(--gl-border); color: var(--gl-muted); display: flex; font-size: 0.82rem; font-weight: 800; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.gl-card--compact { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
.gl-card--compact .gl-card__thumb img { height: 100%; min-height: 112px; }
.gl-card--compact .gl-card__body { padding: 12px; }
.gl-game-category-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gl-category-card {
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  color: var(--gl-heading);
  min-height: 126px;
  padding: 16px;
  text-decoration: none;
}
.gl-category-card:hover { border-color: var(--gl-border-strong); box-shadow: var(--gl-shadow-soft); color: var(--gl-heading); }
.gl-category-card strong { display: block; font-size: 1.04rem; line-height: 1.25; }
.gl-category-card span { color: var(--gl-muted); display: block; font-size: 0.9rem; line-height: 1.42; margin-top: 6px; }
.gl-category-card:nth-child(1) { border-top: 4px solid var(--gl-teal); }
.gl-category-card:nth-child(2) { border-top: 4px solid var(--gl-coral); }
.gl-category-card:nth-child(3) { border-top: 4px solid var(--gl-amber); }
.gl-category-card:nth-child(4) { border-top: 4px solid var(--gl-indigo); }
.gl-library-controls { background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); margin: 16px 0 22px; padding: 14px; }
.gl-library-search { display: grid; gap: 7px; margin-bottom: 12px; }
.gl-library-search label { color: var(--gl-heading); font-size: 0.82rem; font-weight: 950; letter-spacing: 0.06em; text-transform: uppercase; }
.gl-library-search div { display: flex; gap: 8px; }
.gl-library-search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.gl-library-search button {
  background: var(--gl-surface-soft);
  border: 1px solid var(--gl-border-strong);
  border-radius: var(--gl-radius);
  color: var(--gl-heading);
  flex: 0 0 44px;
  font-size: 1.35rem;
  font-weight: 850;
  min-height: 42px;
  padding: 4px 10px;
}
.gl-library-search button:hover { background: var(--gl-bg-strong); }
.gl-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.gl-filter-button {
  background: var(--gl-surface);
  border: 1px solid var(--gl-border-strong);
  border-radius: 999px;
  color: var(--gl-heading);
  font-size: 0.88rem;
  font-weight: 850;
  min-height: 38px;
  padding: 7px 12px;
}
.gl-filter-button[aria-pressed="true"] { background: var(--gl-heading); border-color: var(--gl-heading); color: #fff; }
.gl-library-count { color: var(--gl-muted); font-size: 0.86rem; font-weight: 800; margin: 11px 0 0; }
.gl-hidden-by-filter { display: none !important; }
.gl-filter-empty { margin-top: 14px; }
.gl-empty { background: var(--gl-surface); border: 1px dashed var(--gl-border-strong); border-radius: var(--gl-radius); color: var(--gl-muted); padding: 18px; }

.gl-breadcrumbs { color: var(--gl-muted); font-size: 0.84rem; margin: 16px auto; max-width: var(--gl-wide); padding: 0 20px; }
.gl-breadcrumbs a { color: var(--gl-muted); }
.gl-breadcrumbs span { margin: 0 4px; }
.gl-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 320px; margin: 24px auto 42px; max-width: var(--gl-wide); padding: 0 20px; }
.gl-main { min-width: 0; }
.gl-sidebar { display: flex; flex-direction: column; gap: 14px; }
.gl-sidebar .gl-grid { grid-template-columns: 1fr; }
.gl-sidebar .gl-related { display: grid; gap: 12px; }
.gl-panel, .gl-side-panel, .gl-box {
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  padding: 16px;
}
.gl-side-panel h2, .gl-box h2, .gl-box h3 { color: var(--gl-heading); font-size: 1.08rem; letter-spacing: 0; line-height: 1.2; margin: 0 0 8px; }
.gl-footer-note { color: var(--gl-muted); font-size: 0.92rem; margin: 0; }
.gl-side-links { display: grid; gap: 8px; margin-top: 12px; }
.gl-side-links a { align-items: center; background: var(--gl-surface-soft); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); color: var(--gl-heading); display: flex; font-weight: 850; min-height: 42px; padding: 9px 11px; text-decoration: none; }
.gl-side-links a:hover { background: var(--gl-bg-strong); }
.gl-article { background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); padding: 30px; }
.gl-page-article { margin-left: auto; margin-right: auto; max-width: 980px; }
.gl-article__header { margin: 0 auto 20px; max-width: var(--gl-content); }
.gl-article__type { color: var(--gl-teal); font-size: 0.76rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }
.gl-article h1 { color: var(--gl-heading); font-size: clamp(2rem, 4.8vw, 3.35rem); letter-spacing: 0; line-height: 1.04; margin: 8px 0 12px; }
.gl-article__excerpt { color: var(--gl-muted); font-size: 1.08rem; margin: 0 0 14px; }
.gl-trust-strip { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.gl-trust-strip li { background: var(--gl-surface-soft); border: 1px solid var(--gl-border); border-radius: 999px; color: var(--gl-muted); font-size: 0.82rem; font-weight: 850; min-height: 32px; padding: 5px 10px; }
.gl-article-media { margin: 18px 0 0; }
.gl-article-media img { aspect-ratio: 16 / 9; border-radius: var(--gl-radius); display: block; object-fit: cover; width: 100%; }
.gl-entry { margin: 0 auto; max-width: var(--gl-content); }
.gl-entry > *:first-child { margin-top: 0; }
.gl-entry h2 { color: var(--gl-heading); font-size: 1.48rem; letter-spacing: 0; line-height: 1.18; margin-top: 2.15rem; }
.gl-entry h3 { color: var(--gl-heading); line-height: 1.25; margin-top: 1.55rem; }
.gl-entry p, .gl-entry li { color: var(--gl-ink); }
.gl-entry table, .gl-box table { border-collapse: collapse; display: block; overflow-x: auto; width: 100%; }
.gl-entry th, .gl-entry td, .gl-box th, .gl-box td { border: 1px solid var(--gl-border); padding: 10px; text-align: left; vertical-align: top; }
.gl-entry th, .gl-box th { background: var(--gl-surface-soft); color: var(--gl-heading); }
.gl-entry code { background: var(--gl-bg-strong); border-radius: 5px; padding: 2px 5px; }
.gl-editorial-box, .gl-toc, .gl-source-notes, .gl-safe-ad-slot {
  background: var(--gl-surface-soft);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  margin: 18px 0;
  padding: 14px;
}
.gl-editorial-box strong, .gl-toc strong { color: var(--gl-heading); display: block; margin-bottom: 8px; }
.gl-editorial-box ul, .gl-toc ol { margin: 0; padding-left: 20px; }
.gl-editorial-box li, .gl-toc li { margin: 4px 0; }
.gl-toc a { color: var(--gl-heading); font-weight: 800; text-decoration: none; }
.gl-toc a:hover { text-decoration: underline; }
.gl-toc__sub { margin-left: 12px; }
.gl-source-notes { background: #f8fafc; }
.gl-source-notes h2 { margin-top: 0; }
.gl-safe-ad-slot { align-items: center; color: var(--gl-muted); display: flex; justify-content: center; min-height: 120px; }
.gl-safe-ad-slot span { font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.gl-quick-answer, .gl-verified { background: #eef8f6; border: 1px solid #b8ded8; border-radius: var(--gl-radius); margin: 18px 0; padding: 16px; }
.gl-verified { background: #fff8e9; border-color: #efd18f; }
.gl-quick-answer strong, .gl-verified strong { color: var(--gl-heading); display: block; margin-bottom: 4px; }
.gl-code-table button, .gl-copy-code, .gl-tool-button, .gl-tool-controls button { background: var(--gl-teal); border: 0; border-radius: var(--gl-radius); color: #fff; font-weight: 850; min-height: 38px; padding: 8px 11px; }
.gl-code-table button:hover, .gl-copy-code:hover, .gl-tool-button:hover, .gl-tool-controls button:hover { background: #065e55; }
.gl-tool-frame {
  background: #101318;
  border: 1px solid #2a3039;
  border-radius: var(--gl-radius);
  color: #f4f7fb;
  margin: 18px auto 24px;
  max-width: 860px;
  min-height: 300px;
  padding: 18px;
}
.gl-tool-frame canvas { background: #0a0d12; border-radius: 6px; display: block; margin: 0 auto; }
.gl-tool-frame input, .gl-tool-frame select, .gl-tool-frame textarea { background: #fff; border: 1px solid var(--gl-border); border-radius: var(--gl-radius); color: var(--gl-ink); min-height: 42px; padding: 9px 10px; }
.gl-tool-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.gl-tool-controls button { min-height: 44px; }
.gl-game-shell .gl-article { padding-top: 22px; }
.gl-game-top { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 300px; margin-bottom: 20px; }
.gl-game-cover { background: var(--gl-bg-strong); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); box-shadow: var(--gl-shadow-soft); overflow: hidden; }
.gl-game-cover img { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; }
.gl-game-mini-nav {
  align-items: center;
  background: var(--gl-surface-soft);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
  padding: 9px;
  position: sticky;
  top: 118px;
  z-index: 12;
}
.gl-game-mini-nav a {
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: 999px;
  color: var(--gl-heading);
  font-size: 0.84rem;
  font-weight: 850;
  min-height: 36px;
  padding: 6px 11px;
  text-decoration: none;
}
.gl-game-mini-nav a:hover { border-color: var(--gl-border-strong); box-shadow: var(--gl-shadow-soft); }
.gl-game-stage {
  background: #15181f;
  border: 1px solid #29303a;
  border-radius: var(--gl-radius);
  color: #f6f8fb;
  margin: 18px auto 26px;
  max-width: 920px;
  padding: 18px;
  position: relative;
  scroll-margin-top: 150px;
  box-shadow: 0 24px 54px rgba(17, 20, 25, .18);
}
.gl-game-stage::before { background: linear-gradient(90deg, #087f72, #4257c8, #d83b4c); border-radius: var(--gl-radius) var(--gl-radius) 0 0; content: ""; height: 4px; inset: 0 0 auto; position: absolute; }
.gl-game-stage__head { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 14px; }
.gl-game-stage .gl-kicker { color: #8ee1d3; }
.gl-game-stage h2 { color: #fff; font-size: clamp(1.45rem, 3vw, 2.1rem); letter-spacing: 0; line-height: 1.12; margin: 0 0 6px; }
.gl-game-stage p { color: #c8d2df; margin: 0; }
.gl-game-stage__meta { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.gl-game-stage__meta span { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: #e8eef6; font-size: 0.78rem; font-weight: 850; min-height: 30px; padding: 4px 9px; }
.gl-game-stage__frame { background: #0b0e13; border: 1px solid #252c36; border-radius: var(--gl-radius); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); padding: 12px; }
.gl-game-stage .gl-tool-frame { border-color: transparent; margin: 0; max-width: none; min-height: 340px; padding: 12px; }
.gl-game-stage .gl-tool-frame canvas { max-height: 68vh; }
.gl-game-stage .gl-game-canvas-wrap canvas { border: 1px solid rgba(255,255,255,.12); box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.gl-game-guide { margin-top: 24px; scroll-margin-top: 150px; }
.gl-game-related { margin: 22px 0 0; scroll-margin-top: 150px; }
.gl-tool-top { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 300px; margin-bottom: 20px; }
.gl-tool-mini-nav {
  align-items: center;
  background: var(--gl-surface-soft);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
  padding: 9px;
  position: sticky;
  top: 118px;
  z-index: 12;
}
.gl-tool-mini-nav a {
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: 999px;
  color: var(--gl-heading);
  font-size: 0.84rem;
  font-weight: 850;
  min-height: 36px;
  padding: 6px 11px;
  text-decoration: none;
}
.gl-tool-mini-nav a:hover { border-color: var(--gl-border-strong); box-shadow: var(--gl-shadow-soft); }
.gl-tool-stage {
  background: #eef8f6;
  border: 1px solid #b8ded8;
  border-radius: var(--gl-radius);
  color: var(--gl-heading);
  margin: 18px auto 26px;
  max-width: 920px;
  padding: 18px;
  scroll-margin-top: 150px;
  box-shadow: var(--gl-shadow-soft);
}
.gl-tool-stage__head { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 14px; }
.gl-tool-stage h2 { color: var(--gl-heading); font-size: clamp(1.45rem, 3vw, 2.1rem); letter-spacing: 0; line-height: 1.12; margin: 0 0 6px; }
.gl-tool-stage p { color: var(--gl-muted); margin: 0; }
.gl-tool-stage__meta { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.gl-tool-stage__meta span { background: rgba(255,255,255,0.72); border: 1px solid #cfe8e4; border-radius: 999px; color: #06675d; font-size: 0.78rem; font-weight: 850; min-height: 30px; padding: 4px 9px; }
.gl-tool-stage__frame { background: var(--gl-surface); border: 1px solid #cfe8e4; border-radius: var(--gl-radius); padding: 12px; }
.gl-tool-stage .gl-tool-frame { background: var(--gl-surface); border-color: transparent; color: var(--gl-ink); margin: 0; max-width: none; min-height: 280px; padding: 12px; }
.gl-tool-stage .gl-tool-output { color: var(--gl-ink); }
.gl-tool-guide { margin-top: 24px; scroll-margin-top: 150px; }
.gl-tool-related { margin: 22px 0 0; scroll-margin-top: 150px; }
.gl-meta-grid { display: grid; gap: 8px; margin-top: 12px; }
.gl-meta-item { background: var(--gl-surface-soft); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); padding: 9px 10px; }
.gl-meta-item span { color: var(--gl-muted); display: block; font-size: 0.75rem; font-weight: 850; text-transform: uppercase; }
.gl-meta-item strong { color: var(--gl-heading); display: block; line-height: 1.25; margin-top: 2px; }
.gl-hub-hero { background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; margin-bottom: 18px; padding: 24px; }
.gl-hub-hero h1 { color: var(--gl-heading); font-size: clamp(2rem, 4vw, 3.15rem); letter-spacing: 0; line-height: 1.04; margin: 6px 0 10px; }
.gl-hub-hero p { color: var(--gl-muted); margin: 0; }
.gl-hub-hero__side { display: grid; gap: 12px; }
.gl-hub-quicklinks { display: grid; gap: 8px; }
.gl-hub-quicklinks a { background: var(--gl-surface-soft); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); color: var(--gl-heading); font-weight: 850; min-height: 42px; padding: 9px 11px; text-decoration: none; }
.gl-hub-quicklinks a:hover { background: var(--gl-bg-strong); }
.gl-hub-dashboard { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; }
.gl-hub-stat { background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); padding: 15px; }
.gl-hub-stat:nth-child(1) { border-top: 4px solid var(--gl-teal); }
.gl-hub-stat:nth-child(2) { border-top: 4px solid var(--gl-coral); }
.gl-hub-stat:nth-child(3) { border-top: 4px solid var(--gl-amber); }
.gl-hub-stat:nth-child(4) { border-top: 4px solid var(--gl-indigo); }
.gl-hub-stat span { color: var(--gl-heading); display: block; font-size: 1.65rem; font-weight: 950; line-height: 1; }
.gl-hub-stat strong { color: var(--gl-heading); display: block; font-size: 0.94rem; line-height: 1.2; margin-top: 7px; }
.gl-hub-stat p { color: var(--gl-muted); font-size: 0.88rem; line-height: 1.45; margin: 7px 0 0; }
.gl-hub-section { margin: 28px 0; }
.gl-hub-related td:first-child { font-weight: 850; min-width: 170px; }
.gl-search-box { background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-radius); margin-bottom: 18px; padding: 14px; }
.gl-pagination { margin-top: 20px; }
.gl-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-pagination a, .gl-pagination span { background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: 6px; min-width: 38px; padding: 8px 10px; text-align: center; }

.gl-site-footer { background: #15181f; color: #dce3ec; margin-top: 44px; }
.gl-footer-grid { display: grid; gap: 22px; grid-template-columns: 1.2fr repeat(3, minmax(0, 0.7fr)); padding-bottom: 30px; padding-top: 30px; }
.gl-site-footer a { color: #f6f8fb; text-decoration: none; }
.gl-site-footer a:hover { text-decoration: underline; }
.gl-footer-title { color: #fff; font-size: 1.1rem; font-weight: 950; margin: 0 0 8px; }
.gl-site-footer p { color: #b9c3cf; margin: 0; }
.gl-footer-links { display: grid; gap: 7px; margin-top: 10px; }
.gl-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); color: #aeb8c5; font-size: 0.86rem; padding: 14px 0; }

@media (max-width: 1100px) {
  .gl-header-search { display: none; }
  .gl-dashboard-grid, .gl-game-top, .gl-game-stage__head, .gl-tool-top, .gl-tool-stage__head, .gl-hub-hero { grid-template-columns: 1fr; }
  .gl-game-stage__meta, .gl-tool-stage__meta { justify-content: flex-start; }
  .gl-grid, .gl-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-game-category-grid, .gl-metrics, .gl-hub-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-layout { grid-template-columns: 1fr; }
  .gl-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gl-container { padding-left: 14px; padding-right: 14px; }
  .gl-header-row { min-height: 62px; }
  .gl-brand__tagline { display: none; }
  .gl-menu-toggle { display: inline-flex; }
  .gl-primary-nav {
    background: var(--gl-surface);
    border-bottom: 1px solid var(--gl-border);
    display: none;
    gap: 2px;
    grid-column: 1 / -1;
    justify-content: stretch;
    margin: 0 -14px;
    padding: 8px 14px 12px;
  }
  .gl-primary-nav.is-open { display: grid; }
  .gl-primary-nav .gl-menu, .gl-primary-nav ul { display: grid; gap: 2px; width: 100%; }
  .gl-primary-nav a { justify-content: flex-start; width: 100%; }
  .gl-header-row { flex-wrap: wrap; }
  .gl-dashboard-grid { padding-bottom: 22px; padding-top: 22px; }
  .gl-dashboard-title { font-size: clamp(2rem, 10vw, 2.7rem); }
  .gl-dashboard-panel { padding: 14px; }
  .gl-playlist a { grid-template-columns: 70px minmax(0, 1fr); }
  .gl-playlist em { display: none; }
  .gl-playlist img { width: 70px; }
  .gl-grid, .gl-grid--four, .gl-game-category-grid, .gl-metrics, .gl-hub-dashboard, .gl-sidebar, .gl-footer-grid { grid-template-columns: 1fr; }
  .gl-section { margin: 24px auto; }
  .gl-section__head { align-items: start; flex-direction: column; }
  .gl-section__head > a { white-space: normal; }
  .gl-layout { margin-top: 16px; padding-left: 14px; padding-right: 14px; }
  .gl-article, .gl-hub-hero, .gl-page-head { padding: 18px; }
  .gl-game-mini-nav, .gl-tool-mini-nav { position: static; }
  .gl-game-stage, .gl-tool-stage { margin-left: -4px; margin-right: -4px; padding: 12px; }
  .gl-game-stage__frame, .gl-tool-stage__frame { padding: 8px; }
  .gl-game-stage .gl-tool-frame, .gl-tool-stage .gl-tool-frame { min-height: 280px; padding: 10px; }
  .gl-game-stage .gl-tool-frame canvas, .gl-tool-stage .gl-tool-frame canvas { width: 100%; }
  .gl-trust-strip li { border-radius: var(--gl-radius); width: 100%; }
  .gl-card--compact { grid-template-columns: 1fr; }
  .gl-card--compact .gl-card__thumb img { min-height: 0; }
}