/* =========================================================
   Big Monster — Feuille de score
   Styles propres à l'outil. Le thème et les composants communs
   (boutons, panneaux, feuilles, toast…) sont dans ../shared/.
   ========================================================= */

/* =========================================================
   CONFIGURATION
   ========================================================= */
.logo { color: #ffd76a; }
.logo svg { width: 30px; height: 30px; }
#seg-mode button, #seg-teams button { font-size: 15px; }

.team-group {
  display: grid; gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px dashed var(--line-2);
  border: 1px dashed color-mix(in srgb, var(--c) 50%, transparent);
  background: color-mix(in srgb, var(--c) 6%, transparent);
}
.team-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c); }

/* =========================================================
   SCORE
   ========================================================= */
.play { max-width: 640px; padding-bottom: calc(var(--safe-b) + 28px); }

/* Barre du haut, collée en haut de l'écran pendant le défilement */
.play-top {
  position: sticky; top: 0; z-index: 10;
  margin: 0 calc(-1 * max(16px, var(--safe-r))) 0 calc(-1 * max(16px, var(--safe-l)));
  padding: var(--safe-t) max(16px, var(--safe-r)) 10px max(16px, var(--safe-l));
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.play-head { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
#seg-view { flex: 1; }
#seg-view button { font-size: 15px; padding: 9px 4px; }

/* Onglets joueurs */
.tabs {
  position: relative;
  display: flex; gap: 6px; align-items: center;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-group {
  flex: none; display: flex; gap: 4px;
  padding: 3px; border-radius: 14px;
  border: 1px dashed var(--line-2);
  border: 1px dashed color-mix(in srgb, var(--c) 55%, transparent);
}
.tab {
  --c: var(--accent);
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 180px;
  padding: 7px 10px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--panel);
  font-size: 14px; font-weight: 600;
}
.tab .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab b { font-variant-numeric: tabular-nums; color: var(--muted); }
.tab[aria-pressed="true"] {
  background: var(--panel-3);
  background: color-mix(in srgb, var(--c) 22%, var(--panel));
  border-color: var(--c);
}
.tab[aria-pressed="true"] b { color: var(--text); }

/* ---------- Colonne d'un joueur ---------- */
.pcard {
  --c: var(--accent);
  margin-top: 12px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-fade));
  border: 1px solid var(--line);
  border-top: 4px solid var(--c);
  overflow: hidden;
}
.ph { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.ph-text { flex: 1; min-width: 0; }
.ph-text b { display: block; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-text small { display: block; color: var(--muted); font-size: 13px; }
.ph-total { flex: none; text-align: right; }
.ph-total b { display: block; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ph-total small { color: var(--muted); font-size: 12px; font-weight: 600; }

.cat { --k: var(--accent); padding: 12px 14px; border-top: 1px solid var(--line); }
.cat:first-child { border-top: 0; }
.cat.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 45% { background: color-mix(in srgb, var(--k) 20%, transparent); } }
.cat-head { display: flex; align-items: center; gap: 12px; }
.cat-ico {
  flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--k);
  background: rgba(255, 255, 255, .05);
  background: color-mix(in srgb, var(--k) 14%, transparent);
}
.cat-ico svg { width: 23px; height: 23px; }
.cat-text { flex: 1; min-width: 0; }
.cat-text b { display: block; font-weight: 650; }
.cat-text small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.cat-pts {
  flex: none; min-width: 52px;
  text-align: right;
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cat-pts.zero { color: var(--faint); }
.cat-pts.neg { color: var(--neg); }

.pts-input {
  flex: none; width: 78px;
  text-align: right;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 8px 12px;
  color: var(--text);
  font: inherit; font-size: 21px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pts-input::placeholder { color: var(--faint); }
.pts-input:focus { outline: none; border-color: var(--k); box-shadow: 0 0 0 3px var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 28%, transparent); }
.pts-input.neg { color: var(--neg); }
.sign-btn {
  flex: none; width: 42px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--panel-2);
  font-size: 20px; font-weight: 800; color: var(--muted);
}
.sign-btn.neg { color: var(--neg); border-color: rgba(255, 92, 108, .5); background: rgba(255, 92, 108, .12); }

.cat-fields { display: grid; gap: 6px; margin: 10px 0 0 50px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.f-lbl { min-width: 0; color: var(--muted); font-size: 14px; }
.stepper { flex: none; display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 42px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--panel-2);
  font-size: 20px; line-height: 1;
}
.stepper button:active { background: var(--panel-3); }
.stepper .n { width: 28px; text-align: center; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }

.pnav { display: flex; gap: 8px; margin-top: 12px; }
.pnav .btn { flex: 1; min-width: 0; padding: 14px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Résultats ---------- */
.winner {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 201, 60, .4);
  background: linear-gradient(135deg, rgba(255, 201, 60, .16), rgba(143, 107, 255, .12));
}
.winner .crown { flex: none; width: 36px; height: 36px; color: var(--gold); filter: drop-shadow(0 0 8px rgba(255, 201, 60, .6)); }
.winner .crown svg { width: 100%; height: 100%; }
.w-text { flex: 1; min-width: 0; }
.w-text small { display: block; color: var(--muted); font-size: 13px; }
.w-text b { display: block; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-score { flex: none; text-align: right; font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.w-score small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }

.section-title {
  margin: 20px 2px 8px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
}
.empty-note { padding: 18px 8px 4px; }
.row .lbl small { font-size: 12.5px; white-space: normal; }

/* Tableau récapitulatif : catégories en lignes, joueurs en colonnes */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}
.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.grid th, .grid td { padding: 9px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.grid thead th { font-size: 13px; font-weight: 700; vertical-align: bottom; border-bottom: 2px solid var(--c, var(--line)); }
.th-name { display: block; max-width: 76px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.grid .c-cat {
  position: sticky; left: 0; z-index: 1;
  text-align: left;
  background: var(--panel);
  font-size: 13px; font-weight: 600; color: var(--muted);
  border-right: 1px solid var(--line);
}
.c-cat .cat-ico { display: inline-grid; vertical-align: middle; width: 24px; height: 24px; border-radius: 7px; margin-right: 7px; }
.c-cat .cat-ico svg { width: 15px; height: 15px; }
.grid tbody td { font-weight: 700; cursor: pointer; }
.grid td.zero { color: var(--faint); font-weight: 500; }
.grid td.neg { color: var(--neg); }
.grid tfoot th, .grid tfoot td { border-bottom: 0; }
.t-total th.c-cat { color: var(--text); font-weight: 800; }
.t-total td { font-size: 18px; font-weight: 800; }
.t-total td.counts { color: var(--gold); }
.t-team td {
  text-align: center; font-size: 17px; font-weight: 800;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.t-team th.c-cat { border-top: 1px solid var(--line); }
.legend { margin: 8px 2px 0; color: var(--faint); font-size: 12.5px; line-height: 1.45; }
.legend b { color: var(--gold); }

@media (hover: hover) {
  .stepper button:hover:not(:disabled), .tab:hover:not([aria-pressed="true"]), .sign-btn:hover { background: var(--panel-2); }
  .grid tbody td:hover { background: var(--panel-2); }
}

@media (max-width: 359px) {
  .cat-fields { margin-left: 0; }
  .pts-input { width: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat.flash { animation: none; }
}