/* Utah Pride — shared tokens and page chrome. The game lives in game.css, the shop in shop.css. */

:root {
  --navy: #13234f;
  --navy-deep: #0a1230;
  --ink: #070b1f;
  --red: #e8262c;
  --orange: #f7941d;
  --yellow: #ffde17;
  --green: #12a150;
  --blue: #2e6be6;
  --purple: #93268f;
  --pink: #ff5fb8;
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --gold: #ffcc33;
  --gold-deep: #c98a00;
  --white: #fffaf0;
  --rainbow: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple));
  --rainbow-v: linear-gradient(180deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple));

  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Pixel UI: hard edges, offset shadows, no rounding. */
  --px: 4px;
  --shadow-px: 4px 4px 0 var(--ink);
  --border-px: 3px solid var(--ink);

  --gutter: 16px;
  --max: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--navy-deep);
  color: var(--white);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--yellow); }
button { font: inherit; color: inherit; }

.pixel { font-family: var(--font-pixel); letter-spacing: 0.02em; line-height: 1.4; }

.rainbow-text {
  background: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rainbow-bar { height: 8px; background: var(--rainbow); }

/* Chunky pixel button shared by the game HUD, the shop and the footer. */
.px-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--yellow);
  border: var(--border-px);
  box-shadow: var(--shadow-px);
  cursor: pointer;
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
  -webkit-tap-highlight-color: transparent;
}
.px-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.px-btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.px-btn--pink { background: var(--pink); }
.px-btn--white { background: var(--white); }
.px-btn--gold { background: var(--gold); }
.px-btn--ghost { background: transparent; color: var(--white); border-color: var(--white); box-shadow: 4px 4px 0 rgba(0,0,0,.5); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Section frame ---------- */
.section {
  position: relative;
  padding: 56px var(--gutter);
}
.section__inner { max-width: var(--max); margin: 0 auto; }
.section__kicker {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--pink);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.section__title {
  font-family: var(--font-pixel);
  font-size: clamp(20px, 6vw, 36px);
  line-height: 1.3;
  margin: 0 0 16px;
  text-wrap: balance;
}

/* ---------- The SLC flag-ban story ---------- */
.story {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 6), rgba(0,0,0,.08) calc(100% / 6) calc(100% / 3)),
    var(--navy);
  border-top: var(--border-px);
}
.story__lede { font-size: 18px; max-width: 46ch; }
.story__lede strong { color: var(--yellow); }
.story__cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Local artist ---------- */
.local {
  background: var(--white);
  color: var(--ink);
}
.local .section__kicker { color: var(--purple); }
.local__grid {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 760px) { .local__grid { grid-template-columns: 340px 1fr; } }
.local__photo {
  position: relative;
  border: var(--border-px);
  box-shadow: 8px 8px 0 var(--purple);
  background: var(--ink);
  max-width: 340px;
}
.local__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.local__badge {
  position: absolute;
  right: -10px;
  bottom: -14px;
  transform: rotate(-6deg);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.4;
  padding: 8px 10px;
  background: var(--yellow);
  border: var(--border-px);
  box-shadow: var(--shadow-px);
}
.local a { color: var(--purple); font-weight: 700; }
.local__sig { display: block; width: 240px; max-width: 70%; height: auto; margin-top: 20px; }

/* ---------- The Church of the Sacred Whale ---------- */
.whale {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(91, 206, 250, .18), transparent 60%),
    #13305c;
  border-top: var(--border-px);
}
.whale__grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px) { .whale__grid { grid-template-columns: 260px 1fr; } }
.whale__seal { width: 100%; max-width: 240px; height: auto; margin: 0 auto; filter: drop-shadow(6px 6px 0 var(--ink)); }
.whale .section__kicker { color: #8fd3ff; }
.whale p { max-width: 46ch; }
.whale .px-btn { margin-top: 8px; }

/* ---------- Footer ---------- */
.footer {
  padding: 40px var(--gutter) 120px;
  background: var(--ink);
  text-align: center;
  font-size: 14px;
  color: #c9cbe0;
}
.footer__deseret {
  font-family: "Noto Sans Deseret", var(--font-body);
  font-size: 28px;
  color: var(--white);
  margin: 0 0 4px;
}
.footer__small { font-size: 12px; opacity: .8; }
.footer__domains { font-family: var(--font-pixel); font-size: 9px; line-height: 2; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}