.cg-card {
    --cg-card-width: 240px;
    --cg-card-height: 340px;
    --cg-card-radius: 14px;
    --cg-card-background: #14151c;
    --cg-card-border: #d8b75a;
    --cg-card-border-width: 4px;
    --cg-card-text: #fff8dc;
    --cg-card-title-background: #2a1710;
    --cg-card-title-size: 18px;
    --cg-card-name-height: 42px;
    --cg-card-image-height: 240px;
    --cg-card-padding: 12px;
    --cg-card-image-fit: cover;
    --cg-card-image-focus-x: 50%;
    --cg-card-image-focus-y: 45%;
    --cg-card-image-zoom: 1;
    --cg-card-glow-opacity: 0.64;
    --cg-card-title-offset-y: 0px;
    --cg-card-cost-size: 38px;
    --cg-card-cost-text-size: 18px;
    --cg-card-cost-offset-x: -12px;
    --cg-card-cost-offset-y: -13px;
    --cg-card-cost-gap: 5px;
    --cg-card-accent: #d8b75a;
    --cg-card-glow: rgba(216, 183, 90, 0.62);
    width: var(--cg-card-width);
    height: var(--cg-card-height);
    box-sizing: border-box;
    color: var(--cg-card-text);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.18)),
        var(--cg-card-background);
    border: var(--cg-card-border-width) solid var(--cg-card-border);
    border-radius: var(--cg-card-radius);
    box-shadow:
        0 0 calc(26px * var(--cg-card-glow-opacity)) var(--cg-card-glow),
        0 16px 30px rgba(20, 24, 22, 0.28);
    overflow: visible;
    font-family: "Segoe UI", "Meiryo", sans-serif;
    display: flex;
    position: relative;
    isolation: isolate;
    align-items: stretch;
    justify-content: stretch;
    font-weight: 700;
    line-height: 1.2;
}

.card.cg-card,
.theme-glass .card.cg-card,
.theme-glass .graveyard-card.cg-card {
    width: var(--cg-card-width);
    height: var(--cg-card-height);
    color: var(--cg-card-text);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.18)),
        var(--cg-card-background);
    border: var(--cg-card-border-width) solid var(--cg-card-border);
    box-shadow:
        0 0 calc(26px * var(--cg-card-glow-opacity)) var(--cg-card-glow),
        0 16px 30px rgba(20, 24, 22, 0.28);
}

.cg-card::before,
.cg-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.cg-card::before {
    z-index: 0;
    opacity: var(--cg-card-glow-opacity);
    background:
        linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, 0.42) 28%, transparent 40% 100%),
        radial-gradient(circle at 18% 18%, var(--cg-card-glow), transparent 30%),
        radial-gradient(circle at 86% 78%, rgba(255, 255, 255, 0.20), transparent 28%);
    mix-blend-mode: screen;
}

