/**
 * Arcade Comedy Theater — easter eggs
 * arcade-child/css/easter-eggs.css
 *
 * Everything here is either invisible until asked for (the Konami overlay),
 * only awake in the small hours (the ghost light), or a one-line flourish on
 * something the browser was going to draw anyway (::selection). Nothing in
 * this file affects layout, so it cannot move the page about while loading.
 *
 * Deleting this file and its companion JS removes every one of them.
 */

/* ── Text selection ──────────────────────────────────────────────────────────
   The default is a browser blue that belongs to nobody. Volt on ink is the
   same pairing the site's buttons use, and everyone who drags across a show
   description sees it. */
::selection      { background: var(--volt, #e9ff3a); color: var(--ink, #130c1c); text-shadow: none; }
::-moz-selection { background: var(--volt, #e9ff3a); color: var(--ink, #130c1c); text-shadow: none; }

/* iOS Safari ignores ::selection entirely — it draws its own selection UI and
   always has — so on an iPhone the rule above does nothing at all. The mobile
   equivalent is the flash a link gives when a thumb lands on it, which
   defaults to a grey box belonging to no one. This one is honoured on both
   iOS and Android, so it is the version of that idea most visitors get. */
a, button, [role="button"], input[type="submit"], .et_pb_button {
  -webkit-tap-highlight-color: rgba(233, 255, 58, .38);
}

/* ── Attract mode (the Konami code) ──────────────────────────────────────────
   An arcade cabinet left alone long enough starts demoing itself. Fixed and
   on top of everything, gone on any key or click, and it never leaves a trace
   in the document. */
.arc-attract {
  position: fixed;
  inset: 0;
  z-index: 2147483000;          /* above Divi's fixed header and the admin bar */
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, #2a1740 0%, var(--ink, #130c1c) 70%);
  cursor: pointer;
  /* Stated explicitly so the overlay has a sane opacity of its own if the
     @keyframes below ever goes missing — a stripped stylesheet, an overzealous
     minifier. It does NOT rescue a stalled animation: fill-mode 'both' pins
     the from-value regardless, which is why a headless render with animations
     frozen shows this screen at opacity 0. Real browsers run it. */
  opacity: 1;
  animation: arc-attract-in .28s ease-out both;
}
/* Scanlines. A real CRT's are not pure black, they are a gap between phosphor
   rows, so this is a soft dark stripe rather than a hard one. */
.arc-attract::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, .28) 3px,
    rgba(0, 0, 0, .28) 4px
  );
}
.arc-attract__in { position: relative; z-index: 1; max-width: 46rem; }
.arc-attract__eyebrow {
  font-family: var(--marker, cursive);
  color: var(--pink, #ff3d8b);
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  margin: 0 0 .35em;
  transform: rotate(-2deg);
}
.arc-attract__title {
  font-family: var(--display, Impact, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .92;
  font-size: clamp(2.2rem, 9vw, 6rem);
  margin: 0;
  color: var(--paper, #fff6e3);
  /* Stacked offsets in the brand colours — the cheap chromatic split an
     arcade marquee gets from a misconverged tube. */
  text-shadow:
     3px  3px 0 var(--pink, #ff3d8b),
    -3px -3px 0 var(--teal, #1fd6c4);
}
.arc-attract__coin {
  font-family: var(--display, Impact, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: clamp(.95rem, 2.6vw, 1.5rem);
  color: var(--volt, #e9ff3a);
  margin: 1.2em 0 0;
  animation: arc-blink 1.05s steps(1, end) infinite;
}
.arc-attract__hint {
  font-family: var(--body, system-ui, sans-serif);
  font-size: .82rem;
  letter-spacing: .04em;
  color: rgba(255, 246, 227, .55);
  margin: 2.2em 0 0;
}
.arc-attract__hint code {
  font-family: inherit;
  color: var(--gold, #ffb81c);
  background: none;
  padding: 0;
}
@keyframes arc-blink      { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes arc-attract-in { from { opacity: 0; } to { opacity: 1; } }
.arc-attract.is-leaving { opacity: 0; transition: opacity .3s ease; }

.arc-attract__start {
  font-family: var(--display, Impact, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(.85rem, 2.2vw, 1.05rem);
  color: var(--paper, #fff6e3);
  margin: 1.4em 0 0;
}
.arc-attract__start span { color: rgba(255, 246, 227, .5); letter-spacing: .1em; }

/* Once the game is up the marquee copy is out of the way and the canvas gets
   the screen. cursor:none because a spotlight bar following the pointer with
   an arrow sitting on top of it looks like two cursors. */
.arc-attract.is-playing { cursor: none; padding: 0; }

/* The way out, on every device and at every moment — including mid-game on a
   phone, where there is no Escape key and the swipe-down had to be given up
   because steering a paddle drifts downward constantly. */
.arc-attract__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 54px;                 /* the way out, and reached with a thumb mid-game */
  height: 54px;
  border: 2px solid rgba(255, 246, 227, .45);
  border-radius: 50%;
  background: rgba(19, 12, 28, .55);
  color: var(--paper, #fff6e3);
  font: 700 17px/1 ui-monospace, Menlo, Consolas, monospace;
  cursor: pointer;
  display: grid;
  place-items: center;
}
/* The glyph is 54px; the thing you can actually hit is ~82px. Reaching the
   top corner of a phone one-handed while the other thumb is on the paddle is
   awkward enough without demanding accuracy as well. */
.arc-attract__close::before { content: ""; position: absolute; inset: -14px; }
.arc-attract__close:hover,
.arc-attract__close:focus-visible { border-color: var(--volt, #e9ff3a); color: var(--volt, #e9ff3a); }
/* Was faded to .55 during play, which is the one time it actually matters.
   It is the only way out on a phone, so it stays legible. */
.arc-attract.is-playing .arc-attract__close {
  cursor: pointer;
  opacity: 1;
  background: rgba(19, 12, 28, .8);
  border-color: rgba(255, 246, 227, .7);
}
.arc-game { display: block; touch-action: none; }

/* ── Ghost light ─────────────────────────────────────────────────────────────
   The bulb a theatre leaves burning centre stage overnight. Small, bottom
   left, out of the way of anything that matters, and it only exists between
   midnight and five. */
.arc-ghostlight {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9998;
  width: 46px;
  height: 78px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  opacity: .92;
}
.arc-ghostlight__stand {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 46px;
  margin-left: -1px;
  background: linear-gradient(to bottom, rgba(255, 184, 28, .5), rgba(19, 12, 28, .75));
}
.arc-ghostlight__base {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 4px;
  margin-left: -13px;
  border-radius: 50%;
  background: rgba(19, 12, 28, .8);
}
.arc-ghostlight__bulb {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 16px;
  height: 20px;
  margin-left: -8px;
  border-radius: 50% 50% 46% 46%;
  background: var(--bulb, #ffb81c);
  box-shadow:
    0 0 10px 3px rgba(255, 184, 28, .75),
    0 0 34px 12px rgba(255, 184, 28, .34),
    0 0 70px 26px rgba(255, 184, 28, .14);
  animation: arc-bulb 5.5s ease-in-out infinite;
}
@keyframes arc-bulb { 0%, 100% { opacity: .88; } 50% { opacity: 1; } }

.arc-ghostlight__note {
  position: absolute;
  left: 58px;
  bottom: 2px;
  width: 16rem;
  padding: 10px 12px;
  border-radius: var(--r-md, 10px);
  background: var(--ink, #130c1c);
  color: var(--paper, #fff6e3);
  font-family: var(--body, system-ui, sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
/* .is-open is the touch path: no hover on a thumb, so the first press is what
   opens the note and the second is what puts the light out. */
.arc-ghostlight:hover .arc-ghostlight__note,
.arc-ghostlight:focus-visible .arc-ghostlight__note,
.arc-ghostlight.is-open .arc-ghostlight__note { opacity: 1; transform: translateY(0); }
.arc-ghostlight__note b { color: var(--bulb, #ffb81c); }
.arc-ghostlight:focus-visible { outline: 2px solid var(--bulb, #ffb81c); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 640px) {
  .arc-ghostlight { left: 12px; bottom: 12px; transform: scale(.85); transform-origin: left bottom; }
  .arc-ghostlight__note { left: auto; right: 0; bottom: 84px; width: 14rem; }
}

/* ── 9:43 ────────────────────────────────────────────────────────────────────
   943 Liberty Avenue, twice a day. Bottom left on purpose: Divi's back-to-top
   button owns the bottom right, and the ghost light that shares this corner
   only ever appears between midnight and five, so the two can never meet. */
.arc-943 {
  /* A low bar rather than a tall card. Fixed to the bottom left, it sits on
     whatever the viewport happens to have there — on the homepage that was the
     "This weekend" ticket button, and 9:43pm on a Friday is the worst possible
     moment to cover one. Keeping it short keeps it below them. */
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: min(30rem, calc(100vw - 36px));
  padding: 12px 46px 12px 18px;
  background: var(--ink, #130c1c);
  color: var(--paper, #fff6e3);
  border: 3px solid var(--ink, #130c1c);
  border-radius: var(--r-lg, 14px);
  box-shadow: 6px 6px 0 var(--pink, #ff3d8b);
  font-family: var(--body, system-ui, sans-serif);
  animation: arc-943-in .3s cubic-bezier(.2, .9, .3, 1.2) both;
}
.arc-943.is-going { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }

.arc-943__time {
  font-family: var(--display, Impact, sans-serif);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: .01em;
  margin: 0;
  flex: none;
  color: var(--bulb, #ffb81c);
}
.arc-943__copy { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 246, 227, .88); }
.arc-943__copy strong { color: var(--paper, #fff6e3); }
.arc-943__link {
  display: inline-block;
  flex: none;
  font-family: var(--display, Impact, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  text-decoration: none;
  color: var(--volt, #e9ff3a);
  border-bottom: 2px solid var(--volt, #e9ff3a);
  padding-bottom: 1px;
}
.arc-943__link:hover, .arc-943__link:focus-visible { color: var(--paper, #fff6e3); border-color: var(--paper, #fff6e3); }
.arc-943__x {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(255, 246, 227, .55);
  font: 700 14px/1 ui-monospace, Menlo, Consolas, monospace;
  cursor: pointer;
}
.arc-943__x:hover, .arc-943__x:focus-visible { color: var(--paper, #fff6e3); }
@keyframes arc-943-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .arc-943 { gap: 4px 12px; }
  .arc-943__copy { flex: 1 1 100%; order: 3; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────────
   Nothing here is worth triggering someone's vestibular disorder over. The
   blinking INSERT COIN in particular is exactly the kind of thing the setting
   exists for, so it simply stops blinking. */
@media (prefers-reduced-motion: reduce) {
  .arc-attract           { animation: none; }
  .arc-attract__coin     { animation: none; }
  .arc-attract.is-leaving{ transition: none; }
  .arc-ghostlight__bulb  { animation: none; }
  .arc-ghostlight__note  { transition: none; }
  .arc-943               { animation: none; }
  .arc-943.is-going      { transition: none; }
}