/* MYTHOS — thème partagé : cartes TCG, plateau, effets. Utilisé par le jeu, l'overlay et la collection. */
:root{
  --bg:#05090b; --bone:#ece5d2; --muted:#93a8ab; --gold:#d6ae5e; --blood:#c4474f; --violet:#9a7be0;
  --teal:#3fbf9f; --savoir:#5aa9e6; --influence:#e6c15a; --corruption:#b266dc; --accent:#3fbf9f;
  --serif:"Cinzel","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --body:"Cormorant Garamond","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--bone);font-family:var(--body);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}

/* ============================================================ CARTES TCG */
.card{--w:300px;--c:#7d8f93;--c2:#1d2a2d;--glow:#7d8f93;
  position:relative;width:var(--w);height:calc(var(--w)*1.5);font-size:calc(var(--w)/20);border-radius:.95em;
  color:var(--bone);font-family:var(--body);user-select:none;flex:none;isolation:isolate;
  background:linear-gradient(145deg,var(--c) 0%,var(--c2) 38%,var(--c) 62%,var(--c2) 100%);
  box-shadow:0 .3em 1em rgba(0,0,0,.65),0 0 0 .08em rgba(0,0,0,.8);}
.card.t-creature{--c:#58b89c;--c2:#12362f}
.card.t-terrain{--c:#d3a455;--c2:#3c2a0e}
.card.t-artifact{--c:#aebccb;--c2:#212932}
.card.t-trap{--c:#cf5a64;--c2:#3b1015}
.card.t-ritual{--c:#9a78e0;--c2:#241441}
.card.t-manifestation{--c:#dcc84e;--c2:#3b350f}
.card .art{position:absolute;inset:.38em;border-radius:.7em;background-size:cover;background-position:center top;overflow:hidden;background-color:#06100f}
.card .art.proc{background:radial-gradient(circle at 50% 36%,var(--pg) 0%,transparent 62%),linear-gradient(180deg,var(--pb1),var(--pb2))}
.card .art.proc::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 36%,rgba(255,255,255,.06) 0 6deg,transparent 6deg 14deg);animation:spin 80s linear infinite}
.card .art.proc .glyph{position:absolute;left:0;right:0;top:12%;text-align:center;font-size:6.2em;line-height:1;filter:drop-shadow(0 0 .25em var(--pg)) drop-shadow(0 0 .8em var(--pg));opacity:.92;font-family:"Segoe UI Symbol","Noto Sans Symbols","Apple Symbols",sans-serif}
.card .shade{position:absolute;inset:.38em;border-radius:.7em;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0,transparent 20%,transparent 44%,rgba(0,0,0,.82) 70%,rgba(0,0,0,.94) 100%)}
.card .inner{position:absolute;inset:.38em;border-radius:.7em;box-shadow:inset 0 0 0 .08em rgba(255,255,255,.18),inset 0 0 1.6em rgba(0,0,0,.55);pointer-events:none}
.card .costs{position:absolute;left:.15em;top:.85em;display:flex;flex-direction:column;gap:.18em;z-index:3}
.card .gem{width:2.15em;height:2.15em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.05em;
  color:#fff;text-shadow:0 .08em .15em #000;border:.13em solid rgba(255,255,255,.75);box-shadow:0 .1em .3em rgba(0,0,0,.7),inset 0 .15em .3em rgba(255,255,255,.35)}
.card .gem.savoir,.gem.savoir{background:radial-gradient(circle at 35% 30%,#8fd0ff,#2563a8)}
.card .gem.influence,.gem.influence{background:radial-gradient(circle at 35% 30%,#ffe69a,#a9780e)}
.card .gem.corruption,.gem.corruption{background:radial-gradient(circle at 35% 30%,#e0a6ff,#6a1f9a)}
.card .gem.free{background:radial-gradient(circle at 35% 30%,#ccc,#555);font-size:.8em}
.card .typeico{position:absolute;right:.7em;top:.7em;z-index:3;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;font-family:var(--serif);padding:.25em .6em;border-radius:99px;
  background:rgba(0,0,0,.55);border:.1em solid var(--c);color:var(--c);backdrop-filter:blur(2px)}
.card .nameplate{position:absolute;left:.7em;right:.7em;top:57.5%;z-index:3;text-align:center;padding:.38em .5em .3em;border-radius:.5em;
  background:linear-gradient(180deg,rgba(30,36,38,.94),rgba(10,13,14,.96));border:.1em solid var(--c);box-shadow:0 .2em .5em rgba(0,0,0,.6),inset 0 0 .6em rgba(0,0,0,.6)}
.card .nameplate b{display:block;font-family:var(--serif);font-weight:700;font-size:1.08em;letter-spacing:.03em;line-height:1.12;text-shadow:0 .08em .2em #000}
.card .nameplate b.long{font-size:.86em}
.card .nameplate small{display:block;font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-top:.15em;font-family:var(--serif)}
.card .rules{position:absolute;left:.75em;right:.75em;top:70.5%;bottom:.85em;z-index:2;padding:.55em .65em .5em;border-radius:.45em;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,18,19,.84),rgba(6,8,9,.94));border:.08em solid rgba(255,255,255,.1)}
.card .rules p{margin:0;font-size:.93em;line-height:1.18;font-weight:600}
.card .rules em{display:block;margin-top:.35em;font-size:.8em;line-height:1.15;color:#a7b5b6;font-style:italic;opacity:.9}
.card.dense .rules p{font-size:.78em}.card.dense .rules em{font-size:.68em;margin-top:.25em}
.card.dense2 .rules p{font-size:.68em}.card.dense2 .rules em{display:none}
.card .stat{position:absolute;bottom:.15em;z-index:4;width:2.5em;height:2.5em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:1.25em;
  color:#fff;text-shadow:0 .08em .12em #000;border:.13em solid #f4ecd6;box-shadow:0 .15em .4em rgba(0,0,0,.8)}
.card .stat.atk{left:-.1em;background:radial-gradient(circle at 35% 30%,#ffb26a,#a73512)}
.card .stat.hp{right:-.1em;background:radial-gradient(circle at 35% 30%,#8cf0b8,#136a3a)}
.card .stat.hp.hurt{background:radial-gradient(circle at 35% 30%,#ff9a9a,#8a1620)}
.card .stat.buff{box-shadow:0 0 .6em .1em #ffe58a,0 .15em .4em rgba(0,0,0,.8)}
.card .rar{position:absolute;left:50%;top:56.4%;width:1em;height:1em;transform:translate(-50%,-50%) rotate(45deg);z-index:4;border:.08em solid #fff;box-shadow:0 0 .4em rgba(0,0,0,.8)}
.card.r-commune .rar{background:#aab3b5}.card.r-rare .rar{background:#4aa3df;box-shadow:0 0 .6em #4aa3df}
.card.r-epique .rar{background:#b36bd8;box-shadow:0 0 .7em #b36bd8}.card.r-legendaire .rar{background:#f0b84a;box-shadow:0 0 .9em #f0b84a}
.card.r-mythique .rar{background:#ff5a4a;box-shadow:0 0 1em #ff5a4a;animation:pulse 1.6s ease-in-out infinite}
.card.r-rare{box-shadow:0 .3em 1em rgba(0,0,0,.65),0 0 .9em rgba(74,163,223,.45)}
.card.r-epique{box-shadow:0 .3em 1em rgba(0,0,0,.65),0 0 1em rgba(179,107,216,.55)}
.card.r-legendaire{box-shadow:0 .3em 1em rgba(0,0,0,.65),0 0 1.3em rgba(240,184,74,.7)}
.card.r-mythique{box-shadow:0 .3em 1em rgba(0,0,0,.65),0 0 1.5em rgba(255,90,74,.75),0 0 3em rgba(240,184,74,.35)}
.card .foil{position:absolute;inset:0;border-radius:.95em;z-index:5;pointer-events:none;display:none;mix-blend-mode:screen;opacity:.85;
  background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.2) 38%,rgba(255,226,150,.38) 50%,rgba(255,255,255,.2) 62%,transparent 78%);background-size:260% 100%;animation:foil 4.2s linear infinite}
.card.r-legendaire .foil,.card.r-mythique .foil{display:block}
.card.r-mythique .foil{background:linear-gradient(115deg,transparent 20%,rgba(255,120,90,.28) 36%,rgba(255,230,160,.5) 50%,rgba(150,120,255,.3) 64%,transparent 80%);background-size:260% 100%}
.card.token{filter:saturate(.85)}
.card.token .costs{display:none}

/* version plateau (créatures posées) */
.card.mini .rules,.card.mini .rar,.card.mini .typeico,.card.mini .costs{display:none}
.card.mini .nameplate{top:auto;bottom:1.9em;padding:.25em .3em}
.card.mini .nameplate b{font-size:1em}.card.mini .nameplate small{display:none}
.card.mini .shade{background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.85) 100%)}
.card.mini .stat{font-size:1.5em;bottom:-.1em}
.card.micro .rules,.card.micro .rar,.card.micro .typeico,.card.micro .costs,.card.micro .nameplate small{display:none}
.card.micro .nameplate{top:auto;bottom:.5em;left:.4em;right:.4em;padding:.2em .2em}.card.micro .nameplate b{font-size:.95em}
.card.micro .shade{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%)}
.card.back{background:linear-gradient(145deg,#2b3d45,#0d1519)}
@keyframes foil{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.35)}}

/* ============================================================ EFFETS GÉNÉRIQUES */
@keyframes shake{0%,100%{transform:translate(0,0)}15%{transform:translate(-9px,3px)}30%{transform:translate(8px,-4px)}45%{transform:translate(-6px,-2px)}60%{transform:translate(5px,3px)}80%{transform:translate(-2px,1px)}}
@keyframes shakeBig{0%,100%{transform:translate(0,0)}10%{transform:translate(-18px,6px)}25%{transform:translate(16px,-8px)}40%{transform:translate(-12px,-4px)}55%{transform:translate(10px,6px)}75%{transform:translate(-5px,2px)}}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}15%{opacity:1;transform:translate(-50%,-10px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-90px) scale(1)}}
@keyframes ring{0%{opacity:.9;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
@keyframes flash{0%{opacity:0}20%{opacity:.85}100%{opacity:0}}
@keyframes slamIn{0%{opacity:0;transform:scale(2.4)}18%{opacity:1;transform:scale(.96)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
@keyframes popIn{0%{opacity:0;transform:scale(.3) translateY(-50px)}60%{opacity:1;transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes dissolve{0%{filter:none;opacity:1;transform:scale(1)}40%{filter:brightness(2) contrast(1.2) blur(1px);transform:scale(1.04)}100%{filter:brightness(0) blur(8px);opacity:0;transform:scale(.8) translateY(20px)}}
@keyframes spot{0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-4deg)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(1deg)}22%{transform:translate(-50%,-50%) scale(1) rotate(0)}82%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9) translateY(-30px)}}
@keyframes coin{0%{transform:translate(-50%,-50%) rotateY(0) scale(.5);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-50%) rotateY(1800deg) scale(1.2)}}
@keyframes breathe{0%,100%{transform:scale(1.04) translateY(0)}50%{transform:scale(1.09) translateY(-6px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 .6em .1em var(--gold)}50%{box-shadow:0 0 1.4em .3em var(--gold)}}
@keyframes targetPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,214,120,.0),0 0 18px 4px rgba(255,214,120,.55)}50%{box-shadow:0 0 0 5px rgba(255,214,120,.5),0 0 34px 10px rgba(255,214,120,.9)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ken{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.18) translate(-1.5%,-1%)}}
@keyframes mist{from{background-position:0 0}to{background-position:1400px 0}}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:1}50%{opacity:.55}53%{opacity:1}88%{opacity:.8}90%{opacity:1}}
.shaking{animation:shake .45s ease}.shaking-big{animation:shakeBig .6s ease}