/* =========================================================
   Connexion, configuration de partie, mode easy, scores
   ========================================================= */

body.locked { overflow: hidden; }

/* ---------- Connexion ---------- */
.login {
  position: fixed; inset: 0; z-index: 80;
  overflow-y: auto;
  background:
    repeating-radial-gradient(circle at 85% 12%, transparent 0 60px, rgba(127, 127, 127, 0.08) 61px 62px, transparent 63px 120px),
    linear-gradient(170deg, #111713 0%, #111713 55%);
  color: #fff;
}
.login-inner {
  min-height: 100%;
  max-width: 460px; margin: 0 auto;
  padding: calc(19px + env(safe-area-inset-top, 0px)) 16px calc(19px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
}
.login-step { flex: 1; display: flex; flex-direction: column; gap: 12px; }
#login-welcome { justify-content: space-between; }
.login-hero { text-align: center; padding-top: 6vh; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.login-logo { display: block; width: 190px; height: auto; margin: 0 auto 8px; }
.login-hero h1 { font-size: 26px; line-height: 38px; letter-spacing: 0.02em; }
.login-tag { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: 0.24em; font-size: 12px; color: #FFFFFF; }
.login-pitch { margin: 11px 0 0; max-width: 320px; color: #DCE2DC; font-size: 14px; line-height: 20px; }
.login-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.g-btn-slot { min-height: 40px; display: flex; justify-content: center; }
.g-btn-slot:empty { display: none; }
.google-btn {
  width: 100%; max-width: 340px; min-height: 42px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 999px; background: #fff; color: #1F1F1F;
  font-family: 'Roboto', var(--body); font-size: 14px; font-weight: 500;
}
.g-logo { width: 20px; height: 20px; fill: initial; stroke: none; }
.login-note { margin: 0; text-align: center; font-size: 12px; line-height: 15px; color: #A8B8AC; max-width: 320px; }
.login-note:empty { display: none; }
.login-legal { font-size: 12px; line-height: 15px; color: #A8B8AC; text-decoration: underline; text-align: center; }
.admin-link {
  align-self: center; margin-top: 14px; min-height: 34px; padding: 0 11px;
  border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.25);
  color: #A8B8AC; font-size: 12px;
}


.login-head { display: flex; align-items: center; gap: 11px; }
.login-head h2 { font-size: 18px; line-height: 24px; }
.login-head .muted { font-size: 12px; }
.avatar.big { width: 50px; height: 50px; font-size: 18px; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.osm-credit { margin: 0; font-size: 10px; color: var(--muted-2); text-align: center; }

/* ---------- Champs & recherche de golf ---------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.golf-picker { position: relative; }
.golf-picker input {
  width: 100%; min-height: 41px; padding: 0 11px; border-radius: 4px;
  border: 1.5px solid var(--line); background: var(--card);
  font: inherit; font-size: 14px; color: var(--ink); outline: none;
}
.golf-picker input:focus { border-color: var(--green); }
.golf-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  list-style: none; margin: 0; padding: 5px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 4px;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.35);
  max-height: 300px; overflow-y: auto;
}
.golf-results li button { width: 100%; text-align: left; padding: 8px 8px; border-radius: 4px; display: flex; flex-direction: column; color: var(--ink); }
.golf-results li button:active { transform: none; background: var(--chip); }
.golf-results li button b { font-family: var(--display); font-size: 13px; line-height: 16px; }
.golf-results li button small { font-size: 11px; color: var(--muted); }
.gr-title { padding: 5px 8px 4px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }

/* ---------- Configuration d'une partie ---------- */
.setup-block {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 4px;
  padding: 11px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.setup-block .se-label { margin-top: 0; display: flex; align-items: center; justify-content: space-between; }
.setup-block .se-label .soft-pill { text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 500; }
.segmented.two { grid-template-columns: 1fr 1fr; margin-top: 0; }
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mode-card {
  text-align: left; padding: 9px; border-radius: 4px;
  border: 1.5px solid var(--line); background: var(--canvas);
  display: flex; flex-direction: column; gap: 4px;
}
.mode-card b { font-family: var(--display); font-size: 15px; }
.mode-card small { font-size: 11px; line-height: 14px; color: var(--muted); }
.mode-card.on { background: var(--slate); border-color: var(--green); color: #fff; box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.15); }
.mode-card.on b { color: #FFFFFF; }
.mode-card.on small { color: #DCE2DC; }

.players { display: flex; flex-direction: column; gap: 6px; }
.pl-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.pl-row.off .pl-name { color: var(--muted); }
.pl-check { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.pl-check input { position: absolute; opacity: 0; pointer-events: none; }
.pl-check .box {
  width: 26px; height: 26px; border-radius: 4px;
  border: 2px solid var(--muted-2); background: var(--card);
  display: grid; place-items: center;
}
.pl-check input:checked + .box { background: var(--primary); border-color: var(--primary); }
.pl-check input:checked + .box::after { content: ''; width: 11px; height: 6px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.pl-check input:disabled + .box { opacity: 0.6; }
.pl-check input:focus-visible + .box { outline: 3px solid rgba(127, 127, 127, 0.4); outline-offset: 2px; }
.pl-lbl { font-size: 9px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.pl-name {
  min-width: 0; min-height: 40px; padding: 0 9px; border-radius: 4px;
  border: 1.5px solid var(--line); background: var(--canvas);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); outline: none;
}
.pl-name:focus { border-color: var(--green); background: var(--card); }
.pl-name[readonly] { background: var(--chip); }
.pl-me { font-size: 11px; font-weight: 500; color: var(--green-ink); background: var(--green-soft); padding: 4px 8px; border-radius: 999px; }
.pl-del { width: 34px; height: 34px; border-radius: 4px; background: var(--chip); font-size: 17px; color: var(--muted); }

/* ---------- Partie : joueurs ---------- */
.player-strip { display: flex; gap: 5px; flex-wrap: wrap; }
.player-strip:empty { display: none; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12px; color: #DCE2DC; }
.pchip b { font-family: var(--display); color: #FFFFFF; font-size: 13px; }
.pchip.off { opacity: 0.6; }
.pchip small { font-size: 10px; color: #A8B8AC; }

/* ---------- Mode easy ---------- */
.easy-panel {
  background: var(--card); border: 2px solid var(--green); border-radius: 4px;
  padding: 11px; box-shadow: 0 0 0 4px rgba(127, 127, 127, 0.12);
  display: flex; flex-direction: column; gap: 9px;
}
.ep-head { display: grid; grid-template-columns: 41px 1fr 41px; align-items: center; gap: 6px; text-align: center; }
.ep-title b { font-family: var(--display); font-size: 21px; line-height: 29px; }
.ep-arrow { width: 40px; height: 40px; border-radius: 4px; background: var(--chip); display: grid; place-items: center; }

.score-rows { display: flex; flex-direction: column; gap: 8px; }
.score-row { background: var(--canvas); border-radius: 4px; padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; }
.sr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sr-name { font-family: var(--display); font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-name small { font-family: var(--body); font-weight: 500; color: var(--muted); font-size: 11px; }
.score-step { display: flex; align-items: center; gap: 5px; flex: none; }
.score-step button { width: 41px; height: 41px; border-radius: 4px; background: var(--slate); color: #fff; font-family: var(--display); font-size: 19px; font-weight: 600; }
.score-step b { min-width: 40px; text-align: center; font-family: var(--display); font-size: 23px; }
.sr-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.sr-quick button { min-height: 34px; border-radius: 4px; background: var(--card); border: 1.5px solid var(--line); font-family: var(--display); font-weight: 600; font-size: 14px; }
.sr-quick button.on { background: var(--green-soft); border-color: var(--green); color: var(--green-ink); }

.hc-scores { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 11px; }
.hc-scores div { background: var(--canvas); border-radius: 4px; padding: 5px 9px; display: flex; align-items: baseline; gap: 6px; }
.hc-scores span { font-size: 12px; color: var(--muted); }
.hc-scores b { font-family: var(--display); font-size: 16px; }
.hc-title small b { color: var(--ink); }
.hc-scores-btn {
  flex: 1.2; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--primary-dark);
}
.hc-foot > * + * { border-left: 1px solid var(--line); }

/* ---------- Gérer la partie ---------- */
.manage-card {
  margin-top: 6px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 4px;
  padding: 11px; display: flex; flex-direction: column; gap: 8px;
}
.manage-card .small-note { margin: 0; }
.scorecard .sc-total th, .scorecard .sc-total td { border-top: 2px solid var(--ink); font-family: var(--display); }

/* ---------- Inscription pas à pas ---------- */
.onboard { gap: 11px; }
.ob-top { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 9px; padding-top: 4px; }
.ob-round { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: #fff; }
.ob-round svg { width: 18px; height: 18px; }
.ob-progress { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.ob-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: #FFFFFF; transition: width 0.25s ease; }
.ob-count { font-family: var(--display); font-weight: 600; font-size: 12px; color: #A8B8AC; font-variant-numeric: tabular-nums; }
.ob-card { background: var(--canvas); color: var(--ink); border-radius: 4px; padding: 16px 12px; }
.ob-step { display: flex; flex-direction: column; gap: 9px; }
.ob-step > .muted { font-size: 13px; line-height: 17px; }
.ob-q { margin: 0; font-family: var(--display); font-size: 18px; line-height: 24px; }
.ob-step .login-head { margin-bottom: 4px; }
.avatar.huge { width: 96px; height: 96px; font-size: 28px; }
.avatar.huge svg { width: 42px; height: 42px; }
.ob-photo, .avatar-edit { position: relative; align-self: center; border-radius: 50%; padding: 0; background: none; }
.ae-badge {
  position: absolute; right: 2px; bottom: 2px;
  width: 31px; height: 31px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary); color: #fff; border: 3px solid var(--canvas);
}
.ae-badge svg { width: 16px; height: 16px; }
.avatar-edit .ae-badge { width: 24px; height: 24px; right: -2px; bottom: -2px; border-color: #111713; }
.avatar-edit .ae-badge svg { width: 13px; height: 13px; }
.ob-row-btns { display: flex; justify-content: center; align-items: center; gap: 9px; flex-wrap: wrap; }
.ob-row-btns .btn-secondary { min-height: 40px; padding: 0 16px; font-size: 13px; }
.big-field input { min-height: 54px; font-family: var(--display); font-size: 24px; font-weight: 600; text-align: center; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chips button { min-height: 34px; padding: 0 11px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink); }
.ob-chips button.on { background: var(--green-soft); border-color: var(--green); color: var(--green-ink); }
#ob-bag-count.warn, .soft-pill.warn { color: #677169; }
.soft-pill.warn { background: var(--amber-soft); }
.ob-actions { display: flex; align-items: center; gap: 9px; margin-top: auto; }
.ob-actions .link-btn { color: #A8B8AC; padding: 0 9px; }
.ob-actions .btn-primary { flex: 1; }

/* ---------- Onglet Profil ---------- */
.prof-side, .prof-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.prof-hero .hh-id .avatar { box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.35); }
.photo-links { display: flex; gap: 4px; flex-wrap: wrap; margin-top: -5px; }
.link-btn.light { color: #FFFFFF; min-height: 31px; padding: 0 6px 0 0; font-size: 13px; }
.link-btn.light + .link-btn.light { color: #A8B8AC; padding-left: 6px; }
.admin-btn {
  min-height: 40px; border-radius: 4px; border: 1.5px dashed var(--wedge-ink);
  background: var(--wedge-soft); color: var(--wedge-ink);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--display); font-weight: 600; font-size: 13px;
}
.admin-btn svg { width: 16px; height: 16px; }
#pf-account .btn-secondary, #pf-account .btn-danger { min-height: 40px; font-size: 13px; }
#bag-summary { grid-template-columns: repeat(2, 1fr); }
#bag-summary b { font-size: 18px; line-height: 24px; }
.field-row > .field { min-width: 0; }
.field-row .field input { width: 100%; min-width: 0; }
#bag-summary div { background: var(--card); border: 1.5px solid var(--line); }
.form-bars.mini { height: 72px; }
.ob-row-btns .btn-secondary { width: auto; }

/* ---------- Aperçu admin de l'écran de connexion ---------- */
.login-preview {
  position: sticky; top: 0; z-index: 5;
  margin: calc(-19px - env(safe-area-inset-top, 0px)) -16px 9px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  background: var(--wedge-soft); color: var(--wedge-ink); font-size: 12px; line-height: 15px;
}
.login-preview button {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  min-height: 31px; padding: 0 9px; border-radius: 999px;
  background: var(--wedge-ink); color: #fff; font-family: var(--display); font-weight: 600; font-size: 13px;
}
.login-preview svg { width: 14px; height: 14px; }
.sim-btn {
  width: 100%; max-width: 340px; min-height: 40px; border-radius: 999px;
  border: 1.5px dashed #DCE2DC; color: #DCE2DC; font-size: 13px; font-weight: 500;
}

/* ---------- Espace admin ---------- */
.admin-hero { background: repeating-radial-gradient(circle at 92% 8%, transparent 0 46px, rgba(127, 127, 127, 0.12) 47px 48px, transparent 49px 92px), linear-gradient(160deg, #1D4D3F 0%, #111713 70%); border-color: #111713; }
.admin-hero .hud-text { margin: 0; }
.admin-chip { background: rgba(127, 127, 127, 0.18); color: #DCE2DC; }
.admin-chip .pulse { background: #A8B8AC; }
.admin-h { margin: 0; font-family: var(--display); font-size: 16px; line-height: 21px; }
.admin-card .small-note { margin: 0; }
.admin-card .btn-secondary, .admin-card .btn-danger { min-height: 40px; font-size: 13px; }
.adm-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-checks li { display: flex; align-items: flex-start; gap: 8px; background: var(--canvas); border-radius: 4px; padding: 8px 9px; }
.adm-checks li span:last-child { display: flex; flex-direction: column; min-width: 0; }
.adm-checks b { font-family: var(--display); font-size: 13px; }
.adm-checks small { font-size: 12px; line-height: 15px; color: var(--muted); }
.adm-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.adm-checks .ok .adm-dot { background: var(--green-soft); color: var(--green-ink); }
.adm-checks .todo .adm-dot { background: var(--amber-soft); color: #677169; }

/* =========================================================
   Profil · Jouer · Stats (structure en 3 univers)
   ========================================================= */

/* ---------- Profil : Mon sac ---------- */
.bag-card { gap: 11px; }
.bag-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bag-card-head h3 { margin: 2px 0 0; font-family: var(--display); font-size: 16px; line-height: 21px; }
.bag-card .small-note { margin: -4px 0 0; }
.bag-group { display: flex; flex-direction: column; gap: 6px; }
.bag-group-title { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink); }
.bag-group-title b { font-size: 12px; padding: 1px 6px; border-radius: 999px; background: var(--chip); color: var(--muted); }
.bag-group-title .dot { width: 9px; height: 9px; border-radius: 50%; }
.bag-group-title .dot.in { background: var(--primary); }
.bag-group-title .dot.out { background: transparent; border: 2px solid var(--muted-2); }
.bag-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bag-tile {
  position: relative; text-align: left; min-height: 45px; padding: 6px 28px 6px 9px; border-radius: 4px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
}
.bag-tile b { font-family: var(--display); font-size: 14px; line-height: 17px; }
.bag-tile small { font-size: 10px; line-height: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bag-tile i {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 1;
}
.bag-tile.in { background: var(--slate); border-color: var(--slate); color: #fff; }
.bag-tile.in small { color: #A8B8AC; }
.bag-tile.in i { background: rgba(255, 255, 255, 0.12); color: #FCA5A5; }
.bag-tile.out { border-style: dashed; background: var(--canvas); }
.bag-tile.out b { color: var(--muted); }
.bag-tile.out i { background: var(--green-soft); color: var(--green-ink); }
.club-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.club-chips span { padding: 4px 8px; border-radius: 999px; background: var(--chip); font-family: var(--display); font-size: 12px; font-weight: 600; }

/* ---------- Jouer ---------- */
.lobby-side, .lobby-main { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.lobby-card { gap: 11px; }
.lobby-card .hole-title { font-size: 19px; line-height: 26px; white-space: normal; }
.lobby-card .hole-sub { margin-top: 4px; white-space: normal; }
.lobby-card.live { border-color: var(--green); box-shadow: 0 0 0 4px rgba(127, 127, 127, 0.18); }
.lobby-note { margin: 0; font-size: 12px; line-height: 15px; color: #A8B8AC; }
.lobby-month { margin: 5px 0 0; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lobby-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lobby-item {
  width: 100%; text-align: left; display: grid; grid-template-columns: 41px minmax(0, 1fr) auto 15px; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 4px; background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow); color: var(--ink);
}
.lobby-item:active { transform: none; background: var(--chip); }
.lobby-item > svg { width: 16px; height: 16px; color: var(--muted-2); }
.li-date { width: 40px; height: 40px; border-radius: 4px; background: var(--chip); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.li-date b { font-family: var(--display); font-size: 16px; }
.li-date small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.li-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.li-main b { font-family: var(--display); font-size: 14px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-main small { font-size: 11px; line-height: 14px; color: var(--muted); }
.li-score { font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 21px; display: flex; flex-direction: column; align-items: flex-end; }
.li-score i { font-style: normal; font-family: var(--body); font-size: 10px; font-weight: 400; color: var(--muted); line-height: 12px; }
#setup-back { margin-bottom: -5px; }

/* ---------- Stats : tableaux cliquables ---------- */
.rounds-table th small { display: block; font-weight: 400; font-size: 10px; color: var(--muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-link { cursor: pointer; }
.row-link:hover th, .row-link:hover td, .row-link:focus-visible th, .row-link:focus-visible td { background: var(--green-soft); }
.wl { font-family: var(--display); font-weight: 600; }
.wl.w { color: var(--green-ink); }
.wl.l { color: var(--red-ink); }
.wl.t { color: var(--muted); }
/* Mobile : le sac passe avant le bloc Compte */
html:not([data-device="desktop"]) .prof-side { display: contents; }
html:not([data-device="desktop"]) .prof-main { order: 2; }
html:not([data-device="desktop"]) #pf-account { order: 3; }

/* ---------- Stats : barre de filtres ---------- */
.stats-filters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 4px; padding: 6px;
  box-shadow: var(--shadow);
}
.sf-reset {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 4px;
  min-height: 29px; padding: 0 9px 0 6px; border-radius: 999px; background: var(--chip);
  font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--ink);
}
.sf-reset svg { width: 14px; height: 14px; }
html:not([data-device="desktop"]) .stats-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Jouer : arrêter la partie en cours ---------- */
.lobby-stop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.btn-stop {
  min-height: 41px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.22); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 14px;
}
.btn-stop svg { width: 16px; height: 16px; fill: #FCA5A5; stroke: none; }
.link-btn.danger { color: #FCA5A5; min-height: 41px; padding: 0 9px; font-weight: 500; }

/* ---------- Nouvelle partie : joueurs ---------- */
.pl-row {
  grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px;
  background: var(--canvas); border-radius: 4px; padding: 8px;
}
.pl-row .pl-name { background: var(--card); }
.pl-check { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; justify-self: stretch; padding: 2px 2px 0; }
.pl-check .box { flex: none; width: 22px; height: 22px; border-radius: 4px; }
.pl-lbl { display: flex; flex-direction: column; gap: 1px; text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 14px; }
.pl-lbl b { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--ink); }
.pl-row.off .pl-lbl b { color: var(--muted); }

/* ---------- Stats : filtres à sélection multiple ---------- */
.stats-filters { position: relative; z-index: 6; }
.sf { min-width: 0; }
.sf-btn {
  width: 100%; min-width: 0; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) 14px; grid-template-rows: auto auto; column-gap: 5px;
  padding: 5px 8px; border-radius: 4px; background: var(--canvas); border: 1.5px solid transparent; color: var(--ink);
}
.sf-k { grid-column: 1; display: flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sf-k svg { width: 12px; height: 12px; }
.sf-val { grid-column: 1; font-family: var(--display); font-weight: 600; font-size: 13px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-caret { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 14px; height: 14px; color: var(--muted); transition: transform 0.15s; }
.sf.on .sf-btn { background: var(--green-soft); border-color: #FFFFFF; }
.sf.on .sf-k { color: var(--green-ink); }
.sf.open .sf-btn { border-color: var(--green); background: var(--card); }
.sf.open .sf-caret { transform: rotate(180deg); }

.sf-panel {
  position: absolute; left: 8px; right: 8px; top: calc(100% + 6px); z-index: 30;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 4px;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.35);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.sfp-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.sfp-actions button { min-height: 29px; padding: 0 9px; border-radius: 999px; background: var(--chip); font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--ink); }
.sfp-list { list-style: none; margin: 0; padding: 0; max-height: min(52vh, 360px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sfp-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 4px; cursor: pointer; }
.sfp-item input { position: absolute; opacity: 0; pointer-events: none; }
.sfp-item .box { flex: none; width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--muted-2); display: grid; place-items: center; background: var(--card); }
.sfp-item input:checked + .box { background: var(--primary); border-color: var(--primary); }
.sfp-item input:checked + .box::after { content: ''; width: 9px; height: 5px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.sfp-item input:focus-visible + .box { outline: 3px solid rgba(127, 127, 127, 0.4); outline-offset: 2px; }
.sfp-txt { display: flex; flex-direction: column; min-width: 0; }
.sfp-txt b { font-family: var(--display); font-size: 13px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfp-txt small { font-size: 11px; color: var(--muted); }
.sfp-empty { padding: 8px; color: var(--muted); font-size: 12px; }
.sfp-ok { min-height: 40px; border-radius: 4px; background: var(--slate); color: #fff; font-family: var(--display); font-weight: 600; font-size: 13px; }
/* 4 filtres sur 2 lignes : les noms trop longs sont coupés, le détail reste dans le panneau */

/* =========================================================
   Version condensée : trous sur une ligne, saisie de score, stats
   ========================================================= */

/* ---------- Saisie du score : 2 à 7 + champ manuel ---------- */
.sr-quick { grid-template-columns: repeat(6, 1fr); }
.score-row { padding: 6px 8px; gap: 5px; }
.score-step button { width: 40px; height: 40px; border-radius: 4px; font-size: 17px; }
.sr-input {
  width: 44px; height: 40px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--card);
  text-align: center; font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink); outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.sr-input::-webkit-outer-spin-button, .sr-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sr-input:focus { border-color: var(--green); }
.sr-input::placeholder { color: var(--muted-2); }

/* ---------- Cartes de trou : une seule ligne ---------- */
.hole-cards { gap: 5px; }
.hole-card.row {
  display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  padding: 5px 5px 5px 6px; border-radius: 4px;
}
.hole-card.row .hc-badge { width: 29px; height: 29px; font-size: 14px; border-radius: 4px; }
.hc-info { min-width: 0; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 0; color: var(--ink); min-height: 34px; }
.hc-info:active { transform: none; }
.hc-line { font-size: 13px; line-height: 15px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hc-line b { font-family: var(--display); font-size: 14px; color: var(--ink); }
.hc-line .state { font-size: 10px; }
.hc-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.hole-card.row .hc-dots { max-width: none; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hc-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 7px; border-radius: 999px; background: var(--canvas); font-size: 11px; color: var(--muted); }
.hc-chip b { font-family: var(--display); font-size: 14px; color: var(--ink); }
.hc-chip.me { background: var(--green-soft); color: var(--green-ink); }
.hc-chips.small .hc-chip { padding: 1px 5px; }
.hc-chips.small .hc-chip b { font-size: 12px; }
.hc-icons { display: flex; align-items: center; gap: 2px; }
.hc-ic { width: 31px; height: 31px; border-radius: 4px; display: grid; place-items: center; color: var(--muted); }
.hc-ic svg { width: 16px; height: 16px; }
.hc-ic:active { background: var(--chip); }
.hc-ic.go { background: var(--primary); color: #fff; }
.hc-ic.go svg { fill: currentColor; stroke: none; width: 14px; height: 14px; }
.hole-card.row .hc-body { grid-column: 1 / -1; margin: 5px -5px -5px -6px; border-top: 1px solid var(--line); }
.hole-card.row.open { padding-bottom: 5px; }

/* ---------- Partenaires (noms seulement) ---------- */
.with-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; color: var(--wedge-ink); min-width: 0; }
.with-tag svg { width: 13px; height: 13px; flex: none; }
.with-tag.light { color: #DCE2DC; margin-top: 4px; }

/* ---------- Stats : plus compact ---------- */
#stats-body { gap: 9px; }
#stats-body .stat-tile { padding: 8px 9px; border-radius: 4px; }
#stats-body .t-value { font-size: 19px; line-height: 26px; }
#stats-body .t-label { font-size: 11px; }
#stats-body .t-sub { font-size: 10px; }
#stats-body .viz-card { padding: 11px; gap: 8px; border-radius: 4px; }
#stats-body .viz-card header p:empty { display: none; }
#stats-body .stats-h { font-size: 15px; line-height: 21px; margin-top: 5px; }
.pp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pp-item {
  width: 100%; text-align: left; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; background: var(--canvas); color: var(--ink);
}
.pp-item:active { transform: none; background: var(--chip); }
.pp-date { width: 34px; height: 34px; border-radius: 4px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.pp-date b { font-family: var(--display); font-size: 14px; }
.pp-date small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.pp-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pp-main b { font-family: var(--display); font-size: 13px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-main small { font-size: 11px; color: var(--muted); }
.pp-score { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 21px; display: flex; flex-direction: column; align-items: flex-end; }
.pp-score i { font-style: normal; font-family: var(--body); font-size: 10px; font-weight: 400; color: var(--muted); line-height: 12px; white-space: nowrap; }

/* =========================================================
   Stats : contraste, icônes, couleurs par thème
   ========================================================= */
.tone-green { --tc: #000000; --tb: #E9EFEB; --tl: #111713; }
.tone-blue { --tc: #1D5FB4; --tb: #DBEAFE; --tl: #3B82F6; }
.tone-amber { --tc: #677169; --tb: #E9EFEB; --tl: #A8B8AC; }
.tone-violet { --tc: #111713; --tb: #E9EFEB; --tl: #677169; }
.tone-red { --tc: #B91C1C; --tb: #FEE2E2; --tl: #B91C1C; }
.tone-slate { --tc: #3D3D3D; --tb: #DCE2DC; --tl: #677169; }

/* fond de page teinté pour détacher les cartes */
body[data-screen="stats"], body[data-screen="stats"] main { background: #E9EFEB; }
body[data-screen="stats"] .appbar { background: rgba(237, 237, 237, 0.92); }

/* titres de section */
#stats-body .stats-h { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 16px; }
.sh-ic { width: 27px; height: 27px; border-radius: 4px; display: grid; place-items: center; background: var(--tc); color: #fff; flex: none; }
.sh-ic svg { width: 16px; height: 16px; }

/* cartes : liseré coloré + pastille d'icône */
#stats-body .viz-card { border: 0; border-top: 4px solid var(--tl, var(--line)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px -12px rgba(0, 0, 0, 0.25); }
#stats-body .viz-card > header { display: flex; align-items: center; gap: 8px; }
.vc-ic { width: 31px; height: 31px; border-radius: 4px; display: grid; place-items: center; background: var(--tb); color: var(--tc); flex: none; }
.vc-ic svg { width: 18px; height: 18px; }
#stats-body .viz-card header h3 { font-size: 14px; line-height: 18px; }
#stats-body .viz-card header p { margin-top: 1px; font-size: 11px; line-height: 14px; }

/* tuiles dans les cartes : icône colorée, fond légèrement teinté */
#stats-body .stat-tile { border: 0; background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px -12px rgba(0, 0, 0, 0.3); }
#stats-body .viz-card .stat-tile { background: #E9EFEB; box-shadow: none; }
.t-label { display: flex; align-items: center; gap: 5px; }
.t-ic { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; background: var(--tb, var(--chip)); color: var(--tc, var(--muted)); flex: none; }
.t-ic svg { width: 13px; height: 13px; }
#stats-body .stat-tile .t-value { color: var(--ink); }

/* bandeau des chiffres clés : sombre, fort contraste */
#stats-body .tiles.kpi {
  background: repeating-radial-gradient(circle at 92% 8%, transparent 0 46px, rgba(127, 127, 127, 0.10) 47px 48px, transparent 49px 92px), linear-gradient(160deg, #1D4D3F 0%, #111713 70%);
  border-radius: 4px; padding: 8px; gap: 6px;
}
#stats-body .tiles.kpi .stat-tile { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: none; }
#stats-body .tiles.kpi .t-label { color: #DCE2DC; }
#stats-body .tiles.kpi .t-value { color: #fff; }
#stats-body .tiles.kpi .t-value small { color: #FFFFFF; }
#stats-body .tiles.kpi .t-sub { color: #A8B8AC; }
#stats-body .tiles.kpi .t-ic { background: var(--tl); color: #fff; }

/* listes et tableaux plus lisibles */
#stats-body .pp-item { background: #E9EFEB; }
#stats-body .pp-score { color: var(--primary-dark); }
#stats-body .data-table thead th { background: #E9EFEB; color: var(--ink); }
#stats-body .scope-note { font-weight: 500; color: #677169; }
html:has(body[data-screen="stats"]) { background: #E9EFEB; }

/* =========================================================
   Saisie du coup sur l'écran des clubs · gestion de partie compacte
   ========================================================= */

/* ---------- Partie : 3 actions sur une ligne ---------- */
.round-actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; }
.ra-btn {
  min-height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
  font-family: var(--display); font-weight: 600; font-size: 13px; padding: 0 6px; min-width: 0;
}
.ra-btn svg { width: 16px; height: 16px; flex: none; }
.ra-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-btn.finish { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 14px -8px rgba(127, 127, 127, 0.7); }
.ra-btn.danger { color: var(--red-ink); border-color: #FCA5A5; }
#round-time svg { width: 13px; height: 13px; }

/* ---------- Grille des clubs : club sélectionné ---------- */
.club.picked { outline: 3px solid var(--green); outline-offset: 2px; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(127, 127, 127, 0.6); }
.dir-g { font-style: normal; color: #A8B8AC; margin-left: 2px; }

/* ---------- Panneau du coup ---------- */
.shot-panel {
  background: var(--card); border: 2px solid var(--green); border-radius: 4px;
  padding: 9px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.35);
}
.sp-head { display: flex; align-items: center; gap: 6px; }
.sp-club { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 22px; }
.sp-shot { flex: 1; font-size: 12px; color: var(--muted); }
.sp-x { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--muted); flex: none; }
.sp-x svg { width: 16px; height: 16px; }
.sp-label { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

.dir-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.dir-row button {
  min-height: 44px; border-radius: 4px; background: var(--canvas); border: 1.5px solid var(--line); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; min-width: 0;
}
.dir-row button svg { width: 20px; height: 20px; transform: rotate(var(--a)); stroke-width: 2.4; }
.dir-row button small { font-size: 10px; line-height: 11px; color: var(--muted); white-space: nowrap; }
.dir-row button[data-dir="0"] svg { color: var(--primary); }
.dir-row button.on { background: var(--slate); border-color: var(--slate); color: #fff; }
.dir-row button.on svg { color: #FFFFFF; }
.dir-row button.on small { color: #DCE2DC; }

.contact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.contact-row button {
  min-height: 40px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--canvas); color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--display); font-weight: 600; font-size: 13px; min-width: 0;
}
.contact-row button .dot { width: 9px; height: 9px; }
.contact-row button.q1.on { background: var(--red); border-color: var(--red); color: #fff; }
.contact-row button.q2.on { background: var(--amber); border-color: var(--amber); color: #fff; }
.contact-row button.q3.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.contact-row button.on .dot { background: #fff; }

.shot-panel .manual-toggle { align-self: flex-start; margin: 0; min-height: 27px; }
.shot-panel .manual-box { margin: 0; padding: 8px; }
.sp-save { min-height: 42px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sp-save svg { width: 18px; height: 18px; }
.sp-save:disabled { opacity: 1; background: var(--chip); color: var(--muted); box-shadow: none; }
.sp-save.busy { opacity: 0.6; pointer-events: none; }

/* éditeur de coup */
#shot-sheet .dir-row, #shot-sheet .contact-row { margin-bottom: 4px; }


.round-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.ra-btn { gap: 4px; padding: 0 4px; font-size: 12px; }
.ra-btn svg { width: 14px; height: 14px; }
#round .hole > div { min-width: 0; }
#round-eyebrow, #round-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Saisie du coup intégrée à la page ---------- */
.shot-panel { box-shadow: var(--shadow); border-color: var(--line); }
.shot-panel.ready { border-color: var(--green); box-shadow: 0 0 0 4px rgba(127, 127, 127, 0.12); }
.sp-club.none { font-size: 14px; color: var(--muted); font-weight: 500; }
/* mobile : clubs plus compacts pour tout voir sur un écran */
html:not([data-device="desktop"]) #play { gap: 8px; }
html:not([data-device="desktop"]) #play > .club-zone > .section-head { margin-top: 0; }
html:not([data-device="desktop"]) #play > .club-zone > .section-head h2 { font-size: 15px; line-height: 21px; }
html:not([data-device="desktop"]) .club-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
html:not([data-device="desktop"]) .club-grid .club { min-height: 0; padding: 6px 4px; gap: 2px; border-radius: 4px; }
html:not([data-device="desktop"]) .club-grid .club .badge { display: none; }
html:not([data-device="desktop"]) .club-grid .club .name { font-size: 13px; line-height: 16px; }
html:not([data-device="desktop"]) .club-grid .club .avg { font-size: 10px; }
html:not([data-device="desktop"]) .club.picked { transform: none; outline-offset: 1px; background: var(--green-soft); }
/* mobile : cartouche du trou plus compact pour garder clubs + saisie à portée */
html:not([data-device="desktop"]) #play > .hud { padding: 9px 11px; gap: 8px; }
html:not([data-device="desktop"]) #play .pod { padding: 5px 4px; }
html:not([data-device="desktop"]) #play .pod .v { font-size: 17px; line-height: 22px; }
html:not([data-device="desktop"]) #play .pod.main .v { font-size: 21px; line-height: 29px; }
html:not([data-device="desktop"]) #play .pod.main .v.wait { font-size: 14px; line-height: 29px; }
html:not([data-device="desktop"]) .club-grid .club .avg:empty { display: none; }

/* =========================================================
   Par du trou · score par rapport au par · carte de golf
   ========================================================= */

/* ---------- Choix du par : 3 grandes tuiles qui démarrent le trou ---------- */
.par-q { font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 17px; display: flex; flex-direction: column; gap: 2px; }
.par-q small { font-family: var(--body); font-weight: 400; font-size: 11px; color: var(--muted); }
.par-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.par-tiles button {
  position: relative; min-height: 69px; border-radius: 4px; padding: 8px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--slate); color: #fff; border: 2px solid var(--slate);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
}
.par-tiles button b { font-family: var(--display); font-size: 25px; line-height: 34px; color: #FFFFFF; }
.par-tiles button[data-par="3"] { background: linear-gradient(160deg, #1D4D3F, #111713); }
.par-tiles button[data-par="4"] { background: linear-gradient(160deg, #111713, #111713); }
.par-tiles button[data-par="5"] { background: linear-gradient(160deg, #111713, #111713); }
.par-tiles button:active { transform: scale(0.97); }

/* ---------- Par : sélecteur compact (mode easy, fiche du trou) ---------- */
.par-line { display: flex; align-items: center; gap: 8px; }
.par-line > span { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.par-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; flex: 1; }
.par-mini button { min-height: 34px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--canvas); display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--ink); }
.par-mini button b { font-family: var(--display); font-size: 15px; }
.par-mini button span { font-size: 11px; color: var(--muted); }
.par-mini button small { display: none; }
.par-mini button.on { background: var(--slate); border-color: var(--slate); color: #fff; }
.par-mini button.on b { color: #FFFFFF; }
.par-mini button.on span { color: #DCE2DC; }
#hole-sheet .nh-row .par-mini { max-width: 240px; }

/* ---------- Écart au par ---------- */
.topar { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: 10px; line-height: 13px; margin-left: 4px; white-space: nowrap; }
.topar.under { background: #E9EFEB; color: #111713; }
.topar.even { background: #DCE2DC; color: #111713; }
.topar.over { background: #E9EFEB; color: #111713; }
.topar.big { font-size: 13px; padding: 3px 8px; margin-left: 6px; }
.hc-badge small { display: block; font-size: 9px; line-height: 9px; font-weight: 600; opacity: 0.75; }
.hole-card.row .hc-badge { flex-direction: column; line-height: 1; }

/* ---------- Carte de golf ---------- */
.sc-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 0; }
.sc-summary b { font-family: var(--display); font-size: 23px; line-height: 33px; }
.sc-summary small { width: 100%; font-size: 11px; color: var(--muted); }
.golf-card { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; min-width: 100%; }
.golf-card th, .golf-card td { text-align: center; padding: 5px 4px; min-width: 27px; font-size: 13px; border-bottom: 1px solid var(--line); }
.golf-card th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; padding-left: 2px; padding-right: 8px; font-family: var(--display); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.golf-card .sc-num th { background: var(--slate); color: #fff; font-family: var(--display); font-size: 11px; font-weight: 600; }
.golf-card .sc-num th:first-child { border-top-left-radius: 10px; background: var(--slate); color: #A8B8AC; }
.golf-card .sc-num th:last-child { border-top-right-radius: 10px; }
.golf-card .sc-par td { color: var(--muted); font-weight: 500; }
.golf-card .sc-sub { background: #E9EFEB; font-weight: 600; }
.golf-card .sc-num .sc-sub { background: #1D4D3F; }
.golf-card .sc-tot { background: #DCE2DC; font-family: var(--display); font-weight: 600; font-size: 13px; }
.golf-card .sc-num .sc-tot { background: var(--primary); color: #fff; }
.golf-card .sc-me td { font-family: var(--display); font-weight: 600; font-size: 14px; }
.golf-card .sc-other td { font-family: var(--display); font-weight: 500; font-size: 13px; }
.golf-card .sc-name { display: block; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.golf-card .tp { font-family: var(--display); font-size: 11px; font-weight: 600; }
.golf-card .tp.under { color: #111713; }
.golf-card .tp.over { color: #111713; }
.golf-card .tp.even { color: var(--muted); }
/* formes classiques : cercle = sous le par, carré = au-dessus */
.sc-s span { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.sc-s.birdie span { border: 2px solid #111713; border-radius: 50%; color: #111713; }
.sc-s.eagle span { border: 2px solid #111713; border-radius: 50%; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #111713; color: #111713; }
.sc-s.bogey span { border: 2px solid #111713; border-radius: 4px; color: #111713; }
.sc-s.dbl span { border: 2px solid #111713; border-radius: 4px; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #111713; color: #111713; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 5px 11px; font-size: 11px; color: var(--muted); }
.sc-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.sc-legend i { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 11px; }
.sc-legend i span { width: 20px; height: 20px; }

/* =========================================================
   Trou suivant automatique · carte de score en direct · retour clair
   ========================================================= */
.nh-next { display: flex; align-items: center; gap: 9px; }
.nh-big {
  width: 41px; height: 41px; border-radius: 4px; flex: none; display: grid; place-items: center;
  background: var(--slate); color: #FFFFFF; font-family: var(--display); font-size: 19px; font-weight: 600;
}
.nh-next .nh-hint { display: flex; flex-direction: column; gap: 1px; }
.nh-next .nh-hint b { font-family: var(--display); font-size: 15px; line-height: 19px; color: var(--ink); }
.nh-next .nh-hint small { font-size: 11px; line-height: 14px; color: var(--muted); }

/* carte de score en direct */
.live-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 4px; padding: 9px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px;
}
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lc-head h2 { font-size: 15px; line-height: 19px; margin: 0; }
.lc-head .soft-pill { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 600; color: var(--ink); }
.golf-card.live th, .golf-card.live td { min-width: 24px; padding: 4px 2px; font-size: 12px; }
.golf-card.live .sc-s span { width: 20px; height: 20px; }
/* double cadre tracé vers l'intérieur : la cellule fait 24 px, il passerait sinon sous la colonne des noms */
.golf-card.live .sc-s.dbl span { box-shadow: inset 0 0 0 1px var(--card), inset 0 0 0 2.5px #111713; }
.golf-card.live .sc-s.eagle span { box-shadow: inset 0 0 0 1px var(--card), inset 0 0 0 2.5px #111713; }
.golf-card .todo { color: #DCE2DC; }
.golf-card .sc-par .todo { color: #DCE2DC; }
.golf-card .sc-num th.todo { color: #677169; }
.golf-card .sc-num th.cur { background: var(--primary); color: #fff; }
.golf-card td.cur { background: var(--green-soft); }
.under-txt { color: #FCA5A5; }
.over-txt { color: #93C5FD; }
.even-txt { color: #fff; }

/* écran du trou : retour + par en haut */
.play-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.play-top .back-link { margin: 0; }
.par-line.compact { gap: 6px; }
.par-line.compact .par-mini { grid-template-columns: repeat(3, 37px); flex: none; }
.par-line.compact .par-mini button { min-height: 31px; }
/* dernier club joué : simple repère, pour ne pas le confondre avec la sélection */
.club.last { background: var(--card); color: var(--ink); border: 1.5px dashed var(--green); box-shadow: var(--shadow); }
.club.last .name { color: var(--ink); }
.club.last .avg { color: var(--muted); }
.club.last .badge { background: var(--green-soft); color: var(--green-ink); }
.club.last::after { content: 'dernier'; position: absolute; top: 4px; right: 6px; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); }
.club.picked { background: var(--slate); color: #fff; border: 2px solid var(--green); }
.club.picked .name { color: #FFFFFF; }
.club.picked .avg { color: #A8B8AC; }
html:not([data-device="desktop"]) .club-grid .club.picked { background: var(--slate); }

/* ---------- En-tête de partie + carte de score fusionnés ---------- */
.lc-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; font-size: 12px; color: #DCE2DC; }
.lc-sum > span:first-child { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; margin-right: auto; }
.lc-sum b { font-family: var(--display); color: #fff; font-size: 13px; }
.lc-sum .topar.big { margin-left: 0; }
.hud-card { background: var(--card); border-radius: 4px; padding: 5px; color: var(--ink); }
.hud-card .golf-card .sc-num th:first-child { border-top-left-radius: 10px; }
.hud-card .golf-card.live th, .hud-card .golf-card.live td { min-width: 20px; padding: 4px 1px; font-size: 11px; }
.hud-card .golf-card.live th[scope="row"] { padding-right: 5px; font-size: 10px; }
.hud-card .golf-card.live .sc-s span { width: 19px; height: 19px; }
.hud-card .golf-card.live .sc-tot { padding: 4px 4px; }

/* ---------- Stats : direction & contact ---------- */
.dir-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.dir-sum > div { background: #E9EFEB; border-radius: 4px; padding: 6px; text-align: center; display: flex; flex-direction: column; }
.dir-sum span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.dir-sum b { font-family: var(--display); font-size: 17px; line-height: 22px; }
.dir-sum .mid { background: var(--slate); }
.dir-sum .mid span { color: #A8B8AC; }
.dir-sum .mid b { color: #fff; }
.dir-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
/* putting : une seule carte */
.putt-grid { display: flex; flex-direction: column; gap: 9px; }
.putt-grid h4 { margin: 0 0 4px; font-family: var(--display); font-size: 13px; }
.qrows .qpct { white-space: nowrap; } .qrows.dir .qpct { min-width: 50px; }

/* direction par club : le % reste dans la carte */
.qrows.dir .qrow { grid-template-columns: 63px minmax(0, 1fr) auto; }
.qrows.dir .qpct { min-width: 0; font-size: 12px; }
/* éventail contact × direction */
.chart.fan { max-width: 520px; margin: 0 auto; display: block; }
.fan .fan-pct { font-family: var(--display); font-weight: 600; font-size: 11px; fill: var(--ink); }
.fan .fan-lbl { font-family: var(--display); font-weight: 600; font-size: 11px; fill: var(--ink); }
.fan .hit-arc { cursor: pointer; }
.fan .hit-arc.hot { filter: brightness(1.1); }
.fan .fan-n { font-size: 9px; fill: var(--muted); } .fan .fan-pct { font-size: 12px; }

/* ---------- Accueil allégé : Mon jeu ---------- */
.mj-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mj-top > :only-child { grid-column: 1 / -1; }
.mj-stat { border-radius: 4px; padding: 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mj-stat.good { background: var(--slate); color: #fff; }
.mj-stat.work { background: var(--amber-soft); color: #111713; }
.mj-k { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.mj-stat.good .mj-k { color: #FFFFFF; opacity: 1; }
.mj-stat b { font-family: var(--display); font-size: 15px; line-height: 19px; }
.mj-stat small { font-size: 11px; line-height: 14px; opacity: 0.85; }
.mj-v { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 28px; color: #FFFFFF; }
.mj-v small { font-size: 12px; color: #A8B8AC; }
.mj-global { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.mj-global > div { background: var(--canvas); border-radius: 4px; padding: 6px 4px; text-align: center; display: flex; flex-direction: column; }
.mj-global b { font-family: var(--display); font-size: 17px; line-height: 22px; }
.mj-global span { font-size: 10px; line-height: 12px; color: var(--muted); }
.mj-link { align-self: flex-start; }

/* Acceptation des conditions */
.consent { z-index: 200; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 12px; }
.consent[hidden] { display: none; }
.consent-card { width: 100%; max-width: 520px; margin: auto; background: #F5F6F2; color: #111713; border-radius: 4px; padding: 19px 16px; display: flex; flex-direction: column; gap: 9px; }
.consent-card h2 { margin: 0; font-size: 18px; line-height: 26px; }
.consent-card p { margin: 0; font-size: 13px; line-height: 18px; }
.consent-card ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 18px; }
.consent-card a { color: inherit; text-decoration: underline; }
.consent-check { display: flex; align-items: flex-start; gap: 9px; padding: 11px; background: #FFFFFF; border: 1px solid #DCE2DC; border-radius: 4px; font-size: 13px; line-height: 17px; cursor: pointer; }
.consent-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #111713; }
.consent-ok { min-height: 42px; border-radius: 4px; background: #123F32; color: #fff; font-weight: 600; font-size: 14px; }
.consent-ok:disabled { background: #DCE2DC; color: #677169; cursor: not-allowed; }
.consent-refuse { min-height: 40px; background: none; color: #677169; font-size: 13px; text-decoration: underline; }
.consent-refuse.danger { color: #B91C1C; width: 100%; }
.consent-refuse.danger.confirm { font-weight: 600; }