:root {
  --card-w: 2.5in;
  --card-h: 2.5in;
  --card-radius: 14px;
  --card-pad: 16px;

  --bg-x: 0%;
  --bg-y: 100%;
  --bg-zoom: 45%;

  /* Taille d'une tuile du motif au dos (comme dans bg.html) */
  --back-tile: 50mm;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 20px;
  background: #ffffff;
  font-family: "Arial", Helvetica, sans-serif;
}

header { color: #202020; margin-bottom: 16px; }
header h1 { font-size: 18px; margin: 0 0 8px; }
#status { font-size: 13px; color: #141414; margin-top: 8px; }

.switch { display: flex; gap: 8px; }
.switch button {
  padding: 6px 14px;
  border: 1px solid #888;
  background: #3a3a3a;
  color: #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.switch button:hover { background: #4a4a4a; }
.switch button.active {
  background: #ffffff;
  color: #000;
  border-color: #000000;
  font-weight: 700;
}

.controls {
  margin-top: 12px;
  padding: 10px 12px;
  background: #3a3a3a;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: #ddd;
  font-size: 13px;
  max-width: 720px;
}
.controls strong { color: #fff; }
.controls label { display: flex; align-items: center; gap: 6px; }
.controls input[type=range] { width: 130px; }
.controls span { min-width: 38px; display: inline-block; color: #aaa; }
#save-status { color: #7fd07f; min-width: auto; }

.cards { display: flex; flex-wrap: wrap; gap: 10px; }

.card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 4px solid #000;
}

.card--answer { background: #f4f4f4; color: #000; }
.card--question { background: #111; color: #fff; }

/* Dos : motif répété */
.card--back {
  background: url("img/card_back_hpi.jpg") repeat;
  background-size: var(--back-tile) var(--back-tile);
}

.card__bg {
  position: absolute;
  inset: 0;
  /*background-image: url("img/bikubiku.png"); --HPI EDITION*/
  background-image: url("img/front_terrorist_edition.jpg");
  background-repeat: no-repeat;
  background-position: var(--bg-x) var(--bg-y);
  background-size: var(--bg-zoom);
  pointer-events: none;
  z-index: 0;
}

.card__text, .card__footer { position: relative; z-index: 1; }

.card--answer .card__text,
.card--answer .card__footer {
  color: var(--ans-text-color, #000);
  -webkit-text-stroke: var(--ans-stroke-width, 2px) var(--ans-stroke-color, #fff);
  paint-order: stroke fill;
}

.card__text {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.18;
  white-space: pre-wrap;
}

.card__footer {
  margin-top: auto;
  align-self: flex-end;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .2px;
}

#controls { display: flex; gap: 16px; flex-wrap: wrap; color: #0f0f0f; font-size: 12px; margin-top: 10px; }
#controls label { display: flex; flex-direction: column; gap: 2px; }
#controls input[type="range"] { width: 160px; }

/* Feuille de dos pleine page (impression uniquement) */
@page bleed { size: A4; margin: 0; }

#back-sheet { display: none; }

@media print {
  /* En vue "Dos" : on masque la grille et on imprime le motif plein papier */
  body.view-back .cards { display: none; }
  body.view-back #back-sheet {
    display: block;
    page: bleed;
    width: 210mm;
    height: 297mm;
    background: url("img/card_back_hpi.jpg") repeat;
    background-size: var(--back-tile) var(--back-tile);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- Impression ---------- */
@page {
  size: A4;
  margin: 6mm;
}

@media print {
  html, body {
    background: #fff;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* On masque l'interface */
  header { display: none !important; }

  /* Léger espace entre cartes pour la découpe */
  .cards { gap: 3mm; }

  .card,
  .card--question,
  .card--back,
  .card__bg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Empêche une carte d'être coupée entre deux pages */
  .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}