/* HENGULARITY — 1999-style menus: plain words over the scene, chunky pixel type,
   hard black outlines, no boxes. */
:root {
  --font: 'Luckiest Guy', 'Lilita One', system-ui, sans-serif;
  --fs: 1.12;
  --yellow: #ffe23a;
  --orange: #ff7a1a;
  --white: #ffffff;
  /* hard 3px raster outline + drop */
  --outline: 3px 0 #000, -3px 0 #000, 0 3px #000, 0 -3px #000, 3px 3px #000, -3px 3px #000, 3px -3px #000, -3px -3px #000, 6px 6px #000;
  --outline-sm: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px 2px #000, 2px -2px #000, -2px -2px #000, 3px 3px #000;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: none;
}

#game { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; }
body.playing #game { cursor: var(--crosshair, crosshair); }
body.playing.locked #game { cursor: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

.account-link { text-decoration: none; font-size: calc(30px * var(--fs)); margin-top: 8px; }
.scores li.mine { background: rgba(255,226,58,.14); }
.scores li[data-position]::before { content: attr(data-position) '.'; }
.scores .who small.contributors { font-size: .55em; }
#r-save-status { max-width: 580px; margin: 12px auto; }
#r-save-status a { color: var(--yellow); }

/* ------------------------------------------------------------------ screens */
.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
  touch-action: pan-y;
}
.screen.active { opacity: 1; pointer-events: auto; }
#screen-title { background: rgba(0, 0, 0, 0.18); }
#screen-loading {
  background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.3)), url('assets/loading.jpg') center bottom / cover no-repeat, #3b6fc4;
  z-index: 40;
  overflow: hidden;
}
/* one cyborg hen over the city while the 3D art bakes (static) */
.lhen {
  position: absolute;
  right: 12%;
  top: 9%;
  width: 200px;
  height: 200px;
  background: url('assets/hen.webp') center / contain no-repeat;
  transform: scaleX(-1); /* face the title */
  pointer-events: none;
}
@media (max-width: 640px) { .lhen { width: 110px; height: 110px; right: 4%; top: 5%; } }
body.rebaking .lhen { display: none; }
body.rebaking #screen-loading { opacity: 1; pointer-events: auto; background: rgba(0, 0, 0, 0.7); }

.menu { margin: auto; text-align: center; }

.logo {
  width: min(800px, 84vw, 90vh);
  margin: 0 auto 24px;
  line-height: 1;
}
.logo img { display: block; width: 100%; height: auto; }

h2 {
  margin: 0 0 22px;
  font: 700 calc(clamp(32px, 6.5vw, 60px) * var(--fs)) var(--font);
  color: var(--yellow);
  text-shadow: var(--outline);
}

nav { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0; }

/* menu item: just a word */
.mi {
  position: relative;
  padding: 4px 18px;
  font: 700 calc(clamp(24px, 4.2vw, 38px) * var(--fs)) var(--font);
  letter-spacing: 0.04em;
  color: var(--white);
  text-shadow: var(--outline);
}
.mi:hover, .mi:focus-visible { color: var(--yellow); outline: none; }
.mi:hover::before, .mi:focus-visible::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 16px;
  height: 20px;
  transform: translateY(-50%);
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(3px 3px 0 #000);
}
.mi:active { transform: translate(2px, 2px); }
.mi.small { font-size: calc(28px * var(--fs)); padding: 0 8px; }

.line {
  margin: 8px 0;
  font: 700 calc(clamp(14px, 2.1vw, 20px) * var(--fs)) var(--font);
  color: var(--white);
  text-shadow: var(--outline-sm);
}
.line[hidden] { display: none; }
#screen-intro { background: rgba(0, 0, 0, 0.62); cursor: pointer; z-index: 30; }
.story {
  max-width: min(900px, 90vw);
  min-height: 3.6em;
  margin: 0 auto;
  font: 700 calc(clamp(20px, 3.4vw, 38px) * var(--fs)) / 1.25 var(--font);
  color: #fff;
  text-shadow: var(--outline);
}
.story b { color: var(--yellow); }
#intro-hint { animation: blink 1s steps(2) infinite; }
.line.dim { opacity: 0.9; margin-top: 22px; }
.line.hot { color: var(--orange); animation: blink 0.6s steps(2) infinite; }
.line.tiny { font-size: calc(15px * var(--fs)); opacity: 0.9; }
.line b { color: var(--yellow); }
@keyframes blink { 50% { opacity: 0.25; } }

.big {
  font: 700 calc(clamp(56px, 12vw, 108px) * var(--fs)) var(--font);
  line-height: 1;
  color: var(--white);
  text-shadow: 6px 0 #000, -6px 0 #000, 0 6px #000, 0 -6px #000, 6px 6px #000, -6px 6px #000, 6px -6px #000, -6px -6px #000, 10px 10px #000;
}
#r-rank { color: var(--yellow); }

/* name entry: an underline, like an old high-score table */
.name { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.name.done { opacity: 0.5; pointer-events: none; }
.name input {
  width: 12ch;
  padding: 2px 4px;
  font: 700 calc(28px * var(--fs)) var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--yellow);
  caret-color: var(--yellow);
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  border-bottom: 4px solid var(--yellow);
  border-radius: 0;
  text-shadow: 3px 3px 0 #000;
  user-select: text;
  -webkit-user-select: text;
}
.name input::placeholder { color: rgba(255, 255, 255, 0.55); }
.name input:focus { outline: none; }

