/* LOVE666 - shared site theme (Blood Cathedral).
   One stylesheet for every page: home, live, music, commands, about.
   Rebuilt around the LOVE 666 emblem: blood-red gothic metal on near-black,
   chrome-engraved headings that echo the logo lettering, a blood-moon halo and
   ornate crimson rings. Dark visuals, but the copy keeps its warm, devilish
   heart. Class names match the existing markup so every page restyles at once.

   Type system (three intentional voices):
     Cinzel        -> display, headings, brand, section titles
     JetBrains Mono -> labels, nav, eyebrows, tags, badges, command tokens, times
     Spectral      -> body copy and descriptions */

:root{
  /* ground */
  --bg:#050203;
  --bg2:#0a0406;
  --panel:#0e0708;
  --ink:#f3e8e9;
  --muted:#e3d9dc;        /* near-white secondary text: stands out on the lighter bg */

  /* blood + fire */
  --blood:#e10600;        /* primary accent - the red of the emblem's glow   */
  --blood-bright:#ff2020; /* hottest highlight (borders/glows/large only)      */
  --red-legible:#ff7a66;  /* WCAG-AA warm red for small text on the dark bg    */
  --crimson:#a20a1c;      /* deep structural red                              */
  --ember:#ff6a3d;        /* warm secondary (fire, roses)                     */
  --rose:#7c1d2b;         /* dried-blood rose                                 */

  /* metal */
  --silver:#d7dae1;       /* chrome highlight from the logo lettering         */
  --silver-dim:#7c8088;

  /* surfaces */
  --glass:rgba(255,255,255,.028);
  --glass-2:rgba(255,255,255,.05);
  --line:rgba(225,6,0,.20);       /* blood hairline    */
  --line-soft:rgba(215,218,225,.10); /* chrome hairline */
  --r:18px;

  /* the chrome-engraved text fill, reused on every metal heading */
  --chrome:linear-gradient(180deg,#ffffff 0%,#e9ebf1 24%,#a9adb7 50%,#f4f5f9 64%,#b7bbc5 100%);
  /* blood-chrome: polished metal that runs into glowing red, like the logo lettering */
  --chrome-red:linear-gradient(178deg,#ffffff 0%,#f8f9fc 25%,#e2e5ec 54%,#ff9a89 72%,#ff7365 90%,#ff695b 100%);
  /* polished orange to match the VTLog logo (#ff9900) */
  --chrome-orange:linear-gradient(178deg,#ffe1b0 0%,#ffc061 20%,#ff9d0a 52%,#ff8400 78%,#d96a00 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background-color:var(--bg);
  /* gothic scene backdrop (fixed) + a dark scrim for text legibility */
  background-image:linear-gradient(rgba(4,2,3,.32),rgba(4,2,3,.48)), url("bg.png");
  background-image:linear-gradient(rgba(4,2,3,.32),rgba(4,2,3,.48)), image-set(url("bg.webp") type("image/webp"), url("bg.png") type("image/png"));
  background-position:center, center top;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
  color:var(--ink);
  text-shadow:0 1px 4px rgba(0,0,0,.85);
  font-family:'Spectral',Georgia,'Times New Roman',serif;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* heavy gothic vignette - pulls focus to the center of every page */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%,transparent 52%,rgba(0,0,0,.72) 100%);
}
.fx{font-family:'Cinzel',serif;letter-spacing:.02em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* shared label voice: small, spaced, uppercase mono */
.eyebrow,.kicker,.tag,.badge,.navlinks,.scroll-hint,.day .dname,.song-meta .now,
.cmd__name,.day .time{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ---------- background fx ---------- */
#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none}
.glow{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none}
.glow.a{width:52vw;height:52vw;left:50%;top:-18vw;transform:translateX(-50%);
  background:radial-gradient(circle,var(--blood),transparent 62%);opacity:.30;
  animation:moonbreath 9s ease-in-out infinite}
.glow.b{width:44vw;height:44vw;right:-12vw;top:44vh;
  background:radial-gradient(circle,var(--crimson),transparent 62%);opacity:.24}
@keyframes moonbreath{0%,100%{opacity:.24}50%{opacity:.4}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{position:relative;z-index:2}
/* the backdrop is now a single scene image on <body>; drop the generated layers */
.glow,.sigil,#bgfx{display:none}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,64px);
  background:transparent;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:12px;font-family:'Cinzel',serif;font-weight:800;letter-spacing:.2em;font-size:15px;color:var(--ink)}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--blood);
  box-shadow:0 0 10px var(--blood),0 0 22px var(--blood);animation:emberpulse 2.4s ease-in-out infinite}
@keyframes emberpulse{0%,100%{opacity:.7;box-shadow:0 0 8px var(--blood)}50%{opacity:1;box-shadow:0 0 16px var(--blood),0 0 30px var(--blood)}}
.navlinks{display:flex;flex-wrap:nowrap;gap:8px;position:absolute;left:calc(50% + 14px);top:50%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.navlinks a{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 15px;border-radius:999px;white-space:nowrap;
  color:rgba(243,232,233,.78);border:1px solid var(--line);background:var(--glass);
  transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .15s}
.navlinks a:hover{color:#fff;border-color:var(--red-legible);background:rgba(225,6,0,.1);
  transform:translateY(-1px);box-shadow:0 0 16px rgba(225,6,0,.22)}
.navlinks a.is-active{color:#fff;border-color:rgba(255,60,60,.55);
  background:linear-gradient(120deg,var(--blood),#7c0611);box-shadow:0 0 20px rgba(225,6,0,.4)}
.live-pill{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,60,60,.5);color:#fff;white-space:nowrap;
  background:linear-gradient(120deg,rgba(225,6,0,.28),rgba(120,5,10,.16));
  box-shadow:0 0 22px rgba(225,6,0,.32);transition:transform .15s,box-shadow .25s}
.live-pill:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(225,6,0,.55)}
.live-pill .pulse{width:8px;height:8px;border-radius:50%;background:var(--blood-bright);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(225,6,0,.7)}70%{box-shadow:0 0 0 10px rgba(225,6,0,0)}100%{box-shadow:0 0 0 0 rgba(225,6,0,0)}}

/* mobile hamburger + dropdown */
.navtoggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:14px}
.navtoggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.navtoggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.is-open span:nth-child(2){opacity:0}
.navtoggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1024px){
  .navtoggle{display:flex}
  .navlinks{
    position:absolute;top:100%;left:0;right:0;transform:none;flex-direction:column;gap:0;
    background:rgba(7,3,4,.98);backdrop-filter:blur(10px);border:1px solid var(--line);border-top:0;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .navlinks.is-open{max-height:75vh}
  .navlinks a{display:block;height:auto;padding:15px clamp(20px,5vw,64px);border:0;border-top:1px solid var(--line);
    border-radius:0;background:transparent;font-size:13px}
  .navlinks a:hover{background:rgba(225,6,0,.08);transform:none;box-shadow:none}
  .navlinks a.is-active{color:#fff;background:rgba(225,6,0,.16);box-shadow:none}
}

/* ---------- hero (home) ---------- */
header.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:124px 20px 84px;position:relative;overflow:hidden}
/* blood-moon halo behind the emblem */
/* blood moon - a shaded crimson disc with faint craters, like the emblem's moon */
.sigil{position:absolute;left:auto;right:-2vw;top:6vh;transform:none;
  width:min(46vw,330px);aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;
  background:url(moon_blood.png) center/contain no-repeat;
  box-shadow:0 0 100px 18px rgba(200,16,46,.3);
  animation:moonpulse 9s ease-in-out infinite}
@keyframes moonpulse{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.12)}}
/* circle-line rings removed - keep only the soft blood-moon glow (.sigil bg) */
.sigil::before,.sigil::after{display:none}
.ring{display:none}
.ring.r1{width:min(96vw,880px);height:min(96vw,880px);animation:spin 90s linear infinite;border-style:dashed;border-color:rgba(215,218,225,.10)}
.ring.r2{width:min(74vw,660px);height:min(74vw,660px);animation:spin 60s linear infinite reverse}
.ring.r3{width:min(54vw,470px);height:min(54vw,470px);animation:spin 120s linear infinite;border-color:rgba(215,218,225,.08)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-logo{position:relative;z-index:3;display:block;width:min(80vw,480px);
  filter:drop-shadow(0 0 60px rgba(225,6,0,.5)) drop-shadow(0 14px 40px rgba(0,0,0,.7));
  animation:float 7s ease-in-out infinite}
.hero-logo img{width:100%;height:auto;display:block}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.kicker{position:relative;z-index:3;margin-top:30px;font-size:12px;letter-spacing:.5em;text-transform:uppercase;color:var(--red-legible)}
.h1{position:relative;z-index:3;font-family:'Cinzel',serif;font-weight:900;font-size:clamp(40px,8.4vw,98px);line-height:.96;margin:16px 0 10px;letter-spacing:.01em}
/* chrome-engraved headline that echoes the emblem's lettering */
.h1,.page-title{
  background:var(--chrome-red);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(225,6,0,.55)) drop-shadow(0 2px 1px rgba(0,0,0,.6));
}
.sub{position:relative;z-index:3;max-width:580px;color:var(--muted);font-size:clamp(15px,2vw,19px);font-style:italic}
.cta-row{position:relative;z-index:3;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.06em;font-size:13px;text-transform:uppercase;cursor:pointer;
  transition:transform .15s,box-shadow .25s,border-color .25s;border:1px solid transparent;overflow:hidden}
