/* Préséance (nom choisi par Stan le 2026-10-11) — portage d'Unequal / Futoshiki (Simon Tatham),
   id technique unequal. Ambiance Grand Siècle : bleu roi profond, dorures,
   cases d'ivoire, chevrons d'or ; erreurs en vermillon.
   Titres et chiffres en Cinzel (capitales d'inscription, chiffres alignés,
   OFL), texte en EB Garamond (OFL) ; polices variables auto-hébergées. */
@font-face{font-family:'UN Cinzel';font-style:normal;font-weight:400 900;font-display:swap;src:url('/joueur/unequal/cinzel-var.woff2') format('woff2')}
@font-face{font-family:'UN Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url('/joueur/unequal/ebgaramond-var.woff2') format('woff2')}

.un{--nuit:#0b1230;--nuit2:#111a42;--panneau:#18234f;--trait:#33427f;--texte:#f1e9d6;--muted:#a9b0d4;
 --or:#d4a83a;--or-clair:#f3d68a;--or-fonce:#8a6418;--ivoire:#f6ecd5;--encre:#14183a;--roi:#2747b0;--roi-clair:#9fb3f0;--erreur:#d8321f;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);font:500 16px 'UN Garamond',Georgia,serif;font-variant-numeric:lining-nums;
 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
 background:
  radial-gradient(75% 40% at 50% -8%,rgba(64,96,210,.38) 0%,transparent 70%),
  radial-gradient(55% 30% at 50% 108%,rgba(212,168,58,.14) 0%,transparent 70%),
  repeating-linear-gradient(45deg,transparent 0 21px,rgba(212,168,58,.035) 21px 22px),
  repeating-linear-gradient(-45deg,transparent 0 21px,rgba(212,168,58,.035) 21px 22px),
  var(--nuit)}
.un *{box-sizing:border-box}
.un button{font:600 16px 'UN Garamond',Georgia,serif;letter-spacing:.2px;color:var(--texte);background:var(--panneau);border:1px 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:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 rgba(0,0,0,.45)}
.un button:active{transform:translateY(1px);filter:brightness(1.15)}
.un button:disabled{opacity:.35;cursor:default}
.un button:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.un button.primary{background:linear-gradient(180deg,#f2d27e,#d4a83a 55%,#a97d20);border-color:#6e4f12;color:#1a1306;font-weight:700;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 #5c420f}

/* En-tête : bleu roi souligné d'un double filet d'or. */
.un header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;background:var(--nuit2);
 font:700 21px 'UN Cinzel',Georgia,serif;letter-spacing:1.5px;color:var(--or-clair)}
.un header::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:5px;z-index:2;border-top:2px solid var(--or);border-bottom:1px solid rgba(212,168,58,.55)}
.un header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:700 26px/1 Nunito,sans-serif;color:var(--or-clair)}
.un header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.un header .aide{min-height:32px;width:32px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--or);color:var(--or-clair);font:700 17px/1 'UN Garamond',serif;box-shadow:none}
.un main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:6px}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.un .home{padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.un .pad{padding:16px}
.un .eyebrow{font:700 11px 'UN Cinzel',serif;letter-spacing:2.5px;text-transform:uppercase;color:var(--or)}
.un .hero{display:flex;align-items:center;gap:14px}
.un .hero img{width:76px;height:76px;flex-shrink:0;filter:drop-shadow(0 0 14px rgba(212,168,58,.35))}
.un h1{margin:3px 0 0;white-space:nowrap;font:800 33px/1 'UN Cinzel',Georgia,serif;letter-spacing:.5px;color:var(--or-clair);text-shadow:0 2px 0 rgba(0,0,0,.55)}
.un .devise{margin-top:5px;color:var(--roi-clair);font:italic 500 15px 'UN Garamond',serif}
.un .pitch{margin:0;font-size:15.5px;line-height:1.35;color:#e4dccb}
.un .pitch b{color:var(--or-clair)}
.un .stats{display:flex;gap:8px}
.un .stats span{flex:1;white-space:nowrap;padding:6px 9px 5px;background:var(--panneau);border:1px solid var(--trait);border-radius:7px;font:700 9px 'UN Cinzel',serif;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.un .stats b{display:block;font:700 20px 'UN Garamond',serif;letter-spacing:0;color:var(--texte);text-transform:none;margin-bottom:1px}
.un 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}
.un button.grand small{font:600 12px 'UN Garamond',serif;letter-spacing:.3px;opacity:.85}
.un .row{display:flex;gap:8px}
.un .row>*{flex:1}
.un .note{margin-top:auto;font-size:13px;color:var(--muted);line-height:1.35;border-top:1px solid var(--trait);padding-top:8px}
.un .note.hors-ligne{color:var(--or-clair)}

/* Carte du parcours : chaque grille réglée est dorée. */
.un .pagination{display:flex;align-items:center;gap:8px}
.un .pagination h2{flex:1;text-align:center;margin:0;font:700 21px 'UN Cinzel',serif;color:var(--or-clair)}
.un .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.un .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.un .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:700 10.5px 'UN Cinzel',serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--or)}
.un .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:4px;font:700 13px 'UN Garamond',serif;background:#141d45;color:#4d5890;border-color:#232f63;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
.un .carte-niveaux .case.faite{background:linear-gradient(180deg,#f2d27e,#c99a2e);color:#1a1306;border-color:#6e4f12;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.un .carte-niveaux .case.ouverte{background:var(--ivoire);color:var(--encre);border-color:var(--or)}
.un .carte-niveaux .case:disabled{opacity:1}

/* ── Jeu ─────────────────────────────────────────────────────────────────── */
.un .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.un .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 16px 4px}
.un .hud .niv{font:700 26px/1 'UN Cinzel',serif;color:var(--or-clair)}
.un .hud small{display:block;font:700 9.5px 'UN Cinzel',serif;letter-spacing:1.2px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.un .hud .chrono{font:700 26px/1 'UN Cinzel',serif;font-variant-numeric:lining-nums tabular-nums;text-align:right}
.un .plateau{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
/* Cadre doré, moulure à double filet. */
.un .cadre{padding:7px;border-radius:9px;background:linear-gradient(145deg,#f7dc8a,#c9982d 40%,#8a6418 75%,#d9b04a);
 box-shadow:0 0 0 1px #4a3409,inset 0 0 0 2px rgba(255,240,190,.35),0 10px 26px rgba(0,0,0,.6),0 0 40px rgba(212,168,58,.15)}
.un svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:4px}
.un svg.grille .fond{fill:#14204f}
.un svg.grille .case{fill:var(--ivoire);stroke:#c9b183;stroke-width:.25}
.un svg.grille .case.choisie{fill:#f6cf62;stroke:var(--or-fonce);stroke-width:.5}
.un svg.grille .coin{fill:#f2c447}
.un svg.grille .zone{fill:rgba(246,207,98,.45);stroke:var(--or-fonce);stroke-width:.6}
.un svg.grille text{font-family:'UN Cinzel',Georgia,serif;font-size:6.6px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.un svg.grille text.indice{fill:var(--encre);font-weight:900}
.un svg.grille text.pose{fill:var(--roi);font-weight:600}
.un svg.grille text.erreur{fill:var(--erreur);font-weight:800}
.un svg.grille text.note{fill:#5d6aa3;font-family:'UN Garamond',Georgia,serif;font-weight:700}
.un svg.grille .chevron{fill:none;stroke:#e9c45c;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.un svg.grille .chevron.barre{stroke:#5d6798;stroke-width:.9}
.un svg.grille .chevron.erreur{stroke:#ff5a43;stroke-width:1.3}
.un svg.grille .chevron.vise{stroke:#fff3c4;stroke-width:1.5}
.un .grille .eclat{fill:#fff;opacity:0;pointer-events:none}
/* Victoire : chaque case se soulève et se dore, en vague diagonale ; un
   éclat blanc la traverse. Les cases restent dorées. */
.un .grille.gagne .case{transform-box:fill-box;transform-origin:center;animation:un-dore .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes un-dore{0%{fill:var(--ivoire);transform:scale(1)}45%{fill:#fff6d6;transform:scale(1.16)}100%{fill:#f2cf6f;transform:scale(1)}}
.un .grille.gagne .eclat{animation:un-eclat .55s ease-out both}
@keyframes un-eclat{35%{opacity:.85}100%{opacity:0}}
/* Cartouche de victoire : couronne, titre, temps, gerbe d'étincelles. */
.un .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(8,12,32,.55),transparent);opacity:0;animation:un-fondu .35s ease var(--attente) forwards}
.un .sacre.congedie{animation:un-congedie .3s ease forwards;pointer-events:none}
.un .sacre .carte{position:relative;min-width:236px;padding:14px 22px 12px;text-align:center;border-radius:12px;
 background:linear-gradient(180deg,#14204f,#0b1230);border:2px solid var(--or);box-shadow:0 0 0 1px #4a3409,0 0 0 5px rgba(212,168,58,.25),0 12px 34px rgba(0,0,0,.7),0 0 46px rgba(243,214,138,.4);
 transform:scale(.3);animation:un-sacre .7s cubic-bezier(.2,1.5,.4,1) var(--attente) forwards}
.un .sacre .couronne{position:absolute;left:50%;top:-30px;width:62px;height:40px;margin-left:-31px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
 transform:translateY(-40px);opacity:0;animation:un-couronne .6s cubic-bezier(.3,1.4,.5,1) calc(var(--attente) + .35s) forwards}
.un .sacre .titre{font:800 22px/1.15 'UN Cinzel',serif;color:var(--or-clair);text-shadow:0 2px 0 rgba(0,0,0,.6);white-space:nowrap}
.un .sacre .detail{margin-top:5px;font:italic 600 16px 'UN Garamond',serif;color:var(--texte)}
.un .sacre .gerbe{position:absolute;left:50%;top:50%;width:0;height:0}
.un .sacre .gerbe i{position:absolute;left:-7px;top:-10px;font:normal 16px/1 Georgia,serif;color:#f6d77a;text-shadow:0 0 6px rgba(255,220,120,.9);opacity:0;
 animation:un-etincelle var(--t) ease-out calc(var(--attente) + .1s) forwards}
.un .sacre .gerbe i:nth-child(3n){font-size:11px;color:#fff3c4}
@keyframes un-fondu{to{opacity:1}}
@keyframes un-congedie{from{opacity:1}to{opacity:0}}
@keyframes un-sacre{to{transform:scale(1)}}
@keyframes un-couronne{to{transform:none;opacity:1}}
@keyframes un-etincelle{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1.1)}}
.un .plateau:has(.gagne) .cadre{box-shadow:0 0 0 2px var(--or-clair),0 0 36px rgba(243,214,138,.55),0 10px 26px rgba(0,0,0,.6)}
/* Supposition en cours : moulure d'argent (liseré rouge si contradiction). */
.un .plateau.suppose .cadre{background:linear-gradient(145deg,#eef2ff,#9aa6c8 45%,#5a6588 80%,#c3cbe6);box-shadow:0 0 0 2px var(--roi-clair),0 10px 26px rgba(0,0,0,.6)}
.un .plateau.suppose.faux .cadre{box-shadow:0 0 0 3px var(--erreur),0 10px 26px rgba(0,0,0,.6)}
/* Hauteur fixe (deux lignes) : un message qui change ne déplace pas la grille. */
.un .message{flex:0 0 auto;height:42px;padding:5px 14px 0;overflow:hidden;text-align:center;font-size:14.5px;line-height:1.3;color:var(--muted)}
.un .message.alerte{color:#ffb4a6}
.un .message.conseil{color:var(--or-clair)}
.un .message.suppose{color:var(--roi-clair)}
.un .message.gagne{color:var(--or-clair);font:italic 700 17px/1.15 'UN Garamond',serif;padding-top:4px}
/* Pavé : touches d'ivoire, qui se dorent quand une case est choisie ; le
   crayon allumé les passe en bleu. */
.un .pave{flex:0 0 auto;display:grid;gap:5px;padding:0 12px 7px}
.un .pave button{min-height:42px;padding:0;border-radius:6px;font:700 20px 'UN Cinzel',serif;background:#1c2858;color:#c8cde6;border-color:#2e3b75}
.un .pave.pret button.chiffre{background:linear-gradient(180deg,#fffaf0,#e8d6ad);color:var(--encre);border-color:var(--or-fonce);box-shadow:inset 0 1px 0 #fff,0 0 8px rgba(243,214,138,.3),0 2px 0 rgba(0,0,0,.45)}
.un .pave.pret.au-crayon button.chiffre{background:linear-gradient(180deg,#e6ebff,#b9c4ec);color:#2a3570;border-color:#5d6aa3}
.un .pave button.gomme{font:600 18px Nunito,sans-serif;color:var(--muted)}
.un .pave.pret button.gomme{color:var(--texte);border-color:var(--or)}
.un .pave button.crayon{font:600 19px Nunito,sans-serif;color:var(--roi-clair)}
.un .pave button.crayon.actif{background:var(--roi);color:#fff;border-color:var(--roi-clair);box-shadow:0 0 10px rgba(159,179,240,.45),0 2px 0 rgba(0,0,0,.45)}
.un .pave.fini{visibility:hidden}
.un .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px 7px}
.un .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.un .outils button{min-height:42px;padding:8px 4px 6px;font-size:15px;white-space:nowrap;overflow:hidden}
.un .outils button.large{grid-column:1/-1}
.un .outils button.what-if{color:var(--roi-clair);border-color:#3a4f9a}
.un .outils button.what-if.active{background:var(--roi);color:#fff;border-color:var(--roi-clair)}
.un .outils button.what-if.faux{background:#a8301f;color:#fff3ee;border-color:#ff9f8f}

/* ── Écran de scores de la grille ────────────────────────────────────────── */
.un .scores{gap:10px}
.un h2.titre-scores{margin:0;font:700 25px 'UN Cinzel',serif;color:var(--or-clair)}
.un .resultat{border-radius:8px;padding:10px;text-align:center;color:#1a1306;
 background:linear-gradient(160deg,#fff1c2,#e6c165 55%,#b8892a);box-shadow:0 0 0 2px #6e4f12,0 0 0 5px var(--nuit2),0 0 0 6px var(--or),0 0 26px rgba(212,168,58,.35)}
.un .resultat .temps{font:800 38px 'UN Cinzel',serif;font-variant-numeric:lining-nums tabular-nums}
.un .resultat p{margin:2px 0 0;font-size:15px}
.un .resultat .record{color:#1f3a9c;font-weight:700}
.un .outils.bas{margin-top:auto;padding:0}
.un .scores .note{margin-top:0}

/* ── Tutoriel ────────────────────────────────────────────────────────────── */
.un .tuto{gap:12px}
.un h2.titre-tuto{margin:0;font:700 23px 'UN Cinzel',serif;color:var(--or-clair)}
.un .tuto .cadre{align-self:center}
.un svg.grille.illu{width:196px;height:196px}
.un .points{display:flex;justify-content:center;gap:8px}
.un .points i{width:10px;height:10px;border-radius:50%;background:var(--trait)}
.un .points i.on{background:var(--or)}

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.un .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,12,32,.82);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.un .fenetre{width:100%;max-width:300px;padding:20px 16px;border-radius:10px;display:flex;flex-direction:column;gap:10px;text-align:center;
 background:var(--nuit2);border:1px solid var(--trait);box-shadow:0 0 0 2px #4a3409,0 0 0 4px var(--or),0 12px 40px rgba(0,0,0,.7)}
.un .fenetre h2{margin:0;font:700 24px 'UN Cinzel',serif;color:var(--or-clair)}
.un .fenetre p{margin:0;font-size:15px;line-height:1.4;color:#e4dccb}
/* Écrans bas : chaque pixel gagné va à la grille. */
.un.compact header{height:44px;font-size:19px}
.un.compact .hud{padding:5px 16px 3px}
.un.compact .hud .niv{font-size:22px}
.un.compact .hud .chrono{font-size:22px}
.un.compact .hud small{margin-top:3px}
.un.compact .message{height:37px;padding-top:3px;font-size:13.5px;line-height:1.25}
.un.compact .message.gagne{font-size:16px;padding-top:2px}
.un.compact .pave{padding-bottom:5px}
.un.compact .pave button{min-height:38px;font-size:19px}
.un.compact .outils{gap:6px;padding-bottom:5px}
.un.compact .outils button{min-height:38px;padding:7px 4px 5px}
.un.compact .outils.deux{padding-bottom:8px}
@media (prefers-reduced-motion:reduce){.un .grille.gagne .eclat,.un .sacre .gerbe{display:none}.un .grille.gagne .case{animation-duration:.01s}.un .sacre,.un .sacre .carte,.un .sacre .couronne{animation-duration:.01s}}

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