/* Ein Fluch von mir – schwarz und lila */
:root{
  --ink:#f1ebff; --dim:#a99ec7; --faint:#6d628a;
  --violet:#a855f7; --violet-deep:#6d28d9; --violet-hi:#d8b4fe; --magenta:#e879f9;
  --line:#4a2f78; --panel-a:#150b25; --panel-b:#08040f;
  --serif:"Cinzel","Trajan Pro","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --body:"IM Fell English","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
*{box-sizing:border-box}
html{background:#05030a; overflow-x:clip; max-width:100%}
body{
  margin:0; min-height:100vh; min-height:100dvh; color:var(--ink); font-family:var(--body);
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,rgba(124,58,237,.38) 0%,transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 100%,rgba(88,28,135,.35) 0%,transparent 70%),
    linear-gradient(#0d0618 0%,#07040e 55%,#030106 100%) fixed;
  display:flex; flex-direction:column; align-items:center;
  padding:max(18px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom));
  overflow-x:clip; position:relative; max-width:100vw;
}
/* feines Korn für Tiefe */
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#fx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.fog{position:fixed; inset:-20%; pointer-events:none; z-index:0; opacity:.6;
  background:
    radial-gradient(ellipse 40% 22% at 18% 72%,rgba(150,95,235,.16),transparent 70%),
    radial-gradient(ellipse 45% 25% at 82% 58%,rgba(120,70,210,.14),transparent 70%),
    radial-gradient(ellipse 50% 20% at 50% 96%,rgba(170,110,250,.18),transparent 70%);
  animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(5%,-2%,0)}}
