/* ============================================================
   Runekin · Stylesheet — "Broadsheet" (medieval × brutalism × Persona)
   ------------------------------------------------------------
   - Flat, high-contrast fills. Black ink + paper. One chamber slab
     per screen (--c1/--c2/--c3 follow the owned chamber).
   - No border radius anywhere (device corners only). Borders are
     3px solid ink (or paper on ink). Faux shadow = hard drop-shadow.
   - Type: Staatliches (display, uppercase) · IBM Plex Sans (body) ·
     IBM Plex Mono (numbers/meta).
   - Edges: every slab/button/card is clipped by a polygon kept in a
     CSS variable (chipped by default; torn / clean via data-edges).
     The 5×5 sigil grid is NEVER clipped.
   - Explore (#screen-rogue) is a landscape stage; everything else
     stays portrait.
   - Split into public/css/*.css (tokens, base, home, scanner, buttons,
     notebook, settings, altar, stats, stage, battle, explore, overrides);
     layout.jsx links them in that order — the cascade depends on it.
   ============================================================ */

/* Fontes (Staatliches · IBM Plex Sans · IBM Plex Mono): <link> + preconnect em src/app/layout.jsx —
   um @import aqui encadeava tokens.css → CSS do Google → woff2 e segurava o 1º paint. */

:root {
  /* ====== INK & PAPER ====== */
  --ink:        #111;
  --paper:      #f4eee0;
  --paper-dim:  #ddd;
  --paper-dim2: #d8d2c4;
  --paper-line: #b8b0a0;
  --muted:      #555;   /* muted text on paper */
  --muted-ink:  #bbb;   /* muted text on ink */
  --disabled:   #999;
  --stage:      #1c1c1e;

  /* ====== CHAMBER PALETTE (Aurora default; Sombra via data-chamber) ====== */
  --c1: #fe5000;   /* primary slab */
  --c2: #ffbf3f;   /* secondary slab / CTA */
  --c3: #e4002b;   /* foe / danger */

  /* semantic */
  --heal:  #6aa687;
  --curse: #753bbd;
  --water: #307fe2;
  --grass: #6aa687;

  /* 7 physical piece colors — overwritten at runtime by pieces.js (v6/v7).
     --pc-N = Aurora · --ps-N = Sombra, N = piece id 1..7 */
  --pc-1: #862633; --pc-2: #fe5000; --pc-3: #e4002b; --pc-4: #ffbf3f;
  --pc-5: #f5e1a4; --pc-6: #94450b; --pc-7: #c4d600;
  --ps-1: #753bbd; --ps-2: #2e008b; --ps-3: #e10098; --ps-4: #007377;
  --ps-5: #9bcbeb; --ps-6: #307fe2; --ps-7: #2ad2c9;

  /* ====== TYPE ====== */
  --display: 'Staatliches', 'Impact', 'Arial Narrow', sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ====== HALFTONE ====== */
  --dots-paper: radial-gradient(rgba(0,0,0,.07) 1px, transparent 1.3px);
  --dots-ink:   radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.3px);

  /* ====== EDGES · clean (default; chipped / torn via data-edges) ====== */
  --tilt: 8deg;                     /* every diagonal in the portrait shell */
  --e-hdr:    polygon(0 0,100% 0,100% calc(100% - 14vw),0 100%);
  --e-hdr-up: polygon(0 0,100% 14vw,100% 100%,0 100%);
  --e-stripe: none; --e-btn-a: none; --e-btn-b: none; --e-tile: none; --e-chip: none; --e-card: none;
  --e-foot:   polygon(0 14vw,100% 0,100% 100%,0 100%);
  --e-paper:  polygon(6% 0,100% 0,100% 100%,0 100%);
  --e-slab-l: polygon(0 0,100% 0,78% 100%,0 100%);
  --e-btl-l:  polygon(0 0,100% 0,78% 100%,0 100%);
  --e-btl-r:  polygon(22% 0,100% 0,100% 100%,0 100%);
  --e-vsbar:  none; --e-poster: none;

  /* legacy aliases (inline styles in older modules) */
  --dim: var(--muted);
  --gold: var(--c2);
  --ink-2: var(--ink);

  color-scheme: light;
}

