#cookiewall{background:#1a1a1a;border-radius:8px;bottom:16px;box-shadow:0 8px 32px #0004;color:#fff;font-size:13px;left:16px;line-height:1.5;max-width:360px;padding:14px 16px;position:fixed;right:16px;z-index:9999}
#cookiewall p{margin:0 0 10px}
#cookiewall .actions{display:flex;gap:8px;justify-content:flex-end}
#cookiewall button{border-radius:4px;border:0;cursor:pointer;font-size:12px;padding:6px 12px}
#cookiewall button.ghost{background:#444;color:#fff}
#cookiewall button.primary{background:#fff;color:#1a1a1a;font-weight:600}
:root{--bg:#0b0710;--ink:#e8dcc8;--gold:#ffd76a}
*{box-sizing:border-box;margin:0;padding:0}
html, body{height:100%}
body{min-height:100vh;background:radial-gradient(circle at 20% 15%, rgba(106,43,224,.20), transparent 45%), radial-gradient(circle at 82% 22%, rgba(255,122,217,.13), transparent 40%), radial-gradient(circle at 50% 88%, rgba(120,40,60,.20), transparent 55%), linear-gradient(180deg, #150d22, var(--bg) 55%, #09060d);color:var(--ink);font-family:Georgia, "Times New Roman", serif;overflow-x:hidden;display:flex;align-items:center;justify-content:center}
::selection{background:var(--gold);color:#1a0f00}
#cookiewall, #cookiewall button{font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}
.fog{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;background:radial-gradient(60% 60% at 30% 50%, rgba(255,215,106,.06), transparent 60%), radial-gradient(50% 50% at 70% 40%, rgba(122,59,255,.10), transparent 60%), radial-gradient(45% 45% at 55% 75%, rgba(255,122,217,.07), transparent 60%);filter:blur(24px);animation:drift 26s ease-in-out infinite alternate}
.motes{position:fixed;inset:0;z-index:-1;pointer-events:none}
.mote{position:absolute;border-radius:50%;pointer-events:none;animation:float linear infinite;opacity:.7}
.vignette{position:fixed;inset:0;z-index:6;pointer-events:none;background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.9) 100%)}
.flourish{position:fixed;width:150px;height:150px;z-index:5;pointer-events:none;opacity:.85}
.flourish::before, .flourish::after{content:"";position:absolute;border:1px solid rgba(255,215,106,.4)}
.flourish::before{inset:0;border-radius:50%}
.flourish::after{inset:22px;border:1px solid rgba(255,215,106,.25);border-radius:50%}
.tl{top:16px;left:16px;border-left:1px solid rgba(255,215,106,.5);border-top:1px solid rgba(255,215,106,.5);border-radius:20px 0 0 0}
.tr{top:16px;right:16px;border-right:1px solid rgba(255,215,106,.5);border-top:1px solid rgba(255,215,106,.5);border-radius:0 20px 0 0}
.bl{bottom:16px;left:16px;border-left:1px solid rgba(255,215,106,.5);border-bottom:1px solid rgba(255,215,106,.5);border-radius:0 0 0 20px}
.br{bottom:16px;right:16px;border-right:1px solid rgba(255,215,106,.5);border-bottom:1px solid rgba(255,215,106,.5);border-radius:0 0 20px 0}
.tl::before, .tl::after{left:16px;top:16px}
.tr::before, .tr::after{right:16px;top:16px}
.bl::before, .bl::after{left:16px;bottom:16px}
.br::before, .br::after{right:16px;bottom:16px}
.stage{position:relative;z-index:2;width:min(92vw, 760px);display:flex;flex-direction:column;align-items:center;text-align:center}
.wordmark{font-size:clamp(2.2rem, 7vw, 4rem);letter-spacing:3px;font-weight:normal;margin-bottom:clamp(8px, 2vw, 18px);background:linear-gradient(180deg, #ffe9b0, #e8a63a 55%, #b5761d);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(255,215,106,.22)}
.emblem{width:min(70vw, 430px);height:auto;display:block;filter:drop-shadow(0 10px 40px rgba(0,0,0,.6));animation:breathe 9s ease-in-out infinite}
.ring{transform-origin:300px 300px}
.ring.runes{animation:spin 60s linear infinite}
.ring.star{animation:spin 120s linear infinite reverse}
.ring.petals{animation:spin 48s linear infinite}
.ring.mid{animation:spin 34s linear infinite reverse}
.eye-group{transition:transform .15s ease-out}
.eye-shape, .iris, .pupil, .glint{transform-origin:300px 296px}
.line{margin-top:clamp(10px, 2vw, 20px);font-style:italic;color:#8d7c60;letter-spacing:6px;font-size:clamp(.7rem, 2vw, .9rem)}
.stage.gated .emblem{animation:flare 2.2s ease-in-out;filter:drop-shadow(0 0 90px rgba(255,215,106,.9))}
.bloom{position:fixed;z-index:8;left:50%;top:50%;transform:translate(-50%, -50%);color:var(--gold);font-size:clamp(3rem, 12vw, 7rem);text-shadow:0 0 60px var(--gold);animation:bloom 2.2s ease-in-out forwards;pointer-events:none}
.wordmark.deciphered{filter:drop-shadow(0 0 18px rgba(255,122,217,.8))}
.cipher-note{position:fixed;z-index:60;left:50%;top:18px;transform:translateX(-50%);color:#ffb3e8;font-style:italic;font-family:Georgia, serif;padding:8px 16px;background:rgba(16,8,24,.95);border:1px solid #ff7ad9;border-radius:6px;box-shadow:0 0 24px rgba(255,122,217,.4)}
@media(min-width: 600px){
#cookiewall{right:auto}}
@keyframes drift{
0%{transform:translate(-4%, -3%) scale(1)}
50%{transform:translate(4%, 3%) scale(1.15)}
100%{transform:translate(-2%, 2%) scale(1.05)}}
@keyframes float{
0%{transform:translateY(0) translateX(0)}
50%{transform:translateY(-120px) translateX(18px)}
100%{transform:translateY(0) translateX(0)}}
@keyframes spin{
to{transform:rotate(360deg)}}
@keyframes breathe{
0%, 100%{transform:scale(1)}
50%{transform:scale(1.02)}}
@media (max-width: 560px){
.flourish{width:90px;height:90px}
.flourish::after{inset:14px}
.tl, .tr, .bl, .br{border-width:1px}}
@keyframes flare{
0%{filter:drop-shadow(0 0 40px rgba(255,215,106,.4))}
40%{filter:drop-shadow(0 0 130px rgba(255,215,106,1))}
100%{filter:drop-shadow(0 10px 40px rgba(0,0,0,.6))}}
@keyframes bloom{
0%{opacity:0;transform:translate(-50%, -50%) scale(.4)}
30%{opacity:1}
100%{opacity:0;transform:translate(-50%, -50%) scale(1.6)}}