:root {
  --vote-max: 1240px;
  --on-gold: #0F2318;
  /* podium blocks, from the brand's forest to gold ramp: 1st gold, 2nd mid green, 3rd forest, Community Choice dark gold */
  --podium-1: #CDB878; --podium-2: #2E6E52; --podium-3: #144A30; --podium-1-ink: #9C7A2A; --podium-cc: #B99A55;
  --success: #276749;
  --danger: #9B3A2A;
  --tray-h: 0px;
}
html[data-theme="dark"] { --success: #79B994; --danger: #E39A6F; --podium-2: #3A7A5C; --podium-3: #1E5C3E; --podium-1-ink: #CDB878; }

* { box-sizing: border-box; }
body { min-height: 100vh; padding-bottom: var(--tray-h); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
button, input, select { font: inherit; }
[hidden] { display: none !important; }
body.locked { overflow: hidden; }

/* nav and footer, same as the team dashboard */
.vote-nav, main, .vote-footer { width: min(var(--vote-max), calc(100% - 72px)); margin: 0 auto; }
.vote-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px 10px 14px; border: 1px solid var(--hairline); border-radius: 11px; background: var(--surface); color: var(--forest); font-size: 14.5px; font-weight: 600; letter-spacing: .01em; text-decoration: none; transition: color .16s, background .16s, border-color .16s, transform .16s, box-shadow .16s; }
.back__arrow { transition: transform .16s; }
.back:hover { border-color: var(--forest); background: var(--forest); color: #F4F1E9; transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(20,74,48,.55); }
.back:hover .back__arrow { transform: translateX(-3px); }
.back:active { transform: translateY(0); }
html[data-theme="dark"] .back { color: var(--forest-bright); }
html[data-theme="dark"] .back:hover { color: var(--ink); box-shadow: 0 10px 22px -12px rgba(0,0,0,.9); }

.vote-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 40px; padding: 26px 0; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 13.5px; }
.vote-footer > span:last-child { text-align: right; }
.theme-toggle { font: 600 12px/1 'Space Grotesk', sans-serif; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; padding: 9px 13px; cursor: pointer; transition: color .16s, background .16s, border-color .16s, transform .16s; }
.theme-toggle:hover { color: #F4F1E9; background: var(--forest); border-color: var(--forest); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

.demo-banner { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 12px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto 14px; padding: 7px 8px 7px 14px; border: 1px solid var(--gold); border-radius: 999px; background: var(--forest); color: #F4F1E9; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demo-banner > span { color: var(--gold); }
.demo-state { display: inline-flex; align-items: center; gap: 7px; }
.demo-state select { padding: 4px 8px; border: 1px solid rgba(241,238,229,.3); border-radius: 999px; background: #0F3A25; color: #F4F1E9; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--forest-bright); font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow > span:first-child { width: 9px; height: 9px; border-radius: 2px; background: var(--gold); }

/* buttons, same set as the judge and team pages */
.primary-button, .secondary-button, .gold-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; transition: background .16s, transform .16s, border-color .16s, color .16s, box-shadow .16s; }
.primary-button { min-height: 45px; padding: 11px 18px; border: 1px solid var(--forest); background: var(--forest); color: #F1EEE5; }
.primary-button:hover { background: var(--forest-dark); transform: translateY(-1px); }
.primary-button:focus-visible, .gold-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold); }
.primary-button:disabled { opacity: .55; cursor: default; transform: none; }
.primary-button--brick::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--gold); transition: transform .14s var(--ease); }
.primary-button--brick:hover::before { transform: rotate(12deg) scale(1.1); }
.primary-button svg { flex: none; }
.secondary-button { min-height: 45px; padding: 10px 16px; border: 1px solid var(--hairline); background: transparent; color: var(--ink); }
.secondary-button:hover { border-color: var(--ink); }
.gold-button { min-height: 45px; padding: 11px 18px; border: 1px solid transparent; background: var(--gold); color: #0F2318; white-space: nowrap; }
.gold-button::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; background: #144A30; transition: transform .14s var(--ease); }
.gold-button:hover { background: #D9C78E; transform: translateY(-1px); }
.gold-button:hover::before { transform: rotate(12deg) scale(1.1); }
.gold-button:disabled { background: rgba(205,184,120,.28); color: rgba(241,238,229,.6); cursor: default; transform: none; }
.gold-button:disabled::before { background: rgba(241,238,229,.35); transform: none; }
.text-button { padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--ink); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.form-message { min-height: 20px; margin: 8px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.form-message.error { color: var(--danger); }

/* centered states: checking, before, not a member */
.center-shell { display: grid; min-height: calc(100vh - 200px); place-items: center; padding: 30px 0 80px; }
#checkingView { place-content: center; justify-items: center; gap: 18px; }
#checkingView p { margin: 0; color: var(--muted); font-weight: 600; }
.spinner { width: 30px; height: 30px; border: 2px solid var(--hairline); border-top-color: var(--forest); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gate-card { width: min(620px, 100%); padding: clamp(28px, 6vw, 56px); border: 1px solid var(--hairline); border-radius: 22px; background: var(--surface); box-shadow: 0 34px 80px -52px rgba(15,35,24,.55); }
.gate-card h1, .app-head h1 { margin: 0; color: var(--ink); font-family: 'Fraunces', serif; font-size: clamp(38px, 6.5vw, 62px); font-weight: 600; line-height: .98; letter-spacing: -.035em; }
.gate-copy { max-width: 500px; margin: 20px 0 28px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.gate-copy strong { color: var(--ink); }
.gate-logout { margin-top: 18px; }

.countdown { display: grid; justify-items: center; text-align: center; align-self: end; gap: 0; padding: 16px 22px 17px; border-radius: 12px; background: var(--forest-panel, var(--forest)); color: #F1EEE5; }
.countdown__label { font: italic 500 14.5px/1.2 'Fraunces', serif; opacity: .85; }
.countdown__clock { font: 600 34px/1 'Fraunces', serif; font-variant-numeric: tabular-nums; }
.countdown__clock { display: inline-flex; align-items: center; margin: 7px 0 8px; }
.clock-sep { display: flex; flex-direction: column; gap: .2em; margin: 0 .14em; transform: translateY(.05em); }
.clock-sep::before, .clock-sep::after { content: ""; width: .1em; height: .1em; border-radius: .02em; background: var(--gold); }
.countdown__date { color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.countdown--wide { justify-items: center; gap: 0; margin-top: 30px; padding: 26px 24px 24px; text-align: center; }
.countdown--wide .countdown__label { font-size: 16px; }
.countdown--wide .countdown__clock { margin: 10px 0 12px; font-size: clamp(44px, 8vw, 64px); letter-spacing: -.01em; }
.countdown--wide .countdown__date { font-size: 13px; }

/* app head */
.vote-app { padding: 18px 0 40px; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.app-head__text { min-width: 0; }
.status-line { max-width: 620px; margin: 14px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
/* the results line runs the full width so it stays on one line on desktop */
.status-line--wide { max-width: none; }
.head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 20px; }
.head-actions:empty { display: none; }
.who { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 600; }
.who__avatar { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--forest); color: #F1EEE5; font-size: 13px; font-weight: 700; }
.who__check { color: var(--forest-bright); font-size: 12.5px; font-weight: 600; }

/* your four, after voting */
.your-picks { margin: 0 0 26px; padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.your-picks h2 { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.your-picks ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.your-picks li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--card); cursor: pointer; }
.your-picks li:hover { outline: 1px solid var(--forest-bright); }
.your-picks li strong { overflow: hidden; font: 600 16px/1.2 'Fraunces', serif; text-overflow: ellipsis; white-space: nowrap; }
.your-picks li small { display: block; color: var(--muted); font-size: 12.5px; }
.pick-num { display: grid; width: 22px; height: 20px; place-items: center; border-radius: 5px; background: var(--gold); color: #0F2318; font-size: 12px; font-weight: 700; transform: rotate(6deg); }
.who-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* toolbar */
.toolbar { position: sticky; top: 0; z-index: 5; display: grid; gap: 12px; margin: 0 -14px 18px; padding: 12px 14px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); }
.toolbar__row { display: flex; flex-wrap: wrap; gap: 10px; }
.search { position: relative; flex: 1 1 280px; display: flex; align-items: center; }
.search svg { position: absolute; left: 13px; color: var(--muted); pointer-events: none; }
.search input, .select { min-height: 42px; border: 1px solid var(--hairline); border-radius: 10px; outline: none; background: var(--card); color: var(--ink); font-size: 14px; transition: border-color .16s, box-shadow .16s; }
.search input { width: 100%; padding: 9px 13px 9px 38px; }
.select { flex: 0 1 220px; padding: 9px 12px; cursor: pointer; }
.search input:focus, .select:focus { border-color: var(--forest-bright); box-shadow: 0 0 0 3px rgba(20,74,48,.1); }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--hairline); border-radius: 11px; background: var(--card); }
.seg__btn { min-width: 64px; padding: 7px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .16s, color .16s; }
.seg__btn.on { background: var(--forest); color: #F1EEE5; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { border: 1px solid var(--hairline); border-radius: 999px; background: transparent; color: var(--muted); padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .16s, color .16s, background .16s; }
.chip:hover { border-color: var(--forest-bright); color: var(--ink); }
.chip.on { border-color: var(--forest); background: var(--forest); color: #F1EEE5; }
.result-count { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }

/* grid of builds */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.vote-app.app-enter .app-head { animation: galleryHeadIn .6s cubic-bezier(.22,1,.36,1) both; }
.vote-app.app-enter .card { animation: galleryCardIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.12s + var(--i, 0) * 45ms); }
@keyframes galleryHeadIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes galleryCardIn { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .vote-app.app-enter .app-head, .vote-app.app-enter .card { animation: none; } }
.card { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 20px 20px 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); cursor: pointer; transition: border-color .16s, transform .16s, box-shadow .16s; }
.card:hover { border-color: var(--forest-bright); transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgba(15,35,24,.5); }
html[data-theme="dark"] .card:hover { box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); }
.card:focus-visible { outline: 2px solid var(--forest-bright); outline-offset: 2px; }
.card.picked { border-color: var(--forest-bright); box-shadow: inset 0 0 0 1px var(--forest-bright); }
.card__meta { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.card h3 { margin: 0; color: var(--ink); font: 600 23px/1.12 'Fraunces', serif; letter-spacing: -.015em; }
.card__team { margin: 5px 0 0; color: var(--forest-bright); font-size: 13.5px; font-weight: 600; }
.card__oneliner { flex: 1; margin: 12px 0 16px; color: var(--ink); font-size: 14.5px; line-height: 1.5; opacity: .88; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--forest-bright) 10%, transparent); color: var(--forest-bright); font-size: 12px; font-weight: 700; }
.pick { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 13px; border: 1px solid var(--hairline); border-radius: 9px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .16s, border-color .16s, color .16s, transform .16s; }
.pick::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .6; transition: transform .16s; }
.pick:hover { border-color: var(--forest); background: var(--forest); color: #F1EEE5; transform: translateY(-1px); }
.pick.on { border-color: var(--forest); background: var(--forest); color: #F1EEE5; }
.pick.on::before { border-color: var(--gold); background: var(--gold); opacity: 1; transform: rotate(12deg); }
.pick:disabled { opacity: .4; cursor: default; transform: none; }
.pick:disabled:hover { border-color: var(--hairline); background: transparent; color: var(--ink); }
.pick-badge { position: absolute; top: -9px; right: 16px; display: grid; width: 26px; height: 22px; place-items: center; border-radius: 6px; background: var(--gold); color: #0F2318; font-size: 12.5px; font-weight: 700; transform: rotate(6deg); box-shadow: 0 6px 14px -8px rgba(15,35,24,.6); }
.card.pop .pick-badge { animation: brickIn .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes brickIn { from { transform: rotate(-20deg) scale(.3); opacity: 0; } to { transform: rotate(6deg) scale(1); opacity: 1; } }
.empty { padding: 40px 0; color: var(--muted); text-align: center; font-weight: 600; }

/* map view */
.map-view { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.map-card { padding: 12px; border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface); }
.vote-map { display: block; width: 100%; height: auto; }
.mpin { cursor: pointer; }
.mpin circle { fill: #F4F1E9; stroke: #144A30; stroke-width: 2; transition: fill .14s, stroke .14s; transform-box: fill-box; transform-origin: center; }
.mpin text { fill: #144A30; font: 700 11px 'Space Grotesk', sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.mpin:hover circle, .mpin.on circle { fill: #144A30; stroke: #F4F1E9; }
.mpin:hover text, .mpin.on text { fill: #F4F1E9; }
.mpin.has-pick circle { fill: #CDB878; stroke: #0F3A25; }
.mpin.has-pick text { fill: #0F2318; }
.map-list { position: sticky; top: 132px; max-height: calc(100vh - 150px); overflow: auto; padding: 14px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.map-list__head { margin: 2px 4px 10px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.map-list ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.map-row:hover { background: var(--card); }
.map-row.picked { border-color: var(--forest-bright); background: var(--card); }
.map-row strong { display: block; overflow: hidden; font: 600 16px/1.25 'Fraunces', serif; text-overflow: ellipsis; white-space: nowrap; }
.map-row small { display: block; overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

/* tray */
.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--forest-panel, var(--forest)); color: #F1EEE5; box-shadow: 0 -18px 40px -24px rgba(7,18,12,.7); animation: trayIn .5s cubic-bezier(.22,1,.36,1); }
@keyframes trayIn { from { transform: translateY(100%); } }
.tray__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(var(--vote-max), calc(100% - 72px)); margin: 0 auto; }
.tray.signed-out .tray__inner:first-child, .tray:not(.signed-out) .tray__login { display: none; }
.tray__login span { font: italic 500 17px/1.3 'Fraunces', serif; }
.tray__slots { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.slot { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; height: 46px; padding: 0 10px 0 12px; border: 1px dashed rgba(241,238,229,.3); border-radius: 9px; color: rgba(241,238,229,.55); font-size: 13px; font-weight: 600; }
.slot__n { flex: none; display: grid; width: 22px; height: 20px; place-items: center; border-radius: 5px; background: rgba(241,238,229,.12); font-size: 12px; }
.slot.filled { border: 1px solid rgba(241,238,229,.2); background: rgba(241,238,229,.08); color: #F1EEE5; cursor: pointer; }
.slot.filled .slot__n { background: var(--gold); color: #0F2318; transform: rotate(6deg); }
.slot.filled.pop .slot__n { animation: brickIn .42s cubic-bezier(.34,1.56,.64,1); }
.slot__name { overflow: hidden; flex: 1; font: 600 15px/1.2 'Fraunces', serif; text-overflow: ellipsis; white-space: nowrap; }
.slot__x { flex: none; display: grid; width: 22px; height: 22px; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: rgba(241,238,229,.7); cursor: pointer; }
.slot__x:hover { background: rgba(241,238,229,.14); color: #F1EEE5; }
.tray__side { display: flex; align-items: center; gap: 14px; }
.tray__count { color: rgba(241,238,229,.8); font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* drawer */
.drawer-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(7,18,12,.45); backdrop-filter: blur(2px); animation: fadeIn .2s ease; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(560px, 100%); overflow-y: auto; padding: 34px clamp(22px, 4vw, 40px) 40px; border-left: 1px solid var(--hairline); background: var(--card); box-shadow: -30px 0 80px -40px rgba(7,18,12,.7); animation: drawerIn .38s cubic-bezier(.22,1,.36,1); }
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
.drawer__close { position: absolute; top: 18px; right: 18px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
.drawer__close:hover { border-color: var(--ink); }
.drawer__meta { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.drawer h2 { margin: 0; padding-right: 40px; color: var(--ink); font: 600 clamp(30px, 4.5vw, 40px)/1.05 'Fraunces', serif; letter-spacing: -.025em; }
.drawer__team { margin: 8px 0 0; color: var(--forest-bright); font-size: 15px; font-weight: 600; }
.drawer__oneliner { margin: 16px 0 0; color: var(--ink); font: italic 500 19px/1.4 'Fraunces', serif; }
.drawer__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.drawer__links { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 6px; }
.drawer__links a { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }
.drawer__block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.drawer__block h3 { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.drawer__block p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.65; white-space: pre-line; }
.drawer__foot { position: sticky; bottom: -40px; display: flex; align-items: center; gap: 12px; margin: 30px -40px -40px; padding: 16px 40px 24px; border-top: 1px solid var(--hairline); background: var(--card); }
.drawer__foot:empty { display: none; }
.drawer__foot .pick { min-height: 45px; padding: 10px 18px; font-size: 14px; }
.drawer__foot small { color: var(--muted); font-size: 13px; font-weight: 600; }

/* confirm modal, same as the team dashboard */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; padding: 20px; place-items: center; background: rgba(7,18,12,.6); backdrop-filter: blur(4px); }
.confirm-modal { width: min(460px, 100%); padding: 32px; border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface); box-shadow: 0 35px 90px -30px rgba(0,0,0,.8); text-align: center; animation: modalIn .28s cubic-bezier(.22,1,.36,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.confirm-mark { display: grid; width: 42px; height: 42px; margin: 0 auto 16px; place-items: center; border-radius: 12px; background: var(--forest); color: #F1EEE5; font: 600 20px 'Fraunces', serif; }
.confirm-modal h2 { margin: 0; color: var(--ink); font-family: 'Fraunces', serif; font-size: 30px; }
.confirm-modal > p { margin: 14px 0 22px; color: var(--muted); font-size: 14.5px; }
.confirm-modal .button-row { justify-content: center; }
.confirm-list { display: grid; gap: 7px; margin: 20px 0 0; padding: 0; list-style: none; text-align: left; }
.confirm-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; background: var(--card); }
.confirm-list strong { display: block; overflow: hidden; font: 600 16px/1.2 'Fraunces', serif; text-overflow: ellipsis; white-space: nowrap; }
.confirm-list small { color: var(--muted); font-size: 12.5px; }

/* laptops keep 1240px. bigger screens get more columns, with room left on the edges */
@media (min-width: 1800px) { :root { --vote-max: 1560px; } }
@media (min-width: 2400px) { :root { --vote-max: 2060px; } }
@media (min-width: 3200px) { :root { --vote-max: 2650px; } }
@media (max-width: 960px) {
  .map-view { grid-template-columns: 1fr; }
  .map-list { position: static; max-height: none; }
  .your-picks ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .vote-nav, main, .vote-footer, .tray__inner { width: calc(100% - 28px); }
  .toolbar { margin: 0 -14px 16px; }
  .select { flex: 1 1 auto; }
  .tray__inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .tray__slots { gap: 6px; }
  .slot { justify-content: center; height: 38px; padding: 0 6px; }
  .slot__name, .slot__x, .slot:not(.filled) .slot__label { display: none; }
  .tray__side { justify-content: space-between; }
  .tray__login { flex-direction: row; align-items: center; }
  .tray__login span { font-size: 15px; }
  .drawer__foot { margin: 30px -22px -40px; padding: 14px 22px 22px; }
  .vote-footer { grid-template-columns: 1fr; gap: 11px; text-align: center; }
  .vote-footer > span:last-child { text-align: center; }
}
@media (max-width: 480px) {
  .your-picks ol { grid-template-columns: 1fr; }
  .tray__login { flex-direction: column; align-items: stretch; text-align: center; }
  .grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* cover images on cards and in the drawer */
.card { padding-top: 0; }
.card__media, .drawer__media, .podium__media { position: relative; display: grid; aspect-ratio: 16 / 10; overflow: hidden; place-items: center; align-content: center; gap: 8px; background: var(--forest-panel, var(--forest)); }
.card__media { margin: 0 -20px 16px; border-radius: 13px 13px 0 0; border-bottom: 1px solid var(--hairline); }
.card__media img, .drawer__media img, .podium__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.card:hover .card__media img { transform: scale(1.03); }
.media--green { background-color: var(--forest-panel, var(--forest)); background-image: linear-gradient(to right, rgba(241,238,229,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(241,238,229,.06) 1px, transparent 1px); background-size: 22px 22px; }
.media--light { background-color: var(--bg); background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 22px 22px; }
.media-brick { width: 12px; height: 12px; border-radius: 3px; background: var(--gold); transform: rotate(12deg); }
.media-name { display: -webkit-box; max-width: 82%; overflow: hidden; font: italic 500 24px/1.15 'Fraunces', serif; text-align: center; overflow-wrap: anywhere; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.media--green .media-name { color: #F1EEE5; }
.media--light .media-name { color: var(--forest-bright); }
.media-own { position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(15,35,24,.82); color: #F1EEE5; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(4px); }
.card.own { border-color: var(--gold); }
.drawer__media { margin: -34px calc(-1 * clamp(22px, 4vw, 40px)) 24px; }
.drawer__media .media-name { font-size: 30px; }
.drawer__close { z-index: 2; }
.pick-badge { z-index: 3; }
#checkingView .form-message.error { max-width: 420px; margin: 0; color: var(--danger); text-align: center; }

/* ---------- the close: countdown ---------- */
/* last ten seconds: hours and minutes dim, each second pulses */
.countdown.is-final .countdown__clock > span:not(:last-child), .countdown.is-final .clock-sep { opacity: .32; transition: opacity .4s; }
.countdown.is-final .countdown__clock > span:last-child { display: inline-block; animation: secThump .55s cubic-bezier(.22,1.4,.36,1); }
/* zero: the digits lift out and a gold CLOSED stamp lands crooked, then straightens */
.countdown.is-zero .countdown__clock { will-change: transform, opacity; animation: digitOut .45s cubic-bezier(.55,0,.75,.2) both; }
/* the closed card sits centered: label, CLOSED and the date */
.countdown.is-closed { justify-items: center; text-align: center; }
.countdown__stamp { display: inline-block; color: var(--gold); font: 700 30px/1 'Space Grotesk', sans-serif; letter-spacing: .02em; transform: rotate(-7deg); transition: transform .6s cubic-bezier(.22,1,.36,1); will-change: transform; }
.countdown.is-stamped .countdown__stamp { animation: stampIn .55s cubic-bezier(.2,1.2,.35,1) backwards; }
.countdown.is-straight .countdown__stamp { transform: none; }
.countdown.is-leaving { will-change: transform, opacity; animation: foldAway .5s cubic-bezier(.55,0,.75,.2) both; }
@keyframes secThump { from { transform: scale(1.18); } }
@keyframes digitOut { to { opacity: 0; transform: translateY(-.3em) scale(.92); } }
@keyframes stampIn { from { opacity: 0; transform: scale(1.9) rotate(-14deg); } 70% { opacity: 1; transform: scale(.95) rotate(-7deg); } to { transform: rotate(-7deg); } }
@keyframes foldAway { to { opacity: 0; transform: scale(.9); } }

/* the gallery sinks away, the heading swaps */
.gallery-part.is-leaving { pointer-events: none; will-change: transform, opacity; animation: sinkAway .8s cubic-bezier(.55,0,.75,.2) both; }
.tray.is-leaving { transform: translateY(110%); transition: transform .5s cubic-bezier(.55,0,.75,.2); }
.app-head__text { transition: opacity .35s ease; }
.app-head__text.is-swapping { opacity: 0; }
@keyframes sinkAway { to { opacity: 0; transform: translateY(90px); } }

/* ---------- the community's top 3 ---------- */
/* the stage is an SVG of Banao bricks; the cards stand on top of their steps */
.podium { margin: 4px 0 40px; overflow-x: clip; }
/* three flat blocks on a thin floor, 2nd left, 1st middle, 3rd right, Olympic heights */
.podium__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: clamp(6px, 1vw, 12px); max-width: 1160px; margin: 0 auto; padding-top: 16px; }
.podium__step { display: flex; flex-direction: column; min-width: 0; }
.podium__step--2 { grid-column: 1; }
.podium__step--1 { grid-column: 2; margin: 0 clamp(4px, 1vw, 12px); }
.podium__step--3 { grid-column: 3; }
.podium__step--cc { grid-column: 4; }
.podium__card { display: grid; gap: 10px; margin: 0 clamp(4px, 1.2vw, 12px) 14px; }
.podium__base { overflow: hidden; border-radius: 6px 6px 0 0; }
.podium__block { position: relative; display: grid; place-items: center; height: 92px; border-radius: 6px 6px 0 0; background: var(--podium-3); color: var(--on-forest); }
/* a slightly lighter band along the top, just enough to read as a surface */
.podium__block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; border-radius: 6px 6px 0 0; background: rgba(255,255,255,.14); }
.podium__step--1 .podium__block { height: 160px; background: var(--podium-1); color: var(--on-gold); }
.podium__step--2 .podium__block { background: var(--podium-2); }
.podium__step--cc .podium__block { height: 72px; background: var(--podium-cc); color: var(--on-gold); }
.podium__step--cc .podium__num { padding: 0 10px; font-size: 21px; line-height: 1.05; text-align: center; }
.podium__num { font: 600 58px/1 'Fraunces', serif; letter-spacing: -.02em; }
.podium__step--1 .podium__num { font-size: 88px; }
.podium__floor { grid-column: 1 / -1; height: 2px; margin: 0 -24px; border-radius: 2px; background: var(--hairline); }
.podium__entry { display: block; width: 100%; padding: 0 0 15px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .16s, transform .16s; }
.podium__entry:hover { transform: translateY(-2px); }
/* each top 3 card wears its block's colour: a tint, a matching border, a place tag and a soft glow */
.podium__step { --c: var(--podium-3); --c-ink: var(--forest-bright); }
.podium__step--1 { --c: var(--podium-1); --c-ink: var(--podium-1-ink); }
.podium__step--2 { --c: var(--podium-2); }
.podium__step--cc { --c: var(--podium-cc); --c-ink: var(--podium-1-ink); }
.podium__entry { position: relative; border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 9%, var(--card)); box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--c) 90%, transparent); }
.podium__step--1 .podium__entry { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, var(--card)); }
.podium__entry:hover { border-color: var(--c); }
.podium__place { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 9px; border-radius: 6px; background: var(--c); color: var(--on-forest); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.podium__step--1 .podium__place, .podium__step--cc .podium__place { color: var(--on-gold); }
.podium__votes b { color: var(--c-ink); }
.podium__media { margin-bottom: 13px; }
.podium__media .media-name { font-size: 19px; }
.podium__text { display: grid; gap: 3px; padding: 0 15px; }
.podium__name { overflow-wrap: anywhere; font: 600 20px/1.15 'Fraunces', serif; letter-spacing: -.01em; }
.podium__team { color: var(--muted); font-size: 13px; }
.podium__votes { display: block; padding: 11px 15px 0; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.podium__votes b { margin-right: 5px; font: 600 30px/1 'Fraunces', serif; font-variant-numeric: tabular-nums; }
.podium__step--1 .podium__name { font-size: 24px; }
.podium__step--1 .podium__votes b { font-size: 38px; }

/* the gallery, now sorted by votes, comes back up under the podium */
.podium.is-playing .podium__floor { animation: fadeIn .5s both; }
/* one place at a time (Community Choice, 3rd, 2nd, 1st). Within a place the block and its card
   move as one and land together: the block rises out of the floor; Community Choice and 1st
   ride up on it by the same distance, 3rd slides in from the right, 2nd from the left */
.podium__step { --rise: 92px; }
.podium__step--1 { --rise: 160px; }
.podium__step--cc { --rise: 72px; }
.podium.is-playing .podium__block { will-change: transform; animation: blockRise 1.4s var(--t) cubic-bezier(.22,1,.36,1) both; }
.podium.is-playing .podium__card { will-change: transform, opacity; }
/* 3rd slides in over Community Choice's card, not under it */
.podium__step--3 { position: relative; z-index: 2; }
.podium.is-playing .podium__step--cc .podium__card, .podium.is-playing .podium__step--1 .podium__card { animation: cardUp 1.4s var(--t) cubic-bezier(.22,1,.36,1) both; }
.podium.is-playing .podium__step--3 .podium__card { animation: cardRight 1.4s var(--t) cubic-bezier(.22,1,.36,1) both; }
.podium.is-playing .podium__step--2 .podium__card { animation: cardLeft 1.4s var(--t) cubic-bezier(.22,1,.36,1) both; }
/* 1st takes its time */
.podium.is-playing .podium__step--1 .podium__block, .podium.is-playing .podium__step--1 .podium__card { animation-duration: 1.7s; }
@keyframes blockRise { from { transform: translateY(101%); } }
@keyframes cardUp { from { opacity: 0; transform: translateY(var(--rise)); } 12% { opacity: 1; } }
@keyframes cardRight { from { opacity: 0; transform: translateX(40vw); } 12% { opacity: 1; } }
@keyframes cardLeft { from { opacity: 0; transform: translateX(-40vw); } 12% { opacity: 1; } }
.gallery-part.is-returning { will-change: transform, opacity; animation: returnIn .8s 5.2s cubic-bezier(.22,1,.36,1) both; }
@keyframes returnIn { from { opacity: 0; transform: translateY(28px); } }
/* honourable mentions: the judges' next two and the community's next two, under the podium */
.mentions { max-width: 1160px; margin: 56px auto 44px; }
.mentions__title { margin: 0 0 32px; font: 600 36px/1.1 'Fraunces', serif; letter-spacing: -.015em; text-align: center; }
.mentions__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.mentions__by { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mentions__by::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.mentions__group--judges { --c: var(--podium-2); --c-ink: var(--forest-bright); }
.mentions__group--community { --c: var(--podium-cc); --c-ink: var(--podium-1-ink); }
.mentions__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.mention { display: block; min-width: 0; padding: 0 0 13px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--c) 6%, var(--card)); color: var(--ink); cursor: pointer; transition: border-color .16s, transform .16s; }
.mention:hover { border-color: var(--c); transform: translateY(-2px); }
.mention__media { position: relative; display: grid; aspect-ratio: 16 / 10; overflow: hidden; place-items: center; align-content: center; gap: 8px; margin-bottom: 11px; background: var(--forest-panel, var(--forest)); }
.mention__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mention__media .media-name { font-size: 16px; }
.mention__text { display: grid; gap: 3px; padding: 0 13px; }
.mention__name { overflow-wrap: anywhere; font: 600 17px/1.15 'Fraunces', serif; letter-spacing: -.01em; }
.mention__team { color: var(--muted); font-size: 12.5px; }
.mention__votes { display: block; padding: 9px 13px 0; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.mention__votes b { margin-right: 4px; color: var(--c-ink); font: 600 22px/1 'Fraunces', serif; font-variant-numeric: tabular-nums; }
.mentions.is-returning { will-change: transform, opacity; animation: returnIn .8s 4.9s cubic-bezier(.22,1,.36,1) both; }
.card__votes { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.card__votes b { margin-right: 2px; color: var(--forest-bright); font: 600 19px/1 'Fraunces', serif; font-variant-numeric: tabular-nums; }


@media (max-width: 760px) {
  .mentions__groups { grid-template-columns: 1fr; }
  .mentions__title { font-size: 28px; }
  .podium__media { display: none; }
  .podium__place { position: static; display: inline-block; margin: 0 0 6px 11px; }
  .podium__card { margin: 0 3px 10px; }
  .podium__block { height: 62px; }
  .podium__step--1 .podium__block { height: 108px; }
  .podium__step--cc .podium__block { height: 50px; }
  .podium__step { --rise: 62px; }
  .podium__step--1 { --rise: 108px; }
  .podium__step--cc { --rise: 50px; }
  .podium__step--cc .podium__num { padding: 0 4px; font-size: 11px; }
  .podium__num { font-size: 38px; }
  .podium__step--1 .podium__num { font-size: 58px; }
  .podium__floor { margin: 0 -8px; }
  .podium__entry { padding-top: 12px; }
  .podium__text { padding: 0 11px; }
  .podium__name, .podium__step--1 .podium__name { font-size: 13px; }
  .podium__team { font-size: 12px; }
  .podium__votes { padding: 8px 11px 0; font-size: 12px; }
  .podium__votes b { font-size: 22px; }
  .podium__step--1 .podium__votes b { font-size: 24px; }
  .podium__team { display: none; }
}