/* Opus tessellatum — portage de Mosaic (Simon Tatham), id technique mosaic.
   Ambiance de mosaïque romaine (demande de Stan, 2026-09-27) : fond de pierre
   sombre semé de tesselles, marbre crème, basalte noir, terre cuite (rouge
   pompéien), ocre jaune (giallo antico), vert antique pour les suppositions ;
   frises de grecque (méandre) en bordure, couronne de laurier. Capitales
   d'inscription Marcellus (dessin trajan, OFL, auto-hébergée) pour titres,
   boutons et chiffres ; texte courant en Nunito du portail. */
@font-face{font-family:'MO Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('/joueur/mosaic/marcellus.woff2') format('woff2')}
@font-face{font-family:'MO Marcellus SC';font-style:normal;font-weight:400;font-display:swap;src:url('/joueur/mosaic/marcellussc.woff2') format('woff2')}
/* Le zéro de Marcellus se confond avec la lettre O (un indice « 0 » se lisait
   « O ») : les chiffres viennent de Libre Baskerville (zéro ovale, OFL), branchée
   sous les mêmes noms de famille mais limitée aux chiffres par unicode-range. */
@font-face{font-family:'MO Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('/joueur/mosaic/librebaskerville-400.woff2') format('woff2');unicode-range:U+0030-0039}
@font-face{font-family:'MO Marcellus SC';font-style:normal;font-weight:400;font-display:swap;src:url('/joueur/mosaic/librebaskerville-400.woff2') format('woff2');unicode-range:U+0030-0039}

.mo{--pierre:#1e1a16;--pierre2:#2a241e;--panneau:#312922;--trait:#54473a;--marbre:#eee4cf;--basalte:#1c1a18;--terre:#9a3b26;--terre-vive:#c25a3c;
 --ocre:#c9933a;--ocre-clair:#e2b664;--muted:#b9a88f;--vert:#4a6b58;--vert-clair:#9cc1a8;--erreur:#e0533f;
 --grecque:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M0 10.5H12M10 10.5V1.5H2.5V7.5H7V4.5H5' fill='none' stroke='%23eee4cf' stroke-width='1.3' stroke-linecap='square'/%3E%3C/svg%3E");
 position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--marbre);font:600 15px Nunito,sans-serif;
 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
 background:
  linear-gradient(90deg,rgba(0,0,0,.18) 1px,transparent 1px) 0 0/9px 9px,
  linear-gradient(0deg,rgba(0,0,0,.18) 1px,transparent 1px) 0 0/9px 9px,
  radial-gradient(120% 60% at 50% -10%,#3a2c20 0%,transparent 65%),
  var(--pierre)}
.mo *{box-sizing:border-box}
.mo button{font:400 15px 'MO Marcellus',Georgia,serif;letter-spacing:.5px;color:var(--marbre);background:var(--panneau);border:1px solid var(--trait);border-radius:4px;
 min-height:44px;padding:9px 12px 8px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.35)}
.mo button:active{transform:translateY(1px);filter:brightness(1.15)}
.mo button:disabled{opacity:.35;cursor:default}
.mo button:focus-visible{outline:2px solid var(--ocre);outline-offset:2px}
.mo button.primary{background:linear-gradient(180deg,var(--terre-vive),var(--terre));border-color:#6f2616;color:#fff3dc;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 #5c1f12}

/* En-tête : frise de grecque crème sur terre cuite. */
.mo header{height:50px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;position:relative;background:var(--pierre2);
 font:400 18px 'MO Marcellus SC',Georgia,serif;letter-spacing:3px;color:var(--marbre)}
.mo header::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:8px;background:var(--grecque) 0 -2px/8px 8px repeat-x,var(--terre);border-top:1px solid #5c1f12;border-bottom:1px solid #5c1f12;z-index:2}
.mo header .back{min-height:44px;width:44px;padding:0;background:transparent;border:0;box-shadow:none;font:700 26px/1 Nunito,sans-serif;color:var(--ocre-clair)}
.mo header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.mo header .aide{min-height:44px;width:44px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--ocre);color:var(--ocre-clair);font:400 17px/1 'MO Marcellus',serif;box-shadow:none}
.mo header .tag{font:800 10px Nunito,sans-serif;letter-spacing:1.5px;color:var(--pierre);background:var(--ocre);padding:3px 7px;border-radius:2px}
.mo main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding-top:8px}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.mo .home{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.mo .eyebrow{font:400 12px 'MO Marcellus SC',serif;letter-spacing:3px;color:var(--ocre-clair)}
.mo .hero{display:flex;align-items:center;gap:14px}
.mo .hero img{width:88px;height:88px;flex-shrink:0;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.mo h1{margin:4px 0 0;white-space:nowrap;font:400 29px/1.02 'MO Marcellus',Georgia,serif;letter-spacing:2px;color:var(--marbre);text-shadow:0 2px 0 rgba(0,0,0,.55)}
.mo h1 em{font-style:normal;color:var(--ocre-clair)}
.mo .laurier{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--vert-clair);font:italic 600 13px Nunito,sans-serif}
.mo .laurier svg{width:44px;height:14px;flex-shrink:0}
.mo .pitch{margin:0;font-size:14px;line-height:1.45;color:#e6dac2}
.mo .pitch b{color:var(--ocre-clair)}
.mo .stats{display:flex;gap:10px}
.mo .stats span{flex:1;padding:8px 12px 7px;background:var(--panneau);border:1px solid var(--trait);border-radius:4px;font:800 10px Nunito,sans-serif;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.mo .stats b{display:block;font:400 22px 'MO Marcellus',serif;letter-spacing:0;color:var(--marbre);text-transform:none;margin-bottom:1px}
.mo button.grand{min-height:60px;font-size:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mo button.grand small{font:800 11px Nunito,sans-serif;letter-spacing:1px;opacity:.8}
.mo .row{display:flex;gap:8px}
.mo .row>*{flex:1}
.mo button.petit{font-size:13px;min-height:44px}
.mo .note{margin-top:auto;font-size:12px;color:var(--muted);line-height:1.45;border-top:1px solid var(--trait);padding-top:8px}

/* Carte du parcours */
.mo .pagination{display:flex;align-items:center;gap:8px}
.mo .pagination h2{flex:1;text-align:center;margin:0;font:400 19px 'MO Marcellus',serif}
.mo .pagination button{min-height:44px;width:44px;padding:0;font-size:20px}
.mo .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.mo .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:400 12px 'MO Marcellus SC',serif;letter-spacing:2px;color:var(--ocre-clair)}
.mo .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:2px;font:400 12px 'MO Marcellus',serif;background:#2a231d;color:#6f6252;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
.mo .carte-niveaux .case.faite{background:var(--marbre);color:var(--basalte);border-color:#c9bca0}
.mo .carte-niveaux .case.ouverte{background:linear-gradient(180deg,var(--terre-vive),var(--terre));color:#fff3dc;border-color:#6f2616}
.mo .carte-niveaux .case:disabled{opacity:1}

/* ── Jeu ─────────────────────────────────────────────────────────────────── */
.mo .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.mo .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:10px 16px 6px}
.mo .hud .niv{font:400 27px/1 'MO Marcellus',serif;color:var(--ocre-clair)}
.mo .hud small{display:block;font:800 10px Nunito,sans-serif;letter-spacing:2px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.mo .hud .romain{font:400 12px 'MO Marcellus SC',serif;letter-spacing:2px;color:var(--muted);text-transform:none}
.mo .hud .chrono{font:400 25px/1 'MO Marcellus',serif;font-variant-numeric:tabular-nums;text-align:right}
.mo .plateau{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
/* Cadre : bande de grecque crème sur terre cuite, liseré ocre. */
.mo .cadre{padding:9px;border-radius:3px;background:var(--grecque) 0 0/9px 9px,var(--terre);
 box-shadow:0 0 0 2px var(--ocre),0 10px 24px rgba(0,0,0,.55)}
.mo .cadre>svg{box-shadow:0 0 0 2px #5c1f12}
.mo svg.grille{display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.mo svg.grille text{font-family:'MO Marcellus',Georgia,serif;pointer-events:none}
.mo .grille.gagne rect.noire{animation:mo-vague-noire 1.1s ease-in-out both}
.mo .grille.gagne rect.claire{animation:mo-vague-claire 1.1s ease-in-out both}
@keyframes mo-vague-noire{40%{fill:#a8762a}}
@keyframes mo-vague-claire{40%{fill:#f3d58f}}
.mo .plateau:has(.gagne) .cadre{box-shadow:0 0 0 3px var(--ocre-clair),0 0 30px rgba(226,182,100,.45)}
/* Supposition en cours : le cadre passe au vert antique (liseré rouge si contradiction). */
.mo .plateau.suppose .cadre{background:var(--grecque) 0 0/9px 9px,var(--vert);box-shadow:0 0 0 2px var(--vert-clair),0 10px 24px rgba(0,0,0,.55)}
.mo .plateau.suppose.faux .cadre{box-shadow:0 0 0 3px var(--erreur),0 10px 24px rgba(0,0,0,.55)}
/* Hauteur fixe (deux lignes) : un message qui change ne déplace pas la grille. */
.mo .message{flex:0 0 auto;height:44px;padding:6px 14px 0;overflow:hidden;text-align:center;font-size:13px;line-height:1.35;color:var(--muted)}
.mo .message.alerte{color:#ffb3a3}
.mo .message.suppose{color:var(--vert-clair)}
.mo .message.gagne{color:var(--ocre-clair);font:400 15px/1.3 'MO Marcellus',serif;padding-top:6px}
.mo .outils{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px 7px}
.mo .outils.deux{grid-template-columns:1fr 1fr;padding-bottom:12px}
.mo .outils button{min-height:42px;padding:9px 4px 7px;font-size:14px;white-space:nowrap;overflow:hidden}
.mo .outils button.large{grid-column:1/-1}
.mo .outils button.what-if{color:var(--vert-clair);border-color:#3f5a4a}
.mo .outils button.what-if.active{background:var(--vert);color:#f1f7f2;border-color:var(--vert-clair)}
.mo .outils button.what-if.faux{background:#b3362a;color:#fff3ee;border-color:#ff9f8f}

/* ── Écran de scores du tableau ──────────────────────────────────────────── */
.mo .scores{gap:10px}
.mo h2.titre-scores{margin:0;font:400 27px 'MO Marcellus',serif;letter-spacing:1px}
.mo .resultat{color:var(--basalte);border:9px solid transparent;border-radius:3px;padding:10px;text-align:center;
 background:linear-gradient(var(--marbre),var(--marbre)) padding-box,var(--grecque) 0 0/9px 9px border-box,var(--terre) border-box;box-shadow:0 0 0 2px var(--ocre)}
.mo .resultat .temps{font:400 40px 'MO Marcellus',serif;font-variant-numeric:tabular-nums}
.mo .resultat p{margin:2px 0 0;font-size:14px}
.mo .resultat .record{color:#2f6b43;font-weight:800}
.mo h3.sous-titre{margin:4px 0 0;font:400 14px 'MO Marcellus SC',serif;letter-spacing:2px;color:var(--ocre-clair)}
.mo ol.classement{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mo .classement li{display:flex;gap:10px;align-items:center;padding:8px 12px;background:var(--panneau);border:1px solid var(--trait);border-radius:3px}
.mo .classement li.moi{border-color:var(--ocre);background:linear-gradient(90deg,rgba(201,147,58,.2),transparent 70%),var(--panneau)}
.mo .classement li.vide{color:var(--muted);background:none;border:0}
.mo .classement .rang{font:400 16px 'MO Marcellus',serif;color:var(--ocre-clair);min-width:22px}
.mo .classement .nom{flex:1;color:var(--muted)}
.mo .classement .val{font:400 16px 'MO Marcellus',serif;font-variant-numeric:tabular-nums}
.mo .outils.bas{margin-top:auto;padding:0}
.mo .scores .note{margin-top:0}

/* ── Tutoriel ────────────────────────────────────────────────────────────── */
.mo .tuto{gap:12px}
.mo h2.titre-tuto{margin:0;font:400 25px 'MO Marcellus',serif;color:var(--ocre-clair)}
.mo .tuto .cadre{align-self:center}
.mo svg.grille.illu{width:190px;height:190px}
.mo .etats{display:flex;justify-content:center;gap:12px;align-self:center;padding:10px 0}
.mo .etats figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:7px;font:800 11px Nunito,sans-serif;color:var(--muted)}
.mo .etats i{display:block;width:46px;height:46px;border-radius:3px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 0 0 2px var(--terre)}
.mo .etats .fl{font:400 22px 'MO Marcellus',serif;color:var(--ocre);align-self:center;margin-top:-18px}
.mo .points{display:flex;justify-content:center;gap:8px}
.mo .points i{width:9px;height:9px;background:var(--trait);transform:rotate(45deg)}
.mo .points i.on{background:var(--ocre-clair)}

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.mo .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,16,12,.8);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.mo .fenetre{width:100%;max-width:300px;padding:20px 16px;color:var(--basalte);border:9px solid transparent;border-radius:3px;display:flex;flex-direction:column;gap:10px;text-align:center;
 background:linear-gradient(var(--marbre),var(--marbre)) padding-box,var(--grecque) 0 0/9px 9px border-box,var(--terre) border-box;box-shadow:0 0 0 2px var(--ocre),0 12px 40px rgba(0,0,0,.6)}
.mo .fenetre h2{margin:0;font:400 24px 'MO Marcellus',serif;letter-spacing:1px;color:var(--terre)}
.mo .fenetre p{margin:0;font-size:14px;line-height:1.45}
.mo .fenetre button:not(.primary){background:#fff8ea;color:var(--basalte);border-color:#c9b28c}
@media (prefers-reduced-motion:reduce){.mo .grille.gagne rect{animation:none}}

/* ── Production : classements, hors connexion ───────────────────────────── */
.mo .pad{padding:16px}
.mo .stats.trois span{padding:7px 9px 6px;font-size:9px;letter-spacing:1.2px}
.mo .stats.trois b{font-size:20px}
.mo .note.hors-ligne{color:var(--ocre-clair)}
.mo .onglets{display:flex;gap:6px}
.mo .onglets button{flex:1}
.mo .onglets button.actif{background:linear-gradient(180deg,var(--terre-vive),var(--terre));border-color:#6f2616;color:#fff3dc}
.mo .note-haut{margin:0;font-size:12px;color:var(--muted)}
.mo .perso{margin:0;font-size:13px;color:var(--vert-clair)}
.mo .scores ol.classement{overflow:auto;min-height:0;flex:0 1 auto}
.mo .scores .resultat .temps{font-size:34px}

/* Accueil compact : le tableau des médailles tient sous le titre sans défilement. */
.mo .home{gap:8px;padding:12px 16px}
.mo .hero img{width:74px;height:74px}
.mo .home h1{font-size:26px}
.mo .home .row.accueil button.grand{min-height:54px;font-size:15px;white-space:nowrap;padding-left:6px;padding-right:6px}
.mo .home .stats span{white-space:nowrap}

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