/* « Cueillette » (nom de travail) — id technique blueberry.
   Ambiance verger au crépuscule : un plan de jardin sur papier clair (massifs teintés
   de verts, haies, baies bleu myrtille) posé sur un fond indigo ; un seul accent
   myrtille. DEUX polices libres, auto-hébergées : Fraunces (OFL, serif douce à
   empattements souples) pour les titres et les nombres, Alegreya Sans (OFL, humaniste
   calligraphique) pour tout le texte courant. */

@font-face{font-family:'BB Titre';font-style:normal;font-weight:400;font-display:swap;src:url('/joueur/blueberry/fraunces-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'BB Titre';font-style:normal;font-weight:700;font-display:swap;src:url('/joueur/blueberry/fraunces-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'BB Texte';font-style:normal;font-weight:400;font-display:swap;src:url('/joueur/blueberry/alegreya-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'BB Texte';font-style:normal;font-weight:700;font-display:swap;src:url('/joueur/blueberry/alegreya-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'BB Texte';font-style:italic;font-weight:400;font-display:swap;src:url('/joueur/blueberry/alegreya-sans-latin-400-italic.woff2') format('woff2')}

.bb{--nuit:#0c1024;--panneau:#171d3d;--trait:#34407a;--texte:#eef0fb;--muted:#9fa9cc;
 --papier:#f3efdc;--feuille:#2b3a22;--haie:#2d5a33;--accent:#8a7dff;--accent-clair:#c3bcff;--myrtille:#4150c4;--erreur:#f0200c;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);font:400 15.5px 'BB Texte','Trebuchet MS',sans-serif;
 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
 background:
  radial-gradient(120% 50% at 50% 0,rgba(94,84,214,.22),transparent 70%),
  radial-gradient(90% 40% at 50% 100%,rgba(60,120,70,.16),transparent 70%),
  var(--nuit)}
.bb *{box-sizing:border-box}
.bb button{font:700 15px 'BB Texte','Trebuchet MS',sans-serif;letter-spacing:.2px;color:var(--texte);background:var(--panneau);border:1.5px solid var(--trait);border-radius:9px;
 min-height:44px;padding:8px 12px 7px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 0 #000}
.bb button:active{transform:translateY(1px);filter:brightness(1.2)}
.bb button:disabled{opacity:.35;cursor:default}
.bb button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bb button.primary{background:var(--papier);border-color:var(--papier);color:#1d2a22;box-shadow:4px 4px 0 var(--accent)}
.bb button.primary:active{box-shadow:2px 2px 0 var(--accent);transform:translate(2px,2px)}

/* En-tête : un bandeau crépusculaire, souligné d'une haie en pointillé. */
.bb header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;background:linear-gradient(#2a3786,#161d56);
 font:700 23px/1 'BB Titre',Georgia,serif;letter-spacing:.2px;color:var(--texte)}
.bb header::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:6px;z-index:2;background:repeating-linear-gradient(90deg,#5aa05a 0 9px,transparent 9px 15px),#0c1a14}
.bb header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:400 28px/1 'BB Texte','Trebuchet MS',sans-serif;color:var(--texte)}
.bb header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb header .aide{min-height:32px;width:32px;padding:0;border-radius:50%;background:transparent;border:1.5px solid var(--texte);color:var(--texte);font:700 16px/1 'BB Texte','Trebuchet MS',sans-serif;box-shadow:none}
.bb main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:8px}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.bb .home{padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.bb .pad{padding:16px}
.bb .eyebrow{font:700 10.5px 'BB Texte','Trebuchet MS',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--accent-clair)}
.bb .hero{display:flex;align-items:center;gap:14px}
.bb .hero img{width:76px;height:76px;flex-shrink:0;border-radius:18px;box-shadow:5px 5px 0 var(--accent)}
.bb h1{margin:3px 0 0;white-space:nowrap;font:700 29px/1.05 'BB Titre',Georgia,serif;letter-spacing:0;color:var(--texte)}
.bb .devise{margin-top:3px;color:var(--muted);font:italic 400 17px/1.1 'BB Texte','Trebuchet MS',sans-serif}
.bb .pitch{margin:0;font-size:14.5px;line-height:1.38;color:#dde1f4}
.bb b{font-weight:700;color:var(--texte)}
.bb .stats{display:flex;gap:8px}
.bb .stats span{flex:1;white-space:nowrap;padding:6px 9px 5px;background:var(--panneau);border:1.5px solid var(--trait);border-radius:9px;font:700 9.5px 'BB Texte','Trebuchet MS',sans-serif;letter-spacing:.9px;color:var(--muted);text-transform:uppercase}
.bb .stats b{display:block;font:700 24px/1.05 'BB Titre',Georgia,serif;letter-spacing:0;color:var(--texte);text-transform:none;margin-bottom:1px}
.bb button.grand{min-height:54px;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;white-space:nowrap;padding-left:6px;padding-right:6px}
.bb button.grand small{font:400 12px 'BB Texte','Trebuchet MS',sans-serif;letter-spacing:0;opacity:.8}
.bb .row{display:flex;gap:8px}
.bb .row>*{flex:1}
.bb .row.accueil{padding-right:4px}
.bb .note{margin-top:auto;font-size:13px;color:var(--muted);line-height:1.38;border-top:1.5px dashed var(--trait);padding-top:8px}
.bb .note.hors-ligne{color:var(--accent-clair)}

/* Carte du parcours : chaque grille cueillie se remplit. */
.bb .pagination{display:flex;align-items:center;gap:8px}
.bb .pagination h2{flex:1;text-align:center;margin:0;font:700 24px/1 'BB Titre',Georgia,serif;letter-spacing:0;color:var(--texte)}
.bb .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.bb .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.bb .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:700 10px 'BB Texte','Trebuchet MS',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-clair)}
.bb .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:6px;font:700 12px 'BB Texte','Trebuchet MS',sans-serif;background:#10152f;color:#5d6896;border-color:#1d2547;box-shadow:none}
.bb .carte-niveaux .case.faite{background:var(--myrtille);color:#fff;border-color:#6b78e0}
.bb .carte-niveaux .case.ouverte{background:#070a1b;color:var(--texte);border:2px solid var(--accent)}
.bb .carte-niveaux .case:disabled{opacity:1}

/* ── Jeu ─────────────────────────────────────────────────────────────────── */
.bb .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.bb .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 16px 4px}
.bb .hud .niv{font:700 30px/1 'BB Titre',Georgia,serif;letter-spacing:0;color:var(--texte)}
.bb .hud small{display:block;font:700 10px 'BB Texte','Trebuchet MS',sans-serif;letter-spacing:1px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.bb .hud .chrono{font:700 24px/1 'BB Titre',Georgia,serif;text-align:right}
.bb .plateau{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
/* Cadre de bois clair, liseré doré, ombre portée accent. */
.bb .cadre{padding:8px;border-radius:9px;background:linear-gradient(135deg,#8a6a3e,#5c4126 45%,#7a5a33);
 box-shadow:inset 0 0 0 1.5px #d6b97a,inset 0 0 0 4px #3a2815,6px 6px 0 var(--accent),0 12px 28px rgba(0,0,0,.7)}
.bb svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:3px;overflow:visible}
/* Plan : papier clair, marges des nombres teintées de vert. */
.bb svg.grille .plan{fill:var(--papier);stroke:#6f7a55;stroke-width:.3}
.bb svg.grille .bande{fill:rgba(96,140,84,.2);stroke:none}
.bb svg.grille .fines{fill:none;stroke:rgba(43,70,38,.3);stroke-width:.15}
/* Haies : un feuillage sombre doublé d'un cœur plus clair, aux bouts arrondis. */
.bb svg.grille .haie-ombre{fill:none;stroke:var(--haie);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.bb svg.grille .haie{fill:none;stroke:#7dc06a;stroke-width:.42;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.05 1.3}
/* Baies : bleu pruiné, couronne sombre, reflet. */
.bb svg.grille .baie .chair{fill:url(#bb-chair);stroke:#121850;stroke-width:.25}
.bb svg.grille .baie .pruine{fill:#fff;opacity:.5}
.bb svg.grille .baie .couronne{fill:#10154a;opacity:.92}
.bb svg.grille .baie{filter:drop-shadow(.25px .35px .25px rgba(10,14,50,.45))}
.bb svg.grille .ecartee{fill:none;stroke:#55703f;stroke-width:.5;stroke-linecap:round;opacity:.72}
/* Nombres : à la marge, et dans la première case de chaque massif. */
.bb svg.grille .nombre .pastille{fill:rgba(255,255,255,0)}
.bb svg.grille .nombre text{fill:var(--feuille);font:700 5.3px 'BB Titre',Georgia,serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.bb svg.grille .etiquette rect{fill:rgba(255,255,255,.82);stroke:rgba(43,70,38,.55);stroke-width:.2}
.bb svg.grille .etiquette text{fill:var(--feuille);font:700 3.2px 'BB Titre',Georgia,serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
/* Compte juste : le nombre s'allume (pastille myrtille, chiffre clair). */
.bb svg.grille .nombre.ok .pastille{fill:var(--myrtille)}
.bb svg.grille .nombre.ok text{fill:#fff}
.bb svg.grille .etiquette.ok rect{fill:var(--myrtille);stroke:#121850}
.bb svg.grille .etiquette.ok text{fill:#fff}
/* Compte dépassé ou qui ne peut plus être atteint : terre cuite, nombre barré. */
.bb svg.grille .nombre.faux .pastille{fill:#f1d9b8;stroke:#b8651f;stroke-width:.3}
.bb svg.grille .nombre.faux text{fill:#8f4a12}
.bb svg.grille .etiquette.faux rect{fill:#f1d9b8;stroke:#b8651f}
.bb svg.grille .etiquette.faux text{fill:#8f4a12}
.bb svg.grille .barre{fill:none;stroke:#b8651f;stroke-width:.55;stroke-linecap:round}
.bb svg.grille .zone{fill:rgba(138,125,255,.16);stroke:var(--accent);stroke-width:.8}
.bb svg.grille .curseur{fill:none;stroke:#1d2a22;stroke-width:.9;stroke-dasharray:2 1}
/* Victoire : les baies se gonflent en onde depuis le centre. */
.bb .grille.gagne .pose{transform-box:fill-box;transform-origin:center;animation:bb-gonfle .7s cubic-bezier(.4,0,.2,1) both}
@keyframes bb-gonfle{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}
/* Cartouche de victoire : un tampon rond, des anneaux de jus qui s'élargissent. */
.bb .sacre{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:auto;
 background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);opacity:0;animation:bb-fondu .3s ease var(--attente) forwards}
.bb .sacre.congedie{animation:bb-congedie .3s ease forwards;pointer-events:none}
.bb .sacre .ondes{position:absolute;left:50%;top:50%;width:0;height:0}
.bb .sacre .ondes i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:4px solid var(--accent);opacity:0;
 animation:bb-onde 1.5s cubic-bezier(.2,.6,.3,1) calc(var(--attente) + var(--k) * 140ms) forwards}
.bb .sacre .ondes i:nth-child(even){border-color:#5aa05a;border-style:double}
.bb .sacre .carte{position:relative;min-width:236px;max-width:300px;padding:30px 16px 12px;text-align:center;border-radius:9px;
 background:#0e1230;border:2px solid var(--papier);box-shadow:6px 6px 0 var(--accent),0 14px 34px rgba(0,0,0,.75);
 transform:scale(.3);animation:bb-sacre .6s cubic-bezier(.2,1.5,.4,1) var(--attente) forwards}
.bb .sacre .embleme{position:absolute;left:50%;top:-26px;width:50px;height:50px;margin-left:-25px;border-radius:50%;box-shadow:0 0 0 2px #0e1230;
 animation:bb-tourne 2.4s linear calc(var(--attente) + .3s) infinite}
.bb .sacre .titre{font:700 27px/1.1 'BB Titre',Georgia,serif;letter-spacing:0;color:var(--texte);white-space:nowrap}
.bb .sacre .detail{margin-top:4px;font:italic 400 17px/1.15 'BB Texte','Trebuchet MS',sans-serif;color:var(--accent-clair)}
@keyframes bb-fondu{to{opacity:1}}
@keyframes bb-congedie{from{opacity:1}to{opacity:0}}
@keyframes bb-sacre{to{transform:scale(1)}}
@keyframes bb-onde{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(4.2)}}
@keyframes bb-tourne{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.bb .plateau:has(.gagne) .cadre{box-shadow:inset 0 0 0 1.5px #d6b97a,inset 0 0 0 4px #3a2815,6px 6px 0 var(--accent),0 0 34px rgba(243,239,220,.35)}
/* Supposition en cours : cadre accent (liseré rouge si contradiction). */
.bb .plateau.suppose .cadre{background:repeating-linear-gradient(45deg,var(--accent-clair) 0 3px,#2d1f6e 3px 6px);box-shadow:0 0 0 1.5px var(--accent-clair),6px 6px 0 var(--accent),0 12px 28px rgba(0,0,0,.7)}
.bb .plateau.suppose.faux .cadre{box-shadow:0 0 0 3px var(--erreur),6px 6px 0 var(--accent),0 12px 28px rgba(0,0,0,.7)}
/* Hauteur fixe (deux lignes) : un message qui change ne déplace pas la grille. */
.bb .message{flex:0 0 auto;height:42px;padding:6px 14px 0;overflow:hidden;text-align:center;font-size:13.5px;line-height:1.3;color:var(--muted)}
.bb .message.alerte{color:#f0b27a}
.bb .message.conseil{color:var(--texte)}
.bb .message.suppose{color:var(--accent-clair)}
.bb .message.gagne{color:var(--texte);font:700 18px/1.1 'BB Titre',Georgia,serif;padding-top:4px}
.bb .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px 7px}
.bb .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.bb .outils button{min-height:42px;padding:8px 2px 6px;font-size:13px;letter-spacing:-.1px;white-space:nowrap;overflow:hidden}
.bb .outils button.large{grid-column:1/-1}
.bb .outils button.what-if{color:var(--accent-clair);border-color:#4d4a96}
.bb .outils button.what-if.active{background:var(--accent);color:#fff;border-color:var(--accent-clair)}
.bb .outils button.what-if.faux{background:#b3261e;color:#fff3ee;border-color:#ff9d96}

/* ── Écran de scores de la grille ────────────────────────────────────────── */
.bb .scores{gap:10px}
.bb h2.titre-scores{margin:0;font:700 28px/1 'BB Titre',Georgia,serif;letter-spacing:0;color:var(--texte)}
.bb .resultat{border-radius:9px;padding:10px;text-align:center;color:#1d2a22;background:var(--papier);box-shadow:6px 6px 0 var(--accent)}
.bb .resultat .temps{font:700 42px/1.1 'BB Titre',Georgia,serif}
.bb .resultat p{margin:2px 0 0;font-size:14px;line-height:1.35}
.bb .resultat .record{color:#3b2fa8}
.bb .outils.bas{margin-top:auto;padding:0}
.bb .scores .note{margin-top:0}

/* ── Tutoriel ────────────────────────────────────────────────────────────── */
.bb .tuto{gap:12px}
.bb h2.titre-tuto{margin:0;font:700 27px/1.05 'BB Titre',Georgia,serif;letter-spacing:0;color:var(--texte)}
.bb .tuto .cadre{align-self:center;margin:4px 0 6px}
.bb svg.grille.illu{width:210px;height:210px}
.bb .points{display:flex;justify-content:center;gap:8px}
.bb .points i{width:10px;height:10px;border-radius:50%;background:var(--trait)}
.bb .points i.on{background:var(--papier);box-shadow:2px 2px 0 var(--accent)}

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.bb .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,7,20,.82);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.bb .fenetre{width:100%;max-width:300px;padding:20px 16px;border-radius:9px;display:flex;flex-direction:column;gap:10px;text-align:center;
 background:#0e1230;border:2px solid var(--papier);box-shadow:6px 6px 0 var(--accent),0 12px 40px rgba(0,0,0,.7)}
.bb .fenetre h2{margin:0;font:700 28px/1.05 'BB Titre',Georgia,serif;letter-spacing:0;color:var(--texte)}
.bb .fenetre p{margin:0;font-size:14.5px;line-height:1.4;color:#dde1f4}
/* Écrans bas : chaque pixel gagné va à la grille. */
.bb.compact header{height:44px;font-size:21px}
.bb.compact .hud{padding:5px 16px 3px}
.bb.compact .hud .niv{font-size:25px}
.bb.compact .hud .chrono{font-size:20px}
.bb.compact .hud small{margin-top:3px}
.bb.compact .message{height:37px;padding-top:4px;font-size:12.5px;line-height:1.25}
.bb.compact .message.gagne{font-size:16px;line-height:1.05;padding-top:2px}
.bb.compact .outils{gap:6px;padding-bottom:5px}
.bb.compact .outils button{min-height:38px;padding:7px 2px 5px}
.bb.compact .outils.deux{padding-bottom:8px}
.bb.compact .home{gap:6px;padding:9px 16px 8px}
.bb.compact .hero img{width:64px;height:64px;border-radius:15px}
.bb.compact h1{font-size:26px}
.bb.compact .pitch{font-size:14px;line-height:1.32}
.bb.compact .stats span{padding:4px 9px 3px}
.bb.compact .stats b{font-size:21px}
.bb.compact button.grand{min-height:50px}
.bb.compact .home>.row>button{min-height:40px}
.bb.compact .note{font-size:12.5px;padding-top:6px}
@media (prefers-reduced-motion:reduce){.bb .sacre .ondes{display:none}.bb .grille.gagne .pose{animation-duration:.01s}.bb .sacre,.bb .sacre .carte,.bb .sacre .embleme{animation-duration:.01s;animation-iteration-count:1}}

/* Grilles libres : une rangée de boutons de plus sur l'accueil ; sur écran
   bas, la note explicative du bas lui cède la place. */
.bb.compact .home.accueil>.note:not(.hors-ligne){display:none}

/* Chiffres alignés sur la ligne : Fraunces et Alegreya Sans ont des chiffres elzéviriens par défaut. Dernière règle, en !important : le raccourci `font` des règles précédentes remettrait la fonction à zéro. */
.bb,.bb *{font-variant-numeric:lining-nums!important;font-feature-settings:'lnum' 1!important}