/* ==========================================================
   GRPE.FUN — design tokens
   Palette: near-black base + single acid-green accent, voxel motif.
   ========================================================== */
:root{
  --bg: #DDF5E5;
  --bg-alt: #F4FFF7;
  --surface: rgba(248, 255, 250, .92);
  --surface-hover: #E8F8EC;
  --border: #B7DCC2;
  --border-light: #8BC69B;
  --green: #167542;
  --green-bright: #0C6032;
  --green-dim: #8AD59D;
  --green-glow: rgba(22, 117, 66, .24);
  --text: #123A25;
  --text-muted: #4C765C;
  --text-faint: #739684;
  --danger: #E2574C;
  --warning: #E2B84C;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --header-h: 68px;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  background: radial-gradient(circle at 78% -10%, #B6EAC4 0, transparent 38%), var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
a{ color: inherit; }
::selection{ background: var(--green-dim); color:#fff; }

/* subtle voxel-grid backdrop used behind hero-ish sections */
.voxel-bg{
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
}

/* ==========================================================
   SPLASH SCREEN
   ========================================================== */
#splash{
  position: fixed; inset:0; z-index: 100;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(22,117,66,.12), transparent 70%),
    var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .5s ease, visibility .5s ease;
}
#splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }

.splash-inner{
  display:flex; flex-direction:column; align-items:center;
  gap:18px; text-align:center; padding: 24px;
}

#voxel-stage{
  position: relative;
  width: 190px; height: 244px;
  margin-bottom: 4px;
  transition: filter .6s ease;
}
#mascot-source{ display:none !important; }
#voxel-stage.assembled{
  filter: drop-shadow(0 0 26px var(--green-glow));
}
.pixel-tile{
  position:absolute;
  background-repeat: no-repeat;
  border-radius: 1px;
  transition: transform .9s cubic-bezier(.16,.9,.2,1.15), opacity .5s ease;
  will-change: transform;
}
.pixel-tile-solid{
  background-image: none !important;
  background: linear-gradient(160deg, var(--green-bright), var(--green-dim));
  border-radius: 3px;
  box-shadow: 0 0 10px var(--green-glow), inset 0 0 0 1px rgba(255,255,255,.15);
}

.splash-logo{
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: .02em;
  margin: 0;
  opacity:0;
  transform: translateY(8px);
  animation: splashTextIn .6s ease forwards;
  animation-delay: 1.05s;
}
.splash-logo .dot{ color: var(--green); }
.splash-tag{
  margin:0; color: var(--text-muted); font-size:.95rem;
  opacity:0; transform: translateY(8px);
  animation: splashTextIn .6s ease forwards;
  animation-delay: 1.2s;
}
@keyframes splashTextIn{ to{ opacity:1; transform:none; } }

.splash-bar{
  width: 220px; height:4px; border-radius: 4px;
  background: var(--border); overflow:hidden;
  opacity:0; animation: splashTextIn .5s ease forwards; animation-delay: 1.3s;
}
.splash-bar-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--green-dim), var(--green-bright));
  transition: width 1.1s cubic-bezier(.3,.7,.2,1);
}
.splash-skip{
  margin-top: 6px;
  background:none; border:none; color: var(--text-faint);
  font-size:.85rem; font-family: var(--font-mono);
  opacity:0; animation: splashTextIn .5s ease forwards; animation-delay: 1.4s;
}
.splash-skip:hover{ color: var(--green); }

@media (prefers-reduced-motion: reduce){
  .pixel-tile{ transition: none !important; }
  .splash-logo, .splash-tag, .splash-bar, .splash-skip{ animation: none !important; opacity:1 !important; transform:none !important; }
}

/* ==========================================================
   TOPBAR
   ========================================================== */
