/*
 * Browser-demo corrections.
 *
 * The native Electron window supplies an opaque surface behind the renderer.
 * An iframe does not have that native surface, so transparent glass layers can
 * blend into the landing page and become hard to read. Keep the source
 * renderer intact and reproduce the native, theme-colored window surface here.
 */
:root body,
:root #app,
:root .content.content-glass-header {
  background: var(--bg-deep) !important;
}

:root .glass-header {
  background-color: var(--bg-surface) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 10%, var(--bg-surface)),
    var(--bg-surface) 72%
  ) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 10%, var(--bg-surface)),
    var(--bg-surface) 72%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

:root .sidebar {
  background-color: var(--bg-surface) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 14%, var(--bg-surface)),
    var(--bg-surface) 64%,
    color-mix(in srgb, var(--accent) 5%, var(--bg-surface))
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right-color: var(--border-strong) !important;
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.06), 14px 0 28px rgba(0, 0, 0, 0.24) !important;
}

:root .sidebar::before {
  display: none !important;
}

/* Match the native library's compact toolbar and two-column cards. The outer
 * page keeps a 900px renderer viewport at narrow widths, so these desktop
 * rules remain active when the complete app is scaled down. */
.library-controls {
  grid-template-columns: minmax(0, max-content) minmax(240px, 1fr) !important;
}

.library-launch-actions {
  display: flex !important;
  grid-template-columns: none !important;
}

.library-controls-center {
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 148px) !important;
}

.game-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.game-grid-column {
  display: contents !important;
}