/* The start screen (start-screen.js): Prosperia's title and Start, over the pixel landscape.
   Drawn in the Aero-pixel skin (retro-ui.css): navy pixel borders, white and sky inner rims, hard-edged gloss, Pixelify
   Sans for headings and buttons. Until the landscape paints, a banded gradient stands in for its sky and hills. */
.start {
  position: fixed; inset: 0; z-index: 100; overflow: hidden auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #2f9fe2 0, #7fd6f5 40%, #c9f2ff 64%, #a6e4c4 64% 73%, #86d24e 73% 86%, #5fb43f 86%);
  color: var(--ae-navy); font-family: var(--ae-body);
  transition: opacity .6s var(--pp-ease) .1s;
}
.start:focus { outline: none; }
.start__scene { position: fixed; left: 0; top: 0; image-rendering: pixelated; pointer-events: none; }
.start__content {
  position: relative; z-index: 6; box-sizing: border-box; min-height: 100%; /* over the bubbles (z-index 5) */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transition: opacity .45s var(--pp-ease), transform .45s var(--pp-ease);
}

/* ---------- the title ---------- */
.start__brand { position: relative; display: grid; justify-items: center; gap: 12px; }
.start__kicker {
  margin: 0; padding: 3px 11px 1px; font: 600 14px var(--ae-pixel); letter-spacing: .04em; color: var(--ae-navy);
  background: #ffffff; border: 2px solid var(--ae-navy); border-radius: 7px; box-shadow: 0 2px 0 var(--ae-navy);
}
/* Glossy pixel lettering: a white top half over aqua, a navy outline built from stacked drop shadows, a hard drop below,
   and now and then a stepped shine sweeping across. */
