/* ga-ui.css — shared UI primitives (buttons first) */

:root{
  --btn-bg:#182036;
  --btn-bg2:#243157;
  --btn-border: rgba(255,255,255,.12);
  --btn-text:#cfd4ff;

  --btn-primary:#1bd760;
  --btn-primary2:#16c250;
  --btn-primary-text:#04150b;

  --btn-secondary:#2f3a5e;
  --btn-secondary-text:#cfe0ff;

  --btn-focus: rgba(120,170,255,.35);
}


.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  border:1px solid var(--btn-border);
  background:linear-gradient(180deg,var(--btn-bg),var(--btn-bg2));
  color:var(--btn-text);
  font-weight:600;

  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn.primary{
  border:0;
  background:linear-gradient(180deg,var(--btn-primary),var(--btn-primary2));
  color:var(--btn-primary-text);
  padding:10px 16px;
  font-size:14px;
  box-shadow: 0 0 0 1px rgba(27,215,96,.25), 0 10px 24px rgba(27,215,96,.12);
}

.btn.secondary{
  background: var(--btn-secondary);
  color: var(--btn-secondary-text);
  border:1px solid var(--btn-border);
}

/* For toggle buttons (TopCharts): .btn + .on */
.btn.on{
  border:0;
  background:linear-gradient(180deg,var(--btn-primary),var(--btn-primary2));
  color:var(--btn-primary-text);
}

/* Hover: lift + brighten */
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.25);
}
.btn.secondary:hover{
  filter: brightness(1.12);
  box-shadow: 0 0 0 1px rgba(120,140,200,.25), 0 10px 22px rgba(0,0,0,.25);
}
.btn.primary:hover,
.btn.on:hover{
  box-shadow: 0 0 0 1px rgba(27,215,96,.22), 0 14px 30px rgba(27,215,96,.10);
}

/* Active/pressed: push down */
.btn:active{
  transform: translateY(1px);
  filter: brightness(.98);
  box-shadow:none;
}

/* Keyboard focus */
.btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--btn-focus), 0 0 0 1px rgba(255,255,255,.12);
}

/* Disabled */
.btn:disabled,
.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  filter:none;
  box-shadow:none;
}

/* Optional “brand” variant used in GamesBrowser sometimes */
.btn.brand{
  border:0;
  background:linear-gradient(135deg,#6e6bff,#7f5af0);
  color:#fff;
}

/* ---------- Size/layout helpers (reusable site-wide) ---------- */
.btn.lg{
  padding:14px 18px;
  font-size:16px;
  border-radius:12px;
}

.btn.block{
  width:100%;
}

/* ---------------- Pricing page helpers (signup.php) ---------------- */
body.pricing .old-price{
  display:block;
  font-size:13px;
  opacity:.55;
  text-decoration:line-through;
  margin-bottom:4px;
}

body.pricing .new-price{
  display:inline-flex;
  align-items:baseline;
  gap:8px;

  padding:8px 12px;
  border-radius:12px;

  background:linear-gradient(180deg, rgba(27,215,96,.22), rgba(27,215,96,.08));
  border:1px solid rgba(27,215,96,.35);
  box-shadow: 0 0 0 1px rgba(27,215,96,.12), 0 14px 30px rgba(27,215,96,.10);

  color: var(--btn-primary);
  font-weight:900;
  letter-spacing:.2px;

  width:fit-content;
}

body.pricing .new-price .amount{
  font-size:28px;
  line-height:1.05;
  font-variant-numeric: tabular-nums;
}

body.pricing .new-price .per{
  font-size:16px;
  opacity:.9;
  font-weight:800;
}

body.pricing .promo-badge{
  display:inline-block;
  margin-top:10px;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(27,215,96,.12);
  border:1px solid rgba(27,215,96,.35);
  color:#dfffe9;
  font-weight:800;
}


/* ---------------- Pricing page links + inline Terms panel ---------------- */

/* Clean, readable, highlighted links (site-wide) */
a.gdi-link{
  color:#fff;
  font-weight:700;
  text-decoration:none;

  border-bottom:1px solid rgba(255,255,255,.38);
  padding:1px 2px;
  border-radius:8px;

  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}

a.gdi-link:hover{
  filter: brightness(1.08);
  border-bottom-color: rgba(255,255,255,.85);
}

a.gdi-link:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(110,107,255,.35);
}

/* “Pill” variant */
a.gdi-link.gdi-pill{
  border:1px solid rgba(255,255,255,.16);
  border-bottom:none;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(110,107,255,.10), 0 10px 22px rgba(0,0,0,.22);
}

a.gdi-link.gdi-pill:hover{
  background:rgba(255,255,255,.10);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(110,107,255,.18), 0 14px 30px rgba(0,0,0,.28);
}

/* Inline Terms panel */
body.pricing .terms-panel{
  margin-top:14px;
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

body.pricing .terms-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

body.pricing .terms-title{
  font-weight:800;
  letter-spacing:.2px;
}

body.pricing .terms-iframe{
  width:100%;
  height:min(78vh, 980px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:#0b0f1a;
}


/* Auth split buttons (Login + Sign up) */
.auth-split{
  display:flex;
  gap:10px;
  width:100%;
}
.auth-split > a{
  flex:1;
  text-decoration:none;
}
.auth-split .btn{
  width:100%;
}


.legal-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.legal-nav a{
  display:flex;
  align-items:center;
  gap:8px;
  color:#7f89a8;
  text-decoration:none;
  padding:5px 8px;
  margin:0;
  border-radius:8px;
  font-size:13px;
  line-height:1.2;
  min-height:auto;
}

.legal-nav a:hover{
  background:rgba(255,255,255,.04);
  color:#b9c2df;
}

.legal-label{
  color:#7f89a8;
  font-size:11px;
  letter-spacing:.04em;
  margin-bottom:4px;
}

.legal-icon{
  width:14px;
  text-align:center;
  opacity:.85;
}


/* =========================================================
   GameDevIntel shared layout styles
   index.php + homeLanding.html + topCharts.html
   ========================================================= */

:root{
  --bg:#0b0f1a;
  --panel:#111729;
  --panel-2:#0e1424;
  --muted:#9aa4bf;
  --text:#e6e9f5;
  --brand:#6e6bff;
  --brand-2:#7f5af0;
  --success:#2ecc71;
  --danger:#ff5c5c;
  --warning:#ffb74d;
  --chip:#1a2238;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

/* =========================================================
   index.php shell
   ========================================================= */

html.gdi-shell-html,
html.gdi-shell-html body.gdi-shell{
  height:100%;
  overflow:hidden;
}

body.gdi-shell{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.gdi-shell .app{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  min-height:100vh;
}

body.gdi-shell .sidebar{
  background:var(--panel);
  border-right:1px solid rgba(255,255,255,.06);
  padding:14px 22px 36px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:auto;
  z-index:40;
}

body.gdi-shell .brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
}

body.gdi-shell .brand h1{
  font-size:18px;
  margin:0;
}

body.gdi-shell .brand .brand-logo{
  width:225px;
  max-width:100%;
  height:auto;
  max-height:75px;
  object-fit:contain;
  display:block;
}

body.gdi-shell .beta-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:2px auto 12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(43,213,118,.12);
  border:1px solid rgba(43,213,118,.35);
  color:#c9f7dc;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  width:fit-content;
  align-self:center;
}

body.gdi-shell .search{
  margin:10px 0 14px;
}

body.gdi-shell .search-row{
  display:flex;
  align-items:center;
  gap:8px;
}

body.gdi-shell .search-row input{
  flex:1;
  min-width:0;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}

body.gdi-shell .search-btn{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--panel-2);
  color:#cfd4ff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

body.gdi-shell nav a{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
  margin:4px 0;
}

body.gdi-shell nav a:hover{
  background:#0c1325;
  color:var(--text);
}

body.gdi-shell nav a.active{
  background:rgba(110,107,255,.14);
  color:#cfd3ff;
}

body.gdi-shell .section-title{
  margin:20px 0 10px;
  color:#c7ccf8;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

body.gdi-shell .login-card{
  margin:12px 0;
  background:var(--panel-2);
  padding:16px;
  border-radius:12px;
  box-shadow:var(--shadow);
}

body.gdi-shell .login-btn{
  width:100%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  border:none;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}

body.gdi-shell .login-actions{
  display:flex;
  gap:10px;
}

body.gdi-shell .login-actions .login-btn{
  width:auto;
  flex:1;
  padding:12px 12px;
}

body.gdi-shell .login-btn.secondary{
  background:var(--panel);
  color:#cfe0ff;
  border:1px solid rgba(255,255,255,.12);
}

body.gdi-shell .user-box{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

body.gdi-shell .user-email{
  font-weight:600;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}

body.gdi-shell .tiny{
  color:var(--muted);
  font-size:12px;
}

body.gdi-shell .login-spacer{
  height:10px;
}

body.gdi-shell .login-foot{
  margin-top:8px;
}

body.gdi-shell .logout-link{
  color:#9aa4bf;
  text-decoration:underline;
  font-size:11px;
}

body.gdi-shell .sidebar-section-tight{
  margin-top:12px;
}

body.gdi-shell .topbar{
  display:none;
}

body.gdi-shell .main{
  height:100vh;
  overflow:hidden;
  padding:28px;
  background:
    radial-gradient(1200px 600px at 30% -10%, rgba(110,107,255,.07), transparent 40%),
    radial-gradient(900px 400px at 90% 10%, rgba(127,90,240,.08), transparent 40%);
}

body.gdi-shell .header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}

body.gdi-shell .filters{
  margin:18px 0 22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

body.gdi-shell .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:var(--chip);
  border:1px solid rgba(255,255,255,.07);
  color:#cfd4ff;
}

body.gdi-shell .chip select,
body.gdi-shell .chip input{
  background:transparent;
  color:inherit;
  border:none;
  outline:none;
}

body.gdi-shell .panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

body.gdi-shell .card{
  padding:16px;
}

body.gdi-shell .table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

body.gdi-shell .table th,
body.gdi-shell .table td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.06);
}

body.gdi-shell .table th{
  color:#aeb7d7;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.gdi-shell .badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  display:inline-block;
}

body.gdi-shell .b-success{
  background:rgba(46,204,113,.12);
  color:#8ff0b9;
}

body.gdi-shell .b-warning{
  background:rgba(255,183,77,.12);
  color:#ffd59b;
}

body.gdi-shell .b-danger{
  background:rgba(255,92,92,.12);
  color:#ffb3b3;
}

body.gdi-shell .page{
  display:none;
}

body.gdi-shell .page.active{
  display:block;
}

body.gdi-shell .paywall{
  padding:18px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:12px;
  background:#0e1424;
  color:#c7cdee;
}

body.gdi-shell .is-paid .paywall{
  display:none;
}

body.gdi-shell .workarea{
  width:100% !important;
  height:calc(100vh - 120px) !important;
  border:0 !important;
  border-radius:var(--radius);
  background:transparent;
  box-shadow:var(--shadow);
}

body.gdi-shell .workarea-home{
  height:calc(100vh - 56px) !important;
}

body.gdi-shell .mobile-scrim{
  display:none;
}

/* Tablet / narrow desktop: use icon rail */
@media (max-width:980px) and (min-width:701px){
  body.gdi-shell .app{
    grid-template-columns:72px minmax(0,1fr);
  }

  body.gdi-shell .sidebar{
    padding:12px 10px 36px;
    align-items:center;
    overflow:hidden;
  }

  body.gdi-shell .brand .brand-logo{
    width:46px;
    max-height:46px;
  }

  body.gdi-shell .search,
  body.gdi-shell .login-card,
  body.gdi-shell .legal-label,
  body.gdi-shell .hide-sm{
    display:none !important;
  }

  body.gdi-shell .beta-flag{
    font-size:9px;
    padding:5px 7px;
    white-space:normal;
    text-align:center;
    line-height:1.15;
  }

  body.gdi-shell .sidebar nav a{
    justify-content:center;
    width:42px;
    height:42px;
    padding:0;
    font-size:20px;
  }

  body.gdi-shell .topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    position:sticky;
    top:0;
    background:linear-gradient(180deg, rgba(11,15,26,.95), rgba(11,15,26,.75));
    backdrop-filter:blur(6px);
    z-index:10;
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  body.gdi-shell .mobile-toggle{
    background:var(--panel-2);
    border:1px solid rgba(255,255,255,.12);
    color:#cfd4ff;
    padding:8px 10px;
    border-radius:10px;
  }
}

/* Phone: hide sidebar completely until hamburger opens it */
@media (max-width:700px), (orientation: landscape) and (max-height:520px) and (pointer: coarse){
  html.gdi-shell-html,
  html.gdi-shell-html body.gdi-shell{
    height:100%;
    overflow:hidden;
  }

  body.gdi-shell .app{
    display:block;
    min-height:100dvh;
  }

  body.gdi-shell .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(84vw, 320px);
    height:100dvh;
    padding:16px;
    transform:translateX(-105%);
    transition:transform .18s ease;
    box-shadow:18px 0 40px rgba(0,0,0,.45);
    border-right:1px solid rgba(255,255,255,.10);
    align-items:stretch;
  }

  body.gdi-shell .sidebar.open,
  body.gdi-shell.gdi-nav-open .sidebar{
    transform:translateX(0);
  }

  body.gdi-shell .mobile-scrim{
    display:block;
    position:fixed;
    inset:0;
    z-index:30;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
  }

  body.gdi-shell .mobile-scrim[hidden]{
    display:none;
  }

  body.gdi-shell .brand .brand-logo{
    width:180px;
    max-height:58px;
  }

  body.gdi-shell .search,
  body.gdi-shell .login-card,
  body.gdi-shell .hide-sm{
    display:block;
  }

  body.gdi-shell nav a{
    min-height:42px;
  }

  body.gdi-shell .main{
    height:100dvh;
    overflow:hidden;
    padding:0;
  }

  body.gdi-shell .topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    height:56px;
    padding:0 12px;
    position:sticky;
    top:0;
    background:linear-gradient(180deg, rgba(11,15,26,.98), rgba(11,15,26,.88));
    backdrop-filter:blur(6px);
    z-index:20;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  body.gdi-shell .mobile-toggle{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--panel-2);
    border:1px solid rgba(255,255,255,.12);
    color:#cfd4ff;
    padding:0;
    border-radius:12px;
    font-size:20px;
  }

  body.gdi-shell .topbar-title{
    font-weight:700;
    text-align:center;
  }

  body.gdi-shell .topbar-spacer{
    width:42px;
    height:42px;
  }

  body.gdi-shell .page{
    height:calc(100dvh - 56px);
    overflow:hidden;
    padding:12px;
    box-sizing:border-box;
  }

  body.gdi-shell .page > h2,
  body.gdi-shell .header h2{
    font-size:22px;
    line-height:1.15;
    margin:0 0 8px;
  }

  body.gdi-shell .header{
    display:block;
    margin-bottom:10px;
  }

  body.gdi-shell .workarea{
    height:calc(100dvh - 96px) !important;
    border-radius:12px;
  }

  body.gdi-shell .workarea-home{
    height:calc(100dvh - 80px) !important;
  }
}

