:root {
  --night: #09051a;
  --night-2: #130b2d;
  --violet: #6f4b9b;
  --violet-soft: rgba(135, 101, 180, .24);
  --gold: #f4d58a;
  --gold-bright: #fff1b0;
  --text: #f8f2ff;
  --muted: #c8bddb;
  --line: rgba(244, 213, 138, .26);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at 50% 42%, rgba(93, 52, 132, .38), transparent 32rem),
    radial-gradient(circle at 85% 15%, rgba(64, 45, 119, .25), transparent 24rem),
    linear-gradient(150deg, var(--night), var(--night-2) 55%, #070412);
  overflow-x: hidden;
}

button { font: inherit; }

.cosmos { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.cosmos::before,
.cosmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(244,213,138,.75) 0 1px, transparent 1.5px);
  background-size: 137px 149px, 211px 197px;
  background-position: 20px 35px, 70px 90px;
  opacity: .45;
}
.cosmos::after { transform: translate(55px, 28px); opacity: .22; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: white; box-shadow: 0 0 12px 3px rgba(255,241,176,.8); animation: twinkle 4s ease-in-out infinite; }
.s1{top:13%;left:8%}.s2{top:20%;left:73%;animation-delay:1s}.s3{top:74%;left:9%;animation-delay:2s}.s4{top:62%;left:88%;animation-delay:1.5s}.s5{top:34%;left:91%;animation-delay:.5s}.s6{top:82%;left:61%;animation-delay:2.5s}
.shooting-star { position:absolute; top:17%; left:86%; width:120px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,241,176,.85)); transform:rotate(140deg); opacity:0; animation: shoot 9s linear infinite; }
@keyframes twinkle { 0%,100%{transform:scale(.7);opacity:.35} 50%{transform:scale(1.5);opacity:1} }
@keyframes shoot { 0%,70%{opacity:0;transform:translate(0,0) rotate(140deg)} 73%{opacity:1} 82%{opacity:0;transform:translate(-280px,180px) rotate(140deg)} 100%{opacity:0} }