.btn.primary{background:linear-gradient(120deg,var(--blood),#7c0611);color:#fff;
  border-color:rgba(255,80,80,.4);box-shadow:0 0 30px rgba(225,6,0,.42),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 0 48px rgba(225,6,0,.62),inset 0 1px 0 rgba(255,255,255,.22)}
/* metallic sheen sweep on the primary CTA */
.btn.primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);
  transition:left .55s ease;pointer-events:none}
.btn.primary:hover::after{left:130%}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--glass)}
.btn.ghost:hover{border-color:var(--red-legible);transform:translateY(-2px);box-shadow:0 0 26px rgba(225,6,0,.25)}
.btn.spotify{background:linear-gradient(120deg,#1db954,#158e40);color:#04140a;box-shadow:0 0 30px rgba(29,185,84,.34)}
.btn.spotify:hover{transform:translateY(-2px);box-shadow:0 0 46px rgba(30,215,96,.55)}
.btn.spotify svg{width:18px;height:18px;flex:none}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;color:var(--muted);font-size:10px;letter-spacing:.4em;text-transform:uppercase;animation:bob 2s infinite}
@keyframes bob{0%,100%{opacity:.4;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,6px)}}

/* ---------- sub-page header (live / music / commands / about) ---------- */
.page-head{position:relative;padding:154px 20px 40px;text-align:center;overflow:hidden}
.page-head .sigil{top:18px;opacity:.82}
.page-head .eyebrow{justify-content:center}
.page-head .page-title{position:relative;z-index:3;font-family:'Cinzel',serif;font-weight:900;font-size:clamp(36px,7vw,72px);line-height:1.02}
.page-head .page-sub{position:relative;z-index:3;max-width:620px;margin:16px auto 0;color:var(--muted);font-size:clamp(15px,2vw,18px);font-style:italic}

