/* ==========================================================================
   MUGLC — CRT Arcade Brutalist system
   Hand-written, token-driven. Every :root value below is a Customizer
   control; the theme emits an inline :root override for anything changed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* palette */
  --screen:            #f4f2e9;
  --bezel:             #b1aa99;
  --background:        var(--screen);
  --foreground:        #080504;
  --card:              #e8e4da;
  --primary:           #c10002;
  --primary-foreground:#f1eee7;
  --acid:              #9ce824;
  --muted:             #dcd7ca;
  --muted-foreground:  #37322d;
  --border:            rgba(21, 17, 13, .85);

  /* type */
  --font-arcade:  "Press Start 2P", ui-monospace, monospace;
  --font-display: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-pixel:   "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* geometry — brutalism means zero radius on content */
  --radius: 0px;
  --rule: 2px;
  --box-shadow-offset: 6px;

  /* CRT intensity — Customizer-tunable */
  --crt-frame-radius: 18px;
  --crt-frame-pad: clamp(12px, 2vw, 28px);
  --crt-scanline-alpha: .04;
  --crt-vignette-alpha: .15;
  --crt-noise-opacity: .08;
  --crt-scan-speed: 8s;
  --crt-flicker-speed: 6s;
  --marquee-speed: 30s;

  /* preloader */
  --preloader-word-size: 8vw;   /* desktop; mobile is fixed at 12vw below */
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
body {
  font-family: var(--font-pixel);
  background: var(--bezel);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; background: transparent; }
button { cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. THE CRT STACK
   All overlays are viewport-fixed rather than stretched over the whole
   document. Two reasons:

     - Correctness. On a real tube the scanlines, vignette and flicker belong
       to the screen, not to the content scrolling behind it.

     - Cost and stability. A document-height overlay is a ~1440x5500 layer
       that must be re-rasterised as it scrolls, and a 3px-period gradient
       resampled at fractional scroll offsets is precisely what produces the
       crawling shimmer. Pinning to the viewport locks the pattern to the
       device pixel grid: no resampling, no shimmer, ~7x less pixel work.

   Nothing here uses mix-blend-mode. Every overlay is pure black with an
   alpha, and for pure black `multiply` and normal alpha compositing give an
   identical result -- both reduce the backdrop to backdrop x (1 - alpha).
   Dropping the blend is therefore visually lossless, and it spares the
   compositor a full backdrop readback on every frame.
   -------------------------------------------------------------------------- */
.crt-frame {
  min-height: 100vh;
  background: var(--bezel);
  border-radius: var(--crt-frame-radius);
  padding: var(--crt-frame-pad);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.25),
    inset 0 0 30px rgba(0,0,0,.35),
    0 30px 80px rgba(0,0,0,.45);
}

.crt-screen {
  position: relative;
  background: var(--screen);
  border-radius: 24px / 18px;
  min-height: calc(100vh - 56px);
  /* `clip` instead of `hidden`: it still clips to the radius but does NOT
     create a scroll container, so the sticky header actually sticks.
     The source site uses `hidden` here, which silently breaks its own
     sticky header. This is a deliberate fix, not a fidelity gap. */
  overflow: clip;
}

.muglc-layer { position: relative; z-index: 10; }

/* The whole tube treatment, in one fixed layer covering the full viewport.

   No insets. Any inset produces a hard edge where the vignette stops, and
   that edge reads as a floating panel sitting on top of the site rather than
   as the glass. Running edge to edge lets the vignette fall off into the
   bezel the way a real monitor's shadow does, and leaves nothing to see.
   The scanlines and grain reach the bezel too, but at these alphas on a
   mid-tone they are imperceptible. */
.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
  /* Promote once, so the browser keeps these as standing compositor layers
     instead of re-rasterising them into the scrolling content. */
  transform: translateZ(0);
}
.crt-overlay > * { position: absolute; inset: 0; }

