/* =========================================================
   NON EVENT CINEMAS — CHAOS 2000 SKIN
   deliberately bad, deliberately loud
   ========================================================= */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #060042;
}

body {
  margin: 0;
  color: #000;
  background:
    radial-gradient(circle at 15px 15px, #ff00ff 0 3px, transparent 4px),
    radial-gradient(circle at 45px 45px, #00ffff 0 3px, transparent 4px),
    #25008f;
  background-size: 60px 60px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
}

a { color: #0000ee; }
a:visited { color: #551a8b; }

button, input, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.top-warning {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 5px 0;
  color: #ffff00;
  background: #000;
  border-bottom: 4px ridge #bfbfbf;
  font: bold 12px "Courier New", monospace;
}

.page-shell {
  width: min(1180px, calc(100% - 14px));
  margin: 8px auto 28px;
  background: #c0c0c0;
  border: 5px ridge #efefef;
  box-shadow: 8px 8px 0 #000;
}

.browser-header {
  background: #c0c0c0;
}

.fake-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-bottom: 3px groove #fff;
  background: #d4d0c8;
}

.fake-toolbar button,
.login-btn,
.choice-btn,
.primary-btn,
.vote-btn,
.rsvp-btn {
  min-height: 29px;
  color: #000;
  background: #d4d0c8;
  border: 3px outset #fff;
  border-right-color: #555;
  border-bottom-color: #555;
  border-radius: 0;
  font-weight: bold;
}

.fake-toolbar button:active,
.login-btn:active,
.choice-btn:active,
.primary-btn:active,
.vote-btn:active,
.rsvp-btn:active {
  border-style: inset;
}

.fake-address {
  flex: 1;
  min-width: 0;
  padding: 4px 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #fff;
  border: 2px inset #fff;
  font: 12px "Courier New", monospace;
}

.tiny-gif {
  width: 32px;
  height: 32px;
  image-rendering: auto;
}

.masthead-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 190px;
  min-height: 330px;
  border-bottom: 4px ridge #fff;
}

.left-chaos,
.right-chaos {
  padding: 7px;
}

.left-chaos {
  color: #fff;
  background: #0000b7;
  border-right: 4px ridge #fff;
}

.right-chaos {
  background: #00b95a;
  border-left: 4px ridge #fff;
}

.side-title,
.window-title {
  padding: 5px 7px;
  color: #fff;
  background: linear-gradient(90deg, #000080, #1084d0);
  font: bold 12px Tahoma, Verdana, sans-serif;
}

.side-nav {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
}

.side-nav a,
.right-chaos a {
  display: block;
  padding: 6px 5px;
  color: #ffff00;
  background: #0000ff;
  border: 2px outset #66aaff;
  font: bold 11px "Courier New", monospace;
  text-decoration: underline;
}

.side-nav a:hover,
.right-chaos a:hover {
  color: #ff00ff;
  background: #ffff00;
}

.gif-stack,
.gif-row,
.gif-strip,
.sparkle-row,
.archive-gifs,
.construction-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gif-stack img {
  width: 42px;
  max-height: 48px;
  object-fit: contain;
}

.gif-stack img:nth-child(2) {
  width: 65px;
}

.visitor-box {
  margin-top: 13px;
  padding: 7px;
  color: #00ff00;
  background: #000;
  border: 2px inset #777;
  text-align: center;
  font: 11px "Courier New", monospace;
}

.visitor-box span {
  display: inline-block;
  margin: 4px 0;
  padding: 2px 4px;
  color: #ff0000;
  background: #111;
  border: 1px solid #555;
  font: bold 18px "Courier New", monospace;
  letter-spacing: 3px;
}

.hero-chaos {
  position: relative;
  min-height: 330px;
  padding: 15px 18px 18px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.26), transparent 30%),
    #cf8cff;
}

.hero-chaos::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image: url("https://commons.wikimedia.org/wiki/Special:Redirect/file/AnimatedStar.gif");
  background-size: 38px 38px;
  pointer-events: none;
}

.sparkle-row,
.hero-chaos h1,
.hero-graphics,
.blink-panel,
.hero-chaos .login-btn {
  position: relative;
  z-index: 1;
}