/* =========================================================
   homeLanding.html
   ========================================================= */

body.gdi-landing{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(110,107,255,.10), transparent 40%),
    radial-gradient(900px 400px at 90% 10%, rgba(127,90,240,.10), transparent 40%);
}

body.gdi-landing .wrap{
  max-width:1120px;
  margin:0 auto;
  padding:28px;
}

body.gdi-landing .hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
  align-items:center;
  margin:18px 0 10px;
}

body.gdi-landing .kicker{
  color:#c7ccf8;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  margin:0 0 10px;
}

body.gdi-landing h1{
  font-size:42px;
  line-height:1.1;
  margin:0 0 12px;
}

body.gdi-landing .sub{
  color:var(--muted);
  font-size:18px;
  margin:0 0 18px;
}

body.gdi-landing .cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

body.gdi-landing .spacer-sm{
  height:14px;
}

body.gdi-landing .media-ph{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px dashed rgba(255,255,255,.25);
  border-radius:var(--radius);
  min-height:260px;
  display:grid;
  place-items:center;
  color:#cfd4ff;
  box-shadow:var(--shadow);
}

body.gdi-landing .media-ph img,
body.gdi-landing .media-ph picture,
body.gdi-landing .media-ph video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

body.gdi-landing .logos{
  display:grid;
  grid-auto-flow:column;
  gap:16px;
  align-items:center;
  overflow:auto;
  padding-bottom:6px;
  opacity:.85;
}

body.gdi-landing .logos .ph{
  height:28px;
  width:120px;
  border-radius:8px;
  background:#0f1426;
  border:1px solid rgba(255,255,255,.08);
}

body.gdi-landing .section{
  margin:26px 0;
}

body.gdi-landing .feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:center;
  margin:24px 0;
}

body.gdi-landing .feature h3,
body.gdi-landing .section.card h3{
  margin:0 0 10px;
  font-size:22px;
}

body.gdi-landing .feature p{
  margin:0 0 8px;
  color:var(--muted);
}

body.gdi-landing .card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

body.gdi-landing .check{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin:6px 0;
}

body.gdi-landing .check .dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  margin-top:7px;
  flex:0 0 9px;
}

body.gdi-landing .grid3{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

body.gdi-landing footer{
  opacity:.75;
  font-size:13px;
  margin:30px 0;
}

@media (max-width:900px){
  body.gdi-landing .wrap{
    padding:18px;
  }

  body.gdi-landing .hero,
  body.gdi-landing .feature{
    grid-template-columns:1fr;
  }

  body.gdi-landing h1{
    font-size:34px;
  }

  body.gdi-landing .sub{
    font-size:16px;
  }
}

@media (max-width:520px){
  body.gdi-landing .wrap{
    padding:14px;
  }

  body.gdi-landing h1{
    font-size:29px;
  }

  body.gdi-landing .media-ph{
    min-height:190px;
  }

  body.gdi-landing .btn{
    width:100%;
  }
}

/* =========================================================
   topCharts.html
   ========================================================= */

body.gdi-topcharts{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

body.gdi-topcharts,
body.gdi-topcharts html{
  height:100%;
}

body.gdi-topcharts .wrap{
  height:100%;
  display:flex;
  flex-direction:column;
}

body.gdi-topcharts .toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  position:sticky;
  top:0;
  z-index:5;
  background:linear-gradient(180deg, rgba(11,15,26,.98), rgba(11,15,26,.82));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}

body.gdi-topcharts .spacer{
  flex:1;
}

body.gdi-topcharts .col{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  min-height:0;
}

body.gdi-topcharts .panel{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

body.gdi-topcharts .hdr{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

body.gdi-topcharts .hdr h3{
  margin:0;
  font-size:20px;
  min-width:max-content;
}

body.gdi-topcharts .panel > iframe{
  width:100%;
  height:520px;
  border:0;
  display:block;
}

body.gdi-topcharts .details{
  display:none;
  height:100%;
  padding:12px;
}

body.gdi-topcharts .details > iframe{
  width:100%;
  height:calc(100vh - 80px);
  border:0;
  display:block;
}

body.gdi-topcharts .panel.collapsed > iframe{
  display:none;
}

body.gdi-topcharts .panel.collapsed .hdr{
  border-bottom:0;
}

@media (max-width:700px), (orientation: landscape) and (max-height:520px) and (pointer: coarse){
  body.gdi-topcharts .toolbar{
    padding:10px;
  }

  body.gdi-topcharts .col{
    padding:10px;
    gap:10px;
  }

  body.gdi-topcharts .hdr{
    align-items:stretch;
    flex-wrap:wrap;
    gap:8px;
  }

  body.gdi-topcharts .hdr h3{
    width:100%;
    font-size:18px;
  }

  body.gdi-topcharts .hdr .btn{
    flex:1 1 130px;
    min-height:42px;
    padding:9px 10px;
  }



  body.gdi-topcharts .details{
    padding:10px;
  }

  body.gdi-topcharts .details > iframe{
    height:calc(100dvh - 68px);
  }


  body.gdi-topcharts{
    height:100%;
    overflow:hidden;
  }

  body.gdi-topcharts .wrap{
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  body.gdi-topcharts .toolbar{
    flex:0 0 auto;
  }

  body.gdi-topcharts .col{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    padding-bottom:24px;
  }

  body.gdi-topcharts .col > .panel{
    flex:0 0 auto;
  }



  body.gdi-topcharts .panel > iframe{
    height:min(56dvh, 500px);
    min-height:340px;
  }

  body.gdi-topcharts .panel.collapsed > iframe{
    display:none;
    height:0;
    min-height:0;
  }



}


/* =========================================================
   Shared utility helpers
   ========================================================= */

.is-hidden{
  display:none !important;
}

.toolbar-spacer{
  flex:1;
}

/* Fix existing topCharts html-height selector */
html.gdi-topcharts-html,
html.gdi-games-browser-html,
html.gdi-game-list-html{
  height:100%;
}

/* =========================================================
   gamesBrowser.html
   ========================================================= */

html.gdi-games-browser-html,
html.gdi-games-browser-html body.gdi-games-browser{
  height:100%;
  overflow:hidden;
}

body.gdi-games-browser{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px system-ui,Roboto,Inter,Arial,sans-serif;
}

body.gdi-games-browser .shell{
  display:grid;
  grid-template-rows:auto auto 1fr;
  height:100vh;
  gap:10px;
  padding:12px;
  box-sizing:border-box;
}

body.gdi-games-browser .shell.filters-collapsed{
  grid-template-rows:auto 1fr;
}

body.gdi-games-browser .shell.filters-collapsed #filtersPanel{
  display:none !important;
}

body.gdi-games-browser .grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  min-height:0;
}

body.gdi-games-browser .grid.show-list .panel.details{
  display:none;
}

body.gdi-games-browser .grid.show-details .panel:first-child{
  display:none;
}

body.gdi-games-browser .grid > .panel{
  transition:opacity .16s ease;
}

body.gdi-games-browser .grid.show-list .panel.details,
body.gdi-games-browser .grid.show-details .panel:first-child{
  opacity:0;
}

body.gdi-games-browser .toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

body.gdi-games-browser .panel{
  padding:0;
  min-width:0;
}

body.gdi-games-browser .panel > iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

body.gdi-games-browser #filtersPanel{
  height:auto;
  min-height:0;
}

body.gdi-games-browser #filters{
  width:100%;
  border:0;
}