.crt-overlay__scanlines {
  background: repeating-linear-gradient(
    transparent 0 3px,
    rgba(0,0,0,var(--crt-scanline-alpha)) 3px 4px
  );
}

.crt-overlay__vignette {
  background: radial-gradient(transparent 65%, rgba(0,0,0,var(--crt-vignette-alpha)));
}

/* Inline SVG turbulence, so the grain costs no network request and, now that
   the layer is viewport-sized, is rasterised once rather than per scroll. */
.crt-overlay__noise {
  opacity: var(--crt-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* Mains hum. The source animated opacity on the element wrapping ALL page
   content, which forces the entire 5500px subtree to re-composite six times
   a second. A veil that owns one small layer reads the same and costs
   almost nothing. */
.crt-overlay__flicker {
  background: #000;
  opacity: 0;
  animation: flicker-veil var(--crt-flicker-speed) infinite;
}

.crt-overlay__scanbar { overflow: hidden; }
.crt-overlay__scanbar::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 30%;
  background: linear-gradient(transparent, rgba(255,255,255,.18), transparent);
  animation: scan var(--crt-scan-speed) linear infinite;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   4. KEYFRAMES
   Only transform and opacity are animated, so every animation stays on the
   compositor and never triggers layout or paint.
   -------------------------------------------------------------------------- */
@keyframes scan {
  from { transform: translate3d(0, -100%, 0); }
  to   { transform: translate3d(0,  340%, 0); }
}
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes blink   { 50% { opacity: 0; } }
@keyframes flicker-veil {
  0%, 100% { opacity: 0; }
  7%  { opacity: .10; }
  8%  { opacity: 0; }
  42% { opacity: .05; }
  43% { opacity: 0; }
}
@keyframes glitch {
  0%, 90%, 100% { text-shadow: none; transform: translate(0); }
  92% { text-shadow:  2px 0 var(--acid), -2px 0 var(--primary); transform: translate(-2px, 1px); }
  94% { text-shadow: -2px 0 var(--acid),  2px 0 var(--primary); transform: translate(2px, -1px); }
  96% { text-shadow:  1px 0 var(--primary); transform: translate(-1px, 0); }
}
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.animate-glitch { animation: glitch 2.4s infinite; }
.animate-blink  { animation: blink 1s steps(2, end) infinite; }

/* Photosensitivity: the flicker + scan + noise stack is genuinely hostile.
   Kill all of it on request. The source site ships no such guard. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .crt-overlay__scanbar,
  .crt-overlay__flicker { display: none; }
  html { scroll-behavior: auto; }
}
/* The HUD toggle, persisted in localStorage. OFF means off: the entire tube
   treatment is removed, not merely paused, so the page becomes a plain flat
   layout with zero overlay cost. */
body.muglc-calm .crt-overlay { display: none; }
body.muglc-calm .animate-glitch { animation: none; }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
.font-arcade  { font-family: var(--font-arcade); }
.font-display { font-family: var(--font-display); }
.font-pixel   { font-family: var(--font-pixel); }

/* The reference declares each font utility twice; the second rule wins and
   carries the weight and tracking. Reproduced here on every element that
   uses the corresponding family.

   Space Mono 700, -0.02em. Press Start 2P has a single weight, so it gets
   tracking only -- never a weight, or the browser synthesises a fake bold
   and the pixel grid falls apart. JetBrains Mono 500. */
.font-display,
.muglc-hero__title,
.muglc-tape__track,
.muglc-card__title,
.muglc-outro,
.muglc-preloader__word { font-weight: 700; letter-spacing: -.02em; }

/* Weight 400 is not decorative here, it is load-bearing: Press Start 2P ships
   a single weight, and these labels sit inside .term blocks that set 500, so
   without an explicit reset they inherit it and the browser synthesises a
   fake bold that smears the pixel grid. */
.font-arcade,
.hud,
.muglc-header__bar,
.muglc-hero__badge,
.muglc-sechead,
.muglc-sprite-card__meta,
.muglc-card__meta,
.muglc-submit,
.muglc-calm-toggle,
.muglc-burger,
.muglc-mobilenav,
.muglc-bezel-bar,
.muglc-preloader__hud,
.muglc-toast,
.link-arcade { letter-spacing: .02em; font-weight: 400; }

.font-pixel,
.term,
.muglc-field,
.muglc-clock,
.muglc-termlist { font-weight: 500; }

/* Press Start 2P is illegible above ~12px. Hard-capped here and in the
   widget controls so it cannot be broken from the editor. */
.hud { font-family: var(--font-arcade); font-size: 11px; line-height: 1.6; }
@media (min-width: 768px) { .hud { font-size: 12px; } }
.hud--sm { font-size: 10px; }

.term { font-family: var(--font-pixel); font-size: 1.125rem; line-height: 1.45; }
@media (min-width: 768px) { .term { font-size: 1.25rem; } }

/* Outlined display type. Firefox supports -webkit-text-stroke, but where it
   is unavailable we fall back to a 4-way text-shadow ring. */
.pixel-stroke {
  -webkit-text-stroke: 2px var(--foreground);
  color: transparent;
}
@supports not (-webkit-text-stroke: 2px black) {
  .pixel-stroke {
    color: var(--screen);
    text-shadow:
      -2px -2px 0 var(--foreground), 2px -2px 0 var(--foreground),
      -2px  2px 0 var(--foreground), 2px  2px 0 var(--foreground);
  }
}
.ink-primary { color: var(--primary); }

/* Blinking terminal caret */
.caret::after {
  content: "_";
  margin-left: .25ch;
  animation: blink 1s steps(2, end) infinite;
}

/* --------------------------------------------------------------------------
   6. COMPONENT PRIMITIVES
   -------------------------------------------------------------------------- */
/* The hard offset shadow — no blur, no radius. */
.box {
  border: var(--rule) solid var(--foreground);
  box-shadow: var(--box-shadow-offset) var(--box-shadow-offset) 0 0 var(--foreground);
}

.chip {
  display: inline-block;
  background: var(--foreground);
  color: var(--background);
  padding: 4px 8px;
}
.chip--primary { background: var(--primary); color: var(--primary-foreground); }

/* --------------------------------------------------------------------------
   7. LAYOUT
   -------------------------------------------------------------------------- */
.muglc-section {
  padding: 64px 16px;
  border-bottom: var(--rule) solid var(--foreground);
}
@media (min-width: 768px) { .muglc-section { padding: 96px 32px; } }
.muglc-section--band { background: var(--card); }
.muglc-section--tight { padding-block: 40px; }
@media (min-width: 768px) { .muglc-section--tight { padding-block: 64px; } }

.muglc-grid { display: grid; gap: 32px; }
@media (min-width: 768px) {
  .muglc-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-7 { grid-column: span 7; }
  .col-5 { grid-column: span 5; }
  .col-8 { grid-column: span 8; }
  .col-4 { grid-column: span 4; }
}
.items-end { align-items: end; }

/* Section header: >>> 0N chip · hairline · arcade label */
.muglc-sechead {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-arcade);
  font-size: 11px;
}
@media (min-width: 768px) { .muglc-sechead { font-size: 12px; } }
.muglc-sechead__rule { flex: 1; height: 1px; background: var(--foreground); }
.muglc-sechead h2, .muglc-sechead h1 { font-weight: 400; font-family: var(--font-arcade); font-size: inherit; line-height: inherit; margin: 0; }

/* --------------------------------------------------------------------------
   8. HEADER
   -------------------------------------------------------------------------- */
.muglc-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: var(--rule) solid var(--foreground);
  background: var(--background);
}
.muglc-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  font-family: var(--font-arcade);
  font-size: 11px;
}
@media (min-width: 768px) { .muglc-header__bar { padding: 12px 24px; font-size: 12px; } }
.muglc-brand { display: flex; align-items: center; gap: 8px; }
.muglc-nav { display: none; gap: 20px; align-items: center; }
.muglc-nav a { white-space: nowrap; }
/* Press Start 2P runs ~12px per character; seven bracketed labels plus the
   brand and HUD need about 1200px before anything wraps, so the burger stays
   in charge until then. */
