* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/oswald-600.woff2") format("woff2");
}

html, body {
  min-height: 100%;
  background: #04060c;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #e8e2d4;
  overflow-x: hidden;
}

/* --- night sky --- */
.night {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, #101a2e 0%, #070b14 55%, #04060c 100%);
}
.night::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 9%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 31%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 13%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 27%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 8%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 34%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 44%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 45%, rgba(255,255,255,.3) 50%, transparent 51%);
}

main {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- illuminated sign --- */
.sign-wrap {
  width: min(920px, 96vw);
  line-height: 0;
}
.sign {
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 74% 78% at 50% 46%, #000 48%, transparent 88%);
  mask-image: radial-gradient(ellipse 74% 78% at 50% 46%, #000 48%, transparent 88%);
}

/* --- letterboard --- */
.board-wrap {
  width: min(860px, 94vw);
  margin-top: -28px;
}
.bezel {
  position: relative;
  border-radius: 10px;
  padding: 34px 22px 22px;
  background: linear-gradient(180deg, #2a2c31 0%, #17181c 8%, #101114 92%, #212327 100%);
  border: 1px solid #3a3d44;
  box-shadow:
    0 30px 80px -20px rgba(255, 214, 150, 0.18),
    0 10px 40px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.plaque {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  color: #b9a77e;
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
  white-space: nowrap;
}
.panel {
  border-radius: 4px;
  background:
    radial-gradient(ellipse 110% 130% at 50% 45%, #fffdf6 0%, #fbf4e2 60%, #f0e6cd 100%);
  box-shadow:
    inset 0 0 34px rgba(190, 160, 100, 0.35),
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    0 0 46px rgba(255, 236, 190, 0.32);
  padding: 10px 14px;
  overflow: hidden;
}

/* rows of letter tiles */
.row {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 6px 0;
}
.row + .row {
  border-top: 1px solid rgba(90, 70, 40, 0.22);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.55);
}
.tile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h);
  min-width: calc(var(--h) * 0.42);
  padding: 0 calc(var(--h) * 0.07);
  margin-right: calc(var(--h) * 0.045);
  background-size: 100% 100%;
  mix-blend-mode: multiply;
  border-radius: calc(var(--h) * 0.02);
  box-shadow: inset 0 0 calc(var(--h) * 0.06) rgba(115, 88, 42, 0.13);
}
.glyph {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: calc(var(--h) * 0.78);
  line-height: 1;
  color: #b8151d;
  mix-blend-mode: multiply;
}
.row .sp {
  flex: 0 0 calc(var(--h) * 0.55);
  display: block;
  height: var(--h);
}

.panel.empty {
  min-height: 120px;
}

/* --- coming soon rail --- */
.coming {
  width: min(660px, 94vw);
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.coming .board-wrap.mini,
.ballot .board-wrap.poll {
  width: 100%;
  margin-top: 0;
}
.mini .bezel { padding: 30px 16px 16px; }
.mini .plaque { font-size: 10px; letter-spacing: .4em; text-indent: .4em; }
.mini .panel { padding: 8px 12px; }

/* --- movie vote --- */
.ballot {
  width: min(660px, 94vw);
  margin-top: 40px;
}
.poll .bezel { padding: 30px 16px 16px; }
.poll .plaque { font-size: 10px; letter-spacing: .4em; text-indent: .4em; }
.poll-panel { padding: 18px 18px 16px; }
.q {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 4.2vw, 30px);
  letter-spacing: .04em;
  color: #b8151d;
  text-align: center;
  padding-bottom: 14px;
  mix-blend-mode: multiply;
}
.opt, .res {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 3.2vw, 22px);
  letter-spacing: .05em;
  color: #b8151d;
  border-radius: 6px;
  margin-top: 10px;
}
.opt {
  display: block;
  width: 100%;
  border: none;
  padding: 12px 16px;
  background: linear-gradient(180deg, #fffdf6, #f6eed9);
  box-shadow: inset 0 0 14px rgba(115, 88, 42, 0.14), 0 1px 2px rgba(60, 40, 10, 0.25);
  cursor: pointer;
  mix-blend-mode: multiply;
}
.opt:hover { background: #fffdf6; box-shadow: inset 0 0 8px rgba(115, 88, 42, 0.1), 0 1px 3px rgba(60, 40, 10, 0.3); }
.opt:disabled { opacity: .6; cursor: wait; }
.res {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(180deg, #fffdf6, #f6eed9);
  box-shadow: inset 0 0 14px rgba(115, 88, 42, 0.14);
  overflow: hidden;
  mix-blend-mode: multiply;
}
.res .fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, rgba(255, 205, 100, 0.4), rgba(240, 175, 60, 0.5));
  border-radius: 6px 0 0 6px;
}
.res.win .fill { background: linear-gradient(180deg, rgba(255, 190, 70, 0.55), rgba(235, 155, 35, 0.65)); }
.res .rlabel, .res .rcount { position: relative; }

/* --- admin gear --- */
.admin-link {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  color: rgba(232, 226, 212, 0.25);
  text-decoration: none;
  font-size: 18px;
}
.admin-link:hover { color: rgba(232, 226, 212, 0.7); }

@media (max-width: 560px) {
  .board-wrap { margin-top: -10px; }
  .bezel { padding: 30px 10px 14px; }
}