/* =========================================================
   MINECRAFT STORE — pixel / blocky theme
   No rounded corners anywhere. Everything is bevelled blocks.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  /* neutral base — near-black through to light gray */
  --stone-900: #0d0d0f;
  --stone-800: #141416;
  --stone-700: #1d1d21;
  --stone-600: #2a2a2f;
  --stone-500: #3a3a41;
  --stone-400: #57575f;
  --stone-300: #7d7d87;

  --text:      #ededf0;
  --muted:     #a4a4ad;
  --dim:       #74747e;

  /* primary accents — ember red and flame orange */
  --ember:     #e02a1b;
  --ember-lt:  #ff6a4d;
  --ember-dk:  #8f1409;
  --flame:     #ff8c1a;
  --flame-lt:  #ffc073;
  --flame-dk:  #b35300;

  /* rarity ramp, coolest -> hottest, all within red/orange/gray */
  --easy:      #b6bcc4;   /* pale steel  */
  --easy-dk:   #6e747c;
  --epic:      #ffc233;   /* amber       */
  --epic-dk:   #b07c00;
  --dark:      #4e4e58;   /* charcoal    */
  --dark-dk:   #26262d;
  --molten:    #ff7518;   /* orange      */
  --molten-dk: #a83d00;
  --stealzers: #ff2020;   /* red         */
  --stealzers-dk: #9c0000;
  --mystic:    #ff3355;   /* crimson     */
  --mystic-dk: #a1002a;

  --bevel: 4px;
  --shadow-hard: 0 6px 0 rgba(0, 0, 0, .55);
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--stone-900);
  /* subtle stone speckle, drawn in CSS so there are no image files */
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  color: var(--text);
  font-family: "VT323", "Lucida Console", Consolas, monospace;
  font-size: 21px;
  line-height: 1.55;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  overflow-x: hidden;
}

img, svg { display: block; image-rendering: pixelated; }

h1, h2, h3, h4, .pixel {
  font-family: "Press Start 2P", "VT323", monospace;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .5px;
  text-transform: uppercase;
}

h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 15px; }
h4 { font-size: 12px; }