body.gdi-games-browser .list-footer{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:center;
  padding:8px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.12);
}

body.gdi-games-browser .chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-left:8px;
  min-width:0;
}

body.gdi-games-browser .chip{
  background:rgba(100,113,4,.777);
  border:1px solid rgba(160,180,255,.25);
  color:#f9f7ef;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  white-space:nowrap;
}

@media (max-width:700px), (orientation: landscape) and (max-height:520px) and (pointer: coarse){
  html.gdi-games-browser-html,
  html.gdi-games-browser-html body.gdi-games-browser{
    overflow:auto;
  }

  body.gdi-games-browser .shell{
    height:100dvh;
    padding:10px;
    gap:8px;
  }

  body.gdi-games-browser .toolbar{
    flex-wrap:wrap;
    align-items:stretch;
  }

  body.gdi-games-browser .toolbar .btn{
    flex:1 1 130px;
    min-height:42px;
  }

  body.gdi-games-browser .toolbar-spacer{
    display:none;
  }

  body.gdi-games-browser .chips{
    order:3;
    width:100%;
    margin-left:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================================================
   gameList.html
   ========================================================= */

html.gdi-game-list-html,
html.gdi-game-list-html body.gdi-game-list{
  height:100%;
}

body.gdi-game-list{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  overflow:hidden;
}

body.gdi-game-list .wrap{
  max-width:1400px;
  margin:22px auto;
  padding:0 18px;
}

body.gdi-game-list h2{
  margin:0 0 10px;
}

body.gdi-game-list .panel{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:auto;
  padding:0;
}

body.gdi-game-list .listbar{
  position:sticky;
  top:0;
  z-index:6;
  background:var(--panel);
  padding:12px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

body.gdi-game-list .listbar .pager{
  display:flex;
  align-items:center;
  gap:12px;
}

body.gdi-game-list .gateNotice{
  display:none;
  margin:12px 16px 0;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.25);
}

body.gdi-game-list .gateNotice.show{
  display:block;
}

body.gdi-game-list .gateNotice .title{
  font-weight:700;
  margin-bottom:4px;
}

body.gdi-game-list .gateNotice .hint{
  color:var(--muted);
  margin-bottom:10px;
}

body.gdi-game-list .gateNotice .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

body.gdi-game-list .gateNotice .actions a{
  text-decoration:none;
}

body.gdi-game-list .xscroll{
  height:16px;
  overflow-x:auto;
  overflow-y:hidden;
  margin-bottom:6px;
  background:rgba(255,255,255,.05);
  display:none;
}

body.gdi-game-list .xspacer{
  height:1px;
}

body.gdi-game-list .tablewrap{
  overflow-y:visible;
  overflow-x:auto;
  height:auto;
  -webkit-overflow-scrolling:touch;
}

body.gdi-game-list .tablewrap thead{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--panel);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 6px 10px rgba(0,0,0,.25);
}

body.gdi-game-list table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:600px;
  table-layout:auto;
}

body.gdi-game-list th,
body.gdi-game-list td{
  padding:8px 10px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:middle;
  line-height:1.2;
}

body.gdi-game-list th{
  color:#aeb7d7;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  user-select:none;
  white-space:nowrap;
  position:relative;
  cursor:pointer;
}

body.gdi-game-list th[data-sortable="false"]{
  cursor:default;
}

body.gdi-game-list th .arrow{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  opacity:.6;
}

body.gdi-game-list tr{
  cursor:pointer;
}

body.gdi-game-list tr:hover{
  background:var(--panel-2);
}

body.gdi-game-list .cover{
  width:110px;
}

body.gdi-game-list .cover img{
  width:96px;
  border-radius:8px;
  display:block;
  background:#000;
}

body.gdi-game-list .title-cell{
  font-weight:600;
}

body.gdi-game-list .tiny{
  color:var(--muted);
  font-size:12px;
}

body.gdi-game-list .num{
  font-variant-numeric:tabular-nums;
  text-align:right;
}

body.gdi-game-list td.num{
  font-size:16px;
}

body.gdi-game-list .metric{
  font-weight:600;
}

body.gdi-game-list .metric.red{
  color:#880b0b;
}

body.gdi-game-list .metric.orange{
  color:#b96f1f;
}

body.gdi-game-list .metric.yellow{
  color:#cbc321;
}

body.gdi-game-list .metric.green{
  color:#08ac23;
}

body.gdi-game-list a,
body.gdi-game-list a:visited{
  color:#9ecbff;
  text-decoration:none;
}

body.gdi-game-list a:hover{
  text-decoration:underline;
}

body.gdi-game-list .footerbar{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-end;
  padding-top:10px;
  color:var(--muted);
}

body.gdi-game-list .pagerbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 0 8px;
  position:sticky;
  top:0;
  z-index:4;
  background:var(--bg);
}

/* Embedded list inside topCharts.html / gamesBrowser.html */
body.gdi-game-list.embed .wrap{
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
}

body.gdi-game-list.embed .panel{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0;
  display:flex;
  flex-direction:column;
}

body.gdi-game-list.embed #listPanel{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
}

body.gdi-game-list.embed .xscroll{
  flex:0 0 16px;
}

body.gdi-game-list.embed .tablewrap{
  flex:1 1 auto;
  overflow-y:auto !important;
  overflow-x:auto;
}

body.gdi-game-list.embed .tablewrap thead{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--panel);
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 6px 10px rgba(0,0,0,.25);
}

body.gdi-game-list.embed .tablewrap thead{
  display:table-header-group !important;
}

body.gdi-game-list.embed .tablewrap tbody{
  display:table-row-group !important;
}

body.gdi-game-list.embed .tablewrap thead tr,
body.gdi-game-list.embed .tablewrap tbody tr{
  display:table-row !important;
}

@media (max-width:900px){
  body.gdi-game-list td.num{
    font-size:14px;
  }
}