/* ---------- sections ---------- */
section{position:relative;padding:clamp(52px,8vh,112px) clamp(20px,6vw,90px);max-width:1240px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--red-legible);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--blood))}
.sec-title{font-family:'Cinzel',serif;font-weight:800;font-size:clamp(28px,5vw,52px);line-height:1.05;margin-bottom:18px;
  background:var(--chrome-red);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(225,6,0,.3))}
/* band background removed above, so the gradient text clips fine here too */
.heart{display:inline-block;color:var(--blood);filter:drop-shadow(0 0 10px rgba(225,6,0,.7))}

.about{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
@media(max-width:840px){.about{grid-template-columns:1fr}}
.about p{color:var(--muted);font-size:17px;margin-bottom:16px}
.values{display:flex;flex-direction:column;gap:14px}
.value{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass);transition:.25s}
.value:hover{border-color:var(--red-legible);transform:translateX(6px);background:rgba(225,6,0,.06);box-shadow:0 0 30px rgba(225,6,0,.12)}
.value .ic{font-size:24px;filter:drop-shadow(0 0 8px rgba(225,6,0,.55))}
.value h4{font-family:'Cinzel',serif;font-size:16px;letter-spacing:.02em;margin-bottom:3px}
.value span{color:var(--muted);font-size:14px}

