/* ──────────────────────────────────────────────────────────────────────
   Mathtropia — färger, typografi och bakgrundslandskapet.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Natt och sten */
  --night-1:   #140e28;
  --night-2:   #1d1440;
  --night-3:   #2a1d58;
  --royal:     #3b2a6b;
  --royal-soft:#4a3684;

  /* Pergament */
  --parch-1:   #f7ebd2;
  --parch-2:   #eddcb8;
  --parch-3:   #e0cba0;
  --parch-edge:#c9ad7a;
  --ink:       #40301c;
  --ink-soft:  #6b5636;

  /* Guld och juveler */
  --gold:      #f0b135;
  --gold-hi:   #ffd980;
  --gold-deep: #a8761a;
  --emerald:   #2f9d6c;
  --crimson:   #d44560;
  --sky:       #57a9e2;
  --plum:      #8a5cc4;

  /* Roller */
  --ok:        #2f9d6c;
  --ok-hi:     #58c894;
  --bad:       #d44560;
  --bad-hi:    #f07d91;

  --text-on-dark: #f3ecdc;
  --text-dim:     #b7a9d4;

  /* Form */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-lift:  0 10px 30px rgba(8, 4, 24, .45);
  --shadow-deep:  0 22px 60px rgba(8, 4, 24, .6);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .5);

  --font-title: 'Cinzel Decorative', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body:  'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --gutter: 16px;
  --topbar-h: 62px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-on-dark);
  background: var(--night-1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .title {
  font-family: var(--font-title);
  letter-spacing: .01em;
  margin: 0;
}

button, input, select { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Bakgrundslandskapet ─────────────────────────────────────────────*/

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, #3a2a6e 0%, #241a4c 38%, #160f2e 70%, #100a22 100%);
  pointer-events: none;
}

.sky__stars {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 28% 8%,  #ffeab8 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 44% 24%, #fff 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 62% 12%, #dfe6ff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 78% 22%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 88% 6%,  #ffeab8 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 8%  36%, #fff 50%, transparent 52%),
    radial-gradient(1px   1px   at 34% 40%, #cfd8ff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 54% 34%, #fff 50%, transparent 52%),
    radial-gradient(1px   1px   at 70% 42%, #ffeab8 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 92% 38%, #fff 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 20% 52%, #dfe6ff 50%, transparent 52%);
  opacity: .85;
  animation: twinkle 6s ease-in-out infinite alternate;
}

.sky__moon {
  position: absolute;
  top: 6%;
  right: 12%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff8e2 0%, #f6e3ae 55%, #e2c884 100%);
  box-shadow: 0 0 44px 14px rgba(255, 233, 176, .22), 0 0 120px 40px rgba(255, 220, 150, .1);
}
.sky__moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 28%, rgba(196,170,116,.5) 0 8%, transparent 9%),
    radial-gradient(circle at 40% 62%, rgba(196,170,116,.4) 0 11%, transparent 12%),
    radial-gradient(circle at 70% 66%, rgba(196,170,116,.35) 0 6%, transparent 7%);
}

.sky__mountains {
  position: absolute;
  left: -5%; right: -5%;
  bottom: 0;
  height: 46%;
  background:
    linear-gradient(to top, #191134 0%, #1d1540 60%, transparent 100%);
  clip-path: polygon(
    0% 100%, 0% 58%, 7% 44%, 14% 56%, 22% 34%, 30% 52%, 38% 40%,
    47% 60%, 55% 38%, 63% 54%, 72% 42%, 80% 58%, 88% 46%, 96% 60%, 100% 50%, 100% 100%);
  opacity: .9;
}

.sky__castle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(760px, 118vw);
  height: 300px;
  transform: translateX(-50%);
  background: #100b24;
  opacity: .96;
  clip-path: polygon(
    0% 100%, 0% 62%, 5% 62%, 5% 52%, 8% 52%, 8% 62%, 11% 62%, 11% 44%,
    14% 44%, 14% 34%, 17% 34%, 17% 44%, 20% 44%, 20% 62%, 26% 62%, 26% 50%,
    30% 50%, 30% 38%, 33% 38%, 33% 26%, 36% 26%, 36% 38%, 39% 38%, 39% 50%,
    44% 50%, 44% 40%, 47% 40%, 47% 18%, 50% 10%, 53% 18%, 53% 40%, 56% 40%,
    56% 50%, 61% 50%, 61% 38%, 64% 38%, 64% 26%, 67% 26%, 67% 38%, 70% 38%,
    70% 50%, 74% 50%, 74% 62%, 80% 62%, 80% 44%, 83% 44%, 83% 34%, 86% 34%,
    86% 44%, 89% 44%, 89% 62%, 92% 62%, 92% 52%, 95% 52%, 95% 62%, 100% 62%,
    100% 100%);
}

/* Upplysta fönster i borgen */
.sky__castle::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(3px 5px at 31% 62%, rgba(255,198,92,.95) 50%, transparent 52%),
    radial-gradient(3px 5px at 36% 70%, rgba(255,198,92,.8) 50%, transparent 52%),
    radial-gradient(3px 6px at 50% 42%, rgba(255,214,120,.95) 50%, transparent 52%),
    radial-gradient(3px 5px at 50% 60%, rgba(255,198,92,.85) 50%, transparent 52%),
    radial-gradient(3px 5px at 64% 66%, rgba(255,198,92,.9) 50%, transparent 52%),
    radial-gradient(3px 5px at 15% 74%, rgba(255,198,92,.7) 50%, transparent 52%),
    radial-gradient(3px 5px at 84% 74%, rgba(255,198,92,.7) 50%, transparent 52%);
  animation: flicker 4.5s ease-in-out infinite alternate;
}

.sky__mist {
  position: absolute;
  left: -10%; right: -10%;
  bottom: -4%;
  height: 34%;
  background: linear-gradient(to top, rgba(150,130,200,.22), transparent 78%);
  filter: blur(14px);
}

.sky__embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Lugnt läge: stäng av rörelse i bakgrunden */
body.calm .sky__stars,
body.calm .sky__castle::after { animation: none; }
body.calm .sky__embers { display: none; }