/* version: 1.0.0 */

:root {
    --base-card-width: 336px;
    --base-card-height: 448px;
    --card-scale: scale(1.0);
    --card-scale-origin: top left;
}

div.card-frame {
    position: relative;
    margin: 0;
    padding: 0;
    width: var(--base-card-width);
    height: var(--base-card-height);
    max-width: var(--base-card-width);
    max-height: var(--base-card-height);
    transform: var(--card-scale);
    transform-origin: var(--card-scale-origin);
}

img.card-layer,
svg.card-layer {
    position: absolute;
}

img.card-layer-top-logo {
    top: 0;
    left: 0;
}

img.card-layer-border,
img.card-layer-roll-frame,
img.card-layer-scroll,
svg.card-layer-roll,
svg.card-layer-title {
    bottom: 0;
    left: 0;
}

img.card-layer-setting {
    bottom: 0;
    right: 0;
}

img.card-layer-art {
    bottom: 13px;
    left: 16px;
    width: 304px;
    height: 405px;
}

svg.card-layer path.card-text-path {
    fill: none;
    stroke: none;
}

svg.card-layer text.card-title-text,
svg.card-layer text.card-roll-text {
    text-align: center;
    font-family: "Rum Raisin", sans-serif;
}

svg.card-layer text.card-title-text {
    font-size: 24px;
    fill: #3d2505;
}

svg.card-layer text.card-roll-text {
    font-family: "Denk One", sans-serif;
    font-size: 22px;
    fill: #ffffff;
    stroke: #000000;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4px;
    paint-order: stroke fill;
}