.topbar{
  position: sticky; top:0; z-index: 20;
  height: var(--header-h);
  background: rgba(244,255,247,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  max-width: 1240px; margin:0 auto; padding: 0 24px;
  height:100%; display:flex; align-items:center; gap: 24px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right: 8px; background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer; transition:transform .15s ease; }
.brand:hover{ transform:translateY(-1px); }
.brand:active{ transform:translateY(0) scale(.97); }
.brand-mark{
  width:32px; height:32px; object-fit: contain;
  flex-shrink:0;
  filter: drop-shadow(0 0 8px var(--green-glow));
}
.brand-text{
  font-family: var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.01em;
}
.brand-text .dot{ color: var(--green); }

.ip-chip{
  display:flex; align-items:center; gap:10px;
  background: var(--surface); border:1px solid var(--border);
  border-radius: 999px; padding: 7px 16px;
  font-family: var(--font-mono); font-size:.85rem;
  transition: border-color .2s ease, background .2s ease, transform .35s ease, opacity .35s ease;
}
.ip-chip:hover{ border-color: var(--green-dim); background: var(--surface-hover); }
.ip-label{ color: var(--text-faint); }
.ip-value{ color: var(--green-bright); font-weight:500; }
.ip-copy-icon{ color: var(--text-faint); }

.cart-chip{
  display:flex; align-items:center; gap:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); border-radius:999px; padding:8px 14px;
  font-family:var(--font-body); transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.cart-chip:hover{ transform:translateY(-2px); border-color:var(--green); background:var(--surface-hover); }
.cart-chip b{ min-width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-size:.72rem; }

.topbar-links{ margin-left:auto; display:flex; gap: 22px; }
.topbar-link{ text-decoration:none; color: var(--text-muted); font-size:.92rem; transition: color .15s; }
.topbar-link:hover{ color: var(--text); }

@media (max-width: 640px){
  .topbar-links{ display:none; }
  .ip-label{ display:none; }
}

/* ==========================================================
   LAYOUT
   ========================================================== */
.layout{
  max-width: 1180px; margin: 0 auto;
  padding: 48px 32px 100px;
  display:flex; flex-direction:column; gap: 56px;
}
@media (max-width: 640px){
  .layout{ padding: 28px 18px 80px; gap: 40px; }
}

.section-title{
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight:600; letter-spacing:-.01em; margin: 0 0 20px;
}
.eyebrow{ color:var(--green); font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.1em; margin:0 0 8px; }

/* ---------- Наши серверы ---------- */
.servers-list{
  display:grid; grid-template-columns:repeat(2, minmax(260px, 420px)); justify-content:center;
  gap: 16px;
}
.server-card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px 22px;
  width:100%;
}
.server-card-griefjava{ grid-column:1 / -1; justify-self:center; max-width:420px; }
.server-card-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;
}
.server-name{ font-weight:600; font-size:1rem; }
.server-ip{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-mono); font-size:.82rem; color: var(--green-bright);
}
.server-bar{
  height:5px; border-radius:4px; background: var(--border); overflow:hidden; margin-bottom:10px;
}
.server-bar-fill{
  height:100%; background: linear-gradient(90deg, var(--green-dim), var(--green-bright));
  transition: width .5s ease;
}
.server-status{ margin:0; font-size:.85rem; color: var(--text); }
.server-status.muted{ color: var(--text-faint); }
.servers-error{ color: var(--text-faint); font-size:.9rem; }

.game-intro{ display:grid; grid-template-columns:180px minmax(0,1fr) auto; align-items:center; gap:28px; overflow:hidden; min-height:210px; padding:20px 42px 20px 0; background:var(--bg-alt); border:1px solid var(--border); border-radius:18px; box-shadow:0 18px 40px rgba(22,117,66,.1); }
.game-intro img{ align-self:end; width:180px; max-height:240px; object-fit:contain; filter:drop-shadow(0 12px 14px rgba(22,117,66,.2)); }
.game-intro h2{ font-family:var(--font-display); font-size:clamp(1.35rem,2.5vw,2rem); margin:0 0 8px; }.game-intro p:not(.eyebrow){ color:var(--text-muted); margin:0; line-height:1.5; }
.intro-action{ display:flex; align-items:center; gap:12px; padding:12px 16px; color:#fff; background:var(--green); border-radius:8px; text-decoration:none; font-weight:600; white-space:nowrap; }.intro-action span{ font-size:1.25rem; transition:transform .2s ease; }.intro-action:hover span{ transform:translateX(4px); }

/* ---------- Наши товары: заголовок + поиск ---------- */
.shop-heading-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px;
}
.shop-heading-row .section-title{ margin:0; }

