/* Shared store art and purchase presentation. */
@font-face {
  font-family: Cinzel;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/cinzel-700.woff2") format("woff2");
}
@font-face {
  font-family: "Black Ops One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/black-ops-one-400.woff2") format("woff2");
}
@font-face {
  font-family: "Share Tech Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/share-tech-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: Teko;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/teko-600.woff2") format("woff2");
}
.part-font-energy,
.part-font-metal,
.part-font-track,
.part-font-tip { text-transform: none; }
.part-font-energy { font-family: Cinzel, serif; font-weight: 700; letter-spacing: 0.03em; }
.part-font-metal { font-family: "Black Ops One", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.02em; }
.part-font-track { font-family: "Share Tech Mono", ui-monospace, monospace; font-weight: 400; letter-spacing: 0; }
.part-font-tip { font-family: Teko, sans-serif; font-weight: 600; letter-spacing: 0.03em; line-height: 0.85; }
.bey-store-shelf-name.part-font-energy { font-size: 1.15rem; }
.bey-store-shelf-name.part-font-metal { font-size: 1.05rem; }
.bey-store-shelf-name.part-font-track { font-size: 0.95rem; }
.bey-store-shelf-name.part-font-tip { font-size: 1.55rem; }
.bey-box-part .part-font-energy { font-size: 0.92rem; }
.bey-box-part .part-font-metal { font-size: 0.78rem; }
.bey-box-part .part-font-track { font-size: 0.7rem; }
.bey-box-part .part-font-tip { font-size: 1.2rem; }
.case-reel-name.part-font-energy { font-size: 0.95rem; }
.case-reel-name.part-font-metal { font-size: 0.85rem; }
.case-reel-name.part-font-track { font-size: 0.78rem; }
.case-reel-name.part-font-tip { font-size: 1.25rem; }
.case-reveal-fx h2.part-font-energy,
.case-reveal-fx h2.part-font-metal,
.case-reveal-fx h2.part-font-track,
.case-reveal-fx h2.part-font-tip { text-transform: none; font-weight: 400; }
.case-reveal-fx h2.part-font-energy { font-family: Cinzel, serif; font-weight: 700; font-size: 1.45rem; }
.case-reveal-fx h2.part-font-metal { font-family: "Black Ops One", system-ui, sans-serif; font-size: 1.25rem; }
.case-reveal-fx h2.part-font-track { font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 1.15rem; }
.case-reveal-fx h2.part-font-tip { font-family: Teko, sans-serif; font-weight: 600; font-size: 2.1rem; line-height: 0.85; }
.crate-art--attack { --case-accent: #ff654d; --case-light: #fa8971; --case-dark: #a8302b; }
.crate-art--defense { --case-accent: #3fd99b; --case-light: #8cebc3; --case-dark: #197557; }
.crate-art--stamina { --case-accent: #d6e94f; --case-light: #edf78d; --case-dark: #798726; }
.crate-art { display: block; width: 100%; line-height: 0; }
.crate-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.crate-gradient-light { stop-color: var(--case-light); }
.crate-gradient-dark { stop-color: var(--case-dark); }
.crate-accent-stroke { stroke: var(--case-accent); }
.crate-accent-fill { fill: var(--case-accent); }
.bey-store-crates { gap: 10px; }
.bey-store-shelf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 20px 0 8px; padding-bottom: 12px; border-bottom: 1px solid #2c4057; }
.bey-store-shelf-head .bey-store-section,
.bey-store-shelf-head .demo-section { margin: 0; color: #57e9ff; font-family: var(--nx-d, 'Barlow Condensed', sans-serif); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.bey-store-shelf-head .bey-store-shelf-timer { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 12px; border: 1px solid #dfff3f38; background: #dfff3f0a; color: #b2c0d0; font-size: 12px; letter-spacing: .04em; }
.bey-store-shelf-timer[hidden] { display: none !important; }
.bey-store-shelf-timer b { color: #dfff3f; font-family: var(--nx-u, 'Chakra Petch', sans-serif); font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.bey-store-crate--attack { --crate: #ff654d; }
.bey-store-crate--defense { --crate: #3fd99b; }
.bey-store-crate--stamina { --crate: #d6e94f; }
.bey-store-crate .crate-art { transition: transform 180ms ease, filter 180ms ease; }
.bey-store-crate:hover .crate-art { transform: translateY(-5px); filter: brightness(1.12); }
.bey-store-crate:focus-visible { outline: 2px solid #57e9ff; outline-offset: 4px; }
.bey-store-crate:active .crate-art { transform: translateY(-1px); }
.bey-store-crate:disabled { cursor: wait; }
.crate-opening-stage { position: fixed; inset: 0; z-index: 600; isolation: isolate; overflow: auto; background: #070b14eb; backdrop-filter: blur(9px); color: #eef4ff; font-family: var(--nx-u, 'Chakra Petch', sans-serif); animation: crate-stage-in 220ms ease both; }
.crate-opening-title { position: absolute; left: 20px; right: 20px; top: max(5vh, 22px); margin: 0; color: var(--case-accent); text-align: center; text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .2em; }
.crate-opening-mover { position: absolute; z-index: 1; left: 50%; top: 47%; translate: -50% -50%; width: min(320px, 70vw); transform-origin: center; }
.crate-opening-mover > .crate-art { position: relative; z-index: 2; transition: opacity 500ms, filter 500ms; }
.crate-opening-halo { position: absolute; left: 50%; top: 47%; width: min(600px, 100vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--case-accent) 13%, transparent), transparent 65%); pointer-events: none; }
.crate-opening-light { position: absolute; z-index: 1; left: 16%; right: 12%; bottom: 33%; height: 140%; opacity: 0; background: linear-gradient(0deg, var(--case-accent), transparent 90%); clip-path: polygon(37% 100%, 0 0, 100% 0, 63% 100%); filter: blur(8px); transition: opacity 500ms; }
.crate-lid-piece { transform-box: fill-box; transform-origin: 75% 50%; }
.is-opening .crate-lid-piece { animation: crate-lid-release 1000ms cubic-bezier(.2,.7,.2,1) forwards; }
.is-opening .crate-opening-light { opacity: .7; }
.is-opening .crate-lock { animation: crate-seal-release 600ms ease forwards; }
.crate-opening-status { position: absolute; left: 20px; right: 20px; bottom: 12%; margin: 0; text-align: center; color: #94a8bd; font-size: 12px; letter-spacing: .04em; }
.crate-opening-reel { position: relative; z-index: 3; width: min(720px, calc(100% - 32px)); margin: max(18vh, 84px) auto 24px; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity 350ms ease, transform 350ms ease; }
.has-reel .crate-opening-reel { visibility: visible; opacity: 1; transform: none; }
.has-reel .crate-opening-mover > .crate-art { opacity: .25; filter: blur(2px); }
.has-reel .crate-opening-light { opacity: .2; }
.crate-opening-reel .case-reel-window { background: #0b1221f2; border: 1px solid #40526a; box-shadow: 0 18px 64px #0008; }
.crate-opening-reel .case-reveal-card { background: #101a2df5; }
.case-reveal-fx.is-awaiting,
.case-reveal-fx.is-awaiting .case-reveal-card { cursor: pointer; }
.crate-opening-reel .bey-store-unbox-actions { margin-top: 20px; }

.bey-store.is-open {
  align-self: stretch;
  width: min(640px, 100%);
  margin-inline: auto;
}
.bey-box-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 4px;
}
.bey-box-page[hidden] { display: none !important; }
.bey-box-page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  text-align: center;
  padding: 2px 8px 8px;
}
.bey-box-page-art {
  width: min(220px, 58vw);
  margin: 0 auto;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.45));
}
.bey-box-page-name {
  margin: 6px 0 0;
  font-family: var(--nx-d, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crate, #eef4ff);
}
.bey-box-page-cost {
  margin: 4px 0 0;
  color: var(--nx-a, #dfff3f);
  font-size: 0.72rem;
}
.bey-box-page-cost b {
  font-family: var(--nx-d, 'Barlow Condensed', sans-serif);
  font-size: 1.15rem;
}
.bey-store-free-note {
  margin: -2px 0 8px;
  color: var(--nx-a, #dfff3f);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.bey-store-crate-cost.is-free b,
.bey-box-page-cost.is-free b {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bey-box-page-count {
  margin: 2px 0 0;
  color: #9aa3b5;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bey-box-page-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 2px 8px;
}
.bey-box-rarity {
  margin: 14px 0 8px;
  font-family: var(--nx-d, 'Barlow Condensed', sans-serif);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rarity, #57e9ff);
}
.bey-box-rarity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.bey-box-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 8px 6px 10px;
  text-align: center;
  border: 1px solid #2c4057;
  border-top: 3px solid var(--rarity, #2c4057);
  background: linear-gradient(160deg, rgba(23, 28, 41, 0.92), rgba(7, 8, 13, 0.88));
}
.bey-box-part.is-owned {
  background: linear-gradient(160deg, #161a22, #0a0c11);
  border-color: #343b48;
  border-top-color: #6b7280;
  box-shadow: none;
}
.bey-box-part.is-owned .bey-box-part-thumb {
  filter: grayscale(0.55) brightness(0.78);
}
.bey-box-part.is-owned .bey-store-shelf-name {
  color: #8e97a8;
}
.bey-box-part-art {
  position: relative;
  width: 100%;
  height: 72px;
  overflow: hidden;
}
.bey-box-part-thumb {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: contain;
  background: transparent;
}
.bey-box-part-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}
.bey-box-part .bey-store-shelf-name {
  font-size: 0.92rem;
  line-height: 0.95;
  overflow-wrap: anywhere;
}
.bey-box-own {
  position: absolute;
  left: -35%;
  right: -35%;
  top: 50%;
  z-index: 1;
  margin: 0;
  padding: 2px 0;
  transform: translateY(-50%) rotate(-28deg);
  font-family: var(--nx-d, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: var(--nx-a, #dfff3f);
  white-space: nowrap;
  background: rgba(7, 8, 13, 0.72);
  border-top: 1px solid color-mix(in srgb, var(--nx-a, #dfff3f) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--nx-a, #dfff3f) 70%, transparent);
  pointer-events: none;
}
.bey-box-page-actions {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 8px 0 2px;
}
.bey-box-page-actions .bey-store-cta { min-width: min(280px, 100%); }
.bey-box-page-actions .bey-store-cta:disabled { cursor: wait; opacity: 0.7; }
@keyframes crate-stage-in { from { background-color: #070b1400; backdrop-filter: blur(0); } }
@keyframes crate-lid-release { 0%, 15% { transform: translateY(0); } 28% { transform: translateY(-5px) rotate(-2deg); } 42% { transform: translateY(-2px); } 100% { transform: translate(-12px, -86px) rotate(-12deg); } }
@keyframes crate-seal-release { 40% { filter: brightness(3); } 100% { opacity: 0; transform: translate(135px, 172px) rotate(10.5deg); } }
@media (prefers-reduced-motion: reduce) { .crate-art, .crate-opening-stage, .crate-opening-reel, .crate-lid-piece, .crate-lock { animation-duration: 1ms !important; transition-duration: 1ms !important; } }