:root {
    color-scheme: light;
    --party-ink: #211a2e;
    --party-muted: #6f687a;
    --party-paper: #fffaf4;
    --party-surface: #ffffff;
    --party-primary: #6d3df5;
    --party-primary-dark: #5226c8;
    --party-coral: #ff6b6b;
    --party-gold: #ffca3a;
    --party-mint: #35c7a0;
    --party-border: #ebe2f3;
    --party-danger: #b4233a;
    --party-radius: 1.25rem;
    --party-shadow: 0 14px 40px rgba(46, 31, 68, .10);
    --party-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --party-font-display: ui-rounded, "Arial Rounded MT Bold", "Avenir Next", "Segoe UI", sans-serif;
    --bs-body-font-family: var(--party-font-body);
    --bs-body-color: var(--party-ink);
    --bs-body-bg: var(--party-paper);
    --bs-primary: var(--party-primary);
    --bs-primary-rgb: 109, 61, 245;
    --bs-border-color: var(--party-border);
    --bs-border-radius: .75rem;
    --bs-border-radius-lg: var(--party-radius);
    --bs-focus-ring-color: rgba(109, 61, 245, .28);
}

html {
    min-width: 320px;
    background: var(--party-paper);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--party-ink);
    font-family: var(--party-font-body);
    background-color: var(--party-paper);
    background-image:
        radial-gradient(circle at 7% 13%, rgba(255, 107, 107, .12) 0 3px, transparent 3.5px),
        radial-gradient(circle at 91% 9%, rgba(109, 61, 245, .10) 0 2px, transparent 2.5px),
        radial-gradient(circle at 84% 76%, rgba(53, 199, 160, .11) 0 3px, transparent 3.5px),
        radial-gradient(circle at 12% 85%, rgba(255, 202, 58, .16) 0 2px, transparent 2.5px);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--party-ink);
    font-family: var(--party-font-display);
    font-weight: 800;
    letter-spacing: -.025em;
}

h1 {
    margin-bottom: 1rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.08;
}

p,
li,
label,
input,
textarea,
select,
button {
    font-size: 1rem;
}

a {
    color: var(--party-primary-dark);
    text-decoration-thickness: .1em;
    text-underline-offset: .18em;
}

a:hover {
    color: var(--party-primary);
}

button,
.btn,
.form-control,
.form-select {
    min-height: 44px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: .8rem;
    font-weight: 750;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--party-primary);
    --bs-btn-border-color: var(--party-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--party-primary-dark);
    --bs-btn-hover-border-color: var(--party-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--party-primary-dark);
    --bs-btn-active-border-color: var(--party-primary-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #8f70ec;
    --bs-btn-disabled-border-color: #8f70ec;
    box-shadow: 0 8px 18px rgba(82, 38, 200, .20);
}

.card {
    background: var(--party-surface);
    border: 1px solid var(--party-border);
    border-radius: var(--party-radius);
    box-shadow: var(--party-shadow);
}

.form-control,
.form-select {
    color: var(--party-ink);
    background-color: var(--party-surface);
    border-color: #93859c;
    border-radius: .8rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--party-primary);
    box-shadow: 0 0 0 .25rem rgba(109, 61, 245, .18);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--party-gold);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--party-ink);
}

.valid.modified:not([type="checkbox"]) {
    border-color: #167c62;
}

.invalid {
    border-color: var(--party-danger);
}

.validation-message {
    margin-top: .35rem;
    color: var(--party-danger);
    font-weight: 650;
}

.alert {
    border-width: 1px;
    border-radius: 1rem;
}

.blazor-error-boundary {
    padding: 1rem 1.25rem;
    color: #fff;
    background: var(--party-danger);
    border: 2px solid #fff;
    border-radius: 1rem;
}

.blazor-error-boundary::after {
    content: "Ein unerwarteter Fehler ist aufgetreten.";
}

.empty-state {
    display: grid;
    justify-items: center;
    max-width: 34rem;
    margin: 2rem auto;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    text-align: center;
    background: rgba(255, 255, 255, .88);
    border: 1px dashed #cdbce0;
    border-radius: var(--party-radius);
    box-shadow: var(--party-shadow);
}

.empty-state__icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    color: var(--party-primary);
    background: rgba(109, 61, 245, .08);
    border-radius: 50%;
    place-items: center;
}

.empty-state__icon svg {
    width: 3rem;
    height: 3rem;
}

.empty-state__title {
    margin-bottom: .5rem;
    font-size: 1.25rem;
}

.empty-state__message {
    max-width: 28rem;
    margin-bottom: 0;
    color: var(--party-muted);
}

.empty-state__action {
    margin-top: 1.25rem;
}

.game-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 32px;
    padding: .3rem .65rem;
    color: var(--party-ink);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.game-status-badge .status-symbol {
    width: 1rem;
    height: 1rem;
}

.game-status-badge--planned {
    color: #5b5268;
    background: #f1ebf6;
}

.game-status-badge--active {
    color: #075c48;
    background: #c9f4e8;
}

.game-status-badge--completed {
    color: #4a2a9e;
    background: #e7ddff;
}

.spinner-border {
    flex: 0 0 auto;
}

.account-page {
    display: grid;
    min-height: min(680px, calc(100svh - 8rem));
    padding-block: clamp(.5rem, 4vw, 2rem);
    place-items: center;
}

.account-card {
    position: relative;
    width: min(100%, 31rem);
    padding: clamp(1.4rem, 5vw, 2.5rem);
    overflow: hidden;
}

.account-card--wide {
    width: min(100%, 39rem);
}

.account-card::before {
    position: absolute;
    top: -4rem;
    right: -4rem;
    width: 9rem;
    height: 9rem;
    background: rgba(255, 202, 58, .22);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.account-card__mark {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    color: #fff;
    font-size: 1.45rem;
    background: var(--party-primary);
    border-radius: 1rem;
    box-shadow: 6px 6px 0 var(--party-gold);
    place-items: center;
    transform: rotate(-3deg);
}

.account-card__mark svg {
    width: 1.55rem;
    height: 1.55rem;
}

.account-eyebrow {
    margin-bottom: .35rem;
    color: var(--party-primary-dark);
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.account-lead {
    margin-bottom: 1.5rem;
    color: var(--party-muted);
    line-height: 1.6;
}

.account-alternative {
    margin: 1.5rem 0 0;
    color: var(--party-muted);
    text-align: center;
}

.submit-busy {
    display: none;
}

form[data-party-submitting="true"] .submit-ready {
    display: none;
}

form[data-party-submitting="true"] .submit-busy {
    display: inline;
}

@media (forced-colors: active) {
    .account-card__mark {
        color: CanvasText;
        background: Canvas;
        border: 2px solid CanvasText;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    body {
        background: Canvas;
    }

    .card,
    .empty-state,
    .game-status-badge,
    .btn,
    .form-control,
    .form-select {
        color: CanvasText;
        background: Canvas;
        border: 2px solid CanvasText;
        box-shadow: none;
    }

    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid Highlight;
        box-shadow: none;
    }
}