/* BPB Website — global theme tokens
 * Derived from Backpack Battles UI (see docs/product/theme.md + assets/theme-refs/)
 * Page-specific layout → Tailwind. Tooltip skin → js/shared/tooltip.css
 */

@font-face {
  font-family: "Milonga";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/milonga.woff2") format("woff2"),
       url("../assets/fonts/milonga.ttf") format("truetype");
}

@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/libre-400.woff2") format("woff2"),
       url("../assets/fonts/libre-400.ttf") format("truetype");
}

@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/libre-700.ttf") format("truetype");
}

@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/libre-400-italic.ttf") format("truetype");
}

:root {
  /* Parchment / leather */
  --bpb-parchment: #d4b896;
  --bpb-parchment-light: #e2c9a8;
  --bpb-parchment-deep: #b8956e;
  --bpb-leather: #8a6a4a;
  --bpb-leather-cell: #9a7352;
  --bpb-ink: #3d2b1f;
  --bpb-ink-muted: #5c4636;
  --bpb-frame: #4a3428;
  --bpb-wood: #6b4a32;

  /* Accents */
  --bpb-gold: #e8c84a;
  --bpb-banner-crimson: #8b2e2e;
  --bpb-banner-steel: #3d5a7a;
  --bpb-banner-forest: #3f6b4f;
  --bpb-win: #5a9a5a;
  --bpb-loss: #b05a5a;

  /* Rarity paint-swipes */
  --bpb-rarity-common: #7cbc6a;
  --bpb-rarity-rare: #4a9fd8;
  --bpb-rarity-epic: #9b6bc7;
  --bpb-rarity-legendary: #e89a3c;
  --bpb-rarity-godly: #f0c23a;
  --bpb-rarity-unique: #d4a017;

  /* Type */
  --bpb-font-display: "Milonga", "Libre Baskerville", Georgia, serif;
  --bpb-font-body: "Libre Baskerville", Georgia, serif;

  /* Sticker / shop-label text (white fill, ink outline, hard shadow down-left) */
  --bpb-label-fill: #fffaf0;
  --bpb-label-ink: #442f1d;
  --bpb-label-stroke:
    calc(1em / 10 * 1) calc(1em / 10 * 0) 0 var(--bpb-label-ink),
    calc(1em / 10 * 0.9239) calc(1em / 10 * 0.3827) 0 var(--bpb-label-ink),
    calc(1em / 10 * 0.7071) calc(1em / 10 * 0.7071) 0 var(--bpb-label-ink),
    calc(1em / 10 * 0.3827) calc(1em / 10 * 0.9239) 0 var(--bpb-label-ink),
    calc(1em / 10 * 0) calc(1em / 10 * 1) 0 var(--bpb-label-ink),
    calc(1em / 10 * -0.3827) calc(1em / 10 * 0.9239) 0 var(--bpb-label-ink),
    calc(1em / 10 * -0.7071) calc(1em / 10 * 0.7071) 0 var(--bpb-label-ink),
    calc(1em / 10 * -0.9239) calc(1em / 10 * 0.3827) 0 var(--bpb-label-ink),
    calc(1em / 10 * -1) calc(1em / 10 * 0) 0 var(--bpb-label-ink),
    calc(1em / 10 * -0.9239) calc(1em / 10 * -0.3827) 0 var(--bpb-label-ink),
    calc(1em / 10 * -0.7071) calc(1em / 10 * -0.7071) 0 var(--bpb-label-ink),
    calc(1em / 10 * -0.3827) calc(1em / 10 * -0.9239) 0 var(--bpb-label-ink),
    calc(1em / 10 * 0) calc(1em / 10 * -1) 0 var(--bpb-label-ink),
    calc(1em / 10 * 0.3827) calc(1em / 10 * -0.9239) 0 var(--bpb-label-ink),
    calc(1em / 10 * 0.7071) calc(1em / 10 * -0.7071) 0 var(--bpb-label-ink),
    calc(1em / 10 * 0.9239) calc(1em / 10 * -0.3827) 0 var(--bpb-label-ink),
    -0.02em 0.035em 0 var(--bpb-label-ink),
    -0.04em 0.07em 0 var(--bpb-label-ink),
    -0.055em 0.1em 0 var(--bpb-label-ink),
    -0.07em 0.13em 0 var(--bpb-label-ink);

  /* Chrome */
  --bpb-radius-panel: 10px;
  --bpb-border: 2px solid var(--bpb-frame);
  --bpb-shadow-paper: 0 4px 14px rgba(45, 30, 20, 0.18);

  /* Game screen frame (Frame2 @ 1920×1080, ~40px rim) — scales with stretch */
  --bpb-frame-edge-x: calc(100vw * 40 / 1920);
  --bpb-frame-edge-y: calc(100vh * 40 / 1080);
  --bpb-z-screen-frame: 9990;

  /* Scene backgrounds */
  --bpb-bg-town: url("../assets/theme/backgrounds/bg-town-square.jpg");
  --bpb-bg-home-night: url("../assets/theme/backgrounds/combat/CombatNightStatic.png");
  --bpb-bg-shop: url("../assets/theme/backgrounds/bg-shop-interior.jpg");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--bpb-font-body);
  color: var(--bpb-ink);
  background-color: var(--bpb-parchment-deep);
}

