/* ================================================================
   Die Wahl – rote oder blaue Pille
   ================================================================ */
:root {
  --bg: #000;
  --green: #00ff41;
  --text: #c9ffd2;
  --red: #e0102a;
  --red-light: #ff4d5e;
  --blue: #1559ff;
  --blue-light: #6e98ff;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 1.4s ease, color 1.4s ease;
}

/* ---------- Hintergrund-Ebenen ---------- */
#rain {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .5;
  transition: opacity 1.2s ease, filter 1.2s ease;
}
body[data-state="taking-red"]  #rain { opacity: 1; filter: brightness(1.5) saturate(1.3); }
body[data-state="red"]         #rain { opacity: .28; }
body[data-state="taking-blue"] #rain { opacity: .2; filter: blur(4px) hue-rotate(100deg); }
body[data-state="blue-erase"]  #rain { opacity: .08; filter: blur(8px) hue-rotate(100deg); }
body[data-state="blue"]        #rain { opacity: 0; }

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .28) 2px 3px);
  transition: opacity 1.2s ease;
}
body[data-state="blue"] .scanlines { opacity: 0; }

.flash {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease-out;
}
body.flash-on .flash { opacity: 1; transition: none; }

/* ---------- Layout ---------- */
main {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.screen { width: 100%; max-width: 720px; text-align: center; }
.screen[hidden] { display: none; }

.panel {
  background: rgba(0, 0, 0, .66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(0, 255, 65, .18);
  border-radius: 20px;
  padding: clamp(24px, 5vw, 48px) clamp(16px, 4.5vw, 44px);
  box-shadow: 0 0 80px rgba(0, 0, 0, .7), inset 0 0 40px rgba(0, 255, 65, .04);
}

/* ---------- Die Wahl ---------- */
.kicker {
  margin: 0;
  min-height: 1.5em;
  color: var(--green);
  font-size: .9rem;
  letter-spacing: .25em;
  text-shadow: 0 0 8px rgba(0, 255, 65, .8);
}
.kicker::after {
  content: "▌";
  margin-left: 3px;
  animation: blink 1s steps(1) infinite;
}

h1, h2 { outline: none; }

h1 {
  margin: .35em 0 .5em;
  font-size: clamp(1.9rem, 7.5vw, 3.4rem);
  line-height: 1.1;
  color: #eafff0;
  letter-spacing: .01em;
  text-shadow: 0 0 22px rgba(0, 255, 65, .45);
}

.lead {
  max-width: 54ch;
  margin: 0 auto 1rem;
  font-size: clamp(.92rem, 2.6vw, 1.05rem);
  line-height: 1.65;
}
.c-blue { color: var(--blue-light); }
.c-red  { color: var(--red-light); }

.fineprint {
  margin: 1.8rem 0 0;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}
.keys { display: none; }
@media (hover: hover) and (pointer: fine) { .keys { display: inline; } }
kbd {
  font-family: inherit;
  padding: 0 .35em;
  border: 1px solid currentColor;
  border-radius: 4px;
}

/* Einblenden nach dem Intro (nur mit JS) */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .9s ease, transform .9s ease;
}
.js .is-ready .reveal { opacity: 1; transform: none; pointer-events: auto; }
.js .is-ready .reveal:nth-of-type(2) { transition-delay: .1s; }
.js .is-ready .lead + .lead { transition-delay: .25s; }
.js .is-ready .pills { transition-delay: .45s; }
.js .is-ready .fineprint { transition-delay: .7s; }

/* ---------- Pillen ---------- */
.pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 4vw, 36px);
  max-width: 540px;
  margin: 2rem auto 0;
}

