/* ═══════════════════════════════════════════
   Base — reset, body, layout, animations
   ═══════════════════════════════════════════ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--bg-body);
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
}

/* Animated background lines */
.moving-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      var(--lines-color-1) 0,
      var(--lines-color-1) 2px,
      transparent 2px,
      transparent 24px
    ),
    repeating-linear-gradient(
      45deg,
      var(--lines-color-2) 0,
      var(--lines-color-2) 1px,
      transparent 1px,
      transparent 32px
    );
  background-size: 220px 220px;
  animation: linesFlow 18s linear infinite;
}

@keyframes linesFlow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 220px -220px, -220px 220px; }
}

/* Page wrapper */
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 32px clamp(20px, 4vw, 56px);
  gap: 48px;
}

/* Tap highlight removal */
a,
button,
.top-button,
.icon-btn,
.contract-link,
.wallet-btn {
  -webkit-tap-highlight-color: transparent;
}

a:focus,
button:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* Responsive base */
@media (max-width: 640px) {
  .page {
    padding: 24px 16px;
    gap: 32px;
  }
}