/* Reset, document chrome and layout primitives. */

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

html {
  font-size: var(--fs-root);
  -webkit-text-size-adjust: 100%;
  background: var(--ink-900);
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(245, 182, 60, 0.10), transparent 62%),
    linear-gradient(180deg, var(--ink-850) 0%, var(--ink-900) 100%);
  background-attachment: fixed;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-ready .boot {
  display: none;
}

img,
svg,
canvas {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: not-allowed;
}

h1, h2, h3, h4, p, dl, dd, ol, ul {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

a {
  color: var(--gold-400);
}

:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 6px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: calc(var(--safe-top) + 6px);
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--gold-500);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------- boot state -- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-4);
  background:
    radial-gradient(90% 60% at 50% 22%, rgba(245, 182, 60, 0.16), transparent 70%),
    var(--ink-900);
}

.boot__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.boot__bar {
  width: 148px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-600);
  overflow: hidden;
}

.boot__bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  animation: boot-slide 1.4s var(--ease) infinite;
}

.boot__noscript {
  max-width: 34ch;
  text-align: center;
  color: var(--alert-500);
  font-size: var(--fs-sm);
}

.boot-error {
  max-width: 40ch;
  margin: 28vh auto;
  padding: 0 var(--s-5);
  text-align: center;
  color: var(--bone-300);
  line-height: 1.6;
}

@keyframes boot-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

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

.app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--topbar-h);
  padding:
    calc(var(--safe-top) + var(--s-2))
    calc(var(--safe-right) + var(--s-4))
    var(--s-2)
    calc(var(--safe-left) + var(--s-4));
  background: linear-gradient(180deg, rgba(8, 10, 15, 0.97), rgba(8, 10, 15, 0.82));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.topbar__left { justify-self: start; display: flex; gap: var(--s-2); }
.topbar__right { justify-self: end; display: flex; gap: var(--s-2); align-items: center; }

.topbar__centre {
  display: grid;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.topbar__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}

.topbar__subtitle {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}

.iconbtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  color: var(--bone-100);
  background: var(--ink-700);
  border: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease);
}

.iconbtn:hover { background: var(--ink-600); }
.iconbtn:active { transform: scale(0.96); }

.wallet {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px 6px 8px;
  border-radius: var(--r-pill);
  background: var(--ink-700);
  border: 1px solid var(--border);
}

.wallet__tier {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold-400);
}

.view {
  min-width: 0;
  padding-bottom: var(--s-6);
}

.view--enter {
  animation: view-in var(--dur) var(--ease-out);
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.app--immersive .view {
  padding-bottom: 0;
}

.tabbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-1);
  padding:
    var(--s-2)
    calc(var(--safe-right) + var(--s-2))
    calc(var(--safe-bottom) + var(--s-2))
    calc(var(--safe-left) + var(--s-2));
  background: linear-gradient(180deg, rgba(8, 10, 15, 0.86), rgba(5, 7, 12, 0.99));
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

.tab {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 7px 4px;
  border-radius: var(--r-md);
  color: var(--slate-400);
  min-height: 48px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.tab__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tab:hover { color: var(--bone-300); }

.tab.is-active {
  color: var(--gold-400);
  background: var(--accent-soft);
}

/* ------------------------------------------------------------ primitives -- */

.page {
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding: var(--s-4) calc(var(--safe-right) + var(--s-4)) var(--s-6) calc(var(--safe-left) + var(--s-4));
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.pad {
  padding: var(--s-5);
}

.stack {
  display: grid;
  gap: var(--s-2);
}

.grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

.grid--1 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 380px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat-row {
  display: grid;
  gap: var(--s-2);
  /* Two even columns on a phone so a four-tile row never leaves an orphan. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 520px) {
  .stat-row {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* A plain action block for the end of a page. Use this over .sticky-actions
   whenever there are more than two buttons - three pinned buttons cover most of
   a phone screen. */
.page-actions {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-2);
}

.sticky-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: var(--s-2);
  /* Scrimmed so the pinned actions read as a bar rather than floating over
     whatever text happens to be behind them. */
  margin: 0 calc(var(--s-4) * -1);
  padding: var(--s-4) var(--s-4) var(--s-3);
  background: linear-gradient(180deg, rgba(8, 10, 15, 0) 0%, rgba(8, 10, 15, 0.92) 38%, var(--ink-850) 100%);
  z-index: 10;
}

.note,
.build-note,
.reset-note,
.credits-note {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.build-note {
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

.warn {
  color: var(--gold-400);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.error-text {
  color: var(--alert-500);
}

.export {
  max-height: 44vh;
  overflow: auto;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--ink-900);
  font-family: var(--font-numeric);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.chev {
  color: var(--slate-500);
  transform: rotate(180deg);
}