:root {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #020617;
}

body {
    min-height: 100%;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(127, 29, 29, .18), transparent 35%),
        radial-gradient(circle at 85% 25%, rgba(30, 41, 59, .35), transparent 40%),
        #020617;
}

.moon-glow {
    position: fixed;
    z-index: 0;
    top: -7rem;
    right: -6rem;
    width: 20rem;
    height: 20rem;
    border-radius: 9999px;
    background: rgba(248, 250, 252, .08);
    box-shadow:
        0 0 90px rgba(248, 250, 252, .08),
        0 0 180px rgba(239, 68, 68, .08);
    pointer-events: none;
}

.glass-card {
    border: 1px solid rgba(51, 65, 85, .8);
    border-radius: 1.5rem;
    background: rgba(15, 23, 42, .72);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
}

.input-dark {
    width: 100%;
    border: 1px solid #334155;
    border-radius: .9rem;
    background: rgba(2, 6, 23, .82);
    padding: .82rem 1rem;
    color: #f8fafc;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.input-dark:focus {
    border-color: rgba(248, 113, 113, .75);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .10);
}

.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .9rem;
    padding: .75rem 1rem;
    font-weight: 800;
    transition: transform .15s, filter .15s, border-color .15s;
}

.btn-primary {
    background: linear-gradient(135deg, #ef4444, #991b1b);
    color: white;
    box-shadow: 0 10px 35px rgba(239, 68, 68, .2);
}

.btn-secondary {
    border: 1px solid #475569;
    background: rgba(30, 41, 59, .82);
    color: #f8fafc;
}

.btn-danger {
    border: 1px solid rgba(239, 68, 68, .55);
    background: rgba(127, 29, 29, .35);
    color: #fecaca;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover {
    filter: brightness(1.09);
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
    transform: scale(.98);
}

button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

summary::-webkit-details-marker {
    display: none;
}

.player-choice {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid #334155;
    border-radius: 1rem;
    background: rgba(2, 6, 23, .55);
    padding: .85rem 1rem;
    text-align: left;
    transition: border-color .15s, background .15s, transform .15s;
}

.player-choice:hover {
    border-color: rgba(248, 113, 113, .65);
    background: rgba(127, 29, 29, .18);
}

.player-choice.selected {
    border-color: #f87171;
    background: rgba(127, 29, 29, .28);
}

.dead-player {
    opacity: .5;
    filter: grayscale(.75);
}

@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}