/* =========================================================
   PIXELART GEBURTSTAGS-EINLADUNG
   Stil: isometrisch-fröhlich, kräftige Farben, retro-game
   ========================================================= */

:root {
  --sky-top: #5ec5ff;
  --sky-bot: #b6ecff;
  --ink: #2b1d3a;
  --paper: #fff7e6;
  --paper-shadow: #e8d5a8;
  --yes: #3ddc84;
  --yes-dark: #1ea85c;
  --no: #ff7a7a;
  --accent: #ffd23f;
  --accent2: #ff6ec7;
  --cal: #6c8cff;
  --pixel: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { image-rendering: pixelated; }

body {
  font-family: "VT323", monospace;
  font-size: 20px;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%);
  position: relative;
}

/* ---------- HIMMEL & WOLKEN ---------- */
.sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.sun {
  position: absolute; top: 6%; right: 8%;
  width: 90px; height: 90px; background: var(--accent);
  box-shadow:
    0 0 0 8px rgba(255,210,63,.4),
    0 0 0 18px rgba(255,210,63,.2);
  /* pixeliger Kreis durch clip-path-Stufen */
  clip-path: polygon(
    25% 0, 75% 0, 75% 12%, 88% 12%, 88% 25%, 100% 25%, 100% 75%,
    88% 75%, 88% 88%, 75% 88%, 75% 100%, 25% 100%, 25% 88%, 12% 88%,
    12% 75%, 0 75%, 0 25%, 12% 25%, 12% 12%, 25% 12%);
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.08); } }

.cloud {
  position: absolute;
  background: #fff;
  box-shadow:
    24px 0 0 #fff, 48px 0 0 #fff,
    24px -16px 0 #fff, 12px -16px 0 #fff;
  width: 24px; height: 16px;
  opacity: .9;
}
.c1 { top: 18%; left: -10%; animation: drift 38s linear infinite; }
.c2 { top: 35%; left: -10%; transform: scale(1.6); animation: drift 55s linear infinite 4s; }
.c3 { top: 10%; left: -10%; transform: scale(.8); animation: drift 28s linear infinite 10s; }
@keyframes drift { to { left: 120%; } }

/* ---------- SCREENS ---------- */
.screen {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
}
.hidden { display: none !important; }

/* ---------- KARTE ---------- */
.card {
  position: relative;
  width: 100%; max-width: 560px;
  background: var(--paper);
  border: var(--pixel) solid var(--ink);
  box-shadow:
    8px 8px 0 var(--ink),
    inset 0 0 0 var(--pixel) var(--paper-shadow);
  padding: 36px 28px 30px;
}
.card.center { text-align: center; }

/* pixeliger Eck-Akzent */
.card::before, .card::after {
  content:""; position:absolute; width:12px; height:12px;
  background: var(--accent2);
}
.card::before { top:-8px; left:-8px; }
.card::after  { bottom:-8px; right:-8px; }

/* ---------- TITEL ---------- */
.title {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(18px, 4.5vw, 30px);
  line-height: 1.4;
  text-align: center;
  color: var(--accent2);
  text-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 10px;
}
.glow { animation: glow 2.5s ease-in-out infinite; }
@keyframes glow {
  50% { text-shadow: 3px 3px 0 var(--ink), 0 0 14px var(--accent2); }
}
.subtitle { text-align:center; font-size: 24px; margin-bottom: 22px; }

