:root{
  /* ── DuelForge · thème néon (tokens du design, OKLCH) ── */
  --bg:oklch(0.155 0.022 270); --bg2:oklch(0.185 0.025 270); --panel2:oklch(0.245 0.030 272);
  --line:oklch(0.34 0.03 268); --line2:oklch(0.44 0.04 265);
  --acc1:#37e0e0; --acc2:#ff45c8;     /* duo néon cyan→magenta — réglable (Paramètres) */
  --glow:1; --sp:1;                   /* intensité néon · densité — réglées en Paramètres */
  --sans:'Space Grotesk',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --font-display:var(--sans);

  /* ── Alias legacy → néon : les règles existantes héritent du nouveau thème ── */
  --txt:oklch(0.95 0.01 240); --text:var(--txt);
  --muted:oklch(0.74 0.02 250); --faint:oklch(0.60 0.03 255);
  --dim:var(--muted); --font-display:var(--sans);   /* alias requis par le board de duel néon */
  --accent:var(--acc1); --accent-2:var(--acc2);
  --panel:oklch(0.215 0.028 270 / .82);
  --glass:oklch(0.62 0.04 260 / .06); --glass-2:oklch(0.62 0.04 260 / .11);
  --stroke:var(--line); --stroke-2:var(--line2);

  /* ── Couleurs sémantiques Yu-Gi-Oh (attributs / ban-list) — inchangées ── */
  --light:#caa726; --dark:#9a52e0; --earth:#a9772f; --fire:#e0533a; --water:#2f93e6; --wind:#34b878; --divine:#cdb24a;
  --forbidden:#ff6b6b; --limited:#ffce5a; --good:#5fe0a0;
  font-family:var(--sans);
}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-family:var(--sans);
  background:
    radial-gradient(760px 480px at 12% -4%,color-mix(in oklch,var(--acc1) 22%,transparent),transparent 60%),
    radial-gradient(820px 560px at 94% 104%,color-mix(in oklch,var(--acc2) 20%,transparent),transparent 60%),
    radial-gradient(1200px 800px at 50% -20%,oklch(0.22 0.04 260),transparent 70%),
    #07080d;
  background-attachment:fixed}
