html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.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;
}.home { max-width: 480px; margin: 4rem auto; }
.home .field { margin: 1rem 0; }
.home input, .home select { padding: .4rem; font-size: 1rem; }

.game-header { margin-bottom: 1rem; }
.game-header .error { color: #c00; font-weight: bold; }

.players { display: flex; flex-direction: column; gap: 1rem; }
.player { padding: .75rem; border: 2px solid #ddd; border-radius: 8px; background: #fafafa; }
.player.active { border-color: #2a7; background: #eefaf3; }
.player.out { opacity: .5; }
.player h3 { margin: 0 0 .25rem 0; }
.badge { font-size: .75rem; padding: 2px 6px; border-radius: 4px; background: #eee; margin-left: .5rem; }
.badge.self { background: #2a7; color: white; }
.declared { font-size: .85rem; color: #666; margin-bottom: .5rem; }

.cards { display: flex; flex-wrap: wrap; gap: .5rem; }
.card {
    width: 4rem; height: 6rem; border: 2px solid #333; border-radius: 6px;
    background: white; display: flex; flex-direction: column; padding: .25rem;
    cursor: default; user-select: none;
}
.card.revealed { background: #fffbe6; }
.card.pickable { cursor: pointer; border-color: #2a7; }
.card.pickable:hover { background: #eefaf3; }
.card .value { font-size: 1.75rem; text-align: center; flex: 1; display: flex; align-items: center; justify-content: center; }
.card .tokens { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.card .token { font-size: .7rem; background: #9cf; padding: 1px 5px; border-radius: 8px; }

.actions { margin-top: 1.5rem; padding: 1rem; background: #f0f0f0; border-radius: 8px; }
.actions input, .actions select { padding: .4rem; margin-right: .75rem; font-size: 1rem; }
button.primary {
    padding: .5rem 1.25rem; font-size: 1rem; background: #2a7;
    color: white; border: none; border-radius: 6px; cursor: pointer;
}
button.primary:disabled { background: #999; cursor: not-allowed; }

.result { margin-top: 2rem; padding: 1.5rem; background: #fffbe6; border-radius: 8px; text-align: center; }

@media (min-width: 900px) {
    .players { flex-direction: row; flex-wrap: wrap; }
    .player { flex: 1 1 45%; }
}

/* ���Ʒ�ת */
.card {
    transition: transform 0.4s ease, background-color 0.3s ease, border-color 0.3s ease;
    transform-style: preserve-3d;
}
.card.revealed {
    animation: card-flip 0.4s ease forwards;
}
@keyframes card-flip {
    0%   { transform: rotateY(0deg) scale(1); }
    50%  { transform: rotateY(90deg) scale(1.05); }
    100% { transform: rotateY(0deg) scale(1); background: #fffbe6; }
}

/* token ���� */
.token {
    animation: token-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes token-pop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ��ǰ�غ���Ҹ������� */
.player.active {
    animation: active-pulse 1.5s ease-in-out infinite;
}
@keyframes active-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(42, 119, 87, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(42, 119, 87, 0); }
}

/* AI ˼���� */
.thinking {
    display: inline-block;
    margin-left: .5rem;
}
.thinking::after {
    content: "";
    animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

/* ���ֵ��� */
.player.out {
    animation: fade-out 0.6s ease forwards;
}
@keyframes fade-out {
    to { opacity: 0.4; }
}
.skip-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: .4rem .8rem;
    font-size: .85rem;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    z-index: 100;
}
.skip-btn:hover { background: #ddd; }

.card { position: relative; }

.prime-fly {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #2a7;
    pointer-events: none;
    animation: prime-fly-in 600ms cubic-bezier(.22,.9,.3,1) forwards;
}

@keyframes prime-fly-in {
    0%   { transform: translate(-24px,-140px) scale(1.8) rotate(-12deg); opacity: 0; }
    25%  { opacity: 1; }
    70%  { transform: translate(0,0) scale(1.05) rotate(0); opacity: 1; }
    100% { transform: translate(0,0) scale(1); opacity: 0; }
}

.announce {
    display: inline-block;
    margin: .25rem .5rem 0 0;
    padding: .2rem .6rem;
    font-size: .85rem;
    background: #eefaf3;
    border: 1px solid #2a7;
    color: #1b5;
    border-radius: 999px;
    animation: announce-in 240ms ease-out;
}

@keyframes announce-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.lobby { padding: .5rem 0; }
.lobby ul { list-style: none; padding-left: 0; }
.lobby li { padding: .2rem 0; }
.chat { display: flex; flex-direction: column; gap: .3rem; max-height: 320px; overflow-y: auto; padding: .5rem; background: #f7faf8; border: 1px solid #cde; border-radius: 8px; }
.chat-msg { font-size: .9rem; line-height: 1.4; color: #234; }
.ghost { background: #fff; border: 1px solid #2a7; color: #2a7; }

.guide { max-width: 720px; margin: 2rem auto; padding: 0 1rem; line-height: 1.7; }
.guide h1 { font-size: 2rem; margin-bottom: .25rem; }
.guide h2 { font-size: 1.35rem; margin-top: 2rem; border-bottom: 1px solid #eee; padding-bottom: .25rem; }
.guide h3 { font-size: 1.1rem; margin-top: 1.25rem; }
.guide .tagline { color: #666; font-style: italic; }
.guide code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-size: .95em; }
.guide .primes { font-size: 1.15rem; font-family: monospace; background: #f8f8f8; padding: .75rem; border-radius: 6px; }
.guide-table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.guide-table th, .guide-table td { border: 1px solid #ddd; padding: .5rem .75rem; text-align: left; }
.guide-table th { background: #f5f5f5; }
.guide .highlight { background: #fff8e0; border-left: 4px solid #f0b400; padding: .75rem 1rem; border-radius: 4px; }
.guide .footer { text-align: center; color: #888; margin-top: 2rem; }
.guide .back-btn {
    display: inline-block; margin-top: 1.5rem; padding: .5rem 1.25rem;
    background: #2a7; color: white; text-decoration: none; border-radius: 6px;
}
.guide .back-btn:hover { background: #1d6; }

.guide-link {
    display: inline-block;
    margin-top: 1rem;
    color: #2a7;
    text-decoration: none;
    font-size: .95rem;
}
.guide-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .guide { padding: 0 .75rem; }
    .guide-table { font-size: .85rem; }
    .guide-table th, .guide-table td { padding: .35rem .5rem; }
}

.chat-box {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.chat-box h4 { margin: 0 0 .75rem 0; }
.chat-messages {
    max-height: 240px;
    overflow-y: auto;
    padding: .5rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: .9rem;
}
.chat-line { padding: 2px 0; line-height: 1.4; }
.chat-line.system { color: #888; font-style: italic; }
.chat-time { color: #aaa; font-size: .8rem; margin-right: .35rem; }
.chat-sender { font-weight: 600; color: #2a7; }
.chat-line.system .chat-sender { color: #888; }
.chat-text { word-break: break-word; }
.chat-input {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}
.chat-input input {
    flex: 1;
    padding: .4rem .6rem;
    font-size: .95rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.chat-input button {
    padding: .4rem 1rem;
    background: #2a7;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.chat-input button:hover { background: #1d6; }

.hint { color: #666; font-size: .9rem; }
.matchmaking-hint { color: #2a7; font-size: .95rem; margin: .5rem 0; }

.about { max-width: 480px; margin: 4rem auto; padding: 0 1rem; line-height: 1.7; text-align: center; }
.about-back { display: inline-block; margin-top: 1.5rem; padding: .5rem 1.25rem; background: #2a7; color: white; text-decoration: none; border-radius: 6px; }
.about-back:hover { background: #1d6; }

.login-wrap { max-width: 360px; margin: 4rem auto; padding: 0 1rem; }
.login-wrap h1 { text-align: center; }
.tabs { display: flex; gap: .5rem; margin: 1.5rem 0 1rem; }
.tabs button { flex: 1; padding: .5rem; background: #eee; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; }
.tabs button.active { background: #2a7; color: white; }
.login-wrap .field { margin-bottom: .75rem; }
.login-wrap .field label { display: block; font-size: .9rem; color: #666; margin-bottom: .25rem; }
.login-wrap input { width: 100%; padding: .5rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.login-wrap .primary { width: 100%; margin-top: 1rem; }
.login-wrap .hint { text-align: center; color: #888; font-size: .85rem; margin-top: 1rem; }

.auth-bar { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; padding: .5rem 1rem; background: #f5f5f5; border-radius: 6px; margin-bottom: 1rem; }
.auth-bar a.primary { padding: .3rem .8rem; background: #2a7; color: white; text-decoration: none; border-radius: 4px; }
.auth-bar a.admin-link { padding: .3rem .8rem; background: #f0b400; color: white; text-decoration: none; border-radius: 4px; }
.auth-bar button.small { padding: .3rem .8rem; background: #c33; color: white; border: none; border-radius: 4px; cursor: pointer; }

.stat-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stat-card { flex: 1 1 140px; padding: 1rem; background: #f5f5f5; border-radius: 8px; text-align: center; }
.stat-card .num { font-size: 1.75rem; font-weight: 700; color: #2a7; }
.stat-card .lbl { font-size: .85rem; color: #666; }

.admin-room {
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    padding: 1rem; margin: 1rem 0;
}
.admin-room h3 {
    margin: 0 0 .75rem 0; display: flex; gap: .5rem; align-items: center;
}
.admin-player {
    padding: .5rem; background: #f8f8f8; border-radius: 6px;
    margin-bottom: .5rem;
}
.admin-player .row {
    display: flex; gap: .5rem; align-items: center;
}
.admin-player .badge {
    font-size: .7rem; padding: 1px 6px; background: #ddd; border-radius: 8px;
}
.admin-player .badge.host { background: #f0b400; color: #fff; }
.admin-player .badge.out { background: #999; color: #fff; }

.admin-cards { display: flex; gap: 4px; margin-top: .4rem; flex-wrap: wrap; }
.admin-card {
    width: 2.5rem; padding: 4px; background: #fff;
    border: 1px solid #ccc; border-radius: 4px;
    text-align: center; font-size: .85rem;
}
.admin-card.revealed { background: #fffbe6; }
.admin-card .v { font-weight: bold; }
.admin-card .t { display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; }
.admin-card .tk {
    font-size: .6rem; background: #9cf; padding: 0 3px; border-radius: 6px;
}

.admin-chat { margin-top: .75rem; }
.admin-chat summary { cursor: pointer; color: #2a7; }
.chat-list {
    max-height: 200px; overflow-y: auto; background: #fafafa;
    padding: .5rem; border-radius: 4px; margin-top: .4rem;
}
.chat-list .line { padding: 2px 0; font-size: .85rem; }
.chat-list .line.sys { color: #888; font-style: italic; }
.chat-list .t { color: #aaa; margin-right: .4rem; }

button.small {
    padding: .2rem .6rem; font-size: .8rem; background: #eee;
    border: 1px solid #ccc; border-radius: 4px; cursor: pointer;
}
button.small.danger { background: #fee; color: #c00; border-color: #fbb; }
button.small.danger:hover { background: #fcc; }

.rejoin-bar { margin: 1rem 0; }
.rejoin-bar .primary { width: 100%; }

.notice {
    padding: .75rem 1rem;
    background: #e6f7ee;
    border: 1px solid #7dcaa3;
    border-radius: 4px;
    color: #1a7a4a;
    margin-bottom: 1rem;
}
.small-link {
    font-size: .9rem;
    color: #2a7;
    text-decoration: none;
    padding: .3rem .6rem;
}
.small-link:hover { text-decoration: underline; }