/* ---------- Base ----------
   Halloween: a dark night-purple page, pumpkin orange for anything you press,
   and the usual green/red for open and closed voting. Text sits at a high
   contrast against every surface it lands on.                               */
:root {
  --bg: #15111f;              /* night sky */
  --bg-glow: rgba(255, 122, 24, 0.16);
  --card: #211a2f;            /* raised surface */
  --field: #2b2240;           /* inputs and quiet buttons */
  --field-focus: #352a4d;
  --header-bg: #0f0b17;
  --text: #f4eefc;
  --muted: #a99dc0;
  --primary: #ff7a18;         /* pumpkin */
  --primary-dark: #e2650c;
  --on-primary: #1a1026;      /* dark text reads better on orange */
  --accent: #3ec98a;          /* open */
  --accent-strong: #2faa72;
  --accent-soft: #10311f;
  --accent-text: #8ef0bd;
  --on-accent: #0c2417;
  --closed: #d32f3d;          /* closed; white text on this clears 4.5:1 */
  --closed-strong: #b9222d;
  --closed-soft: #371219;
  --closed-text: #ffb3b8;
  --on-closed: #ffffff;      /* text that sits on the closed colour */
  --gold: #f4b400;            /* the winner */
  --gold-soft: #3a2c05;
  --gold-text: #ffd96b;
  --tie: #6f93e8;
  --tie-soft: #141f38;
  --chip-bg: #322747;
  --chip-text: #d6c9ee;
  --track: #2e2442;
  --toast-bg: #2e2440;
  --disabled: #3a3350;
  --disabled-text: #a99fc2;
  --overlay: rgba(8, 5, 14, 0.72);
  --border: #3a2f52;
  --radius: 18px;
  --shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  /* a low moon-glow behind the top of the page */
  background-image: radial-gradient(1100px 460px at 50% -180px, var(--bg-glow), transparent 70%);
  background-attachment: fixed;
  min-height: 100vh;
  transition: background-color 0.3s;
}

body.voting-closed { --bg: #1b1018; --bg-glow: rgba(211, 47, 61, 0.16); }

h1 { font-size: 2.4rem; margin: 0.2em 0; }
h2 { font-size: 1.8rem; margin: 0.2em 0 0.6em; }
h3 { font-size: 1.3rem; margin: 0 0 0.5em; }
.lead { font-size: 1.15rem; color: var(--muted); }
.hint { font-size: 0.95rem; color: var(--muted); margin: 0.6em 0 0; }

/* ---------- Colour-blind mode ----------
   Red and green are the pair most people cannot tell apart, so this mode
   swaps them for blue (open) and amber (closed), which stay distinct for
   every common kind of colour blindness. Colour is not trusted on its own:
   anything meaning "closed" or "stopped" is also given diagonal stripes, so
   the two states differ by pattern even in plain greyscale.               */
body.cb {
  --accent: #39a0ff;          /* open */
  --accent-strong: #1f84e0;
  --accent-soft: #0d2540;
  --accent-text: #a9d5ff;
  --on-accent: #04182e;
  --closed: #ffb02e;          /* closed */
  --closed-strong: #e09410;
  --closed-soft: #3a2a07;
  --closed-text: #ffdca4;
  --on-closed: #2a1c00;
  --bg-glow: rgba(57, 160, 255, 0.14);
}
body.cb.voting-closed { --bg: #1a1526; --bg-glow: rgba(255, 176, 46, 0.14); }

/* Stripes mean stopped, so the state survives being printed in black and white.
   They lighten or darken depending on which way the text runs, because a
   stripe that moves the background towards the text colour would smother it. */

/* solid amber with dark text on top: lighten, so the label stays crisp */
body.cb.voting-closed .status-pill,
body.cb .btn-close,
body.cb .btn-danger,
body.cb .toast.error {
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.32) 0 7px,
    rgba(255, 255, 255, 0) 7px 14px);
}

/* a disabled button is grey, not amber, so the stripes would only muddy it */
body.cb .btn-close:disabled,
body.cb .btn-danger:disabled { background-image: none; }

/* the banner is a dark panel with pale text, so darken instead */
body.cb.voting-closed .status-banner {
  background-image: repeating-linear-gradient(135deg,
    rgba(0, 0, 0, 0.26) 0 7px,
    rgba(0, 0, 0, 0) 7px 14px);
  border-style: dashed;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.brand { font-weight: 800; font-size: 1.3rem; color: var(--primary); }

.header-right { display: flex; align-items: center; gap: 10px; }

.cb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cb-toggle:hover { border-color: var(--primary); }
.cb-toggle .cb-icon { font-size: 1rem; line-height: 1; }
.cb-toggle[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.status-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  background: var(--accent);
  color: var(--on-accent);
}
body.voting-closed .status-pill { background: var(--closed); color: var(--on-closed); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
.tab {
  flex: 1 1 auto;
  min-width: 100px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--field);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
}
.tab:hover { border-color: var(--primary); }
.tab.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ---------- Layout ---------- */
main { max-width: 1000px; margin: 0 auto; padding: 20px 16px 60px; }
.section { display: none; }
.section.active { display: block; animation: fade 0.25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}

/* ---------- Banners & toast ---------- */
.status-banner {
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 700;
  margin: 12px 0 18px;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 2px solid var(--accent);
}
body.voting-closed .status-banner {
  background: var(--closed-soft);
  color: var(--closed-text);
  border-color: var(--closed);
}
.status-banner:empty { display: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--toast-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 50;
  max-width: 90vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.toast.error { background: var(--closed); color: var(--on-closed); border-color: var(--closed); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--on-primary);
  background: var(--primary);
  transition: transform 0.1s, background 0.2s;
}
.btn:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); }
.btn:disabled { background: var(--disabled); color: var(--disabled-text); cursor: not-allowed; }
.btn-big { font-size: 1.2rem; padding: 14px 26px; width: 100%; margin-top: 12px; }
.btn-open { background: var(--accent); color: var(--on-accent); }
.btn-open:hover:not(:disabled) { background: var(--accent-strong); }
.btn-close { background: var(--closed); color: var(--on-closed); }
.btn-close:hover:not(:disabled) { background: var(--closed-strong); }
.btn-danger { background: var(--closed); color: var(--on-closed); }
.btn-danger:hover:not(:disabled) { background: var(--closed-strong); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-voted { background: var(--accent); color: var(--on-accent); }

/* ---------- Home ---------- */
.name-card label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 1.1rem; }
select {
  width: 100%;
  font-size: 1.1rem;
  padding: 12px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--field);
  color: var(--text);
}
.greeting { font-weight: 700; color: var(--primary); min-height: 1.5em; margin: 10px 0 0; }

