/*
 * style.css - the page, the stage and the DOM overlay of BULL RUN.
 *
 * The overlay shares the game's pixel grid: js/ui.js sets --px (CSS px per logical game px) on
 * #ui and positions everything in whole logical px; borders, edges and focus rings below are
 * multiples of --px. The --c-* colours are overwritten from js/palette.js when the UI starts
 * (the values here are the same palette, used until then).
 */

/* ---- page ------------------------------------------------------------------------------- */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #070a18;
  color: #f6f8ff;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

noscript {
  position: fixed;
  left: 0;
  right: 0;
  top: 45%;
  z-index: 10;
  text-align: center;
  font: 16px/1.4 ui-monospace, Consolas, "Courier New", monospace;
  color: #f6f8ff;
}

/* ---- stage and canvas ------------------------------------------------------------------- */

#stage {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #070a18;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

#game {
  position: absolute;
  display: block;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* ---- overlay root ----------------------------------------------------------------------- */

#ui {
  --px: 3px;
  --c-ink: #04050c;
  --c-text: #f6f8ff;
  --c-dim: #93a8ea;
  --c-panel: #0d1330;
  --c-panel-light: #162048;
  --c-border: #5a74c4;
  --c-line: #223065;
  --c-track: #34488c;
  --c-gold: #ffd84a;
  --c-amber: #f29a1f;
  --c-bronze: #a9530f;
  --c-cyan: #4fe3ff;
  --c-green: #1fe58f;
  --c-green-light: #b3ffd6;
  --c-green-dark: #0a6b47;
  --c-night0: #070a18;
  --c-night1: #0d1330;
  --c-night2: #162048;
  --c-night3: #223065;
  --c-night4: #34488c;
  --c-night5: #5a74c4;
  --c-slate: #666f96;
  --c-white: #f6f8ff;
  --c-gold-light: #fff4b0;
  --c-scrim: rgba(4, 5, 12, 0.8);

  position: absolute;
  overflow: hidden;
  pointer-events: none;            /* taps on empty parts fall through to the stage */
  color: var(--c-text);
  /* the fallback for text the pixel font cannot draw */
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, "DejaVu Sans Mono", "Courier New", monospace;
  font-weight: 700;
  -webkit-font-smoothing: none;
}

.ui-layer,
.scr,
.scrim {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.scrim {
  background: var(--c-scrim);
}

/* laid-out boxes: js/ui.js sets left / top / width / height in multiples of --px */
.g,
.pt,
.ic,
.bar,
.rule,
.grass {
  position: absolute;
  display: block;
}

/* ---- pixel text and icons --------------------------------------------------------------- */

.pt canvas,
.ic canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* a text box whose canvas is replaced while it lives (the counting score) */
.pt--free canvas {
  position: absolute;
  top: 0;
  width: auto;
  height: auto;
}

/* system-font fallback for strings with characters outside the pixel font */
.pt--plain {
  overflow: hidden;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  letter-spacing: 0;
  text-shadow: var(--px) var(--px) 0 var(--c-ink);
}

/* the real string of a pixel text, for screen readers */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.blink {
  animation: ui-blink 1.1s steps(1, end) infinite;
}

@keyframes ui-blink {
  0% { opacity: 1; }
  64% { opacity: 0; }
  100% { opacity: 0; }
}

/* ---- buttons and links ------------------------------------------------------------------ */

.btn,
.link {
  position: absolute;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* the invisible hit area: grows the target to 44 x 44 CSS px where the drawn panel is smaller */
.btn::before,
.link::before,
.cell::before {
  content: "";
  position: absolute;
  left: calc(0px - var(--hl, 0px));
  top: calc(0px - var(--ht, 0px));
  right: calc(0px - var(--hr, 0px));
  bottom: calc(0px - var(--hb, 0px));
}

.btn > *,
.link > *,
.cell > * {
  pointer-events: none;
}

/* The panel: a 1-px border with notched corners (two crossed bars), the fill inside it and a
   1-px darker edge under it. */
.btn {
  --b-fill: var(--c-panel);
  --b-top: var(--c-panel-light);
  --b-border: var(--c-border);
  --b-edge: var(--c-line);
}

.btn-edge,
.btn-fill {
  position: absolute;
  display: block;
}

.btn-edge {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.btn-edge::before,
.btn-edge::after {
  content: "";
  position: absolute;
  background: var(--b-border);
}

.btn-edge::before {
  left: var(--px);
  right: var(--px);
  top: 0;
  bottom: 0;
  box-shadow: 0 var(--px) 0 var(--b-edge);
}

.btn-edge::after {
  left: 0;
  right: 0;
  top: var(--px);
  bottom: var(--px);
}

.btn-fill {
  left: var(--px);
  top: var(--px);
  right: var(--px);
  bottom: var(--px);
  background: var(--b-fill);
  box-shadow: inset 0 var(--px) 0 var(--b-top);
}

.btn--primary {
  --b-fill: var(--c-green);
  --b-top: var(--c-green-light);
  --b-border: var(--c-green-dark);
  --b-edge: var(--c-green-dark);
}

.btn--ghost {
  --b-border: var(--c-amber);
  --b-edge: var(--c-bronze);
}

/* selected chip / tab: gold panel, ink label */
.btn--on {
  --b-fill: var(--c-gold);
  --b-top: #fff4b0;
  --b-border: var(--c-bronze);
  --b-edge: var(--c-bronze);
}

/* a control that answers with a cue or a toast only (locked chip, LOCKED, EQUIPPED, SHORT) */
.btn--dim {
  --b-fill: var(--c-panel);
  --b-top: var(--c-panel);
  --b-border: var(--c-line);
  --b-edge: #162048;
  cursor: default;
}

@media (hover: hover) {
  .btn:hover {
    --b-fill: var(--c-panel-light);
    --b-top: var(--c-line);
  }

  .btn--primary:hover {
    --b-fill: var(--c-green-light);
    --b-top: var(--c-text);
  }

  .btn--on:hover {
    --b-fill: var(--c-gold);
    --b-top: #fff4b0;
  }

  .btn--dim:hover {
    --b-fill: var(--c-panel);
    --b-top: var(--c-panel);
  }
}

.btn:active {
  transform: translateY(var(--px));
}

.btn--dim:active {
  transform: none;
}

.btn:active .btn-edge::before {
  box-shadow: none;
}

.btn--dim:active .btn-edge::before {
  box-shadow: 0 var(--px) 0 var(--b-edge);
}

/* the focus ring: one logical px of gold (never thinner than 2 CSS px, so it survives small
   embeds and fractional scales), one logical px away from the panel */
.btn:focus-visible,
.btn.is-focus,
.link:focus-visible,
.link.is-focus,
.cell:focus-visible,
.cell.is-focus {
  outline: var(--px) solid var(--c-gold);
  outline: max(var(--px), 2px) solid var(--c-gold);
  outline-offset: var(--px);
}

.link-line {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--px);
  background: var(--c-track);
}

@media (hover: hover) {
  .link:hover .link-line {
    background: var(--c-gold);
  }
}

/* ---- small parts ------------------------------------------------------------------------ */

/* the rank progress bar */
.bar {
  box-sizing: border-box;
  border: var(--px) solid var(--c-track);
  background: var(--c-panel);
}

.bar > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--c-cyan);
}