#r-sponsors .sponsor-chip { all: unset; color: var(--yellow) !important; background: none !important; cursor: pointer; }
#r-sponsors .sponsor-chip + .sponsor-chip::before { content: ' · '; color: #fff; }
#r-sponsors .sponsor-chip img { display: none; }

footer.links { position: fixed; left: 0; right: 0; bottom: 12px; text-align: center; font: 700 calc(13px * var(--fs)) var(--font); color: #fff; text-shadow: var(--outline-sm); }
footer.links a { color: #fff; text-decoration: none; padding: 4px 6px; }
footer.links a:hover { color: var(--yellow); }
.presented b, .presented a { color: var(--yellow); text-decoration: none; }
.line.presented { font-size: 18px; margin-top: 14px; overflow-wrap: anywhere; }
.scores li.sponsored .who::after { content: 'SPONSORED'; display: block; font-size: 0.55em; color: var(--orange); }
.scores li.sponsored { counter-increment: none; }
.scores li.sponsored::before { content: '★'; color: var(--orange); }
.scores li.sponsored a { color: var(--yellow); text-decoration: none; }

/* ------------------------------------------------------------------ highscores */
.tabs { display: flex; justify-content: center; gap: 24px; margin-bottom: 14px; }
.tab { font: 700 calc(24px * var(--fs)) var(--font); color: rgba(255, 255, 255, 0.6); text-shadow: var(--outline-sm); }
.tab.active { color: var(--yellow); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.scores { list-style: none; counter-reset: r; margin: 0 auto 10px; padding: 0; width: min(460px, 86vw); }
.scores li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  gap: 10px;
  padding: 3px 0;
  font: 700 calc(clamp(14px, 2.4vw, 20px) * var(--fs)) var(--font);
  text-align: left;
  text-shadow: var(--outline-sm);
}
.scores li::before { content: counter(r) '.'; color: var(--yellow); }
.scores li:nth-child(-n + 3) .pts { color: var(--yellow); }
.scores .who small { display: block; font-size: 0.6em; color: rgba(255, 255, 255, 0.75); margin-top: 2px; }
.scores .empty { display: block; text-align: center; }
.scores .empty::before { content: none; }

/* ------------------------------------------------------------------ loading */
.load { margin: 0 0 12px; font: 700 calc(24px * var(--fs)) var(--font); text-shadow: var(--outline-sm); }
.bar { width: min(360px, 70vw); height: 22px; margin: 0 auto; background: #000; padding: 4px; }
#load-bar { height: 100%; width: 100%; transform-origin: left; transform: scaleX(0.02); background: var(--yellow); transition: transform 0.2s steps(6); }

/* ------------------------------------------------------------------ corner text buttons */
#hud-buttons { position: fixed; top: 14px; right: 18px; display: flex; gap: 18px; z-index: 20; }
.tb { font: 700 calc(18px * var(--fs)) var(--font); color: var(--white); text-shadow: var(--outline-sm); }
.tb:hover { color: var(--yellow); }
.tb.off { color: rgba(255, 255, 255, 0.45); text-decoration: line-through; text-decoration-thickness: 3px; }
#btn-pause { display: none; }
body.playing #hud-buttons { display: none; }
body.is-touch.playing #hud-buttons { display: flex; top: auto; bottom: 18px; right: auto; left: 50%; transform: translateX(-50%); }
body.is-touch.playing #btn-pause { display: block; font-size: calc(26px * var(--fs)); }
body.is-touch.playing #btn-ambience, body.is-touch.playing #btn-sfx { display: none; }
body[data-screen='loading'] #hud-buttons { display: none; }

#btn-reload {
  position: fixed;
  left: 18px;
  bottom: 14px;
  display: none;
  padding: 10px 6px;
  font: 700 calc(30px * var(--fs)) var(--font);
  color: var(--white);
  text-shadow: var(--outline);
  z-index: 20;
}
#btn-reload:active { color: var(--yellow); transform: translate(2px, 2px); }
body.is-touch.playing #btn-reload { display: block; }

/* ------------------------------------------------------------------ toast */
#toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  font: 700 calc(18px * var(--fs)) var(--font);
  color: var(--white);
  text-shadow: var(--outline-sm);
  text-align: center;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
}
#toast.show { opacity: 1; }
#toast b { color: var(--yellow); margin-right: 8px; }
body.is-touch.playing #toast { bottom: 90px; }

@media (max-height: 460px) {
  footer.links { display: none; }
  .logo { width: min(620px, 80vw, 72vh); margin-bottom: 16px; }
  .mi { font-size: calc(28px * var(--fs)); padding: 1px 14px; }
  nav { gap: 0; margin: 4px 0; }
  .big { font-size: calc(64px * var(--fs)); }
  h2 { font-size: calc(36px * var(--fs)); margin-bottom: 10px; }
  .line.dim { margin-top: 8px; }
}
.board-fine a { color: inherit; }
.help-touch { display: none; }
body.is-touch .help-touch { display: block; }
body.is-touch .help-mouse { display: none; }