/* ---------- BALLONS ---------- */
.pixel-banner { display:flex; justify-content:center; gap:18px; margin-bottom:8px; }
.balloon {
  width: 20px; height: 26px; display:inline-block; position:relative;
  border: 3px solid var(--ink);
  animation: bob 2.4s ease-in-out infinite;
}
.balloon::after {
  content:""; position:absolute; bottom:-10px; left:50%;
  width:2px; height:10px; background: var(--ink); transform:translateX(-50%);
}
.b1 { background: var(--no); }
.b2 { background: var(--yes); animation-delay:.3s; }
.b3 { background: var(--cal); animation-delay:.6s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- INFO-BOXEN ---------- */
.info-grid { display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.info-box {
  flex:1; min-width:160px;
  background:#fff; border:3px solid var(--ink);
  padding:10px 12px; box-shadow:4px 4px 0 var(--ink);
}
.info-label {
  display:block; font-family:"Press Start 2P"; font-size:9px;
  color:var(--accent2); margin-bottom:6px;
}
.info-value { font-size:22px; }

.desc { font-size:21px; line-height:1.4; margin-bottom:16px; }

/* ---------- PROGRAMM ---------- */
.programm { list-style:none; margin-bottom:24px; }
.programm li {
  padding:6px 0 6px 26px; position:relative; font-size:21px;
  border-bottom:2px dotted var(--paper-shadow);
}
.programm li::before {
  content:"►"; position:absolute; left:4px; color:var(--yes-dark);
}

/* ---------- FORMULAR ---------- */
.form { display:flex; flex-direction:column; gap:14px; }
.row { display:flex; gap:14px; }
.row .field { flex:1; }
.field { display:flex; flex-direction:column; gap:5px; }
.field span {
  font-family:"Press Start 2P"; font-size:9px; color:var(--ink);
}
input, textarea {
  font-family:"VT323", monospace; font-size:20px;
  padding:9px 11px; background:#fff;
  border:3px solid var(--ink); color:var(--ink);
  box-shadow: inset 2px 2px 0 var(--paper-shadow);
}
input:focus, textarea:focus { outline:3px solid var(--accent); }
textarea { resize:vertical; }

/* ---------- BUTTONS ---------- */
.btn-zone { display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; align-items:center; }
.btn {
  font-family:"Press Start 2P", monospace; font-size:12px;
  padding:14px 18px; cursor:pointer; text-decoration:none;
  border:3px solid var(--ink); color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition: transform .05s, box-shadow .05s;
  display:inline-block; text-align:center; user-select:none;
}
.btn:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn-yes { background:var(--yes); flex:1; min-width:180px; font-size:14px; }
.btn-yes:hover { background:var(--yes-dark); color:#fff; }
.btn-no {
  background:var(--no); font-size:11px; padding:11px 14px;
  position:relative; transition: left .18s ease, top .18s ease, transform .05s;
}
.btn-cal { background:var(--cal); color:#fff; flex:1; min-width:160px; font-size:11px; }
.btn-cal:hover { filter:brightness(1.12); }
.btn-ghost {
  background:transparent; box-shadow:none; border:none;
  font-size:11px; margin-top:18px; text-decoration:underline;
}
.form-msg { font-size:20px; min-height:24px; text-align:center; }
.form-msg.err { color:#c0392b; }
.form-msg.ok  { color:var(--yes-dark); }

/* ---------- ZUSAGE-SEITE ---------- */
.big { font-size:30px; margin:10px 0; }
.cal-head { font-family:"Press Start 2P"; font-size:11px; margin:24px 0 14px; }
.confetti-zone { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti {
  position:absolute; width:10px; height:10px; top:-12px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(540deg); opacity:.2; }
}

/* ---------- DOOMSDAY ---------- */
.doom {
  background:#0a0a0f;
  background-image:
    radial-gradient(circle at 50% 0%, #1a0a2a 0%, #0a0a0f 70%);
}
.static-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.06;
  background-image: repeating-linear-gradient(
    0deg, #fff 0 1px, transparent 1px 3px);
  animation: flick .1s steps(2) infinite;
}
@keyframes flick { 50% { opacity:.03; } }
.doom-card {
  background:#15101f; border-color:#ff3b6b;
  box-shadow:8px 8px 0 #ff3b6b, inset 0 0 0 4px #2a1535;
  color:#ffd6e6; text-align:center; z-index:1;
}
.doom-card::before, .doom-card::after { background:#ff3b6b; }
.doom-title {
  font-family:"Press Start 2P"; font-size:16px; color:#ff3b6b;
  text-shadow:2px 2px 0 #000; margin-bottom:18px;
  animation: shake 3s ease-in-out infinite;
}
@keyframes shake {
  92%,100%{transform:translateX(0);} 94%{transform:translateX(-3px);}
  96%{transform:translateX(3px);} 98%{transform:translateX(-2px);}
}
.doom-text { font-size:22px; line-height:1.4; margin-bottom:22px; }
.doom-text em { color:#ff3b6b; }

/* Mini-Puzzle */
.puzzle { margin:0 auto 12px; }
.puzzle-hint {
  font-family:"Press Start 2P"; font-size:10px; color:var(--accent);
  margin-bottom:14px; line-height:1.6;
}
.lock { display:flex; justify-content:center; gap:12px; margin-bottom:14px; }
.dial {
  font-family:"Press Start 2P"; font-size:22px;
  width:54px; height:64px; cursor:pointer;
  background:#241733; color:#ffd6e6; border:3px solid #ff3b6b;
  box-shadow:3px 3px 0 #000;
}
.dial:active { transform:translate(3px,3px); box-shadow:0 0 0 #000; }
.puzzle-status { font-size:19px; margin-bottom:16px; min-height:22px; }
.btn-doom {
  background:#ff3b6b; color:#fff; border-color:#000;
  box-shadow:4px 4px 0 #000; font-size:11px;
}
.btn-doom:disabled { opacity:.35; cursor:not-allowed; }
.btn-rescue {
  background:var(--yes); color:var(--ink); font-size:12px;
  margin-top:20px; display:block; width:100%;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:520px){
  .row { flex-direction:column; }
  .btn-zone { flex-direction:column; }
  .btn-yes, .btn-no, .btn-cal { width:100%; }
}