/* Point de croix (nom choisi par Stan le 2026-10-21) — portage de Slant / Gokigen Naname (Simon Tatham),
   id technique slant. Ambiance broderie : toile de lin sur cadre de bois,
   fil retors cerise, nombres sur des pastilles de lin, un seul accent cerise ;
   erreurs en rouge vif, comme l'original. Alegreya (OFL), police variable
   auto-hébergée. */

@font-face{font-family:'SL Alegreya';font-style:normal;font-weight:400 900;font-display:swap;src:url('/joueur/slant/alegreya-normal.woff2') format('woff2')}
@font-face{font-family:'SL Alegreya';font-style:italic;font-weight:400 900;font-display:swap;src:url('/joueur/slant/alegreya-italic.woff2') format('woff2')}
/* Alegreya a des chiffres elzéviriens (le 0 ressemble à un o, le 3 descend, le 1 à un I) :
   les chiffres seuls viennent de Jost (OFL), aux chiffres alignés. */
@font-face{font-family:'SL Alegreya';font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0030-0039;src:url('/joueur/slant/jost-var.woff2') format('woff2')}
@font-face{font-family:'SL Alegreya';font-style:italic;font-weight:400 900;font-display:swap;unicode-range:U+0030-0039;src:url('/joueur/slant/jost-var.woff2') format('woff2')}

.sl{--nuit:#14100c;--panneau:#26201a;--trait:#4a3d30;--texte:#f3ead6;--muted:#b3a58f;
 --lin:#e6d9b8;--bois:#8a5a2e;--bois2:#5a3818;--fil:#c2276a;--cerise:#e0457b;--cerise-clair:#f0a6c0;--erreur:#f0200c;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);font:450 16px 'SL Alegreya',Georgia,serif;

 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
 background:
  repeating-linear-gradient(45deg,rgba(255,220,170,.03) 0 2px,transparent 2px 6px),
  repeating-linear-gradient(-45deg,rgba(255,220,170,.03) 0 2px,transparent 2px 6px),
  var(--nuit)}