.rule {
  background: var(--c-line);
}

.toast {
  box-sizing: border-box;
  border: var(--px) solid var(--c-gold);
  background: var(--c-panel);
  box-shadow: 0 var(--px) 0 var(--c-ink);
}

/* ---- v2: hub, shop, badges, daily, game over -------------------------------------------- */
/* Frames below are inset box-shadows, not borders, so children keep their logical coordinates. */

.scr--hub,
.scr--daily {
  overflow: hidden;
}

/* a finished progress bar (mission done) */
.bar--done > i {
  background: var(--c-green);
}

/* the notice dot on DAILY / SHOP / MENU: 4 x 4 ink with a 2 x 2 gold centre */
.pip {
  position: absolute;
  display: block;
  background: var(--c-ink);
}

.pip::after {
  content: "";
  position: absolute;
  left: var(--px);
  top: var(--px);
  right: var(--px);
  bottom: var(--px);
  background: var(--c-gold);
}

/* the mode box (X2 / X5 / X10 / DAILY #n): ink, 1-px frame in the tier colour (--mb) */
.mbadge {
  background: var(--c-ink);
  box-shadow: inset 0 0 0 var(--px) var(--mb, var(--c-gold));
}

/* a mission card */
.card {
  background: var(--c-night1);
  box-shadow: inset 0 0 0 var(--px) var(--c-night3);
}

.card--done {
  box-shadow: inset 0 0 0 var(--px) var(--c-green-dark);
}

/* the preview box of the shop and the badges, with its strip of grass */
.preview {
  background: var(--c-night2);
  box-shadow: inset 0 0 0 var(--px) var(--c-night3);
}

.grass {
  background: var(--c-green-dark);
  box-shadow: inset 0 var(--px) 0 var(--c-green);
}

.bull-big canvas.f1 {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

.bull-big.is-blink canvas.f1 {
  visibility: visible;
}

/* a grid cell (shop / badges): 24 x 24, 1-px night3 frame; selected = white frame + night2 line */
.cell {
  position: absolute;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--c-night1);
  box-shadow: inset 0 0 0 var(--px) var(--c-night3);
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.cell--off {
  background: var(--c-night0);
}

.cell.is-sel {
  box-shadow: inset 0 0 0 var(--px) var(--c-white), inset 0 0 0 calc(2 * var(--px)) var(--c-night2);
}

/* the selected cell drawn again beside the name (compact shop): a picture, not a control */
.cell--pic {
  pointer-events: none;
  cursor: default;
}

@media (hover: hover) {
  .cell:hover {
    box-shadow: inset 0 0 0 var(--px) var(--c-night5);
  }

  .cell.is-sel:hover {
    box-shadow: inset 0 0 0 var(--px) var(--c-white), inset 0 0 0 calc(2 * var(--px)) var(--c-night2);
  }
}

/* ---- no animation: reduced motion, screenshots, the dev harness ------------------------- */

.ui--static .blink {
  animation: none;
}

.ui--static .btn:active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .blink {
    animation: none;
  }
}