/* Oraklet — mörk delfisk terminalmystik. Inga externa typsnitt, inga anrop. */

* { box-sizing: border-box; }

:root {
  --bg: #0b0a12;
  --bg2: #17142a;
  --guld: #e8c96a;
  --guld-dov: #9a8f78;
  --text: #d8d2c4;
  --text-ljus: #f0e9d8;
  --text-dov: #6e6553;
  --kant: #2a2540;
  --terminal: #9fd48a;
}

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(1200px 800px at 50% -10%, var(--bg2), var(--bg) 60%) fixed var(--bg);
  color: var(--text);
  font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
  line-height: 1.6;
}

/* Stjärnhimmel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(232, 201, 106, 0.5), transparent 100%),
    radial-gradient(1px 1px at 78% 14%, rgba(216, 210, 196, 0.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 32% 68%, rgba(232, 201, 106, 0.3), transparent 100%),
    radial-gradient(1px 1px at 88% 52%, rgba(180, 160, 255, 0.35), transparent 100%),
    radial-gradient(1px 1px at 55% 38%, rgba(216, 210, 196, 0.3), transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(180, 160, 255, 0.25), transparent 100%),
    radial-gradient(1px 1px at 66% 88%, rgba(232, 201, 106, 0.35), transparent 100%),
    radial-gradient(1px 1px at 42% 8%, rgba(216, 210, 196, 0.45), transparent 100%);
}

nav.topp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  padding: 1.2rem 1rem 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

nav.topp a {
  color: var(--guld-dov);
  text-decoration: none;
  padding: 0.2em 0.1em;
  transition: color 0.25s;
}

nav.topp a:hover { color: var(--guld); }

nav.topp a[aria-current="page"] {
  color: var(--guld);
  border-bottom: 1px solid var(--guld);
}

nav.topp .marke {
  color: var(--guld);
  font-size: 0.9rem;
  margin-right: 0.8rem;
}

main {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  text-align: center;
}

main.bred { max-width: 960px; }

h1.titel {
  font-weight: normal;
  font-size: clamp(2.4rem, 8vw, 4rem);
  letter-spacing: 0.32em;
  margin: 0.4em 0 0.1em;
  padding-left: 0.32em; /* kompensera letter-spacing */
  color: var(--guld);
  text-shadow: 0 0 32px rgba(232, 201, 106, 0.35);
}

.undertitel {
  color: var(--text-dov);
  font-style: italic;
  margin-top: 0;
}

h2 {
  font-weight: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--guld-dov);
  margin-top: 3rem;
}

