/* Halloween base (night, bone, ash, pumpkin) + Gulbar accent (fur pink, grass green). One font: Bitter. */
/* Bitter, self-hosted (variable font: one file covers weights 100-900; SIL Open Font License, see /fonts/OFL.txt).
   No requests to Google or any other third party. */
@font-face { font-family: Bitter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/bitter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Bitter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/bitter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #0E0A12;
  --ink-2: #18121F;
  --ink-3: #221A2B;
  --rule: #352A40;
  --paper: #EDE4D3;
  --dim: #9C9086;
  --pumpkin: #E8701A;
  --pink: #E1689F;
  --pink-hi: #F6A9CB;
  --green: #67AC34;
  --red: #E5484D;
  --moon: rgba(255, 214, 140, .13);
  --web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%23463852' stroke-width='1'%3E%3Cpath d='M140 0L-10 0M140 0L2 57M140 0L33 106M140 0L83 138M140 0L140 150M112 0Q118 4 114 11Q121 13 120 20Q127 19 129 26Q136 22 140 28M82 0Q94 9 87 22Q101 26 99 41Q114 39 118 53Q131 46 140 58M48 0Q68 14 55 35Q79 41 75 65Q99 61 105 85Q126 72 140 92M12 0Q39 20 22 49Q54 57 49 91Q83 86 91 118Q120 101 140 128'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); }
body {
  background: var(--ink) var(--web) no-repeat top right; color: var(--paper);
  font: 16px/1.5 Bitter, Georgia, serif; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay; z-index: 50;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--pink); }
.wrap { max-width: 560px; margin: 0 auto; padding: 20px 16px 64px; }
.wrap.wide { max-width: 1200px; }
.hidden { display: none !important; }
.zoom { position: fixed; inset: 0; z-index: 70; background: rgba(8,5,10,.94); display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
/* sized to the viewport (a % max-height does not resolve inside the grid), so the whole photo is always visible */
.zoom-in { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.zoom img { display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); object-fit: contain; }
.zoom-in:has(.btn:not(.hidden)) img { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }
.zoom .btn { width: auto; margin: 0; padding: 14px 28px; }
.zoom-x { position: absolute; top: 10px; right: 16px; font: 900 40px/1 Bitter, serif; color: var(--paper); }
img.ph { cursor: zoom-in; touch-action: manipulation; }

/* header */
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; gap: 12px; }
.mark { font: 900 26px/1 Bitter, serif; color: var(--pink); text-decoration: none; letter-spacing: -.01em; }
.tag, .label { font: 700 12px Bitter, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.step { font: 700 12px Bitter, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--pumpkin); margin-bottom: 6px; }
.event { font: 900 46px/.95 Bitter, serif; letter-spacing: -.02em; margin-bottom: 10px; }
.event em, .h2 em { font-style: normal; color: var(--pumpkin); }
.h2 { font: 900 30px/1.05 Bitter, serif; letter-spacing: -.01em; margin-bottom: 6px; }
.meta { font-size: 14px; color: var(--dim); margin-bottom: 26px; }
.meta b { color: var(--paper); font-weight: 600; }
.sub { font-size: 14px; color: var(--dim); margin-bottom: 18px; }
.small { font-size: 13px; }
.muted { color: var(--dim); }

