/* ────────────────────────────────────────────────────────────
   fairplay.css — styles spécifiques à la page Fair-play
   ──────────────────────────────────────────────────────────── */

.container { max-width: 720px; }

main { padding: 40px 0 60px; }

/* ── Section blocks ──────────────────────────────────────── */
.block {
  border: 4px solid;
  overflow: hidden;
  box-shadow: 6px 6px 0 0 rgba(0,0,0,0.8);
  margin-bottom: 20px;
}
.block-black   { border-color: #000; box-shadow: 6px 6px 0 0 rgba(0,0,0,1); }
.block-green   { border-color: #16a34a; box-shadow: 6px 6px 0 0 rgba(22,101,52,0.4); }
.block-orange  { border-color: var(--primary); box-shadow: 6px 6px 0 0 rgba(207,106,50,0.4); }
.block-success { border-color: #22c55e; box-shadow: 6px 6px 0 0 rgba(34,197,94,0.3); background: rgba(5,46,22,0.6); }

.block-header {
  padding: 10px 20px;
  border-bottom: 4px solid #000;
  display: flex;
  align-items: center;
  gap: 10px;
}
.block-header svg         { width: 20px; height: 20px; flex-shrink: 0; }
.block-header-title       { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.05em; color: #fff; }
.block-header.black-bg    { background: #1e1812; }
.block-header.green-bg    { background: #15803d; }
.block-header.orange-bg   { background: var(--primary); }
.block-header.muted-bg    { background: #1e1812; }
.block-header.success-bg  { background: #16a34a; }

.block-body { padding: 24px; background: var(--bg-card); }

/* ── Hero block ──────────────────────────────────────────── */
.hero-block {
  position: relative;
  background: var(--bg-card);
  border: 4px solid #000;
  padding: 32px 24px;
  box-shadow: 8px 8px 0 0 rgba(0,0,0,1);
  overflow: hidden;
  margin-bottom: 28px;
}
.hero-block::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(207,106,50,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.hero-block-inner { position: relative; }
.hero-block-row   { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hero-block-row svg { width: 32px; height: 32px; flex-shrink: 0; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.06em;
  color: var(--primary);
  line-height: 1;
}
.hero-sub { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

/* ── Single stat box ─────────────────────────────────────── */
.stat-box {
  background: rgba(5,46,22,0.35);
  border: 2px solid #16a34a;
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px;
}
.stat-box-num   { font-family: var(--font-display); font-size: 2.5rem; color: var(--green); line-height: 1; flex-shrink: 0; }
.stat-box-label { font-family: var(--font-display); font-size: 1rem; color: var(--green); }
.stat-box-sub   { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }

/* ── Row items ───────────────────────────────────────────── */
.row-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px;
  border: 2px solid;
  margin-bottom: 8px;
}
.row-item:last-child   { margin-bottom: 0; }
.row-item.highlight    { border-color: #ca8a04; background: rgba(113,63,18,0.2); }
.row-item.normal       { border-color: #000; background: rgba(0,0,0,0.2); }
.row-item svg          { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.row-item-text         { font-size: 0.78rem; line-height: 1.5; }

/* ── Ticket visual ───────────────────────────────────────── */
.ticket-grid { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.ticket {
  width: 22px; height: 22px;
  border: 1px solid #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: bold;
  cursor: default;
}
.ticket.key     { background: rgba(207,106,50,0.7); color: #fff; }
.ticket.discord { background: rgba(250,204,21,0.8); color: #000; }
.ticket-legend  { display: flex; gap: 16px; font-size: 0.68rem; color: var(--muted); }
.ticket-legend-dot { width: 12px; height: 12px; border: 1px solid #000; display: inline-block; margin-right: 4px; }

/* ── Formula box ─────────────────────────────────────────── */
.formula-box {
  background: rgba(0,0,0,0.45);
  border: 2px solid var(--primary);
  padding: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--primary);
  letter-spacing: 0.05em;
  margin: 16px 0;
}

/* ── Probability bars ────────────────────────────────────── */
.bar-row      { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bar-name     { font-size: 0.72rem; color: var(--muted); width: 72px; flex-shrink: 0; }
.bar-track    { flex: 1; height: 20px; background: #1c1510; border: 1px solid #000; position: relative; }
.bar-fill     { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; transition: width 1.2s ease; }
.bar-pct      { font-size: 0.65rem; color: #fff; font-weight: bold; }
.bar-tickets  { font-size: 0.65rem; color: var(--muted); width: 28px; text-align: right; flex-shrink: 0; }

/* ── Code block ──────────────────────────────────────────── */
.code-block {
  background: #0a0806;
  border: 2px solid #000;
  padding: 16px;
  font-size: 0.72rem;
  color: #b0a090;
  overflow-x: auto;
  line-height: 1.7;
  margin-top: 12px;
}
.code-block .c-green  { color: #4ade80; }
.code-block .c-orange { color: var(--primary); }
.code-block .c-muted  { color: #4a4030; }