.runic-playground {
    border-radius: 1em;
    background-color: var(--surface-1);
    border: 2px solid var(--surface-1-border);

    display: grid;
    align-items: center;
}

/* Mobile - Vertical */

.runic-playground {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}

/* Desktop - Horizontal */

@media (min-width: 1024px) {
    .runic-playground {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
}

.runic-playground__svg-container {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 15em;
    overflow: hidden;
}

/* Mobile - Vertical */

.runic-playground__svg-container {
    border: none;
    border-bottom: 2px solid var(--surface-1-border);
}

/* Desktop - Horizontal */

@media (min-width: 1024px) {
    .runic-playground__svg-container {
        border: none;
        border-right: 2px solid var(--surface-1-border);
    }
}

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

.runic-playground .rune-segment--stroke {
    stroke: var(--rune-color, transparent);
}
.runic-playground .rune-segment--fill {
    fill: var(--rune-color, transparent);
}

.runic-playground .runic-layer--guide {
    --rune-color: var(--surface-2);
}
.runic-playground .runic-layer--real .rune-segment--active {
    --rune-color: cornflowerblue;
}
.runic-playground .runic-layer--text text {
    --rune-color: currentColor;
}

.runic-playground__manuals {
    font-size: 0.75em;
    padding: 1em;
    overflow: hidden;
}

.runic-playground__controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin: 1em;
}

.runic-playground__controls > * {
    flex: 1 0 0;
}

.runic-playground__control-button {
    font: inherit;
    font-weight: 500;
    overflow: hidden;
    min-width: min-content;
    text-wrap: nowrap;

    color: inherit;
    background-color: var(--surface-2);

    display: flex;
    justify-content: center;
    align-items: center;
}

.runic-playground__control-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-right: 1em;
    color: cornflowerblue;
}

.runic-playground__control-icon > svg {
    margin: auto;
    width: 100%;
    height: 100%;
}
