/* arcade.css — Arcade cabinet layout using split top/bottom images.
   The screen region sits naturally between arcade_top.png and arcade_bottom.png
   in normal document flow — no percentage guessing needed.
   Buttons/spider remain absolutely positioned over the bottom image.

   Image dimensions (from source PNG 3856×8368):
     arcade_top.png:    3856 × 1925  (aspect-ratio: 3856/1925)
     screen hole:       3856 × 2134  (aspect-ratio: 3856/2134)
     arcade_bottom.png: 3856 × 4309  (aspect-ratio: 3856/4309)
*/

#copyright-line {
  margin: 0;
  padding: 4px 0;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.5;
  width: 100%;
}

html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

/* Hide scrollbar while keeping page scrollable */
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; }
html { scrollbar-width: none; -ms-overflow-style: none; }

/* ---------------------------------------------------------------------------
   Container — height is set by stacked content, not aspect-ratio
   --------------------------------------------------------------------------- */

#arcade-container {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  display: block;
  user-select: none;
}

/* ---------------------------------------------------------------------------
   Top and bottom cabinet images — full width, natural height
   --------------------------------------------------------------------------- */

#arcade-top,
#arcade-bottom {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Screen region — sits between the two images in normal flow.
   Height is derived from the exact pixel ratio of the screen hole.
   Width is 100% because the transparent hole spans the full image width.
   --------------------------------------------------------------------------- */

#screen-region {
  display: block;
  width: 69%;        /* cabinet screen hole width: 2875px / 3856px */
  margin-left: 14%;  /* cabinet left wall: 427px / 3856px */
  aspect-ratio: 2875 / 2134; /* exact screen hole pixel dimensions */
  overflow: hidden;
  background: #040405;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
  position: relative; /* for absolutely-positioned children (skip buttons etc.) */
}

/* Hidden by default; revealed via :hover on desktop (only on devices that
   actually support hover — wrapping in @media (hover: hover) prevents iOS
   from treating a tap as a stuck-on hover state) or via .controls-visible
   on touch devices (tap-to-show, fades after 3s — see arcade.js).
   NOTE: do NOT use `visibility` here — combining visibility with opacity
   causes iOS Safari to get the transition stuck. Match the pattern used by
   #video-back / #fullscreen-btn which work reliably on iOS. */
.skip-btn,
#btn-pause {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  #screen-video:hover .skip-btn,
  #screen-video:hover #btn-pause {
    opacity: 1;
    pointer-events: auto;
  }
}

#screen-video.controls-visible .skip-btn,
#screen-video.controls-visible #btn-pause {
  opacity: 1;
  pointer-events: auto;
}

/* In-video control row: skip-back, pause, skip-forward, (test-skip-end).
   All share the .skip-btn class — same visuals, different horizontal slot.
   #btn-pause is centered horizontally; the skip buttons hug the edges. */
.skip-btn,
#btn-pause {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(170,255,0,0.5);
  color: rgba(170,255,0,0.85);
  font-family: var(--font-main);
  font-size: clamp(0.6rem, 1.8vw, 1rem);
  padding: 0.4em 0.6em;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: auto;
  height: auto;
}

.skip-btn svg,
#btn-pause svg {
  width: 1.1em;
  height: 1.1em;
  color: inherit;
  flex-shrink: 0;
}

#skip-back     { left: 2%; }
#skip-forward  { right: 2%; }
#test-skip-end { right: calc(2% + 3.6em); }
#btn-pause     { left: 50%; transform: translate(-50%, -50%); }


/* Screen state: only .active is visible */
.screen-state {
  display: none;
  width: 100%;
  height: 100%;
}

.screen-state.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Menu screen
   --------------------------------------------------------------------------- */

#screen-menu {
  background: var(--color-screen);
  color: var(--color-lime);
  gap: 0.5em;
  padding: 6%;
  position: relative;
}

#char-niko {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 13%;
  width: auto;
  image-rendering: pixelated;
}

#char-angie-lucia {
  position: absolute;
  bottom: -1px;
  right: 5%;
  height: 16%;
  width: auto;
  image-rendering: pixelated;
}

