/* Shared shell: body, app frame, cards, buttons, tabbar, toast.
   Design tokens + pixel primitives live in theme.css (loaded first). */

html { background: var(--bg); }
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--ink);
  font-family: "Pixelify Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: none;
  overscroll-behavior: none;
}

h1, h2, h3 { font-weight: 700; letter-spacing: 0.02em; margin: 0; }

#app {
  padding: 16px 16px calc(var(--tab-h) + 36px);
  min-height: 100vh;
  box-sizing: border-box;
  max-width: 520px;
  margin: 0 auto;
}

.view.hidden,
.hidden { display: none !important; }

/* Tabular numbers everywhere for clean stat alignment. */
.num, .breed, .mood { font-variant-numeric: tabular-nums; }

/* ---------- Shared card surface -> pixel panel ---------- */
.cat-stage,
.death-overlay,
.memorial-card,
.needs,
.details,
.adopt,
.feed-picker,
.wallet-card,
.cats-capacity-card,
.cat-card,
.level-card,
.inventory-card,
.lb-row,
.shop-item {
  position: relative;
  background: var(--panel);
  color: var(--ink);
  box-shadow:
    0 calc(-1 * var(--u)) 0 0 var(--line),
    0 var(--u) 0 0 var(--line),
    calc(-1 * var(--u)) 0 0 0 var(--line),
    var(--u) 0 0 0 var(--line),
    inset 0 var(--u) 0 0 var(--hi),
    inset 0 calc(-1 * var(--u)) 0 0 var(--lo),
    calc(2 * var(--u)) calc(2 * var(--u)) 0 calc(-1 * var(--u)) var(--drop);
  border-radius: 0;
}

/* Shared section header (Shop, Cats, Planet, Me). */
.shop-header,
.me-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 2px 16px;
}
.shop-header h2,
.me-header h2 { font-size: 20px; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--panel);
  --line: var(--line-soft);
  border-radius: 0;
  padding: 12px 6px;
  transition: transform 60ms steps(2);
  box-shadow:
    0 calc(-1 * var(--u)) 0 0 var(--line),
    0 var(--u) 0 0 var(--line),
    calc(-1 * var(--u)) 0 0 0 var(--line),
    var(--u) 0 0 0 var(--line),
    inset 0 var(--u) 0 0 var(--hi),
    inset 0 calc(-2 * var(--u)) 0 0 rgba(0, 0, 0, 0.06),
    calc(1 * var(--u)) calc(2 * var(--u)) 0 calc(-1 * var(--u)) var(--drop);
}
.btn:active {
  transform: translateY(var(--u));
  box-shadow:
    0 calc(-1 * var(--u)) 0 0 var(--line),
    0 var(--u) 0 0 var(--line),
    calc(-1 * var(--u)) 0 0 0 var(--line),
    var(--u) 0 0 0 var(--line),
    inset 0 var(--u) 0 0 rgba(0, 0, 0, 0.08);
}
.btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  --line: var(--accent-line);
}
[data-busy] .btn,
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn.ghost {
  background: transparent;
  box-shadow: none;
  color: var(--ink-soft);
}

/* ---------- Tabbar ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tab-h);
  background: var(--panel);
  display: flex;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow:
    0 calc(-1 * var(--u)) 0 0 var(--line),
    inset 0 var(--u) 0 0 var(--hi);
}
.tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 3px;
  transition: transform 60ms steps(2);
}
.tab span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.tab .ico { width: 26px; height: 26px; }  /* color follows .tab via currentColor */
.tab.active { color: var(--ink); }
.tab:active { transform: translateY(1px); }

/* Inline icon inside buttons (actions, etc.) */
.btn .ico { width: 18px; height: 18px; vertical-align: -0.2em; }

/* ---------- Toast (pixel dialog) ---------- */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tab-h) + 18px);
  background: var(--panel);
  color: var(--ink);
  --line: var(--accent-line);
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  z-index: 10;
  max-width: 80%;
  text-align: center;
  box-shadow:
    0 calc(-1 * var(--u)) 0 0 var(--line),
    0 var(--u) 0 0 var(--line),
    calc(-1 * var(--u)) 0 0 0 var(--line),
    var(--u) 0 0 0 var(--line),
    inset 0 var(--u) 0 0 var(--hi),
    calc(2 * var(--u)) calc(2 * var(--u)) 0 calc(-1 * var(--u)) var(--drop);
}