/* ============================================================
   HF TERMINAL — red phosphor on black skin
   Loads AFTER shinobi.css: same selectors, later cascade wins.
   shinobi.css keeps layout/structure; this file owns the look.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #050505;
  --accent: #ff4040;            /* phosphor red */
  --accent2: #ff6a6a;           /* replaces shinobi orange */
  --accent-rgb: 255, 64, 64;
  --gold: #8f8f8f;              /* de-gold: neutral gray */
  --cyan: #d8d8d8;              /* kill cyan: near-white */
  --green: #42ff78;             /* phosphor green — status only */
  --text: #e8e8e8;
  --t2: #b8b8b8;
  --t3: #8f8f8f;
  --bdr: #1f1f1f;
  --bdr2: #2e2e2e;
  --glass: #0c0c0c;
  --glass2: #121212;
  --hf-panel: #0a0a0a;
  --hf-line: #1f1f1f;
  --hf-dim: #666666;
  --hf-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Space Mono', Consolas, monospace;
  --hf-sans: 'Space Grotesk', 'Styrene A', -apple-system, sans-serif;
}

/* ---------- 2. Global resets: square, flat, mono ---------- */
.shinobi *, .shinobi *::before, .shinobi *::after {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* readable text = grotesque sans; mono stays reserved for terminal semantics
   (prompts, [TAGS], // labels, prices, data values) */
body.shinobi {
  background: var(--bg);
  color: var(--text);
  font-family: var(--hf-sans);
  /* plain empty zero (IBM Plex Mono default) — no dot, no slash: reads clean at small sizes */
  font-variant-numeric: normal;
  font-feature-settings: "zero" 0;
}

.shinobi ::selection { background: var(--accent); color: #000; }

.shinobi ::-webkit-scrollbar { width: 10px; height: 10px; }
.shinobi ::-webkit-scrollbar-track { background: #050505; }
.shinobi ::-webkit-scrollbar-thumb { background: #1f1f1f; border: 2px solid #050505; }
.shinobi ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Rail overflow affordance — the sidebar scroll area normally hides its scrollbar.
   Re-show a thin red scrollbar so that on shorter viewports (where the nav is taller
   than the screen and lower items get cropped) it's obvious there's more to scroll.
   The browser only paints it when .sb-scroll actually overflows, so tall displays
   stay clean. Higher specificity (.sidebar .sb-scroll) overrides the hide rules. */
.sidebar .sb-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 64, 64, 0.6) rgba(255, 255, 255, 0.04); }
.sidebar .sb-scroll::-webkit-scrollbar { width: 7px; }
.sidebar .sb-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.sidebar .sb-scroll::-webkit-scrollbar-thumb { background: rgba(255, 64, 64, 0.6); border: none; border-radius: 0; }
.sidebar .sb-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.shinobi :focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ---------- 3. Scene: flat black + dot grid + CRT ---------- */
.scene { background: #050505; }
.scene-glow-top {
  filter: none;
  transform: translate(-50%);
  background: radial-gradient(closest-side, rgba(255, 64, 64, 0.06) 0%, transparent 75%);
}
.dot-grid {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
}
.vignette { background: radial-gradient(85% 85%, transparent 45%, rgba(0, 0, 0, 0.55) 100%); }
.crt {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0.16) 1px,
    transparent 1px, transparent 3px);
  opacity: 0.35;
}

.hamburger { background: #0a0a0af0; border: 1px solid var(--hf-line); }
.sb-overlay { background: #000000b3; }

/* ---------- 4. Sidebar rail ---------- */
.sidebar {
  background: #070707;
  border-right: 1px solid var(--hf-line);
  box-shadow: none;
}
.sidebar::before { background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: 1; }
.sidebar::after { background: none; }
.sb-glare-wrap, .sb-glare { display: none; }

.logo-block { border-bottom: 1px solid var(--hf-line); }
/* no frame — raw mark at the SAME size as the rotating header logo (92px),
   image asset is exactly 92x92 so the browser never rescales it */
.clan-seal {
  border: none;
  background: transparent;
  box-shadow: none;
  position: relative;
  overflow: visible;
  width: 39px;
  height: 39px;
  animation: hf-levitate 4.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes hf-levitate {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}
/* the raw logo, nothing else — contain, never cover: cover crops the mark's
   left/right extremes flat (the source art nearly touches its image borders) */
.seal-sharingan {
  mix-blend-mode: normal;
  filter: none;
  position: relative;
  z-index: 1;
  object-fit: contain;
}
.logo-name { color: var(--text); text-shadow: none; letter-spacing: 2px; }
.logo-name .wm-hyper { color: #ffffff; }
.logo-name .wm-flick,
.logo-name .wm-pro { color: var(--accent); }
.logo-sub {
  display: block;
  margin-top: 5px;
  font-family: var(--hf-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--accent);
}
.logo-line { background: var(--hf-line); box-shadow: none; }

.nav-section, .sb-section-label {
  font-family: var(--hf-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: lowercase;
  color: #8a8a8a;
  text-shadow: none;
}
.nav-section::before, .sb-section-label::before { display: none; }

.nav-pill {
  background: #111111;
  border-left: 2px solid var(--accent);
  box-shadow: none;
}
.nav-link {
  font-family: var(--hf-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: #9a9a9a;
}
.sidebar .nav-link:hover, .sidebar .nav-link:focus { color: var(--text) !important; }
.sidebar .nav-link.active { color: var(--accent) !important; font-weight: 700; }
.nav-arr svg { display: none; }
.nav-arr::after { content: '>'; font-family: var(--hf-mono); font-size: 10px; color: var(--accent); }
.sidebar .nav-link.active .nav-arr { color: var(--accent); }

.sidebar .sb-seller-card {
  --sc-bdr: var(--hf-line);
  --sc-bdr-h: var(--accent);
  --sc-glow: transparent;
  --sc-tag: var(--text);
  border: 1px solid var(--hf-line);
  box-shadow: none;
}
.sidebar .sb-seller-card:hover { border-color: var(--accent); box-shadow: 0 0 14px rgba(255, 64, 64, 0.15); }
.sb-seller-gif { filter: brightness(0.8) contrast(1.05); transform: scale(1.02); }
.sb-seller-card:hover .sb-seller-gif { filter: brightness(0.95) contrast(1.05); transform: scale(1.05); }
.sb-seller-overlay { background: linear-gradient(105deg, #050505f2 0%, #050505b8 45%, #0505052e 100%); }
.sb-seller-badge {
  font-family: var(--hf-mono);
  font-size: 8px;
  color: var(--accent);
  background: #000000cc;
  border: 1px solid rgba(255, 64, 64, 0.4);
}
.sb-seller-badge::before { content: '['; }
.sb-seller-badge::after { content: ']'; }
.sb-seller-name { text-shadow: none; font-family: var(--hf-sans); font-size: 12.5px; }

.sb-stat { background: #0c0c0c; border: 1px solid var(--hf-line); }
.sb-stat-name { color: var(--t2); font-size: 11.5px; font-family: var(--hf-sans); }
/* green only on the live uptime stat — delivery/support are claims, not status */
.sb-stat-val { color: var(--text); font-family: var(--hf-mono); font-size: 11.5px; }
.sb-stat:first-child .sb-stat-val { color: var(--green); }

.sb-kanji-bg {
  color: rgba(255, 64, 64, 0.14);
  font-family: var(--hf-mono);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -4px;
}

/* community links (discord / epvp / ownedcore / youtube) */
/* no horizontal padding — the section label brings its own 24px, same as nav-section */
.sb-community {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0 0;
}
.sb-community .sb-section-label { display: block; margin-bottom: 6px; }
/* same voice as the nav links (store / cart / login), one notch smaller — no boxes */
.sb-comm-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 24px;
  background: none;
  border: none;
  font-family: var(--hf-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: #9a9a9a;
  text-decoration: none;
  transition: color 0.2s;
}
.sb-comm-link:hover { color: var(--text); }
.sb-comm-link i { font-size: 15px; width: 18px; text-align: center; }
.sb-comm-img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.sb-comm-discord i { color: #5865f2; }
.sb-comm-youtube i { color: #ff0000; }

.sb-foot { border-top: 1px solid var(--hf-line); }
.sb-foot-link {
  font-family: var(--hf-mono);
  font-size: 10.5px;
  text-transform: lowercase;
  color: #8f8f8f;
  background: #0c0c0c;
  border: 1px solid var(--hf-line);
}
.sb-foot-link:hover { color: var(--accent); background: #101010; border-color: rgba(255, 64, 64, 0.5); }

/* ---------- 5. Ticker ---------- */
.ticker-wrap {
  background: #070707;
  border-top: 1px solid var(--hf-line);
  box-shadow: none;
}
.tick {
  font-family: var(--hf-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--hf-dim);
}
.tick strong { color: #cfcfcf; font-weight: 500; }
.tick-tag { color: var(--green); font-size: 9px; letter-spacing: 1px; margin-left: 8px; }
/* one neutral marker for all ticks — the green [RESTOCKED] tag carries the status */
.tick-dot, .tick-dot.r, .tick-dot.g, .tick-dot.b, .tick-dot.y { background: #555; box-shadow: none; }

/* ---------- 6. Page header: terminal session ---------- */
.term-prompt {
  font-family: var(--hf-mono);
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  text-align: left;
}
.term-prompt .tp-user { color: var(--accent); font-weight: 700; }
.term-prompt .tp-sep { color: var(--hf-dim); }
.term-prompt .tp-cmd { color: #cfcfcf; }

/* note for Chinese visitors — sits just under the hf@pro:~$ prompt */
.term-cn-note {
  margin: -12px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}
.term-cn-note .tcn-line {
  font-family: "Noto Sans SC", var(--hf-sans);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--t3);
  padding-left: 14px;
  position: relative;
}
.term-cn-note .tcn-line::before {
  content: '#';
  position: absolute;
  left: 0;
  color: var(--green);
  font-family: var(--hf-mono);
}

/* language switcher — lives in the rail (present on every page), under // community.
   Vertical list of [flag] + native name; spacing mirrors .sb-comm-link so the flags
   and labels line up exactly with the community items above. */
.sb-lang { display: flex; flex-direction: column; gap: 8px; padding: 20px 0 0; }
.sb-lang .sb-section-label { display: block; margin-bottom: 6px; }
.sb-lang-list { display: flex; flex-direction: column; gap: 8px; }
.sb-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.sb-lang-flag {
  flex: none;
  width: 18px;
  height: 12px;
  display: block;
  border: 1px solid var(--hf-line);
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
.sb-lang-flag svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-lang-name {
  font-family: var(--hf-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: #9a9a9a;
  transition: color 0.2s;
}
.sb-lang-item:hover .sb-lang-flag { opacity: 0.95; filter: grayscale(0); }
.sb-lang-item:hover .sb-lang-name { color: var(--text); }
.sb-lang-item.is-active .sb-lang-flag {
  opacity: 1;
  filter: grayscale(0);
  box-shadow: 0 0 0 1px var(--accent), 0 0 8px rgba(255, 64, 64, 0.3);
}
.sb-lang-item.is-active .sb-lang-name { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .sb-lang-flag, .sb-lang-name { transition: none; }
}

.page-logo { filter: drop-shadow(0 0 14px rgba(255, 64, 64, 0.35)); }
.page-title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}
.page-title::after { background: var(--accent); }
.page-tagline {
  font-family: var(--hf-mono);
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: none;
  color: #9a9a9a;
}
.page-tagline::before, .page-tagline::after { display: none; }
.type-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--accent);
  animation: hf-cursor-blink 1.1s steps(1) infinite;
}
@keyframes hf-cursor-blink { 50% { opacity: 0; } }

/* ---------- 7. Product cards ---------- */
.card[data-c] {
  --ca: var(--accent);
  --cb: #ff7a7a;
  --cg: rgba(255, 64, 64, 0.16);
  --cbr: rgba(255, 64, 64, 0.55);
}
.card {
  background: #0a0a0a;
  border: 1px solid var(--hf-line);
  box-shadow: none;
}
.card:hover {
  border-color: var(--cbr);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--cbr), 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px var(--cg);
}
/* corner ticks replace the glass sheen */
.card::before {
  content: '';
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: top left, top left, bottom right, bottom right;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  opacity: 0;
  transition: opacity 0.25s;
}
.card:hover::before { opacity: 1; }
.c-streak, .c-shimmer { display: none; }
.card-art { background: #000; }
/* top scrim — darkens the badge zone ([IN STOCK]/[HOT]/[x left]) so it stays readable
   on bright art, then fades out seamlessly by ~38% down. Sits above the image, below the badges. */
.card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.88) 0%, rgba(5, 5, 5, 0.45) 14%, rgba(5, 5, 5, 0) 38%);
  pointer-events: none;
}
.card-art img { filter: brightness(0.85) saturate(0.92) contrast(1.02); }
.card:hover .card-art img { filter: brightness(0.95) saturate(1) contrast(1.02); transform: scale(1.04); }
.c-vignette { background: linear-gradient(transparent 0%, rgba(5, 5, 5, 0.7) 40%, rgba(5, 5, 5, 0.96) 100%); }

/* Fake purchase-notification popup — bottom-right, clear of the left rail. */
.sale-pop-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 60; pointer-events: none; }
.sale-pop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 300px;
  max-width: calc(100vw - 36px);
  padding: 10px 12px;
  background: var(--hf-panel);
  border: 1px solid var(--hf-line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 64, 64, 0.06);
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sale-pop:hover {
  border-color: rgba(255, 64, 64, 0.5);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 64, 64, 0.18);
}
.sale-pop__price { color: var(--t3); margin-left: 2px; }
.sale-pop__thumb { flex: none; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--hf-line); }
.sale-pop__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sale-pop__body { flex: 1; min-width: 0; }
.sale-pop__top {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--hf-mono); font-size: 9.5px; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--t3);
}
.sale-pop__top .fi { width: 15px; height: 11px; border-radius: 0 !important; flex: none; }
.sale-pop__name {
  font-family: var(--hf-sans); font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0;
}
.sale-pop__time {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--hf-mono); font-size: 9.5px; color: var(--green);
}
.sale-pop__dot {
  width: 6px; height: 6px; border-radius: 50% !important; flex: none;
  background: var(--green); box-shadow: 0 0 6px var(--green);
  animation: livePulse 1.6s ease-out infinite;
}
.sale-pop__tag {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--hf-mono); font-size: 8px; letter-spacing: 1px; color: var(--accent); opacity: 0.8;
}
.sale-enter, .sale-leave { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease; }
.sale-enter-start, .sale-leave-end { transform: translateY(18px); opacity: 0; }
.sale-enter-end, .sale-leave-start { transform: translateY(0); opacity: 1; }
@media (max-width: 560px) {
  .sale-pop-wrap { right: 10px; bottom: 10px; }
  .sale-pop { width: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .sale-enter, .sale-leave { transition: opacity 0.3s ease; }
  .sale-enter-start, .sale-leave-end { transform: none; }
  .sale-pop__dot { animation: none; }
}

/* Card hover callout — a green connector line grows out of the card bottom, then a
   bordered live-status notice fades in with a pulsing green dot. WWM uses the wider
   wrapping variant for its longer patch note. */
.card.is-live { overflow: visible; }
.live-alert {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 40;
}
.live-alert__box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: #0a0a0a;
  border: 1px solid rgba(66, 255, 120, 0.5);
  box-shadow: 0 0 0 1px rgba(66, 255, 120, 0.12), 0 14px 30px rgba(0, 0, 0, 0.72), 0 0 22px rgba(66, 255, 120, 0.22);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.2s ease 0.16s, transform 0.2s ease 0.16s;
}
.live-alert__text {
  font-family: var(--hf-mono);
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.2px;
  text-align: left;
  white-space: nowrap;
  color: #d6ffe4;
}
.live-alert__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50% !important;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.card.is-live:hover .live-alert__box { opacity: 1; transform: translateY(0) scale(1); }
.card.is-live:hover .live-alert__dot { animation: livePulse 1.5s ease-out infinite 0.3s; }
@keyframes livePulse {
  0% { box-shadow: 0 0 6px var(--green), 0 0 0 0 rgba(66, 255, 120, 0.55); }
  70% { box-shadow: 0 0 6px var(--green), 0 0 0 9px rgba(66, 255, 120, 0); }
  100% { box-shadow: 0 0 6px var(--green), 0 0 0 0 rgba(66, 255, 120, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-alert__box { transition: none; }
  .card.is-live:hover .live-alert__dot { animation: none; }
}

.c-avail {
  font-family: var(--hf-mono);
  font-size: 9px;
  color: var(--green);
  background: #000000cc;
  border: 1px solid rgba(66, 255, 120, 0.35);
}
.c-avail::before { content: '['; }
.c-avail::after { content: ']'; }
.ap { background: var(--green); box-shadow: 0 0 4px var(--green); }

.c-tag { font-family: var(--hf-mono); font-size: 9px; }
.c-tag svg { display: none; }
.c-tag::before { content: '['; }
.c-tag::after { content: ']'; }
.tag-hot { color: var(--accent); background: #000000cc; border: 1px solid rgba(255, 64, 64, 0.5); }
/* top-left badge stack: In Stock (green) / Hypervisor (gray spec) / X left */
.c-badges-tl { position: absolute; top: 8px; left: 8px; z-index: 15; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.c-badges-tl .c-avail { position: static; top: auto; left: auto; }
/* Snowfall third-party badges: 2 per row instead of a tall single column */
.c-badges-tl.c-badges-grid { display: grid; grid-template-columns: repeat(2, max-content); gap: 5px; align-items: start; }
.c-badge-hyper {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--hf-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--t2); background: #000000cc; border: 1px solid var(--hf-line); padding: 3px 8px;
}
.c-badge-hyper::before { content: '['; color: var(--t3); }
.c-badge-hyper::after { content: ']'; color: var(--t3); }
.tag-new { color: var(--cyan); background: #000000cc; border: 1px solid #d8d8d840; }
.tag-prem { color: var(--accent2); background: #000000cc; border: 1px solid #ff6a6a40; }
.tag-slot { color: var(--green); background: #000000cc; border: 1px solid rgba(66, 255, 120, 0.35); }

/* stack the low-stock tag under [IN STOCK] instead of floating over the info block */
.c-stock { bottom: auto; top: 34px; left: 8px; right: auto; justify-content: flex-start; }
.c-stock-badge { font-family: var(--hf-mono); font-size: 9px; background: #000000cc; }
.c-stock-badge::before { content: '['; }
.c-stock-badge::after { content: ']'; }
/* purchase-critical scarcity info must be legible: kill the blink-fade, brighten */
.c-stock-badge.critical {
  color: var(--accent);
  border: 1px solid rgba(255, 64, 64, 0.55);
  background: rgba(255, 64, 64, 0.1);
  animation: none;
}

.glbl { font-family: var(--hf-sans); font-size: 15px; letter-spacing: 0; }
.pp {
  font-family: var(--hf-mono);
  font-size: 9px;
  color: #8f8f8f;
  background: #101010;
  border: 1px solid var(--hf-line);
}
.card:hover .pp { color: var(--t2); background: #141414; border-color: var(--bdr2); }
.c-divider { background: linear-gradient(90deg, var(--accent), var(--hf-line) 40%, transparent); opacity: 0.4; }
.pfrom { font-family: var(--hf-mono); color: #8a8a8a; font-size: 9px; }
.pval {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  filter: none;
  font-family: var(--hf-mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
}
.card:hover .pval { filter: none; text-shadow: 0 0 14px rgba(255, 64, 64, 0.55); }
.c-btn {
  font-family: var(--hf-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
  background: #000;
  border: 1px solid var(--accent);
  box-shadow: none;
}
.c-btn svg { display: none; }
.c-btn::before { display: none; }
.c-btn::after { content: '_'; animation: hf-cursor-blink 1.1s steps(1) infinite; }
.c-btn:hover { background: var(--accent); color: #000; box-shadow: 0 0 18px rgba(255, 64, 64, 0.35); }

/* ---------- 8. Panels (product / cart / status / faq / contact) ---------- */
.glass-panel {
  background: var(--hf-panel);
  border: 1px solid var(--hf-line);
  box-shadow: none;
}
.glass-panel::before { background: linear-gradient(90deg, var(--accent), transparent 30%); opacity: 0.7; }

.product-game-tag { font-family: var(--hf-mono); font-size: 9px; }
.product-game-tag::before { content: '//'; background: none; box-shadow: none; width: auto; height: auto; }
.product-title { text-shadow: none; }
.product-desc { font-family: var(--hf-sans); font-size: 14px; }
.product-img-vignette { background: radial-gradient(90% 80% at 70%, transparent 10%, rgba(5, 5, 5, 0.6) 55%, rgba(5, 5, 5, 0.94) 100%); }

.stock-badge { background: rgba(66, 255, 120, 0.07); border: 1px solid rgba(66, 255, 120, 0.3); box-shadow: none; }

.plan-card { background: #0c0c0c; border: 1px solid var(--hf-line); }
.plan-card:hover { border-color: var(--bdr2); transform: none; }
.plan-card::before { display: none; }
.plan-card.selected {
  background: rgba(255, 64, 64, 0.07);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(255, 64, 64, 0.12);
}
.plan-card.popular { background: #0c0c0c; border-color: var(--bdr2); }
.plan-duration { font-family: var(--hf-mono); font-size: 10px; }
.plan-price { font-family: var(--hf-mono); font-size: 21px; font-weight: 700; letter-spacing: 0; }
.plan-card.selected .plan-price {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  filter: none;
}
.plan-card.popular .plan-price { color: var(--text); }
.plan-check { border: 1px solid var(--bdr2); }
.plan-card.selected .plan-check { background: var(--accent); border-color: var(--accent); box-shadow: none; }

.qty-row { background: #0c0c0c; border: 1px solid var(--hf-line); }
.qty-val { font-family: var(--hf-mono); font-size: 15px; font-weight: 700; letter-spacing: 0; }

.summary-title { font-family: var(--hf-mono); font-size: 9px; color: #8a8a8a; }
.sum-label { font-family: var(--hf-sans); font-size: 13.5px; }
.sum-val { font-size: 12.5px; }
.sum-total-label { font-size: 10px; }
.ap-step-title { font-family: var(--hf-sans); font-size: 13.5px; }
.ap-step-desc { font-family: var(--hf-sans); font-size: 12.5px; }
.trust-item { font-size: 9px; }
.panel-title { font-size: 10px; }
.price-val, .sum-total-val {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  filter: none;
  font-family: var(--hf-mono);
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(255, 64, 64, 0.3);
}
.price-val { font-size: 30px; }
.sum-total-val { font-size: 26px; }
.sum-val, .sum-label { font-family: var(--hf-mono); }
/* "Delivery: Instant" is a promise, not live status — green stays reserved */
.sum-val.green { color: var(--text); }
/* legacy payment callouts (Stripe/PayPal info blocks in Details) join the terminal system */
.shinobi .card-pay-callout, .shinobi .paypal-manual-callout {
  background: #0c0c0c !important;
  border: 1px solid var(--hf-line) !important;
  box-shadow: none !important;
}
.shinobi .card-pay-callout::before, .shinobi .paypal-manual-callout::before { background: none !important; }
/* delivery-row icons: legacy red/gold/green/cyan classes collapse to brand red */
.shinobi .feat-icon {
  color: var(--accent) !important;
  background: rgba(255, 64, 64, 0.08) !important;
  border: 1px solid rgba(255, 64, 64, 0.2) !important;
}
.cta-primary {
  background: var(--accent);
  color: #000;
  font-family: var(--hf-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  box-shadow: 0 0 12px rgba(255, 64, 64, 0.2);
}
.cta-primary::before { display: none; }
.cta-primary::after { content: '_'; animation: hf-cursor-blink 1.1s steps(1) infinite; }
.cta-primary:hover { background: #ff5c5c; transform: translateY(-1px); box-shadow: 0 0 20px rgba(255, 64, 64, 0.3); }
.cta-primary:disabled {
  background: #161616;
  color: #555;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.cta-primary:disabled::after { content: ''; animation: none; }

.trust-item { font-family: var(--hf-mono); }
.ap-step-num { font-family: var(--hf-mono); }
.ap-link { border-bottom-color: rgba(255, 64, 64, 0.4); }

/* ---------- 8b. Page rhythm & form details ---------- */
/* headers were clipping the viewport top; homepage compensates via .page-header */
.main > .components, .main > .component, .main > section.component { padding-top: 36px; }
.page-header { padding-top: 8px; }
.shinobi ::placeholder { color: #8a8a8a; opacity: 1; }
.shinobi textarea { resize: vertical; }
.term-prompt .tp-cmd { color: #cfcfcf; }

/* ---------- 9. Login modal & shared legacy hooks ---------- */
.shinobi .glass { background: var(--hf-panel); border: 1px solid var(--hf-line); box-shadow: none; }
.shinobi [role="dialog"] { font-family: var(--hf-mono); }
.eyebrow { font-family: var(--hf-mono); letter-spacing: 2px; }

/* Discord realtime-support CTA (contact panel) — the fast path above the form */
.discord-cta {
  display: block;
  position: relative;
  padding: 20px;
  margin-bottom: 18px;
  background: #0c0c0c;
  border: 1px solid var(--hf-line);
  border-left: 2px solid #5865f2;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.discord-cta:hover { background: #0f0f14; border-color: rgba(88, 101, 242, 0.5); }
.discord-cta__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.discord-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--hf-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
}
.discord-cta__pulse {
  width: 7px;
  height: 7px;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: hf-pulse 1.6s ease-in-out infinite;
}
@keyframes hf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.discord-cta__mark { font-size: 26px; color: #5865f2; }
.discord-cta__title {
  font-family: var(--hf-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 8px;
}
.discord-cta__body {
  font-family: var(--hf-sans);
  font-size: 12.5px;
  color: var(--t2);
  line-height: 1.6;
  margin: 0 0 16px;
}
.discord-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: #5865f2;
  color: #fff;
  font-family: var(--hf-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background 0.2s, box-shadow 0.2s;
}
.discord-cta:hover .discord-cta__btn { background: #4752e0; box-shadow: 0 0 22px rgba(88, 101, 242, 0.4); }
.discord-cta__btn .fa-arrow-right { font-size: 10px; transition: transform 0.2s; }
.discord-cta:hover .discord-cta__btn .fa-arrow-right { transform: translateX(3px); }

.contact-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--t3);
  font-family: var(--hf-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: lowercase;
}
.contact-or::before,
.contact-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hf-line);
}

/* ---------- 10. Motion discipline ---------- */
@media (prefers-reduced-motion: reduce) {
  .type-cursor, .c-btn::after, .cta-primary::after, .clan-seal, .discord-cta__pulse { animation: none !important; }
  .card:hover, .cta-primary:hover { transform: none; }
  .lm-enter { transition: none !important; }
}

/* ---------- 11. Loader → Discord modal ---------- */
[x-cloak] { display: none !important; }

.loader-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.loader-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.86);
}
.loader-modal__panel {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: var(--hf-panel);
  border: 1px solid var(--hf-line);
  border-left: 2px solid var(--accent);
  padding: 30px 30px 24px;
  box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 42px rgba(255, 64, 64, 0.07);
}
/* red corner tick — same motif as card hover */
.loader-modal__panel::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
.loader-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--t3);
  font-family: var(--hf-mono);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.15s;
}
.loader-modal__close:hover { color: var(--accent); }
.loader-modal__label {
  font-family: var(--hf-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: lowercase;
  margin-bottom: 11px;
}
.loader-modal__prompt {
  font-family: var(--hf-mono);
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loader-modal__prompt b { color: var(--accent2); font-weight: 400; }
.loader-modal__title {
  font-family: 'Bebas Neue', var(--hf-sans);
  font-size: 32px;
  letter-spacing: 1px;
  color: var(--text);
  line-height: 1;
  margin: 0 0 12px;
}
.loader-modal__body {
  font-family: var(--hf-sans);
  font-size: 13px;
  color: var(--t2);
  line-height: 1.65;
  margin: 0 0 22px;
}
.loader-modal__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  background: #5865f2;
  color: #fff;
  font-family: var(--hf-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s, box-shadow 0.2s;
}
.loader-modal__cta:hover { background: #4752e0; box-shadow: 0 0 24px rgba(88, 101, 242, 0.4); }
.loader-modal__cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.loader-modal__foot {
  font-family: var(--hf-mono);
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: var(--t3);
  text-transform: lowercase;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hf-line);
}

/* Alpine enter transition for the panel */
.lm-enter { transition: opacity 0.2s ease, transform 0.2s ease; }
.lm-enter-start { opacity: 0; transform: translateY(10px) scale(0.98); }
.lm-enter-end { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- 12. Group (multi-edition) modal ---------- */
.group-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.group-modal__backdrop { position: absolute; inset: 0; background: rgba(3, 3, 3, 0.86); }
.group-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--hf-panel);
  border: 1px solid var(--hf-line);
  border-left: 2px solid var(--accent);
  padding: 28px 28px 24px;
  box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 42px rgba(255, 64, 64, 0.07);
}
.group-modal__panel::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
.group-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--t3);
  font-family: var(--hf-mono);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.15s;
}
.group-modal__close:hover { color: var(--accent); }
.group-modal__label {
  font-family: var(--hf-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: lowercase;
  margin-bottom: 7px;
}
.group-modal__title {
  font-family: 'Bebas Neue', var(--hf-sans);
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--text);
  line-height: 1;
  margin: 0 0 18px;
}
.group-modal__opts { display: flex; flex-direction: column; gap: 10px; }
.group-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #0e0e0e;
  border: 1px solid var(--hf-line);
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s;
}
.group-opt:hover { border-color: var(--accent); background: #121212; }
.group-opt__name { flex: 1; font-family: var(--hf-sans); font-size: 14px; font-weight: 600; color: var(--text); }
.group-opt__meta { display: flex; align-items: center; gap: 12px; }
.group-opt__stock { font-family: var(--hf-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--green); }
.group-opt__stock.oos { color: var(--t3); }
.group-opt__price { font-family: var(--hf-mono); font-size: 14px; font-weight: 700; color: var(--accent); }
.group-opt__arr { font-family: var(--hf-mono); font-size: 16px; color: var(--accent); }

/* ---------- 13. Rail scale-up (~+18-20% for readability; desktop/tablet only) ---------- */
@media (min-width: 1100px) { :root { --sw: 264px; } }
@media (min-width: 780px) and (max-width: 1099px) { :root { --sw: 236px; } }

.logo-block { padding: 30px 22px 22px; }
.clan-seal { width: 46px; height: 46px; }
.logo-name { font-size: 22px; }
.logo-sub { font-size: 11px; margin-top: 6px; }
.nav-section, .sb-section-label { font-size: 11px; }
.nav-link { font-size: 14.5px; padding: 13px 24px; }
.nav-arr::after { font-size: 12px; }
.sb-community { gap: 9px; }
.sb-comm-link { font-size: 13px; gap: 12px; padding: 8px 24px; }
.sb-comm-link i { font-size: 18px; width: 21px; }
.sb-comm-img { width: 21px; height: 21px; }
.sb-lang { gap: 9px; }
.sb-lang-list { gap: 9px; }
.sb-lang-item { font-size: 13px; gap: 12px; padding: 8px 24px; }
.sb-lang-flag { width: 21px; height: 14px; }
.sb-lang-name { font-size: 13px; }
.sb-foot-link { font-size: 12.5px; padding: 9px 10px; }