/* The euchre night (stage.js, player.js): a stage of fixed size, 1920
   by 1080 (wide) or 1080 by 1440 (tall), scaled into its view. The
   site's stylesheet is loaded first, for the phone frame (.phone-frame,
   .phone-status) and the theme's colors. The stage keeps the light
   colors of the pictures in it, in a dark theme too. */

/* The player on the about page. */
.night-player { margin: 1rem 0; }
.night-view {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #e9edf2;
}
.night-caption {
  min-height: 3.2em;
  margin: 0.6rem 0;
}
.night-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.night-controls button { min-width: 44px; min-height: 44px; }
.night-scrub {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin: 0;
}

/* Full screen, or filling the window where full screen does not exist:
   the stage takes what the caption and the controls leave. */
.night-player.night-big {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg);
  box-sizing: border-box;
}
.night-player.night-filled {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.night-big .night-view { flex: 1; min-height: 0; border-radius: 0; }
.night-big .night-caption, .night-big .night-controls { margin-left: 1rem; margin-right: 1rem; }
.night-big .night-controls { margin-bottom: 0.6rem; }

.night-stage {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
  background: linear-gradient(#f4f6f9 0, #f4f6f9 78%, #dfe4ea 78%, #dfe4ea 100%);
  color: #1c1f24;
}
.night-tall .night-stage {
  background: linear-gradient(#f4f6f9 0, #f4f6f9 1200px, #dfe4ea 1200px, #dfe4ea 100%);
}
.night-scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

/* The cards between scenes, and the title and the end. */
.night-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 80px;
  background: var(--accent);
  color: var(--accent-fg);
  text-align: center;
}
.night-card.night-light {
  background: transparent;
  color: #1c1f24;
}
/* Under .night-stage, to outrank the site's own heading sizes
   (body.site-page h1, p). The headings are not <h1>: the page has its own,
   and the stage is a picture (aria-hidden), not part of its outline. */
.night-stage .night-card.night-light .night-head { color: var(--accent); }
.night-stage .night-card .night-head { font-size: 92px; line-height: 1.15; margin: 0 0 24px; }
.night-stage .night-card p { font-size: 44px; line-height: 1.3; margin: 0; max-width: 1500px; }
.night-stage .night-card .night-small { font-size: 30px; margin-top: 48px; opacity: 0.9; }
.night-card.night-title { justify-content: flex-start; padding-top: 150px; }
.night-tall .night-card.night-title { padding-top: 260px; }

/* Devices in wide: each drawn at its screen's own CSS size, placed by
   left and top and scaled from its top left corner. */
.night-device {
  position: absolute;
  transform-origin: 0 0;
}
.night-screen {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
.night-screen img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.night-device .phone-frame {
  max-width: none;
  margin: 0;
}
.night-device .phone-frame .night-screen { border-radius: 6px; }
.night-tablet-frame {
  padding: 28px 22px;
  border-radius: 36px;
  background: #1c1f24;
}
.night-tablet-frame .night-screen { border-radius: 8px; }
.night-tv-frame {
  padding: 26px;
  border-radius: 14px;
  background: #111316;
}
.night-tv-stand {
  width: 30%;
  height: 46px;
  margin: 0 auto;
  background: #2a2e35;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

/* Devices in tall: a window onto part of a screen, its edge the
   device's own dark. */
.night-panel {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  border: 10px solid #1c1f24;
  border-radius: 28px;
  background: #ffffff;
}
.night-panel.night-tv { border-color: #111316; border-radius: 14px; }
.night-panel .night-screen {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

/* What the night points at, over a screen. */
.night-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.night-ring {
  position: absolute;
  border: 6px solid #f2b705;
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(242, 183, 5, 0.35);
  opacity: 0;
}
/* An enlarged copy of a few words on a screen, drawn beside it. */
.night-zoom {
  position: absolute;
  border: 6px solid #f2b705;
  border-radius: 12px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
}
.night-tap {
  position: absolute;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: rgba(242, 183, 5, 0.55);
  border: 4px solid #f2b705;
  opacity: 0;
}

/* Whose screen each device or window is (stage.js, view): above a
   whole device in wide, drawn at 34 px however the device is scaled;
   in tall, centered in the row stage.js's ROW leaves above a window. */
.night-tag {
  position: absolute;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.night-device .night-tag {
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  font-size: calc(34px / var(--night-scale, 1));
  margin-bottom: 0.3em;
}
.night-tall .night-tag { font-size: 44px; }

/* The stick figures and their name labels. */
.night-figure {
  position: absolute;
  /* The feet: figures.js draws them 290px down its 300px box. */
  transform-origin: 100px 290px;
}
.night-figure svg { display: block; overflow: visible; }
/* Above the head: below the feet it would sit under the video's
   caption band. */
.night-figure .night-label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}
/* A phone's column draws the tall stage at about a third of its size. */
.night-tall .night-figure .night-label { font-size: 52px; }
.night-divider {
  position: absolute;
  left: 958px;
  top: 40px;
  width: 4px;
  height: 860px;
  background: #c4cbd4;
  border-radius: 2px;
}
.night-door {
  position: absolute;
  left: 30px;
  top: 470px;
  width: 120px;
  height: 372px;
  background: #b98a5e;
  border: 8px solid #8a6440;
  border-bottom: none;
}
.night-tall .night-door { left: 0; top: 1180px; width: 70px; height: 250px; }

/* The about page's section, set off from the features around it by a
   rule above and below, the column's full width kept for the stage. */
.about-night {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.75rem;
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}
/* The section's summary is a control: 44 px tall at the least
   (.claude/rules/webui.md, the project's floor). */
.night-more > summary { min-height: 44px; box-sizing: border-box; padding: 0.6rem 0; cursor: pointer; }
.night-more > summary { font-weight: 600; }