:root {
  --bg: #060609;
  --surface: #13131c;
  --surface-raised: #1a1a26;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(139, 92, 246, .42);
  --accent: #8b5cf6;
  --accent-light: #c4b5fd;
  --cyan: #22d3ee;
  --text: #f0f0f8;
  --muted: #a1a1b8;
  --font: 'Space Grotesk', sans-serif;
  --mono: 'Space Mono', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 78% -20%, rgba(139, 92, 246, .18), transparent 28rem),
    radial-gradient(circle at 15% 40%, rgba(34, 211, 238, .08), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 4px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: rgba(6, 6, 9, .82);
  backdrop-filter: blur(18px);
}

.topbar-inner,
.dashboard {
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
}

.topbar-inner {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.brand {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.05em;
}

.brand-ten {
  color: var(--accent-light);
}

.brand-dot,
.brand-pro,
.page-mark,
.back-link {
  color: var(--muted);
}

.brand-pro {
  font-weight: 400;
}

.page-mark,
.eyebrow,
.stat-label,
th {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.back-link {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .76rem;
  transition: color .2s ease;
}

.back-link:hover,
.back-to-overview:hover {
  color: var(--accent-light);
}

.dashboard {
  padding: 4.5rem 0 5rem;
}

.dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.25rem;
}

.eyebrow {
  margin: 0 0 .72rem;
  color: var(--accent-light);
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: .5rem;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: .9;
  letter-spacing: -.07em;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  letter-spacing: -.035em;
}

.page-description {
  max-width: 35rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1rem;
}

.store-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}

.store-links {
  display: contents;
}

