body {
  margin: 0;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: #00ff66;
  background: repeating-linear-gradient(
    45deg,
    #000033,
    #000033 20px,
    #220044 20px,
    #220044 40px
  );
}

main {
  width: 92%;
  max-width: 980px;
  margin: 0 auto 40px;
}

.title-card {
  text-align: center;
  background: #ff00ea;
  border: 6px dashed #ffff00;
  color: #000;
  padding: 16px;
  margin: 12px;
  box-shadow: 8px 8px 0 #00f5ff;
}

.wingdings {
  font-family: Wingdings, "Comic Sans MS", cursive;
  font-size: 1.4rem;
  margin-top: 10px;
}

.video-zone,
.awards,
.rules,
.tracker-panel,
.secret-area,
.panel {
  background: #101010;
  border: 4px ridge #ff8800;
  padding: 16px;
  margin: 20px 0;
}

.video-frame {
  border: 10px outset #c0c0c0;
  background: #000;
  padding: 8px;
  overflow: hidden;
}

video {
  width: 100%;
  display: block;
}

/* ─── ??? placeholder ─── */
.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  user-select: none;
}

.video-placeholder-qqq {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: clamp(4rem, 14vw, 10rem);
  font-weight: 700;
  color: #ffcc00;
  text-shadow: 4px 4px #ff0000, 0 0 30px #ff00ea;
  animation: turbo-blink 1.4s steps(2, end) infinite;
  line-height: 1;
}

.video-placeholder-sub {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: clamp(0.75rem, 2.5vw, 1.1rem);
  color: #00ff66;
  text-align: center;
  text-shadow: 1px 1px #000;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.blurb {
  color: #ffff00;
  font-size: 1.1rem;
  text-shadow: 2px 2px #ff00ea;
}

.promo-note {
  color: #fff;
  margin: 8px 0 0;
}

h1, h2 {
  color: #ffcc00;
  text-shadow: 2px 2px #ff0000;
}

ol li,
ul li,
p {
  line-height: 1.45;
}

.tracker-link,
.secret-link,
a {
  color: #00e1ff;
  font-weight: 700;
}

.secret-link {
  display: inline-block;
  animation: turbo-blink 0.9s steps(2, end) infinite;
  font-size: 1.1rem;
}

@keyframes turbo-blink {
  0% { transform: scale(1) rotate(-1deg); }
  50% { transform: scale(1.09) rotate(1deg); }
  100% { transform: scale(1) rotate(-1deg); }
}

label,
input,
button {
  display: block;
  width: 100%;
  margin: 8px 0;
}

input,
button {
  font-family: inherit;
  font-size: 1rem;
  padding: 8px;
}

button {
  cursor: pointer;
  border: 3px outset #ddd;
  background: #ff00ea;
  color: #000;
}

.hidden {
  display: none;
}


/* ─── Card rules definition list ─── */
.card-rules {
  margin: 12px 0 0;
  padding: 0;
}

.card-rules dt {
  display: inline-block;
  min-width: 90px;
  font-weight: 700;
  color: #ffcc00;
  text-shadow: 1px 1px #ff0000;
  margin-top: 6px;
  vertical-align: top;
}

.card-rules dd {
  display: inline;
  margin: 0;
  color: #00ff66;
  line-height: 1.5;
}

.card-rules dd::after {
  content: '';
  display: block;
}

/* ─── Waiver page ─── */
.waiver-page {
  padding-bottom: 60px;
}

.waiver-panel {
  max-width: 860px;
  margin: 24px auto;
}

.waiver-subtitle {
  color: #ff8800;
  font-style: italic;
  margin: -8px 0 20px;
}

.waiver-video-box {
  margin: 24px 0;
  text-align: center;
}

.waiver-video-label {
  color: #ff0000;
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 1px 1px #000;
  margin: 8px 0;
}

.waiver-terms {
  border-top: 3px double #ff8800;
  padding-top: 16px;
}

.waiver-clauses {
  padding-left: 20px;
  color: #00ff66;
}

.waiver-clauses li {
  margin-bottom: 12px;
  line-height: 1.5;
}

