/* Title screen.
   The backdrop is the project's own title painting (art/reference/titlescreen.png), with its
   baked-in menu lifted out by tools/build-title.mjs so a real keyboard-navigable menu can sit
   in exactly the same place, in the same typographic language. The title lettering, the tagline,
   the roadside sign and the closing question all live in the painting itself. */

.title-screen {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: #05070b;
}

.title-screen.hidden { display: none !important; }

/* An exact "cover" stage that keeps the painting's 3:2 coordinate system intact, so the
   menu can be positioned as a percentage of the artwork rather than of the viewport. */
.title-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 1.5));
  height: max(100vh, calc(100vw / 1.5));
}

.title-art,
.title-weather {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.title-art {
  object-fit: fill;
  image-rendering: auto;
}

.title-weather {
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* ---- menu, sitting where the painting's menu was ---- */

.title-menu {
  position: absolute;
  left: 51.4%;
  top: 57.2%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  padding: 16px 44px 20px;
}

.title-menu::before {
  content: '';
  position: absolute;
  inset: -6px -18px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(6, 4, 10, 0.62) 0%, rgba(6, 4, 10, 0.34) 52%, rgba(6, 4, 10, 0) 76%);
  pointer-events: none;
}

.title-menu > * { position: relative; }

.title-option {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 2px 8px;
  cursor: pointer;
  color: #efe6ee;
  font-family: var(--pixel-font);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 30px;
  text-shadow:
    0 0 2px rgba(6, 4, 10, 0.95),
    0 2px 5px rgba(4, 2, 8, 0.9),
    0 0 22px rgba(232, 120, 160, 0.22);
  transition: color 110ms linear, text-shadow 110ms linear;
  position: relative;
}

.title-option::before {
  content: '\25B6';
  position: absolute;
  right: 100%;
  margin-right: 0.7em;
  color: #ef5f8c;
  font-size: 20px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 110ms linear, transform 110ms linear;
  text-shadow: 0 0 10px rgba(239, 95, 140, 0.8);
}

.title-option.is-selected,
.title-option:hover,
.title-option:focus-visible {
  color: #ffffff;
  outline: none;
  text-shadow:
    0 0 2px rgba(6, 4, 10, 0.95),
    0 2px 5px rgba(4, 2, 8, 0.9),
    0 0 26px rgba(255, 150, 185, 0.55);
}

.title-option.is-selected::before,
.title-option:hover::before,
.title-option:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

.title-option[disabled] {
  color: #6f6270;
  cursor: default;
  text-shadow: 0 1px 3px rgba(4, 2, 8, 0.9);
}

.title-option[disabled]:hover::before,
.title-option[disabled]:focus-visible::before { opacity: 0; }

/* Sub-pixel snapping. Percentage centring puts a box at x.5 whenever the viewport and the
   box disagree on parity, and half a device pixel of offset is the one remaining way to
   make an on-grid pixel font look soft. round() pins the box back to whole pixels. A
   browser without round() keeps the plain 50% centring and is no worse off than before. */
@supports (left: round(down, 50%, 1px)) {
  /* The stage is centred on a fractional height (100vw / 1.5), so its own offset has to be
     snapped first or every percentage inside it inherits the half pixel. */
  .title-stage {
    left: round(down, 50%, 1px);
    top: round(down, 50%, 1px);
    transform: translate(round(down, -50%, 1px), round(down, -50%, 1px));
  }
  .title-menu {
    left: round(down, 51.4%, 1px);
    top: round(down, 57.2%, 1px);
    transform: translateX(round(down, -50%, 1px));
    /* Each option is centred by hand below rather than by align-items, because flex centring
       puts an odd-width label (OPTIONS is 185px) in an even column at x.5. */
    align-items: flex-start;
  }
  .title-option {
    left: round(down, 50%, 1px);
    transform: translateX(round(down, -50%, 1px));
  }
  /* .credits is declared here, after style.css, so its snapping has to live here too. */
  .credits {
    left: round(down, 50%, 1px);
    top: round(down, 50%, 1px);
    transform: translate(round(down, -50%, 1px), round(down, -50%, 1px));
  }
}

/* ---- build stamp, replacing the painting's scrubbed version line ---- */

.title-build {
  position: absolute;
  right: 18px;
  bottom: 14px;
  margin: 0;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 3px;
  color: rgba(196, 172, 196, 0.45);
  pointer-events: none;
}

/* ---- credits ---- */

.credits {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  padding: 26px 30px 30px;
  text-align: left;
  z-index: 60;
}

.credits h2 { margin: 0 0 4px; }

.credits dl {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  font-size: 10px;
  line-height: 16px;
}

.credits dt { color: #8fa2b3; letter-spacing: 1px; }
.credits dd { margin: 0; color: #e3d8bd; }

@media (max-width: 760px), (max-height: 620px) {
  .title-option { font-size: 20px; line-height: 20px; letter-spacing: 2px; }
  .title-option::before { font-size: 10px; }
  .title-menu { gap: 16px; }
  .title-build { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .title-weather { display: none; }
}