/* Cards. All dimensions in em: base card = 30em x 42em. Size classes set font-size. */
.card { position: relative; width: 30em; height: 42em; font-size: 10px; flex-shrink: 0; --rar: #b7b0c2; --rar2: #6e6878; --type-a: #4a0f22; --type-b: #170610; --ribbon: #6b1430; }
.card.size-sm { font-size: 5px; }
.card.size-md { font-size: 7.333px; }
.card.size-hand { font-size: 8px; }
.card.size-lg { font-size: 11px; }
.card.size-xl { font-size: 14px; }

.card.rar-uncommon { --rar: #ff86b8; --rar2: #8e2457; }
.card.rar-rare { --rar: #ffd77a; --rar2: #9c6a1c; }
.card.rar-special { --rar: #7dffe0; --rar2: #1b7a66; }
.card.rar-curse { --rar: #a065c8; --rar2: #2b0f3a; }
.card.type-skill { --type-a: #10314a; --type-b: #060f18; --ribbon: #164a6e; }
.card.type-power { --type-a: #4a3410; --type-b: #170f04; --ribbon: #7a5514; }
.card.type-status { --type-a: #2c2c34; --type-b: #101014; --ribbon: #45454f; }
.card.type-curse { --type-a: #2b0d36; --type-b: #0c0410; --ribbon: #3d1150; }

.card-frame { position: absolute; inset: 0; border-radius: 2.2em; overflow: hidden; background: linear-gradient(160deg, var(--rar) 0%, var(--rar2) 45%, var(--rar) 100%); padding: .45em; box-shadow: 0 1.2em 2.4em rgba(0,0,0,.6), 0 0 0 .12em rgba(0,0,0,.8); }
.card-bg { position: absolute; inset: .45em; border-radius: 1.8em; background: radial-gradient(ellipse at 50% 30%, var(--type-a) 0%, var(--type-b) 75%); }
.card-bg::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 .5em, transparent .5em 1.2em); box-shadow: inset 0 0 3em rgba(0,0,0,.7); }
.card-bg::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: .2em; height: .35em; border-radius: 1em; background: var(--char-color); opacity: .85; box-shadow: 0 0 1em var(--char-color); }

.card-art { position: absolute; left: 2.1em; right: 2.1em; top: 6.4em; height: 17.2em; overflow: hidden; border-radius: 13em 13em 1.2em 1.2em / 8.5em 8.5em 1.2em 1.2em; background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--char-color) 55%, #000) 0%, #0b0610 80%); }
.card-art img, .card-art .card-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-art > svg { width: 100%; height: 100%; display: block; }
.card-art-frame { position: absolute; left: 2.1em; right: 2.1em; top: 6.4em; height: 17.2em; border-radius: 13em 13em 1.2em 1.2em / 8.5em 8.5em 1.2em 1.2em; box-shadow: inset 0 0 0 .3em var(--rar), inset 0 0 2em rgba(0,0,0,.7); pointer-events: none; }
.card-art-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.card-art-ph span { font-family: var(--f-display); font-size: 9em; color: var(--char-color2); opacity: .35; text-shadow: 0 0 .3em var(--char-color); }

.card-name { position: absolute; left: 1.2em; right: 1.2em; top: 1.5em; height: 4.2em; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, color-mix(in srgb, var(--ribbon) 85%, #fff 15%), var(--ribbon) 50%, color-mix(in srgb, var(--ribbon) 70%, #000)); border-radius: .6em; box-shadow: 0 .3em .8em rgba(0,0,0,.6), inset 0 0 0 .15em rgba(255,255,255,.12); padding: 0 1.2em 0 5em; }
.card.has-stars .card-name { padding-right: 4.6em; }
.card-name span { font-family: var(--f-head); font-weight: 800; font-size: 2.35em; color: #fff4e6; text-shadow: 0 .08em .15em #000, 0 0 .6em rgba(0,0,0,.6); white-space: nowrap; letter-spacing: .02em; }
.card.upgraded .card-name span { color: #b9ff8f; }
.card-type { position: absolute; left: 50%; top: 15.07em; transform: translateX(-50%); font-family: var(--f-head); font-size: 1.5em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); background: rgba(8,3,10,.9); border: .1em solid var(--rar); border-radius: 1em; padding: .12em 1em; z-index: 2; }
.card-desc { position: absolute; left: 2.1em; right: 2.1em; top: 25.2em; bottom: 2.2em; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); border-radius: .8em; border: .1em solid rgba(255,255,255,.06); padding: .6em 1em; }
.card-desc-inner { font-size: 2.15em; line-height: 1.18; text-align: center; color: #f6eaf0; text-shadow: 0 .06em .1em #000; }
.card-desc-inner .kw { color: #ffd98a; }
.card-desc-inner .num { font-size: 1.08em; }

.card-cost { position: absolute; left: -.4em; top: -.4em; width: 6.4em; height: 6.4em; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #ffe2b0 0%, var(--passion) 40%, #8c2208 100%); box-shadow: 0 0 0 .3em #1a0a06, 0 0 0 .5em var(--rar), 0 .5em 1em rgba(0,0,0,.6), 0 0 1.4em rgba(255,122,61,.6); z-index: 3; }
.card.type-skill .card-cost { background: radial-gradient(circle at 35% 30%, #ffe2b0 0%, var(--passion) 40%, #8c2208 100%); }
.card-cost span { font-family: var(--f-num); font-weight: 700; font-size: 4em; color: #fff; text-shadow: 0 .05em 0 #5a1404, 0 0 .2em rgba(0,0,0,.6); -webkit-text-stroke: .02em #4a1003; }
.card-cost.cheaper span { color: #b9ff8f; }
.card-cost.pricier span { color: #ff8f8f; }
.card-stars { position: absolute; right: -.2em; top: -.2em; height: 4.4em; min-width: 4.4em; padding: 0 .6em; border-radius: 2.2em; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #fff6d6, #e8c170 50%, #7a5514); box-shadow: 0 0 0 .25em #1a0a06, 0 0 1.2em rgba(232,193,112,.7); z-index: 3; }
.card-stars span { font-family: var(--f-num); font-weight: 700; font-size: 2.4em; color: #2a1408; }
.card-infusion, .card-hex { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--f-head); font-size: 1.4em; font-weight: 700; padding: .1em .9em; border-radius: 1em; white-space: nowrap; z-index: 3; bottom: .64em; }
.card-infusion { background: linear-gradient(90deg, #2a7a8e, #46c4d8); color: #e6fdff; box-shadow: 0 0 .8em rgba(70,196,216,.7); }
.card-hex { background: linear-gradient(90deg, #4a1060, #8a2aa6); color: #f5d9ff; bottom: 1.86em; }
.card-shine { position: absolute; inset: 0; border-radius: 2.2em; pointer-events: none; overflow: hidden; }
.card-shine::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,240,200,.22), transparent); transform: rotate(20deg); animation: shine 4.5s infinite; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.card.upgrade-preview .card-frame { box-shadow: 0 0 0 .3em #9dff7a, 0 0 2.5em rgba(157,255,122,.6); }

/* in hand */
.card.in-hand { position: absolute; left: 0; top: 0; transition: transform .3s var(--ease-out), opacity .3s ease, filter .2s; cursor: pointer; transform-origin: 50% 100%; will-change: transform; }
.card.in-hand.dragging { transition: none; }
.card.in-hand.playable .card-frame { box-shadow: 0 0 0 .3em rgba(125,255,215,.85), 0 0 2.4em rgba(80,255,200,.55), 0 1.2em 2.4em rgba(0,0,0,.6); }
.card.in-hand.selected .card-frame, .card.in-hand.will-play .card-frame { box-shadow: 0 0 0 .35em #ffd1e4, 0 0 3em rgba(255,79,139,.85); }
.card.in-hand:not(.playable) { filter: brightness(.82) saturate(.85); }
.card.leaving { pointer-events: none; transition: transform .55s var(--ease), opacity .55s ease .1s; }
.card.burn { filter: brightness(1.6) sepia(1) hue-rotate(-30deg) saturate(3); transition: transform .6s var(--ease), opacity .6s ease, filter .6s; }