.cg-card::after {
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.cg-card-shell,
.card.cg-card-shell,
.theme-glass .card.cg-card-shell,
.theme-glass .graveyard-card.cg-card-shell {
    width: var(--cg-card-width);
    height: var(--cg-card-height);
    display: block;
    position: relative;
    overflow: visible;
    isolation: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.cg-card-shell::before,
.cg-card-shell::after {
    display: none;
}

.cg-card-shell.cg-card-aura {
    --cg-aura-primary: #25aaff;
    --cg-aura-secondary: #7ee8ff;
    --cg-aura-tertiary: #25aaff;
    --cg-aura-edge: clamp(5px, calc(var(--cg-card-width) * 0.08), 12px);
    --cg-aura-blur: clamp(5px, calc(var(--cg-card-width) * 0.07), 11px);
    --cg-aura-opacity: 0.78;
    --cg-aura-scale: 1.04;
    isolation: isolate;
}

.cg-card-shell.cg-card-aura::before,
.cg-card-shell.cg-card-aura::after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.cg-card-shell.cg-card-aura::before {
    inset: calc(var(--cg-aura-edge) * -1);
    border-radius: calc(var(--cg-aura-edge) + 12px);
    background:
        radial-gradient(ellipse at 12% 12%, var(--cg-aura-primary), transparent 32%),
        radial-gradient(ellipse at 88% 12%, var(--cg-aura-tertiary), transparent 32%),
        radial-gradient(ellipse at 50% 2%, var(--cg-aura-secondary), transparent 32%),
        radial-gradient(ellipse at 18% 70%, var(--cg-aura-primary), transparent 34%),
        radial-gradient(ellipse at 82% 70%, var(--cg-aura-tertiary), transparent 34%),
        conic-gradient(
            from -20deg,
            transparent 0deg,
            var(--cg-aura-primary) 60deg,
            var(--cg-aura-secondary) 130deg,
            var(--cg-aura-tertiary) 220deg,
            var(--cg-aura-primary) 300deg,
            transparent 360deg
        );
    filter: blur(var(--cg-aura-blur)) saturate(1.65);
    opacity: var(--cg-aura-opacity);
    animation: cgCardAuraPulse 2.4s ease-in-out infinite;
}

.cg-card-shell.cg-card-aura::after {
    inset: calc(var(--cg-aura-edge) * -0.35);
    border-radius: calc(var(--cg-aura-edge) + 9px);
    background:
        radial-gradient(ellipse at 8% 8%, var(--cg-aura-primary), transparent 30%),
        radial-gradient(ellipse at 92% 8%, var(--cg-aura-tertiary), transparent 30%),
        radial-gradient(ellipse at 50% 0%, var(--cg-aura-secondary), transparent 28%),
        radial-gradient(ellipse at 50% 100%, var(--cg-aura-primary), transparent 24%);
    filter: blur(calc(var(--cg-aura-blur) * 0.45)) saturate(1.75);
    opacity: calc(var(--cg-aura-opacity) * 0.86);
    animation: cgCardAuraFlow 5.6s linear infinite;
}

.cg-card-shell.cg-card-aura-normal {
    --cg-aura-primary: #22a7ff;
    --cg-aura-secondary: #74e8ff;
    --cg-aura-tertiary: #22a7ff;
}

.cg-card-shell.cg-card-aura-inscription {
    --cg-aura-primary: #ff335d;
    --cg-aura-secondary: #ff8652;
    --cg-aura-tertiary: #ff335d;
}

.cg-card-shell.cg-card-aura-both {
    --cg-aura-primary: #9a5cff;
    --cg-aura-secondary: #2aaeff;
    --cg-aura-tertiary: #ff3d69;
    --cg-aura-opacity: 0.82;
}

.cg-card-shell .cg-card-face {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%) scale(var(--cg-card-shell-scale));
    transform-origin: center center;
    pointer-events: none;
}

@keyframes cgCardAuraPulse {
    0%,
    100% {
        opacity: calc(var(--cg-aura-opacity) * 0.62);
        transform: scale(0.985) translateY(1px);
    }

    50% {
        opacity: var(--cg-aura-opacity);
        transform: scale(var(--cg-aura-scale)) translateY(-2px);
    }
}

@keyframes cgCardAuraFlow {
    from {
        transform: rotate(0deg) scale(1.01);
    }

    to {
        transform: rotate(360deg) scale(1.01);
    }
}

.cg-card-shell.cg-card-aura-motion-flow::before {
    animation: cgCardAuraFlow 4.8s linear infinite;
}

.cg-card-shell.cg-card-aura-motion-steady::before,
.cg-card-shell.cg-card-aura-motion-steady::after {
    animation: none;
}

.card.cg-card-shell.place-selected {
    outline: 3px solid #27ae60;
    outline-offset: 2px;
}

.card.cg-card-shell.place-selected.cost-satisfied {
    outline-color: #f39c12;
}

.graveyard-card.cg-card-shell.selected {
    outline: 2px solid #27ae60;
    outline-offset: 2px;
}

.graveyard-card.cg-card-shell:hover {
    outline: 2px solid #27ae60;
    outline-offset: 2px;
}

.graveyard-card.cg-card-shell.selected,
.graveyard-card.cg-card-shell.selected:hover {
    transform: none;
    z-index: 30;
}

.cg-card-frame {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: var(--cg-card-padding);
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
}

.cg-card-name {
    order: 1;
    height: var(--cg-card-name-height);
    min-height: var(--cg-card-name-height);
    border: 1px solid color-mix(in srgb, var(--cg-card-accent) 70%, #ffffff 18%);
    border-radius: calc(var(--cg-card-radius) * 0.58) calc(var(--cg-card-radius) * 0.58) 6px 6px;
    padding: 7px 9px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.20)),
        var(--cg-card-title-background);
    font-size: var(--cg-card-title-size);
    font-weight: 700;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--cg-card-text);
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.38);
    z-index: 3;
    transform: translateY(var(--cg-card-title-offset-y));
}

.cg-card-image {
    order: 2;
    height: var(--cg-card-image-height);
    flex: 1 1 var(--cg-card-image-height);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px calc(var(--cg-card-radius) * 0.58) calc(var(--cg-card-radius) * 0.72) calc(var(--cg-card-radius) * 0.72);
    background: #151821;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        0 8px 18px rgba(0, 0, 0, 0.28);
}