.sparkle-row {
  color: #00ff00;
  font: italic bold 20px "Comic Sans MS", cursive;
  text-shadow: 2px 2px #000;
}

.sparkle-row img {
  width: 30px;
}

.hero-chaos h1 {
  margin: 7px 0 8px;
  color: #ffff00;
  font: bold clamp(42px, 7vw, 82px)/.78 "Arial Black", Impact, sans-serif;
  letter-spacing: -4px;
  text-shadow:
    3px 3px 0 #ff00ff,
    6px 6px 0 #0000ff;
  transform: skew(-4deg);
}

.hero-chaos h1 span {
  color: #00ffff;
}

.hero-graphics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
}

.hero-graphics .bubble {
  width: min(42%, 300px);
  max-height: 150px;
  object-fit: contain;
}

.hero-graphics .head-logo {
  width: min(30%, 205px);
  max-height: 175px;
  object-fit: contain;
}

.blink-panel {
  margin: 6px auto;
  max-width: 440px;
  padding: 4px 7px;
  color: #fff;
  background: #ff0000;
  border: 3px double #ffff00;
  font: bold 15px "Courier New", monospace;
}

.blink {
  animation: blink .65s step-end infinite;
}

@keyframes blink {
  50% { visibility: hidden; }
}

.hero-chaos .login-btn {
  margin-top: 5px;
  padding: 5px 13px;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: red;
  border-radius: 50%;
}

.login-btn.signed-in .status-dot { background: lime; }

.right-box {
  padding: 7px;
  border: 3px ridge #fff;
}

.right-box.pink {
  background: #ff8da1;
}

.right-box a {
  margin-top: 5px;
}

.under-construction-small {
  display: block;
  width: 135px;
  max-width: 100%;
  margin: 14px auto 8px;
  border: 2px solid #000;
}

.best-viewed {
  padding: 8px;
  color: #fff;
  background: #000;
  border: 3px ridge #999;
  text-align: center;
  font: bold 10px "Courier New", monospace;
}

