:root {
  --pixel: 'DotGothic16', 'MS Gothic', 'Osaka-Mono', monospace;
  --ink: #ece2c6;          
  --ink-dim: #9c927c;
  --void: #07060a;
  --iron: #15131b;
  --iron-2: #1e1b26;
  --rim: #5c5466;          
  --brass: #b8945a;        
  --crimson: #d23a5e;      
  --crimson-deep: #6e1430;
  --mana: #5fb2ff;
  --dither: repeating-conic-gradient(rgba(255,255,255,.025) 0 25%, transparent 0 50%) 0 0 / 4px 4px;
}


.card {
  --cut: calc(var(--cw) * .07);
  --edge: var(--rim);
  --kind: var(--ink-dim);
  position: relative; flex: none; width: var(--cw); aspect-ratio: 63 / 88; padding: 0;
  border: 0; background: var(--void); cursor: pointer; color: var(--ink);
  font-family: var(--pixel); font-size: calc(var(--cw) / 10); text-align: left;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: transform .2s cubic-bezier(.3,1.4,.5,1), filter .2s;
}

.card[data-kind="攻撃"] { --kind: #e2546f; --edge: #a8384f; }
.card[data-kind="防御"] { --kind: #6aa8e6; --edge: #5a82ae; }
.card[data-kind="魔法"] { --kind: #b48cf0; --edge: #8462c4; }
.card[data-kind="召喚獣"] { --kind: #e8c070; --edge: #d8a848; }
.card.junk-card { --edge: #3a3540; }


.card[data-kind="召喚獣"] .card-face {
  background: var(--dither), linear-gradient(180deg, #2a2214, #15110a 60%, #0c0a06);
  box-shadow: inset 0 0 0 2px var(--void), inset 0 0 0 4px var(--edge), inset 0 0 0 6px var(--void), inset 0 0 0 7px #8a6a2a;
}
.card[data-kind="召喚獣"] .card-name { color: #ffe6a8; border-bottom-color: #8a6a2a; }
.card[data-kind="召喚獣"] .card-face::before { inset: 4px; }


.card.r2::after, .card.r3::after {
  content: ''; position: absolute; z-index: 2; left: 50%; bottom: 1.6%; width: 7%; aspect-ratio: 1; transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #8cc4f2;
}
.card.r3::after { background: #ff9cd0; box-shadow: 0 0 6px #ff9cd0; }


.card-face {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr; padding: 7% 7% 6%;
  background: var(--dither), linear-gradient(180deg, var(--iron-2), var(--iron) 60%, #0c0b10);
  clip-path: inherit;
  box-shadow: inset 0 0 0 2px var(--void), inset 0 0 0 3px var(--edge), inset 0 0 0 5px var(--void), inset 0 0 0 6px rgba(255,255,255,.04);
}

.card-face::before {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  background:
    linear-gradient(var(--edge), var(--edge)) left 0 top 0 / 3px 3px no-repeat,
    linear-gradient(var(--edge), var(--edge)) right 0 top 0 / 3px 3px no-repeat,
    linear-gradient(var(--edge), var(--edge)) left 0 bottom 0 / 3px 3px no-repeat,
    linear-gradient(var(--edge), var(--edge)) right 0 bottom 0 / 3px 3px no-repeat;
}

.card-art {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px var(--void), 0 0 0 2px var(--edge);
  border-top: 3px solid var(--a);   
}
.card-art svg, .card-art img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.card-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); pointer-events: none; }

.card-name {
  position: relative; z-index: 1; margin: 4% 0 0; padding: .18em .2em .12em; text-align: center;
  font-size: 1.08em; letter-spacing: .02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink); background: var(--void); border-bottom: 1px solid var(--edge);
  text-shadow: 1px 1px 0 #000;
}
.card-text {
  margin: 4% 0 0; padding: .3em .35em; display: grid; align-content: center; justify-items: center; gap: .15em; overflow: hidden;
  font-size: .92em; line-height: 1.32; text-align: center; white-space: pre-line; color: #d8ceb4;
  background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.card-text small { font-size: .78em; letter-spacing: .2em; color: var(--kind); }
.card-text span { display: block; }
.card-text em { font-style: normal; color: #ff7a96; }


.card-cost {
  position: absolute; z-index: 2; top: 3.5%; left: 4%; width: 25%; aspect-ratio: 1; display: grid; place-items: center;
  font-size: 1.55em; line-height: 1; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000;
  background: linear-gradient(180deg, #2a4f86, #142a4e); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.card-cost::before { content: ''; position: absolute; inset: 2px; z-index: -1; clip-path: inherit; background: linear-gradient(180deg, #3d78c4, #1a3866); }
.card-cost.down { background: linear-gradient(180deg, #2f8a52, #134a28); }
.card-cost.down::before { background: linear-gradient(180deg, #4fc479, #1d6a3a); }

.card-attr {
  position: absolute; z-index: 2; top: 5.5%; right: 6%; width: 15%; aspect-ratio: 1; display: grid; place-items: center;
  font-size: .78em; color: #fff; background: var(--ad); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--a); text-shadow: 1px 1px 0 #000;
}
.card-lv, .card-boost {
  position: absolute; z-index: 2; bottom: 4.5%; padding: .05em .35em; font-size: .78em; line-height: 1.3; background: var(--void); box-shadow: 0 0 0 1px var(--edge);
}
.card-lv { right: 6%; color: #ffd98a; }
.card-boost { left: 6%; color: #d6b3ff; }

.card.off { filter: grayscale(.75) brightness(.55); cursor: not-allowed; }
.junk-card .card-face { background: var(--dither), linear-gradient(180deg, #1a1a1a, #0a0a0a); }


.card.long .card-art { aspect-ratio: 2 / 1; }
.card.xlong .card-art { aspect-ratio: 2.3 / 1; }
.card.long .card-text { font-size: .84em; line-height: 1.25; }
.card.xlong .card-text { font-size: .74em; line-height: 1.2; padding: .22em .28em; }


.unit-card .card-art { aspect-ratio: 1; }
.unit-card.long .card-art { aspect-ratio: 3 / 2; }
.unit-card.xlong .card-art { aspect-ratio: 2 / 1; }
.unit-card .card-art img { image-rendering: pixelated; object-position: 50% 30%; filter: none; }


@media (hover: hover) {
  .card:not(.off):hover { --edge: #f2e6c8; }
}


.card.evo { --edge: #ffe08a; }
.card.evo .card-face { box-shadow: inset 0 0 0 2px var(--void), inset 0 0 0 4px var(--edge), inset 0 0 0 6px var(--void), inset 0 0 0 7px #d8a848, inset 0 0 14px rgba(255,210,120,.25); }
.card.evo .card-name { color: #ffe0a0; }
.card-text em + em { margin-left: .5em; }


.card { clip-path: none; background: transparent; }
.card-face {
  inset: 0; clip-path: polygon(4% 0, 96% 0, 100% 3%, 100% 97%, 96% 100%, 4% 100%, 0 97%, 0 3%);
  padding: 11% 10% 9%;
  box-shadow: none !important;
}
.card-face::before { display: none; }
.card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url(art/frame_attack.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
.card[data-kind="防御"]::before { background-image: url(art/frame_defense.png); }
.card[data-kind="魔法"]::before { background-image: url(art/frame_magic.png); }
.card[data-kind="召喚獣"]::before { background-image: url(art/frame_guardian.png); }
.card.junk-card::before { filter: grayscale(1) brightness(.6); }
.card.evo::before { filter: brightness(1.15) saturate(1.2) drop-shadow(0 0 4px rgba(255,210,120,.5)); }
.card-cost, .card-attr, .card-lv, .card-boost { z-index: 3; }
.card-cost { top: 4%; left: 5%; }
.card-attr { top: 6%; right: 8%; }
.card-lv { right: 9%; bottom: 5%; }
.card-boost { left: 9%; bottom: 5%; }
.card.r2::after, .card.r3::after { z-index: 3; bottom: 2.6%; }

.card-art { box-shadow: 0 0 0 1px var(--void); }
@media (hover: hover) {
  .card:not(.off):hover { --edge: inherit; filter: brightness(1.12); }
}


.card-art .card-lv, .card-art .card-boost { bottom: 0; z-index: 2; font-size: .74em; box-shadow: 0 0 0 1px var(--void), 0 0 0 2px var(--edge, #8a6a2a); }
.card-art .card-lv { right: 0; left: auto; }
.card-art .card-boost { left: 0; right: auto; }