@media (min-width: 1200px) { .muglc-nav { display: flex; } }
.muglc-brand:hover { color: var(--primary); }
/* Current page and hover have their own tokens (Customizer → Palette),
   both falling back to the brand red. */
.muglc-nav a.is-current, .muglc-mobilenav a.is-current { color: var(--nav-active, var(--primary)); }
.muglc-nav a:hover, .muglc-mobilenav a:hover { color: var(--nav-hover, var(--primary)); }
.muglc-brand img { height: 24px; width: auto; }
.muglc-cart { white-space: nowrap; }
.muglc-cart:hover { color: var(--primary); }
.muglc-header__aux { display: flex; align-items: center; gap: 12px; }
.muglc-clock { font-family: var(--font-pixel); font-variant-numeric: tabular-nums; }

/* Motion toggle lives in the HUD, where a CRT would put it */
.muglc-calm-toggle {
  font-family: var(--font-arcade);
  font-size: 10px;
  border: 1px solid var(--foreground);
  padding: 3px 6px;
}
.muglc-calm-toggle:hover { background: var(--foreground); color: var(--background); }

/* Mobile nav */
.muglc-burger { display: block; font-family: var(--font-arcade); font-size: 11px; }
@media (min-width: 1200px) { .muglc-burger { display: none; } }
.muglc-mobilenav {
  display: none;
  padding: 8px 16px 16px;
  border-top: 1px solid var(--foreground);
  font-family: var(--font-arcade);
  font-size: 11px;
}
.muglc-mobilenav.is-open { display: block; }
.muglc-mobilenav__list { display: flex; flex-direction: column; gap: 2px; }
.muglc-mobilenav a { padding: 8px 0; }
@media (min-width: 1200px) { .muglc-mobilenav { display: none !important; } }

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.muglc-hero { padding: 40px 16px; border-bottom: var(--rule) solid var(--foreground); }
@media (min-width: 768px) { .muglc-hero { padding: 64px 32px; } }
.muglc-hero__badge {
  display: inline-block;
  font-family: var(--font-arcade);
  font-size: 11px;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 6px 8px;
  margin-bottom: 16px;
}
/* Display headings. Sizes are named so both templates and widgets pick the
   same scale instead of restating clamp() values. */
