/* MTG Deck Builder — styles. Uses the app's themed CSS variables (defined in index.html , overridden per theme via :root[data-theme=...]): surfaces --bg --panel --panel2 --input --line text --txt --txt2 --mut accent --acc --on-acc --focus status --ok/--ok-bg/--ok-line --bad/--bad-bg/--bad-line --warn/--warn-bg/--warn-line depth --shadow --overlay Semantic colors (mana pips, over-artwork button scrims) stay literal on purpose. */ /* ---- styled dialogs (replace native alert/confirm/prompt) ---- */ #mtgd-dlg-overlay{ position:fixed;inset:0;z-index:4100;display:flex;align-items:center;justify-content:center; background:var(--overlay);padding:20px; font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif; } .mtgd-dlg{ width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:18px 18px 14px;color:var(--txt);box-shadow:0 18px 60px var(--shadow); } .mtgd-dlg-msg{font-size:14px;margin-bottom:12px;white-space:pre-wrap} .mtgd-dlg-input{ width:100%;background:var(--input);border:1px solid var(--line);color:var(--txt); border-radius:6px;padding:8px 10px;font-size:14px;margin-bottom:14px; } .mtgd-dlg-input:focus{outline:none;border-color:var(--acc)} .mtgd-dlg-btns{display:flex;gap:8px;justify-content:flex-end} .mtgd-dlg-btns button{ background:none;border:1px solid var(--line);color:var(--txt);border-radius:6px; padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer; } .mtgd-dlg-btns button:hover{border-color:var(--acc);color:var(--acc)} .mtgd-dlg-btns button.prim{background:var(--acc);color:var(--on-acc);border-color:var(--acc)} .mtgd-dlg-btns button.prim:hover{filter:brightness(1.08);color:var(--on-acc)} /* ---- modals import / export ---- */ .mtgd-modal-overlay{ /* Au-dessus du volet deck plein écran (3300), de la bataille (3400) et de la maintenance (3850) ; sous le dialogue confirm/prompt (4100). */ position:fixed;inset:0;z-index:3950;display:flex;align-items:center;justify-content:center; background:var(--overlay);padding:20px; font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif; } .mtgd-modal{ width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto; background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:18px 18px 14px;color:var(--txt);box-shadow:0 18px 60px var(--shadow); } .mtgd-modal-hd{font-size:16px;font-weight:700;margin-bottom:12px} .mtgd-modal-ta{ width:100%;min-height:180px;resize:vertical;background:var(--input); border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:8px 10px; font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-sizing:border-box; } .mtgd-modal-ta:focus{outline:none;border-color:var(--acc)} .mtgd-modal-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap} .mtgd-modal-file{flex:0 0 auto} .mtgd-modal-filelbl{ display:inline-block;background:none;border:1px solid var(--line);color:var(--txt); border-radius:6px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer; } .mtgd-modal-file:hover .mtgd-modal-filelbl{border-color:var(--acc);color:var(--acc)} .mtgd-modal-input{ flex:1 1 160px;min-width:120px;background:var(--input);border:1px solid var(--line);color:var(--txt); border-radius:6px;padding:8px 10px;font-size:14px;box-sizing:border-box; } .mtgd-modal-input:focus{outline:none;border-color:var(--acc)} .mtgd-modal-fmtlbl{font-size:12px;color:var(--mut);margin-bottom:6px} .mtgd-modal-radios{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px} .mtgd-modal-radio{display:flex;gap:6px;align-items:center;cursor:pointer;font-size:13px;color:var(--txt2)} .mtgd-modal-radio input{accent-color:var(--acc);cursor:pointer} .mtgd-modal-note{min-height:18px;margin:10px 0 4px;font-size:13px;color:var(--txt2)} .mtgd-modal-note.bad{color:var(--bad)} .mtgd-modal-note.ok{color:var(--ok)} .mtgd-modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap} .mtgd-modal-btns button{ background:none;border:1px solid var(--line);color:var(--txt);border-radius:6px; padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer; } .mtgd-modal-btns button:hover{border-color:var(--acc);color:var(--acc)} .mtgd-modal-btns button.prim{background:var(--acc);color:var(--on-acc);border-color:var(--acc)} .mtgd-modal-btns button.prim:hover{filter:brightness(1.08);color:var(--on-acc)} .mtgd-modal-btns button:disabled{opacity:.5;cursor:default;border-color:var(--line);color:var(--mut)} /* ---- sélecteur d'impression (« changer l'édition/art » depuis une version) ---- */ .mtgd-pick-hd{display:flex;align-items:center;justify-content:space-between;gap:8px} .mtgd-pick-x{background:none;border:none;color:var(--mut);font-size:22px;line-height:1;cursor:pointer;padding:0 2px} .mtgd-pick-x:hover{color:var(--txt)} .mtgd-pick-empty{padding:16px;color:var(--mut);font-size:13px;text-align:center} .mtgd-pick-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px; max-height:60vh;overflow-y:auto;margin-bottom:12px;padding:2px; } .mtgd-pick-item{ display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer; border:1px solid transparent;border-radius:8px;padding:4px; } .mtgd-pick-item:hover{border-color:var(--acc);background:var(--input)} .mtgd-pick-item img{width:100%;border-radius:6px;border:1px solid var(--line);background:var(--panel2)} .mtgd-pick-nm{font-size:11px;color:var(--txt);text-align:center;line-height:1.2} .mtgd-pick-meta{font-size:11px;color:var(--txt2);text-align:center;line-height:1.2} .mtgd-pick-meta b{color:var(--txt)} #mtgd-pickzoom{position:fixed;display:none;z-index:3990;pointer-events:none;width:300px} #mtgd-pickzoom img{width:100%;display:block;border-radius:12px;box-shadow:0 12px 44px var(--shadow)} .mtgd-pickzoom-info{ margin-top:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px; padding:6px 10px;box-shadow:0 8px 24px var(--shadow); } .mtgd-pz-set{font-size:12px;color:var(--txt)} .mtgd-pz-set b{color:var(--txt)} .mtgd-pz-sub{font-size:11px;color:var(--mut);margin-top:2px} /* ---- floating toggle ---- */ #mtgd-toggle{ position:fixed;right:20px;bottom:20px;z-index:3000; background:var(--acc);color:var(--on-acc);border:none;border-radius:24px; padding:11px 18px;font:700 14px/1 system-ui,Segoe UI,Roboto,sans-serif; cursor:pointer;box-shadow:0 6px 20px var(--shadow);display:flex;gap:7px;align-items:center; } #mtgd-toggle:hover{filter:brightness(1.08)} #mtgd-toggle #mtgd-toggle-n{ background:rgba(11,14,20,.25);border-radius:11px;padding:1px 8px;font-size:12px;min-width:20px;text-align:center; } /* ---- slide-in panel ---- */ #mtgd-panel{ position:fixed;top:0;right:0;height:100vh;width:var(--side-w,420px);max-width:100vw;z-index:3000; background:var(--panel);border-left:1px solid var(--line);color:var(--txt); display:flex;flex-direction:column; transform:translateX(100%);transition:transform .22s ease, width .2s ease; box-shadow:-8px 0 32px var(--shadow); font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif; } #mtgd-panel.open{transform:translateX(0)} /* ---- full mode: panel covers the whole window, sections in 3 columns ---- */ /* Panel stays a flex column: head (top) + #mtgd-scroll (grows, scrolls) + actions (pinned). The 3-column multicol lives on #mtgd-colwrap (height:auto) INSIDE the scroller, so overflow scrolls vertically and the actions bar always stays visible. */ /* Full mode keeps the panel RIGHT-anchored (its home) so `width` animates from the right edge inward. Setting left:0 here made the left edge jump to 0 instantly (left isn't transitioned) then width grew → looked like it expanded FROM THE LEFT. */ #mtgd-panel.full{width:100vw;max-width:100vw;z-index:3300;border-left:none} #mtgd-panel.full .mtgd-scroll{display:block;overflow-y:auto;padding:12px 18px} #mtgd-panel.full .mtgd-colwrap{display:block;column-count:3;column-gap:16px} #mtgd-panel.full #mtgd-list{display:contents} /* cat-groups become column items */ #mtgd-panel.full .mtgd-section{flex:none;border-top:none;background:transparent;padding:0} #mtgd-panel.full .mtgd-section, #mtgd-panel.full .mtgd-cat-group{ break-inside:avoid;-webkit-column-break-inside:avoid; display:block;width:100%;margin:0 0 14px; } @media (max-width:1000px){ #mtgd-panel.full .mtgd-colwrap{column-count:2} } @media (max-width:640px){ #mtgd-panel.full .mtgd-colwrap{column-count:1} } /* scroll region wrapping stats + list + analysis (normal mode keeps list scrolling) */ .mtgd-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} .mtgd-colwrap{display:contents} /* transparent in normal mode; becomes the multicol in full mode */ #mtgd-full{ background:none;border:none;color:var(--mut);font-size:17px;line-height:1; cursor:pointer;padding:0 4px; } #mtgd-full:hover{color:var(--acc)} /* ---- header ---- */ .mtgd-head{padding:14px 16px 10px;border-bottom:1px solid var(--line);flex:0 0 auto} .mtgd-headtop{display:flex;gap:8px;align-items:center} #mtgd-name{ flex:1;background:var(--input);border:1px solid var(--line);color:var(--txt); border-radius:6px;padding:8px 10px;font-size:15px;font-weight:600; } #mtgd-close{ background:none;border:none;color:var(--mut);font-size:24px;line-height:1; cursor:pointer;padding:0 4px; } #mtgd-close:hover{color:var(--txt)} .mtgd-headrow{display:flex;gap:10px;align-items:center;margin-top:8px} #mtgd-format{ background:var(--input);border:1px solid var(--line);color:var(--txt); border-radius:6px;padding:6px 8px;font-size:13px;text-transform:capitalize; } .mtgd-count{color:var(--mut);font-size:12px;margin-left:auto} .mtgd-status{color:var(--acc);font-size:12px;min-height:16px;margin-top:6px} /* discreet offline banner (shown by setOffline() on network failure, hidden on recovery) */ .mtgd-offline{ margin-top:6px;padding:5px 9px;border:1px solid var(--warn-line);border-radius:6px; background:var(--warn-bg);color:var(--warn);font-size:11px; } .mtgd-offline[hidden]{display:none} /* ---- stats block ---- */ .mtgd-stat-line{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);align-items:center} .mtgd-stat-line b{color:var(--txt);font-weight:700} .mtgd-stat-line .mtgd-src{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.05em;opacity:.6} .mtgd-sec-t{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:12px 0 5px} /* mana curve */ .mtgd-curve{display:flex;gap:6px;align-items:flex-end;height:72px} .mtgd-cbar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end} .mtgd-cbar-track{width:100%;height:100%;display:flex;align-items:flex-end;background:var(--input);border-radius:4px;overflow:hidden} .mtgd-cbar-fill{width:100%;min-height:2px;border-radius:4px 4px 0 0;transition:height .2s} .mtgd-cbar-v{font-size:11px;color:var(--txt);margin-top:3px} .mtgd-cbar-l{font-size:10px;color:var(--mut)} /* Barre INTERACTIVE (seau non vide) : le survol doit annoncer qu'elle désigne des cartes. Une barre vide reste inerte, sans curseur ni réaction. */ .mtgd-cbar-act{cursor:pointer} .mtgd-cbar-act:hover .mtgd-cbar-fill{filter:brightness(1.25)} .mtgd-cbar-act:hover .mtgd-cbar-track{box-shadow:0 0 0 1px var(--acc) inset} .mtgd-cbar-act:hover .mtgd-cbar-l,.mtgd-cbar-act:hover .mtgd-cbar-v{color:var(--acc)} .mtgd-cbar-act:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px} /* Cartes DÉSIGNÉES par la barre survolée. Distinct de `.sel` (sélection persistante) : c'est un état FUGACE, il ne doit pas se confondre avec une sélection réelle — d'où un halo plutôt qu'un aplat, et un liseré à gauche qui reste lisible en vue vignettes comme en table. `transition` volontairement courte : au balayage de la courbe, un fondu long donnerait l'impression que plusieurs seaux sont allumés à la fois. */ .mtgd-row.mv-glow{ background:color-mix(in srgb, var(--acc) 14%, transparent); box-shadow:inset 2px 0 0 var(--acc); transition:background .08s,box-shadow .08s; } .mtgd-list.dv-grid .mtgd-row.mv-glow{box-shadow:0 0 0 2px var(--acc),0 0 10px var(--acc)} /* colors */ .mtgd-colors{display:flex;gap:12px;flex-wrap:wrap} .mtgd-pip{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--txt)} .mtgd-pip-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.4);display:inline-block} /* types */ .mtgd-types{display:flex;gap:6px;flex-wrap:wrap} .mtgd-type{font-size:11px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:2px 7px;color:var(--txt2)} .mtgd-type b{color:var(--txt)} /* legality */ .mtgd-legality{margin-top:12px} .mtgd-badge{display:inline-block;font-size:12px;font-weight:700;border-radius:5px;padding:4px 10px;background:var(--panel2);color:var(--mut);border:1px solid var(--line)} .mtgd-badge.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)} .mtgd-badge.bad{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)} .mtgd-issues{margin:6px 0 0;padding-left:18px;font-size:11px;color:var(--bad)} .mtgd-issues li{margin:1px 0;display:flex;align-items:center;gap:6px} .mtgd-issue-t{flex:1;min-width:0} /* Un problème qui DÉSIGNE une carte est survolable (aperçu) ; un problème global — taille du deck, nombre de commandants — ne l'est pas. La distinction doit se voir avant de survoler, sinon l'aperçu paraît capricieux. */ .mtgd-issues li.has-card{cursor:help} .mtgd-issues li.has-card:hover{background:var(--panel2);border-radius:4px} /* Bouton de correction en bout de ligne (résolution auto d'un problème de légalité). */ .mtgd-fix{flex:0 0 auto;background:var(--acc);color:var(--on-acc);border:1px solid var(--acc); border-radius:5px;padding:1px 8px;font-size:10px;font-weight:700;cursor:pointer;line-height:1.5} .mtgd-fix:hover{filter:brightness(1.08)} /* Section « Légalité » dédiée (avant « Analyse ») : corps + titre coloré selon le verdict. */ .mtgd-leg-body .mtgd-legality{margin-top:0} .mtgd-sec-lbl.leg-ok{color:var(--ok)} .mtgd-sec-lbl.leg-bad{color:var(--bad)} /* ---- uniform collapsible section header (stats, type groups, analysis) ---- */ .mtgd-sec-hd{ display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none; padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel2); font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut); } .mtgd-sec-hd:hover{color:var(--txt);border-color:var(--acc)} .mtgd-sec-hd.open{color:var(--txt)} .mtgd-sec-caret{flex:0 0 auto;width:10px;font-size:9px;color:var(--acc)} .mtgd-sec-lbl{flex:1 1 auto} .mtgd-sec-cnt{flex:0 0 auto;color:var(--txt);font-weight:700} .mtgd-sec-body.closed{display:none} /* ---- GABARIT UNIQUE DE SECTION (`.mtgd-section`) --------------------------------- Les neuf sections du volet (stats, légalité, analyse, incontournables, reco, probabilités, base de mana, manquantes, notes) partagent le même marquage (`.mtgd-section` > `.mtgd-sec-hd` + `.mtgd-sec-body`) : elles doivent partager le même habillage. Il n'existait AUCUNE règle sur `.mtgd-section` — quatre sections avaient leur propre rembourrage/bordure recopié à la main, cinq n'avaient rien. D'où les décalages visibles : « Analyse », « Probabilités » et « Base de mana » apparaissaient renfoncées (10 px de rembourrage) et encadrées, tandis que « Incontournables », « Manquantes » et « Notes » collaient au bord. **Toute nouvelle section hérite d'ici — ne pas recréer de règle par section.** */ .mtgd-section{ flex:0 0 auto;background:var(--panel2); border-top:1px solid var(--line);padding:8px 10px; } /* La première section du défilement (les stats) est collée sous `.mtgd-head`, qui porte déjà son trait : sans ça on lirait un double filet. */ .mtgd-section:first-child{border-top:0} /* Corps : un seul rembourrage, et une hauteur BORNÉE identique pour toutes — sinon une section longue (analyse, probabilités) chasse les autres hors de l'écran. Deux plafonds différents (38vh et 44vh) coexistaient pour le même besoin. */ .mtgd-section > .mtgd-sec-body{padding:8px 4px 4px;max-height:44vh;overflow-y:auto} /* En plein écran, chaque section est une carte de la mise en page multicolonne : pas de défilement imbriqué, pas de fond ni de filet propres. */ #mtgd-panel.full .mtgd-section > .mtgd-sec-body{max-height:none;overflow:visible} /* ---- sélecteur de vue (boutons) ---------------------------------------------- Deux groupes segmentés côte à côte pour les deux axes INDÉPENDANTS : la forme (liste / vignettes / table) et l'unité (groupé / par copie). Tokens de thème uniquement ; le bouton actif se lit à la couleur d'accent ET au fond, pas seulement à la couleur (lisible en thème clair comme sombre). */ .mtgd-viewbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0 2px} .mtgd-vb-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)} .mtgd-vseg{display:inline-flex;align-items:center;gap:4px} /* Boutons ICÔNES, au gabarit EXACT de `.viewsel .vbtn` (recherche) et `.col-dview` (collection) : 30×26, fond `--input`, actif en aplat d'accent. Trois sélecteurs de vue dans l'app, une seule grammaire — le libellé complet passe en info-bulle. */ .mtgd-vb-btn{ width:30px;height:26px;padding:0;line-height:1;font-size:14px; background:var(--input);color:var(--txt2);border:1px solid var(--line); border-radius:6px;cursor:pointer; } .mtgd-vb-btn:hover{border-color:var(--acc);color:var(--txt)} .mtgd-vb-btn.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)} .mtgd-vb-btn:disabled{opacity:.4;cursor:default} .mtgd-vb-btn:disabled:hover{border-color:var(--line);color:var(--txt2)} .mtgd-vb-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px} /* « N× » / « 1× » sont du TEXTE, pas un pictogramme : plus petits et gras pour tenir. */ .mtgd-vb-txt{font-size:11px;font-weight:700} /* ---- card list ---- */ .mtgd-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 10px 14px} /* ---- Vue TABLE du deck --------------------------------------------------------- Liste PLATE et triable : pas de groupes de catégorie (ils figeraient l'ordre). Les lignes gardent la classe `.mtgd-row` et leurs `data-oid/vidx/copy` → la sélection (Ctrl+clic), l'aperçu au survol et les boutons de ligne fonctionnent sans un seul handler supplémentaire. Le tableau prend TOUT le volet : toutes les autres sections sont masquées. Le sélecteur porte sur `.mtgd-section`, la classe que portent déjà les neuf sections (stats, légalité, analyse, staples, reco, probas, base de mana, manquantes, notes) — une section ajoutée plus tard sera donc masquée elle aussi, sans rien à modifier ici. Le champ de FILTRE reste, lui : il pilote le contenu du tableau. En plein écran, la mise en page multi-colonnes repasse à UNE colonne (un tableau coupé en trois colonnes journal serait illisible). */ /* Bascule « détails » (bouton ⓘ / touche H) : masque d'un coup toutes les sections qui ne sont pas les cartes. Même effet que la vue table, autre déclencheur — d'où le sélecteur groupé. Le champ de FILTRE reste, il pilote les cartes. */ #mtgd-panel.dv-table .mtgd-section, #mtgd-panel.no-hints .mtgd-section{display:none} /* Le rembourrage latéral de la liste (10 px de chaque côté) est rendu aux colonnes : dans un volet de ~410 px, ces 20 px décident de la troncature des en-têtes. */ #mtgd-panel.dv-table #mtgd-list{padding-left:4px;padding-right:4px} #mtgd-panel.full.dv-table .mtgd-colwrap{column-count:1} #mtgd-panel.full.dv-table #mtgd-list{display:block} /* `table-layout:fixed` est OBLIGATOIRE ici : le volet fait ~410 px et huit colonnes de largeur automatique débordent (la colonne PRIX, celle qu'on vient chercher, sortait du cadre) ou écrasent le nom à un caractère. En fixe, les largeurs ci-dessous sont respectées et le NOM absorbe le reste ; tout ce qui dépasse est coupé en « … », le texte complet restant dans l'info-bulle de la cellule. */ .mtgd-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:11px} .mtgd-table th,.mtgd-table td{ padding:3px 4px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Largeurs calées sur le PIRE cas réel mesuré (deck Elves : 14 terrains de base d'un côté, une carte à 2 985,53 € de l'autre) et sur les en-têtes de la langue la plus verbeuse (allemand) — les colonnes chiffrées doivent tenir sans coupure, c'est ce qu'on vient lire. Le nom prend ce qui reste. La colonne « Édition » a été RETIRÉE : dans un volet de ~410 px, huit colonnes ne tiennent qu'en tronquant tout à trois lettres. L'édition reste dans l'info-bulle du nom, et la vue LISTE (ou PAR COPIE) est l'endroit où on la lit et la change. */ .mtgd-table .c-qty{width:40px} .mtgd-table .c-name{width:auto} /* colonne élastique : absorbe la place restante */ .mtgd-table .c-type{width:72px} /* « Créatures »/« Kreaturen » en entier */ .mtgd-table .c-mv{width:28px} .mtgd-table .c-mana{width:54px} /* l'allemand « Kosten » est le plus long des 11 */ /* La pastille de cardinalité vient de la vue liste, où elle porte `min-width:26px` : dans une cellule de 28 px (moins les marges) elle débordait et « 1× » s'affichait « 1… ». En table, la colonne impose déjà la largeur. */ .mtgd-table .mtgd-tot{min-width:0} .mtgd-table .c-act{width:46px} .mtgd-table .c-price{width:72px} .mtgd-table thead th{ position:sticky;top:0;z-index:1;background:var(--panel);color:var(--mut); font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:600; border-bottom:1px solid var(--line);cursor:pointer;user-select:none; } .mtgd-table thead th:hover{color:var(--acc)} .mtgd-table thead th.sorted{color:var(--acc)} .mtgd-table thead th:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} /* Flèche de tri HORS FLUX : dans le flux elle coûtait ~10 px de largeur à l'en-tête, ce qui tronquait « Qté ▼ » (et ses équivalents) dans les onze langues. En absolu elle ne consomme rien et, au pire, effleure la dernière lettre de la colonne triée. */ .mtgd-table thead th{position:relative} /* Flèche + RANG (« ▲2 ») quand le tri porte sur plusieurs colonnes. Le rang n'apparaît qu'à partir de deux niveaux, sinon ce serait du bruit sur un tri simple. */ .mtgd-th-ar{position:absolute;right:1px;top:3px;font-size:9px;pointer-events:none;letter-spacing:0} /* Colonnes alignées à DROITE : le texte touche le bord droit, la flèche s'y superposait (« PRIX » se lisait « PRI✕ »). Elle passe donc à GAUCHE, où la cellule est vide. */ .mtgd-table thead th.c-qty .mtgd-th-ar, .mtgd-table thead th.c-mv .mtgd-th-ar, .mtgd-table thead th.c-price .mtgd-th-ar{right:auto;left:1px} .mtgd-table tbody tr{border-bottom:1px solid var(--line)} .mtgd-table tbody tr:hover{background:var(--panel2)} .mtgd-table tbody tr.sel{background:color-mix(in srgb, var(--acc) 16%, transparent)} /* Le nom prend la place restante ; le type se tronque avant lui (il est secondaire). */ .mtgd-table .c-name{width:100%;overflow:hidden;text-overflow:ellipsis;max-width:0} .mtgd-table .c-type{color:var(--txt2);overflow:hidden;text-overflow:ellipsis;max-width:120px} .mtgd-table .c-mv,.mtgd-table .c-qty,.mtgd-table .c-price{ text-align:right;font-variant-numeric:tabular-nums; } .mtgd-table .c-mana{color:var(--txt2);font-size:11px} .mtgd-table .c-price{font-weight:600} /* Boutons de ligne COMPACTS : au gabarit de la liste ils font 60 px pour une cellule de 46, et `overflow:hidden` en amputait un. Chaque pixel repris ici va au nom. */ .mtgd-table .c-act{text-align:right} .mtgd-table .c-act .mtgd-rowbtns{display:inline-flex;gap:1px;opacity:0} .mtgd-table tbody tr:hover .c-act .mtgd-rowbtns{opacity:1} .mtgd-table .c-act .mtgd-rowbtns button{padding:0 3px;min-width:0;font-size:11px} .mtgd-table tfoot td{ border-top:1px solid var(--line);padding-top:5px;font-weight:700; font-variant-numeric:tabular-nums;text-align:right; } .mtgd-table tfoot .mtgd-tf-lbl{ text-align:right;color:var(--mut);font-weight:600;font-size:10px; text-transform:uppercase;letter-spacing:.05em; } /* ---- Vue VIGNETTES du deck (touche « V ») — même grammaire que la collection ------ La vignette est TOUJOURS dans le marquage, masquée ici en vue liste : basculer la vue ne doit rien re-décider sur l'art, seulement changer la forme. */ .mtgd-thumb{display:none} /* `flex-flow:row wrap` explicite : `.mtgd-list` est en flux normal, mais les groupes de catégorie doivent rester des ruptures pleine largeur — d'où `flex:0 0 100%` sur eux. */ .mtgd-list.dv-grid .mtgd-cat-group{display:block} .mtgd-list.dv-grid .mtgd-sec-body{display:flex;flex-flow:row wrap;gap:8px;align-content:flex-start} .mtgd-list.dv-grid .mtgd-row{flex:0 0 112px;width:112px;height:156px;position:relative; border-radius:8px;overflow:hidden;border-bottom:0;padding:0} .mtgd-list.dv-grid .mtgd-row-main{display:block;height:100%;padding:0;gap:0} /* Dimensions FIXES (112×156 ≈ ratio carte .716) : `aspect-ratio` ne contribue pas sa hauteur dans un item flex (même piège que la grille de la collection). */ .mtgd-list.dv-grid .mtgd-thumb{display:block;width:112px;height:156px;object-fit:cover; border-radius:8px;border:1px solid var(--line);background:var(--panel2)} .mtgd-list.dv-grid .mtgd-thumb-ph{background:var(--panel2)} /* Le nom reste lisible sur l'illustration : dégradé, jamais une couleur pleine. */ .mtgd-list.dv-grid .mtgd-cname{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 3px; font-size:11px;color:#fff !important;background:linear-gradient(transparent,rgba(0,0,0,.85)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto} /* Cardinalité en pastille, seule information conservée : c'est celle qu'on ne peut pas lire sur l'image. */ .mtgd-list.dv-grid .mtgd-tot{position:absolute;top:4px;left:4px;min-width:0; background:rgba(0,0,0,.72);color:#fff;border-radius:10px;padding:1px 6px;font-size:11px;text-align:center} /* Tout le reste disparaît : pips, coût, boutons, sélecteur de versions. Une vignette sert à PARCOURIR ; l'édition se fait en vue liste. */ .mtgd-list.dv-grid .mtgd-mc, .mtgd-list.dv-grid .mtgd-pips, .mtgd-list.dv-grid .mtgd-vtoggle, .mtgd-list.dv-grid .mtgd-copy-ed, .mtgd-list.dv-grid .mtgd-vers, .mtgd-list.dv-grid .mtgd-rowbtns{display:none} .mtgd-list.dv-grid .mtgd-row.sel{outline:2px solid var(--acc);outline-offset:-2px} /* deck view filter (regex) — persistent input at the end of the card-list area */ .mtgd-search{padding:0 10px 10px} .mtgd-search input{ width:100%;box-sizing:border-box;background:var(--input);border:1px solid var(--line); color:var(--txt);border-radius:6px;padding:6px 10px;font-size:13px; } .mtgd-search input:focus{outline:none;border-color:var(--focus)} .mtgd-search input.bad{border-color:var(--bad)} .mtgd-cat-group{margin:8px 0 0} .mtgd-cat-group .mtgd-sec-body{padding:4px 2px 2px} .mtgd-row{ padding:4px 6px;border-radius:6px;font-size:13px; } .mtgd-row:hover{background:var(--panel2)} .mtgd-row-main{display:flex;align-items:center;gap:8px} .mtgd-tot{flex:0 0 auto;min-width:26px;color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums} /* availability of owned copies vs required (see refreshOwned) — keep bold/legible */ .mtgd-tot.avail-ok{color:var(--ok)} .mtgd-tot.avail-partial{color:var(--warn)} .mtgd-tot.avail-missing{color:var(--bad)} /* « celle de la collection » = copie ALLOUÉE à ce deck → vert FONCÉ (token vert assombri, donc dérivé du thème et distinct du vert « possédé » clair). */ .mtgd-tot.avail-alloc{color:color-mix(in srgb, var(--ok) 58%, #000)} /* Aide (?) sur la coloration de la cardinalité + popover (survol/focus). */ .mtgd-headrow{position:relative} .mtgd-colorhelp{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--mut);font-size:11px;line-height:1;cursor:help;padding:0} .mtgd-colorhelp:hover,.mtgd-colorhelp:focus-visible{border-color:var(--acc);color:var(--acc)} .mtgd-colorpop{position:absolute;top:calc(100% + 4px);right:0;z-index:3070;background:var(--panel2);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 40px var(--shadow);padding:8px 10px;min-width:210px;font-size:12px} .mtgd-colorpop[hidden]{display:none} .mtgd-colorpop h4{margin:0 0 6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)} /* Fenêtre flottante des règles du format (survol du sélecteur de format) : ancrée à gauche, une règle par ligne. */ .mtgd-fmtpop{position:absolute;top:calc(100% + 4px);left:0;z-index:3070;background:var(--panel2);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 40px var(--shadow);padding:8px 11px;max-width:min(360px,90vw);font-size:12px} .mtgd-fmtpop[hidden]{display:none} .mtgd-fmtpop h4{margin:0 0 6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)} .mtgd-fmtline{padding:3px 0;color:var(--txt);line-height:1.4;border-top:1px solid var(--line)} .mtgd-fmtline:first-of-type{border-top:none} .mtgd-ch-row{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--txt)} .mtgd-ch-sw{flex:0 0 auto;width:14px;height:14px;border-radius:3px;display:inline-block} .mtgd-ch-sw.ch-alloc{background:color-mix(in srgb, var(--ok) 58%, #000)} .mtgd-ch-sw.ch-ok{background:var(--ok)} .mtgd-ch-sw.ch-partial{background:var(--warn)} .mtgd-ch-sw.ch-missing{background:var(--bad)} /* La cardinalité N× est cliquable (« utiliser une copie possédée ») — conserve la coloration de disponibilité ; affordance discrète au survol/focus. */ .mtgd-tot[data-act="usecopy"]{cursor:pointer;border-radius:4px} .mtgd-tot[data-act="usecopy"]:hover{background:var(--panel2)} .mtgd-tot[data-act="usecopy"]:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .mtgd-cname{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Le nom mène à la fiche de la carte : il doit se lire comme un lien. Soulignement au survol seulement — souligner en permanence saturerait une liste de 100 lignes. */ .mtgd-cname[data-act="cardpage"]{cursor:pointer} .mtgd-cname[data-act="cardpage"]:hover{text-decoration:underline} .mtgd-cname[data-act="cardpage"]:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-radius:3px} /* mana a land can produce: small colored pips next to the name */ .mtgd-produces{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px} .mtgd-produces-dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(0,0,0,.4);display:inline-block} .mtgd-mc{color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums;flex:0 0 auto} .mtgd-rowbtns{display:inline-flex;gap:3px;flex:0 0 auto;opacity:0;transition:opacity .12s} .mtgd-row:hover .mtgd-rowbtns{opacity:1} /* versions toggle on the main line (▸/▾ + "N versions") */ .mtgd-vtoggle{ flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:3px; background:none;border:1px solid var(--line);color:var(--mut);border-radius:4px; cursor:pointer;font-size:10px;line-height:1;padding:2px 6px;white-space:nowrap; } .mtgd-vtoggle:hover{border-color:var(--acc);color:var(--acc)} .mtgd-vtoggle.open{border-color:var(--acc);color:var(--acc)} .mtgd-vcaret{font-size:9px} /* per-version thumbnails strip (all printings of an oid on one row) — hidden by default */ .mtgd-vers{display:none;flex-wrap:wrap;gap:6px;margin:5px 0 2px 32px} .mtgd-vers.open{display:flex} .mtgd-vthumb{width:64px;display:flex;flex-direction:column;align-items:center;gap:2px} .mtgd-vthumb img{width:64px;aspect-ratio:.716;object-fit:cover;border-radius:5px;background:var(--input);display:block} .mtgd-vset{max-width:64px;font-size:9px;color:var(--mut);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%} .mtgd-vset[data-act="pickver"]{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px} .mtgd-vset[data-act="pickver"]:hover,.mtgd-vset[data-act="pickver"]:focus{color:var(--acc);outline:none} .mtgd-vqty{display:inline-flex;align-items:center;gap:2px} .mtgd-vqty span{min-width:14px;text-align:center;font-size:11px;color:var(--txt);font-variant-numeric:tabular-nums} .mtgd-vqty button{ width:16px;height:16px;border:1px solid var(--line);background:var(--input);color:var(--txt); border-radius:3px;cursor:pointer;font-size:11px;line-height:1;padding:0; } .mtgd-vqty button:hover{border-color:var(--acc);color:var(--acc)} /* Version ALLOUÉE (identité par copie) : vignette adossée à la collection, art hérité, qty pilotée par l'allocation (pas de bouton « + »). Liseré vert d'accent possédé. */ .mtgd-vthumb-alloc img{outline:2px solid var(--ok);outline-offset:-2px} .mtgd-vqty-alloc{display:inline-flex;align-items:center;gap:2px} .mtgd-vqty-alloc span{min-width:14px;text-align:center;font-size:11px;color:var(--txt);font-variant-numeric:tabular-nums} .mtgd-vqty-alloc button{ width:16px;height:16px;border:1px solid var(--line);background:var(--input);color:var(--txt); border-radius:3px;cursor:pointer;font-size:11px;line-height:1;padding:0; } .mtgd-vqty-alloc button:hover{border-color:var(--acc);color:var(--acc)} .mtgd-rowbtns button{ border:1px solid var(--line);background:var(--input);color:var(--mut);border-radius:4px; cursor:pointer;font-size:11px;line-height:1;padding:2px 5px; } .mtgd-rowbtns button:hover{border-color:var(--acc);color:var(--acc)} .mtgd-cmd{font-size:12px} .mtgd-cmd.on{border-color:var(--warn);color:var(--warn)} .mtgd-cmd:hover{border-color:var(--warn);color:var(--warn)} .mtgd-empty{color:var(--mut);text-align:center;padding:36px 20px;font-size:13px} /* ---- Analyse section (bottom, collapsible) — header uses the uniform .mtgd-sec-hd ---- */ .mtgd-an-empty{color:var(--mut);font-size:12px;padding:6px 0} .mtgd-an-grid{display:flex;flex-direction:column;gap:2px;margin-bottom:4px} .mtgd-an-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:2px 0} .mtgd-an-k{flex:1 1 auto;color:var(--txt)} .mtgd-an-v{flex:0 0 auto;color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums;min-width:24px;text-align:right} .mtgd-an-b{flex:0 0 auto;color:var(--mut);font-size:10px;min-width:52px;text-align:right} /* Staples manquants — mêmes métriques que .mtgd-an-row (12px, gap 8) pour que la sous-section se lise comme le reste de l'analyse. Tokens de thème uniquement. */ .mtgd-stp{margin-top:6px;border-top:1px solid var(--line);padding-top:2px} .mtgd-stp-hd{color:var(--acc);opacity:.9} .mtgd-stp-list{display:flex;flex-direction:column;gap:1px} .mtgd-stp-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:2px 0} .mtgd-stp-row:hover{background:var(--panel2)} .mtgd-stp-nm{flex:1 1 auto;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtgd-stp-ed,.mtgd-stp-add{flex:0 0 auto;background:var(--input);color:var(--txt);border:1px solid var(--line);border-radius:5px;cursor:pointer;line-height:1;padding:3px 6px;font-size:11px} .mtgd-stp-add{font-weight:700;min-width:24px} .mtgd-stp-ed:hover,.mtgd-stp-add:hover{border-color:var(--acc);color:var(--acc)} /* Art RETENU mais pas encore ajouté : l'état doit se voir, sinon rien ne distingue « j'ai choisi une édition » de « je n'ai rien fait ». Seul « + » engage l'ajout. */ .mtgd-stp-ed.picked{border-color:var(--acc);color:var(--acc);font-weight:700} .mtgd-stp-more{font-size:11px;color:var(--mut);padding:3px 0 1px} /* ---- Section « Mécaniques » (otags du deck) ------------------------------------- Une ligne = une mécanique : compte, nom, définition. La DÉFINITION est tronquée par la CSS (`min-width:0` + ellipse sur une ligne) et non en JS : la place disponible dépend de la largeur du volet, qui change au plein écran — le JS ne peut pas la connaître. Le texte intégral vit dans `title`, que le survol restitue. */ .mtgd-mech-list{display:flex;flex-direction:column;gap:1px} .mtgd-mech-row{ display:flex;align-items:baseline;gap:8px;font-size:12px;padding:2px 0; cursor:pointer;border-radius:4px; } .mtgd-mech-row:hover{background:var(--panel2)} .mtgd-mech-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .mtgd-mech-n{ flex:0 0 auto;min-width:22px;text-align:right;color:var(--txt); font-weight:700;font-variant-numeric:tabular-nums; } .mtgd-mech-nm{flex:0 0 auto;color:var(--txt);white-space:nowrap} /* `min-width:0` est ce qui AUTORISE la troncature : sans lui, un item flex refuse de passer sous sa largeur de contenu et la ligne déborderait au lieu de s'élider. */ .mtgd-mech-d{ flex:1 1 auto;min-width:0;color:var(--mut);font-size:11px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mtgd-mech-row:hover .mtgd-mech-nm{color:var(--acc)} /* Requête proposée dans le menu contextuel : monospace, elle se lit comme du code. */ .mtgd-mech-q{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--mut)} /* ---- Recommandations (synergie du commandant) ---------------------------------- Réutilise la ligne des incontournables (.mtgd-stp-row / -nm / -list / -more) : même grammaire visuelle, un seul jeu de règles à maintenir. Seuls le score et le comparatif sont propres à la section. Les deux sections n'affichent QUE le nom et les deux boutons : ni taux, ni écart, ni nombre de decks. L'ordre porte le classement, l'aperçu au survol porte la carte — le reste etait du bruit statistique dans un volet de construction. */ .mtgd-rec-ed,.mtgd-rec-add{flex:0 0 auto;background:var(--input);color:var(--txt);border:1px solid var(--line);border-radius:5px;cursor:pointer;line-height:1;padding:3px 6px;font-size:11px} .mtgd-rec-add{font-weight:700;min-width:24px} .mtgd-rec-ed:hover,.mtgd-rec-add:hover{border-color:var(--acc);color:var(--acc)} .mtgd-rec-ed.picked{border-color:var(--acc);color:var(--acc);font-weight:700} /* ---- Sections 100 % client : « Probabilités » & « Base de mana » (collapsibles) ---- */ /* Probabilités — contrôles */ .mtgd-pb-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px} .mtgd-pb-ctl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt2)} .mtgd-pb-ctl>span{flex:0 0 auto;min-width:96px} .mtgd-pb-num{width:72px;box-sizing:border-box;background:var(--input);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:4px 8px;font-size:13px} .mtgd-pb-num:focus,.mtgd-pb-sel:focus{outline:none;border-color:var(--focus)} .mtgd-pb-range{flex:1 1 auto;accent-color:var(--acc);min-width:80px} .mtgd-pb-turnv{flex:0 0 auto;min-width:20px;text-align:right;color:var(--txt);font-variant-numeric:tabular-nums} .mtgd-pb-sel{background:var(--input);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:4px 8px;font-size:13px;max-width:180px} .mtgd-pb-target{flex-wrap:wrap} .mtgd-pb-mode{gap:6px} .mtgd-pb-tog{flex:0 0 auto;background:var(--input);border:1px solid var(--line);color:var(--mut);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;line-height:1.2} .mtgd-pb-tog:hover{border-color:var(--acc);color:var(--acc)} .mtgd-pb-tog.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:700} /* Probabilités — sorties (tableaux) */ .mtgd-pb-head .mtgd-pb-cell{color:var(--mut);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em} .mtgd-pb-cell{flex:0 0 auto;min-width:56px;text-align:right;color:var(--txt);font-variant-numeric:tabular-nums} /* Probabilités — mini-courbe P(>=1) par tour */ .mtgd-pb-curve{display:flex;flex-direction:column;gap:3px;margin-top:2px} .mtgd-pb-bar{display:flex;align-items:center;gap:6px;font-size:11px} .mtgd-pb-bar-t{flex:0 0 auto;min-width:20px;color:var(--mut);text-align:right;font-variant-numeric:tabular-nums} .mtgd-pb-bar-track{flex:1 1 auto;height:12px;background:var(--input);border-radius:4px;overflow:hidden} .mtgd-pb-bar-fill{display:block;height:100%;background:var(--acc);border-radius:4px;transition:width .2s} .mtgd-pb-bar-v{flex:0 0 auto;min-width:52px;text-align:right;color:var(--txt2);font-variant-numeric:tabular-nums} /* Base de mana */ .mtgd-mb-row{gap:6px} .mtgd-mb-c{display:flex;align-items:center;gap:6px} .mtgd-mb-lbl{color:var(--txt2)} .mtgd-mb-cur,.mtgd-mb-reco{min-width:28px} .mtgd-mb-sep{flex:0 0 auto;color:var(--mut);min-width:8px;text-align:center} .mtgd-mb-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.35)} .mtgd-mb-ok{background:var(--ok)} .mtgd-mb-warn{background:var(--warn)} .mtgd-mb-bad{background:var(--bad)} .mtgd-mb-note{margin-top:8px;color:var(--mut);font-size:10px;line-height:1.4} /* ---- header icon bar (mirror of the collection panel) ---- */ /* Boutons d'icônes compacts dans .mtgd-headtop : ⋮ menu, ↶↷ undo/redo, 📥📤 import/export. */ .mtgd-hbtn{ flex:0 0 auto;background:none;border:none;color:var(--mut);line-height:1; cursor:pointer;padding:0 4px;font-size:16px; } .mtgd-hbtn:hover{color:var(--txt)} #mtgd-menu-btn{font-size:20px;font-weight:700} .mtgd-hbtn.mtgd-hist:disabled{opacity:.38;cursor:default;color:var(--mut)} /* ---- menu déroulant ⋮ (actions de gestion) — calqué sur #col-binder-menu ---- */ .mtgd-menu{ position:absolute;top:52px;left:16px;right:16px;z-index:3060; background:var(--panel2);border:1px solid var(--line);border-radius:8px; box-shadow:0 12px 40px var(--shadow);max-height:70vh;overflow-y:auto; } .mtgd-menu[hidden]{display:none} .mtgd-menu-list{display:flex;flex-direction:column;padding:6px} .mtgd-menu-item{ display:flex;align-items:center;gap:10px;width:100%; background:none;border:none;color:var(--txt);border-radius:6px;padding:9px 12px; cursor:pointer;text-align:left;font-size:13px;font-weight:600; } .mtgd-menu-item:hover{background:var(--input)} .mtgd-menu-ic{flex:0 0 auto;width:20px;text-align:center;font-size:15px;line-height:1} .mtgd-menu-lbl{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtgd-menu-item:disabled{opacity:.4;cursor:default} .mtgd-menu-item:disabled:hover{background:none} /* `hidden` DOIT être réaffirmé : la règle d'auteur `display:flex` ci-dessus bat le `display:none` de la feuille du navigateur, donc une entrée masquée (l'aide Forge) resterait visible. Piège classique dès qu'on style un élément en flex. */ .mtgd-menu-item[hidden]{display:none} /* Seule dérogation d'apparence, et elle n'existe qu'AU SURVOL : les actions destructrices virent au rouge. Au repos, toutes les entrées sont identiques. */ .mtgd-menu-danger:hover{background:var(--bad-bg);color:var(--bad)} /* ---- load list overlay ---- */ .mtgd-loadlist{ position:absolute;left:0;right:0;top:52px;z-index:3060;max-height:60vh;overflow-y:auto; background:var(--input);border-bottom:1px solid var(--acc);box-shadow:0 8px 24px var(--shadow); padding:8px 10px 12px; } .mtgd-ll-hd{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:2px 0 8px} .mtgd-ll-row{display:flex;gap:6px;align-items:stretch;margin-bottom:5px} .mtgd-ll-open{ flex:1;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--txt); border-radius:6px;padding:7px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px; } .mtgd-ll-open:hover{border-color:var(--acc)} .mtgd-ll-name{font-weight:600;font-size:13px} .mtgd-ll-meta{color:var(--mut);font-size:11px;text-transform:capitalize} .mtgd-ll-del{ background:var(--panel);border:1px solid var(--line);color:var(--mut);border-radius:6px; cursor:pointer;padding:0 10px;font-size:14px; } .mtgd-ll-del:hover{border-color:var(--bad-line);color:var(--bad)} /* ---- hover preview (must sit above the full-mode panel, z-index 3300) ---- */ #mtgd-preview{ position:fixed;display:none;z-index:3600;pointer-events:none;width:240px; } #mtgd-preview img{width:100%;display:block;border-radius:12px;box-shadow:0 12px 40px var(--shadow)} /* aperçu AGRANDI (simulateur de main) : dimensionné par la hauteur de fenêtre → bien plus grand que les tuiles ; s'adapte aux petites fenêtres grâce aux unités vh. */ #mtgd-preview.hs-big{width:auto} #mtgd-preview.hs-big img{width:auto;height:80vh;border-radius:16px} /* ---- addbtn feedback (button lives on result cards, integrator-added) ---- */ .addbtn{ position:absolute;top:6px;left:6px;z-index:6;width:26px;height:26px;border-radius:50%; border:1px solid var(--line);background:rgba(15,18,25,.88);color:var(--txt); font-size:16px;font-weight:700;line-height:1;cursor:pointer;padding:0; } .addbtn:hover{border-color:var(--acc);color:var(--acc)} .addbtn.added{background:var(--acc);color:var(--on-acc);border-color:var(--acc);transform:scale(1.15);transition:transform .15s} /* the − button (index.html renders it, hidden by default; shown via refreshResultButtons) */ .subbtn{ position:absolute;top:38px;left:6px;z-index:6;width:26px;height:26px;border-radius:50%; border:1px solid var(--line);background:rgba(15,18,25,.88);color:var(--txt); font-size:16px;font-weight:700;line-height:1;cursor:pointer;padding:0; align-items:center;justify-content:center; } .subbtn:hover{border-color:var(--bad);color:var(--bad)} /* quantity badge shown on result cards that are in the current deck */ .mtgd-qtybadge{ position:absolute;top:6px;left:38px;z-index:6;min-width:20px;height:20px;padding:0 6px; border-radius:11px;background:var(--acc);color:var(--on-acc);font-size:12px;font-weight:700; line-height:20px;text-align:center;pointer-events:auto;cursor:help;box-shadow:0 2px 6px var(--shadow); } /* ---- Forge battle modal (setup / battle / results) ---- */ #mtgd-fb-overlay{ position:fixed;inset:0;z-index:3400;display:flex;align-items:center;justify-content:center; background:var(--overlay);padding:20px; font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif; } .mtgd-fb{ width:min(520px,100%);max-height:88vh;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--txt); box-shadow:0 18px 60px var(--shadow); } .mtgd-fb-hd{ display:flex;align-items:center;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--line); } .mtgd-fb-title{flex:1 1 auto;font-size:15px;font-weight:700} .mtgd-fb-close{background:none;border:none;color:var(--mut);font-size:24px;line-height:1;cursor:pointer;padding:0 4px} .mtgd-fb-close:hover{color:var(--txt)} .mtgd-fb-body{padding:14px 16px 16px;overflow-y:auto} .mtgd-fb-msg{color:var(--mut);font-size:13px;padding:18px 4px;text-align:center} .mtgd-fb-sec{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)} .mtgd-fb-sec:last-of-type{border-bottom:none;margin-bottom:8px} .mtgd-fb-sec-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-bottom:7px} .mtgd-fb-ok{ display:inline-block;font-size:12px;font-weight:700;border-radius:5px;padding:4px 10px; background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line); } .mtgd-fb-need{font-size:13px;color:var(--txt);margin-bottom:6px} .mtgd-fb-hint{font-size:11px;color:var(--mut);margin:4px 0} .mtgd-fb-link{display:inline-block;margin:4px 0;color:var(--acc);font-size:13px;font-weight:600;text-decoration:none} .mtgd-fb-link:hover{text-decoration:underline} .mtgd-fb-btn{ background:none;border:1px solid var(--line);color:var(--txt);border-radius:6px; padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;margin-top:6px; } .mtgd-fb-btn:hover{border-color:var(--acc);color:var(--acc)} .mtgd-fb-btn:disabled{opacity:.45;cursor:default;border-color:var(--line);color:var(--mut)} .mtgd-fb-btn.prim{background:var(--acc);color:var(--on-acc);border-color:var(--acc)} .mtgd-fb-btn.prim:hover{filter:brightness(1.08);color:var(--on-acc)} .mtgd-fb-btn.prim:disabled{filter:none;opacity:.45;color:var(--on-acc)} /* progress bar */ .mtgd-fb-prog{margin-top:10px} .mtgd-fb-prog[hidden]{display:none} .mtgd-fb-prog-bar{height:10px;background:var(--input);border:1px solid var(--line);border-radius:6px;overflow:hidden} .mtgd-fb-prog-fill{height:100%;width:0;background:var(--acc);border-radius:6px 0 0 6px;transition:width .25s ease} .mtgd-fb-prog-lbl{margin-top:5px;font-size:11px;color:var(--mut)} /* manual config */ .mtgd-fb-manual{margin-top:12px} .mtgd-fb-sub{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:6px} .mtgd-fb-input{ width:100%;background:var(--input);border:1px solid var(--line);color:var(--txt); border-radius:6px;padding:8px 10px;font-size:13px;margin-bottom:8px; } .mtgd-fb-input:focus{outline:none;border-color:var(--acc)} /* inline error message */ .mtgd-fb-err{ margin-top:10px;padding:8px 10px;border:1px solid var(--bad-line);border-radius:6px; background:var(--bad-bg);color:var(--bad);font-size:12px; } .mtgd-fb-err[hidden]{display:none} /* battle form fields */ .mtgd-fb-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px} .mtgd-fb-field>span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)} .mtgd-fb-select{ background:var(--input);border:1px solid var(--line);color:var(--txt); border-radius:6px;padding:8px 10px;font-size:13px;text-transform:capitalize; } .mtgd-fb-select:focus{outline:none;border-color:var(--acc)} .mtgd-fb-actions-row{display:flex;justify-content:flex-end;gap:8px;margin-top:8px} /* simulating indicator */ .mtgd-fb-sim{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 10px} .mtgd-fb-spinner{ width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc); animation:mtgd-fb-spin .8s linear infinite; } @keyframes mtgd-fb-spin{to{transform:rotate(360deg)}} .mtgd-fb-sim-lbl{font-size:13px;color:var(--mut)} /* results */ .mtgd-fb-winner{ display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px; background:var(--ok-bg);border:1px solid var(--ok-line);margin-bottom:12px; } .mtgd-fb-winner.draw{background:var(--focus);border-color:var(--acc)} .mtgd-fb-crown{font-size:24px;line-height:1} .mtgd-fb-winlbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)} .mtgd-fb-winname{flex:1 1 auto;font-size:16px;font-weight:700;color:var(--txt);text-align:right; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtgd-fb-scoreline{display:flex;align-items:center;gap:10px;margin-bottom:8px} .mtgd-fb-scoreline .mtgd-fb-vs-a,.mtgd-fb-scoreline .mtgd-fb-vs-b{flex:1 1 0;font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtgd-fb-scoreline .mtgd-fb-vs-b{text-align:right} .mtgd-fb-score{flex:0 0 auto;font-size:20px;font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums} .mtgd-fb-summary{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:10px 0} .mtgd-fb-summary b{color:var(--txt);font-weight:700} .mtgd-fb-tablewrap{overflow-x:auto;margin:8px 0} .mtgd-fb-table{width:100%;border-collapse:collapse;font-size:12px} .mtgd-fb-table th,.mtgd-fb-table td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap} .mtgd-fb-table th{color:var(--mut);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.05em} .mtgd-fb-table td{color:var(--txt);font-variant-numeric:tabular-nums} .mtgd-fb-table tbody tr:last-child td{border-bottom:none} .mtgd-fb-details{margin-top:12px} .mtgd-fb-details summary{cursor:pointer;font-size:12px;color:var(--acc);user-select:none} .mtgd-fb-details summary:hover{text-decoration:underline} .mtgd-fb-log{ margin-top:8px;max-height:34vh;overflow:auto;background:var(--input);border:1px solid var(--line); border-radius:6px;padding:10px;font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--txt2);white-space:pre-wrap;word-break:break-word; } /* have/need — cards present + binder locations */ /* Nom de carte survolable → aperçu (comme la liste du deck) : indice visuel discret. */ .mtgd-hn-name[data-oid]{cursor:help} .mtgd-hn-name[data-oid]:hover{color:var(--acc)} .mtgd-hn-present-row{flex-wrap:wrap} .mtgd-hn-locs{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .mtgd-hn-loc{ font-size:10px;line-height:1.4;padding:1px 6px;border-radius:10px; background:var(--panel2);border:1px solid var(--line);color:var(--txt2); } .mtgd-hn-loc b{color:var(--txt);font-weight:600} .mtgd-hn-loc-qty{color:var(--mut)} /* ---- popover « utiliser une copie » / rangement (traçabilité deck ↔ collection) ---- Fixe, au-dessus du volet/plein écran (même bande z-index que les popovers de la collection, sous les modaux 3950 et confirm/prompt 4100). Tokens thématiques only. */ .mtgd-movepop{ position:fixed;z-index:3600;min-width:340px;max-width:min(520px,94vw); background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:0 12px 40px var(--shadow);padding:6px;color:var(--txt); } .mtgd-movepop-sec{ font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut); padding:6px 8px 4px; } .mtgd-movepop-sec2{border-top:1px solid var(--line);margin-top:4px} .mtgd-movepop-list{display:flex;flex-direction:column;gap:1px;max-height:320px;overflow-y:auto} .mtgd-movepop-empty{padding:8px;font-size:12px;color:var(--mut)} .mtgd-movepop-opt{ display:flex;align-items:center;gap:8px;width:100%;text-align:left; background:none;border:0;border-radius:6px;padding:6px 8px;color:var(--txt); cursor:pointer;font:inherit; } .mtgd-movepop-opt:hover{background:var(--input)} .mtgd-movepop-opt.mtgd-movepop-simple{justify-content:space-between} .mtgd-movepop-thumb{flex:0 0 auto;width:34px;height:47px;object-fit:cover;border-radius:4px; border:1px solid var(--line);background:var(--panel2)} .mtgd-movepop-thumb.ph{background:var(--panel2)} .mtgd-movepop-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} /* Nom d'option : passe à la ligne (au lieu de tronquer) pour que « depuis « classeur/ deck » » reste lisible dans la popover « utiliser une copie ». */ .mtgd-movepop-nm{white-space:normal;overflow-wrap:anywhere;font-size:13px;line-height:1.3} .mtgd-movepop-meta{color:var(--mut);font-size:11px;white-space:normal;overflow-wrap:anywhere} .mtgd-movepop-qty{flex:0 0 auto;color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums} .mtgd-movepop-new{color:var(--acc);font-weight:600} /* ---- vue éclatée (1 ligne ×1 par exemplaire) + sélection multiple + barre batch ---- Tokens thématiques uniquement. */ .mtgd-copy .mtgd-copy-ed{ margin-left:auto;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font-size:11px;color:var(--mut); } /* En vue éclatée, le libellé d'édition ouvre le picker de version (sauf copie allouée = verrouillée) ; la cardinalité ×1 ouvre « utiliser une copie » (curseur pointer hérité de .mtgd-tot[data-act="usecopy"]). */ .mtgd-copy .mtgd-copy-ed[data-act="pickver"]{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px} .mtgd-copy .mtgd-copy-ed[data-act="pickver"]:hover,.mtgd-copy .mtgd-copy-ed[data-act="pickver"]:focus{color:var(--acc);outline:none} .mtgd-copy .mtgd-copy-ed.mtgd-vset-locked{cursor:default} /* surbrillance de sélection : contour d'accent + fond translucide (token, pas de color-mix). */ .mtgd-row.sel{outline:2px solid var(--acc);outline-offset:-2px;background:var(--ok-bg)} .mtgd-row.sel:hover{background:var(--ok-bg)} /* barre d'action batch : fixée en bas du volet, au-dessus du volet/plein écran (3550), sous les popovers (3600) / modaux (3950) / confirm (4100). */ .mtgd-batchbar{ position:fixed;z-index:3550;right:20px;bottom:20px; display:flex;align-items:center;gap:8px; /* 4 boutons (classeur / deck / imprimer / effacer) : sur écran étroit la barre passe à la ligne au lieu de déborder de la fenêtre. */ flex-wrap:wrap;max-width:calc(100vw - 40px);justify-content:flex-end; background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:0 12px 40px var(--shadow);padding:8px 10px;color:var(--txt); } .mtgd-batchbar[hidden]{display:none} .mtgd-bb-count{font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap} .mtgd-bb-lbl{font-size:12px;color:var(--txt2);white-space:nowrap} /* section Notes du deck : textarea multiligne pleine largeur, thématisée */ .mtgd-notes-ta{ width:100%;box-sizing:border-box;min-height:120px;resize:vertical; background:var(--input);border:1px solid var(--line);border-radius:8px; color:var(--txt);font:inherit;font-size:13px;line-height:1.4;padding:8px 10px; } .mtgd-notes-ta:focus{outline:none;border-color:var(--focus)} .mtgd-bb-btn{ border:1px solid var(--line);background:var(--input);color:var(--txt);border-radius:6px; cursor:pointer;font:inherit;font-size:12px;padding:4px 10px;white-space:nowrap; } .mtgd-bb-btn:hover{border-color:var(--acc);color:var(--acc)} .mtgd-bb-clear{color:var(--mut)} /* filet vertical séparant « Envoyer les cartes possédées » de « Imprimer » */ .mtgd-bb-div{width:1px;align-self:stretch;background:var(--line);margin:0 2px} /* ---- hand simulator (playtest) — overlay recouvrant le volet deck ---- */ /* Épouse le volet (plein écran ou non) ; sous les dialogues confirm/prompt (4100) et le menu thème (4000), au-dessus du contenu du volet. Tokens thématiques uniquement. */ .mtgd-handsim{ position:absolute;inset:0;z-index:3200;display:flex;flex-direction:column; background:var(--panel);color:var(--txt);padding:14px 14px 10px;gap:10px; } .mtgd-handsim[hidden]{display:none} .mtgd-hs-close{ position:absolute;top:8px;right:10px;z-index:2;background:none;border:none;color:var(--mut); cursor:pointer;font-size:22px;line-height:1;padding:2px 6px; } .mtgd-hs-close:hover{color:var(--txt)} /* barre de stats */ .mtgd-hs-stats{flex:0 0 auto;padding-right:34px} .mtgd-hs-statrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px} .mtgd-hs-badge{ display:inline-flex;align-items:center;gap:4px;background:var(--input);border:1px solid var(--line); color:var(--txt);border-radius:12px;padding:2px 10px;font-size:12px;font-weight:600; } .mtgd-hs-badge.mtgd-hs-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)} .mtgd-hs-badge.mtgd-hs-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)} .mtgd-hs-badge.mtgd-hs-bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)} /* mini-courbe de mana (inline, compacte) */ .mtgd-hs-curve{display:inline-flex;align-items:flex-end;gap:8px;margin-left:2px} .mtgd-hs-curve-lbl{font-size:11px;color:var(--mut);align-self:center} .mtgd-hs-curve-bars{display:inline-flex;align-items:flex-end;gap:3px;height:34px} .mtgd-hs-cvcol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:16px;height:100%} .mtgd-hs-cvbar{width:10px;min-height:2px;background:var(--acc);border-radius:2px 2px 0 0} .mtgd-hs-cvn{font-size:9px;color:var(--txt2);line-height:1.1} .mtgd-hs-cvx{font-size:9px;color:var(--mut);line-height:1.1} .mtgd-hs-info{margin-top:6px;font-size:12px;color:var(--txt2)} /* zone de main : les cartes remplissent l'espace au max (largeur pilotée par --hs-card-w) */ .mtgd-hs-hand{ flex:1 1 auto;min-height:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center; gap:8px;padding:8px;overflow:auto; } .mtgd-hs-card{ position:relative;width:var(--hs-card-w,150px);aspect-ratio:63/88;border-radius:10px; overflow:hidden;box-shadow:0 6px 18px var(--shadow);background:var(--input); } .mtgd-hs-card img{width:100%;height:100%;object-fit:cover;display:block} .mtgd-hs-hand.bottoming .mtgd-hs-card{cursor:pointer} .mtgd-hs-card.to-bottom{outline:2px solid var(--acc);outline-offset:-2px;opacity:.55} .mtgd-hs-bottom-badge{ position:absolute;top:4px;left:4px;background:var(--acc);color:var(--on-acc);border-radius:50%; width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700; } .mtgd-hs-empty{margin:auto;color:var(--mut);font-size:13px;text-align:center;max-width:280px} /* barre de contrôles centrée en bas */ .mtgd-hs-controls{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center} .mtgd-hs-btn{ background:var(--input);border:1px solid var(--line);color:var(--txt);border-radius:8px; cursor:pointer;font:inherit;font-size:13px;font-weight:600;padding:7px 16px; } .mtgd-hs-btn:hover{border-color:var(--acc);color:var(--acc)} .mtgd-hs-btn:disabled{opacity:.4;cursor:default;color:var(--mut)} .mtgd-hs-btn:disabled:hover{border-color:var(--line)} .mtgd-hs-btn[hidden]{display:none} .mtgd-hs-mode{background:var(--panel2);color:var(--txt2)} /* narrow screens */ @media (max-width:480px){ #mtgd-panel{width:100vw} }