/* ZuneLife — Alan, 2026-08-28, sparked by the default-button glow-up's
   uiverse.io reference: "a new css theme: zunelife (spectrum purple/red/
   orange, sunset x hexagonal(120°) angles". Deep dusk-purple ground with
   a low sunset wash (purple -> red -> orange radial gradient, positioned
   like a horizon glow) and a faint honeycomb tessellation overlay -- the
   "120°" brief taken literally as real hexagon geometry (interior angles
   of a regular hexagon ARE 120°), not just a vague "angular" gesture.
   Name/vibe nods to the old Zune media player's warm, rounded late-2000s
   UI language (hence Nunito -- rounded, friendly, already self-hosted for
   solarpunk.css, reused here rather than adding a new font asset) without
   reusing any literal Zune brand asset.

   Contrast: --text/--text-2/--muted verified against all three grounds
   with the standard relative-luminance formula at full body-text WCAG
   rigor -- worst case --muted vs --bg3 at 4.87:1, clearing the >=4.5:1 AA
   bar. --danger vs --danger-dark: 5.91:1, clearing the TOKEN CONTRACT bar
   theme.css establishes.
   See: circuitforge-plans/vaportrade-clone/superpowers/specs/
   2026-08-13-ui-redesign-design.md §3 "Theme-pack roadmap". */
/* Evil Vampire (2026-09-02, swapped in from Nunito via the
   font-gallery-generator drag-and-drop tool's exported picks). SIL OFL.
   --font-mono was deliberately left untouched in that first round -- the
   paired pick (aldo_sans) had no explicit license grant -- but Alan's
   next export round gave this pack a real --font-mono pick after all:
   3270 (the real IBM-3270-terminal-emulator font, BSD-3-clause licensed,
   shared @font-face with matrix-terminal.css/tron-neon.css's own 3270
   picks). --font-size-display also set this round. */
@font-face{
  font-family:"Evil Vampire";
  src:url("/vaportrade/static/fonts/evil-vampire/EvilVampire-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"3270";
  src:url("/vaportrade/static/fonts/threetwoseventy/3270-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
/* Haxorville (2026-09-02, --font-h2, the new 3rd font role): SIL OFL,
   self-hosted under static/fonts/haxorville/. */
@font-face{
  font-family:"Haxorville";
  src:url("/vaportrade/static/fonts/haxorville/Haxorville-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
[data-theme="zunelife"]{
  --bg:#1a0f2e; --bg2:#241640; --bg3:#2e1d52; --border:#5c3d8f;
  --text:#fdf2ea; --text-2:#e0c4d9; --muted:#a888b8;
  --accent-1:#9d3fb8; --accent-2:#e0393f; --accent-3:#f5822e;
  --success:#4ade80; --danger:#ff5a5f; --danger-dark:#2e0a0c; --warning:#f5822e;
  --font-display:"Evil Vampire",sans-serif;
  --font-mono:"3270",monospace;
  --font-h2:"Haxorville",monospace;
  --font-size-display:2.5rem; --font-size-mono:1.125rem; --font-size-h2:1.5rem;
}
/* Sunset horizon wash + honeycomb tessellation, layered on one fixed
   ::before (same "ambient full-viewport background layer" pattern every
   other pack uses -- matrix-terminal's scanlines, cf-defcon's grid,
   ps1-lowpoly's dither, tron-neon's circuit lines -- a faint hex-grid
   here instead). The radial gradient sits low and wide, like a sun just
   below the horizon; the three overlapping 120°-rotated linear-gradients
   underneath are the standard CSS-only hexagon-tessellation trick (each
   pair of parallel edges is one gradient, rotated 120° from the other
   two -- genuine hexagon geometry, not a decorative approximation). */
[data-theme="zunelife"] body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 100%,
      rgba(245,130,46,.16) 0%, rgba(224,57,63,.12) 35%, rgba(157,63,184,.08) 65%, transparent 85%),
    linear-gradient(120deg, rgba(157,63,184,.05) 25%, transparent 25.5%, transparent 75%, rgba(157,63,184,.05) 75.5%, rgba(157,63,184,.05)),
    linear-gradient(60deg, rgba(224,57,63,.05) 25%, transparent 25.5%, transparent 75%, rgba(224,57,63,.05) 75.5%, rgba(224,57,63,.05)),
    linear-gradient(60deg, rgba(245,130,46,.05) 25%, transparent 25.5%, transparent 75%, rgba(245,130,46,.05) 75.5%, rgba(245,130,46,.05));
  background-size: 100% 100%, 64px 110px, 64px 110px, 64px 110px;
  background-position: 0 0, 0 0, 0 0, 32px 55px;
}
[data-theme="zunelife"] h1 .grad{
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Hexagon heading marker -- same "structural divider glyph" convention as
   tron-neon's ■/ps1-lowpoly's triangle, a real hexagon here (clip-path,
   not a text glyph) to keep the 120°-angle motif consistent everywhere
   it shows up, not just the ambient background. */
[data-theme="zunelife"] h2{
  display:flex;align-items:center;gap:8px;
}
[data-theme="zunelife"] h2::before{
  content:"";display:inline-block;width:.55em;height:.55em;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-3));
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}
/* Bespoke hexagon button (2026-08-28 button glow-up note: this pack opts
   OUT of the base button{} rule's cut-corner clip-path (theme.css) in
   favor of its OWN clip-path -- a real hexagon, 120° interior angles at
   every vertex, matching this pack's own defining geometry rather than
   the generic 4-corner cut every other "adopted" pack shares. Static
   sunset-spectrum gradient fill instead of the animated border -- a
   hexagon's edges are too short at button scale for the animated-border
   technique's clip-path-within-clip-path inset trick to read cleanly,
   so this goes with a simpler, still-distinctive filled treatment.

   content:none on ::before/::after is required, not optional -- learned
   the hard way testing this live: negative z-index does NOT mean
   "behind this element's own background" (confirmed empirically: a
   negative-z-index pseudo-element paints ABOVE its own establishing
   element's background, per CSS2.1's stacking order -- the element's
   own background paints FIRST, before any stacking-context descendant,
   negative z-index included). Without this, the base rule's own
   ::before/::after were rendering a near-black hexagon almost entirely
   over this pack's intended sunset gradient, leaving only a thin sliver
   of color at the tips -- exactly what showed up in the first live
   screenshot of this pack before this fix. */
[data-theme="zunelife"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle){
  background:linear-gradient(120deg,var(--accent-1),var(--accent-2),var(--accent-3));
  color:#fff;
  clip-path:polygon(12% 0%,88% 0%,100% 50%,88% 100%,12% 100%,0% 50%);
  padding:9px 22px;
}
[data-theme="zunelife"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle)::before,
[data-theme="zunelife"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle)::after{
  content:none;
}
[data-theme="zunelife"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle):hover{
  filter:brightness(1.15);
}
[data-theme="zunelife"] button.ghost{border:1px solid var(--border)}
[data-theme="zunelife"] .chip.on{
  background:rgba(157,63,184,.22);border-color:var(--accent-1);color:var(--text);
}