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;
}
/* ---------- MiniShowOff site styling: same comic look as the game (paper cards, thick ink outlines, pink offset shadows, Bangers) ---------- */
:root { --ink:#111; --paper:#fffdf5; --yellow:#ffd23f; --cyan:#19b5c4; --pink:#ff2e63; --purple:#7a4bd8; --dim:#5b6070; --display:'Bangers', Impact, 'Arial Narrow Bold', sans-serif; }
html, body { margin:0; min-height:100%; font-family:'Barlow Condensed', 'Segoe UI', system-ui, Arial, sans-serif; font-size:18px; color:var(--ink); }
body { background-color:var(--yellow); background-image:repeating-conic-gradient(from 0deg at 50% 18%, rgba(255,255,255,.22) 0deg 7deg, rgba(255,255,255,0) 7deg 14deg); background-attachment:fixed; }
a { color:#0b7f8c; font-weight:700; }
h1, h2, h3, .display { font-family:var(--display); font-weight:400; letter-spacing:.04em; }
h1 { margin:.2rem 0 1rem; font-size:3rem; line-height:.95; text-shadow:.05em .05em 0 var(--paper), .09em .09em 0 var(--ink); }
h2 { margin:1.2rem 0 .6rem; font-size:1.8rem; }
h1:focus { outline:none; }

.topbar { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:.55rem 1.2rem; background:var(--ink); border-bottom:5px solid var(--pink); }
.topbar .brand { font-family:var(--display); color:var(--yellow); text-decoration:none; font-size:1.8rem; letter-spacing:.06em; }
.topbar nav { display:flex; gap:1.1rem; flex:1; flex-wrap:wrap; }
.topbar nav a { font-family:var(--display); font-size:1.35rem; letter-spacing:.06em; color:var(--paper); text-decoration:none; border-bottom:3px solid transparent; font-weight:400; }
.topbar nav a:hover { color:var(--yellow); }
.topbar nav a.active { border-bottom-color:var(--pink); }
.topbar nav a.adminlink { color:var(--cyan); }
.topbar .account { display:flex; gap:.9rem; align-items:center; color:var(--paper); }
.topbar .account a { color:var(--paper); }
.topbar .account form { margin:0; }
.content { padding:1.4rem 1.2rem 3rem; max-width:1200px; margin:0 auto; }

.card { background:var(--paper); border:4px solid var(--ink); box-shadow:7px 7px 0 var(--pink); padding:1rem 1.3rem; margin-bottom:1.6rem; }
.muted { color:var(--dim); }
.row { display:flex; flex-wrap:wrap; gap:1.4rem; }
.col-lg-6 { flex:1 1 360px; max-width:520px; } .col-lg-4 { flex:1 1 280px; max-width:420px; } .col-md-6 { flex:1 1 320px; } .col-md-4 { flex:1 1 260px; }
.mb-3 { margin-bottom:1rem; } .mt-3 { margin-top:1rem; } .w-100 { width:100%; box-sizing:border-box; }
.text-danger { color:#c4153f; } .text-success { color:#0d8a3a; }
.form-floating { display:flex; flex-direction:column-reverse; }
.form-floating label, label.lbl { color:var(--dim); font-size:.9rem; margin-bottom:.2rem; display:block; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
input, select, textarea, .form-control { background:#fff; color:var(--ink); border:3px solid var(--ink); padding:.4rem .6rem; font:inherit; box-sizing:border-box; max-width:100%; border-radius:0; }
input[type=checkbox] { width:auto; accent-color:var(--pink); }
.form-control, .form-floating input { width:100%; }
::placeholder { color:transparent; }
.btn { display:inline-block; border:3px solid var(--ink); background:var(--paper); color:var(--ink); padding:.25rem .9rem; cursor:pointer; font-family:var(--display); font-size:1.15rem; letter-spacing:.05em; text-decoration:none; box-shadow:3px 3px 0 var(--ink); }
.btn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-primary, .btn.primary { background:var(--pink); color:#fff; }
.btn-lg { font-size:1.5rem; padding:.3rem 1.2rem; }
.btn.danger { background:#c4153f; color:#fff; }
.btn.small { font-size:.95rem; padding:.1rem .55rem; box-shadow:2px 2px 0 var(--ink); }
.btn-link { background:none; border:none; color:var(--yellow); padding:0; box-shadow:none; text-decoration:underline; font-family:inherit; font-size:1rem; font-weight:700; }
.alert, .status-message { padding:.5rem .9rem; border:3px solid var(--ink); background:var(--paper); margin:.6rem 0 1rem; font-weight:700; }
.alert.ok { background:#c9f5d6; } .alert.err { background:#ffd0d9; }
table.grid { width:100%; border-collapse:collapse; }
table.grid th, table.grid td { text-align:left; padding:.4rem .6rem; border-bottom:2px solid var(--ink); vertical-align:middle; }
table.grid th { font-family:var(--display); font-weight:400; font-size:1.05rem; letter-spacing:.06em; background:var(--ink); color:var(--yellow); border-bottom:none; }
table.grid tr.off td { opacity:.55; }
.tag { display:inline-block; padding:0 .55rem; font-family:var(--display); letter-spacing:.06em; background:var(--ink); color:var(--yellow); margin-right:.3rem; transform:rotate(-1deg); }
.tag.admin { background:var(--purple); color:#fff; } .tag.off { background:#c4153f; color:#fff; } .tag.assist { background:var(--cyan); color:var(--ink); }
.formgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.9rem; align-items:end; }
.adminnav { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.adminnav a { padding:.1rem .9rem; border:3px solid var(--ink); background:var(--paper); color:var(--ink); text-decoration:none; font-family:var(--display); font-size:1.2rem; letter-spacing:.05em; font-weight:400; box-shadow:3px 3px 0 var(--ink); }
.adminnav a.active { background:var(--pink); color:#fff; }
.gamewrap { width:100%; height:calc(100vh - 130px); min-height:620px; border:4px solid var(--ink); box-shadow:8px 8px 0 var(--pink); box-sizing:border-box; }
.gamewrap iframe { width:100%; height:100%; border:0; display:block; background:#000; }
.big { font-family:var(--display); font-size:3rem; line-height:1; color:var(--pink); -webkit-text-stroke:1.5px var(--ink); letter-spacing:.04em; }

/* ---------- Top 10 score card ---------- */
.top10 { max-width:640px; margin:0 auto 2rem; background:var(--paper); border:5px solid var(--ink); box-shadow:10px 10px 0 var(--pink); transform:rotate(-.6deg); }
.top10 .t10-head { background:var(--ink); color:var(--yellow); text-align:center; padding:.5rem 1rem .3rem; border-bottom:5px solid var(--pink); }
.top10 .t10-head h2 { margin:0; font-size:3.2rem; line-height:.95; letter-spacing:.06em; color:var(--yellow); text-shadow:.05em .05em 0 var(--pink); }
.top10 .t10-head .sub { font-family:var(--display); letter-spacing:.14em; color:var(--cyan); font-size:1.05rem; }
.top10 ol { list-style:none; margin:0; padding:.4rem .8rem .6rem; }
.top10 li { display:grid; grid-template-columns:3.2rem 1fr auto; align-items:center; gap:.8rem; padding:.35rem .4rem; border-bottom:3px dashed rgba(17,17,17,.35); }
.top10 li:last-child { border-bottom:none; }
.top10 .rk { font-family:var(--display); font-size:1.7rem; width:2.6rem; height:2.6rem; display:flex; align-items:center; justify-content:center; border:3px solid var(--ink); background:var(--paper); border-radius:50%; box-shadow:2px 2px 0 var(--ink); }
.top10 li.r1 .rk { background:var(--yellow); font-size:2rem; } .top10 li.r2 .rk { background:#d9dde6; } .top10 li.r3 .rk { background:#f0a56a; }
.top10 li.r1 { background:linear-gradient(90deg, rgba(255,210,63,.45), rgba(255,210,63,0)); }
.top10 .who { font-family:var(--display); font-size:1.7rem; letter-spacing:.04em; line-height:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top10 .who small { display:block; font-family:'Barlow Condensed', sans-serif; font-size:.9rem; color:var(--dim); letter-spacing:0; font-weight:700; }
.top10 .pts { font-family:var(--display); font-size:2rem; color:var(--pink); -webkit-text-stroke:1.2px var(--ink); letter-spacing:.03em; text-align:right; }
.top10 li.me { outline:4px solid var(--cyan); outline-offset:-2px; background:rgba(25,181,196,.18); }
.top10 .youbar { border-top:5px solid var(--ink); background:var(--cyan); padding:.35rem 1rem; font-family:var(--display); font-size:1.3rem; letter-spacing:.05em; display:flex; justify-content:space-between; }
.top10 .empty { padding:1.6rem 1rem; text-align:center; font-family:var(--display); font-size:1.6rem; letter-spacing:.05em; }
.top10 .t10-foot { padding:.5rem 1rem 1rem; text-align:center; }
@media (max-width:520px) { h1 { font-size:2.2rem; } .top10 { transform:none; } .top10 .t10-head h2 { font-size:2.4rem; } .top10 .who { font-size:1.35rem; } .top10 .pts { font-size:1.6rem; } }

.periods { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin:0 0 1.4rem; }
.periods a.tab { padding:.1rem .9rem; border:3px solid var(--ink); background:var(--paper); color:var(--ink); text-decoration:none; font-family:var(--display); font-size:1.2rem; letter-spacing:.05em; font-weight:400; box-shadow:3px 3px 0 var(--ink); }
.periods a.tab.active { background:var(--pink); color:#fff; }
.ach { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.8rem; }
.ach .a { border:3px solid var(--ink); padding:.5rem .7rem; background:var(--paper); }
.ach .a.on { background:#fff3b0; box-shadow:3px 3px 0 var(--pink); }
.ach .a.off { opacity:.5; filter:grayscale(1); }
.ach .a b { font-family:var(--display); font-size:1.25rem; font-weight:400; letter-spacing:.04em; display:block; }
.ach .a small { color:var(--dim); font-weight:700; }
.stat { display:flex; flex-wrap:wrap; gap:1.2rem 2rem; }
.stat div { min-width:120px; } .stat .v { font-family:var(--display); font-size:1.9rem; color:var(--pink); -webkit-text-stroke:1px var(--ink); line-height:1; }
.stat .k { color:var(--dim); font-weight:700; text-transform:uppercase; font-size:.8rem; letter-spacing:.05em; }