.store-link,
.back-to-overview {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .42rem .75rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.store-link:hover,
.store-link.is-active {
  border-color: var(--border-strong);
  background: rgba(139, 92, 246, .14);
  color: var(--text);
}

.live-status {
  min-height: 1.3rem;
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: .85rem;
}

.live-status.is-error {
  color: #fda4af;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  margin-bottom: .9rem;
}

.stat-card,
.panel {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

.stat-card {
  min-height: 8.4rem;
  border-radius: 1.25rem;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-label {
  color: var(--muted);
}

.stat-value {
  color: var(--text);
  font-size: clamp(2.05rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.07em;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin-bottom: .9rem;
}

.panel {
  margin-bottom: .9rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.chart-panel {
  margin-bottom: 0;
}

.panel-heading {
  min-height: 6.9rem;
  padding: 1.35rem 1.45rem 1.15rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.panel-heading .eyebrow {
  margin-bottom: .5rem;
}

.bar-chart {
  min-height: 15.75rem;
  padding: 1.35rem 1.45rem;
  display: grid;
  align-content: center;
  gap: 1rem;
}

.chart-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, .8fr) minmax(5rem, 2fr) 2.2rem;
  align-items: center;
  gap: .8rem;
}

.chart-label,
.chart-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
}

.chart-label {
  color: var(--muted);
}

.chart-value {
  color: var(--text);
  font-family: var(--mono);
  font-size: .73rem;
  text-align: right;
}

.chart-track {
  height: .52rem;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}

.chart-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.accent-cyan .chart-fill {
  background: linear-gradient(90deg, #0e7490, var(--cyan));
}

.empty-chart,
.empty-row {
  color: var(--muted);
  text-align: center;
  font-size: .88rem;
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
}

th,
td {
  padding: 1rem 1.45rem;
  text-align: left;
}

th {
  color: var(--muted);
  font-weight: 400;
}

td {
  border-top: 1px solid var(--border);
  color: #d9d9e7;
  font-size: .9rem;
}

tbody tr {
  transition: background .18s ease;
}

tbody tr:hover {
  background: rgba(139, 92, 246, .075);
}

.game-title {
  color: var(--text);
  font-weight: 600;
}

.game-meta,
.price,
.date {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .75rem;
}

.store-anchor {
  color: var(--accent-light);
}

.store-heading {
  min-height: 7.9rem;
}

@media (max-width: 760px) {
  .topbar-inner,
  .dashboard {
    width: min(100% - 2rem, 1180px);
  }

  .dashboard {
    padding-top: 2.5rem;
  }

  .dashboard-heading {
    align-items: start;
    flex-direction: column;
  }

  .store-nav {
    justify-content: flex-start;
  }

  .stats-grid,
  .charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-card {
    min-height: 7rem;
  }
}

@media (max-width: 450px) {
  .topbar-inner {
    min-height: 4rem;
  }

  .page-mark {
    display: none;
  }

  .back-link {
    font-size: .67rem;
  }

  .stats-grid {
    gap: .65rem;
  }

  .stat-card,
  .panel {
    border-radius: 1rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .panel-heading,
  .bar-chart {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.topbar-actions .back-link { margin-left: 0; }

.signed-in {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .68rem;
}

.topbar-actions form { margin: 0; }

.logout-button {
  min-height: 2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .65rem;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .68rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.logout-button:hover { border-color: var(--border-strong); color: var(--text); }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.login-card {
  width: min(100%, 27rem);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 6vw, 3rem);
  background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
  box-shadow: 0 24px 90px rgba(0, 0, 0, .38), 0 0 80px rgba(139, 92, 246, .1);
}

.login-brand { display: inline-block; margin-bottom: 3.5rem; }
.login-card h1 { margin-bottom: .7rem; }
.login-description { margin-bottom: 1.75rem; color: var(--muted); }
.login-form { display: grid; gap: 1rem; }

.login-form label {
  display: grid;
  gap: .45rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .71rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .7rem .85rem;
  background: rgba(0, 0, 0, .24);
  color: var(--text);
  font: 1rem var(--font);
}

.login-form input:focus {
  border-color: var(--accent-light);
  outline: 2px solid rgba(196, 181, 253, .2);
}

.login-form button {
  min-height: 3.1rem;
  margin-top: .5rem;
  border: 0;
  border-radius: .75rem;
  background: linear-gradient(120deg, var(--accent), #6d5ce8);
  color: #fff;
  font: 700 .82rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}

.login-form button:hover { filter: brightness(1.13); transform: translateY(-1px); }

.login-error {
  margin-bottom: 1.25rem;
  border: 1px solid rgba(244, 63, 94, .34);
  border-radius: .75rem;
  padding: .8rem;
  background: rgba(244, 63, 94, .1);
  color: #fecdd3;
  font-size: .88rem;
}

@media (max-width: 450px) {
  .signed-in { display: none; }
}
.add-game-link,
.cancel-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: .35rem .7rem;
  color: var(--accent-light);
  font-family: var(--mono);
  font-size: .68rem;
}

.add-game-link:hover { background: rgba(139, 92, 246, .14); }
.form-dashboard { width: min(760px, calc(100% - 3rem)); }
.form-heading { margin-bottom: 2rem; }
.game-form { display: grid; gap: 1rem; }
.form-panel,
.form-errors,
.form-success {
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
}

.form-panel h2 { margin-bottom: 1.25rem; }
.form-panel h2 b,
.form-field b { color: var(--accent-light); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-field { display: grid; gap: .45rem; }
.form-field-wide { grid-column: 1 / -1; }
.form-field > span { color: var(--muted); font-family: var(--mono); font-size: .71rem; letter-spacing: .08em; text-transform: uppercase; }
.form-field input,
.form-field select {
  width: 100%; min-height: 3rem; border: 1px solid var(--border); border-radius: .75rem; padding: .7rem .85rem; background: rgba(0, 0, 0, .24); color: var(--text); font: 1rem var(--font);
}
.form-field input:focus,
.form-field select:focus { border-color: var(--accent-light); outline: 2px solid rgba(196, 181, 253, .2); }
.category-options { display: flex; flex-wrap: wrap; gap: .65rem; }
.category-option { position: relative; }
.category-option input { position: absolute; opacity: 0; }
.category-option span { display: block; border: 1px solid var(--border); border-radius: 999px; padding: .5rem .8rem; color: var(--muted); font-size: .85rem; cursor: pointer; }
.category-option input:checked + span { border-color: var(--border-strong); background: rgba(139, 92, 246, .14); color: var(--text); }
.category-option input:focus-visible + span { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .85rem; }
.cancel-link { border-color: var(--border); color: var(--muted); }
.form-actions button { min-height: 3rem; border: 0; border-radius: .75rem; padding: .7rem 1rem; background: linear-gradient(120deg, var(--accent), #6d5ce8); color: #fff; font: 700 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.form-errors { border-color: rgba(244, 63, 94, .34); background: rgba(244, 63, 94, .1); color: #fecdd3; }
.form-errors ul { margin: 0; padding-left: 1.25rem; }
.form-success { margin: 0 0 1.1rem; border-color: rgba(45, 212, 191, .34); background: rgba(45, 212, 191, .1); color: #99f6e4; }

@media (max-width: 600px) {
  .form-dashboard { width: min(100% - 2rem, 760px); }
  .form-grid { grid-template-columns: 1fr; }
  .form-field-wide { grid-column: auto; }
  .add-game-link { display: none; }
}
.entry-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.entry-type-option {
  position: relative;
}

.entry-type-option input {
  position: absolute;
  opacity: 0;
}

.entry-type-option span {
  display: block;
  min-width: 11rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .85rem 1rem;
  color: var(--muted);
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.entry-type-option input:checked + span {
  border-color: var(--border-strong);
  background: rgba(139, 92, 246, .14);
  color: var(--text);
}

.entry-type-option input:focus-visible + span {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.purchase-title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .38rem .5rem;
}

.purchase-name {
  color: var(--text);
  font-weight: 600;
}

.purchase-parent {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 400;
}

.item-badge {
  border: 1px solid rgba(34, 211, 238, .44);
  border-radius: 999px;
  padding: .16rem .38rem;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

@media (max-width: 600px) {
  .entry-type-option { flex: 1 1 100%; }
  .entry-type-option span { min-width: 0; text-align: center; }
}

.type-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 .8rem;
}

.store-nav {
  justify-content: flex-start;
  margin: 0 0 1.25rem;
}

.nav-label {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .type-nav { margin-bottom: .7rem; }
}
.spending-section {
  margin-bottom: .9rem;
}

.section-heading {
  min-height: 5.5rem;
  padding: 0 1.45rem 1.1rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.section-heading .eyebrow {
  margin-bottom: .45rem;
}

.section-note {
  max-width: 25rem;
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.5;
  text-align: right;
}

.spending-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

.spending-card {
  min-height: 7.65rem;
  padding: 1.15rem 1.3rem;
}

.spending-value {
  color: var(--text);
  font-size: clamp(1.35rem, 2.7vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -.055em;
}

.spending-charts {
  margin-top: .9rem;
}

.spend-chart .chart-row {
  grid-template-columns: minmax(5.5rem, .8fr) minmax(4.5rem, 2fr) minmax(5.2rem, auto);
}

.spend-chart .chart-value {
  font-size: .67rem;
}

@media (max-width: 760px) {
  .section-heading {
    min-height: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    align-items: start;
    flex-direction: column;
  }

  .section-note { text-align: left; }

  .spending-summary-grid { grid-template-columns: 1fr; }

  .spending-card { min-height: 6.5rem; }
}

@media (max-width: 450px) {
  .section-heading { padding-bottom: .85rem; }
  .spend-chart .chart-row { grid-template-columns: minmax(4.2rem, .8fr) minmax(3.3rem, 1.6fr) minmax(4.6rem, auto); gap: .45rem; }
  .spend-chart .chart-value { font-size: .6rem; }
}
.game-anchor {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .18em;
  transition: color .18s ease, text-decoration-color .18s ease;
}

.game-anchor:hover {
  color: var(--accent-light);
  text-decoration-color: currentColor;
}

.detail-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1.2rem 0 .9rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 0 0, rgba(139, 92, 246, .22), transparent 15rem),
    linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
}

.game-monogram {
  width: clamp(4.8rem, 11vw, 7rem);
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(196, 181, 253, .4);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgba(139, 92, 246, .48), rgba(34, 211, 238, .18));
  color: #fff;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.08em;
}

.detail-hero-copy h1 {
  margin-bottom: .65rem;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}

.detail-tag {
  border: 1px solid rgba(34, 211, 238, .32);
  border-radius: 999px;
  padding: .32rem .6rem;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .65rem;
}

.detail-tag.is-muted {
  border-color: var(--border);
  color: var(--muted);
}

.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  margin-bottom: .9rem;
}

.detail-stat {
  min-height: 7.5rem;
}

@media (max-width: 760px) {
  .detail-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-hero { align-items: flex-start; }
}

@media (max-width: 450px) {
  .detail-hero { gap: 1rem; padding: 1rem; }
  .game-monogram { border-radius: .9rem; }
  .detail-stat { min-height: 6.5rem; }
}
.table-action {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .35rem .55rem;
  border: 1px solid rgba(196, 181, 253, .35);
  border-radius: .45rem;
  color: var(--accent-light);
  font-family: var(--mono);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.table-action:hover {
  border-color: var(--accent-light);
  background: rgba(139, 92, 246, .14);
  color: #fff;
}

.purchase-summary {
  margin-bottom: .9rem;
}

.purchase-summary .page-description,
.danger-zone .page-description {
  margin-bottom: 0;
}

.danger-zone {
  margin-top: 1.5rem;
  border-color: rgba(248, 113, 113, .38);
  background: linear-gradient(145deg, rgba(127, 29, 29, .18), rgba(255, 255, 255, .015));
}

.delete-button {
  margin-top: 1rem;
  border: 1px solid rgba(248, 113, 113, .7);
  border-radius: .6rem;
  padding: .72rem 1rem;
  background: rgba(185, 28, 28, .18);
  color: #fecaca;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.delete-button:hover {
  border-color: #f87171;
  background: rgba(185, 28, 28, .38);
  color: #fff;
}

.delete-button:focus-visible,
.table-action:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.add-game-link.icon-only {
  width: 2.45rem;
  min-height: 2.45rem;
  justify-content: center;
  padding: 0;
  border-radius: .7rem;
}

.add-game-link svg,
.table-action svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.table-action.icon-action {
  width: 2.25rem;
  min-height: 2.25rem;
  justify-content: center;
  padding: 0;
  border-radius: .6rem;
}

@media (max-width: 600px) {
  .add-game-link.icon-only { display: inline-flex; }
}
.collection-search {
  display: flex;
  align-items: stretch;
  width: min(100%, 38rem);
  margin: 1.15rem 0 .45rem;
}

.collection-search input {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 2.85rem;
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: .75rem 0 0 .75rem;
  padding: 0 .9rem;
  outline: 0;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  font: 500 .78rem var(--mono);
}

.collection-search input::placeholder { color: var(--muted); }
.collection-search input:focus { border-color: var(--accent-light); background: rgba(139, 92, 246, .07); }

.collection-search button {
  width: 2.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 0 .75rem .75rem 0;
  background: rgba(139, 92, 246, .16);
  color: var(--accent-light);
  cursor: pointer;
}

.collection-search button:hover { background: rgba(139, 92, 246, .3); color: #fff; }
.collection-search button:focus-visible,
.search-clear:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.collection-search svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.9;
}

.search-clear {
  align-self: center;
  margin-left: .55rem;
  color: var(--muted);
  font: 700 1.35rem/1 var(--mono);
  text-decoration: none;
}

.search-clear:hover { color: var(--text); }

.search-summary {
  margin: 0 0 1rem;
  color: var(--cyan);
  font: .7rem/1.5 var(--mono);
}

.form-help {
  margin: -.1rem 0 .85rem;
  color: var(--muted);
  font: .7rem/1.5 var(--mono);
}

@media (max-width: 520px) {
  .collection-search { width: 100%; }
  .collection-search input { font-size: .68rem; }
}
.purchase-filters {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(10rem, 13rem) minmax(10rem, 13rem) auto;
  align-items: end;
  gap: .8rem;
  margin: 1.2rem 0 1.35rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .025);
}

.filters-copy { padding: .1rem .25rem .15rem; }
.filters-copy .eyebrow { margin: 0 0 .22rem; }
.filters-copy span { color: var(--text); font: 700 .78rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }

.filter-control { display: grid; gap: .35rem; }
.filter-control label { color: var(--muted); font: 700 .63rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.filter-control select {
  width: 100%;
  min-height: 2.55rem;
  padding: 0 2.2rem 0 .75rem;
  border: 1px solid var(--border-strong);
  border-radius: .65rem;
  outline: 0;
  background: rgba(12, 14, 28, .9);
  color: var(--text);
  font: 600 .72rem var(--mono);
  cursor: pointer;
}
.filter-control select:focus { border-color: var(--accent-light); box-shadow: 0 0 0 3px rgba(139, 92, 246, .13); }

.reset-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.55rem;
  padding: 0 .8rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
  color: var(--muted);
  font: 700 .67rem var(--mono);
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}
.reset-filters:hover { border-color: var(--border-strong); background: rgba(139, 92, 246, .12); color: var(--text); }
.reset-filters:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.reset-filters svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

@media (max-width: 760px) {
  .purchase-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-copy { grid-column: 1 / -1; }
  .reset-filters { justify-self: start; }
}

@media (max-width: 450px) {
  .purchase-filters { grid-template-columns: 1fr; gap: .7rem; padding: .85rem; }
  .filters-copy { grid-column: auto; }
  .reset-filters { width: 100%; }
}
.purchase-filters-expanded {
  grid-template-columns: minmax(8rem, 1fr) repeat(6, minmax(7.2rem, 11rem)) auto;
  align-items: end;
}

.filter-control input {
  width: 100%;
  min-height: 2.55rem;
  box-sizing: border-box;
  padding: 0 .7rem;
  border: 1px solid var(--border-strong);
  border-radius: .65rem;
  outline: 0;
  background: rgba(12, 14, 28, .9);
  color: var(--text);
  font: 600 .72rem var(--mono);
}
.filter-control input:focus { border-color: var(--accent-light); box-shadow: 0 0 0 3px rgba(139, 92, 246, .13); }

.history-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
  margin: -.55rem 0 1.15rem;
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .018);
}
.view-switch { display: inline-flex; gap: .35rem; }
.view-switch-button,
.export-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  border: 1px solid var(--border);
  border-radius: .58rem;
  padding: 0 .75rem;
  background: rgba(255, 255, 255, .02);
  color: var(--muted);
  font: 700 .66rem var(--mono);
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.view-switch-button:hover,
.view-switch-button.is-active,
.export-link:hover { border-color: var(--border-strong); background: rgba(139, 92, 246, .14); color: var(--text); }
.view-switch-button:focus-visible,
.export-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.history-sort { width: min(100%, 12.5rem); }
.export-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.export-link-secondary { border-color: rgba(45, 212, 191, .32); color: #99f6e4; }

.insights-grid,
.store-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.2rem 0;
}
.insight-card {
  display: grid;
  align-content: start;
  gap: .42rem;
  min-height: 7rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: linear-gradient(140deg, rgba(139, 92, 246, .1), rgba(255, 255, 255, .018));
}
.insight-card strong { overflow: hidden; color: var(--text); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.insight-detail { color: var(--muted); font: .68rem/1.45 var(--mono); }

.history-panel { margin-top: 1.2rem; }
.timeline { padding: .1rem 1rem 1rem; }
.timeline-group { position: relative; padding: 1rem 0 0 1.2rem; border-left: 1px solid var(--border-strong); }
.timeline-group:last-child { padding-bottom: .25rem; }
.timeline-group h3 { position: relative; margin: 0 0 .8rem; color: var(--accent-light); font: 700 .75rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.timeline-group h3::before { position: absolute; left: -1.53rem; top: .15rem; width: .58rem; height: .58rem; border: 2px solid var(--accent-light); border-radius: 50%; background: var(--surface); content: ''; }
.timeline-items { display: grid; gap: .55rem; }
.timeline-item { display: grid; grid-template-columns: minmax(5.8rem, .7fr) minmax(0, 1.8fr) auto; align-items: start; gap: .7rem; padding: .72rem; border: 1px solid var(--border); border-radius: .65rem; background: rgba(255, 255, 255, .018); }
.timeline-item p { margin: .32rem 0 0; color: var(--muted); font: .66rem/1.4 var(--mono); }
.timeline-date { color: var(--cyan); font: .67rem/1.5 var(--mono); }

.duplicate-warning {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: .8rem .9rem;
  border: 1px solid rgba(251, 191, 36, .42);
  border-radius: .75rem;
  background: rgba(180, 83, 9, .12);
  color: #fde68a;
  font-size: .85rem;
}
.duplicate-warning label { display: inline-flex; align-items: center; gap: .5rem; color: #fff7cc; font-size: .78rem; }

@media (max-width: 1180px) {
  .purchase-filters-expanded { grid-template-columns: minmax(8rem, 1fr) repeat(4, minmax(8rem, 1fr)); }
  .purchase-filters-expanded .filters-copy { grid-column: auto; }
}

@media (max-width: 760px) {
  .purchase-filters-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-filters-expanded .filters-copy { grid-column: 1 / -1; }
  .history-controls { align-items: stretch; }
  .history-sort { width: min(100%, 15rem); }
  .insights-grid,
  .store-summary-grid { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 1fr auto; }
  .timeline-date { grid-column: 1; }
  .timeline-item > div { grid-column: 1; }
  .timeline-item > .table-action { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 450px) {
  .purchase-filters-expanded { grid-template-columns: 1fr; }
  .purchase-filters-expanded .filters-copy { grid-column: auto; }
  .history-controls { padding: .75rem; }
  .view-switch,
  .view-switch-button,
  .export-actions,
  .export-link { width: 100%; }
  .export-actions { display: grid; grid-template-columns: 1fr 1fr; }
}
.year-review { margin: 1.2rem 0; }
.year-review-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.year-review-grid article { display: grid; gap: .35rem; min-height: 5.5rem; padding: .85rem; border: 1px solid var(--border); border-radius: .7rem; background: rgba(139, 92, 246, .08); }
.year-review-grid span { color: var(--muted); font: 700 .61rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.year-review-grid strong { color: var(--text); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.this-month-panel { margin: 1.2rem 0; }
.this-month-items { display: grid; gap: .55rem; }
.this-month-items article { display: grid; grid-template-columns: minmax(5.8rem, .6fr) minmax(0, 2fr); gap: .7rem; align-items: start; padding: .72rem 0; border-bottom: 1px solid var(--border); }
.this-month-items article:last-child { border-bottom: 0; padding-bottom: 0; }
.this-month-items > article > span { color: var(--cyan); font: .66rem/1.5 var(--mono); }
.this-month-items p { margin: .3rem 0 0; color: var(--muted); font: .66rem/1.4 var(--mono); }

@media (max-width: 900px) {
  .year-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .year-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .this-month-items article { grid-template-columns: 1fr; gap: .3rem; }
}
.steam-link {
    border-color: rgba(101, 192, 255, .34);
    color: #b8e4ff;
}

.steam-dashboard {
    padding-bottom: 4rem;
}

.steam-setup {
    margin-bottom: 1rem;
    border-color: rgba(101, 192, 255, .24);
}

.steam-setup h2 {
    margin: .25rem 0 .6rem;
}

.steam-setup code {
    color: #b8e4ff;
}

.steam-stats {
    margin: 1rem 0;
}

.steam-completed {
    margin-top: 1rem;
}

.steam-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .85rem;
}

.steam-game-card {
    position: relative;
    min-height: 150px;
    padding: 1rem;
    border: 1px solid rgba(101, 192, 255, .22);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(101, 192, 255, .12), rgba(255, 255, 255, .025));
}

.steam-game-card h3 {
    max-width: calc(100% - 50px);
    margin: 0 0 .9rem;
    font-size: 1rem;
    line-height: 1.3;
}

.steam-game-card p {
    margin: .3rem 0;
    color: var(--muted, #a5a5ae);
    font-size: .83rem;
}

.steam-complete-badge {
    position: absolute;
    top: .9rem;
    right: .9rem;
    padding: .28rem .42rem;
    border: 1px solid rgba(134, 255, 182, .5);
    border-radius: 7px;
    color: #9cf7bc;
    background: rgba(36, 182, 92, .12);
    font: 700 .72rem/1 'Space Mono', monospace;
}

@media (max-width: 640px) {
    .steam-game-grid {
        grid-template-columns: 1fr;
    }
}
.steam-game-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.1rem;
}

.steam-game-card {
    isolation: isolate;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-color: rgba(101, 192, 255, .2);
    background: #0c1019;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.steam-game-card:hover {
    transform: translateY(-4px);
    border-color: rgba(130, 215, 255, .58);
    box-shadow: 0 20px 38px rgba(0, 0, 0, .35);
}

.steam-cover {
    position: relative;
    aspect-ratio: 600 / 900;
    overflow: hidden;
    background: linear-gradient(145deg, #182539, #0b0f17);
}

.steam-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, opacity .2s ease;
}

.steam-game-card:hover .steam-cover-image {
    transform: scale(1.045);
}

.steam-cover-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 7, 14, .04) 35%, rgba(2, 7, 14, .7) 100%);
}

.steam-cover-missing::after {
    content: 'STEAM';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(184, 228, 255, .75);
    font: 700 1rem/1 'Space Mono', monospace;
    letter-spacing: .18em;
}

.steam-complete-badge {
    z-index: 1;
    top: .8rem;
    right: .8rem;
    padding: .38rem .5rem;
    border-color: rgba(148, 255, 193, .75);
    border-radius: 8px;
    background: rgba(10, 65, 36, .78);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .28);
    font-size: .78rem;
}

.steam-card-content {
    padding: .95rem 1rem 1.05rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.steam-game-card h3 {
    max-width: none;
    min-height: 2.65em;
    margin: 0 0 .8rem;
    color: #f3f7ff;
    font-size: 1rem;
    line-height: 1.32;
}

.steam-game-card p {
    margin: .25rem 0;
}

.steam-game-card .steam-achievements {
    color: #a7f4c1;
    font: 700 .74rem/1.4 'Space Mono', monospace;
}

.steam-game-card .steam-meta {
    color: #9eaab9;
    font-size: .79rem;
}

@media (max-width: 640px) {
    .steam-game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
    }

    .steam-card-content {
        padding: .75rem;
    }

    .steam-game-card h3 {
        min-height: 0;
        font-size: .88rem;
    }
}
/* Gablota Steam: pięć kart na szerokim ekranie, z adaptacją dla mniejszych widoków. */
.steam-game-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .9rem;
}

.steam-card-content {
    padding: .85rem .9rem .95rem;
    background: linear-gradient(145deg, rgba(20, 36, 55, .95), rgba(9, 13, 21, .98));
}

.steam-game-card h3 {
    display: -webkit-box;
    min-height: 2.62em;
    overflow: hidden;
    margin-bottom: .85rem;
    font-size: .95rem;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.steam-card-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

.steam-card-summary p {
    display: grid;
    gap: .16rem;
    min-width: 0;
    margin: 0;
    padding: .4rem .42rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 7px;
    background: rgba(255, 255, 255, .035);
}

.steam-card-summary span,
.steam-completed-date {
    color: #8292a5;
    font: .61rem/1.25 'Space Mono', monospace;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.steam-card-summary strong {
    overflow: hidden;
    color: #d9e9f7;
    font: 700 .74rem/1.25 'Space Mono', monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.steam-card-summary p:first-child strong {
    color: #a7f4c1;
}

.steam-completed-date {
    margin: .65rem 0 0 !important;
    color: #7fdba3 !important;
}

@media (max-width: 1180px) {
    .steam-game-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 940px) {
    .steam-game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .steam-game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steam-card-content {
        padding: .7rem;
    }

    .steam-card-summary {
        grid-template-columns: 1fr;
    }
}
/* Większe karty: pięć tylko na bardzo szerokich ekranach. */
.steam-game-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}

.steam-game-card h3 {
    font-size: 1.06rem;
}

@media (min-width: 1680px) {
    .steam-game-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .steam-game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .steam-game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .steam-game-grid {
        grid-template-columns: 1fr;
    }
}
/* Widok galerii ma własny, szerszy kontener niż historia zakupów. */
.steam-dashboard {
    width: min(1600px, calc(100% - 2rem));
}

@media (max-width: 640px) {
    .steam-dashboard {
        width: min(1600px, calc(100% - 1.5rem));
    }
}
.steam-sort-form {
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) auto;
    align-items: center;
    gap: .45rem;
    padding: .55rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(0, 0, 0, .12);
}

.steam-sort-form label {
    color: #90a0b2;
    font: .65rem/1 'Space Mono', monospace;
    text-transform: uppercase;
}

.steam-sort-form select,
.steam-sort-form button {
    min-height: 2.25rem;
    border: 1px solid rgba(130, 215, 255, .25);
    border-radius: 7px;
    color: #e5f3ff;
    background: #111b28;
    font: .78rem/1 'Space Grotesk', sans-serif;
}

.steam-sort-form select {
    padding: 0 .55rem;
}

.steam-sort-form button {
    padding: 0 .7rem;
    cursor: pointer;
}

@media (max-width: 680px) {
    .steam-sort-form {
        width: 100%;
        grid-template-columns: auto 1fr auto;
    }
}
.platinum-games-nav {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 2.4rem;
    padding: 0 .75rem;
    border: 1px solid rgba(255, 206, 97, .45);
    border-radius: .55rem;
    color: #ffe3a3;
    background: linear-gradient(135deg, rgba(128, 87, 14, .34), rgba(38, 30, 9, .28));
    font: 700 .7rem/1 'Space Mono', monospace;
    letter-spacing: .025em;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.platinum-games-nav:hover {
    transform: translateY(-1px);
    border-color: #ffe3a3;
    background: rgba(128, 87, 14, .45);
}

.platinum-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.platinum-add-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2.5rem;
    padding: 0 .78rem;
    border-color: rgba(103, 166, 255, .52);
    color: #d3e7ff;
    background: rgba(45, 94, 165, .22);
    text-decoration: none;
}

.platinum-add-link > :first-child {
    font-size: 1.15rem;
    line-height: 1;
}

.game-source-badge {
    position: absolute;
    z-index: 1;
    top: .8rem;
    left: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    min-height: 1.8rem;
    padding: 0 .45rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 7px;
    color: #f1f7ff;
    background: rgba(5, 9, 15, .74);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .28);
    font: 700 .65rem/1 'Space Mono', monospace;
}

.game-source-badge svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.game-source-badge.source-steam {
    color: #c4e6ff;
    border-color: rgba(104, 193, 255, .65);
    background: rgba(16, 57, 94, .8);
}

.game-source-badge.source-ps {
    color: #d5e4ff;
    border-color: rgba(112, 149, 255, .68);
    background: rgba(28, 52, 126, .82);
}

.game-source-badge.source-ps strong {
    font-size: .78rem;
    letter-spacing: -.08em;
}

.ps-cover-placeholder {
    background:
        radial-gradient(circle at 22% 16%, rgba(89, 144, 255, .75), transparent 32%),
        linear-gradient(145deg, #172f7b, #0a1330 62%, #0d1018);
}

.ps-cover-placeholder::before {
    content: 'PLAYSTATION';
    position: absolute;
    z-index: 1;
    right: 10%;
    bottom: 11%;
    left: 10%;
    color: rgba(226, 239, 255, .62);
    font: 700 clamp(.75rem, 1.5vw, 1.1rem)/1.2 'Space Mono', monospace;
    letter-spacing: .12em;
    text-align: center;
}

.source-ps .steam-complete-badge {
    color: #ffe9ad;
    border-color: rgba(255, 216, 126, .78);
    background: rgba(102, 70, 13, .82);
}

.source-ps .steam-completed-date {
    color: #b9cdff !important;
}

@media (max-width: 860px) {
    .platinum-games-nav span:last-child {
        display: none;
    }

    .platinum-games-nav {
        padding: 0 .58rem;
    }
}

@media (max-width: 640px) {
    .platinum-actions {
        justify-content: flex-start;
    }
}
.psn-sync-button strong {
    font: 700 .85rem/1 'Space Mono', monospace;
    letter-spacing: -.08em;
}

.psn-sync-button {
    border-color: rgba(112, 149, 255, .58);
    color: #dbe7ff;
    background: rgba(28, 52, 126, .3);
}

.platform-sync-status .live-status + .live-status {
    margin-top: .45rem;
}
.game-source-badges {
    position: absolute;
    z-index: 1;
    top: .8rem;
    left: .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    max-width: calc(100% - 5rem);
}

.game-source-badges .game-source-badge {
    position: static;
}

.source-both .steam-complete-badge {
    color: #fff0b9;
    border-color: rgba(176, 234, 197, .78);
    background: linear-gradient(135deg, rgba(10, 65, 36, .88), rgba(102, 70, 13, .88));
}

.source-summary-3 {
    grid-template-columns: 1fr !important;
}
/* Compact source and completion marks on platinum game covers. */
.game-source-badge.source-steam {
    width: 1.9rem;
    min-width: 1.9rem;
    justify-content: center;
    padding: 0;
    gap: 0;
}

.game-source-badge.source-steam .steam-logo {
    width: 1.08rem;
    height: 1.08rem;
}

.game-source-badge.source-ps {
    gap: .38rem;
    padding-right: .52rem;
}

.game-source-badge .ps-logo {
    width: 1.22rem;
    height: .94rem;
    fill: currentColor;
    stroke: none;
}

.steam-complete-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    min-width: 1.9rem;
    min-height: 1.8rem;
}

.completion-plus {
    opacity: .72;
}

.ps-platinum-icon {
    width: 1.08rem;
    height: 1.08rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}
/* Platinum is silver, while the percentage keeps its own readable contrast. */
.steam-complete-badge.has-platinum {
    color: #eef5ff;
    border-color: rgba(213, 229, 255, .9);
    background: linear-gradient(135deg, rgba(72, 93, 125, .92), rgba(172, 190, 216, .76));
    box-shadow: 0 3px 14px rgba(8, 15, 28, .36), inset 0 1px rgba(255, 255, 255, .32);
}

.source-both .steam-complete-badge.has-platinum {
    border-color: rgba(213, 229, 255, .94);
    background: linear-gradient(135deg, rgba(75, 95, 126, .94), rgba(178, 195, 219, .84));
}

.steam-complete-badge.has-platinum .ps-platinum-icon {
    color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(21, 36, 58, .45));
}
.steam-completion-badges {
    position: absolute;
    z-index: 1;
    top: .8rem;
    right: .8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    max-width: calc(100% - 5rem);
}

.steam-completion-badges .steam-complete-badge {
    position: static;
}

.source-both .steam-complete-badge.badge-hundred {
    color: #bff6d3;
    border-color: rgba(143, 238, 180, .76);
    background: rgba(16, 101, 57, .9);
}
/* Click-to-open details for completed-game cards. */
.steam-game-toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.steam-card-preview,
.steam-cover,
.steam-card-content,
.steam-game-details,
.steam-detail-heading,
.steam-completed-dates {
    display: block;
}

.steam-card-title {
    display: -webkit-box;
    min-height: 2.62em;
    overflow: hidden;
    color: #f3f7ff;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.steam-card-open-hint,
.steam-card-close-hint {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .7rem;
    color: #8ea4bb;
    font: .62rem/1 'Space Mono', monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.steam-card-open-hint span {
    color: #a7e7ff;
    font-size: .9rem;
}

.steam-game-toggle:focus-visible {
    outline: 2px solid #8fddff;
    outline-offset: -3px;
}

.steam-game-card:hover {
    transform: none;
    border-color: rgba(101, 192, 255, .2);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.steam-game-card:hover .steam-cover-image {
    transform: none;
}

.steam-game-card.is-open {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(190px, 255px) minmax(0, 1fr);
    overflow: hidden;
    border-color: rgba(133, 213, 255, .62);
    background: #0c1019;
    box-shadow: 0 20px 42px rgba(0, 0, 0, .34);
}

.steam-game-card.is-open .steam-game-toggle {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
}

.steam-game-card.is-open .steam-card-preview {
    height: 100%;
}

.steam-game-card.is-open .steam-cover {
    height: 100%;
    min-height: 320px;
    aspect-ratio: auto;
}

.steam-game-card.is-open .steam-card-content {
    display: none;
}

.steam-game-details {
    grid-column: 2;
    grid-row: 1;
    padding: 1.45rem 1.55rem;
    background: linear-gradient(135deg, rgba(21, 39, 61, .98), rgba(9, 13, 21, .99));
}

.steam-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.steam-detail-heading .eyebrow {
    margin: 0 0 .35rem;
}

.steam-detail-heading h3 {
    margin: 0;
    color: #f5f8ff;
    font-size: clamp(1.15rem, 2.2vw, 1.65rem);
    line-height: 1.16;
}

.steam-card-close-hint {
    flex: 0 0 auto;
    margin: .18rem 0 0;
    text-align: right;
}

.steam-game-details .steam-card-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.steam-game-details .steam-card-summary p {
    min-height: 4.35rem;
    padding: .68rem .72rem;
    border-color: rgba(150, 214, 255, .13);
    background: rgba(255, 255, 255, .045);
}

.steam-game-details .steam-card-summary strong {
    overflow: visible;
    white-space: normal;
    font-size: .81rem;
}

.steam-completed-dates {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
}

.steam-completed-dates .steam-completed-date {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 !important;
    padding: .46rem .58rem;
    border: 1px solid rgba(127, 219, 163, .2);
    border-radius: 7px;
    background: rgba(16, 101, 57, .18);
}

.steam-completed-dates .steam-completed-date strong {
    color: #c8f8d9;
    font: 700 .69rem/1 'Space Mono', monospace;
}

.source-ps .steam-completed-dates .steam-completed-date {
    border-color: rgba(185, 205, 255, .28);
    background: rgba(48, 74, 143, .18);
}

.source-ps .steam-completed-dates .steam-completed-date strong {
    color: #d8e4ff;
}

@media (max-width: 640px) {
    .steam-game-card.is-open {
        grid-template-columns: minmax(112px, 35%) minmax(0, 1fr);
    }

    .steam-game-card.is-open .steam-cover {
        min-height: 0;
        aspect-ratio: 2 / 3;
    }

    .steam-game-details {
        padding: 1rem;
    }

    .steam-detail-heading {
        display: block;
        margin-bottom: 1rem;
    }

    .steam-card-close-hint {
        margin-top: .55rem;
        text-align: left;
    }

    .steam-game-details .steam-card-summary {
        grid-template-columns: 1fr;
    }

    .steam-game-details .steam-card-summary p {
        min-height: 0;
    }

    .steam-completed-dates {
        display: grid;
        grid-template-columns: 1fr;
    }
}
.steam-detail-heading h3 {
    display: block;
    min-height: 0;
    overflow: visible;
    margin: 0;
    -webkit-line-clamp: unset;
}
.steam-game-details[hidden] {
    display: none !important;
}
/* Game details appear as a modal layer above the library. */
body.game-panel-open {
    overflow: hidden;
}

.steam-game-card.is-open {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    grid-column: auto;
    grid-template-columns: minmax(220px, 280px) minmax(420px, 650px);
    align-content: center;
    justify-content: center;
    gap: 0;
    padding: clamp(1rem, 5vh, 3rem);
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: rgba(2, 6, 12, .84);
    box-shadow: none;
    backdrop-filter: blur(10px);
    animation: steam-panel-in .18s ease-out;
}

.steam-game-card.is-open .steam-game-toggle {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    height: auto;
}

.steam-game-card.is-open .steam-card-preview {
    height: 100%;
}

.steam-game-card.is-open .steam-cover {
    height: 100%;
    min-height: 430px;
    aspect-ratio: 2 / 3;
    border-radius: 14px 0 0 14px;
}

.steam-game-card.is-open .steam-game-details {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 430px;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(134, 213, 255, .35);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(135deg, #14253b, #090d15 72%);
    box-shadow: 18px 24px 70px rgba(0, 0, 0, .45);
}

.steam-panel-close {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(191, 224, 255, .3);
    border-radius: 50%;
    color: #dcecff;
    background: rgba(255, 255, 255, .06);
    font: 400 1.65rem/1 Arial, sans-serif;
    cursor: pointer;
}

.steam-panel-close:hover,
.steam-panel-close:focus-visible {
    border-color: rgba(164, 224, 255, .9);
    color: #fff;
    background: rgba(93, 173, 224, .25);
    outline: none;
}

@keyframes steam-panel-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 760px) {
    .steam-game-card.is-open {
        display: grid;
        grid-template-columns: minmax(105px, 32%) minmax(0, 1fr);
        align-content: start;
        padding: 1rem;
    }

    .steam-game-card.is-open .steam-cover {
        min-height: 0;
        height: 100%;
        aspect-ratio: 2 / 3;
        border-radius: 12px 0 0 12px;
    }

    .steam-game-card.is-open .steam-game-details {
        min-height: 0;
        padding: 1rem;
        border-radius: 0 12px 12px 0;
    }

    .steam-detail-heading {
        gap: .6rem;
    }

    .steam-detail-heading h3 {
        font-size: 1.15rem;
    }

    .steam-panel-close {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 1.4rem;
    }
}
/* Trophy groups fetched from PlayStation when a game modal opens. */
.psn-trophy-groups {
    margin-top: 1.15rem;
    padding-top: 1.05rem;
    border-top: 1px solid rgba(177, 205, 255, .15);
}

.psn-trophy-groups-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.psn-trophy-groups-heading .eyebrow {
    margin: 0 0 .25rem;
    color: #a9c8ff;
}

.psn-trophy-groups-heading h4 {
    margin: 0;
    color: #e8f0ff;
    font-size: .95rem;
}

.psn-groups-status {
    margin: 0;
    color: #8ea4bb;
    font: .59rem/1.25 'Space Mono', monospace;
    text-align: right;
    text-transform: uppercase;
}

.psn-trophy-groups-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.psn-trophy-group {
    min-width: 0;
    padding: .62rem .68rem;
    border: 1px solid rgba(138, 181, 255, .22);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(42, 73, 143, .25), rgba(255, 255, 255, .035));
}

.psn-trophy-group-heading {
    display: grid;
    grid-template-columns: 1.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem;
}

.psn-trophy-group-heading img {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 5px;
    object-fit: cover;
}

.psn-trophy-group-heading h5 {
    overflow: hidden;
    margin: 0;
    color: #e7f0ff;
    font-size: .75rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psn-trophy-group-heading strong {
    color: #a9cbff;
    font: 700 .72rem/1 'Space Mono', monospace;
}

.psn-trophy-group > p,
.psn-trophy-group > span {
    display: block;
    margin: .42rem 0 0;
    color: #a9b9d1;
    font: .62rem/1.25 'Space Mono', monospace;
}

.psn-trophy-group > span {
    color: #7f96b5;
    font-size: .57rem;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .psn-trophy-groups-list {
        grid-template-columns: 1fr;
    }

    .psn-trophy-groups-heading {
        align-items: flex-start;
    }

    .psn-groups-status {
        max-width: 9rem;
    }
}
/* Keep the cover inside its modal column on narrow application windows. */
.steam-game-card.is-open .steam-game-toggle {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.steam-game-card.is-open .steam-cover {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.steam-game-card.is-open .steam-game-details {
    min-width: 0;
    position: relative;
    z-index: 2;
}

@media (max-width: 760px) {
    .steam-game-card.is-open {
        grid-template-columns: minmax(115px, 34%) minmax(0, 1fr);
    }

    .steam-game-card.is-open .steam-game-toggle {
        align-self: stretch;
    }
}

/* Nagłówek i sterowanie galerią ukończeń. */
.platinum-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) auto minmax(250px, .9fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.6rem);
    margin: 1.1rem 0;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    overflow: hidden;
    border: 1px solid rgba(132, 210, 255, .26);
    border-radius: 18px;
    background:
        radial-gradient(circle at 13% 18%, rgba(70, 168, 226, .22), transparent 23rem),
        radial-gradient(circle at 84% 85%, rgba(194, 140, 36, .16), transparent 20rem),
        linear-gradient(118deg, #132941, #0b111c 68%);
    box-shadow: 0 22px 46px rgba(0, 0, 0, .22);
}

.platinum-showcase-copy h2 {
    margin: .18rem 0 .48rem;
    color: #f4f8ff;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.platinum-showcase-copy p:last-child {
    max-width: 38rem;
    margin: 0;
    color: #9dafc2;
    font-size: .9rem;
    line-height: 1.55;
}

.platinum-showcase-total {
    min-width: 7rem;
    padding: .55rem 1.15rem .62rem;
    border-right: 1px solid rgba(177, 222, 255, .16);
    border-left: 1px solid rgba(177, 222, 255, .16);
    text-align: center;
}

.platinum-showcase-total strong,
.platinum-showcase-total span {
    display: block;
}

.platinum-showcase-total strong {
    color: #fff0be;
    font: 700 clamp(2rem, 4vw, 3.25rem)/.95 'Space Mono', monospace;
    text-shadow: 0 0 30px rgba(255, 203, 91, .2);
}

.platinum-showcase-total span {
    margin-top: .44rem;
    color: #a5b6c8;
    font: .61rem/1.35 'Space Mono', monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.platinum-showcase-breakdown {
    display: grid;
    gap: .5rem;
    color: #a5b7ca;
    font: .7rem/1.3 'Space Mono', monospace;
}

.platinum-showcase-breakdown span {
    padding: .38rem .48rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .035);
}

.platinum-showcase-breakdown b {
    color: #d9f4ff;
}

.platinum-gallery-heading {
    align-items: flex-end;
    gap: 1rem;
}

.platinum-gallery-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.platinum-quick-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .32rem;
    padding: .35rem;
    border: 1px solid rgba(172, 216, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .12);
}

.platinum-quick-filters button {
    min-height: 2.1rem;
    padding: 0 .58rem;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #95a9bd;
    background: transparent;
    font: 700 .64rem/1 'Space Mono', monospace;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.platinum-quick-filters button:hover,
.platinum-quick-filters button:focus-visible {
    color: #e7f7ff;
    border-color: rgba(143, 217, 255, .35);
    outline: none;
}

.platinum-quick-filters button.is-active {
    border-color: rgba(255, 216, 127, .5);
    color: #fff1c7;
    background: rgba(126, 87, 16, .5);
}

.platinum-gallery-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: .95rem 0 .8rem;
    color: #8297ad;
    font: .64rem/1.4 'Space Mono', monospace;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.platinum-gallery-meta span:first-child {
    color: #d5eeff;
}

.steam-game-card:not(.is-open) {
    border-color: rgba(126, 198, 244, .22);
    border-radius: 15px;
    background: linear-gradient(160deg, #101d2d, #090e16 74%);
}

.steam-game-card:not(.is-open):hover {
    transform: translateY(-4px);
    border-color: rgba(146, 219, 255, .66);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .4);
}

.steam-game-card:not(.is-open) .steam-game-toggle:focus-visible {
    outline: 2px solid #b5e9ff;
    outline-offset: -3px;
}

.steam-game-card:not(.is-open) .steam-card-content {
    background: linear-gradient(155deg, rgba(21, 44, 68, .98), rgba(8, 14, 23, .98));
}

@media (max-width: 940px) {
    .platinum-showcase {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .platinum-showcase-breakdown {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .platinum-gallery-heading {
        align-items: flex-start;
    }

    .platinum-gallery-controls {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .platinum-portal {
        grid-template-columns: auto minmax(0, 1fr);
        padding: .85rem;
    }

    .platinum-portal-action {
        grid-column: 2;
    }

    .platinum-portal-copy small {
        font-size: .74rem;
    }

    .platinum-showcase {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .platinum-showcase-total {
        width: 100%;
        padding: .75rem;
        border-top: 1px solid rgba(177, 222, 255, .16);
        border-bottom: 1px solid rgba(177, 222, 255, .16);
        border-right: 0;
        border-left: 0;
    }

    .platinum-showcase-breakdown {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .platinum-gallery-controls,
    .steam-sort-form {
        width: 100%;
    }

    .platinum-gallery-controls {
        justify-content: flex-start;
    }

    .platinum-gallery-meta {
        display: grid;
        gap: .35rem;
    }
}
/* Minimalny widok platyn oraz osobny układ mobilny. */
.platinum-sync-status:empty { display: none; }
.platinum-sync-status { margin: 0 0 .7rem; font: .62rem/1.35 'Space Mono', monospace; text-transform: uppercase; }
.platinum-showcase {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.3rem;
    margin: 0 0 1.15rem;
    padding: .9rem 1.1rem;
}
.platinum-showcase-total { min-width: 0; padding: 0 1.25rem 0 0; border: 0; border-right: 1px solid rgba(177, 222, 255, .16); }
.platinum-showcase-total strong { font-size: clamp(2rem, 4vw, 2.8rem); }
.platinum-showcase-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.platinum-showcase-breakdown span { display: grid; gap: .15rem; padding: .42rem .5rem; }
.platinum-showcase-breakdown b { font-size: .84rem; }
.platinum-showcase-breakdown small { color: #91a4b9; font: .56rem/1.2 'Space Mono', monospace; text-transform: uppercase; }
.platinum-gallery-heading { min-height: 0; padding: 1rem 1.1rem; }
.platinum-gallery-heading h2 { font-size: 1.1rem; }
.platinum-gallery-meta { margin: .7rem 1.1rem .45rem; }
.steam-card-open-hint { display: none; }

@media (max-width: 700px) {
    .topbar-inner { width: calc(100% - 1.25rem); min-height: 3.85rem; gap: .42rem; }
    .brand { font-size: 1.04rem; }
    .page-mark { font-size: .58rem; }
    .topbar-actions { gap: 0; }
    .back-link { font-size: .6rem; white-space: nowrap; }
    .steam-dashboard { width: calc(100% - 1rem) !important; padding: 1.4rem 0 2.2rem; }
    .dashboard-heading.form-heading { margin-bottom: .9rem; }
    .dashboard-heading h1 { margin: 0; font-size: clamp(2.15rem, 12vw, 3.3rem); }
    .platinum-showcase { grid-template-columns: 1fr; gap: .75rem; padding: .9rem; border-radius: 14px; }
    .platinum-showcase-total { display: flex; align-items: baseline; justify-content: center; gap: .55rem; padding: 0 0 .7rem; border: 0; border-bottom: 1px solid rgba(177, 222, 255, .16); }
    .platinum-showcase-total span { margin: 0; }
    .platinum-showcase-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .platinum-showcase-breakdown span { text-align: center; }
    .platinum-showcase-breakdown b { font-size: .74rem; }
    .platinum-showcase-breakdown small { font-size: .48rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .steam-completed { border-radius: 14px; }
    .platinum-gallery-heading { display: grid; gap: .8rem; padding: .9rem; }
    .platinum-gallery-controls { display: grid; width: 100%; gap: .55rem; }
    .platinum-quick-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .platinum-quick-filters button { min-width: 0; padding: 0 .25rem; font-size: .56rem; }
    .steam-sort-form { width: 100%; grid-template-columns: minmax(0, 1fr) auto; padding: .4rem; }
    .steam-sort-form label { grid-column: 1 / -1; }
    .steam-sort-form select { min-width: 0; width: 100%; }
    .steam-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .55rem; padding: 0 .55rem .55rem; }
    .steam-card-content { padding: .62rem !important; }
    .steam-card-title { min-height: 2.5em; font-size: .78rem !important; line-height: 1.28; }
    .game-source-badges { top: .5rem; left: .5rem; gap: .22rem; transform: scale(.84); transform-origin: top left; }
    .steam-completion-badges { top: .5rem; right: .5rem; gap: .22rem; transform: scale(.84); transform-origin: top right; }
    .steam-game-card.is-open { display: block; padding: .75rem; overflow-y: auto; }
    .steam-game-card.is-open .steam-game-toggle { display: block; width: 100%; height: auto; }
    .steam-game-card.is-open .steam-card-preview { display: block; height: auto; }
    .steam-game-card.is-open .steam-cover { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; border-radius: 13px 13px 0 0; }
    .steam-game-card.is-open .steam-game-details { display: block; min-height: 0; padding: .95rem; border: 1px solid rgba(134, 213, 255, .35); border-top: 0; border-radius: 0 0 13px 13px; box-shadow: none; }
    .steam-detail-heading { margin-bottom: .9rem; }
    .steam-detail-heading h3 { font-size: 1.15rem; }
    .steam-game-details .steam-card-summary { grid-template-columns: 1fr; }
    .steam-game-details .steam-card-summary p { min-height: 0; }
    .psn-trophy-groups-heading { align-items: flex-start; }
    .psn-groups-status:empty { display: none; }
    .steam-completed-dates { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
    .page-mark { display: none; }
    .platinum-quick-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steam-game-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
    html, body { max-width: 100%; overflow-x: clip; }
}
/* Cztery statystyki na szerokich ekranach, dwie kolumny na telefonie. */
.platinum-showcase-breakdown { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) {
    .platinum-showcase-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Rozbudowana oprawa wizualna galerii ukończeń. */
.visual-section-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 .75rem;
}

.visual-section-heading > div { flex: 0 0 auto; }
.visual-section-heading span {
    display: block;
    margin-bottom: .18rem;
    color: #7c95ac;
    font: .57rem/1 'Space Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.visual-section-heading h2 {
    margin: 0;
    color: #edf7ff;
    font-size: 1rem;
    letter-spacing: .045em;
}
.visual-section-heading > i {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(132, 210, 255, .26), transparent);
}

.recent-completions,
.platinum-timeline {
    margin: 1.15rem 0;
    padding: 1.05rem;
    border: 1px solid rgba(133, 207, 255, .17);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(20, 42, 65, .58), rgba(8, 13, 22, .72));
    box-shadow: 0 16px 38px rgba(0, 0, 0, .16);
}

.recent-games-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.recent-game-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(124, 203, 255, .27);
    border-radius: 12px;
    background: #0c1521;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .23);
}

.recent-game-art {
    position: relative;
    height: clamp(7.5rem, 13vw, 10.5rem);
    overflow: hidden;
    background: linear-gradient(135deg, #19324b, #0c111b);
}
.recent-game-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transition: transform .5s ease;
}
.recent-game-card:hover .recent-game-art img { transform: scale(1.055); }
.recent-game-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 34%, rgba(7, 12, 20, .88) 100%);
}
.recent-game-status {
    position: absolute;
    top: .65rem;
    right: .65rem;
    padding: .32rem .48rem;
    border: 1px solid rgba(142, 238, 181, .65);
    border-radius: 7px;
    color: #bbf8d1;
    background: rgba(13, 83, 48, .82);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .32);
    font: 700 .62rem/1 'Space Mono', monospace;
}
.recent-game-card.is-platinum .recent-game-status {
    border-color: rgba(221, 233, 255, .85);
    color: #fff;
    background: linear-gradient(135deg, rgba(78, 100, 132, .94), rgba(174, 193, 220, .82));
}
.recent-game-copy {
    padding: .78rem .85rem .9rem;
    background: linear-gradient(145deg, rgba(17, 39, 61, .98), rgba(8, 13, 21, .98));
}
.recent-game-copy > span,
.recent-game-copy time {
    display: block;
    color: #8da4ba;
    font: .56rem/1.35 'Space Mono', monospace;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.recent-game-copy h3 {
    display: -webkit-box;
    min-height: 2.42em;
    overflow: hidden;
    margin: .34rem 0 .55rem;
    color: #f0f7ff;
    font-size: .94rem;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.recent-game-copy time { color: #b8cff0; }

.platinum-timeline { padding-bottom: .75rem; }
.timeline-bars {
    display: flex;
    align-items: end;
    gap: .6rem;
    min-height: 8.8rem;
    padding: .55rem .25rem 0;
}
.timeline-year {
    display: grid;
    flex: 1 1 0;
    min-width: 0;
    height: 8.2rem;
    grid-template-rows: auto 1fr;
    gap: .45rem;
}
.timeline-year > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem;
}
.timeline-year strong {
    color: #dfeeff;
    font: 700 .72rem/1 'Space Mono', monospace;
}
.timeline-year span {
    overflow: hidden;
    color: #7e96ad;
    font: .54rem/1 'Space Mono', monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timeline-year > i {
    position: relative;
    align-self: end;
    display: block;
    width: 100%;
    min-height: .6rem;
    height: var(--timeline-height);
    border: 1px solid rgba(131, 218, 255, .37);
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #75d7ff, #2d7ed1 60%, #1a3f72);
    box-shadow: 0 0 20px rgba(76, 184, 255, .13), inset 0 1px rgba(255, 255, 255, .32);
}
.timeline-year > i::after {
    content: '';
    position: absolute;
    inset: 1px 18% auto;
    height: 28%;
    border-radius: inherit;
    background: rgba(255, 255, 255, .2);
}

.steam-game-card.source-steam:not(.is-open) {
    border-color: rgba(91, 194, 255, .31);
    background: radial-gradient(circle at 0 0, rgba(42, 144, 215, .2), transparent 48%), linear-gradient(160deg, #101f31, #090e16 74%);
}
.steam-game-card.source-ps:not(.is-open) {
    border-color: rgba(125, 151, 255, .34);
    background: radial-gradient(circle at 0 0, rgba(74, 101, 215, .25), transparent 48%), linear-gradient(160deg, #151c3b, #090e16 74%);
}
.steam-game-card.source-merged:not(.is-open) {
    border-color: rgba(175, 199, 255, .36);
    background: radial-gradient(circle at 0 0, rgba(53, 151, 221, .18), transparent 42%), radial-gradient(circle at 100% 0, rgba(103, 104, 225, .2), transparent 48%), linear-gradient(160deg, #12243a, #090e16 74%);
}
.steam-game-card:not(.is-open)::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(125deg, rgba(205, 244, 255, .24), transparent 28%, transparent 72%, rgba(161, 190, 255, .15)) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .65;
}
.steam-game-card:not(.is-open):hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 44px rgba(0, 0, 0, .42), 0 0 0 1px rgba(150, 224, 255, .12);
}

.game-progress-rail {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: .3rem;
    overflow: hidden;
    background: rgba(0, 0, 0, .45);
}
.game-progress-rail > i {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left;
    animation: completion-fill .8s cubic-bezier(.16, 1, .3, 1) both;
}
.game-progress-rail.is-hundred > i { background: linear-gradient(90deg, #32b96d, #a5ffd0); box-shadow: 0 0 13px rgba(104, 255, 168, .72); }
.game-progress-rail.is-platinum > i { background: linear-gradient(90deg, #7f98c2, #f6fbff 52%, #99afd1); box-shadow: 0 0 15px rgba(216, 235, 255, .78); }

.steam-complete-badge.has-platinum {
    animation: platinum-glow 2.8s ease-in-out infinite;
}

.steam-game-card.is-open {
    isolation: isolate;
    background: rgba(2, 6, 12, .8);
}
.steam-game-card.is-open::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -3rem;
    pointer-events: none;
    background-image: linear-gradient(rgba(2, 7, 14, .7), rgba(2, 7, 14, .9)), var(--modal-cover, none);
    background-position: center;
    background-size: cover;
    filter: blur(26px) saturate(1.18);
    opacity: .68;
    transform: scale(1.08);
}
.steam-game-card.is-open .steam-game-toggle { z-index: 1; }
.steam-game-card.is-open .steam-game-details { z-index: 2; background: linear-gradient(135deg, rgba(20, 37, 59, .96), rgba(7, 12, 20, .98) 72%); }

.steam-game-card.is-filtering-in:not([hidden]) {
    animation: gallery-card-in .26s ease-out both;
}

@keyframes completion-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes platinum-glow {
    0%, 100% { box-shadow: 0 3px 14px rgba(8, 15, 28, .36), inset 0 1px rgba(255, 255, 255, .32); }
    50% { box-shadow: 0 0 18px rgba(224, 240, 255, .44), inset 0 1px rgba(255, 255, 255, .5); }
}
@keyframes gallery-card-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
    .recent-completions,
    .platinum-timeline { padding: .8rem; border-radius: 13px; }
    .recent-games-grid { grid-template-columns: 1fr; gap: .58rem; }
    .recent-game-card { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); }
    .recent-game-art { height: auto; min-height: 6.9rem; }
    .recent-game-copy { display: grid; align-content: center; padding: .65rem .72rem; }
    .recent-game-copy h3 { min-height: 0; margin: .22rem 0 .38rem; }
    .timeline-bars { min-width: 27rem; }
    .platinum-timeline { overflow-x: auto; }
    .steam-game-card.is-open::before { opacity: .45; filter: blur(20px) saturate(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .recent-game-art img,
    .steam-game-card:not(.is-open),
    .steam-complete-badge.has-platinum,
    .game-progress-rail > i,
    .steam-game-card.is-filtering-in:not([hidden]) { animation: none; transition: none; }
}
/* Szerokie banery Steam oraz tytuły na osi ukończeń. */
.recent-game-art {
    height: auto;
    aspect-ratio: 460 / 215;
}
.recent-game-art img { object-position: center; }
.timeline-bars { align-items: stretch; min-height: 13.5rem; }
.timeline-year {
    height: 13rem;
    grid-template-rows: auto minmax(2.2rem, 1fr) auto;
}
.timeline-games {
    display: grid;
    gap: .22rem;
    max-height: 4.1rem;
    overflow: auto;
    margin: .1rem 0 0;
    padding: .42rem 0 0;
    border-top: 1px solid rgba(150, 215, 255, .13);
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 203, 255, .4) transparent;
}
.timeline-games li {
    overflow: hidden;
    color: #b9cce0;
    font: .54rem/1.25 'Space Mono', monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.timeline-games li::before { content: '· '; color: #72cfff; }
.timeline-games .timeline-games-more { color: #80a0be; }
.timeline-games .timeline-games-more::before { content: ''; }

@media (max-width: 700px) {
    .recent-game-art { aspect-ratio: auto; }
    .timeline-bars { min-width: 36rem; min-height: 13.5rem; }
}
/* Stała wysokość list wyrównuje każdy rok na osi ukończeń. */
.timeline-year { grid-template-rows: auto minmax(2.2rem, 1fr) 4.1rem; }
.timeline-games { height: 4.1rem; }
/* Wyróżniona ostatnia platyna i rozbudowana oś. */
.last-platinum-feature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr);
    min-height: 14rem;
    margin: 1.15rem 0;
    overflow: hidden;
    border: 1px solid rgba(219, 235, 255, .4);
    border-radius: 18px;
    background: linear-gradient(125deg, #1b2c43, #0a111d 62%);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .12);
}
.last-platinum-art { position: relative; min-height: 14rem; overflow: hidden; }
.last-platinum-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: none; }
.last-platinum-art > span { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, #121d2d 100%), linear-gradient(0deg, rgba(6, 10, 16, .58), transparent 55%); }
.last-platinum-copy { position: relative; display: grid; align-content: center; gap: .62rem; padding: clamp(1.25rem, 3vw, 2.2rem); }
.last-platinum-copy::before { content: ''; position: absolute; inset: 12% 0 auto -4rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(220, 239, 255, .58), transparent); }
.last-platinum-copy p { margin: 0; color: #c8d9f7; font: 700 .61rem/1 'Space Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.last-platinum-copy h2 { margin: 0; color: #f7fbff; font-size: clamp(1.45rem, 2.7vw, 2.25rem); line-height: 1.02; letter-spacing: -.045em; }
.last-platinum-copy > div { display: flex; align-items: center; gap: .55rem; color: #cbdcf6; font: 700 .72rem/1 'Space Mono', monospace; }
.last-platinum-copy svg { width: 1.65rem; height: 1.65rem; padding: .29rem; border: 1px solid rgba(223, 236, 255, .72); border-radius: 50%; color: #fff; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; background: linear-gradient(135deg, #60779b, #cad8ed); box-shadow: 0 0 20px rgba(214, 232, 255, .34); animation: feature-platinum-pulse 3s ease-in-out infinite; }

.platinum-timeline { position: relative; isolation: isolate; }
.timeline-cover-mosaic { position: absolute; z-index: -1; inset: 0; display: grid; grid-template-columns: repeat(8, minmax(9rem, 1fr)); overflow: hidden; opacity: .11; filter: saturate(.85) blur(1px); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, #000, transparent); }
.timeline-cover-mosaic img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.platinum-timeline .visual-section-heading,
.platinum-timeline .timeline-bars { position: relative; z-index: 1; }
.timeline-year { height: 13rem; grid-template-rows: minmax(0, 1fr) 4.1rem; gap: .42rem; }
.timeline-year-action { display: grid; width: 100%; min-width: 0; height: 100%; grid-template-rows: auto minmax(2.2rem, 1fr); gap: .45rem; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.timeline-year-action > div { display: flex; align-items: baseline; justify-content: space-between; gap: .35rem; }
.timeline-year-action strong { color: #dfeeff; font: 700 .72rem/1 'Space Mono', monospace; }
.timeline-year-action span { overflow: hidden; color: #7e96ad; font: .54rem/1 'Space Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.timeline-year-action > i { position: relative; align-self: end; display: block; width: 100%; min-height: .6rem; height: var(--timeline-height); border: 1px solid rgba(131, 218, 255, .37); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #75d7ff, #2d7ed1 60%, #1a3f72); box-shadow: 0 0 20px rgba(76, 184, 255, .13), inset 0 1px rgba(255, 255, 255, .32); transition: filter .18s ease, transform .18s ease, border-color .18s ease; }
.timeline-year-action > i::after { content: ''; position: absolute; inset: 1px 18% auto; height: 28%; border-radius: inherit; background: rgba(255, 255, 255, .2); }
.timeline-year-action:hover > i,
.timeline-year-action:focus-visible > i,
.timeline-year.is-active .timeline-year-action > i { filter: brightness(1.28); transform: translateY(-3px); border-color: rgba(218, 242, 255, .9); }
.timeline-year.is-active .timeline-year-action > i { background: linear-gradient(180deg, #d8f3ff, #82c6ff 60%, #4a7ed5); box-shadow: 0 0 25px rgba(150, 217, 255, .46); }
.timeline-year-action:focus-visible { outline: 2px solid #b9e8ff; outline-offset: 5px; border-radius: 7px; }

.achievement-rings { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.achievement-ring { --ring-color: #79e8a9; position: relative; display: grid; width: 5.45rem; aspect-ratio: 1; place-content: center; gap: .08rem; overflow: hidden; border-radius: 50%; background: conic-gradient(var(--ring-color) var(--achievement-progress), rgba(153, 182, 210, .14) 0); text-align: center; }
.achievement-ring::before { content: ''; position: absolute; inset: .3rem; border: 1px solid rgba(176, 215, 244, .16); border-radius: inherit; background: #102037; box-shadow: inset 0 0 18px rgba(1, 6, 13, .55); }
.achievement-ring > * { position: relative; z-index: 1; }
.achievement-ring strong { color: #bdffd5; font: 700 .67rem/1 'Space Mono', monospace; }
.achievement-ring span { color: #dcecff; font: .54rem/1.2 'Space Mono', monospace; }
.achievement-ring small { color: #849db8; font: .45rem/1 'Space Mono', monospace; letter-spacing: .04em; }
.achievement-ring.is-platinum { --ring-color: #e4f0ff; box-shadow: 0 0 18px rgba(213, 233, 255, .22); }
.achievement-ring.is-platinum strong { color: #fff; font-size: .53rem; }

.steam-game-card.is-open { --modal-accent-rgb: 83, 194, 255; }
.steam-game-card.is-open::before { background-image: radial-gradient(circle at 18% 24%, rgba(var(--modal-accent-rgb), .38), transparent 34%), linear-gradient(rgba(2, 7, 14, .67), rgba(2, 7, 14, .91)), var(--modal-cover, none); }
.steam-game-card.is-open .steam-game-details { background: radial-gradient(circle at 92% 10%, rgba(var(--modal-accent-rgb), .18), transparent 30%), linear-gradient(135deg, rgba(20, 37, 59, .96), rgba(7, 12, 20, .98) 72%); }

@keyframes feature-platinum-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(214, 232, 255, .34); } 50% { transform: scale(1.08); box-shadow: 0 0 29px rgba(224, 241, 255, .62); } }

@media (max-width: 700px) {
    .last-platinum-feature { grid-template-columns: 1fr; min-height: 0; border-radius: 14px; }
    .last-platinum-art { min-height: 9.5rem; aspect-ratio: 16 / 7; }
    .last-platinum-art > span { background: linear-gradient(0deg, #121d2d, transparent 72%); }
    .last-platinum-copy { padding: 1rem; }
    .last-platinum-copy::before { display: none; }
    .timeline-cover-mosaic { grid-template-columns: repeat(8, 7rem); }
    .platinum-timeline { overflow-x: auto; overflow-y: hidden; }
    .timeline-year { height: 13rem; }
    .achievement-rings { gap: .5rem; }
    .achievement-ring { width: 4.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .last-platinum-copy svg,
    .timeline-year-action > i { animation: none; transition: none; }
}
/* Mozaika pozostaje nad tłem osi, ale pod jej treścią. */
.timeline-cover-mosaic { z-index: 0; }

/* Zielony wariant karty dla najnowszego ukończenia 100%. */
.last-platinum-feature.is-hundred {
    border-color: rgba(122, 235, 166, .42);
    background: linear-gradient(125deg, #163b30, #091814 62%);
}
.last-platinum-feature.is-hundred .last-platinum-copy p { color: #b8f4cf; }
.last-platinum-feature.is-hundred .last-platinum-copy svg {
    border-color: rgba(161, 255, 199, .7);
    color: #eafff1;
    background: linear-gradient(135deg, #28734e, #83d7a5);
    box-shadow: 0 0 20px rgba(104, 238, 154, .3);
}
/* Kolekcjonerskie detale: gablota, kamienie milowe i przełącznik ściany okładek. */
.platform-cabinet {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: -.15rem;
    padding-top: .68rem;
    border-top: 1px solid rgba(169, 216, 255, .13);
}
.platform-cabinet > span {
    color: #7c99b5;
    font: .52rem/1 'Space Mono', monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.cabinet-platform { display: flex; align-items: center; gap: .5rem; }
.cabinet-platform b {
    color: #dcecff;
    font: 700 .56rem/1 'Space Mono', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cabinet-platform i { display: flex; align-items: center; gap: .22rem; min-height: .7rem; }
.cabinet-platform em {
    display: block;
    width: .47rem;
    height: .47rem;
    border: 1px solid rgba(206, 239, 255, .66);
    border-radius: 50%;
    background: #5bc2ff;
    box-shadow: 0 0 9px rgba(91, 194, 255, .75);
}
.cabinet-ps em {
    border-radius: 1px;
    background: linear-gradient(135deg, #ecf4ff, #8198d4);
    box-shadow: 0 0 9px rgba(184, 204, 255, .75);
    transform: rotate(45deg);
}

.milestone-shelf {
    position: relative;
    margin: 1.15rem 0;
    padding: 1rem 1.1rem 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(173, 213, 255, .2);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(27, 51, 78, .72), rgba(7, 14, 24, .86));
}
.milestone-shelf::before {
    content: '';
    position: absolute;
    inset: -80% auto -80% -6rem;
    width: 12rem;
    background: linear-gradient(90deg, transparent, rgba(111, 209, 255, .1), transparent);
    transform: rotate(18deg);
    pointer-events: none;
}
.milestone-shelf .visual-section-heading { position: relative; z-index: 1; margin-bottom: .85rem; }
.milestone-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: .58rem;
}
.milestone-card {
    display: grid;
    align-content: start;
    gap: .34rem;
    min-height: 6.7rem;
    padding: .78rem .82rem;
    border: 1px solid rgba(148, 202, 245, .22);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(18, 39, 64, .9), rgba(8, 16, 28, .93));
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}
.milestone-card > span {
    color: #83d8ff;
    font: 700 .54rem/1.2 'Space Mono', monospace;
    letter-spacing: .08em;
}
.milestone-card strong {
    display: -webkit-box;
    overflow: hidden;
    color: #eff8ff;
    font-size: .78rem;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.milestone-card time { margin-top: auto; color: #8da4bc; font: .5rem/1 'Space Mono', monospace; }
.milestone-card.is-platinum {
    border-color: rgba(220, 236, 255, .45);
    background: linear-gradient(145deg, rgba(56, 75, 103, .94), rgba(13, 24, 39, .96));
}
.milestone-card.is-platinum > span { color: #f0f7ff; text-shadow: 0 0 11px rgba(222, 239, 255, .42); }

.gallery-view-toggle {
    display: inline-flex;
    gap: .2rem;
    padding: .22rem;
    border: 1px solid rgba(154, 207, 250, .2);
    border-radius: 8px;
    background: rgba(4, 10, 18, .55);
}
.gallery-view-toggle button {
    display: grid;
    width: 1.88rem;
    height: 1.7rem;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #8ba2bb;
    background: transparent;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.gallery-view-toggle button span[aria-hidden='true'] { font-size: 1rem; line-height: 1; }
.gallery-view-toggle button:hover,
.gallery-view-toggle button:focus-visible,
.gallery-view-toggle button.is-active {
    border-color: rgba(149, 225, 255, .45);
    color: #edfbff;
    background: linear-gradient(135deg, rgba(47, 135, 197, .78), rgba(44, 73, 142, .72));
    outline: none;
    box-shadow: 0 0 13px rgba(77, 195, 255, .17);
}
.gallery-year-state {
    margin-left: .45rem;
    color: #a9e9ff;
    font: 700 .58rem/1 'Space Mono', monospace;
    letter-spacing: .07em;
}

.steam-game-grid.is-wall-view {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
    gap: .55rem;
}
.steam-game-grid.is-wall-view .steam-game-card:not(.is-open) {
    min-height: 0;
    border-radius: 8px;
    background: #0a111c;
}
.steam-game-grid.is-wall-view .steam-game-toggle { min-height: 0; }
.steam-game-grid.is-wall-view .steam-cover-wrap,
.steam-game-grid.is-wall-view .steam-game-cover {
    aspect-ratio: 2 / 3;
    min-height: 0;
}
.steam-game-grid.is-wall-view .steam-game-cover img { object-position: center; }
.steam-game-grid.is-wall-view .steam-card-content,
.steam-game-grid.is-wall-view .game-progress-rail { display: none; }
.steam-game-grid.is-wall-view .steam-card-sources { transform: scale(.78); transform-origin: top left; }
.steam-game-grid.is-wall-view .steam-complete-badge { transform: scale(.82); transform-origin: top right; }
.steam-game-grid.is-wall-view .steam-game-card:not(.is-open):hover { transform: translateY(-3px) scale(1.018); }

.steam-complete-badge.has-platinum {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #eef8ff;
    background: linear-gradient(135deg, #637895, #d4e2f3 48%, #758baa);
}
.steam-complete-badge.has-platinum::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -120% -65%;
    background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .86) 49%, rgba(116, 185, 255, .72) 53%, transparent 62%);
    animation: platinum-hologram 4.5s ease-in-out infinite;
}
@keyframes platinum-hologram {
    0%, 38% { transform: translateX(-48%) rotate(9deg); opacity: 0; }
    48% { opacity: .78; }
    62%, 100% { transform: translateX(48%) rotate(9deg); opacity: 0; }
}

@media (max-width: 700px) {
    .platform-cabinet { justify-content: center; gap: .5rem .8rem; }
    .platform-cabinet > span { width: 100%; text-align: center; }
    .milestone-shelf { margin: .85rem 0; padding: .85rem; border-radius: 13px; }
    .milestone-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .48rem; }
    .milestone-card { min-height: 6.2rem; padding: .68rem; }
    .milestone-card strong { font-size: .7rem; }
    .platinum-gallery-controls { gap: .48rem; }
    .gallery-view-toggle { order: 3; }
    .gallery-year-state { display: block; margin: .42rem 0 0; }
    .steam-game-grid.is-wall-view { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .42rem; padding: 0 .48rem .55rem; }
}
@media (max-width: 390px) {
    .milestone-list { grid-template-columns: 1fr; }
    .steam-game-grid.is-wall-view { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (prefers-reduced-motion: reduce) {
    .steam-complete-badge.has-platinum::after { animation: none; }
}
/* Ikona platyny pozostaje elementem układu badge’y — połysk nie może zmieniać jej położenia. */
.steam-completion-badges .steam-complete-badge.has-platinum {
    position: static;
    isolation: auto;
    overflow: hidden;
    background: linear-gradient(112deg, #637895 0%, #d4e2f3 34%, #758baa 48%, #f4fbff 55%, #657d9e 72%, #d4e2f3 100%);
    background-size: 240% 100%;
    animation: platinum-glow 2.8s ease-in-out infinite, platinum-hologram-background 4.5s ease-in-out infinite;
}
.steam-completion-badges .steam-complete-badge.has-platinum::after { display: none; }
@keyframes platinum-hologram-background {
    0%, 38% { background-position: 100% 0; }
    54% { background-position: 0 0; }
    100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .steam-completion-badges .steam-complete-badge.has-platinum { animation: none; }
}
/* Liczniki gabloty: jedna duża odznaka zamiast szeregu kropek. */
.cabinet-platform { gap: .58rem; }
.cabinet-counter {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: .3rem;
    min-width: 4.35rem;
    min-height: 2.15rem;
    padding: .3rem .52rem .3rem .38rem;
    border: 1px solid rgba(143, 218, 255, .42);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(27, 102, 148, .72), rgba(15, 32, 55, .8));
    box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 0 14px rgba(76, 193, 255, .12);
}
.cabinet-counter em {
    grid-row: span 2;
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid rgba(210, 242, 255, .8);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d8f7ff, #54b9f4 43%, #1c669f 72%);
    box-shadow: 0 0 11px rgba(103, 216, 255, .56);
}
.cabinet-counter strong { color: #f3fbff; font: 700 .9rem/.85 'Space Mono', monospace; }
.cabinet-counter small { color: #acd0e5; font: .43rem/1 'Space Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
.cabinet-ps .cabinet-counter { border-color: rgba(203, 216, 255, .48); background: linear-gradient(135deg, rgba(66, 83, 158, .78), rgba(22, 29, 61, .84)); }
.cabinet-ps .cabinet-counter em { border-radius: 3px; background: linear-gradient(135deg, #f3f7ff, #9aafdf 48%, #4f609f); box-shadow: 0 0 11px rgba(180, 198, 255, .55); transform: rotate(45deg); }
@media (max-width: 700px) { .cabinet-platform { gap: .42rem; } }
/* Różne typy kamieni milowych mają własny charakter, bez nadmiaru tekstu. */
.milestone-card.is-steam {
    border-color: rgba(95, 202, 255, .43);
    background: linear-gradient(145deg, rgba(19, 67, 98, .93), rgba(7, 18, 31, .96));
}
.milestone-card.is-steam > span { color: #8ce3ff; }
.milestone-card.is-achievement {
    border-color: rgba(123, 239, 181, .43);
    background: linear-gradient(145deg, rgba(22, 81, 59, .9), rgba(8, 24, 21, .96));
}
.milestone-card.is-achievement > span { color: #a5ffd0; }
.milestone-card.is-shared {
    border-color: rgba(164, 184, 255, .46);
    background: linear-gradient(145deg, rgba(58, 69, 138, .88), rgba(12, 21, 47, .96));
}
.milestone-card.is-shared > span { color: #d5deff; }
.milestone-card.is-record {
    border-color: rgba(255, 207, 113, .48);
    background: linear-gradient(145deg, rgba(103, 71, 25, .84), rgba(30, 21, 9, .96));
}
.milestone-card.is-record > span { color: #ffe4a1; }
.milestone-card.is-record strong { color: #fff6df; font-size: 1.15rem; }
/* Gry PlayStation dostają szerszy panel: grupy trofeów mieszczą się w dwóch rzędach, bez wydłużania okładki. */
@media (min-width: 761px) {
    .steam-game-card.source-ps.is-open,
    .steam-game-card.source-merged.is-open {
        grid-template-columns: clamp(230px, 24vw, 310px) minmax(0, min(64vw, 800px));
    }

    .steam-game-card.source-ps.is-open .psn-trophy-groups-list,
    .steam-game-card.source-merged.is-open .psn-trophy-groups-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Stały format okładki w modalu: szczegóły PS nie mogą zmieniać rozmiaru grafiki względem Steam. */
@media (min-width: 761px) {
    .steam-game-card.source-ps.is-open,
    .steam-game-card.source-merged.is-open {
        grid-template-columns: minmax(220px, 280px) minmax(0, min(64vw, 800px));
    }

    .steam-game-card.is-open .steam-game-toggle,
    .steam-game-card.is-open .steam-card-preview {
        align-self: start;
        height: auto;
    }

    .steam-game-card.is-open .steam-cover {
        height: auto;
        min-height: 0;
        aspect-ratio: 2 / 3;
    }
}
/* W prostych kartach Steam prawa część ma dokładnie wysokość okładki — bez uskoku przy dolnej krawędzi. */
@media (min-width: 761px) {
    .steam-game-card.source-steam.is-open .steam-game-details {
        min-height: 0;
    }
}
/* Numery kolekcjonerskie i charakterystyczne ramki platform. */
.steam-game-card:not(.is-open) .steam-card-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .58rem;
}
.steam-card-number {
    display: inline-grid;
    min-width: 2.65rem;
    place-items: center;
    padding: .28rem .36rem;
    border: 1px solid rgba(156, 194, 224, .25);
    border-radius: 4px;
    color: #90a9c0;
    background: rgba(3, 9, 17, .34);
    font: 700 .52rem/1 'Space Mono', monospace;
    letter-spacing: .06em;
}
.steam-game-card.source-steam:not(.is-open) {
    border-color: rgba(90, 202, 255, .53);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .3), inset 0 1px rgba(159, 226, 255, .16);
}
.steam-game-card.source-steam:not(.is-open)::after {
    background: linear-gradient(132deg, rgba(121, 218, 255, .72), transparent 29%, transparent 71%, rgba(32, 142, 211, .52)) border-box;
}
.steam-game-card.source-steam .steam-card-number { color: #9de5ff; border-color: rgba(101, 205, 255, .34); }
.steam-game-card.source-ps:not(.is-open) {
    border-color: rgba(188, 205, 255, .57);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .3), inset 0 1px rgba(227, 235, 255, .16);
}
.steam-game-card.source-ps:not(.is-open)::after {
    background: linear-gradient(132deg, rgba(219, 230, 255, .76), transparent 30%, transparent 70%, rgba(105, 128, 224, .6)) border-box;
}
.steam-game-card.source-ps .steam-card-number { color: #e2eaff; border-color: rgba(193, 210, 255, .42); }
.steam-game-card.source-merged:not(.is-open) {
    border-color: rgba(172, 221, 255, .62);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .3), inset 0 1px rgba(207, 241, 255, .2);
}
.steam-game-card.source-merged:not(.is-open)::after {
    background: linear-gradient(128deg, rgba(104, 220, 255, .78), rgba(185, 215, 255, .28) 30%, transparent 48%, rgba(158, 164, 255, .36) 68%, rgba(224, 238, 255, .78)) border-box;
}
.steam-game-card.source-merged .steam-card-number {
    color: #d5f2ff;
    border-color: rgba(162, 223, 255, .48);
    background: linear-gradient(135deg, rgba(15, 84, 121, .36), rgba(76, 83, 151, .34));
}
@media (max-width: 700px) {
    .steam-game-card:not(.is-open) .steam-card-content { gap: .42rem; }
    .steam-card-number { min-width: 2.35rem; padding: .25rem .28rem; font-size: .46rem; }
}
/* Wizualna droga kolekcji i dyskretna odznaka ukryta w ikonie trofeum. */
.collection-journey {
    position: relative;
    margin: 1.15rem 0;
    padding: 1rem 1.1rem 1.16rem;
    overflow: hidden;
    border: 1px solid rgba(164, 213, 255, .22);
    border-radius: 16px;
    background: radial-gradient(circle at 82% 6%, rgba(94, 160, 255, .14), transparent 22rem), linear-gradient(128deg, rgba(13, 31, 50, .96), rgba(5, 12, 22, .96));
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 16px 34px rgba(0, 0, 0, .14);
}
.collection-journey::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6; background-image: radial-gradient(rgba(132, 211, 255, .18) .65px, transparent .65px); background-size: 1.2rem 1.2rem; mask-image: linear-gradient(120deg, #000, transparent 78%); }
.collection-journey-heading,
.collection-journey-track { position: relative; z-index: 1; }
.collection-journey-heading { margin-bottom: .9rem; }
.collection-journey-title-row { display: flex; align-items: center; gap: .55rem; }
.collection-journey-title-row h2 { margin: 0; }
.platinum-easter-trigger { display: grid; width: 1.72rem; height: 1.72rem; place-items: center; padding: .22rem; border: 1px solid rgba(215, 234, 255, .48); border-radius: 50%; color: #f5fbff; background: linear-gradient(135deg, #617899, #d5e1f2 48%, #7187a7); box-shadow: 0 0 14px rgba(199, 226, 255, .28); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.platinum-easter-trigger:hover,
.platinum-easter-trigger:focus-visible { transform: translateY(-2px) scale(1.08); filter: brightness(1.17); box-shadow: 0 0 20px rgba(224, 241, 255, .6); }
.platinum-easter-trigger:focus-visible { outline: 2px solid #bcecff; outline-offset: 3px; }
.platinum-easter-trigger svg,
.platinum-easter-trophy svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.collection-journey-track { position: relative; display: grid; grid-template-columns: repeat(var(--journey-steps), minmax(0, 1fr)); gap: clamp(.7rem, 2.5vw, 2rem); padding-top: .05rem; }
.collection-journey-track::before { content: ''; position: absolute; top: 2.4rem; right: clamp(2.2rem, 7vw, 4rem); left: clamp(2.2rem, 7vw, 4rem); height: 2px; background: linear-gradient(90deg, rgba(82, 199, 255, .3), rgba(224, 241, 255, .82) 48%, rgba(145, 179, 255, .38)); box-shadow: 0 0 15px rgba(111, 201, 255, .26); }
.collection-journey-step { position: relative; min-width: 0; }
.collection-journey-node { position: relative; display: grid; width: 4.85rem; height: 4.85rem; place-items: center; margin: 0 auto .58rem; overflow: visible; border: 2px solid rgba(158, 219, 255, .7); border-radius: 1.1rem; background: #101b2b; box-shadow: 0 0 0 .28rem rgba(91, 180, 255, .1), 0 0 1.35rem rgba(73, 194, 255, .25); }
.collection-journey-node img,
.collection-journey-fallback { display: block; width: 100%; height: 100%; border-radius: .92rem; object-fit: cover; }
.collection-journey-fallback { display: grid; place-items: center; color: #eaf7ff; font-size: 1.4rem; background: radial-gradient(circle, #385d83, #101c2c 66%); }
.collection-journey-node b { position: absolute; top: -.5rem; left: -.58rem; z-index: 1; padding: .18rem .28rem; border: 1px solid rgba(149, 221, 255, .54); border-radius: .28rem; color: #dff6ff; background: #10243b; font: 700 .48rem/1 'Space Mono', monospace; }
.collection-journey-node em { position: absolute; right: -.55rem; bottom: -.38rem; z-index: 1; padding: .23rem .28rem; border: 1px solid rgba(139, 219, 255, .43); border-radius: .28rem; color: #aeeaff; background: #0d3553; font: 700 .43rem/1 'Space Mono', monospace; font-style: normal; letter-spacing: .04em; }
.collection-journey-step.is-ps .collection-journey-node { border-color: rgba(227, 238, 255, .86); box-shadow: 0 0 0 .28rem rgba(203, 220, 255, .1), 0 0 1.35rem rgba(211, 225, 255, .34); }
.collection-journey-step.is-ps .collection-journey-node em { color: #f0f4ff; border-color: rgba(210, 220, 255, .56); background: #334477; }
.collection-journey-step.is-shared .collection-journey-node { border-color: rgba(183, 207, 255, .85); background: linear-gradient(135deg, #173d5a, #2d315e); box-shadow: 0 0 0 .28rem rgba(149, 194, 255, .13), 0 0 1.45rem rgba(155, 187, 255, .36); }
.collection-journey-step.is-shared .collection-journey-node em { color: #ecf1ff; border-color: rgba(196, 211, 255, .55); background: #3d4783; }
.collection-journey-copy { display: grid; justify-items: center; gap: .25rem; min-width: 0; text-align: center; }
.collection-journey-copy time { color: #8da7c0; font: .5rem/1 'Space Mono', monospace; }
.collection-journey-copy strong { overflow: hidden; max-width: 100%; color: #dff4ff; font: 700 .56rem/1.2 'Space Mono', monospace; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.collection-journey-copy span { display: -webkit-box; overflow: hidden; color: #f0f7ff; font-size: .76rem; font-weight: 700; line-height: 1.15; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.platinum-easter { position: fixed; z-index: 2100; top: 1.2rem; left: 50%; width: min(22rem, calc(100vw - 2rem)); pointer-events: none; transform: translate(-50%, -150%); opacity: 0; }
.platinum-easter.is-active { animation: platinum-easter-in 1.75s cubic-bezier(.18, .87, .2, 1) both; }
.platinum-easter-card { position: relative; display: flex; align-items: center; gap: .7rem; overflow: hidden; padding: .72rem .9rem; border: 1px solid rgba(225, 240, 255, .72); border-radius: .7rem; color: #f9fcff; background: linear-gradient(135deg, rgba(82, 105, 138, .98), rgba(24, 38, 60, .98) 56%, rgba(105, 132, 170, .94)); box-shadow: 0 .7rem 2.4rem rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .3); }
.platinum-easter-card::before { content: ''; position: absolute; inset: -100% 42% -100% -48%; background: linear-gradient(112deg, transparent 45%, rgba(255, 255, 255, .68) 50%, transparent 57%); animation: platinum-easter-shine 1.45s ease-out both; }
.platinum-easter-trophy { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; padding: .35rem; border: 1px solid rgba(243, 250, 255, .74); border-radius: 50%; color: #fff; background: linear-gradient(135deg, #7289a9, #edf6ff 52%, #7188a8); box-shadow: 0 0 17px rgba(228, 241, 255, .48); }
.platinum-easter-card div:last-of-type { display: grid; gap: .18rem; }
.platinum-easter-card small { color: #c8eaff; font: 700 .48rem/1 'Space Mono', monospace; letter-spacing: .12em; }
.platinum-easter-card strong { font: 800 .87rem/1 'Space Grotesk', sans-serif; letter-spacing: .04em; }
.platinum-easter-card > i { position: absolute; width: .22rem; height: .22rem; border-radius: 50%; background: #eaffff; box-shadow: 0 0 10px #a6efff; animation: platinum-easter-spark 1.3s ease-out both; }
.platinum-easter-card > i:nth-of-type(1) { top: 20%; right: 14%; }
.platinum-easter-card > i:nth-of-type(2) { top: 68%; right: 8%; animation-delay: .13s; }
.platinum-easter-card > i:nth-of-type(3) { top: 38%; right: 29%; animation-delay: .24s; }
@keyframes platinum-easter-in { 0% { transform: translate(-50%, -150%) scale(.84); opacity: 0; } 13%, 78% { transform: translate(-50%, 0) scale(1); opacity: 1; } 100% { transform: translate(-50%, -18%) scale(.96); opacity: 0; } }
@keyframes platinum-easter-shine { from { transform: translateX(-110%) rotate(13deg); } to { transform: translateX(220%) rotate(13deg); } }
@keyframes platinum-easter-spark { from { transform: scale(0); opacity: 0; } 28% { transform: scale(1.6); opacity: 1; } to { transform: translate(1.3rem, -.75rem) scale(0); opacity: 0; } }
@media (max-width: 700px) {
    .collection-journey { margin: .85rem 0; padding: .85rem; border-radius: 13px; }
    .collection-journey-track { grid-auto-columns: minmax(9.9rem, 52vw); grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; padding: .05rem .1rem .4rem; scrollbar-width: thin; scrollbar-color: rgba(128, 208, 255, .42) transparent; }
    .collection-journey-track::before { right: 3.3rem; left: 3.3rem; }
    .collection-journey-node { width: 4.3rem; height: 4.3rem; }
    .collection-journey-copy span { font-size: .69rem; }
}
@media (prefers-reduced-motion: reduce) {
    .platinum-easter.is-active,
    .platinum-easter-card::before,
    .platinum-easter-card > i { animation: none; }
    .platinum-easter.is-active { transform: translate(-50%, 0); opacity: 1; }
}
/* Znaczniki mogą wychodzić poza węzeł, ale sama okładka zawsze pozostaje przycięta do ramki. */
.collection-journey-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: .92rem;
    transform: translateZ(0);
}
.collection-journey-art > img,
.collection-journey-art > .collection-journey-fallback {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: inherit;
    object-fit: cover;
}
/* Rekord tempa kolekcji jest częścią podsumowania, nie osobnym kamieniem milowym. */
.platinum-showcase-breakdown { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.platinum-showcase-record { border: 1px solid rgba(255, 220, 142, .3); background: linear-gradient(135deg, rgba(116, 81, 28, .38), rgba(50, 39, 20, .3)) !important; }
.platinum-showcase-record b { color: #fff0bd !important; }
.platinum-showcase-record small { color: #e5c98c !important; }
@media (max-width: 700px) {
    .platinum-showcase-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platinum-showcase-record { grid-column: span 2; }
}
/* Planowane platyny: prosta ściana okładek z kolekcji Steam i wishlisty PlayStation. */
.planned-collection-section { margin: 1.1rem 0; padding: 1rem 1.1rem 1.12rem; border: 1px solid rgba(157, 204, 250, .18); border-radius: 16px; background: linear-gradient(145deg, rgba(13, 27, 44, .86), rgba(5, 10, 18, .92)); }
.planned-collection-section .visual-section-heading { margin-bottom: .9rem; }
.planned-cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .72rem; }
.planned-cover-card { min-width: 0; overflow: hidden; border: 1px solid rgba(145, 195, 241, .22); border-radius: 10px; background: #0a1422; box-shadow: inset 0 1px rgba(255, 255, 255, .045); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.planned-cover-card:hover { transform: translateY(-3px); border-color: rgba(181, 225, 255, .58); box-shadow: 0 12px 22px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .08); }
.planned-cover-art { display: grid; position: relative; aspect-ratio: 3 / 4; overflow: hidden; place-items: center; color: #9bb8d6; background: linear-gradient(135deg, #15304d, #080f1b); }
.planned-cover-art::after { content: ''; position: absolute; inset: 55% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(3, 7, 13, .4)); }
.planned-cover-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.planned-cover-card:hover .planned-cover-art img { transform: scale(1.035); }
.planned-cover-card h3 { display: -webkit-box; min-height: 2.35rem; margin: 0; overflow: hidden; padding: .62rem .65rem .67rem; color: #edf5ff; font-size: .76rem; line-height: 1.18; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.planned-collection-empty { margin: 0; padding: 1.55rem 1rem; border: 1px dashed rgba(150, 198, 245, .22); border-radius: 10px; color: #92a9bf; font: .63rem/1.4 'Space Mono', monospace; text-align: center; text-transform: uppercase; }
@media (max-width: 700px) {
    .planned-collection-section { padding: .85rem; border-radius: 13px; }
    .planned-cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .52rem; }
    .planned-cover-card h3 { font-size: .7rem; padding: .52rem .56rem .58rem; }
}
/* Ręczne, pełne odświeżenie cache platyn. */
.refresh-dashboard { display: grid; min-height: calc(100vh - 8rem); place-items: center; }
.refresh-panel { display: grid; position: relative; width: min(100%, 40rem); gap: 1rem; overflow: hidden; padding: clamp(1.35rem, 4vw, 2.15rem); border-color: rgba(153, 210, 255, .26); background: radial-gradient(circle at 90% 5%, rgba(95, 184, 255, .17), transparent 17rem), linear-gradient(145deg, rgba(15, 32, 52, .96), rgba(5, 11, 20, .98)); }
.refresh-panel > *:not(.refresh-orb) { position: relative; z-index: 1; }
.refresh-orb { position: absolute; top: -6rem; right: -4rem; width: 15rem; height: 15rem; border: 1px solid rgba(173, 226, 255, .2); border-radius: 50%; box-shadow: 0 0 0 1.9rem rgba(95, 177, 255, .035), 0 0 4rem rgba(87, 171, 255, .11); }
.refresh-panel h1 { margin: .28rem 0 .45rem; color: #eef7ff; font-size: clamp(1.4rem, 4vw, 2rem); }
.refresh-panel p { max-width: 29rem; margin: 0; color: #a8bad0; font-size: .85rem; line-height: 1.55; }
.refresh-cache-button, .refresh-back-link { width: max-content; margin-top: .35rem; padding: .65rem .9rem; border-radius: .48rem; font: 700 .63rem/1 'Space Mono', monospace; letter-spacing: .055em; text-decoration: none; text-transform: uppercase; }
.refresh-cache-button { border: 1px solid rgba(146, 221, 255, .65); color: #e9f9ff; background: linear-gradient(135deg, #12648b, #173e75); cursor: pointer; box-shadow: 0 8px 22px rgba(20, 119, 182, .22); }
.refresh-cache-button:hover:not(:disabled) { filter: brightness(1.14); transform: translateY(-1px); }
.refresh-cache-button:disabled { cursor: wait; opacity: .75; }
.refresh-back-link { border: 1px solid rgba(124, 239, 184, .4); color: #9bf5c3; background: rgba(25, 112, 77, .16); }
/* Źródło każdej planowanej gry — tylko logo, bez dodatkowego tekstu. */
.planned-source-badge {
    position: absolute;
    z-index: 2;
    top: .48rem;
    left: .48rem;
    display: grid;
    width: 1.92rem;
    height: 1.92rem;
    place-items: center;
    border: 1px solid rgba(214, 238, 255, .48);
    border-radius: .42rem;
    box-shadow: 0 .28rem .8rem rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .16);
}
.planned-source-badge.source-steam { color: #d7f5ff; background: linear-gradient(135deg, #155777, #133969); }
.planned-source-badge.source-ps { color: #f1f5ff; background: linear-gradient(135deg, #304ea9, #183077); }
.planned-source-badge .steam-logo { width: 1.08rem; height: 1.08rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.planned-source-badge .ps-logo { width: 1.28rem; height: .92rem; fill: currentColor; stroke: none; }
/* Aktualny postęp Steam na kartach planowanych gier. */
.planned-achievement-badge {
    position: absolute;
    z-index: 2;
    right: .48rem;
    bottom: .48rem;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .32rem .42rem;
    border: 1px solid rgba(113, 241, 181, .48);
    border-radius: .4rem;
    color: #d8ffea;
    background: rgba(5, 37, 31, .88);
    box-shadow: 0 .24rem .7rem rgba(0, 0, 0, .46), inset 0 1px rgba(229, 255, 240, .12);
    font: 700 .49rem/1 'Space Mono', monospace;
    letter-spacing: .015em;
}
.planned-achievement-badge strong { color: #c7ffe1; font: inherit; white-space: nowrap; }
.planned-achievement-badge b { padding-left: .38rem; border-left: 1px solid rgba(132, 245, 190, .3); color: #7df5b4; font: 800 .56rem/1 'Space Mono', monospace; }