/* Site-wide game screen chrome (pointer-events none; tooltips sit above) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--bpb-z-screen-frame);
  pointer-events: none;
  background: url("../assets/theme/ui/ui-screen-frame.png") center / 100% 100% no-repeat;
}

#site-nav {
  /* VH-style: fixed out of flow so logo shrink doesn’t change page height / scrollY */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  /* Sit closer to the screen-frame rim */
  padding-top: calc(var(--bpb-frame-edge-y) * 0.35);
  padding-left: var(--bpb-frame-edge-x);
  padding-right: var(--bpb-frame-edge-x);
  isolation: isolate;
  /* The fixed host can extend below the visual shelf at short desktops. */
  pointer-events: none;
}

#site-nav > .site-nav-shell {
  pointer-events: auto;
}

/* In-flow stand-in sized to the *expanded* nav — keeps layout stable while nav is fixed */
#site-nav-space {
  flex-shrink: 0;
  height: var(--bpb-nav-space, 12rem);
  pointer-events: none;
  visibility: hidden;
}

#main {
  padding-left: var(--bpb-frame-edge-x);
  padding-right: var(--bpb-frame-edge-x);
}

/* Phone and tablet portrait: the stretched wood rim eats the screen. Drop it and the inset that cleared it.
   The shelf nav also gives way to the menu under 1100px (iPad Pro 13 portrait is 1032). */
@media (max-width: 1100px) {
  :root {
    --bpb-frame-edge-x: 0px;
    --bpb-frame-edge-y: 0px;
  }

  body.page-home {
    background-attachment: scroll;
  }

  body::after {
    content: none;
    display: none;
  }

  #site-nav {
    padding-top: 0.35rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
}

#site-footer {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Homepage: combat day→night sky (js/pages/home/combat-sky.js) */
body.page-home {
  /* Paint the same Night frame immediately; Home boot only adds the live
     windmill layer after this first request completes. */
  background-color: #000533;
  background-image: var(--bpb-bg-home-night);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

body.page-home #main {
  flex: 1 1 auto;
  min-height: 0;
}

/* Root scrollbar baseline. Chromium/Safari use the established WebKit chrome
   below; Firefox has no image-track API, so it receives the same gold/brown
   palette through the standard scrollbar properties. Keeping those properties
   `auto` in WebKit avoids reviving Windows' native arrow scrollbar. */
html {
  scrollbar-width: auto;
  scrollbar-color: auto;
}

html::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

html::-webkit-scrollbar-track {
  border: 3px solid #472a24;
  border-radius: 16px;
  background: #816230;
}

html::-webkit-scrollbar-thumb {
  border: 2px solid #472a24;
  border-radius: 20px;
  background: #eac914;
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: #eac914 #816230;
  }
}

/* Home and Builds share one page scrollbar. */
html:has(body.page-home),
html:has(body.page-builds) {
  overflow-x: clip;
}

/* Home and Builds switch to the image-based game scrollbar at the filter-drawer
   breakpoint so desktop and mobile do not present two different bars. */
@media (max-width: 1240px) {
  html:has(body.page-home),
  html:has(body.page-builds) {
    scrollbar-width: auto;
    scrollbar-color: #eac914 #472a24;
  }

  html:has(body.page-home)::-webkit-scrollbar,
  html:has(body.page-builds)::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  html:has(body.page-home)::-webkit-scrollbar-track,
  html:has(body.page-builds)::-webkit-scrollbar-track {
    background: url("../assets/icons/scrollbar/track.png") center / 18px 100% no-repeat;
    border: none;
    border-radius: 0;
  }

  html:has(body.page-home)::-webkit-scrollbar-thumb,
  html:has(body.page-builds)::-webkit-scrollbar-thumb {
    border-image-source: url("../assets/icons/scrollbar/thumb.png");
    border-image-width: 2px 2px 2px 2px;
    border-image-slice: 20 20 20 20;
    border-image-repeat: stretch;
    border: none;
    border-radius: 0;
  }

}