.pill-choice {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: clamp(26px, 6vw, 36px) 10px 20px;
  color: inherit;
  font: inherit;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .3s ease, opacity .5s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.pill-choice:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pill-choice:active { transform: scale(.97); }

@media (hover: hover) {
  .pill-choice:hover { transform: translateY(-4px); }
}
.pill-choice--blue:hover, .pill-choice--blue:focus-visible {
  border-color: rgba(21, 89, 255, .7);
  background: rgba(21, 89, 255, .08);
  box-shadow: 0 0 40px rgba(21, 89, 255, .3);
}
.pill-choice--red:hover, .pill-choice--red:focus-visible {
  border-color: rgba(224, 16, 42, .7);
  background: rgba(224, 16, 42, .08);
  box-shadow: 0 0 40px rgba(224, 16, 42, .3);
}

.pill {
  position: relative;
  display: block;
  width: clamp(78px, 21vw, 116px);
  aspect-ratio: 2.4 / 1;
  margin-bottom: 12px;
  border-radius: 999px;
  animation: float 4s ease-in-out infinite;
}
.pill::before { /* Naht */
  content: "";
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 50%;
  width: 1px;
  background: rgba(0, 0, 0, .25);
}
.pill::after { /* Glanzlicht */
  content: "";
  position: absolute;
  top: 13%;
  left: 13%;
  width: 46%;
  height: 24%;
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}

.pill-choice--blue .pill {
  rotate: 28deg;
  background: linear-gradient(160deg, #8fb0ff 0%, var(--blue) 45%, #071f73 100%);
  box-shadow:
    inset 0 -7px 12px rgba(0, 0, 0, .45),
    inset 0 4px 8px rgba(255, 255, 255, .25),
    0 0 30px rgba(21, 89, 255, .6),
    0 12px 26px rgba(0, 0, 0, .6);
  animation-delay: -2s;
}
.pill-choice--red .pill {
  rotate: -28deg;
  background: linear-gradient(160deg, #ff8090 0%, var(--red) 45%, #6b0010 100%);
  box-shadow:
    inset 0 -7px 12px rgba(0, 0, 0, .45),
    inset 0 4px 8px rgba(255, 255, 255, .25),
    0 0 30px rgba(224, 16, 42, .6),
    0 12px 26px rgba(0, 0, 0, .6);
}

.pill-label {
  font-weight: 700;
  font-size: clamp(.82rem, 3.4vw, .98rem);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pill-choice--blue .pill-label { color: var(--blue-light); }
.pill-choice--red  .pill-label { color: var(--red-light); }
.pill-hint { font-size: clamp(.72rem, 3vw, .82rem); opacity: .7; line-height: 1.4; }

/* Pille wird geschluckt */
body[data-state^="taking"] .pill-choice:not(.is-chosen) { opacity: .12; transform: scale(.92); }
.pill-choice.is-chosen .pill { animation: swallow 1.3s cubic-bezier(.5, 0, .75, 0) forwards; }
.pill-choice:disabled { cursor: default; }

body[data-state="taking-red"] .panel { animation: glitch .32s steps(2) infinite; }
body[data-state="taking-blue"] .panel { transition: filter 1.3s ease, opacity 1.3s ease; filter: blur(6px); opacity: .4; }

/* ---------- Rote Pille ---------- */
.panel--red {
  text-align: left;
  border-color: rgba(224, 16, 42, .35);
  box-shadow: 0 0 80px rgba(0, 0, 0, .7), 0 0 50px rgba(224, 16, 42, .12);
}

.terminal {
  margin: 0;
  min-height: 8.5em;
  font-family: var(--mono);
  font-size: clamp(.8rem, 3.2vw, .98rem);
  line-height: 1.7;
  color: var(--green);
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 0 6px rgba(0, 255, 65, .6);
}
.terminal::after {
  content: "▌";
  animation: blink 1s steps(1) infinite;
}

.outro {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease, transform 1s ease, visibility 0s 1s;
}
.is-done .outro {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 1s ease, transform 1s ease, visibility 0s;
}
.outro h2 {
  margin: 1.4rem 0 .6rem;
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 0 24px rgba(224, 16, 42, .8);
}
.outro p { margin: 0 0 1rem; line-height: 1.65; font-size: clamp(.92rem, 2.6vw, 1.05rem); }

.btn {
  appearance: none;
  min-height: 44px;
  padding: .7em 1.4em;
  font: inherit;
  font-size: .9rem;
  letter-spacing: .1em;
  color: inherit;
  background: none;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .3s ease, color .3s ease;
}
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn--red { border: 1px solid var(--red-light); color: var(--red-light); text-transform: uppercase; }
.btn--red:hover { background: var(--red); color: #fff; }

.outro .manifest {
  margin: 1.6rem 0 0;
  padding: .2rem 0 .2rem 1rem;
  border-left: 2px solid var(--red-light);
}
.outro .manifest p { color: #f2fff4; }
.outro .manifest p:last-child { margin-bottom: 0; font-style: italic; color: var(--red-light); }

.outro .final {
  margin: 1.8rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(224, 16, 42, .3);
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--red-light);
  text-shadow: 0 0 10px rgba(224, 16, 42, .6);
}

/* ---------- Blaue Pille ---------- */
.erase { color: var(--blue-light); }
.erase-label { margin: 0; letter-spacing: .15em; font-size: .9rem; animation: pulse 1.6s ease-in-out infinite; }
.progress {
  max-width: 300px;
  height: 4px;
  margin: 1.2rem auto 0;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(110, 152, 255, .2);
}
.progress span { display: block; width: 0; height: 100%; background: var(--blue-light); box-shadow: 0 0 12px var(--blue-light); }
body[data-state="blue-erase"] .progress span { animation: fill 3.4s ease-in-out forwards; }

.morning { display: none; }
body[data-state="blue"] .erase { display: none; }
body[data-state="blue"] .morning { display: block; animation: wake 1.6s ease both; }

body[data-state="blue"] {
  background: #f4f0e8;
  color: #3a3a3a;
}

.morning { font-family: var(--sans); }
.morning .clock {
  margin: 0;
  font-size: clamp(3rem, 16vw, 5.5rem);
  font-weight: 200;
  letter-spacing: .04em;
  color: #9a948a;
  font-variant-numeric: tabular-nums;
}
.morning h2 {
  margin: .2em 0 .5em;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 600;
  color: #1f2a44;
}
.morning p { margin: 0 0 .8rem; line-height: 1.65; font-size: clamp(.98rem, 2.8vw, 1.1rem); }
.morning .whisper { margin-top: 2rem; font-size: .85rem; font-style: italic; opacity: .5; }
.btn--link {
  font-family: var(--mono);
  font-size: .8rem;
  color: #1559ff;
  opacity: .55;
  border: 1px solid transparent;
}
.btn--link:hover { opacity: 1; border-color: currentColor; }

/* ---------- Keyframes ---------- */
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes float { 50% { translate: 0 -7px; } }
@keyframes fill { to { width: 100%; } }
@keyframes swallow {
  0%   { scale: 1; opacity: 1; }
  35%  { scale: 1.3; opacity: 1; }
  100% { scale: 0; opacity: 0; }
}
@keyframes wake {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: none; }
}
@keyframes glitch {
  0%   { transform: translate(0, 0); filter: none; }
  25%  { transform: translate(-4px, 1px); filter: drop-shadow(3px 0 rgba(255, 0, 40, .8)) drop-shadow(-3px 0 rgba(0, 255, 255, .6)); }
  50%  { transform: translate(3px, -2px); filter: none; }
  75%  { transform: translate(-1px, 2px); filter: drop-shadow(-2px 0 rgba(255, 0, 40, .8)); }
  100% { transform: translate(0, 0); filter: none; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}