/* Archipel — portage de Bridges / Hashiwokakero (Simon Tatham),
   id technique bridges. Ambiance carte d'archipel : mer sombre, îles de sable
   (vertes une fois verrouillées), ponts de planches, cadre de laiton, un seul
   accent vert prairie ; erreurs en rouge vif, comme l'original. IM Fell English
   pour les titres, Jost pour le reste et les chiffres (OFL), polices
   auto-hébergées. */

@font-face{font-family:'BR Fell';font-style:normal;font-weight:400;font-display:swap;src:url('/joueur/bridges/imfell-normal.woff2') format('woff2')}
@font-face{font-family:'BR Fell';font-style:italic;font-weight:400;font-display:swap;src:url('/joueur/bridges/imfell-italic.woff2') format('woff2')}
/* IM Fell a des chiffres elzéviriens (le 0 est un o, le 1 un petit I) : les chiffres seuls viennent de Jost. */
@font-face{font-family:'BR Fell';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0030-0039;src:url('/joueur/bridges/jost-var.woff2') format('woff2')}
@font-face{font-family:'BR Fell';font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0030-0039;src:url('/joueur/bridges/jost-var.woff2') format('woff2')}
@font-face{font-family:'BR Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('/joueur/bridges/jost-var.woff2') format('woff2')}

.br{--nuit:#08171f;--panneau:#102a36;--trait:#24505f;--texte:#e9f3ef;--muted:#8db0b4;
 --sable:#efe3b8;--bois:#c68b4f;--bois2:#7a4a22;--laiton:#d4b45f;--vert:#62c554;--vert-clair:#a9e69d;--mousse:#7ff3e0;--erreur:#f0200c;
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--texte);font:450 16px 'BR 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(60,140,160,.16),transparent 70%),
  repeating-linear-gradient(0deg,rgba(127,208,216,.035) 0 1px,transparent 1px 7px),
  var(--nuit)}
.br *{box-sizing:border-box}
.br button{font:650 15.5px 'BR 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}
.br button:active{transform:translateY(1px);filter:brightness(1.2)}
.br button:disabled{opacity:.35;cursor:default}
.br button:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.br button.primary{background:var(--sable);border-color:var(--sable);color:#1c2a1a;font-weight:800;box-shadow:4px 4px 0 var(--vert)}
.br 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. */
.br 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 'BR Fell',Georgia,serif;letter-spacing:3px;text-transform:uppercase;color:var(--sable)}
.br 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}
.br header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:500 28px/1 'BR Jost',sans-serif;color:var(--sable)}
.br header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.br 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 'BR Jost',sans-serif;box-shadow:none}
.br main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:8px}

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

