/* Clair-obscur (nom choisi par Stan le 2026-10-17) — portage d'Unruly / Binairo (Simon Tatham), id
   technique unruly. Ambiance op art : noir et blanc francs, rayures et
   cercles concentriques, un seul accent bleu outremer ; erreurs en rouge,
   comme l'original. Cases : grises au départ (COL_EMPTY), noires, blanches.
   Jost (géométrique, OFL), police variable auto-hébergée. */
@font-face{font-family:'UR Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('/joueur/unruly/jost-var.woff2') format('woff2')}

.ur{--nuit:#0b0b0b;--nuit2:#141414;--panneau:#1b1b1b;--trait:#3a3a3a;--texte:#f2f1ec;--muted:#a3a3a3;
 --blanc:#f2f1ec;--noir:#161616;--gris:#808080;--bleu:#3b5bff;--bleu-clair:#a9b6ff;--erreur:#ff3b30;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);font:450 16px 'UR Jost',system-ui,sans-serif;
 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
 background:
  repeating-radial-gradient(circle at 50% 118%,transparent 0 13px,rgba(255,255,255,.045) 13px 26px),
  repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.018) 9px 18px),
  var(--nuit)}
.ur *{box-sizing:border-box}
.ur button{font:560 16px 'UR Jost',system-ui,sans-serif;letter-spacing:.2px;color:var(--texte);background:var(--panneau);border:1.5px solid var(--trait);border-radius:4px;
 min-height:44px;padding:8px 12px 7px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 0 #000}
.ur button:active{transform:translateY(1px);filter:brightness(1.2)}
.ur button:disabled{opacity:.35;cursor:default}
.ur button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.ur button.primary{background:var(--blanc);border-color:var(--blanc);color:#0b0b0b;font-weight:700;box-shadow:4px 4px 0 var(--bleu)}
.ur button.primary:active{box-shadow:2px 2px 0 var(--bleu);transform:translate(2px,2px)}

/* En-tête : noir, souligné d'une rayure noir et blanc. */
.ur header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;background:#000;
 font:800 21px 'UR Jost',sans-serif;letter-spacing:4px;text-transform:uppercase;color:var(--blanc)}
.ur header::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:6px;z-index:2;background:repeating-linear-gradient(90deg,var(--blanc) 0 6px,#000 6px 12px)}
.ur header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:600 28px/1 'UR Jost',sans-serif;color:var(--blanc)}
.ur header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.ur header .aide{min-height:32px;width:32px;padding:0;border-radius:50%;background:transparent;border:1.5px solid var(--blanc);color:var(--blanc);font:700 17px/1 'UR Jost',sans-serif;box-shadow:none}
.ur main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:8px}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.ur .home{padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.ur .pad{padding:16px}
.ur .eyebrow{font:700 11px 'UR Jost',sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--bleu-clair)}
.ur .hero{display:flex;align-items:center;gap:14px}
.ur .hero img{width:76px;height:76px;flex-shrink:0;border-radius:16px;box-shadow:5px 5px 0 var(--bleu)}
.ur h1{margin:3px 0 0;white-space:nowrap;font:800 28px/1 'UR Jost',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--blanc)}
.ur .devise{margin-top:5px;color:var(--muted);font:italic 450 15px 'UR Jost',sans-serif}
.ur .pitch{margin:0;font-size:15.5px;line-height:1.35;color:#dcdbd5}
.ur .pitch b{color:var(--blanc);font-weight:650}
.ur .stats{display:flex;gap:8px}
.ur .stats span{flex:1;white-space:nowrap;padding:6px 9px 5px;background:var(--panneau);border:1.5px solid var(--trait);border-radius:4px;font:650 9px 'UR Jost',sans-serif;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase}
.ur .stats b{display:block;font:700 20px 'UR Jost',sans-serif;letter-spacing:0;color:var(--texte);text-transform:none;margin-bottom:1px}
.ur 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}
.ur button.grand small{font:550 12px 'UR Jost',sans-serif;letter-spacing:.3px;opacity:.8}
.ur .row{display:flex;gap:8px}
.ur .row>*{flex:1}
.ur .row.accueil{padding-right:4px}
.ur .note{margin-top:auto;font-size:13px;color:var(--muted);line-height:1.35;border-top:1.5px solid var(--trait);padding-top:8px}
.ur .note.hors-ligne{color:var(--bleu-clair)}

