/* My Partner Zoroark — Gen 5 theme v1.0. Load AFTER assets/css/style.css. */
@font-face {
  font-family: 'Zoroark Pixel';
  src: url('../fonts/VT323-Regular.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
:root {
  --bw-ink: #17191d;
  --bw-paper: #f4f4f0;
  --bw-red: #b52d46;
  --bw-teal: #087d79;
  --bw-pixel: 'Zoroark Pixel', 'Courier New', monospace;
  --bg-dark: #f4f4f0;
  --bg-card: #fff;
  --bg-card-hover: #f1f1ee;
  --bg-highlight: #e8e9e6;
  --accent-primary: #b52d46;
  --accent-secondary: #9f203a;
  --accent-glow: rgb(181 45 70 / 18%);
  --text-primary: #17191d;
  --text-secondary: #444950;
  --text-muted: #555b63;
  --border-color: #a4a8ad;
  --owned: #087d79;
  --not-owned: #555b63;
  --shadow-color: rgb(23 25 29 / 12%);
  --glow-red: 3px 3px 0 #17191d;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  background: var(--bw-paper);
  color: var(--bw-ink);
}
body::before {
  z-index: -1;
  background-image: linear-gradient(90deg, rgb(23 25 29 / 2%) 1px, transparent 1px), linear-gradient(rgb(23 25 29 / 2%) 1px, transparent 1px);
  background-size: 12px 12px;
}
a { color: var(--accent-secondary); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--bw-teal);
  outline-offset: 4px;
}
.container { max-width: 1360px; padding: 2rem; }
.site-header {
  position: relative;
  padding: 1.5rem 0;
  color: white;
  background: var(--bw-ink);
  border: 0;
  border-bottom: 6px double var(--bw-paper);
  box-shadow: 0 3px 0 var(--bw-ink);
  backdrop-filter: none;
}
.header-content { max-width: 1360px; gap: 1.5rem; padding: 0 2rem; flex-wrap: wrap; }
.site-logo { color: white; min-width: 0; }
.site-logo h1 {
  font-family: var(--bw-pixel);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .035em;
  background: none;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #fff;
  text-shadow: 2px 2px 0 #555b63;
}
.site-logo .tagline { display: block; margin-top: .5rem; color: #d4d6da; font-size: .875rem; letter-spacing: .035em; text-transform: none; }
.main-nav { flex-wrap: wrap; gap: .5rem; }
.nav-link { font: 1.5rem/1.1 var(--bw-pixel); color: #f4f4f0; min-height: 44px; display: inline-flex; align-items: center; padding: .6rem .75rem; letter-spacing: .025em; }
.nav-link:hover, .nav-link.active { background: #34363c; color: #fff; box-shadow: inset 0 -3px 0 #e75773; }
.nav-link.active::before { content: ''; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #e75773; margin-right: .5rem; }
.stats-banner { border: 2px solid var(--bw-ink); box-shadow: 3px 3px 0 #c1c4c7; padding: 1.25rem; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-item { min-width: 0; padding: .5rem; }
.stat-value { font: clamp(1.5rem, 3vw, 2.3rem)/1.1 var(--bw-pixel); color: var(--bw-ink); overflow-wrap: anywhere; }
.stat-label { font-size: .875rem; letter-spacing: .06em; }
.progress-container { margin-top: 0; }
.progress-bar, .gen5-era-progress { height: 14px; border: 2px solid var(--bw-ink); background: #e0e1de; border-radius: 0; overflow: hidden; }
.progress-fill { background: var(--bw-red); border-radius: 0; }
.progress-fill::after { animation: none; transform: none; background: repeating-linear-gradient(90deg, transparent 0 30px, rgb(23 25 29 / 50%) 30px 32px); }
.progress-text { text-align: right; font-size: .875rem; }
/* !important is limited to the existing inline filter layout. */
.filter-controls { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; border-bottom: 3px solid var(--bw-ink); }
.btn { min-height: 44px; border: 2px solid var(--bw-ink); border-radius: 0; font: 1.4rem/1.15 var(--bw-pixel); letter-spacing: .025em; padding: .65rem 1rem; transition: background-color 120ms, color 120ms; white-space: normal; text-align: center; }
.btn-sm { font-size: 1.2rem; padding: .5rem .75rem; }
.btn-secondary { background: #fff; color: var(--bw-ink); }
.btn-secondary:hover { background: #e8e9e6; border-color: var(--bw-ink); }
.btn-primary, .filter-btn.active { background: var(--bw-red); color: #fff; }
.btn-primary:hover { background: #902139; box-shadow: none; }
.filter-btn { position: relative; border-bottom: 0; min-height: 50px; }
.filter-btn.active::before { content: ''; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.era-section { margin-bottom: 2.75rem; }
.era-header { padding: 0; gap: 1rem; align-items: stretch; background: none; border-bottom: 2px solid var(--bw-ink); margin-bottom: 1rem; }
.era-header:hover { box-shadow: none; }
.era-title { color: #fff; background: var(--bw-ink); font: 1.75rem/1.1 var(--bw-pixel); letter-spacing: .025em; padding: .7rem 2rem .7rem 1rem; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%); }
.era-count { align-self: center; color: var(--bw-ink); padding: .6rem 0; font: 1.4rem/1.1 var(--bw-pixel); text-align: right; }
.gen5-era-progress { margin: -.5rem 0 1.25rem; height: 12px; }
.gen5-era-progress > span { display: block; height: 100%; background: var(--bw-red); }
.card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.card-item { min-width: 0; border: 1px solid var(--border-color); box-shadow: 3px 3px 0 #d9dcdd; background: #fff; overflow: hidden; }
.card-item:hover { transform: none; border-color: var(--bw-red); box-shadow: 3px 3px 0 var(--bw-red); }
.card-item.owned { border-color: var(--border-color); }
.card-item.owned::before { content: none; }
.card-image-container { background: #edeeeb; padding-top: 140%; }
.card-image { max-width: 94%; max-height: 94%; image-rendering: auto; }
.card-item:hover .card-image { transform: translate(-50%, -50%); }
.card-info { padding: 1rem; }
.card-name { font-size: 1.125rem; font-weight: 700; line-height: 1.35; flex-wrap: wrap; gap: .3rem; }
.card-variant { font: inherit; color: inherit; padding: 0; background: none; }
.card-set, .card-number, .card-acquired { font-size: .875rem; color: var(--text-secondary); }
.card-number { font-family: 'Courier New', monospace; }
.card-meta { flex-wrap: wrap; gap: .5rem; }
.card-price { font: 700 1rem/1.4 'Courier New', monospace; color: var(--bw-ink); }
.rarity-badge { background: #e8e9e6; color: #363a40; font-size: .75rem; border: 1px solid #a4a8ad; }
.has-story { background: var(--bw-ink); border: 2px solid #fff; font-size: .875rem; top: .5rem; left: .5rem; }
.gen5-status { display: block; margin-bottom: .6rem; font: 1.35rem/1.2 var(--bw-pixel); color: var(--accent-secondary); }
.owned .gen5-status { color: var(--bw-teal); }
.timeline-content, .detail-section, .login-box, .modal { border: 3px double var(--bw-ink); box-shadow: 3px 3px 0 #c1c4c7; }
.timeline-item::before { border-radius: 0; }
.timeline-title, .login-title h1, .modal-header h2 { font-family: var(--bw-pixel); font-size: 1.8rem; font-weight: 400; }
.timeline-date, .form-label, .admin-table th { font-size: .875rem; }
.form-input, .form-textarea, .form-select { background: #fff; border: 2px solid #646b73; }
.card-detail-image { position: static; }
.card-detail-image img { box-shadow: 3px 3px 0 #c1c4c7; }
body > footer { color: var(--text-secondary); font-size: .875rem; }
@media (max-width: 1050px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .container { padding: 1.5rem 1rem; }
  .header-content { padding: 0 1rem; align-items: flex-start; }
  .main-nav { justify-content: flex-start; }
  .stats-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .era-header { flex-direction: row; text-align: left; }
  .era-title { font-size: 1.5rem; }
  .era-count { font-size: 1.25rem; }
}
@media (max-width: 480px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .era-header { flex-direction: column; gap: 0; }
  .era-count { align-self: flex-end; }
  .site-logo h1 { font-size: 2.25rem; }
  .nav-link { padding: .5rem; font-size: 1.3rem; }
  .stats-banner { padding: .75rem; gap: .5rem; }
  .stat-label { letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}