/* Phase 8 — habillage « jeu PC » de l'application (menus, navigation, pages joueur).
   Ne modifie que l'apparence ; les outils ADMIN / DEV gardent leur mise en page. */
:root{--bg:#0a111d;--panel:#111c2c;--line:#25344a;--muted:#9fb0c3;--ink:#e9eef5;--accent:#d8b56a;--gold-2:#f1d99b;--cyan:#6fd3e6;--title:"Bahnschrift","Segoe UI Semibold","Segoe UI",system-ui,sans-serif}
body{background:url("../assets/ui/mat-pattern.svg"),radial-gradient(ellipse 80% 60% at 50% 0%,#18294a 0%,#0a111d 60%,#060a12 100%) fixed;font-family:"Segoe UI",system-ui,sans-serif}
header{padding:12px 28px;border-bottom:1px solid #d8b56a33;background:linear-gradient(180deg,#0c1626f0,#0a111de6);backdrop-filter:blur(4px)}
.brand b{width:44px;height:44px;border:0;padding:0}.brand b img{width:44px;height:44px;display:block}
.brand>div{font:700 17px var(--title);letter-spacing:.22em;color:#fff}.brand small{color:var(--accent);letter-spacing:.42em}
nav{gap:2px;padding:0 28px;border-bottom:1px solid #d8b56a22;background:#0b1422d9}
nav>button{border:0;border-radius:0;background:none;padding:12px 16px;font:600 13px var(--title);letter-spacing:.12em;text-transform:uppercase;color:#b9c7d8;border-bottom:2px solid transparent}
nav>button:hover{color:#fff;border-bottom-color:#d8b56a77}
nav>button.active{background:none;color:var(--gold-2);border-bottom-color:var(--accent)}
button.active,.primary{background:linear-gradient(180deg,#f3dc9f,#c99a45);border-color:#f1d99b;color:#1a1408}
.page>h1{font:700 30px var(--title);letter-spacing:.08em;color:#fff}
.panel,.match-setup{background:#0f1a2acc;border:1px solid var(--line);border-radius:14px}
input,select,textarea{background:#0c1626;color:var(--ink);border:1px solid #2c3f5a;border-radius:8px}
footer{border-top:1px solid #d8b56a22;color:#6f819a}
/* Menu principal */
#home{max-width:1500px}
.home-hero{display:grid;grid-template-columns:minmax(360px,520px) 1fr;gap:40px;align-items:center;min-height:calc(100vh - 220px)}
.home-intro{text-align:left}
#home .home-intro h1{font:800 clamp(36px,4vw,60px)/1.05 var(--title);letter-spacing:.06em;margin:4px 0 8px;background:linear-gradient(180deg,#fff6d6,#d8b56a 60%,#9a7634);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:left}
#home .home-intro>p{text-align:left;color:#c3d1e1;margin:0 0 22px}
.home-kicker{font:600 12px var(--title);letter-spacing:.5em;text-transform:uppercase;color:var(--cyan)}
#home .home-menu{display:flex;flex-direction:column;gap:10px;max-width:none;margin:0}
#home .home-menu button{min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 20px;text-align:left;font:700 18px var(--title);letter-spacing:.14em;color:#fff;background:linear-gradient(90deg,#16243acc,#0e1828aa);border:1px solid #2c3f5a;border-left:3px solid #d8b56a66;border-radius:10px;transition:transform .15s,border-color .15s,background .15s}
#home .home-menu button small{font:500 12px "Segoe UI",system-ui,sans-serif;letter-spacing:.02em;color:#9fb0c3;text-transform:none}
#home .home-menu button:hover{transform:translateX(6px);border-color:#d8b56a;border-left-color:var(--accent);background:linear-gradient(90deg,#22334f,#121e30)}
#home .home-menu .home-main{padding:20px 22px;font-size:22px;border-color:#d8b56a99;border-left:4px solid var(--accent);background:linear-gradient(90deg,#3a2e14cc,#16243acc)}
.home-showcase{position:relative;height:min(64vh,620px)}
.showcase-card{position:absolute;left:50%;top:50%;width:min(15vw,230px);aspect-ratio:5/7;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px #000c,0 0 0 1px #d8b56a66;transform:translate(-50%,-50%) translateX(calc((var(--i) - (var(--n) - 1)/2)*min(9vw,140px))) translateY(calc(((var(--i) - (var(--n) - 1)/2)*(var(--i) - (var(--n) - 1)/2))*10px)) rotate(calc((var(--i) - (var(--n) - 1)/2)*7deg));transition:transform .25s,box-shadow .25s;z-index:calc(10 - (var(--i) - (var(--n) - 1)/2)*(var(--i) - (var(--n) - 1)/2))}
.showcase-card img{width:100%;height:100%;object-fit:cover;display:block}
.showcase-card:hover{transform:translate(-50%,-56%) translateX(calc((var(--i) - (var(--n) - 1)/2)*min(9vw,140px))) rotate(0) scale(1.06);z-index:20;box-shadow:0 30px 60px #000e,0 0 0 2px #d8b56a}
.home-showcase::after{content:"";position:absolute;left:10%;right:10%;bottom:4%;height:40px;background:radial-gradient(ellipse,#000a,transparent 70%);z-index:0}
@media(max-width:900px){.home-hero{grid-template-columns:1fr}.home-showcase{height:300px}.showcase-card{width:110px}}
/* Préparation d'une partie */
#playtest .panel{padding:18px 22px}
#playtest .panel h2{font:700 20px var(--title);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2)}
#options label{display:flex;align-items:center;gap:10px;margin:10px 0}
#options .option-row select{width:auto}
#playtest .panel{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
#playtest .panel>h2,#playtest .panel>p{flex:1 1 100%;margin:0}
#playtest .panel>label{flex:1 1 100%}
#playtest .panel>.match-setup{flex:1 1 360px;padding:14px 16px;background:linear-gradient(160deg,#16243a,#0d1626);border-color:#2c3f5a}
#playtest .panel>.match-setup h3{margin:0 0 6px;font:700 16px var(--title);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
#playtest .panel>button:last-of-type{order:10;flex:1 1 100%;padding:14px;font:700 17px var(--title);letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(180deg,#f3dc9f,#c99a45);border-color:#f1d99b;color:#1a1408}
#playtest .panel>button:last-of-type:disabled{filter:grayscale(.8) brightness(.6)}
.missing-art-name{position:absolute;left:6%;right:6%;top:50%;transform:translateY(-50%);text-align:center;font:700 10px system-ui;color:#e6e8ff;text-shadow:0 1px 2px #000;pointer-events:none}
/* 0.9.4 — Menu JOUER (Solo / Multijoueur) */
.nx-play-hub{max-width:1000px;margin:0 auto}
.nx-play-crumb{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:14px;color:#9fb0c3}
.nx-play-crumb .nx-crumb{background:none;border:0;padding:4px 0;color:#d8b56a;font-weight:700;cursor:pointer;min-height:0}
.nx-play-crumb .nx-crumb-here{color:#fff;font-weight:700}
.nx-play-sections{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nx-play-section{min-height:170px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:24px 28px;text-align:left;border:1px solid #d8b56a99;border-left:4px solid var(--accent,#d8b56a);border-radius:12px;background:linear-gradient(120deg,#3a2e14cc,#16243acc);color:#fff;cursor:pointer;transition:transform .15s,border-color .15s}
.nx-play-section strong{font:700 28px var(--title,inherit);letter-spacing:.16em}
.nx-play-section small{font-size:14px;color:#c9d4e0}
.nx-play-section:hover,.nx-play-mode:not(:disabled):hover{transform:translateY(-2px);border-color:#d8b56a}
.nx-play-modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.nx-play-mode{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:120px;padding:16px 18px;text-align:left;border:1px solid #2c3f5a;border-radius:10px;background:linear-gradient(120deg,#16243acc,#0e1828aa);color:#fff;cursor:pointer}
.nx-play-mode-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nx-play-mode strong{font-size:17px;letter-spacing:.04em}
.nx-play-mode small{font-size:13px;line-height:1.4;color:#9fb0c3}
.nx-play-badge{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:999px;background:#2c3f5a;color:#c9d4e0}
.nx-play-mode.s-experimental{border-color:#b77be0aa}.nx-play-mode.s-experimental .nx-play-badge{background:#5b2d7a;color:#f0d9ff}
.nx-play-mode:disabled{opacity:.55;cursor:not-allowed}
.nx-play-mode.s-unavailable .nx-play-badge{background:#5a2c2c;color:#ffd6d6}
@media(max-width:700px){.nx-play-sections{grid-template-columns:1fr}.nx-play-section{min-height:110px;padding:18px}.nx-play-section strong{font-size:22px}}
/* 0.9.4 — Nexus Breach (page expérimentale) */
.nx-exp-badge{font-size:12px;letter-spacing:.14em;padding:3px 9px;border-radius:999px;background:#5b2d7a;color:#f0d9ff;vertical-align:middle}
.nx-nexus-intro p{max-width:900px;line-height:1.5}.nx-nexus-intro .nx-warn{color:#ffd59a}
.nx-nexus-setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.nx-nexus-col{display:flex;flex-direction:column;gap:8px}.nx-nexus-col h3{margin:0 0 4px}
.nx-nexus-col .nx-field-l{display:flex;flex-direction:column;gap:3px;font-size:13px;color:#c9d4e0}
.nx-nexus-col select{max-width:100%}
.nx-note{font-size:12px;color:#9fb0c3;line-height:1.4}.nx-note[data-error="1"]{color:#ff9b9b}
.nx-nexus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:12px}
.nx-nexus-card{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:#121c2c;border:1px solid #2c3f5a}
.nx-nexus-card img{width:100%;max-width:150px;align-self:center;border-radius:10px}
.nx-nexus-card h4{margin:2px 0;font-size:15px}.nx-nexus-meta{font-size:11px;color:#9fb0c3;margin:0}.nx-nexus-text{font-size:13px;line-height:1.4;margin:0}
.nx-nexus-sim-out{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}
.nx-nexus-sim-col{padding:10px;border-radius:10px;background:#101a28;border:1px solid #2c3f5a}
@media(max-width:800px){.nx-nexus-setup,.nx-nexus-sim-out{grid-template-columns:1fr}}
/* 0.9.4 — Deck Builder : galerie de decks + Nexus Breach */
.db-gallery{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:8px;scroll-snap-type:x proximity}
.db-box{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border-radius:12px;overflow:hidden;border:1px solid #2c3f5a;background:#121c2c;color:#fff;cursor:pointer;text-align:left;min-height:0}
.db-box img{width:100%;height:120px;object-fit:cover;object-position:top;display:block;background:#0b1320}
.db-box .db-box-cap{display:flex;flex-direction:column;gap:2px;padding:7px 8px}.db-box .db-box-cap strong{font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-box .db-box-cap small{font-size:11px;color:#9fb0c3}
.db-box.current{border-color:#d8b56a;box-shadow:0 0 0 2px #d8b56a66}.db-box.draft .db-box-cap small{color:#ffcf8a}
.db-box-new{align-items:center;justify-content:center;min-height:170px;border-style:dashed}.db-box-new strong{font-size:40px;line-height:1}
.db-nexus{margin-top:14px;padding:10px 12px;border-radius:12px;border:1px solid #6b3f8f;background:#1a1028aa}
.db-nexus h3{margin:0 0 4px}.db-nexus-tag{font-size:10px;letter-spacing:.12em;padding:2px 7px;border-radius:999px;background:#5b2d7a;color:#f0d9ff;vertical-align:middle}
.db-nexus>p{font-size:12px;color:#c9b8dd;margin:4px 0 8px}
.db-nexus-slots{display:flex;gap:10px;flex-wrap:wrap}
.db-nexus-slot{position:relative;flex:0 0 120px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px;border-radius:10px;border:2px dashed #8a64aa;background:#140c22;color:#fff;min-height:150px;justify-content:center;cursor:pointer}
.db-nexus-slot.filled{border-style:solid;justify-content:flex-start}.db-nexus-slot img{width:80px;border-radius:8px}.db-nexus-slot strong{font-size:12px;text-align:center}.db-nexus-slot small{font-size:10px;color:#c9b8dd}
.db-nexus-clear{position:absolute;top:2px;right:6px;font-size:18px;line-height:1;color:#ffb3b3;cursor:pointer}
.db-nexus-status{font-size:12px;color:#ffcf8a}.db-nexus-status.ok{color:#9cf27a}
.db-nexus-picker{position:fixed;inset:0;z-index:300;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px}
.db-nexus-picker-box{width:min(1000px,100%);max-height:90vh;overflow:auto;background:#121c2c;border:1px solid #6b3f8f;border-radius:14px;padding:14px}
.db-nexus-picker-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.db-nexus-picker-head h3{margin:0;flex:1}
.db-nexus-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.db-nexus-option{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:10px;border:1px solid #2c3f5a;background:#0f1726;color:#fff;text-align:center;cursor:pointer}
.db-nexus-option img{width:90px;border-radius:8px}.db-nexus-option small{color:#c9b8dd;font-size:11px}.db-nexus-option span{font-size:11px;color:#9fb0c3;line-height:1.35}
.db-nexus-option.taken{opacity:.45;cursor:not-allowed}
@media(max-width:700px){.db-box{flex-basis:120px}.db-box img{height:96px}}
/* 0.9.5 — Deck Boxes : l'illustration du Leader occupe la boîte (cadrée, non déformée), nom et validité lisibles en surimpression */
.db-gallery{gap:14px;padding-bottom:14px}
.db-box{position:relative;flex:0 0 176px;height:250px;border-radius:14px;overflow:hidden;border:2px solid #2c3f5a;background:#0b1320}
.db-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;background:#0b1320}
.db-box .db-box-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;background:linear-gradient(180deg,#0000,#050a12e6 45%,#050a12)}
.db-box .db-box-cap strong{font-size:14px;color:#fff;text-shadow:0 1px 3px #000}.db-box .db-box-cap small{color:#c9d4e0}
.db-box.current{border-color:#d8b56a;box-shadow:0 0 0 2px #d8b56a88,0 6px 18px #0008}
.db-box:hover{border-color:#8fb3d9}
.db-box-new{height:250px}
@media(max-width:700px){.db-box{flex-basis:136px;height:196px}.db-box-new{height:196px}}
/* 0.9.5 — Variantes artistiques */
.db-art-count{position:absolute;left:4px;bottom:4px;z-index:3;font-size:9px;font-weight:800;padding:1px 5px;border-radius:999px;background:#5b2d7aee;color:#f0d9ff;pointer-events:none}
.db-art-btn{position:absolute;right:2px;bottom:26px;z-index:4;width:24px;height:24px;min-height:0;padding:0;border-radius:50%;font-size:13px;line-height:1;background:#1a1028ee;border:1px solid #b77be0}
.db-tile[data-art]::after{content:"ALT";position:absolute;left:3px;top:3px;font-size:8px;font-weight:800;padding:1px 4px;border-radius:4px;background:#b77be0;color:#140a1f;pointer-events:none}
.db-art-picker{position:fixed;inset:0;z-index:300;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px}
.db-art-picker-box{width:min(900px,100%);max-height:90vh;overflow:auto;background:#121c2c;border:1px solid #6b3f8f;border-radius:14px;padding:14px}
.db-art-picker-head{display:flex;gap:10px;align-items:center}.db-art-picker-head h3{margin:0;flex:1}
.db-art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.db-art-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:10px;border:2px solid #2c3f5a;background:#0f1726;color:#fff;cursor:pointer}
.db-art-opt img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:8px}.db-art-opt.on{border-color:#d8b56a}.db-art-opt.locked{opacity:.45;cursor:not-allowed}
.db-art-opt small{color:#c9b8dd;font-size:11px;min-height:14px}
.nx-art-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}.nx-art-row .nx-chip.locked{opacity:.6}
.nx-art-tag{position:absolute;left:6px;top:6px;font-size:10px;font-weight:800;padding:2px 6px;border-radius:999px;background:#5b2d7aee;color:#f0d9ff}
.nx-missing-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:900;max-width:min(860px,92vw);padding:10px 40px 10px 14px;border-radius:10px;background:#5a2c2cf2;border:1px solid #ff9b9b;color:#fff;font-size:13px;line-height:1.4;box-shadow:0 8px 24px #0009}
.nx-missing-banner button{position:absolute;right:6px;top:6px;min-height:0;padding:2px 8px;background:none;border:0;color:#fff;font-size:18px}
/* 0.9.5.1 — Deck Boxes repliables (barre « Decks ▾ ») et cadrage sur le personnage */
.db-decks{margin-bottom:8px;border:1px solid #2c3f5a;border-radius:12px;background:#0e1726}
.db-decks-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;background:none;border:0;color:#e9eef6;font:600 14px/1.2 inherit;letter-spacing:.04em;text-align:left;cursor:pointer;border-radius:12px}
.db-decks-toggle:hover{background:#16243a}
.db-decks-label{font-weight:800;color:#d8b56a}
.db-decks-current{color:#c9d4e0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-decks.open{box-shadow:0 10px 26px #0008}
.db-decks .db-gallery{padding:6px 10px 12px;margin:0}
.db-decks .db-box{flex:0 0 200px;height:150px}
.db-decks .db-box img{object-fit:cover;object-position:50% 30%;transform:scale(1.18);transform-origin:50% 32%}
.db-decks .db-box-new{min-height:0;height:150px}
/* 0.9.5.1 — illustrations par exemplaire */
.db-art-picker-box h4{margin:12px 0 4px;font-size:13px;letter-spacing:.06em;color:#d8b56a;text-transform:uppercase}
.db-art-copy .db-art-copy-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:10px;border:1px solid #2c3f5a;background:#121c2c;color:#fff;cursor:pointer;width:96px}
.db-art-copy .db-art-copy-opt img{width:84px;height:118px;object-fit:cover;border-radius:6px}
.db-art-copy .db-art-copy-opt.on{border-color:#d8b56a;box-shadow:0 0 0 2px #d8b56a77}
.db-art-copy .db-art-copy-opt.locked{opacity:.4;cursor:not-allowed}
.db-art-copy .db-art-copy-opt small{font-size:10px;color:#9fb0c3;text-align:center}
.db-art-mixed{position:absolute;top:-4px;right:-4px;min-width:14px;height:14px;border-radius:7px;background:#d8b56a;color:#111;font:700 10px/14px sans-serif;text-align:center}
.db-art-btn{position:relative}
/* 0.9.6 — Deck Lists */
.db-lists{margin-top:8px}
.db-lists-body{padding:8px 14px 14px;display:grid;gap:10px}
.db-lists-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.db-lists-row strong{min-width:190px;color:#d8b56a}
.db-lists-paste{width:100%;min-height:90px;font:13px/1.4 ui-monospace,Consolas,monospace;background:#0b1320;color:#e9eef6;border:1px solid #2c3f5a;border-radius:8px;padding:8px}
.db-lists-report p{margin:2px 0;font-size:13px}
.db-lists-ok{color:#9be7a6}.db-lists-warn{color:#ffcf8a}.db-lists-error{color:#ff8f8f}
.db-lists{border:1px solid #2c3f5a;border-radius:12px;background:#0e1726}
.db-lists.open{box-shadow:0 10px 26px #0008}
.db-lists-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;background:none;border:0;color:#e9eef6;font:600 14px/1.2 inherit;letter-spacing:.04em;text-align:left;cursor:pointer;border-radius:12px}
.db-lists-toggle:hover{background:#16243a}
.db-lists-label{font-weight:800;color:#d8b56a}