#btn-mute {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(170,255,0,0.4);
  color: rgba(170,255,0,0.85);
  font-size: clamp(1rem, 2vw, 1.1rem);
  border-radius: 0;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 0.5em;
  line-height: 1;
  transition: background 0.15s ease;
}

#btn-mute:hover {
  background: rgba(0,0,0,0.8);
  color: #fff;
}

#menu-pixel-art {
  width: 100%;
  flex: 0.6 1 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* PLACEHOLDER: remove background once real pixel art is slotted in */
  background: rgba(80, 0, 120, 0.4);
  font-size: 0.5em;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
}

#menu-pixel-art::after {
  content: 'pixel art here';
}

#menu-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.6rem, 3vw, 1rem);
  width: min(90%, 420px);
  max-height: 60vh;
  margin: 0 auto;
}

.menu-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}


#menu-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 2.2vw, 1rem);
  width: min(85vw, 90%);
  max-width: min(500px, 95vw);
  margin: 0 auto;
}

.menu-btn {
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(170,255,0,0.8);
  color: var(--color-lime);
  font-family: var(--font-main);
  font-size: clamp(0.9rem, 2.8vw, 1.5rem);
  letter-spacing: 0.14em;
  padding: clamp(0.55rem, 1.7vw, 1rem) clamp(0.8rem, 2.2vw, 1rem);
  text-align: center;
  cursor: pointer;
  border-radius: 0.35rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: background 0.08s, color 0.08s, transform 0.08s;
}

.menu-btn:hover,
.menu-btn:focus {
  background: var(--color-lime);
  color: #000;
  transform: translateY(-1px);
  outline: none;
}

.menu-btn--secondary {
  border-color: var(--color-text-dim);
  color: var(--color-text-dim);
}

.menu-btn--secondary:hover,
.menu-btn--secondary:focus {
  background: var(--color-text-dim);
  color: #000;
}

/* ---------------------------------------------------------------------------   Mobile menu tuning
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #menu-nav {
    width: 100%;
    max-width: 100%;
    gap: 0.4rem;
  }
  .menu-btn {
    font-size: clamp(1rem, 4vw, 1.2rem);
    padding: 0.7rem 0.9rem;
    letter-spacing: 0.12em;
  }
  .menu-btn:hover,
  .menu-btn:focus {
    transform: none;
  }
}

@media (max-width: 310px) {
  #menu-nav {
    gap: 0.3rem;
  }
  .menu-btn {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
    padding: 0.55rem 0.7rem;
  }
}

/* ---------------------------------------------------------------------------   Video screen
   --------------------------------------------------------------------------- */

#screen-video {
  position: relative;
  background: #000;
}

#video-main {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-height: 100%;
  background: #000;
}

#screen-region {
  background: #040405;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
}


/* Spider eye-art is still a placeholder, so keep that region hidden. */
#spider-region {
  display: none !important;
}

/* Wrap that holds the bottom cabinet image + the interactive overlay.
   The image dictates the wrap's size; #button-region absolute-fills it. */
#bottom-wrap {
  position: relative;
  width: 100%;
}

#button-region {
  position: absolute;
  inset: 0;             /* exactly overlay the bottom image */
  pointer-events: none; /* let cabinet image receive nothing */
}
/* Re-enable pointer events on actual controls only. */
#button-region > * {
  pointer-events: auto;
}

.skip-btn:hover,
#btn-pause:hover {
  background: rgba(0,0,0,0.8);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Unfilmed choice screen
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Trailer screen
   --------------------------------------------------------------------------- */

#screen-trailer {
  position: relative;
  background: #000;
  padding: 0;
}

#trailer-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.trailer-ctrl-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(170,255,0,0.4);
  color: rgba(170,255,0,0.85);
  font-family: var(--font-main);
  font-size: clamp(0.6rem, 1.8vw, 1rem);
  padding: 0.4em 0.6em;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (hover: hover) {
  #screen-trailer:hover .trailer-ctrl-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

#screen-trailer.controls-visible .trailer-ctrl-btn {
  opacity: 1;
  pointer-events: auto;
}

