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;
}

:root {
    font-family: Inter, "Segoe UI", sans-serif;
    color: #f3f0e8;
    background: #101a17;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 50% 38%, #1b3027 0, #101a17 67%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
h1:focus { outline: none; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card { width: min(100%, 430px); padding: 48px 46px 38px; border: 1px solid #34463c; border-radius: 18px; background: #17231e; box-shadow: 0 28px 90px #0005; text-align: center; }
.brand-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 22px; border-radius: 16px; background: #d7ad62; color: #19221b; font-size: 28px; }
.eyebrow { margin: 0 0 10px; color: #a38c65; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.login-card h1, .game-heading h1 { margin: 0; color: #f4efe4; font-family: Georgia, serif; font-size: 42px; font-weight: 500; letter-spacing: -.04em; }
.login-copy { margin: 12px 0 30px; color: #a9b2aa; font-size: 14px; line-height: 1.6; }
.login-form { display: grid; gap: 10px; text-align: left; }
.login-form label, .admin-controls label { color: #c7c9be; font-size: 12px; font-weight: 700; }
.login-form input, .admin-controls select { min-height: 46px; padding: 0 13px; border: 1px solid #3b4a40; border-radius: 8px; outline: 0; background: #101a16; color: #f3f0e8; }
.login-form input:focus, .admin-controls select:focus { border-color: #d7ad62; }
.primary-button, .secondary-button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 7px; font-size: 12px; font-weight: 800; }
.primary-button { background: #d7ad62; color: #1b211a; }
.primary-button:hover:not(:disabled) { background: #e3bf7b; }
.secondary-button { border: 1px solid #48574b; background: transparent; color: #d5d8cf; }
.secondary-button:hover:not(:disabled) { background: #28352d; }
.login-button { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 8px; padding: 0 17px; font-size: 13px; }
.login-button span { font-size: 20px; font-weight: 400; }
.login-hint { margin: 25px 0 0; color: #829087; font-size: 11px; line-height: 1.6; }
.login-hint code { color: #d9bb83; }
.form-error, .error-message { color: #f3aaa0; }

.game-shell { min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 max(28px, calc((100vw - 1160px) / 2)); border-bottom: 1px solid #29362f; background: #111c18e8; }
.wordmark { color: #e5e1d6; font-size: 12px; font-weight: 900; letter-spacing: .15em; text-decoration: none; }
.wordmark span { margin-right: 8px; color: #d7ad62; font-size: 17px; }
.topbar-right, .identity { display: flex; align-items: center; }
.topbar-right { gap: 24px; }
.identity { gap: 9px; color: #d5d8cf; font-size: 12px; }
.online-dot, .status-dot, .legend-dot { width: 7px; height: 7px; border-radius: 50%; background: #79b18c; }
.role-pill { padding: 4px 7px; border: 1px solid #665b40; border-radius: 4px; color: #d7b975; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.text-button { padding: 5px 0; border: 0; background: none; color: #99a49c; font-size: 12px; }
.text-button:hover { color: #f3f0e8; }
.game-content { width: min(100% - 48px, 1120px); margin: 0 auto; padding: 44px 0 40px; }
.game-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; }
.game-heading h1 { font-size: 38px; }
.game-heading h1 span { color: #d7ad62; font-family: sans-serif; font-size: 22px; }
.round-status { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #34423a; border-radius: 20px; color: #aab5ac; font-size: 11px; }
.round-status .status-dot { background: #88958c; }
.round-status.is-live .status-dot { background: #78b38a; }
.admin-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 18px; padding: 18px 20px; border: 1px solid #3b4538; border-radius: 10px; background: #1b2821; }
.admin-copy { display: flex; align-items: center; gap: 13px; }
.admin-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 9px; background: #35372a; color: #d7ad62; }
.admin-copy h2 { margin: 0 0 4px; font-size: 13px; }
.admin-copy p { margin: 0; color: #929f94; font-size: 11px; }
.admin-controls { display: flex; align-items: center; gap: 9px; }
.admin-controls label { margin-right: 2px; white-space: nowrap; }
.admin-controls select { min-height: 40px; min-width: 118px; padding: 0 10px; font-size: 12px; }
.admin-controls .primary-button, .admin-controls .secondary-button { white-space: nowrap; }
.action-message { margin: 12px 0; font-size: 12px; }
.info-message { color: #d8bd82; }
.turn-banner, .result-banner { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 15px 18px; border: 1px solid #3a4e3e; border-radius: 9px; background: #19271f; }
.turn-icon, .result-icon { color: #d7ad62; font-size: 21px; }
.turn-banner strong, .result-banner strong { font-size: 13px; }
.turn-banner p, .result-banner p { margin: 4px 0 0; color: #9aa69b; font-size: 11px; }
.turn-count { display: grid; gap: 2px; margin-left: auto; text-align: right; }
.turn-count strong { color: #e5cf9f; font-size: 19px; }
.turn-count span { color: #8d9a90; font-size: 10px; }
.result-banner { border-color: #665a3d; background: #29271e; }
.winner-tag { margin-left: auto; color: #ddc17e; font-size: 11px; font-weight: 800; }
.table { overflow: hidden; border: 1px solid #536351; border-radius: 13px; background: radial-gradient(ellipse at center, #234334, #173227 78%); box-shadow: 0 20px 50px #0003, inset 0 0 0 8px #192920; }
.player-area { min-height: 190px; padding: 24px 28px 26px; }
.hand-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.hand-heading > div { display: flex; align-items: center; gap: 11px; }
.player-number { color: #d6b46f; font-family: Georgia, serif; font-size: 18px; }
.hand-heading h2 { margin: 0; color: #f1eee5; font-size: 13px; font-weight: 700; }
.hand-heading h2 small { color: #a5b1a7; font-size: 11px; font-weight: 400; }
.card-count { color: #b0bcb2; font-size: 10px; }
.card-row { display: flex; flex-wrap: wrap; gap: 10px; min-height: 112px; align-items: start; }
.playing-card { position: relative; display: grid; width: 75px; height: 108px; place-items: center; padding: 5px; overflow: hidden; border: 1px solid #d4d0c1; border-radius: 7px; background: #f1eee2; color: #29352d; box-shadow: 0 3px 7px #0b170f70; }
.playing-card:not(:disabled):hover { outline: 2px solid #e0bc71; outline-offset: 2px; }
.playing-card.selected { outline: 2px solid #e0bc71; outline-offset: 2px; }
.playing-card:disabled { opacity: 1; }
.card-face { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d9d5c9; border-radius: 4px; background: linear-gradient(145deg, #fffef9, #e7e3d7); }
.card-image { width: 100%; height: 100%; object-fit: contain; }
.card-art { color: #65816d; font-size: 30px; line-height: 1; }
.card-label { max-width: 100%; color: #334238; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-align: center; overflow-wrap: anywhere; }
.old-maid-card .card-face { border-color: #d2b879; background: linear-gradient(145deg, #fff8e6, #e8d7ad); }
.old-maid-card .card-art { color: #9c563d; font-size: 36px; }
.opponent-area .playing-card.card-back { border-color: #e0d4bd; background: #e9e2d3; }
.card-back-pattern { display: grid; width: 100%; height: 100%; place-items: center; border: 1px solid #c6b590; border-radius: 4px; background: repeating-linear-gradient(45deg, #314e40 0 5px, #3d604e 5px 10px); color: #d5bb7a; font-size: 29px; }
.opposite-view .card-face { transform: rotate(180deg); }
.table-divider { display: flex; align-items: center; gap: 12px; padding: 0 28px; color: #b69b62; }
.table-divider::before, .table-divider::after { height: 1px; flex: 1; background: #ffffff1c; content: ""; }
.table-divider span { font-size: 11px; }
.empty-hand { align-self: center; margin: 18px 0; color: #adc0b0; font-size: 12px; }
.game-footer { display: flex; justify-content: space-between; gap: 16px; padding: 17px 4px; color: #8c9b90; font-size: 10px; }
.game-footer p { display: flex; align-items: center; gap: 8px; margin: 0; }
.legend-dot { width: 6px; height: 6px; background: #d7ad62; }

@media (max-width: 760px) {
    .topbar { padding: 0 18px; }
    .game-content { width: min(100% - 30px, 1120px); padding-top: 30px; }
    .admin-panel { align-items: flex-start; flex-direction: column; }
    .admin-controls { flex-wrap: wrap; }
    .admin-controls label { width: 100%; }
    .player-area { padding: 20px 18px; }
    .playing-card { width: 64px; height: 94px; }
}

@media (max-width: 480px) {
    .login-card { padding: 38px 26px 30px; }
    .topbar { min-height: 60px; }
    .topbar-right { gap: 12px; }
    .identity { gap: 6px; font-size: 11px; }
    .role-pill { font-size: 8px; }
    .game-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
    .admin-controls { width: 100%; }
    .admin-controls .primary-button, .admin-controls .secondary-button { flex: 1; }
    .turn-banner { gap: 10px; padding: 13px; }
    .player-area { padding: 18px 13px; }
    .card-row { gap: 7px; }
    .playing-card { width: 56px; height: 82px; padding: 3px; }
    .card-art { font-size: 23px; }
    .old-maid-card .card-art { font-size: 28px; }
    .card-label { font-size: 7px; }
    .game-footer { flex-direction: column; }
    .result-banner { align-items: flex-start; flex-wrap: wrap; }
    .winner-tag { width: 100%; margin-left: 35px; }
}