/* Élixir — portage de Bottle Fill / Magic Sort, id technique magicsort.
   Identité d'officine d'apothicaire : vert bouteille profond, laiton, parchemin,
   capitales gravées (Cinzel) et texte humaniste (Alegreya Sans). Polices
   auto-hébergées (licence OFL). */
@font-face{font-family:'MS Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('/joueur/magicsort/cinzel-700.woff2') format('woff2')}
@font-face{font-family:'MS Alegreya';font-style:normal;font-weight:500;font-display:swap;src:url('/joueur/magicsort/alegreyasans-500.woff2') format('woff2')}
@font-face{font-family:'MS Alegreya';font-style:normal;font-weight:800;font-display:swap;src:url('/joueur/magicsort/alegreyasans-800.woff2') format('woff2')}

.ms{--fond:#0c1714;--panneau:#15251f;--trait:#2b4238;--parchemin:#efe4c8;--muted:#9fae9f;--laiton:#c9a14a;--laiton-clair:#e8c878;--verre:#e8dcc0;
 -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:fixed;z-index:100;overflow:hidden;display:flex;flex-direction:column;color:var(--parchemin);font:500 15px 'MS Alegreya',sans-serif;
 background:radial-gradient(120% 55% at 50% -5%,#24453a 0%,transparent 65%),radial-gradient(80% 40% at 50% 110%,#2b1d10 0%,transparent 70%),var(--fond)}
.ms *{box-sizing:border-box}
.ms button{font:800 14px 'MS Alegreya',sans-serif;color:var(--parchemin);background:var(--panneau);border:1px solid var(--trait);border-radius:12px;
 min-height:44px;padding:8px 12px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.ms button:active{transform:translateY(1px);filter:brightness(1.15)}
.ms button:disabled{opacity:.35;cursor:default}
.ms button:focus-visible{outline:2px solid var(--laiton-clair);outline-offset:2px}
.ms button.primary{background:linear-gradient(180deg,var(--laiton-clair),var(--laiton));color:#1c1406;border-color:#8a6a28;box-shadow:0 3px 0 #6f5420,inset 0 1px 0 rgba(255,255,255,.45)}
.ms button.primary:active{box-shadow:0 1px 0 #6f5420}

.ms header{height:48px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--trait);
 font:700 14px 'MS Cinzel',serif;letter-spacing:1.5px;color:var(--laiton-clair)}
.ms header .back{min-height:34px;width:38px;padding:0;background:transparent;border:0;box-shadow:none;font:800 26px/1 'MS Alegreya',sans-serif;color:var(--laiton-clair)}
.ms header .titre{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms header .tag{font:800 10px 'MS Alegreya',sans-serif;letter-spacing:1.5px;color:#1c1406;background:var(--laiton);padding:3px 7px;border-radius:5px}
.ms main{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
.ms .home{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.ms .eyebrow{font:800 11px 'MS Alegreya',sans-serif;letter-spacing:2.5px;color:var(--laiton);text-transform:uppercase}
.ms .hero{display:flex;align-items:center;gap:14px}
.ms .hero img{width:84px;height:84px;flex-shrink:0;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.ms h1{margin:3px 0 0;font:700 27px/1.05 'MS Cinzel',serif;color:var(--parchemin);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.ms h1 em{font-style:normal;color:var(--laiton-clair)}
.ms .pitch{margin:0;font-size:14px;line-height:1.45;color:#d9d0b8}
.ms .pitch b{color:var(--laiton-clair)}
.ms .cartes{display:flex;flex-direction:column;gap:9px}
.ms .carte{display:flex;align-items:center;gap:12px;text-align:left;min-height:62px;padding:8px 14px;border-left:3px solid var(--laiton)}
.ms .carte .num{font:700 18px 'MS Cinzel',serif;color:var(--laiton-clair);min-width:62px}
.ms .carte .quoi{flex:1;display:flex;flex-direction:column;gap:2px}
.ms .carte .quoi small{font-size:12px;color:var(--muted);font-weight:500}
.ms .carte .etat{font-size:13px;color:#7fd6a6;text-align:right;white-space:nowrap}
.ms .note{margin-top:auto;font-size:12px;color:var(--muted);line-height:1.45;border-top:1px solid var(--trait);padding-top:8px}

/* ── Jeu ─────────────────────────────────────────────────────────────────── */
.ms .jeu{display:flex;flex-direction:column;flex:1;min-height:0}
.ms .hud{display:flex;align-items:flex-end;justify-content:space-between;padding:12px 16px 4px}
.ms .hud .niv{font:700 24px/1 'MS Cinzel',serif;color:var(--laiton-clair)}
.ms .hud small{display:block;font:800 10px 'MS Alegreya',sans-serif;letter-spacing:2px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.ms .hud .chrono{font:800 24px/1 'MS Alegreya',sans-serif;font-variant-numeric:tabular-nums;text-align:right}
.ms .etagere{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:8px 8px}
.ms .rangee{display:flex;justify-content:center;align-items:flex-end;position:relative}
.ms .rangee::after{content:'';position:absolute;left:4%;right:4%;bottom:-9px;height:7px;border-radius:3px;
 background:linear-gradient(180deg,#8a5a2b,#5a3a1a);box-shadow:0 4px 8px rgba(0,0,0,.5)}
.ms .fiole{position:relative;background:none;border:0;box-shadow:none;padding:14px 0 0;min-height:0;border-radius:0;flex:0 0 auto;
 transition:transform .16s ease;z-index:1}
.ms .fiole:active{transform:none;filter:none}
.ms .fiole.choisie{transform:translateY(-16px)}
.ms .fiole.refus{animation:ms-refus .28s ease}
@keyframes ms-refus{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ms .verre{position:relative;width:100%;height:100%;border:2px solid var(--verre);border-top:0;border-radius:0 0 999px 999px;overflow:hidden;
 display:flex;flex-direction:column-reverse;background:rgba(232,220,192,.05);box-shadow:inset 0 -6px 12px rgba(0,0,0,.35)}
.ms .verre::after{content:'';position:absolute;inset:0 auto 0 14%;width:16%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.04));pointer-events:none;border-radius:999px}
.ms .col{position:absolute;top:0;left:-4px;right:-4px;height:6px;border:2px solid var(--verre);border-radius:4px;background:rgba(232,220,192,.1)}
.ms .dose{flex:0 0 auto;width:100%;position:relative;display:flex;align-items:center;justify-content:center;
 font:800 13px/1 'MS Alegreya',sans-serif;color:rgba(0,0,0,.55);box-shadow:inset 0 2px 0 rgba(255,255,255,.18)}
.ms .dose.arrive{animation:ms-arrive .28s ease-out both}
@keyframes ms-arrive{from{transform:scaleY(0);transform-origin:bottom;opacity:.4}to{transform:scaleY(1);transform-origin:bottom;opacity:1}}
.ms .dose.mystere{background:repeating-linear-gradient(135deg,#2a3a33 0 5px,#223029 5px 10px)!important;color:var(--laiton-clair);font-size:15px}
.ms .bouchon{position:absolute;top:2px;left:18%;right:18%;height:14px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#b98b5e,#7b5634);
 box-shadow:0 2px 0 rgba(0,0,0,.35);animation:ms-bouchon .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ms-bouchon{from{transform:translateY(-18px);opacity:0}}
.ms .fiole.pleine .verre{box-shadow:inset 0 -6px 12px rgba(0,0,0,.35),0 0 14px rgba(232,200,120,.45)}
.ms .message{min-height:32px;padding:4px 16px;text-align:center;font-size:13px;line-height:1.35;color:var(--muted)}
.ms .message.alerte{color:#ff9f8a}
.ms .actions{display:flex;gap:8px;padding:0 12px 12px}
.ms .actions button{flex:1;white-space:nowrap;padding:8px 6px;font-size:13px}
.ms .coups{font-variant-numeric:tabular-nums}

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.ms .voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:20px;
 background:rgba(8,14,12,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.ms .fenetre{width:100%;max-width:300px;padding:22px 18px;background:linear-gradient(180deg,#1b2e27,#132019);border:1px solid var(--laiton);border-radius:18px;
 display:flex;flex-direction:column;gap:10px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.6),inset 0 0 0 4px rgba(201,161,74,.12)}
.ms .fenetre h2{margin:0;font:700 21px 'MS Cinzel',serif;color:var(--laiton-clair)}
.ms .fenetre .temps{font:800 36px 'MS Alegreya',sans-serif;font-variant-numeric:tabular-nums}
.ms .fenetre p{margin:0;font-size:14px;color:#d9d0b8;line-height:1.45}
.ms .fenetre .record{color:#7fd6a6;font-weight:800}
.ms .gagne .fenetre{animation:ms-pop .4s cubic-bezier(.3,1.5,.5,1) both}
@keyframes ms-pop{from{transform:scale(.85);opacity:0}}
@media (prefers-reduced-motion:reduce){.ms .dose.arrive,.ms .bouchon,.ms .gagne .fenetre,.ms .fiole.refus{animation:none}.ms .fiole{transition:none}}

/* ── Parcours, tutoriel ──────────────────────────────────────────────────── */
.ms .pad{padding:16px}
.ms header .aide{min-height:30px;width:30px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--laiton);color:var(--laiton-clair);font:800 16px/1 'MS Alegreya',sans-serif;box-shadow:none}
.ms h1.grand-titre{font-size:40px;letter-spacing:1px;color:var(--laiton-clair);text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 18px rgba(232,200,120,.25)}
.ms .devise{font:italic 500 14px 'MS Alegreya',sans-serif;color:var(--muted);margin-top:2px}
.ms .stats{display:flex;gap:10px}
.ms .stats span{flex:1;padding:8px 12px;background:var(--panneau);border:1px solid var(--trait);border-radius:12px;font:800 10px 'MS Alegreya',sans-serif;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.ms .stats b{display:block;font:700 20px 'MS Cinzel',serif;letter-spacing:0;color:var(--parchemin);margin-bottom:2px;text-transform:none}
.ms button.grand{min-height:58px;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ms button.grand small{font:800 11px 'MS Alegreya',sans-serif;letter-spacing:1px;opacity:.75}
.ms .row{display:flex;gap:8px}
.ms .row>*{flex:1}
.ms button.petit{font-size:12px;min-height:40px}
.ms h2.titre-carte{margin:0;font:700 19px 'MS Cinzel',serif;color:var(--parchemin)}
.ms .carte-niveaux{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.ms .carte-niveaux .chapitre{grid-column:1/-1;margin:8px 0 1px;font:800 11px 'MS Alegreya',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--laiton)}
.ms .carte-niveaux .case{min-height:0;height:30px;padding:0;border-radius:8px;font:700 11px 'MS Cinzel',serif;background:#101c18;color:#4d6158;box-shadow:none}
.ms .carte-niveaux .case.faite{background:rgba(127,214,166,.14);border-color:rgba(127,214,166,.5);color:#7fd6a6}
.ms .carte-niveaux .case.ouverte{background:linear-gradient(180deg,var(--laiton-clair),var(--laiton));border-color:#8a6a28;color:#1c1406}
.ms .carte-niveaux .case:disabled{opacity:1}
.ms .tuto{gap:14px}
.ms h2.titre-tuto{margin:0;font:700 23px 'MS Cinzel',serif;color:var(--laiton-clair)}
.ms .etagere.illu{flex:0 0 auto;padding:22px 0 14px;pointer-events:none}
.ms .points{display:flex;justify-content:center;gap:8px}
.ms .points i{width:8px;height:8px;border-radius:50%;background:var(--trait)}
.ms .points i.on{background:var(--laiton-clair);box-shadow:0 0 8px var(--laiton)}
.ms .fenetre .row{display:flex;gap:8px}

/* ── Production : classements, pagination, repères ───────────────────────── */
.ms .stats span{padding:7px 10px;font-size:9px;letter-spacing:1.2px}
.ms .stats b{font-size:18px}
.ms .note.hors-ligne{color:var(--laiton-clair)}
.ms .pagination{display:flex;align-items:center;gap:8px}
.ms .pagination h2{flex:1;text-align:center;margin:0;font-size:16px}
.ms .pagination button{min-height:36px;width:44px;padding:0;font-size:20px}
.ms .carte-niveaux .case.mystere::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--laiton-clair)}
.ms .carte-niveaux .case{position:relative}
.ms .onglets{display:flex;gap:6px}
.ms .onglets button{flex:1}
.ms .onglets button.actif{background:linear-gradient(180deg,var(--laiton-clair),var(--laiton));color:#1c1406;border-color:#8a6a28}
.ms .note-haut{margin:0;font-size:12px;color:var(--muted)}
.ms .perso{margin:0;font-size:13px;color:#7fd6a6}
.ms ol.classement{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0;flex:1}
.ms .classement li{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panneau);border:1px solid var(--trait);border-radius:10px;font-size:14px}
.ms .classement li.moi{border-color:#7fd6a6;background:linear-gradient(90deg,rgba(127,214,166,.13),transparent 70%),var(--panneau)}
.ms .classement li.vide{color:var(--muted);border:0;background:none}
.ms .classement .rang{font:700 14px 'MS Cinzel',serif;color:var(--laiton-clair);min-width:26px}
.ms .classement .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms .classement .val{font-weight:800;font-variant-numeric:tabular-nums}
/* « What if ? » : l'étagère sauvegardée se signale par un liseré turquoise. */
.ms .actions button.what-if{color:#7fd6a6;border-color:#3a6150}
.ms .actions button.what-if.active{background:#2f7d6b;color:#f1fbf6;border-color:#7fd6a6}
.ms .etagere.suppose{box-shadow:inset 0 0 0 2px #7fd6a6;border-radius:16px;background:rgba(127,214,166,.06)}
.ms .message.suppose{color:#9fe8c2}

/* Accueil compact : le tableau des médailles tient sous le titre sans défilement. */
.ms .home{gap:10px;padding:14px 16px}

/* Grilles libres (2026-10-23) : une rangée de boutons de plus sur l'accueil ;
   sur écran bas, la note explicative du bas lui cède la place. */
.ms.compact .home.avec-libres>.note:not(.hors-ligne){display:none}