.start__logo {
  margin: 0; font: 700 clamp(56px, 13vw, 132px)/1 var(--ae-pixel); letter-spacing: .02em; color: transparent;
  background:
    linear-gradient(105deg, transparent 0 42%, rgba(255, 255, 255, .95) 42% 47%, transparent 47% 51%, rgba(255, 255, 255, .8) 51% 53%, transparent 53%) 100% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #ffffff 0 48%, #d4f8ff 48% 56%, #7fe0f8 56% 80%, #34c4ea 80% 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(4px 0 0 var(--ae-navy)) drop-shadow(-4px 0 0 var(--ae-navy)) drop-shadow(0 4px 0 var(--ae-navy)) drop-shadow(0 -4px 0 var(--ae-navy)) drop-shadow(0 6px 0 rgba(28, 44, 94, .35));
  animation: start-bob 4s steps(4, jump-none) infinite alternate, start-shine 7s infinite;
}
@keyframes start-bob { to { transform: translateY(-6px); } }
@keyframes start-shine {
  0%, 62% { background-position: 100% 0, 0 0; animation-timing-function: steps(14, end); }
  100% { background-position: 0% 0, 0 0; }
}
/* Four-point pixel sparkles around the logo, twinkling in turn. */
.start__spark {
  position: absolute; width: 21px; height: 21px; pointer-events: none; transform: scale(0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%231c2c5e' d='M3 0h1v2h1v1h2v1H5v1H4v2H3V5H2V4H0V3h2V2h1z'/%3E%3Cpath fill='%23fff' d='M3 1h1v2h2v1H4v2H3V4H1V3h2z'/%3E%3C/svg%3E") center / contain no-repeat;
  image-rendering: pixelated; animation: start-twinkle 3.6s steps(1) infinite;
}
.start__spark:nth-of-type(1) { left: -4%; top: 34%; }
.start__spark:nth-of-type(2) { right: -3%; top: 18%; width: 28px; height: 28px; animation-delay: 1.2s; }
.start__spark:nth-of-type(3) { right: 16%; bottom: -10%; width: 14px; height: 14px; animation-delay: 2.4s; }
@keyframes start-twinkle { 0% { transform: scale(0); } 8% { transform: scale(.6); } 14% { transform: scale(1); } 22% { transform: scale(.6); } 28%, 100% { transform: scale(0); } }

/* ---------- Start: a progress bar while the city builds, then a glossy lime button ---------- */
.start__go { display: grid; justify-items: center; gap: 8px; margin-top: 18px; }
.start__btn {
  position: relative; overflow: hidden; min-width: min(360px, 100%); padding: 16px 48px 14px; cursor: progress;
  font: 600 28px/1 var(--ae-pixel); color: var(--ae-navy);
  border: 3px solid var(--ae-navy); border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0 46%, #e3f6fc 46% 100%);
  box-shadow: inset 0 2px 0 #ffffff, inset 0 -3px 0 #b9e3f2, 0 3px 0 var(--ae-navy);
}
.start__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(90deg, var(--ae-aqua) 0 6px, var(--ae-sky) 6px 8px); opacity: .6; transition: width .2s steps(6); }
.start__label { position: relative; font-variant-numeric: tabular-nums; }
.start.is-ready .start__btn {
  cursor: pointer; color: #ffffff; text-shadow: 1px 1px 0 var(--ae-lime-dark), 2px 2px 0 var(--ae-navy);
  background: linear-gradient(180deg, var(--ae-lime-hi) 0 46%, var(--ae-lime) 46% 100%);
  box-shadow: inset 0 2px 0 #ffffff, inset 0 -4px 0 var(--ae-lime-dark), 0 3px 0 var(--ae-navy), 0 0 0 4px rgba(216, 255, 176, .55), 0 0 16px 3px rgba(111, 208, 74, .5);
  animation: start-glow 1.8s ease-in-out infinite;
}
.start.is-ready .start__fill { display: none; }
.start.is-ready .start__btn:hover { filter: brightness(1.06) saturate(1.1); }
.start.is-ready .start__btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #ffffff, inset 0 -2px 0 var(--ae-lime-dark), 0 1px 0 var(--ae-navy); animation: none; }
.start__btn:focus-visible { outline: 3px solid var(--ae-gold); outline-offset: 4px; }
@keyframes start-glow {
  50% { box-shadow: inset 0 2px 0 #ffffff, inset 0 -4px 0 var(--ae-lime-dark), 0 3px 0 var(--ae-navy), 0 0 0 6px rgba(216, 255, 176, .75), 0 0 26px 7px rgba(111, 208, 74, .7); }
}
.start.is-failed .start__btn { cursor: not-allowed; background: linear-gradient(180deg, #fff6cc 0 46%, var(--ae-gold) 46% 100%); }
.start.is-failed .start__fill { display: none; }
.start__status { margin: 0; min-height: 1.3em; font: 14px var(--ae-pixel); color: var(--ae-ink-soft); text-align: center; text-wrap: balance; }
.start.is-failed .start__status { color: var(--ae-navy); }

.start__foot { margin: 0; font: 13px var(--ae-pixel); color: #ffffff; text-align: center; text-shadow: 2px 2px 0 var(--ae-navy); }
.start__foot a { color: inherit; }
.start__foot a:focus-visible { outline: 3px solid var(--ae-gold); outline-offset: 2px; }

/* ---------- leaving: the card lifts away and the landscape fades over the city ---------- */
.start.is-leaving { opacity: 0; pointer-events: none; }
.start.is-leaving .start__content { opacity: 0; transform: translateY(-28px) scale(.98); }

/* After Start: a gold ring pulses round the Policies button, where a game begins. */
.pp-launch.is-hinted::after {
  content: ''; position: absolute; inset: -8px; border: 3px solid var(--ae-gold); border-radius: 15px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--ae-navy), 0 0 14px 2px rgba(255, 210, 63, .7); opacity: 0;
  animation: start-hint 1.1s ease-in-out .4s 4;
}
@keyframes start-hint { 50% { opacity: 1; transform: scale(1.04); } }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .start__content { gap: 16px; }
  .start__btn { min-width: min(290px, 100%); font-size: 24px; }
}
@media (max-height: 640px) {
  .start__content { justify-content: flex-start; gap: 14px; }
  .start__logo { font-size: clamp(44px, 10vw, 96px); }
  .start__go { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .start__logo, .start__spark, .start.is-ready .start__btn, .pp-launch.is-hinted::after { animation: none; }
  .start__spark { display: none; }
  .pp-launch.is-hinted::after { opacity: 1; }
  .start__fill, .start, .start__content { transition: none; }
}