/* ============================================================
   MEKABO — Build-A-Bot Workshop
   Design system: 80s transforming-robot toy packaging
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Saira+Condensed:wght@500;600;700;800&family=Saira:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  /* ---- Surfaces (the workshop / stage) ---- */
  --bg-0:        #07080d;   /* deep space black */
  --bg-1:        #0e1019;   /* panel black */
  --bg-2:        #161a27;   /* raised panel */
  --bg-3:        #20263a;   /* control surface */
  --bg-4:        #2a3148;   /* hover */
  --hairline:    rgba(255,255,255,.10);
  --hairline-2:  rgba(255,255,255,.18);

  /* ---- Cardboard / packaging paper ---- */
  --paper:       #ece2cb;   /* cardback cream */
  --paper-2:     #e2d6b9;
  --paper-line:  #c8b88f;
  --paper-ink:   #1a160e;

  /* ---- Text ---- */
  --ink:         #f3f5fb;
  --ink-dim:     #aab2c6;
  --ink-faint:   #69728a;

  /* ---- Utility metals ---- */
  --steel:       #9aa3b4;
  --steel-dark:  #495063;

  /* ---- Faction: MEIYOBO (heroic — warm) ---- */
  --mei-1:       #e8392b;   /* signal red   */
  --mei-2:       #f4b62c;   /* hero gold    */
  --mei-3:       #1f74e0;   /* sky blue     */
  --mei-glow:    #ffd36b;
  --mei-deep:    #2a0f0c;

  /* ---- Faction: KURAIBO (menace — cold) ---- */
  --kur-1:       #7b2ff7;   /* violet       */
  --kur-2:       #b026ff;   /* magenta-violet */
  --kur-3:       #2bff88;   /* acid green   */
  --kur-glow:    #b884ff;
  --kur-deep:    #120a22;

  /* ---- Grid / glow ---- */
  --grid-cyan:   rgba(60,200,255,.16);
  --neon-cyan:   #38e1ff;

  --radius:      6px;
  --shadow-hard: 6px 6px 0 rgba(0,0,0,.55);

  --font-display: 'Saira Stencil One', sans-serif;
  --font-head:    'Saira Condensed', sans-serif;
  --font-body:    'Saira', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- The stage backdrop: starfield + neon grid floor ---------- */
.stage-bg {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, #12182b 0%, transparent 60%),
    var(--bg-0);
  overflow: hidden;
}

.grid-floor {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 46%;
  background-image:
    linear-gradient(to right, var(--grid-cyan) 1px, transparent 1px),
    linear-gradient(to top,   var(--grid-cyan) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(420px) rotateX(64deg);
  transform-origin: bottom center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 92%);
          mask-image: linear-gradient(to top, #000 0%, transparent 92%);
}

/* ---------- Type helpers ---------- */
.wordmark {
  font-family: var(--font-display);
  letter-spacing: .04em;
  line-height: .9;
}
.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: 11px;
  color: var(--ink-faint);
}
.h-cond {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* ---------- Buttons / chips ---------- */
.btn {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  padding: 10px 16px;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--bg-4); border-color: var(--neon-cyan); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--mei-1);
  border-color: #ff6a5e;
  color: #fff;
}