:root {
  --color-text: #ffe066;
  --color-text-muted: #c9a86c;
  --color-yellow: #f4d03f;
  --color-yellow-light: #ffeaa7;
  --color-green-dark: #2d5016;
  --wood-brown: #6b3a1f;
  --wood-gold: #d4a017;
  --wood-dark: #3d2010;
  --ui-texture: url('../assets/earth_ui_tex.jpg');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--wood-gold) var(--wood-dark);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background:
    linear-gradient(rgba(42, 26, 14, 0.92), rgba(35, 22, 10, 0.96)),
    var(--ui-texture) center / 32px 32px repeat;
  border: 2px solid var(--wood-brown);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--color-yellow-light) 0%,
    var(--wood-gold) 50%,
    #8b5a2b 100%
  );
  border: 2px solid var(--wood-brown);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-yellow);
}

*::-webkit-scrollbar-corner {
  background: var(--wood-dark);
  border: 2px solid var(--wood-brown);
}

body {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.9;
  color: var(--color-text);
  min-height: 100vh;
  background:
    linear-gradient(rgba(42, 26, 14, 0.9), rgba(35, 22, 10, 0.96)),
    var(--ui-texture) center / 80px 80px repeat;
  image-rendering: pixelated;
  overflow-x: hidden;
}

.legal-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.legal-decor-veggie {
  position: absolute;
  width: clamp(28px, 6vw, 48px);
  height: clamp(28px, 6vw, 48px);
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0.35;
  transform: rotate(var(--rot, 0deg));
}

.legal-decor-slide {
  position: absolute;
  width: clamp(72px, 18vw, 140px);
  height: clamp(72px, 18vw, 140px);
  object-fit: cover;
  border: 3px solid var(--wood-brown);
  box-shadow:
    inset 0 0 0 2px var(--wood-gold),
    4px 4px 0 rgba(0, 0, 0, 0.35);
  opacity: 0.22;
  transform: rotate(var(--rot, 0deg));
}

.legal-page {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding:
    calc(1.25rem + env(safe-area-inset-top, 0px))
    1.25rem
    calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.legal-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 3px dashed rgba(212, 160, 23, 0.45);
}

.legal-header h1 {
  font-size: clamp(0.72rem, 3.8vw, 0.92rem);
  color: var(--color-yellow-light);
  line-height: 1.8;
  margin-bottom: 0.55rem;
}

.legal-back {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: clamp(0.48rem, 2.6vw, 0.58rem);
  color: var(--color-text-muted);
  text-decoration: none;
}

.legal-back:hover {
  color: var(--color-yellow);
}

.legal-card {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: rgba(45, 80, 22, 0.42);
  border: 3px solid var(--wood-brown);
  box-shadow: inset 0 0 0 2px var(--wood-gold);
  border-radius: 4px;
}

.legal-card h2 {
  font-size: clamp(0.56rem, 3vw, 0.68rem);
  color: var(--color-yellow);
  margin-bottom: 0.65rem;
  line-height: 1.8;
}

.legal-card p,
.legal-card li {
  font-size: clamp(0.46rem, 2.4vw, 0.54rem);
  color: var(--color-text-muted);
  margin-bottom: 0.55rem;
}

.legal-card ul {
  padding-left: 1.1rem;
  margin-bottom: 0.55rem;
}

.legal-card li {
  margin-bottom: 0.35rem;
}

.legal-footer {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 3px dashed rgba(212, 160, 23, 0.35);
  font-size: clamp(0.42rem, 2.2vw, 0.5rem);
  color: var(--color-text-muted);
  text-align: center;
}

.legal-footer a {
  color: var(--color-yellow);
}