/* ===== Hex & Roll — pixel-art UI foundation ===== */
:root{
  --u: 4px;                 /* base pixel unit */
  /* ink */
  --ink:#2d1f0e; --ink-soft:#4a3218; --ink-faint:#6b4f2a;
  /* parchment */
  --parch-0:#fbf1d8; --parch-1:#f5e6c8; --parch-2:#e8d5a3;
  --parch-3:#d4b87a; --parch-edge:#b89a5e; --parch-deep:#9c7f4a;
  /* gold */
  --gold:#c4922a; --gold-br:#ffcf4d; --gold-dk:#8b6914;
  /* moody book / table */
  --leather-1:#34220f; --leather-2:#1c1207; --leather-3:#0f0a04;
  --candle:#ffb14d;
  /* state */
  --good:#5ad65a; --bad:#ff5a6e; --mana:#ffcf4d;
  /* elements */
  --fire:#ff6b3d; --water:#4db8ff; --light:#ffd93d; --nature:#6bcb6b;
  --poison:#b86bff; --arcane:#ff6be8; --curse:#a892b8; --wild:#8a6bff;
  /* rarity */
  --common:#b8b0d0; --rare:#3aa0ff; --epic:#b15aff; --legendary:#ffcf4d;
}

*{ box-sizing:border-box; margin:0; padding:0; }
img{ image-rendering:pixelated; display:block; }
.pix-font{ font-family:"Pixelify Sans", monospace; }
.stamp-font{ font-family:"Silkscreen", monospace; }

/* ---------- parchment surface ---------- */
.parch{
  background-color:var(--parch-2);
  background-image:
    radial-gradient(closest-side at 10% 6%, rgba(74,50,24,.20), transparent),
    radial-gradient(closest-side at 92% 94%, rgba(74,50,24,.16), transparent),
    radial-gradient(closest-side at 86% 12%, rgba(120,80,30,.12), transparent),
    linear-gradient(180deg, rgba(255,248,225,.30), rgba(120,90,40,.12)),
    repeating-conic-gradient(rgba(60,40,15,.045) 0% 25%, transparent 0% 50%);
  background-size:auto,auto,auto,auto,8px 8px;
}
.parch-light{ background-color:var(--parch-1); }
.parch-deep{ background-color:var(--parch-3); }

/* ---------- pixel panel (notched corners + ink outline, all via box-shadow) ----------
   needs 2u (8px) clearance around it (use gap / margin).                                */
.px{
  position:relative;
  background-color:var(--parch-2);
  box-shadow:
    0 calc(-1*var(--u)) 0 0 var(--parch-2), 0 var(--u) 0 0 var(--parch-2),
    calc(-1*var(--u)) 0 0 0 var(--parch-2), var(--u) 0 0 0 var(--parch-2),
    0 calc(-2*var(--u)) 0 0 var(--ink), 0 calc(2*var(--u)) 0 0 var(--ink),
    calc(-2*var(--u)) 0 0 0 var(--ink), var(--u2,calc(2*var(--u))) 0 0 0 var(--ink);
}
/* light inner edge so panels feel embossed */
.px::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 var(--u) 0 0 rgba(255,248,225,.45),
             inset 0 calc(-1*var(--u)) 0 0 rgba(120,90,40,.30);
}
.px.flat::after{ display:none; }

/* gold / state colored frames just swap the fill (outline stays ink) */
.px.gold{ background-color:var(--gold-br);
  box-shadow:
    0 calc(-1*var(--u)) 0 0 var(--gold-br), 0 var(--u) 0 0 var(--gold-br),
    calc(-1*var(--u)) 0 0 0 var(--gold-br), var(--u) 0 0 0 var(--gold-br),
    0 calc(-2*var(--u)) 0 0 var(--ink), 0 calc(2*var(--u)) 0 0 var(--ink),
    calc(-2*var(--u)) 0 0 0 var(--ink), calc(2*var(--u)) 0 0 0 var(--ink); }
.px.dark{ background-color:var(--leather-1);
  box-shadow:
    0 calc(-1*var(--u)) 0 0 var(--leather-1), 0 var(--u) 0 0 var(--leather-1),
    calc(-1*var(--u)) 0 0 0 var(--leather-1), var(--u) 0 0 0 var(--leather-1),
    0 calc(-2*var(--u)) 0 0 #000, 0 calc(2*var(--u)) 0 0 #000,
    calc(-2*var(--u)) 0 0 0 #000, calc(2*var(--u)) 0 0 0 #000; }
.px.dark::after{ box-shadow:inset 0 var(--u) 0 0 rgba(255,200,120,.10),
             inset 0 calc(-1*var(--u)) 0 0 rgba(0,0,0,.5); }

/* ---------- selected / combo glows for dice ---------- */
.glow-gold{ box-shadow:0 0 0 var(--u) var(--gold-br), 0 0 0 calc(2*var(--u)) var(--ink),
            0 0 calc(5*var(--u)) rgba(255,207,77,.55); }
.glow-good{ box-shadow:0 0 0 var(--u) var(--good), 0 0 0 calc(2*var(--u)) var(--ink),
            0 0 calc(4*var(--u)) rgba(90,214,90,.5); }

/* ---------- pixel button ---------- */
.btn{
  font-family:"Pixelify Sans",monospace; font-weight:700; color:var(--ink);
  background:var(--parch-1); border:none; cursor:default;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-transform:uppercase; letter-spacing:.5px; line-height:1; user-select:none;
}
.btn-primary{ background:var(--gold-br); }
.btn-danger{ background:#f0b8b8; }

/* ---------- progress bar (ink filling parchment) ---------- */
.bar{ position:relative; background:var(--parch-3);
  box-shadow:inset 0 0 0 var(--u) var(--ink), inset 0 var(--u) 0 var(--u) rgba(120,90,40,.4); overflow:hidden; }
.bar-fill{ position:absolute; inset:var(--u); right:auto;
  background-color:#6a4cf0;
  background-image:linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%),
                   repeating-conic-gradient(rgba(0,0,0,.10) 0 25%, transparent 0 50%);
  background-size:auto,6px 6px;
  box-shadow:inset 0 -3px 0 rgba(40,20,90,.5); }

/* ---------- tiny dither helpers ---------- */
.dither-dk{ background-image:repeating-conic-gradient(rgba(0,0,0,.10) 0 25%, transparent 0 50%); background-size:6px 6px; }

/* ---------- firefly / sparkle dots ---------- */
.firefly{ position:absolute; width:6px; height:6px; background:#fff3b0; border-radius:1px;
  box-shadow:0 0 6px 2px rgba(255,224,120,.85); }

/* render crisp pixel sprite at integer scale */
.sprite{ image-rendering:pixelated; }

/* annotation tag for zone labels */
.zonetag{ font-family:"Silkscreen",monospace; font-size:9px; letter-spacing:.5px;
  color:#fff; background:rgba(20,12,5,.82); padding:3px 6px; border-radius:2px;
  text-transform:uppercase; white-space:nowrap; }