/* « Grand Livre » (nom choisi par Stan le 2026-10-24) — id technique circlesum.
   Ambiance livre de comptes : vieux papier un peu blanc réglé de vert sur tapis de
   comptoir, objectifs imprimés en haut et à gauche, sommes tenues à la plume en bas
   et à droite sous un double trait ; un seul accent orchidée. DEUX polices libres,
   auto-hébergées, pour tout le jeu — celles de la grille : Special Elite (OFL/Apache,
   machine à écrire administrative) pour les objectifs et tout le texte courant de
   l'interface, Petit Formal Script (OFL, anglaise à la plume) pour la grille, les
   sommes et les titres. Papier : texture de vieux papier (papier.svg, carreau qui se
   raccorde, fabriqué par tools/papier.js). */

/* Plages de graisses déclarées : pas de gras synthétique (ces deux polices n'en ont pas). */
@font-face{font-family:'CS Plume';font-style:normal;font-weight:100 900;font-display:swap;src:url('/joueur/circlesum/petit-formal-script.woff2') format('woff2')}
@font-face{font-family:'CS Machine';font-style:normal;font-weight:100 900;font-display:swap;src:url('/joueur/circlesum/special-elite.woff2') format('woff2')}

.cs{--nuit:#0d1914;--panneau:#1a2b23;--trait:#35503f;--texte:#f1ecd6;--muted:#a3b7a6;
 --papier:#f7f4e8;--plume:#371a6b;--cuir:#235240;--cuir2:#143325;--encre:#6a2fa8;--accent:#b36be0;--accent-clair:#dcbdf5;--erreur:#f0200c;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);font:400 14.5px 'CS Machine','Courier New',monospace;

 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
 background:
  repeating-linear-gradient(0deg,rgba(160,215,175,.045) 0 1px,transparent 1px 24px),
  var(--nuit)}