.trailer-ctrl-btn:hover {
  background: rgba(0,0,0,0.8);
  color: #fff;
}

#trailer-back,
#notify-cancel-btn,
#video-back,
#trailer-back,
#playmenu-back,
#resume-cancel-btn,
#fullscreen-btn,
#about-back,
#more-back,
#credits-back {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(170,255,0,0.4);
  color: rgba(170,255,0,0.85);
  font-family: var(--font-main);
  font-size: clamp(0.6rem, 1.8vw, 1rem);
  padding: 0.4em 0.6em;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: auto;
  height: auto;
  transition: opacity 0.15s ease;
}

/* Fullscreen button is the mirror of #video-back: same chrome, right side. */
#fullscreen-btn {
  left: auto;
  right: 8px;
}

#trailer-back,
#video-back,
#fullscreen-btn,
#about-back {
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  #screen-trailer:hover #trailer-back,
  #screen-video:hover #video-back,
  #screen-video:hover #fullscreen-btn,
  #screen-about:hover #about-back {
    opacity: 1;
    pointer-events: auto;
  }
}

#screen-trailer.controls-visible #trailer-back,
#screen-video.controls-visible #video-back,
#screen-video.controls-visible #fullscreen-btn,
#screen-about.controls-visible #about-back {
  opacity: 1;
  pointer-events: auto;
}

#trailer-back:hover,
#notify-cancel-btn:hover,
#video-back:hover,
#playmenu-back:hover,
#resume-cancel-btn:hover,
#fullscreen-btn:hover,
#about-back:hover {
  background: rgba(0,0,0,0.8);
  color: #fff;
}


#screen-about {
  background: #020214;
  color: var(--color-text);
  display: block;
  overflow: hidden;
  padding: 0;
}

#about-text {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  font-family: var(--font-main);
  color: #e8e8e8;
  line-height: 2.6;
  letter-spacing: 0.1em;
  text-align: center;
  font-size: clamp(0.5rem, 1.9vw, 1.4rem);
  text-shadow: 0 0 18px rgba(170,255,0,0.12);
  padding: 0 8%;
  box-sizing: border-box;
  scrollbar-width: none;
}

#about-text::-webkit-scrollbar { display: none; }

#about-text p {
  margin: 0 0 2.4em;
}

/* Lead/trail spacers — kept zero-height so the typewriter content stays
   visible. (Old scrolling-marquee design used 100% here.) */
.about-lead-space { height: 0; }
.about-trail-space { height: 0; }

/* ---------------------------------------------------------------------------
   Demo-end screen — same vibe as the menu (purplish bg, lime accents),
   same typeface as the about screen.
   --------------------------------------------------------------------------- */
#screen-demoend {
  background: var(--color-screen);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8%;
  text-align: center;
  font-family: var(--font-main);
  font-size: clamp(0.7rem, 2.1vw, 1.4rem);
  line-height: 2;
  letter-spacing: 0.1em;
  text-shadow: 0 0 18px rgba(170,255,0,0.18);
}
#screen-demoend p { margin: 0; max-width: 36em; }
#screen-demoend em { font-style: italic; color: var(--color-lime); }
#screen-demoend strong { color: var(--color-lime); font-weight: normal; }

/* ---------------------------------------------------------------------------
   MORE submenu — same chrome as the main menu so the visual jump is
   minimal. Hosts the ABOUT / GET NOTIFIED / CREDITS buttons.
   --------------------------------------------------------------------------- */
#screen-more {
  background: var(--color-screen);
  color: var(--color-lime);
  gap: 0.5em;
  padding: 6%;
  position: relative;
  align-items: center;
  justify-content: center;
}

#more-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Credits screen — slow Minecraft-style vertical roll. The animation
   is started/stopped from arcade.js via the .rolling class on
   .credits-roll so it resets cleanly on each visit to the screen.
   Duration is 110s, matching the credits audio.
   --------------------------------------------------------------------------- */
