@font-face { font-family: AlpacaPixel; src: url('../fonts/PPNeueBit-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: AlpacaSans; src: url('../fonts/HaasGrotDisp-Roman.otf') format('opentype'); font-weight: 400; font-display: swap; }
:root {
  --ba-bg: #020002; --ba-red: #ee4131; --ba-green: #29a97c;
  --ba-yellow: #f9fe52; --ba-purple: #a883fd;
  --bs-body-bg: var(--ba-bg); --bs-body-color: #f4f4f4;
  --bs-secondary-color: #aaa6b0; --bs-border-color: #2c292e;
  --bs-font-sans-serif: AlpacaSans, 'Helvetica Neue', Arial, sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { background: var(--ba-bg); min-height: 100vh; }
a:focus-visible { outline: 2px solid var(--ba-yellow); outline-offset: 5px; }
.announcement { background: var(--ba-green); color: #020002; font: 700 .72rem ui-monospace, monospace; letter-spacing: .1em; }
.announcement span { padding: 0 .8rem; }
.store-nav { border-bottom: 1px solid var(--bs-border-color); }
.brand-mark { filter: invert(1); }
.brand-name { color: #fff; font: 700 1.9rem AlpacaPixel, monospace; line-height: 1; }
.brand-store { color: var(--ba-red); }
.navbar-brand { margin-right: 0; }
.nav-link, .event-link { font: .78rem ui-monospace, monospace; color: #ddd; text-decoration: none; }
.nav-link:hover, .event-link:hover { color: var(--ba-yellow); }
.event-link { border: 1px solid #3c373f; padding: .65rem .8rem; }
.eyebrow { font: .68rem ui-monospace, monospace; letter-spacing: .1em; color: var(--ba-green); }
.status-square { display: inline-block; width: 7px; height: 7px; background: var(--ba-green); margin-right: .5rem; }
.hero-title { font: 700 clamp(3.5rem, 6.8vw, 6.9rem)/.84 AlpacaPixel, monospace; letter-spacing: -.025em; }
.hero-title span { color: var(--ba-red); }
.hero-copy { font-size: 1.1rem; line-height: 1.6; max-width: 34rem; }
.btn-alpaca { --bs-btn-color: #fff; --bs-btn-bg: var(--ba-red); --bs-btn-border-color: var(--ba-red); --bs-btn-hover-color: #020002; --bs-btn-hover-bg: var(--ba-yellow); --bs-btn-hover-border-color: var(--ba-yellow); border-radius: 0; font: 700 .75rem ui-monospace, monospace; }
.hero-meta, .collection-count { font: .65rem ui-monospace, monospace; color: #aaa6b0; letter-spacing: .02em; }
.hero-meta span { padding: 0 .6rem; color: var(--ba-red); }
.hero-art { height: 365px; position: relative; overflow: hidden; background-color: var(--ba-red); background-image: linear-gradient(#02000212 1px, transparent 1px), linear-gradient(90deg, #02000212 1px, transparent 1px); background-size: 26px 26px; }
.hero-art img { position: absolute; height: 285px; width: auto; left: 50%; bottom: 22px; transform: translateX(-50%); filter: drop-shadow(15px 14px 0 #02000230); }
.hero-art-word { position: absolute; top: 0; left: 17px; color: #02000220; font: 700 20rem/.8 AlpacaPixel, monospace; }
.art-coordinate { position: absolute; z-index: 1; font: .57rem ui-monospace, monospace; letter-spacing: .08em; color: #020002; }
.art-coordinate-top { top: 16px; left: 16px; }
.art-coordinate-bottom { bottom: 13px; right: 16px; }
.mascot-label { position: absolute; right: 14px; top: 57px; padding: .6rem .7rem; background: var(--ba-yellow); color: #020002; font: 700 1.4rem AlpacaPixel, monospace; transform: rotate(4deg); }
.collection-heading { border-top: 1px solid var(--bs-border-color); scroll-margin-top: 2rem; }
.collection-title { font: 700 3.8rem/.8 AlpacaPixel, monospace; }
.text-accent { color: var(--ba-red); }
.accent-red { --item-accent: var(--ba-red); }
.accent-green { --item-accent: var(--ba-green); }
.accent-yellow { --item-accent: var(--ba-yellow); }
.accent-purple { --item-accent: var(--ba-purple); }
.product-card { border: 1px solid var(--bs-border-color); border-radius: 0; background: #0c0b0e; transition: border-color .2s ease; overflow: hidden; }
.product-card:hover { border-color: var(--item-accent); }
.product-card img { border-radius: 0; display: block; transition: transform .2s ease; }
.product-card:hover img { transform: scale(1.035); }
.product-image-link { display: block; overflow: hidden; border-bottom: 1px solid var(--bs-border-color); }
.product-index { position: absolute; z-index: 1; top: 12px; left: 12px; font: .6rem ui-monospace, monospace; color: #a6a2ac; }
.product-category { font: .55rem ui-monospace, monospace; color: var(--item-accent); letter-spacing: .025em; }
.product-title { color: #fff; text-decoration: none; }
.product-title:hover { color: var(--item-accent); }
.product-bottom { border-top: 1px solid var(--bs-border-color); }
.product-price { font: 700 1.8rem AlpacaPixel, monospace; }
.product-arrow { color: var(--item-accent); font-size: 1.2rem; }
.detail-image { position: relative; border: 1px solid var(--bs-border-color); border-bottom: 3px solid var(--item-accent); }
.detail-code { position: absolute; z-index: 1; top: 16px; left: 16px; font: .65rem ui-monospace, monospace; color: #aaa6b0; }
.detail-title { font: 700 clamp(3.5rem, 6vw, 5rem)/.85 AlpacaPixel, monospace; }
.detail-price { font: 700 2.5rem AlpacaPixel, monospace; color: var(--ba-yellow); }
.breadcrumb { --bs-breadcrumb-divider-color: #777; }
.breadcrumb a { color: #aaa6b0; text-decoration: none; }
.breadcrumb a:hover { color: var(--ba-yellow); }
.store-footer { border-top: 1px solid var(--bs-border-color); }
.footer-brand { font: 700 2rem AlpacaPixel, monospace; }
.store-footer a { color: var(--ba-green); text-decoration: none; }
.error-panel { max-width: 36rem; }
.skip-link { position: absolute; z-index: 5; left: 1rem; top: 0; transform: translateY(-120%); background: var(--ba-yellow); color: #020002; padding: .75rem; }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 575.98px) {
  .brand-name { font-size: 1.45rem; }
  .brand-store { display: block; margin-top: .1rem; }
  .brand-mark { width: 26px; height: 31px; }
  .nav-collection { display: none; }
  .hero-art { height: 310px; }
  .hero-art img { height: 245px; }
  .collection-title { font-size: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .product-card, .product-card img { transition: none; }
}

.alpaca-chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20; width: min(360px, calc(100vw - 2.5rem)); }
.alpaca-chat > summary { list-style: none; cursor: pointer; margin-left: auto; width: fit-content; padding: .9rem 1.2rem; background: var(--ba-green); color: var(--ba-bg); font: 700 1.8rem/1 AlpacaPixel, monospace; border: 1px solid var(--ba-green); box-shadow: 4px 4px 0 #0008; }
.alpaca-chat > summary::-webkit-details-marker { display: none; }
.alpaca-chat > summary:focus-visible { outline: 2px solid var(--ba-yellow); outline-offset: 4px; }
.alpaca-chat > summary span { color: var(--ba-yellow); margin-left: .5rem; }
.chat-panel { margin-top: .6rem; border: 1px solid var(--ba-green); background: #0c0b0e; box-shadow: 6px 6px 0 #0008; }
.chat-header { padding: 1rem; border-bottom: 1px solid var(--bs-border-color); }
.chat-header strong { display: block; font: 700 2rem/1 AlpacaPixel, monospace; color: var(--ba-green); }
.chat-header > span { font: .65rem ui-monospace, monospace; color: var(--bs-secondary-color); }
.chat-messages { height: min(280px, 35dvh); overflow-y: auto; padding: 1rem; }
.chat-message { padding: .75rem; margin: 0 1rem .75rem 0; background: #19171c; font-size: .9rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-author { display: block; margin-bottom: .35rem; font: .65rem ui-monospace, monospace; color: var(--ba-green); }
.chat-user { margin-right: 0; margin-left: 1rem; border-left: 2px solid var(--ba-red); }
.chat-user .chat-author { color: var(--ba-red); }
.chat-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--bs-border-color); }
.chat-form input { min-width: 0; flex: 1; padding: .7rem; background: var(--ba-bg); border: 1px solid #3c373f; color: #fff; font-size: .85rem; }
.chat-form input:focus-visible { outline: 2px solid var(--ba-green); outline-offset: 1px; }