/* Formulär */
form.fraga {
  margin: 2.2rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

input[type="text"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #4a4130;
  color: var(--text-ljus);
  font: inherit;
  font-size: 1.15rem;
  padding: 0.5em 0.2em;
  width: min(28rem, 88%);
  text-align: center;
  outline: none;
  caret-color: var(--guld);
  transition: border-color 0.3s;
}

input[type="text"]:focus { border-color: var(--guld); }

input[type="text"]::placeholder { color: var(--text-dov); font-style: italic; }

button, a.knapp {
  background: transparent;
  border: 1px solid #6b5d3a;
  color: var(--guld);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding: 0.6em 1.7em;
  cursor: pointer;
  transition: background 0.25s, box-shadow 0.25s;
}

button:hover, a.knapp:hover {
  background: rgba(232, 201, 106, 0.08);
  box-shadow: 0 0 18px rgba(232, 201, 106, 0.25);
}

/* Svar och profetior */
.svar {
  min-height: 5em;
  font-size: 1.3rem;
  line-height: 1.75;
  font-style: italic;
  color: var(--text-ljus);
  max-width: 34rem;
  margin: 2rem auto 0.6rem;
}

.skriver::after {
  content: "▍";
  color: var(--guld);
  animation: blink 1.05s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.not {
  color: var(--text-dov);
  font-size: 0.85rem;
  max-width: 30rem;
  margin: 0.8rem auto;
}

blockquote.profetia {
  font-size: 1.45rem;
  line-height: 1.8;
  font-style: italic;
  color: var(--text-ljus);
  max-width: 36rem;
  margin: 2.5rem auto;
  quotes: none;
}

blockquote.profetia::before,
blockquote.profetia::after {
  content: "✶";
  display: block;
  font-style: normal;
  color: var(--guld-dov);
  font-size: 0.9rem;
  margin: 1rem 0;
}

.datumrad {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1.4rem;
  color: var(--guld-dov);
  letter-spacing: 0.12em;
}

.datumrad a {
  color: var(--text-dov);
  text-decoration: none;
  font-size: 1.2rem;
}

.datumrad a:hover { color: var(--guld); }

/* Terminal/API */
pre {
  text-align: left;
  background: #12101c;
  border: 1px solid var(--kant);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  color: var(--terminal);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.85rem;
  overflow-x: auto;
  line-height: 1.7;
}

pre .prompt { color: var(--text-dov); user-select: none; }

/* Kristallkulan */
.kula-scen {
  margin: 2.5rem auto 0;
  --laddning: 0;
}

.kula {
  width: min(270px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  background:
    radial-gradient(circle at 35% 28%, rgba(200, 180, 255, 0.5), rgba(120, 90, 200, 0.12) 45%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(60, 45, 110, 0.9), rgba(25, 18, 50, 0.95) 70%, #0b0a12);
  box-shadow:
    inset 0 -20px 50px rgba(0, 0, 0, 0.6),
    inset 0 10px 40px rgba(190, 160, 255, calc(0.10 + 0.25 * var(--laddning))),
    0 0 calc(18px + 70px * var(--laddning)) rgba(160, 120, 255, calc(0.12 + 0.45 * var(--laddning)));
  transition: box-shadow 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kula.laddad { animation: puls 2.4s ease-in-out infinite; }

@keyframes puls {
  50% { box-shadow:
    inset 0 -20px 50px rgba(0, 0, 0, 0.6),
    inset 0 10px 40px rgba(190, 160, 255, 0.4),
    0 0 110px rgba(160, 120, 255, 0.7); }
}

.kula-text {
  padding: 2.2rem;
  font-size: 0.98rem;
  font-style: italic;
  color: #efe9ff;
  text-shadow: 0 0 12px rgba(180, 150, 255, 0.8);
}

.laddning {
  width: 200px;
  height: 2px;
  background: #241f38;
  margin: 1.6rem auto 0.8rem;
}

.laddning > div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6b5d3a, var(--guld), #b49aff);
  transition: width 0.2s;
}

/* Tarot */
.uppslag {
  display: flex;
  justify-content: center;
  gap: 1.6rem 2.2rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.plats { width: 210px; }

.position {
  color: var(--guld-dov);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.kort {
  width: 160px;
  height: 256px;
  margin: 0 auto;
  perspective: 900px;
}

.kort-inre {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotateY(180deg);
}

.kort.vand .kort-inre { transform: rotateY(0deg); }

.kort-fram, .kort-bak {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  border: 1px solid #6b5d3a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.kort-fram {
  background: linear-gradient(160deg, #1a1630, #141126 60%, #100d1e);
  padding: 1rem;
}

.kort-bak {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(232, 201, 106, 0.06) 0 8px, transparent 8px 16px),
    #141126;
  color: var(--guld-dov);
  font-size: 2.2rem;
}

.kort .glyf {
  font-size: 3.2rem;
  color: var(--guld);
  text-shadow: 0 0 20px rgba(232, 201, 106, 0.45);
}

.kort .kort-nr { color: var(--text-dov); font-size: 0.8rem; letter-spacing: 0.3em; }

.kort .kort-namn {
  color: var(--text-ljus);
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.kort.omvant .kort-fram { transform: rotateY(0deg) rotate(180deg); }

.omvant-etikett { color: #c98a6a; font-size: 0.75rem; font-style: italic; }

.tydning {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text);
  margin-top: 1rem;
  min-height: 4.5em;
}

/* Markov */
.markov-ut {
  min-height: 6em;
  font-size: 1.25rem;
  line-height: 1.85;
  font-style: italic;
  color: var(--text-ljus);
  max-width: 36rem;
  margin: 2.2rem auto;
}

footer {
  text-align: center;
  color: #55503f;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 2.5rem 1rem;
  line-height: 2;
}

footer a { color: var(--guld-dov); text-decoration: none; }