.page { position:relative; z-index:2; width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:42px 0 28px; }
.hero { text-align:center; margin-bottom:28px; }
.eyebrow { color:var(--gold); font-size:.76rem; letter-spacing:.28em; margin-bottom:10px; opacity:.9; }
h1 { margin:0; font-size:clamp(2.1rem, 4vw, 3.5rem); font-weight:400; letter-spacing:.03em; color:#fff8df; text-shadow:0 0 24px rgba(244,213,138,.2); }
.hero p { margin:10px auto 0; color:var(--muted); font-size:1.05rem; }

.oracle { display:grid; grid-template-columns:minmax(390px, 510px) minmax(390px, 1fr); gap:42px; align-items:center; }
.tree-panel { position:relative; min-height:600px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tree-panel::before { content:""; position:absolute; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle, rgba(123,82,164,.25), transparent 67%); filter:blur(8px); }
.tree-glow { position:absolute; width:260px; height:560px; background:linear-gradient(180deg, transparent, rgba(244,213,138,.06), transparent); filter:blur(20px); }
.tree-title { position:relative; z-index:1; color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-size:.75rem; margin-bottom:18px; }
.lebensbaum { position:relative; z-index:1; width:320px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.seal-row { display:flex; justify-content:center; gap:20px; }
.seal { width:88px; height:88px; border:1px solid rgba(244,213,138,.23); border-radius:50%; padding:4px; background:rgba(20,12,43,.66); cursor:pointer; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; box-shadow:0 0 22px rgba(92,57,125,.28), inset 0 0 18px rgba(255,255,255,.04); }
.seal img { display:block; width:100%; height:100%; border-radius:50%; }
.seal:hover, .seal:focus-visible { transform:translateY(-4px) scale(1.06); border-color:rgba(255,235,167,.8); box-shadow:0 0 28px rgba(244,213,138,.38), inset 0 0 18px rgba(255,255,255,.08); outline:none; }
.seal.active { transform:scale(1.1); border-color:var(--gold-bright); box-shadow:0 0 0 3px rgba(244,213,138,.1), 0 0 34px rgba(244,213,138,.58); }
.seal-9 { width:98px; height:98px; }
.seal-6 { width:94px; height:94px; }
.seal-1 { width:98px; height:98px; }
.crystal-star { width:76px; height:76px; border:0; background:transparent; color:var(--gold-bright); font-size:4rem; line-height:1; cursor:pointer; filter:drop-shadow(0 0 8px rgba(244,213,138,.8)) drop-shadow(0 0 25px rgba(244,213,138,.35)); animation:pulse 3s ease-in-out infinite; }
.crystal-star:hover, .crystal-star:focus-visible { transform:scale(1.12); outline:none; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.13);opacity:1} }
.tree-hint { position:relative; margin-top:17px; color:#a99cbd; font-size:.78rem; letter-spacing:.08em; }

.message-card { position:relative; min-height:430px; padding:36px 40px 28px; border:1px solid rgba(244,213,138,.19); border-radius:28px; background:linear-gradient(145deg, rgba(65,43,94,.68), rgba(25,15,49,.84)); box-shadow:0 28px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(14px); overflow:hidden; }
.message-card::before { content:""; position:absolute; width:230px; height:230px; right:-100px; top:-100px; border-radius:50%; border:1px solid rgba(244,213,138,.1); box-shadow:0 0 80px rgba(244,213,138,.08); }
.message-card::after { content:"✦"; position:absolute; right:28px; bottom:20px; color:rgba(244,213,138,.2); font-size:4rem; }
.message-card-top { display:flex; justify-content:center; align-items:center; gap:15px; color:var(--gold); font-size:1.15rem; letter-spacing:.08em; }
.mini-orbit { opacity:.65; }
.message-divider { width:100%; height:1px; margin:19px 0 25px; background:linear-gradient(90deg, transparent, var(--line), transparent); }
.message-main { font-size:clamp(1.35rem, 2vw, 1.75rem); line-height:1.55; color:#fff9f0; min-height:118px; }
.message-details { display:grid; gap:14px; margin-top:18px; }
.detail { color:#d9cfe6; font-size:1rem; line-height:1.5; }
.detail:empty { display:none; }
.detail strong { color:var(--gold); font-weight:normal; }
.card-footer { margin-top:24px; padding-top:17px; border-top:1px solid rgba(255,255,255,.08); color:#9d91ad; font-size:.76rem; letter-spacing:.05em; }
.new-button { display:block; margin:26px auto 0; padding:12px 24px; border-radius:999px; border:1px solid rgba(244,213,138,.5); color:#2a183a; background:linear-gradient(135deg,#fff0b2,#e7bf69); cursor:pointer; box-shadow:0 8px 25px rgba(244,213,138,.18); transition:transform .25s ease, box-shadow .25s ease; }
.new-button:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(244,213,138,.28); }
.copyright { text-align:center; color:#71667e; font-size:.7rem; margin:22px 0 0; }

#lichtblitz { position:fixed; left:50%; top:50%; width:20px; height:20px; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%) scale(0); background:var(--gold-bright); z-index:20; }
#lichtblitz.active { animation:flash 1s ease-out; }
@keyframes flash { from{transform:translate(-50%,-50%) scale(0);opacity:1} to{transform:translate(-50%,-50%) scale(45);opacity:0} }
#tooltip { position:fixed; z-index:50; display:none; max-width:230px; padding:9px 12px; border-radius:12px; border:1px solid rgba(244,213,138,.25); background:rgba(14,8,29,.94); color:#eee4f4; font-size:.8rem; line-height:1.35; pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,.35); }

@media (max-width:900px) {
  .page { padding-top:28px; }
  .oracle { grid-template-columns:1fr; gap:18px; }
  .tree-panel { min-height:500px; }
  .message-card { max-width:650px; width:100%; margin:0 auto; }
}
@media (max-width:560px) {
  .page { width:min(100% - 20px, 520px); padding-top:22px; }
  .hero { margin-bottom:12px; }
  .hero p { font-size:.92rem; line-height:1.45; }
  .tree-panel { min-height:470px; }
  .lebensbaum { width:285px; gap:8px; }
  .seal-row { gap:10px; }
  .seal { width:70px; height:70px; }
  .seal-9,.seal-1 { width:80px; height:80px; }
  .seal-6 { width:78px; height:78px; }
  .crystal-star { width:65px; height:65px; font-size:3.3rem; }
  .message-card { padding:27px 22px 23px; border-radius:22px; min-height:0; }
  .message-main { font-size:1.2rem; min-height:90px; }
  .detail { font-size:.92rem; }
}