.cg-card-image img {
    width: 100%;
    height: 100%;
    object-fit: var(--cg-card-image-fit);
    object-position: var(--cg-card-image-focus-x) var(--cg-card-image-focus-y);
    transform: scale(var(--cg-card-image-zoom));
    transform-origin: var(--cg-card-image-focus-x) var(--cg-card-image-focus-y);
    display: block;
}

.cg-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    text-align: center;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 24%),
        linear-gradient(135deg, color-mix(in srgb, var(--cg-card-accent) 34%, #1b2030), #10131c);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cg-card-cost {
    position: absolute;
    top: var(--cg-card-cost-offset-y);
    left: var(--cg-card-cost-offset-x);
    display: flex;
    align-items: center;
    gap: var(--cg-card-cost-gap);
    flex-wrap: nowrap;
    z-index: 6;
    pointer-events: none;
}

.cg-card-cost-chip {
    width: var(--cg-card-cost-size);
    min-width: var(--cg-card-cost-size);
    height: var(--cg-card-cost-size);
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    border: max(1px, calc(var(--cg-card-cost-size) * 0.08)) solid rgba(255, 255, 255, 0.66);
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.50), transparent 26%),
        linear-gradient(160deg, var(--cg-card-accent), var(--cg-card-border));
    color: #ffffff;
    font-size: var(--cg-card-cost-text-size);
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.44),
        inset 0 -2px 5px rgba(0, 0, 0, 0.32);
}

.cg-card-style-clean {
    --cg-card-background: #f9f7ee;
    --cg-card-text: #1b1b18;
    --cg-card-title-background: #ffffff;
}

.cg-card-style-clean::before {
    opacity: calc(var(--cg-card-glow-opacity) * 0.36);
}

.cg-card-style-arcane .cg-card-frame {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.10), transparent 34%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 11px);
}

.cg-card-compact {
    cursor: pointer;
}

.cg-card-compact:not(.cg-card-shell) .cg-card-frame {
    gap: 0;
}

.cg-card-compact:not(.cg-card-shell) .cg-card-image {
    border-radius: calc(var(--cg-card-radius) * 0.62);
}

.cg-card-compact:not(.cg-card-shell) .cg-card-name {
    padding: 3px 5px;
    line-height: 1.05;
}

.cg-card-back,
.theme-glass .card.cg-card-back {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cg-card-text);
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.20), transparent 26%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.11) 0 6px, transparent 6px 12px),
        linear-gradient(145deg, color-mix(in srgb, var(--cg-card-border) 40%, #1d2232), #11131b);
    font-size: var(--cg-card-title-size);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

.cg-card-back-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    overflow: hidden;
}

.cg-card-back-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: var(--cg-card-image-fit);
    object-position: var(--cg-card-image-focus-x) var(--cg-card-image-focus-y);
    transform: scale(var(--cg-card-image-zoom));
    transform-origin: var(--cg-card-image-focus-x) var(--cg-card-image-focus-y);
}

.cg-card-back-label {
    position: relative;
    z-index: 3;
}

.cg-card-back::before {
    opacity: calc(var(--cg-card-glow-opacity) * 0.72);
}

.cg-card-rarity-common .cg-card-rarity {
    background: #e7efe7;
}

.cg-card-rarity-rare .cg-card-rarity {
    background: #dbeafa;
}

.cg-card-rarity-epic .cg-card-rarity {
    background: #eadcf7;
}

.cg-card-rarity-legendary .cg-card-rarity {
    background: #f7e3bb;
}

.cg-card-rarity-fusion .cg-card-rarity {
    background: #ffe2b6;
}

.cg-card-rarity-special .cg-card-rarity {
    background: #f8d7d7;
}

.cg-card-rarity-common {
    --cg-card-accent: #8fbf8f;
    --cg-card-glow: rgba(143, 191, 143, 0.46);
}

.cg-card-rarity-rare {
    --cg-card-accent: #58a6ff;
    --cg-card-glow: rgba(88, 166, 255, 0.56);
}

.cg-card-rarity-epic {
    --cg-card-accent: #b86cff;
    --cg-card-glow: rgba(184, 108, 255, 0.62);
}

.cg-card-rarity-legendary {
    --cg-card-accent: #f3c85b;
    --cg-card-glow: rgba(243, 200, 91, 0.72);
}

.cg-card-rarity-fusion {
    --cg-card-accent: #ffa33a;
    --cg-card-glow: rgba(255, 163, 58, 0.76);
}

.cg-card-rarity-special {
    --cg-card-accent: #ff6b7a;
    --cg-card-glow: rgba(255, 107, 122, 0.72);
}