.sp-intro h1 { margin: 0 0 8px; font-size: 26px; }
.sp-intro p { margin: 0 0 14px; max-width: 65ch; }
.sp-levels { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-levels .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; }
.sp-levels small { font-weight: 400; font-size: 12px; opacity: .85; }
.hint { font-weight: 400; font-size: 13px; color: var(--muted); }
[hidden] { display: none !important; }

.sp-game { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.sp-challenge, .sp-timer {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px;
}
.sp-kicker { margin: 0; color: var(--muted); font-weight: 600; }
.sp-challenge h2 { margin: 4px 0 6px; font-size: 30px; line-height: 1.15; }
.sp-challenge h2 span { color: var(--red); }
.sp-challenge p { margin: 0; }
.sp-timer { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 240px; }
.sp-clock { font-size: 56px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.sp-clock.low { color: var(--red); }
.sp-timer-btns { display: flex; gap: 8px; }
.sp-done { margin: 0; text-align: center; font-weight: 600; max-width: 30ch; }
.sp-pieces-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-pieces-head h2 { margin: 0; font-size: 18px; }
.sp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-pieces {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.sp-pieces li {
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: 10px;
  display: flex; flex-direction: column; gap: 6px; position: relative;
}
.sp-pieces img { width: 100%; height: 90px; object-fit: contain; background: #fff; border-radius: 8px; }
.sp-pieces .qty {
  position: absolute; top: 8px; right: 8px; background: var(--text); color: var(--bg);
  border-radius: 99px; padding: 2px 9px; font-weight: 700; font-size: 14px;
}
.sp-pieces .nm { font-size: 13px; line-height: 1.3; }
.sp-pieces .col { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sp-pieces .col i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); flex: none; }
.sp-print-foot { display: none; }

@media (max-width: 640px) {
  .sp-game { grid-template-columns: 1fr; }
  .sp-challenge h2 { font-size: 24px; }
  .sp-pieces { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* Carte du défi imprimée : le défi et les pièces, sans boutons ni minuterie. */
@media print {
  header.top, .crumbs, .sp-intro, .sp-timer, .sp-actions { display: none !important; }
  body { background: #fff; }
  .sp-game { display: block; }
  .sp-challenge, .sp-pieces li { box-shadow: none; border: 1px solid #ccc; }
  .sp-pieces { grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
  .sp-pieces li { break-inside: avoid; }
  .sp-print-foot { display: block; margin-top: 12px; }
}