/* ============================================================
   A4 PRINT • CENTERED GRID • SAFE MARGIN • GAME CARDS
   Duplex assumption: A4 portrait, duplex "Flip on long edge"
   Print dialog: Scale 100%, headers/footers OFF
   ============================================================ */

   @page {
    size: A4;      /* 210mm × 297mm */
    margin: 0;
  }
  
  /* -----------------------------
     DESIGN TOKENS (Semantic)
     ----------------------------- */
  :root {
    /* Sizes */
    --size-safe-margin: 5mm; /* MIN printable margin; raise if printer clips */
    --size-card: 65mm;       /* square card size */
    --size-gap: 1mm;         /* spacing between cards (e.g., 1.5mm, 2mm) */
  
    /* Guides (test only; do NOT affect layout) */
    --size-hairline: 0.15mm; /* trim/crop line thickness; try 0.1–0.2mm if needed */
  
    /* Typography */
    --font-size-body: 5mm;
    --font-size-year: 17.6mm;
  
    /* Badges & QR */
    --size-badge: 7.5mm;
    --size-qr-diameter: 45mm;
  
    /* Card Front Colors (cyclical) and back gradient */
    --color-1: #E94560;
    --color-2: #EF9A48;
    --color-3: #F7D74A;
    --color-4: #A3E496;
    --color-5: #38A3A5;
  
    /* Utility */
    --color-trim: rgba(0,0,0,0.35);
  }
  
  /* -----------------------------
     PAGE WRAPPER
     ----------------------------- */
  .page {
    width: 210mm;
    height: 297mm;
    padding: var(--size-safe-margin); /* ensures content stays within printable area */
    box-sizing: border-box;
    break-after: page;
  
    display: flex;
    justify-content: center; /* equal L/R margins even with leftover space */
    align-items: center;     /* equal T/B when grid shorter than page */
  
    /* Consolidated color fidelity for print */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  /* -----------------------------
     GRID OF CARDS
     ----------------------------- */
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--size-card));
    grid-auto-rows: var(--size-card);
    gap: var(--size-gap);
    position: relative;
    /* No explicit width/height: grid sizes to content; .page centers it */
  }
  
  /* ---- Sizing Constraints (for reference) ----
     Inner page width = 210mm - 2×safe-margin
     Inner page height = 297mm - 2×safe-margin
  
     Ensure:
       3×card + 2×gap  ≤ 210mm - 2×safe-margin
       4×card + 3×gap  ≤ 297mm - 2×safe-margin
  
     Example with defaults:
       width:  3×65 + 2×0 = 195mm  ≤ 210 - 10 = 200mm  ✓
       height: 4×65 + 3×0 = 260mm  ≤ 297 - 10 = 287mm  ✓
     -------------------------------------------- */
  
  /* Proof mode for cheap prints */
  .cards-grid.theme-bw .card { background: white !important; color: black !important; }
  
  /* Optional global debug toggle */
  .debug .cards-grid { outline: var(--size-hairline) dashed var(--color-trim); outline-offset: -0.05mm; }
  
  /* -----------------------------
     CARD BASE
     ----------------------------- */
  .card {
    width: var(--size-card);
    height: var(--size-card);
    box-sizing: border-box;
  
    break-inside: avoid;
    page-break-inside: avoid;
  
    padding: 6mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  /* Typography */
  .card em,
  .card strong {
    display: block;
    font-size: var(--font-size-body);
    text-align: center;
    margin: 0;
  }
  
  .card .release-year {
    font-size: var(--font-size-year);
    font-weight: bold;
    text-align: center;
    margin: 0;
  }
  
  /* Badge */
  .card--front .extension-icon {
    position: absolute;
    top: 2.5mm;
    left: 2.5mm;
    width: var(--size-badge);
    height: var(--size-badge);
    transform: rotate(-20deg);
    background-color: inherit;
    border-radius: 50%;
  }

  /* QR circle */
  .card__qr {
    width: var(--size-qr-diameter);
    height: var(--size-qr-diameter);
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    border-radius: 50%;
  }
  .card__qr svg {
    display: block;
    fill: white;
  }
  
  /* -----------------------------
     FRONT / BACK STYLING
     ----------------------------- */

  @supports (selector(:has(*))) {
    /* Default: plain white background for empty cards in the grid */
    .card--front { background-color: white; }

    .card--front:nth-child(5n+1):has(.release-year) { background-color: var(--color-1); }
    .card--front:nth-child(5n+2):has(.release-year) { background-color: var(--color-2); }
    .card--front:nth-child(5n+3):has(.release-year) { background-color: var(--color-3); }
    .card--front:nth-child(5n+4):has(.release-year) { background-color: var(--color-4); }
    .card--front:nth-child(5n+5):has(.release-year) { background-color: var(--color-5); }
  }

   /* Fallback only when :has is not supported */
   @supports not (selector(:has(*))) {
    .card--front:nth-child(5n+1) { background-color: var(--color-1); }
    .card--front:nth-child(5n+2) { background-color: var(--color-2); }
    .card--front:nth-child(5n+3) { background-color: var(--color-3); }
    .card--front:nth-child(5n+4) { background-color: var(--color-4); }
    .card--front:nth-child(5n+5) { background-color: var(--color-5); }
  }

  @supports (selector(:has(*))) {
    /* Default: plain white background for empty cards in the grid */
    .card--back { background: white; } 

    .card--back:has(.card__qr) {
      background: linear-gradient(
        135deg,
        var(--color-1) 0%,
        var(--color-2) 25%,
        var(--color-3) 50%,
        var(--color-4) 75%,
        var(--color-5) 100%
      );
    }
  }

  /* Fallback (when :has is NOT supported) */
  @supports not (selector(:has(*))) {
    /* Always show gradient, since we can't detect .card__qr */
    .card--back {
      background: linear-gradient(
        135deg,
        var(--color-1) 0%,
        var(--color-2) 25%,
        var(--color-3) 50%,
        var(--color-4) 75%,
        var(--color-5) 100%
      );
    }
  }  
  
  /* -----------------------------
     PRINT-ONLY: TRIM GUIDES (TODO: CROP MARKS)
     Layout-neutral; toggle with .show-trim / .debug
     ----------------------------- */
  @media print {
    /* Hairline rectangle around each card (outline doesn’t affect layout) */
    .show-trim .card,
    .debug .card {
      outline: var(--size-hairline) solid var(--color-trim);
      outline-offset: 0;
    }
  }
  
  /* -----------------------------
     DUPLEX / MIRRORING
     ----------------------------- */
  .page--back .cards-grid.mirror-back {
    transform: scaleX(-1);
  }
  
  /* -----------------------------
     OPTIONAL THEMES
     ----------------------------- */
  
  /* Force grayscale for cheap proofs (fronts only) */
  .theme-bw .card--front { filter: grayscale(100%); }
  
  /* High-contrast proof (example)
  .theme-contrast .card--front { outline: 0.2mm solid black; }
  */