/* Bonta contre Brâkmar — écrans du jeu en ligne (lobby, salle, draft), dans le style Dofus 2 de l'écran de sélection */
.mjBtnLigne{margin-left:.6em}
.mjBtnLigne.indispo{filter:grayscale(.8) brightness(.8)}
.mjEcran{flex-direction:column;background:#0d0e0a;font-size:clamp(12px,calc(.4vw + .75vh),18px);overflow:hidden;z-index:12}
.mjFond{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 70% at 50% 40%,rgba(30,34,22,.4),rgba(8,9,6,.95)),url(assets/carte/minicarte.webp) center/cover;filter:saturate(.7)}
.mjHaut{display:flex;align-items:center;justify-content:space-between;gap:1em;width:100%;max-width:1900px;margin:0 auto;padding:.6em 1.6em .3em}
.mjHaut .logo h1{margin:0;font-size:2.2em;font-weight:900;color:#f2ead0;text-shadow:0 2px 0 #000,0 0 18px rgba(248,205,1,.25);white-space:nowrap}
.mjHaut .logo h1 span{font-size:.5em;color:var(--lime);vertical-align:middle;padding:0 .3em}
.mjHaut .logo p{margin:0;font-size:.9em;color:var(--txt)}
.mjEtat{display:flex;align-items:center;gap:1em;color:var(--clair);text-shadow:0 1px 2px #000}
.mjCorps{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.1fr);gap:1.2em;width:100%;max-width:1900px;margin:0 auto;padding:.5em 1.6em}
.mjPan{display:flex;flex-direction:column;min-height:0}
.mjIn{padding:.8em 1em;display:flex;flex-direction:column;gap:.7em;overflow:auto;min-height:0}
.mjIn label{display:flex;flex-direction:column;gap:.25em;font-weight:600;color:var(--clair)}
.mjIn input,.mjForm input{background:#1a1b15;color:var(--clair);border:1px solid var(--bord);border-radius:2px;padding:.45em .6em;font:1em Roboto,Tahoma,Arial}
.mjIn input:focus{outline:1px solid var(--vert)}
.mjAide{font-size:.85em;margin:0}
.mjModes{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.mjMode{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2em;padding:.8em .4em;border:0;border-radius:5px;background:rgba(26,27,21,.9);box-shadow:0 0 0 1px var(--bord) inset;color:var(--clair)}
.mjMode b{font:900 1.5em Cinzel,Georgia,serif;color:#f2ead0}
.mjMode small{font-size:.75em;color:var(--doux);text-align:center}
.mjMode i{font-style:normal;font-size:.75em;color:var(--lime);min-height:1.1em}
.mjMode:hover{box-shadow:0 0 0 1px var(--vert) inset}
.mjMode.sel{box-shadow:0 0 0 2px var(--lime) inset,0 0 16px rgba(222,255,0,.25);background:rgba(44,81,44,.55)}
#mjChercher{align-self:center}
#mjChercher.annuler{filter:hue-rotate(-70deg) saturate(.8)}
.mjFileEtat p{margin:.3em 0;color:var(--clair)}
.mjRecherche{display:flex;align-items:center;gap:.6em;padding:.6em .8em;background:rgba(17,18,14,.7);box-shadow:0 0 0 1px var(--vert) inset;border-radius:4px;color:var(--clair)}
.mjSpin{width:1.1em;height:1.1em;border:3px solid rgba(222,255,0,.25);border-top-color:var(--lime);border-radius:50%;animation:mjTourne 1s linear infinite;flex:none}
@keyframes mjTourne{to{transform:rotate(360deg)}}
.mjAlerte{color:#ffb38a}
.mjListe{display:flex;flex-direction:column;gap:.4em;min-height:4em}
.mjSalleL{display:flex;align-items:center;gap:.6em;padding:.45em .6em;background:rgba(36,37,31,.86);box-shadow:0 0 0 1px rgba(0,0,0,.6) inset;border-radius:3px}
.mjSalleL>div{flex:1;min-width:0}
.mjSalleL b{display:block;color:#f2ead0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mjSalleL small{color:var(--doux);font-size:.8em}
.mjSalleL.enjeu{opacity:.65}
.mjVide{font-size:.9em}
.mjCreer summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none}
.mjCreer summary::-webkit-details-marker{display:none}
.mjForm{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:.6em}
.mjForm label{display:flex;flex-direction:column;gap:.2em;font-weight:600;color:var(--clair);font-size:.9em}
.mjForm button{grid-column:1 / -1;justify-self:center}
/* salle */
#mjSalle{align-items:center;justify-content:center}
.mjFen{width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.mjSalleInfo{padding:.6em 1em;color:var(--clair)}
.mjCamps{display:grid;grid-template-columns:1fr 1fr;gap:1em;padding:0 1em;overflow:auto}
.mjCamp h3{display:flex;align-items:center;gap:.5em;margin:.3em 0 .5em;font-size:1.3em;color:var(--bonta)}
.mjCamp.k h3{color:var(--brak)}
.mjCamp h3 img{width:2em;height:2em}
.mjPlace{display:flex;align-items:center;gap:.6em;min-height:2.6em;padding:.3em .6em;margin-bottom:.35em;background:rgba(36,37,31,.86);box-shadow:0 0 0 1px rgba(0,0,0,.6) inset;border-radius:3px}
.mjPlace.moi{box-shadow:0 0 0 2px var(--lime) inset}
.mjPlace .mjPoste{width:9em;flex:none;color:var(--or);font-size:.85em}
.mjPlace b{color:#f2ead0}
.mjPlace button{margin-left:auto;height:2em}
.mjHote{color:var(--lime)}
.mjBas{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.8em 1em}
/* draft */
.mjDHaut{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1em;padding:.5em 1.4em}
.mjBans{display:flex;align-items:center;gap:.4em}
#mjBans1{justify-content:flex-end}
.mjBans small{color:var(--doux);margin-right:.3em}
.mjBan{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:4px;background:rgba(17,18,14,.8);box-shadow:0 0 0 1px var(--bord) inset;color:var(--doux);position:relative}
.mjBan img{width:2em;height:2em;filter:grayscale(1) brightness(.75)}
.mjBan.fait::after{content:"";position:absolute;inset:18%;background:linear-gradient(45deg,transparent 45%,#c10000 45%,#c10000 55%,transparent 55%)}
.mjPhase{text-align:center;min-width:28em}
.mjPhase h2{margin:0;font-size:1.6em;color:#f2ead0;text-shadow:0 2px 0 #000}
.mjPhase h2.vous{color:var(--lime);text-shadow:0 0 14px rgba(222,255,0,.45),0 2px 0 #000}
.mjChrono{display:flex;align-items:center;gap:.6em;margin:.3em auto;width:24em}
.mjChrono b{width:3em;color:var(--clair);font-size:1.1em}
.mjBarre{flex:1;height:.6em;background:#1a1b15;box-shadow:0 0 0 1px #000}
.mjBarre i{display:block;height:100%;background:linear-gradient(90deg,#8aa814,var(--lime));transition:width .1s linear}
.mjBarre i.urgent{background:linear-gradient(90deg,#a03010,#ff6a3a)}
.mjOrdre{display:flex;justify-content:center;gap:3px}
.mjOrdre i{width:.9em;height:.9em;border-radius:2px;background:#333;opacity:.6}
.mjOrdre i.b{background:var(--bonta)} .mjOrdre i.k{background:var(--brak)}
.mjOrdre i.p{border-radius:50%}
.mjOrdre i.fait{opacity:.25} .mjOrdre i.cur{opacity:1;box-shadow:0 0 0 2px #fff}
.mjDCorps{flex:1;min-height:0;display:grid;grid-template-columns:minmax(14em,.6fr) minmax(0,2fr) minmax(14em,.6fr);gap:1em;padding:.2em 1.4em 1em}
.mjEq{display:flex;flex-direction:column;gap:.45em;min-height:0;overflow:auto}
.mjEq h3{margin:0 0 .2em;font-size:1.3em;color:var(--bonta)} .mjEq.k h3{color:var(--brak);text-align:right}
.mjSlot{display:flex;gap:.6em;align-items:center;padding:.35em;background:rgba(36,37,31,.86);box-shadow:0 0 0 1px rgba(0,0,0,.6) inset;border-radius:4px;transition:box-shadow .2s}
.mjEq.k .mjSlot{flex-direction:row-reverse;text-align:right}
.mjSlot.moi{box-shadow:0 0 0 2px var(--lime) inset}
.mjSlot.actif{box-shadow:0 0 0 2px #fff inset,0 0 18px rgba(255,255,255,.25);animation:mjPulse 1.2s ease-in-out infinite}
@keyframes mjPulse{50%{box-shadow:0 0 0 2px var(--or) inset,0 0 22px rgba(248,205,1,.35)}}
.mjPor{flex:none;width:4.2em;height:4.2em;border-radius:5px;background:radial-gradient(circle at 50% 70%,#3d3e39,#16170f);box-shadow:0 0 0 1px #000;overflow:hidden;display:grid;place-items:end center}
.mjPor img{height:4em;width:100%;object-fit:contain;object-position:50% 100%}
.mjPor img.survol{opacity:.45;filter:grayscale(.5)}
.mjNom{display:flex;flex-direction:column;gap:.1em;min-width:0}
.mjNom b{color:#f2ead0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mjNom small{color:var(--doux);font-size:.78em}
.mjNom .mjPoste{color:var(--or)}
.mjCl{display:flex;align-items:center;gap:.25em;font-size:.82em;color:var(--clair)}
.mjEq.k .mjCl{justify-content:flex-end}
.mjCl img{width:1.2em;height:1.2em}
.mjCl i{color:var(--doux)}
.mjEch{margin-top:.2em;height:2em;font-size:.8em;padding:0 .7em}
#mjPret{align-self:center;margin-top:.4em}
.mjCentre{display:flex;flex-direction:column;gap:.7em;min-height:0}
.mjGrille{flex:1;min-height:0;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.5em}
.mjc img.por{position:absolute;left:.25em;top:.1em;width:5.4em;height:5.3em;object-fit:contain}
.mjc em{position:absolute;left:0;right:0;top:40%;font:900 .8em Cinzel,Georgia,serif;font-style:normal;color:#fff;text-shadow:0 0 4px #000;text-transform:uppercase}
.mjc.banni{filter:grayscale(1) brightness(.45)}
.mjc.banni em{color:#ff5a4a}
.mjc.prise{filter:grayscale(.85) brightness(.55)}
.mjc:disabled{cursor:default}
.mjFicheD{flex:none;min-height:9em}
.mjFC{display:flex;gap:1em;align-items:center;padding:.6em .9em}
.mjFC p{margin:.2em 0}
.mjArt{width:7em;height:7em;object-fit:cover;object-position:center 20%;border-radius:5px;box-shadow:0 0 0 1px #000,0 0 0 2px var(--bord) inset;flex:none}
.mjFT{flex:1;min-width:0}
.mjFT h3{display:flex;align-items:center;gap:.4em;margin:0;font-size:1.4em;color:#f2ead0}
.mjFT h3 img{width:1.4em;height:1.4em}
.mjSorts{display:flex;gap:.5em;flex-wrap:wrap}
.mjSorts span{position:relative;display:flex;flex-direction:column;align-items:center;width:5.2em;font-size:.75em;text-align:center;color:var(--clair)}
.mjSorts img{width:2.8em;height:2.8em;border-radius:4px;box-shadow:0 0 0 1px #000,0 0 0 2px #45463d}
.mjSorts b{position:absolute;left:.6em;top:-.2em;padding:0 .2em;background:#11120e;border:1px solid var(--bord);border-radius:2px;color:var(--lime);font-size:.9em}
.mjAct{display:flex;flex-direction:column;gap:.5em;align-items:center}
/* coupure, messages, réseau */
.mjCoupure{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(5,6,4,.6)}
.mjCoupure.on{display:flex}
.mjCoupure .dofus{padding:1em 2em;text-align:center;max-width:30em}
.mjCoupure h2{color:#ffb38a;margin:.2em 0}
.mjToast{position:fixed;left:50%;top:1.2em;transform:translate(-50%,-150%);z-index:60;padding:.6em 1.2em;background:rgba(36,37,31,.97);border:1px solid var(--bord);box-shadow:0 0 0 1px #000,0 6px 18px rgba(0,0,0,.6);border-radius:4px;color:#f2ead0;font-size:14px;transition:transform .25s,opacity .25s;opacity:0;visibility:hidden;max-width:min(90vw,40em);text-align:center;pointer-events:none}
.mjToast.on{transform:translate(-50%,0);opacity:1;visibility:visible}
.mjReseau{position:fixed;right:8px;top:4px;z-index:5;display:none;font:11px Roboto,Tahoma,Arial;color:rgba(224,224,222,.7);text-shadow:0 1px 2px #000;pointer-events:none}
.mjReseau.on{display:block}
body:has(#selection.on) .mjReseau,body:has(.mjEcran.on) .mjReseau{display:none}
.mjScore{width:100%;border-collapse:collapse;margin-top:.6em;font-size:13px}
.mjScore td,.mjScore th{padding:3px 6px;border-bottom:1px solid rgba(204,204,204,.08);text-align:center;white-space:nowrap}
.mjScore th{color:var(--doux);font-weight:600}
.mjScore tr.eqB td:first-child{color:var(--bonta)} .mjScore tr.eqK td:first-child{color:var(--brak)}
.mjScore tr.moi td{background:rgba(178,215,27,.12)}
#fin .fenetre{max-width:min(900px,calc(100vw - 32px))}
@media (max-width:1000px){.mjCorps{grid-template-columns:1fr;overflow:auto}.mjDCorps{grid-template-columns:1fr;overflow:auto}.mjCamps{grid-template-columns:1fr}}
/* ajustements de mise en page */
.mjCorps{align-items:start}
.mjPan{max-height:100%}
.mjGrille{font-size:1.18em;justify-content:center}
.mjCentre{justify-content:space-between}
/* V2 : composition suggérée et spécialisation du Steamer dans le draft */
.mjSugg{flex:none;padding:.35em .7em;margin-bottom:.4em;background:rgba(36,37,31,.88);box-shadow:0 0 0 1px var(--bord) inset;border-radius:4px;font-size:.85em;color:var(--clair)}
.mjSugg span.ok{color:var(--vert)} .mjSugg span.prise{color:#e06040;text-decoration:line-through}
.mjSugg:empty{display:none}
.mjc.sugg{box-shadow:0 0 0 1px #0b0b09,0 0 0 2px var(--or) inset,0 0 10px rgba(248,205,1,.35)}
.mjRep{font-size:.8em;margin:.3em 0}