/* ==========================================================================
   Cartridge Tycoon — layout and structure

   THE RULE
   --------
   This file contains no colours, font families, radii, shadows or effect
   intensities. Every one of those reads a CSS custom property that
   src/config/theme.js defines per era. What lives here instead is *structure*:
   spacing, sizing, flow, breakpoints — the things that stay the same whether
   the studio is in 1983 or 2010.

   Bare numbers you will see (padding, gaps, grid columns, breakpoints) are
   layout, not look. They are era-independent on purpose: the interface should
   modernise, not reflow, when an era changes. A reflow would break the illusion
   that you are looking at the same studio through better hardware.

   Layout is mobile-first: a single scrolling column with a sticky HUD above and
   a sticky tab bar below. From 720px the content simply gets more room.
   ========================================================================== */

/* ----------------------------------------------------------------- reset */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-ui);
  font-size: var(--font-size);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);

  /*
    The era swap is a single attribute change, so the browser can tween these
    for free. In the 8-bit era --t-slow is 0ms, which makes the change snap —
    correct for the period, and it means the celebratory glitch overlay is
    doing all the work rather than a slow colour fade.
  */
  transition:
    background-color var(--t-slow) var(--ease),
    color var(--t-slow) var(--ease);

  /* The page itself never scrolls; #stage does. Keeps the HUD truly fixed. */
  overflow: hidden;
}

/*
  A whole-page dither, at zero opacity from the 32-bit era onward. It is what
  stops the early eras' flat fills from looking like modern flat design.
*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--dither-opacity);
  background-image: var(--panel-texture);
  background-size: 4px 4px;
}

h1, h2, h3, p, dl, dd, dt, figure {
  margin: 0;
}

button,
input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Big tap targets everywhere, and no double-tap zoom delay on them. */
button,
input[type='range'],
.tab {
  touch-action: manipulation;
  min-height: 44px;
}

canvas {
  /*
    Pixelated in the early eras, smoothly filtered later. Set here so every
    canvas in the game inherits the era's rendering mode without asking.
  */
  image-rendering: var(--image-rendering);
  display: block;
}

/* Visible keyboard focus in every era, sized from the era's border width. */
:where(button, input, [tabindex]):focus-visible {
  outline: max(2px, var(--border-width)) solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- shell */

#shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;

  /* Clear an iPhone notch and home indicator. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ------------------------------------------------------------------- HUD */

#hud {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 12px;

  background: var(--panel);
  background-image: var(--panel-texture);
  border-bottom: var(--border-width) var(--border-style) var(--border-color);
  box-shadow: var(--shadow);

  transition:
    background-color var(--t-slow) var(--ease),
    border-color var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease);
}

.hud__identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hud__studio-name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  text-transform: var(--text-transform);
  text-shadow: var(--text-shadow);

  /* Long studio names must not push the stats off the row. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46vw;
}

.hud__stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.stat__label {
  font-size: 0.72em;
  color: var(--ink-dim);
  text-transform: var(--text-transform);
  white-space: nowrap;
}

.stat__value {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  white-space: nowrap;
  /* Numbers that change every tick must not make the row jitter. */
  font-variant-numeric: tabular-nums;
}

.stat__value--money {
  color: var(--accent);
}

/* ----------------------------------------------------------------- stage */

#stage {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 12px 20px;
}

/* ---------------------------------------------------------------- tabbar */

#tabbar {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 6px;

  background: var(--panel);
  background-image: var(--panel-texture);
  border-top: var(--border-width) var(--border-style) var(--border-color);

  transition:
    background-color var(--t-slow) var(--ease),
    border-color var(--t-slow) var(--ease);
}

.tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  cursor: pointer;

  background: transparent;
  color: var(--ink-dim);
  border: var(--border-width) var(--border-style) transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 0.82em;
  text-transform: var(--text-transform);

  /* Five labels have to fit across a 320px phone. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.tab:hover:not(.is-active) {
  color: var(--ink);
}

.tab.is-active {
  background: var(--panel-raised);
  color: var(--ink);
  border-color: var(--border-color);
  box-shadow: var(--shadow-inset);
}

/*
  A dot on a tab that has something waiting — currently only Tech, when
  research is affordable. Research points arrive silently at the end of a
  project, several screens away from the tree, and without a nudge players
  reliably forget the tab exists.
*/
.tab.has-badge::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  vertical-align: middle;
  background: var(--accent);
  border-radius: 50%;
}

/* ---------------------------------------------------------- small screens */

/*
  The early eras' fonts are unusually wide — Silkscreen plus 0.08em tracking
  is close to double the advance width of a normal UI sans. On a 375px phone
  that pushes the HUD onto three rows and truncates every tab label, so the
  narrow breakpoint tightens type and spacing rather than hiding information.
*/
@media (max-width: 559px) {
  #hud {
    font-size: 0.78em;
    gap: 6px 12px;
    padding: 8px 10px;
  }

  .hud__stats {
    /* A predictable 4-up grid beats flex-wrap here: it keeps the HUD exactly
       two rows tall whatever the values happen to be. */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 8px;
    width: 100%;
  }

  .stat__label {
    font-size: 0.68em;
  }

  .stat__value {
    font-size: 0.92em;
    /* Values are allowed to shrink out of their column rather than force the
       page to scroll sideways. */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tab {
    font-size: 0.66em;
    letter-spacing: 0;
    padding: 8px 2px;
  }
}

/* ------------------------------------------------------------ wider screens */

@media (min-width: 720px) {
  #hud {
    padding: 12px 20px;
  }

  #stage {
    padding: 20px;
    gap: 20px;
  }

  .hud__studio-name {
    max-width: none;
  }

  .hud__stats {
    gap: 22px;
  }

  #tabbar {
    /* A centred pill row rather than full-width buttons, once there is room. */
    justify-content: center;
    gap: 6px;
    padding: 8px;
  }

  .tab {
    flex: 0 0 auto;
    min-width: 120px;
    padding: 8px 18px;
  }
}