/* games */
.games{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.games{grid-template-columns:1fr}}
.game{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;transition:.3s}
.game:hover{transform:translateY(-6px);border-color:var(--red-legible);box-shadow:0 24px 60px rgba(225,6,0,.22)}
.game .ph{position:absolute;inset:0;z-index:0;background-size:cover;background-repeat:no-repeat;transition:transform .5s ease}
.game.ets .ph{background-image:linear-gradient(to top,rgba(5,2,3,.96) 0%,rgba(5,2,3,.55) 30%,rgba(5,2,3,.1) 55%,transparent 78%),url(ets2.jpg);background-position:center 42%}
.game.wow .ph{background-image:linear-gradient(to top,rgba(5,2,3,.96) 0%,rgba(5,2,3,.5) 32%,rgba(5,2,3,.05) 60%,transparent 82%),url(wows.jpg);background-position:center 44%}
.game:hover .ph{transform:scale(1.04)}
.game .tag{position:relative;z-index:2;align-self:flex-start;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--red-legible);padding:6px 12px;border:1px solid var(--line);border-radius:999px;margin-bottom:auto;background:rgba(0,0,0,.4)}
.game h3{position:relative;z-index:2;font-family:'Cinzel',serif;font-weight:700;font-size:26px;margin-top:18px}
.game p{position:relative;z-index:2;color:var(--muted);font-size:14px;margin-top:6px;max-width:36ch}

/* schedule */
.sched{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:10px}
@media(max-width:760px){.sched{grid-template-columns:repeat(2,1fr)}}
.day{border:1px solid var(--line);border-radius:16px;padding:18px 14px;background:var(--glass);transition:.25s;min-height:130px;display:flex;flex-direction:column}
.day:hover{border-color:var(--red-legible);background:rgba(225,6,0,.06)}
.day.off{opacity:.4}
.day .dname{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-legible);margin-bottom:auto}
.day .time{font-size:17px;font-weight:700;margin-top:14px;color:var(--ink)}
.day .what{font-size:12px;color:var(--muted);margin-top:4px;font-style:italic}
.day.live{border-color:var(--blood);box-shadow:0 0 28px rgba(225,6,0,.28);background:rgba(225,6,0,.09)}

/* jack */
.jack{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
@media(max-width:840px){.jack{grid-template-columns:1fr}}
.jack-card{position:relative;border-radius:24px;border:1px solid var(--line);aspect-ratio:3/2;overflow:hidden;
  background:radial-gradient(circle at 50% 34%,rgba(225,6,0,.2),transparent 60%),linear-gradient(160deg,#140708,#050203);
  display:flex;align-items:center;justify-content:center}
.jack-card .jack-photo{width:94%;height:94%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 0 16px rgba(225,6,0,.4)) drop-shadow(0 0 4px rgba(225,6,0,.55))}

/* community / support */
.band{margin-top:0}
.support{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.support{grid-template-columns:1fr}}
.scard{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--glass);transition:.25s;text-align:center}
.scard:hover{transform:translateY(-5px);border-color:var(--red-legible);box-shadow:0 18px 50px rgba(225,6,0,.2)}
.scard .ic{font-size:30px;margin-bottom:12px;filter:drop-shadow(0 0 10px rgba(225,6,0,.4))}
.scard h4{font-family:'Cinzel',serif;font-weight:700;font-size:20px;margin-bottom:8px}
.scard p{color:var(--muted);font-size:14px;margin-bottom:16px}
.scard a{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red-legible);border-bottom:1px solid var(--line);padding-bottom:3px}
.scard a:hover{border-color:var(--red-legible)}