.cs *{box-sizing:border-box}
.cs button{font:400 14px 'CS Machine','Courier New',monospace;letter-spacing:0;color:var(--texte);background:var(--panneau);border:1.5px solid var(--trait);border-radius:7px;
 min-height:44px;padding:8px 12px 7px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 0 #000}
.cs button:active{transform:translateY(1px);filter:brightness(1.2)}
.cs button:disabled{opacity:.35;cursor:default}
.cs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cs button.primary{background:var(--papier);border-color:var(--papier);color:#1d2a22;box-shadow:4px 4px 0 var(--accent)}
.cs button.primary:active{box-shadow:2px 2px 0 var(--accent);transform:translate(2px,2px)}

/* En-tête : reliure verte, soulignée d'une perforation accent. */
.cs header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;background:linear-gradient(#2c6650,#173a2c);
 font:400 31px/1 'CS Plume','Brush Script MT',cursive;letter-spacing:.5px;color:var(--texte)}
.cs header::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:6px;z-index:2;background:repeating-linear-gradient(90deg,var(--accent) 0 9px,transparent 9px 15px),#0f2219}
.cs header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:400 26px/1 'CS Machine','Courier New',monospace;color:var(--texte)}
.cs header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.cs header .aide{min-height:32px;width:32px;padding:0;border-radius:50%;background:transparent;border:1.5px solid var(--texte);color:var(--texte);font:400 16px/1 'CS Machine','Courier New',monospace;box-shadow:none}
.cs main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:8px}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.cs .home{padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.cs .pad{padding:16px}
.cs .eyebrow{font:400 10.5px 'CS Machine','Courier New',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--accent-clair)}
.cs .hero{display:flex;align-items:center;gap:14px}
.cs .hero img{width:76px;height:76px;flex-shrink:0;border-radius:16px;box-shadow:5px 5px 0 var(--accent)}
.cs h1{margin:3px 0 0;white-space:nowrap;font:400 32px/1.05 'CS Plume','Brush Script MT',cursive;letter-spacing:0;color:var(--texte)}
.cs .devise{margin-top:3px;color:var(--muted);font:400 18px/1.1 'CS Plume','Brush Script MT',cursive}
.cs .pitch{margin:0;font-size:13.5px;line-height:1.42;color:#dfe6d3}
/* Pas de gras (la machine n'en a pas) : le mot important est souligné. */
.cs b{font-weight:400;color:var(--texte);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
.cs .stats{display:flex;gap:8px}
.cs .stats span{flex:1;white-space:nowrap;padding:6px 9px 5px;background:var(--panneau);border:1.5px solid var(--trait);border-radius:7px;font:400 8.5px 'CS Machine','Courier New',monospace;letter-spacing:.9px;color:var(--muted);text-transform:uppercase}
.cs .stats b{display:block;font:400 27px/1.05 'CS Plume','Brush Script MT',cursive;letter-spacing:0;color:var(--texte);text-transform:none;text-decoration:none;margin-bottom:1px}
.cs button.grand{min-height:54px;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;white-space:nowrap;padding-left:6px;padding-right:6px}
.cs button.grand small{font:400 11px 'CS Machine','Courier New',monospace;letter-spacing:0;opacity:.8}
.cs .row{display:flex;gap:8px}
.cs .row>*{flex:1}
.cs .row.accueil{padding-right:4px}
.cs .note{margin-top:auto;font-size:12px;color:var(--muted);line-height:1.4;border-top:1.5px dashed var(--trait);padding-top:8px}
.cs .note.hors-ligne{color:var(--accent-clair)}

/* Carte du parcours : chaque grille soldée passe sur papier. */
.cs .pagination{display:flex;align-items:center;gap:8px}
.cs .pagination h2{flex:1;text-align:center;margin:0;font:400 28px/1 'CS Plume','Brush Script MT',cursive;letter-spacing:0;color:var(--texte)}
.cs .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.cs .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.cs .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:400 9.5px 'CS Machine','Courier New',monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-clair)}
.cs .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:4px;font:400 12px 'CS Machine','Courier New',monospace;background:#15231c;color:#587566;border-color:#21352b;box-shadow:none}
.cs .carte-niveaux .case.faite{background:var(--papier);color:#1d2a22;border-color:var(--papier)}
.cs .carte-niveaux .case.ouverte{background:#09120d;color:var(--texte);border:2px solid var(--accent)}
.cs .carte-niveaux .case:disabled{opacity:1}

/* ── Jeu ─────────────────────────────────────────────────────────────────── */
.cs .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.cs .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 16px 4px}
.cs .hud .niv{font:400 36px/1 'CS Plume','Brush Script MT',cursive;letter-spacing:0;color:var(--texte)}
.cs .hud small{display:block;font:400 9px 'CS Machine','Courier New',monospace;letter-spacing:1px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.cs .hud .chrono{font:400 24px/1 'CS Machine','Courier New',monospace;text-align:right}
.cs .plateau{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
/* Reliure : toile verte, liseré doré, ombre portée accent. */
.cs .cadre{padding:8px;border-radius:7px;background:linear-gradient(135deg,#2f6a50,#1d4535 45%,#285c45);
 box-shadow:inset 0 0 0 1.5px #c9b26a,inset 0 0 0 4px #143325,6px 6px 0 var(--accent),0 12px 28px rgba(0,0,0,.7)}
.cs svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:3px;overflow:visible}
/* Page : fond uni (le temps que la texture charge), puis vieux papier par-dessus. */
.cs svg.grille .papier-base{fill:#f7f4e8}
.cs svg.grille .papier{fill:url(#cs-papier);stroke:#7a8a74;stroke-width:.3}
.cs svg.grille .marge{fill:rgba(118,160,124,.2)}
.cs svg.grille .regle{fill:none;stroke:#8fb094;stroke-width:.2;opacity:.8}
.cs svg.grille .somme-trait{fill:none;stroke:#34503f;stroke-width:.3}
.cs svg.grille .somme-trait.double{stroke-width:.35}
/* Grille : chiffres écrits à la plume. */
.cs svg.grille .chiffre{fill:var(--plume);stroke:var(--plume);stroke-width:.1;paint-order:stroke;font:400 6.3px 'CS Plume','Brush Script MT',cursive;text-anchor:middle;dominant-baseline:central;pointer-events:none}
/* Case éliminée : assombrie, chiffre estompé et barré d'une croix fine à la plume. */
.cs svg.grille .case .fond{fill:#1f2d25;opacity:.45}
.cs svg.grille .case.elimine .chiffre{opacity:.5}
.cs svg.grille .case .croix{fill:none;stroke:var(--plume);stroke-width:.3;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
/* Chiffre entouré (pense-bête « celui-là reste ») : un rond tracé à la plume, d'encre violette. */
.cs svg.grille .case .rond{fill:none;stroke:var(--encre);stroke-width:.42;stroke-linecap:round;stroke-linejoin:round}
/* Objectifs : imprimés à la machine, en haut et à gauche. */
.cs svg.grille .objectif{fill:#1f2d25;font:400 5.6px 'CS Machine','Courier New',monospace;text-anchor:middle;dominant-baseline:central;pointer-events:none}
/* Sommes actuelles : à la plume, 40 % plus petites que la grille (demande de Stan), soulignées d'un double trait quand elles rejoignent l'objectif. */
.cs svg.grille .somme text{fill:var(--plume);stroke:var(--plume);stroke-width:.06;paint-order:stroke;font:400 3.8px 'CS Plume','Brush Script MT',cursive;text-anchor:middle;dominant-baseline:central;pointer-events:none}
/* Somme juste : double trait tracé à la plume. Somme impossible : griffonnage violet. */
.cs svg.grille .somme .souligne{fill:none;stroke:var(--plume);stroke-width:.26;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.cs svg.grille .somme .griffe{fill:none;stroke:#7a3fd1;stroke-width:.4;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.cs svg.grille .zone{fill:rgba(179,107,224,.16);stroke:var(--accent);stroke-width:.9}
.cs svg.grille .curseur{fill:none;stroke:#1f2d25;stroke-width:.9;stroke-dasharray:2 1}
/* Victoire : les chiffres restants se tamponnent en onde depuis le centre. */
.cs .grille.gagne .case.reste .chiffre{transform-box:fill-box;transform-origin:center;animation:cs-tampon .7s cubic-bezier(.4,0,.2,1) both;animation-delay:inherit}
@keyframes cs-tampon{0%{transform:scale(1);filter:none}45%{transform:scale(1.4);filter:brightness(.7)}100%{transform:scale(1);filter:none}}
/* Victoire : un gros tampon de bureau « APPROUVÉ » se pose en travers de la grille, en
   dézoomant (il arrive grand et flou-transparent, se plaque, rebondit à peine). Encre
   en multiplication : elle fonce le papier au lieu de le recouvrir. */
.cs .tampon{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:auto;mix-blend-mode:multiply}
.cs .tampon.congedie{animation:cs-tampon-fin .3s ease forwards;pointer-events:none}
.cs .tampon svg{width:var(--larg,80%);height:auto;overflow:visible;transform:rotate(-13deg);opacity:0;animation:cs-pose .6s cubic-bezier(.15,.85,.3,1) var(--attente) forwards}
.cs .tampon .t-cadre{fill:none;stroke:#cf1b22;stroke-width:8}
.cs .tampon .t-filet{fill:none;stroke:#cf1b22;stroke-width:2.6}
.cs .tampon .t-texte{fill:#cf1b22;font:400 60px 'CS Machine','Courier New',monospace}
@keyframes cs-pose{0%{opacity:0;transform:rotate(-13deg) scale(3.6)}12%{opacity:.35}60%{opacity:.95;transform:rotate(-13deg) scale(.95)}80%{transform:rotate(-13deg) scale(1.025)}100%{opacity:.93;transform:rotate(-13deg) scale(1)}}
@keyframes cs-tampon-fin{from{opacity:1}to{opacity:0}}
/* Le coup du tampon fait tressauter le cadre au moment de l'impact. */
.cs .plateau.tamponne .cadre{animation:cs-secousse .28s ease-out calc(var(--attente) + .34s)}
@keyframes cs-secousse{0%{transform:translateY(0)}30%{transform:translateY(2.5px)}65%{transform:translateY(-1px)}100%{transform:translateY(0)}}
.cs .plateau:has(.gagne) .cadre{box-shadow:inset 0 0 0 1.5px #c9b26a,inset 0 0 0 4px #143325,6px 6px 0 var(--accent),0 0 34px rgba(247,244,232,.35)}
/* Supposition en cours : cadre accent (liseré rouge si contradiction). */
.cs .plateau.suppose .cadre{background:repeating-linear-gradient(45deg,var(--accent-clair) 0 3px,#3b1860 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)}
.cs .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. */
.cs .message{flex:0 0 auto;height:42px;padding:6px 14px 0;overflow:hidden;text-align:center;font-size:12.5px;line-height:1.35;color:var(--muted)}
.cs .message.alerte{color:#ff9d8a}
.cs .message.conseil{color:var(--texte)}
.cs .message.suppose{color:var(--accent-clair)}
.cs .message.gagne{color:var(--texte);font:400 19px/1.1 'CS Plume','Brush Script MT',cursive;padding-top:3px}
.cs .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px 7px}
.cs .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.cs .outils button{min-height:42px;padding:8px 2px 6px;font-size:11.5px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden}
.cs .outils button.large{grid-column:1/-1}
.cs .outils button.what-if{color:var(--accent-clair);border-color:#5a3a78}
.cs .outils button.what-if.active{background:var(--accent);color:#fff;border-color:var(--accent-clair)}
.cs .outils button.what-if.faux{background:#b3261e;color:#fff3ee;border-color:#ff9d96}

/* ── Écran de scores de la grille ────────────────────────────────────────── */
.cs .scores{gap:10px}
.cs h2.titre-scores{margin:0;font:400 34px/1 'CS Plume','Brush Script MT',cursive;letter-spacing:0;color:var(--texte)}
.cs .resultat{border-radius:7px;padding:10px;text-align:center;color:#1d2a22;background:var(--papier);box-shadow:6px 6px 0 var(--accent)}
.cs .resultat .temps{font:400 48px/1.1 'CS Plume','Brush Script MT',cursive}
.cs .resultat p{margin:2px 0 0;font-size:13px;line-height:1.35}
.cs .resultat .record{color:#5b2397}
.cs .outils.bas{margin-top:auto;padding:0}
.cs .scores .note{margin-top:0}

/* ── Tutoriel ────────────────────────────────────────────────────────────── */
.cs .tuto{gap:12px}
.cs h2.titre-tuto{margin:0;font:400 32px/1.05 'CS Plume','Brush Script MT',cursive;letter-spacing:0;color:var(--texte)}
.cs .tuto .cadre{align-self:center;margin:4px 0 6px}
.cs svg.grille.illu{width:200px;height:200px}
.cs .points{display:flex;justify-content:center;gap:8px}
.cs .points i{width:10px;height:10px;border-radius:50%;background:var(--trait)}
.cs .points i.on{background:var(--papier);box-shadow:2px 2px 0 var(--accent)}

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.cs .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,6,2,.82);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.cs .fenetre{width:100%;max-width:300px;padding:20px 16px;border-radius:7px;display:flex;flex-direction:column;gap:10px;text-align:center;
 background:#0f1c15;border:2px solid var(--papier);box-shadow:6px 6px 0 var(--accent),0 12px 40px rgba(0,0,0,.7)}
.cs .fenetre h2{margin:0;font:400 34px/1.05 'CS Plume','Brush Script MT',cursive;letter-spacing:0;color:var(--texte)}
.cs .fenetre p{margin:0;font-size:13.5px;line-height:1.45;color:#dfe6d3}
/* Écrans bas : chaque pixel gagné va à la grille. */
.cs.compact header{height:44px;font-size:27px}
.cs.compact .hud{padding:5px 16px 3px}
.cs.compact .hud .niv{font-size:29px}
.cs.compact .hud .chrono{font-size:20px}
.cs.compact .hud small{margin-top:3px}
.cs.compact .message{height:37px;padding-top:4px;font-size:11.5px;line-height:1.3}
.cs.compact .message.gagne{font-size:17px;line-height:1.05;padding-top:2px}
.cs.compact .outils{gap:6px;padding-bottom:5px}
.cs.compact .outils button{min-height:38px;padding:7px 2px 5px}
.cs.compact .outils.deux{padding-bottom:8px}
.cs.compact .home{gap:6px;padding:9px 16px 8px}
.cs.compact .hero img{width:64px;height:64px;border-radius:14px}
.cs.compact h1{font-size:30px}
.cs.compact .pitch{font-size:13px;line-height:1.36}
.cs.compact .stats span{padding:4px 9px 3px}
.cs.compact .stats b{font-size:23px}
.cs.compact button.grand{min-height:50px}
.cs.compact .home>.row>button{min-height:40px}
.cs.compact .note{font-size:11.5px;padding-top:6px}
@media (prefers-reduced-motion:reduce){.cs .grille.gagne .case.reste .chiffre{animation-duration:.01s}.cs .tampon svg{animation-duration:.01s}.cs .plateau.tamponne .cadre{animation:none}}

/* 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. */
.cs.compact .home.accueil>.note:not(.hors-ligne){display:none}