.card {
  isolation: isolate;
  border: 1px solid #a8c8cc;
  padding: 6px;
  background:
    linear-gradient(115deg, transparent 18%, #d7ffff55 27%, transparent 36%) -180px 0/150px 100% no-repeat,
    linear-gradient(145deg, #bdd8dc, #37515b 28%, #0a171e 55%, #78949a);
  box-shadow: 0 12px 26px #000c, inset 0 0 0 2px #071015, inset 0 0 0 3px #b9d9dc55;
}
.card:hover { background-position: 230px 0, 0 0; transition: transform .2s, background-position .65s; }
.card.marked{outline:2px solid #75fff0;outline-offset:-5px;box-shadow:0 0 28px #42e9d788,0 12px 26px #000c}.card.marked::after{content:"✦ 刻印";color:#8ffff3;font-size:10px;letter-spacing:.08em;text-shadow:0 0 9px #55fff0}
.card::after {
  content: "◆";
  position: absolute;
  right: 9px;
  bottom: 8px;
  z-index: 3;
  color: #b8d7db77;
  font-size: 10px;
  text-shadow: 0 0 5px currentColor;
  pointer-events: none;
}
.cardInner { box-shadow: inset 0 0 22px #2aa4b31c, 0 0 0 1px #020607; }
.card .art { position: relative; text-shadow: 0 4px 8px #000, 0 0 18px #67e9ff66; }
.card .art::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #8fc7cd44;
  clip-path: polygon(0 0,28% 0,32% 4%,68% 4%,72% 0,100% 0,100% 100%,72% 100%,68% 96%,32% 96%,28% 100%,0 100%);
}
.card.uncommon {
  border-color: #8ee6df;
  background: linear-gradient(125deg,#d8fffb,#168f91 20%,#063b45 48%,#64e3d5 72%,#123841);
  box-shadow: 0 0 18px #50e6d044, 0 12px 26px #000c, inset 0 0 0 2px #031416;
}
.uncommon .cardInner { border-color: #85eee4; background: linear-gradient(#08272d,#061317); }
.uncommon .art { background: radial-gradient(circle,#187c80,#03161c 72%); }
.uncommon::after { content: "✧"; color: #9afff2; }
.card.rare {
  border: 2px solid #fff0a4;
  background: linear-gradient(115deg,transparent 15%,#fffbd8cc 27%,transparent 39%) -200px 0/180px 100% no-repeat, conic-gradient(from 35deg,#6e4305,#ffe88b,#8f5b0d,#fff4b0,#593300,#d9a62d,#6e4305);
  box-shadow: 0 0 12px #ffe88b, 0 0 30px #e2a92966, 0 14px 30px #000d, inset 0 0 0 2px #4d2e04;
  animation: rareAura 2.8s ease-in-out infinite;
}
.card.rare:hover { background-position: 240px 0, 0 0; }
.rare .cardInner { border: 1px solid #ffe99a; box-shadow: inset 0 0 28px #e5ad2138, 0 0 0 2px #593b08; }
.rare .art { background: radial-gradient(circle at 50% 45%,#a97b25,#211304 72%); text-shadow: 0 0 22px #ffe076; }
.rare::after { content: "✦ ✦"; color: #fff1a1; font-size: 11px; }
.card.abyss {
  border: 2px solid #a9fffb;
  background: conic-gradient(from var(--abyss-turn,0deg),#55fff0,#3f258d,#070519,#d05ce6,#67e9ff,#241058,#55fff0);
  box-shadow: 0 0 14px #6dfcff,0 0 34px #a64fff88,0 14px 32px #000e,inset 0 0 0 2px #08031b;
  animation: abyssAura 2.2s ease-in-out infinite;
}
.abyss .cardInner { border-color:#c1fffb; background:linear-gradient(165deg,#160d38,#050311 68%); box-shadow:inset 0 0 32px #7b3fbe66,0 0 0 2px #1d0c45; }
.abyss .art { background:radial-gradient(circle,#693295,#09051e 70%); text-shadow:0 0 25px #87fff7,0 0 12px #e471ff; }
.abyss::after { content:"☾ ✦"; color:#a9fffb; font-size:12px; }
.rare .cost { background:radial-gradient(#fffbd1,#e6b938 58%,#654100 62%); box-shadow:0 0 12px #ffe56e; }
.abyss .cost { background:radial-gradient(#d7fffc,#7b6ee9 48%,#26134f 66%); color:#fff; box-shadow:0 0 13px #79fff4; }
.card .cost{z-index:20;width:30px;height:30px;font-size:15px;pointer-events:none}
@keyframes rareAura { 50% { filter:brightness(1.12); box-shadow:0 0 18px #fff3a5,0 0 38px #e2a92988,0 14px 30px #000d,inset 0 0 0 2px #4d2e04; } }
@keyframes abyssAura { 50% { filter:hue-rotate(18deg) brightness(1.15); box-shadow:0 0 20px #85fffa,0 0 44px #b54fffaa,0 14px 32px #000e,inset 0 0 0 2px #08031b; } }
@media (prefers-reduced-motion: reduce) { .card.rare,.card.abyss { animation:none; } }

/* Each card keeps its own readable little scene across battle, rewards and the codex. */
.card-art,.codex-art,.reveal-art,.shop-card-art{
  --art1:#1a7381;--art2:#03131c;--glow:#72fff2;
  position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;
  background:
    radial-gradient(circle at 72% 22%,color-mix(in srgb,var(--glow) 65%,transparent) 0 2%,transparent 18%),
    radial-gradient(ellipse at 50% 112%,var(--art1) 0 18%,transparent 54%),
    linear-gradient(155deg,var(--art1),var(--art2) 68%)!important;
}
.plush-photo-art{
  background-image:linear-gradient(180deg,transparent 58%,#01070d99 100%),var(--card-photo)!important;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
  box-shadow:inset 0 0 22px #0008,0 0 12px #72fff244;
}
.plush-photo-art>span{display:none!important}
.card-art::before,.codex-art::before,.reveal-art::before,.shop-card-art::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.66;
  background:repeating-radial-gradient(ellipse at 50% 115%,transparent 0 12px,#bfffff18 13px 14px,transparent 15px 26px);
  transform:perspective(120px) rotateX(62deg) scale(1.45);
}
.card-art.plush-photo-art::before,.codex-art.plush-photo-art::before,.reveal-art.plush-photo-art::before,.shop-card-art.plush-photo-art::before,.mini-card-art.plush-photo-art::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:1;transform:none;
  background:linear-gradient(180deg,transparent 55%,#01070db5 100%),radial-gradient(circle at 50% 45%,transparent 48%,#01070d72 100%);
}
.card-art>span,.codex-art>span,.reveal-art>span,.shop-card-art>span{
  position:relative;z-index:2;font-size:clamp(38px,5vw,64px);filter:drop-shadow(0 7px 5px #000a) drop-shadow(0 0 12px var(--glow));
  animation:cardArtFloat 3.4s ease-in-out infinite;
}
[data-art-type="attack"]{--art1:#7d2634;--art2:#10070b;--glow:#ffb178}
[data-art-type="block"]{--art1:#17617c;--art2:#03121c;--glow:#87efff}
[data-art-type="counter"]{--art1:#6d5330;--art2:#071820;--glow:#ffe19a}
[data-art-type="poison"]{--art1:#6d267e;--art2:#13051d;--glow:#ef91ff}
[data-art-type="heal"]{--art1:#226b5a;--art2:#041713;--glow:#95ffd6}
[data-art-type="flow"]{--art1:#176c91;--art2:#030f23;--glow:#89d9ff}
[data-art-type="power"]{--art1:#785b1b;--art2:#171005;--glow:#ffe66c}
[data-card-art="school"]>span,[data-card-art="sharkrush"]>span{filter:drop-shadow(-12px 6px 0 #d6ffff66) drop-shadow(12px -4px 0 #61d8e855) drop-shadow(0 0 12px var(--glow))}
[data-card-art="electric"]>span{animation:cardArtZap .7s steps(2) infinite}
[data-card-art="current"]::after,[data-card-art="tsunami"]::after,[data-card-art="razorcurrent"]::after{content:"≈ ≈ ≈";position:absolute;inset:auto 0 6%;color:#c5ffff66;font-size:24px;letter-spacing:.3em;animation:artCurrent 2s linear infinite}
[data-card-art="ink"]::after,[data-card-art="shadoweel"]::after,[data-card-art="voidjaw"]::after{content:"";position:absolute;width:84px;height:84px;border-radius:50%;background:#03020a88;box-shadow:0 0 30px #8b52d5;animation:artPulse 2.4s ease-in-out infinite}
[data-card-art="heal"]::after,[data-card-art="cleaner"]::after{content:"✦  ✧";position:absolute;color:#c7fff2;animation:artRise 2.2s ease-in infinite}
[data-card-art="scale"]::after,[data-card-art="shell"]::after,[data-card-art="tidewall"]::after,[data-card-art="abyssarmor"]::after{content:"⬡";position:absolute;font-size:82px;color:#bdfcff2b;text-shadow:0 0 15px #82fff6;animation:artPulse 2.5s ease-in-out infinite}
.codex-art{height:112px;border-bottom:1px solid #628089}.codex-art>span{font-size:58px}.reveal-art{height:132px;margin:-8px -8px 12px;border-radius:7px}.shop-card-art{width:54px;height:54px;border:1px solid #4d737b;border-radius:8px;grid-row:1/4}.shop-card-art>span{font-size:29px}.shop-card-art+div{min-width:0}
@keyframes cardArtFloat{50%{transform:translateY(-5px) rotate(-3deg);filter:drop-shadow(0 10px 6px #0008) drop-shadow(0 0 20px var(--glow))}}
@keyframes cardArtZap{50%{transform:translate(2px,-3px) scale(1.08);filter:brightness(1.7) drop-shadow(0 0 20px #fff77a)}}
@keyframes artCurrent{to{transform:translateX(28px)}}@keyframes artPulse{50%{transform:scale(1.18);opacity:.35}}@keyframes artRise{to{transform:translateY(-55px);opacity:0}}
@media(prefers-reduced-motion:reduce){.card-art>span,.codex-art>span,.reveal-art>span,.card-art::after,.codex-art::after{animation:none!important}}
.card-codex-panel{width:min(96vw,980px);max-height:92vh;text-align:left}.card-codex-head{position:sticky;top:-22px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-12px -8px 8px;padding:12px;background:#07121bf2;border-bottom:1px solid #41636c}.card-codex-head h2{margin:0;text-align:left}.card-codex-head p{margin:3px 0!important;font-size:11px;line-height:1.4!important}.card-codex-head small{color:#77aaa9;letter-spacing:.15em}.codex-filters{position:sticky;top:80px;z-index:4;display:flex;gap:5px;padding:7px 0;background:#07121bf2;overflow:auto}.codex-filters button{border:1px solid #41616a;border-radius:999px;background:#081820;color:#a9c3c5;padding:6px 11px;white-space:nowrap;cursor:pointer}.codex-filters button.on{border-color:#e1bd65;background:#3e3013;color:#ffe7a2}.card-codex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:5px 0}.codex-card{position:relative;overflow:hidden;padding:0;border:1px solid #648087;border-radius:10px;background:#07151c;color:#dcebed;text-align:left;cursor:pointer;box-shadow:0 8px 20px #0008}.codex-card.uncommon{border-color:#65d7cc}.codex-card.rare{border-color:#e7c560;box-shadow:0 0 15px #d6a73944,0 8px 20px #0008}.codex-card.abyss{border-color:#b27cec;box-shadow:0 0 18px #a348d755,0 8px 20px #0008}.codex-card-body{position:relative;padding:10px}.codex-card-body>b{display:block;padding-left:30px;color:#f0d58c;font-size:13px;min-height:22px}.codex-card-body>small{display:block;color:#78a9ae;font-size:9px}.codex-card-body>p{min-height:58px;margin:7px 0!important;color:#bdd0d2!important;font-size:11px;line-height:1.5!important}.codex-cost{position:absolute;top:7px;left:8px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#54dfd2;color:#02110f;font:900 13px Cinzel}.codex-upgrade{display:none;margin-top:5px;padding:7px;border:1px solid #aa8739;border-radius:7px;background:#261d08;font-size:10px;line-height:1.45;color:#ffe7a1}.codex-upgrade strong{display:block;color:#f2c95e}.codex-card.show-upgrade .codex-upgrade{display:block}.codex-card.show-upgrade{outline:2px solid #f0cb6d;outline-offset:-3px}
.codex-upgraded-mark{display:inline-block;margin-right:4px;padding:1px 5px;border:1px solid #d8ad45;border-radius:999px;background:#3b2b0d;color:#ffe08a;font-style:normal;letter-spacing:.04em}.codex-card.show-upgrade .codex-cost{background:#f0cb6d}.codex-card.show-upgrade .codex-card-body>b{color:#fff0a9}
@media(max-width:760px){.card-codex-panel{padding:13px 8px}.card-codex-head{top:-13px;margin:-5px 0 5px}.card-codex-head p{display:none}.card-codex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.codex-art{height:92px}.codex-art>span{font-size:48px}.codex-card-body{padding:8px}.codex-card-body>b{font-size:11px}.codex-card-body>p{font-size:10px;min-height:54px}.codex-filters{top:61px}}
.mini-card-art{--art1:#17617c;--art2:#03121c;--glow:#87efff;position:relative;isolation:isolate;height:72px;margin:-10px -10px 8px;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid #52747c;background:radial-gradient(circle at 70% 20%,var(--glow) 0 2%,transparent 20%),linear-gradient(155deg,var(--art1),var(--art2) 68%)}.mini-card-art>span{font-size:38px;filter:drop-shadow(0 6px 5px #000a) drop-shadow(0 0 10px var(--glow))}.mini-card-art[data-art-type="attack"]{--art1:#7d2634;--art2:#10070b;--glow:#ffb178}.mini-card-art[data-art-type="poison"]{--art1:#6d267e;--art2:#13051d;--glow:#ef91ff}.mini-card-art[data-art-type="heal"]{--art1:#226b5a;--art2:#041713;--glow:#95ffd6}.mini-card-art[data-art-type="power"]{--art1:#785b1b;--art2:#171005;--glow:#ffe66c}