.waiver-clauses strong {
  color: #ffcc00;
}

.waiver-footer {
  font-style: italic;
  color: #aaa;
  border-top: 1px dashed #444;
  padding-top: 10px;
  margin-top: 16px;
}

.waiver-sign {
  margin-top: 28px;
  border-top: 3px double #ff8800;
  padding-top: 16px;
}

.waiver-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.5;
  color: #00ff66;
  margin-bottom: 16px;
}

.waiver-check-label input[type="checkbox"] {
  width: auto;
  margin: 3px 0 0;
  flex-shrink: 0;
}

#waiverAgreeBtn {
  font-size: 1.2rem;
  padding: 14px 24px;
  background: #ff0000;
  color: #fff;
  border: 4px outset #ffcc00;
  text-shadow: 1px 1px #000;
  letter-spacing: 1px;
}

#waiverAgreeBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.waiver-note {
  color: #aaa;
  font-style: italic;
  font-size: 0.9rem;
}

/* ─── Cookie banner ─── */
.cookie-banner {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.cookie-banner.hidden {
  display: none;
}

.cookie-inner {
  background: #101010;
  border: 5px ridge #ff8800;
  padding: 24px;
  max-width: 700px;
  width: 100%;
  box-shadow: 0 0 40px #ff00ea;
}

.cookie-inner h2 {
  text-align: center;
  margin-top: 0;
}

.cookie-questions {
  margin: 20px 0;
}

.cookie-question {
  margin-bottom: 20px;
  padding: 12px;
  border: 2px solid #333;
  background: #0a0a1a;
}

.cookie-quote {
  color: #ffcc00;
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.4;
}

.cookie-question label {
  display: inline;
  color: #00ff66;
  font-size: 0.95rem;
}

.cookie-question select {
  display: inline-block;
  width: auto;
  margin: 4px 0 0 6px;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 4px 8px;
  background: #220044;
  color: #fff;
  border: 2px solid #ff8800;
}

.cookie-error {
  color: #ff4444;
  font-weight: 700;
  text-align: center;
  margin: 8px 0;
}

.cookie-error.hidden {
  display: none;
}

#cookie-submit {
  width: 100%;
  font-size: 1rem;
  padding: 12px;
  margin-top: 8px;
  background: #ff00ea;
  color: #000;
  border: 3px outset #ffcc00;
}

/* ─── Cookie shake animation ─── */
@keyframes cookie-shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-10px); }
  30%  { transform: translateX(10px); }
  45%  { transform: translateX(-8px); }
  60%  { transform: translateX(8px); }
  75%  { transform: translateX(-4px); }
  90%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.cookie-shake {
  animation: cookie-shake 0.55s ease-in-out;
}

/* ─── Shame panel ─── */
.cookie-shame {
  text-align: center;
  padding: 12px 0;
}

.cookie-shame h2 {
  color: #ff4444;
  text-shadow: 2px 2px #000;
  animation: turbo-blink 0.7s steps(2, end) infinite;
}

.cookie-shame-intro {
  color: #ffcc00;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 14px;
}

.cookie-shame-fine-print {
  color: #888;
  font-size: 0.85rem;
  line-height: 1.6;
  border: 1px dashed #444;
  padding: 8px 12px;
  margin-bottom: 16px;
  text-align: left;
}

.cookie-shame-btn {
  width: 100%;
  font-size: 1.1rem;
  padding: 14px;
  background: #ff0000;
  color: #fff;
  border: 4px outset #ff8800;
  text-shadow: 1px 1px #000;
  letter-spacing: 1px;
  cursor: pointer;
  animation: turbo-blink 1.1s steps(2, end) infinite;
}

.cookie-shame-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: none;
}

.cookie-shame-countdown {
  margin-top: 14px;
  color: #00ff66;
  font-size: 0.95rem;
  font-style: italic;
}

.cookie-shame-countdown.hidden {
  display: none;
}

/* ─── Email signup ─── */
.email-signup {
  background: #101010;
  border: 4px ridge #ff8800;
  padding: 16px;
  margin: 20px 0;
}

