/* カード描画。幅は --cw で指定（既定 M=150px）。比率 600:875 */
.card { --cw: 150px; position: relative; width: var(--cw); height: calc(var(--cw) * 875 / 600); flex: none;
  border-radius: calc(var(--cw) * .045); overflow: hidden; user-select: none; container-type: inline-size;
  box-shadow: 0 calc(var(--cw) * .02) calc(var(--cw) * .06) rgba(0,0,0,.55); background: #111; }
.card-S { --cw: 96px; }
.card-L { --cw: 400px; }
.card > * { position: absolute; }
.card-art { object-fit: cover; background: #222; }
.card-frame, .card-back { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.card-textbg { background: linear-gradient(180deg, #f6efdc, #e9dcbc); }
.fk-trap .card-textbg { background: linear-gradient(180deg, #f3e3e6, #e2c6cc); }
.fk-spell .card-textbg { background: linear-gradient(180deg, #e8f4ea, #cfe5d3); }
.fk-fusion .card-textbg { background: linear-gradient(180deg, #ece6f6, #d6cbea); }
.fk-god .card-textbg { background: linear-gradient(180deg, #2a2418, #15110a); }
.fk-god .card-text { color: #f6e3a8; }

.card-name { left: 8%; right: 15%; display: flex; align-items: center; overflow: hidden;
  font-weight: 900; font-size: 7.2cqw; letter-spacing: -.02em; color: #1b1205; white-space: nowrap;
  text-shadow: 0 0 .3cqw #fff8; }
.card-name span { display: inline-block; transform-origin: left center; }
.fk-spell .card-name, .fk-trap .card-name, .fk-god .card-name { color: #fff; text-shadow: 0 .4cqw .8cqw #000; }
.fk-fusion .card-name, .fk-legend .card-name { color: #2a1640; }
.card-cost { right: 3.5%; top: 2.4%; width: 12.5cqw; height: 12.5cqw; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-impact); font-size: 6.4cqw; color: #fff;
  background: radial-gradient(circle at 35% 30%, #7fd8ff, #1d5fbf 60%, #0b2a63); box-shadow: 0 0 0 .8cqw #fff6, 0 .6cqw 1.2cqw #0008; }
.card-attr { left: 3%; top: 2.6%; width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 5.4cqw; color: #1a1a1a; box-shadow: inset 0 0 0 .6cqw #fff8, 0 .4cqw .8cqw #0008; display: none; }
.card-trib { left: 12%; top: calc(15% - 1cqw); font-size: 5cqw; color: #ffd84a; text-shadow: 0 0 1cqw #000, 0 0 .4cqw #000; letter-spacing: .4cqw; }
.card-text { padding: 2.2cqw 3cqw; color: #1d1608; font-size: 4.1cqw; line-height: 1.38; overflow: hidden; display: flex; flex-direction: column; }
.card-type { font-weight: 900; font-size: 4.2cqw; margin-bottom: .8cqw; }
.card-desc { white-space: pre-wrap; overflow: hidden; }
.card-text.mini .card-type { font-size: 6.4cqw; }
.card-stats { left: 8%; right: 8%; height: 7%; display: flex; justify-content: flex-end; align-items: center; gap: 4cqw;
  font-family: var(--font-impact); font-size: 6.6cqw; color: #fff; text-shadow: 0 .4cqw .8cqw #000, 0 0 .4cqw #000; }
.card-stats i { font-style: normal; font-size: 3.8cqw; margin-right: 1cqw; opacity: .85; }
.card-stats .up { color: #7dffb0; } .card-stats .down { color: #ff7d8f; }
.card-S .card-name, .card-S .card-trib { display: none; }
.card-S .card-cost { width: 18cqw; height: 18cqw; font-size: 10cqw; }
.card-S .card-stats { top: auto !important; bottom: 3%; left: 3%; right: 3%; height: auto; justify-content: space-between;
  font-size: 11.5cqw; letter-spacing: -.03em; background: linear-gradient(180deg, transparent, #000c 40%); padding: 6cqw 3cqw 1cqw; gap: 3cqw; }   /* 4桁どうしでもくっつかない */
.card-S .card-stats i { display: none; }
.card-owned { right: 4%; bottom: 3%; padding: 0 2.5cqw; border-radius: 3cqw; background: #000c; font-weight: 900; font-size: 8cqw; }

/* フォイル（SR以上） */
.card-foil { pointer-events: none; mix-blend-mode: overlay; opacity: .55;
  background: linear-gradient(115deg, transparent 30%, #ff9de6 42%, #9df3ff 50%, #fff7a0 58%, transparent 70%);
  background-size: 250% 250%; animation: foil 4.5s linear infinite; }
.r-UR .card-foil { opacity: .75; }
.r-LG .card-foil, .r-GOD .card-foil { opacity: .85; animation-duration: 3s; }
@keyframes foil { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* イラスト未作成時の代わり */
.art-fallback { display: grid; place-items: center; overflow: hidden; container-type: size; }
.art-fallback span { font-family: var(--font-impact); font-size: 52cqmin; color: #fff; opacity: .85; text-shadow: 0 .04em .12em #0008; }
.card > .art-fallback { position: absolute; }