:root {
  /* Colors */
  --color-bg-dark: #100011;
  --color-text-light: #feecff;
  --color-accent: #f200ff;
  --color-accent-mid: #cd00d7;
  --color-accent-deep: #720078;
  --color-text-muted: #c5b7c6;
  --color-bg-dark-alt: #110000;

  /* Animation & Transition */
  --transition: all 0.2s ease;
  --transition-opacity: opacity 300ms ease;

  /* Borders & Radii */
  --border-radius: 999px;
  --border-width: 2px;

  /* Spacing Scale (base 8px) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* Input Sizing */
  --input-height: var(--space-3xl);
  --button-padding: 0 var(--space-xl);
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  overflow: hidden;
}

body:not(.staticPage)::before {
  content: "";

  position: fixed;
  left: 50%;
  bottom: -45vh;
  transform: translateX(-50%);

  width: 180vw;
  height: 90vh;

  background: radial-gradient(
    ellipse at center,
    var(--color-accent-mid) 0%,
    var(--color-accent-deep) 45%,
    transparent 75%
  );

  filter: blur(80px);

  animation: oceanGlow 2s ease-in-out infinite alternate;

  pointer-events: none;
  z-index: -1;
}

@keyframes oceanGlow {
  from {
    transform: translateX(-50%) translateY(0);
  }

  to {
    transform: translateX(-50%) translateY(-60px);
  }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-light);
  transition: background-color 9999s ease-in-out 0s;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg-dark);
}

::-moz-selection {
  background: var(--color-accent);
  color: var(--color-bg-dark);
}

button,
a,
input,
label,
select {
  -webkit-tap-highlight-color: transparent;
}

button:focus {
  outline: none;
}

.footer {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-sm);

  font-size: var(--font-size-sm);

  display: flex;
  align-items: center; 
  gap: var(--space-lg);
}

.footer a,
.copyright {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--color-bg-dark);
}

.face {
  width: 40px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

button {
  font-size: 26px;
  height: var(--input-height);
  padding: var(--button-padding);
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--color-text-light);

  background: transparent;
  color: var(--color-text-light);

  cursor: pointer;
  transition: var(--transition);
}

button.active {
  background: var(--color-text-light);
  color: var(--color-bg-dark);
}

button:hover:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

button:hover {
  border-color: var(--color-accent);
}