#screen-credits {
  background: var(--color-screen);
  color: var(--color-lime);
  position: relative;
  overflow: hidden;
  /* override flex-centering from .screen-state.active — we want the
     .credits-roll to fill the screen instead. */
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.credits-roll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* No bottom / no height — column expands to fit its content, then
     translateY scrolls the whole column past the visible area. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--font-main);
  font-size: clamp(0.7rem, 1.7vw, 1.1rem);
  line-height: 1.45;
  padding: 0 1.2em;
  will-change: transform;
}

/* Animation: start with the column just below the visible window (top
   of column at parent's bottom edge), end with it just above (bottom of
   column at parent's top edge). The --scroll-start var is set by JS to
   the parent's pixel height so the start position is parent-relative,
   not column-relative — otherwise on a tall column the credits would
   take 30+ seconds to enter the visible area. */
.credits-roll.rolling {
  animation: credits-scroll 157s linear forwards;
}

@keyframes credits-scroll {
  from { transform: translateY(var(--scroll-start, 100%)); }
  to   { transform: translateY(-100%); }
}

/* Tiny buffer at the start so the first credit doesn't snap to the edge
   the instant the screen opens. No trailing buffer needed — the -100%
   end already scrolls the entire column past the top edge. */
.credits-roll-spacer {
  height: 0.5em;
  flex-shrink: 0;
}

.credit-section {
  margin-bottom: 1.8em;
  flex-shrink: 0;
}

.credit-role {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  font-size: 1.05em;
  margin: 0 0 0.45em 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: normal;
}

.credit-name {
  margin: 0.15em 0;
  opacity: 0.92;
}

/* Section header — marks the visual break between the film credits and
   the Dooley's Players exec board. The == characters are literal so the
   delineation reads even without the styling. */
.credit-divider {
  margin: 2em 0 1.4em 0;
  font-size: 1.05em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: normal;
  text-align: center;
  flex-shrink: 0;
}

/* Compact comma-separated list for Special Thanks — keeps a long list of
   names from inflating the per-person credit time. */
.credit-thanks-list {
  margin: 0.15em auto 0 auto;
  opacity: 0.88;
  max-width: 22em;
  font-size: 0.92em;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   .sr-only — keep content in the DOM (so search crawlers index it) but
   hide it from visual users. Used for the off-screen credits list at
   the bottom of the page that gives the cast & crew names search-engine
   visibility while the in-cabinet CREDITS screen is the user-facing UI.
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#screen-unfilmed {
  flex-direction: row !important;
  gap: 2%;
  padding: 2%;
  background: #000;
}

.unfilmed-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s;
}

.unfilmed-panel--green { border-color: var(--color-lime); }
.unfilmed-panel--red   { border-color: var(--color-red); }

.unfilmed-panel:hover.unfilmed-panel--green { background: rgba(170,255,0,0.08); }
.unfilmed-panel:hover.unfilmed-panel--red   { background: rgba(255,34,34,0.08); }

.unfilmed-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* PLACEHOLDER: shows checkerboard if no thumbnail src set */
  background: repeating-conic-gradient(#1a0030 0% 25%, #2a0050 0% 50%) 0 0 / 8px 8px;
}

.unfilmed-label {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.75);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: clamp(0.4rem, 1.2vw, 0.65rem);
  letter-spacing: 0.06em;
  padding: 0.2em 0.4em;
  text-align: center;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Commentary screen
   --------------------------------------------------------------------------- */

#screen-commentary {
  background: var(--color-screen);
  color: var(--color-lime);
  flex-direction: column;
  padding: 4%;
  overflow-y: auto;
}

.commentary-title {
  font-size: clamp(0.5rem, 1.5vw, 0.8rem);
  letter-spacing: 0.12em;
  margin-bottom: 0.6em;
  text-align: center;
}

#commentary-list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4%;
}

#commentary-list li button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 2px solid var(--color-lime);
  color: var(--color-lime);
  font-family: var(--font-main);
  font-size: clamp(0.4rem, 1.2vw, 0.65rem);
  padding: 0.3em 0.5em;
  cursor: pointer;
  transition: background 0.1s;
}

#commentary-list li button:hover {
  background: rgba(170,255,0,0.1);
}

