/* Runekin · css/base.css — reset, helpers de tipo, primitivos (.bs-*), slab wipe da troca de tela, casca (.app, appbar).
   Fatia do antigo style.css (linhas 117–313); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ RESET ============ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c2); outline-offset: 2px; }
html, body { height: 100%; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  background: var(--paper);
  background-image: var(--dots-paper);
  background-size: 5px 5px;
  font-synthesis: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;

}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
button[disabled] { cursor: not-allowed; }
img { max-width: 100%; }
a { color: inherit; }
.starfield { display: none; }
#runekin-shell { display: contents; }

/* page grounds per screen (nav.js sets body[data-screen]) */
body[data-screen="home"]       { background-color: var(--c2); background-image: var(--dots-paper); }
body[data-screen="dex"],
body[data-screen="scanner"],
body[data-screen="creditos"]   { background-color: var(--ink); background-image: var(--dots-ink); color: #fff; }
body[data-screen="rogue"]      { background-color: var(--ink); background-image: none; color: #fff; }

/* ============ TYPE HELPERS ============ */
.bs-display, .bs-h1, .bs-h2, .bs-h3, .bs-label, .bs-chip, .bs-btn, .bs-tile, .bs-cta {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
}
.bs-h1 { font-size: 48px; line-height: .88; letter-spacing: 0; }
.bs-h2 { font-size: 28px; line-height: .95; }
.bs-h3 { font-size: 22px; line-height: 1; }
.bs-label { font-size: 13px; letter-spacing: 3px; }
.bs-mono { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.bs-body { font-family: var(--body); font-size: 12px; line-height: 1.45; }
.bs-muted { color: var(--muted); }

/* ============ PRIMITIVES ============ */
/* halftone overlays */
.bs-dots-paper { background-image: var(--dots-paper); background-size: 5px 5px; }
.bs-dots-ink   { background-image: var(--dots-ink);   background-size: 5px 5px; }

/* slabs */
.bs-slab { position: absolute; pointer-events: none; }
.bs-slab.hdr    { left: 0; right: 0; top: 0; background: var(--ink); clip-path: var(--e-hdr); }
.bs-slab.foot   { left: 0; right: 0; bottom: 0; background: var(--ink); clip-path: var(--e-foot); }
.bs-slab.stripe { background: var(--c1); clip-path: var(--e-stripe); transform: rotate(-8deg); }

/* chips: small uppercase tags (13–16px) */
.bs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 14px; letter-spacing: 2px; line-height: 1.2;
  background: #fff; color: var(--ink); clip-path: var(--e-chip);
  white-space: nowrap;
}
.bs-chip.ink   { background: var(--ink); color: #fff; }
.bs-chip.paper { background: var(--paper); }
.bs-chip.c2    { background: var(--c2); color: var(--ink); }
.bs-chip.c1    { background: var(--c1); color: var(--ink); }
.bs-chip.c3    { background: var(--c3); color: #fff; }
/* outline chips are not clipped (a clipped outline loses its corner) */
.bs-chip.line  { background: transparent; clip-path: none; border: 2px solid currentColor; padding: 2px 10px; }
.bs-chip.sq    { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 16px; letter-spacing: 0; }
.bs-chip.sq svg { width: 18px; height: 18px; fill: currentColor; }

/* buttons: the sticker press.
   The face and the shadow are pseudo-elements so the clip-path never cuts the
   drop shadow (a clipped element clips its own filter). --face / --sh / --sx --sy
   drive color and offset; :active collapses the face onto its shadow. */
.bs-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  font-size: 20px; letter-spacing: 2px; line-height: 1;
  color: #fff; --face: var(--ink); --sh: transparent; --sx: 4px; --sy: 4px; --clip: var(--e-btn-a);
  transition: transform .08s ease;
  white-space: nowrap;
}
.bs-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); clip-path: var(--clip); }
.bs-btn::after  { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sh); clip-path: var(--clip); transform: translate(var(--sx), var(--sy)); transition: transform .08s ease; }
.bs-btn.b     { --clip: var(--e-btn-b); }
.bs-btn.chip  { --clip: var(--e-chip); }
.bs-btn.white { --face: #fff; color: var(--ink); }
.bs-btn.paper { --face: var(--paper); color: var(--ink); }
.bs-btn.c1    { --face: var(--c1); color: var(--ink); }
.bs-btn.c2    { --face: var(--c2); color: var(--ink); }
.bs-btn.c3    { --face: var(--c3); color: #fff; }
.bs-btn.line  { --face: transparent; border: 3px solid currentColor; }
.bs-btn.line::before, .bs-btn.line::after { clip-path: none; }
.bs-btn.sm    { min-height: 36px; padding: 6px 12px; font-size: 15px; letter-spacing: 1px; }
.bs-btn.xs    { min-height: 30px; padding: 4px 10px; font-size: 14px; letter-spacing: 1px; }
.bs-btn.block { display: flex; width: 100%; }
.bs-btn[disabled] { opacity: .45; }
.bs-btn.line[disabled] { color: var(--disabled); opacity: 1; }
/* the CTA sticker: tilt + hard shadow */
.bs-cta { --sh: #fff; transform: rotate(-2deg); }
.bs-cta.sh-ink { --sh: var(--ink); }
.bs-cta.sh-c1  { --sh: var(--c1); --sx: 5px; --sy: 5px; }
.bs-cta.sh-c2  { --sh: var(--c2); --sx: 5px; --sy: 5px; }
.bs-cta.big { padding: 16px 22px; font-size: 40px; }
.bs-cta.t1 { transform: rotate(-1deg); }
.bs-cta.t0 { transform: none; }
.bs-btn:active:not([disabled]) { transform: translate(var(--sx), var(--sy)); }
.bs-btn:active:not([disabled])::after { transform: none; }
.bs-cta:active:not([disabled]) { transform: rotate(-2deg) translate(var(--sx), var(--sy)); }
.bs-cta.t1:active:not([disabled]) { transform: rotate(-1deg) translate(var(--sx), var(--sy)); }
.bs-cta.t0:active:not([disabled]) { transform: translate(var(--sx), var(--sy)); }

/* cards: white cutouts. Same face/shadow trick (content stays unclipped-safe). */
.bs-card {
  position: relative; isolation: isolate; color: var(--ink);
  --face: #fff; --sh: transparent; --sx: 4px; --sy: 4px; --clip: var(--e-card);
}
.bs-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); clip-path: var(--clip); }
.bs-card::after  { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sh); clip-path: var(--clip); transform: translate(var(--sx), var(--sy)); }
.bs-card.paper  { --face: var(--paper); }
.bs-card.ink    { --face: var(--ink); color: #fff; }
.bs-card.dim    { --face: var(--paper-dim); color: #777; }
.bs-card.chip   { --clip: var(--e-chip); }
.bs-card.sh-ink { --sh: var(--ink); }
.bs-card.sh-white { --sh: #fff; }
.bs-card.sh-c1  { --sh: var(--c1); --sx: 6px; --sy: 6px; }
.bs-card.sh-c2  { --sh: var(--c2); --sx: 6px; --sy: 6px; }
.bs-card.sh-c3  { --sh: var(--c3); --sx: 6px; --sy: 6px; }
.bs-card.sel    { transform: rotate(-1.5deg); }
/* pressable card */
button.bs-card { transition: transform .08s ease; }
button.bs-card:active:not([disabled]) { transform: translate(var(--sx), var(--sy)); }
button.bs-card.sel:active:not([disabled]) { transform: rotate(-1.5deg) translate(var(--sx), var(--sy)); }
button.bs-card:active:not([disabled])::after { transform: none; }

/* HP bars */
.bs-hp { display: block; position: relative; height: 8px; background: var(--paper-dim); border: 2px solid var(--ink); overflow: hidden; }
.bs-hp > i { display: block; height: 100%; background: var(--ink); transition: width .35s ease; }
.bs-hp > i.low { background: var(--c3); }
.bs-hp.on-ink { background: var(--ink); border-color: #fff; }
.bs-hp.on-ink > i { background: #fff; }
.bs-hp.on-ink > i.low { background: var(--c3); }
.bs-hp.big { height: 14px; border-width: 3px; background: #fff; }

/* the 5×5 sigil grid — square cells, ink frame, NEVER clipped */
.bs-grid { display: grid; grid-template-columns: repeat(5, var(--cell, 30px)); gap: 3px; padding: 5px; background: var(--ink); clip-path: none !important; }
.bs-grid > * { width: var(--cell, 30px); height: var(--cell, 30px); }
.bs-grid.paper { background: var(--paper); }

/* stat box (border 3px, number + label) */
.bs-stat { border: 3px solid currentColor; padding: 6px 4px; text-align: center; }
.bs-stat b { display: block; font: 400 24px/1 var(--display); }
.bs-stat span { display: block; font: 400 10px var(--display); letter-spacing: 2px; text-transform: uppercase; opacity: .7; margin-top: 2px; }

/* ============ SCREEN TRANSITION: slab wipe ============ */
.bs-wipe {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: var(--c1); clip-path: polygon(0 0,18% 0,0 100%,0 100%);
  transform: translateX(-120%); opacity: 0;
}
.bs-wipe.go { animation: bsWipe .18s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bsWipe {
  0%   { opacity: 1; transform: translateX(-120%); clip-path: polygon(0 0,18% 0,0 100%,0 100%); }
  50%  { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  100% { opacity: 1; transform: translateX(120%); clip-path: polygon(82% 0,100% 0,100% 100%,100% 100%); }
}

/* ============ SHELL ============ */
.app {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto; min-height: 100dvh;
  padding: 0 0 env(safe-area-inset-bottom);
}
.screen { display: none; position: relative; padding: calc(56px + env(safe-area-inset-top)) 24px 90px; min-height: 100dvh; }
.screen.is-active { display: block; }
.screen > * { position: relative; z-index: 1; }
.screen > .bs-slab, .screen > .nb-stripe { position: absolute; z-index: 0; }

/* appbar: transparent row over the screen's own header slab */
.appbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: calc(16px + env(safe-area-inset-top)) 24px 0;
  color: #fff;
}
.appbar-back { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: #fff; color: var(--ink); font: 400 22px/1 var(--display); clip-path: var(--e-chip); }
.appbar-title { font: 400 15px var(--display); letter-spacing: 3px; text-transform: uppercase; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-extra { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* dark text on light headers */
body[data-screen="scanner"] .appbar { color: var(--ink); }
body[data-screen="scanner"] .appbar-back { background: var(--ink); color: #fff; }
body[data-screen="rogue"] .appbar { display: none; }

/* i18n guard */
.i18n-wait .app { visibility: hidden; }