.muglc-h { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.muglc-h--md   { font-size: clamp(1.75rem, 5vw, 3rem);    line-height: 1.1; }
.muglc-h--lg   { font-size: clamp(1.75rem, 6vw, 3.75rem); line-height: .95; }
.muglc-h--xl   { font-size: clamp(2rem, 7vw, 4.5rem);     line-height: .85; letter-spacing: -.025em; }
.muglc-h--hero { font-size: 12vw; line-height: .8; letter-spacing: -.025em; }
@media (min-width: 768px) { .muglc-h--hero { font-size: 8vw; } }
.muglc-hero__title { font-family: var(--font-display); }
.muglc-hero__side { display: grid; gap: 16px; }

/* --------------------------------------------------------------------------
   10. MARQUEE TAPE
   -------------------------------------------------------------------------- */
.muglc-tape {
  background: var(--foreground);
  color: var(--screen);
  border-bottom: var(--rule) solid var(--foreground);
  padding: 12px 0;
  overflow: hidden;
}
.muglc-tape__track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  width: max-content;
  font-family: var(--font-display);
  font-size: 1rem;
  animation: marquee var(--marquee-speed) linear infinite;
}
@media (min-width: 768px) { .muglc-tape__track { font-size: 1.25rem; } }
.muglc-tape__item { display: flex; align-items: center; gap: 40px; }
.muglc-tape__sep { color: var(--primary); }
.muglc-tape:hover .muglc-tape__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   11. ROSTER / PIXEL SPRITE CARDS
   -------------------------------------------------------------------------- */