/* Phone/tablet table behavior:
   - force a horizontal table layout
   - keep spacing readable
   - hide Units Sold as the least reliable column
*/
@media (max-width:700px), (orientation: landscape) and (max-height:520px) and (pointer: coarse){
  body.gdi-game-list{
    overflow:hidden;
  }

  body.gdi-game-list .wrap{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
  }

  body.gdi-game-list .panel{
    border-radius:12px;
  }

  body.gdi-game-list .listbar{
    padding:10px;
  }

  body.gdi-game-list .listbar .pager{
    flex-wrap:wrap;
    align-items:stretch;
    gap:8px;
  }

  body.gdi-game-list #countLabel{
    width:100%;
    line-height:1.35;
  }

  body.gdi-game-list .listbar .btn{
    flex:1 1 130px;
    min-height:42px;
    padding:9px 10px;
  }

  body.gdi-game-list .tablewrap{
    overflow-x:auto !important;
    overflow-y:auto !important;
    overscroll-behavior-x:contain;
  }

  body.gdi-game-list .xscroll{
    height:14px;
    margin-bottom:4px;
  }

  body.gdi-game-list table{
    width:max-content !important;
    min-width:860px !important;
    table-layout:auto !important;
  }

  body.gdi-game-list th,
  body.gdi-game-list td{
    white-space:nowrap;
    padding-left:12px;
    padding-right:12px;
    box-sizing:border-box;
  }

  body.gdi-game-list .cover{
    width:122px;
    min-width:122px;
  }

  body.gdi-game-list .cover img{
    width:96px;
  }

  body.gdi-game-list .title-cell,
  body.gdi-game-list th.title-col{
    min-width:145px;
    max-width:180px;
    white-space:normal;
    line-height:1.15;
  }

  body.gdi-game-list .col-units{
    display:none !important;
  }

  body.gdi-game-list th[data-key="publisher"],
  body.gdi-game-list td[data-col-company="publisher"],
  body.gdi-game-list th[data-key="developer"],
  body.gdi-game-list td[data-col-company="developer"]{
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* =========================================================
   Shared mobile/compact filter drawer
   gamesBrowser.html + genreResearch.html + reportGenerator.html
   ========================================================= */

.gdi-filter-drawer-head{
  display:none;
}

.gdi-filter-title{
  font-weight:800;
  letter-spacing:.2px;
}

.gdi-filter-close{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

@media (max-width:1180px),
       (hover:none) and (pointer:coarse),
       (max-height:650px){

  body.gdi-filter-open{
    overflow:hidden !important;
  }

  body.gdi-games-browser .gdi-filter-toggle,
  body.gdi-genre-research .gdi-filter-toggle,
  body.gdi-report-generator .gdi-filter-toggle{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:112px !important;
    max-width:none !important;
    min-height:42px;
    padding:0 14px !important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    font-size:14px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;

    border-radius:12px;
    border:1px solid rgba(180,195,255,.28);
    background:linear-gradient(180deg, rgba(47,58,94,.98), rgba(28,36,62,.98));
    color:#e8ecff;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04),
      0 8px 18px rgba(0,0,0,.26);
  }

  body.gdi-games-browser .gdi-filter-toggle::before,
  body.gdi-genre-research .gdi-filter-toggle::before,
  body.gdi-report-generator .gdi-filter-toggle::before{
    content:"";
    width:18px;
    height:18px;
    flex:0 0 18px;
    background:currentColor;

    -webkit-mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat;
    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/g%3E%3C/svg%3E")
      center / contain no-repeat;
  }

  body.gdi-games-browser .gdi-filter-toggle:hover,
  body.gdi-genre-research .gdi-filter-toggle:hover,
  body.gdi-report-generator .gdi-filter-toggle:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
  }

  body.gdi-games-browser #filtersPanel.gdi-filter-panel,
  body.gdi-genre-research #filtersPanel.gdi-filter-panel,
  body.gdi-report-generator #filtersPanel.gdi-filter-panel{
    display:none !important;
    position:fixed;
    inset:0;
    z-index:1000;
    width:100vw;
    height:100dvh;
    border-radius:0;
    border:0;
    padding:0;
    margin:0;
    background:var(--bg);
    box-shadow:none;
    overflow:hidden;
  }

  body.gdi-games-browser .shell.gdi-filters-open #filtersPanel.gdi-filter-panel,
  body.gdi-genre-research .shell.gdi-filters-open #filtersPanel.gdi-filter-panel,
  body.gdi-report-generator .shell.gdi-filters-open #filtersPanel.gdi-filter-panel{
    display:flex !important;
    flex-direction:column;
  }

  .gdi-filter-drawer-head{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    height:56px;
    padding:0 12px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg, rgba(11,15,26,.98), rgba(11,15,26,.88));
  }

  body.gdi-games-browser #filtersPanel.gdi-filter-panel iframe,
  body.gdi-genre-research #filtersPanel.gdi-filter-panel iframe,
  body.gdi-report-generator #filtersPanel.gdi-filter-panel iframe{
    flex:1 1 auto;
    width:100% !important;
    height:calc(100dvh - 56px) !important;
    min-height:0 !important;
    max-height:calc(100dvh - 56px) !important;
    border:0 !important;
    display:block;
  }

  body.gdi-games-browser .shell,
  body.gdi-genre-research .shell,
  body.gdi-report-generator .shell{
    grid-template-rows:auto 1fr;
  }
}


/* =========================================================
   gameFilter.html shared styling
   ========================================================= */

html.gdi-filter-html,
html.gdi-filter-html body.gdi-filter{
  min-height:100%;
}

body.gdi-filter{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px system-ui,Roboto,Inter,Arial,sans-serif;
  overflow:auto;
}

body.gdi-filter *{
  box-sizing:border-box;
}

body.gdi-filter .wrap{
  display:flex;
  flex-direction:column;
  height:auto;
}

body.gdi-filter .hdr{
  padding:12px 14px;
  font-weight:800;
  font-size:20px;
  letter-spacing:.2px;
}

body.gdi-filter .sec{
  padding:0 10px 10px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-template-areas:
    "search  revenue  price  pubdev"
    "units   reviews  score  playtime"
    "ratio   release  genres tags"
    "followers demos  genres tags"
    "actions . . .";
  gap:10px;
}

body.gdi-filter .group{
  background:var(--panel-2);
  border-radius:10px;
  padding:4px;
  margin:0;
}

body.gdi-filter .group.search{ grid-area:search; }
body.gdi-filter .group.revenue{ grid-area:revenue; }
body.gdi-filter .group.units{ grid-area:units; }
body.gdi-filter .group.reviews{ grid-area:reviews; }
body.gdi-filter .group.score{ grid-area:score; }
body.gdi-filter .group.followers{ grid-area:followers; }
body.gdi-filter .group.price{ grid-area:price; }
body.gdi-filter .group.playtime{ grid-area:playtime; }
body.gdi-filter .group.tags{ grid-area:tags; }
body.gdi-filter .group.genres{ grid-area:genres; }
body.gdi-filter .group.pubdev{ grid-area:pubdev; }
body.gdi-filter .group.ratio{ grid-area:ratio; }
body.gdi-filter .group.demos{ grid-area:demos; }
body.gdi-filter .group.release{ grid-area:release; }

body.gdi-filter .actions{
  grid-area:actions;
  display:flex;
  justify-content:flex-start;
  gap:10px;
  align-items:center;
}

body.gdi-filter .row{
  display:flex;
  gap:4px;
  align-items:center;
  margin:1px 0;
}

body.gdi-filter .row.tight{
  gap:2px;
  margin-top:1px;
}

body.gdi-filter .row.gap-6{
  gap:6px;
}

body.gdi-filter .row.mt-6{
  margin-top:6px;
}

body.gdi-filter .row.check-row{
  gap:8px;
}

body.gdi-filter .sep{
  opacity:.6;
  font-size:12px;
  user-select:none;
}

body.gdi-filter input[type="text"],
body.gdi-filter input[type="number"],
body.gdi-filter input[type="date"],
body.gdi-filter select{
  width:100%;
  min-width:0;
  padding:4px 5px;
  border-radius:8px;
  border:1px solid #2b3656;
  background:#0e1430;
  color:#e6e9f5;
}

body.gdi-filter select{
  cursor:pointer;
}

body.gdi-filter .input-2col{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr) auto minmax(0,1fr);
  gap:6px;
  align-items:center;
}

body.gdi-filter .input-2col > input{
  min-width:0;
}

body.gdi-filter .input-2col .muted{
  white-space:nowrap;
}

body.gdi-filter .tagbox{
  max-height:84px;
  overflow:auto;
  border:1px solid #2b3656;
  border-radius:10px;
  padding:8px;
  background:#0e1430;
}

body.gdi-filter .tagrow{
  display:flex;
  align-items:center;
  gap:4px;
  padding:1px 0;
}

body.gdi-filter .muted{
  color:var(--muted);
  font-size:12px;
}

body.gdi-filter .flex{
  display:flex;
  gap:10px;
  align-items:center;
}

body.gdi-filter label{
  cursor:pointer;
}

body.gdi-filter .vals{
  display:flex;
  justify-content:space-between;
  font-variant-numeric:tabular-nums;
}

body.gdi-filter input[type="range"]{
  width:100%;
}

body.gdi-filter .release-range{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr) auto minmax(0,1fr);
  gap:6px;
  align-items:center;
}

body.gdi-filter .release-range__sep{
  font-size:.75rem;
  color:#8b9bb7;
  justify-self:center;
}

@media (max-width:1000px){
  body.gdi-filter .sec{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "search search"
      "revenue units"
      "reviews score"
      "followers tags"
      "price tags"
      "playtime tags"
      "pubdev genres"
      "demos genres"
      "release genres"
      "actions ratio";
  }
}

/* Mobile filter layout.
   Do NOT use max-height here: gameFilter.html runs inside short desktop iframes,
   so height-based checks falsely trigger the mobile one-column layout on desktop. */
@media (max-width:700px),
       (hover:none) and (pointer:coarse) and (max-width:1180px){
  body.gdi-filter{
    height:100dvh;
    overflow:auto;
  }

  body.gdi-filter .wrap{
    min-height:100dvh;
  }

  body.gdi-filter .sec{
    grid-template-columns:1fr;
    grid-template-areas:
      "search"
      "revenue"
      "units"
      "reviews"
      "score"
      "followers"
      "price"
      "playtime"
      "pubdev"
      "demos"
      "ratio"
      "release"
      "tags"
      "genres"
      "actions";
    padding:10px;
    padding-bottom:78px;
  }

  body.gdi-filter .group{
    padding:8px;
  }

  body.gdi-filter .input-2col,
  body.gdi-filter .release-range{
    grid-template-columns:1fr;
  }

  body.gdi-filter .sep,
  body.gdi-filter .release-range__sep{
    display:none;
  }

  body.gdi-filter .tagbox{
    max-height:170px;
  }

  body.gdi-filter .actions{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:20;
    padding:10px;
    background:linear-gradient(180deg, rgba(11,15,26,.75), rgba(11,15,26,.98));
    border-top:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(8px);
  }

  body.gdi-filter .actions .btn{
    flex:1;
    min-height:46px;
  }
}

/* =========================================================
   genreResearch.html shared styling
   ========================================================= */

html.gdi-genre-research-html,
html.gdi-genre-research-html body.gdi-genre-research{
  height:100%;
  overflow:auto;
}

body.gdi-genre-research{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px system-ui,Roboto,Inter,Arial,sans-serif;
}

body.gdi-genre-research .shell{
  display:grid;
  grid-template-rows:auto auto 1fr;
  height:100vh;
  overflow:auto;
  gap:10px;
  padding:12px;
  box-sizing:border-box;
}

body.gdi-genre-research .panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

body.gdi-genre-research .panel > iframe{
  width:100%;
  border:0;
  display:block;
}

body.gdi-genre-research #filtersPanel{
  height:auto;
  min-height:0;
}

body.gdi-genre-research .toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}

body.gdi-genre-research .chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

body.gdi-genre-research .chip{
  background:rgba(100,113,4,.78);
  border:1px solid rgba(160,180,255,.25);
  color:#fff7e6;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
}

body.gdi-genre-research .spacer{
  flex:1 1 auto;
}

body.gdi-genre-research .muted{
  color:var(--muted);
}

body.gdi-genre-research .grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-auto-rows:minmax(400px, 1fr);
  gap:20px;
  max-height:400px;
}