.email-signup p {
  color: #ccc;
}

.email-signup label {
  color: #00ff66;
  font-size: 0.95rem;
}

.email-signup input[type="email"] {
  background: #0a0a1a;
  color: #fff;
  border: 2px solid #555;
  margin-top: 4px;
}

.email-signup button[type="submit"] {
  background: #336699;
  color: #fff;
  border: 2px outset #aaa;
  width: auto;
  padding: 8px 20px;
  margin-top: 4px;
}

.email-result {
  margin-top: 10px;
  color: #00ff66;
  font-weight: 700;
  line-height: 1.4;
}

.email-result.hidden {
  display: none;
}

@media (max-width: 700px) {
  .video-frame {
    width: 100%;
    overflow: hidden;
  }

  .video-frame video {
    /* Intentional jank for the retro vibe: crop mobile video to roughly half. */
    width: 200%;
  }
}

/* ─── Map ─── */
.crawl-map {
  height: 320px;
  margin: 16px 0;
  border: 4px ridge #ff8800;
}

/* Leaflet popup text style */
.leaflet-popup-content strong {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: #000;
}

/* Route arrow divIcon — remove default Leaflet marker background */
.pub-route-arrow {
  background: transparent !important;
  border: none !important;
}

/* ─── Tracker page selects ─── */
.tracker-page select {
  display: block;
  width: 100%;
  margin: 8px 0;
  font-family: inherit;
  font-size: 1rem;
  padding: 8px;
  background: #220044;
  color: #fff;
  border: 2px solid #ff8800;
  cursor: pointer;
}

/* ─── Tracker divider ─── */
.tracker-divider {
  border: none;
  border-top: 2px dashed #444;
  margin: 24px 0 16px;
}

/* ─── Pub list section ─── */
.pub-list-section h3 {
  color: #ffcc00;
  text-shadow: 1px 1px #ff0000;
  margin: 0 0 4px;
}

.pub-list-section > p {
  color: #aaa;
  font-size: 0.9rem;
  margin: 0 0 10px;
}

#pubListItems {
  border: 2px solid #333;
  margin-bottom: 16px;
}

.pub-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #222;
  background: #0a0a1a;
}

.pub-list-row:last-child {
  border-bottom: none;
}

.pub-list-num {
  color: #ff8800;
  font-weight: 700;
  min-width: 22px;
  text-align: right;
  flex-shrink: 0;
}

.pub-list-name {
  color: #00ff66;
  font-weight: 700;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pub-list-coords {
  color: #888;
  font-size: 0.82rem;
  min-width: 140px;
  flex-shrink: 0;
}

.pub-list-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.pub-list-actions button {
  display: inline-block;
  width: auto;
  padding: 3px 8px;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.3;
}

.pub-list-up,
.pub-list-down {
  background: #336699;
  color: #fff;
  border: 2px outset #aaa;
}

.pub-list-up:disabled,
.pub-list-down:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pub-list-del {
  background: #880000;
  color: #fff;
  border: 2px outset #aaa;
}

/* ─── Add pub form ─── */
.add-pub-form {
  margin: 8px 0 16px;
  padding: 12px 14px;
  border: 2px dashed #555;
  background: #0a0a1a;
}

.add-pub-form h4 {
  color: #ffcc00;
  margin: 0 0 10px;
  font-size: 1rem;
}

.lat-lon-row {
  display: flex;
  gap: 12px;
}

.lat-lon-row > div {
  flex: 1;
}

.lat-lon-row label,
.lat-lon-row input {
  width: 100%;
}

.pick-location-btn {
  background: #1a3322;
  color: #00ff66;
  border: 2px outset #00cc44;
  display: inline-block;
  width: auto;
  padding: 6px 14px;
  margin: 6px 0 2px;
}

.add-pub-hint {
  color: #666;
  font-size: 0.82rem;
  font-style: italic;
  margin: 2px 0 10px;
}

.pub-status-message {
  color: #00ff66;
  font-size: 0.9rem;
  margin: 6px 0 0;
  min-height: 1.2em;
}