/* Aiguillage — portage de Train Tracks (Simon Tatham), id technique tracks.
   Ambiance poste d'aiguillage de nuit : fond d'ardoise, voie d'acier sur
   traverses de bois, un seul accent ambre (les signaux), cadre d'acier ; erreurs
   en rouge vif, comme l'original. Jost (OFL), auto-hébergée. */

@font-face{font-family:'TK Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('/joueur/tracks/jost-var.woff2') format('woff2')}

.tk{--nuit:#0d1318;--panneau:#18222b;--trait:#33434f;--texte:#e8edf1;--muted:#8fa0ae;
 --sable:#f2b134;--bois:#8a6a3a;--bois2:#4a3a22;--laiton:#9fb4c8;--vert:#9fb4c8;--vert-clair:#c9d7e3;--mousse:#ffd24d;--erreur:#f0200c;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);font:450 16px 'TK Jost',system-ui,sans-serif;

 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
 background:
  radial-gradient(120% 60% at 50% 0,rgba(120,150,180,.12),transparent 70%),
  repeating-linear-gradient(0deg,rgba(160,190,220,.03) 0 1px,transparent 1px 7px),
  var(--nuit)}
.tk *{box-sizing:border-box}
.tk button{font:650 15.5px 'TK Jost',system-ui,sans-serif;letter-spacing:.2px;color:var(--texte);background:var(--panneau);border:1.5px solid var(--trait);border-radius:8px;
 min-height:44px;padding:8px 12px 7px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 0 #000}
.tk button:active{transform:translateY(1px);filter:brightness(1.2)}
.tk button:disabled{opacity:.35;cursor:default}
.tk button:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.tk button.primary{background:var(--sable);border-color:var(--sable);color:#1a1405;font-weight:800;box-shadow:4px 4px 0 var(--vert)}
.tk button.primary:active{box-shadow:2px 2px 0 var(--vert);transform:translate(2px,2px)}

/* En-tête : planches de ponton, amarrées par un cordage de sable. */
.tk header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;
 background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 38px),linear-gradient(#6b4a2a,#46301a);
 font:400 24px 'TK Jost',system-ui,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--sable);font-weight:700}
.tk header::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:6px;z-index:2;background:repeating-linear-gradient(90deg,var(--sable) 0 9px,transparent 9px 15px),#1c130a}
.tk header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:500 28px/1 'TK Jost',sans-serif;color:var(--sable)}
.tk header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.tk header .aide{min-height:32px;width:32px;padding:0;border-radius:50%;background:transparent;border:1.5px solid var(--sable);color:var(--sable);font:700 17px/1 'TK Jost',sans-serif;box-shadow:none}
.tk main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:8px}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.tk .home{padding:12px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.tk .pad{padding:16px}
.tk .eyebrow{font:700 11px 'TK Jost',sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--vert-clair)}
.tk .hero{display:flex;align-items:center;gap:14px}
.tk .hero img{width:76px;height:76px;flex-shrink:0;border-radius:16px;box-shadow:5px 5px 0 var(--vert)}
.tk h1{margin:3px 0 0;white-space:nowrap;font:400 31px/1 'TK Jost',system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--sable);font-weight:700}
.tk .devise{margin-top:5px;color:var(--muted);font:italic 400 17px 'TK Jost',system-ui,sans-serif}
.tk .pitch{margin:0;font-size:15.5px;line-height:1.34;color:#d6dee5}
.tk .pitch b{color:var(--texte);font-weight:700}
.tk .stats{display:flex;gap:8px}
.tk .stats span{flex:1;white-space:nowrap;padding:6px 9px 5px;background:var(--panneau);border:1.5px solid var(--trait);border-radius:8px;font:700 9.5px 'TK Jost',sans-serif;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase}
.tk .stats b{display:block;font:800 20px 'TK Jost',sans-serif;letter-spacing:0;color:var(--texte);text-transform:none;margin-bottom:1px}
.tk 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}
.tk button.grand small{font:600 12.5px 'TK Jost',sans-serif;letter-spacing:.3px;opacity:.8}
.tk .row{display:flex;gap:8px}
.tk .row>*{flex:1}
.tk .row.accueil{padding-right:4px}
.tk .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}
.tk .note.hors-ligne{color:var(--vert-clair)}