@media (max-width:1100px){
  body.gdi-genre-research .grid{
    grid-template-columns:1fr;
    grid-auto-rows:minmax(360px, 1fr);
  }
}

body.gdi-genre-research .span-1{
  grid-column:span 1;
}

body.gdi-genre-research .span-2{
  grid-column:span 2;
}

body.gdi-genre-research .span-3{
  grid-column:1 / -1;
}

body.gdi-genre-research .row-2{
  grid-row:span 2;
}

body.gdi-genre-research .card{
  padding:12px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:360px;
}

body.gdi-genre-research .card h3{
  margin:0 0 10px;
  font-size:16px;
}

body.gdi-genre-research .chart-wrap{
  position:relative;
  flex:1 1 auto;
  min-height:320px;
}

body.gdi-genre-research canvas{
  width:100%;
  height:100%;
  display:block;
  background:var(--panel-2);
  border-radius:12px;
}

body.gdi-genre-research .footer-note{
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}

body.gdi-genre-research #mainArea{
  min-height:0;
  height:100%;
}

body.gdi-genre-research #listView{
  display:none;
  min-height:0;
  overflow:hidden;
}

body.gdi-genre-research #listView.is-open{
  display:flex;
  flex-direction:column;
  height:100%;
}

body.gdi-genre-research .listHeader{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

body.gdi-genre-research .listFrameWrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
}

body.gdi-genre-research #drillList{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

body.gdi-genre-research #detailsView{
  display:none;
  min-height:0;
  overflow:hidden;
}

body.gdi-genre-research #detailsView.is-open{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}

body.gdi-genre-research #detailsView iframe{
  flex:1;
  min-height:0;
  width:100%;
  border:0;
}

body.gdi-genre-research .locked-card .chart-wrap canvas{
  filter:blur(3px);
  opacity:.15;
  pointer-events:none;
}

body.gdi-genre-research .lock-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px;
  border-radius:12px;
  background:radial-gradient(circle at top, rgba(180,180,255,.18), rgba(0,0,0,.85));
  cursor:default;
}

body.gdi-genre-research .lock-overlay .icon{
  font-size:32px;
  margin-bottom:6px;
}

body.gdi-genre-research .lock-overlay .title{
  font-weight:600;
  margin-bottom:4px;
}

body.gdi-genre-research .lock-overlay .hint{
  font-size:12px;
  color:var(--muted);
  max-width:260px;
}

@media (max-width:700px), (orientation: landscape) and (max-height:520px) and (pointer: coarse){
  html.gdi-genre-research-html,
  html.gdi-genre-research-html body.gdi-genre-research{
    height:100%;
    overflow:hidden;
  }

  body.gdi-genre-research .shell{
    height:100dvh;
    overflow:hidden;
    grid-template-rows:auto 1fr;
    gap:8px;
    padding:10px;
  }

  body.gdi-genre-research .toolbar{
    position:sticky;
    top:0;
    z-index:20;
    flex-wrap:wrap;
    align-items:stretch;
  }

  body.gdi-genre-research .chips{
    order:3;
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }

  body.gdi-genre-research #sampleSize{
    font-size:12px;
    align-self:center;
  }

  body.gdi-genre-research #mainArea{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    min-height:0;
  }

  body.gdi-genre-research .grid{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto;
    max-height:none;
    gap:12px;
  }

  body.gdi-genre-research .span-1,
  body.gdi-genre-research .span-2,
  body.gdi-genre-research .span-3{
    grid-column:1 / -1 !important;
  }

  body.gdi-genre-research .card{
    min-height:420px;
    overflow-x:auto;
    overflow-y:hidden;
  }

  body.gdi-genre-research .card h3,
  body.gdi-genre-research .footer-note{
    min-width:560px;
  }

  body.gdi-genre-research .chart-wrap{
    min-width:560px;
    min-height:330px;
  }

  body.gdi-genre-research #listView.is-open{
    height:100%;
  }

  body.gdi-genre-research .listHeader{
    flex-wrap:wrap;
  }

  body.gdi-genre-research .listFrameWrap{
    min-height:0;
  }
}



/* =========================================================
   Mobile/landscape cleanup pass
   - keep Game Research title visible
   - make pie charts fit phone width
   - keep phone landscape behaving like phone portrait
   ========================================================= */

@media (max-width:700px), (orientation: landscape) and (max-height:520px) and (pointer: coarse){

  /* --- index.php / Game Research page title fix --- */
  body.gdi-shell #page-details.active{
    display:flex !important;
    flex-direction:column;
    gap:8px;
    height:calc(100dvh - 56px);
    min-height:0;
    overflow:hidden;
    padding:10px 8px 8px;
    box-sizing:border-box;
  }

  body.gdi-shell #page-details > h2{
    flex:0 0 auto;
    margin:0;
    padding:2px 0 0;
    line-height:1.15;
    font-size:22px;
    position:relative;
    z-index:1;
  }

  body.gdi-shell #page-details > .header{
    display:none;
  }

  body.gdi-shell #page-details > .workarea{
    flex:1 1 auto;
    min-height:0;
    height:auto !important;
    border-radius:12px;
  }

  /* Avoid wasting vertical space inside the embedded Game Browser. */
  body.gdi-games-browser .shell{
    min-height:0;
    overflow:hidden;
  }

  body.gdi-games-browser .grid{
    min-height:0;
  }

  body.gdi-games-browser .grid > .panel{
    min-height:0;
    overflow:hidden;
  }

  /* --- Genre Research: pie charts should fit phone width --- */
  body.gdi-genre-research #cardPieRevenue,
  body.gdi-genre-research #cardPiePlaytime,
  body.gdi-genre-research #cardPiePrice,
  body.gdi-genre-research #cardLangPie,
  body.gdi-genre-research #cardInsightPraised,
  body.gdi-genre-research #cardInsightCriticized,
  body.gdi-genre-research #cardInsightWhyNegative{
    overflow-x:hidden;
    overflow-y:hidden;
    min-height:420px;
  }

  body.gdi-genre-research #cardPieRevenue h3,
  body.gdi-genre-research #cardPiePlaytime h3,
  body.gdi-genre-research #cardPiePrice h3,
  body.gdi-genre-research #cardLangPie h3,
  body.gdi-genre-research #cardInsightPraised h3,
  body.gdi-genre-research #cardInsightCriticized h3,
  body.gdi-genre-research #cardInsightWhyNegative h3,
  body.gdi-genre-research #cardPieRevenue .footer-note,
  body.gdi-genre-research #cardPiePlaytime .footer-note,
  body.gdi-genre-research #cardPiePrice .footer-note,
  body.gdi-genre-research #cardLangPie .footer-note,
  body.gdi-genre-research #cardInsightPraised .footer-note,
  body.gdi-genre-research #cardInsightCriticized .footer-note,
  body.gdi-genre-research #cardInsightWhyNegative .footer-note{
    min-width:0 !important;
    width:100%;
  }

  body.gdi-genre-research #cardPieRevenue .chart-wrap,
  body.gdi-genre-research #cardPiePlaytime .chart-wrap,
  body.gdi-genre-research #cardPiePrice .chart-wrap,
  body.gdi-genre-research #cardLangPie .chart-wrap,
  body.gdi-genre-research #cardInsightPraised .chart-wrap,
  body.gdi-genre-research #cardInsightCriticized .chart-wrap,
  body.gdi-genre-research #cardInsightWhyNegative .chart-wrap{
    min-width:0 !important;
    width:100%;
    min-height:300px;
    height:min(78vw, 380px);
  }

  body.gdi-genre-research #cardPieRevenue canvas,
  body.gdi-genre-research #cardPiePlaytime canvas,
  body.gdi-genre-research #cardPiePrice canvas,
  body.gdi-genre-research #cardLangPie canvas,
  body.gdi-genre-research #cardInsightPraised canvas,
  body.gdi-genre-research #cardInsightCriticized canvas,
  body.gdi-genre-research #cardInsightWhyNegative canvas{
    width:100% !important;
    max-width:100%;
  }

  /* Landscape phones: reduce chart height so the page stays usable. */
  @media (orientation: landscape) and (max-height:520px) and (pointer: coarse){
    body.gdi-genre-research #cardPieRevenue,
    body.gdi-genre-research #cardPiePlaytime,
    body.gdi-genre-research #cardPiePrice,
    body.gdi-genre-research #cardLangPie,
    body.gdi-genre-research #cardInsightPraised,
    body.gdi-genre-research #cardInsightCriticized,
    body.gdi-genre-research #cardInsightWhyNegative{
      min-height:340px;
    }

    body.gdi-genre-research #cardPieRevenue .chart-wrap,
    body.gdi-genre-research #cardPiePlaytime .chart-wrap,
    body.gdi-genre-research #cardPiePrice .chart-wrap,
    body.gdi-genre-research #cardLangPie .chart-wrap,
    body.gdi-genre-research #cardInsightPraised .chart-wrap,
    body.gdi-genre-research #cardInsightCriticized .chart-wrap,
    body.gdi-genre-research #cardInsightWhyNegative .chart-wrap{
      height:260px;
      min-height:240px;
    }
  }
}


/* =========================================================
   Phone polish pass: high-DPI phones + better TopCharts layout
   ========================================================= */