/* Items catalog: shop interior — calm wall behind parchment UI */
body.page-items {
  background-color: #5a4535;
  background-image:
    linear-gradient(
      180deg,
      rgba(212, 184, 150, 0.42) 0%,
      rgba(70, 48, 32, 0.5) 100%
    ),
    var(--bpb-bg-shop);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.page-items #site-nav-space {
  flex-shrink: 0;
}

body.page-items #main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.page-items #site-footer {
  flex: 0 0 auto;
  flex-shrink: 0;
  z-index: 1;
}

body.page-items #site-footer:empty {
  display: none;
}

/* Create: same viewport shell as items so the catalog bag can scroll */
body.page-create {
  background-color: #5a4535;
  background-image:
    linear-gradient(
      180deg,
      rgba(212, 184, 150, 0.4) 0%,
      rgba(70, 48, 32, 0.5) 100%
    ),
    var(--bpb-bg-shop);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.page-create #site-nav-space {
  flex-shrink: 0;
}

body.page-create #main {
  min-height: 0;
}

/* Build guide: shop interior — same tool-page family as items catalog */
body.page-build {
  background-color: #5a4535;
  background-image:
    linear-gradient(
      180deg,
      rgba(212, 184, 150, 0.38) 0%,
      rgba(70, 48, 32, 0.52) 100%
    ),
    var(--bpb-bg-shop);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Profiles: town square — public browse (home family).
 * Builds uses the same backdrop but locks the viewport (list scrolls inside #main).
 * Sim uses testing-grounds lab chrome in js/pages/sim/sim.css (see docs/sim/sim-product.md). */
body.page-profile {
  background-color: #6b5340;
  background-image:
    linear-gradient(
      180deg,
      rgba(212, 184, 150, 0.4) 0%,
      rgba(70, 48, 32, 0.5) 100%
    ),
    var(--bpb-bg-town);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Builds catalog: town square — page scrolls, filter rail stays sticky */
body.page-builds {
  background-color: #6b5340;
  background-image:
    linear-gradient(
      180deg,
      rgba(212, 184, 150, 0.4) 0%,
      rgba(70, 48, 32, 0.5) 100%
    ),
    var(--bpb-bg-town);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

body.page-builds #site-nav-space {
  flex-shrink: 0;
}

body.page-builds #main {
  flex: 1 1 auto;
  min-height: 0;
}

body.page-builds #site-footer {
  flex: 0 0 auto;
  flex-shrink: 0;
  z-index: 1;
}

body.page-builds #site-footer:empty {
  display: none;
}

/* Events: same shop interior backdrop as the items catalog — page scrolls */
body.page-events {
  background-color: #5a4535;
  background-image:
    linear-gradient(
      180deg,
      rgba(212, 184, 150, 0.42) 0%,
      rgba(70, 48, 32, 0.5) 100%
    ),
    var(--bpb-bg-shop);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

body.page-events #main {
  flex: 1 1 auto;
  min-height: 0;
}

#main {
  min-height: 100vh;
}

/* Build pages: nav is above #main — don't force main to full viewport height
   (that alone made the document scroll when content fit). */
body.page-build #main {
  flex: 1 1 auto;
  min-height: 0;
}

h1,
h2,
h3 {
  font-family: var(--bpb-font-display);
  font-weight: 400;
  color: var(--bpb-ink);
}

/* Outlined cream sticker treatment — face is Milonga for banner chrome.
   Filter / Options UI labels should use --bpb-font-body instead (see docs/product/theme.md). */
