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;
}
/* ---------- Cluepalooza ---------- */
:root {
    --navy: #0b1a6b;
    --navy-dark: #060f3f;
    --gold: #ffcc33;
    --ink: #f4f6ff;
    --good: #2eb872;
    --bad: #e5484d;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100vh;
    background: var(--navy-dark);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, sans-serif;
}

.logo { font-size: 4rem; color: var(--gold); text-shadow: 3px 3px 0 #000; margin: 0 0 1rem; text-align: center; }
.logo.small { font-size: 2.2rem; }

.btn {
    background: var(--gold); color: #1a1200; border: 0; border-radius: .5rem;
    padding: .8rem 1.4rem; font-size: 1.1rem; font-weight: 700; cursor: pointer;
    text-decoration: none; display: inline-block; margin: .4rem 0;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.big { font-size: 1.6rem; padding: 1rem 2rem; }
.btn.small { font-size: .9rem; padding: .4rem .8rem; margin-left: auto; background: #394080; color: var(--ink); }

input, select, textarea {
    width: 100%; padding: .8rem; font-size: 1.2rem; border-radius: .5rem; border: 2px solid #394080;
    background: #fff; color: #111; margin: .3rem 0 .8rem;
}
.code-input { text-transform: uppercase; letter-spacing: .4rem; text-align: center; font-size: 2rem; }
label { display: block; font-weight: 600; }
.error { color: #ff8a8a; }

.card { background: var(--navy); border-radius: 1rem; padding: 1.5rem; margin: 1rem 0; }

/* Home */
.home { max-width: 40rem; margin: 0 auto; padding: 2rem 1rem; }

/* Phone pages */
/* Player screens scale with the display: the base size grows with the viewport (phone ≈ 16px, tablet ≈ 21px, large monitor ≈ 28px),
   and everything inside is in em so text, buttons and inputs grow together. */
.phone { width: 100%; max-width: 75rem; margin: 0 auto; padding: clamp(.8rem, 2vw, 2rem); font-size: clamp(1rem, .55rem + 1.5vw, 1.75rem); }
.phone .logo.small { font-size: 2.2em; }
.phone input { font-size: 1.2em; }
.phone .btn { font-size: 1.1em; }
.phone .code-input { font-size: 1.8em; }
.phone > .card { max-width: 32em; margin-inline: auto; }
/* Keep text and the answer box a readable width on wide screens; only the board uses the full width. */
.phone > :not(.board):not(.card) { max-width: 40em; margin-inline: auto; }
.phone > .btn { display: block; width: 100%; text-align: center; }
.phone-header { display: flex; justify-content: space-between; font-size: 1.4em; padding: .6rem 1rem; background: var(--navy); border-radius: .6rem; }
.phone-header strong { color: var(--gold); }
.phone-clue { font-size: 1.5em; text-align: center; margin: 1rem 0; }
.status { text-align: center; font-size: 1.1em; opacity: .9; }
.verdict { text-align: center; font-size: 2em; font-weight: 800; }
.verdict.right { color: var(--good); }
.verdict.wrong { color: var(--bad); }
.timer { text-align: center; font-size: 3em; font-weight: 800; color: var(--gold); margin: .2rem 0; }

/* Host screen */
.host { min-height: 100vh; display: flex; flex-direction: column; }
.host-main { flex: 1; display: flex; padding: 1rem; }
.lobby { margin: auto; text-align: center; width: 100%; max-width: 70rem; }
.clue-view { margin: 0 auto; text-align: center; width: 100%; max-width: 70rem; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: var(--navy); border-radius: .8rem; padding: 1.5rem; }
.lobby-hint { font-size: 1.6rem; }
.lobby-row { display: flex; gap: 3rem; justify-content: center; align-items: center; margin: 1rem 0; }
.qr { width: 16rem; background: #fff; padding: .5rem; border-radius: .5rem; }
.qr svg { width: 100%; height: auto; display: block; }
.room-code { font-size: 8rem; font-weight: 900; letter-spacing: .6rem; color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1rem 0; }
.chip { background: var(--navy); padding: .5rem 1.1rem; border-radius: 2rem; font-size: 1.4rem; border: 2px solid transparent; }

.board { flex: 1; display: grid; gap: .5rem; width: 100%; grid-auto-rows: 1fr; }
.board-cat { background: var(--navy); display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: clamp(.9rem, 1.7vw, 1.7rem); font-weight: 800; text-transform: uppercase; padding: .6rem; overflow-wrap: anywhere; border-radius: .4rem; min-height: 5rem; }
.board-tile { padding: 0; background: var(--navy); color: var(--gold); border: 0; border-radius: .4rem; font-size: clamp(1.4rem, 3.2vw, 3.2rem); font-weight: 800;
    text-shadow: 2px 2px 0 #000; cursor: default; min-height: 5rem; }
.board-tile.pickable { cursor: pointer; }
.board-tile.pickable:hover { background: #1a2ca0; }
.board-tile:disabled { cursor: default; opacity: 1; }
.board-tile.empty { background: transparent; cursor: default; }

.clue-cat { font-size: 1.6rem; color: var(--gold); text-transform: uppercase; }
.clue-text { font-size: 3rem; font-weight: 700; margin: 1rem 0; text-shadow: 2px 2px 0 #000; }
.correct-answer { font-size: 2.4rem; color: var(--gold); font-weight: 800; }


.scoreboard { position: sticky; bottom: 0; min-height: 3.6rem; display: flex; gap: 1rem; align-items: center; padding: .8rem 1rem; background: #000; flex-wrap: wrap; }
.score { background: var(--navy); border-radius: .5rem; padding: .4rem 1rem; display: flex; gap: .8rem; font-size: 1.2rem; }
.score strong { color: var(--gold); }

.podium { list-style: none; padding: 0; font-size: 2rem; max-width: 30rem; margin: 1rem auto; }
.podium li { display: flex; justify-content: space-between; background: var(--navy); margin: .4rem 0; padding: .6rem 1.2rem; border-radius: .5rem; }
.podium li:first-child { background: var(--gold); color: #1a1200; }

@media (max-width: 700px) {
    .logo { font-size: 2.5rem; }
}

/* Host board and answer reveal */
.board-wrap { flex: 1; display: flex; flex-direction: column; gap: .8rem; width: 100%; }
.banner { text-align: center; font-size: 2rem; font-weight: 700; color: var(--gold); margin: 0; }
.chip.done { border-color: var(--good); }

.answers { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-width: 0; }
.answer-row { display: flex; align-items: center; gap: .8rem; background: var(--navy-dark); border-radius: .5rem; padding: .4rem .8rem; border-left: .4rem solid #394080; }
.answer-row.right { border-left-color: var(--good); }
.answer-row.wrong { border-left-color: var(--bad); }
.answer-name { opacity: .7; min-width: 6rem; font-size: .95rem; text-align: left; }
.answer-text { flex: 1; font-size: 1.25rem; font-weight: 700; text-align: left; }
.mark { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 2px solid #394080; background: transparent; color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.mark.yes.on { background: var(--good); border-color: var(--good); }
.mark.no.on { background: var(--bad); border-color: var(--bad); }

input[type=checkbox] { width: auto; margin: 0 .5rem 0 0; }
label.check { font-weight: 400; margin: .4rem 0; }

/* Round-robin picking */
.banner .btn { margin-left: 1rem; vertical-align: middle; }
.score.picker { outline: 2px solid var(--gold); }
.phone .board { gap: clamp(.25rem, .6vw, .6rem); }
.phone .board-cat { font-size: .6em; min-height: 3.2em; padding: .2em; }
.phone .board-tile { font-size: 1em; min-height: 3.2em; }

.score-empty { opacity: .6; font-size: 1.1rem; }

/* Judging screen: answers on the left, award button beside them */
.reveal-row { display: flex; gap: 1.2rem; align-items: stretch; width: 100%; margin-top: .8rem; }
.award { flex: 0 0 14rem; margin: 0; font-size: 1.5rem; line-height: 1.25; }
.correct-answer { margin: .4rem 0; }
.score-actions { margin-left: auto; display: flex; gap: .5rem; }
.score-actions .btn.small { margin: 0; }
@media (max-width: 900px) { .reveal-row { flex-direction: column; } .award { flex-basis: auto; } }

/* Jeopardy-style reveal: the clue grows out of the tile that was picked */
@keyframes clue-zoom {
    0% { transform: scale(.08); opacity: .3; }
    60% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes clue-text-in {
    from { opacity: 0; transform: translateY(.6rem); }
    to { opacity: 1; transform: none; }
}
.clue-view.zoom-in { animation: clue-zoom .75s cubic-bezier(.2, .8, .2, 1) both; }
.clue-view.zoom-in .clue-text { animation: clue-text-in .6s .5s both; }
@media (prefers-reduced-motion: reduce) {
    .clue-view.zoom-in, .clue-view.zoom-in .clue-text { animation: none; }
}

.back-link { display: inline-block; color: var(--gold); text-decoration: none; margin-bottom: .5rem; }
.back-link:hover { text-decoration: underline; }

/* Host clue editor on the judging screen */
.clue-view { position: relative; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border-radius: 50%;
    border: 1px solid #394080; background: transparent; color: var(--ink); cursor: pointer; opacity: .7; }
.icon-btn:hover, .icon-btn:focus-visible { opacity: 1; background: #1a2ca0; }
.edit-btn { margin-left: .7rem; vertical-align: middle; }
.clue-editor { width: 100%; max-width: 44rem; text-align: left; margin: .5rem 0; }
.clue-editor textarea { resize: vertical; font-family: inherit; }
.editor-actions { display: flex; gap: 1rem; align-items: center; }
.editor-actions .btn.small { margin: 0; }

/* Question editor */
.admin { max-width: 52rem; margin: 0 auto; padding: 2rem 1rem; }
.admin .card h2 { margin-top: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; cursor: pointer; text-align: left; }
.link-btn:hover, .link-btn:focus-visible { text-decoration: underline; }
.muted { opacity: .7; font-size: .9rem; }
.tag { background: #394080; border-radius: .4rem; padding: .1rem .5rem; font-size: .8rem; }
.admin-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.admin-list li { display: flex; gap: .8rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid #1a2ca0; }
.admin-list .grow { flex: 1; font-size: 1.1rem; }
.inactive { opacity: .55; }
.add-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.add-row input:not([type=checkbox]) { flex: 1; min-width: 12rem; margin: 0; }
.add-row .btn.small, .clue-actions .btn.small { margin: 0; }
.add-row .check { display: inline-flex; align-items: center; white-space: nowrap; }
.btn.small.danger { background: var(--bad); color: #fff; }
.admin-clue { padding: .7rem 0; border-bottom: 1px solid #1a2ca0; }
.admin-clue p { margin: .2rem 0; }
.admin-clue .answer { color: var(--gold); }
.clue-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.clue-editor label { display: block; margin-bottom: .6rem; }

/* Score corrections */
.score { align-items: center; }
.score .step { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #394080; background: transparent; color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.score .step:hover, .score .step:focus-visible { background: #1a2ca0; }
.score-input { width: 6.5rem; margin: 0; padding: .2rem .4rem; font-size: 1.1rem; text-align: right; }
.last-award { font-size: .8rem; opacity: .85; }
.last-award.gain { color: var(--good); }
.last-award.loss { color: #ff8a8a; }
.btn.small.active { background: var(--gold); color: #000; }
.banner-warn { background: #5a1a1a; border: 1px solid var(--bad); border-radius: .5rem; padding: .6rem 1rem; }

/* Links: the browser's default blue is unreadable on the navy cards. Classed links (buttons, game cards) set their own colours. */
/* :where() keeps these at zero specificity so any class (.btn, .game-link, ...) still wins. */
:where(a) { color: var(--gold); }
:where(a:hover, a:focus-visible) { color: #ffe08a; }

.finale { position: relative; z-index: 1; }
.finale .logo { animation: finale-pop .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.finale .podium li { animation: finale-rise .6s ease-out both; }
.finale .podium li:nth-child(2) { animation-delay: .15s; }
.finale .podium li:nth-child(3) { animation-delay: .3s; }
.finale .podium li:nth-child(n+4) { animation-delay: .45s; }
.finale .podium li:first-child { animation: finale-rise .6s ease-out both, finale-glow 1.8s ease-in-out .8s infinite alternate; }
@keyframes finale-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes finale-rise { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes finale-glow { from { box-shadow: 0 0 0 rgba(255, 204, 51, 0); } to { box-shadow: 0 0 1.6rem rgba(255, 204, 51, .8); } }
@media (prefers-reduced-motion: reduce) {
    .confetti { display: none; }
    .finale .logo, .finale .podium li, .finale .podium li:first-child { animation: none; }
}