/* Sombra chamber: cool slab colors (set on <html data-chamber> by shell-glue.js) */
:root[data-chamber="sombra"] { --c1: #753bbd; --c2: #2ad2c9; --c3: #e10098; }

/* Edge styles — switch in one place */
:root[data-edges="torn"] {
  --e-hdr:    polygon(0 0,100% 0,100% 70%,96% 73%,93% 69%,88% 74%,84% 70%,79% 76%,74% 72%,70% 78%,64% 75%,59% 81%,54% 78%,49% 84%,44% 82%,40% 88%,35% 85%,30% 91%,25% 89%,20% 95%,15% 92%,10% 98%,5% 96%,0 100%);
  --e-hdr-up: polygon(0 0,5% 4%,10% 2%,15% 8%,20% 5%,25% 11%,30% 9%,35% 15%,40% 12%,44% 18%,49% 16%,54% 22%,59% 19%,64% 25%,70% 22%,74% 28%,79% 24%,84% 30%,88% 26%,93% 31%,96% 27%,100% 30%,100% 100%,0 100%);
  --e-stripe: polygon(0 8%,3% 0,7% 10%,12% 2%,17% 9%,22% 0,28% 8%,33% 1%,39% 9%,44% 2%,50% 10%,55% 0,61% 8%,66% 1%,72% 9%,77% 2%,83% 10%,88% 0,94% 8%,100% 2%,100% 92%,96% 100%,91% 90%,86% 99%,80% 91%,75% 100%,69% 92%,63% 100%,58% 90%,52% 99%,47% 91%,41% 100%,36% 92%,30% 100%,25% 90%,19% 99%,14% 91%,8% 100%,3% 92%,0 100%);
  --e-btn-a:  polygon(0 4%,2% 0,10% 3%,20% 0,31% 4%,42% 1%,55% 3%,67% 0,80% 3%,92% 0,100% 2%,100% 96%,97% 100%,88% 97%,76% 100%,64% 96%,52% 100%,40% 97%,28% 100%,16% 96%,6% 100%,0 97%);
  --e-btn-b:  polygon(0 2%,8% 0,18% 4%,30% 0,42% 3%,55% 0,66% 4%,78% 1%,90% 3%,100% 0,100% 97%,92% 100%,80% 96%,68% 100%,56% 97%,44% 100%,32% 96%,20% 100%,9% 97%,0 100%);
  --e-tile:   polygon(0 0,100% 3%,97% 100%,4% 97%);
  --e-chip:   polygon(0 0,97% 4%,100% 100%,3% 96%);
  --e-card:   polygon(0 6%,6% 0,30% 3%,60% 0,100% 4%,98% 100%,70% 96%,40% 100%,10% 97%,0 100%);
  --e-foot:   polygon(0 50%,4% 44%,9% 52%,15% 40%,21% 48%,27% 36%,33% 44%,39% 32%,45% 40%,51% 28%,57% 36%,63% 24%,69% 32%,75% 20%,81% 28%,87% 16%,93% 24%,100% 12%,100% 100%,0 100%);
  --e-paper:  polygon(7% 0,100% 0,100% 100%,0 100%,1% 92%,4% 86%,2% 78%,5% 70%,3% 62%,6% 54%,4% 46%,7% 38%,5% 30%,8% 22%,6% 14%,9% 7%);
  --e-slab-l: polygon(0 0,100% 0,96% 8%,99% 16%,94% 24%,97% 32%,92% 40%,95% 48%,90% 56%,93% 64%,88% 72%,91% 80%,86% 88%,89% 96%,84% 100%,0 100%);
  --e-btl-l:  polygon(0 0,100% 0,96% 10%,99% 20%,93% 30%,97% 40%,90% 50%,94% 60%,87% 70%,91% 80%,84% 90%,88% 100%,0 100%);
  --e-btl-r:  polygon(20% 0,100% 0,100% 100%,6% 100%,4% 92%,9% 84%,3% 76%,8% 68%,2% 60%,7% 52%,10% 44%,5% 36%,12% 28%,8% 20%,14% 12%,11% 4%);
  --e-vsbar:  polygon(0 0,100% 0,70% 12%,100% 24%,60% 36%,100% 48%,55% 60%,100% 72%,65% 84%,100% 100%,0 100%);
  --e-poster: polygon(0 3%,6% 0,30% 2%,55% 0,80% 3%,100% 0,100% 96%,90% 100%,60% 97%,35% 100%,10% 97%,0 100%);
}
:root[data-edges="chipped"] {
  --e-hdr: polygon(0 0,100% 0,100% 72%,78% 78%,74% 74%,52% 84%,30% 88%,26% 84%,0 100%);
  --e-hdr-up: polygon(0 0,26% 16%,30% 12%,52% 16%,74% 26%,78% 22%,100% 28%,100% 100%,0 100%);
  --e-stripe: polygon(0 0,100% 0,100% 100%,62% 100%,58% 88%,54% 100%,0 100%);
  --e-btn-a: polygon(0 0,100% 0,100% 100%,84% 100%,80% 88%,76% 100%,0 100%);
  --e-btn-b: polygon(0 0,18% 0,22% 12%,26% 0,100% 0,100% 100%,0 100%);
  --e-tile: polygon(0 0,100% 0,100% 86%,92% 100%,0 100%);
  --e-chip: polygon(0 0,100% 0,100% 80%,94% 100%,0 100%);
  --e-card: polygon(0 0,100% 0,100% 100%,10% 100%,0 80%);
  --e-foot: polygon(0 40%,40% 22%,44% 34%,48% 16%,100% 0,100% 100%,0 100%);
  --e-paper: polygon(6% 0,100% 0,100% 100%,0 100%,2% 60%,4% 56%,3% 40%);
  --e-slab-l: polygon(0 0,100% 0,92% 34%,96% 40%,88% 62%,90% 66%,78% 100%,0 100%);
  --e-btl-l: polygon(0 0,100% 0,92% 34%,96% 40%,88% 62%,90% 66%,78% 100%,0 100%);
  --e-btl-r: polygon(24% 0,100% 0,100% 100%,2% 100%,10% 66%,6% 60%,14% 40%,12% 34%);
  --e-vsbar: polygon(0 0,100% 0,100% 44%,60% 50%,100% 56%,100% 100%,0 100%);
  --e-poster: polygon(0 0,100% 0,100% 88%,94% 100%,0 100%);
}