/* « Gradient », id technique gradient — puzzle chromatique : reconstituer un
   dégradé en échangeant des pièces de même forme. Fond de nuit neutre (les
   couleurs du plateau doivent se juger sans dominante), titres en Jost (OFL,
   copiée de Clair-obscur). Le plateau prend toute la place : sous l'en-tête,
   une seule ligne (niveau · échanges · chrono), aucun bouton. */
@font-face{font-family:'GD Jost';font-style:normal;font-weight:300 800;font-display:swap;src:url('/joueur/gradient/jost-var.woff2') format('woff2')}

.gd{--nuit:#0c0c0f;--panneau:#17171d;--trait:#2c2c36;--texte:#ecebf2;--muted:#9c9bab;--pale:#62616f;
 --a1:#ff5c8a;--a2:#7b6cff;--a3:#2fd3c9;--accent:#9d8cff;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);
 font:450 15px 'GD Jost',system-ui,sans-serif;background:var(--nuit);
 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.gd *{box-sizing:border-box}
.gd button{font:600 15px 'GD Jost',system-ui,sans-serif;color:var(--texte);background:var(--panneau);border:1.5px solid var(--trait);border-radius:12px;
 min-height:44px;padding:8px 12px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.gd button:active{transform:translateY(1px);filter:brightness(1.25)}
.gd button:disabled{opacity:.35;cursor:default}
.gd button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gd button.primary{border:0;color:#fff;background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* En-tête commun des jeux solos : ‹ · nom · ? */
.gd header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--trait)}
.gd header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;font:400 30px/1 'GD Jost',sans-serif}
.gd header .titre{flex:1;font:700 21px 'GD Jost',sans-serif;letter-spacing:4px;text-transform:uppercase;white-space:nowrap;
 background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.gd header .aide{min-height:32px;width:32px;padding:0;border-radius:50%;background:transparent;border:1.5px solid var(--texte);font:700 16px/1 'GD Jost',sans-serif}
.gd main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.gd .home{padding:10px 16px;display:flex;flex-direction:column;gap:7px;flex:1;min-height:0}
.gd .pad{padding:16px}
.gd .eyebrow{font:600 11px 'GD Jost',sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent)}
.gd .hero{display:flex;align-items:center;gap:14px}
.gd .hero img{width:76px;height:76px;flex-shrink:0;border-radius:16px}
.gd h1{margin:3px 0 0;font:700 32px/1 'GD Jost',sans-serif;letter-spacing:3px;text-transform:uppercase;
 background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.gd .devise{margin-top:5px;color:var(--muted);font:italic 400 15px 'GD Jost',sans-serif}
.gd .pitch{margin:0;font-size:15px;line-height:1.38;color:#d6d5e0}
.gd .pitch b{color:#fff;font-weight:650}
.gd .stats{display:flex;gap:8px}
.gd .stats span{flex:1;white-space:nowrap;padding:6px 9px 5px;background:var(--panneau);border:1.5px solid var(--trait);border-radius:12px;font:600 9.5px 'GD Jost',sans-serif;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.gd .stats b{display:block;font:650 19px 'GD Jost',sans-serif;letter-spacing:0;color:var(--texte);text-transform:none}
.gd 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}
.gd button.grand small{font:450 12.5px 'GD Jost',sans-serif;opacity:.92}
.gd .row{display:flex;gap:8px}
.gd .row>*{flex:1}
.gd .note{margin-top:auto;font-size:13px;color:var(--muted);line-height:1.35;border-top:1px solid var(--trait);padding-top:8px}
.gd .note.hors-ligne{color:var(--a1)}

/* Les niveaux : grille numérotée par pages de 50 ; un niveau réussi porte
   son nuancier. */
.gd .pagination{display:flex;align-items:center;gap:8px}
.gd .pagination h2{flex:1;text-align:center;margin:0;font:650 20px 'GD Jost',sans-serif}
.gd .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.gd .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.gd .carte-niveaux .case{min-height:0;height:31px;padding:0;border-radius:7px;font:650 13px 'GD Jost',sans-serif;background:#121217;color:#4a4956;border-color:#1f1f27}
.gd .carte-niveaux .case.faite{color:#fff;border-color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.gd .carte-niveaux .case.ouverte{background:var(--panneau);color:var(--texte);border:2px solid var(--accent)}
.gd .carte-niveaux .case:disabled{opacity:1}

/* ── Partie ──────────────────────────────────────────────────────────────── */
.gd .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
/* La seule ligne sous l'en-tête : niveau · échanges · chrono. */
.gd .ligne{height:32px;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:12px;align-items:center;padding:0 14px;font:600 14px 'GD Jost',sans-serif;font-variant-numeric:tabular-nums}
.gd .ligne .niv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd .ligne .niv small{font-weight:450;color:var(--muted)}
.gd .ligne .coups{text-align:center;white-space:nowrap}
.gd .ligne .coups.invite{color:var(--accent);animation:gd-invite 1.6s ease-in-out infinite}
.gd .ligne .chrono{text-align:right}
@keyframes gd-invite{50%{opacity:.45}}
.gd .plateau{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:2px 4px 4px}
.gd svg.pavage{display:block;touch-action:none;overflow:visible}
.gd svg.pavage polygon{stroke-linejoin:round}
.gd svg.pavage .point{pointer-events:none}

/* Victoire : carte posée sur le plateau. */
.gd .victoire{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,8,12,.55);animation:gd-fondu .5s ease-out both}
.gd .victoire .carte{width:100%;max-width:320px;padding:16px 14px 14px;border-radius:18px;background:var(--panneau);border:1.5px solid var(--trait);display:flex;flex-direction:column;gap:10px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.gd .victoire .titre{font:700 22px 'GD Jost',sans-serif;letter-spacing:1px}
.gd .victoire .score{font:650 30px 'GD Jost',sans-serif;font-variant-numeric:tabular-nums}
.gd .victoire .score small{display:block;font:450 13px 'GD Jost',sans-serif;color:var(--muted)}
.gd .victoire .mention{color:var(--accent);font-weight:600}
.gd .victoire .perso{color:var(--muted);font-size:13.5px;margin-top:-4px}
.gd .victoire .carte{max-height:100%;overflow:auto}
@keyframes gd-fondu{from{opacity:0}}

/* Scores */
.gd .scores{gap:10px}
.gd .titre-scores{margin:0;font:700 20px 'GD Jost',sans-serif}
.gd .resultat{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.gd .resultat .temps{font:650 28px 'GD Jost',sans-serif;font-variant-numeric:tabular-nums}
.gd .resultat p{margin:0;color:var(--muted)}
.gd .resultat p.record{color:var(--accent)}
.gd .outils{display:flex;gap:8px}
.gd .outils>*{flex:1}
.gd .outils.bas{margin-top:auto}

/* Fenêtres (règles, pause) */
.gd .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(5,5,8,.72)}
.gd .fenetre{width:100%;max-width:320px;padding:18px;border-radius:18px;background:var(--panneau);border:1.5px solid var(--trait);display:flex;flex-direction:column;gap:10px}
.gd .fenetre h2{margin:0;font:700 20px 'GD Jost',sans-serif}
.gd .fenetre p,.gd .fenetre li{margin:0;line-height:1.38;color:#d6d5e0}
.gd .fenetre ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.gd .fenetre b{color:#fff;font-weight:650}