@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--bg:#0c0625;--panel:#21103e;--ink:#faf6ff;--muted:#c2b9db;--lime:#62efff;--line:#57367e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:5px}button{cursor:pointer}header{height:96px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line);padding:0 5vw}.brand{display:flex;align-items:center;gap:16px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:40px;font-weight:800;font-style:italic;letter-spacing:-2px}.brand>span{border-left:1px solid #77529c;padding-left:16px;font:700 13px 'DM Sans',sans-serif;letter-spacing:2px}.brand small{display:block;font-size:8px;letter-spacing:1.3px;color:var(--muted);margin-top:6px}nav{display:flex;gap:30px;font-size:13px}nav a{padding:38px 0;color:#dfd4f5}nav a.active{color:var(--lime);border-bottom:2px solid var(--lime)}main{min-height:75vh}.hero{padding:66px 5vw 54px;display:grid;grid-template-columns:1fr 1fr;min-height:610px;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 80% 30%,#7b34c466,transparent 55%)}.eyebrow{font-size:10px;letter-spacing:2.3px;text-transform:uppercase;color:var(--lime);font-weight:700;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';display:block;width:6px;height:6px;background:var(--lime);border-radius:50%}h1,h2,h3{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;margin:0;line-height:1}h1{font-size:clamp(60px,6.7vw,106px);letter-spacing:-1px;text-transform:uppercase;margin:24px 0}h1 em{color:var(--lime);font-style:normal}p{color:var(--muted);font-size:14px;line-height:1.8}.hero p{max-width:445px}.actions{display:flex;gap:12px;margin:28px 0}.btn{border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--ink);padding:14px 20px;font-size:12px;font-weight:700;display:inline-flex;justify-content:center;align-items:center;gap:15px}.btn.primary{background:var(--lime);color:#100629;border-color:var(--lime)}.btn:hover{filter:brightness(1.15);border-color:var(--lime)}.tiny{font-size:10px;color:#b4a6d0}.hero-art{position:relative;height:430px;display:flex;align-items:center;justify-content:center}.hero-art:before{content:'';position:absolute;width:400px;height:400px;border:1px solid #9e5cc9;border-radius:50%}.art-card{width:210px;height:330px;position:absolute;object-fit:cover;border:6px solid #8c55c5;border-radius:12px;box-shadow:0 24px 50px #0009;transform:rotate(-15deg) translateX(-125px)}.art-card:nth-child(2){transform:rotate(15deg) translateX(125px);border-color:#67eaff}.art-card:nth-child(3){transform:translateY(-12px);width:226px;height:354px;border-color:#d386ff}.art-label{position:absolute;bottom:8px;right:0;padding:13px 18px;background:#291243;border:1px solid #a459d0;border-radius:5px;font-size:11px;transform:rotate(-4deg)}.strip{border-block:1px solid var(--line);padding:23px 5vw;display:flex;gap:40px;justify-content:space-between;font-size:11px;color:#dcd1f3;background:#170b35}.strip b{color:var(--lime);margin-right:9px}.section{padding:55px 5vw}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px;gap:20px}h2{font-size:38px;text-transform:uppercase}h3{font-size:26px}.text-link{color:var(--lime);font-size:12px}.card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.card{position:relative;min-width:0}.card-picture{padding:0;border:1px solid #8453b0;border-radius:8px;overflow:hidden;width:100%;background:var(--panel);display:block;aspect-ratio:0.69}.card-picture img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.card-picture:hover img{transform:scale(1.06)}.card h3{font-family:inherit;font-size:12px;line-height:1.5;margin-top:12px}.card .favorite{position:absolute;top:9px;right:9px;background:#111b;border:1px solid #fff4;color:white;border-radius:50%;width:29px;height:29px}.favorite.on{color:var(--lime)}.card .add{margin-top:9px;width:100%;padding:8px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.guide{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:25px;text-align:left;color:var(--ink);min-height:185px}.guide small{color:var(--lime);font-size:10px;letter-spacing:1px}.guide h3{margin-top:18px}.guide p{font-size:12px;margin-bottom:0}.guide:hover{border-color:var(--lime)}.banner{margin:5px 5vw 60px;padding:30px;background:#321252;border:1px solid #9e5cc9;border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:20px}.banner p{margin-bottom:0}.page-head{padding:50px 5vw 15px}.page-head h1{font-size:64px;margin:15px 0}.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:26px}input,select,textarea{background:#1a0c34;border:1px solid #8050a8;border-radius:5px;padding:12px;color:var(--ink)}input[type=search]{flex:1;min-width:220px}.count{color:var(--muted);font-size:12px}.empty{padding:50px;border:1px dashed #8257a9;text-align:center;grid-column:1/-1}.deck-layout{display:grid;grid-template-columns:1fr 340px;gap:30px}.deck-layout .card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.deck-panel{background:var(--panel);padding:22px;border:1px solid var(--line);border-radius:8px;align-self:start;position:sticky;top:15px}.deck-panel input,.deck-panel textarea{width:100%;margin:15px 0 0}.deck-panel .btn{margin-top:12px;width:100%}.deck-row{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px}.deck-row img{width:32px;height:43px;object-fit:cover;border-radius:3px}.deck-row span{flex:1}.deck-row button{background:transparent;color:#ddd;border:0;font-size:18px}.saved{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}dialog{background:#160a32;color:var(--ink);border:1px solid #ac66db;border-radius:12px;padding:35px;max-width:800px;width:90vw;max-height:85vh}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}.close{position:absolute;right:12px;top:9px;background:none;border:0;color:white;font-size:28px}.detail{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center}.detail img{width:100%;border-radius:8px}.detail h2{font-size:36px}.article h2{margin:10px 0 24px}.article h3{margin-top:22px}.article p{font-size:15px}.article a{color:var(--lime)}footer{padding:34px 5vw;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px}footer p,footer>a{font-size:11px}footer .brand{font-size:27px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--lime);color:#13062b;padding:14px 22px;border-radius:5px;font-size:13px;display:none;z-index:5}@media(min-width:1600px){main,header,footer{max-width:1600px;margin:auto}}@media(max-width:900px){header{height:auto;padding:20px 5vw;flex-wrap:wrap}nav{order:3;width:100%;justify-content:space-between}nav a{padding:10px 0}.hero{grid-template-columns:1fr;padding-top:40px}.hero-art{margin-top:30px}.card-grid{grid-template-columns:repeat(3,1fr)}.deck-layout{grid-template-columns:1fr}.deck-panel{position:static}.guide-grid{grid-template-columns:1fr}.strip{flex-wrap:wrap;gap:15px}.banner,footer{align-items:start;flex-direction:column}.detail{grid-template-columns:140px 1fr}}@media(max-width:500px){.brand{font-size:30px}.brand>span{font-size:10px}.hero-art{transform:scale(.78);margin-inline:-40px;height:355px}.hero h1{font-size:65px}.section{padding-top:35px}.card-grid,.deck-layout .card-grid{grid-template-columns:repeat(2,1fr)}.detail{grid-template-columns:1fr}.detail img{width:180px;margin:auto}.actions{flex-wrap:wrap}.section-title{align-items:start}h2{font-size:31px}}