@media (max-width:700px),
       (hover:none) and (pointer:coarse) and (max-width:950px),
       (hover:none) and (pointer:coarse) and (max-height:520px){

  /* ---------------------------------------------------------
     index.php / Top Charts route:
     Let Dashboard + Top New Releases header scroll away.
     Requires index.php JS data-gdi-route patch below.
     --------------------------------------------------------- */

  body.gdi-shell[data-gdi-route="popular"] .main{
    height:100dvh;
    overflow-y:auto !important;
    overflow-x:hidden;
    padding:0;
    -webkit-overflow-scrolling:touch;
  }

  body.gdi-shell[data-gdi-route="popular"] .topbar{
    position:relative;
    top:auto;
    flex:0 0 auto;
  }

  body.gdi-shell[data-gdi-route="popular"] #page-popular.active{
    display:block;
    height:auto;
    min-height:0;
    overflow:visible;
    padding:0 8px 8px;
    box-sizing:border-box;
  }

  body.gdi-shell[data-gdi-route="popular"] #page-popular > .header{
    margin:0;
    padding:14px 10px 14px;
  }

  body.gdi-shell[data-gdi-route="popular"] #popular-title{
    font-size:24px !important;
    line-height:1.12;
    margin:0 0 8px !important;
  }

  body.gdi-shell[data-gdi-route="popular"] #page-popular > .header .tiny{
    font-size:13px;
    line-height:1.45;
  }

  body.gdi-shell[data-gdi-route="popular"] #page-popular > .workarea{
    height:calc(100dvh - 8px) !important;
    min-height:0;
    border-radius:12px;
  }


  /* ---------------------------------------------------------
     topCharts.html:
     Remove empty toolbar, compact chart controls, give list room.
     --------------------------------------------------------- */

  body.gdi-topcharts .toolbar{
    display:none;
  }

  body.gdi-topcharts.gdi-details-open .toolbar{
    display:flex;
    flex:0 0 auto;
    padding:8px;
  }

  body.gdi-topcharts .wrap{
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  body.gdi-topcharts .col{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:6px;
    gap:8px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }

  body.gdi-topcharts .col > .panel{
    flex:0 0 auto;
  }

  body.gdi-topcharts .hdr{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:center;
    gap:6px;
    padding:8px;
  }

  body.gdi-topcharts .hdr h3{
    grid-column:1 / -1;
    width:auto;
    min-width:0;
    margin:0;
    font-size:17px;
    line-height:1.15;
  }

  body.gdi-topcharts .hdr .btn{
    width:100%;
    min-width:0;
    min-height:34px;
    height:34px;
    flex:0 1 auto !important;
    padding:0 4px;
    border-radius:10px;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
  }

  body.gdi-topcharts #panel30 > iframe,
  body.gdi-topcharts #panel7 > iframe{
    height:clamp(420px, 72dvh, 680px);
    min-height:0;
  }

  body.gdi-topcharts #panel30.collapsed > iframe,
  body.gdi-topcharts #panel7.collapsed > iframe{
    display:none;
    height:0;
    min-height:0;
  }


  /* ---------------------------------------------------------
     gameList.html embedded tables:
     Slightly tighter pager so TopCharts table gets more space.
     --------------------------------------------------------- */

  body.gdi-game-list .listbar{
    padding:8px;
  }

  body.gdi-game-list .listbar .pager{
    gap:6px;
  }

  body.gdi-game-list #countLabel{
    font-size:13px;
    line-height:1.25;
  }

  body.gdi-game-list .listbar .btn{
    min-height:36px;
    padding:7px 8px;
    font-size:13px;
    border-radius:10px;
  }

  body.gdi-game-list .xscroll{
    height:10px;
    margin-bottom:2px;
  }
}


/* =========================================================
   Broad compact layout pass
   Treat anything below modern desktop size as compact/mobile.
   This intentionally catches phone landscape and tablets.
   ========================================================= */

@media (max-width:1180px),
       (hover:none) and (pointer:coarse),
       (max-height:650px){

  /* -----------------------------
     Global shell behavior
     ----------------------------- */

  html.gdi-shell-html,
  html.gdi-shell-html body.gdi-shell{
    height:100%;
    overflow:hidden;
  }

  body.gdi-shell .app{
    display:block;
    min-height:100dvh;
  }

  body.gdi-shell .main{
    height:100dvh;
    overflow:hidden;
    padding:0;
  }

  body.gdi-shell .topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    height:56px;
    padding:0 12px;
    position:sticky;
    top:0;
    background:linear-gradient(180deg, rgba(11,15,26,.98), rgba(11,15,26,.88));
    backdrop-filter:blur(6px);
    z-index:20;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  body.gdi-shell .mobile-toggle{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--panel-2);
    border:1px solid rgba(255,255,255,.12);
    color:#cfd4ff;
    padding:0;
    border-radius:12px;
    font-size:20px;
  }

  body.gdi-shell .topbar-title{
    font-weight:700;
    text-align:center;
  }

  body.gdi-shell .topbar-spacer{
    width:42px;
    height:42px;
  }

  body.gdi-shell .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(84vw, 320px);
    height:100dvh;
    padding:16px;
    transform:translateX(-105%);
    transition:transform .18s ease;
    box-shadow:18px 0 40px rgba(0,0,0,.45);
    border-right:1px solid rgba(255,255,255,.10);
    align-items:stretch;
    z-index:40;
  }

  body.gdi-shell .sidebar.open,
  body.gdi-shell.gdi-nav-open .sidebar{
    transform:translateX(0);
  }

  body.gdi-shell .mobile-scrim{
    display:block;
    position:fixed;
    inset:0;
    z-index:30;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
  }

  body.gdi-shell .mobile-scrim[hidden]{
    display:none;
  }

  body.gdi-shell .brand .brand-logo{
    width:180px;
    max-height:58px;
  }

  body.gdi-shell .search,
  body.gdi-shell .login-card,
  body.gdi-shell .hide-sm{
    display:block;
  }

  body.gdi-shell nav a{
    min-height:42px;
  }

  body.gdi-shell .page{
    height:calc(100dvh - 56px);
    overflow:hidden;
    padding:10px;
    box-sizing:border-box;
  }

  body.gdi-shell .workarea{
    height:calc(100dvh - 86px) !important;
    border-radius:12px;
  }


  /* -----------------------------
     TopCharts parent route:
     allow the Dashboard / page title area to scroll away
     ----------------------------- */

  body.gdi-shell[data-gdi-route="popular"] .main{
    height:100dvh;
    overflow-y:auto !important;
    overflow-x:hidden;
    padding:0;
    -webkit-overflow-scrolling:touch;
  }

  body.gdi-shell[data-gdi-route="popular"] .topbar{
    position:relative;
    top:auto;
  }

  body.gdi-shell[data-gdi-route="popular"] #page-popular.active{
    display:block;
    height:auto;
    min-height:0;
    overflow:visible;
    padding:0 10px 10px;
    box-sizing:border-box;
  }

  body.gdi-shell[data-gdi-route="popular"] #page-popular > .header{
    margin:0;
    padding:14px 8px 14px;
  }

  body.gdi-shell[data-gdi-route="popular"] #popular-title{
    font-size:24px !important;
    line-height:1.12;
    margin:0 0 8px !important;
  }

  body.gdi-shell[data-gdi-route="popular"] #page-popular > .header .tiny{
    font-size:13px;
    line-height:1.45;
  }

  body.gdi-shell[data-gdi-route="popular"] #page-popular > .workarea{
    height:calc(100dvh - 8px) !important;
    min-height:0;
    border-radius:12px;
  }


  /* -----------------------------
     TopCharts iframe page
     ----------------------------- */

  body.gdi-topcharts{
    height:100%;
    overflow:hidden;
  }

  body.gdi-topcharts .toolbar{
    display:none;
  }

  body.gdi-topcharts.gdi-details-open .toolbar{
    display:flex;
    flex:0 0 auto;
    padding:8px;
  }

  body.gdi-topcharts .wrap{
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  body.gdi-topcharts .col{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:8px 12px 28px;
    gap:10px;
    -webkit-overflow-scrolling:touch;

    /* Important: do not trap scroll chaining more than necessary */
    overscroll-behavior-y:auto;
  }

  body.gdi-topcharts .col > .panel{
    flex:0 0 auto;
  }

  body.gdi-topcharts .hdr{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:center;
    gap:6px;
    padding:8px;
  }

  body.gdi-topcharts .hdr h3{
    grid-column:1 / -1;
    width:auto;
    min-width:0;
    margin:0;
    font-size:17px;
    line-height:1.15;
  }

  body.gdi-topcharts .hdr .btn{
    width:100%;
    min-width:0;
    min-height:32px;
    height:32px;
    flex:0 1 auto !important;
    padding:0 3px;
    border-radius:9px;
    font-size:11px;
    line-height:1;
    white-space:nowrap;
  }

  /*
     Side gutters around the game-list iframe.
     This gives your finger a safe vertical-scroll zone
     instead of the embedded table eating every swipe.
  */
  body.gdi-topcharts #panel30,
  body.gdi-topcharts #panel7{
    padding-left:14px;
    padding-right:14px;
    padding-bottom:10px;
    background:rgba(0,0,0,.18);
  }

  body.gdi-topcharts #panel30 > iframe,
  body.gdi-topcharts #panel7 > iframe{
    width:100%;
    border-radius:10px;
    height:clamp(360px, 68dvh, 620px);
    min-height:0;
  }

  body.gdi-topcharts #panel30.collapsed,
  body.gdi-topcharts #panel7.collapsed{
    padding-bottom:0;
  }

  body.gdi-topcharts #panel30.collapsed > iframe,
  body.gdi-topcharts #panel7.collapsed > iframe{
    display:none;
    height:0;
    min-height:0;
  }


  /* -----------------------------
     Embedded gameList tightening
     ----------------------------- */

  body.gdi-game-list .listbar{
    padding:8px;
  }

  body.gdi-game-list .listbar .pager{
    gap:6px;
  }

  body.gdi-game-list #countLabel{
    font-size:13px;
    line-height:1.25;
  }

  body.gdi-game-list .listbar .btn{
    min-height:36px;
    padding:7px 8px;
    font-size:13px;
    border-radius:10px;
  }

  body.gdi-game-list .xscroll{
    height:10px;
    margin-bottom:2px;
  }
}


/* Extra tightening for very short landscape phones */
@media (max-height:520px) and (max-width:1180px){

  body.gdi-topcharts .col{
    padding-left:16px;
    padding-right:16px;
  }

  body.gdi-topcharts .hdr{
    grid-template-columns:120px 120px 120px 1fr;
    gap:6px;
    padding:6px;
  }

  body.gdi-topcharts .hdr h3{
    grid-column:1 / -1;
    font-size:15px;
  }

  body.gdi-topcharts .hdr .btn{
    height:30px;
    min-height:30px;
    font-size:10.5px;
    padding:0 4px;
  }

  body.gdi-topcharts #panel30,
  body.gdi-topcharts #panel7{
    padding-left:22px;
    padding-right:22px;
  }

  body.gdi-topcharts #panel30 > iframe,
  body.gdi-topcharts #panel7 > iframe{
    height:70dvh;
    min-height:300px;
  }
}

