/* ============================================================================
   THEME SKULL KING — repris tel quel de la version JC pour preserver le
   graphisme : couleurs, textures, ornements, animations.
   Les composants nouveaux sont dans app.css et reutilisent ces variables.
   ============================================================================ */
/* Le thème par défaut. Les autres (css/themes.css) redéfinissent les mêmes
   variables sous [data-theme="…"] ; le sélecteur d'attribut sert aussi aux
   vignettes de l'écran Paramètres, chacune habillée de son propre thème. */
:root, [data-theme="tempete"] {
    /* Palette « Tempête » — la colorimétrie du film d'intro (voir _da.html) :
       sol bleu-noir, gris de mer, or ramené vers l'ambre du cuir. */
    --ink: #e9e7e3;
    --ink-dim: #bcc0c6;
    --ink-faded: #7d848f;
    --bg-deep: #0b0d12;
    --bg-mid: #11151c;
    --bg-card: #171b24;
    --bg-card-hi: #212734;
    --gold: #b8763f;
    --gold-bright: #e39b5c;
    --gold-glow: #ff8c1f;
    --ember: #c25a2a;
    --blood: #8e2f1c;
    --blood-bright: #c8341c;
    --parchment: #c4a677;
    --border: #39404f;
    --border-gold: rgba(227, 155, 92, 0.45);

    /* Les boutons n'ont aucun filet : c'est la surface qui porte la forme.
       Un remplissage plus clair que le sol, un reflet d'un pixel sur l'arete
       haute, une ombre portee. --btn-sel signale la selection par le meme
       moyen, en ambre, plutot que par un contour. */
    --btn-face: linear-gradient(180deg, #262d3a 0%, #1a1f29 100%);
    --btn-lift: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(233, 231, 227, 0.07);
    --btn-sel: linear-gradient(180deg, #5c3a24 0%, #3d2617 100%);
    --btn-sel-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 16px rgba(194, 90, 42, 0.28), inset 0 1px 0 rgba(255, 200, 150, 0.18);
    --btn-danger-face: linear-gradient(180deg, #6d2617 0%, #4a190e 100%);
    /* Le pari est une intention, les plis un résultat : deux gestes différents,
       deux couleurs. L'ambre pour l'annonce, le rouge sang pour ce qui a
       réellement été pris. */
    /* Teintes assez marquées pour se distinguer d'un coup d'œil sur un bouton
       de 20 px : au-dessous, les deux lignes se confondaient. Le rouge tire
       vers le grenat pour ne pas se fondre dans l'ambre voisin. */
    --btn-face-pari: linear-gradient(180deg, #4a3520 0%, #322414 100%);
    --btn-face-plis: linear-gradient(180deg, #52211f 0%, #371413 100%);
    --ink-pari: #e0bd93;
    --ink-plis: #f0b2a8;
    --ink-plis-titre: #f08c7c;
    /* Pilule pour tout ce qui tient sur une ligne, coin adouci pour les blocs
       multilignes ou une demi-hauteur de rayon deformerait le texte. */
    --r-pill: 999px;
    --r-card: 14px;
    --r-panel: 18px;

    /* Typographie. Pirata One reste la signature : titres et grands chiffres.
       Tout le reste — libelles de boutons, etiquettes, textes d'explication —
       passe a Schibsted Grotesk, une grotesque de presse choisie pour ses
       chiffres larges et ses capitales qui tiennent l'espacement.
       Cinzel donnait ses petites capitales gratuitement ; une bataon ne le fait
       pas, d'ou les text-transform: uppercase ajoutes sur les etiquettes. */
    --font-title: 'Pirata One', cursive;
    --font-ui: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --suit-yellow: #f0c540;
    --suit-purple: #a06bc4;
    --suit-green: #6bb56a;
    --suit-black: #1f1f24;

    /* Habillage : fonds, titre, panneaux, boutons choisis. Chaque thème les
       redéfinit tous, sans quoi une vignette hériterait du thème en cours. */
    --page-bg:
      radial-gradient(ellipse at top, rgba(255, 140, 31, 0.12) 0%, transparent 55%),
      radial-gradient(ellipse at bottom, rgba(139, 30, 15, 0.15) 0%, transparent 60%),
      linear-gradient(180deg, #0b0d12 0%, #11151c 50%, #0b0d12 100%);
    --page-glow: radial-gradient(ellipse at 50% 0%, rgba(255, 140, 31, 0.18) 0%, transparent 70%);
    --page-grain: 0.12;
    --page-grain-blend: normal;
    --title-fill: linear-gradient(180deg, #ffd87a 0%, #f5a93a 40%, #c97a1f 70%, #8b3e10 100%);
    --title-shadow: 0 0 1px #fff, 0 1px 0 #6b3410, 0 2px 0 #4a2208, 0 3px 4px rgba(0,0,0,0.8),
      0 0 25px rgba(255, 140, 31, 0.5), 0 0 50px rgba(212, 74, 23, 0.3);
    --title-filter: drop-shadow(0 0 12px rgba(255, 140, 31, 0.4));
    --glow-text: 0 0 12px rgba(255, 140, 31, 0.3), 0 1px 0 rgba(0, 0, 0, 0.6);
    --panel-bg:
      linear-gradient(180deg, rgba(196, 166, 119, 0.04) 0%, transparent 100%),
      linear-gradient(180deg, var(--bg-card) 0%, var(--bg-mid) 100%);
    --panel-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 30px rgba(212, 74, 23, 0.05), inset 0 1px 0 rgba(255, 200, 120, 0.06);
    --panel-line: var(--gold-bright);
    --corner-filter: none;
    --corner-opacity: 0.6;
    --field-bg: var(--bg-deep);
    --field-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    --pill-bg: rgba(227, 155, 92, 0.14);
    --creux: rgba(0, 0, 0, 0.35);               /* petites cases en retrait */
    --erreur-ink: #ffd9cd;                      /* texte d'un champ ou message en défaut */
    --primary-face: linear-gradient(180deg, #e39b5c 0%, #c25a2a 70%, #7c3d1e 100%);
    --primary-ink: #1a0d04;
    --primary-text-shadow: 0 1px 0 rgba(255, 220, 150, 0.4);
    --primary-lift: 0 2px 0 rgba(0,0,0,0.5), 0 0 26px rgba(227, 155, 92, 0.24), inset 0 1px 0 rgba(255, 220, 170, 0.45);
    --sel-pari: linear-gradient(180deg, #ff9433 0%, #e2650c 100%);
    --sel-pari-ink: #26150a;
    --sel-pari-text-shadow: 0 1px 0 rgba(255, 210, 160, 0.45);
    --sel-pari-lift: 0 2px 7px rgba(0,0,0,.5), 0 0 18px rgba(255,140,31,.5), inset 0 1px 0 rgba(255,225,180,.6);
    --sel-plis: linear-gradient(180deg, #e2483a 0%, #a51d16 100%);
    --sel-plis-ink: #fff3ee;
    --sel-plis-text-shadow: 0 1px 0 rgba(70, 8, 4, 0.55);
    --sel-plis-lift: 0 2px 7px rgba(0,0,0,.5), 0 0 18px rgba(226,72,58,.5), inset 0 1px 0 rgba(255,205,195,.5);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  html, body {
    background: var(--bg-deep);
    color: var(--ink);
    font-family: var(--font-ui);
    min-height: 100vh;
    overscroll-behavior: none;
  }

  body {
    background: var(--page-bg);
    background-attachment: fixed;
    padding: 16px;
    padding-bottom: 160px;
  }

  /* Texture parchemin/cuir vieilli */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--page-grain);
    mix-blend-mode: var(--page-grain-blend);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  }

  /* Lueur ambiante de braise en haut */
  body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 200px;
    pointer-events: none;
    z-index: 0;
    background: var(--page-glow);
  }

  .app {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
  }

  h1, h2, h3 { font-family: var(--font-title); font-weight: normal; letter-spacing: 0.02em; }

  .header {
    text-align: center;
    padding: 20px 0 24px;
  }
  .header h1 {
    font-size: 52px;
    color: var(--gold-bright);
    text-shadow: var(--title-shadow);
    letter-spacing: 0.05em;
    line-height: 0.9;
    background: var(--title-fill);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: var(--title-filter);
  }
  .header .subtitle {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin-top: 8px;
  }

  .panel {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
    padding: 20px 18px;
    margin-bottom: 14px;
    box-shadow: var(--panel-shadow);
    position: relative;
  }
  /* Lueur dorée sur le bord supérieur */
  .panel::before {
    content: '';
    position: absolute;
    top: -1px; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--panel-line), transparent);
    opacity: 0.7;
  }
  /* Coins ornés. Le panneau étant désormais arrondi, l'équerre d'origine
     dépasserait de la courbe : chaque ornement est redessiné en double arc,
     concentrique au rayon du panneau. */
  .panel::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 30px; height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23b8763f' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M1 29 L1 16 A15 15 0 0 1 16 1 L29 1'/%3E%3Cpath d='M6 29 L6 18 A12 12 0 0 1 18 6 L29 6' stroke-opacity='0.5'/%3E%3Ccircle cx='9.5' cy='9.5' r='1' fill='%23e39b5c' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: var(--corner-opacity);
    filter: var(--corner-filter);
  }
  .panel-corners-tr, .panel-corners-bl, .panel-corners-br {
    position: absolute;
    width: 30px; height: 30px;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: var(--corner-opacity);
    filter: var(--corner-filter);
  }
  .panel-corners-tr { top: 3px; right: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23b8763f' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M29 29 L29 16 A15 15 0 0 0 14 1 L1 1'/%3E%3Cpath d='M24 29 L24 18 A12 12 0 0 0 12 6 L1 6' stroke-opacity='0.5'/%3E%3Ccircle cx='20.5' cy='9.5' r='1' fill='%23e39b5c' stroke='none'/%3E%3C/svg%3E"); }
  .panel-corners-bl { bottom: 3px; left: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23b8763f' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M1 1 L1 14 A15 15 0 0 0 16 29 L29 29'/%3E%3Cpath d='M6 1 L6 12 A12 12 0 0 0 18 24 L29 24' stroke-opacity='0.5'/%3E%3Ccircle cx='9.5' cy='20.5' r='1' fill='%23e39b5c' stroke='none'/%3E%3C/svg%3E"); }
  .panel-corners-br { bottom: 3px; right: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23b8763f' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M29 1 L29 14 A15 15 0 0 1 14 29 L1 29'/%3E%3Cpath d='M24 1 L24 12 A12 12 0 0 1 12 24 L1 24' stroke-opacity='0.5'/%3E%3Ccircle cx='20.5' cy='20.5' r='1' fill='%23e39b5c' stroke='none'/%3E%3C/svg%3E"); }
  /* Pictogrammes : un seul trait, la couleur du texte qui les porte. */
  .ico {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
  }

  /* Le pictogramme d'un titre suit la ligne de base des capitales, pas la
     hauteur totale de la Pirata One, qui est très ascendante. */
  .panel-title .ico { width: 0.72em; height: 0.72em; stroke-width: 1.9; }
  /* Un panneau à choix ouvre sa liste juste sous l'en-tête. */
  .panel-head + [id$="-list"] > * { margin-top: 14px; }
  .btn .ico { width: 1.15em; height: 1.15em; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
  .section-tag-row .icon .ico { width: 14px; height: 14px; }
  /* Les boutons ronds n'ont pas de texte : le tracé occupe la moitié du cercle. */
  .footer-fab .ico, .icon-btn .ico, .bonus-fab .ico, .kraken-fab .ico { width: 50%; height: 50%; opacity: 1; }
  .choice-btn .ico { width: 58%; height: 58%; opacity: 1; stroke-width: 1.5; }
  .validation-bar .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
  .rank-title .ico, .crown .ico { width: 0.8em; height: 0.8em; }
  .crown { display: flex; justify-content: center; color: var(--gold-bright); }
  .crown .ico { width: 44px; height: 44px; }
  /* Deux tracés accolés : « celui-ci capture celui-là ». */
  .ico-pair { display: inline-flex; align-items: center; gap: 2px; }
  .ico-pair .ico { width: 19px; height: 19px; }
  .bonus-icon .ico { width: 21px; height: 21px; }
  .hr-edit .ico { width: 13px; height: 13px; vertical-align: -1px; }

  .panel-title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-title);
    font-size: 26px;
    color: var(--gold-bright);
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    text-shadow: var(--glow-text);
  }

  button {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
  }
  button:active { transform: scale(0.95); }

  .btn {
    padding: 15px 22px;
    border-radius: var(--r-pill);
    background: var(--btn-face);
    color: var(--ink);
    border: none;
    box-shadow: var(--btn-lift);
  }
  .btn-primary {
    background: var(--primary-face);
    color: var(--primary-ink);
    border: none;
    text-shadow: var(--primary-text-shadow);
    box-shadow: var(--primary-lift);
  }
  .btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
  .btn-ghost {
    background: var(--btn-face);
    color: var(--ink-dim);
    border: none;
    box-shadow: var(--btn-lift);
  }
  .btn-block { display: flex; width: 100%; }

  input[type="text"] {
    background: var(--field-bg);
    border: none;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 18px;
    padding: 13px 18px;
    border-radius: var(--r-pill);
    width: 100%;
    box-shadow: var(--field-shadow);
  }
  input[type="text"]:focus {
    outline: none;
    box-shadow: var(--field-shadow), 0 0 0 2px var(--gold);
  }

  .stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* Bouton chiffre cliquable */
  .value-tap {
    background: transparent;
    border: none;
    color: var(--gold-bright);
    font-family: var(--font-title);
    font-size: 32px;
    line-height: 1;
    padding: 6px 16px;
    min-width: 50px;
    cursor: pointer;
    text-shadow: 0 0 10px rgba(255, 140, 31, 0.5);
    border-radius: var(--r-pill);
    transition: background 0.15s;
  }
  .value-tap:active { background: rgba(227, 155, 92, 0.16); }
  .value-tap-lg {
    font-size: 40px;
    padding: 8px 20px;
  }

  /* Pavé numérique en popup */
  .numpad-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .numpad-overlay.show { opacity: 1; }
  .numpad-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
  }
  .numpad-popup {
    position: relative;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-mid) 100%);
    border: 1.5px solid var(--gold);
    border-radius: 16px;
    padding: 22px 20px;
    width: calc(100vw - 40px);
    max-width: 380px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.7), 0 0 40px rgba(255, 140, 31, 0.25);
  }
  .numpad-title {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-align: center;
    margin-bottom: 16px;
  }
  .numpad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .numpad-btn {
    aspect-ratio: 1;
    background: var(--btn-face);
    border: none;
    color: var(--gold-bright);
    font-family: var(--font-title);
    font-size: 28px;
    border-radius: var(--r-card);
    cursor: pointer;
    box-shadow: var(--btn-lift);
    text-shadow: 0 0 8px rgba(255, 140, 31, 0.4);
    transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
  }
  .numpad-btn:active {
    transform: scale(0.95);
    background: var(--btn-sel);
  }
  .numpad-btn.selected {
    background: var(--btn-sel);
    box-shadow: var(--btn-sel-lift);
  }

  .stepper button {
    width: 36px;
    height: 36px;
    background: var(--btn-face);
    color: var(--gold-bright);
    font-size: 18px;
    font-family: var(--font-ui);
    border-radius: 50%;
    border: none;
    flex-shrink: 0;
    box-shadow: var(--btn-lift);
  }
  .stepper button:disabled { opacity: 0.25; cursor: not-allowed; }
  .stepper .value {
    flex: 1;
    text-align: center;
    font-family: var(--font-title);
    font-size: 22px;
    color: var(--gold-bright);
    min-width: 28px;
    text-shadow: 0 0 8px rgba(255, 140, 31, 0.5);
  }
  .section-tag-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    margin-top: 4px;
  }
  .section-tag-row.centered {
    justify-content: center;
  }
  .stepper-row .stepper {
    margin: 0 auto;
    max-width: 180px;
  }
  .section-tag-row .icon {
    font-size: 14px;
    line-height: 1;
  }
  .section-tag-row .lbl {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.2em;
  }

  .mode-choice { display: grid; gap: 10px; }
  .mode-card {
    background: var(--btn-face);
    border: none;
    box-shadow: var(--btn-lift);
    border-radius: var(--r-card);
    padding: 15px 16px;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
    font-family: var(--font-ui);
  }
  .mode-card.selected {
    background: var(--btn-sel);
    box-shadow: var(--btn-sel-lift);
  }
  .mode-card-title { font-family: var(--font-title); font-size: 22px; color: var(--gold-bright); margin-bottom: 4px; }
  .mode-card-desc { font-size: 13px; color: var(--ink-dim); line-height: 1.4; }

  .toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    gap: 12px;
  }
  .toggle-row:first-child { border-top: none; padding-top: 0; }
  .toggle-label { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
  .toggle-desc { font-size: 12px; color: var(--ink-faded); margin-top: 2px; font-family: var(--font-ui); text-transform: none; letter-spacing: 0; line-height: 1.3; }
  .toggle {
    position: relative;
    width: 56px; height: 30px;
    background: var(--bg-deep);
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  }
  .toggle::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 22px; height: 22px;
    background: var(--ink-faded);
    border-radius: 50%;
    transition: left 0.2s, background 0.2s;
  }
  .toggle.on { background: var(--btn-sel); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 12px rgba(194, 90, 42, 0.25); }
  .toggle.on::after { left: 29px; background: var(--gold-bright); }

  .player-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
  .player-row .num { font-family: var(--font-title); font-size: 24px; color: var(--gold); width: 30px; text-align: center; }

  .scoreboard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scoreboard table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
  .scoreboard th, .scoreboard td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--border); font-size: 14px; white-space: nowrap; }
  .scoreboard th { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; background: var(--bg-deep); }
  .scoreboard td.round { color: var(--ink-faded); font-size: 13px; }
  .scoreboard td.score { color: var(--ink); font-weight: 700; }
  .scoreboard td.score.positive { color: var(--gold-bright); }
  .scoreboard td.score.negative { color: var(--blood-bright); }
  .scoreboard tr.totals td {
    background: rgba(212,169,66,0.08);
    color: var(--gold-bright);
    font-family: var(--font-title);
    font-size: 20px;
    border-top: 2px solid var(--gold);
    border-bottom: none;
    padding: 14px 8px;
  }

  /* Liste des joueurs (scoreboard) */
  .player-list {
    display: grid;
    gap: 10px;
  }
  .rank-title {
    font-family: var(--font-title);
    font-size: 26px;
    color: var(--gold-bright);
    text-shadow: var(--glow-text);
    margin: 0 4px 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .player-rank {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 12px 4px;
    position: relative;
  }
  .player-rank.leader {
    background: transparent;
    box-shadow: none;
  }
  .player-rank.leader .player-rank-pos {
    background: var(--primary-face);
    color: var(--primary-ink);
    text-shadow: var(--primary-text-shadow);
    box-shadow: var(--primary-lift);
  }
  .player-rank.leader .player-rank-name,
  .player-rank.leader .player-rank-total {
    text-shadow: var(--glow-text);
  }
  /* Séparateur arabesque entre joueurs du classement */
  .player-rank + .player-rank::before {
    content: '';
    display: block;
    height: 18px;
    width: 100%;
    margin: 0 0 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c97a1f' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23f5a93a' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23c97a1f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g2)' stroke-width='0.8' stroke-linecap='round'%3E%3Cpath d='M10 9 Q 50 2, 90 9 T 170 9'/%3E%3Cpath d='M30 9 Q 60 16, 90 9 T 150 9'/%3E%3Ccircle cx='100' cy='9' r='2.2' fill='url(%23g2)' stroke='none'/%3E%3Ccircle cx='100' cy='9' r='3.5'/%3E%3Cpath d='M85 9 L 92 9 M 108 9 L 115 9'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 18px;
    opacity: 0.7;
  }
  .player-rank-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .player-rank-pos {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--btn-face);
    border: 1.5px solid var(--gold);
    color: var(--gold-bright);
    font-family: var(--font-title);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--btn-lift);
  }
  .player-rank.leader .player-rank-pos {
    background: var(--primary-face);
    color: var(--primary-ink);
    text-shadow: var(--primary-text-shadow);
  }
  .player-rank-name {
    flex: 1;
    font-family: var(--font-title);
    font-size: 24px;
    color: var(--gold-bright);
    text-shadow: var(--glow-text);
    line-height: 1;
  }
  .player-rank-total {
    font-family: var(--font-title);
    font-size: 28px;
    line-height: 1;
  }
  .player-rank-total.positive {
    color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(255, 140, 31, 0.5);
  }
  .player-rank-total.negative {
    color: var(--blood-bright);
    text-shadow: 0 0 12px rgba(200, 52, 28, 0.5);
  }
  .player-rank-rounds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .round-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--btn-face);
    border: none;
    box-shadow: var(--btn-lift);
    font-family: var(--font-ui);
    font-size: 11px;
  }
  .round-pill .rp-num {
    color: var(--ink-faded);
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .round-pill .rp-val {
    font-family: var(--font-title);
    font-size: 14px;
  }
  /* Gain et perte reprennent les teintes du pari et des plis. */
  .round-pill.pos { background: var(--btn-face-pari); }
  .round-pill.pos .rp-val { color: var(--gold-bright); }
  .round-pill.neg { background: var(--btn-face-plis); }
  .round-pill.neg .rp-val { color: var(--blood-bright); }
  .round-pill:not(.pos):not(.neg) .rp-val { color: var(--ink-dim); }

  .round-banner {
    text-align: center;
    padding: 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 14px;
    box-shadow: none;
  }
  .round-banner .label { font-family: var(--font-ui); font-size: 10px; font-weight: 600; color: var(--ink-faded); text-transform: uppercase; letter-spacing: 0.3em; }
  .round-banner .value {
    font-family: var(--font-title);
    font-size: 42px;
    color: var(--gold-bright);
    line-height: 1;
    margin-top: 4px;
    text-shadow: var(--glow-text);
  }
  .round-banner .cards { font-size: 13px; color: var(--ink-dim); margin-top: 4px; }

  .player-input-card {
    background: transparent;
    border: none;
    border-radius: 0;
    /* Aucune marge latérale : chaque pixel sert à la grille des onze valeurs. */
    padding: 14px 0;
    margin-bottom: 0;
  }
  /* Séparateur arabesque entre joueurs */
  .player-input-card + .player-input-card {
    border-top: none;
    position: relative;
    margin-top: 8px;
  }
  .player-input-card + .player-input-card::before {
    content: '';
    display: block;
    height: 18px;
    width: 100%;
    margin-bottom: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c97a1f' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23f5a93a' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23c97a1f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='0.8' stroke-linecap='round'%3E%3Cpath d='M10 9 Q 50 2, 90 9 T 170 9'/%3E%3Cpath d='M30 9 Q 60 16, 90 9 T 150 9'/%3E%3Ccircle cx='100' cy='9' r='2.2' fill='url(%23g)' stroke='none'/%3E%3Ccircle cx='100' cy='9' r='3.5'/%3E%3Cpath d='M85 9 L 92 9 M 108 9 L 115 9'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 18px;
    opacity: 0.7;
  }
  .player-input-card .pname {
    font-family: var(--font-title);
    font-size: 28px;
    color: var(--gold-bright);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-shadow: var(--glow-text);
  }
  .player-input-card .pname .runtotal {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
  }
  .stepper-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
    align-items: start;
  }
  .stepper-row > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  .stepper-row > div > .section-tag-row {
    width: 100%;
    justify-content: center;
  }
  .stepper-row .tricks-with-bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .choice-pair {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
  }
  .choice-btn {
    border-radius: 50%;
    background: transparent;
    color: var(--ink-dim);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: all 0.2s ease;
  }
  /* Tailles par défaut : grand pour grapeshot (sélectionné par défaut), petit pour cannonball */
  .choice-btn[data-val="grapeshot"] {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
  .choice-btn[data-val="cannonball"] {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
  /* Si cannonball sélectionné, on inverse les tailles */
  .choice-pair:has(.choice-btn[data-val="cannonball"].selected) .choice-btn[data-val="grapeshot"] {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
  .choice-pair:has(.choice-btn[data-val="cannonball"].selected) .choice-btn[data-val="cannonball"] {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
  /* Cercle uniquement sur le bouton sélectionné, peu importe lequel */
  .choice-btn.selected {
    background: var(--btn-sel);
    box-shadow: var(--btn-sel-lift);
  }
  .choice-btn.selected.danger {
    background: var(--btn-danger-face);
    box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 16px rgba(200, 52, 28, 0.4), inset 0 1px 0 rgba(255, 190, 175, 0.18);
  }

  /* Mode Cannonball : Pari + ✋✊ + Plis sur une ligne */
  .cannonball-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    justify-items: center;
    margin-bottom: 10px;
  }
  .cannonball-row > .cb-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .cannonball-row .section-tag-row {
    justify-content: center;
  }
  .cb-col-center {
    padding-top: 18px;
  }
  .choice-pair-compact {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .choice-pair-compact .choice-btn[data-val="grapeshot"] {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  .choice-pair-compact .choice-btn[data-val="cannonball"] {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  .choice-pair-compact:has(.choice-btn[data-val="cannonball"].selected) .choice-btn[data-val="grapeshot"] {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  .choice-pair-compact:has(.choice-btn[data-val="cannonball"].selected) .choice-btn[data-val="cannonball"] {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  .stepper-compact {
    padding: 2px;
    gap: 2px;
  }
  .stepper-compact button {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .stepper-compact .value {
    font-size: 18px;
    min-width: 20px;
  }

  .bonus-section { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 10px; }

  /* Tricks + bouton bonus à gauche sur la même ligne */
  .tricks-with-bonus {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .tricks-with-bonus .stepper {
    flex: 1;
  }
  .bonus-fab {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--btn-face);
    border: none;
    color: var(--gold-bright);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--btn-lift);
  }
  .bonus-fab:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(0.6);
  }
  .bonus-fab.has-bonus {
    background: var(--btn-sel);
    box-shadow: var(--btn-sel-lift);
  }
  .bonus-fab .bonus-fab-icon {
    line-height: 1;
  }
  .bonus-fab .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold-bright);
    color: var(--bg-deep);
    font-size: 11px;
    font-family: var(--font-ui);
    font-weight: 900;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--bg-deep);
  }
  .bonus-fab .badge[style*="display:none"] { display: none !important; }

  .bonus-toggle-btn {
    width: 100%;
    padding: 11px;
    background: var(--btn-face);
    border: none;
    box-shadow: var(--btn-lift);
    color: var(--ink-dim);
    border-radius: var(--r-pill);
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .bonus-toggle-btn .badge {
    background: var(--gold);
    color: var(--bg-deep);
    border-radius: 10px;
    padding: 1px 8px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 11px;
  }
  .bonus-toggle-btn.has-bonus { color: var(--gold-bright); background: var(--btn-sel); box-shadow: var(--btn-sel-lift); }
  .bonus-list { margin-top: 10px; display: grid; gap: 6px; }
  .bonus-item {
    display: flex;
    align-items: center;
    background: var(--btn-face);
    border: none;
    box-shadow: var(--btn-lift);
    border-radius: var(--r-pill);
    padding: 7px 10px;
    gap: 8px;
  }
  /* Bonus que ce joueur ne peut plus obtenir : relégué en fin de liste par
     `order` (la liste est une grille), sans toucher à l'ordre du catalogue. */
  .bonus-item.epuise {
    order: 1;
    opacity: 0.38;
    filter: grayscale(1);
    box-shadow: none;
  }
  .bonus-icon {
    font-size: 22px;
    width: 44px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
  }
  .bonus-icon-stack {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
  }
  .bonus-icon-num {
    font-family: var(--font-title);
    font-size: 18px;
    color: var(--ink);
  }
  /* Le pictogramme seul ne dit pas de quelle carte il s'agit : le nom suit,
     puis les points. Un nom long passe sur deux lignes plutôt que d'être coupé. */
  .bonus-name {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.25;
    color: var(--ink-dim);
  }
  .bonus-pts {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 3px;
  }
  .bonus-pts.pos { color: var(--gold); }
  .bonus-pts.neg { color: var(--blood-bright); }
  .mini-stepper { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .mini-stepper button {
    width: 32px; height: 32px;
    background: var(--btn-face);
    color: var(--gold-bright);
    border: none;
    border-radius: 50%;
    font-size: 16px;
    font-family: var(--font-ui);
    box-shadow: var(--btn-lift);
  }
  .mini-stepper button:disabled { opacity: 0.25; }
  .mini-stepper .v {
    width: 28px;
    text-align: center;
    font-family: var(--font-title);
    font-size: 22px;
    color: var(--gold-bright);
  }

  .suit-y { color: var(--suit-yellow); }
  .suit-p { color: var(--suit-purple); }
  .suit-g { color: var(--suit-green); }

  .roatan-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
  }
  .roatan-icon { font-size: 24px; width: 32px; text-align: center; flex-shrink: 0; }
  .roatan-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1; }
  .roatan-btn {
    padding: 13px 0;
    background: var(--btn-face);
    color: var(--ink-dim);
    border: none;
    box-shadow: var(--btn-lift);
    border-radius: var(--r-pill);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
  }
  .roatan-btn.selected {
    background: var(--btn-sel);
    color: var(--gold-bright);
    box-shadow: var(--btn-sel-lift);
  }

  .action-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 12px 16px 40px;
    background: linear-gradient(0deg, var(--bg-deep) 0%, var(--bg-deep) 70%, transparent 100%);
    z-index: 10;
  }
  .action-footer .inner {
    max-width: 600px;
    margin: 0 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 8px 0 0;
    box-shadow: none;
    position: relative;
  }
  .action-footer .inner.footer-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .action-footer .footer-inner-column {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .action-footer .footer-inner-column .footer-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }
  .action-footer .inner::before {
    display: none;
  }
  .action-footer .footer-valbar {
    margin-top: 8px;
    margin-bottom: 0;
    background: transparent;
    border: none;
    padding: 6px 0;
    font-size: 12px;
  }
  .action-footer .btn { flex: 1; padding: 16px; font-size: 13px; }
  .footer-row {
    align-items: center;
    justify-content: space-between;
  }
  .footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .footer-fab {
    border-radius: 50%;
    border: none;
    background: var(--btn-face);
    color: var(--gold-bright);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--btn-lift);
  }
  .footer-fab-sm {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
  .footer-fab-validate {
    width: 74px;
    height: 74px;
    font-size: 34px;
    background: var(--primary-face);
    color: var(--primary-ink);
    text-shadow: var(--primary-text-shadow);
    box-shadow: var(--primary-lift);
  }
  .footer-fab-validate:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: 0 2px 0 rgba(0,0,0,0.5);
  }
  /* Bouton retour : 60% plus petit que Valider (74 × 0.4 ≈ 30) */
  .footer-fab-back {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .footer-row.footer-centered,
  .footer-centered {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px;
  }

  /* Flèche animée indiquant qu'il y a des joueurs hors écran */
  .scroll-hint {
    position: fixed;
    bottom: 175px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    display: none;
    pointer-events: none;
    color: var(--gold-bright);
    font-size: 36px;
    line-height: 1;
    text-shadow: 0 0 16px rgba(255, 140, 31, 0.95), 0 0 8px rgba(0,0,0,0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .scroll-hint.visible {
    display: block;
    opacity: 1;
    animation: scrollHintBob 1.4s ease-in-out infinite;
  }
  .scroll-hint.entering {
    display: block;
    animation: scrollHintEnter 0.4s ease-out, scrollHintBob 1.4s ease-in-out 0.4s infinite;
  }
  @keyframes scrollHintEnter {
    0% { opacity: 0; transform: translate(-50%, -10px) scale(0.6); }
    60% { opacity: 1; transform: translate(-50%, 4px) scale(1.2); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }
  @keyframes scrollHintBob {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
  }
  .footer-valbar {
    max-width: 600px;
    margin: 10px auto 0;
    margin-bottom: 0;
  }

  .setup-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
  .summary-pill {
    background: var(--btn-face);
    border: none;
    box-shadow: var(--btn-lift);
    border-radius: var(--r-card);
    padding: 10px 12px;
    font-size: 11px;
    color: var(--ink-faded);
    font-family: var(--font-ui);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
  }
  .summary-pill .val { display: block; color: var(--gold-bright); font-family: var(--font-title); font-size: 20px; margin-top: 2px; }

  .validation-bar {
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 13px;
    font-family: var(--font-ui);
    margin-bottom: 12px;
    text-align: center;
    transition: all 0.2s;
  }
  .validation-bar.warn {
    background: rgba(168,50,50,0.15);
    border: 1px solid var(--blood);
    color: var(--blood-bright);
  }
  .validation-bar.ok {
    background: rgba(212,169,66,0.1);
    border: 1px solid var(--gold);
    color: var(--gold-bright);
  }
  /* Mais dans le footer, on garde uniquement la couleur du texte */
  .action-footer .footer-valbar.warn,
  .action-footer .footer-valbar.ok {
    background: transparent;
    border: none;
  }
  .action-footer .footer-valbar.warn { color: var(--blood-bright); }
  .action-footer .footer-valbar.ok { color: var(--gold-bright); }

  /* Section Kraken */
  /* Bouton Kraken (FAB à côté de Valider) */
  .kraken-fab {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--btn-face);
    border: none;
    color: var(--blood-bright);
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--btn-lift);
    position: relative;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s, opacity 0.2s;
  }
  .kraken-fab.active {
    background: var(--btn-danger-face);
    color: #ffd9cd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 20px rgba(200, 52, 28, 0.55), inset 0 1px 0 rgba(255, 190, 175, 0.22);
  }
  .kraken-fab.pulse {
    animation: krakenPulse 1.4s ease-in-out infinite;
  }
  .kraken-fab.hidden {
    opacity: 0.25;
    pointer-events: none;
    filter: grayscale(0.6);
  }
  .kraken-fab .kraken-check {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold-bright);
    color: var(--bg-deep);
    font-size: 13px;
    font-family: var(--font-ui);
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--bg-deep);
    box-shadow: 0 0 6px rgba(255, 140, 31, 0.6);
  }
  .kraken-fab.active .kraken-check {
    display: flex;
  }
  @keyframes krakenPulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 12px rgba(200, 52, 28, 0.4); }
    50% { box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 24px rgba(200, 52, 28, 0.8); }
  }

  .winner-banner {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(180deg, rgba(212,169,66,0.2) 0%, var(--bg-card) 100%);
    border: 2px solid var(--gold);
    border-radius: 4px;
    margin-bottom: 14px;
    box-shadow: 0 0 40px rgba(212,169,66,0.3);
  }
  .winner-banner .crown { font-size: 42px; }
  .winner-banner .title { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--ink-faded); text-transform: uppercase; letter-spacing: 0.4em; margin: 12px 0 6px; }
  .winner-banner .name { font-family: var(--font-title); font-size: 44px; color: var(--gold-bright); line-height: 1; }
  .winner-banner .score { font-family: var(--font-ui); font-size: 22px; color: var(--ink); margin-top: 8px; }

  .section-tag {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 6px;
    margin-top: 4px;
  }

  @media (max-width: 380px) {
    .header h1 { font-size: 36px; }
    .panel { padding: 14px; }
  }