/* SPAM art direction — cyan, electric purple and deep midnight blue. */
:root{--violet:#cf71f6;--cyan:#62efff}
body{background:radial-gradient(ellipse at 85% 12%,#43266a66,transparent 48%),linear-gradient(165deg,#100629,#16133d 65%,#0b0622)}
header{background:#0b0423f5;border-bottom:3px solid var(--cyan);box-shadow:0 4px 24px #7439ce30}
.brand{gap:12px}.brand img{width:122px;height:72px;object-fit:contain;filter:drop-shadow(0 3px 0 #000)}.brand>span{border-color:#9b63ca;color:#fff}
nav{gap:8px}nav a{padding:36px 18px;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:20px;text-transform:uppercase;color:#f9f3ff;letter-spacing:.6px}
nav a.active{color:#110625;background:var(--cyan);border-bottom:0;box-shadow:0 0 18px #62efff33}nav a:hover{color:var(--violet)}nav a.active:hover{color:#110625}

.hero{position:relative;background:linear-gradient(90deg,#100827 10%,#211141cc 60%,#171a4466),url('assets/card_bc0570ceb5bb15632cb72bfdc5c47e79.png') center/cover}
h1,h2{font-weight:800;text-shadow:3px 3px 0 #070218;letter-spacing:.3px}h1 em{color:var(--cyan);text-shadow:3px 3px 0 #08041d,0 0 30px #62efff22}
.hero .eyebrow{color:#e398ff}.eyebrow:before{box-shadow:0 0 10px var(--cyan)}
.hero-art:before{border:2px solid #cf71f688;box-shadow:0 0 45px #bb3cff44,inset 0 0 55px #9c39ff25}
.art-card{border:4px solid #bf76eb;box-shadow:0 16px 35px #040114aa,0 0 16px #9e45e044}.art-card:nth-child(3){box-shadow:0 16px 35px #040114aa,0 0 24px #d57cff55}
.art-label{background:#1c0a37;border:1px solid #cb74ef;color:#f7eaff;box-shadow:0 0 18px #bc48ee33}
.btn{border:1px solid #a563d4;background:#25113f;border-radius:3px}.btn.primary{background:var(--cyan);color:#13082c;border:2px solid #b3f8ff;box-shadow:3px 3px 0 #763ca3;font-weight:800}.btn:hover{border-color:#e79cff;box-shadow:0 0 16px #a651db44}.btn.primary:hover{background:#b3f8ff}
.strip{background:#62efff;color:#13072b;border:0;font-weight:600;box-shadow:0 4px 0 #b85de0}.strip b{color:#3e1365}
.card-picture{border:2px solid #8e4db8;border-bottom:4px solid #b76be3;border-radius:6px;box-shadow:0 6px 15px #07021299}.card-picture:hover{border-color:var(--cyan);box-shadow:0 0 18px #62efff44}
.card h3{color:#eee1ff}.card .favorite{background:#200b39e6;border-color:#d98aff}.favorite.on{color:#f09aff}
.guide{background:linear-gradient(135deg,#32174d,#170b31);border-color:#77469d;border-top:3px solid #bd65e6;box-shadow:0 5px 18px #07021955}.guide small{color:var(--cyan)}.guide:hover{border-color:var(--cyan)}
.banner{background:linear-gradient(110deg,#40175b,#21113b 60%,#184257);border:2px solid #be70e6;box-shadow:0 0 25px #a251db22}.banner h3{color:white}
input:focus,textarea:focus{outline:2px solid var(--cyan);border-color:transparent}.deck-panel{background:linear-gradient(160deg,#2b1047,#100626);border:1px solid #aa60ce;border-top:4px solid var(--cyan)}
dialog{box-shadow:0 0 65px #a146db44}.close{color:var(--cyan)}footer{background:#0a0420;border-top:2px solid #703e9b}footer .brand img{width:90px;height:50px}
@media(max-width:900px){nav a{padding:12px 14px}header{gap:14px}.brand img{width:100px;height:60px}}
@media(max-width:500px){nav{gap:0}nav a{font-size:17px;padding:12px 8px}.brand img{width:86px;height:54px}.brand>span{padding-left:8px;letter-spacing:1px}.hero{background-position:60% center}}

/* Catalogue SPAM : filtres et fiches completes, compatible mobile. */
.catalogue-toolbar select{min-width:150px;max-width:240px}.catalogue-toolbar input[type=search]{min-width:220px;flex:2 1 250px}
.card-tags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px}.card-tags span{font-size:10px;font-weight:700;border:1px solid #7a4aad;background:#30164d;color:#e9dcff;border-radius:3px;padding:4px 6px}
.card-tags .status-tag{border-color:#c98f55;color:#ffd9a3;background:#3a2439}.card.not-released .card-picture{border-style:dashed}
.card-detail-view .detail{align-items:start}.card-detail-view .detail img{max-height:420px;object-fit:contain}.card-detail-view .detail-content{margin-top:25px}.detail-content h3{margin:22px 0 12px;font-size:24px;border-bottom:1px solid #64438c;padding-bottom:6px}
.card-description{line-height:1.6}.stat-grid,.resistance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.stat{background:#291343;border:1px solid #6e4296;border-radius:5px;display:flex;flex-direction:column;padding:12px;gap:6px}.stat span{color:#bea9d9;font-size:11px}.stat strong{color:#f0f8ff;font-size:21px}
.abilities-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ability{padding:14px;border-radius:5px;border:1px solid #7b4da5;background:#241139}.ability strong{color:#8cefff}.ability p{font-size:12px;white-space:pre-line;margin-bottom:0;overflow-wrap:anywhere}
.lore-fields{display:flex;flex-wrap:wrap;gap:10px}.lore-fields div{padding:10px 15px;background:#291343;border-radius:4px}.lore-fields dt{font-size:10px;color:#b6a1d6}.lore-fields dd{margin:5px 0 0;font-size:14px}
@media(max-width:750px){.stat-grid,.resistance-grid{grid-template-columns:repeat(2,1fr)}.abilities-list{grid-template-columns:1fr}.catalogue-toolbar select{max-width:none;flex:1 1 145px}}
@media(max-width:500px){.card-detail-view .detail{grid-template-columns:1fr}.card-detail-view .detail img{max-width:230px}.stat{padding:9px}.stat strong{font-size:18px}}


/* In-game-style cards — dedicated artwork overlay; modal design stays independent. */
/* All cards of the same element share one frame palette, independent of rarity/artwork. */
.game-card{
 --game-card-accent:#a37ac3;--game-card-deep:#583773;
 --game-card-highlight:#d2b1ef;--game-card-glow:#995dc844;min-width:0
}
.game-card.game-element-fire{--game-card-accent:#ff722b;--game-card-deep:#a82918;--game-card-highlight:#ffbc69;--game-card-glow:#ff532b60}
.game-card.game-element-water{--game-card-accent:#30b7f5;--game-card-deep:#155cbd;--game-card-highlight:#a0ebff;--game-card-glow:#29aafa55}
.game-card.game-element-nature{--game-card-accent:#62d45c;--game-card-deep:#266f31;--game-card-highlight:#baf58c;--game-card-glow:#58d55055}
.game-card.game-element-earth{--game-card-accent:#b9824c;--game-card-deep:#634124;--game-card-highlight:#dfb581;--game-card-glow:#b57c4350}
.game-card.game-element-light{--game-card-accent:#fff1aa;--game-card-deep:#bb9e4c;--game-card-highlight:#fffce0;--game-card-glow:#fff0a655}
.game-card.game-element-shadow{--game-card-accent:#aa65e8;--game-card-deep:#5c2696;--game-card-highlight:#dbaaff;--game-card-glow:#a159e866}
.game-card .card-picture{
 position:relative;display:block;width:100%;aspect-ratio:0.69;overflow:hidden;
 padding:0;border:3px solid var(--game-card-accent);
 border-bottom:4px solid var(--game-card-deep);border-radius:7px;
 isolation:isolate;
 box-shadow:0 0 0 1px var(--game-card-deep),0 8px 21px #05020fb0,0 0 12px var(--game-card-glow),0 1px 0 var(--game-card-highlight) inset;
 cursor:pointer;color:#fff;
}
.game-card .card-picture:hover{
 border-color:var(--game-card-highlight);
 border-bottom-color:var(--game-card-accent);
 box-shadow:0 0 0 1px var(--game-card-accent),0 10px 24px #05020fcb,0 0 20px var(--game-card-glow);
}
.game-card .card-art{display:block;width:100%;height:100%;object-fit:cover;transition:transform .32s ease}
.game-card .card-picture:hover .card-art{transform:scale(1.045)}
.game-card .card-picture:focus-visible{outline:3px solid #67edff;outline-offset:4px}
.game-card .card-top-shade{position:absolute;inset:0 0 auto;height:32%;background:linear-gradient(#08040de8,#0904148c 52%,transparent);pointer-events:none}
.game-card .card-element-icon{
 position:absolute;z-index:2;left:5px;top:5px;width:clamp(28px,3vw,39px);height:clamp(28px,3vw,39px);
 display:grid;place-items:center;filter:drop-shadow(0 3px 3px #000e);pointer-events:none
}
.game-card .card-element-icon img{width:100%;height:100%;object-fit:contain;transition:none}
.game-card .card-internal-name{
 position:absolute;z-index:1;top:9px;left:clamp(36px,3.5vw,45px);right:clamp(41px,3.8vw,51px);
 text-align:center;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;
 font-size:clamp(11px,1.14vw,16px);line-height:1.03;letter-spacing:.25px;text-transform:uppercase;
 color:#fff;text-shadow:0 2px 2px #080212,0 0 7px #04010cff;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere;
 pointer-events:none;
}
.game-card .card-gold-income{
 position:absolute;z-index:2;right:5px;top:6px;display:flex;align-items:center;gap:4px;
 padding:3px 5px 3px 3px;background:#1c1023d9;border:1px solid #f3c459;
 border-radius:13px;box-shadow:0 2px 6px #000b;color:#fff7b5;
 font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;
 font-size:clamp(11px,.95vw,14px);line-height:1;pointer-events:none
}
.game-card .card-gold-coin{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;
 background:linear-gradient(130deg,#fff2a1,#e59a14 55%,#b86d06);color:#754107;
 border:1px solid #ffdb78;font-size:10px;box-shadow:inset 0 0 2px #fff9}
.game-card .card-health-display{
 position:absolute;z-index:2;bottom:7px;left:6px;right:6px;display:block;
 padding:3px 3px 5px;border-radius:5px;
 background:linear-gradient(#1d1037a8,#100719db);box-shadow:0 1px 9px #0a0514c0;
 pointer-events:none
}
.game-card .card-hp-track{
 position:relative;display:block;height:clamp(15px,1.5vw,20px);
 width:100%;border-radius:16px;border:1px solid #acf574;overflow:hidden;
 background:#223419;box-shadow:0 1px 1px #e9ffbf50 inset,0 1px 8px #72fb5366
}
.game-card .card-hp-fill{position:absolute;inset:0;background:linear-gradient(#b0ff52 0%,#82ef2d 48%,#65c929 100%)}
.game-card .card-hp-value{position:absolute;inset:0;display:grid;place-items:center;
 color:#fff;font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(11px,1.05vw,15px);
 font-weight:900;letter-spacing:.35px;line-height:1;text-shadow:0 1px 2px #1c3810,1px 1px 2px #000}
.game-card .card-bottom-row{display:flex;justify-content:space-between;align-items:flex-start;gap:7px;margin-top:8px}
.game-card .card-tags{display:flex;flex-wrap:wrap;align-items:center;margin:0;min-height:30px;gap:5px}
.game-card .favorite{position:static;flex:none;display:grid;place-items:center;width:30px;height:30px;
 padding:0;color:white;border-radius:7px;border:1px solid #9969b9;background:#28103f;
 font-size:17px;line-height:1;cursor:pointer}
.game-card .favorite:hover,.game-card .favorite:focus-visible{color:#79f5ff;border-color:#69efff}
.game-card .favorite.on{color:#fb86ce}
.game-card .favorite:focus-visible{outline:2px solid #69efff;outline-offset:2px}
.game-card.not-released .card-picture{border-style:dashed;}
@media(max-width:900px){.game-card .card-internal-name{font-size:clamp(12px,1.65vw,17px);left:39px;right:45px}.game-card .card-element-icon{width:33px;height:33px}}
@media(max-width:520px){.game-card .card-internal-name{font-size:clamp(11px,3vw,15px);top:8px;left:35px;right:39px}.game-card .card-element-icon{width:28px;height:28px;left:4px;top:5px}.game-card .card-gold-income{right:4px;top:5px;font-size:11px;gap:2px;padding:2px 4px 2px 2px}.game-card .card-gold-coin{width:14px;height:14px;font-size:9px}.game-card .card-hp-track{height:17px}.game-card .card-health-display{left:5px;right:5px;bottom:5px}}
@media(prefers-reduced-motion:reduce){.game-card .card-art{transition:none}}

/* Discord remains accessible in compact navigation. */
@media(max-width:650px){header nav{flex-wrap:wrap;justify-content:center;gap:4px 8px}header nav a{padding:10px 8px}}