/* ══════════════════════════════════════════════════════════════
   style.css — La Confrérie · Tournoi Suisse
   Dépend de : confrerie.css (chargé avant)
   Contient uniquement les composants propres au tournoi.
   ══════════════════════════════════════════════════════════════ */

/* ── App shell ── */
.app {
  position:   relative;
  z-index:    1;
  max-width:  960px;
  margin:     0 auto;
  padding:    0 1.5rem 5rem;
}

/* ══ TIMER ════════════════════════════════════════════════════ */
.timer-block {
  background:    var(--bg2);
  border:        1px solid var(--border-blue);
  border-radius: var(--r-sm);
  padding:       1.5rem 2rem;
  margin-bottom: 1.5rem;
  display:       grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:   center;
  gap:           1rem;
  position:      relative;
  overflow:      hidden;
}
.timer-block::before {
  content:  '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
}
.timer-block.running::before { animation: cf-glow-scan 2s linear infinite; }

.timer-left         { display: flex; flex-direction: column; gap: 6px; }
.timer-label        { font-family: var(--font-heading); font-size: 10px; letter-spacing: .2em; color: var(--blue-light); text-transform: uppercase; opacity: .7; }
.timer-round-info   { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.timer-round-info strong { color: var(--gold); font-weight: 500; }
.timer-center       { text-align: center; }
.timer-idle-hint    { font-size: 12px; color: var(--text-dim); font-style: italic; }
.timer-right        { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.timer-right-inner  { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.timer-digits-big {
  font-family: var(--font-heading);
  font-size:   clamp(3.2rem, 8vw, 5.2rem);
  font-weight: 900;
  letter-spacing: .08em;
  color:       var(--blue-light);
  text-shadow: 0 0 20px rgba(34,153,238,.55), 0 0 48px rgba(34,153,238,.25);
  line-height: 1;
  transition:  color .3s, text-shadow .3s;
}
.timer-digits-big.danger {
  color:      var(--red-light);
  text-shadow: 0 0 20px rgba(255,68,34,.75), 0 0 48px rgba(255,68,34,.35);
  animation:  cf-danger-pulse 1s ease-in-out infinite;
}
.timer-digits-big.idle   { color: var(--text-dim); text-shadow: none; }
.timer-digits-big.paused { color: var(--gold); text-shadow: 0 0 20px rgba(201,168,76,.45); animation: none; }

/* ══ TABS ═════════════════════════════════════════════════════ */
.tabs {
  display:       flex;
  margin-bottom: 1.5rem;
  border:        1px solid var(--border-gold);
  border-radius: var(--r-sm);
  overflow:      hidden;
}
.tab {
  flex:           1;
  padding:        12px 16px;
  font-family:    var(--font-heading);
  font-size:      11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor:         pointer;
  background:     transparent;
  color:          var(--text-muted);
  border:         none;
  border-right:   1px solid var(--border-gold);
  transition:     color .2s, background .2s;
  position:       relative;
}
.tab:last-child { border-right: none; }
.tab:hover      { color: var(--gold-light); background: var(--gold-a06); }
.tab.active     { background: var(--blue-a10); color: var(--blue-light); }
.tab.active::after {
  content:  '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
}

/* ══ SETTINGS ════════════════════════════════════════════════ */
.settings-row  { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.settings-label { font-size: 13px; color: var(--text-muted); }
.topcut-btns   { display: flex; gap: 6px; }
.input-row     { display: flex; gap: 8px; }

/* ══ PLAYER LIST ════════════════════════════════════════════ */
.player-list { display: flex; flex-direction: column; gap: 6px; }

.player-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  background:      var(--bg3);
  border:          1px solid rgba(34,153,238,.08);
  border-radius:   var(--r-sm);
  font-size:       14px;
  transition:      border-color .18s, background .18s;
}
.player-item:hover { border-color: rgba(34,153,238,.22); background: var(--bg4); }

.player-item-left  { display: flex; align-items: center; gap: 10px; }
.player-item-right { display: flex; gap: 6px; align-items: center; }

.player-num {
  font-family: var(--font-heading);
  font-size:   10px;
  color:       var(--blue);
  opacity:     .6;
  min-width:   22px;
}

/* ══ MATCH CARDS ════════════════════════════════════════════ */
.match-wrap {
  border:        1px solid rgba(34,153,238,.15);
  border-radius: var(--r-sm);
  margin-bottom: 10px;
  overflow:      hidden;
  background:    var(--bg3);
  transition:    border-color .18s;
}
.match-wrap:hover { border-color: rgba(34,153,238,.3); }
.match-wrap.done  { border-color: rgba(201,168,76,.18); }

.match-top {
  display:      flex;
  align-items:  center;
  padding:      13px 16px;
  gap:          10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-wrap:    wrap;
}
.match-player { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }

.match-vs {
  font-family:    var(--font-heading);
  font-size:      11px;
  letter-spacing: .2em;
  color:          var(--red);
  text-shadow:    0 0 8px rgba(204,51,34,.45);
  flex-shrink:    0;
  padding:        0 4px;
}

.match-bottom {
  display:    flex;
  align-items:center;
  padding:    10px 16px;
  gap:        8px;
  flex-wrap:  wrap;
  background: rgba(0,0,0,.18);
}

/* Boutons de résultat */
.rbtn {
  font-family:    var(--font-heading);
  font-size:      10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding:        6px 14px;
  border-radius:  var(--r-sm);
  cursor:         pointer;
  background:     transparent;
  border:         1px solid var(--border-subtle);
  color:          var(--text-muted);
  transition:     all .18s;
  white-space:    nowrap;
}
.rbtn:hover    { border-color: var(--gold-dark); color: var(--gold-light); background: var(--gold-a06); }
.rbtn.active-w { background: var(--win-bg);  border-color: var(--win-border); color: var(--win-text);  font-weight: 600; }
.rbtn.active-dl{ background: var(--dl-bg);   border-color: var(--dl-border);  color: var(--dl-text);   font-weight: 600; }

.result-tag {
  font-family:    var(--font-heading);
  font-size:      10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:        4px 12px;
  border-radius:  var(--r-sm);
  font-weight:    600;
}
.result-tag.win { background: var(--win-bg); color: var(--win-text); border: 1px solid var(--win-border); }
.result-tag.dl  { background: var(--dl-bg);  color: var(--dl-text);  border: 1px solid var(--dl-border); }

/* ══ ROUND HEADER ═══════════════════════════════════════════ */
.round-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1rem;
  flex-wrap:       wrap;
  gap:             10px;
}
.round-title {
  font-family:    var(--font-heading);
  font-size:      12px;
  letter-spacing: .18em;
  color:          var(--blue-light);
  text-transform: uppercase;
}
.round-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ══ STANDINGS ══════════════════════════════════════════════ */
.standings-head {
  display:       flex;
  align-items:   center;
  padding:       5px 16px 10px;
  font-family:   var(--font-heading);
  font-size:     9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:         var(--text-dim);
  border-bottom: 1px solid var(--gold-a10);
  margin-bottom: 4px;
}

.standing-row {
  display:      flex;
  align-items:  center;
  padding:      11px 16px;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:   background .15s;
}
.standing-row:last-child { border-bottom: none; }
.standing-row:hover      { background: rgba(34,153,238,.04); }
.standing-row.top1       { background: linear-gradient(90deg, var(--gold-a10), transparent); }

.st-rank { width: 34px; font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--text-dim); }
.st-rank.r1 { color: var(--gold); text-shadow: 0 0 8px rgba(201,168,76,.45); }
.st-rank.r2 { color: #aaa; }
.st-rank.r3 { color: #a07040; }
.st-name    { flex: 1; font-size: 14px; font-weight: 500; }
.st-record  { display: flex; gap: 6px; width: 115px; }
.st-omw     { width: 60px; text-align: right; font-family: var(--font-heading); font-size: 12px; color: var(--text-muted); }
.omw-note   { font-size: 11px; color: var(--text-dim); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.06); font-style: italic; }

/* Podium final */
.final-r1 { background: linear-gradient(90deg, rgba(201,168,76,.15), transparent) !important; border-color: var(--gold-a35) !important; }
.final-r1 .st-name { color: var(--gold-light); font-size: 15px; }
.final-r2 { background: linear-gradient(90deg, rgba(180,180,180,.1), transparent) !important; }
.final-r2 .st-name { color: #ccc; }
.final-r3 { background: linear-gradient(90deg, rgba(160,112,64,.1), transparent) !important; }
.final-r3 .st-name { color: #c89060; }

/* ══ TOP CUT BRACKET ════════════════════════════════════════ */
.bracket-round { margin-bottom: 1.5rem; }

.bracket-title {
  font-family:    var(--font-heading);
  font-size:      10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  .75rem;
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.bracket-title::before { content: '◈'; font-size: 9px; color: var(--blue); }

.bracket-match {
  border:        1px solid rgba(201,168,76,.2);
  border-radius: var(--r-sm);
  overflow:      hidden;
  margin-bottom: 8px;
  background:    var(--bg3);
}
.bracket-match.champion { border-color: var(--gold); box-shadow: 0 0 20px rgba(201,168,76,.18); }

.bm-top    { display: flex; align-items: center; padding: 12px 16px; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.05); flex-wrap: wrap; }
.bm-seed   { font-family: var(--font-heading); font-size: 10px; color: var(--text-dim); min-width: 24px; }
.bm-name   { flex: 1; font-size: 14px; font-weight: 500; }
.bm-bottom { display: flex; align-items: center; padding: 10px 16px; gap: 8px; flex-wrap: wrap; background: rgba(0,0,0,.18); }

/* ══ BYE ════════════════════════════════════════════════════ */
.bye-row { padding: 12px 16px; font-size: 13px; display: flex; align-items: center; gap: 10px; }

/* ══ MODAL ══════════════════════════════════════════════════ */
.modal-overlay {
  position:   fixed; inset: 0;
  background: rgba(0,0,0,.78);
  z-index:    1000;
  display:    flex; align-items: center; justify-content: center;
  backdrop-filter: blur(5px);
}
.modal-box {
  background:    var(--bg2);
  border:        1px solid var(--border-gold);
  border-radius: var(--r);
  padding:       2rem 2.5rem;
  max-width:     420px; width: 90%;
  text-align:    center;
  box-shadow:    var(--sh-lg);
}
.modal-icon    { font-size: 2rem; margin-bottom: 1rem; }
.modal-title   { font-family: var(--font-heading); font-size: 15px; color: var(--gold-light); font-weight: 600; margin-bottom: .75rem; letter-spacing: .1em; }
.modal-body    { font-size: 13px; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.65; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }

/* ══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .app          { padding: 0 1rem 4rem; }
  
  .timer-block  { grid-template-columns: 1fr; text-align: center; padding: 1.25rem; }
  .timer-right  { align-items: center; }
  .match-top, .match-bottom { padding: 10px 12px; }
}