.bpb-label-text {
  color: var(--bpb-label-fill);
  font-family: var(--bpb-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: var(--bpb-label-stroke);
}

a {
  color: var(--bpb-banner-steel);
}

a:hover {
  /* Match the gold used by the navigation's Patches treatment. */
  color: #eac914;
}

/* Reusable panel shell — Tailwind handles layout; this sets the material */
.bpb-panel {
  background-color: var(--bpb-parchment);
  background-image: url("../assets/theme/backgrounds/bg-parchment-panel.png");
  background-size: cover;
  background-position: center;
  border: var(--bpb-border);
  border-radius: var(--bpb-radius-panel);
  box-shadow: var(--bpb-shadow-paper);
}

/*
 * Modular ink Rewards plate — stretches to any size/shape.
 * Game-style dark leather fill + gold rim (no fixed-aspect art to distort).
 */
.bpb-panel--rewards {
  --bpb-rewards-ink: #3c261d;
  --bpb-rewards-ink-mid: #4a3224;
  --bpb-rewards-ink-deep: #2a1a12;
  --bpb-rewards-gold: #c6a567;
  --bpb-rewards-gold-bright: #e8c878;
  --bpb-rewards-cream: #dbc4a1;
  --bpb-rewards-corner: 0.75rem;
  position: relative;
  z-index: 0;
  isolation: isolate;
  box-sizing: border-box;
  padding: 0.75rem 0.85rem 0.85rem;
  border-radius: 0.4rem;
  color: var(--bpb-rewards-cream);
  background-color: var(--bpb-rewards-ink);
  background-image:
    radial-gradient(
      ellipse 95% 80% at 50% 32%,
      color-mix(in srgb, var(--bpb-rewards-ink-mid) 72%, transparent),
      transparent 68%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bpb-rewards-ink-mid) 88%, #6b4a32) 0%,
      var(--bpb-rewards-ink) 42%,
      var(--bpb-rewards-ink-deep) 100%
    );
  background-size: auto, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border: 2px solid var(--bpb-rewards-gold);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bpb-rewards-gold) 42%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--bpb-rewards-gold-bright) 28%, transparent),
    inset 0 -10px 28px rgba(0, 0, 0, 0.38),
    0 10px 22px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

/* Subtle BPB tile pattern — sits under content, above the ink fill */
.bpb-panel--rewards::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: url("../assets/theme/ui/ui-rewards-pattern.png") center / 132px repeat;
  opacity: 0.34;
  mix-blend-mode: soft-light;
}

/* Four gold corner brackets — scale with padding, not a fixed image */
.bpb-panel--rewards::before {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0.3rem;
  pointer-events: none;
  border-radius: 0.18rem;
  background:
    linear-gradient(var(--bpb-rewards-gold-bright), var(--bpb-rewards-gold-bright)) top left /
      var(--bpb-rewards-corner) 2px no-repeat,
    linear-gradient(var(--bpb-rewards-gold-bright), var(--bpb-rewards-gold-bright)) top left /
      2px var(--bpb-rewards-corner) no-repeat,
    linear-gradient(var(--bpb-rewards-gold-bright), var(--bpb-rewards-gold-bright)) top right /
      var(--bpb-rewards-corner) 2px no-repeat,
    linear-gradient(var(--bpb-rewards-gold-bright), var(--bpb-rewards-gold-bright)) top right /
      2px var(--bpb-rewards-corner) no-repeat,
    linear-gradient(var(--bpb-rewards-gold-bright), var(--bpb-rewards-gold-bright)) bottom left /
      var(--bpb-rewards-corner) 2px no-repeat,
    linear-gradient(var(--bpb-rewards-gold-bright), var(--bpb-rewards-gold-bright)) bottom left /
      2px var(--bpb-rewards-corner) no-repeat,
    linear-gradient(var(--bpb-rewards-gold-bright), var(--bpb-rewards-gold-bright)) bottom right /
      var(--bpb-rewards-corner) 2px no-repeat,
    linear-gradient(var(--bpb-rewards-gold-bright), var(--bpb-rewards-gold-bright)) bottom right /
      2px var(--bpb-rewards-corner) no-repeat;
  opacity: 0.92;
}

.bpb-panel--rewards > * {
  position: relative;
  z-index: 2;
}

.bpb-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.25rem;
  color: #f5efe4;
  font-family: var(--bpb-font-display);
  text-decoration: none;
  border: 2px solid rgba(30, 18, 10, 0.45);
  box-shadow: var(--bpb-shadow-paper);
}

.bpb-banner--crimson {
  background: linear-gradient(180deg, #a33a3a, var(--bpb-banner-crimson));
}

.bpb-banner--steel {
  background: linear-gradient(180deg, #4d6f94, var(--bpb-banner-steel));
}

.bpb-banner--forest {
  background: linear-gradient(180deg, #4f855f, var(--bpb-banner-forest));
}