.commentary-placeholder {
  color: var(--color-text-dim);
  font-size: clamp(0.4rem, 1.2vw, 0.6rem);
  text-align: center;
}

#commentary-player {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4%;
}

#commentary-iframe {
  flex: 1;
  width: 100%;
  border: none;
}

/* ---------------------------------------------------------------------------
   Code prompt screen
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Play sub-menu (NEW GAME / RESUME GAME)
   --------------------------------------------------------------------------- */

#screen-playmenu {
  background: var(--color-screen);
  color: var(--color-lime);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8%;
  padding: 6%;
  position: relative;
}

.playmenu-nav {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: min(90%, 320px);
}

.playmenu-nav .menu-btn {
  width: 100%;
}


/* ---------------------------------------------------------------------------
   Code prompt — styled to match the notify screen
   --------------------------------------------------------------------------- */

#screen-codeprompt {
  background: var(--color-screen);
  color: var(--color-lime);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8%;
  padding: 6%;
  position: relative;
}

.codeprompt-title {
  font-size: clamp(0.7rem, 2vw, 1rem);
  letter-spacing: 0.12em;
  text-align: center;
  margin: 0;
  color: var(--color-lime);
}

#resume-code-input {
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(170,255,0,0.6);
  color: var(--color-lime);
  font-family: var(--font-main);
  font-size: clamp(0.7rem, 2vw, 1rem);
  letter-spacing: 0.08em;
  padding: 0.5em 0.7em;
  border-radius: 0.3rem;
  width: min(90%, 280px);
  text-align: center;
  outline: none;
}

#resume-code-input:focus {
  border-color: var(--color-lime);
  box-shadow: 0 0 8px rgba(170,255,0,0.3);
}

#resume-code-btn {
  width: min(90%, 280px);
}

/* ---------------------------------------------------------------------------
   Notify screen
   --------------------------------------------------------------------------- */

#screen-notify {
  background: var(--color-screen);
  color: var(--color-lime);
  flex-direction: column;
  gap: 10%;
  padding: 6%;
  position: relative;
}


#notify-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10%;
  width: 100%;
}

#notify-email-input {
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(170,255,0,0.6);
  color: var(--color-lime);
  font-family: var(--font-main);
  font-size: clamp(0.7rem, 2vw, 1rem);
  letter-spacing: 0.08em;
  padding: 0.5em 0.7em;
  border-radius: 0.3rem;
  width: min(90%, 280px);
  text-align: center;
  outline: none;
}

#notify-email-input:focus {
  border-color: var(--color-lime);
  box-shadow: 0 0 8px rgba(170,255,0,0.3);
}

#notify-submit-btn {
  width: min(90%, 280px);
}

.menu-btn--notify {
  border-color: rgba(170,255,0,0.8);
  color: var(--color-lime);
}

.menu-btn--notify:hover,
.menu-btn--notify:focus {
  border-color: var(--color-lime);
  color: #000;
  background: var(--color-lime);
}

/* ---------------------------------------------------------------------------
   Spider region — centered between the two choice buttons
   PLACEHOLDER: tune % coords by inspecting the PNG.
   --------------------------------------------------------------------------- */

#spider-region {
  position: absolute;
  /* Centred in the control panel area */
  top:    56%;
  left:   30%;
  width:  40%;
  height: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#spider-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* PLACEHOLDER: shows a colored square until real images are placed */
  background: rgba(100, 0, 160, 0.6);
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   Choice buttons — half-screen overlays on the video during the last 10s.
   Anchored to #screen-video. Hidden until Choice.showFixed() un-disables them.
   PLACEHOLDER: art will replace these once the real design lands.
   --------------------------------------------------------------------------- */

.choice-button {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border: none;
  cursor: pointer;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 5%;
  font-family: var(--font-main);
  font-size: clamp(0.9rem, 3vw, 2rem);
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,1);
  transition: background 0.15s ease, filter 0.15s ease;
}

/* Hidden whenever Choice has not enabled the button. */
.choice-button:disabled {
  display: none;
}

.choice-button:not(:disabled):active {
  filter: brightness(1.3);
}

