@import url("cursor.css?v=edge");

/* 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-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;
}

/* 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::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 {
  background-color: #000533;
  background-image: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

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

/* Homepage: signature gold scrollbar (game track/thumb) */
html:has(body.page-home) {
  overflow-x: clip;
  scrollbar-width: auto;
  scrollbar-color: #eac914 #472a24;
}

html:has(body.page-home)::-webkit-scrollbar {
  width: 18px;
  background: transparent;
}

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

html:has(body.page-home)::-webkit-scrollbar-thumb {
  min-height: 42px;
  background: none;
  border-radius: 0;
  border-style: solid;
  border-width: 12px 7px;
  border-image-source: url("../assets/icons/scrollbar/thumb.png");
  border-image-slice: 18 11 fill;
  border-image-width: 12px 7px;
  border-image-repeat: stretch;
}

html:has(body.page-home)::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 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 + viewport lock — feed list scrolls, footer stays */
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;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

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

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

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 {
  color: var(--bpb-banner-crimson);
}

/* 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));
}