/* Carte du parcours : chaque archipel relié passe en sable. */
.br .pagination{display:flex;align-items:center;gap:8px}
.br .pagination h2{flex:1;text-align:center;margin:0;font:400 24px 'BR Fell',Georgia,serif;letter-spacing:1px;color:var(--sable)}
.br .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.br .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.br .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:700 10.5px 'BR Jost',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--vert-clair)}
.br .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:4px;font:700 13px 'BR Jost',sans-serif;background:#0b1d26;color:#476a73;border-color:#16323d;box-shadow:none}
.br .carte-niveaux .case.faite{background:var(--sable);color:#1c2a1a;border-color:var(--sable)}
.br .carte-niveaux .case.ouverte{background:#06121a;color:var(--texte);border:2px solid var(--vert)}
.br .carte-niveaux .case:disabled{opacity:1}

/* ── Jeu ─────────────────────────────────────────────────────────────────── */
.br .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.br .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 16px 4px}
.br .hud .niv{font:400 29px/1 'BR Fell',Georgia,serif;letter-spacing:1px;color:var(--sable)}
.br .hud small{display:block;font:700 10px 'BR Jost',sans-serif;letter-spacing:1.6px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.br .hud .chrono{font:600 26px/1 'BR Jost',sans-serif;font-variant-numeric:tabular-nums;text-align:right}
.br .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. */
.br .cadre{padding:7px;border-radius:7px;background:linear-gradient(135deg,#e4c870,#9a7a32 45%,#cfae55);
 box-shadow:inset 0 0 0 1.5px #f3de9a,inset 0 0 0 4px #7b5d22,6px 6px 0 var(--vert),0 12px 28px rgba(0,0,0,.7)}
.br svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:3px;overflow:visible}
.br svg.grille .fond{fill:#12384a;stroke:#07202b;stroke-width:.3}
.br svg.grille .houle{fill:url(#br-houle);opacity:.2;pointer-events:none}
.br svg.grille .vague{fill:none;stroke:#9fe3e8;stroke-width:.25;stroke-linecap:round}
.br svg.grille .points{fill:none;stroke:#7fc3cf;stroke-width:.55;stroke-linecap:round;opacity:.28}
/* Les ponts : planches de bois, joints perpendiculaires, ombre portée. */
.br svg.grille .pont line{fill:none;stroke-linecap:butt}
.br svg.grille .pont .ombre{stroke:#02121a;opacity:.45}
.br svg.grille .pont .corps{stroke:#c68b4f}
.br svg.grille .pont .joints{stroke:#6a3d19;stroke-opacity:.6;stroke-dasharray:.28 1.45}
.br svg.grille .pont .verrou{stroke:#f6edc7;opacity:.5;stroke-linecap:round}
.br svg.grille .pont.faux .corps{stroke:var(--erreur)}
.br svg.grille .pont.faux .joints{stroke:#5a0600}
.br svg.grille .pont.choisi .corps{stroke:var(--mousse)}
.br svg.grille .pont.choisi .joints{stroke:#0b5a52}
.br svg.grille .croix path{fill:none;stroke:#bfe3e8;stroke-width:.55;stroke-linecap:round}
.br svg.grille .croix.choisi path{stroke:var(--mousse);stroke-width:.75}
/* Les îles : disques de sable, verts une fois verrouillés. */
.br svg.grille .ile circle{fill:#efe3b8;stroke:#8f7d44;stroke-width:.5}
.br svg.grille .ile text{fill:#1c2a1a;font:700 6.6px 'BR Jost',system-ui,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.br svg.grille .ile text.deux{font-size:5px}
.br svg.grille .ile.verrouillee circle{fill:#8fd27c;stroke:#2f6a2a}
/* Au compte (bon nombre de ponts, pas forcément ceux de la solution) : contour vert. */
.br svg.grille .ile.aucompte circle{stroke:#3fb23a;stroke-width:.9}
.br svg.grille .ile.faux circle{fill:var(--erreur);stroke:#5a0600;stroke-width:.5}
.br svg.grille .ile.faux text{fill:#fff}
.br svg.grille .ile.choisie circle{stroke:var(--mousse);stroke-width:1.5}
.br svg.grille .zone{fill:rgba(98,197,84,.14);stroke:var(--vert);stroke-width:1}
.br svg.grille .curseur{fill:none;stroke:#fff;stroke-width:.8;stroke-dasharray:2 1}
/* Victoire : les ponts brillent en onde depuis le centre, les îles se soulèvent. */
.br .grille.gagne .pont{animation:br-brille .8s cubic-bezier(.4,0,.2,1) both}
.br .grille.gagne .ile{transform-box:fill-box;transform-origin:center;animation:br-souleve .7s cubic-bezier(.4,0,.2,1) both}
@keyframes br-brille{0%{filter:none}45%{filter:brightness(1.7) saturate(1.2)}100%{filter:none}}
@keyframes br-souleve{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
/* Cartouche de victoire : une rose des vents, des anneaux de houle qui s'élargissent. */
.br .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:br-fondu .3s ease var(--attente) forwards}
.br .sacre.congedie{animation:br-congedie .3s ease forwards;pointer-events:none}
.br .sacre .ondes{position:absolute;left:50%;top:50%;width:0;height:0}
.br .sacre .ondes i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:3px solid var(--mousse);opacity:0;
 animation:br-onde 1.5s cubic-bezier(.2,.6,.3,1) calc(var(--attente) + var(--k) * 140ms) forwards}
.br .sacre .ondes i:nth-child(even){border-color:var(--sable);border-style:dotted}
.br .sacre .carte{position:relative;min-width:236px;padding:30px 22px 12px;text-align:center;border-radius:7px;
 background:#0a1f29;border:2px solid var(--laiton);box-shadow:6px 6px 0 var(--vert),0 14px 34px rgba(0,0,0,.75);
 transform:scale(.3);animation:br-sacre .6s cubic-bezier(.2,1.5,.4,1) var(--attente) forwards}
.br .sacre .embleme{position:absolute;left:50%;top:-26px;width:50px;height:50px;margin-left:-25px;border-radius:50%;box-shadow:0 0 0 2px #0a1f29;
 animation:br-tourne 2.4s linear calc(var(--attente) + .3s) infinite}
.br .sacre .titre{font:400 24px/1.15 'BR Fell',Georgia,serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--sable);white-space:nowrap}
.br .sacre .detail{margin-top:5px;font:italic 400 17px 'BR Fell',Georgia,serif;color:var(--vert-clair)}
@keyframes br-fondu{to{opacity:1}}
@keyframes br-congedie{from{opacity:1}to{opacity:0}}
@keyframes br-sacre{to{transform:scale(1)}}
@keyframes br-onde{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(4.2)}}
@keyframes br-tourne{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
.br .plateau:has(.gagne) .cadre{box-shadow:inset 0 0 0 1.5px #f3de9a,inset 0 0 0 4px #7b5d22,6px 6px 0 var(--vert),0 0 34px rgba(127,243,224,.3)}
/* Supposition en cours : cadre vert (liseré rouge si contradiction). */
.br .plateau.suppose .cadre{background:repeating-linear-gradient(45deg,var(--vert-clair) 0 3px,#1f4d1c 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)}
.br .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. */
.br .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)}
.br .message.alerte{color:#ff9d8a}
.br .message.conseil{color:var(--texte)}
.br .message.suppose{color:var(--vert-clair)}
.br .message.gagne{color:var(--sable);font:italic 400 18.5px/1.15 'BR Fell',Georgia,serif;padding-top:5px}
.br .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px 7px}
.br .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.br .outils.trois{padding-bottom:12px}
.br .outils button{min-height:42px;padding:8px 4px 6px;font-size:15px;white-space:nowrap;overflow:hidden}
.br .outils button.large{grid-column:1/-1}
.br .outils button.what-if{color:var(--vert-clair);border-color:#2f6a2a}
.br .outils button.what-if.active{background:var(--vert);color:#0c1a0b;border-color:var(--vert-clair)}
.br .outils button.what-if.faux{background:#b3261e;color:#fff3ee;border-color:#ff9d96}
.br .outils button.croix-mode.active{background:var(--mousse);color:#06302b;border-color:#fff}

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

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

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