.sl *{box-sizing:border-box}
.sl button{font:650 16px 'SL Alegreya',Georgia,serif;letter-spacing:.2px;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}
.sl button:active{transform:translateY(1px);filter:brightness(1.2)}
.sl button:disabled{opacity:.35;cursor:default}
.sl button:focus-visible{outline:2px solid var(--cerise);outline-offset:2px}
.sl button.primary{background:var(--lin);border-color:var(--lin);color:#2a1d10;font-weight:800;box-shadow:4px 4px 0 var(--cerise)}
.sl button.primary:active{box-shadow:2px 2px 0 var(--cerise);transform:translate(2px,2px)}

/* En-tête : bois, souligné d'un point de surjet cerise. */
.sl header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;background:linear-gradient(#6b4423,#4a2d12);
 font:800 18px 'SL Alegreya',serif;letter-spacing:2px;text-transform:uppercase;color:var(--texte)}
.sl header::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:6px;z-index:2;background:repeating-linear-gradient(90deg,var(--cerise) 0 9px,transparent 9px 15px),#2b1c0d}
.sl header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:600 28px/1 'SL Alegreya',serif;color:var(--texte)}
.sl header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.sl header .aide{min-height:32px;width:32px;padding:0;border-radius:50%;background:transparent;border:1.5px solid var(--texte);color:var(--texte);font:800 17px/1 'SL Alegreya',serif;box-shadow:none}
.sl main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:8px}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.sl .home{padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.sl .pad{padding:16px}
.sl .eyebrow{font:800 11px 'SL Alegreya',serif;letter-spacing:3px;text-transform:uppercase;color:var(--cerise-clair)}
.sl .hero{display:flex;align-items:center;gap:14px}
.sl .hero img{width:76px;height:76px;flex-shrink:0;border-radius:16px;box-shadow:5px 5px 0 var(--cerise)}
.sl h1{margin:3px 0 0;white-space:nowrap;font:800 24px/1 'SL Alegreya',serif;letter-spacing:.5px;text-transform:uppercase;color:var(--texte)}
.sl .devise{margin-top:5px;color:var(--muted);font:italic 450 16px 'SL Alegreya',serif}
.sl .pitch{margin:0;font-size:16px;line-height:1.32;color:#e4dac3}
.sl .pitch b{color:var(--texte);font-weight:800}
.sl .stats{display:flex;gap:8px}
.sl .stats span{flex:1;white-space:nowrap;padding:6px 9px 5px;background:var(--panneau);border:1.5px solid var(--trait);border-radius:7px;font:700 9.5px 'SL Alegreya',serif;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase}
.sl .stats b{display:block;font:800 20px 'SL Alegreya',serif;letter-spacing:0;color:var(--texte);text-transform:none;margin-bottom:1px}
.sl button.grand{min-height:54px;font-size:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;white-space:nowrap;padding-left:6px;padding-right:6px}
.sl button.grand small{font:600 12.5px 'SL Alegreya',serif;letter-spacing:.3px;opacity:.8}
.sl .row{display:flex;gap:8px}
.sl .row>*{flex:1}
.sl .row.accueil{padding-right:4px}
.sl .note{margin-top:auto;font-size:13.5px;color:var(--muted);line-height:1.35;border-top:1.5px dashed var(--trait);padding-top:8px}
.sl .note.hors-ligne{color:var(--cerise-clair)}

/* Carte du parcours : chaque grille brodée passe en lin. */
.sl .pagination{display:flex;align-items:center;gap:8px}
.sl .pagination h2{flex:1;text-align:center;margin:0;font:800 21px 'SL Alegreya',serif;letter-spacing:1px;color:var(--texte)}
.sl .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.sl .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.sl .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:800 10.5px 'SL Alegreya',serif;letter-spacing:2px;text-transform:uppercase;color:var(--cerise-clair)}
.sl .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:4px;font:700 13px 'SL Alegreya',serif;background:#1d1812;color:#5f5442;border-color:#2b241b;box-shadow:none}
.sl .carte-niveaux .case.faite{background:var(--lin);color:#2a1d10;border-color:var(--lin)}
.sl .carte-niveaux .case.ouverte{background:#0d0a07;color:var(--texte);border:2px solid var(--cerise)}
.sl .carte-niveaux .case:disabled{opacity:1}

/* ── Jeu ─────────────────────────────────────────────────────────────────── */
.sl .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.sl .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 16px 4px}
.sl .hud .niv{font:800 26px/1 'SL Alegreya',serif;letter-spacing:1px;color:var(--texte)}
.sl .hud small{display:block;font:700 10px 'SL Alegreya',serif;letter-spacing:1.6px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.sl .hud .chrono{font:800 26px/1 'SL Alegreya',serif;font-variant-numeric:tabular-nums;text-align:right}
.sl .plateau{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
/* Cadre de bois autour de la toile. */
.sl .cadre{padding:8px;border-radius:7px;background:linear-gradient(135deg,#9b6a37,#6b4423 45%,#8a5a2e);
 box-shadow:inset 0 0 0 1.5px #c58f55,inset 0 0 0 4px #5a3818,6px 6px 0 var(--cerise),0 12px 28px rgba(0,0,0,.7)}
.sl svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:3px;overflow:visible}
.sl svg.grille .trame0{fill:#e6d9b8}
.sl svg.grille .trame1{fill:#dccea8}
.sl svg.grille .fond{fill:url(#sl-toile);stroke:#6b4a26;stroke-width:.3}
.sl svg.grille .quadrillage{fill:none;stroke:#b39b6c;stroke-width:.22;stroke-dasharray:.7 .9}
/* Le fil : une ombre, un corps cerise, une torsade claire. */
.sl svg.grille .fil line{stroke-linecap:round;fill:none}
.sl svg.grille .fil .ombre{stroke:#3a0f22;stroke-width:2;opacity:.38;transform:translate(.2px,.25px)}
.sl svg.grille .fil .corps{stroke:var(--fil);stroke-width:1.53}
.sl svg.grille .fil .torsade{stroke:#ffd5e5;stroke-width:1.53;stroke-linecap:butt;stroke-dasharray:.35 .8;opacity:.55}
.sl svg.grille .fil.boucle .corps{stroke:var(--erreur)}
.sl svg.grille .fil.boucle .torsade{stroke:#ffd0c8}
.sl svg.grille .fil.boucle .ombre{stroke:#600;opacity:.5}
/* Nombres : pastilles de lin cousues aux points. */
.sl svg.grille .pastille circle{fill:#f6eed9;stroke:#5b4630;stroke-width:.45}
.sl svg.grille .pastille text{fill:#2e2013;font:800 4.9px 'SL Alegreya',Georgia,serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.sl svg.grille .pastille.faux circle{fill:var(--erreur);stroke:#6a0a00}
.sl svg.grille .pastille.faux text{fill:#fff}
.sl svg.grille .zone{fill:rgba(224,69,123,.14);stroke:var(--cerise);stroke-width:1.1}
.sl svg.grille .curseur{fill:none;stroke:#2e2013;stroke-width:1;stroke-dasharray:2 1}
/* Victoire : les fils se resserrent en onde depuis le centre. */
.sl .grille.gagne .fil{transform-box:fill-box;transform-origin:center;animation:sl-resserre .7s cubic-bezier(.4,0,.2,1) both}
@keyframes sl-resserre{0%{transform:scale(1);filter:none}45%{transform:scale(1.28);filter:brightness(1.35)}100%{transform:scale(1);filter:none}}
/* Cartouche de victoire : un tambour à broder, des anneaux de fil qui
   s'élargissent. */
.sl .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:sl-fondu .3s ease var(--attente) forwards}
.sl .sacre.congedie{animation:sl-congedie .3s ease forwards;pointer-events:none}
.sl .sacre .ondes{position:absolute;left:50%;top:50%;width:0;height:0}
.sl .sacre .ondes i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:4px dotted var(--cerise);opacity:0;
 animation:sl-onde 1.5s cubic-bezier(.2,.6,.3,1) calc(var(--attente) + var(--k) * 140ms) forwards}
.sl .sacre .ondes i:nth-child(even){border-color:var(--lin)}
.sl .sacre .carte{position:relative;min-width:236px;padding:30px 22px 12px;text-align:center;border-radius:7px;
 background:#1d150d;border:2px solid var(--lin);box-shadow:6px 6px 0 var(--cerise),0 14px 34px rgba(0,0,0,.75);
 transform:scale(.3);animation:sl-sacre .6s cubic-bezier(.2,1.5,.4,1) var(--attente) forwards}
.sl .sacre .embleme{position:absolute;left:50%;top:-26px;width:50px;height:50px;margin-left:-25px;border-radius:50%;box-shadow:0 0 0 2px #1d150d;
 animation:sl-tourne 2.4s linear calc(var(--attente) + .3s) infinite}
.sl .sacre .titre{font:800 22px/1.15 'SL Alegreya',serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--texte);white-space:nowrap}
.sl .sacre .detail{margin-top:5px;font:italic 500 16px 'SL Alegreya',serif;color:var(--cerise-clair)}
@keyframes sl-fondu{to{opacity:1}}
@keyframes sl-congedie{from{opacity:1}to{opacity:0}}
@keyframes sl-sacre{to{transform:scale(1)}}
@keyframes sl-onde{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(4.2)}}
@keyframes sl-tourne{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.sl .plateau:has(.gagne) .cadre{box-shadow:inset 0 0 0 1.5px #c58f55,inset 0 0 0 4px #5a3818,6px 6px 0 var(--cerise),0 0 34px rgba(230,217,184,.35)}
/* Supposition en cours : cadre cerise (liseré rouge si contradiction). */
.sl .plateau.suppose .cadre{background:repeating-linear-gradient(45deg,var(--cerise-clair) 0 3px,#5b1330 3px 6px);box-shadow:0 0 0 1.5px var(--cerise-clair),6px 6px 0 var(--cerise),0 12px 28px rgba(0,0,0,.7)}
.sl .plateau.suppose.faux .cadre{box-shadow:0 0 0 3px var(--erreur),6px 6px 0 var(--cerise),0 12px 28px rgba(0,0,0,.7)}
/* Hauteur fixe (deux lignes) : un message qui change ne déplace pas la grille. */
.sl .message{flex:0 0 auto;height:42px;padding:6px 14px 0;overflow:hidden;text-align:center;font-size:15px;line-height:1.28;color:var(--muted)}
.sl .message.alerte{color:#ff9d8a}
.sl .message.conseil{color:var(--texte)}
.sl .message.suppose{color:var(--cerise-clair)}
.sl .message.gagne{color:var(--texte);font:italic 700 17.5px/1.15 'SL Alegreya',serif;padding-top:5px}
.sl .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px 7px}
.sl .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.sl .outils button{min-height:42px;padding:8px 4px 6px;font-size:15.5px;white-space:nowrap;overflow:hidden}
.sl .outils button.large{grid-column:1/-1}
.sl .outils button.what-if{color:var(--cerise-clair);border-color:#7d2a4c}
.sl .outils button.what-if.active{background:var(--cerise);color:#fff;border-color:var(--cerise-clair)}
.sl .outils button.what-if.faux{background:#b3261e;color:#fff3ee;border-color:#ff9d96}

/* ── Écran de scores de la grille ────────────────────────────────────────── */
.sl .scores{gap:10px}
.sl h2.titre-scores{margin:0;font:800 25px 'SL Alegreya',serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--texte)}
.sl .resultat{border-radius:7px;padding:10px;text-align:center;color:#2a1d10;background:var(--lin);box-shadow:6px 6px 0 var(--cerise)}
.sl .resultat .temps{font:800 38px 'SL Alegreya',serif;font-variant-numeric:tabular-nums}
.sl .resultat p{margin:2px 0 0;font-size:15.5px}
.sl .resultat .record{color:#a3174f;font-weight:800}
.sl .outils.bas{margin-top:auto;padding:0}
.sl .scores .note{margin-top:0}

/* ── Tutoriel ────────────────────────────────────────────────────────────── */
.sl .tuto{gap:12px}
.sl h2.titre-tuto{margin:0;font:800 23px 'SL Alegreya',serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--texte)}
.sl .tuto .cadre{align-self:center;margin:4px 0 6px}
.sl svg.grille.illu{width:200px;height:200px}
.sl .points{display:flex;justify-content:center;gap:8px}
.sl .points i{width:10px;height:10px;border-radius:50%;background:var(--trait)}
.sl .points i.on{background:var(--lin);box-shadow:2px 2px 0 var(--cerise)}

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.sl .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)}
.sl .fenetre{width:100%;max-width:300px;padding:20px 16px;border-radius:7px;display:flex;flex-direction:column;gap:10px;text-align:center;
 background:#1d150d;border:2px solid var(--lin);box-shadow:6px 6px 0 var(--cerise),0 12px 40px rgba(0,0,0,.7)}
.sl .fenetre h2{margin:0;font:800 24px 'SL Alegreya',serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--texte)}
.sl .fenetre p{margin:0;font-size:15.5px;line-height:1.4;color:#e4dac3}
/* Écrans bas : chaque pixel gagné va à la grille. */
.sl.compact header{height:44px;font-size:18px}
.sl.compact .hud{padding:5px 16px 3px}
.sl.compact .hud .niv{font-size:22px}
.sl.compact .hud .chrono{font-size:22px}
.sl.compact .hud small{margin-top:3px}
.sl.compact .message{height:37px;padding-top:4px;font-size:14px;line-height:1.22}
.sl.compact .message.gagne{font-size:16.5px;padding-top:3px}
.sl.compact .outils{gap:6px;padding-bottom:5px}
.sl.compact .outils button{min-height:38px;padding:7px 4px 5px}
.sl.compact .outils.deux{padding-bottom:8px}
.sl.compact .home{gap:6px;padding:9px 16px 8px}
.sl.compact .hero img{width:64px;height:64px;border-radius:14px}
.sl.compact h1{font-size:23px}
.sl.compact .pitch{font-size:15px;line-height:1.28}
.sl.compact .stats span{padding:4px 9px 3px}
.sl.compact .stats b{font-size:18px}
.sl.compact button.grand{min-height:50px}
.sl.compact .home>.row>button{min-height:40px}
.sl.compact .note{font-size:13px;padding-top:6px}
@media (prefers-reduced-motion:reduce){.sl .sacre .ondes{display:none}.sl .grille.gagne .fil{animation-duration:.01s}.sl .sacre,.sl .sacre .carte,.sl .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. */
.sl.compact .home.accueil>.note:not(.hors-ligne){display:none}