/* Carte du parcours : chaque grille réussie passe en blanc. */
.ur .pagination{display:flex;align-items:center;gap:8px}
.ur .pagination h2{flex:1;text-align:center;margin:0;font:750 21px 'UR Jost',sans-serif;letter-spacing:1px;color:var(--blanc)}
.ur .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.ur .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.ur .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:700 10.5px 'UR Jost',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--bleu-clair)}
.ur .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:3px;font:650 13px 'UR Jost',sans-serif;background:#151515;color:#4f4f4f;border-color:#262626;box-shadow:none}
.ur .carte-niveaux .case.faite{background:var(--blanc);color:#0b0b0b;border-color:var(--blanc)}
.ur .carte-niveaux .case.ouverte{background:#000;color:var(--blanc);border:2px solid var(--bleu)}
.ur .carte-niveaux .case:disabled{opacity:1}

/* ── Jeu ─────────────────────────────────────────────────────────────────── */
.ur .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.ur .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 16px 4px}
.ur .hud .niv{font:750 26px/1 'UR Jost',sans-serif;letter-spacing:1px;color:var(--blanc)}
.ur .hud small{display:block;font:650 9.5px 'UR Jost',sans-serif;letter-spacing:1.6px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.ur .hud .chrono{font:750 26px/1 'UR Jost',sans-serif;font-variant-numeric:tabular-nums;text-align:right}
.ur .plateau{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
/* Cadre op art : rayures noir et blanc en biais. */
.ur .cadre{padding:8px;border-radius:5px;background:repeating-linear-gradient(45deg,var(--blanc) 0 3px,#000 3px 6px);
 box-shadow:0 0 0 1.5px var(--blanc),6px 6px 0 var(--bleu),0 12px 28px rgba(0,0,0,.7)}
.ur svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:2px}
.ur svg.grille .fond{fill:#4d4d4d}
.ur svg.grille .case.grise{fill:var(--gris)}
.ur svg.grille .case.noire{fill:var(--noir)}
.ur svg.grille .case.blanche{fill:var(--blanc)}
/* Case donnée : carré intérieur (le biseau de l'original). */
.ur svg.grille .donnee{fill:none;stroke-width:.75}
.ur svg.grille .donnee.sur-noir{stroke:#6a6a6a}
.ur svg.grille .donnee.sur-blanc{stroke:#a9a8a2}
.ur svg.grille .trio{fill:none;stroke:var(--erreur);stroke-width:1.1}
.ur svg.grille .trop{fill:var(--erreur);font:800 6.4px 'UR Jost',sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.ur svg.grille .zone{fill:none;stroke:var(--bleu);stroke-width:1.3}
.ur svg.grille .curseur{fill:none;stroke:var(--bleu);stroke-width:1.1;stroke-dasharray:2 1}
/* Victoire : chaque case se retourne, en onde depuis le centre. */
.ur .grille.gagne .case{transform-box:fill-box;transform-origin:center;animation:ur-retourne .6s cubic-bezier(.4,0,.2,1) both}
@keyframes ur-retourne{0%{transform:scale(1,1)}45%{transform:scale(.06,1)}55%{transform:scale(.06,1)}100%{transform:scale(1,1)}}
/* Cartouche de victoire : emblème à cercles concentriques, anneaux qui
   s'élargissent. */
.ur .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:ur-fondu .3s ease var(--attente) forwards}
.ur .sacre.congedie{animation:ur-congedie .3s ease forwards;pointer-events:none}
.ur .sacre .ondes{position:absolute;left:50%;top:50%;width:0;height:0}
.ur .sacre .ondes i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:5px solid var(--blanc);opacity:0;
 animation:ur-onde 1.5s cubic-bezier(.2,.6,.3,1) calc(var(--attente) + var(--k) * 140ms) forwards}
.ur .sacre .ondes i:nth-child(even){border-color:#000}
.ur .sacre .carte{position:relative;min-width:236px;padding:30px 22px 12px;text-align:center;border-radius:4px;
 background:#000;border:2px solid var(--blanc);box-shadow:6px 6px 0 var(--bleu),0 14px 34px rgba(0,0,0,.75);
 transform:scale(.3);animation:ur-sacre .6s cubic-bezier(.2,1.5,.4,1) var(--attente) forwards}
.ur .sacre .embleme{position:absolute;left:50%;top:-26px;width:50px;height:50px;margin-left:-25px;border-radius:50%;box-shadow:0 0 0 2px #000;
 animation:ur-tourne 2.4s linear calc(var(--attente) + .3s) infinite}
.ur .sacre .titre{font:800 22px/1.15 'UR Jost',sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--blanc);white-space:nowrap}
.ur .sacre .detail{margin-top:5px;font:italic 500 16px 'UR Jost',sans-serif;color:var(--bleu-clair)}
@keyframes ur-fondu{to{opacity:1}}
@keyframes ur-congedie{from{opacity:1}to{opacity:0}}
@keyframes ur-sacre{to{transform:scale(1)}}
@keyframes ur-onde{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(4.2)}}
@keyframes ur-tourne{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.ur .plateau:has(.gagne) .cadre{box-shadow:0 0 0 2px var(--blanc),6px 6px 0 var(--bleu),0 0 34px rgba(242,241,236,.35)}
/* Supposition en cours : cadre à rayures bleues (liseré rouge si contradiction). */
.ur .plateau.suppose .cadre{background:repeating-linear-gradient(45deg,var(--bleu-clair) 0 3px,#0d1650 3px 6px);box-shadow:0 0 0 1.5px var(--bleu-clair),6px 6px 0 var(--bleu),0 12px 28px rgba(0,0,0,.7)}
.ur .plateau.suppose.faux .cadre{box-shadow:0 0 0 3px var(--erreur),6px 6px 0 var(--bleu),0 12px 28px rgba(0,0,0,.7)}
/* Hauteur fixe (deux lignes) : un message qui change ne déplace pas la grille. */
.ur .message{flex:0 0 auto;height:42px;padding:6px 14px 0;overflow:hidden;text-align:center;font-size:14.5px;line-height:1.3;color:var(--muted)}
.ur .message.alerte{color:#ff9d96}
.ur .message.conseil{color:var(--blanc)}
.ur .message.suppose{color:var(--bleu-clair)}
.ur .message.gagne{color:var(--blanc);font:italic 650 17px/1.15 'UR Jost',sans-serif;padding-top:5px}
.ur .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px 7px}
.ur .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.ur .outils button{min-height:42px;padding:8px 4px 6px;font-size:15px;white-space:nowrap;overflow:hidden}
.ur .outils button.large{grid-column:1/-1}
.ur .outils button.what-if{color:var(--bleu-clair);border-color:#2c3c99}
.ur .outils button.what-if.active{background:var(--bleu);color:#fff;border-color:var(--bleu-clair)}
.ur .outils button.what-if.faux{background:#b3261e;color:#fff3ee;border-color:#ff9d96}

/* ── Écran de scores de la grille ────────────────────────────────────────── */
.ur .scores{gap:10px}
.ur h2.titre-scores{margin:0;font:800 25px 'UR Jost',sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--blanc)}
.ur .resultat{border-radius:4px;padding:10px;text-align:center;color:#0b0b0b;background:var(--blanc);box-shadow:6px 6px 0 var(--bleu)}
.ur .resultat .temps{font:800 38px 'UR Jost',sans-serif;font-variant-numeric:tabular-nums}
.ur .resultat p{margin:2px 0 0;font-size:15px}
.ur .resultat .record{color:#1e36c9;font-weight:700}
.ur .outils.bas{margin-top:auto;padding:0}
.ur .scores .note{margin-top:0}

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

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.ur .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.8);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.ur .fenetre{width:100%;max-width:300px;padding:20px 16px;border-radius:4px;display:flex;flex-direction:column;gap:10px;text-align:center;
 background:#000;border:2px solid var(--blanc);box-shadow:6px 6px 0 var(--bleu),0 12px 40px rgba(0,0,0,.7)}
.ur .fenetre h2{margin:0;font:800 24px 'UR Jost',sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--blanc)}
.ur .fenetre p{margin:0;font-size:15px;line-height:1.4;color:#dcdbd5}
/* Écrans bas : chaque pixel gagné va à la grille. */
.ur.compact header{height:44px;font-size:19px}
.ur.compact .hud{padding:5px 16px 3px}
.ur.compact .hud .niv{font-size:22px}
.ur.compact .hud .chrono{font-size:22px}
.ur.compact .hud small{margin-top:3px}
.ur.compact .message{height:37px;padding-top:4px;font-size:13.5px;line-height:1.25}
.ur.compact .message.gagne{font-size:16px;padding-top:3px}
.ur.compact .outils{gap:6px;padding-bottom:5px}
.ur.compact .outils button{min-height:38px;padding:7px 4px 5px}
.ur.compact .outils.deux{padding-bottom:8px}
.ur.compact .home{gap:6px;padding:9px 16px 8px}
.ur.compact .hero img{width:64px;height:64px;border-radius:14px}
.ur.compact .pitch{font-size:14.5px;line-height:1.3}
.ur.compact .stats span{padding:4px 9px 3px}
.ur.compact .stats b{font-size:18px}
.ur.compact button.grand{min-height:50px}
.ur.compact .home>.row>button{min-height:40px}
.ur.compact .note{font-size:12.5px;padding-top:6px}
@media (prefers-reduced-motion:reduce){.ur .sacre .ondes{display:none}.ur .grille.gagne .case{animation-duration:.01s}.ur .sacre,.ur .sacre .carte,.ur .sacre .embleme{animation-duration:.01s;animation-iteration-count:1}}

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