.muglc-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 768px) { .muglc-roster { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.muglc-sprite-card {
  background: var(--background);
  aspect-ratio: 3 / 4;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background-color .15s, color .15s;
}
.muglc-sprite-card:hover { background: var(--primary); color: var(--primary-foreground); }
.muglc-sprite-card__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-arcade);
  font-size: 11px;
}
.muglc-sprite-card__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}
/* 16x16 sprite. Cells are plain divs; the "on" cells inherit the card's
   hover inversion, which is why the sprites flip colour with the card. */
.muglc-sprite {
  display: grid;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
}
.muglc-sprite i { display: block; }
.muglc-sprite i.on { background: var(--foreground); }
.muglc-sprite-card:hover .muglc-sprite i.on { background: var(--primary-foreground); }

/* --------------------------------------------------------------------------
   11b. PRODUCT CARD / GRID / CAROUSEL
   One card. Ratio, fit, hover and column count are CSS variables so the
   Elementor widgets can drive them per instance without extra selectors.
   -------------------------------------------------------------------------- */
.muglc-pcard {
  --pcard-bg: var(--background);
  --pcard-hover-bg: var(--primary);
  --pcard-hover-fg: var(--primary-foreground);
  list-style: none;
  background: var(--pcard-bg);
  display: flex;
  flex-direction: column;
  transition: background-color .15s, color .15s;
}
.muglc-pcard__link { display: flex; flex-direction: column; flex: 1; padding: 16px; color: inherit; gap: 8px; }
.muglc-pcard__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-arcade); font-size: 11px; letter-spacing: .02em; line-height: 1.6;
}
.muglc-pcard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muglc-pcard__view { flex-shrink: 0; }
.muglc-pcard__price { font-family: var(--font-pixel); font-weight: 500; font-size: 1rem; white-space: nowrap; }
.muglc-pcard__price del { opacity: .5; }
.muglc-pcard__price ins { text-decoration: none; }
.muglc-pcard__price .woocommerce-Price-currencySymbol { font-size: .85em; }
.muglc-pcard__stage {
  position: relative;
  aspect-ratio: var(--pcard-ratio, 3 / 4);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
  background: var(--card);
}
.muglc-pcard__img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.muglc-pcards--fit-cover .muglc-pcard__img { object-fit: cover; }
.muglc-pcard:hover .muglc-pcard__img { transform: scale(1.03); }
.muglc-pcard__badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--primary); color: var(--primary-foreground);
  font-family: var(--font-arcade); font-size: 10px; padding: 4px 8px;
}
.muglc-pcard.is-soldout .muglc-pcard__img { opacity: .45; filter: grayscale(1); }
.muglc-pcard__actions { padding: 0 16px 16px; }
.muglc-pcard__actions .muglc-submit { display: block; width: 100%; padding: 14px; text-align: center; border: 0; }
.muglc-pcard__actions .added_to_cart { display: block; margin-top: 8px; font-family: var(--font-arcade); font-size: 10px; color: var(--primary); }

/* Hover inversion is opt-in per list */
.muglc-pcards--invert .muglc-pcard:hover { background: var(--pcard-hover-bg); color: var(--pcard-hover-fg); }
.muglc-pcards--invert .muglc-pcard:hover .muglc-pcard__badge { background: var(--pcard-hover-fg); color: var(--pcard-hover-bg); }
.muglc-pcards--invert .muglc-pcard:hover .muglc-submit { background: var(--pcard-hover-fg); color: var(--pcard-hover-bg); }

/* Collection card: same card, a big initial when the category has no image */
.muglc-ccard__glyph {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--foreground); opacity: .85;
}
.muglc-pcards--invert .muglc-ccard:hover .muglc-ccard__glyph { color: var(--pcard-hover-fg); }
.muglc-collection-head { margin-bottom: 8px; }