/* =========================================================
   Shared safe gutters + Report Generator mobile consolidation
   gamesBrowser.html + genreResearch.html + reportGenerator.html
   ========================================================= */

:root{
  --gdi-safe-gutter: 14px;
  --gdi-safe-gutter-wide: 20px;
  --gdi-compact-query-note: "max-width:1180px / touch / short viewport";
}

/* Include report generator in shared full-height page list */
html.gdi-report-generator-html,
html.gdi-report-generator-html body.gdi-report-generator{
  height:100%;
}

/* ---------------------------------------------------------
   More reliable compact/mobile behavior
   Treat phones, phone landscape, tablets, and short windows as compact.
   --------------------------------------------------------- */

@media (max-width:1180px),
       (hover:none) and (pointer:coarse),
       (max-height:650px){

  /* Give internal iframe pages a real finger-safe border/gutter. */
  body.gdi-games-browser .shell,
  body.gdi-genre-research .shell,
  body.gdi-report-generator .shell{
    padding:var(--gdi-safe-gutter) var(--gdi-safe-gutter-wide) var(--gdi-safe-gutter-wide);
    gap:10px;
    box-sizing:border-box;
  }

  /* Make panels look intentionally inset instead of touching screen edges. */
  body.gdi-games-browser .panel,
  body.gdi-genre-research .panel,
  body.gdi-report-generator .panel{
    border:1px solid rgba(255,255,255,.10);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.025),
      0 8px 24px rgba(0,0,0,.30);
  }

  /* Game Browser: give the list/details iframes side gutters so page scroll is easier. */
  body.gdi-games-browser .grid > .panel{
    padding:var(--gdi-safe-gutter);
    box-sizing:border-box;
    background:rgba(0,0,0,.18);
    overflow:hidden;
  }

  body.gdi-games-browser .grid > .panel > iframe{
    border-radius:12px;
    background:var(--panel-2);
  }

  /* Genre Research: keep chart area inset and scrollable. */
  body.gdi-genre-research #mainArea{
    padding-bottom:var(--gdi-safe-gutter);
  }

  body.gdi-genre-research .grid{
    gap:var(--gdi-safe-gutter);
  }

  body.gdi-genre-research .card{
    border-radius:14px;
  }

  /* Report Generator: give preview iframe gutters like TopCharts/Game Browser. */
  body.gdi-report-generator .previewStage{
    padding:var(--gdi-safe-gutter);
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    box-sizing:border-box;
  }

  body.gdi-report-generator .listFrame{
    border-radius:12px;
    background:var(--panel-2);
  }

  body.gdi-report-generator .tableWrap{
    border-radius:14px;
  }

  /* Compact filter button: include report generator too. */
  body.gdi-games-browser .gdi-filter-toggle,
  body.gdi-genre-research .gdi-filter-toggle,
  body.gdi-report-generator .gdi-filter-toggle{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:112px !important;
    max-width:none !important;
    min-height:42px;
    padding:0 14px !important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    font-size:14px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;

    border-radius:12px;
    border:1px solid rgba(180,195,255,.28);
    background:linear-gradient(180deg, rgba(47,58,94,.98), rgba(28,36,62,.98));
    color:#e8ecff;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04),
      0 8px 18px rgba(0,0,0,.26);
  }

  body.gdi-games-browser .gdi-filter-toggle::before,
  body.gdi-genre-research .gdi-filter-toggle::before,
  body.gdi-report-generator .gdi-filter-toggle::before{
    content:"☰";
    font-size:18px;
    line-height:1;
    transform:rotate(90deg);
    opacity:.95;
  }
}

/* Very small phones / short landscape: larger gutters so user can scroll outside embedded tables. */
@media (max-height:520px) and (max-width:1180px),
       (max-width:520px){

  body.gdi-games-browser .shell,
  body.gdi-genre-research .shell,
  body.gdi-report-generator .shell{
    padding:10px 18px 18px;
  }

  body.gdi-games-browser .grid > .panel,
  body.gdi-report-generator .previewStage{
    padding-left:18px;
    padding-right:18px;
  }
}

/* =========================================================
   reportGenerator.html moved from inline CSS
   ========================================================= */

body.gdi-report-generator{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px system-ui,Segoe UI,Inter,Arial,sans-serif;
  overflow:auto;
}

body.gdi-report-generator *{
  box-sizing:border-box;
}

body.gdi-report-generator .shell{
  height:100vh;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:10px;
  padding:10px;
  box-sizing:border-box;
}

body.gdi-report-generator .shell.filters-collapsed{
  grid-template-rows:auto 1fr;
}

body.gdi-report-generator .shell.filters-collapsed #filtersPanel{
  display:none !important;
}

body.gdi-report-generator .lockedPage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
}

body.gdi-report-generator .lockedCard{
  width:min(720px, 100%);
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 24px;
  text-align:center;
}

body.gdi-report-generator .lockedIcon{
  font-size:40px;
  margin-bottom:10px;
}

body.gdi-report-generator .lockedActions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:14px;
}

body.gdi-report-generator #summaryBar{
  position:sticky;
  top:10px;
  z-index:50;
}

body.gdi-report-generator{
  --recentRunsHeight:250px;
  --myReportsHeight:200px;
}

body.gdi-report-generator #recentRunsBox{
  height:var(--recentRunsHeight);
}

body.gdi-report-generator #myReportsList{
  height:var(--myReportsHeight);
  overflow:auto;
  padding-right:6px;
}

body.gdi-report-generator .panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:20px;
}

body.gdi-report-generator #filtersPanel{
  height:auto;
  min-height:0;
}

body.gdi-report-generator #filtersFrame{
  width:100%;
  border:0;
  display:block;
  height:240px;
}

body.gdi-report-generator .toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  flex-wrap:wrap;
}

body.gdi-report-generator .spacer{
  flex:1;
}

body.gdi-report-generator .chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

body.gdi-report-generator .chip{
  background:rgba(27,215,96,.14);
  border:1px solid rgba(27,215,96,.30);
  color:#bff7d3;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}

body.gdi-report-generator .muted{
  color:var(--muted);
  font-size:13px;
}

body.gdi-report-generator #mainArea{
  min-height:0;
  height:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

body.gdi-report-generator .stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

body.gdi-report-generator .card{
  padding:12px;
  box-sizing:border-box;
}

body.gdi-report-generator .recentActions{
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  width:100%;
}

body.gdi-report-generator .switch.switchCenter{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

.btn.danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-color:rgba(255,80,80,.35);
  background:rgba(255,80,80,.08);
}

.btn.danger:hover{
  background:rgba(255,80,80,.12);
}

body.gdi-report-generator .actionsBar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

body.gdi-report-generator .actionsLeft{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

body.gdi-report-generator .tableWrap{
  overflow:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  -webkit-overflow-scrolling:touch;
}

body.gdi-report-generator table.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:840px;
}

body.gdi-report-generator table.table th,
body.gdi-report-generator table.table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}

body.gdi-report-generator table.table th{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(17,23,41,.95);
  color:#cfd4ff;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

body.gdi-report-generator table.table tr:last-child td{
  border-bottom:none;
}

body.gdi-report-generator table.table th.cellCenter,
body.gdi-report-generator table.table td.cellCenter{
  text-align:center;
  vertical-align:middle;
}

body.gdi-report-generator .summaryCell{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

body.gdi-report-generator .switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}

body.gdi-report-generator .switch input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  accent-color:var(--btn-primary);
}

body.gdi-report-generator .quotaLine{
  margin:10px 0;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

body.gdi-report-generator .pageTitle{
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
}

body.gdi-report-generator .reportBox{
  margin-bottom:10px;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

body.gdi-report-generator .reportList{
  margin-top:10px;
  display:grid;
  gap:8px;
}

body.gdi-report-generator .previewHead{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0 0 8px;
}

body.gdi-report-generator .previewStage{
  position:relative;
}

body.gdi-report-generator .previewStage.show-list #listFrame{
  display:block;
}

body.gdi-report-generator .previewStage.show-list #detailsFrame{
  display:none;
}

body.gdi-report-generator .previewStage.show-details #listFrame{
  display:none;
}

body.gdi-report-generator .previewStage.show-details #detailsFrame{
  display:block;
}

body.gdi-report-generator .listFrame{
  width:100%;
  height:600px;
  border:0;
  border-radius:12px;
  display:block;
  background:var(--panel-2);
}

@media (max-width:900px){
  body.gdi-report-generator table.table{
    min-width:720px;
    text-align:center;
    vertical-align:middle;
  }

  body.gdi-report-generator .listFrame{
    height:420px;
  }

  body.gdi-report-generator .recentActions{
    flex-wrap:wrap;
  }
}

@media (max-width:520px){
  body.gdi-report-generator .toolbar .btn{
    min-height:40px;
  }

  body.gdi-report-generator #generateBtn{
    flex:1 1 150px;
  }

  body.gdi-report-generator .listFrame{
    height:56dvh;
    min-height:360px;
  }

  body.gdi-report-generator table.table{
    min-width:760px;
  }
}


/* =========================================================
   Genre Research summary card
   ========================================================= */

body.gdi-genre-research .gdi-summary-card{
  margin-bottom:0;
  overflow:auto;
}

body.gdi-genre-research .gdi-summary-card h3{
  margin:0 0 10px;
}

body.gdi-genre-research .gdi-summary-lines{
  display:grid;
  gap:8px;
}

body.gdi-genre-research .gdi-summary-line{
  margin:0;
  color:var(--text);
  line-height:1.45;
}

body.gdi-genre-research .gdi-summary-line strong{
  font-weight:800;
}

body.gdi-genre-research .gdi-summary-lock{
  color:var(--muted);
}

@media (max-width:1180px),
       (hover:none) and (pointer:coarse),
       (max-height:650px){
  body.gdi-genre-research .gdi-summary-card{
    min-height:0 !important;
    overflow:visible !important;
  }

  body.gdi-genre-research .gdi-summary-card h3,
  body.gdi-genre-research .gdi-summary-card .gdi-summary-line{
    min-width:0 !important;
    width:100%;
  }
}

body.gdi-genre-research .gdi-chart-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
}

