:root {
    color-scheme: light dark;
    --green: #1f8449;
    --green-dark: #146336;
    --green-darker: #0d3f23;
    --ink: #12241a;
    --paper: #ffffff;
    --bg: #f3f6f2;
    --bg-texture: radial-gradient(circle at 100% 0%, rgba(31,132,73,0.06), transparent 55%);
    --text: #1a1f1c;
    --text-muted: #667169;
    --border: #e3e8e1;
    --shadow-sm: 0 1px 2px rgba(18,36,26,0.06);
    --shadow-md: 0 4px 10px rgba(18,36,26,0.06), 0 1px 3px rgba(18,36,26,0.08);
    --shadow-lg: 0 16px 40px rgba(18,36,26,0.12), 0 2px 8px rgba(18,36,26,0.06);
    --radius: 16px;
    --accent: #e0672b;
    --accent-bg: #fef1e8;
    --accent-border: #f4c9a8;
    --accent-text: #a8480f;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #182019;
      --bg: #0f1512;
      --bg-texture: radial-gradient(circle at 100% 0%, rgba(31,132,73,0.10), transparent 55%);
      --text: #eaf0e8;
      --text-muted: #9aa79c;
      --border: #263129;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
      --shadow-md: 0 4px 10px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.3);
      --shadow-lg: 0 16px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
      --accent-bg: #2b1d15;
      --accent-border: #52341f;
      --accent-text: #f3925a;
    }
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
    margin: 0;
    background: var(--bg-texture), var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .page {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px 64px;
    flex: 1;
  }
  @media (min-width: 900px) {
    /* Desktop has room to show the full history table (8 columns) without a horizontal
       scrollbar — the scroll container (added for mobile) only kicks in when content
       still doesn't fit at this width. */
    .page { max-width: 1040px; }
  }

  .hero {
    position: relative;
    margin: 0 0 28px;
    padding: 52px 16px 40px;
    overflow: hidden;
    background:
      radial-gradient(circle at 12% 18%, rgba(255,255,255,0.14), transparent 40%),
      radial-gradient(circle at 88% 82%, rgba(255,255,255,0.08), transparent 45%),
      linear-gradient(135deg, var(--green) 0%, var(--green-darker) 100%);
    color: #fff;
    text-align: center;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(rgba(255,255,255,0.16) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    background-position: 0 0;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 90%);
  }
  .hero-inner { position: relative; max-width: 720px; margin: 0 auto; }
  .hero h1 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    margin: 0 0 8px;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.15);
  }
  .hero h1 .brand-link { color: inherit; text-decoration: none; }
  .hero h1 .brand-link:hover { opacity: 0.9; }
  .hero h1 .logo-badge {
    display: inline-block;
    width: 84px;
    height: 84px;
    vertical-align: -24px;
    margin-right: 8px;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.25);
    animation: badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero h1 .logo-badge { animation: none; }
  }
  .hero p.tagline {
    margin: 0 0 18px;
    color: rgba(255,255,255,0.92);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;
  }
  p.subtitle { color: var(--text-muted); margin: 0 0 22px; text-align: center; font-size: 1rem; line-height: 1.5; }
  .seo-blurb { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
  .seo-blurb h2 { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: var(--text); }
  .seo-blurb p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.6; margin: 0; }
  #status {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 22px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
  }
  #status:not(:empty)::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
  }

  .tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
  }
  .tab-btn {
    flex: 1;
    background: none;
    color: var(--text-muted);
    padding: 12px 12px;
    border-radius: 8px;
    font-size: 0.98rem;
    font-weight: 600;
  }
  .tab-btn:hover { background: color-mix(in srgb, var(--green) 8%, transparent); }
  .tab-btn.active { background: var(--green); color: #fff; }
  .tab-btn.active:hover { background: var(--green-dark); }
  .tab-panel[hidden] { display: none; }

  form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    background: var(--paper);
    padding: 8px;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
  }
  input {
    /* Full-width (was 1 1 160px, side-by-side once two fields fit) - Nom and Prénom now stack
       one per row instead of squeezing into narrow columns, easier to read and tap. Doesn't
       touch .filter-box input below (club/région, its own separate rule), which is fine
       staying side-by-side since those are optional/secondary fields. */
    flex: 1 1 100%;
    padding: 14px 18px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 1.08rem;
    color: var(--text);
    transition: background-color 0.15s ease;
  }
  input::placeholder { color: var(--text-muted); }
  input:hover { background: color-mix(in srgb, var(--green) 5%, transparent); }
  input:focus {
    outline: none;
    background: color-mix(in srgb, var(--green) 7%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--green);
  }
  button {
    padding: 13px 24px;
    border: none;
    border-radius: 9px;
    background: var(--green);
    color: white;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
  }
  button:hover { background: var(--green-dark); }
  button:active { transform: scale(0.97); }
  /* The actual "Chercher" submit buttons specifically (not every button sitewide - a badge
     button or the share-card button shouldn't inherit this) - full-width and unmistakably the
     one thing to press after typing a name. */
  form button[type="submit"] {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    margin-top: 2px;
  }

  .filter-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 4px;
    cursor: pointer;
    margin-bottom: 6px;
  }
  .filter-toggle:hover { color: var(--green); }
  .filter-box {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    animation: rise 0.2s ease both;
  }
  /* Same specificity as the browser's default [hidden]{display:none}, and author styles
     win ties over the UA stylesheet — without this, .filter-box's own display:flex always
     overrides the hidden attribute and the box never actually hides. */
  .filter-box[hidden] { display: none; }
  .filter-box input {
    flex: 1 1 160px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    background: var(--paper);
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
  }
  .filter-box input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--green); }

  #results { display: flex; flex-direction: column; gap: 12px; }
  .card {
    position: relative;
    background: var(--paper);
    border-radius: var(--radius);
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    border-left: 4px solid transparent;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    animation: rise 0.25s ease both;
  }
  .card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .card.suspect { border-left-color: var(--accent); }
  @keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .card { animation: none; }
  }

  .card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  /* Only Favoris-tab cards render .fav-remove, pinned to the card's own top-right corner -
     this reserves room so it doesn't sit on top of the index/star there. */
  #favoritesList .card-header { padding-right: 34px; }
  .card-actions { display: flex; align-items: baseline; gap: 8px; }
  .name { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
  .index { position: relative; font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--green); }
  .fav-star {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    /* Padding (was 0) grows the tap target well past the visible star glyph, without making
       the star itself look bigger - easier to hit precisely for anyone less sure-fingered. */
    padding: 6px;
    margin: -6px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.7;
    transition: color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
  }
  .fav-star:hover { opacity: 1; transform: scale(1.1); }
  .fav-star.active { color: #e0a92b; opacity: 1; }
  /* Favoris tab only (see showRemove in renderPlayerCard) - an explicit, unambiguous way to
     remove a favorite, since toggling a filled star back off wasn't intuitive enough on its
     own for everyone. Pinned to the card's own top-right corner (not inline with the index),
     with a visible background circle so it reads as its own distinct action, not just another
     icon lost in the row next to the star. */
  .fav-remove {
    appearance: none;
    -webkit-appearance: none;
    /* padding:0 - without it, the base `button{padding:13px 24px}` rule (this IS a <button>)
       cascades straight through, since nothing here overrode it; 48px of padding alone blew
       right past the intended 30px width. */
    padding: 0;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  }
  .fav-remove:hover { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-bg); }
  /* Icon + text label (was icon-only - a trophy glyph alone wasn't a clear enough "tap here
     to see badges/trophies" affordance, especially for less tech-savvy users). */
  .card-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 12px 6px 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .card-btn svg { flex: none; }
  .card-btn:hover { background: color-mix(in srgb, var(--green) 8%, transparent); border-color: var(--green); color: var(--green); }
  /* The button is absolutely positioned over the "Historique" line, NOT a flex sibling of
     <details> - an earlier flex:1/flex:none version constrained the whole <details> box
     (summary AND the table below it) to share width with the button, permanently shrinking
     the table even once expanded. Absolute positioning takes the button out of layout flow
     entirely, so <details> (and the table inside it) always gets the card's full width. */
  .history-header-row { position: relative; margin-top: 10px; }
  .history-header-row summary { padding-right: 150px; }
  .history-header-row .card-btn { position: absolute; top: -3px; right: 0; }

  .section-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 4px 0 10px;
  }
  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
  /* .chip-wrap is the actual pill (border/background/radius) - .chip and .chip-remove are two
     borderless segments inside it, siblings rather than nested buttons (invalid HTML, and
     nested buttons misbehave on click). */
  .chip-wrap {
    display: inline-flex; align-items: stretch;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: border-color 0.15s ease;
    overflow: hidden;
  }
  .chip-wrap:hover { border-color: var(--green); }
  .chip {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 7px 6px 7px 14px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .chip:hover { background: color-mix(in srgb, var(--green) 8%, transparent); }
  .chip-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-family: inherit;
    padding: 7px 12px 7px 5px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .chip-remove:hover { background: color-mix(in srgb, var(--green) 8%, transparent); color: var(--green); }
  .meta { color: var(--text-muted); font-size: 0.88rem; margin-top: 4px; }
  .info-tip {
    appearance: none;
    -webkit-appearance: none;
    display: inline;
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: inherit;
    vertical-align: super;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    color: var(--text-muted);
    cursor: help;
    opacity: 0.8;
    -webkit-tap-highlight-color: transparent;
  }
  .info-tip:hover, .info-tip:focus-visible { opacity: 1; }
  .info-tip-bubble {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    margin-top: 6px;
    width: 240px;
    padding: 10px 12px;
    background: var(--paper);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    font-size: 0.8rem;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
    text-align: left;
    animation: rise 0.15s ease both;
  }
  .sparkline { margin-top: 8px; line-height: 0; opacity: 0.9; }

  details { margin-top: 10px; }
  /* Avoid doubling up with .history-header-row's own margin-top now that details lives inside it. */
  .history-header-row details { margin-top: 0; }
  summary { cursor: pointer; color: var(--green); font-size: 0.88rem; font-weight: 600; }
  summary:hover { color: var(--green-dark); }
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--green) var(--border);
  }
  .table-scroll::-webkit-scrollbar { height: 7px; }
  .table-scroll::-webkit-scrollbar-track { background: var(--border); border-radius: 4px; }
  .table-scroll::-webkit-scrollbar-thumb { background: var(--green); border-radius: 4px; }
  .table-scroll { margin-top: 4px; }
  /* Passive scroll-progress indicator, not a real scroll surface -- see wireTableScrollSync(). */
  .table-scroll-top { margin-top: 10px; }
  .table-scroll-top-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
  .table-scroll-top-thumb { height: 100%; width: 30%; background: var(--green); border-radius: 3px; }
  table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.85rem; }
  td, th { text-align: left; padding: 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
  /* Competition-name cell (player history) / player-name cell (competition classement) -
     both let you jump to the other side (see jumpToCompetition / jumpToPlayer). */
  .cell-link { cursor: pointer; color: var(--green); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.15s ease; }
  .cell-link:hover { text-decoration-color: var(--green); }
  @media (min-width: 900px) {
    /* text-overflow:ellipsis on a td is unreliable with the default table-layout:auto --
       the browser sizes columns from the unwrapped content width first, so the column just
       grows instead of truncating. table-layout:fixed with explicit column widths makes the
       widths (and therefore the truncation) actually deterministic, guaranteeing the whole
       table fits its container with no horizontal scroll. */
    .table-scroll table { table-layout: fixed; width: 100%; min-width: 0; }
    .table-scroll th:nth-child(1), .table-scroll td:nth-child(1) { width: 36px; }
    .table-scroll th:nth-child(2), .table-scroll td:nth-child(2) { width: 84px; }
    .table-scroll th:nth-child(3), .table-scroll td:nth-child(3) { width: 220px; }
    .table-scroll th:nth-child(4), .table-scroll td:nth-child(4) { width: 130px; }
    .table-scroll th:nth-child(5), .table-scroll td:nth-child(5) { width: 55px; }
    .table-scroll th:nth-child(6), .table-scroll td:nth-child(6) { width: 45px; }
    .table-scroll th:nth-child(7), .table-scroll td:nth-child(7) { width: 60px; }
    .table-scroll th:nth-child(8), .table-scroll td:nth-child(8) { width: 160px; }
    .table-scroll td:nth-child(3), .table-scroll th:nth-child(3),
    .table-scroll td:nth-child(4), .table-scroll th:nth-child(4),
    .table-scroll td:nth-child(8), .table-scroll th:nth-child(8) {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* The scorecard table is nested inside the history table's expanded row, so the
       descendant selectors above (not scoped to direct children) were also matching its
       18 hole columns and mangling them. Reset it back to its own natural sizing. */
    .table-scroll table.scorecard { table-layout: auto; width: 100%; min-width: 560px; }
    .table-scroll table.scorecard td, .table-scroll table.scorecard th {
      width: auto; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap;
    }
  }
  #empty {
    color: var(--text-muted);
    text-align: center;
    padding: 48px 20px;
    font-size: 0.95rem;
    background: var(--paper);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
  }
  #empty .empty-icon { font-size: 2.2rem; display: block; margin-bottom: 10px; opacity: 0.7; }

  .loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  .spinner {
    width: 18px; height: 18px;
    border: 2.5px solid color-mix(in srgb, var(--green) 25%, transparent);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .sandbag-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--accent-bg);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 8px;
    cursor: default;
    animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .sandbag-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
    animation: badge-ping 2.4s ease-out 0.4s infinite;
  }
  @keyframes badge-pop {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes badge-ping {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    75%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sandbag-badge, .sandbag-badge::after { animation: none; }
  }
  .sandbag-detail {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--accent-bg);
    border: 1px dashed var(--accent-border);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--accent-text);
    line-height: 1.5;
  }
  .sandbag-detail b { color: var(--accent-text); }

  .load-more-wrap { display: flex; justify-content: center; margin-top: 6px; }
  .load-more-wrap button {
    background: var(--paper);
    color: var(--green);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-size: 0.88rem;
    padding: 10px 20px;
  }
  .load-more-wrap button:hover:not(:disabled) { background: color-mix(in srgb, var(--green) 8%, transparent); }
  .load-more-wrap button:disabled { opacity: 0.6; cursor: default; }

  tr.podium-1 td { background: color-mix(in srgb, #FACD00 16%, transparent); font-weight: 700; }
  tr.podium-2 td { background: color-mix(in srgb, #A0A3A4 20%, transparent); }
  tr.podium-3 td { background: color-mix(in srgb, #cd7f32 16%, transparent); }

  .comp-toggle { display: flex; gap: 6px; margin: 10px 0 4px; }
  .comp-toggle-btn {
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 20px;
    background: color-mix(in srgb, var(--border) 60%, transparent);
    color: var(--text-muted);
  }
  .comp-toggle-btn:hover:not(.active) { background: color-mix(in srgb, var(--green) 15%, transparent); }
  .comp-toggle-btn.active { background: var(--green); color: #fff; }

  .expand-btn {
    width: 24px; height: 24px; line-height: 22px; padding: 0;
    border-radius: 7px; background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .expand-btn:hover { background: color-mix(in srgb, var(--green) 20%, transparent); }
  .expand-btn[disabled] { visibility: hidden; }
  .scorecard-row td { padding: 12px 6px 18px; border-bottom: 1px solid var(--border); }
  .scorecard-box { background: color-mix(in srgb, var(--border) 40%, var(--paper)); border-radius: 12px; padding: 14px 16px; }
  .scorecard-box .sc-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; }
  .scorecard-box .sc-ranks { display: flex; gap: 18px; font-size: 0.8rem; margin-bottom: 10px; color: var(--text-muted); }
  .scorecard-box .sc-ranks b { color: var(--text); font-size: 0.98rem; }
  .scorecard-box .sc-ranks .sc-serie { font-size: 0.76rem; font-weight: 400; }
  table.scorecard { width: 100%; min-width: 560px; margin-top: 4px; }
  table.scorecard th, table.scorecard td { text-align: center; padding: 3px 2px; border-bottom: none; }
  table.scorecard .row-label { text-align: left; font-weight: 700; color: var(--text-muted); }
  .sc-scroll { overflow-x: auto; }
  .out-gap { width: 10px; }
  .badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 4px; font-weight: 600; font-size: 0.8rem; box-sizing: border-box;
  }
  .badge.par { background: #FFFFFF; border: 1px solid rgba(0,51,97,0.3); color: #003361; border-radius: 3px; }
  .badge.birdie { background: rgba(210,6,19,0.8); color: #fff; border-radius: 30px; }
  .badge.eagle, .badge.albatros { background: #FACD00; color: #fff; border-radius: 30px; }
  .badge.bogey { background: #0094D6; color: #fff; border-radius: 3px; }
  .badge.double-bogey { background: #003361; color: #fff; border-radius: 3px; }
  .badge.triple-bogey { background: #A0A3A4; color: #fff; border-radius: 3px; }
  .sc-error { color: #d1483a; font-size: 0.85rem; }
  .sc-partner { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); }
  .sc-partner .sc-meta { font-weight: 700; color: var(--green); }
  .sc-round + .sc-round { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

  footer {
    margin-top: auto;
    padding: 32px 16px 28px;
    background: linear-gradient(180deg, var(--green-darker) 0%, #081a10 100%);
    color: rgba(255,255,255,0.75);
    text-align: center;
    font-size: 0.85rem;
  }
  footer .footer-inner { max-width: 720px; margin: 0 auto; }
  footer .footer-brand {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 6px;
  }
  footer .footer-links { margin: 14px 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  footer .social-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  footer .social-link:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.36);
    transform: translateY(-1px);
  }
  footer .social-link svg { flex-shrink: 0; }
  footer .footer-copy { margin-top: 14px; color: rgba(255,255,255,0.5); font-size: 0.78rem; }
  footer .footer-copy a { color: rgba(255,255,255,0.7); }
  footer .footer-copy a:hover { color: #fff; }

  #cookieBanner {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    max-width: 520px;
    margin: 0 auto;
    background: var(--paper);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 16px 18px;
    z-index: 1000;
    animation: rise 0.25s ease both;
  }
  #cookieBanner p { margin: 0 0 12px; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); }
  #cookieBanner .cookie-actions { display: flex; gap: 8px; justify-content: flex-end; }
  #cookieBanner button {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
  #cookieBanner #cookieDecline {
    background: none;
    color: var(--text-muted);
    border: 1px solid var(--border);
  }
  #cookieBanner #cookieDecline:hover { background: color-mix(in srgb, var(--border) 40%, transparent); }

  /* --- Carte joueur (trophées + badges) ---
     Deliberately a single dark "display case" world regardless of the site's own light/dark
     toggle, same reasoning as a Steam inventory screen never going white. */
  .card-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(4,10,7,0.78);
    backdrop-filter: blur(3px);
    animation: rise 0.15s ease both;
  }
  .card-modal[hidden] { display: none; }
  .card-modal-inner {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    max-width: 100%; margin: 0 auto;
    /* Capped to the viewport (minus this modal's own top/bottom padding) and scrollable on
       its own, rather than letting .card-modal scroll around a centered child taller than the
       screen - that silently clipped the top and/or bottom on short viewports (phone or a
       short desktop browser window) since centering a bigger-than-container flex child doesn't
       guarantee either end stays reachable. Capping the height here instead means this block
       never exceeds the screen, and gets its own visible scrollbar when its content (card +
       goal box + share button) doesn't fit - always fully reachable, on any screen size. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 2px 6px 2px 2px; /* right padding keeps the scrollbar from touching card edges */
  }
  .card-modal-inner::-webkit-scrollbar { width: 6px; }
  .card-modal-inner::-webkit-scrollbar-track { background: transparent; }
  .card-modal-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
  .card-modal-inner::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
  .card-modal-close {
    position: fixed;
    top: 18px; right: 20px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: #eef5ee;
    font-size: 1rem;
    cursor: pointer;
  }
  .card-modal-close:hover { background: rgba(255,255,255,0.16); }
  .card-modal-actions button {
    background: var(--green);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  }
  .card-modal-actions button:hover { background: var(--green-dark); }
  .card-modal-actions button:disabled { opacity: 0.6; cursor: default; }

  .card-goal {
    width: 300px;
    max-width: 100%;
    text-align: center;
    font-size: 0.82rem;
    color: rgba(238,245,238,0.75);
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 10px 16px;
    line-height: 1.5;
  }
  .card-goal b { color: #f6c945; }
  .card-goal span { display: block; font-size: 0.76rem; color: rgba(238,245,238,0.55); margin-top: 2px; }
  .card-goal-done { color: #f6c945; font-weight: 600; }

  .trading-card {
    position: relative;
    width: 300px;
    border-radius: 18px;
    padding: 3px;
    background: linear-gradient(155deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.3));
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.04) inset;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  .trading-card.legendary {
    background: linear-gradient(155deg, rgba(246,201,69,0.55), rgba(246,201,69,0.08) 40%, rgba(0,0,0,0.3));
  }
  .tc-face {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background:
      radial-gradient(circle at 18% -10%, rgba(255,255,255,0.10), transparent 46%),
      linear-gradient(165deg, #146336 0%, #0a2b19 46%, #061109 100%);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 20px 20px 18px;
  }
  .tc-face::after {
    content: '';
    position: absolute;
    inset: -40% -20%;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.10) 49%, rgba(255,255,255,0.02) 55%, transparent 62%);
    pointer-events: none;
  }
  .trading-card.legendary .tc-face::after {
    background: linear-gradient(115deg, transparent 30%, rgba(246,201,69,0.16) 46%, rgba(255,255,255,0.14) 52%, rgba(246,201,69,0.10) 58%, transparent 68%);
  }
  .tc-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .tc-brand { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(238,245,238,0.55); }
  .tc-edition {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: #f6c945;
    background: rgba(246,201,69,0.12); border: 1px solid rgba(246,201,69,0.35);
    border-radius: 20px; padding: 3px 9px;
  }
  .tc-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .tc-monogram {
    flex: none; width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 800; color: #0a2b19;
    background: linear-gradient(155deg, #eafff0, #f6c945 130%);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.12), 0 6px 16px rgba(0,0,0,0.35);
  }
  .tc-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: #eef5ee; }
  .tc-club { font-size: 0.78rem; color: #93a89b; margin-top: 3px; }
  .tc-index-block {
    display: flex; align-items: baseline; justify-content: space-between;
    background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
  }
  .tc-index-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #93a89b; }
  .tc-index-value { font-size: 2rem; font-weight: 800; color: #b9f2c8; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .tc-index-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .tc-trend { font-size: 0.78rem; font-weight: 700; color: #f6c945; }
  .tc-best-index { font-size: 0.7rem; font-weight: 600; color: #93a89b; font-variant-numeric: tabular-nums; }
  .tc-badges-label {
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #93a89b; margin: 14px 0 9px;
    display: flex; align-items: baseline; gap: 6px;
  }
  .tc-badges-label:first-of-type { margin-top: 0; }
  .tc-count { font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(238,245,238,0.4); font-size: 0.62rem; }

  .tc-trophies { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
  .tc-trophy {
    display: flex; align-items: baseline; gap: 10px; width: 100%;
    padding: 8px 12px; border-radius: 10px;
    background: var(--tier-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--tier-border, rgba(255,255,255,0.12));
    font-family: inherit; cursor: pointer; text-align: left;
    transition: transform 0.1s ease, background-color 0.15s ease;
  }
  .tc-trophy:hover { transform: translateX(2px); background: color-mix(in srgb, var(--tier-bg, rgba(255,255,255,0.03)) 60%, rgba(255,255,255,0.08)); }
  .tc-trophy:disabled { cursor: default; opacity: 0.7; }
  .tc-trophy-icon { font-size: 1.1rem; flex: none; }
  .tc-trophy-name {
    flex: 1; font-size: 0.82rem; font-weight: 700; color: #eef5ee;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tc-trophy-date { flex: none; font-size: 0.68rem; color: #93a89b; }
  .tc-trophy.tier-gold { --tier-bg: rgba(246,201,69,0.14); --tier-border: rgba(246,201,69,0.5); }
  .tc-trophy.tier-silver { --tier-bg: rgba(207,214,210,0.12); --tier-border: rgba(207,214,210,0.4); }
  .tc-trophy.tier-bronze { --tier-bg: rgba(205,138,79,0.14); --tier-border: rgba(205,138,79,0.4); }

  .tc-more-btn {
    display: block; width: 100%; margin-top: 8px;
    background: none; border: 1px dashed rgba(255,255,255,0.2);
    color: rgba(238,245,238,0.65); font-size: 0.76rem; font-weight: 600;
    padding: 7px; border-radius: 8px; cursor: pointer;
  }
  .tc-more-btn:hover { background: rgba(255,255,255,0.05); color: #eef5ee; }

  tr.highlight-me td { background: color-mix(in srgb, var(--green) 14%, transparent) !important; }

  /* Horizontal scroll strip, not a wrapping/stretching row: badge count is now uncapped (see
     computeBadgeState), and a fixed per-badge size keeps every badge the same size regardless
     of how many are unlocked or how long its label is - a stretchy flex:1 row would otherwise
     resize (and re-wrap) every badge each time the count changes. */
  .tc-badges {
    display: flex; gap: 10px; margin-bottom: 4px;
    overflow-x: auto; padding-bottom: 6px;
  }
  .tc-badges::-webkit-scrollbar { height: 6px; }
  .tc-badges::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
  .tc-badges::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
  .tc-badges::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
  .tc-badge {
    position: relative; flex: 0 0 74px; width: 74px; height: 74px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 8px 4px; border-radius: 10px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--tier-border, rgba(255,255,255,0.12));
    font-family: inherit; cursor: pointer;
    transition: transform 0.1s ease, background-color 0.15s ease;
  }
  .tc-badge:hover { transform: translateY(-1px); background: rgba(255,255,255,0.07); }
  .tc-badge-icon {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; background: var(--tier-fill, rgba(255,255,255,0.06));
    box-shadow: 0 0 0 1px var(--tier-border, transparent) inset;
  }
  .tc-badge-label {
    font-size: 0.58rem; font-weight: 700; text-align: center; line-height: 1.15;
    color: rgba(238,245,238,0.85);
    /* .tc-badge is itself a <button>, and the global `button` rule sets white-space:nowrap -
       an inheritable property, so without overriding it here it silently disables wrapping on
       this label too, no matter what width/overflow rules are set below.
       Flex items also default to min-width:auto, which lets long text overflow the box instead
       of wrapping within it - width:100% + min-width:0 forces wrapping at the badge's width.
       (Not using -webkit-line-clamp: it requires display:-webkit-box, which browsers
       "blockify" into a plain block box when the element is itself a flex item - inside
       .tc-badge that silently drops back to one unclamped line. Plain max-height +
       overflow:hidden clips at 2 lines without needing that display mode.) */
    white-space: normal;
    width: 100%; min-width: 0;
    overflow: hidden; max-height: 2.3em; word-break: break-word;
  }
  .tc-badge.tier-bronze { --tier-border: rgba(205,138,79,0.55); --tier-fill: rgba(205,138,79,0.18); }
  .tc-badge.tier-silver { --tier-border: rgba(207,214,210,0.55); --tier-fill: rgba(207,214,210,0.16); }
  .tc-badge.tier-gold   { --tier-border: rgba(246,201,69,0.65);  --tier-fill: rgba(246,201,69,0.20); }
  .tc-badge.tier-gold .tc-badge-icon { box-shadow: 0 0 0 1px var(--tier-border) inset, 0 0 14px rgba(246,201,69,0.35); }
  .tc-footer {
    margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.08);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.66rem; color: rgba(238,245,238,0.4); letter-spacing: 0.02em;
  }