/* Miland.Games — editorial/brutalist tech system */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* paper + ink */
  --paper: #f4f1ea;
  --paper-2: #ebe7dc;
  --paper-3: #ddd7c6;
  --ink: #0c0c0c;
  --ink-2: #1a1a17;
  --sub: #6a665e;
  --hair: rgba(12,12,12,0.14);
  --rule: rgba(12,12,12,0.86);

  /* dark inverted */
  --night: #0a0a0a;
  --night-2: #131311;
  --night-3: #1e1d19;
  --night-sub: #8a857a;
  --night-hair: rgba(244,241,234,0.12);

  /* accents */
  --acid: #e8ff2c;       /* lime */
  --acid-2: #c9e000;
  --hazard: #ff3a1f;     /* hot red */
  --olive: #7a7a1f;
  --magenta: #ff2e88;    /* casino neon pink */
  --electric: #2a5cff;   /* electric blue */
  --violet: #8b3dff;     /* purple */
  --gold: #ffc44a;
  --gold-2: #b58018;
  --emerald: #00e08a;
  --cyan: #00f0ff;

  /* foils + chrome */
  --foil-gold: linear-gradient(135deg, #fff2c2 0%, #ffd86a 22%, #c08a18 48%, #ffe89a 68%, #8a5a05 100%);
  --foil-chrome: linear-gradient(180deg, #fff 0%, #e6e6e6 28%, #999 50%, #fafafa 62%, #c4c4c4 80%, #5a5a5a 100%);
  --foil-holo: conic-gradient(from 210deg at 50% 50%, #ff2e88, #ffc44a, #e8ff2c, #00e08a, #00f0ff, #2a5cff, #8b3dff, #ff2e88);
  --gloss-disc: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 18%, rgba(255,255,255,0) 38%);
  --bloom-acid: radial-gradient(60% 80% at 50% 0%, rgba(232,255,44,0.22) 0%, rgba(232,255,44,0) 70%);
  --bloom-magenta: radial-gradient(50% 70% at 80% 20%, rgba(255,46,136,0.28) 0%, rgba(255,46,136,0) 70%);
  --bloom-electric: radial-gradient(50% 70% at 10% 80%, rgba(42,92,255,0.30) 0%, rgba(42,92,255,0) 70%);

  /* type */
  --sans: 'Archivo', system-ui, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* utility resets scoped under .mg-root so we don't leak into design-canvas */
.mg-root, .mg-root * { box-sizing: border-box; }
.mg-root { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.mg-root .mono { font-family: var(--mono); font-feature-settings: 'ss01' on; }
.mg-root .serif { font-family: var(--serif); font-style: italic; }
.mg-root .num { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* hair separator */
.mg-rule { background: var(--rule); }
.mg-hair { background: var(--hair); }

/* tag/pill */
.mg-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 7px; border: 1px solid currentColor; display: inline-flex; align-items: center; gap: 6px;
  line-height: 1;
}
.mg-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor; }

/* button */
.mg-btn {
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em; padding: 14px 18px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 10px; text-transform: uppercase;
  transition: transform .12s, background .12s, color .12s;
}
.mg-btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.mg-btn.ghost { background: transparent; color: var(--ink); }
.mg-btn.acid { background: var(--acid); color: var(--ink); border-color: var(--ink); }
.mg-btn.hazard { background: var(--hazard); color: var(--paper); border-color: var(--hazard); }

/* input */
.mg-field { display:flex; flex-direction: column; gap: 6px; }
.mg-field label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sub); }
.mg-field input, .mg-field select, .mg-field textarea {
  background: transparent; border: none; border-bottom: 1.5px solid var(--ink);
  padding: 10px 0; font-family: var(--sans); font-size: 16px; color: var(--ink); outline: none;
  width: 100%;
}
.mg-field input::placeholder { color: var(--sub); }

/* card */
.mg-card { background: var(--paper); border: 1.5px solid var(--ink); }
.mg-card.dark { background: var(--night-2); border-color: var(--night-hair); color: var(--paper); }

/* ─── shine utilities ─────────────────────────────────────── */

/* gradient text — applied to a wrapper, the children read the fill */
.mg-foil-gold {
  background: var(--foil-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mg-foil-chrome {
  background: var(--foil-chrome);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mg-foil-holo {
  background: var(--foil-holo);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: saturate(1.1);
}

/* neon outer glow text */
.mg-neon-acid {
  color: var(--acid);
  text-shadow: 0 0 8px rgba(232,255,44,0.7), 0 0 24px rgba(232,255,44,0.45), 0 0 60px rgba(232,255,44,0.25);
}
.mg-neon-magenta {
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255,46,136,0.7), 0 0 24px rgba(255,46,136,0.45), 0 0 60px rgba(255,46,136,0.25);
}
.mg-neon-cyan {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0,240,255,0.7), 0 0 24px rgba(0,240,255,0.45), 0 0 60px rgba(0,240,255,0.25);
}

/* glossy disc / chip */
.mg-disc {
  position: relative; border-radius: 50%;
  box-shadow: inset 0 -8px 18px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.25);
}
.mg-disc::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: var(--gloss-disc); pointer-events:none;
}

/* holographic chip background */
.mg-holo-bg {
  background: var(--foil-holo);
  background-size: 200% 200%;
  animation: mg-holo-shift 8s linear infinite;
}
@keyframes mg-holo-shift { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* gold foil button */
.mg-btn.gold {
  background: var(--foil-gold);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #1a1100; border-color: #6a4505;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  transition: background-position .4s, transform .12s, box-shadow .12s;
}
.mg-btn.gold:hover { background-position: 100% 50%; }

/* shimmer sweep on hover */
.mg-shimmer { position: relative; overflow: hidden; }
.mg-shimmer::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.mg-shimmer:hover::before { transform: translateX(120%); }

/* sparkle dots for casino feel — embed via background */
.mg-sparkle {
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 35% 80%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,0.6) 50%, transparent 51%);
}

/* marquee row */
.mg-marquee {
  font-family: var(--sans); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  display: flex; align-items: center; gap: 28px; white-space: nowrap;
}