.cardback-art { --back:#12d9f4; position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5%; overflow:hidden; container-type:inline-size; color:var(--back); border:3px solid var(--back); background:repeating-linear-gradient(135deg,transparent 0 25px,#12d9f419 26px 27px),radial-gradient(ellipse,#163541,#070d18 70%); clip-path:polygon(8% 0,92% 0,100% 6%,100% 94%,92% 100%,8% 100%,0 94%,0 6%); box-shadow:inset 0 0 25px #000; pointer-events:none; }
.cardback-art::after { content:''; position:absolute; inset:5%; border:1px solid currentColor; opacity:.65; clip-path:polygon(0 0,30% 0,30% 2%,70% 2%,70% 0,100% 0,100% 100%,0 100%); }
.cardback-art b { position:relative; font:900 36cqw/1 sans-serif; text-shadow:0 0 15px currentColor; }.cardback-art strong { position:relative; font:900 10cqw var(--display); letter-spacing:.05em; }.cardback-art small { position:relative; font:900 3.5cqw var(--display); letter-spacing:.12em; }
.back-orbit { position:absolute; width:72%; aspect-ratio:1; border:2px solid currentColor; transform:rotate(45deg); opacity:.45; box-shadow:0 0 20px currentColor; }
.cardback-art[data-back="riot"] { --back:#b7f20c; background:repeating-linear-gradient(135deg,#b7f20c33 0 13px,transparent 14px 30px),#101711; }.cardback-art[data-back="riot"] .back-orbit { border-width:8px; border-style:dashed; }
.cardback-art[data-back="oracle"] { --back:#b888ff; background:repeating-radial-gradient(ellipse at center,transparent 0 20px,#a767ff33 21px 22px),#140d28; }.cardback-art[data-back="oracle"] .back-orbit { border-radius:50%; border-width:3px; }
.cardback-art[data-back="sovereign"] { --back:#ffdb73; background:repeating-conic-gradient(from 45deg at 50% 42%,#ffdb7319 0 2deg,transparent 2deg 30deg),#131216; }.cardback-art[data-back="sovereign"] .back-orbit { border:5px double currentColor; }
.custom-card-back { background:none!important; border:0!important; }.custom-card-back::before,.custom-card-back::after { display:none!important; }
#backShop { margin-top:25px; border-top:1px solid #607788; padding-top:15px; }#backShop>h3 { font:900 26px var(--display); color:#ffdc38; }#backShop>p { color:#a8c1d1; font-size:12px; }#backShopGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }#backShopGrid article { text-align:center; background:#0b1621; border:1px solid #28475b; padding:12px; }.back-shop-preview { position:relative; display:block; width:100%; aspect-ratio:2/3; border:0; background:none; cursor:zoom-in; }#backShopGrid h4 { color:#e3f2ff; margin:12px 0 6px; }#backShopGrid p { min-height:40px; font-size:11px; color:#9fbbce; }#backShopGrid .button { width:100%; padding:8px; font-size:11px; }#backShopGrid .button:disabled { opacity:.5; }
#backPreview { background:#07121d; color:#e6f4ff; border:1px solid #12d9f4; padding:24px; text-align:center; max-height:95dvh; overflow:auto; }#backPreview::backdrop { background:#020712e8; }#backPreviewArt { position:relative; width:min(330px,70vw,45vh); aspect-ratio:2/3; margin:20px auto; }
#playerDeckBack { position:relative; width:42px; height:63px; margin-left:12px; border:0; padding:0; background:none; pointer-events:auto; cursor:zoom-in; }
@media(max-width:650px) { #backShopGrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Fenêtres sur la planche approuvée : aucun dessin régénéré ou texte superposé. */
.cardback-art.illustrated-back[data-back] { display:block; background:#080d12; border:0; box-shadow:none; clip-path:polygon(5% 0,95% 0,100% 3%,100% 97%,95% 100%,5% 100%,0 97%,0 3%); }
.cardback-art.illustrated-back::after { display:none; }
.illustrated-back img { position:absolute; width:423.25%; height:127.61%; max-width:none; top:-10.03%; left:var(--atlas-left); pointer-events:none; user-select:none; }
.illustrated-back[data-back="genesis"] { --atlas-left:-6%; }
.illustrated-back[data-back="riot"] { --atlas-left:-110.75%; }
.illustrated-back[data-back="oracle"] { --atlas-left:-214.5%; }
.illustrated-back[data-back="sovereign"] { --atlas-left:-319.5%; }
.back-shop-preview { aspect-ratio:400/728; transition:transform .2s ease,filter .2s ease; }
.back-shop-preview:hover { transform:translateY(-5px); filter:brightness(1.1); }
#backPreviewArt { aspect-ratio:400/728; width:min(360px,70vw,43vh); }
@media(prefers-reduced-motion:reduce) { .back-shop-preview { transition:none; } }