.search-box{
  display:flex; align-items:center; gap:8px;
  background: var(--surface); border:1px solid var(--border);
  border-radius: 999px; padding: 4px 6px 4px 16px;
}
.search-input{
  background:none; border:none; outline:none; color: var(--text);
  font-size:.9rem; width: 160px; font-family: var(--font-body);
}
.search-input::placeholder{ color: var(--text-faint); }
.search-btn{
  background: var(--green-dim); color:#08130D; border:none; border-radius:999px;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition: background .15s ease;
}
.search-btn:hover{ background: var(--green); }
@media (max-width: 540px){
  .shop-heading-row{ flex-direction:column; align-items:stretch; }
  .search-input{ width:100%; }
  .servers-list{ grid-template-columns:minmax(0, 540px); }
}

/* ---------- Плитки категорий ---------- */
.cat-pills{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 26px;
}
.pill{
  background: var(--surface); border:1px solid var(--border);
  color: var(--text-muted); font-size:.85rem; font-weight:500;
  border-radius:999px; padding: 9px 18px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pill:hover{ color: var(--text); border-color: var(--border-light); }
.pill.active{
  background: var(--green-dim); border-color: var(--green-dim); color:#08130D; font-weight:600;
}

.empty-state{ color: var(--text-faint); font-size:.95rem; padding: 30px 0; text-align:center; }


/* ==========================================================
   PRODUCT GRID / CARDS
   ========================================================== */
.product-grid{
  display:flex; flex-direction:column; gap:28px;
}
.category-block{ display:flex; flex-direction:column; gap:18px; }.category-block-heading{ border-left:4px solid var(--green); padding-left:14px; }.category-block-heading .eyebrow{ margin-bottom:4px; }.category-block-heading h3{ margin:0; font-size:1rem; color:var(--text-muted); font-weight:500; }.featured-scroll{ display:grid; grid-template-columns:minmax(0,1fr); }.product-group > h3{ margin:0 0 10px; color:var(--green); font-size:1rem; }.category-item-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; }.currency-featured{ position:relative; min-height:190px; border-color:var(--border-light); background:linear-gradient(100deg,#F7FFF9,#D8F3DF); box-shadow:0 14px 32px rgba(22,117,66,.12); overflow:hidden; }.currency-featured::after{ content:''; position:absolute; width:220px; height:220px; right:-50px; top:-75px; border:1px solid rgba(22,117,66,.18); border-radius:50%; box-shadow:0 0 0 18px rgba(22,117,66,.05),0 0 0 38px rgba(22,117,66,.04); animation:scrollPulse 5s ease-in-out infinite; pointer-events:none; }.currency-featured .card-media{ width:155px; height:155px; border-radius:24px; background:linear-gradient(145deg,#B8EBC4,#71CF8B); transform:rotate(-3deg); box-shadow:8px 10px 0 rgba(22,117,66,.1); }.currency-featured .card-name{ font-size:1.35rem; }.currency-featured .card-content{ position:relative; z-index:1; }.scroll-buy-btn{ align-self:flex-start; border:0; border-radius:8px; padding:11px 18px; background:var(--green); color:#fff; font-weight:700; font-size:.9rem; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }.scroll-buy-btn span{ display:inline-block; margin-left:10px; transition:transform .2s ease; }.scroll-buy-btn:hover{ background:var(--green-bright); transform:translateY(-2px); box-shadow:0 8px 18px rgba(22,117,66,.2); }.scroll-buy-btn:hover span{ transform:translateX(4px); }@keyframes scrollPulse{ 50%{ transform:scale(1.08); opacity:.65; } }

.product-card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display:flex; flex-direction:row; align-items:stretch;
  overflow:hidden; padding: 12px;
  gap: 14px;
  animation: productReveal .48s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--card-index, 0) * 55ms);
  transition: border-color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.product-card:hover{ border-color: var(--border-light); transform: translateY(-5px); box-shadow: 0 14px 28px rgba(0,0,0,.2); }
@keyframes productReveal{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }

.card-media{
  position:relative; width:96px; height:96px; flex-shrink:0;
  border-radius: var(--radius-sm); overflow:hidden;
  background: linear-gradient(155deg, #D2F0DA 0%, #B9E5C5 100%);
  display:flex; align-items:center; justify-content:center;
}
.card-img{
  width:100%; height:100%; padding:0; object-fit:contain; object-position:center; transform:scale(1.12);
  filter: grayscale(100%) contrast(1.02) brightness(.92);
  transition: filter .4s ease, transform .4s ease;
}
.product-card:hover .card-img{
  filter: grayscale(0%) brightness(1);
  transform:scale(1.17);
}
.card-media-glyph{
  width:40px; height:40px; opacity:.75;
  transition: opacity .3s ease;
}
.product-card:hover .card-media-glyph{ opacity:1; }

.discount-badge{
  position:absolute; top:6px; left:6px;
  background: var(--danger); color:#fff; font-size:.68rem; font-weight:700;
  padding: 3px 7px; border-radius: 999px; line-height:1;
}

.card-content{
  flex-grow:1; min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap: 6px;
}

.card-top-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.05em;
  color: var(--green); background: rgba(82,209,124,.1);
  padding: 3px 8px; border-radius: 999px;
}
.cart-btn{
  background:none; border:1px solid var(--border-light); color: var(--green);
  width:30px; height:30px; border-radius: var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, border-color .15s ease;
}
.cart-btn:hover{ background: var(--green-dim); border-color: var(--green-dim); color:#08130D; }

.card-name{ font-family: var(--font-display); font-size:1.02rem; font-weight:700; margin:0; letter-spacing:-.005em; color: var(--text); }

.card-price-row{ display:flex; align-items:baseline; gap:8px; }
.card-price{ font-family: var(--font-mono); color: var(--green-bright); font-weight:600; font-size:1rem; }
.card-price-old{ font-family: var(--font-mono); color: var(--text-faint); font-size:.8rem; text-decoration: line-through; }

.card-slider{ margin: 2px 0; }
.card-range{
  width:100%; accent-color: var(--green); height:4px;
  background: var(--border); border-radius:4px; display:block;
}
.card-range,.range-input{ appearance:none; -webkit-appearance:none; display:block; width:100%; height:25px; padding:0; margin:3px 0 4px; accent-color:#145C35; cursor:pointer; border:0; border-radius:12px; background:linear-gradient(90deg,#145C35 0 var(--range-progress, 0%),#C7EBD0 var(--range-progress, 0%) 100%) center calc(50% + 6px) / 100% 10px no-repeat; box-shadow:none; }
.card-range::-webkit-slider-thumb,.range-input::-webkit-slider-thumb{ width:23px; height:23px; -webkit-appearance:none; appearance:none; border:4px solid #145C35; border-radius:50%; background:#F4FFF7; box-shadow:0 3px 10px rgba(20,92,53,.28); }
.card-range::-moz-range-thumb,.range-input::-moz-range-thumb{ width:15px; height:15px; border:4px solid #145C35; border-radius:50%; background:#F4FFF7; box-shadow:0 3px 10px rgba(20,92,53,.28); }
.card-range::-webkit-slider-runnable-track,.range-input::-webkit-slider-runnable-track{ height:10px; border-radius:12px; background:transparent; }
.card-range::-moz-range-track,.range-input::-moz-range-track{ height:10px; border-radius:12px; background:transparent; }
.card-range::-moz-range-progress,.range-input::-moz-range-progress{ height:10px; border-radius:12px; background:#145C35; }
.card-slider-row{ margin-top:4px; font-family: var(--font-mono); font-size:.75rem; }
.card-slider-amount{ color: var(--text-muted); }
.card-slider-amount .unit{ color: var(--text-faint); font-family: var(--font-body); }


/* ==========================================================
   MODAL
   ========================================================== */
.modal-overlay{
  position: fixed; inset:0; background: rgba(6,9,7,.7);
  backdrop-filter: blur(3px);
  z-index: 50; padding: 20px;
}
/* display:flex must only apply while the overlay is NOT hidden — an
   unconditional display value on this element would always beat the
   browser's default [hidden]{display:none} rule (author styles win over
   user-agent styles regardless of the hidden attribute), so the modal
   would stay visible and un-closeable. */
.modal-overlay:not([hidden]){
  display:flex; align-items:center; justify-content:center;
}
.modal{
  width: 100%; max-width: 420px;
  background: var(--bg-alt); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 28px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal-close{
  position:absolute; top:16px; right:16px;
  width:30px; height:30px; border-radius:8px; border:none;
  background: var(--surface); color: var(--text-muted); font-size:1.2rem; line-height:1;
}
.modal-close:hover{ color: var(--text); background: var(--surface-hover); }

.modal-eyebrow{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase;
  color: var(--green); letter-spacing:.06em; margin:0 0 6px;
}
.modal-title{ font-family: var(--font-display); font-size:1.4rem; margin:0 0 8px; }
.modal-desc{ color: var(--text-muted); font-size:.9rem; margin:0 0 20px; line-height:1.5; }

.field-block{ margin-bottom: 16px; }
.field-block label{ display:block; font-size:.82rem; color: var(--text-muted); margin-bottom:6px; }

.text-input, .number-input{
  width:100%; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px;
  color: var(--text); font-size:.95rem; font-family: var(--font-body);
  transition: border-color .15s ease;
}
.text-input:focus, .number-input:focus, .range-input:focus{
  outline:none; border-color: var(--green-dim);
  box-shadow: 0 0 0 3px var(--green-glow);
}
.range-input:focus,.card-range:focus{ outline:none; border-color:transparent; box-shadow:none; }
.number-input{ margin-top:8px; font-family: var(--font-mono); }

.promo-row{ display:flex; gap:8px; }
.promo-row .text-input{ flex-grow:1; }
.btn-promo{
  background: var(--surface); border:1px solid var(--border-light); color: var(--text);
  border-radius: var(--radius-sm); padding: 0 16px; font-weight:600; font-size:.85rem;
  flex-shrink:0; transition: background .15s ease, border-color .15s ease;
}
.btn-promo:hover{ border-color: var(--green-dim); }
.btn-promo:disabled{ opacity:.6; }
.promo-feedback{ margin: 8px 0 0; font-size:.82rem; }
.promo-feedback-ok{ color: var(--green-bright); }
.promo-feedback-error{ color: var(--danger); }

.modal-total{
  padding: 14px 16px; background: var(--surface); border-radius: var(--radius-sm);
  margin: 4px 0 18px; border: 1px solid var(--border);
}
.modal-total-rows{ display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
.total-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.82rem; color: var(--text-faint); font-family: var(--font-mono);
}
.total-row-discount{ color: var(--green-bright); }
.modal-total-rows:empty{ display:none; }
.modal-total-rows:not(:empty) + .modal-total-final{
  padding-top:8px; border-top:1px dashed var(--border-light);
}
.modal-total-final{
  display:flex; align-items:center; justify-content:space-between;
}
.modal-total-final span{ color: var(--text-muted); font-size:.88rem; }
.modal-total-final strong{ font-family: var(--font-mono); color: var(--green-bright); font-size:1.2rem; }

.modal-error{
  color: var(--danger); font-size:.85rem; margin: -8px 0 14px;
}

.btn-buy{
  width:100%; padding: 14px; border:none; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--green-bright), var(--green-dim));
  color:#06130C; font-weight:700; font-size:1rem;
  transition: filter .15s ease, transform .1s ease;
}
.btn-buy:hover{ filter: brightness(1.08); }
.btn-buy:active{ transform: scale(.98); }
.btn-buy:disabled{ opacity:.6; cursor: not-allowed; }

/* ==========================================================
   TOAST
   ========================================================== */
.toast{
  position: fixed; bottom: 24px; left:50%; transform: translate(-50%, 0);
  background: var(--surface); border:1px solid var(--border-light);
  color: var(--text); padding: 12px 20px; border-radius: 999px;
  font-size:.88rem; z-index: 80; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: toastIn .35s cubic-bezier(.2,.8,.2,1);
}
.toast.toast-leaving{ animation: toastOut .35s cubic-bezier(.4,0,1,1) forwards; }
@keyframes toastIn{ from{ opacity:0; transform: translate(-50%, 34px);} to{ opacity:1; transform: translate(-50%,0);} }
@keyframes toastOut{ to{ opacity:0; transform: translate(-50%, 34px);} }

/* ==========================================================
   SANS DIALOGUE BOX
   ========================================================== */
.sans-box{
  position: fixed; left:24px; bottom:24px; z-index:120;
  width:min(420px, calc(100% - 48px));
  animation: sansIn .25s cubic-bezier(.2,.9,.3,1.2);
}
.sans-box.sans-box-leaving{ animation: sansOut .25s ease forwards; }
@keyframes sansIn{ from{ opacity:0; transform: translateY(18px) scale(.96);} to{ opacity:1; transform:none;} }
@keyframes sansOut{ to{ opacity:0; transform: translateY(18px) scale(.96);} }

.sans-box-inner{
  display:flex; align-items:flex-start; gap:16px;
  background:#000; border:4px solid #fff; border-radius:2px;
  padding:16px 18px; box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.sans-sprite{
  width:48px; height:54px; flex-shrink:0; image-rendering:pixelated; margin-top:2px;
}
.sans-sprite rect{ fill:#fff; }
.sans-sprite rect.ink{ fill:#000; }
.sans-text{
  font-family:'Press Start 2P', var(--font-mono), monospace;
  color:#fff; font-size:.78rem; line-height:2; white-space:pre-wrap;
  padding-top:4px;
}

.cart-backdrop{ position:fixed; inset:0; z-index:60; background:rgba(18,58,37,.18); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.cart-backdrop.open{ opacity:1; pointer-events:auto; }
.cart-drawer{ position:fixed; z-index:70; top:0; right:0; width:min(440px, 100%); height:100vh; padding:28px; background:var(--bg-alt); border-left:1px solid var(--border); box-shadow:-20px 0 60px rgba(18,58,37,.18); transform:translateX(102%); transition:transform .3s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; }
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer-head{ display:flex; align-items:flex-start; justify-content:space-between; }
.cart-drawer-head .modal-close{ position:static; }
.cart-items{ flex:1; overflow:auto; padding:18px 0; }
.cart-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--border); }
.cart-item strong,.cart-item small{ display:block; }.cart-item small{ color:var(--text-muted); margin-top:4px; font-size:.8rem; }
.cart-item-actions{ display:flex; align-items:center; gap:8px; color:var(--green-bright); font-family:var(--font-mono); font-size:.78rem; white-space:nowrap; }
.cart-item-actions button{ border:0; background:none; color:var(--text-faint); font-size:1.15rem; }.cart-item-actions button:hover{ color:var(--danger); }
.cart-item-actions .cart-buy{ border:1px solid var(--border-light); border-radius:6px; padding:6px 8px; color:var(--green); font:600 .72rem var(--font-body); }.cart-item-actions .cart-buy:hover{ background:var(--green-dim); color:#123A25; }
.cart-empty,.cart-note{ color:var(--text-muted); font-size:.9rem; }.cart-drawer-foot{ border-top:1px solid var(--border); padding-top:18px; }.cart-total{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }.cart-total strong{ color:var(--green-bright); font:700 1.2rem var(--font-mono); }.cart-note{ line-height:1.45; font-size:.78rem; margin-bottom:0; }

@media (prefers-reduced-motion: reduce){ .product-card{ animation:none; } .cart-drawer{ transition:none; } }
@media (max-width: 640px){ .cart-chip span:nth-child(2){ display:none; } .cart-chip{ padding:8px 11px; } }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 22px 24px; text-align:center;
  color: var(--text-faint); font-size:.8rem;
}
.info-strip{ max-width:1180px; margin:0 auto; padding:28px 32px; display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:34px; align-items:center; border-top:1px solid var(--border); }.info-strip h2{ font-family:var(--font-display); font-size:1.25rem; }.info-strip>p{ margin:0; color:var(--text-muted); line-height:1.55; font-size:.88rem; }.info-links{ display:flex; flex-direction:column; gap:8px; color:var(--green); font-size:.82rem; font-weight:600; }.info-links span::before{ content:'+'; margin-right:8px; }

/* when a site background photo is on, text sitting directly on it (no card behind it) needs to lighten up */
body.has-bg-photo .servers-section > .section-title,
body.has-bg-photo .shop-heading-row .section-title,
body.has-bg-photo .category-block-heading h3,
body.has-bg-photo .info-strip h2,
body.has-bg-photo .site-footer{ color:#F4FFF7; }
body.has-bg-photo .category-block-heading .eyebrow,
body.has-bg-photo .product-group > h3,
body.has-bg-photo .info-links{ color:#9FE8B4; }
body.has-bg-photo .info-strip>p{ color:#D7ECDC; }
@media(max-width:760px){ .game-intro{ grid-template-columns:100px 1fr; padding:18px 18px 18px 0; gap:16px; }.game-intro img{ width:100px; }.intro-action{ grid-column:2; justify-self:start; }.info-strip{ grid-template-columns:1fr; gap:14px; padding:24px 18px; } }
@media(max-width:540px){ .currency-featured{ flex-direction:column; }.currency-featured .card-media{ width:100%; height:110px; transform:none; }.scroll-buy-btn{ width:100%; } }