:root {
    --bg: #14121f;
    --panel: #1e1b2e;
    --text: #f1eefc;
    --muted: #9b95b8;
    --accent: #7c5cff;
    --accent2: #ff5c9d;
    --c0: #ff5c9d; --c1: #ffd45c; --c2: #5cffb1; --c3: #5cc8ff; --c4: #7c5cff; --c5: #ff8a5c;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: radial-gradient(circle at 20% 0%, #2a2250 0%, var(--bg) 55%) fixed;
    color: var(--text);
    font-family: system-ui, "Segoe UI", sans-serif;
}

.app { max-width: 960px; margin: 0 auto; padding: 16px; text-align: center; }
.title { font-size: 1.8rem; margin: 8px 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }

button { font: inherit; cursor: pointer; border: 0; color: var(--text); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    padding: 12px 28px; border-radius: 12px; font-weight: 600;
    transition: transform .15s;
}
button.primary:not(:disabled):hover { transform: scale(1.05); }
button.ghost { background: var(--panel); padding: 8px 14px; border-radius: 10px; }
button.ghost:hover { background: #2a2640; }

/* join */
.join { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
.join-avatar { font-size: 5rem; animation: pop .4s ease; }
.name-input {
    width: 260px; padding: 12px 16px; border-radius: 12px; border: 2px solid transparent;
    background: var(--panel); color: var(--text); font-size: 1.1rem; text-align: center; outline: none;
}
.name-input:focus { border-color: var(--accent); }

/* toolbar */
.toolbar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }

/* players */
.players { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-bottom: 20px; }
.player { position: relative; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.player.me .pname { color: var(--c1); }
.avatar { font-size: 2.2rem; }
.pname { font-size: .9rem; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x { position: absolute; top: -6px; right: 0; background: none; color: var(--muted); font-size: .8rem; padding: 2px 4px; }
.x:hover { color: var(--accent2); }

.pcard {
    position: relative; width: 62px; height: 88px; perspective: 600px;
    transform-style: preserve-3d; transition: transform .6s;
}
.pcard.flipped { transform: rotateY(180deg); }
.pcard .face {
    position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.pcard .back { border: 2px dashed #45406a; font-size: 1.6rem; color: var(--c2); }
.pcard.voted .back {
    border: 2px solid var(--accent); background: repeating-linear-gradient(45deg, #3b2f8f, #3b2f8f 6px, #4a3cb5 6px, #4a3cb5 12px);
    animation: pop .3s ease;
}
.pcard .front {
    transform: rotateY(180deg); background: #fff; color: #2a2250; font-size: 1.8rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}

/* status */
.status { min-height: 170px; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.countdown {
    font-size: 5rem; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, var(--c1), var(--accent2)); -webkit-background-clip: text; background-clip: text;
    color: transparent; animation: tick 1s ease-out;
}
.big-card {
    margin: 0 auto;
    background: #fff; color: #2a2250; font-size: 3rem; font-weight: 800; width: 100px; height: 140px;
    display: flex; align-items: center; justify-content: center; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(124, 92, 255, .5); animation: pop .5s ease;
}
.consensus-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; animation: wiggle 1s ease-in-out 3; }
.consensus .big-card { animation: pop .5s ease, glow 1.2s ease-in-out infinite alternate; margin: 0 auto; }
.discuss { max-width: 520px; color: var(--c1); }

/* deck */
.deck { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.card {
    width: 66px; height: 96px; font-size: 1.5rem; font-weight: 700; border-radius: 12px;
    background: var(--panel); border: 2px solid #3a3560; transition: transform .15s, border-color .15s;
}
.card:not(:disabled):hover { transform: translateY(-8px); border-color: var(--accent); }
.card.selected { transform: translateY(-14px); background: var(--accent); border-color: #fff; }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti span { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: fall linear forwards; }

@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes tick { 0% { transform: scale(2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.85); opacity: .6; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.1); } 75% { transform: rotate(4deg) scale(1.1); } }
@keyframes glow { to { box-shadow: 0 0 50px 8px rgba(255, 212, 92, .8); } }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}