:root {
  --ink: #e7f3ef;
  --mist: #a6c6bf;
  --deep: #051619;
  --wash: #102e35;
  --teal: #217a84;
  --moss: #61b382;
  --flare: #f0e4a1;
  --line: rgba(166, 198, 191, 0.34);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background: linear-gradient(140deg, #071a1d 0%, #0f3237 45%, #081d20 100%);
}

#dialogue-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(780px 390px at 16% 10%, rgba(97, 179, 130, 0.24), transparent 62%),
    radial-gradient(680px 340px at 84% 16%, rgba(240, 228, 161, 0.2), transparent 64%),
    radial-gradient(940px 450px at 50% 90%, rgba(33, 122, 132, 0.18), transparent 68%);
  animation: sky-shift 16s ease-in-out infinite alternate;
}

.dialogue-shell {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 42px 18px 50px;
}

.dialogue-header h1 {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  letter-spacing: 0.02em;
}

.voice-line {
  margin: 8px 0;
  color: var(--mist);
}

.portal-grid {
  margin-top: 24px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.portal {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  background: linear-gradient(160deg, rgba(9, 31, 35, 0.84), rgba(6, 21, 24, 0.92));
  box-shadow: 0 24px 52px -28px rgba(3, 16, 18, 0.85);
  transform: rotate(var(--portal-tilt, 0deg));
  transition: transform 620ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms ease, border-color 280ms ease;
}

.portal:hover {
  border-color: rgba(240, 228, 161, 0.78);
  box-shadow: 0 26px 58px -24px rgba(7, 44, 46, 0.95);
}

.portal.rotating {
  animation: rotate-pop 620ms ease;
}

.portal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.portal h2 {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 1.75rem;
}

.ritual {
  margin: 9px 0 4px;
  color: var(--flare);
  font-weight: 600;
}

.branch-status {
  margin: 0 0 10px;
  color: var(--mist);
  font-size: 0.93rem;
}

.branch-status span {
  color: var(--ink);
  font-weight: 700;
}

.glyph-rotate {
  border: 1px solid rgba(240, 228, 161, 0.64);
  border-radius: 999px;
  background: rgba(240, 228, 161, 0.08);
  color: var(--flare);
  font-weight: 600;
  padding: 7px 11px;
  cursor: pointer;
}

.portal-form {
  display: grid;
  gap: 8px;
}

.portal-form label {
  font-size: 0.86rem;
  color: var(--mist);
}

.portal-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 25, 28, 0.8);
  color: var(--ink);
  padding: 10px 12px;
}

.portal-form button {
  width: fit-content;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  color: #041316;
  background: linear-gradient(145deg, var(--teal), var(--moss));
}

.feedback {
  min-height: 1.2em;
  margin: 10px 0 8px;
  color: var(--flare);
  font-size: 0.9rem;
}

.results {
  display: grid;
  gap: 10px;
}

.result-card {
  border: 1px solid rgba(166, 198, 191, 0.28);
  border-radius: 12px;
  background: rgba(6, 20, 22, 0.78);
  padding: 10px;
  animation: rise-in 500ms ease both;
}

.result-card h3 {
  margin: 0;
  font-size: 1.02rem;
}

.result-card h3 a {
  color: #d6fff0;
  text-decoration: none;
}

.result-card h3 a:hover {
  text-decoration: underline;
}

.result-meta {
  margin: 6px 0;
  color: var(--mist);
  font-size: 0.84rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-block;
  border: 1px solid rgba(166, 198, 191, 0.36);
  border-radius: 999px;
  color: #c6e7dd;
  text-decoration: none;
  padding: 4px 8px;
  font-size: 0.78rem;
}

.chip:hover {
  color: var(--flare);
  border-color: rgba(240, 228, 161, 0.76);
}

body.inhale .portal {
  box-shadow: 0 28px 62px -25px rgba(25, 93, 87, 0.58);
}

body.exhale .portal {
  box-shadow: 0 20px 44px -27px rgba(4, 12, 14, 0.94);
}

.dialogue-footer {
  margin-top: 28px;
  color: var(--mist);
  font-size: 0.9rem;
}

@keyframes sky-shift {
  from {
    transform: translateX(-1.4%) translateY(-0.8%);
  }
  to {
    transform: translateX(1.4%) translateY(0.8%);
  }
}

@keyframes rotate-pop {
  0% {
    transform: rotate(var(--portal-tilt, 0deg)) scale(1);
  }
  44% {
    transform: rotate(calc(var(--portal-tilt, 0deg) + 3deg)) scale(1.01);
  }
  100% {
    transform: rotate(var(--portal-tilt, 0deg)) scale(1);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .dialogue-shell {
    padding: 30px 12px 42px;
  }

  .portal {
    border-radius: 16px;
    padding: 12px;
  }
}