/* forms */
.field-label { font: 700 12px Bitter, serif; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px; display: block; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number] {
  width: 100%; box-sizing: border-box; background: var(--ink-2); border: 1px solid var(--rule); color: var(--paper);
  padding: 13px 12px; font: 16px Bitter, serif; border-radius: 0;
}
input:focus { outline: none; border-color: var(--pink); }
input::placeholder { color: var(--dim); }
.code-in { border-width: 2px; font: 800 28px Bitter, serif; letter-spacing: .28em; text-align: center; padding: 16px 8px; text-transform: uppercase; }
.btn {
  display: block; width: 100%; margin-top: 12px; background: var(--pink); color: var(--ink); border: 0; border-radius: 0;
  padding: 17px; font: 800 15px Bitter, serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-align: center; text-decoration: none;
}
.btn:hover { background: var(--pink-hi); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--paper); border: 2px solid var(--rule); }
.btn.ghost:hover { border-color: var(--paper); }
.btn.danger { background: var(--red); color: #fff; }
.btn.inline { display: inline-block; width: auto; margin: 0; padding: 12px 18px; font-size: 13px; }
.hint { font-size: 13px; color: var(--dim); margin-top: 10px; }
.msg { margin-top: 12px; padding: 10px 12px; font-size: 14px; border-left: 3px solid var(--red); background: var(--ink-2); }
.msg.ok { border-color: var(--green); }

/* rows (mini leaderboard, lists) */
.mini { margin-top: 32px; border-top: 2px solid var(--paper); padding-top: 14px; display: block; color: inherit; text-decoration: none; }
.mini-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mini-head span:first-child { font: 800 13px Bitter, serif; letter-spacing: .16em; text-transform: uppercase; }
.mini-head span:last-child { background: var(--pink); color: var(--ink); font: 800 14px Bitter, serif; letter-spacing: .12em; text-transform: uppercase; padding: 12px 18px; } /* "All results" as a real button */
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.rowx { display: grid; grid-template-columns: 28px 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.rowx .n { font: 900 22px Bitter, serif; color: var(--dim); }
.rowx.first .n { color: var(--pink); }
.rowx .nm { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowx .v { font: 800 18px Bitter, serif; }
.chip { display: inline-block; font: 800 10px Bitter, serif; letter-spacing: .14em; text-transform: uppercase; background: var(--green); color: var(--ink); padding: 2px 6px; margin-left: 6px; vertical-align: middle; }

/* photos */
.ph { display: block; width: 100%; height: 100%; object-fit: cover; background: linear-gradient(160deg, #3a2a55, #120f18); }
.rowx .ph { width: 44px; height: 44px; }

/* ballot grid */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card { background: var(--ink-2); cursor: pointer; border: 2px solid transparent; user-select: none; }
.card .ph { aspect-ratio: 4/5; height: auto; }
.card .cap { padding: 8px 10px 10px; display: flex; justify-content: space-between; gap: 6px; font-size: 14px; font-weight: 600; }
.card .cap small { font: 700 12px Bitter, serif; color: var(--dim); }
.card.on { border-color: var(--pink); }
.card.on .cap { background: var(--pink); color: var(--ink); }
.card.on .cap small { color: var(--ink); }
.stickybar { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 14px; }
.receipt { font: 900 34px Bitter, serif; letter-spacing: .12em; color: var(--pumpkin); margin: 6px 0 4px; }

/* countdown */
.clock { font: 800 clamp(40px, 12vw, 72px)/1 Bitter, serif; color: var(--pumpkin); font-variant-numeric: tabular-nums; }

/* big screen leaderboard */
.tv { position: relative; overflow: hidden; }
.tv::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 70%; height: 110%; background: radial-gradient(closest-side, var(--moon), transparent 70%); pointer-events: none; }
.tv-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid var(--paper); padding-bottom: 18px; margin-bottom: 26px; position: relative; }
.tv-title { font: 900 clamp(38px, 11vw, 64px)/.92 Bitter, serif; letter-spacing: -.02em; }
.tv-title em { font-style: normal; color: var(--pumpkin); }
.tv-clock { text-align: right; }
.tv-clock .clock { font-size: clamp(36px, 5vw, 64px); }
/* mobile-first podium: 1st full width, 2nd + 3rd side by side */
.podium { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; position: relative; }
.pod.p1 { grid-column: 1 / -1; }
.pod .ph { aspect-ratio: 4/5; height: auto; }
.pod .place { font: 900 44px/1 Bitter, serif; margin: 10px 0 2px; }
.pod.p1 .place { font-size: 64px; }
.pod.p1 .place { color: var(--pink); }
.pod .who { font: 700 17px Bitter, serif; }
.pod.p1 .who { font-size: 22px; }
.pod .votes { font: 800 14px Bitter, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pod.p1 { border-top: 6px solid var(--pink); padding-top: 12px; }
.pod.p2, .pod.p3 { border-top: 6px solid var(--paper); padding-top: 12px; }
.pod.p1 .ph { aspect-ratio: 4 / 5; }
.rest { position: relative; }
.tv-foot { margin-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--dim); position: relative; }
.tv-foot b { color: var(--paper); }
.notice { border-left: 3px solid var(--green); background: var(--ink-2); padding: 10px 12px; margin-bottom: 20px; font-size: 15px; position: relative; }

/* admin */
.tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 2px solid var(--paper); margin-bottom: 20px; }
.tabs button { background: none; border: 0; color: var(--dim); font: 700 12px Bitter, serif; letter-spacing: .14em; text-transform: uppercase; padding: 12px 14px; cursor: pointer; }
.tabs button.active { color: var(--ink); background: var(--paper); }
.panel { border: 1px solid var(--rule); padding: 18px; margin-bottom: 16px; background: var(--ink); }
.panel h3 { font: 800 13px Bitter, serif; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > input { flex: 1 1 160px; width: auto; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.slot { border: 1px solid var(--rule); padding: 10px; background: var(--ink-2); }
.slot.pending { border: 2px solid var(--pumpkin); }
.slot.dirty { border: 2px dashed var(--pink); }
.slot .saved:not(:empty) { color: var(--pink); }
.slot .pend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.slot .pend .pill { grid-column: 1 / -1; justify-self: start; }
.slot .pend .btn { width: 100%; margin: 0; padding: 9px 6px; font-size: 12px; }
.slot .btn.ghost.inline { padding: 8px 6px; font-size: 12px; }
.slot .ph, .slot .empty { aspect-ratio: 4/5; height: auto; cursor: pointer; }
.slot .empty { display: grid; place-items: center; background: var(--ink-3); color: var(--dim); font-size: 13px; text-align: center; padding: 8px; }
.slot input[type=text], .slot input[type=email], .slot input[type=tel] { padding: 9px 10px; font-size: 14px; margin-top: 4px; }
.slot .saved { font-size: 12px; color: var(--green); min-height: 18px; display: block; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule); }
th { color: var(--dim); font: 700 11px Bitter, serif; letter-spacing: .14em; text-transform: uppercase; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; font: 700 14px Bitter, serif; letter-spacing: .1em; }
.codes span { background: var(--ink-2); padding: 6px; text-align: center; }
.codes span.used { opacity: .35; text-decoration: line-through; cursor: pointer; }
.pill { font: 800 11px Bitter, serif; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; }
.pill.open { background: var(--green); color: var(--ink); }
.pill.closed { background: var(--red); color: #fff; }
.pill.waiting { background: var(--pumpkin); color: var(--ink); }
.ok { color: var(--green); } .bad { color: var(--red); }

/* draw screens */
.stage { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.reel { font: 900 clamp(36px, 9vw, 110px)/1.1 Bitter, serif; color: var(--pumpkin); min-height: 1.2em; word-break: break-all; }
.reel.win { color: var(--pink); animation: pop .6s ease-out; }
@keyframes pop { 0% { transform: scale(.7); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
.spin { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.spin .card { cursor: default; }
.spin .card.hot { border-color: var(--pumpkin); }

/* printable code cards */
#printSheet { display: none; }
@media print {
  html, body { background: #fff !important; color: #000; }
  body::after { display: none; }
  body > *:not(#printSheet) { display: none !important; }
  #printSheet { display: grid !important; grid-template-columns: repeat(4, 1fr); }
  #printSheet div { border: 1px dashed #999; padding: 14px 6px; text-align: center; font-family: Bitter, Georgia, serif; break-inside: avoid; }
  #printSheet b { display: block; font-size: 22px; letter-spacing: 3px; margin: 4px 0; }
  #printSheet small { font-size: 10px; color: #444; }
  #printSheet svg { display: block; width: 110px; height: 110px; margin: 8px auto 2px; }
}
/* only the master panel (.wrap.wide) is laid out for desktop; everything else stays a phone column */
@media (max-width: 700px) {
  .tabs button { padding: 10px 9px; font-size: 11px; }
  .panel { padding: 14px; }
}

/* every uploaded photo shows in the same frame: fixed aspect per spot, cropped to fill, faces kept in view */
img.ph { object-position: 50% 28%; }

/* /board on a PC or big screen (phones keep the single column above) */
@media (min-width: 1000px) {
  .wrap.tv { max-width: 1280px; padding: 32px 40px 48px; }
  .tv .tv-title { font-size: clamp(64px, 6vw, 104px); }
  .tv .tv-clock .clock { font-size: clamp(56px, 5vw, 88px); }
  .tv .podium { grid-template-columns: 1fr 1.25fr 1fr; gap: 28px; align-items: end; margin-bottom: 36px; }
  .tv .pod.p1 { grid-column: auto; order: 2; }
  .tv .pod.p2 { order: 1; margin-bottom: 0; }
  .tv .pod.p3 { order: 3; }
  .tv .pod .ph, .tv .pod.p1 .ph { aspect-ratio: 4 / 5; }
  .tv .pod .place { font-size: 72px; }
  .tv .pod.p1 .place { font-size: 104px; }
  .tv .pod .who { font-size: 26px; }
  .tv .pod.p1 .who { font-size: 34px; }
  .tv .pod .votes { font-size: 18px; }
  .tv .rest { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .tv .rowx { grid-template-columns: 40px 64px 1fr auto; padding: 12px 0; }
  .tv .rowx .ph { width: 64px; height: 64px; }
  .tv .rowx .nm { font-size: 20px; }
  .tv .rowx .v, .tv .rowx .n { font-size: 26px; }
  .tv .tv-foot { font-size: 18px; }
  .cheer { width: min(820px, calc(100% - 64px)) !important; grid-template-columns: 140px 1fr !important; padding: 18px !important; bottom: 40px !important; }
  .cheer-ph .ph { width: 140px !important; height: 140px !important; }
  .cheer-place { font-size: 64px !important; }
  .cheer-text { font-size: 34px !important; }
}