BareGit
Login
card-collection / master / static / css / styles.css 
:root {
    color-scheme: light;
    font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
    color: #332f3a;
    background: #f4f1fa;
    --canvas: #f4f1fa;
    --foreground: #332f3a;
    --muted: #635f69;
    --violet: #7c3aed;
    --violet-light: #a78bfa;
    --pink: #db2777;
    --blue: #0ea5e9;
    --page-gutter: clamp(1.25rem, 3vw, 3rem);
    --main-top: 9rem;
    --main-bottom: 7rem;
    --clay-card-shadow:
        16px 16px 32px rgb(160 150 180 / 20%),
        -10px -10px 24px rgb(255 255 255 / 90%),
        inset 6px 6px 12px rgb(139 92 246 / 3%),
        inset -6px -6px 12px rgb(255 255 255 / 100%);
    --clay-card-shadow-hover:
        22px 24px 38px rgb(139 92 246 / 24%),
        -12px -12px 28px rgb(255 255 255 / 95%),
        inset 6px 6px 12px rgb(139 92 246 / 5%),
        inset -6px -6px 12px rgb(255 255 255 / 100%);
    --clay-button-shadow:
        12px 12px 24px rgb(139 92 246 / 30%),
        -8px -8px 16px rgb(255 255 255 / 40%),
        inset 4px 4px 8px rgb(255 255 255 / 40%),
        inset -4px -4px 8px rgb(0 0 0 / 10%);
    --clay-pressed-shadow:
        inset 10px 10px 20px #d9d4e3,
        inset -10px -10px 20px #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 20rem;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--canvas);
    color: var(--foreground);
    font-weight: 500;
    line-height: 1.625;
}

a {
    color: inherit;
}