/* socials */
.socials{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.soc{display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;border:1px solid var(--line);background:var(--glass);
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em;transition:.2s}
.soc:hover{border-color:var(--red-legible);transform:translateY(-3px);background:rgba(225,6,0,.08);box-shadow:0 0 24px rgba(225,6,0,.18)}
.soc .d{width:8px;height:8px;border-radius:50%;background:var(--blood);box-shadow:0 0 8px var(--blood)}

footer{text-align:center;padding:60px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
footer .fbrand{font-family:'Cinzel',serif;font-weight:800;letter-spacing:.24em;color:var(--ink);font-size:18px;margin-bottom:10px}
footer .fnav{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin:14px 0 20px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
footer .fnav a{color:var(--muted);transition:color .2s}
footer .fnav a:hover{color:var(--red-legible)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}

/* ---------- live page: twitch embeds ---------- */
.watch{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:stretch}
@media(max-width:980px){.watch{grid-template-columns:1fr}}
.player-wrap{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#000;
  box-shadow:0 24px 60px rgba(225,6,0,.16);aspect-ratio:16/9}
.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chat-wrap{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#080405;min-height:420px}
.chat-wrap iframe{width:100%;height:100%;border:0;min-height:420px}
@media(max-width:980px){.chat-wrap{min-height:520px}.chat-wrap iframe{min-height:520px}}
.embed-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;padding:30px;text-align:center;color:var(--muted);font-style:italic}

/* ---------- commands page ---------- */
.groups{max-width:1080px;margin:0 auto;padding:10px clamp(20px,6vw,60px) 40px;display:flex;flex-direction:column;gap:26px}
.langtoggle{display:inline-flex;margin:22px auto 0;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,.35);position:relative;z-index:3}
.lang{appearance:none;border:0;background:transparent;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
  padding:8px 20px;cursor:pointer;transition:background .12s,color .12s;letter-spacing:.06em;text-transform:uppercase}
.lang:hover{color:var(--ink)}
.lang.is-active{background:linear-gradient(120deg,var(--blood),#7c0611);color:#fff}
/* width:100% pins every group to the full container width. Without it the group
   boxes shrink-wrap to their content, so longer Dutch text made them (and the
   cards inside) wider than the English ones. */
.group{width:100%;display:flex;flex-direction:column;gap:14px;padding:24px clamp(18px,3vw,26px) 26px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(180deg,rgba(225,6,0,.05),rgba(16,7,8,.5));box-shadow:0 12px 32px rgba(0,0,0,.4)}
.group__title{font-family:'Cinzel',serif;margin:0;padding-bottom:11px;border-bottom:1px solid var(--line);font-size:clamp(20px,3.4vw,26px);font-weight:700;color:var(--ink)}
.group__note{margin:0;color:var(--muted);font-size:13px;font-style:italic}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.cmd{display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:14px 17px;
  transition:border-color .12s,transform .12s,box-shadow .12s}
.cmd:hover{border-color:var(--red-legible);transform:translateY(-2px);box-shadow:0 0 22px rgba(225,6,0,.14)}
.cmd__name{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:var(--red-legible);word-break:break-word}
.cmd__usage{color:var(--red-legible);font-weight:500;font-size:.82em}
.cmd__desc{margin:6px 0 10px;color:var(--ink);font-size:14px;line-height:1.45;opacity:.9}
.cmd__badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.badge{font-size:10px;font-weight:700;letter-spacing:.4px;padding:3px 9px;border-radius:999px;border:1px solid transparent;text-transform:uppercase}
.badge--mod{background:rgba(225,6,0,.18);color:#ff9a9a;border-color:rgba(225,6,0,.45)}
.badge--chat{background:rgba(111,176,196,.16);color:#9fd0dd;border-color:rgba(111,176,196,.34)}
.badge--overlay{background:rgba(121,194,147,.14);color:#9bd9b1;border-color:rgba(121,194,147,.34)}
.badge--game{background:rgba(255,106,61,.16);color:#ffb896;border-color:rgba(255,106,61,.34)}

/* ---------- music page ---------- */
.song-stage{max-width:920px;margin:0 auto;text-align:center}
.song-embed{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#000;
  aspect-ratio:16/9;box-shadow:0 24px 60px rgba(225,6,0,.18)}
.song-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.song-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:16px;color:var(--ink);font-size:16px}
.song-meta .now{color:var(--red-legible);letter-spacing:.18em;text-transform:uppercase;font-size:11px}
.song-meta #song-title{font-family:'Cinzel',serif;font-weight:700}
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;text-align:left}
.track{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--glass);transition:.25s}
.track:hover{transform:translateY(-5px);border-color:var(--red-legible);box-shadow:0 18px 50px rgba(225,6,0,.2)}
.track .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#080405}
.track .thumb img{width:100%;height:100%;object-fit:cover;transition:.35s}
.track:hover .thumb img{transform:scale(1.06)}
.track .thumb::after{content:"\25B6";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:28px;color:#fff;opacity:.82;text-shadow:0 2px 16px rgba(0,0,0,.7);transition:.2s}
.track:hover .thumb::after{opacity:1;transform:scale(1.12);color:var(--red-legible)}
.track .tmeta{padding:12px 14px}
.track .tmeta h4{font-family:'Cinzel',serif;font-weight:600;font-size:14px;margin-bottom:4px;line-height:1.3}
.track .tmeta span{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em}

/* ---------- vtlog page ---------- */
.vt-badge{display:inline-flex;align-items:center;gap:8px;margin:18px auto 0;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-legible);
  padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(225,6,0,.06)}
.vt-motto{position:relative;z-index:3;margin-top:12px;font-family:'Spectral',serif;font-style:italic;
  font-size:clamp(17px,2.4vw,24px);letter-spacing:.02em;color:var(--red-legible);text-shadow:0 0 24px rgba(225,6,0,.42)}
/* VTLog page title = the VTLog "V" logo mark, finished with TLOG */
.vt-title{display:flex;align-items:center;justify-content:center;gap:.02em;flex-wrap:nowrap}
.vt-title .vt-logo{height:1.16em;width:auto;margin:0 -.02em -.06em 0}
.vt-tlog{font-family:'Saira Stencil One',system-ui,sans-serif;font-weight:400;letter-spacing:.01em}
.support.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.support.cols-2{grid-template-columns:1fr}}
/* readable body copy: brighter than --muted, comfortable measure + leading */
.page-head .page-sub.vt-sub{font-style:normal;color:rgba(243,232,233,.82)}
.vt-lead{max-width:600px;margin:0 auto;font-size:clamp(16px,1.9vw,18px);line-height:1.8;color:rgba(243,232,233,.86)}
.vt-lead+.vt-lead{margin-top:16px}
/* human anti-cheat highlight - the differentiator, given its own bold panel */
.vt-human{position:relative;max-width:920px;margin:0 auto;overflow:hidden;text-align:center;
  border:1px solid rgba(225,6,0,.34);border-radius:24px;padding:clamp(32px,5vw,56px);
  background:radial-gradient(130% 120% at 50% 0,rgba(225,6,0,.14),transparent 70%),linear-gradient(180deg,rgba(22,8,9,.6),rgba(10,4,5,.45));
  box-shadow:0 0 60px rgba(225,6,0,.16)}
.vt-human .seal{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--red-legible);
  padding:8px 16px;border:1px solid rgba(225,6,0,.4);border-radius:999px;background:rgba(225,6,0,.08)}
.vt-human h2{font-family:'Cinzel',serif;font-weight:800;font-size:clamp(26px,4.6vw,46px);line-height:1.1;margin:0 auto 18px;max-width:16ch;color:var(--ink);text-shadow:0 0 30px rgba(225,6,0,.18)}
.vt-human h2 em{font-style:normal;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(225,6,0,.42))}
.vt-human p{max-width:600px;margin:0 auto;color:rgba(243,232,233,.84);font-size:clamp(15px,1.8vw,17px);line-height:1.8}
.vt-note{max-width:660px;margin:24px auto 0;color:var(--muted);font-size:12px;font-style:italic;opacity:.8}

/* ---------- VTLog tab: orange-branded to match their logo ---------- */
.vtlog-page .page-title{background:var(--chrome-orange);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(255,153,0,.5)) drop-shadow(0 2px 1px rgba(0,0,0,.55))}
.vtlog-page .sec-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#ff9d0a;-webkit-text-fill-color:#ff9d0a;filter:none;text-shadow:0 0 26px rgba(255,153,0,.3)}
/* Saira Stencil One for the VTLog display headings */
.vtlog-page .sec-title,.vtlog-page .vt-human h2,.vtlog-page .scard h4{font-family:'Saira Stencil One',system-ui,sans-serif;font-weight:400}
.vtlog-page .eyebrow{color:#ffab2e}
.vtlog-page .eyebrow::before{background:linear-gradient(90deg,transparent,#ff9900)}
.vtlog-page .vt-motto{color:#ffab2e;text-shadow:0 0 24px rgba(255,153,0,.45)}
.vtlog-page .vt-badge{color:#ffab2e;border-color:rgba(255,153,0,.32);background:rgba(255,153,0,.08)}
.vtlog-page .band{border:0;background:none}
/* orange moon on the VTLog tab so it matches the orange theme */
.vtlog-page .sigil{background:url(moon_orange.png) center/contain no-repeat;
  box-shadow:0 0 100px 18px rgba(255,140,0,.3)}
.vtlog-page .vt-human{border-color:rgba(255,153,0,.4);
  background:radial-gradient(130% 120% at 50% 0,rgba(255,153,0,.14),transparent 70%),linear-gradient(180deg,rgba(30,18,4,.6),rgba(12,8,3,.45));
  box-shadow:0 0 60px rgba(255,153,0,.16)}
.vtlog-page .vt-human .seal{color:#ffab2e;border-color:rgba(255,153,0,.42);background:rgba(255,153,0,.1)}
.vtlog-page .vt-human h2{text-shadow:0 0 30px rgba(255,153,0,.2)}
.vtlog-page .vt-human h2 em{background:var(--chrome-orange);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(255,153,0,.45))}
.vtlog-page .scard{border-color:rgba(255,153,0,.18)}
.vtlog-page .scard .ic{filter:drop-shadow(0 0 10px rgba(255,153,0,.45))}
.vtlog-page .scard:hover{border-color:#ff9d0a;box-shadow:0 18px 50px rgba(255,153,0,.2)}
.vtlog-page .btn.primary{background:linear-gradient(120deg,#ff9d0a,#c96a00);border-color:rgba(255,180,80,.45);
  box-shadow:0 0 30px rgba(255,153,0,.42),inset 0 1px 0 rgba(255,255,255,.2)}
.vtlog-page .btn.primary:hover{box-shadow:0 0 48px rgba(255,153,0,.62),inset 0 1px 0 rgba(255,255,255,.24)}
.vtlog-page .btn.ghost:hover{border-color:#ff9d0a;box-shadow:0 0 26px rgba(255,153,0,.25)}
.vtlog-page .navlinks a.is-active{border-color:rgba(255,180,80,.6);
  background:linear-gradient(120deg,#ff9d0a,#c96a00);box-shadow:0 0 20px rgba(255,153,0,.4)}

/* ---------- perching crow (realistic raven) ---------- */
.crow{position:absolute;width:150px;z-index:40;pointer-events:none;opacity:0;overflow:visible;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(225,6,0,.22));will-change:transform,opacity}
.crow .crow--perch,.crow .crow--fly{transition:opacity .25s ease}
.crow .crow--perch{display:block;width:100%;height:auto;opacity:0}          /* in-flow: sizes the box; feet at bottom */
.crow .crow--fly{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:206px;height:auto;opacity:1}
.crow.is-perched .crow--fly{opacity:0}
.crow.is-perched .crow--perch{opacity:1;animation:crowbob 3.6s ease-in-out infinite}
@keyframes crowbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* mirrored raven (right side) - faces the other way */
.crow.flip .crow--perch{transform:scaleX(-1)}
.crow.flip .crow--fly{transform:translateX(-50%) scaleX(-1)}
.crow.flip.is-perched .crow--perch{animation:crowbob-flip 3.6s ease-in-out infinite}
@keyframes crowbob-flip{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-2px)}}
/* flying back out - now moving the other way, so mirror the fly pose to face its exit */
.crow.is-leaving .crow--fly{transform:translateX(-50%) scaleX(-1)}
.crow.flip.is-leaving .crow--fly{transform:translateX(-50%)}
.vtlog-page .crow{filter:drop-shadow(0 5px 9px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,140,0,.22))}
@media(prefers-reduced-motion:reduce){.crow{display:none}}

/* orchestrated hero entrance - one staggered reveal on page load */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes logoIn{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
header.hero .hero-logo{opacity:0;animation:logoIn 1s cubic-bezier(.2,.7,.2,1) .05s forwards,float 7s ease-in-out 1.1s infinite}
header.hero .kicker,header.hero .h1,header.hero .sub,header.hero .cta-row{opacity:0;animation:riseIn .8s cubic-bezier(.2,.7,.2,1) forwards}
header.hero .kicker{animation-delay:.5s}
header.hero .h1{animation-delay:.66s}
header.hero .sub{animation-delay:.84s}
header.hero .cta-row{animation-delay:1s}

/* respect reduced-motion: kill the ambient loops and the intro */
@media(prefers-reduced-motion:reduce){
  .hero-logo,.sigil,.glow,.ring,.brand .dot,.live-pill .pulse,.scroll-hint,
  header.hero .kicker,header.hero .h1,header.hero .sub,header.hero .cta-row{animation:none!important;opacity:1!important;transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ---------- high-contrast / colour-blind mode ---------- */
.a11y-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
  border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s,transform .15s,box-shadow .2s}
.a11y-toggle:hover{border-color:var(--red-legible);transform:translateY(-1px)}
.a11y-toggle svg{width:19px;height:19px;display:block}
.a11y-toggle[aria-pressed="true"]{background:linear-gradient(120deg,var(--blood),#7c0611);
  border-color:rgba(255,90,90,.55);color:#fff;box-shadow:0 0 16px rgba(225,6,0,.4)}
.nav-actions{display:flex;align-items:center;gap:10px}

/* the mode: solid dark backdrop + maximum-contrast text (defined after :root so it wins) */
.a11y{--ink:#ffffff;--muted:#ededf1;--line:rgba(255,255,255,.34);--line-soft:rgba(255,255,255,.2)}
.a11y body{background-image:none;background-color:#07050a}
.a11y .grain,.a11y .glow{display:none}
.a11y body::after{background:none}
.a11y .h1,.a11y .page-title,.a11y .sec-title{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#fff;-webkit-text-fill-color:#fff;filter:none;text-shadow:0 2px 6px rgba(0,0,0,.55)}
.a11y .sub,.a11y .page-sub,.a11y .vt-lead{color:#f2eef0}

/* language toggle (shows current language code) */
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:40px;flex:none;padding:0 12px;
  border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--ink);cursor:pointer;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:700;letter-spacing:.1em;
  transition:border-color .2s,background .2s,transform .15s}
.lang-toggle:hover{border-color:var(--red-legible);transform:translateY(-1px)}
.lang-toggle .lang-code{line-height:1}