:root{
  --bg:#0D0911;--panel:#160E1C;--panel-hi:#211428;--line:#3A2345;
  --gold:#E0B84C;--gold-dim:#A7862F;--gold-light:#F7DC8C;
  --text:#F3EAE3;--muted:#B3A6BC;
  --royal:#8A4FFF;--royal-dim:#3D2170;--royal-deep:#200F38;
  --red:#D7263D;--red-deep:#5C0A18;--red-hot:#FF4D63;
  --bifrost:linear-gradient(90deg,#5C0A18 0%,#D7263D 22%,#8A4FFF 50%,#E0B84C 78%,#F7DC8C 100%);
  --royalgold:linear-gradient(90deg,#F7DC8C 0%,#E0B84C 45%,#D7263D 100%);
  --goldface:linear-gradient(180deg,#F7DC8C 0%,#E0B84C 50%,#A7862F 100%);
  --plate:linear-gradient(180deg,#26172E 0%,#1C1123 100%);
  --serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --runes:"Segoe UI Historic","Noto Sans Runic","Segoe UI Symbol",serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:var(--serif);color:var(--text);-webkit-font-smoothing:antialiased}
body.scene{width:1920px;height:1080px;overflow:hidden;background:var(--bg);position:relative}
body.clear{background:transparent;overflow:hidden;position:relative}

.bg{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 28%,rgba(92,10,24,.6),transparent 62%),linear-gradient(135deg,#140A12 0%,#0D0911 45%,#120B1F 100%)}
.odin{position:absolute;right:0;top:0;width:1000px;height:1080px;background:url("odin.jpg") no-repeat right center/auto 1080px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 28%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 28%,#000 55%);transform-origin:58% 23%;animation:drift 38s ease-in-out infinite alternate}
.eye{position:absolute;left:575px;top:247px;width:0;height:0}
.eye i{position:absolute;border-radius:50%;left:0;top:0;transform:translate(-50%,-50%)}
.eye .halo{width:140px;height:140px;background:radial-gradient(circle,rgba(255,48,32,.75) 0%,rgba(255,16,16,.3) 40%,rgba(255,0,0,0) 70%);animation:pulse 1.6s ease-in-out infinite alternate}
.eye .core{width:32px;height:32px;background:radial-gradient(circle,#FFE6C8 0%,#FF4A2E 40%,rgba(255,0,0,0) 72%);animation:glow 1.6s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.35;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes glow{from{opacity:.6}to{opacity:1}}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.05) translateX(-16px)}}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,10,20,1) 0%,rgba(24,11,23,.94) 40%,rgba(23,11,24,0) 64%)}
.vignette{position:absolute;inset:0;box-shadow:inset 0 0 240px 50px rgba(0,0,0,.85);pointer-events:none}

.streaks{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.streaks i{position:absolute;left:-10%;width:130%;overflow:hidden}
.streaks .s1{top:150px;height:3px;transform:rotate(-7deg);background:linear-gradient(90deg,rgba(224,184,76,0) 0%,#F7DC8C 35%,#D7263D 62%,rgba(138,79,255,0) 100%);opacity:.8}
.streaks .s2{top:900px;height:2px;transform:rotate(-5deg);background:linear-gradient(90deg,rgba(138,79,255,0) 0%,#8A4FFF 30%,#F7DC8C 75%,rgba(224,184,76,0) 100%);opacity:.6}
.streaks .s3{top:500px;height:140px;transform:rotate(-7deg);background:var(--bifrost);opacity:.08;filter:blur(34px);animation:ribbon 14s ease-in-out infinite alternate}
.streaks .s1::after,.streaks .s2::after{content:"";position:absolute;top:0;bottom:0;left:0;width:18%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.95) 50%,transparent 100%);animation:sweep 7s linear infinite}
.streaks .s2::after{animation-delay:3.5s}
@keyframes ribbon{from{opacity:.04}to{opacity:.14}}
@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(620%)}}
.embers{position:absolute;inset:0;pointer-events:none}

.hero{position:absolute;left:150px;top:0;bottom:120px;width:1060px;display:flex;flex-direction:column;justify-content:center}
.brand{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}
.wordmark{font-weight:600;line-height:1;background:var(--goldface);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(215,38,61,.7))}
.brand .wordmark{font-size:64px}
.underline{display:block;width:250px;height:5px;border-radius:3px;background:var(--royalgold)}
.eyebrow{font-size:24px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted)}
.title{font-size:128px;font-weight:600;line-height:1.02;margin:6px 0 0;color:var(--text);text-shadow:0 0 40px rgba(215,38,61,.35),0 4px 0 rgba(0,0,0,.45)}
.title em{font-style:normal;background:var(--goldface);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(215,38,61,.55))}
.count{margin-top:30px;display:flex;align-items:baseline;gap:26px}
.count .digits{font-size:104px;font-variant-numeric:tabular-nums;color:var(--gold-light);text-shadow:0 0 30px rgba(224,184,76,.45)}
.count .label{font-size:26px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.sub{font-size:34px;color:var(--muted);margin:22px 0 0;max-width:1060px;line-height:1.35}
.footer{position:absolute;left:150px;bottom:124px;display:flex;align-items:center;gap:18px;font-size:26px;color:var(--muted);letter-spacing:.06em}
.footer b{color:var(--gold);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}
.runes{position:absolute;left:0;right:0;bottom:40px;height:56px;overflow:hidden;border-top:1px solid rgba(224,184,76,.2);border-bottom:1px solid rgba(224,184,76,.2);background:linear-gradient(90deg,rgba(32,15,56,.7),rgba(92,10,24,.4),rgba(32,15,56,.7))}
.runes .track{position:absolute;top:0;left:0;white-space:nowrap;font-family:var(--runes);font-size:30px;line-height:56px;letter-spacing:.6em;color:rgba(224,184,76,.55);animation:scroll 120s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.plate{background:var(--plate);border:1px solid var(--line);border-radius:14px;box-shadow:inset 0 1px 0 rgba(247,220,140,.08),0 24px 70px rgba(0,0,0,.55);position:relative;overflow:hidden}
body.clear .plate{box-shadow:inset 0 1px 0 rgba(247,220,140,.08),0 6px 18px rgba(0,0,0,.45)}
.plate.rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#F7DC8C,#E0B84C 50%,#A7862F)}
.edge{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--bifrost)}
.eyedot{flex:none;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#FFE6C8 0%,#FF4A2E 45%,rgba(255,0,0,0) 76%);box-shadow:0 0 14px 3px rgba(255,48,32,.55);animation:glow 1.6s ease-in-out infinite alternate}

.frame{position:absolute;inset:14px;border-radius:18px;padding:6px;background:var(--bifrost);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.frame-shine{position:absolute;inset:14px;border-radius:18px;box-shadow:0 0 22px rgba(215,38,61,.35),inset 0 0 36px rgba(0,0,0,.55);pointer-events:none}
.corner{position:absolute;width:24px;height:24px;border:3px solid var(--gold);background:var(--bg);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 12px rgba(224,184,76,.5)}
.corner::after{content:"";position:absolute;inset:5px;background:var(--red)}

.chan{display:flex;align-items:center;gap:18px;margin:0 0 18px;max-width:1060px}
.chan img{flex:none;width:64px;height:64px;border-radius:50%;border:3px solid var(--gold);box-shadow:0 0 18px rgba(215,38,61,.45);object-fit:cover}
.chan .chan-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.chan .chan-title{font-size:30px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan .chan-meta{font-size:22px;color:var(--muted);letter-spacing:.04em;display:flex;gap:14px;align-items:center}
.chan .chan-meta b{color:var(--gold);font-weight:600}
.live-pill{display:inline-flex;align-items:center;gap:8px;color:var(--red-hot);font-weight:600;letter-spacing:.08em}
.live-pill::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 10px var(--red-hot)}
.join{margin-top:30px;display:inline-flex;align-items:center;gap:18px;align-self:flex-start;max-width:1060px;padding:16px 30px 20px 34px;font-size:30px;color:var(--text);white-space:nowrap}
.join .join-head{font-size:20px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.join b{color:var(--gold-light);font-weight:600}
.join .muted{color:var(--muted)}
.footer .extra b,.foot .extra b{color:var(--gold);font-weight:600}

.still *,.still *::before,.still *::after{transition:none!important}