/* Grid */
.muglc-pgrid {
  --pcols: 4;
  display: grid;
  grid-template-columns: repeat(var(--pcols), minmax(0, 1fr));
  gap: var(--pgap, 16px);
  margin: 40px 0 0;
  padding: 0;
}
@media (max-width: 1024px) { .muglc-pgrid { grid-template-columns: repeat(var(--pcols-tablet, 2), minmax(0, 1fr)); } }
@media (max-width: 640px)  { .muglc-pgrid { grid-template-columns: repeat(var(--pcols-mobile, 1), minmax(0, 1fr)); } }

/* Carousel: native scroll-snap, arrows just call scrollBy */
.muglc-carousel { --per-view: 4; --pgap: 16px; margin-top: 40px; }
@media (max-width: 1024px) { .muglc-carousel { --per-view: var(--per-view-tablet, 2); } }
@media (max-width: 640px)  { .muglc-carousel { --per-view: var(--per-view-mobile, 1.2); } }
.muglc-carousel__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px;
}
.muglc-carousel__nav { display: flex; gap: 8px; }
.muglc-carousel__nav button { padding: 4px 2px; }
.muglc-carousel__nav button:hover { color: var(--primary); }
.muglc-carousel__nav button[disabled] { opacity: .3; cursor: default; }
.muglc-carousel__track {
  display: flex;
  gap: var(--pgap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0 8px 8px 0; /* room for the hard shadows */
  -webkit-overflow-scrolling: touch;
}
.muglc-carousel__track::-webkit-scrollbar { display: none; }
.muglc-carousel__track:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.muglc-carousel__item {
  flex: 0 0 calc((100% - var(--pgap) * (var(--per-view) - 1)) / var(--per-view));
  scroll-snap-align: start;
  display: flex;
}
.muglc-carousel__item > .muglc-pcard { flex: 1; }

/* --------------------------------------------------------------------------
   12. BRUTAL CARD GRID (services)
   -------------------------------------------------------------------------- */
.muglc-cards { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 768px) { .muglc-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.muglc-card {
  background: var(--background);
  padding: 24px;
  transition: background-color .15s, color .15s;
}
@media (min-width: 768px) { .muglc-card { padding: 32px; } }
.muglc-card:hover { background: var(--foreground); color: var(--background); }
.muglc-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-arcade);
  font-size: 11px;
  margin-bottom: 24px;
}
.muglc-card__dot { color: var(--primary); }
.muglc-card:hover .muglc-card__dot { color: var(--acid); }
.muglc-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 16px;
}
@media (min-width: 768px) { .muglc-card__title { font-size: 2.25rem; } }

/* --------------------------------------------------------------------------
   13. FORMS
   -------------------------------------------------------------------------- */
.muglc-field {
  width: 100%;
  background: var(--background);
  border: var(--rule) solid var(--foreground);
  padding: 12px;
  font-family: var(--font-pixel);
  font-size: 1.125rem;
}
.muglc-field::placeholder { color: var(--muted-foreground); opacity: .7; }
.muglc-field:focus { outline: none; background: var(--acid); }
.muglc-field--area { resize: vertical; min-height: 180px; }

.muglc-inline { display: flex; }
.muglc-inline .muglc-field { flex: 1; border-right: 0; }

.muglc-submit {
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-arcade);
  font-size: 11px;
  padding: 0 20px;
  transition: background-color .15s;
}
.muglc-submit:hover { background: var(--primary); }
.muglc-submit--block { width: 100%; padding: 16px; }
.muglc-submit[disabled] { opacity: .6; cursor: not-allowed; }

.muglc-form { display: grid; gap: 12px; }
.muglc-form__label { display: block; }
.muglc-form__label > .hud { margin-bottom: 4px; }
.muglc-form__row { display: grid; gap: 12px; }
@media (min-width: 640px) { .muglc-form__row { grid-template-columns: 1fr 1fr; } }