.vignette{position:fixed; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(2,0,8,.78) 100%)}
.flash{position:fixed; inset:0; pointer-events:none; z-index:4; opacity:0; background:#eadcff}
.flash.bolt{animation:bolt .9s ease-out}
.flash.red{background:#7c3aed; animation:violetflash 1.3s ease-out}
@keyframes bolt{0%{opacity:0}6%{opacity:.7}12%{opacity:.1}20%{opacity:.5}100%{opacity:0}}
@keyframes violetflash{0%{opacity:.75}100%{opacity:0}}

header,main,footer{position:relative; z-index:2; width:100%}
header{text-align:center}
h1{
  font-family:var(--serif); font-weight:800; font-size:clamp(28px,6.6vw,52px); letter-spacing:.05em;
  margin:6px 0 0; color:transparent;
  background:linear-gradient(180deg,#ffffff 0%,#e9d5ff 45%,#a855f7 100%); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 14px rgba(168,85,247,.55)) drop-shadow(0 2px 0 rgba(0,0,0,.8));
}
main{display:flex; flex-direction:column; align-items:center}

/* Uhr mit Heiligenschein */
.stage{width:min(78vw,54vh,440px); margin:10px 0 6px; position:relative}
.stage::before{content:""; position:absolute; inset:-14% -12%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.42) 0%,rgba(124,58,237,.18) 38%,transparent 66%);
  animation:halo 6s ease-in-out infinite}
.stage::after{content:""; position:absolute; inset:-7% -8%; z-index:-1; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 55%,rgba(216,180,254,.55) 78%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:spin 22s linear infinite}
@keyframes halo{0%,100%{opacity:.8; transform:scale(1)}50%{opacity:1; transform:scale(1.04)}}
@keyframes spin{to{transform:rotate(360deg)}}
.stage svg{width:100%; height:auto; display:block; overflow:visible}
.aura{animation:candle 5s ease-in-out infinite}
@keyframes candle{0%,100%{opacity:.85}22%{opacity:1}41%{opacity:.7}63%{opacity:.95}80%{opacity:.78}}

/* Bedienfeld als Glasplatte */
.panel{width:min(94vw,580px); text-align:center; margin-top:12px; padding:18px 16px 14px; border-radius:18px;
  background:linear-gradient(180deg,rgba(30,14,54,.72),rgba(10,5,20,.78));
  border:1px solid rgba(168,85,247,.3);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 18px 50px rgba(0,0,0,.55),0 0 40px rgba(124,58,237,.18),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.eventname{font-size:clamp(17px,4.4vw,21px); color:var(--violet-hi); font-style:italic; margin:0 0 6px}
.count{display:flex; justify-content:center; gap:10px; margin:8px 0 4px}
.u{min-width:68px; padding:11px 8px 8px; border:1px solid var(--line); border-radius:12px; position:relative;
  background:linear-gradient(180deg,#1b0e31,var(--panel-b));
  box-shadow:inset 0 0 16px rgba(0,0,0,.9),0 0 18px rgba(124,58,237,.28)}
.u::after{content:""; position:absolute; left:10%; right:10%; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(216,180,254,.7),transparent)}
.u b{display:block; font:800 clamp(28px,8vw,44px)/1 var(--serif); color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:0 0 14px rgba(168,85,247,.75)}
.u span{font-size:14px; color:var(--dim)}
.curse{font-size:clamp(21px,5.4vw,30px); font-style:italic; color:var(--violet-hi); margin:12px 0 16px;
  text-shadow:0 0 16px rgba(168,85,247,.85),0 0 34px rgba(124,58,237,.5)}

form{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-end}
.field{display:flex; flex-direction:column; text-align:left; gap:4px; flex:1 1 220px; min-width:0}
.field span{font-size:14px; color:var(--dim)}
input,button,select{font:inherit; font-size:17px; border-radius:10px; border:1px solid var(--line);
  padding:10px 12px; background:#0e0719; color:var(--ink); min-width:0}
input::placeholder{color:var(--faint)}
input[type=datetime-local]{color-scheme:dark}
select{appearance:none; -webkit-appearance:none; color-scheme:dark; width:100%; padding-right:36px; cursor:pointer;
  background:#0e0719 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23c084fc' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center}
.field[hidden]{display:none}
input:hover,select:hover{border-color:#6a43a8}
button{cursor:pointer; background:linear-gradient(#2a1650,#170b2e); border-color:#5b3a99; transition:filter .15s,box-shadow .15s,transform .05s}
button.primary{background:linear-gradient(#9333ea,#5b21b6); border-color:#c084fc; color:#fff; flex:1 1 100%;
  box-shadow:0 0 22px rgba(147,51,234,.5),inset 0 1px 0 rgba(255,255,255,.25); font-weight:600; letter-spacing:.02em}
button:hover{filter:brightness(1.2)}
button.primary:hover{box-shadow:0 0 30px rgba(168,85,247,.75),inset 0 1px 0 rgba(255,255,255,.3)}
button:active{transform:translateY(1px)}
:focus-visible{outline:2px solid var(--violet-hi); outline-offset:2px}
.share{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px}
.share[hidden],.count[hidden],.curse[hidden],.eventname[hidden],#native[hidden]{display:none}
.share input{flex:1 1 260px; font-size:14px; color:var(--violet-hi)}
.tools{margin-top:14px}
.tools button{font-size:15px; padding:7px 14px}
.tools button[aria-pressed=true]{border-color:var(--violet-hi); color:#fff; box-shadow:0 0 14px rgba(168,85,247,.45)}
.msg{min-height:1.4em; color:var(--dim); font-size:15px; margin:8px 0 0}
footer{margin-top:auto; padding-top:24px; text-align:center; font-size:13px; color:var(--faint)}

.received{margin:0 0 14px; padding:14px 14px 12px; border:1px solid #9a4be0; border-radius:12px;
  background:linear-gradient(#2a1050,#14082a); box-shadow:0 0 26px rgba(168,85,247,.38),inset 0 1px 0 rgba(255,255,255,.08)}
.received[hidden]{display:none}
.received p{margin:0 0 10px; font-size:clamp(17px,4.4vw,20px); font-style:italic; color:#efe3ff}
.received button{width:100%}

/* Wenn der Countdown abgelaufen ist */
body.cursed h1{animation:shake .5s infinite}
body.cursed .curse{animation:pulse 1.4s ease-in-out infinite}
body.cursed .aura{animation:none; opacity:1}
body.cursed .stage{animation:rattle .35s infinite}
body.cursed .stage::before{animation:none; opacity:1; background:radial-gradient(circle,rgba(232,121,249,.55) 0%,rgba(147,51,234,.25) 40%,transparent 68%)}
body.cursed .u{border-color:#a855f7; box-shadow:inset 0 0 16px rgba(0,0,0,.9),0 0 26px rgba(168,85,247,.6)}
@keyframes pulse{50%{text-shadow:0 0 30px rgba(232,121,249,1),0 0 60px rgba(168,85,247,.8); transform:scale(1.05)}}
@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-2px,1px)}75%{transform:translate(2px,-1px)}}
@keyframes rattle{0%,100%{transform:rotate(0)}25%{transform:rotate(-.6deg)}75%{transform:rotate(.6deg)}}

@media (prefers-reduced-motion:reduce){
  .fog,.aura,.stage::before,.stage::after,body.cursed h1,body.cursed .curse,body.cursed .stage,.flash.bolt,.flash.red{animation:none}
}
@media (max-width:420px){.count{gap:7px}.u{min-width:58px;padding:9px 4px 6px}.panel{padding:16px 12px 12px}}


/* ===== Holzschnitt, Dystopie ===== */
:root{--bone:#efe6ff; --ink-black:#06030b}
body{background:
    radial-gradient(ellipse 90% 46% at 50% 0%,rgba(124,58,237,.34) 0%,transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 100%,rgba(88,28,135,.5) 0%,transparent 72%),
    linear-gradient(#0a0514 0%,#06030b 55%,#020104 100%) fixed}
/* Papier- und Druckstock-Textur: grobes Korn, Kratzer */
.paper{position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.2; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .12' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -4.4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E")}
.skyline{position:fixed; left:0; right:0; bottom:0; width:100%; height:min(34vh,260px); z-index:0; pointer-events:none; opacity:.9}
.skyline .smoke{animation:smoke 16s linear infinite; transform-box:fill-box}
@keyframes smoke{0%{transform:translate(0,0); opacity:0}15%{opacity:1}100%{transform:translate(30px,-60px); opacity:0}}
.tree{position:fixed; bottom:0; height:78vh; width:auto; max-width:38vw; z-index:0; pointer-events:none; opacity:.78}
.tree.l{left:-3vw}
.tree.r{right:-3vw; transform:scaleX(-1)}
.flyer{position:fixed; top:14vh; left:-200px; width:150px; z-index:2; pointer-events:none; opacity:.9; animation:fly 52s linear infinite 9s}
@keyframes fly{0%{transform:translate(0,0) scale(1)}8%{transform:translate(55vw,-6vh) scale(.9)}16%{transform:translate(120vw,-3vh) scale(.8)}100%{transform:translate(120vw,-3vh) scale(.8)}}

header{padding-top:4px}
.eye{width:74px; height:auto; display:block; margin:0 auto 4px; filter:drop-shadow(0 0 10px rgba(168,85,247,.7))}
h1{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--bone);
  text-transform:uppercase; letter-spacing:.12em; font-size:clamp(25px,6.4vw,50px);
  filter:url(#rough);
  text-shadow:3px 3px 0 #06030b,5px 5px 0 #5b21b6,0 0 24px rgba(168,85,247,.6)}
.tagline{margin:6px 0 0; font-style:italic; color:var(--violet-hi); font-size:clamp(15px,3.8vw,18px); letter-spacing:.06em}
.wire{height:20px; width:min(92vw,560px); margin:6px auto; opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='20' viewBox='0 0 80 20'%3E%3Cpath d='M0 10 Q10 2 20 10 T40 10 T60 10 T80 10' fill='none' stroke='%23b794f6' stroke-width='1.6'/%3E%3Cpath d='M12 4 L22 16 M22 4 L12 16 M52 4 L62 16 M62 4 L52 16' stroke='%23d8b4fe' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/auto 20px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
footer .wire{margin-bottom:10px}

/* Strahlen und Raben an der Uhr */
.stage::before,.stage::after{display:none}
.stage svg.rays{position:absolute; left:50%; top:46%; width:230%; height:auto; transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  animation:spin 160s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 22%,transparent 62%); mask:radial-gradient(circle,#000 22%,transparent 62%)}
.stage svg.raven{position:absolute; width:20%; height:auto; z-index:3; pointer-events:none; filter:drop-shadow(0 4px 6px rgba(0,0,0,.7)); transform-origin:50% 100%}
.stage svg.raven use{filter:url(#rough2)}
.stage svg.raven.l{left:1.5%; top:18.6%; animation:caw 11s ease-in-out infinite}
.stage svg.raven.r{left:78.5%; top:18.6%; transform:scaleX(-1); animation:caw2 14s ease-in-out infinite 3s}
@keyframes caw{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-5deg)}94%{transform:rotate(3deg)}}
@keyframes caw2{0%,86%,100%{transform:scaleX(-1) rotate(0)}90%{transform:scaleX(-1) rotate(-5deg)}94%{transform:scaleX(-1) rotate(3deg)}}

/* Platte: kantig statt weich */
.panel{border-radius:3px; border:4px double rgba(167,139,250,.6);
  background:
    repeating-linear-gradient(35deg,rgba(255,255,255,.028) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(26,11,48,.86),rgba(7,3,14,.9));
  box-shadow:0 0 0 2px #000,0 22px 60px rgba(0,0,0,.7),0 0 46px rgba(124,58,237,.3),inset 0 0 40px rgba(0,0,0,.6)}
.u{border-radius:3px; border-width:2px}
input,button,select{border-radius:3px}
.received{border-radius:3px; border:2px dashed #b57bff}
.eventname{letter-spacing:.04em}

/* Wenn der Countdown abgelaufen ist */
body.cursed h1{animation:glitch .7s steps(2,end) infinite}
@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-3px,1px) skewX(-3deg)}40%{transform:translate(3px,-1px)}60%{transform:translate(-1px,2px) skewX(2deg)}80%{transform:translate(2px,0)}100%{transform:translate(0)}}
body.cursed .eye{filter:drop-shadow(0 0 16px rgba(232,121,249,.95))}
body.cursed .rays{animation-duration:30s}
body.cursed .stage svg.raven.l{animation:flee 5s ease-in forwards}
body.cursed .stage svg.raven.r{animation:flee2 5s ease-in forwards}
@keyframes flee{to{transform:translate(-90vw,-60vh) rotate(-30deg) scale(.4); opacity:0}}
@keyframes flee2{to{transform:scaleX(-1) translate(-90vw,-60vh) rotate(-30deg) scale(.4); opacity:0}}
@media (prefers-reduced-motion:reduce){.rays,.flyer,.raven,.skyline .smoke,body.cursed h1{animation:none}}
@media (max-width:520px){.tree{opacity:.5; max-width:46vw}.skyline{height:26vh}}


/* ===== Uhrwerk-Hintergrund ===== */
.gears{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; --gline:#8b6fe0; --gglow:rgba(139,92,246,.35)}
.gears .g{will-change:transform}
.gears .gl{stroke:var(--gline); fill:none}
body.cursed .gears{--gline:#f0abfc; --gglow:rgba(240,171,252,.5)}
.skyline,.tree,.rays{display:none}
.stage::before{display:block; content:""; position:absolute; inset:-14% -14%; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(6,3,11,.82) 34%,rgba(76,29,149,.32) 58%,transparent 72%); animation:none}