:root { color-scheme: light; font: 100%/1.5 "Inter", system-ui, sans-serif; color: #182c35; background: #f2f5f5; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
header { position: sticky; top: 0; z-index: 1; display: flex; gap: 1rem; align-items: center; min-height: 4rem; padding: .65rem 1rem; background: #133b42; color: white; }
main { max-width: 76rem; margin: auto; padding: 1rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
#status:empty, #entry-status:empty { display: none; }
button, input, select { min-height: 46px; font: inherit; border-radius: .45rem; padding: .5rem .75rem; }
button { border: 1px solid transparent; background: #17615d; color: white; cursor: pointer; }
button:disabled { opacity: .58; cursor: default; }
input, select { display: block; width: 100%; border: 1px solid #879d9f; background: white; color: inherit; }
label { display: block; }
form { display: grid; gap: .75rem; max-width: 34rem; }
#join { max-width: 20rem; }
#fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .7rem; }
.columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: min-content auto; grid-template-areas: "starters entry" "starters results"; gap: 1rem; align-items: start; }
.columns > section { border: 1px solid #d9e3e4; border-radius: .65rem; background: white; padding: 1rem; min-width: 0; }
.starters { grid-area: starters; }
.entry { grid-area: entry; }
.results { grid-area: results; }
.choices { display: grid; gap: .45rem; }
.choices button { width: 100%; text-align: left; color: #183c43; background: #eaf1f1; overflow-wrap: anywhere; }
#starter-list { list-style: none; margin: 0; padding: 0; }
#starter-list li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .4rem 0; overflow-wrap: anywhere; }
#starter-list li + li { border-top: 1px solid #d9e3e4; }
#starter-list button { flex: none; }
#starter-list button[aria-pressed="true"] { color: #183c43; background: #cce5e2; border-color: #17615d; }
#result-list { padding-left: 1.4rem; }
#result-list li { padding: .35rem 0; overflow-wrap: anywhere; }
#result-list .unranked { list-style-type: '–  '; }
#selected-starter { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
#entry-status { margin: .35rem 0 0; }
#score { margin-top: .6rem; }
@media (max-width: 44rem) {
    #workspace { padding-bottom: var(--entry-height, 0px); }
    .columns { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "results" "starters"; }
    .columns > .entry {
        position: fixed;
        z-index: 2;
        inset: auto 0 var(--keyboard-inset, 0px);
        max-height: calc(var(--visible-height, 100dvh) - 1rem);
        overflow: auto;
        border-radius: .65rem .65rem 0 0;
        box-shadow: 0 -4px 20px #182c3526;
        padding: .75rem max(1rem, env(safe-area-inset-right))
            max(.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    }
    .entry-heading { display: none; }
    #score { max-width: none; gap: .5rem; }
    #fields { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .45rem; }
}