/* Carte du parcours : chaque archipel relié passe en sable. */
.tk .pagination{display:flex;align-items:center;gap:8px}
.tk .pagination h2{flex:1;text-align:center;margin:0;font:400 24px 'TK Jost',system-ui,sans-serif;letter-spacing:1px;color:var(--sable)}
.tk .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.tk .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.tk .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:700 10.5px 'TK Jost',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--vert-clair)}
.tk .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:4px;font:700 13px 'TK Jost',sans-serif;background:#141c23;color:#5d7384;border-color:#22303b;box-shadow:none}
.tk .carte-niveaux .case.faite{background:var(--sable);color:#1a1405;border-color:var(--sable)}
.tk .carte-niveaux .case.ouverte{background:#0a0f13;color:var(--texte);border:2px solid var(--vert)}
.tk .carte-niveaux .case:disabled{opacity:1}

/* ── Jeu ─────────────────────────────────────────────────────────────────── */
.tk .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.tk .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 16px 4px}
.tk .hud .niv{font:400 29px/1 'TK Jost',system-ui,sans-serif;letter-spacing:1px;color:var(--sable)}
.tk .hud small{display:block;font:700 10px 'TK Jost',sans-serif;letter-spacing:1.6px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.tk .hud .chrono{font:600 26px/1 'TK Jost',sans-serif;font-variant-numeric:tabular-nums;text-align:right}
.tk .plateau{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
/* Cadre de laiton autour de la carte. */
.tk .cadre{padding:7px;border-radius:7px;background:linear-gradient(135deg,#d3dde6,#6f8296 45%,#b8c6d4);
 box-shadow:inset 0 0 0 1.5px #e8eef4,inset 0 0 0 4px #4a5a6b,6px 6px 0 var(--vert),0 12px 28px rgba(0,0,0,.7)}
.tk svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:3px;overflow:visible}
/* Les ponts : planches de bois, joints perpendiculaires, ombre portée. */
/* Les îles : disques de sable, verts une fois verrouillés. */
/* Au compte (bon nombre de ponts, pas forcément ceux de la solution) : contour vert. */
/* Victoire : les ponts brillent en onde depuis le centre, les îles se soulèvent. */
/* Cartouche de victoire : une rose des vents, des anneaux de houle qui s'élargissent. */
.tk .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:tk-fondu .3s ease var(--attente) forwards}
.tk .sacre.congedie{animation:tk-congedie .3s ease forwards;pointer-events:none}
.tk .sacre .ondes{position:absolute;left:50%;top:50%;width:0;height:0}
.tk .sacre .ondes i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:3px solid var(--mousse);opacity:0;
 animation:tk-onde 1.5s cubic-bezier(.2,.6,.3,1) calc(var(--attente) + var(--k) * 140ms) forwards}
.tk .sacre .ondes i:nth-child(even){border-color:var(--sable);border-style:dotted}
.tk .sacre .carte{position:relative;min-width:236px;padding:30px 22px 12px;text-align:center;border-radius:7px;
 background:#10181f;border:2px solid var(--laiton);box-shadow:6px 6px 0 var(--vert),0 14px 34px rgba(0,0,0,.75);
 transform:scale(.3);animation:tk-sacre .6s cubic-bezier(.2,1.5,.4,1) var(--attente) forwards}
.tk .sacre .embleme{position:absolute;left:50%;top:-26px;width:50px;height:50px;margin-left:-25px;border-radius:50%;box-shadow:0 0 0 2px #10181f;
 animation:tk-tourne 2.4s linear calc(var(--attente) + .3s) infinite}
.tk .sacre .titre{font:400 24px/1.15 'TK Jost',system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--sable);font-weight:700;white-space:nowrap}
.tk .sacre .detail{margin-top:5px;font:italic 400 17px 'TK Jost',system-ui,sans-serif;color:var(--vert-clair)}
@keyframes tk-fondu{to{opacity:1}}
@keyframes tk-congedie{from{opacity:1}to{opacity:0}}
@keyframes tk-sacre{to{transform:scale(1)}}
@keyframes tk-onde{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(4.2)}}
@keyframes tk-tourne{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
.tk .plateau:has(.gagne) .cadre{box-shadow:inset 0 0 0 1.5px #e8eef4,inset 0 0 0 4px #4a5a6b,6px 6px 0 var(--vert),0 0 34px rgba(255,210,77,.3)}
/* Supposition en cours : cadre vert (liseré rouge si contradiction). */
.tk .plateau.suppose .cadre{background:repeating-linear-gradient(45deg,var(--vert-clair) 0 3px,#2a3a4a 3px 6px);box-shadow:0 0 0 1.5px var(--vert-clair),6px 6px 0 var(--vert),0 12px 28px rgba(0,0,0,.7)}
.tk .plateau.suppose.faux .cadre{box-shadow:0 0 0 3px var(--erreur),6px 6px 0 var(--vert),0 12px 28px rgba(0,0,0,.7)}
/* Hauteur fixe (deux lignes) : un message qui change ne déplace pas la grille. */
.tk .message{flex:0 0 auto;height:42px;padding:6px 14px 0;overflow:hidden;text-align:center;font-size:14.5px;line-height:1.28;color:var(--muted)}
.tk .message.alerte{color:#ff9d8a}
.tk .message.conseil{color:var(--texte)}
.tk .message.suppose{color:var(--vert-clair)}
.tk .message.gagne{color:var(--sable);font:italic 400 18.5px/1.15 'TK Jost',system-ui,sans-serif;padding-top:5px}
.tk .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px 7px}
.tk .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.tk .outils.trois{padding-bottom:12px}
.tk .outils button{min-height:42px;padding:8px 4px 6px;font-size:15px;white-space:nowrap;overflow:hidden}
.tk .outils button.large{grid-column:1/-1}
.tk .outils button.what-if{color:var(--vert-clair);border-color:#4d6277}
.tk .outils button.what-if.active{background:var(--vert);color:#0c1a0b;border-color:var(--vert-clair)}
.tk .outils button.what-if.faux{background:#b3261e;color:#fff3ee;border-color:#ff9d96}
.tk .outils button.croix-mode.active{background:var(--mousse);color:#2a1f00;border-color:#fff}

/* ── Écran de scores de la grille ────────────────────────────────────────── */
.tk .scores{gap:10px}
.tk h2.titre-scores{margin:0;font:400 27px 'TK Jost',system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--sable);font-weight:700}
.tk .resultat{border-radius:8px;padding:10px;text-align:center;color:#1a1405;background:var(--sable);box-shadow:6px 6px 0 var(--vert)}
.tk .resultat .temps{font:700 38px 'TK Jost',sans-serif;font-variant-numeric:tabular-nums}
.tk .resultat p{margin:2px 0 0;font-size:15.5px}
.tk .resultat .record{color:#7a5400;font-weight:800}
.tk .outils.bas{margin-top:auto;padding:0}
.tk .scores .note{margin-top:0}

/* ── Tutoriel ────────────────────────────────────────────────────────────── */
.tk .tuto{gap:12px}
.tk h2.titre-tuto{margin:0;font:400 25px 'TK Jost',system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--sable);font-weight:700}
.tk .tuto .cadre{align-self:center;margin:4px 0 6px}
.tk svg.grille.illu{width:200px;height:200px}
.tk .points{display:flex;justify-content:center;gap:8px}
.tk .points i{width:10px;height:10px;border-radius:50%;background:var(--trait)}
.tk .points i.on{background:var(--sable);box-shadow:2px 2px 0 var(--vert)}

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.tk .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,9,.84);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.tk .fenetre{width:100%;max-width:300px;padding:20px 16px;border-radius:8px;display:flex;flex-direction:column;gap:10px;text-align:center;
 background:#10181f;border:2px solid var(--laiton);box-shadow:6px 6px 0 var(--vert),0 12px 40px rgba(0,0,0,.7)}
.tk .fenetre h2{margin:0;font:400 26px 'TK Jost',system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--sable);font-weight:700}
.tk .fenetre p{margin:0;font-size:15.5px;line-height:1.4;color:#d6dee5}
/* Écrans bas : chaque pixel gagné va à la grille. */
.tk.compact header{height:44px;font-size:22px}
.tk.compact .hud{padding:5px 16px 3px}
.tk.compact .hud .niv{font-size:24px}
.tk.compact .hud .chrono{font-size:22px}
.tk.compact .hud small{margin-top:3px}
.tk.compact .message{height:37px;padding-top:4px;font-size:13.5px;line-height:1.22}
.tk.compact .message.gagne{font-size:17px;padding-top:3px}
.tk.compact .outils{gap:6px;padding-bottom:5px}
.tk.compact .outils button{min-height:38px;padding:7px 4px 5px}
.tk.compact .outils.deux,.tk.compact .outils.trois{padding-bottom:8px}
.tk.compact .home{gap:6px;padding:9px 16px 8px}
.tk.compact .hero img{width:64px;height:64px;border-radius:14px}
.tk.compact h1{font-size:28px}
.tk.compact .pitch{font-size:14.5px;line-height:1.28}
.tk.compact .stats span{padding:4px 9px 3px}
.tk.compact .stats b{font-size:18px}
.tk.compact button.grand{min-height:50px}
.tk.compact .home>.row>button{min-height:40px}
.tk.compact .note{font-size:13px;padding-top:6px}
@media (prefers-reduced-motion:reduce){.tk .sacre .ondes{display:none}.tk .grille.gagne .pont,.tk .grille.gagne .ile{animation-duration:.01s}.tk .sacre,.tk .sacre .carte,.tk .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. */
.tk.compact .home.accueil>.note:not(.hors-ligne){display:none}

/* ── Plateau : la voie sur son ballast ───────────────────────────────────── */
/* Règles accrochées à .tkc (le groupe du plateau) et non à svg.grille : la loupe en fait une copie par <use>, dont les ancêtres ne sont pas ceux du dessin. */
.tkc .fond{fill:#0f161c;stroke:#04080b;stroke-width:.3}
.tkc .case{fill:#1b252d}
.tkc .case.rail{fill:#2c3945}
.tkc .case.faux{fill:#5a1a14}
.tkc .lignes{fill:none;stroke:#3a4956;stroke-width:.3}
.tkc .voie path{fill:none;stroke-linecap:butt}
.tkc .voie .traverses{stroke:#a07a45;stroke-width:6;stroke-dasharray:1.1 1.55}
.tkc .voie .acier{stroke:#c9d7e3;stroke-width:3.4}
.tkc .voie .entre{stroke:#2c3945;stroke-width:2}
.tkc .voie.indice .traverses{stroke:#f2b134}
.tkc .voie.indice .acier{stroke:#ffe2a0}
.tkc .voie.faux .traverses{stroke:#ff5a3d}
.tkc .voie.faux .acier{stroke:#ffb4a6}
.tkc .voie.faux .entre{stroke:#5a1a14}
.tkc .croix{fill:none;stroke:#8fa0ae;stroke-width:.7;stroke-linecap:round}
.tkc text{font:700 6.2px 'TK Jost',system-ui,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none;fill:#c9d7e3}
.tkc text.nombre.ok{fill:#5fd38d}
.tkc text.nombre.faux{fill:#ff6a52}
/* Zone sous le doigt, tracé d'un glisser, curseur clavier. */
.tkc .visee{fill:rgba(242,177,52,.38);stroke:#f2b134;stroke-width:.5;pointer-events:none}
.tkc .visee.non{fill:rgba(143,160,174,.25);stroke:#8fa0ae;stroke-dasharray:.8 .8}
.tkc .trace{fill:rgba(242,177,52,.14);stroke:#f2b134;stroke-width:.5;pointer-events:none}
.tkc .trace.non{stroke:#8fa0ae;fill:rgba(143,160,174,.12)}
.tkc .zone{fill:rgba(242,177,52,.12);stroke:#f2b134;stroke-width:.6}
.tkc .curseur{fill:none;stroke:#fff;stroke-width:.7;stroke-dasharray:1.6 .9}
/* Victoire : la voie brille d'un coup, puis les anneaux du cartouche. */
.tk .grille.gagne .tkc .voie{animation:tk-brille .9s ease both}
@keyframes tk-brille{0%{filter:none}45%{filter:brightness(1.8) saturate(1.3)}100%{filter:none}}
.tk svg.grille .loupe{fill:none;stroke:#f2b134;stroke-width:.8;filter:drop-shadow(0 .6px 1px rgba(0,0,0,.8))}
.tk svg.grille .loupe-repere{stroke:#fff;stroke-width:.35;opacity:.7}
.tk .message.gagne{font-size:16px}
.tk.compact .message.gagne{font-size:15px}
.tkc .croix.bord{stroke:#e8edf1;stroke-width:1;stroke-linecap:round}
.tkc .origine{fill:rgba(242,177,52,.16);stroke:#f2b134;stroke-width:.8}