.event-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-left: 8px solid var(--primary);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 14px 0 18px;
}
.event-card strong { display: block; font-size: 1.1rem; }
.event-card span { color: var(--muted); }
.schedule-lines { margin: 0 0 10px; line-height: 1.7; }

/* ---------- Movies ---------- */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.filter-label { font-weight: 700; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--field);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.95rem;
}
.filter-btn.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.movie-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 3px solid transparent;
}
.movie-card.chosen { border-color: var(--accent); }
.movie-card.compact { max-width: 260px; }
.poster {
  position: relative;
  aspect-ratio: 2 / 3;   /* film posters are 2:3 */
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  color: #fff;
  position: relative;
}
.poster-emoji { line-height: 1; }
.poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}
.movie-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.movie-title { font-size: 1.25rem; font-weight: 800; margin: 0; }
.movie-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--chip-bg);
  color: var(--chip-text);
  padding: 3px 10px;
  border-radius: 999px;
}
a.chip-link {
  text-decoration: none;
  background: #f5c518;          /* IMDb yellow */
  color: #1f1f1f;
}
a.chip-link:hover { background: #e0b216; }
.movie-desc { margin: 0; color: var(--muted); font-size: 0.98rem; flex: 1; }
.movie-body .btn { width: 100%; margin-top: 6px; }

.credit {
  margin-top: 22px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}
.credit a { color: var(--muted); }

/* ---------- Results ---------- */
.result-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
  border: 3px solid transparent;
}
.result-row.top { border-color: var(--gold); background: var(--gold-soft); }
.result-emoji { font-size: 1.8rem; }
.result-name { font-weight: 700; flex: 1; }
.result-bar-wrap { flex: 2; height: 14px; background: var(--track); border-radius: 999px; overflow: hidden; }
.result-bar { height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.4s; }
.result-count { font-weight: 800; min-width: 70px; text-align: right; }
.winner-banner {
  background: var(--gold-soft);
  border: 3px solid var(--gold);
  color: var(--gold-text);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 16px;
  text-align: center;
}
.winner-banner.tie { background: var(--tie-soft); border-color: var(--tie); color: #cfdcff; }

/* ---------- Admin ---------- */
.count-row { display: flex; flex-wrap: wrap; gap: 14px; }
.count-box {
  flex: 1 1 180px;
  background: var(--chip-bg);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  color: var(--muted);
}
.count-num { font-size: 2.4rem; color: var(--primary); line-height: 1; }
.danger-card { border: 2px dashed var(--closed); }

.empty-note { color: var(--muted); font-style: italic; }

/* ---------- PIN modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  padding: 28px 24px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  animation: pop 0.2s ease;
}
@keyframes pop { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-icon { font-size: 3rem; line-height: 1; }
.modal-card p { color: var(--muted); margin: 6px 0 16px; }
.pin-boxes { display: flex; justify-content: center; gap: 8px; margin: 8px 0 12px; }
.pin-box {
  width: 46px;
  height: 60px;
  font-size: 1.7rem;
  font-weight: 800;
  text-align: center;
  border: 3px solid var(--border);
  border-radius: 14px;
  background: var(--field);
  color: var(--text);
  caret-color: var(--primary);
}
.pin-box:focus { outline: none; border-color: var(--primary); background: var(--field-focus); }
.pin-box.filled { border-color: var(--primary); }
.modal-card.busy { cursor: progress; }
.modal-card.busy .pin-box { opacity: 0.55; }
.pin-box:disabled { background: var(--disabled); color: var(--disabled-text); }

.modal-card.shake { animation: shake 0.35s; }
.modal-card.shake .pin-box { border-color: var(--closed); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.pin-error { color: var(--closed); font-weight: 700; min-height: 1.5em; margin: 0 !important; }

.reset-pin-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reset-pin-row select { flex: 1 1 200px; width: auto; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 1.9rem; }
  .brand { font-size: 1.05rem; }
  .status-pill { font-size: 0.8rem; padding: 5px 10px; }
  .cb-toggle { padding: 6px 9px; font-size: 0.75rem; }
  .cb-toggle .cb-label { display: none; }
  .tab { min-width: 0; padding: 8px 6px; font-size: 0.85rem; }
  .result-bar-wrap { display: none; }
  .pin-boxes { gap: 6px; }
  .pin-box { width: 40px; height: 52px; font-size: 1.4rem; }
}