:root {
    /* Colors */
    --card-color-background: #866764;
    --card-color-background-graphics: #7e605e;
    --card-color-drop-target: #ffffff55;

    /* Dimensions */
    --card-width: 250px;
    --card-height: 350px;
    --card-preview-width: 200px;
    --card-preview-height: 120px;
    --card-preview-margin: calc((var(--card-width) - var(--card-preview-width) - 2 * var(--card-preview-border)) * 0.5);
    --card-preview-columns: 6;
    --card-preview-rows: 10;
    --card-preview-fps: 60;
    --card-preview-border-radius: 6px;
    --card-preview-border: 2px;
    --card-border-radius: 12px;
    --card-drop-target-raise: -0.26;
    --card-colors-size: 20px;
    --card-colors-raise: 0.5;
    --card-colors-overlap: 0.25;
    --card-colors-gradient: 280%;
    --card-info-spacing: 12px;
    --card-info-color: #d7d4c8;
    --card-info-slant: -18deg;
    --card-info-padding-right: 6px;
    --card-info-text-color: #0c0c0c;
    --card-code-icon-radius: 32px;
    --card-code-icon-margin: 8px;
    --card-code-opacity: 0.5;
}

.card-shape {
    width: var(--card-width);
    height: var(--card-height);
    margin-left: calc(var(--card-width) * -0.5);
    margin-top: calc(var(--card-height) * -0.5);
    border-radius: var(--card-border-radius);
}

.card {
    pointer-events: auto;
    cursor: pointer;
    background-color: var(--card-color-background);
    position: absolute;
    user-select: none;
    box-shadow: 0 0 var(--book-shadow-radius) var(--book-shadow-color);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.card svg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.card svg path {
    fill: var(--card-color-background-graphics);
}

.card .preview-frame {
    width: var(--card-preview-width);
    height: var(--card-preview-height);
    margin: var(--card-preview-margin);
    border-radius: var(--card-preview-border-radius);
    overflow: hidden;
    border: var(--card-preview-border) solid var(--card-info-color);
    background-color: var(--color-preview-outer);
}

.card .colors {
    margin-top: calc(-1 * var(--card-preview-margin) - var(--card-colors-raise) * var(--card-colors-size));
    margin-left: var(--card-preview-margin);
    margin-right: calc(var(--card-preview-margin) + var(--card-colors-size) * 0.5);
}

.card .colors .colors-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.card .colors .colors-wrapper .color {
    width: var(--card-colors-size);
    height: var(--card-colors-size);
    margin-left: calc(-1 * var(--card-colors-overlap) * var(--card-colors-size));
    border-radius: 50%;
    border: var(--card-preview-border) solid var(--card-info-color);
    box-sizing: border-box;
}

.card .colors .colors-wrapper .color.fill-white {
    background: radial-gradient(circle at top right, var(--color-fish-white), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-black {
    background: radial-gradient(circle at top right, var(--color-fish-black), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-gold {
    background: radial-gradient(circle at top right, var(--color-fish-gold), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-orange {
    background: radial-gradient(circle at top right, var(--color-fish-orange), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-red {
    background: radial-gradient(circle at top right, var(--color-fish-red), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-brown {
    background: radial-gradient(circle at top right, var(--color-fish-brown), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-purple {
    background: radial-gradient(circle at top right, var(--color-fish-purple), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-blue {
    background: radial-gradient(circle at top right, var(--color-fish-blue), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-pink {
    background: radial-gradient(circle at top right, var(--color-fish-pink), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-darkblue {
    background: radial-gradient(circle at top right, var(--color-fish-darkblue), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-lightpurple {
    background: radial-gradient(circle at top right, var(--color-fish-lightpurple), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-teal {
    background: radial-gradient(circle at top right, var(--color-fish-teal), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-green {
    background: radial-gradient(circle at top right, var(--color-fish-green), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-darkgreen {
    background: radial-gradient(circle at top right, var(--color-fish-darkgreen), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-lightbrown {
    background: radial-gradient(circle at top right, var(--color-fish-lightbrown), black var(--card-colors-gradient));
}

.card .colors .colors-wrapper .color.fill-bordeaux {
    background: radial-gradient(circle at top right, var(--color-fish-bordeaux), black var(--card-colors-gradient));
}

.card .info {
    width: calc(100% - 2 * var(--card-preview-margin));
    margin: var(--card-preview-margin);
    margin-bottom: 0;
}

.card .info.japanese {
    margin-top: calc(var(--card-preview-margin) * 0.5);
}

.card .info .property {
    margin-top: calc(var(--card-info-spacing) / 4);
    margin-bottom: calc(var(--card-info-spacing) / 4);
    font-size: 20px;
    position: relative;
}

.card .info.japanese .property {
    font-size: 17px;
}

.card .info .property .text {
    padding: calc(var(--card-info-spacing) / 4);
    color: var(--card-info-text-color);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.card .info .property .text .label {
    color: var(--card-info-color);
}

.card .info .property .text .label::after {
    content: ":";
}

.card .info .property .text .value {
    float: right;
    padding-right: var(--card-info-padding-right);
}

.card .info .property .background {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background: linear-gradient(to right, transparent, var(--card-info-color));
    transform: skew(var(--card-info-slant));
    z-index: -1;
}

.card button {
    width: 100%;
    height: calc(2 * var(--card-code-icon-radius));
    margin-top: var(--card-code-icon-margin);
    pointer-events: auto;
    position: relative;
    opacity: var(--card-code-opacity);
}

.card button:active {
    opacity: 1;
}

.card button svg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

@keyframes fish-preview-x {
    from {background-position-x: 0}
    to {background-position-x: calc(-1 * var(--card-preview-width) * var(--card-preview-columns))}
}

@keyframes fish-preview-y {
    from {background-position-y: 0}
    to {background-position-y: calc(-1 * var(--card-preview-height) * var(--card-preview-rows))}
}

.card .preview-animation {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    animation:
        fish-preview-x
            calc(1s * var(--card-preview-columns) / var(--card-preview-fps))
            steps(var(--card-preview-columns))
            infinite,
        fish-preview-y
            calc(1s * var(--card-preview-rows) * var(--card-preview-columns) / var(--card-preview-fps))
            steps(var(--card-preview-rows))
            infinite;
}

#drop-target {
    position: absolute;
    left: 50%;
    bottom: calc(var(--card-drop-target-raise) * var(--card-height));
    background-color: var(--card-color-drop-target);
    transition: 0.1s;
    transition-property: bottom;
}

#drop-target.hidden {
    bottom: calc(-1 * var(--card-height));
}

#code-icon {
    fill: var(--card-info-color);
}