/* My Games page. Uses the shared kz- classes and variables from /css/emulator-shared.css. */
.kz-lib-header, .kz-lib-main, .kz-lib-footer { box-sizing: border-box; max-width: 960px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
body { margin: 0; background: var(--kz-bg, #0f1020); color: var(--kz-text, #f1f0fa); font-family: var(--kz-font, system-ui, sans-serif); line-height: 1.5;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
a { color: var(--kz-accent-text, #a994ff); }
.kz-lib-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.kz-lib-brand { color: var(--kz-text, #f1f0fa); font-weight: 800; font-size: 1.25rem; text-decoration: none; }
.kz-lib-main h1 { margin: 8px 0 4px; font-size: 1.6rem; }
.kz-lib-lead { margin: 0 0 20px; color: var(--kz-muted, #a5a3c2); }
.kz-lib-error { padding: 10px 14px; border-radius: var(--kz-radius, 14px); background: rgba(198, 61, 84, 0.18); border: 1px solid var(--kz-danger, #c63d54); }
.kz-lib-empty { display: grid; gap: 12px; justify-items: start; margin-bottom: 20px; }
.kz-lib-empty h2, .kz-lib-backup h2 { margin: 0; font-size: 1.15rem; }
.kz-lib-empty p { margin: 0; }
.kz-lib-grid { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kz-lib-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.kz-lib-tile { width: 64px; height: 64px; --kz-tile-font: 1.8rem; }
.kz-lib-name { margin: 0; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.kz-lib-meta { margin: 2px 0 0; color: var(--kz-muted, #a5a3c2); font-size: 0.85rem; }
.kz-lib-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kz-lib-confirm { flex-basis: 100%; margin: 0; font-size: 0.9rem; }
.kz-lib-backup { display: grid; gap: 14px; }
.kz-lib-meter { width: 100%; height: 14px; }
.kz-lib-usage, .kz-lib-note { margin: 4px 0 0; color: var(--kz-muted, #a5a3c2); font-size: 0.9rem; }
.kz-lib-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kz-lib-footer { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 28px; padding-bottom: 28px; font-size: 0.9rem; }
.kz-lib-main:focus-within label.kz-btn:has(+ input:focus-visible) { outline: 3px solid var(--kz-accent-text, #a994ff); outline-offset: 3px; }

/* .kz-btn sets display, which would otherwise override the hidden attribute */
.kz-lib-main [hidden] { display: none !important; }