/* Green = left, red = right (matches green/red joystick on cabinet).
   Tints are intentionally strong so the colour reads against any busy
   video frame underneath. */
.choice-button--green {
  left: 0;
  background: linear-gradient(to right, rgba(0,220,0,0.72), rgba(0,220,0,0.32));
  animation: throb-soft 1.4s ease-in-out infinite;
}
.choice-button--green:not(:disabled):hover {
  background: linear-gradient(to right, rgba(0,255,0,0.85), rgba(0,255,0,0.42));
}

.choice-button--red {
  right: 0;
  background: linear-gradient(to left, rgba(230,40,40,0.72), rgba(230,40,40,0.32));
  animation: throb-soft 1.4s ease-in-out infinite;
}
.choice-button--red:not(:disabled):hover {
  background: linear-gradient(to left, rgba(255,60,60,0.85), rgba(255,60,60,0.42));
}

/* Soft throb while the choice is alive but not urgent. */
@keyframes throb-soft {
  0%, 100% { filter: brightness(0.9); }
  50%      { filter: brightness(1.25); }
}

/* When time is almost out: WAY faster, brutally bright pulse with an
   inset glow that screams "decide now." */
.choice-button.urgent {
  animation: throb-urgent 0.32s ease-in-out infinite !important;
}
@keyframes throb-urgent {
  0%, 100% {
    filter: brightness(0.7) saturate(0.9) contrast(1);
    box-shadow: inset 0 0 0 rgba(255,255,255,0);
  }
  50% {
    filter: brightness(2.6) saturate(2.2) contrast(1.15);
    box-shadow: inset 0 0 120px rgba(255,255,255,0.55);
  }
}

/* While a choice is armed, hide every other video-screen control. */
#screen-video.choice-active .skip-btn,
#screen-video.choice-active #btn-pause,
#screen-video.choice-active #video-back,
#screen-video.choice-active #fullscreen-btn {
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ---------------------------------------------------------------------------
   Fullscreen button
   --------------------------------------------------------------------------- */

/* When fullscreened, scale the video element to fill the new viewport. */
#screen-video:fullscreen,
#screen-video:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
}
#screen-video:fullscreen #video-main,
#screen-video:-webkit-full-screen #video-main {
  width: 100%;
  height: 100%;
}

/* Fullscreen mode: fill the viewport */
:fullscreen #arcade-container,
:-webkit-full-screen #arcade-container {
  max-width: 100vmin;
  height: 100vh;
}

/* ---------------------------------------------------------------------------
   Touch / no-hover devices (mobile, tablets in touch mode)

   Hover-based control reveal doesn't fire on touch, so all the playback
   controls would otherwise be permanently invisible. Make them always
   visible (except during the choice window, which still hides them via
   the existing #screen-video.choice-active rules).

   Touch targets are also bumped to be tap-friendly (~44px-ish).
   --------------------------------------------------------------------------- */
@media (hover: none) {
  /* Match the in-video control row to the corner buttons (same size). */
  .skip-btn,
  #btn-pause {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    padding: 0.55em 0.7em;
  }

  /* Bigger top-corner buttons too. */
  #video-back,
  #fullscreen-btn,
  #trailer-back,
  #about-back,
  #notify-cancel-btn,
  #playmenu-back,
  #resume-cancel-btn {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    padding: 0.55em 0.7em;
  }

  /* Inputs at >=16px so iOS doesn't zoom the viewport on focus. */
  #notify-email-input,
  #resume-code-input {
    font-size: max(16px, clamp(0.9rem, 2.4vw, 1.1rem));
  }

  /* Bump readability mins for big chunks of text on the screen region. */
  #about-text {
    font-size: clamp(0.95rem, 2.5vw, 1.4rem);
    line-height: 1.7;
  }

  /* Choice button labels: only bumped on tablets here.
     The mobile (<=767px) inline-button restyle in mobile.css handles
     phones and overrides this. */

  /* Demo-end copy. */
  #screen-demoend {
    font-size: clamp(0.95rem, 2.6vw, 1.4rem);
  }
}