body.gdi-genre-research .gdi-chart-card-head h3{
  margin:0;
}

body.gdi-genre-research .gdi-chart-control{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

body.gdi-genre-research .gdi-chart-control select{
  background:#0e1430;
  color:var(--text);
  border:1px solid #2b3656;
  border-radius:8px;
  padding:5px 8px;
}

@media (max-width:700px), (orientation: landscape) and (max-height:520px) and (pointer: coarse){
  body.gdi-genre-research .gdi-chart-card-head{
    min-width:560px;
  }
}


/* =========================================================
   Report access / saved-report error pages
   Used by /api/report-open.php and reportTemplate.html fallback
   ========================================================= */

body.gdi-report-access{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(900px 420px at 25% -10%, rgba(110,107,255,.18), transparent 45%),
    radial-gradient(760px 360px at 90% 10%, rgba(27,215,96,.10), transparent 45%),
    var(--bg);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.gdi-report-access .wrap{
  max-width:none;
  margin:0;
  padding:0;
}

.gdi-report-access-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
}

.gdi-report-access-card{
  width:min(760px, 100%);
  background:linear-gradient(180deg, rgba(17,23,41,.98), rgba(14,20,36,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  padding:28px;
}

.gdi-report-access-kicker{
  color:#c7ccf8;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.gdi-report-access-card h1{
  margin:0 0 10px;
  color:#fff;
  font-size:30px;
  line-height:1.12;
}

.gdi-report-access-card p{
  margin:0;
  color:var(--muted);
  max-width:64ch;
}

.gdi-report-access-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.gdi-report-access-actions a{
  text-decoration:none;
}

.gdi-report-access-note{
  margin-top:16px !important;
  font-size:13px;
  color:#7f89a8 !important;
}


/* =========================================================
   Auth result / login error pages
   Used by /auth/callback.php when Auth0 returns an error
   ========================================================= */

body.gdi-auth-result{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(900px 420px at 25% -10%, rgba(110,107,255,.18), transparent 45%),
    radial-gradient(760px 360px at 90% 10%, rgba(27,215,96,.10), transparent 45%),
    var(--bg);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.gdi-auth-result-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
}

.gdi-auth-result-card{
  width:min(760px, 100%);
  background:linear-gradient(180deg, rgba(17,23,41,.98), rgba(14,20,36,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  padding:28px;
}

.gdi-auth-result-kicker{
  color:#c7ccf8;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.gdi-auth-result-card h1{
  margin:0 0 10px;
  color:#fff;
  font-size:30px;
  line-height:1.12;
}

.gdi-auth-result-card p{
  margin:0;
  color:var(--muted);
  max-width:64ch;
}

.gdi-auth-result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.gdi-auth-result-actions a{
  text-decoration:none;
}

.gdi-auth-result-note{
  margin-top:16px !important;
  font-size:13px;
  color:#7f89a8 !important;
}
/* =========================================================
   Sidebar bottom links: Legal + Social
   ========================================================= */

/* Keep the bottom utility links anchored near the bottom */
body.gdi-shell .sidebar-bottom-links{
  margin-top:auto;
  padding-top:14px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;

  align-items:start;
}

/* Prevent long labels from breaking the two-column layout */
body.gdi-shell .sidebar-link-col{
  min-width:0;
}

/* Small quiet section labels */
body.gdi-shell .sidebar-bottom-links .legal-label{
  margin:0 0 4px;
  color:#7f89a8;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Shared small-link style for Legal and Social */
body.gdi-shell .sidebar-mini-nav{
  display:flex;
  flex-direction:column;
  gap:0;
}

body.gdi-shell .sidebar-mini-nav a{
  display:flex;
  align-items:center;
  gap:7px;

  color:#7f89a8;
  text-decoration:none;

  padding:3px 6px;
  margin:0 0 1px;
  min-height:26px;

  border-radius:7px;
  font-size:12px;
  line-height:1.1;

  transition:background .15s ease, color .15s ease;
}

body.gdi-shell .sidebar-mini-nav a:hover{
  background:rgba(255,255,255,.04);
  color:#b9c2df;
}

/* Legal emoji icons */
body.gdi-shell .legal-icon{
  width:14px;
  height:14px;
  flex:0 0 14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  text-align:center;
  opacity:.85;
  font-size:12px;
  line-height:1;
}

/* Social image icons */
body.gdi-shell .social-icon-img{
  width:14px;
  height:14px;
  flex:0 0 14px;

  display:block;
  object-fit:contain;

  opacity:.95;
}

/* Center and soften parent-company note */
body.gdi-shell .sidebar-company-note{
  margin:8px 6px 0;
  padding-top:9px;

  text-align:center;
  border-top:1px solid rgba(255,255,255,.10);

  color:rgba(255,255,255,.50);
  font-size:11px;
  line-height:1.35;
}

body.gdi-shell .sidebar-company-note strong{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.72);
  font-weight:800;
}

/* Icon-rail fallback for older tablet/sidebar modes */
@media (max-width:980px) and (min-width:701px){
  body.gdi-shell .sidebar-bottom-links{
    grid-template-columns:1fr;
    gap:6px;
    margin-top:auto;
    padding-top:10px;
    justify-items:center;
  }

  body.gdi-shell .sidebar-mini-nav a{
    width:42px;
    height:34px;
    min-height:34px;
    justify-content:center;
    padding:0;
  }

  body.gdi-shell .sidebar-company-note{
    display:none !important;
  }
}

/* Very narrow sidebar drawer: tighten the two columns */
@media (max-width:380px){
  body.gdi-shell .sidebar-bottom-links{
    gap:8px;
  }

  body.gdi-shell .sidebar-mini-nav a{
    gap:6px;
    padding-left:4px;
    padding-right:4px;
    font-size:11px;
  }
}



/* =========================================================
   Genre Research phone pie-chart sizing fix
   Keeps pies inside the phone viewport in portrait + landscape.
   Uses the smaller available viewport dimension, with safe gutters.
   ========================================================= */

@media (max-width:700px),
       (hover:none) and (pointer:coarse) and (max-width:950px),
       (hover:none) and (pointer:coarse) and (max-height:520px){

  /*
    Size is based on the smaller practical viewport dimension:
    - portrait: mostly constrained by width
    - landscape: mostly constrained by height
    - still leaves visible edge gutters
  */
  body.gdi-genre-research #cardPieRevenue,
  body.gdi-genre-research #cardPiePlaytime,
  body.gdi-genre-research #cardPiePrice,
  body.gdi-genre-research #cardLangPie,
  body.gdi-genre-research #cardInsightPraised,
  body.gdi-genre-research #cardInsightCriticized,
  body.gdi-genre-research #cardInsightWhyNegative{
    --gdi-phone-pie-size: min(
      82vmin,
      calc(100dvw - 72px),
      calc(100dvh - 140px),
      360px
    );

    min-height: calc(var(--gdi-phone-pie-size) + 118px) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    align-items: center;
  }

  body.gdi-genre-research #cardPieRevenue h3,
  body.gdi-genre-research #cardPiePlaytime h3,
  body.gdi-genre-research #cardPiePrice h3,
  body.gdi-genre-research #cardLangPie h3,
  body.gdi-genre-research #cardInsightPraised h3,
  body.gdi-genre-research #cardInsightCriticized h3,
  body.gdi-genre-research #cardInsightWhyNegative h3,
  body.gdi-genre-research #cardPieRevenue .footer-note,
  body.gdi-genre-research #cardPiePlaytime .footer-note,
  body.gdi-genre-research #cardPiePrice .footer-note,
  body.gdi-genre-research #cardLangPie .footer-note,
  body.gdi-genre-research #cardInsightPraised .footer-note,
  body.gdi-genre-research #cardInsightCriticized .footer-note,
  body.gdi-genre-research #cardInsightWhyNegative .footer-note{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch;
  }

  body.gdi-genre-research #cardPieRevenue .chart-wrap,
  body.gdi-genre-research #cardPiePlaytime .chart-wrap,
  body.gdi-genre-research #cardPiePrice .chart-wrap,
  body.gdi-genre-research #cardLangPie .chart-wrap,
  body.gdi-genre-research #cardInsightPraised .chart-wrap,
  body.gdi-genre-research #cardInsightCriticized .chart-wrap,
  body.gdi-genre-research #cardInsightWhyNegative .chart-wrap{
    flex: 0 0 auto !important;

    width: var(--gdi-phone-pie-size) !important;
    height: var(--gdi-phone-pie-size) !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100dvw - 72px) !important;
    max-height: calc(100dvh - 140px) !important;

    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  body.gdi-genre-research #cardPieRevenue canvas,
  body.gdi-genre-research #cardPiePlaytime canvas,
  body.gdi-genre-research #cardPiePrice canvas,
  body.gdi-genre-research #cardLangPie canvas,
  body.gdi-genre-research #cardInsightPraised canvas,
  body.gdi-genre-research #cardInsightCriticized canvas,
  body.gdi-genre-research #cardInsightWhyNegative canvas{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* Very short landscape phones: preserve usability instead of forcing tall cards. */
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:430px){
  body.gdi-genre-research #cardPieRevenue,
  body.gdi-genre-research #cardPiePlaytime,
  body.gdi-genre-research #cardPiePrice,
  body.gdi-genre-research #cardLangPie,
  body.gdi-genre-research #cardInsightPraised,
  body.gdi-genre-research #cardInsightCriticized,
  body.gdi-genre-research #cardInsightWhyNegative{
    --gdi-phone-pie-size: min(
      76vmin,
      calc(100dvw - 72px),
      calc(100dvh - 118px),
      320px
    );

    min-height: calc(var(--gdi-phone-pie-size) + 104px) !important;
  }

  body.gdi-genre-research #cardPieRevenue .chart-wrap,
  body.gdi-genre-research #cardPiePlaytime .chart-wrap,
  body.gdi-genre-research #cardPiePrice .chart-wrap,
  body.gdi-genre-research #cardLangPie .chart-wrap,
  body.gdi-genre-research #cardInsightPraised .chart-wrap,
  body.gdi-genre-research #cardInsightCriticized .chart-wrap,
  body.gdi-genre-research #cardInsightWhyNegative .chart-wrap{
    max-height: calc(100dvh - 118px) !important;
  }
}