/* Arcade toast, replacing the source's JS toast library */
.muglc-toasts {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 110;
  display: grid;
  gap: 8px;
  max-width: min(360px, calc(100vw - 48px));
}
.muglc-toast {
  background: var(--foreground);
  color: var(--screen);
  border: var(--rule) solid var(--foreground);
  box-shadow: var(--box-shadow-offset) var(--box-shadow-offset) 0 0 var(--primary);
  padding: 12px 14px;
  font-family: var(--font-arcade);
  font-size: 10px;
  line-height: 1.7;
  animation: fade-in .18s ease-out both;
}
.muglc-toast--err { box-shadow: var(--box-shadow-offset) var(--box-shadow-offset) 0 0 var(--acid); }

/* --------------------------------------------------------------------------
   14. TERMINAL LIST / CONTACT
   -------------------------------------------------------------------------- */
.muglc-termlist { display: grid; gap: 4px; font-size: 1rem; }
.muglc-termlist .dim { color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   15. OUTRO + FOOTER
   -------------------------------------------------------------------------- */
.muglc-outro {
  padding: 64px 16px;
  text-align: center;
  font-family: var(--font-display);
}
.muglc-outro__big { font-size: 1.5rem; margin-bottom: 16px; }
@media (min-width: 768px) { .muglc-outro__big { font-size: 2.25rem; } }

/* The footer bar sits OUTSIDE the screen, on the bezel — as on a real monitor */
.muglc-bezel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 8px 0;
  font-family: var(--font-arcade);
  font-size: 10px;
  color: rgba(8, 5, 4, .7);
}
@media (min-width: 768px) { .muglc-bezel-bar { font-size: 11px; } }
.muglc-bezel-bar__mid { display: none; }
@media (min-width: 768px) { .muglc-bezel-bar__mid { display: inline; } }

/* --------------------------------------------------------------------------
   16. PRELOADER
   -------------------------------------------------------------------------- */
.muglc-preloader {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bezel);
  padding: var(--crt-frame-pad);
}
.muglc-preloader__screen {
  position: relative;
  height: 100%;
  background: var(--screen);
  border-radius: 24px / 18px;
  overflow: clip;
}
.muglc-preloader__inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  user-select: none;
  cursor: pointer;
}
.muglc-preloader__word {
  font-family: var(--font-display);
  font-size: 12vw;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--primary);
  text-align: center;
}
@media (min-width: 768px) { .muglc-preloader__word { font-size: var(--preloader-word-size); } }
.muglc-preloader__dots { display: flex; gap: 8px; margin-top: 48px; }
.muglc-preloader__dots span {
  height: 4px; width: 24px;
  background: rgba(8,5,4,.2);
  transition: background-color .2s;
}
.muglc-preloader__dots span.on { background: var(--primary); }
.muglc-preloader__hud {
  position: absolute;
  left: 24px; right: 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-arcade);
  font-size: 10px;
}
@media (min-width: 640px) { .muglc-preloader__hud { font-size: 11px; } }
.muglc-preloader__hud--top { top: 16px; }
.muglc-preloader__hud--bot { bottom: 24px; }
.muglc-preloader__hud .hide-sm { display: none; }
@media (min-width: 640px) { .muglc-preloader__hud .hide-sm { display: inline; } }
.muglc-preloader.is-gone { display: none; }
body.muglc-loading { overflow: hidden; }

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */
.stack   { display: grid; gap: 16px; }
.stack-sm{ display: grid; gap: 12px; }
.stack-xs{ display: grid; gap: 4px; }
.mt-6  { margin-top: 24px; }
.mt-10 { margin-top: 40px; }
.pt-2  { padding-top: 8px; }
.dim   { opacity: .7; }
.maxw-2xl { max-width: 42rem; }
.link-arcade { color: var(--primary); font-family: var(--font-arcade); font-size: 11px; }
.link-arcade:hover { text-decoration: underline; }