a { color: var(--flame); text-decoration: none; }
a:hover { color: #fff; }

b, strong { color: #fff; font-weight: 400; }

.wrap { width: min(1180px, 92vw); margin: 0 auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
.dim { color: var(--dim); font-size: 18px; }

/* =========================================================
   BEVELLED BLOCK PANEL — the core Minecraft GUI look
   ========================================================= */
.panel {
  background: var(--stone-700);
  border: var(--bevel) solid;
  border-color: var(--stone-400) var(--stone-900) var(--stone-900) var(--stone-400);
  box-shadow: inset 0 0 0 var(--bevel) var(--stone-600);
  padding: 26px;
  position: relative;
}

.panel--flat { background: var(--stone-800); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-block;
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 15px 24px;
  color: #fff;
  background: var(--stone-500);
  border: var(--bevel) solid;
  border-color: var(--stone-300) #101014 #101014 var(--stone-300);
  cursor: pointer;
  text-align: center;
  transition: filter .08s steps(2), transform .08s steps(2);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
  user-select: none;
}
.btn:hover { filter: brightness(1.22); color: #fff; }
.btn:active {
  transform: translateY(3px);
  border-color: #101014 var(--stone-300) var(--stone-300) #101014;
}
.btn:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; }

.btn--primary {
  background: var(--ember);
  border-color: var(--ember-lt) var(--ember-dk) var(--ember-dk) var(--ember-lt);
}
.btn--primary:active { border-color: var(--ember-dk) var(--ember-lt) var(--ember-lt) var(--ember-dk); }

.btn--flame {
  background: var(--flame);
  color: #2b1400;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .35);
  border-color: var(--flame-lt) var(--flame-dk) var(--flame-dk) var(--flame-lt);
}
.btn--flame:active { border-color: var(--flame-dk) var(--flame-lt) var(--flame-lt) var(--flame-dk); }

.btn--sm  { font-size: 10px; padding: 11px 15px; }
.btn--wide { width: 100%; }
.btn--ghost { background: var(--stone-600); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--stone-800);
  border-bottom: var(--bevel) solid #101014;
  box-shadow: 0 var(--bevel) 0 var(--stone-600), 0 10px 24px rgba(0,0,0,.5);
}

/* ember strip across the very top */
.ember-strip {
  height: 10px;
  background:
    repeating-linear-gradient(90deg,
      var(--ember) 0 8px, var(--ember-dk) 8px 16px);
}

.nav {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 0;
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand__name {
  font-family: "Press Start 2P", monospace;
  font-size: 15px; color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.6);
}
.brand__ip { font-size: 16px; color: var(--ember); letter-spacing: 1px; }

.nav__links { display: flex; align-items: center; gap: 6px; }

.nav__link {
  font-family: "Press Start 2P", monospace;
  font-size: 11px; color: var(--muted);
  padding: 12px 14px;
  border: var(--bevel) solid transparent;
  text-transform: uppercase;
}
.nav__link:hover { color: #fff; background: var(--stone-600); }
.nav__link[aria-current="page"] {
  color: var(--flame);
  background: var(--stone-700);
  border-color: var(--stone-500) #101014 #101014 var(--stone-500);
}

/* cart pill */
.nav__cart { position: relative; }
.cart-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 24px; height: 24px;
  background: var(--stealzers);
  border: 3px solid #101014;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  display: none; align-items: center; justify-content: center;
  padding: 0 4px;
}
.cart-count.is-visible { display: flex; }

/* mobile menu toggle */
.nav__burger { display: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding: 92px 0 84px;
  text-align: center;
  overflow: hidden;
  border-bottom: var(--bevel) solid #101014;
  background:
    radial-gradient(900px 380px at 50% -10%, rgba(224, 42, 27, .28), transparent 70%),
    linear-gradient(180deg, #1a1113 0%, var(--stone-900) 100%);
}
/* pixel "sky" clouds */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 4px, transparent 4px 8px);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero h1 {
  font-size: clamp(24px, 5vw, 44px);
  color: #fff;
  text-shadow: 5px 5px 0 rgba(0,0,0,.65);
  margin-bottom: 20px;
}
.hero h1 .hl { color: var(--flame); }

.hero__sub {
  font-size: 24px; color: var(--muted);
  max-width: 680px; margin: 0 auto 34px;
}

.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* IP copy box */
.ip-box {
  display: inline-flex; align-items: stretch; gap: 0;
  margin-top: 38px;
  border: var(--bevel) solid;
  border-color: var(--stone-400) #101014 #101014 var(--stone-400);
  background: var(--stone-800);
}
.ip-box__label {
  padding: 14px 18px; color: var(--dim);
  font-family: "Press Start 2P", monospace; font-size: 10px;
  border-right: var(--bevel) solid var(--stone-600);
  display: flex; align-items: center;
}
.ip-box__ip {
  padding: 14px 20px; color: var(--ember);
  font-size: 24px; letter-spacing: 1px;
  display: flex; align-items: center;
}
.ip-box__btn {
  border: 0; border-left: var(--bevel) solid var(--stone-600);
  background: var(--stone-600); color: #fff;
  font-family: "Press Start 2P", monospace; font-size: 10px;
  padding: 0 18px; cursor: pointer;
}
.ip-box__btn:hover { background: var(--ember); }

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding: 74px 0; }
.section--alt { background: rgba(0, 0, 0, .22); border-block: var(--bevel) solid #101014; }

.section__head { text-align: center; margin-bottom: 46px; }
.section__head h2 { color: #fff; text-shadow: 4px 4px 0 rgba(0,0,0,.6); margin-bottom: 14px; }
.section__head p { color: var(--muted); max-width: 640px; margin: 0 auto; }

.eyebrow {
  display: inline-block;
  font-family: "Press Start 2P", monospace; font-size: 10px;
  color: var(--flame); letter-spacing: 2px;
  margin-bottom: 16px;
}

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* =========================================================
   PRODUCT CARDS
   ========================================================= */
.card {
  background: var(--stone-700);
  border: var(--bevel) solid;
  border-color: var(--stone-400) #101014 #101014 var(--stone-400);
  box-shadow: inset 0 0 0 var(--bevel) var(--stone-600);
  padding: 0;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .1s steps(2);
}
.card:hover { transform: translateY(-5px); }

.card__top {
  padding: 30px 24px 24px;
  text-align: center;
  border-bottom: var(--bevel) solid #101014;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  position: relative;
}

.card__icon { margin: 0 auto 18px; width: 76px; height: 76px; }
.card__icon svg { width: 100%; height: 100%; }

.card__name { color: #fff; margin-bottom: 8px; text-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.card__tagline { color: var(--muted); font-size: 19px; }

.card__crate {
  display: inline-block; margin-top: 10px;
  font-family: "Press Start 2P", monospace; font-size: 9px;
  color: var(--dim);
}

.card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card__blurb { color: var(--muted); margin-bottom: 20px; font-size: 20px; }

.card__price {
  font-family: "Press Start 2P", monospace;
  font-size: 26px; color: var(--flame);
  text-shadow: 3px 3px 0 rgba(0,0,0,.6);
  margin-bottom: 4px;
}
.card__price-note { color: var(--dim); font-size: 17px; margin-bottom: 20px; }

/* perk / drop lists */
.plist { list-style: none; margin-bottom: 24px; }
.plist li {
  position: relative; padding-left: 30px; margin-bottom: 11px;
  color: var(--muted); font-size: 20px; line-height: 1.4;
}
.plist li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 12px;
  background: var(--ember);
  box-shadow: inset -3px -3px 0 var(--ember-dk);
}
.plist--drops li::before { background: var(--flame); box-shadow: inset -3px -3px 0 var(--flame-dk); }

.card__actions { margin-top: auto; display: flex; gap: 10px; align-items: stretch; }

/* badge ribbon */
.badge {
  position: absolute; top: 0; right: 0;
  font-family: "Press Start 2P", monospace; font-size: 9px;
  padding: 8px 12px;
  background: var(--flame); color: #2b1400;
  border-left: 3px solid #101014; border-bottom: 3px solid #101014;
  z-index: 2;
}

/* ---- rarity accents (applied to .card / .card__top) ---- */
.r-easy      .card__top { box-shadow: inset 0 -6px 0 var(--easy); }
.r-epic      .card__top { box-shadow: inset 0 -6px 0 var(--epic); }
.r-dark      .card__top { box-shadow: inset 0 -6px 0 var(--dark); }
.r-molten    .card__top { box-shadow: inset 0 -6px 0 var(--molten); }
.r-stealzers .card__top { box-shadow: inset 0 -6px 0 var(--stealzers); }
.r-mystic    .card__top { box-shadow: inset 0 -6px 0 var(--mystic); }

.r-easy      .card__name { color: var(--easy); }
.r-epic      .card__name { color: var(--epic); }
.r-dark      .card__name { color: #b9b9c9; }
.r-molten    .card__name { color: var(--molten); }
.r-stealzers .card__name { color: var(--stealzers); }
.r-mystic    .card__name { color: var(--mystic); }

.r-easy:hover      { border-top-color: var(--easy); border-left-color: var(--easy); }
.r-epic:hover      { border-top-color: var(--epic); border-left-color: var(--epic); }
.r-dark:hover      { border-top-color: var(--dark); border-left-color: var(--dark); }
.r-molten:hover    { border-top-color: var(--molten); border-left-color: var(--molten); }
.r-stealzers:hover { border-top-color: var(--stealzers); border-left-color: var(--stealzers); }
.r-mystic:hover    { border-top-color: var(--mystic); border-left-color: var(--mystic); }

/* =========================================================
   QUANTITY STEPPER
   ========================================================= */
.qty {
  display: flex; align-items: stretch;
  border: var(--bevel) solid;
  border-color: var(--stone-400) #101014 #101014 var(--stone-400);
  background: var(--stone-800);
  flex: 0 0 auto;
}
.qty button {
  width: 40px; border: 0; cursor: pointer;
  background: var(--stone-600); color: #fff;
  font-family: "Press Start 2P", monospace; font-size: 12px;
}
.qty button:hover { background: var(--stone-500); }
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty input {
  width: 52px; border: 0; text-align: center;
  background: var(--stone-800); color: #fff;
  font-family: "Press Start 2P", monospace; font-size: 12px;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* =========================================================
   FEATURE TILES (home)
   ========================================================= */
.feature { text-align: center; padding: 30px 22px; }
.feature__icon {
  width: 58px; height: 58px; margin: 0 auto 18px;
}
.feature h3 { color: #fff; margin-bottom: 12px; font-size: 13px; }
.feature p { color: var(--muted); font-size: 20px; }

/* =========================================================
   CRATE STRIP (home)
   ========================================================= */
.crate-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.crate-tile {
  padding: 22px 12px; text-align: center;
  background: var(--stone-800);
  border: var(--bevel) solid;
  border-color: var(--stone-500) #101014 #101014 var(--stone-500);
  transition: transform .1s steps(2);
}
.crate-tile:hover { transform: translateY(-4px); }
.crate-tile svg { width: 54px; height: 54px; margin: 0 auto 14px; }
.crate-tile__name { font-family: "Press Start 2P", monospace; font-size: 10px; color: #fff; }
.crate-tile__price { color: var(--flame); font-size: 20px; margin-top: 8px; }

/* =========================================================
   COMPARE TABLE
   ========================================================= */
.table-scroll { overflow-x: auto; }
table.compare {
  width: 100%; border-collapse: collapse; min-width: 620px;
  background: var(--stone-800);
}
table.compare th, table.compare td {
  padding: 16px 18px; text-align: left;
  border-bottom: 3px solid var(--stone-700);
}
table.compare thead th {
  font-family: "Press Start 2P", monospace; font-size: 11px;
  background: var(--stone-600); color: #fff;
  border-bottom: var(--bevel) solid #101014;
}
table.compare thead th:nth-child(3) { color: var(--epic); }
table.compare thead th:nth-child(4) { color: var(--mystic); }
table.compare td { color: var(--muted); }
table.compare td:first-child { color: var(--text); }
table.compare tbody tr:hover td { background: rgba(255,255,255,.035); }
.tick { color: var(--ember); font-size: 24px; }
.cross { color: #5a5a68; font-size: 24px; }

/* =========================================================
   CART
   ========================================================= */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; }

.cart-row {
  display: grid;
  grid-template-columns: 66px 1fr auto auto 46px;
  gap: 18px; align-items: center;
  padding: 20px;
  background: var(--stone-800);
  border: var(--bevel) solid;
  border-color: var(--stone-500) #101014 #101014 var(--stone-500);
  margin-bottom: 14px;
}
.cart-row__icon svg { width: 56px; height: 56px; }
.cart-row__name { font-family: "Press Start 2P", monospace; font-size: 13px; color: #fff; margin-bottom: 8px; }
.cart-row__meta { color: var(--dim); font-size: 18px; }
.cart-row__total {
  font-family: "Press Start 2P", monospace; font-size: 15px;
  color: var(--flame); min-width: 92px; text-align: right;
}
.cart-row__remove {
  width: 42px; height: 42px; cursor: pointer;
  background: var(--stone-600); color: var(--muted);
  border: 3px solid; border-color: var(--stone-400) #101014 #101014 var(--stone-400);
  font-family: "Press Start 2P", monospace; font-size: 12px;
}
.cart-row__remove:hover { background: var(--stealzers-dk); color: #fff; }

.summary-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 0; color: var(--muted); font-size: 20px;
  border-bottom: 3px solid var(--stone-600);
}
.summary-line--total {
  border-bottom: 0; padding-top: 20px;
  font-family: "Press Start 2P", monospace; font-size: 14px; color: #fff;
}
.summary-line--total span:last-child { color: var(--flame); font-size: 20px; }

.empty-cart { text-align: center; padding: 70px 26px; }
.empty-cart svg { width: 90px; height: 90px; margin: 0 auto 26px; opacity: .55; }

/* username input */
.field { margin-bottom: 20px; }
.field label {
  display: block; margin-bottom: 10px;
  font-family: "Press Start 2P", monospace; font-size: 10px; color: var(--muted);
}
.field input[type="text"] {
  width: 100%; padding: 14px 16px;
  background: var(--stone-900); color: #fff;
  font-family: "VT323", monospace; font-size: 21px;
  border: var(--bevel) solid;
  border-color: #101014 var(--stone-400) var(--stone-400) #101014;
}
.field input:focus { outline: 3px solid var(--flame); outline-offset: 2px; }
.field small { display: block; margin-top: 8px; color: var(--dim); font-size: 17px; }

/* =========================================================
   NOTICE / ALERT BOX
   ========================================================= */
.notice {
  padding: 18px 20px;
  background: rgba(255, 204, 51, .09);
  border: 3px solid var(--flame-dk);
  color: #f0d99a; font-size: 19px;
  margin-bottom: 22px;
}
.notice b { color: var(--flame); }
.notice--danger { background: rgba(255, 59, 59, .1); border-color: var(--stealzers-dk); color: #f5b5b5; }
.notice--danger b { color: var(--stealzers); }

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-item {
  background: var(--stone-800);
  border: var(--bevel) solid;
  border-color: var(--stone-500) #101014 #101014 var(--stone-500);
  margin-bottom: 14px;
}
.faq-q {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: #fff;
  font-family: "Press Start 2P", monospace; font-size: 12px; line-height: 1.6;
  padding: 22px; display: flex; gap: 18px; align-items: center;
}
.faq-q:hover { background: rgba(255,255,255,.04); }
.faq-q__mark {
  margin-left: auto; color: var(--flame); flex: 0 0 auto;
  transition: transform .12s steps(2);
}
.faq-item.is-open .faq-q__mark { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 22px 24px; color: var(--muted); font-size: 20px; }
.faq-item.is-open .faq-a { display: block; }

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner {
  text-align: center; padding: 62px 34px;
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255, 140, 26, .16), transparent 70%),
    var(--stone-700);
  border: var(--bevel) solid;
  border-color: var(--stone-400) #101014 #101014 var(--stone-400);
}
.cta-banner h2 { color: #fff; margin-bottom: 16px; text-shadow: 4px 4px 0 rgba(0,0,0,.6); }
.cta-banner p { color: var(--muted); margin-bottom: 30px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--stone-800);
  border-top: var(--bevel) solid var(--stone-600);
  padding: 54px 0 30px;
  margin-top: 20px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; }
.footer-col h4 { color: #fff; margin-bottom: 18px; font-size: 11px; }
.footer-col a, .footer-col p { display: block; color: var(--muted); font-size: 19px; margin-bottom: 10px; }
.footer-col a:hover { color: var(--flame); }
.footer-bottom {
  border-top: 3px solid var(--stone-600); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--dim); font-size: 17px;
}

/* =========================================================
   TOAST
   ========================================================= */
.toast-stack {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}
.toast {
  background: var(--stone-700);
  border: var(--bevel) solid;
  border-color: var(--ember) #101014 #101014 var(--ember);
  padding: 16px 20px; color: #fff;
  font-family: "Press Start 2P", monospace; font-size: 10px; line-height: 1.6;
  box-shadow: var(--shadow-hard);
  animation: toast-in .16s steps(3);
  max-width: 330px;
}
@keyframes toast-in { from { transform: translateY(16px); opacity: 0; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .crate-strip { grid-template-columns: repeat(3, 1fr); }
  .cart-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 20px; }
  h1 { font-size: 22px; }
  h2 { font-size: 17px; }

  .nav__burger {
    display: block; background: var(--stone-600); color: #fff;
    border: 3px solid; border-color: var(--stone-400) #101014 #101014 var(--stone-400);
    font-family: "Press Start 2P", monospace; font-size: 12px;
    padding: 12px 14px; cursor: pointer;
  }
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--stone-800);
    border-bottom: var(--bevel) solid #101014;
    padding: 8px;
  }
  .nav__links.is-open { display: flex; }
  .nav__link { padding: 16px; }
  .nav__cart { margin-top: 6px; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .crate-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }

  .hero { padding: 62px 0 56px; }
  .section { padding: 52px 0; }

  .ip-box { flex-direction: column; width: 100%; }
  .ip-box__label { border-right: 0; border-bottom: var(--bevel) solid var(--stone-600); justify-content: center; }
  .ip-box__ip { justify-content: center; }
  .ip-box__btn { border-left: 0; border-top: var(--bevel) solid var(--stone-600); padding: 15px; }

  .cart-row { grid-template-columns: 56px 1fr 46px; row-gap: 14px; }
  .cart-row__qty { grid-column: 2; }
  .cart-row__total { grid-column: 3 / -1; text-align: left; }

  .btn { font-size: 11px; padding: 14px 18px; }
  .toast-stack { left: 16px; right: 16px; align-items: stretch; }
  .toast { max-width: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   LIVE SERVER STATUS
   ========================================================= */
.status-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap;
  padding: 16px 22px; margin-top: 28px;
  background: var(--stone-800);
  border: var(--bevel) solid;
  border-color: var(--stone-500) #000 #000 var(--stone-500);
}
.status-item { display: flex; align-items: center; gap: 10px; }
.status-label {
  font-family: "Press Start 2P", monospace; font-size: 9px; color: var(--dim);
}
.status-value {
  font-family: "Press Start 2P", monospace; font-size: 12px; color: #fff;
}

/* pulsing dot */
.status-dot {
  width: 12px; height: 12px; flex: 0 0 auto;
  background: var(--dim);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.35);
}
.status-dot.is-online  { background: #46d160; animation: pulse 1.6s steps(2) infinite; }
.status-dot.is-offline { background: var(--stealzers); }
@keyframes pulse { 50% { opacity: .35; } }

.status-value.is-online { color: #46d160; }
.status-value.is-offline { color: var(--stealzers); }

.status-count { font-variant-numeric: tabular-nums; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }

.shot {
  position: relative; display: block; cursor: pointer;
  background: var(--stone-800);
  border: var(--bevel) solid;
  border-color: var(--stone-400) #000 #000 var(--stone-400);
  overflow: hidden;
  padding: 0; width: 100%; text-align: left;
  transition: transform .1s steps(2);
}
.shot:hover { transform: translateY(-5px); border-top-color: var(--flame); border-left-color: var(--flame); }
.shot:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; }

.shot img {
  width: 100%; height: auto; display: block;
  image-rendering: auto;              /* photos, not sprites */
  transition: filter .12s steps(2);
}
.shot:hover img { filter: brightness(1.12); }

.shot__label {
  display: block;
  padding: 16px 18px;
  border-top: var(--bevel) solid #000;
  background: var(--stone-800);
}
.shot__title {
  display: block;
  font-family: "Press Start 2P", monospace; font-size: 11px;
  color: #fff; margin-bottom: 8px;
}
.shot__hint { display: block; color: var(--dim); font-size: 17px; }

.shot__zoom {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.72);
  border: 3px solid var(--stone-400);
  color: var(--flame);
  font-family: "Press Start 2P", monospace; font-size: 10px;
  padding: 7px 9px;
  opacity: 0; transition: opacity .12s steps(2);
}
.shot:hover .shot__zoom, .shot:focus-visible .shot__zoom { opacity: 1; }

/* ---- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, .93);
  display: none; align-items: center; justify-content: center;
  padding: 26px;
}
.lightbox.is-open { display: flex; }

.lightbox__inner { width: min(1200px, 100%); max-height: 100%; overflow: auto; }

.lightbox__frame {
  border: var(--bevel) solid;
  border-color: var(--stone-400) #000 #000 var(--stone-400);
  background: #000;
}
.lightbox__frame img { width: 100%; height: auto; image-rendering: auto; }

.lightbox__bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--stone-800);
  border: var(--bevel) solid;
  border-top: 0;
  border-color: var(--stone-400) #000 #000 var(--stone-400);
}
.lightbox__title {
  font-family: "Press Start 2P", monospace; font-size: 12px; color: #fff;
}
.lightbox__caption { color: var(--muted); font-size: 19px; flex: 1 1 260px; }
.lightbox__count { color: var(--dim); font-size: 18px; }

.lightbox__nav { display: flex; gap: 10px; margin-left: auto; }
.lb-btn {
  width: 46px; height: 46px; cursor: pointer;
  background: var(--stone-600); color: #fff;
  border: 3px solid; border-color: var(--stone-400) #000 #000 var(--stone-400);
  font-family: "Press Start 2P", monospace; font-size: 12px;
}
.lb-btn:hover { background: var(--ember); }
.lb-btn--close:hover { background: var(--stealzers-dk); }

/* =========================================================
   CRATE SPINNER — the "what could I win" demo
   ========================================================= */
.spinner {
  margin-top: 18px;
  border: var(--bevel) solid;
  border-color: #000 var(--stone-400) var(--stone-400) #000;
  background: var(--stone-900);
  overflow: hidden;
  position: relative;
  height: 74px;
}
/* the centre marker the reel lands under */
.spinner::before, .spinner::after {
  content: ""; position: absolute; left: 50%; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  z-index: 3;
}
.spinner::before { top: 0; border-top: 9px solid var(--flame); }
.spinner::after  { bottom: 0; border-bottom: 9px solid var(--flame); }

.spinner__reel {
  /* absolute so the long reel never widens the card */
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex;
  will-change: transform;
}
.spinner__cell {
  flex: 0 0 150px; width: 150px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px 10px;
  border-right: 3px solid var(--stone-700);
  font-size: 17px; line-height: 1.25; color: var(--muted);
}
.spinner__cell b { color: #fff; }
.spinner.is-done .spinner__cell--won {
  background: rgba(255, 140, 26, .16);
  color: #fff;
}

.spin-result {
  margin-top: 12px; text-align: center;
  font-size: 19px; color: var(--flame);
  min-height: 26px;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .34s ease-out, transform .34s ease-out;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   BACK TO TOP
   ========================================================= */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 54px; height: 54px; cursor: pointer;
  background: var(--ember); color: #fff;
  border: var(--bevel) solid;
  border-color: var(--ember-lt) #000 #000 var(--ember-lt);
  font-family: "Press Start 2P", monospace; font-size: 14px;
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow-hard);
}
.to-top.is-visible { display: flex; }
.to-top:hover { filter: brightness(1.2); }
.to-top:active { transform: translateY(3px); }

/* keep the toast stack clear of the button */
.toast-stack { bottom: 88px; }

/* =========================================================
   STAT COUNTERS
   ========================================================= */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.stat {
  text-align: center; padding: 26px 16px;
  background: var(--stone-800);
  border: var(--bevel) solid;
  border-color: var(--stone-500) #000 #000 var(--stone-500);
}
.stat__num {
  font-family: "Press Start 2P", monospace; font-size: 22px;
  color: var(--flame); margin-bottom: 12px;
  text-shadow: 3px 3px 0 rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: "Press Start 2P", monospace; font-size: 9px;
  color: var(--dim); line-height: 1.7;
}

/* =========================================================
   KEY FILTER BAR
   ========================================================= */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 34px;
}
.filter-btn {
  font-family: "Press Start 2P", monospace; font-size: 10px;
  padding: 12px 16px; cursor: pointer; color: var(--muted);
  background: var(--stone-700);
  border: 3px solid; border-color: var(--stone-500) #000 #000 var(--stone-500);
  text-transform: uppercase;
}
.filter-btn:hover { color: #fff; background: var(--stone-600); }
.filter-btn.is-active {
  background: var(--ember); color: #fff;
  border-color: var(--ember-lt) #000 #000 var(--ember-lt);
}
.is-filtered-out { display: none; }

/* =========================================================
   RESPONSIVE ADDITIONS
   ========================================================= */
@media (max-width: 1000px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .status-bar { gap: 14px; padding: 14px; }
  .status-label { font-size: 8px; }
  .status-value { font-size: 10px; }
  .lightbox { padding: 12px; }
  .lightbox__bar { padding: 14px; }
  .lightbox__nav { margin-left: 0; width: 100%; justify-content: space-between; }
  .to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .toast-stack { bottom: 74px; }
  .spinner__cell { flex-basis: 120px; width: 120px; font-size: 16px; }
}

/* demo spinner block on key cards */
.card__demo { margin-bottom: 22px; }

/* =========================================================
   OVERFLOW GUARDS
   Grid and flex children default to min-width:auto, which
   means wide content (tables, the spinner reel) can force a
   column wider than the screen instead of scrolling inside
   its own box. Resetting to 0 lets them shrink properly.
   ========================================================= */
.grid > *,
.cart-layout > *,
.crate-strip > *,
.gallery-grid > * { min-width: 0; }

.card, .panel, .card__body, .card__top { min-width: 0; }

.table-scroll { max-width: 100%; }

/* long words / IPs must wrap rather than push the page wide */
.card__name, .cart-row__name, .shot__title,
.brand__ip, .ip-box__ip { overflow-wrap: anywhere; }

/* =========================================================
   NAV BREAKPOINT
   Six nav items plus the brand no longer fit before the old
   720px mobile breakpoint, so the bar overflowed the page on
   tablets and small laptops. Switch to the burger sooner.
   ========================================================= */
@media (max-width: 960px) {
  .nav { flex-wrap: wrap; }

  .nav__burger {
    display: block;
    background: var(--stone-600); color: #fff;
    border: 3px solid;
    border-color: var(--stone-400) #000 #000 var(--stone-400);
    font-family: "Press Start 2P", monospace; font-size: 12px;
    padding: 12px 14px; cursor: pointer;
  }

  .nav__links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--stone-800);
    border-bottom: var(--bevel) solid #000;
    padding: 8px;
  }
  .nav__links.is-open { display: flex; }
  .nav__link { padding: 16px; }
  .nav__cart { margin-top: 6px; }
}

/* =========================================================
   DROP ODDS
   Shown only when config.js supplies real crate weights.
   ========================================================= */
.odds {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--stone-600);
  border: 2px solid var(--stone-500);
  color: var(--flame);
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  vertical-align: middle;
  white-space: nowrap;
}

/* the rare one the server broadcasts to everyone */
.plist li.drop--mythic::before {
  background: var(--stealzers);
  box-shadow: inset -3px -3px 0 var(--stealzers-dk);
}
.plist li.drop--mythic .odds {
  color: var(--stealzers);
  border-color: var(--stealzers-dk);
}

/* rare-tier drop — a step below mythic */
.plist li.drop--rare::before {
  background: var(--flame);
  box-shadow: inset -3px -3px 0 var(--flame-dk);
}
.plist li.drop--rare .odds {
  color: var(--flame);
  border-color: var(--flame-dk);
}

/* =========================================================
   HEADER LIVE PILL — server status on every page
   ========================================================= */
.brand__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  min-height: 12px;          /* reserve space so the header doesn't jump */
}
.brand__status .status-dot {
  width: 9px;
  height: 9px;
}
.brand:hover .brand__status { color: var(--text); }

@media (max-width: 720px) {
  .brand__status { font-size: 15px; }
}