/* trame fine façon « stage » du design, derrière le contenu (header/.tab sont en z-index:1) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(oklch(0.6 0.05 250/.04) 1px,transparent 1px),linear-gradient(90deg,oklch(0.6 0.05 250/.04) 1px,transparent 1px);
  background-size:44px 44px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.orb3{position:fixed;width:440px;height:440px;border-radius:50%;filter:blur(120px);opacity:.22;background:var(--acc2);top:36%;left:44%;z-index:0;pointer-events:none}
header,.tab{position:relative;z-index:1}
button,input,select,textarea{font:inherit;color:var(--text)}
.glass{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--stroke)}

header{display:flex;align-items:center;gap:18px;margin:12px;padding:12px 22px;border-radius:16px;
  background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--stroke);box-shadow:0 8px 30px #0005}
.logo{font-weight:800;font-size:18px;letter-spacing:.02em;background:none;border:none;color:var(--text);
  cursor:pointer;padding:4px 6px;border-radius:8px;font-family:var(--font-display);transition:background .12s}
.logo:hover{background:var(--glass-2)}
.logo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.logo b{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:4px}
nav button{background:none;border:none;color:var(--muted);padding:7px 14px;border-radius:10px;cursor:pointer;font-size:14px}
nav button.on{color:#fff;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--stroke)}
.tab{display:none;max-width:1500px;margin:0 auto;padding:4px 16px 30px}
.tab.on{display:block}
input,select{background:var(--glass);border:1px solid var(--stroke);border-radius:10px;padding:9px 12px;font-size:13px;backdrop-filter:blur(8px)}
input::placeholder{color:var(--faint)} input:focus,select:focus{outline:none;border-color:var(--accent)}
.muted{color:var(--muted)} .status{color:var(--muted);font-size:13px;margin:8px 0}
button.btn{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:10px;padding:9px 15px;cursor:pointer;font-weight:600;font-size:13px}
button.ghost{background:var(--glass);border:1px solid var(--stroke);color:var(--muted);border-radius:10px;padding:9px 12px;cursor:pointer;font-size:13px}

/* ---------- Cartes layout: grid (main) + filter rail (right, Omega-style) ---------- */
.cards-layout{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.topbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.topbar .grow{flex:1}
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap input{width:100%;padding-right:34px}
.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:none;align-items:center;justify-content:center;border-radius:50%;border:none;background:var(--glass-2);color:var(--faint);font-size:15px;line-height:1;cursor:pointer;padding:0}
.clear-btn:hover{background:color-mix(in srgb,var(--text) 20%,transparent);color:var(--text)}
.search-wrap:has(input:not(:placeholder-shown)) .clear-btn{display:flex}
.count{color:var(--muted);font-size:13px;white-space:nowrap}
.hint{padding:9px 13px;border-radius:11px;background:rgba(232,210,138,.1);border:1px solid rgba(232,210,138,.3);color:#e8d28a;font-size:13px;margin-bottom:12px}
.hint.hidden{display:none}

/* full-card dense grid (cards rendered whole, like Omega) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.card{position:relative;aspect-ratio:.686;border-radius:8px;overflow:hidden;cursor:pointer;background:#11111e;
  border:1px solid var(--stroke);transition:transform .14s,box-shadow .14s}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card:hover{transform:translateY(-4px) scale(1.035);z-index:2;box-shadow:0 14px 32px -10px #000d,0 0 0 2px var(--accent)}
.card .corner{position:absolute;top:5px;right:5px;width:14px;height:14px;border-radius:50%;border:2px solid #000a;box-shadow:0 0 6px #000}
.en-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 5px;border-radius:5px;color:#ffd9d9;border:1px solid #ff6b6b;background:color-mix(in srgb,#ff6b6b 22%,transparent);vertical-align:middle}
h2 .en-badge{margin-left:8px;font-size:11px}
.card .en-badge{position:absolute;top:6px;right:6px;z-index:3;background:rgba(22,10,12,.82);box-shadow:0 1px 4px #000a}
/* out-of-format card in the pool: red cross overlay, not addable (hover/preview unaffected) */
.card.barred{cursor:not-allowed}
.card.barred::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:46px;font-weight:900;color:#ff4d4d;background:rgba(12,4,6,.46);text-shadow:0 2px 10px #000;z-index:4;pointer-events:none}
.card.barred:hover{box-shadow:0 14px 32px -10px #000d,0 0 0 2px var(--forbidden)}
/* reconstructed grid tile: the SVG card brings its own frame, so the cell is bare */
.card.recon{background:none;border:none;overflow:hidden}
.card.recon:hover{box-shadow:0 16px 36px -10px #000d}
.card.recon .rc-svg{height:100%;filter:none}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:20px;color:var(--muted);font-size:13px}

/* filter rail */
.rail{position:sticky;top:12px;border-radius:16px;padding:13px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 84px)}
.rail h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.rail-actions{display:flex;gap:8px}
.rail-actions button{flex:1}
.dims{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dim{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:11px;
  border:1px solid var(--stroke);background:var(--glass);cursor:pointer;font-size:9.5px;color:var(--muted);text-align:center;transition:.12s}
.dim:hover{background:var(--glass-2)}
.dim.on{border-color:var(--accent);color:#fff;background:var(--glass-2);box-shadow:0 0 0 1px var(--accent)}
.dim .ic{font-size:18px;line-height:1}
.dim .b{position:absolute;top:-5px;right:-4px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;border-radius:999px;padding:0 5px;min-width:15px;line-height:15px}
.dim-content{flex:1;overflow-y:auto;border-top:1px solid var(--stroke);padding-top:10px;display:flex;flex-direction:column;gap:3px}
.check{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--muted);user-select:none}
.check:hover{background:var(--glass-2)}
.check.on{color:#fff}
.check .d{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.check .mark{margin-left:auto;color:var(--accent);font-weight:800;visibility:hidden}
.check.on .mark{visibility:visible}
.range{display:flex;flex-direction:column;gap:10px;padding:4px}
.range .r{display:flex;align-items:center;gap:8px}
.range label{font-size:11px;color:var(--faint);width:64px}
.range input{flex:1}
.dim-content . tip,.tip{font-size:12px;color:var(--faint);padding:4px}
.dim-content input[type=text]{width:100%}

/* effects */
.erow{border-radius:13px;padding:13px 16px;margin-bottom:10px;cursor:pointer}
.erow:hover{border-color:var(--stroke-2)}
.erow .nm{font-weight:700}.erow .meta{color:var(--faint);font-size:12px}
.erow .snip{color:var(--muted);font-size:13px;margin-top:6px}.erow .snip b{color:var(--accent)}

/* deck */
.deck-top{display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
textarea#deck{width:100%;min-height:300px;border-radius:14px;padding:14px;font-family:ui-monospace,monospace;font-size:13px;background:var(--glass);border:1px solid var(--stroke);resize:vertical;backdrop-filter:blur(8px)}
.verdict{font-weight:700;font-size:15px;margin:14px 0 6px}.verdict.ok{color:var(--good)}.verdict.bad{color:var(--forbidden)}
.viol{border-radius:12px;padding:11px 14px;margin:8px 0}.viol .rule{color:var(--faint);font-size:12px;margin-top:3px}

/* detail modal */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(4,4,10,.62);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}
.overlay.hidden{display:none}
.modal{position:relative;width:740px;max-width:100%;max-height:88vh;overflow:auto;border-radius:20px;padding:22px;
  background:var(--panel);backdrop-filter:blur(22px);border:1px solid var(--stroke-2);box-shadow:0 30px 80px #000a}
#modal-body{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.modal .close{position:absolute;top:14px;right:18px;font-size:24px;line-height:1;background:none;border:none;color:var(--muted);cursor:pointer;z-index:2}
.modal img.full{width:100%;border-radius:12px;border:1px solid var(--stroke)}
.modal h2{font-size:21px;letter-spacing:-.01em}.modal .fr{color:var(--muted);font-size:13px;margin-bottom:6px}
.modal .sub{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px;margin:8px 0}
.kv{display:grid;grid-template-columns:auto auto;gap:5px 16px;font-size:13px;margin:12px 0;width:max-content}
.kv dt{color:var(--muted)}.kv dd{font-weight:600;font-variant-numeric:tabular-nums}
.legtable{width:100%;border-collapse:collapse;margin-top:8px;font-size:12.5px}
.legtable th{text-align:left;color:var(--faint);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--stroke)}
.legtable td{padding:6px 8px;border-bottom:1px solid var(--stroke)}
.lp{font-weight:700;font-size:11px;padding:2px 8px;border-radius:6px}
.lp.forbidden{background:rgba(255,80,80,.2);color:#ffb3b3}.lp.limited{background:rgba(255,200,80,.18);color:#ffe0a0}
.lp.ok{background:rgba(95,224,160,.16);color:#9af0c4}.lp.no{background:var(--glass-2);color:var(--muted)}
.desc{margin-top:14px;padding:12px;border-radius:12px;background:var(--glass);font-size:13px;white-space:pre-wrap;color:#dfe1f0}
/* utility: must beat component display rules (.edit-bar, #pool-filters, …) regardless of order/specificity */
.hidden{display:none !important}

/* ---------- reconstructed card (SVG, asset-driven) ---------- */
/* Drop-in fonts: put licensed font files in static/fonts/ (name.woff2 / text.woff2),
   or have them installed system-wide (picked up by local()). We never ship a
   commercial font — the fallback is a small-caps serif look-alike. */
@font-face{font-family:"RC Name";font-display:swap;
  src:local("ITC Stone Serif"),local("Matrix Regular Small Caps"),url("/static/fonts/name.woff2") format("woff2")}
@font-face{font-family:"RC Text";font-display:swap;
  src:local("ITC Stone Serif"),url("/static/fonts/text.woff2") format("woff2")}
:root{--rc-font-name:"RC Name","Cinzel",Georgia,"Times New Roman",serif;
  --rc-font-text:"RC Text",Georgia,"Times New Roman",serif}
.rc-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
.rc-svg text{font-family:var(--rc-font-name)}
/* Name: vertically centred in the title bar (flex), with up-to-2-line clamp. */
.rc-svg .rc-name{display:flex;align-items:center;height:100%;color:#191309}
.rc-svg.ink-light .rc-name{color:#f4f4f4}
.rc-svg .rc-name span{font-family:var(--rc-font-name);font-weight:700;font-variant:small-caps;letter-spacing:.4px;
  line-height:1.0;font-size:30px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Text cartouche: transparent over a template (the template provides the box); only the
   drawn (no-asset) frame supplies its own beige box + border. */
.rc-svg .rc-box{display:flex;flex-direction:column;height:100%;overflow:hidden;color:#15110a;border-radius:5px;padding:6px 11px}
.rc-svg .rc-box.drawn{background:linear-gradient(#fdf9ee,#f1e7cf);border:1px solid rgba(0,0,0,.3);
  box-shadow:inset 0 0 9px rgba(120,90,30,.18)}
.rc-svg .rc-typeline{flex:0 0 auto;font-family:var(--rc-font-name);font-weight:700;font-size:18px;color:#241a0c;
  line-height:1.05;margin-bottom:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Effect body: fixed 20px; scrolls inside the box when it overflows (esp. in the modal). */
.rc-svg .rc-tx{flex:1 1 auto;min-height:0;overflow-y:auto;font-family:var(--rc-font-text);color:#15110a;
  font-size:20px;line-height:1.18;scrollbar-width:thin}
.rc-svg .rc-tx::-webkit-scrollbar{width:6px}
.rc-svg .rc-tx::-webkit-scrollbar-thumb{background:rgba(80,55,15,.4);border-radius:3px}
.rc-svg .rc-tx.flavor{font-style:italic;color:#3a2c12}
/* Pendulum: blue/red scale numbers + the pendulum-effect box text. */
.rc-svg .rc-pscale text{font-weight:800;fill:#15294a;stroke:#fff;stroke-width:2px;paint-order:stroke}
.rc-svg .rc-pend{font-family:var(--rc-font-text);color:#15110a;line-height:1.12;height:100%;overflow:hidden;font-size:14px}
/* ATK/DEF values, overlaid where the template prints them. */
.rc-svg .rc-val{font-family:var(--rc-font-name);font-weight:800;fill:#15110a}
/* Drawn-frame stats row (labelled, since there is no template label). */
.rc-svg .rc-stats{display:flex;justify-content:flex-end;align-items:center;gap:26px;height:100%;
  font-family:var(--rc-font-name);font-weight:800;font-size:23px;color:#15110a;
  border-top:2px solid rgba(0,0,0,.45)}
.rc-svg.ink-light .rc-stats{color:#f0f0f0;border-color:rgba(255,255,255,.4)}
/* Compteurs sur la carte (prévisualisation de duel) : pastilles dorées en haut-gauche de l'illu. */
.rc-svg .rc-counters{display:flex;flex-wrap:wrap;gap:4px}
.rc-svg .rc-counter{font-family:var(--rc-font-name);font-weight:800;font-size:22px;line-height:1;
  color:#1a1408;background:radial-gradient(circle at 30% 30%,#ffe486,#d8a32a);
  border:2px solid #7a5510;border-radius:999px;padding:3px 9px;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.modal-left{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.art-nav{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.art-nav button{background:var(--glass);border:1px solid var(--stroke);color:var(--text);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:15px}
.art-nav button:hover{background:var(--glass-2)}

/* pager controls */
.pager .pg{min-width:38px;padding:7px 10px;font-weight:700}
.page-in{width:58px;text-align:center;padding:6px 8px}
#per-page{padding:7px 9px}
.pager .sep{color:var(--faint)}

/* header gear -> settings */
.gear{margin-left:auto;width:38px;height:38px;border-radius:10px;background:var(--glass);border:1px solid var(--stroke);color:var(--text);cursor:pointer;font-size:16px}
.gear:hover{background:var(--glass-2)}
.gear.on{border-color:var(--accent);color:#fff}
.gear{display:inline-flex;align-items:center;justify-content:center}
.gear svg{width:18px;height:18px;vertical-align:middle}
/* ----- icônes inline (jeu d'icônes du design dans boutons/libellés) ----- */
.ico{display:inline-flex;align-items:center;flex:0 0 auto}
.ico svg{width:15px;height:15px}
.btn:has(.ico),.ghost:has(.ico){display:inline-flex;align-items:center;gap:7px}
.gear .ico svg{width:19px;height:19px}
.fab .ico svg{width:24px;height:24px}
/* ----- compte connecté (header) : chip + boutons admin/déconnexion ----- */
.account-chip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:0 12px;height:38px;border-radius:10px;background:var(--glass);border:1px solid var(--stroke);color:var(--text);font-size:13px;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-chip + .gear{margin-left:8px}
/* ----- pages autonomes login + admin ----- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:min(380px,92vw);background:var(--glass);border:1px solid var(--stroke);border-radius:16px;padding:28px}
.auth-card h1{font-family:var(--font-display);font-size:22px;margin:0 0 4px}
.auth-card p.sub{color:var(--muted,#9aa);font-size:13px;margin:0 0 20px}
.auth-card label{display:block;font-size:12px;color:var(--muted,#9aa);margin:14px 0 6px}
.auth-card input{width:100%;height:40px;padding:0 12px;border-radius:10px;background:var(--glass-2);border:1px solid var(--stroke);color:var(--text);font-size:14px}
.auth-card .btn{width:100%;height:42px;margin-top:20px;justify-content:center}
.auth-err{color:#ff6b6b;font-size:13px;margin-top:14px;min-height:18px}
.admin-page{max-width:920px;margin:0 auto;padding:28px}
.admin-page h1{font-family:var(--font-display);margin:0 0 18px}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th,.admin-table td{padding:10px 8px;border-bottom:1px solid var(--stroke);text-align:left}
.admin-table th{color:var(--muted,#9aa);font-weight:600;font-size:12px}
.admin-table .row-actions{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid var(--stroke)}
.badge.admin{border-color:var(--accent);color:var(--accent)}
.badge.off{opacity:.6}
.admin-new{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:18px 0 24px;padding:16px;background:var(--glass);border:1px solid var(--stroke);border-radius:12px}
.admin-new label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted,#9aa)}
.admin-new input,.admin-new select{height:38px;padding:0 10px;border-radius:9px;background:var(--glass-2);border:1px solid var(--stroke);color:var(--text)}
.mi-icon{display:inline-flex;align-items:center;justify-content:center}
.mi-icon svg{width:24px;height:24px}
.pb-icon{display:inline-flex;align-items:center}
.pb-icon svg{width:18px;height:18px}
#quit{margin-left:8px;display:inline-flex;align-items:center;justify-content:center}
#quit:hover{color:#ff6b6b;border-color:#ff6b6b;background:color-mix(in srgb,#ff6b6b 14%,transparent)}
.quit-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:22px;color:var(--text)}
.quit-screen span{font-size:14px;color:var(--faint)}

/* settings */
.settings-card{max-width:440px;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:18px}
.settings-card h2{font-size:20px}
.settings-card .field{display:flex;flex-direction:column;gap:7px}
.settings-card label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.settings-card .row{display:flex;gap:12px;align-items:center}
.set-ok{color:var(--good);font-size:13px}

/* ===================== Deck-manager shell (3 columns) ===================== */
.shell{position:relative;display:grid;
  grid-template-columns:var(--col-left-w,290px) 1fr var(--col-right-w,620px);gap:14px;margin:0 12px 14px;
  height:calc(100vh - 90px)}
.shell.solo{grid-template-columns:1fr}  /* deck management: deck list only (no preview, no pool) */
/* Draggable splitters sitting in the two gaps (aligned via the same width vars). */
.col-resize{position:absolute;top:0;bottom:0;width:14px;cursor:col-resize;z-index:6}
.col-resize::after{content:"";position:absolute;top:0;bottom:0;left:6px;width:2px;border-radius:2px;background:var(--stroke);transition:.12s}
.col-resize:hover::after,.col-resize.dragging::after{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#resize-left{left:var(--col-left-w,290px)}
#resize-right{right:var(--col-right-w,620px)}
.shell.solo .col-resize{display:none}
.col-left,.col-right{border-radius:16px;padding:13px;overflow:auto;height:100%}
.col-center{overflow:auto;height:100%;padding:0 2px}

/* editor top bar (header) */
.edit-bar{display:flex;gap:10px;align-items:center;flex:1}
.deck-name{width:230px}
#back-manage{white-space:nowrap;color:var(--text)}  /* full brightness — .ghost's muted color read as disabled */
#back-manage:hover{background:var(--glass-2);border-color:var(--stroke-2);color:#fff}

/* left: card preview */
.preview-empty{font-size:13px;text-align:center;margin-top:34px;padding:0 8px}
.pv-name{font-size:15px;margin-bottom:10px;line-height:1.2}
.pv-img{width:100%;border-radius:10px;border:1px solid var(--stroke);display:block}
.pv-sub{font-size:12px;margin-top:10px}
.pv-kv{display:grid;grid-template-columns:auto auto;gap:4px 14px;font-size:12.5px;margin:10px 0;width:max-content}
.pv-kv dt{color:var(--muted)}
.pv-kv dd{font-weight:600;font-variant-numeric:tabular-nums}
.pv-text{margin-top:10px;font-size:12.5px;line-height:1.42;white-space:pre-wrap;color:#dfe1f0;
  background:var(--glass);border:1px solid var(--stroke);border-radius:10px;padding:10px}
#preview-card .rc-svg{max-width:340px;margin:0 auto}

/* Nom / Effet segmented toggle */
.seg{display:flex;border:1px solid var(--stroke);border-radius:9px;overflow:hidden;width:max-content}
.seg button{background:none;border:none;color:var(--muted);padding:6px 16px;cursor:pointer;font-size:12px}
.seg button.on{background:var(--accent);color:#fff}
button:disabled{opacity:.4;cursor:not-allowed}

/* center: manage (deck grid) */
.manage-top{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.manage-top h2{font-size:19px}
.manage-top .grow{flex:1}
.manage-empty{padding:30px 10px;text-align:center}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px}
.deck{cursor:pointer}
.deck-cover{position:relative;aspect-ratio:.7;border-radius:12px;overflow:hidden;border:1px solid var(--stroke);
  background:#11111e center/cover no-repeat;box-shadow:0 8px 22px -10px #000b;transition:transform .14s,box-shadow .14s}
.deck:hover .deck-cover{transform:translateY(-4px);box-shadow:0 16px 34px -12px #000d,0 0 0 2px var(--accent)}
.deck.selected .deck-cover{box-shadow:0 12px 30px -12px #000d,0 0 0 3px var(--accent)}
.deck.selected .deck-acts{opacity:1}
/* Corner checkbox: hidden until hover (or when selected), filled when selected. */
.deck-check{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:7px;
  border:2px solid #fff;background:rgba(8,8,16,.55);display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:800;color:transparent;line-height:1;
  cursor:pointer;opacity:0;transition:opacity .12s,background .12s;z-index:2}
.deck:hover .deck-check{opacity:1}
.deck.selected .deck-check{opacity:1;background:var(--accent);border-color:var(--accent);color:#fff}
/* Master select-all checkbox — tri-state reflecting the actual selection:
   empty (none) / dash (some) / check (all). Accent-coloured once anything is on. */
.select-toggle{width:38px;height:38px;border-radius:10px;background:var(--glass);border:1px solid var(--stroke);
  color:var(--muted);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.select-toggle:hover{background:var(--glass-2);color:var(--text)}
.select-toggle svg{width:20px;height:20px}
.select-toggle .check,.select-toggle .dash{opacity:0;transition:opacity .12s}
.select-toggle.all,.select-toggle.partial{border-color:var(--accent);color:var(--accent)}
.select-toggle.all .check{opacity:1}
.select-toggle.partial .dash{opacity:1}
.exp-check{display:flex;align-items:center;gap:8px;font-size:13px;margin:2px 0}
.export-dir-row{gap:8px}
.export-dir-row input{flex:1;min-width:0}
.export-dir-row button{white-space:nowrap}
.exp-check input{width:auto}
.deck-acts{position:absolute;top:6px;right:6px;display:flex;gap:5px;opacity:0;transition:opacity .12s}
.deck:hover .deck-acts{opacity:1}
.deck-act{width:26px;height:26px;border-radius:8px;border:1px solid var(--stroke-2);background:rgba(8,8,16,.78);
  color:var(--text);cursor:pointer;font-size:13px;line-height:1;padding:0}
.deck-act:hover{background:var(--accent);border-color:var(--accent)}
.deck-act.d-del:hover{background:#ff6b6b;border-color:#ff6b6b}
.deck-total{position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.62);border-radius:8px;padding:1px 8px;
  font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.deck-name-row{margin-top:8px;font-weight:600;font-size:13px;line-height:1.25}
.deck-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.tag{font-size:10px;background:var(--glass-2);border:1px solid var(--stroke);border-radius:6px;padding:1px 6px;color:var(--muted)}

/* center: edit (deck zones) */
.zone{margin-bottom:16px}
.zone-head{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);margin-bottom:8px}
.zc{background:var(--glass-2);border-radius:8px;padding:0 8px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.zone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;min-height:58px;
  border:1px dashed var(--stroke);border-radius:12px;padding:8px;transition:background .1s,border-color .1s}
.zone-grid.drop-hi{border-color:var(--accent);border-style:solid;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.zc-card,.card[draggable]{cursor:grab}
.zc-card:active,.card[draggable]:active{cursor:grabbing}
.zc-card{aspect-ratio:.686;border-radius:6px;overflow:hidden;background:#11111e;border:1px solid var(--stroke);cursor:pointer;transition:box-shadow .1s,transform .1s}
.zc-card img{width:100%;height:100%;object-fit:cover;display:block}
.zc-card:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--accent)}  /* L-clic duplique, clic droit retire */
.edit-wip{font-size:12px;text-align:center;padding:8px}
/* per-zone counters: one colored box per fine card category */
.zc-break .bc{font-style:normal;font-variant-numeric:tabular-nums;font-size:11px;font-weight:800;
  padding:1px 7px;border-radius:6px;margin-left:4px;border:1px solid rgba(255,255,255,.14)}
.bc-normal {background:#c4991c;color:#211806}   /* monstre normal — jaune foncé */
.bc-effect {background:#df7a2c;color:#1f0e02}   /* monstre à effet — orange */
.bc-ritual {background:#4a78d8;color:#fff}      /* monstre rituel — bleu */
.bc-spell  {background:#28a96a;color:#fff}      /* magie — vert */
.bc-trap   {background:#a657cf;color:#fff}      /* piège — violet */
.bc-fusion {background:#6a2fa6;color:#fff}      /* fusion — violet foncé */
.bc-synchro{background:#dde1ea;color:#1b1d26}   /* synchro — blanc/gris */
.bc-xyz    {background:#16161d;color:#e8eaf2}   /* xyz — noir */
.bc-link   {background:#21459a;color:#fff}      /* lien — bleu foncé */
.bc-other  {background:var(--glass-2);color:var(--muted)}
.edit-tools{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:nowrap;margin:2px 0 12px}
.edit-tools .gear{margin-left:0}  /* .gear has margin-left:auto (header) — undo it here so they pack tight */
.tool-select{padding:7px 10px;font-size:12px}
#deck-clear:hover{color:#ff6b6b;border-color:#ff6b6b;background:color-mix(in srgb,#ff6b6b 14%,transparent)}
.btn.dirty::after{content:"•";margin-left:5px;color:#fff}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(8,8,16,.93);
  border:1px solid var(--stroke-2);color:var(--text);padding:10px 18px;border-radius:12px;font-size:13px;
  opacity:0;pointer-events:none;transition:.18s;z-index:80}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* right: pool */
.col-right{display:flex;flex-direction:column;gap:10px}
.pool-top{display:flex;gap:8px;align-items:center}
.pool-sub{display:flex;gap:8px;align-items:center}
.pool-sub #f-sort{flex:1}
#pool-filter{flex:0 0 auto;margin:0}
#pool-filters{display:flex;flex-direction:column;gap:12px}
#pool-filters .dim-content{max-height:48vh}
.pager{flex-wrap:wrap}

/* import overlay reuses .modal */
.import-modal{width:470px;max-width:100%}
.tool-modal{width:600px;max-width:100%}
.tool-modal h2{font-size:16px;margin-bottom:6px}
.tool-body{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,monospace;font-size:12px;
  max-height:62vh;overflow:auto;background:var(--glass);border:1px solid var(--stroke);border-radius:10px;padding:12px;margin-top:8px}
.exit-modal{width:460px;max-width:100%}
.exit-modal p{margin-bottom:18px}
.exit-actions{flex-wrap:wrap}
.import-modal h2{font-size:20px;margin-bottom:16px}

/* settings : dedicated full page (a third view), not a popup */
.settings-top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.settings-top h2{font-size:20px}
.settings-page{max-width:560px}
.settings-apply{margin-top:6px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.modal .row{display:flex;gap:12px;align-items:center}
.set-sep{border:none;border-top:1px solid var(--stroke);margin:6px 0 16px}
.web-check{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;
  font-size:13px;color:var(--text)}
.web-check input{width:auto}
.web-allow{display:flex;flex-direction:column;gap:8px;margin:4px 0}
.web-allow.disabled{opacity:.4;pointer-events:none}
.web-domains{display:flex;flex-wrap:wrap;gap:6px}
.web-dom{display:inline-flex;align-items:center;gap:5px;background:var(--glass);
  border:1px solid var(--stroke);border-radius:8px;padding:3px 8px;font-size:12px}
.web-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0}
.web-del:hover{color:var(--forbidden)}
.web-add-row input{flex:1;border-radius:9px;padding:7px 10px;font-size:13px;
  background:var(--glass);border:1px solid var(--stroke);color:var(--text)}
.import-modal textarea{width:100%;min-height:150px;border-radius:12px;padding:12px;font-family:ui-monospace,monospace;
  font-size:13px;background:var(--glass);border:1px solid var(--stroke);resize:vertical}
.import-modal input[type=file]{font-size:12px}

/* ===================== Paramètres (refonte : side-nav + panneaux) ===================== */
.set-head{display:flex;align-items:center;gap:14px;margin:4px 0 18px;padding:0 4px}
.set-head h2{font-family:var(--font-display);font-size:22px}
.set-head .ghost{display:inline-flex;align-items:center;gap:7px}
.set-head .ghost svg{width:15px;height:15px}
.set-body{display:grid;grid-template-columns:230px 1fr;gap:calc(26px*var(--sp));align-items:start;
  min-height:calc(100vh - 240px);padding:0 4px 16px}
.set-nav{display:flex;flex-direction:column;gap:4px}
.set-nav-item{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:10px;cursor:pointer;
  color:var(--muted);font-size:14px;font-family:inherit;text-align:left;background:none;border:1px solid transparent;transition:all .14s}
.set-nav-item svg{width:18px;height:18px}
.set-nav-item:hover{color:var(--text);background:var(--glass-2)}
.set-nav-item.on{color:var(--text);background:color-mix(in oklch,var(--acc1) 14%,transparent);
  border-color:color-mix(in oklch,var(--acc1) 35%,transparent)}
.set-nav-item:focus-visible{outline:2px solid var(--acc1);outline-offset:2px}
.set-panel{border:1px solid var(--line);border-radius:14px;background:oklch(0.19 0.022 270 / .55);padding:26px 30px;min-height:340px}
.set-pane h3{font-family:var(--font-display);font-size:21px;margin-bottom:3px}
.set-sub{font-family:var(--mono);font-size:12px;color:var(--faint);margin-bottom:18px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0;border-top:1px solid var(--line)}
.set-row:first-of-type{border-top:none}
.set-row .lbl{min-width:0}
.set-row .lbl b{font-size:14.5px;display:block}
.set-row .lbl span{font-size:12.5px;color:var(--muted);display:block;margin-top:2px;max-width:430px}
.set-row .ctrl{flex-shrink:0;display:flex;align-items:center;gap:10px}
.set-row .ctrl select,.set-row .ctrl input[type=number]{min-width:170px}
/* accent duo chips */
.acc-chips{display:flex;gap:8px}
.acc-chip{width:54px;height:30px;border-radius:8px;border:1px solid var(--line2);cursor:pointer;padding:0;
  box-shadow:0 1px 3px #0006;transition:transform .12s,box-shadow .12s}
.acc-chip:hover{transform:translateY(-1px)}
.acc-chip.on{box-shadow:0 0 0 2px var(--txt),0 0 calc(10px*var(--glow)) color-mix(in oklch,var(--acc1) 55%,transparent)}
.acc-chip:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
/* range néon */
.rng{-webkit-appearance:none;appearance:none;width:220px;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--acc2),var(--acc1));outline:none;cursor:pointer}
.rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--txt);border:none;box-shadow:0 0 calc(10px*var(--glow)) color-mix(in oklch,var(--acc1) 60%,transparent)}
.rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--txt);border:none;
  box-shadow:0 0 calc(10px*var(--glow)) color-mix(in oklch,var(--acc1) 60%,transparent)}
.rng:focus-visible{outline:2px solid var(--acc1);outline-offset:4px}
.rng-val{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:42px;text-align:right}
.set-apply-bar{display:flex;align-items:center;gap:14px;padding:14px 6px 4px;border-top:1px solid var(--line);margin-top:4px}
.set-apply-bar .grow{flex:1}
@media (max-width:760px){
  .set-body{grid-template-columns:1fr}
  .set-nav{flex-direction:row;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.set-nav-item,.acc-chip{transition:none}.acc-chip:hover{transform:none}}

/* ===================== Assistant Claude (slide-over) ===================== */
.fab{position:fixed;bottom:22px;right:22px;width:54px;height:54px;border-radius:50%;border:1px solid var(--stroke-2);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:23px;cursor:pointer;z-index:85;
  box-shadow:0 10px 26px -8px #000c;display:flex;align-items:center;justify-content:center;transition:transform .12s}
.fab:hover{transform:translateY(-2px)}
.assistant{position:fixed;top:0;right:0;bottom:0;width:390px;max-width:92vw;z-index:86;display:flex;flex-direction:column;
  background:var(--panel);backdrop-filter:blur(22px);border-left:1px solid var(--stroke-2);box-shadow:-12px 0 40px #0008;
  transform:translateX(100%);transition:transform .22s ease}
.assistant.open{transform:translateX(0)}
.assistant-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--stroke)}
.assistant-title{font-weight:700}
.assistant-cost{margin-left:auto;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.assistant .close{position:static;font-size:24px;line-height:1;background:none;border:none;color:var(--muted);cursor:pointer}
.chat-log{flex:1;overflow-y:scroll;padding:14px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:var(--stroke-2) transparent}
.chat-log::-webkit-scrollbar{width:10px}
.chat-log::-webkit-scrollbar-thumb{background:var(--stroke-2);border-radius:6px;border:2px solid transparent;background-clip:content-box}
.chat-log::-webkit-scrollbar-track{background:transparent}
.chat-hello{font-size:13px;text-align:center;padding:10px}
.chat-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;justify-content:center}
.chat-suggest button{font-size:12px;background:var(--glass);border:1px solid var(--stroke);color:var(--muted);
  border-radius:9px;padding:5px 9px;cursor:pointer}
.chat-suggest button:hover{background:var(--glass-2);color:var(--text)}
.chat-reset{background:none;border:none;color:var(--muted);cursor:pointer;font-size:17px;line-height:1}
.chat-reset:hover{color:var(--text)}
.chat-working{padding-top:6px;padding-bottom:6px;opacity:.85}
.chat-pending{display:inline-block;width:30px;text-align:left;color:var(--faint);font-size:18px;line-height:1}
.chat-pending::after{content:"·";animation:pending 1.1s steps(1,end) infinite}
@keyframes pending{0%{content:"·"}33%{content:"· ·"}66%{content:"· · ·"}}
.msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--glass-2);border:1px solid var(--stroke);border-bottom-left-radius:4px}
.tool-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.tool-row:empty{display:none}
.msg.bot .tool-chip{display:inline-block;font-size:11px;color:var(--muted);background:var(--glass);
  border:1px solid var(--stroke);border-radius:8px;padding:2px 8px;cursor:pointer;font-family:inherit}
.msg.bot .tool-chip:hover{background:var(--glass-2);color:var(--text);border-color:var(--accent)}
.msg.bot .bot-text{margin-top:2px}
.msg.bot .bot-text.err{color:var(--forbidden)}
/* rendered Markdown inside an assistant bubble (md.js) */
.bot-text.md{white-space:normal}
.bot-text.md>*:first-child{margin-top:0}
.bot-text.md>*:last-child{margin-bottom:0}
.bot-text.md+.bot-text.md{margin-top:8px}
.bot-text.md p{margin:6px 0}
.bot-text.md .md-h{margin:10px 0 4px;line-height:1.25;font-weight:700}
.bot-text.md h1.md-h{font-size:16px}
.bot-text.md h2.md-h{font-size:15px}
.bot-text.md h3.md-h,.bot-text.md h4.md-h,.bot-text.md h5.md-h,.bot-text.md h6.md-h{font-size:13.5px}
.bot-text.md ul,.bot-text.md ol{margin:6px 0;padding-left:20px}
.bot-text.md li{margin:2px 0}
.bot-text.md code{background:var(--glass);border:1px solid var(--stroke);border-radius:5px;padding:0 4px;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace}
.bot-text.md pre{background:var(--glass);border:1px solid var(--stroke);border-radius:8px;padding:8px 10px;overflow-x:auto;margin:6px 0}
.bot-text.md pre code{background:none;border:none;padding:0}
.bot-text.md blockquote{margin:6px 0;padding:2px 0 2px 10px;border-left:3px solid var(--stroke-2);color:var(--muted)}
.bot-text.md a{color:var(--accent);text-decoration:underline}
.bot-text.md hr{border:none;border-top:1px solid var(--stroke);margin:8px 0}
.md-tablewrap{overflow-x:auto;margin:6px 0;border:1px solid var(--stroke);border-radius:8px}
.md-table{border-collapse:collapse;font-size:12px;width:100%}
.md-table th,.md-table td{border:1px solid var(--stroke);padding:4px 8px;text-align:left;vertical-align:top}
.md-table th{background:var(--glass);font-weight:600;white-space:nowrap}
.proposal{align-self:stretch;border:1px solid var(--accent);border-radius:11px;padding:11px;
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
.proposal.applied{border-color:var(--good)}
.proposal.ignored{opacity:.55}
.prop-head{font-weight:700;font-size:12px;margin-bottom:5px}
.prop-why{font-size:12.5px;line-height:1.4;margin-bottom:8px}
.prop-diff{font-size:12px;display:flex;flex-direction:column;gap:2px;margin-bottom:9px;max-height:170px;overflow:auto}
.prop-diff .add{color:var(--good)}
.prop-diff .rem{color:var(--forbidden)}
.prop-moves{font-size:12.5px;display:flex;flex-direction:column;gap:3px;margin-bottom:9px;max-height:200px;overflow:auto}
.prop-moves .mv b{font-weight:600}
.prop-moves .mv-p2{font-style:normal;font-size:10px;color:var(--accent-2);border:1px solid var(--stroke-2);border-radius:5px;padding:0 4px;margin-right:2px}
.prop-combo{margin-bottom:7px}
.prop-combo>b{font-size:12px}
.prop-combo .cb-when{font-size:11px;margin:1px 0 2px}
.prop-combo .cb-steps{font-size:12px;line-height:1.5}
.prop-combo .cb-step i{font-style:normal;color:var(--accent-2);font-size:10.5px}
.prop-combo .cb-hint{color:var(--muted);font-size:10.5px}
#profview-out{max-height:60vh;overflow:auto;margin:4px 0}
#profview-out .prop-diff{max-height:none}
.prop-actions{display:flex;gap:8px;flex-wrap:wrap}
.prop-actions .btn,.prop-actions .ghost{padding:7px 12px;font-size:12px}
button.btn.danger{background:var(--forbidden);border-color:var(--forbidden)}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--stroke)}
.chat-input textarea{flex:1;resize:none;border-radius:10px;padding:9px 11px;font-size:13px;background:var(--glass);border:1px solid var(--stroke)}

@media(max-width:1100px){
  .shell{grid-template-columns:1fr;height:auto}
  .col-left,.col-right,.col-center{height:auto;overflow:visible}
  .col-resize{display:none}  /* single-column stack: nothing to resize */
}
@media(max-width:680px){#modal-body{grid-template-columns:1fr}}

/* ===================== Analyse de deck (stats + main d'ouverture) ===================== */
.stats-modal{width:760px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:6px}
.stat-block h4{font-size:13px;color:var(--muted);font-weight:600;margin:0 0 8px}
.stat-row{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:12px}
.stat-k{flex:0 0 96px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-bar{flex:1;height:8px;border-radius:6px;background:var(--glass-2);overflow:hidden}
.stat-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.stat-n{flex:0 0 42px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.hand-sim{margin-top:18px;border-top:1px solid var(--stroke);padding-top:14px}
.hand-cards{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.hand-card{width:88px;display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--muted);text-align:center}
.hand-card img{width:88px;height:128px;object-fit:cover;border-radius:8px;border:1px solid var(--stroke)}
.hand-card span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:680px){.stat-grid{grid-template-columns:1fr}}

/* ===================== Synergies ===================== */
.synergy{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Synergy results land in the right-hand pool, under a banner with a clear button. */
.pool-banner{display:flex;align-items:center;gap:8px;margin:4px 0 10px;padding:7px 10px;border-radius:10px;background:var(--glass-2);border:1px solid var(--accent);font-size:13px}
.pool-banner.hidden{display:none}
.pool-banner span{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.banner-x{background:none;border:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.banner-x:hover{color:#fff}

/* Card detail is a non-blocking floating panel (docked left): no dim/blur, the rest of
   the app — notably the synergy pool on the right — stays visible and usable. */
#overlay{background:none;backdrop-filter:none;pointer-events:none;justify-content:center}
#overlay .modal{pointer-events:auto;box-shadow:0 16px 50px #000c;padding-top:30px}
/* Drag handle: a grip bar across the top of the card panel. */
.modal-drag{position:absolute;top:0;left:0;right:0;height:26px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;letter-spacing:3px;cursor:move;border-radius:20px 20px 0 0;z-index:1;user-select:none;touch-action:none}
.modal-drag:hover{background:var(--glass-2);color:var(--muted)}

/* ===================== Filtre par tag (grille de decks) ===================== */
.tag-filter{display:flex;gap:7px;flex-wrap:wrap;margin:6px 0 14px}
.tag-chip{font-size:12px;background:var(--glass);border:1px solid var(--stroke);border-radius:999px;padding:4px 11px;color:var(--muted);cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:5px}
.tag-chip:hover{background:var(--glass-2);color:var(--text)}
.tag-chip.on{border-color:var(--accent);color:#fff;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--accent)}
.tag-chip i{font-style:normal;font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.tag-chip.on i{color:#cdd2ff}
.tag-chip.clear{border-style:dashed}
.manage-empty-filter{padding:24px 4px}

/* ===================== Chips de filtres actifs ===================== */
.active-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 8px}
.active-filters.hidden{display:none}
.af-count{font-size:11px;color:var(--muted);margin-right:2px}
.af-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--glass-2);border:1px solid var(--stroke);border-radius:999px;padding:3px 10px;color:var(--text);cursor:pointer;transition:.12s}
.af-chip:hover{border-color:var(--forbidden)}
.af-chip i{font-style:normal;font-size:10px;color:var(--faint)}
.af-chip:hover i{color:var(--forbidden)}
.af-clear{font-size:11px;background:none;border:none;color:var(--accent);cursor:pointer;padding:2px 4px}
.af-clear:hover{text-decoration:underline}

/* ===================== Mat de playtest (goldfishing) ===================== */
.mat-overlay{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 50% 0,#10142a,#070710 72%)}
.mat-overlay.hidden{display:none}
.mat-toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--stroke);background:var(--panel)}
.mat-title{font-weight:700;letter-spacing:-.01em;margin-right:6px}
.mat-toolbar .grow{flex:1}
.mat-hint{font-size:12px;white-space:nowrap}
.mat-g2{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.mat-toolbar .close{font-size:24px;line-height:1;background:none;border:none;color:var(--muted);cursor:pointer}

/* Le mat héberge le terrain STANDARD .df (absolu) → conteneur positionné, sans scroll. */
.mat-body{flex:1;position:relative;overflow:hidden;padding:0;min-height:0}
/* Terrain du mat : pas de panneau de prompt → on réserve juste la place de la main en bas. */
#mat-stage{inset:6px 12px 150px 12px}
/* cartes glissables (zones + main) */
.df .dcard[draggable],.df .dback[draggable],.df-hand .hcard[draggable]{cursor:grab}
.df .dcard[draggable]:active,.df .dback[draggable]:active,.df-hand .hcard[draggable]:active{cursor:grabbing}
/* surlignage de la cible de dépôt */
.dz.over{border-style:solid;border-color:var(--acc1);box-shadow:0 0 0 2px var(--acc1),inset 0 0 26px color-mix(in oklch,var(--acc1) 30%,transparent)}
.df-hand.over{filter:brightness(1.1)}
/* jeton (pas d'illustration) */
.dtok{position:absolute;inset:4px;border-radius:6px;display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--dim);
  background:linear-gradient(160deg,oklch(0.34 0.03 265),oklch(0.24 0.02 270));border:1px dashed var(--line2)}
.dtok::after{content:"JETON"}
/* contrôles de PV intégrés au HUD .df-lp du mat */
.df-lp .mat-lp{margin:6px 0 0;flex-wrap:wrap;gap:5px;max-width:250px}
.df-lp .mat-lp-step{padding:4px 7px;font-size:11px}
.df-lp .mat-lp-in{width:78px;padding:4px;font-size:13px}
.df-lp .mat-pick{padding:3px 8px;font-size:11px}
.mat-playerbar{display:flex;align-items:center;gap:14px;width:100%;max-width:1120px;margin-bottom:8px}
.mat-deckname{font-weight:600}
.mat-lp{display:flex;align-items:center;gap:6px;margin-left:auto}
.mat-lp-in{width:92px;text-align:center;background:var(--glass);border:1px solid var(--stroke);color:var(--text);border-radius:8px;padding:6px;font-size:15px;font-weight:700}
.mat-lp-step{padding:6px 8px;font-size:12px}

.mat-board{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:8px}
.mat-row{display:flex;gap:14px;align-items:flex-start;justify-content:center}
.mat-exmon{gap:10px;min-height:0}
.mat-zones{display:flex;gap:8px;flex:1;justify-content:center}
.mat-fieldcol{width:78px;display:flex;justify-content:center;flex:0 0 auto}
.mat-pilecol{display:flex;gap:8px;flex:0 0 auto}

.mat-slot{width:78px;height:110px;flex:0 0 auto;border:1.5px dashed var(--stroke-2);border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.02);position:relative}
.mat-slot.full{border-style:solid;border-color:transparent;background:none}
.mat-slot.over{border-color:var(--accent);background:rgba(126,141,255,.14)}
.mat-zlabel{font-size:10px;color:var(--faint);text-align:center;text-transform:uppercase;letter-spacing:.06em}

.mat-card{width:78px;height:110px;border-radius:6px;cursor:grab;position:relative;box-shadow:0 2px 8px #0008}
.mat-card img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
.mat-card.def{transform:rotate(90deg) scale(.72);transform-origin:center}
.mat-card.down .mat-back,.mat-pile-face .mat-back{width:100%;height:100%;border-radius:6px;
  background:linear-gradient(135deg,#5a3a86,#3a2360);border:1px solid #7a55b0;box-shadow:inset 0 0 14px #0007}
.mat-card .mat-tok,.mat-pile-face .mat-tok{width:100%;height:100%;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3a3f55,#23263a);border:1px solid var(--stroke-2);color:var(--muted);font-size:12px;text-align:center}
.mat-ctr{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:11px;background:var(--limited);color:#1a1400;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 4px #0008}

.mat-pile{width:78px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.mat-pile-face{width:78px;height:110px;border-radius:6px;border:1.5px dashed var(--stroke-2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.02)}
.mat-pile-face img{width:100%;height:100%;object-fit:cover}
.mat-pile.over .mat-pile-face{border-color:var(--accent)}
.mat-count{position:absolute;top:4px;right:4px;background:#000a;color:#fff;border-radius:9px;font-size:11px;font-weight:700;padding:1px 6px}
.mat-pile-name{font-size:11px;color:var(--muted)}

.mat-hand{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:114px;margin-top:8px;padding:8px;
  border:1.5px dashed var(--stroke);border-radius:12px;width:100%;max-width:1120px}
.mat-hand.over{border-color:var(--accent);background:rgba(126,141,255,.1)}
.mat-hand-empty{align-self:center}

.mat-menu{position:fixed;z-index:90;border-radius:10px;padding:5px;display:flex;flex-direction:column;min-width:196px;box-shadow:0 12px 40px #000b}
.mat-menu button{background:none;border:none;color:var(--text);text-align:left;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px}
.mat-menu button:hover{background:var(--glass-2)}
.mat-menu-sep{height:1px;background:var(--stroke);margin:4px 2px}

#mat-viewer{z-index:80}
.mat-viewer-modal{width:880px}
.mat-viewer-body{display:flex;flex-wrap:wrap;gap:8px;max-height:64vh;overflow:auto}
.mat-viewer-body .mat-card{cursor:context-menu}

/* 2-player sparring (Phase 3) */
.mat-side{width:100%;max-width:1120px;border-radius:12px;padding:6px 6px 2px;transition:box-shadow .15s,opacity .15s}
.mat-side.active{box-shadow:0 0 0 1.5px var(--accent),0 0 22px -8px var(--accent)}
.mat-body.mat-two .mat-side:not(.active){opacity:.82}
.mat-divider{width:100%;max-width:1120px;height:0;border-top:1px dashed var(--stroke-2);margin:10px 0;position:relative}
.mat-divider::after{content:"⚔";position:absolute;left:50%;top:-12px;transform:translateX(-50%);
  background:var(--panel);color:var(--muted);font-size:14px;padding:0 8px}
.mat-pick{padding:5px 10px;font-size:12px}
.mat-pick.on{color:var(--text);border-color:var(--accent)}
#mat-opp{max-width:200px}

/* ===================== Menu principal (écran d'accueil) ===================== */
body.on-menu .fab{display:none}     /* Paramètres/Quitter restent dans le header (gear/quit) */
#view-play{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 120px)}
#view-menu{display:flex;flex-direction:column;gap:calc(22px*var(--sp));min-height:calc(100vh - 120px);
  max-width:1180px;margin:0 auto;padding:8px 6px 24px;justify-content:center}
.menu-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;width:100%;max-width:480px}
.menu-sub-title{font-weight:800;font-size:30px;letter-spacing:-.01em;line-height:1.1}
.menu-tagline{color:var(--muted);font-size:14px;margin:2px 0 22px}
.menu-nav{display:flex;flex-direction:column;gap:10px;width:100%}
.menu-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--glass);border:1px solid var(--stroke);border-radius:14px;padding:15px 18px;color:var(--text);
  font-family:inherit;transition:transform .14s,border-color .14s,background .14s,box-shadow .14s}
.menu-item:hover,.menu-item:focus-visible{background:var(--glass-2);border-color:var(--accent);
  transform:translateY(-2px);box-shadow:0 12px 30px -14px var(--accent);outline:none}
.menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.menu-item:active{transform:translateY(0)}
.mi-icon{font-size:24px;width:30px;text-align:center;flex:0 0 auto}
.mi-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.mi-label{font-weight:700;font-size:16px}
.mi-sub{color:var(--muted);font-size:12px}
.mi-arrow{color:var(--faint);font-size:20px;transition:transform .14s,color .14s}
.menu-item:hover .mi-arrow,.menu-item:focus-visible .mi-arrow{transform:translateX(3px);color:var(--accent)}
/* staggered entrance (re-triggered via .enter in showMenu) */
.menu-nav.enter .menu-item{animation:menuItemIn .32s cubic-bezier(.2,.7,.3,1) backwards}
.menu-nav.enter .menu-item:nth-child(1){animation-delay:.03s}
.menu-nav.enter .menu-item:nth-child(2){animation-delay:.08s}
.menu-nav.enter .menu-item:nth-child(3){animation-delay:.13s}
.menu-nav.enter .menu-item:nth-child(4){animation-delay:.18s}
@keyframes menuItemIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ----- Accueil bento (porté du design DuelForge) ----- */
svg.ic{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.menu-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-shrink:0}
.menu-h1{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1;text-transform:uppercase}
.menu-h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--acc1)}
.menu-tag{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.02em}
.menu-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:calc(16px*var(--sp));min-height:0;max-height:62vh}
.tile{position:relative;border:1px solid var(--line);border-radius:16px;text-align:left;cursor:pointer;overflow:hidden;
  background:linear-gradient(160deg,var(--panel2),var(--panel));padding:calc(22px*var(--sp));color:var(--text);font-family:inherit;
  display:flex;flex-direction:column;justify-content:space-between;transition:transform .16s,border-color .16s,box-shadow .16s}
.tile:hover{transform:translateY(-4px);border-color:var(--acc1);
  box-shadow:0 0 0 1px color-mix(in oklch,var(--acc1) 40%,transparent),0 18px 44px #0007}
.tile:focus-visible{outline:none;transform:translateY(-4px);border-color:var(--acc1);box-shadow:0 0 0 2px var(--acc1),0 18px 44px #0007}
.tile.mg:hover{border-color:var(--acc2);box-shadow:0 0 0 1px color-mix(in oklch,var(--acc2) 40%,transparent),0 18px 44px #0007}
.tile.mg:focus-visible{border-color:var(--acc2);box-shadow:0 0 0 2px var(--acc2),0 18px 44px #0007}
.tile.big{grid-row:1 / span 2;grid-column:1;border-color:color-mix(in oklch,var(--acc1) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in oklch,var(--acc1) 28%,transparent),0 18px 50px color-mix(in oklch,var(--acc1) 22%,transparent);
  background:linear-gradient(165deg,color-mix(in oklch,var(--acc1) 22%,var(--panel)),var(--bg2))}
.tile.big::after{content:"";position:absolute;width:260px;height:260px;right:-80px;bottom:-80px;border-radius:50%;
  background:radial-gradient(circle,var(--acc1),transparent 65%);opacity:calc(.26*var(--glow));pointer-events:none}
.tile-row{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.tile-ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in oklch,var(--acc1) 14%,transparent);color:var(--acc1);border:1px solid color-mix(in oklch,var(--acc1) 30%,transparent)}
.tile.mg .tile-ico{background:color-mix(in oklch,var(--acc2) 14%,transparent);color:var(--acc2);border-color:color-mix(in oklch,var(--acc2) 30%,transparent)}
.tile-ico svg{width:24px;height:24px}
.tile .num{font-family:var(--mono);color:var(--faint);font-size:12px}
.tile-body{margin-top:auto;position:relative;z-index:1}
.tile-body b{display:block;font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.01em}
.tile.big .tile-body b{font-size:clamp(26px,3vw,32px)}
.tile-body i{font-style:normal;font-size:13px;color:var(--muted);display:block;margin-top:5px}
.tile-stat{font-family:var(--mono);font-size:11.5px;color:var(--acc1);margin-top:12px;display:flex;align-items:center;gap:7px}
.tile.mg .tile-stat{color:var(--acc2)}
.tile.big .tile-cta{margin-top:18px}
.soon-pill{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:6px 11px;border-radius:8px;color:var(--acc1);border:1px solid color-mix(in oklch,var(--acc1) 45%,transparent);
  background:color-mix(in oklch,var(--acc1) 10%,transparent)}
.menu-grid.enter .tile{animation:menuItemIn .34s cubic-bezier(.2,.7,.3,1) backwards}
.menu-grid.enter .tile:nth-child(1){animation-delay:.03s}
.menu-grid.enter .tile:nth-child(2){animation-delay:.07s}
.menu-grid.enter .tile:nth-child(3){animation-delay:.11s}
.menu-grid.enter .tile:nth-child(4){animation-delay:.15s}
.menu-grid.enter .tile:nth-child(5){animation-delay:.19s}
@media (max-width:900px){
  .menu-grid{grid-template-columns:1fr;grid-template-rows:none;max-height:none}
  .tile.big{grid-row:auto;grid-column:auto}
  #view-menu{justify-content:flex-start}
}

/* ----- Coquilles "Bientôt" / Laboratoire (placeholder) ----- */
.soon-view{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 120px)}
.soon-card{max-width:540px;text-align:center;padding:34px 34px 30px;border-radius:18px}
.soon-ico{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;margin:0 auto 18px;
  background:color-mix(in oklch,var(--acc1) 14%,transparent);color:var(--acc1);border:1px solid color-mix(in oklch,var(--acc1) 32%,transparent)}
.soon-ico svg{width:30px;height:30px}
.soon-card h2{font-family:var(--font-display);font-size:28px;margin-bottom:12px}
.soon-card p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:22px}
.soon-card .btn.ghost{display:inline-flex;align-items:center;gap:7px}
.soon-card .btn.ghost svg{width:15px;height:15px}

/* "Mode Jouer" banner over the deck grid */
.play-banner{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px 14px;
  background:var(--glass-2);border:1px solid var(--accent);border-radius:12px;font-size:13px}
.play-banner .grow{flex:1}
.pb-icon{font-size:18px}

@media (prefers-reduced-motion:reduce){
  .menu-item,.mi-arrow,.logo,.tile{transition:none}
  .menu-nav.enter .menu-item,.menu-grid.enter .tile{animation:none}
  .menu-item:hover,.menu-item:focus-visible{transform:none}
  .tile:hover,.tile:focus-visible{transform:none}
}

/* ===================== Laboratoire (Phase 3 — projets sans limites) ===================== */
#view-lab{height:calc(100vh - 104px);min-height:460px}
.lab-body{display:grid;grid-template-columns:252px 1fr 358px;gap:1px;background:var(--line);height:100%;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lab-col{background:var(--bg);display:flex;flex-direction:column;min-height:0}

/* --- rail projets --- */
.lab-proj-head{padding:16px 16px 12px;display:flex;align-items:center;justify-content:space-between}
.lab-proj-head h3{font-family:var(--font-display);font-size:15px;letter-spacing:.02em}
.lab-new{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:700;cursor:pointer;
  color:var(--acc1);border:1px solid color-mix(in oklch,var(--acc1) 40%,transparent);padding:6px 9px;border-radius:7px;background:none;transition:all .13s}
.lab-new:hover{background:var(--acc1);color:oklch(0.16 0.02 250)}
.lab-new svg{width:13px;height:13px}
.lab-psearch{margin:0 14px 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:var(--panel)}
.lab-psearch svg{width:14px;height:14px;color:var(--faint)}
.lab-psearch input{background:none;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:11.5px;width:100%;padding:0}
.proj-list{flex:1;overflow:auto;padding:0 10px 12px;display:flex;flex-direction:column;gap:3px}
.proj-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:all .13s}
.proj-item:hover{background:var(--glass-2)}
.proj-item.sel{background:color-mix(in oklch,var(--acc1) 13%,transparent);border-color:color-mix(in oklch,var(--acc1) 35%,transparent)}
.proj-item:focus-visible{outline:2px solid var(--acc1);outline-offset:1px}
.proj-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;box-shadow:0 0 calc(8px*var(--glow)) currentColor}
.proj-meta{min-width:0;flex:1}
.proj-meta b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-meta span{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.proj-foot{padding:12px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--faint);display:flex;align-items:center;gap:7px}
.proj-foot svg{width:14px;height:14px}
.proj-empty{font-family:var(--mono);font-size:11px;color:var(--faint);padding:14px 12px;text-align:center}
.proj-empty.wide{grid-column:1/-1;padding:40px 16px}

/* --- workspace --- */
.lab-work{min-width:0}
.lab-work-head{padding:18px 24px 0;border-bottom:1px solid var(--line)}
.lab-title-row{display:flex;align-items:center;gap:12px}
.lab-title-row .pico{width:12px;height:12px;border-radius:3px;flex-shrink:0;box-shadow:0 0 calc(10px*var(--glow)) currentColor}
.lab-title-row h2{font-family:var(--font-display);font-size:22px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-title-row .grow{flex:1}
.lab-edit{color:var(--faint);cursor:pointer;background:none;border:none;padding:5px;border-radius:7px;display:inline-flex;transition:all .13s}
.lab-edit:hover{color:var(--text);background:var(--glass-2)}
.lab-edit.danger:hover{color:var(--forbidden)}
.lab-edit svg{width:15px;height:15px}
.lab-desc{font-size:13px;color:var(--muted);margin:8px 0 14px;max-width:680px;cursor:text}
.lab-desc i{color:var(--faint)}
.lab-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.lab-chip{font-family:var(--mono);font-size:11px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;gap:6px}
.lab-chip.acc{color:var(--acc1);border-color:color-mix(in oklch,var(--acc1) 40%,transparent);background:color-mix(in oklch,var(--acc1) 9%,transparent)}
.lab-chip svg{width:12px;height:12px}
.lab-tabs{display:flex;gap:4px}
.lab-tab{font-family:var(--mono);font-size:12px;padding:11px 16px;border:none;background:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .14s;margin-bottom:-1px}
.lab-tab:hover{color:var(--text)}
.lab-tab.on{color:var(--acc1);border-bottom-color:var(--acc1)}
.lab-tab:focus-visible{outline:2px solid var(--acc1);outline-offset:-2px;border-radius:6px}
.lab-pane{flex:1;overflow:auto;padding:18px 24px 24px;min-height:0}

.lab-blank{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:30px}
.lab-blank .ico.big svg{width:46px;height:46px;color:var(--acc1)}
.lab-blank h2{font-family:var(--font-display);font-size:24px}
.lab-blank p{color:var(--muted);font-size:14px;max-width:420px;line-height:1.6;margin-bottom:8px}

/* cards pane */
.lab-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lab-csearch{flex:1;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;padding:10px 13px;background:var(--panel)}
.lab-csearch svg{width:15px;height:15px;color:var(--faint)}
.lab-csearch input{background:none;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:12px;width:100%;padding:0}
.lab-add-results{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);max-height:230px;overflow:auto}
.lab-add-item{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:9px;background:var(--glass);color:var(--text);cursor:pointer;font-size:12.5px;transition:all .13s}
.lab-add-item:hover:not(:disabled){border-color:var(--acc1);background:color-mix(in oklch,var(--acc1) 12%,transparent)}
.lab-add-item img{width:26px;height:38px;border-radius:4px;object-fit:cover;flex-shrink:0}
.lab-add-item span{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-add-item .add-tag{font-style:normal;color:var(--acc1);font-weight:700;font-family:var(--mono)}
.lab-add-item .in-tag{font-style:normal;color:var(--faint);font-family:var(--mono);font-size:10px}
.lab-add-item:disabled{opacity:.55;cursor:default}
.lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:13px}
.lab-grid .card{aspect-ratio:.686}
.lab-card-rm{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:none;cursor:pointer;z-index:3;
  background:oklch(0.16 0.02 260 / .82);color:#fff;font-size:14px;line-height:1;display:none;align-items:center;justify-content:center}
.card:hover .lab-card-rm{display:flex}
.lab-card-rm:hover{background:var(--forbidden)}

/* synergy pane */
.syn-loading{font-family:var(--mono);font-size:13px;color:var(--muted);padding:30px;text-align:center}
.lab-warn{font-family:var(--mono);font-size:11px;color:var(--limited);margin-bottom:12px}
.syn-graph{position:relative;height:340px;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:22px;
  background:radial-gradient(600px 360px at 50% 40%,oklch(0.22 0.03 250),var(--bg))}
.syn-graph svg.edges{position:absolute;inset:0;width:100%;height:100%}
.syn-edge{stroke:color-mix(in oklch,var(--acc1) 50%,transparent);stroke-width:1.4;fill:none}
.syn-edge.strong{stroke:var(--acc1);stroke-width:2;filter:drop-shadow(0 0 calc(4px*var(--glow)) var(--acc1))}
.syn-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2}
.syn-node .nd{width:52px;height:52px;border-radius:13px;border:1.5px solid var(--acc1);display:grid;place-items:center;
  background:linear-gradient(160deg,oklch(0.3 0.06 220),oklch(0.24 0.04 250));box-shadow:0 0 calc(16px*var(--glow)) color-mix(in oklch,var(--acc1) 35%,transparent)}
.syn-node.hub .nd{border-color:var(--acc2);box-shadow:0 0 calc(26px*var(--glow)) color-mix(in oklch,var(--acc2) 50%,transparent);
  background:linear-gradient(160deg,oklch(0.32 0.08 345),oklch(0.26 0.05 300));width:62px;height:62px}
.syn-node .nd span{font-family:var(--mono);font-size:9px;color:var(--text);text-align:center;line-height:1.05;padding:0 3px}
.syn-node .nl{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap;max-width:96px;overflow:hidden;text-overflow:ellipsis}
.syn-legend{position:absolute;bottom:12px;left:14px;font-family:var(--mono);font-size:10px;color:var(--faint);display:flex;gap:16px}
.syn-legend i{font-style:normal;display:flex;align-items:center;gap:6px}
.syn-legend .ln{width:16px;height:2px;background:var(--acc1);display:inline-block}
.syn-legend .ln.s{background:var(--acc2)}
.syn-combos-head{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.syn-combos-head svg{width:14px;height:14px;color:var(--acc1)}
.combo{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:16px 18px;margin-bottom:14px}
.combo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.combo-cards{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.combo-pill{font-family:var(--mono);font-size:11.5px;padding:6px 11px;border-radius:8px;background:color-mix(in oklch,var(--acc1) 12%,transparent);border:1px solid color-mix(in oklch,var(--acc1) 30%,transparent);color:var(--text)}
.combo-link{color:var(--faint)}
.combo-strength{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.combo-dots{display:flex;gap:3px}
.combo-dots i{width:7px;height:7px;border-radius:50%;background:oklch(0.32 0.02 270)}
.combo-dots i.on{background:var(--acc1);box-shadow:0 0 calc(6px*var(--glow)) var(--acc1)}
.combo p{font-size:13px;color:var(--muted);line-height:1.5}
.lab-note{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px 18px;font-size:13px;line-height:1.6;color:var(--muted)}

/* notes pane */
.lab-notes-edit{display:flex;flex-direction:column;gap:12px;height:100%}
.lab-notes-edit textarea{width:100%;min-height:300px;flex:1;border-radius:12px;padding:14px;font-family:var(--mono);font-size:13px;line-height:1.6;
  background:var(--panel);border:1px solid var(--line);color:var(--text);resize:vertical;outline:none}
.lab-notes-edit textarea:focus{border-color:var(--acc1)}
.lab-notes-bar{display:flex;align-items:center;gap:12px}
.lab-notes-bar .grow{flex:1}
.lab-notes-bar .muted{color:var(--good);font-family:var(--mono);font-size:12px}

@media (max-width:820px){
  .lab-body{grid-template-columns:1fr;grid-auto-rows:minmax(0,auto)}
  #view-lab{height:auto}
  .proj-list{max-height:200px}
}
@media (prefers-reduced-motion:reduce){.proj-item,.lab-new,.lab-edit,.lab-add-item,.lab-tab{transition:none}}

/* --- panneau IA du Laboratoire (Phase 3c) --- */
.lab-ai{background:linear-gradient(180deg,oklch(0.2 0.03 280),var(--bg));display:flex;flex-direction:column;min-height:0}
.ai-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
.ai-spark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:oklch(0.16 0.02 250);
  background:linear-gradient(135deg,var(--acc1),var(--acc2));box-shadow:0 0 calc(18px*var(--glow)) color-mix(in oklch,var(--acc2) 50%,transparent)}
.ai-spark svg{width:19px;height:19px}
.ai-h b{font-family:var(--font-display);font-size:15px;display:block}
.ai-h span{font-family:var(--mono);font-size:10.5px;color:var(--acc1);display:flex;align-items:center;gap:6px}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--acc1);box-shadow:0 0 calc(8px*var(--glow)) var(--acc1)}
.ai-feed{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:13px;min-height:0}
.ai-msg{max-width:92%;font-size:13px;line-height:1.55}
.ai-msg.user{align-self:flex-end;background:color-mix(in oklch,var(--acc1) 16%,transparent);border:1px solid color-mix(in oklch,var(--acc1) 32%,transparent);
  color:var(--text);padding:10px 13px;border-radius:14px 14px 4px 14px;white-space:pre-wrap}
.ai-msg.ai{align-self:flex-start;display:flex;gap:9px;max-width:96%}
.ai-msg.ai .ab{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;color:oklch(0.16 0.02 250);
  background:linear-gradient(135deg,var(--acc1),var(--acc2));margin-top:2px}
.ai-msg.ai .ab svg{width:14px;height:14px}
.ai-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.ai-bubble{background:var(--panel);border:1px solid var(--line);padding:11px 13px;border-radius:4px 14px 14px 14px;color:var(--muted);overflow-wrap:anywhere}
.ai-bubble.err{color:#ffb4b4;border-color:color-mix(in oklch,var(--forbidden) 40%,transparent)}
.ai-bubble :is(h1,h2,h3,h4){font-family:var(--font-display);color:var(--text);font-size:14px;margin:6px 0 3px}
.ai-bubble p{margin:5px 0} .ai-bubble ul,.ai-bubble ol{margin:5px 0;padding-left:18px}
.ai-bubble strong{color:var(--text)} .ai-bubble code{font-family:var(--mono);font-size:12px;color:var(--acc1);background:color-mix(in oklch,var(--acc1) 12%,transparent);padding:1px 5px;border-radius:4px}
.ai-tool{display:inline-block;font-family:var(--mono);font-size:10px;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:2px 7px;align-self:flex-start}
.ai-typing{display:flex;gap:5px;padding:6px 2px}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--acc1);animation:aiblink 1.2s infinite}
.ai-typing i:nth-child(2){animation-delay:.2s}.ai-typing i:nth-child(3){animation-delay:.4s}
@keyframes aiblink{0%,100%{opacity:.25}50%{opacity:1}}
/* proposition (cartes / combo) dans le fil */
.ai-prop{border:1px solid color-mix(in oklch,var(--acc1) 38%,transparent);background:color-mix(in oklch,var(--acc1) 8%,transparent);
  border-radius:12px;padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.ai-prop.applied{border-color:color-mix(in oklch,var(--good) 50%,transparent);background:color-mix(in oklch,var(--good) 10%,transparent);
  color:var(--good);font-family:var(--mono);font-size:12px;flex-direction:row;align-items:center;gap:7px}
.ai-prop.applied svg{width:15px;height:15px}
.ai-prop.ignored{border-color:var(--line);background:none;color:var(--faint);font-family:var(--mono);font-size:12px}
.ai-prop-head{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ai-prop-cards{display:flex;flex-wrap:wrap;gap:6px}
.ai-prop-cards .combo-pill{font-size:11px;padding:5px 9px}
.ai-prop-cards .combo-pill.rm{background:color-mix(in oklch,var(--forbidden) 14%,transparent);border-color:color-mix(in oklch,var(--forbidden) 35%,transparent);text-decoration:line-through;opacity:.85}
.ai-prop-note,.ai-prop-why{font-size:12.5px;color:var(--muted);line-height:1.5}
.ai-prop-why{color:var(--faint);font-style:italic}
.ai-prop-actions{display:flex;gap:8px}
.btn.sm,.ghost.sm{padding:6px 12px;font-size:12px;border-radius:8px}
/* suggestions + saisie */
.ai-suggest{padding:0 16px 10px;display:flex;flex-direction:column;gap:7px}
.ai-sugg{text-align:left;font-size:12.5px;color:var(--text);border:1px solid var(--line);background:var(--glass);padding:9px 12px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:9px;transition:all .13s}
.ai-sugg:hover{border-color:var(--acc1);background:color-mix(in oklch,var(--acc1) 12%,transparent)}
.ai-sugg svg{width:14px;height:14px;color:var(--acc1);flex-shrink:0}
.ai-input{padding:12px 14px 14px;border-top:1px solid var(--line)}
.ai-input .box{display:flex;align-items:flex-end;gap:9px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);padding:9px 9px 9px 13px;transition:border-color .15s}
.ai-input .box:focus-within{border-color:var(--acc1)}
.ai-input textarea{flex:1;background:none;border:none;outline:none;resize:none;color:var(--text);font-family:var(--sans);font-size:13px;line-height:1.4;max-height:96px;padding:2px 0}
.ai-input textarea:disabled{opacity:.5}
.ai-send{width:34px;height:34px;border-radius:9px;border:none;cursor:pointer;flex-shrink:0;display:grid;place-items:center;color:oklch(0.16 0.02 250);
  background:linear-gradient(135deg,var(--acc1),var(--acc2));box-shadow:0 0 calc(14px*var(--glow)) color-mix(in oklch,var(--acc1) 50%,transparent);transition:filter .13s,opacity .13s}
.ai-send svg{width:17px;height:17px}
.ai-send:hover{filter:brightness(1.1)} .ai-send:disabled{opacity:.4;cursor:default;filter:none}
.ai-hint{font-family:var(--mono);font-size:9.5px;color:var(--faint);text-align:center;margin-top:8px}
@media (max-width:1100px){.lab-body{grid-template-columns:220px 1fr 320px}}
@media (max-width:900px){.lab-body{grid-template-columns:1fr}.lab-ai{min-height:380px}}

/* ===================================================================== */
/* Duel screen — terrain néon en perspective (design « DuelForge », .df-*).   */
/* Le moteur (duel.js) ne fait que remplir #duel-board / les HUD / la main ;  */
/* la grammaire .mat-* (mat de playtest) n'est plus réutilisée ici.           */
/* ========================================================================= */
#view-duel:not(.hidden){position:relative;height:100%;min-height:calc(100vh - 120px);overflow:hidden}
.df{position:absolute;inset:0;overflow:hidden;z-index:1;
  background:
    radial-gradient(900px 520px at 50% -10%,color-mix(in oklch,var(--acc2) 20%,transparent),transparent 60%),
    radial-gradient(900px 600px at 50% 120%,color-mix(in oklch,var(--acc1) 22%,transparent),transparent 60%),
    radial-gradient(1200px 800px at 50% 50%,oklch(0.2 0.03 265),#05060b 75%)}
.df-floor{position:absolute;inset:-10% -20% 8%;z-index:0;pointer-events:none;
  transform:perspective(1500px) rotateX(44deg);transform-origin:center 62%;
  background-image:
    linear-gradient(color-mix(in oklch,var(--acc1) 22%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in oklch,var(--acc1) 22%,transparent) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(60% 56% at 50% 46%,#000 35%,transparent 78%);
          mask-image:radial-gradient(60% 56% at 50% 46%,#000 35%,transparent 78%)}
/* Zone du terrain = entre la bannière (haut) et la bande prompt+main (bas, ~250px).
   La perspective est portée par le conteneur ; le terrain est CENTRÉ et mis à l'échelle
   par --df-scale (calculé en JS, fitBoard) pour que LES DEUX camps tiennent toujours,
   quelle que soit la hauteur de la fenêtre. */
/* Le TERRAIN occupe TOUT l'écran (un seul layer plein écran) ; les mains des joueurs sont des
   layers SÉPARÉS posés PAR-DESSUS (z-index supérieur), chevauchant ses bords haut/bas (réf. Omega).
   → aucune bande réservée : le terrain n'est jamais étranglé, quelle que soit la fenêtre. */
.df-stage{position:absolute;inset:4px 4px 4px 4px;perspective:1400px;z-index:1}
/* Bord proche (joueur) ancré en bas, inclinaison forte (profondeur façon YGO Omega) ; le
   terrain fuit vers le haut. Mis à l'échelle par --df-scale (fitBoard) pour que les DEUX
   camps tiennent toujours. Positionnement absolu = pas d'« overflow-safe » de la grille. */
.df-field{position:absolute;left:50%;bottom:0;width:1000px;
  transform:translateX(-50%) rotateX(45deg) scale(var(--df-scale,.55));transform-origin:center bottom;
  display:flex;flex-direction:column;gap:7px}
/* minmax(0,1fr) : pistes STRICTEMENT égales — sans le min `auto`, le texte de la rangée
   centrale (PIOCHE/EP/médaille) élargirait ses colonnes et désalignerait la grille. */
.df-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:stretch}
.df-gap{aspect-ratio:59/62}                       /* cellule vide : garde l'alignement de la grille */

.dz{position:relative;aspect-ratio:59/62;border-radius:9px;border:1.6px solid color-mix(in oklch,var(--zc,var(--acc1)) 44%,var(--line2));
  background:color-mix(in oklch,var(--zc,var(--acc1)) 8%,oklch(0.2 0.025 265 / .55));
  display:grid;place-items:center;box-shadow:inset 0 0 22px color-mix(in oklch,var(--zc,var(--acc1)) 14%,transparent)}
.dz .zrune{width:46%;height:46%;opacity:.5;color:color-mix(in oklch,var(--zc,var(--acc1)) 70%,var(--txt))}
.dz .zrune svg{width:100%;height:100%}
.dz.empty{border-style:dashed;border-color:color-mix(in oklch,var(--zc,var(--acc1)) 30%,var(--line));background:oklch(0.18 0.02 265 / .4);box-shadow:none}
.df-row.foe .dz{--zc:var(--acc2)}
.df-row.me .dz{--zc:var(--acc1)}

.dcard{position:absolute;inset:4px;border-radius:6px;border:1px solid color-mix(in oklch,var(--zc) 60%,var(--line2));
  background:linear-gradient(160deg,oklch(0.36 0.07 70),oklch(0.27 0.05 60));overflow:hidden;
  box-shadow:0 4px 14px #0007,0 0 calc(14px*var(--glow)) color-mix(in oklch,var(--zc) 36%,transparent)}
.dcard.spell{background:linear-gradient(160deg,oklch(0.36 0.08 165),oklch(0.27 0.05 175))}
.dcard.trap{background:linear-gradient(160deg,oklch(0.36 0.08 350),oklch(0.27 0.05 340))}
.dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dcard .dart{position:absolute;inset:5px 5px 18px;border-radius:3px;
  background:repeating-linear-gradient(135deg,oklch(0.42 0.07 60),oklch(0.42 0.07 60) 5px,oklch(0.36 0.05 70) 5px,oklch(0.36 0.05 70) 10px)}
.dcard.spell .dart{background:repeating-linear-gradient(135deg,oklch(0.4 0.07 165),oklch(0.4 0.07 165) 5px,oklch(0.34 0.05 175) 5px,oklch(0.34 0.05 175) 10px)}
.dcard.trap .dart{background:repeating-linear-gradient(135deg,oklch(0.4 0.07 350),oklch(0.4 0.07 350) 5px,oklch(0.34 0.05 340) 5px,oklch(0.34 0.05 340) 10px)}
.dcard .datk{position:absolute;left:0;right:0;bottom:0;padding:2px 0;text-align:center;
  font-family:var(--mono);font-size:9px;color:var(--txt);background:oklch(0.14 0.02 260 / .82);letter-spacing:.02em}
.dcard .dlv{position:absolute;top:3px;right:4px;font-family:var(--mono);font-size:8px;color:oklch(0.95 0.1 90);z-index:2}
.dcard.def{transform:rotate(90deg) scale(.82)}

.dback{position:absolute;inset:4px;border-radius:6px;border:1px solid color-mix(in oklch,var(--zc) 55%,var(--line2));
  background:
    radial-gradient(circle at 50% 45%,color-mix(in oklch,var(--zc) 36%,transparent),transparent 60%),
    linear-gradient(150deg,oklch(0.26 0.05 265),oklch(0.18 0.03 270));
  box-shadow:0 4px 14px #0007,0 0 calc(12px*var(--glow)) color-mix(in oklch,var(--zc) 30%,transparent);
  display:grid;place-items:center}
.dback::after{content:"◆";color:color-mix(in oklch,var(--zc) 80%,var(--txt));font-size:17px;opacity:.8}
.dz .dback.horiz{inset:28% 3px}
/* dos de carte réel (asset utilisateur) par-dessus le dos dessiné de repli */
.dback-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1}

.dz.stack{border-style:solid}
/* deck & extra = PILE de cartes : couches décalées derrière le dos pour l'effet d'épaisseur */
.dz.deck .dback,.dz.extra .dback{box-shadow:
  1.5px 2px 0 0 oklch(0.34 0.04 280),3px 4px 0 0 oklch(0.26 0.035 280),
  4.5px 6px 0 0 oklch(0.19 0.03 280),0 6px 16px #0009}
.dz.deck{--zc:var(--acc1)}
.df-row.foe .dz.deck,.df-row.foe .dz.extra{--zc:var(--acc2)}
.dz .zcount{position:absolute;bottom:-7px;right:-7px;min-width:22px;height:22px;padding:0 5px;border-radius:7px;
  background:oklch(0.14 0.02 265);border:1px solid color-mix(in oklch,var(--zc) 55%,var(--line2));color:var(--txt);
  font-family:var(--mono);font-size:11px;font-weight:700;display:grid;place-items:center;z-index:3;
  box-shadow:0 0 calc(10px*var(--glow)) color-mix(in oklch,var(--zc) 40%,transparent)}
.dz .ztag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8.5px;
  letter-spacing:.1em;color:color-mix(in oklch,var(--zc) 75%,var(--txt));background:oklch(0.13 0.02 265 / .9);
  padding:2px 6px;border-radius:5px;white-space:nowrap;border:1px solid color-mix(in oklch,var(--zc) 30%,var(--line))}

/* zones de monstre Extra (EMZ) — cellules de la rangée centrale (col2/col4) */
.dz.emz{--zc:oklch(0.8 0.16 95)}

/* rangée centrale : chaque contrôle de phase occupe une cellule (.pcell) pour rester aligné */
.df-center{align-items:center}
.pcell{aspect-ratio:59/62;min-width:0;display:grid;place-items:center;overflow:visible}
.ph-circle{width:84%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--line2);background:oklch(0.18 0.025 265 / .7);font-family:var(--mono);font-size:11px;color:var(--faint);
  text-align:center;line-height:1.05;transition:all .15s}
.ph-circle.on{border-color:var(--acc1);color:var(--acc1);box-shadow:0 0 calc(22px*var(--glow)) color-mix(in oklch,var(--acc1) 45%,transparent);
  background:color-mix(in oklch,var(--acc1) 12%,oklch(0.18 0.025 265))}
.ph-medal{width:118%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;z-index:2;
  border:2.5px solid var(--acc2);color:var(--txt);background:radial-gradient(circle at 50% 35%,oklch(0.3 0.06 300),oklch(0.16 0.03 270));
  box-shadow:0 0 calc(34px*var(--glow)) color-mix(in oklch,var(--acc2) 50%,transparent),inset 0 0 26px color-mix(in oklch,var(--acc2) 22%,transparent)}
.ph-medal b{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:.02em;line-height:1}
.ph-medal span{font-family:var(--mono);font-size:9px;color:var(--acc1);letter-spacing:.12em;margin-top:2px}

/* Cases centrales = contrôles de phase par APPUI MAINTENU (3 s). La jauge .ph-prog se
   remplit de bas en haut pendant l'appui ; relâcher avant la fin annule (anim retirée). */
.ph-circle.ph-ctl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  position:relative;overflow:hidden;cursor:default;-webkit-user-select:none;user-select:none;touch-action:none}
.ph-circle.ph-ctl b{font-family:var(--font-display);font-weight:700;font-size:12px;line-height:1;position:relative;z-index:1}
.ph-circle.ph-ctl .ph-x{font-size:7px;letter-spacing:.06em;position:relative;z-index:1;opacity:.85}
.ph-circle.ph-ctl .ph-prog{position:absolute;left:0;right:0;bottom:0;height:0;z-index:0;
  background:linear-gradient(0deg,color-mix(in oklch,var(--acc1) 60%,transparent),color-mix(in oklch,var(--acc1) 18%,transparent))}
.ph-circle.ph-ctl.holding .ph-prog{animation:ph-hold 1s linear forwards}
@keyframes ph-hold{from{height:0}to{height:100%}}
.ph-circle.ph-armed{cursor:pointer;border-color:var(--acc1);color:var(--acc1);
  box-shadow:0 0 calc(16px*var(--glow)) color-mix(in oklch,var(--acc1) 40%,transparent)}
.ph-circle.ph-armed[data-phasebtn="ep"]{--acc1:var(--acc2)}   /* la case FIN tire vers l'accent 2 (rose) */
.ph-circle.ph-armed:hover{filter:brightness(1.12)}
.ph-circle.ph-ctl.holding{filter:brightness(1.15)}
.ph-circle.ph-off{opacity:.32;cursor:default;filter:grayscale(.55)}
/* garder la jauge LISIBLE même en reduced-motion (sinon elle saute à 100 % alors que le
   minuteur reste à 3 s) : on force la durée réelle. */
@media (prefers-reduced-motion:reduce){.ph-circle.ph-ctl.holding .ph-prog{animation:ph-hold 1s linear forwards!important}}

/* HUD de PV (overlays plats) — .df-lp pour éviter la collision avec .lp (légalité) */
.df-lp{position:absolute;z-index:6;display:flex;align-items:center;gap:13px}
.df-lp.foe{top:18px;right:30px;flex-direction:row-reverse;text-align:right;--lpc:var(--acc2)}
.df-lp.me{bottom:18px;left:30px;--lpc:var(--acc1)}
.df-lp-av{width:64px;height:64px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  border:2.5px solid var(--lpc);background:radial-gradient(circle at 50% 38%,oklch(0.3 0.05 265),oklch(0.15 0.03 270));
  box-shadow:0 0 calc(20px*var(--glow)) color-mix(in oklch,var(--lpc) 50%,transparent);color:var(--lpc)}
.df-lp-av svg{width:30px;height:30px}
.df-lp-body{min-width:230px}
.df-lp-name{display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:5px}
.df-lp.foe .df-lp-name{flex-direction:row-reverse}
.df-lp-timer{font-family:var(--mono);font-size:12px;color:var(--faint);display:flex;align-items:center;gap:6px}
.df-lp-timer svg{width:13px;height:13px}
.df-lp-frame{border:1.5px solid color-mix(in oklch,var(--lpc) 45%,var(--line2));border-radius:8px;padding:5px 12px;
  background:oklch(0.14 0.02 265 / .8);box-shadow:0 0 calc(16px*var(--glow)) color-mix(in oklch,var(--lpc) 26%,transparent)}
.df-lp-val{font-family:var(--mono);font-weight:700;font-size:27px;letter-spacing:.04em;color:var(--txt);line-height:1}
.df-lp-track{height:7px;border-radius:999px;background:oklch(0.26 0.02 270);margin-top:6px;overflow:hidden}
.df-lp-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--lpc),color-mix(in oklch,var(--lpc) 55%,#fff));transition:width .3s}

/* barre d'outils verticale + molette phase suivante */
.df-tools{position:absolute;z-index:6;top:50%;right:18px;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:13px}
.df-tool{width:50px;height:50px;border-radius:13px;border:1px solid var(--line);background:oklch(0.18 0.025 265 / .75);backdrop-filter:blur(4px);
  color:var(--dim);display:grid;place-items:center;cursor:pointer;transition:all .15s}
.df-tool svg{width:22px;height:22px}
.df-tool:hover{color:var(--acc1);border-color:var(--acc1);background:color-mix(in oklch,var(--acc1) 14%,transparent)}
.df-tool.on{color:var(--acc1);border-color:var(--acc1);box-shadow:0 0 calc(12px*var(--glow)) color-mix(in oklch,var(--acc1) 55%,transparent)}
/* auto-pilote OFF demandé mais différé (l'IA finit le tour) : état « en attente » clignotant */
.df-tool.pending{animation:goldflash 1.4s ease-in-out infinite}
.df-tool:disabled,.df-tool[disabled]{opacity:.5;pointer-events:none}
.df-tool.danger:hover{color:var(--acc2);border-color:var(--acc2);background:color-mix(in oklch,var(--acc2) 14%,transparent)}
.df-tool:focus-visible,.df-next:focus-visible{outline:2px solid var(--acc1);outline-offset:2px}
.df-next{width:78px;height:78px;border-radius:50%;margin-top:6px;border:2.5px solid var(--acc1);cursor:pointer;
  background:radial-gradient(circle at 50% 38%,color-mix(in oklch,var(--acc1) 30%,oklch(0.2 0.03 265)),oklch(0.16 0.03 270));
  color:var(--acc1);font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.1em;display:grid;place-items:center;
  box-shadow:0 0 calc(26px*var(--glow)) color-mix(in oklch,var(--acc1) 50%,transparent);transition:all .15s;text-align:center}
.df-next:hover{filter:brightness(1.12);transform:scale(1.04)}
.df-next[aria-disabled="true"]{opacity:.4;cursor:default;filter:grayscale(.5);box-shadow:none}
.df-next b{display:block;font-size:13px}
.df-next span{font-size:8px;color:var(--faint);letter-spacing:.12em}

.df-exit{position:absolute;z-index:6;top:18px;left:30px}

/* main en éventail */
.df-hand{position:absolute;z-index:5;left:50%;bottom:6px;transform:translateX(-50%);display:flex;align-items:flex-end;height:196px}
.hcard{width:144px;height:201px;border-radius:10px;border:1.5px solid var(--line2);margin:0 -20px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,oklch(0.34 0.07 70),oklch(0.26 0.05 60));box-shadow:0 12px 30px #000a;
  transform-origin:bottom center;transition:transform .16s,box-shadow .16s,filter .16s;cursor:pointer}
.hcard.spell{background:linear-gradient(165deg,oklch(0.34 0.08 165),oklch(0.26 0.05 175))}
.hcard.trap{background:linear-gradient(165deg,oklch(0.34 0.08 350),oklch(0.26 0.05 340))}
.hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hcard:nth-child(1){transform:rotate(-8deg) translateY(12px)}
.hcard:nth-child(2){transform:rotate(-4deg) translateY(4px)}
.hcard:nth-child(3){transform:rotate(0) translateY(0)}
.hcard:nth-child(4){transform:rotate(4deg) translateY(4px)}
.hcard:nth-child(5){transform:rotate(8deg) translateY(12px)}
.df-hand:hover .hcard:not(:hover){filter:brightness(.7)}
.hcard:hover{filter:brightness(1.12)!important;transform:translateY(-40px) rotate(0) scale(1.06)!important;z-index:9;
  border-color:var(--acc1);box-shadow:0 22px 44px #000b,0 0 calc(24px*var(--glow)) color-mix(in oklch,var(--acc1) 50%,transparent)}
.hcard .hart{position:absolute;inset:7px 7px 24px;border-radius:4px;
  background:repeating-linear-gradient(135deg,oklch(0.42 0.07 60),oklch(0.42 0.07 60) 6px,oklch(0.36 0.05 70) 6px,oklch(0.36 0.05 70) 12px)}
.hcard.spell .hart{background:repeating-linear-gradient(135deg,oklch(0.4 0.07 165),oklch(0.4 0.07 165) 6px,oklch(0.34 0.05 175) 6px,oklch(0.34 0.05 175) 12px)}
.hcard.trap .hart{background:repeating-linear-gradient(135deg,oklch(0.4 0.07 350),oklch(0.4 0.07 350) 6px,oklch(0.34 0.05 340) 6px,oklch(0.34 0.05 340) 12px)}
.hcard .hname{position:absolute;left:0;right:0;bottom:0;padding:5px 6px;font-family:var(--mono);font-size:10px;color:var(--txt);
  background:oklch(0.14 0.02 260 / .85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;z-index:2}
.hcard .hlv{position:absolute;top:6px;right:8px;font-family:var(--mono);font-size:11px;color:oklch(0.95 0.1 90);z-index:2}

/* main de l'ADVERSAIRE : rangée plate de DOS de cartes, tout en haut (réf. Omega), plus petite */
.df-hand.foe{top:2px;bottom:auto;align-items:flex-start;height:96px}
.hcard.foe{width:74px;height:104px;margin:0 -16px;cursor:default;border-radius:8px;
  border-color:color-mix(in oklch,var(--acc2) 45%,var(--line2));
  background:radial-gradient(circle at 50% 42%,color-mix(in oklch,var(--acc2) 34%,transparent),transparent 60%),linear-gradient(150deg,oklch(0.26 0.05 265),oklch(0.18 0.03 270))}
.hcard.foe .dback-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1}
.hcard.foe:nth-child(n){transform:none}                 /* pas l'éventail du joueur — rangée plate */
.hcard.foe:hover{transform:none!important;filter:none!important;z-index:auto;
  box-shadow:0 12px 30px #000a;border-color:color-mix(in oklch,var(--acc2) 45%,var(--line2))}
.df-hand.foe:hover .hcard:not(:hover){filter:none}

/* titre du prompt « activer ou non un effet » sur deux lignes */
.duel-prompt-t.yn-title{white-space:pre-line;text-align:center;display:block;width:100%}

/* Sélection de cible(s) AU PLATEAU : compteur d'ordre superposé sur la carte sélectionnée */
.sel-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;pointer-events:none;
  min-width:30px;height:30px;padding:0 6px;border-radius:50%;display:grid;place-items:center;
  background:oklch(0.9 0.18 95);color:oklch(0.2 0.04 60);font-family:var(--mono);font-weight:700;font-size:16px;
  box-shadow:0 0 16px color-mix(in oklch,oklch(0.9 0.18 95) 75%,transparent),0 2px 6px #000a}
/* bouton « Valider » (droite, doré clignotant), visible quand le compte requis est atteint */
.df-validate{position:absolute;z-index:8;right:88px;top:50%;transform:translateY(-50%);
  padding:12px 22px;border-radius:12px;border:2px solid oklch(0.9 0.18 95);cursor:pointer;
  background:color-mix(in oklch,oklch(0.9 0.18 95) 22%,oklch(0.16 0.03 265));color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.02em;
  animation:validateGlow 1s ease-in-out infinite}
.df-validate.hidden{display:none}
.df-validate:hover{filter:brightness(1.12)}
@keyframes validateGlow{0%,100%{box-shadow:0 0 0 1px oklch(0.9 0.18 95),0 0 10px color-mix(in oklch,oklch(0.9 0.18 95) 40%,transparent)}
  50%{box-shadow:0 0 0 2px oklch(0.96 0.2 95),0 0 26px 6px color-mix(in oklch,oklch(0.9 0.18 95) 70%,transparent)}}
@media (prefers-reduced-motion:reduce){.df-validate{animation:none}}

/* bannière de tour */
/* Bannière de tour : retirée de l'AFFICHAGE (elle chevauchait la main adverse ; le tour/phase est
   porté par la médaille centrale, réf. Omega) MAIS conservée pour les lecteurs d'écran (sr-only +
   aria-live sur #duel-turn) — `display:none` l'aurait retirée de l'arbre d'accessibilité. */
.df-turn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--acc1);box-shadow:0 0 10px var(--acc1)}

/* surface de prompt (overlay bas-centre, au-dessus de la main) */
/* popups d'effet : centrées sur le TERRAIN ADVERSE (haut) par défaut pour ne pas couvrir le côté
   du joueur ; déplaçables ensuite par la poignée ⠿ */
.df-prompt{position:absolute;z-index:7;left:50%;top:30%;transform:translate(-50%,-50%);
  min-width:340px;max-width:660px;padding:8px 13px 9px;border-radius:12px;
  border:1px solid color-mix(in oklch,var(--acc1) 45%,var(--line2));background:oklch(0.14 0.02 265 / .92);backdrop-filter:blur(6px);
  box-shadow:0 12px 40px #000b,0 0 calc(20px*var(--glow)) color-mix(in oklch,var(--acc1) 24%,transparent)}
.df-prompt.empty{display:none}
/* bandeau de déplacement (comme la popup Apparence) */
.df-prompt-drag{cursor:move;touch-action:none;user-select:none;text-align:center;color:var(--faint);
  font-size:12px;letter-spacing:4px;line-height:1;padding:1px 0 5px;margin-bottom:6px;
  border-bottom:1px solid color-mix(in oklch,var(--acc1) 22%,var(--line2))}
.df-prompt-drag:hover{color:var(--acc1)}
.df-prompt button,.df-prompt .duel-cbtn{cursor:pointer}
/* en-tête « effet en cours » dans une popup : nom de la carte + texte d'effet */
.duel-eff{display:flex;flex-direction:column;gap:3px;margin-bottom:7px;padding-bottom:7px;width:100%;
  border-bottom:1px solid color-mix(in oklch,var(--acc1) 30%,var(--line2))}
.duel-eff b{font-family:var(--font-display);font-size:14px;color:var(--acc1)}
.duel-eff span{font-size:11.5px;line-height:1.4;color:var(--muted);max-height:7.2em;overflow:auto;white-space:pre-wrap}
/* en-tête structuré des popups d'activation : Phase / Cause / Carte / Effet */
.duel-info{width:100%;margin-bottom:8px;padding-bottom:7px;display:flex;flex-direction:column;gap:3px;
  border-bottom:1px solid color-mix(in oklch,var(--acc1) 30%,var(--line2))}
.duel-info-row{display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:baseline;font-size:11.5px;line-height:1.35}
.duel-info-row b{color:var(--acc2);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.duel-info-row span{color:var(--txt);white-space:pre-wrap;word-break:break-word}
.duel-info-row.eff span{color:var(--muted);max-height:6.4em;overflow:auto}
.df-prompt .duel-prompt-t{font-size:12px}
.df-prompt .duel-cbtn{padding:5px 10px;font-size:12px}
.df-prompt .duel-choices{gap:6px}

/* panneau de journal (overlay, basculé par l'outil liste) */
.df-logpanel{position:absolute;z-index:7;right:84px;top:78px;width:300px;max-height:46vh;overflow:auto;padding:10px 13px;border-radius:12px;
  background:oklch(0.13 0.02 265 / .92);backdrop-filter:blur(6px);border:1px solid var(--line2);
  font-family:var(--mono);font-size:11px;line-height:1.55}
.df-logpanel.hidden{display:none}

/* pied AGPL */
.df-foot{position:absolute;z-index:6;left:30px;bottom:4px;font-size:10px;line-height:1.4}
.df-foot a{color:var(--muted);text-decoration:none;opacity:.6}
.df-foot a:hover{opacity:1;text-decoration:underline}

.duel-empty{padding:48px;text-align:center;font-size:14px}
.duel-empty.err{color:var(--acc2,#ff6b6b)}
.duel-prompt{display:flex;align-items:center;gap:12px;width:100%}
.duel-prompt .btn{margin-left:auto}
.duel-logline{color:var(--muted)}
.duel-logline.turn{color:var(--acc1,var(--accent));font-weight:700}
.duel-logline.err{color:var(--acc2,#ff6b6b)}
.duel-foot{text-align:center;font-size:10px;line-height:1.4}
.duel-foot a{color:var(--muted);text-decoration:none;opacity:.7}
.duel-foot a:hover{opacity:1;text-decoration:underline}

/* Duel — interactive responder (4.A-ui-2) */
.duel-prompt.col{flex-direction:column;align-items:flex-start;gap:8px}
.duel-prompt-t{font-weight:700;color:var(--text)}
.duel-choices{display:flex;flex-wrap:wrap;gap:8px}
.duel-cbtn{cursor:pointer;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:600;
  font-family:inherit;border:1px solid var(--line,var(--stroke));background:var(--glass-2);color:var(--text);transition:.12s}
.duel-cbtn:hover{border-color:var(--acc1,var(--accent))}
.duel-cbtn.btn{background:var(--acc1,var(--accent));color:#04181a;border-color:transparent;
  box-shadow:0 0 calc(8px*var(--glow,1)) color-mix(in oklch,var(--acc1,var(--accent)) 50%,transparent)}
.duel-cbtn[disabled]{opacity:.45;cursor:not-allowed}
.duel-picker{display:flex;flex-wrap:wrap;gap:8px;max-height:188px;overflow:auto;padding:2px}
.duel-pcard{position:relative;width:72px;height:101px;border-radius:6px;padding:0;cursor:pointer;
  border:2px solid transparent;background:none;overflow:hidden;transition:.12s}
.duel-pcard img{width:100%;height:100%;object-fit:cover;display:block;border-radius:4px}
/* nom de carte (GRAS) au pied de chaque vignette de la popup — remplace l'ancien badge numérique */
.duel-pname{position:absolute;left:0;right:0;bottom:0;padding:2px 3px;font-size:8.5px;font-weight:700;
  line-height:1.15;background:oklch(0.1 0.02 265 / .85);color:#fff;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Visualiseur de pile (cimetière / bannies / extra deck) : grille de cartes face recto, en ordre */
#pile-modal{width:min(580px,94vw);padding-top:34px}
#pile-modal h2{font-size:16px;margin:0 0 10px}
#pile-close{position:absolute;top:9px;right:10px;width:30px;height:30px;z-index:2}
#pile-body{display:flex;flex-wrap:wrap;gap:8px;max-height:62vh;overflow:auto}
.pile-card{width:74px;height:104px;border-radius:6px;padding:0;border:1px solid var(--line2);background:none;
  overflow:hidden;cursor:pointer;flex:0 0 auto;position:relative}
.pile-card img,.pile-card .dback,.pile-card .dback-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:5px}
.pile-card .dback{position:absolute;inset:0}
.pile-card:hover{border-color:var(--acc1)}
/* visualiseur en mode SÉLECTION : cartes choisissables (doré clignotant), non choisissables estompées,
   carte retenue (liseré plein) + compteur d'ordre. Pied : compteur + Valider/Annuler. */
.pile-card.pick{border-color:oklch(0.9 0.18 95);animation:goldflash 1.3s ease-in-out infinite}
.pile-card.dim{opacity:.4;cursor:default;filter:grayscale(.4)}
.pile-card.dim:hover{border-color:var(--line2)}
.pile-card.on{animation:none;border-color:oklch(0.92 0.2 95);
  box-shadow:0 0 0 2px oklch(0.92 0.2 95),0 0 calc(12px*var(--glow)) color-mix(in oklch,oklch(0.9 0.18 95) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.pile-card.pick{animation:none;box-shadow:0 0 0 2px oklch(0.9 0.18 95)}}
#pile-foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line2)}
#pile-foot .muted{margin-right:auto}

/* Hub de pré-duel (choix adversaire + qui commence) */
#duel-hub{width:min(460px,93vw);display:flex;flex-direction:column;gap:14px}
#duel-hub h2{font-size:17px;margin:0}
.hub-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.hub-row>span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
#hub-opponent{flex:1;max-width:280px;padding:7px 9px;border-radius:8px;border:1px solid var(--line2);
  background:oklch(0.16 0.02 265 / .8);color:var(--txt);font:inherit}
.hub-seats{display:flex;gap:14px}
.hub-seats label{display:flex;align-items:center;gap:5px;cursor:pointer}
.hub-note{font-size:11px;margin:0;line-height:1.35}
.hub-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}

/* Popup « Apparence » (pendant un duel) : modale étroite, déplaçable (poignée .modal-drag en haut) */
#appearance-modal{width:min(460px,93vw);padding-top:34px}
#appearance-close{position:absolute;top:9px;right:10px;width:30px;height:30px;z-index:2}
#appearance-body .set-pane{display:block}
#appearance-body .set-pane h3{margin-top:0}
.duel-pcard .mat-back{width:100%;height:100%;border-radius:4px;
  background:repeating-linear-gradient(45deg,#23304a,#23304a 6px,#1a2236 6px,#1a2236 12px)}
.duel-pcard:hover{border-color:var(--acc1,var(--accent))}
.duel-pcard.on{border-color:var(--acc2,#ff45c8);box-shadow:0 0 calc(10px*var(--glow,1)) var(--acc2,#ff45c8)}
.duel-pidx{position:absolute;top:2px;left:2px;background:#000b;color:#fff;border-radius:7px;font-size:10px;font-weight:700;padding:0 5px}
.duel-pick-actions{display:flex;gap:8px}
/* zone/carte SÉLECTIONNABLE (ciblage d'effet, emplacement, cible d'attaque) — terrain ET main :
   CLIGNOTE EN DORÉ */
.dz.duel-pick,.hcard.duel-pick{cursor:pointer;border-color:oklch(0.9 0.18 95)!important;
  animation:goldflash 1.3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.dz.duel-pick,.hcard.duel-pick{animation:none;box-shadow:0 0 0 2px oklch(0.9 0.18 95)}}

/* ========================================================================= */
/* Duel — couche d'ANIMATION (duel_anim.js).  Overlay EN ESPACE ÉCRAN posé    */
/* par-dessus le terrain incliné : les fantômes volent en coords viewport,    */
/* donc sans subir le rotateX du terrain (cf. plan / getBoundingClientRect).  */
.df-anim{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:visible}
/* fantôme = carte volante (recto image ou dos mutualisé) */
.df-ghost{position:absolute;border-radius:6px;overflow:hidden;will-change:transform,opacity;
  box-shadow:0 10px 30px #000b,0 0 calc(20px*var(--glow,1)) color-mix(in oklch,var(--acc1) 45%,transparent)}
.df-ghost img,.df-ghost .dback,.df-ghost .dback-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px}
.df-ghost.atk{box-shadow:0 12px 34px #000b,0 0 calc(26px*var(--glow,1)) color-mix(in oklch,var(--acc2) 60%,transparent)}
/* carte source masquée le temps du vol (re-rendue à l'état final ensuite) */
.anim-hide{opacity:0!important}
/* éclat néon ponctuel (invocation / pose / flip) */
.df-glow{position:absolute;border-radius:9px;pointer-events:none;
  box-shadow:0 0 0 2px color-mix(in oklch,var(--acc1) 70%,transparent),0 0 34px 6px color-mix(in oklch,var(--acc1) 55%,transparent);
  background:radial-gradient(circle,color-mix(in oklch,var(--acc1) 24%,transparent),transparent 70%)}
.df-glow.summon{box-shadow:0 0 0 2px oklch(0.9 0.18 95),0 0 40px 8px color-mix(in oklch,oklch(0.9 0.18 95) 60%,transparent);
  background:radial-gradient(circle,color-mix(in oklch,oklch(0.9 0.18 95) 30%,transparent),transparent 70%)}
.df-glow.set{box-shadow:0 0 0 2px color-mix(in oklch,var(--acc2) 65%,transparent),0 0 28px 5px color-mix(in oklch,var(--acc2) 45%,transparent)}
/* destruction (éclats) */
.df-shatter{position:absolute;border-radius:6px;pointer-events:none;
  background:radial-gradient(circle,oklch(0.95 0.2 30 / .7),oklch(0.7 0.22 25 / .35) 55%,transparent 72%);
  box-shadow:0 0 40px 10px color-mix(in oklch,oklch(0.75 0.22 28) 60%,transparent)}
/* impact d'attaque (anneau de choc) */
.df-impact{position:absolute;border-radius:50%;pointer-events:none;
  border:3px solid oklch(0.95 0.16 90);box-shadow:0 0 30px 8px color-mix(in oklch,oklch(0.95 0.16 90) 60%,transparent)}
/* flash plein écran (dégâts) */
.df-screenflash{position:absolute;inset:0;z-index:9;pointer-events:none;mix-blend-mode:screen}
/* secousse du terrain (dégâts) */
@keyframes df-shake{10%{transform:translateX(-50%) rotateX(45deg) scale(var(--df-scale,.55)) translate(7px,0)}
  30%{transform:translateX(-50%) rotateX(45deg) scale(var(--df-scale,.55)) translate(-7px,2px)}
  50%{transform:translateX(-50%) rotateX(45deg) scale(var(--df-scale,.55)) translate(5px,-2px)}
  70%{transform:translateX(-50%) rotateX(45deg) scale(var(--df-scale,.55)) translate(-4px,1px)}}
#duel-board.df-shaking .df-field{animation:df-shake .4s ease-in-out}
/* bannière de tour / phase */
.df-banner{position:absolute;z-index:9;left:50%;top:46%;transform:translate(-50%,-50%);pointer-events:none;
  font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:46px;color:var(--txt);
  text-shadow:0 0 24px color-mix(in oklch,var(--acc1) 70%,transparent),0 4px 18px #000d;white-space:nowrap}
.df-banner.turn{color:oklch(0.95 0.02 90);text-shadow:0 0 26px color-mix(in oklch,var(--acc1) 80%,transparent),0 4px 18px #000d}
.df-banner.phase{font-size:34px;color:var(--acc1);text-shadow:0 0 22px color-mix(in oklch,var(--acc1) 70%,transparent),0 3px 14px #000c}
/* pulsation de couleur du nombre de PV pendant le décompte */
.df-lp-val.lp-down{color:oklch(0.78 0.2 25);text-shadow:0 0 14px color-mix(in oklch,oklch(0.78 0.2 25) 70%,transparent)}
.df-lp-val.lp-up{color:oklch(0.85 0.18 145);text-shadow:0 0 14px color-mix(in oklch,oklch(0.85 0.18 145) 70%,transparent)}

/* ========================================================================= */
/* Duel — RÉORGANISATION de la main (seul drag&drop autorisé) + aperçu survol. */
/* carte en cours de glissé : estompée ; cible de dépôt (autre carte de main) : liseré néon */
.hcard.dragging{opacity:.4}
.hcard.over{border-color:oklch(0.9 0.18 95);
  box-shadow:0 12px 30px #000a,0 0 calc(14px*var(--glow)) color-mix(in oklch,oklch(0.9 0.18 95) 60%,transparent)}
/* aperçu de carte (gauche) — panneau complet (titre + visuel + infos), masqué tant que non survolé */
.df-preview{position:absolute;z-index:7;left:18px;top:50%;transform:translateY(-50%);width:250px;
  max-height:92%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .12s;
  padding:12px 14px;border-radius:14px;background:oklch(0.13 0.02 265 / .92);backdrop-filter:blur(6px);
  border:1px solid var(--line2);box-shadow:0 16px 44px #000c}
.df-preview.show{opacity:1}
.df-preview .rc-svg,.df-preview svg,.df-preview img{width:100%;height:auto;max-height:46vh;border-radius:10px;display:block;margin:0 auto}
.df-preview .pv-name{font-size:14px;margin:0 0 8px;line-height:1.2}
.df-preview .pv-text{max-height:24vh;overflow:hidden}

/* ========================================================================= */
/* Duel — BULLES D'ACTION SUR CARTE (clic carte → chapelet d'actions).         */
/* TOUTE carte actionnable (main OU terrain, quelle que soit la phase : invoquer, poser, activer,
   changer de position, attaquer…) CLIGNOTE EN DORÉ. */
.dz.has-action,.hcard.has-action{cursor:pointer;border-color:oklch(0.9 0.18 95)!important;
  animation:goldflash 1.4s ease-in-out infinite}
@keyframes goldflash{
  0%,100%{box-shadow:0 0 0 1px color-mix(in oklch,oklch(0.88 0.17 95) 35%,transparent)}
  50%{box-shadow:0 0 0 2px oklch(0.92 0.18 95),0 0 22px 5px color-mix(in oklch,oklch(0.9 0.18 95) 60%,transparent)}}
.dz.has-action.act-open,.hcard.has-action.act-open{filter:brightness(1.2)}
@media (prefers-reduced-motion:reduce){.dz.has-action,.hcard.has-action{animation:none;box-shadow:0 0 0 2px oklch(0.9 0.18 95)}}
/* zone de pile (cim./bannis/extra) contenant une carte ACTIVABLE : la ZONE clignote en doré ; pas de
   bulle au survol (cliquer ouvre la popup où l'on choisit). */
.dz.stack.pile-action{cursor:pointer;border-color:oklch(0.9 0.18 95)!important;animation:goldflash 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.dz.stack.pile-action{animation:none;box-shadow:0 0 0 2px oklch(0.9 0.18 95)}}
/* couche des bulles (espace écran ; seules les bulles captent le pointeur) */
.df-cardmenu{position:absolute;inset:0;z-index:9;pointer-events:none}
.df-bubble{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:0;
  border:2px solid var(--acc1);background:radial-gradient(circle at 50% 32%,color-mix(in oklch,var(--acc1) 42%,oklch(0.22 0.04 265)),oklch(0.16 0.03 270));
  box-shadow:0 6px 18px #000b,0 0 calc(16px*var(--glow,1)) color-mix(in oklch,var(--acc1) 65%,transparent);
  animation:bubblein .16s ease-out both}
.df-bubble.atk{border-color:oklch(0.82 0.21 30);
  background:radial-gradient(circle at 50% 32%,oklch(0.55 0.2 28),oklch(0.3 0.12 22));
  box-shadow:0 6px 18px #000b,0 0 calc(18px*var(--glow,1)) color-mix(in oklch,oklch(0.75 0.21 27) 75%,transparent)}
.df-bubble .bi{width:23px;height:23px;color:#fff;display:grid;place-items:center}
.df-bubble .bi svg{width:23px;height:23px}
.df-bubble:hover{filter:brightness(1.18);transform:translate(-50%,-50%) scale(1.1)}
.df-bubble::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:oklch(0.18 0.03 268);border-right:2px solid var(--acc1);border-bottom:2px solid var(--acc1)}
.df-bubble.atk::after{border-color:oklch(0.82 0.21 30)}
@keyframes bubblein{from{opacity:0;transform:translate(-50%,-30%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.df-bubble{animation:none}}

/* cartes activables EN RÉPONSE (fenêtre de chaîne) : clignotement DORÉ lent + cliquables */
@keyframes chainflash{
  0%,100%{box-shadow:0 0 0 2px color-mix(in oklch,oklch(0.88 0.17 95) 25%,transparent)}
  50%{box-shadow:0 0 0 3px oklch(0.9 0.18 95),0 0 24px 5px color-mix(in oklch,oklch(0.9 0.18 95) 60%,transparent)}}
.dz.chain-flash,.hcard.chain-flash{cursor:pointer;border-color:oklch(0.9 0.18 95)!important;animation:chainflash 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.dz.chain-flash,.hcard.chain-flash{animation:none;box-shadow:0 0 0 3px oklch(0.9 0.18 95)}}

/* ========================================================================= */
/* Distinction MAT (manuel, sans règles) vs MOTEUR (règles appliquées) :      */
/* en-têtes de groupe du sous-menu Local + pastilles de mode (menu & en jeu). */
.menu-group-h{display:flex;align-items:center;gap:8px;margin:16px 4px 5px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.menu-group-h:first-child{margin-top:0}
.mg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.mg-dot.engine{background:oklch(0.82 0.17 165);box-shadow:0 0 8px color-mix(in oklch,oklch(0.82 0.17 165) 70%,transparent)}
.mg-dot.manual{background:oklch(0.82 0.16 75);box-shadow:0 0 8px color-mix(in oklch,oklch(0.82 0.16 75) 70%,transparent)}
.mode-pill{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:5px;white-space:nowrap}
.mode-pill.engine{color:oklch(0.9 0.12 165);background:color-mix(in oklch,oklch(0.82 0.17 165) 18%,transparent);
  border:1px solid color-mix(in oklch,oklch(0.82 0.17 165) 45%,transparent)}
.mode-pill.manual{color:oklch(0.9 0.11 75);background:color-mix(in oklch,oklch(0.82 0.16 75) 18%,transparent);
  border:1px solid color-mix(in oklch,oklch(0.82 0.16 75) 45%,transparent)}

/* Replay list (4.C) */
.replay-wrap{display:flex;flex-direction:column;gap:14px;padding:18px 22px;max-width:780px;margin:0 auto;width:100%}
.replay-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.replay-title{margin:0;font-size:20px}
.replay-list{display:flex;flex-direction:column;gap:10px}
.replay-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:12px}
.replay-meta{display:flex;flex-direction:column;gap:2px}
.replay-actions{display:flex;gap:8px}
.replay-empty{padding:28px;text-align:center}

/* Banc d'essai (Laboratoire — simulation de duels UC1) */
.bench-form{display:flex;flex-direction:column;gap:14px;max-width:580px}
.bench-row{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:12px}
.bench-row>span{color:var(--muted);font-size:13px}
.bench-row select,.bench-row input{background:var(--glass);border:1px solid var(--stroke);color:var(--txt);border-radius:9px;padding:8px 10px;font-size:14px}
.bench-row input[type=checkbox]{justify-self:start;width:18px;height:18px;padding:0;accent-color:var(--accent)}
.bench-ab{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0}
.bench-ab th,.bench-ab td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line)}
.bench-ab th{color:var(--muted);font-weight:600;font-size:12px}
.bench-ab td:first-child{color:var(--muted)}
.bench-ab-verdict{font-size:13px;font-weight:600;padding:8px 10px;border-radius:9px;background:var(--panel2);border:1px solid var(--line)}
.bench-ab-verdict.bench-sig{color:var(--good);border-color:var(--good)}
.opt-steps{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.opt-step{font-size:13px;color:var(--muted)}
.opt-step.done{color:var(--good)}
.opt-step.start{color:var(--txt)}
#opt-out{max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:10px;margin-top:6px}
#opt-out .opt-tool{font-size:11.5px;margin:-6px 0}
#opt-out .opt-profile{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
#opt-out .opt-iter{font-size:12.5px;padding:5px 9px;border-radius:8px;border-left:3px solid var(--line);background:var(--panel2)}
#opt-out .opt-iter.kept{border-left-color:var(--good);color:var(--good)}
#opt-out .opt-iter.rev{border-left-color:var(--muted);color:var(--muted)}
.bench-report{margin-top:6px;display:flex;flex-direction:column;gap:12px}
.bench-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.bench-kpi{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.bench-kpi b{display:block;font-size:23px;font-variant-numeric:tabular-nums;color:var(--txt)}
.bench-kpi span{color:var(--muted);font-size:12px}
.bench-dead{font-size:14px;line-height:1.5}.bench-dead b{color:var(--acc1)}
.bench-warn{font-size:13px}.bench-note{font-size:12px;font-style:italic}
/* Insights de deckbuilding (UC1) */
.bench-insights{display:flex;flex-direction:column;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.bench-insight{font-size:13px;line-height:1.5}.bench-insight b{color:var(--acc1)}
.bench-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bench-oc{margin:4px 0 0;padding-left:16px;font-size:13px}.bench-oc li{margin:2px 0}
.dmg-curve{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:6px}
.dmg-bar{flex:1;min-width:4px;background:var(--acc2);border-radius:2px 2px 0 0;min-height:2px}
#bench-modal{max-width:640px;max-height:88vh;overflow:auto}
#bench-out{margin-top:6px}
/* Historique des runs d'optimisation (D1) */
.opt-runs{display:flex;flex-direction:column;gap:6px;margin:8px 0;max-height:200px;overflow:auto}
.opt-run{display:flex;gap:6px;align-items:center}
.opt-run-open{flex:1;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--txt);cursor:pointer;font-size:13px}
.opt-run-open:hover{border-color:var(--acc1)}
.opt-run-del{background:none;border:none;cursor:pointer;opacity:.7}.opt-run-del:hover{opacity:1}
.bench-btn{display:inline-flex;align-items:center;gap:6px}
.bench-btn svg{width:16px;height:16px}