.rune-reference-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10ch, 1fr));
}

.rune-reference-grid-item {
    width: 100%;
    height: 100%;

    padding: 0.25em;
}

/* Horizontal card layout */

.rune-card {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: auto 1fr;
    justify-items: stretch;
    gap: 0.5em;

    height: 100%;
    cursor: pointer;

    background-color: var(--surface-1);
    outline: 2px solid var(--surface-1-border);
    border-radius: 0.5em;

    text-align: center;
}

.rune-card .rune-segments-guide > .rune-segment {
    stroke: #242424 !important;
}

.rune-card > .svg-container {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-bottom: 2px solid var(--surface-1-border);
}

.rune-card .runic-svg {
    width: 3em;
}

/* Enable (easy) custom rune colors (to adapt to the theme) */

.rune-card .rune-segment--stroke {
    stroke: var(--rune-color, transparent);
}

.rune-card .rune-segment--fill {
    fill: var(--rune-color, transparent);
}

/* Dark theme */
.rune-card .runic-layer--guide {
    /* noop */
}
.rune-card .runic-layer--real .rune-segment--active {
    --rune-color: palegreen;
}
/* Light theme */
.light-theme .rune-card .runic-layer--guide {
    /* noop */
}
.light-theme .rune-card .runic-layer--real .rune-segment--active {
    --rune-color: mediumseagreen;
}

.rune-info {
    flex: 1 0 0;
    padding: 0.5em;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rune-info__symbol {
    font-family: var(--serif-font);
    font-size: 1.5em;
    margin-bottom: 0.25em;
}

.rune-info__english {
    opacity: 0.75;
    font-size: 0.5em;
}