.ambient-light {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ambient-blob {
    position: absolute;
    width: min(60vh, 42rem);
    height: min(60vh, 42rem);
    border-radius: 50%;
    opacity: 0.11;
    filter: blur(4rem);
    animation: clay-float 10s ease-in-out infinite;
}

.ambient-blob-violet {
    top: -18%;
    left: -12%;
    background: var(--violet);
}

.ambient-blob-pink {
    top: 22%;
    right: -14%;
    background: var(--pink);
    animation-name: clay-float-delayed;
    animation-delay: -3s;
}

.ambient-blob-blue {
    bottom: -24%;
    left: 28%;
    background: var(--blue);
    animation-duration: 12s;
    animation-delay: -6s;
}

.site-header {
    position: fixed;
    z-index: 100;
    top: 1.5rem;
    right: var(--page-gutter);
    left: var(--page-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    min-height: 5rem;
    margin: 0;
    padding: 0.8rem 1rem 0.8rem 1.6rem;
    border: 1px solid rgb(255 255 255 / 75%);
    border-radius: 2.5rem;
    background: rgb(255 255 255 / 68%);
    box-shadow:
        18px 18px 36px rgb(160 150 180 / 18%),
        -12px -12px 30px rgb(255 255 255 / 90%),
        inset 5px 5px 10px rgb(139 92 246 / 3%),
        inset -5px -5px 10px rgb(255 255 255 / 90%);
    backdrop-filter: blur(1.25rem);
}

.site-title {
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    text-decoration: none;
}

nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border-radius: 1.25rem;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
    transition:
        color 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease;
}

.nav-link:hover {
    color: var(--violet);
    background: rgb(124 58 237 / 8%);
    transform: translateY(-0.15rem);
}

.nav-link:active {
    transform: scale(0.92);
    box-shadow: var(--clay-pressed-shadow);
}

.nav-link-primary {
    margin-left: 0.35rem;
    padding-inline: 1.25rem;
    background: linear-gradient(145deg, var(--violet-light), var(--violet));
    color: #ffffff;
    box-shadow: var(--clay-button-shadow);
}

.nav-link-primary:hover {
    background: linear-gradient(145deg, #b7a1fb, #6d28d9);
    color: #ffffff;
    transform: translateY(-0.25rem);
}

main {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding:
        var(--main-top)
        var(--page-gutter)
        var(--main-bottom);
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2.5rem;
    margin-bottom: 3.25rem;
}

.eyebrow {
    margin: 0 0 0.25rem;
    color: var(--violet);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.06em;
}

.sort-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem;
    border-radius: 1.5rem;
    background: #efebf5;
    box-shadow: var(--clay-pressed-shadow);
    font-size: 0.9rem;
}

.sort-label {
    padding: 0 0.65rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.sort-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-radius: 1.1rem;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
    transition:
        color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease;
}

.sort-button:hover {
    color: var(--violet);
    transform: translateY(-0.12rem);
}

.sort-button:active {
    transform: scale(0.92);
}

.sort-button[aria-current="page"] {
    background: linear-gradient(145deg, var(--violet-light), var(--violet));
    color: #ffffff;
    box-shadow:
        7px 7px 14px rgb(139 92 246 / 24%),
        -5px -5px 12px rgb(255 255 255 / 60%),
        inset 3px 3px 6px rgb(255 255 255 / 35%),
        inset -3px -3px 6px rgb(0 0 0 / 8%);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.card-tile {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 2rem;
    background: rgb(255 255 255 / 72%);
    box-shadow: var(--clay-card-shadow);
    backdrop-filter: blur(1.25rem);
    transition:
        box-shadow 500ms ease,
        transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-tile:hover {
    box-shadow: var(--clay-card-shadow-hover);
    transform: translateY(-0.5rem) scale(1.01);
}

.card-image-link {
    display: block;
    aspect-ratio: 5 / 7;
    margin: 0.75rem;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #e9e2f2;
    box-shadow:
        inset 7px 7px 14px rgb(174 164 190 / 20%),
        inset -7px -7px 14px rgb(255 255 255 / 85%),
        4px 4px 10px rgb(139 92 246 / 8%),
        -3px -3px 8px rgb(255 255 255 / 70%);
}

.card-image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-tile:hover .card-image-link img {
    transform: scale(1.025);
}

.card-details {
    padding: 0.2rem 1.35rem 1.5rem;
}

.card-id {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    margin-left: -0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 1rem;
    color: var(--violet);
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition:
        background 200ms ease,
        transform 200ms ease;
}

.card-id:hover {
    background: rgb(124 58 237 / 8%);
    transform: translateY(-0.1rem);
}

.card-id:active {
    transform: scale(0.92);
}

.card-details h2 {
    margin: 0.1rem 0 0;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
}

.empty-state {
    display: grid;
    min-height: 16rem;
    place-items: center;
    padding: 2rem;
    border-radius: 2rem;
    background: #efebf5;
    box-shadow: var(--clay-pressed-shadow);
    color: var(--muted);
    font-weight: 700;
}

.card-view {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    margin:
        calc(0rem - var(--main-top))
        calc(0rem - var(--page-gutter))
        calc(0rem - var(--main-bottom));
    overflow: hidden;
}

.card-preview-stage {
    position: absolute;
    inset: 0;
    display: grid;
    min-height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 16%,
                        rgb(255 255 255 / 80%), transparent 35%),
        linear-gradient(145deg, #ede7f8, #e2d9f2);
    isolation: isolate;
}

.card-preview-stage::before,
.card-preview-stage::after {
    position: absolute;
    z-index: -1;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    content: "";
    filter: blur(3.5rem);
    opacity: 0.22;
}

.card-preview-stage::before {
    top: -5rem;
    right: -4rem;
    background: var(--pink);
}

.card-preview-stage::after {
    bottom: -5rem;
    left: -4rem;
    background: var(--blue);
}

.preview-heading {
    position: absolute;
    z-index: 2;
    top: var(--main-top);
    right: calc(var(--page-gutter) + 31rem);
    left: var(--page-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: none;
}

.preview-heading .eyebrow {
    margin: 0;
}

.preview-status,
.preview-hint {
    margin: 0;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 1rem;
    background: rgb(255 255 255 / 64%);
    box-shadow:
        7px 7px 16px rgb(134 119 158 / 16%),
        -5px -5px 14px rgb(255 255 255 / 70%),
        inset 3px 3px 7px rgb(139 92 246 / 3%),
        inset -3px -3px 7px rgb(255 255 255 / 75%);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.preview-status {
    padding: 0.35rem 0.65rem;
}

.preview-status[data-kind="success"] {
    color: var(--violet);
}

.preview-status[data-kind="error"] {
    color: #a21d53;
}

#GLCanvas {
    display: block;
    width: calc(100% - 30rem);
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    cursor: move;
    touch-action: none;
}

.preview-hint {
    position: absolute;
    right: calc(var(--page-gutter) + 31rem);
    bottom: 1.5rem;
    left: var(--page-gutter);
    width: fit-content;
    max-width: calc(100% - 3rem);
    margin-inline: auto;
    padding: 0.5rem 0.8rem;
    text-align: center;
    pointer-events: none;
}

.card-info-panel {
    position: fixed;
    z-index: 40;
    top: var(--main-top);
    right: var(--page-gutter);
    bottom: 1.5rem;
    width: min(
        29rem,
        calc(100% - var(--page-gutter) - var(--page-gutter)));
    overflow: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 2.5rem;
    background: rgb(255 255 255 / 70%);
    box-shadow: var(--clay-card-shadow);
    backdrop-filter: blur(1.25rem);
}

.back-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    margin: -0.5rem 0 1.5rem -0.65rem;
    padding: 0.4rem 0.65rem;
    border-radius: 1rem;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
    transition: color 200ms ease, transform 200ms ease;
}

.back-link:hover {
    color: var(--violet);
    transform: translateX(-0.2rem);
}

.card-actions {
    display: flex;
    justify-content: space-between;
    margin: -0.5rem 0 1.5rem -0.65rem;
}

.card-actions .back-link {
    margin: 0;
}

.card-view-id {
    margin: 0 0 0.4rem;
    color: var(--violet);
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.card-info-panel h1 {
    overflow-wrap: anywhere;
    font-size: clamp(2.6rem, 6vw, 4.5rem);
}

.asset-warning {
    display: grid;
    gap: 0.2rem;
    margin-top: 1.75rem;
    padding: 1rem 1.1rem;
    border-radius: 1.35rem;
    background: #fde7f0;
    box-shadow:
        8px 8px 18px rgb(190 90 130 / 13%),
        -6px -6px 15px rgb(255 255 255 / 72%),
        inset 3px 3px 8px rgb(190 90 130 / 5%),
        inset -3px -3px 8px rgb(255 255 255 / 65%);
    color: #812044;
    font-size: 0.88rem;
}

.card-metadata {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 2rem 0 0;
}

.card-metadata div {
    min-width: 0;
    padding: 0.9rem;
    border-radius: 1.25rem;
    background: #efebf5;
    box-shadow: var(--clay-pressed-shadow);
}

.card-metadata dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card-metadata dd {
    margin: 0.2rem 0 0;
    overflow-wrap: anywhere;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
}

.game-field-value {
    white-space: pre-wrap;
}

.card-info-section {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgb(99 95 105 / 12%);
}

.card-info-section h2 {
    margin: 0 0 0.75rem;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1rem;
    font-weight: 900;
}

.muted-copy,
.description-copy {
    margin: 0;
}

.muted-copy {
    color: var(--muted);
}

.description-copy {
    white-space: pre-wrap;
}

.series-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.series-list li {
    padding: 0.45rem 0.75rem;
    border-radius: 1rem;
    background: rgb(124 58 237 / 9%);
    color: var(--violet);
    font-size: 0.82rem;
    font-weight: 800;
}

.card-form-panel h1 {
    font-size: clamp(2.6rem, 5vw, 4rem);
}

.card-form {
    margin-top: 2rem;
}

.form-section {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1.75rem 0;
    border: 0;
    border-top: 1px solid rgb(99 95 105 / 12%);
}

.form-section[hidden] {
    display: none;
}

.form-section h2,
.form-section legend {
    margin: 0;
    padding: 0;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1rem;
    font-weight: 900;
}

.image-source-section legend {
    margin-bottom: 1rem;
}

.form-field {
    display: grid;
    gap: 0.45rem;
    color: var(--foreground);
    font-size: 0.84rem;
    font-weight: 800;
}

.form-field em {
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 3.25rem;
    border: 0;
    border-radius: 1.15rem;
    background: #efebf5;
    box-shadow:
        inset 7px 7px 15px rgb(185 177 198 / 55%),
        inset -7px -7px 15px rgb(255 255 255 / 90%);
    color: var(--foreground);
    font: inherit;
    font-weight: 600;
}

.form-field input,
.form-field select {
    padding: 0.75rem 1rem;
}

.form-field textarea {
    min-height: 6rem;
    padding: 1rem;
    resize: vertical;
    line-height: 1.5;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    background: rgb(255 255 255 / 84%);
    outline: 0.25rem solid rgb(124 58 237 / 20%);
}

.image-field input[type="file"] {
    padding: 0.45rem;
    color: var(--muted);
}

.image-field input[type="file"]::file-selector-button {
    min-height: 2.4rem;
    margin-right: 0.7rem;
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: 0.85rem;
    background: rgb(124 58 237 / 11%);
    color: var(--violet);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.image-field small,
.form-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.source-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0.4rem;
    border-radius: 1.35rem;
    background: #efebf5;
    box-shadow: var(--clay-pressed-shadow);
}

.source-toggle label {
    position: relative;
    cursor: pointer;
}

.source-toggle input {
    position: absolute;
    opacity: 0;
}

.source-toggle span {
    display: grid;
    min-height: 2.75rem;
    place-items: center;
    border-radius: 1rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    transition:
        color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease;
}

.source-toggle input:checked + span {
    background: linear-gradient(145deg, var(--violet-light), var(--violet));
    box-shadow:
        7px 7px 14px rgb(139 92 246 / 24%),
        -5px -5px 12px rgb(255 255 255 / 60%),
        inset 3px 3px 6px rgb(255 255 255 / 35%),
        inset -3px -3px 6px rgb(0 0 0 / 8%);
    color: #ffffff;
}

.source-toggle input:focus-visible + span {
    outline: 0.25rem solid rgb(124 58 237 / 30%);
    outline-offset: 0.2rem;
}

.source-fields {
    display: grid;
    gap: 1rem;
}

.source-fields[hidden] {
    display: none;
}

.form-submit {
    width: 100%;
    min-height: 3.5rem;
    margin-top: 0.25rem;
    border: 0;
    border-radius: 1.25rem;
    background: linear-gradient(145deg, var(--violet-light), var(--violet));
    box-shadow: var(--clay-button-shadow);
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition:
        box-shadow 200ms ease,
        transform 200ms ease;
}

.form-submit:hover {
    box-shadow: var(--clay-card-shadow-hover);
    transform: translateY(-0.2rem);
}

.form-submit:active {
    box-shadow: var(--clay-pressed-shadow);
    transform: scale(0.92);
}

.form-status {
    min-height: 1.5rem;
    margin: 0.75rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.page-shell {
    width: min(68rem, 100%);
    margin-inline: auto;
}

.form-page {
    width: min(40rem, 100%);
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 2.5rem;
    background: rgb(255 255 255 / 70%);
    box-shadow: var(--clay-card-shadow);
    backdrop-filter: blur(1.25rem);
}

.standalone-form {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
}

.empty-panel,
.series-admin-list > li {
    padding: 1.5rem;
    border-radius: 1.75rem;
    background: rgb(255 255 255 / 70%);
    box-shadow: var(--clay-card-shadow);
}

.series-admin-list {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.series-admin-list > li,
.series-admin-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.series-admin-list h2,
.empty-panel h2 {
    margin: 0;
}

.series-admin-actions a {
    color: var(--violet);
    font-weight: 800;
}

.destructive-submit {
    background: linear-gradient(145deg, #f87171, #be123c);
}

:focus-visible {
    outline: 0.25rem solid rgb(124 58 237 / 30%);
    outline-offset: 0.2rem;
}

@keyframes clay-float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-1.25rem) rotate(2deg);
    }
}

@keyframes clay-float-delayed {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-0.95rem) rotate(-2deg);
    }
}

@media(max-width: 42rem) {
    :root {
        --main-top: 13rem;
    }

    .site-header {
        min-height: auto;
        padding: 1rem;
        border-radius: 2rem;
    }

    .site-header,
    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    nav {
        width: 100%;
        flex-wrap: wrap;
    }

    .nav-link {
        flex: 1;
        padding-inline: 0.7rem;
    }

    .nav-link-primary {
        flex-basis: 100%;
        margin: 0.35rem 0 0;
    }

    .page-heading {
        margin-bottom: 2.5rem;
    }

    .sort-controls {
        width: 100%;
    }

    .sort-label {
        flex-basis: 100%;
        padding-bottom: 0.2rem;
    }

    .sort-button {
        flex: 1;
        justify-content: center;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    }

    .card-metadata {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 62rem) {
    .preview-heading {
        right: var(--page-gutter);
    }

    #GLCanvas {
        width: 100%;
    }

    .preview-hint {
        right: var(--page-gutter);
        bottom: calc(44svh + 2rem);
    }

    .card-info-panel {
        top: auto;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
        max-height: 44vh;
        max-height: 44svh;
    }
}

@media(prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.public-main {
    display: grid;
    place-items: center;
}

.public-header-note {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.welcome-hero {
    display: grid;
    width: 100%;
    min-height: calc(100svh - var(--main-top) - var(--main-bottom));
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

.welcome-copy {
    max-width: 48rem;
}

.welcome-copy h1 {
    font-size: clamp(3.5rem, 8vw, 7.5rem);
}

.hero-copy {
    max-width: 40rem;
    margin: 2rem 0 2.5rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.clay-action,
.pull-button,
.table-action {
    display: inline-flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 1.25rem;
    background: linear-gradient(145deg, var(--violet-light), var(--violet));
    box-shadow: var(--clay-button-shadow);
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition:
        box-shadow 200ms ease,
        transform 200ms ease;
}

.clay-action:hover,
.pull-button:hover:not(:disabled),
.table-action:hover {
    box-shadow: var(--clay-card-shadow-hover);
    transform: translateY(-0.25rem);
}

.clay-action:active,
.pull-button:active:not(:disabled),
.table-action:active {
    box-shadow: var(--clay-pressed-shadow);
    transform: scale(0.92);
}

.clay-action-secondary {
    background: rgb(255 255 255 / 76%);
    color: var(--violet);
}

.clay-action-danger {
    background: linear-gradient(145deg, #fb7185, #be123c);
    color: #ffffff;
}

.clay-action:disabled {
    box-shadow: var(--clay-pressed-shadow);
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
}

.welcome-preview {
    position: relative;
    display: grid;
    min-height: 36rem;
    place-items: center;
    isolation: isolate;
}

.welcome-card {
    width: min(20rem, 68vw);
    padding: 0.9rem;
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 2.5rem;
    background: rgb(255 255 255 / 72%);
    box-shadow:
        24px 28px 48px rgb(139 92 246 / 24%),
        -14px -14px 32px rgb(255 255 255 / 95%),
        inset 7px 7px 14px rgb(139 92 246 / 4%),
        inset -7px -7px 14px rgb(255 255 255 / 100%);
    backdrop-filter: blur(1.25rem);
    transform: rotate(4deg);
    transition:
        box-shadow 500ms ease,
        transform 500ms ease;
}

.welcome-card:hover {
    box-shadow: var(--clay-card-shadow-hover);
    transform: translateY(-0.75rem) rotate(1deg) scale(1.02);
}

.welcome-card img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 7;
    border-radius: 1.75rem;
    object-fit: cover;
}

.welcome-preview > p {
    position: absolute;
    right: 0;
    bottom: 1rem;
    left: 0;
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.welcome-orbit {
    position: absolute;
    z-index: -1;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    filter: blur(0.25rem);
    opacity: 0.2;
    animation: clay-float 9s ease-in-out infinite;
}

.welcome-orbit-pink {
    top: 2rem;
    right: 0;
    background: var(--pink);
}

.welcome-orbit-blue {
    bottom: 3rem;
    left: 0;
    background: var(--blue);
    animation-name: clay-float-delayed;
}

.public-card {
    position: relative;
    width: min(42rem, 100%);
    padding: clamp(2rem, 6vw, 4rem);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: clamp(2rem, 5vw, 3rem);
    background: rgb(255 255 255 / 70%);
    box-shadow:
        30px 30px 60px #cdc6d9,
        -30px -30px 60px #ffffff,
        inset 10px 10px 20px rgb(139 92 246 / 5%),
        inset -10px -10px 20px rgb(255 255 255 / 80%);
    backdrop-filter: blur(1.25rem);
}

.public-card h1 {
    font-size: clamp(2.65rem, 7vw, 4.5rem);
}

.public-card-copy {
    max-width: 34rem;
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: 1.05rem;
}

.clay-icon {
    display: inline-grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    flex: 0 0 auto;
    margin-bottom: 1.5rem;
    border-radius: 1.25rem;
    box-shadow:
        10px 10px 20px rgb(139 92 246 / 20%),
        -7px -7px 14px rgb(255 255 255 / 60%),
        inset 4px 4px 8px rgb(255 255 255 / 35%),
        inset -4px -4px 8px rgb(0 0 0 / 9%);
    color: #ffffff;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
}

.clay-icon-violet {
    background: linear-gradient(145deg, #a78bfa, #7c3aed);
}

.clay-icon-pink {
    background: linear-gradient(145deg, #f472b6, #db2777);
}

.clay-icon-blue {
    background: linear-gradient(145deg, #38bdf8, #0284c7);
}

.message-card {
    text-align: center;
}

.message-card .public-card-copy {
    margin-inline: auto;
}

.message-hint,
.identity-pill {
    margin: 1.75rem 0 0;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: #efebf5;
    box-shadow: var(--clay-pressed-shadow);
    color: var(--muted);
    overflow-wrap: anywhere;
}

.identity-pill {
    color: var(--foreground);
    font-weight: 800;
    text-align: center;
}

.collection-page,
.account-page,
.users-page {
    width: 100%;
}

.collection-heading {
    align-items: center;
}

.pull-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 2rem;
    background: rgb(255 255 255 / 68%);
    box-shadow: var(--clay-card-shadow);
    backdrop-filter: blur(1.25rem);
}

.pull-count {
    display: grid;
    min-width: 8rem;
    padding: 0.4rem 0.75rem;
    text-align: center;
}

.pull-count strong {
    color: var(--violet);
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.pull-count span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.pull-button:disabled {
    background: #d8d1e2;
    box-shadow: var(--clay-pressed-shadow);
    color: var(--muted);
    cursor: not-allowed;
}

.collection-notice {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 2rem;
    background: rgb(255 255 255 / 70%);
    box-shadow: var(--clay-card-shadow);
}

.collection-notice .clay-icon {
    margin: 0;
}

.collection-notice strong {
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
}

.collection-notice p {
    margin: 0;
    color: var(--muted);
}

.collection-empty {
    display: grid;
    min-height: 20rem;
    place-items: center;
    align-content: center;
    padding: 2rem;
    border-radius: 2.5rem;
    background: #efebf5;
    box-shadow: var(--clay-pressed-shadow);
    text-align: center;
}

.collection-empty .clay-icon {
    margin: 0 0 1.25rem;
}

.collection-empty h2 {
    margin: 0;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 900;
}

.collection-empty p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.collection-card {
    min-width: 0;
}

.collection-card a {
    position: relative;
    display: grid;
    height: 100%;
    padding: 0.75rem 0.75rem 1.25rem;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 2rem;
    background: rgb(255 255 255 / 72%);
    box-shadow: var(--clay-card-shadow);
    text-decoration: none;
    backdrop-filter: blur(1.25rem);
    transition:
        box-shadow 500ms ease,
        transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.collection-card a:hover {
    box-shadow: var(--clay-card-shadow-hover);
    transform: translateY(-0.5rem) scale(1.015);
}

.collection-card a:active {
    box-shadow: var(--clay-pressed-shadow);
    transform: scale(0.97);
}

.collection-image {
    display: block;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #e9e2f2;
    box-shadow:
        inset 7px 7px 14px rgb(174 164 190 / 20%),
        inset -7px -7px 14px rgb(255 255 255 / 85%),
        4px 4px 10px rgb(139 92 246 / 8%),
        -3px -3px 8px rgb(255 255 255 / 70%);
}

.collection-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.collection-card a:hover img {
    transform: scale(1.035);
}

.collection-card-details {
    display: grid;
    gap: 0.1rem;
    padding: 1rem 0.6rem 0;
}

.collection-card-name {
    overflow-wrap: anywhere;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.25;
}

.collection-card-details > span {
    color: var(--violet);
    font-size: 0.75rem;
    font-weight: 800;
}

.collection-quantity {
    position: absolute;
    top: 1.35rem;
    right: 1.35rem;
    display: grid;
    min-width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding: 0.35rem 0.6rem;
    border: 2px solid rgb(255 255 255 / 70%);
    border-radius: 50%;
    background: linear-gradient(145deg, #f472b6, #db2777);
    box-shadow:
        8px 8px 18px rgb(190 36 105 / 30%),
        -5px -5px 12px rgb(255 255 255 / 50%),
        inset 3px 3px 7px rgb(255 255 255 / 35%),
        inset -3px -3px 7px rgb(0 0 0 / 9%);
    color: #ffffff;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 0.85rem;
    font-weight: 900;
}

.account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.settings-card {
    display: grid;
    align-content: start;
    gap: 1.5rem;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 2.5rem;
    background: rgb(255 255 255 / 70%);
    box-shadow: var(--clay-card-shadow);
    backdrop-filter: blur(1.25rem);
}

.settings-card .clay-icon {
    margin: 0;
}

.settings-label {
    margin: 0 0 0.4rem;
    color: var(--violet);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.settings-card h2 {
    margin: 0 0 0.5rem;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
}

.account-details {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}

.account-details div {
    display: grid;
    gap: 0.15rem;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: #efebf5;
    box-shadow: var(--clay-pressed-shadow);
}

.account-details dt {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
}

.settings-card .clay-action {
    width: fit-content;
}

.heading-copy {
    max-width: 24rem;
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
}

.user-table-shell {
    overflow-x: auto;
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 2.5rem;
    background: rgb(255 255 255 / 70%);
    box-shadow: var(--clay-card-shadow);
    backdrop-filter: blur(1.25rem);
}

.user-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
    text-align: left;
}

.user-table th {
    padding: 0 1rem 0.25rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.user-table td {
    padding: 1rem;
    background: #efebf5;
    box-shadow:
        inset 5px 5px 11px rgb(185 177 198 / 40%),
        inset -5px -5px 11px rgb(255 255 255 / 85%);
    overflow-wrap: anywhere;
}

.user-table td:first-child {
    border-radius: 1.25rem 0 0 1.25rem;
}

.user-table td:last-child {
    border-radius: 0 1.25rem 1.25rem 0;
}

.role-badge {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgb(124 58 237 / 10%);
    color: var(--violet);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.user-action {
    text-align: right;
}

.table-action {
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media(max-width: 62rem) {
    .welcome-hero,
    .account-grid {
        grid-template-columns: 1fr;
    }

    .welcome-copy {
        text-align: center;
        justify-self: center;
    }

    .hero-copy {
        margin-inline: auto;
    }

    .welcome-preview {
        min-height: 32rem;
    }

    .collection-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .pull-panel {
        width: fit-content;
    }
}

@media(max-width: 42rem) {
    .public-main {
        padding-top: 10rem;
    }

    .public-header {
        align-items: center;
        flex-direction: row;
    }

    .public-header-note {
        font-size: 0.65rem;
    }

    .welcome-hero {
        gap: 1rem;
    }

    .welcome-copy h1 {
        font-size: clamp(3.25rem, 17vw, 5rem);
    }

    .welcome-preview {
        min-height: 29rem;
    }

    .public-card {
        padding: 2rem 1.5rem;
        border-radius: 2rem;
    }

    .pull-panel {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .pull-panel form,
    .pull-button {
        width: 100%;
    }

    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
        gap: 1rem;
    }

    .collection-card a {
        border-radius: 1.5rem;
    }

    .collection-image {
        border-radius: 1.15rem;
    }

    .settings-card {
        border-radius: 2rem;
    }

    .settings-card .clay-action,
    .settings-card form,
    .settings-card form .clay-action {
        width: 100%;
    }

    .user-table-shell {
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .user-table,
    .user-table tbody,
    .user-table tr,
    .user-table td {
        display: block;
        width: 100%;
    }

    .user-table thead {
        display: none;
    }

    .user-table tr {
        margin-bottom: 1.25rem;
        padding: 1.25rem;
        border: 1px solid rgb(255 255 255 / 82%);
        border-radius: 2rem;
        background: rgb(255 255 255 / 70%);
        box-shadow: var(--clay-card-shadow);
    }

    .user-table td {
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.6rem 0;
        background: transparent;
        box-shadow: none;
    }

    .user-table td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .user-table td:first-child,
    .user-table td:last-child {
        border-radius: 0;
    }

    .user-table .user-action {
        display: block;
        padding-top: 1rem;
        text-align: left;
    }

    .user-action form,
    .table-action {
        width: 100%;
    }
}

.management-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.page-heading .management-actions {
    justify-content: flex-end;
    margin-bottom: 0;
}

.games-page {
    width: 100%;
}

.game-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-admin-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 2.5rem;
    background: rgb(255 255 255 / 70%);
    box-shadow: var(--clay-card-shadow);
    backdrop-filter: blur(1.25rem);
    transition:
        box-shadow 500ms ease,
        transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.game-admin-card:hover {
    box-shadow: var(--clay-card-shadow-hover);
    transform: translateY(-0.5rem);
}

.game-admin-card > header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.game-admin-card .clay-icon {
    margin: 0;
    text-transform: uppercase;
}

.game-admin-card h2 {
    margin: 0;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.2;
}

.game-description {
    margin: 1.5rem 0;
    color: var(--muted);
    white-space: pre-wrap;
}

.game-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-family: Nunito, ui-rounded, sans-serif;
    font-weight: 900;
}

.game-field-heading span {
    display: grid;
    min-width: 2rem;
    min-height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: rgb(124 58 237 / 10%);
    color: var(--violet);
    font-size: 0.75rem;
}

.game-field-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-field-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1.25rem;
    background: #efebf5;
    box-shadow:
        inset 5px 5px 11px rgb(185 177 198 / 40%),
        inset -5px -5px 11px rgb(255 255 255 / 85%);
}

.game-field-list li > span:first-child {
    display: grid;
}

.game-field-list small {
    color: var(--muted);
    font-family: ui-monospace, monospace;
}

.field-type {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgb(14 165 233 / 10%);
    color: #036b9f;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.internal-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgb(219 39 119 / 18%);
    border-radius: 999px;
    background: rgb(245 158 11 / 15%);
    box-shadow:
        4px 4px 9px rgb(160 150 180 / 16%),
        -3px -3px 7px rgb(255 255 255 / 82%),
        inset 2px 2px 4px rgb(255 255 255 / 40%),
        inset -2px -2px 4px rgb(219 39 119 / 8%);
    color: #9d174d;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.visibility-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 0;
    border: 0;
}

.visibility-options legend {
    grid-column: 1 / -1;
    margin-bottom: 0.2rem;
    font-family: Nunito, ui-rounded, sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
}

.visibility-option {
    display: flex;
    align-items: center;
    min-height: 4.5rem;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 1.25rem;
    background: #efebf5;
    box-shadow: var(--clay-pressed-shadow);
    cursor: pointer;
}

.visibility-option:has(input:checked) {
    background: rgb(255 255 255 / 84%);
    outline: 0.2rem solid rgb(124 58 237 / 18%);
}

.visibility-option:has(input:focus-visible) {
    outline: 0.25rem solid rgb(124 58 237 / 30%);
}

.visibility-option input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--violet);
}

.visibility-option span {
    display: grid;
    gap: 0.2rem;
}

.visibility-option strong {
    font-family: Nunito, ui-rounded, sans-serif;
    font-weight: 900;
}

.visibility-option small {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.35;
}

@media(max-width: 42rem) {
    .visibility-options {
        grid-template-columns: 1fr;
    }
}

.game-editor {
    width: 100%;
}

.clay-form-panel,
.definition-panel {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 2.5rem;
    background: rgb(255 255 255 / 70%);
    box-shadow: var(--clay-card-shadow);
    backdrop-filter: blur(1.25rem);
}

.clay-form-panel {
    width: min(52rem, 100%);
}

.definition-panel {
    margin-top: 2.5rem;
}

.section-heading,
.definition-list > li,
.definition-actions,
.choice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.section-heading h2,
.definition-copy h3 {
    margin: 0;
    font-family: Nunito, ui-rounded, sans-serif;
    font-weight: 900;
}

.definition-list {
    display: grid;
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.definition-list > li {
    padding: 1.25rem;
    border-radius: 1.75rem;
    background: #efebf5;
    box-shadow: var(--clay-pressed-shadow);
}

.definition-copy p {
    margin: 0;
    color: var(--muted);
}

.definition-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.definition-actions form {
    margin: 0;
}

.definition-actions .clay-action,
.choice-row .clay-action {
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem;
}

.choice-rows {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.choice-row input {
    min-width: 10rem;
    min-height: 3.25rem;
    flex: 1;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 1.15rem;
    background: #efebf5;
    box-shadow:
        inset 7px 7px 15px rgb(185 177 198 / 55%),
        inset -7px -7px 15px rgb(255 255 255 / 90%);
    color: var(--foreground);
    font: inherit;
    font-weight: 600;
}

.choice-row input:focus {
    background: rgb(255 255 255 / 84%);
    outline: 0.25rem solid rgb(124 58 237 / 20%);
}

.form-tail-actions {
    margin-top: 2rem;
    margin-bottom: 0;
}

.mutation-error-page {
    width: min(56rem, 100%);
}

.mutation-error-page h1 {
    margin-bottom: 2rem;
}

.error-summary {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 2px solid rgb(190 24 93 / 28%);
    border-radius: 1.75rem;
    background: rgb(255 255 255 / 72%);
    box-shadow: var(--clay-card-shadow);
}

.error-summary h2,
.error-summary p {
    margin-top: 0;
}

.error-summary p:last-child {
    margin-bottom: 0;
}

.field-error {
    color: #9d174d;
    font-weight: 800;
}

[aria-invalid="true"] {
    border-color: #be185d;
    box-shadow: 0 0 0 0.2rem rgb(190 24 93 / 14%);
}

@media(max-width: 42rem) {
    .management-actions,
    .page-heading .management-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .management-actions > .clay-action {
        width: 100%;
    }

    .game-admin-grid {
        grid-template-columns: 1fr;
    }

    .game-admin-card {
        border-radius: 2rem;
    }

    .section-heading,
    .definition-list > li,
    .choice-row {
        align-items: stretch;
        flex-direction: column;
    }

    .definition-actions,
    .definition-actions form,
    .definition-actions .clay-action,
    .choice-row .clay-action {
        width: 100%;
    }
}