.rainbow-divider {
  height: 13px;
  background:
    repeating-linear-gradient(
      90deg,
      #f00 0 18px,
      #ff0 18px 36px,
      #0f0 36px 54px,
      #0ff 54px 72px,
      #00f 72px 90px,
      #f0f 90px 108px
    );
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.section {
  padding: 13px;
}

.chaos-window {
  margin: 12px;
  padding: 3px;
  background: #d4d0c8;
  border: 4px outset #fff;
  box-shadow: 4px 4px 0 #333;
}

.window-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.window-title.hotpink {
  background: linear-gradient(90deg, #a00061, #ff00a8);
}

.window-title.electric {
  color: #ffff00;
  background: #0000dd;
}

.window-title.purple {
  background: linear-gradient(90deg, #4e0080, #bd00ff);
}

.window-controls {
  letter-spacing: 4px;
}

.window-body {
  padding: 12px;
  background: #efefef;
  border: 2px inset #fff;
}

.section-heading,
.mini-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.section-heading h2,
.mini-heading h3 {
  margin: 0;
  color: #000080;
  font: bold clamp(24px, 4vw, 44px) Georgia, "Times New Roman", serif;
  text-shadow: 1px 1px #fff;
}

.arrow-gif {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.screening-grid {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.screening-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 250px;
  overflow: hidden;
  background: #fff;
  border: 4px ridge #999;
}

.poster {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: #000080;
  border-right: 3px ridge #fff;
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poster-fallback {
  height: 100%;
  min-height: 250px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #ffff00;
  background: radial-gradient(circle, #ff00ff, #000080);
  font-family: "Comic Sans MS", cursive;
}

.poster-fallback strong {
  font-size: 28px;
  line-height: 1;
}

.screening-info,
.undecided-copy {
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(255,255,0,.25), transparent 30%),
    #fff;
}

.screening-info h3,
.undecided-copy h3 {
  margin: 12px 0 5px;
  color: #ff0000;
  font: bold 35px "Arial Black", Impact, sans-serif;
}

.date-chip {
  display: inline-block;
  padding: 7px 10px;
  color: #fff;
  background: #000080;
  border: 3px outset #88aaff;
  font: bold 12px "Courier New", monospace;
}

.screening-card-undecided {
  grid-template-columns: 220px 1fr;
}

.undecided-date {
  display: grid;
  place-items: center;
  padding: 15px;
  background: #ffff00;
  border-right: 4px ridge #999;
}

.undecided-date .date-chip {
  max-width: 180px;
  text-align: center;
  font-size: 21px;
}

.attendee-line {
  margin-top: 14px;
  padding: 7px;
  background: #ffffcc;
  border: 2px dotted #f00;
}

.rsvp-btn {
  margin-top: 8px;
  padding: 6px 12px;
}

.poll-link {
  display: inline-block;
  padding: 6px 10px;
  color: #fff !important;
  background: #ff00aa;
  border: 3px outset #ffc8f0;
  font-weight: bold;
}

.rec-zone {
  background:
    linear-gradient(45deg, rgba(255,0,255,.15), transparent 25%),
    #8d00db;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
}

.rec-banner {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  margin-bottom: 10px;
  padding: 4px;
  color: #ffff00;
  background: #000;
  border: 3px ridge #fff;
  font: bold 13px "Courier New", monospace;
}

.rec-banner img {
  width: 30px;
}

.recommend-layout {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr);
  gap: 12px;
}

.recommend-form {
  display: grid;
  gap: 12px;
}

.recommend-form label {
  display: grid;
  gap: 5px;
  font: bold 11px "Courier New", monospace;
}

.recommend-form input,
.recommend-form textarea {
  width: 100%;
  padding: 8px;
  color: #000;
  background: #fff;
  border: 3px inset #fff;
}

.recommend-form textarea {
  min-height: 90px;
  resize: vertical;
}

.primary-btn {
  padding: 8px 12px;
  color: #000;
  background: #00ff00;
  border-color: #caffca #007700 #007700 #caffca;
}

.vote-status {
  padding: 8px;
  color: #000;
  background: #ffff00;
  border: 2px dashed #ff0000;
  font: bold 11px "Courier New", monospace;
}

.vote-status.closed {
  color: #fff;
  background: #ff0000;
}

.gif-row {
  margin-top: 12px;
  color: #ff00ff;
  font-weight: bold;
}

.gif-row img {
  width: 38px;
  max-height: 35px;
  object-fit: contain;
}

.recommendation-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.recommendation-item {
  display: grid;
  grid-template-columns: 54px 78px minmax(0,1fr) 62px;
  gap: 8px;
  align-items: stretch;
  padding: 7px;
  background: #fff;
  border: 3px ridge #aaa;
}

.recommendation-item:nth-child(odd) {
  background: #d8ffff;
}

.rec-rank {
  display: grid;
  place-items: center;
  min-height: 70px;
  color: #ffff00;
  background: #0000aa;
  border: 3px outset #6666ff;
  font: bold 27px Impact, "Arial Black", sans-serif;
}

.rec-poster {
  width: 78px;
  height: 100%;
  min-height: 105px;
  object-fit: cover;
  border: 2px solid #000;
}

.rec-poster-empty {
  display: grid;
  place-items: center;
  padding: 5px;
  color: #fff;
  background: #000;
  font: 9px "Courier New", monospace;
  text-align: center;
}

.rec-copy {
  min-width: 0;
}

.rec-title {
  color: #d00000;
  font: bold 19px Georgia, "Times New Roman", serif;
}

.rec-meta-row {
  margin-top: 3px;
  font-size: 10px;
}

.rec-meta-row span {
  display: inline-block;
  min-width: 55px;
  color: #0000aa;
  font: bold 9px "Courier New", monospace;
}

.rec-reason {
  margin-top: 7px;
  font-size: 11px;
}

.rec-by {
  margin-top: 7px;
  color: #555;
  font: 9px "Courier New", monospace;
}

.vote-btn {
  align-self: center;
  padding: 8px 4px;
  color: #000080;
  background: #ffff00;
}

.vote-btn.voted {
  color: #fff;
  background: #ff00aa;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}

.archive-card {
  padding: 9px;
  background: #fff;
  border: 4px ridge #aaa;
}

.archive-poster {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border: 2px solid #000;
}

.archive-card h3 {
  margin: 6px 0;
  color: #000080;
  font-family: Georgia, serif;
}

.star {
  padding: 0 1px;
  border: 0;
  color: #777;
  background: transparent;
  font-size: 22px;
}

.star.active {
  color: #ff00ff;
}

.coming-soon-card {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #ffff00;
  background: #000080;
  border: 5px ridge #fff;
  text-align: center;
}

.coming-soon-card strong {
  display: block;
  font: bold 45px "Comic Sans MS", cursive;
  text-shadow: 3px 3px #f0f;
}

.coming-soon-card span {
  font: 11px "Courier New", monospace;
}

.construction-row {
  margin-top: 14px;
  color: #f00;
  font: bold 14px "Courier New", monospace;
}

.construction-row img {
  width: 100px;
}

footer {
  padding: 12px;
  color: #ffff00;
  background: #000;
  border-top: 5px ridge #fff;
  text-align: center;
  font: 10px "Courier New", monospace;
}

footer a {
  color: #00ffff;
}

.gif-strip {
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.gif-strip img {
  width: 36px;
  max-height: 36px;
  object-fit: contain;
}

.credits {
  color: #999;
  font-size: 8px;
}

dialog {
  width: min(470px, calc(100vw - 24px));
  padding: 0;
  color: #000;
  background: #c0c0c0;
  border: 5px outset #fff;
}

dialog::backdrop {
  background: rgba(0,0,128,.65);
}

.dialog-card {
  position: relative;
  padding: 10px;
}

.dialog-card h2 {
  margin: 15px 0 8px;
  color: #000080;
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 25px;
  height: 25px;
  padding: 0;
  background: #d4d0c8;
  border: 2px outset #fff;
  font-weight: bold;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}

.choice-btn {
  padding: 8px 5px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 15px;
  z-index: 999;
  transform: translateX(-50%);
  padding: 9px 12px;
  color: #ffff00;
  background: #000080;
  border: 4px outset #fff;
  font: bold 11px "Courier New", monospace;
}

/* Deliberately cluttered, but still usable on phones */
@media (max-width: 820px) {
  .page-shell {
    width: calc(100% - 6px);
    margin-top: 3px;
    border-width: 3px;
    box-shadow: none;
  }

  .fake-toolbar button:nth-child(2),
  .fake-toolbar button:nth-child(3) {
    display: none;
  }

  .masthead-grid {
    grid-template-columns: 112px minmax(0,1fr);
  }

  .right-chaos {
    display: none;
  }

  .left-chaos {
    padding: 5px;
  }

  .side-nav a {
    padding: 6px 3px;
    font-size: 9px;
  }

  .visitor-box,
  .gif-stack {
    display: none;
  }

  .hero-chaos {
    min-height: 280px;
    padding: 12px 8px;
  }

  .sparkle-row {
    font-size: 13px;
  }

  .hero-chaos h1 {
    font-size: clamp(36px, 12vw, 58px);
  }

  .hero-graphics .bubble {
    width: 48%;
  }

  .hero-graphics .head-logo {
    width: 38%;
  }

  .screening-card,
  .screening-card-undecided {
    grid-template-columns: 1fr;
  }

  .poster {
    min-height: 270px;
    border-right: 0;
    border-bottom: 3px ridge #fff;
  }

  .undecided-date {
    border-right: 0;
    border-bottom: 4px ridge #999;
  }

  .recommend-layout {
    grid-template-columns: 1fr;
  }

  .recommendation-item {
    grid-template-columns: 48px 70px minmax(0,1fr);
  }

  .rec-rank {
    grid-column: 1;
    grid-row: 1;
  }

  .vote-btn {
    grid-column: 1;
    grid-row: 2;
    width: 48px;
    align-self: start;
  }

  .rec-poster {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 70px;
  }

  .rec-copy {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body { font-size: 12px; }

  .masthead-grid {
    grid-template-columns: 88px minmax(0,1fr);
  }

  .side-title {
    font-size: 9px;
  }

  .side-nav a {
    font-size: 8px;
  }

  .hero-graphics {
    gap: 2px;
  }

  .hero-chaos .login-btn {
    font-size: 10px;
  }

  .section {
    padding: 5px;
  }

  .chaos-window {
    margin: 6px;
  }

  .window-body {
    padding: 8px;
  }

  .section-heading h2 {
    font-size: 25px;
  }

  .construction-row img {
    width: 70px;
  }
}


/* =========================================================
   CHAOS 2000 v2
   same bad-era energy, slightly less visual assault
   ========================================================= */

/* A calmer base behind the Windows/table chaos. */
body {
  background:
    radial-gradient(circle at 18px 18px, rgba(255,0,255,.22) 0 2px, transparent 3px),
    #17206f;
  background-size: 72px 72px;
  line-height: 1.35;
}

.page-shell {
  width: min(1100px, calc(100% - 18px));
}

/* Less animation happening underneath the important stuff. */
.hero-chaos::before {
  opacity: .07;
  background-size: 64px 64px;
}

.hero-chaos {
  min-height: 300px;
  padding-top: 12px;
  padding-bottom: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 34%),
    #cda1ef;
}

.hero-chaos h1 {
  margin-top: 4px;
  font-size: clamp(42px, 6.3vw, 70px);
  letter-spacing: -3px;
  text-shadow:
    2px 2px 0 #ff00ff,
    4px 4px 0 #000080;
}

.hero-graphics {
  min-height: 105px;
}

.hero-graphics .bubble {
  max-height: 125px;
}

.hero-graphics .head-logo {
  max-height: 150px;
}

.masthead-grid {
  grid-template-columns: 165px minmax(0, 1fr) 170px;
  min-height: 300px;
}

.left-chaos {
  background: #071d8d;
}

.right-chaos {
  background: #54b987;
}

.right-box.pink {
  background: #eab0bd;
}

.rec-zone {
  background: #76439d;
}

.rec-banner {
  margin-inline: auto;
  max-width: 980px;
}

.section,
.window-body {
  line-height: 1.45;
}

/* Still ugly buttons, just a little more breathable. */
.fake-toolbar button,
.login-btn,
.choice-btn,
.primary-btn,
.vote-btn,
.rsvp-btn,
.toolbar-link {
  min-height: 30px;
}

.toolbar-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  color: #000 !important;
  background: #d4d0c8;
  border: 3px outset #fff;
  border-right-color: #555;
  border-bottom-color: #555;
  font-weight: bold;
  text-decoration: none;
}

.window-body {
  background: #f3f1ec;
}

.screening-info,
.undecided-copy {
  background:
    linear-gradient(90deg, rgba(255,255,0,.12), transparent 28%),
    #fff;
}

.recommendation-item {
  padding: 9px;
}

.construction-row {
  opacity: .85;
}

/* =========================================================
   STATS CHAOS PAGE
   ========================================================= */

.stats-shell {
  max-width: 1060px;
}

.stats-masthead {
  display: grid;
  grid-template-columns: 165px minmax(0,1fr);
  min-height: 245px;
  border-bottom: 4px ridge #fff;
}

.stats-side-menu {
  padding: 7px;
  color: #fff;
  background: #071d8d;
  border-right: 4px ridge #fff;
}

.stats-side-menu .current-link {
  color: #000 !important;
  background: #ffff00 !important;
}

.stats-counter span {
  color: #00ff00;
  letter-spacing: 1px;
  font-size: 14px;
}

.stats-title-panel {
  position: relative;
  padding: 28px 30px 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.26), transparent 34%),
    #b59ddd;
}

.stats-title-panel::after {
  content: "WWW";
  position: absolute;
  right: 24px;
  bottom: -24px;
  color: rgba(0,0,128,.08);
  font: bold 125px Impact, "Arial Black", sans-serif;
  pointer-events: none;
}

.stats-sparkle {
  justify-content: flex-start;
  color: #006400;
  font-size: 15px;
  text-shadow: none;
}

.stats-sparkle img {
  width: 25px;
}

.stats-title-panel h1 {
  position: relative;
  z-index: 1;
  margin: 14px 0 8px;
  color: #000080;
  font: bold clamp(50px, 8vw, 88px)/.8 "Arial Black", Impact, sans-serif;
  letter-spacing: -4px;
  text-shadow: 2px 2px 0 #fff;
}

.stats-title-panel h1 span {
  color: #c00074;
  font-size: .55em;
  letter-spacing: -2px;
}

.stats-title-panel > p {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 15px 0;
  font-size: 13px;
}

.stats-hero-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.stats-hero-strip span,
.tiny-badge {
  padding: 5px 8px;
  color: #fff;
  background: #000080;
  border: 2px outset #8daeff;
  font: bold 9px "Courier New", monospace;
}

.stats-rainbow {
  height: 9px;
  opacity: .8;
}

.stats-main {
  padding: 4px 0 12px;
}

.stats-window {
  margin-block: 14px;
}

.stats-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.stats-section-heading h2 {
  margin: 2px 0 0;
  color: #000080;
  font: bold clamp(25px, 4vw, 42px) Georgia, "Times New Roman", serif;
}

.retro-kicker {
  color: #777;
  font: bold 9px "Courier New", monospace;
  letter-spacing: .08em;
}

.teal-title {
  background: linear-gradient(90deg, #006666, #2caaa8);
}

.stats-star {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* Attendance becomes a readable old-school high-score board. */
.attendance-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}

.podium-card {
  min-height: 135px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border: 3px ridge #aaa;
}

.podium-place {
  color: #c00000;
  font: bold 34px Impact, "Arial Black", sans-serif;
}

.podium-name {
  color: #000080;
  font: bold 23px Georgia, "Times New Roman", serif;
}

.podium-detail {
  margin-top: 6px;
  color: #555;
  font: 9px "Courier New", monospace;
  text-transform: uppercase;
}

/* Records look like chunky Windows dashboard tiles. */
.record-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 7px;
}

.record-card {
  min-height: 125px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 3px ridge #aaa;
}

.record-card:nth-child(2n) {
  background: #e9ffff;
}

.record-label {
  color: #000080;
  font: bold 9px "Courier New", monospace;
  text-transform: uppercase;
}

.record-value {
  margin-top: auto;
  color: #bd006d;
  font: bold clamp(28px, 4vw, 43px)/1 Georgia, "Times New Roman", serif;
}

.record-note {
  margin-top: 6px;
  font-size: 10px;
}

/* Film ranking: clean table shape, period-appropriate decoration. */
.film-ranking {
  display: grid;
  gap: 6px;
}

.film-rank-row {
  display: grid;
  grid-template-columns: 54px 62px minmax(0,1fr) 76px;
  gap: 11px;
  align-items: center;
  padding: 7px;
  background: #fff;
  border: 3px ridge #aaa;
}

.film-rank-row:nth-child(even) {
  background: #eef4ff;
}

.film-rank-number {
  display: grid;
  place-items: center;
  align-self: stretch;
  color: #ffff00;
  background: #000080;
  border: 2px outset #7799ff;
  font: bold 24px Impact, "Arial Black", sans-serif;
}

.film-rank-poster {
  width: 62px;
  height: 92px;
  overflow: hidden;
  background: #000;
  border: 2px solid #000;
}

.film-rank-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-poster-fallback {
  width: 100%;
  height: 100%;
  padding: 5px;
  display: flex;
  align-items: end;
  color: #fff;
  background: #000080;
  font: 8px "Courier New", monospace;
}

.film-rank-title {
  min-width: 0;
}

.film-rank-title strong {
  display: block;
  color: #000080;
  font: bold 20px Georgia, "Times New Roman", serif;
}

.film-rank-title span,
.film-rank-score span {
  display: block;
  margin-top: 4px;
  color: #555;
  font: 9px "Courier New", monospace;
  text-transform: uppercase;
}

.film-rank-score {
  text-align: center;
  padding: 7px 4px;
  color: #000;
  background: #ffffcc;
  border: 2px inset #fff;
}

.film-rank-score strong {
  display: block;
  color: #c00074;
  font: bold 27px Georgia, "Times New Roman", serif;
}

.stats-chaos-page .empty {
  padding: 18px;
  color: #555;
  background: #fff;
  border: 2px dashed #999;
  font: 11px "Courier New", monospace;
}

/* Phone layout: intentionally retro, not intentionally painful. */
@media (max-width: 820px) {
  .masthead-grid {
    grid-template-columns: 104px minmax(0,1fr);
  }

  .right-chaos {
    display: none;
  }

  .stats-masthead {
    grid-template-columns: 104px minmax(0,1fr);
  }

  .stats-title-panel {
    padding: 20px 15px;
  }

  .stats-title-panel h1 {
    font-size: clamp(43px, 12vw, 68px);
  }

  .stats-title-panel::after {
    display: none;
  }

  .attendance-podium {
    grid-template-columns: 1fr;
  }

  .podium-card {
    min-height: 95px;
  }

  .record-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .record-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .stats-side-menu {
    padding: 4px;
  }

  .stats-side-menu .side-nav a {
    font-size: 7px;
  }

  .stats-counter {
    display: none;
  }

  .stats-title-panel {
    padding: 16px 11px;
  }

  .stats-sparkle {
    font-size: 10px;
  }

  .stats-sparkle img {
    width: 18px;
  }

  .stats-title-panel h1 {
    margin-top: 10px;
    letter-spacing: -3px;
  }

  .stats-hero-strip span {
    font-size: 7px;
  }

  .record-grid {
    grid-template-columns: 1fr 1fr;
  }

  .film-rank-row {
    grid-template-columns: 43px 54px minmax(0,1fr);
    gap: 7px;
  }

  .film-rank-number {
    font-size: 20px;
  }

  .film-rank-poster {
    width: 54px;
    height: 81px;
  }

  .film-rank-title strong {
    font-size: 16px;
  }

  .film-rank-score {
    grid-column: 3;
    width: max-content;
    min-width: 66px;
    padding: 4px 8px;
    text-align: left;
  }

  .film-rank-score strong {
    display: inline;
    margin-right: 6px;
    font-size: 21px;
  }

  .film-rank-score span {
    display: inline;
  }
}

/* Current screening rating — appears automatically one hour after film start */
.current-film-rating {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px dashed currentColor;
}
.current-film-rating-title {
  font: 900 12px "Arial Black", Impact, sans-serif;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.current-film-rating .rating-row {
  margin-top: 0;
}

.rating-row.rating-closed {
  opacity: .82;
  font-family: "Courier New", monospace;
  font-weight: 700;
}


/* Full attendance leaderboard: ties share the same rank. */
.attendance-podium {
  display: block !important;
}
.attendance-leaderboard {
  display: grid;
  gap: 7px;
}
.attendance-row {
  display: grid;
  grid-template-columns: 54px minmax(150px, 1fr) minmax(120px, 2fr);
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 2px outset #d4d0c8;
  background: #f3f0e8;
  color: #111;
}
.attendance-first {
  font-weight: 700;
}
.attendance-rank {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 20px;
  text-align: center;
}
.attendance-person {
  min-width: 0;
}
.attendance-bar-wrap {
  height: 18px;
  border: 2px inset #d4d0c8;
  background: #fff;
  padding: 2px;
}
.attendance-bar {
  min-width: 4px;
  height: 100%;
  background: currentColor;
}
@media (max-width: 620px) {
  .attendance-row {
    grid-template-columns: 42px minmax(0,1fr);
  }
  .attendance-bar-wrap {
    grid-column: 2;
  }
}

/* HALLOWEEN 2026 SAFE OVERLAY */
:root {
  --h-pumpkin:#ff7a00;
  --h-acid:#caff42;
  --h-purple:#690075;
  --h-dark:#09000c;
  --h-bone:#f5e4b6;
}

html { background:#050006; }

body {
  color:#111;
  background:
    radial-gradient(circle at 18px 18px, rgba(255,122,0,.20) 0 3px, transparent 4px),
    radial-gradient(circle at 54px 54px, rgba(155,0,180,.20) 0 3px, transparent 4px),
    #130017;
  background-size:72px 72px;
}

.top-warning {
  color:#ffb347;
  background:#000;
  border-bottom-color:var(--h-pumpkin);
  text-shadow:2px 2px #57006b;
}

.page-shell {
  background:#160017;
  border-color:var(--h-pumpkin);
  box-shadow:8px 8px 0 #000;
}

.fake-toolbar {
  background:repeating-linear-gradient(90deg,#250029 0 18px,#100012 18px 36px);
  border-bottom-color:var(--h-pumpkin);
}
.fake-address { background:#000; color:var(--h-acid); }

.left-chaos,
.right-chaos {
  background:repeating-linear-gradient(0deg,#120014 0 20px,#26002c 20px 40px);
  color:var(--h-bone);
}
.left-chaos { border-right-color:var(--h-pumpkin); }
.right-chaos { border-left-color:var(--h-pumpkin); }

.side-title,
.window-title {
  color:#fff4c7;
  background:linear-gradient(90deg,#590068,#9a2600,#ff7a00,#590068);
  text-shadow:1px 1px #000;
}

.side-nav a,
.right-chaos a {
  color:#ffb347;
  background:#050006;
  border-color:#743b74;
}
.side-nav a:hover,
.right-chaos a:hover {
  color:#000;
  background:var(--h-acid);
}

.hero-chaos {
  background:
    radial-gradient(circle at 50% 12%, #670072 0, #2d0032 33%, transparent 58%),
    linear-gradient(#110013 0%,#360020 60%,#9a3600 100%);
}

.hero-chaos::before {
  opacity:.16;
  background-image:none;
  content:"☠  ☾  ☠  ☾  ☠";
  color:#ff9a19;
  font:900 48px/1.7 "Arial Black",Impact,sans-serif;
  display:grid;
  place-items:center;
  letter-spacing:18px;
}

.hero-chaos h1 {
  color:var(--h-pumpkin);
  text-shadow:3px 3px #000,6px 6px #650077;
}
.hero-chaos h1 span { color:var(--h-acid); }

.sparkle-row {
  color:var(--h-acid);
  text-shadow:2px 2px #000;
}
.sparkle-row img,
.tiny-gif {
  background:#000;
  border:2px ridge var(--h-pumpkin);
  object-fit:contain;
}

.blink-panel {
  color:#ffbd55;
  background:#000;
  border-color:var(--h-acid);
}

.right-box.pink { background:#4a164d; color:var(--h-bone); }
.best-viewed {
  color:var(--h-acid);
  background:#000;
  border-color:var(--h-pumpkin);
}

.rainbow-divider {
  background:repeating-linear-gradient(
    90deg,
    #ff7a00 0 18px,
    #000 18px 36px,
    #690075 36px 54px,
    #caff42 54px 72px
  );
}

.rec-zone {
  background:
    linear-gradient(45deg,rgba(255,122,0,.14),transparent 30%),
    #39003f;
}
.rec-banner {
  color:#ffb347;
  border-color:var(--h-pumpkin);
}
.rec-banner img,
.gif-row img,
.gif-strip img,
.weird-sidebar-gif-box img {
  background:#000 !important;
  border:3px ridge var(--h-pumpkin) !important;
  object-fit:contain !important;
}

.chaos-window { border-color:var(--h-pumpkin); }
.window-body { background:#f1dfb6; }
.section-heading h2,
.mini-heading h3 { color:#710000; }
.date-chip { background:#4d0057; border-color:#a75cb2; }
.poll-link { background:#7b003d; border-color:#ff9347; }
.primary-btn { background:var(--h-acid); }
.vote-status { background:#ffce6a; border-color:#710000; }

.recommendation-item {
  background:#fff0c9;
  border-color:#6d0078;
}
.recommendation-item:nth-child(odd) { background:#ead8b3; }
.rec-rank { background:#51005d; border-color:#ab62b5; }
.rec-title { color:#790000; }

footer {
  color:#ffbd55;
  background:#050006;
  border-top-color:var(--h-pumpkin);
}
footer a { color:var(--h-acid); }

/* Remove the fake bootleg stickers/titles laid over recommendation artwork. */
.bootleg-top,
.bootleg-title,
.bootleg-sticker,
.bootleg-side,
.gif-badge,
.poster-sticker,
.poster-title-overlay,
.fake-vhs-label,
.fake-dvd-label {
  display:none !important;
}

/* Keep controls completely normal and clickable. */
a, button { cursor:pointer; }
input, textarea { cursor:text; }