:root {
  color-scheme: light;
  --ink: #172033; --muted: #5f6c80; --surface: #fff; --surface-subtle: #f6f8fc;
  --background: #eef2f8; --primary: #073a9e; --primary-dark: #052a77;
  --primary-soft: #e9f1ff; --accent: #ec5a16; --border: #dce3ee; --danger: #b42338;
  --radius: .9rem; --shadow: 0 .75rem 2rem rgb(23 32 51 / 9%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--background); }
body { min-width: 20rem; min-height: 100vh; margin: 0; color: var(--ink); background: var(--background); font-size: 1rem; line-height: 1.55; }
main, .container { width: min(calc(100% - 2rem), 66rem); margin: clamp(1.25rem, 4vw, 3rem) auto; padding: clamp(1.25rem, 3.5vw, 2.75rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.18; letter-spacing: -.025em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h2 { margin-top: 2rem; font-size: clamp(1.18rem, 2.4vw, 1.45rem); }
h3 { font-size: 1rem; }
p { color: var(--muted); }
a { color: var(--primary); font-weight: 650; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--primary-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgb(236 90 22 / 42%); outline-offset: 3px; }
header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
nav { display: flex; flex-wrap: wrap; gap: .45rem .8rem; font-size: .92rem; }
form { display: grid; gap: 1rem; max-width: 44rem; }
label { display: grid; gap: .38rem; color: #2b3850; font-size: .95rem; font-weight: 680; }
label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .62rem; font-weight: 520; }
input, select, textarea { width: 100%; min-height: 2.75rem; padding: .6rem .75rem; border: 1px solid #cbd5e1; border-radius: .55rem; background: #fff; color: var(--ink); font: inherit; box-shadow: inset 0 1px 1px rgb(23 32 51 / 3%); }
input::placeholder, textarea::placeholder { color: #8a96a8; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 3px solid rgb(7 58 158 / 16%); outline-offset: 0; }
/* Keep select popups native: browser styling for selected options is inconsistent. */
select { appearance: menulist; -webkit-appearance: menulist; -moz-appearance: menulist; color-scheme: light; background-color: Canvas; color: CanvasText; }
select option, select optgroup { background-color: Canvas; color: CanvasText; }
select[multiple] { min-height: 9rem; padding: .3rem; }
select[multiple] option { padding: .45rem .6rem; }
textarea { min-height: 8rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; min-height: 1.15rem; padding: 0; accent-color: var(--primary); }
button, .button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 2.75rem; padding: .6rem 1rem; border: 1px solid transparent; border-radius: .55rem; background: var(--primary); color: #fff; font: inherit; font-size: .94rem; font-weight: 720; line-height: 1.2; cursor: pointer; box-shadow: 0 .2rem .4rem rgb(5 42 119 / 18%); text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
button:hover, .button:hover { color: #fff; background: var(--primary-dark); }
button:active, .button:active { transform: translateY(1px); }
fieldset { display: grid; gap: .8rem; margin: .25rem 0; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); }
legend { padding: 0 .35rem; color: #2a4268; font-weight: 760; }
code { padding: .12rem .35rem; border-radius: .3rem; background: #eaf0f8; color: #28415f; }
[role="alert"], .error-summary { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid #f1c4cc; border-left: .3rem solid var(--danger); border-radius: .65rem; background: #fff5f6; color: #7b1f30; }
[role="status"], noscript p { margin: 1rem 0; padding: .8rem 1rem; border-left: .3rem solid var(--accent); border-radius: .5rem; background: #fff8e9; color: #684a12; }

.admin-list { display: grid; gap: .75rem; margin: 1rem 0; padding: 0; list-style: none; }
.admin-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-subtle); }
.admin-list li > div { min-width: 0; }
.admin-list span { display: block; color: var(--muted); font-size: .9rem; }
.admin-list form { display: flex; flex: 0 1 auto; align-items: end; gap: .6rem; }
.admin-list form label { min-width: 10rem; }
.catalog-form { display: grid !important; flex: 1 1 44rem !important; grid-template-columns: minmax(11rem, 2fr) minmax(11rem, 2fr) minmax(8rem, 1fr) auto; align-items: end; max-width: none; }
.catalog-form .catalog-comment { grid-column: 1 / -1; min-width: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: .75rem; background: #fff; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .75rem .85rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: #334764; background: var(--surface-subtle); font-size: .82rem; font-weight: 760; letter-spacing: .02em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.danger-zone { margin-top: 2rem; padding: 1rem; border: 1px solid #f1c4cc; border-radius: var(--radius); background: #fff7f7; }
.danger-zone button { background: var(--danger); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.stats div { padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-subtle); }
.stats dt { color: var(--muted); font-size: .86rem; }
.stats dd { margin: .2rem 0 0; color: var(--ink); font-size: 1.65rem; font-weight: 800; }

/* Public pages use the same spacing and card system, with the blue event banner. */
.public-page { padding: clamp(1rem, 3vw, 2.5rem) 0 3rem; background: linear-gradient(to bottom, var(--primary) 0 13rem, var(--background) 13rem); }
.public-card { --public-pad: clamp(1.25rem, 3.5vw, 3rem); width: min(calc(100% - 2rem), 70rem); margin: clamp(1rem, 3vw, 2.5rem) auto 0; padding: var(--public-pad); border: 1px solid rgb(255 255 255 / 36%); border-radius: 1rem; box-shadow: var(--shadow); }
.public-header { position: relative; display: block; margin: calc(-1 * var(--public-pad)) calc(-1 * var(--public-pad)) 1.75rem; padding: 1.8rem var(--public-pad) 2rem calc(var(--public-pad) + 4rem); border: 0; border-radius: .95rem .95rem 0 0; background: var(--primary); color: #fff; }
.public-header:not(.brand-header)::before { content: ""; position: absolute; top: 1.7rem; left: var(--public-pad); width: 2.75rem; height: 2.75rem; background: url("/assets/logo.svg") center / contain no-repeat; }
.brand-header { padding-left: calc(var(--public-pad) + 4.75rem); }
.brand-logo { position: absolute; top: 1.25rem; left: var(--public-pad); width: 3.25rem; height: 3.25rem; object-fit: contain; }
.standalone-brand-logo { display: block; width: 3rem; height: 3rem; margin-bottom: 1rem; object-fit: contain; }
.admin-brand { position: fixed; z-index: 2; top: 1rem; left: 1rem; display: block; width: 2.5rem; height: 2.5rem; }
.admin-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.locale-control { position: absolute; top: 1.1rem; right: var(--public-pad); }
.locale-switch { display: inline-block; padding: .32rem .7rem; border: 1px solid rgb(255 255 255 / 50%); border-radius: 999px; color: #fff; font-size: .84rem; font-weight: 650; text-decoration: none; }
.public-header h1 { color: #fff; }
.public-header p { max-width: 44rem; margin: .5rem 0 0; color: #e4efff; }
.public-header a { color: #fff; }
.eyebrow { margin: 0; color: #b9d9ff; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.quiet { font-size: .94rem !important; }
.route-list { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.join-code-form { max-width: 30rem; margin-top: 1rem; }
.information-panel, .team-context section, .share-panel { padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-subtle); }
.information-panel { margin: 1.5rem 0 2rem; }
.information-panel h2, .team-context h2, .share-panel h2 { margin-top: 0; }
.group-detail { margin: .7rem 0; border: 1px solid var(--border); border-radius: .75rem; background: #fff; overflow: clip; }
.group-detail summary { padding: .85rem 1rem; color: var(--ink); font-weight: 700; cursor: pointer; }
.group-detail > div { padding: 0 1rem 1rem; }
.group-detail p, .group-detail dd { white-space: pre-line; }
.group-detail dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 1rem 0; }
.group-detail dl div { padding: .7rem; border-radius: .6rem; background: var(--surface-subtle); }
.group-detail dt { color: var(--muted); font-size: .78rem; font-weight: 740; }
.group-detail dd { margin: .15rem 0 0; }
.form-grid, .team-context, .share-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.team-context { margin: 1.5rem 0; }
.team-context ul, .rankings { margin: .6rem 0 0; padding-left: 1.2rem; }
.team-context li, .rankings li { margin: .32rem 0; }
.tsa-control { gap: .7rem; }
.tsa-options { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: .65rem; }
.tsa-options label { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem; border: 1px solid var(--border); border-radius: .75rem; font-weight: 520; cursor: pointer; }
.tsa-options label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.tsa-options strong, .tsa-options small { display: block; }
.tsa-options small { margin-top: .3rem; color: var(--muted); font-size: .86rem; font-weight: 400; line-height: 1.4; }
.tsa-neutral { display: grid; place-items: center; min-width: 4rem; color: var(--muted); font-size: .82rem; text-align: center; }
.field-error { color: var(--danger); }
.field-error input, .field-error select, input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); background: #fff7f7; box-shadow: inset 0 0 0 1px var(--danger); }
.status-panel { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; padding: .9rem 1rem; border: 1px solid #c7dbfb; border-radius: .75rem; background: var(--primary-soft); color: #183b6d; }
.status-panel p { margin: 0; color: inherit; }
.share-panel { align-items: center; }
.share-panel p { margin-top: .2rem; }
.share-panel input { background: #fff; font-size: .88rem; }
.qr-code { display: flex; justify-content: center; }
.qr-code svg { width: 10rem; max-width: 100%; padding: .5rem; border-radius: .6rem; background: #fff; }
.back-link { display: inline-block; margin-bottom: 1.25rem; }

.hat-reveal { display: flex; justify-content: center; min-height: 29rem; margin: 1.25rem 0; overflow: hidden; text-align: center; }
.hat-reveal > div { position: relative; width: 23rem; }
.projector-page .public-card { max-width: 72rem; text-align: center; }
.projector-page .status-panel { justify-content: center; font-size: clamp(1.35rem, 3vw, 2.4rem); }
.projector-page .projector-hat { margin-bottom: 0; }
.projector-hat-message { font-size: clamp(1.15rem, 2.5vw, 2rem); }
.hat { position: relative; top: 150px; width: 300px; max-width: 80vw; height: 300px; margin-left: 2em; animation: hat-shake 5s 1s forwards; }
.group-name { margin: 0; color: var(--primary-dark); font-size: clamp(1.55rem, 4vw, 2.25rem); font-weight: 800; opacity: 0; animation: group-appear 1s 5.5s forwards; }
.hat-caption { font-size: 1rem; font-weight: 520; }
.hat-joke { margin: .3rem 0; color: var(--muted); }
.not1, .not2 { opacity: 0; }
.not1 { animation: hat-not-one 5s 1s forwards; }
.not2 { animation: hat-not-two 5s 1s forwards; }
@keyframes hat-shake { 0% { top:150px; rotate:0; } 10% { top:160px; rotate:7deg; } 20% { top:140px; rotate:-3deg; } 30% { top:145px; rotate:4deg; } 40% { top:135px; rotate:-12deg; } 50% { top:150px; rotate:23deg; } 60% { top:120px; rotate:6deg; } 70% { top:135px; rotate:-17deg; } 80% { top:155px; rotate:0; } 100% { top:50px; } }
@keyframes group-appear { from { opacity:0; } to { opacity:1; } }
@keyframes hat-not-one { 5% { opacity:0; } 10%,20% { opacity:1; } 25%,50% { opacity:0; } 55%,65% { opacity:1; } 70%,100% { opacity:0; } }
@keyframes hat-not-two { 0%,20% { opacity:0; } 25%,30% { opacity:1; } 35%,65% { opacity:0; } 70%,85% { opacity:1; } 90%,100% { opacity:0; } }

@media (max-width: 42rem) {
  body { font-size: .97rem; }
  main, .container { width: calc(100% - 1rem); margin: .5rem auto; padding: 1.15rem; border-radius: .8rem; box-shadow: 0 .35rem 1.25rem rgb(23 32 51 / 7%); }
  header { display: block; margin-bottom: 1.35rem; padding-bottom: 1rem; }
  header nav { margin-top: .8rem; }
  .admin-brand { position: absolute; top: .7rem; left: .7rem; width: 2.15rem; height: 2.15rem; }
  .admin-list li, .admin-list form { display: grid; align-items: stretch; }
  .admin-list form label { min-width: 0; }
  .admin-list button { width: 100%; }
  .catalog-form { grid-template-columns: 1fr; }
  .catalog-form .catalog-comment { grid-column: auto; }
  .public-page { padding: 0 0 1rem; background: var(--background); }
  .public-card { width: 100%; margin: 0; padding: 1.15rem; border: 0; border-radius: 0; box-shadow: none; }
  .public-header { margin: -1.15rem -1.15rem 1.35rem; padding: 1.35rem 1.15rem 1.45rem 4.55rem; border-radius: 0; }
  .public-header:not(.brand-header)::before { top: 1.25rem; left: 1.15rem; width: 2.55rem; height: 2.55rem; }
  .brand-header { padding-left: 4.55rem; }
  .brand-logo { top: 1rem; left: 1.15rem; width: 2.75rem; height: 2.75rem; }
  .locale-control { top: .75rem; right: .85rem; }
  .locale-switch { padding: .26rem .55rem; font-size: .78rem; }
  .form-grid, .team-context, .share-panel, .group-detail dl, .tsa-options { grid-template-columns: 1fr; }
  .tsa-neutral { min-height: 1.2rem; }
  .information-panel, .team-context section, .share-panel { padding: 1rem; }
  .route-list { display: grid; grid-template-columns: 1fr; }
  .route-list .button { width: 100%; }
  .hat-reveal { min-height: 25rem; }
  .hat { width: 260px; height: 260px; margin-left: 0; }
}

@media (max-width: 25rem) {
  h1 { font-size: 1.6rem; }
  .public-header { padding-top: 3.7rem; padding-left: 1.15rem; }
  .public-header:not(.brand-header)::before, .brand-logo { top: .75rem; left: 1.15rem; }
  .locale-control { top: .75rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  th, td { padding: .65rem; }
}

@media (prefers-reduced-motion: reduce) { .hat, .group-name, .not1, .not2 { top: 50px; opacity: 1; animation: none; } }
@media print {
  .print-hidden, .locale-control, .admin-brand, nav { display: none !important; }
  body, main, .roster { max-width: none; margin: 0; padding: 0; background: #fff; box-shadow: none; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #555; padding: .35rem; text-align: left; }
}