/* ---------------------------------------------------------------------------
   Motchi - thème « feutre & or », mascotte panda roux.

   Les règles écrites ici sont l'habillage d'avant la refonte : elles vivent
   jusqu'à ce que le lot de leur écran les remplace par les composants du socle
   (`components.css`). Leurs valeurs de couleur, elles, passent déjà par les
   jetons de `tokens.css`, qui déclare la palette et les modes.
--------------------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* Le fond de feutre est déclaré avec les surfaces du socle (components.css) :
   il suit le mode, et la page n'est pas seule à le porter. */
body {
    font-family: 'Nunito', sans-serif;
    color: var(--light);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

/* La coquille (barre du haut, menu, scène, pied de page) a sa propre feuille
   depuis le lot 4 : `shell.css`. Ce qui reste ici en est le contenu, écran par
   écran, jusqu'à ce que le lot de chacun le reprenne. */

/* ── Compteurs de la barre, posés par les écrans de partie ── */
.stats { display: flex; align-items: center; gap: 10px; }
.manche { font-weight: 800; font-size: 14px; padding: 5px 14px; border-radius: 20px; background: rgba(255,255,255,.14); color: var(--light); white-space: nowrap; }
/* Manche pénalité : un fond terracotta plein virait au brun sale sur le feutre
   bleu et rendait le compteur difficile à lire. On garde le fond translucide
   de la pastille normale, et c'est un contour chaud plus un texte pêche clair
   (6,4:1 sur la barre) qui signalent l'état. */
.manche.penalty { color: #FFD2BC; box-shadow: inset 0 0 0 1.5px rgba(255,170,130,.55); }
.score { font-weight: 900; font-size: 15px; padding: 5px 16px; border-radius: 20px; background: var(--gold); color: #3A2E00; display: flex; gap: 6px; align-items: center; white-space: nowrap; }

/* ── Mascotte + bulle ── */
.mascot-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.mascot-row .panda { flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
.bubble {
    background: linear-gradient(180deg, var(--cream), var(--cream-2));
    border-radius: 18px 18px 18px 5px; padding: 14px 18px; flex: 1;
    font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 16px;
    color: var(--ink-soft); line-height: 1.4;
    box-shadow: 0 8px 22px rgba(0,0,0,.2); align-self: center;
}
.bubble b, .bubble strong { color: var(--panda); }

/* ── Grille ── */
.grid2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .grid2 { grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; } }
.stack { display: flex; flex-direction: column; gap: 16px; }
.center { text-align: center; }

/* ── Panneaux ── */
.paper {
    background: linear-gradient(180deg, var(--cream), var(--cream-2));
    border-radius: 20px; padding: 22px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.22);
}
/* Deux cartes empilées (ex. « Connexion » + « Jouer en invité ») ne doivent
   pas se coller : espace uniquement entre cartes consécutives. */
.paper + .paper { margin-top: 16px; }
.glass {
    background: rgba(255,255,255,.1); border-radius: 20px; padding: 20px;
    border: 1px solid rgba(255,255,255,.14);
}
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.count { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13px; color: #3A2E00; background: var(--gold); padding: 4px 12px; border-radius: 20px; }

/* ── Labels & hints ── */
.label { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px; display: block; }
.label.on-felt { color: var(--light-sub); }
.label.on-paper { color: var(--cream-sub); }
.hint { font-size: 13px; margin-top: 10px; }
.hint.on-felt { color: var(--light-sub); }
.hint.on-paper { color: var(--cream-sub); }
.hint a { color: inherit; font-weight: 800; }
.paper-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); }
.h1 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 26px; color: #fff; }
.muted { color: var(--light-sub); font-size: 15px; line-height: 1.55; }
/* --light-sub est un bleu très clair, illisible sur une carte crème. */
.muted.on-paper { color: var(--cream-sub); }

/* ── Carte mot mystère ── */
.word-card {
    background: #fff; border-radius: 24px; padding: 28px 24px; text-align: center;
    box-shadow: 0 10px 0 #E7D9BC, 0 22px 34px rgba(0,0,0,.28);
    transform: rotate(-1.5deg); position: relative; margin: 14px 0 22px; border: 3px solid #fff;
}
.word-ribbon {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--gold); color: #5A4300; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 12px;
    padding: 5px 16px; border-radius: 20px; box-shadow: 0 4px 0 var(--gold-dark); white-space: nowrap;
}
.word-big { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 46px; color: var(--ink); letter-spacing: 1px; margin-top: 6px; text-transform: uppercase; }
.word-sm { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: 1px; background: #fff; display: inline-block; padding: 6px 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.18); text-transform: uppercase; }
@media (max-width: 520px) { .word-big { font-size: 38px; } }

/* ── Champs ── */
.field {
    width: 100%; border-radius: 16px; padding: 16px 18px;
    font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 22px;
    outline: none; background: #fff; border: 3px solid var(--paper-border); color: var(--ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.field:focus { border-color: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: translateY(-1px); }
.field.code { text-align: center; letter-spacing: 8px; font-size: 28px; font-weight: 700; text-transform: uppercase; }
.field.small { font-size: 17px; padding: 13px 16px; font-family: 'Nunito', sans-serif; font-weight: 700; }
.field-group { margin-bottom: 16px; }
.form-errors, ul.form-errors { list-style: none; margin: 6px 0 0; padding: 0; color: var(--danger); font-size: 13px; font-weight: 700; }

/* ── Boutons ──
   L'accent du bouton est celui du mode, pas le bleu de la marque : c'est le
   seul endroit de cette feuille qui suit `data-mode`, et il suffit à ce que
   l'action principale d'un écran porte la couleur de son espace. Le reste des
   `--primary-dark` ci-dessous sont des encres de texte, qui changeront avec
   l'écran qui les porte. */
.btn {
    width: 100%; border: none; cursor: pointer; text-decoration: none; text-align: center;
    display: inline-block;
    font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 19px;
    padding: 16px; border-radius: 18px; background: var(--mode); color: var(--on-accent);
    box-shadow: 0 6px 0 var(--mode-dark);
    transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s, opacity .12s;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 var(--mode-dark); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--mode-dark); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.gold { background: var(--gold); color: #3A2E00; box-shadow: 0 6px 0 var(--gold-dark); }
.btn.gold:hover:not(:disabled) { box-shadow: 0 8px 0 var(--gold-dark); }
.btn.gold:active:not(:disabled) { box-shadow: 0 2px 0 var(--gold-dark); }
/* Sur le feutre, et seulement là : le texte et la bordure sont clairs, donc ce
   bouton disparaît sur le papier d'une carte. Là-bas, c'est `.btn` qu'il faut. */
.btn-outline {
    width: 100%; cursor: pointer; text-decoration: none; text-align: center; display: inline-block;
    font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 16px;
    padding: 14px; border-radius: 16px; background: transparent; color: var(--light);
    border: 2px solid rgba(255,255,255,.4); transition: background .12s;
}
.btn-outline:hover { background: rgba(255,255,255,.1); }
.btn-ghost { background: none; border: none; color: var(--light-sub); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px; text-decoration: none; display: inline-block; }
.btn-ghost:hover { color: #fff; }
.btn-top { width: auto; font-size: 14px; padding: 8px 16px; border-radius: 12px; box-shadow: 0 4px 0 var(--mode-dark); }
.btn-top:hover:not(:disabled) { box-shadow: 0 5px 0 var(--mode-dark); }
.btn-outline.btn-top { padding: 7px 14px; border-radius: 12px; box-shadow: none; }
.btn-icon { padding: 7px 11px; font-size: 15px; line-height: 1; }
.round-icon { width: 32px; height: 32px; flex: 0 0 32px; display: inline-grid; place-items: center; border-radius: 50%; }
.round-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.action-icon { background: rgba(255,255,255,.12); color: var(--light); }
.btn-row { display: flex; gap: 12px; }
.btn-row .grow { flex: 2; }
.btn-row .shrink { flex: 1; }
/* Les boutons de la rangée s'étirent à la même hauteur : on centre leur
   libellé pour qu'un bouton court (« Connexion ») ne reste pas collé en haut
   quand le bouton voisin passe sur deux lignes. */
.btn-row .btn, .btn-row .btn-outline { display: flex; align-items: center; justify-content: center; }

/* ── Flashes ── */
.flash { border-radius: 14px; padding: 12px 16px; font-size: 14px; font-weight: 700; margin-bottom: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.flash-error, .flash-danger { background: var(--danger-bg); color: var(--danger); }
.flash-success { background: var(--success-bg); color: var(--success); }
.flash-warning, .flash-info { background: var(--warning-bg); color: var(--warning); }

/* ── Joueurs ── */
.players { display: flex; flex-direction: column; gap: 9px; }
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.prow.me { box-shadow: 0 0 0 2px var(--gold), 0 2px 6px rgba(0,0,0,.06); }
.pav { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 16px; color: #fff; text-transform: uppercase; }
.pname { flex: 1; font-weight: 700; font-size: 15px; color: #2A3F66; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstatus { font-size: 13px; font-weight: 700; }
.pstatus.done { color: var(--success); }
.pstatus.wait { color: #9AA7BD; }
.prow.empty { background: transparent; border: 2px dashed rgba(255,255,255,.25); box-shadow: none; color: var(--light-sub); font-size: 14px; }
.pav.empty { background: transparent; border: 2px dashed rgba(255,255,255,.3); color: var(--light-sub); }
/* Retrait d'un joueur par l'hôte : croix discrète, mais 44 px de zone tactile
   (recommandation mobile). Les marges négatives absorbent la différence avec
   l'avatar (38 px) pour que la ligne ne grandisse pas. */
.prow-remove { flex-shrink: 0; width: 44px; height: 44px; margin: -3px -8px -3px 0; border: none; border-radius: 50%; background: none; color: #9AA7BD; font-size: 15px; line-height: 1; cursor: pointer; }
.prow-remove:hover, .prow-remove:focus-visible { background: var(--danger-bg); color: var(--danger); }

/* ── Décision d'un bot, dans le récap d'une partie ── */
.bot-decision { border: 1px solid rgba(42,63,102,.14); border-left: 3px solid var(--primary, #4A7EC8); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; background: rgba(74,126,200,.05); }
.bot-decision.declined { border-left-color: #9AA7BD; background: rgba(154,167,189,.08); }
.bd-head { display: flex; align-items: center; gap: 8px; }

.bot-decision-mascot {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
}

.bot-decision-mascot img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.bd-title { flex: 1; font-size: 14px; font-weight: 700; color: #2A3F66; min-width: 0; }
.bd-confidence { font-size: 13px; font-weight: 800; color: var(--cream-sub); white-space: nowrap; }
.bd-analysis { margin: 6px 0 0; font-size: 13px; color: var(--cream-sub); font-style: italic; }
.bd-unexplained { margin: 6px 0 0; font-size: 13px; color: #B45309; }

/* L'ajout suit immédiatement la liste. Le choix du style reste replié tant
   qu'il n'est pas utile, puis apparaît sous le déclencheur dans le sens de
   lecture naturel. */
.bot-adder { margin-top: 16px; }
.bot-add-trigger { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.bot-add-trigger::-webkit-details-marker { display: none; }
.bot-add-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.bot-add-trigger small { font-weight: 600; color: var(--light-sub); }
/* Sur le tapis comme les manches de l'écran final : l'indicateur commun est
   calibré pour le papier, il s'éclaircit sur fond sombre. */
.bot-adder > summary .fold-indicator { background: rgba(255,255,255,.12); color: var(--light); }
.bot-adder[open] > summary .fold-indicator { transform: rotate(180deg); }
.add-bot { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.bot-style-picker { margin: 0; padding: 0; border: 0; }
.bot-style-picker legend { margin-bottom: 8px; color: var(--light); font-size: 14px; font-weight: 800; }
.bot-style-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bot-style-option { position: relative; display: block; cursor: pointer; }
.bot-style-option input { position: absolute; opacity: 0; pointer-events: none; }
.bot-style-copy { display: grid; min-height: 104px; height: 100%; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; border: 2px solid rgba(255,255,255,.25); border-radius: 13px; background: rgba(255,255,255,.06); transition: border-color .12s, background .12s, transform .12s; }
.bot-style-copy panda-face { display: flex; align-items: center; justify-content: center; }
.bot-style-text { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.bot-style-copy strong { color: var(--light); font-size: 14px; }
.bot-style-copy small { color: var(--light-sub); font-family: 'Nunito', sans-serif; font-size: 12px; line-height: 1.3; }
.bot-style-option:hover .bot-style-copy { background: rgba(255,255,255,.1); }
.bot-style-option input:checked + .bot-style-copy { border-color: var(--gold); background: rgba(244,196,48,.13); box-shadow: 0 0 0 1px rgba(244,196,48,.2); }
.bot-style-option input:focus-visible + .bot-style-copy { outline: 3px solid rgba(255,255,255,.5); outline-offset: 2px; }
.bot-add-confirm { margin-top: 12px; }
@media (max-width: 480px) { .bot-style-options { grid-template-columns: 1fr; } .bot-style-copy { min-height: 86px; } }

.game-list { display: flex; flex-direction: column; gap: 10px; }
.game-row { text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; letter-spacing: 1px; }
.game-row:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,.12); }
.game-row .pname { display: flex; flex-direction: column; gap: 1px; font-family: 'Space Mono', monospace; letter-spacing: 1.5px; }
.game-row-sub { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 12px; color: #9AA7BD; letter-spacing: 0; }

/* Séparateur de mois : sans lui, une liste de codes à six caractères ne donne
   aucun repère de lecture. Volontairement léger, pour ne pas se lire comme une
   partie de plus dans la liste. */
.history-month { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--cream-sub); margin: 8px 0 -2px; }
.history-month:first-child { margin-top: 0; }
/* Le bouton est posé sur le feutre, sous le papier : il complète la liste, il
   n'en fait pas partie. */
.history-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.history-more-count { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; color: var(--light-sub); }

/* ── Code de partie ── */
.code-row { display: flex; gap: 10px; align-items: stretch; }
.code-display {
    flex: 1; border-radius: 16px; padding: 14px 18px; background: #fff; border: 3px solid var(--paper-border);
    font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 28px; color: var(--ink);
    text-align: center; letter-spacing: 8px; text-transform: uppercase;
}
.code-copy { width: auto; padding: 0 18px; font-size: 20px; }

/* ── Cartes indices (révision) ── */
.clue-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-radius: 12px; border: 2px solid var(--paper-border); background: #fff; margin-bottom: 8px; transition: all .15s; }
.clue-card .cw { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); overflow-wrap: anywhere; }
.clue-card .cp { font-size: 12px; color: var(--cream-sub); margin-top: 2px; }
.clue-reason { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger); border-radius: 10px; padding: 1px 8px; }
.clue-card.dup { border-color: var(--danger); background: #FEF2F2; opacity: .78; }
.clue-card.dup .cw { color: #9CA3AF; text-decoration: line-through; }
.clue-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mark-btn {
    width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--paper-border);
    background: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: var(--cream-sub); flex-shrink: 0; cursor: pointer;
    transition: all .15s;
}
.mark-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.mark-off { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--danger); background: var(--danger-bg); color: var(--danger); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.mark-off.ok { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.vote-btn { width: 38px; height: 34px; border-radius: 12px; border: 2px solid var(--paper-border); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; cursor: pointer; line-height: 1; transition: all .15s; filter: grayscale(1); opacity: .55; }
.vote-btn:hover { border-color: var(--warning); filter: none; opacity: 1; }
.vote-btn.on { border-color: var(--warning); background: var(--warning-bg); filter: none; opacity: 1; }
.vote-count { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 800; color: var(--warning); background: var(--warning-bg); border: 1px solid #FED7AA; border-radius: 10px; padding: 1px 7px; white-space: nowrap; }

/* ── Palmarès de fin de partie ── */
.palmares-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.palmares-label { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin: 16px 0 10px; }
.palmares-label.good { color: var(--gold-dark); }
.palmares-label.tease { color: var(--panda); }
.palmares-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.award-card { display: flex; flex-direction: column; align-items: center; text-align: center; border: 2px solid var(--paper-border); border-radius: 14px; padding: 12px 10px 10px; background: #fff; }
.award-card.good { background: linear-gradient(180deg, #FFF8DC, #fff 62%); border-color: #EFD778; }
.award-card.tease { background: linear-gradient(180deg, #FBEDE6, #fff 62%); border-color: #E7C6B4; }
.award-panda { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; }
.award-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin-top: 2px; }
.award-desc { font-size: 12px; color: var(--cream-sub); margin: 4px 0 10px; line-height: 1.35; }
.award-stat { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: #F6EEDD; border: 1px solid var(--paper-border); }
.award-stat .who { color: var(--ink); }
.award-stat .val { color: var(--panda); }
.award-card.good .award-stat .val { color: var(--gold-dark); }
.award-stat .dot { color: var(--cream-sub); }

/* ── Chips & tags ── */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
/* Les pastilles posées sur une ligne blanche portent toujours leur propre
   couleur : sans modificateur, elles héritent du `color` clair du `body`,
   prévu pour le tapis, et deviennent illisibles sur le papier. C'est ce qui
   rendait « bot » invisible dans le salon (#EAF2FF sur blanc, 1,13:1). Les
   teintes ci-dessous tiennent toutes le 4.5:1 de WCAG AA en 12 px. */
.chip.blue { background: #E8F0FE; color: var(--primary-dark); }
.chip.bot { background: #EEF2F8; color: #3F5680; }
.chip.gold { background: var(--gold); color: #3A2E00; }
.chip.green { background: var(--success-bg); color: var(--success); }
.chip.danger { background: var(--danger-bg); color: var(--danger); }
.chip.pill-felt { background: rgba(255,255,255,.14); color: var(--light); }
.chip.pill-paper { background: rgba(0,0,0,.06); color: var(--ink-soft); }
/* Manche pénalité : la teinte mascotte, déjà utilisée par .stat-tile.tease. */
.chip.penalty { background: #FBEDE6; color: var(--panda); }
.recap-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Récap : manches dépliables ── */
.recap-round { padding: 0; overflow: hidden; }
.recap-summary { position: relative; list-style: none; cursor: pointer; padding: 11px 58px 11px 14px; display: flex; flex-direction: column; gap: 8px; -webkit-tap-highlight-color: transparent; }
.recap-summary::-webkit-details-marker { display: none; }
.recap-summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 20px; }
.recap-summary-top { display: flex; align-items: center; gap: 8px; }
.fold-indicator { margin-left: auto; background: rgba(35,55,94,.07); color: var(--cream-sub); transition: transform .2s ease; }
.recap-summary .fold-indicator { position: absolute; top: 50%; right: 14px; margin-left: 0; transform: translateY(-50%); }
.recap-round[open] > summary .fold-indicator { transform: translateY(-50%) rotate(180deg); }
.recap-word { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; }
.recap-body { padding: 4px 18px 18px; }

/* Le même détail sur l'écran final, posé sur le tapis et replié d'un cran de
   plus : l'écran est centré, les manches se lisent alignées à gauche. */
.final-rounds { padding: 0; text-align: left; }
.final-rounds > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 18px; font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--light); -webkit-tap-highlight-color: transparent; }
.final-rounds > summary::-webkit-details-marker { display: none; }
.final-rounds > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 20px; }
.final-rounds > summary .fold-indicator { background: rgba(255,255,255,.12); color: var(--light); }
.final-rounds[open] > summary .fold-indicator { transform: rotate(180deg); }
.final-rounds-body { padding: 0 14px 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: #fff; border: 1.5px solid var(--paper-border); border-radius: 10px; padding: 7px 14px; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; text-transform: uppercase; }
.tag.ghost { background: transparent; border-style: dashed; border-color: rgba(255,255,255,.3); color: var(--light-sub); font-weight: 500; text-transform: none; }
.tag.on-paper-ghost { background: transparent; border-style: dashed; border-color: var(--paper-border); color: var(--cream-sub); font-weight: 500; text-transform: none; }

/* ── Attente ── */
.waiting-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; }
.waiting-note.on-felt { color: var(--light-sub); }
.waiting-note.on-paper { color: var(--cream-sub); }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: pulse 1.2s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* ── Confettis ── */
.confetti-piece { position: fixed; width: 10px; height: 10px; z-index: 90; pointer-events: none; will-change: transform, opacity; }

/* ── Mode Blitz ── */
.blitz-rules { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 16px; background: #FFF8D1; border: 2px solid var(--gold-dark); color: var(--ink-soft); box-shadow: 0 5px 0 rgba(217,172,6,.65); }
.blitz-rules strong { color: #5A4300; font-family: 'Fredoka', sans-serif; font-size: 17px; }
.blitz-rules span { font-size: 13px; font-weight: 800; }

.blitz-phase { padding: 13px 16px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 18px rgba(0,0,0,.13); }
.blitz-phase-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.blitz-phase-label { color: var(--light); font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.blitz-clock { color: var(--gold); font-family: 'Space Mono', monospace; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blitz-progress { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.14); }
.blitz-progress > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--gold); transition: width .2s linear, background-color .2s; }
.blitz-phase-note { margin-top: 7px; color: var(--light-sub); font-size: 12px; font-weight: 800; }
.blitz-phase.urgent .blitz-clock { color: var(--warning); }
.blitz-phase.urgent .blitz-progress > span { background: var(--warning); }
.blitz-phase.critical .blitz-clock { color: #FCA5A5; }
.blitz-phase.critical .blitz-progress > span { background: var(--danger); }
.blitz-phase.review { background: rgba(250,204,21,.12); border-color: rgba(250,204,21,.35); }
.blitz-phase.review .blitz-clock { color: var(--light); font-size: 13px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* ── Résultat de manche ── */
.result-card { border-radius: 22px; padding: 26px 22px; text-align: center; }
.result-card.win { background: var(--success-bg); border: 2px solid #86EFAC; }
.result-card.lose { background: var(--danger-bg); border: 2px solid #FCA5A5; }
.result-card.skip { background: #FEF3C7; border: 2px solid #FCD34D; }
.result-card .r-title { display: inline-block; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 28px; border: 3px solid currentColor; border-radius: 14px; padding: 4px 26px; margin-bottom: 8px; background: rgba(255,255,255,.5); transform: rotate(-3deg); }
.result-card .r-title.win-t { color: var(--success); }
.result-card .r-title.lose-t { color: var(--danger); }
.result-card .r-title.skip-t { color: var(--warning); }
.result-card .r-sub { font-size: 15px; color: #6B7280; margin: 4px 0 14px; }
/* Manche passée d'office après une défaite. Sans teinte propre elle portait le
   jaune du passage volontaire, alors que les deux n'ont rien à voir : on
   reprend le terracotta de la mascotte, distinct du vert, du rouge et du
   jaune déjà pris. */
.result-card.penalty { background: #FFF1EC; border: 2px solid #F0BFA9; }
.result-card .r-title.penalty-t { color: var(--panda); }
.result-card .r-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.result-card .r-head .r-title { margin-bottom: 0; }

/* Annonce de la pénalité sur l'écran de défaite. L'ancienne note grise en bas
   de carte avait la forme d'une mention légale et passait inaperçue : bloc
   plein, aligné à gauche, avec la pastille ↻ commune aux autres écrans. */
.penalty-note { display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 18px; padding: 12px 14px; background: #fff; border: 2px solid #FCA5A5; border-radius: 14px; }
.penalty-note .pn-mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--danger-bg); color: var(--danger); display: grid; place-items: center; font-size: 19px; font-weight: 700; line-height: 1; }
.penalty-note .pn-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.penalty-note .pn-txt b { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; color: #B91C1C; }
.penalty-note .pn-txt span { font-size: 12.5px; color: #6B7280; line-height: 1.35; }
.guess-bubble { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
.guess-bubble .gb-label { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #C08A90; }
.guess-bubble .gb-word { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; color: #B4474D; background: #fff; padding: 5px 18px; border-radius: 12px; box-shadow: 0 3px 10px rgba(180,71,77,.18); text-transform: uppercase; letter-spacing: .5px; }

/* ── Score final ── */
.bigscore { display: inline-flex; align-items: baseline; gap: 6px; background: #fff; border: 3px solid var(--paper-border); border-radius: 20px; padding: 16px 40px; box-shadow: 0 10px 0 #E7D9BC; }
.bigscore .n { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 68px; color: var(--ink); line-height: 1; }
.bigscore .d { font-size: 26px; color: var(--cream-sub); }
.progress { height: 12px; border-radius: 6px; background: rgba(255,255,255,.16); overflow: hidden; }
.progress > div { height: 100%; border-radius: 6px; background: var(--gold); transition: width .6s; }
.score-split { display: flex; gap: 24px; justify-content: center; font-size: 15px; }
.score-breakdown-values { margin: 12px 0; }
.score-breakdown-penalty { margin: 0; }
/* Le bilan s'affiche sur une carte crème : on prend les variantes foncées,
   sinon le vert clair et le rose se noient dans le fond. */
.score-split .ok { color: var(--success); font-weight: 700; }
.score-split .ko { color: var(--danger); font-weight: 700; }

/* ── Stats joueur ── */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 520px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-tile { background: #fff; border: 2px solid var(--paper-border); border-radius: 14px; padding: 14px 10px; text-align: center; }
.stat-tile .num { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; color: var(--ink); }
.stat-tile .lbl { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--cream-sub); }
.stat-tile .sub { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--panda); }
.stat-tile.good { background: linear-gradient(180deg, #FFF8DC, #fff 62%); border-color: #EFD778; }
.stat-tile.good .num { color: var(--gold-dark); }
.stat-tile.tease { background: linear-gradient(180deg, #FBEDE6, #fff 62%); border-color: #E7C6B4; }
.stat-tile.tease .num { color: var(--panda); }

/* ── Tuiles « système de points » (côté devineur) ── */
.pt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pt-tile { background: #fff; border: 2px solid var(--paper-border); border-radius: 14px; padding: 14px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pt-tile.win { background: linear-gradient(180deg, #F0FDF4, #fff 62%); border-color: #A7E9BE; }
.pt-tile.skip { background: linear-gradient(180deg, #FEFCE8, #fff 62%); border-color: #F2E08C; }
.pt-tile.auto { background: linear-gradient(180deg, #FEF2F2, #fff 62%); border-color: #F6C2C2; }
.pt-badge { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 22px; line-height: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.pt-tile.win .pt-badge { background: var(--success-bg); color: var(--success); }
.pt-tile.skip .pt-badge { background: #FEF3C7; color: var(--gold-dark); }
.pt-tile.auto .pt-badge { background: var(--danger-bg); color: var(--danger); font-size: 20px; }
.pt-name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13px; color: var(--ink); }
.pt-txt { font-size: 11.5px; color: var(--cream-sub); line-height: 1.35; }
@media (max-width: 560px) { .pt-tiles { grid-template-columns: 1fr; } }

/* ── Mémo « mots interdits » (écran de révision) ── */
.rules-memo { border: 1px dashed var(--paper-border); border-radius: 13px; margin-top: 14px; background: rgba(255, 255, 255, .35); }
.rules-memo > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--ink); padding: 12px 14px;
}
.rules-memo > summary::-webkit-details-marker { display: none; }
.rules-memo[open] > summary .fold-indicator { transform: rotate(180deg); }
.rules-inner { padding: 2px 10px 13px; }
.rule-tiles { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.rule-tile {
    background: #fff; border: 1.5px solid var(--paper-border); border-radius: 12px; padding: 9px 5px 8px;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
    flex: 1 1 95px; min-width: 90px; max-width: 118px;
}
.rule-tile .panda { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .14)); }
.rt-name { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--ink); line-height: 1.12; }
.rt-ex { font-size: 9.5px; color: var(--cream-sub); line-height: 1.25; }
.rt-ex i { font-style: italic; color: var(--panda); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fold-indicator { transition: none; } }

/* ── Page /regles : titre (h1) ── */
.rules-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 24px; color: #fff; margin-bottom: 16px; letter-spacing: .3px; text-wrap: balance; }
@media (max-width: 520px) { .rules-title { font-size: 21px; } }

/* ── Page /regles : parcours d'une manche (chemin vertical) ── */
.rules-path { display: flex; flex-direction: column; gap: 2px; }
.rstep { display: flex; gap: 13px; align-items: center; position: relative; padding: 6px 0; }
.rstep .rmark {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: #fff;
    display: grid; place-items: center; border: 3px solid var(--gold);
    box-shadow: 0 4px 0 var(--gold-dark); z-index: 2;
}
.rstep:not(:last-child) .rmark::after {
    content: ""; position: absolute; left: 22px; top: 50px; width: 3px; height: calc(100% - 34px);
    background-image: linear-gradient(var(--gold-dark) 55%, transparent 0);
    background-size: 3px 11px; z-index: 1;
}
.rstep .rbody { background: #fff; border: 2px solid var(--paper-border); border-radius: 14px; padding: 10px 14px; flex: 1; }
.rstep.hl .rbody { border-color: var(--gold-dark); background: linear-gradient(180deg, #FFFBEA, #fff 70%); }
.rstep .rbody .t { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.rstep .rbody .d { font-size: 12.5px; color: var(--cream-sub); line-height: 1.35; margin-top: 2px; }
.rstep .rbody .d i { color: var(--panda); font-style: normal; font-weight: 800; }

/* ── Page /regles : les points (3 tuiles compactes côte à côte) ── */
.score3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.s3 { border: 2px solid var(--paper-border); border-radius: 14px; background: #fff; padding: 12px 6px 11px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.s3 .b { width: 36px; height: 36px; border-radius: 50%; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 17px; display: grid; place-items: center; }
.s3.win { background: linear-gradient(180deg, #F0FDF4, #fff 62%); border-color: #A7E9BE; }
.s3.win .b { background: var(--success-bg); color: var(--success); }
.s3.skip { background: linear-gradient(180deg, #FEFCE8, #fff 62%); border-color: #F2E08C; }
.s3.skip .b { background: #FEF3C7; color: var(--gold-dark); }
.s3.auto { background: linear-gradient(180deg, #FEF2F2, #fff 62%); border-color: #F6C2C2; }
.s3.auto .b { background: var(--danger-bg); color: var(--danger); font-size: 15px; }
.s3 .n { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px; color: var(--ink); line-height: 1.1; }
.s3 .x { font-size: 10px; color: var(--cream-sub); line-height: 1.25; }

/* ── Page /regles : mots interdits (lignes enrichies) ── */
.forb { display: flex; flex-direction: column; gap: 7px; }
.frow { display: flex; align-items: center; gap: 11px; background: #fff; border: 2px solid var(--paper-border); border-radius: 12px; padding: 8px 11px; }
.frow .fp { flex-shrink: 0; }
.frow .ftxt { flex: 1; min-width: 0; }
.frow .nm { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.1; }
.frow .fdesc { font-size: 11px; color: var(--cream-sub); line-height: 1.25; margin-top: 1px; }
.frow .fex {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 800; color: var(--danger); background: var(--danger-bg);
    border: 1px solid #F6C2C2; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.frow .fex .x { font-weight: 900; }
.frow .fex i { font-style: italic; }

/* ── Variante 2×2 des tuiles règles (mémo du lobby, 4 tuiles) ── */
.rule-tiles.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.rule-tiles.grid2 .rule-tile { max-width: none; min-width: 0; }

/* ── Page /regles : liste « bon à savoir » ── */
.rule-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rule-notes li {
    position: relative; padding-left: 26px; font-size: 14px; line-height: 1.4; color: var(--ink-soft);
}
.rule-notes li::before {
    content: "🐾"; position: absolute; left: 0; top: 0; font-size: 13px;
}
.rule-notes b { color: var(--ink); font-weight: 800; }

/* ── Modal de confirmation ── */
.modal-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 22px; background: var(--scrim); backdrop-filter: blur(3px); animation: modal-fade .16s ease; }
.modal-overlay[hidden] { display: none; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card { width: 100%; max-width: 460px; border: 1px solid var(--paper-border); border-radius: var(--radius-2xl); padding: var(--space-7); background: linear-gradient(180deg, var(--cream), var(--cream-2)); box-shadow: 0 7px 0 var(--paper-edge), 0 28px 70px rgba(0,0,0,.38); text-align: center; animation: modal-pop var(--dur-slow) var(--ease-pop); }
@keyframes modal-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-mascot { display: flex; justify-content: center; margin: calc(-1 * var(--space-3)) 0 var(--space-2); }
.modal-mascot .ui-mascot { width: 120px !important; height: 120px !important; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(35,55,94,.18)); }
.modal-title { margin-bottom: var(--space-2); color: var(--ink); font-family: var(--font-title); font-size: var(--type-section); font-weight: 700; text-wrap: balance; }
.modal-detail { margin: 0 auto var(--space-6); max-width: 34ch; color: var(--cream-sub); font-size: var(--type-body); line-height: 1.5; }
.modal-detail[hidden] { display: none; }
.modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.modal-actions > * { min-width: 0; }
.modal-actions .btn { min-height: 54px; padding: var(--space-3); font-size: var(--type-card); }
.btn-cancel { min-height: 54px; padding: var(--space-3); border: 2px solid var(--paper-border); border-radius: var(--radius-lg); background: var(--tile); color: var(--ink); font-family: var(--font-title); font-size: var(--type-card); font-weight: 600; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
.btn-cancel:hover { background: #F6EEDD; }
body.modal-open { overflow: hidden; }

/* ── Divers ── */
.mb-0 { margin-bottom: 0; }
.mt-16 { margin-top: 16px; }
.mt-12 { margin-top: 12px; }
.mb-16 { margin-bottom: 16px; }

@media (max-width: 520px) {
    /* Les compteurs de partie doivent tenir sur 360 px à côté de la marque et du
       bouton du menu, et rester lisibles avec des nombres larges (« Manche 12/13
       · ★ 10 »). Le resserrement de la barre elle-même est dans `shell.css`. */
    .stats { gap: 6px; min-width: 0; }
    .manche, .score { font-size: 12px; padding: 4px 10px; }
    .mascot-row .panda { width: 64px; height: 64px; }
    .bubble { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .blitz-progress > span { transition: none; }
    .pulse-dot { animation: none; }
    .modal-overlay, .modal-card { animation: none; }
}

/* ── Pages légales ── */
.legal { line-height: 1.6; }
.legal-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 24px; color: var(--ink); margin: 4px 0 4px; }
.legal-updated { color: var(--cream-sub); font-size: 13px; margin-bottom: 18px; }
.legal h2 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); margin: 22px 0 8px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 15px; }
.legal ul { margin: 8px 0 8px 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--primary-dark); font-weight: 700; }
.legal-links { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--paper-border); font-size: 14px; }
.legal .todo {
    background: #FFF3C4; color: #7A5B00; border-radius: 5px;
    padding: 1px 6px; font-weight: 700; font-size: 13px;
}

/* ── Défi : la carte résultat ── */
.daily-figures { display: flex; gap: 10px; }
.daily-figure {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: #fff; border: 1.5px solid var(--paper-border); border-radius: 14px;
    padding: 14px 6px;
}
.daily-figure.is-lead { background: var(--gold); border-color: var(--gold-dark); }
.daily-figure-value { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 26px; color: var(--ink); line-height: 1; }
.daily-figure-value small { font-size: 15px; font-weight: 600; color: var(--cream-sub); }
.daily-figure.is-lead .daily-figure-value { color: #3A2E00; }
.daily-figure-label { font-size: 12px; font-weight: 700; color: var(--cream-sub); text-align: center; line-height: 1.3; }
.daily-figure.is-lead .daily-figure-label { color: #6B5300; }
@media (max-width: 380px) {
    .daily-figure-value, .daily-scale-points { font-size: 22px; }
    .daily-figure-label, .daily-scale-clues { font-size: 11px; }
}

/* Le refus n'emprunte rien au vocabulaire du verdict : ambre et non rouge, qui
   reste réservé au détail révélé de J+1. Il dit « cette saisie n'a pas la bonne
   forme », pas « vous vous êtes trompé ». */
.field.is-refused { box-shadow: 0 0 0 2px var(--warning), 0 6px 18px rgba(0,0,0,.18); }


.daily-final-figures .daily-figure { background: transparent; border: none; }
.daily-final-figures .daily-figure + .daily-figure { border-left: 1px solid var(--paper-border); }

@media (max-width: 380px) {
    .daily-final-figures .daily-figure + .daily-figure {
        border-left: none; border-top: 1px solid var(--paper-border);
    }
}

/* ── Défi : le partage ──
   Les couleurs de la carte vivent ici et non dans le contrôleur qui la
   dessine : la finition graphique est un lot à elle, et elle ira les chercher
   là où vivent les couleurs. Le `canvas` les lit sur cet élément. */
.daily-share {
    --share-top: #5B2C4A;
    --share-bottom: #7A3A5E;
    --share-ink: #FBF7EE;
    --share-soft: #E3C6D6;
    --share-accent: #FACC15;
    --share-score: #FACC15;
    --share-pill: rgba(255,255,255,.14);
    margin-top: 4px;
}
.daily-share[hidden] { display: none; }
.daily-share-open { width: 100%; }

/* ── La carte a distinction ──
   Une journee close se partage avec son palier, et le proto
   (`?screen=share-ranks`) lui donne son metal : le degrade du fond, la couleur
   de la pastille d'indices, l'encre secondaire. C'est ce qui fait qu'un rang
   se partage plutot que de s'enoncer, donc c'est une couleur par palier et non
   un badge pose sur la carte du jour.

   Le score reste dore sur toutes les cartes sauf celle d'Or, ou un dore sur
   dore ne se lirait pas : c'est le seul palier que le proto rhabille. La
   pastille du lien reste doree partout, elle aussi, parce qu'elle est le geste
   et non la distinction. */
.daily-share[data-final] {
    --share-frame: #FFFAF0;
    --share-veil: rgba(255,255,255,.09);
    --share-veil-border: rgba(255,255,255,.16);
    --share-on-accent: #392E23;
    --share-link: #FACC15;
    --share-on-link: #4C3900;
    --share-accent: #D9E2E8;
    --share-top: #405768;
    --share-bottom: #203442;
    --share-soft: #DBE6EB;
}
.daily-share[data-tier="elite"] {
    --share-accent: #FFE375;
    --share-top: #925F80;
    --share-bottom: #4D2B43;
    --share-soft: #F4DBE7;
}
.daily-share[data-tier="gold"] {
    --share-accent: #F7D25F;
    --share-top: #8D642E;
    --share-bottom: #3F2B20;
    --share-soft: #F6E6C6;
    --share-score: #FFF7DF;
}
.daily-share[data-tier="silver"] {
    --share-accent: #DCE8EE;
    --share-top: #71838F;
    --share-bottom: #304653;
    --share-soft: #E2EDF1;
}
.daily-share[data-tier="bronze"] {
    --share-accent: #F0AD86;
    --share-top: #A66149;
    --share-bottom: #4E302F;
    --share-soft: #F1D8CE;
}
.daily-share[data-tier="other"] {
    --share-accent: #B9DCE6;
    --share-top: #477B8F;
    --share-bottom: #18364D;
    --share-soft: #D8EAF0;
}

.daily-share-dialog {
    width: min(720px, calc(100vw - 32px));
    /* Une modale trop haute pour la fenetre perd le centrage que le navigateur
       lui donne (`margin: auto` ne repartit rien quand il n'y a plus de place)
       et se colle en haut a gauche. Elle se borne donc, et c'est son contenu
       qui defile. */
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0; border: none; border-radius: 24px;
    background: linear-gradient(180deg, var(--cream), var(--cream-2));
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    overflow: auto;
}
.daily-share-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }

.daily-share-close {
    position: absolute; top: 14px; right: 14px; z-index: 1;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--paper-border); background: var(--cream);
    color: var(--cream-sub); font-size: 19px; line-height: 1; cursor: pointer;
}
.daily-share-close:hover { color: var(--ink); }

.daily-share-body { display: grid; gap: 22px; padding: 26px 24px; }
.daily-share-title {
    font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 21px;
    color: var(--ink); line-height: 1.2; margin: 4px 0 6px;
}
.daily-share-lead { color: var(--cream-sub); font-size: 13.5px; line-height: 1.45; }
.daily-share-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.daily-share-actions .btn, .daily-share-actions .btn-cancel { width: 100%; padding: 13px; font-size: 16px; }
/* Vide, elle ne prend pas de place : le statut n'apparait qu'apres un geste. */
.daily-share-status { margin-top: 10px; font-size: 13px; color: var(--cream-sub); min-height: 18px; }

/* La reponse a la question que pose l'absence de palier, sur la carte du jour
   seulement : elle disparait le lendemain, quand la carte le porte. */
.daily-share-note {
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid var(--paper-border);
    border-radius: 14px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cream-sub);
}
.daily-share-note b { display: block; color: var(--ink); }

.daily-share-preview { display: flex; justify-content: center; }
/* `height: auto` tient le rapport de la carte : le `canvas` est dessine au
   double de sa taille d'affichage, et sans cela il s'afficherait a la taille de
   son bitmap. */
.daily-share-preview canvas {
    width: min(100%, 300px); height: auto;
    border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

/* A partir de la tablette, la carte se pose a cote de ce qu'on en fait, comme
   la maquette : on voit ce qu'on partage en cliquant sur « partager ». */
@media (min-width: 620px) {
    /* Le haut respire davantage que le bas : la carte est centree sur la
       hauteur, et sans cette marge son coin passe sous le bouton de fermeture. */
    .daily-share-body { grid-template-columns: 1fr 260px; align-items: center; padding: 52px 28px 34px; }
}

/* ==========================================================================
   Compte et pages légales
   ========================================================================== */

.account-page {
    display: grid;
    gap: var(--space-6);
    max-width: 1000px;
    margin-inline: auto;
}

.account-page > .ui-btn-back {
    justify-self: start;
}

.legal-page {
    display: grid;
    gap: 18px;
}

.legal-page > .ui-btn-back {
    justify-self: start;
}

.account-layout {
    min-height: 590px;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
    align-items: stretch;
    gap: 34px;
}

.account-intro {
    position: relative;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 30px 0 0 8px;
}

.account-eyebrow {
    color: var(--light-sub);
}

.account-eyebrow svg {
    flex: 0 0 auto;
}

.account-intro .ui-title {
    position: relative;
    z-index: 2;
    max-width: none;
    margin-top: 18px;
    color: var(--light);
    letter-spacing: -1px;
}

.account-title-line {
    display: block;
    white-space: nowrap;
}

.account-intro > .account-lead {
    position: relative;
    z-index: 2;
    max-width: 420px;
    margin: 17px 0 0;
    color: var(--light-sub);
    font-size: 16px;
    line-height: 1.55;
}

.account-benefits {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 23px;
}

.account-benefits > span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    color: var(--light);
    font-size: 12px;
}

.account-benefits svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--gold);
}

.account-mascot {
    position: relative;
    flex: 1;
    min-height: 230px;
    margin-top: 12px;
    pointer-events: none;
}

.account-mascot .ui-mascot {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: -15px;
    width: 245px !important;
    height: 245px !important;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 16px 13px rgba(12, 25, 46, .34));
}

.account-mascot-halo {
    position: absolute;
    right: -15px;
    bottom: -70px;
    width: 340px;
    height: 300px;
    border-radius: 48%;
    background: radial-gradient(ellipse at center, rgba(255, 225, 97, .25) 0%, rgba(255, 225, 97, .1) 42%, rgba(255, 225, 97, 0) 72%);
    filter: blur(2px);
    transform-origin: center;
    animation: account-halo-breathe 3.8s ease-in-out infinite;
}

@keyframes account-halo-breathe {
    50% {
        transform: scale(1.045);
        opacity: .72;
    }
}

.account-panel-stack {
    align-self: center;
    display: grid;
    gap: 24px;
}

.account-form-card {
    align-self: center;
    display: block;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 25px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), 0 22px 46px rgba(14, 31, 56, .29);
}

.account-form-heading {
    margin-bottom: 25px;
}

.account-form-heading .ui-eyebrow {
    margin-bottom: 7px;
}

.account-form-heading .ui-title {
    color: var(--ink);
}

.account-form-heading p {
    margin: 8px 0 0;
    color: var(--cream-sub);
    font-size: 14px;
}

.account-main-form {
    display: block;
}

.account-field {
    display: block;
    min-width: 0;
    margin-top: 16px;
}

.account-field > span:first-child,
.account-field > .account-field-label {
    display: block;
    margin-bottom: 7px;
    color: #6f5d3e;
    font: 700 12px var(--font-code);
    letter-spacing: .35px;
    text-transform: uppercase;
}

.account-field input,
.account-guest-form input {
    width: 100%;
    min-height: 53px;
    padding: 12px 14px;
    border: 2px solid #d8ccb2;
    border-radius: 14px;
    outline: 0;
    background: var(--tile);
    color: var(--ink);
    font: 600 16px var(--font-title);
}

.account-field input::placeholder,
.account-guest-form input::placeholder {
    color: #9a9385;
}

.account-field input:focus,
.account-guest-form input:focus {
    border-color: var(--mode);
    box-shadow: var(--ring);
}

.account-field input[readonly] {
    background: var(--tile-2);
    color: var(--cream-sub);
}

.account-field > ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    color: var(--danger);
    font-size: var(--type-sm);
    font-weight: 700;
}

.account-password {
    position: relative;
    display: block;
}

.account-password input {
    padding-right: 88px;
}

.account-password button {
    position: absolute;
    top: 50%;
    right: 7px;
    min-height: 37px;
    padding: 0 9px;
    border: 0;
    border-radius: 10px;
    background: #e8eef4;
    color: #3f5d7e;
    font-size: 11px;
    font-weight: 900;
    transform: translateY(-50%);
    cursor: pointer;
}

.account-password button:hover {
    background: #dce6ef;
}

.account-password button:focus-visible {
    outline: 3px solid rgba(74, 126, 200, .28);
    outline-offset: 2px;
}

.account-submit {
    min-height: 55px;
    margin-top: 22px;
}

.account-switch,
.account-legal-note {
    color: #746750;
    font-size: 13px;
    line-height: 1.45;
}

.account-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 22px 0 0;
    padding-top: 0;
    border-top: 0;
    text-align: center;
}

.account-legal-note {
    margin: 18px 0 0;
    text-align: center;
}

.account-switch a,
.account-legal-note a {
    color: #315f98;
    font-weight: 900;
    text-underline-offset: 2px;
}

.account-guest-card {
    display: grid;
    grid-template-columns: minmax(150px, .75fr) minmax(230px, 1.25fr);
    gap: 22px;
    align-items: end;
    padding: 24px;
}

.account-guest-copy .ui-eyebrow {
    margin-bottom: 5px;
}

.account-guest-copy .ui-title {
    color: var(--ink);
}

.account-guest-copy p {
    margin: 7px 0 0;
    color: var(--cream-sub);
    font-size: 13px;
    line-height: 1.4;
}

.account-guest-form {
    min-width: 0;
}

.account-guest-form > label {
    display: block;
    margin-bottom: 7px;
    color: #6f5d3e;
    font: 700 11px var(--font-code);
    letter-spacing: .35px;
    text-transform: uppercase;
}

.account-guest-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.account-guest-row .ui-btn {
    min-height: 53px;
    padding-inline: 18px;
}

.legal-hero {
    position: relative;
    min-height: 225px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    align-items: center;
    overflow: hidden;
    padding: 16px 30px 22px;
}

.legal-hero-copy {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.legal-hero .ui-eyebrow {
    color: #cbdcf1;
}

.legal-hero .ui-title {
    max-width: 800px;
    margin-top: 13px;
    color: var(--light);
    letter-spacing: -1px;
    text-wrap: balance;
}

.legal-hero-lead {
    max-width: 710px;
    margin: 12px 0 0;
    color: #d7e3f3;
    font-size: 15px;
    line-height: 1.55;
}

.legal-updated {
    display: inline-flex;
    margin: 17px 0 0;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: #d4e0f1;
    font-family: var(--font-code);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.legal-hero-mascot {
    position: relative;
    min-height: 225px;
    align-self: stretch;
    pointer-events: none;
}

.legal-mascot-halo {
    position: absolute;
    right: -38px;
    bottom: -100px;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 57%, transparent 58%);
}

.legal-hero-mascot .ui-mascot {
    position: absolute;
    z-index: 2;
    right: -7px;
    bottom: -30px;
    width: 225px !important;
    height: 225px !important;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 14px 12px rgba(12, 25, 46, .32));
}

.legal-layout {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.legal-toc {
    position: sticky;
    top: 90px;
    padding: 20px;
    border-radius: 20px;
}

.legal-toc .ui-eyebrow {
    margin: 0 4px 10px;
    color: #8a795d;
}

.legal-toc ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: legal-section;
}

.legal-toc li {
    counter-increment: legal-section;
}

.legal-toc a {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 7px 8px;
    border-radius: 10px;
    color: #625642;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.legal-toc a::before {
    content: counter(legal-section, decimal-leading-zero);
    color: #8a795d;
    font-family: var(--font-code);
    font-size: 10px;
    font-weight: 700;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
    background: rgba(74, 126, 200, .09);
    color: var(--ink);
}

.legal-document {
    min-width: 0;
    padding: 34px 38px;
    border-radius: 23px;
}

.legal-document section {
    scroll-margin-top: 100px;
}

.legal-document section + section {
    margin-top: var(--space-7);
    padding-top: var(--space-7);
    border-top: 1px solid var(--paper-border);
}

.legal-document h2 {
    margin: 0 0 var(--space-4);
    color: var(--ink);
    font-family: var(--font-title);
    font-size: var(--type-section);
    font-weight: 700;
    line-height: 1.15;
}

.legal-document p,
.legal-document li {
    color: var(--ink-soft);
    font-size: var(--type-body);
    line-height: 1.72;
}

.legal-document p {
    margin: 0;
}

.legal-document p + p,
.legal-document ul + p {
    margin-top: var(--space-4);
}

.legal-document ul {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.legal-document a {
    color: var(--mode-dark);
    font-weight: 800;
}

.legal-document-lead {
    padding: var(--space-5);
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(250, 204, 21, .1);
    color: var(--ink) !important;
    font-family: var(--font-title);
    font-size: var(--type-card) !important;
    font-weight: 600;
}

.legal-related {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--paper-border);
}

.legal-related a {
    font-size: var(--type-sm);
}

@media (max-width: 900px) {
    .account-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .account-intro {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 210px;
        align-items: center;
        padding-bottom: 0;
    }

    .account-mascot {
        width: 210px;
        min-height: 210px;
    }

    .account-mascot-halo {
        width: 230px;
        height: 230px;
    }

    .account-mascot .ui-mascot {
        width: 190px !important;
        height: 190px !important;
    }

    .legal-layout {
        min-width: 0;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-toc {
        position: static;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        padding: 8px;
    }

    .legal-toc .ui-eyebrow {
        display: none;
    }

    .legal-toc ol {
        display: flex;
        min-width: 0;
        max-width: 100%;
        gap: 6px;
        overflow-x: auto;
        margin: 0;
        scrollbar-width: none;
    }

    .legal-toc ol::-webkit-scrollbar {
        display: none;
    }

    .legal-toc li {
        flex: 0 0 auto;
    }

    .legal-toc a {
        display: flex;
        min-height: 40px;
        white-space: nowrap;
    }
}

@media (max-width: 700px) {
    .account-page,
    .legal-page {
        gap: var(--space-5);
    }

    .account-intro {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .account-intro-copy {
        gap: var(--space-4);
    }

    .account-mascot {
        width: 100%;
        min-height: 180px;
    }

    .account-mascot-halo {
        width: 210px;
        height: 210px;
    }

    .account-mascot .ui-mascot {
        width: 170px !important;
        height: 170px !important;
    }

    .account-guest-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .account-guest-row {
        grid-template-columns: 1fr;
    }

    .account-guest-row .ui-btn {
        width: 100%;
    }

    .legal-hero {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        padding: 8px 5px 12px;
    }

    .legal-hero-copy {
        min-width: 0;
        width: 100%;
    }

    .legal-hero .ui-title {
        max-width: 100%;
        margin-top: 10px;
        font-size: clamp(26px, 8vw, 31px);
        line-height: 1.08;
        overflow-wrap: anywhere;
        text-wrap: wrap;
    }

    .legal-hero-lead {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.45;
    }

    .legal-updated {
        max-width: 100%;
        white-space: normal;
        font-size: 9px;
        line-height: 1.35;
    }

    .legal-hero-mascot {
        display: none;
    }

    .legal-document {
        min-width: 0;
        max-width: 100%;
        padding: 25px 19px;
        border-radius: 19px;
        overflow-wrap: anywhere;
    }

    .legal-document p,
    .legal-document li,
    .legal-document a {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 430px) {
    .account-form-card,
    .account-guest-card {
        padding: var(--space-5);
    }

    .legal-toc,
    .legal-document {
        border-radius: var(--radius-xl);
    }

    .legal-document {
        padding: var(--space-5) var(--space-4);
    }

    .legal-document section + section {
        margin-top: var(--space-6);
        padding-top: var(--space-6);
    }
}

/* Ajustements responsive des pages compte, alignés sur le prototype. */
@media (max-width: 820px) {
    .account-layout {
        grid-template-columns: minmax(0, .8fr) minmax(390px, 1.2fr);
        gap: 22px;
    }

    .account-intro .ui-title {
        font-size: 39px;
    }

    .account-benefits {
        display: grid;
    }

    .account-benefits > span {
        width: fit-content;
    }
}

@media (max-width: 700px) {
    .account-page {
        gap: 10px;
    }

    .account-layout {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .account-intro {
        min-height: 125px;
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        align-items: end;
        column-gap: 8px;
        row-gap: 0;
        overflow: hidden;
        padding: 4px 5px 0;
        text-align: left;
    }

    .account-eyebrow {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
    }

    .account-intro .ui-title {
        grid-column: 2;
        grid-row: 2;
        max-width: 100%;
        margin-top: 7px;
        font-size: clamp(25px, 7.5vw, 30px);
        line-height: 1.02;
        text-align: left;
    }

    .account-intro > .account-lead {
        display: none;
    }

    .account-benefits {
        display: none;
    }

    .account-mascot {
        position: relative;
        grid-column: 1;
        grid-row: 1 / span 2;
        right: auto;
        bottom: auto;
        width: 105px;
        min-height: 110px;
        margin: 0;
        align-self: end;
    }

    .account-mascot-halo {
        right: auto;
        left: -15px;
        bottom: -42px;
        width: 135px;
        height: 135px;
    }

    .account-mascot .ui-mascot {
        right: auto;
        left: 0;
        bottom: -2px;
        width: 105px !important;
        height: 105px !important;
    }

    .account-intro-register .account-mascot-register {
        right: auto;
        bottom: auto;
        width: 105px;
        min-height: 108px;
    }

    .account-intro-register .account-mascot-register .ui-mascot {
        right: auto;
        left: -25px;
        bottom: -2px;
        width: 150px !important;
        height: 102px !important;
        transform: none;
    }

    .account-intro-register .account-mascot-halo {
        right: auto;
        left: -18px;
        bottom: -42px;
        width: 140px;
        height: 135px;
        margin-left: 0;
    }

    .account-panel-stack {
        gap: 14px;
    }

    .account-form-card {
        padding: 24px 19px;
        border-radius: 20px;
    }

    .account-form-heading {
        margin-bottom: 17px;
    }

    .account-field {
        margin-top: 14px;
    }

    .account-field input,
    .account-guest-form input {
        min-height: 51px;
    }

    .account-guest-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 19px;
    }

    .account-guest-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .account-guest-row .ui-btn {
        width: auto;
        min-height: 51px;
    }
}

@media (max-width: 430px) {
    .account-title-line {
        white-space: normal;
    }

    .account-intro .ui-title {
        max-width: 100%;
        font-size: 24px;
    }

    .account-guest-row {
        grid-template-columns: 1fr;
    }

    .account-guest-row .ui-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-mascot-halo {
        animation: none;
    }
}


/* La pose d'inscription est panoramique, contrairement à la pose de connexion.
   Sa boîte suit donc son vrai ratio pour conserver la même taille visuelle. */
.account-mascot-register .ui-mascot {
    right: -70px;
    bottom: -10px;
    width: 360px !important;
    height: 240px !important;
}

/* Le halo peut dépasser de la colonne, puis disparaît naturellement sous la
   carte crème qui est au-dessus. Cela évite une coupe verticale dans le vide. */
@media (min-width: 701px) {
    .account-intro {
        overflow: visible;
    }

    .account-panel-stack,
    .account-layout > .account-form-card {
        position: relative;
        z-index: 2;
    }
}