:root{
  --bg:#0b0a12; --bg-2:#160f29; --surface:rgba(255,255,255,.06);
  --text:#f2f3f7; --muted:#9aa0ab; --muted-2:#b6bbc6;
  --accent-1:#a56bff; --accent-2:#ff4bd1; --accent-3:#00e701;
  --twitch:#9147ff; --kick:#00E701; --instagram:#E4405F; --youtube:#FF0000; --tiktok:#25F4EE;
  --card:#0c1120; --ring:rgba(255,75,209,.55);
  --shadow:0 12px 30px rgba(0,0,0,.38);
  --radius:.8rem; --radius-lg:1rem; --radius-xl:1.25rem;
  --maxw:1200px; --header-h:64px;
  --font-display:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  /* Panels-inspired background tuned: bottom-left #231330, top-right #291021, with vibrant magenta/purple flares */
  --panel-c1:#231330; /* bottom-left emphasis */
  --panel-c2:#291021; /* top-right emphasis */
  --gradient:
    radial-gradient(1200px 720px at 0% 0%, rgba(35,19,48,.95) 0%, rgba(35,19,48,.66) 36%, transparent 68%),   /* top-left base (#231330) */
    radial-gradient(1100px 640px at 100% 0%, rgba(41,16,33,.92) 0%, rgba(41,16,33,.60) 40%, transparent 72%), /* top-right base (#291021) */
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  --glass: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --glass-surface: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  --glass-blur: blur(18px) saturate(160%);
  --glass-border: rgba(255,255,255,.18);
  --anim-fast:220ms; --anim:360ms;
}

*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0; font-family:var(--font-body); color:var(--text); line-height:1.6;
  background: var(--gradient);
  background-color: var(--bg-2);
  background-repeat: no-repeat;
  background-attachment: scroll;
  display:grid; grid-template-rows:auto 1fr auto; min-height:100svh;
}

/* Removed static vignette to avoid static blurs behind lava */

/* Siren-like soft fading color blobs (top-left/top-right) */
/* Wobbling light impulses (CSS blobs) – replaces canvas pipes */
.content--canvas{display:none !important}
@keyframes blobLeft{
  0%{   transform: translate(18vw, 28vh) scale(1) }
  25%{  transform: translate(24vw, 22vh) scale(1.06) }
  50%{  transform: translate(20vw, 36vh) scale(1.02) }
  75%{  transform: translate(26vw, 30vh) scale(1.08) }
  100%{ transform: translate(18vw, 28vh) scale(1) }
}
@keyframes blobRight{
  0%{   transform: translate(78vw, 24vh) scale(1.02) }
  25%{  transform: translate(72vw, 20vh) scale(1.08) }
  50%{  transform: translate(84vw, 28vh) scale(1.03) }
  75%{  transform: translate(76vw, 32vh) scale(1.09) }
  100%{ transform: translate(78vw, 24vh) scale(1.02) }
}

/* Card‑local glowing blobs around the preview card */
.hero-card{isolation:isolate; overflow:visible}
/* Blobs around the preview card (inspired by LA_water/pen/rNaYZBb) */
.card-blobs{display:none}@media (prefers-reduced-motion: reduce){
  .hero-card::before,.hero-card::after{animation:none; opacity:.22}
}

@media (prefers-reduced-motion: reduce){
  .content--canvas::before,.content--canvas::after{animation:none}
}
img,svg{vertical-align:middle}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:.6rem}
::selection{background:rgba(165,107,255,.35)}

header{position:fixed; top:0; left:0; right:0; z-index:50; background:linear-gradient(180deg, rgba(10,7,18,.55), rgba(10,7,18,.35)), var(--glass-surface); border-bottom:1px solid var(--glass-border)}
.nav{max-width:var(--maxw); margin:0 auto; padding:.6rem 1rem; display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h)}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--text)}
.brand__logo{display:grid; place-items:center; width:32px; height:32px; border-radius:.6rem;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03)}
.brand__name{font:800 1rem/1 var(--font-display); letter-spacing:.3px}
.live-indicator{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:#fff; letter-spacing:.02em;
  padding:.25rem .5rem; border-radius:.5rem; background:rgba(239,68,68,.18); border:1px solid rgba(239,68,68,.35)}
.live-indicator .live-dot{width:8px; height:8px; border-radius:999px; background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.22)}

main{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(1rem, 3.5vw, 2rem) 1rem; display:grid; align-content:start; padding-top: calc(var(--header-h) + clamp(1rem, 3.5vw, 2rem))}
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:1.5rem; align-items:center; align-content:center; position:relative; min-height:calc(100svh - var(--header-h)); padding-top:clamp(1rem, 5vw, 3rem);
  /* full-bleed background while constraining inner content via dynamic padding */
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:max(1rem, calc((100vw - var(--maxw))/2));
  padding-right:max(1rem, calc((100vw - var(--maxw))/2));}
/* removed forced fade; background continues naturally */
.hero h1{margin:0 0 .5rem; font:800 clamp(2.5rem, 6.5vw, 3.5rem)/1.1 var(--font-display); letter-spacing:.2px}
.eyebrow{margin:0 0 .25rem; color:var(--muted); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem}
.sub{margin:.5rem 0 1.25rem; color:var(--muted-2); font-weight:600; max-width:60ch}

.cta{display:flex; flex-wrap:wrap; gap:.6rem}
.btn{
  --btn-bd: var(--glass-border);
  display:inline-flex; align-items:center; gap:.55rem; padding:.65rem .95rem; position:relative;
  border-radius:.9rem; border:1px solid var(--btn-bd);
  text-decoration:none; background:var(--glass-surface); color:var(--text);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:.95rem; white-space:nowrap; will-change:transform; touch-action:manipulation;
}
.btn .ico{width:18px; height:18px}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 35px rgba(0,0,0,.45)}
.btn:active{transform:translateY(0)}
/* Platform tinted glass, matching reference */
.btn.twitch{ background:linear-gradient(180deg, transparent, rgba(145,71,255,.10)), var(--glass); border-color:rgba(145,71,255,.55); color:var(--twitch) }
.btn.twitch:hover{ background:linear-gradient(180deg, rgba(145,71,255,.25), rgba(145,71,255,.10)), var(--glass); border-color:var(--twitch); color:#fff }
.btn.kick{ background:linear-gradient(180deg, transparent, rgba(0,231,1,.10)), var(--glass); border-color:rgba(0,231,1,.55); color:#5CF457 }
.btn.kick:hover{ background:linear-gradient(180deg, rgba(0,231,1,.20), rgba(0,231,1,.08)), var(--glass); border-color:rgba(0,231,1,.85); color:#fff }

.hero-card{position:relative; padding:1.15rem; border-radius:var(--radius-lg); background:var(--glass-surface); border:1px solid var(--glass-border); box-shadow:var(--shadow)}
.embed-wrap{display:flex; flex-direction:column; gap:.75rem}
/* hero video removed */
.embed-wrap{position:relative; z-index:1}
.tabs{display:flex; gap:.5rem; align-items:center; overflow:auto; padding-bottom:.25rem}
.tab-btn{display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .75rem; border-radius:.6rem; border:1px solid var(--glass-border); background:var(--glass-surface); color:var(--text); font-weight:700; letter-spacing:.02em; transition:background-color .14s ease, border-color .14s ease, color .14s ease; position:relative}
.tab-btn:hover{background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); color:#ffffff}
.tab-btn[aria-selected="true"]{background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.22)}
.tab-btn:disabled{opacity:.6; cursor:not-allowed; pointer-events:none}
.tab-btn.offline .mini{opacity:.9}
.tabs .tab-btn.offline .live-dot{display:none}
.tab-btn .mini{width:16px; height:16px; vertical-align:-3px}
.tab-btn .live-dot{display:none; width:8px; height:8px; border-radius:999px; background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.22)}
.tab-btn.online .live-dot{display:inline-block}
#tab-twitch.online{border-color:rgba(145,71,255,.45)}
#tab-kick.online{border-color:rgba(0,231,1,.45)}
#tab-twitch.online[aria-selected="true"]{background:rgba(145,71,255,.15)}
#tab-kick.online[aria-selected="true"]{background:rgba(0,231,1,.12)}

.player,.player-host{aspect-ratio:16/9; width:100%; border:0; border-radius:calc(var(--radius) - .25rem); background:#0a0f19; opacity:0; transition:opacity .2s ease; position:relative; overflow:hidden; display:block}
.player.show,.player-host.show{opacity:1}
#twitch-host{position:relative}
#twitch-host iframe{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important; border-radius:inherit; display:block}

.offline-box{display:flex; align-items:center; justify-content:center; gap:.75rem; text-align:center; flex-direction:column; aspect-ratio:16/9; background:#0a0f19; border-radius:calc(var(--radius) - .25rem); border:1px dashed rgba(255,255,255,.18); color:#cbd5e1; font-weight:800; letter-spacing:.02em; padding:1rem}
.offline-box.hidden{display:none}
.error-box{display:none; align-items:center; justify-content:center; gap:.75rem; text-align:center; flex-direction:column; aspect-ratio:16/9; background:#0a0f19; border-radius:calc(var(--radius) - .25rem); border:1px solid rgba(239,68,68,.35); color:#fecaca; font-weight:800; letter-spacing:.02em; padding:1rem}
.error-box.show{display:flex}

/* old canvas-based mask removed */

/* VODs in hero - normal list */
.vods{grid-column:1 / -1; margin-top:1rem; position:relative; overflow:visible; margin-bottom:0; height:auto}
@media (max-width:1280px){ .vods-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:940px){ .vods-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .vods-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:360px){ .vods-grid{grid-template-columns:1fr} }

/* Mobile VOD sizing tweaks */
@media (max-width:600px){
  .vods-inner{ padding: 0 .5rem; }
  .vods-grid{ gap: .8rem; }
  .vod-card{ border-radius: var(--radius-lg); }
  .vod-title{ font-size: 1.05rem; padding: 0 .75rem; }
  .vod-meta{ font-size: .95rem; padding: 0 .75rem .75rem; }
}

footer{position:relative; margin-top:clamp(1.5rem, 4vw, 3rem)}

/* Scroll indicator removed for normal list */
/* remove any artificial footer top gradient to avoid a band above bleed line */
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:clamp(1.25rem,3vw,2rem) clamp(1rem,3vw,1.25rem) calc(2rem + env(safe-area-inset-bottom)); color:var(--muted); font-size:.95rem}
.footer-top{display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); justify-content:center; justify-items:center; align-items:flex-start; gap:clamp(.75rem,2vw,1.5rem); text-align:center}
.footer-links{list-style:none; margin:0; padding:0}
.footer-links a{display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); text-decoration:none; font-weight:500; opacity:.9; padding:.2rem 0; border-radius:.3rem; line-height:1.3; transition: color var(--anim-fast) ease, opacity var(--anim-fast) ease}
.footer-links a .mini{ width:18px; height:18px; fill:currentColor; flex:0 0 18px }
.footer-links a:hover{ color:#fff; opacity:1 }
.footer-links a:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:.4rem }

.footer-col{display:flex; flex-direction:column; align-items:center; text-align:center}
.footer-col h4{margin:0 0 .35rem; font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--muted); opacity:1; font-weight:600}

.bleed-line{position:relative; left:50%; margin-left:-50vw; width:100vw; height:1px; background:rgba(255,255,255,.08); pointer-events:none}
.bleed-line.subtle{background:rgba(255,255,255,.06)}

.footer-bottom{margin-top:.75rem; padding-top:.6rem; font-size:.85rem; display:flex; justify-content:center; align-items:center; gap:.35rem; text-align:center; white-space:nowrap}

.sr-only{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important}
/* skip-link entfernt wie gewünscht */

.btn{min-height:48px}
@media (hover: none){ .btn:hover{transform:none; box-shadow:var(--shadow);} }
.tabs{ -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 12px), transparent 100%); mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 12px), transparent 100%); }

@media (max-width:480px){
  main{padding:clamp(.75rem,3.5vw,1.25rem) .9rem; padding-top: calc(var(--header-h) + clamp(.75rem,3.5vw,1.25rem))}
  .hero{gap:1.25rem}
  .hero h1{font-size:clamp(2.25rem, 11vw, 3.25rem)}
  .hero-card{padding:.9rem; border-radius:1.25rem}
  .cta{gap:.5rem}
  .btn{width:100%; font-size:1rem; padding:.85rem 1rem}
}

/* Ensure footer starts exactly at bleed-line without extra band */
main{ padding-bottom: 0 !important; }
.vods{ margin-bottom: 0 !important; }
.vods-inner{ margin-bottom: 0 !important; }

@media (max-width:1024px){.hero{grid-template-columns:1fr} .cta{justify-content:center}}
@media (max-width:640px){
  .footer-top{grid-template-columns:1fr; justify-content:center; justify-items:center; gap:1.25rem; text-align:center}
  .footer-col{align-items:center; text-align:center}
  .footer-links--social{ grid-template-columns: repeat(2, max-content); justify-items:start; justify-content:center; text-align:left; margin:0 auto; width:auto; column-gap:1rem }
  .footer-links a{ padding:.4rem 0; font-size:1.05rem }
}
@media (max-width:360px){ .footer-links--social{ grid-template-columns: 1fr } }

/* Socials grid (desktop/default) */
.footer-links--social{ display:grid; grid-template-columns: repeat(2, max-content); gap:.35rem 1.25rem; justify-content:center; justify-items:start; text-align:left; margin:0 auto; width:auto }
.footer-socials{ display:flex; flex-direction:column; align-items:center; text-align:center }

/* Contact as centered block */
.footer-links--contact{ display:flex; flex-direction:column; align-items:center; gap:.25rem }
.footer-links--contact a{ justify-content:center }
@media (max-width:360px){ .footer-links{ grid-template-columns: 1fr } }
@media (max-width:560px){.btn{width:100%; justify-content:center}}
@media (prefers-reduced-motion: reduce){.btn,.player,.player-host{transition:none}}

/* Liquid glass highlights + subtle noise overlay */
.hero-card::after,header::after,.vod-card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hardware blur only when supported */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* Avoid applying backdrop-filter to bulk items like .vod-card for performance */
  header, .hero-card, .tab-btn, .btn {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    background: rgba(255,255,255,.08);
  }
}
/* interactive glow removed; keep subtle noise/frost only */

/* Brand background override and light blobs (top-left/top-right) */
:root{
  --bg:#0e0916; --bg-2:#1b1230;
  --gradient:
    radial-gradient(1100px 640px at 0% 0%, rgba(35,19,48,.85) 0%, rgba(35,19,48,.55) 36%, transparent 70%),
    radial-gradient(1000px 600px at 100% 0%, rgba(41,16,33,.85) 0%, rgba(41,16,33,.55) 36%, transparent 70%),
    radial-gradient(520px 320px at 12% 10%, rgba(255,75,209,.22), transparent 70%),
    radial-gradient(520px 320px at 88% 8%,  rgba(165,107,255,.20), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.content--canvas{display:none !important}

/* VODs */
.vods{position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow:hidden; margin-bottom:-1px}
.vods-inner{max-width:var(--maxw); margin:1rem auto 0; padding:0 1rem}
.vods h2{margin:0 0 .5rem; font:800 clamp(1.4rem, 4.5vw, 1.8rem)/1.2 var(--font-display)}
.vods-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; width:100%}
.vod-card{display:flex; flex-direction:column; gap:.4rem; text-decoration:none; color:var(--text); background:var(--glass-surface); border:1px solid var(--glass-border); border-radius:calc(var(--radius) - .25rem); overflow:hidden; position:relative}
.vod-thumb{position:relative}
.vod-thumb img{display:block}
.vod-thumb .vod-preview{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .18s ease; pointer-events:none; border:0; display:block}
.vod-card.playing .vod-thumb .vod-preview{opacity:1}
.vod-card img{width:100%; aspect-ratio:16/9; object-fit:cover; background:#0a0f19}
.vod-title{padding:0 .6rem; font-weight:600; font-size:.95rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.vod-meta{padding:0 .6rem .6rem; color:var(--muted); font-size:.85rem}
.vods-empty{padding:.75rem 1rem; border:1px dashed rgba(255,255,255,.18); border-radius:.6rem; color:#cbd5e1; text-align:center}
.vods-actions{display:flex; justify-content:center; margin-top:1rem}
.vods-sentinel{height:1px; margin:0; opacity:0}
/* breakpoints consolidated above for grid */

/* Skip rendering offscreen VOD cards for large lists */
@supports (content-visibility: auto) {
  .vod-card{ content-visibility:auto; contain-intrinsic-size: 280px; }
}

/* VOD load-in animation (lightweight, GPU-friendly) */
.vod-card.enter{ opacity:0; transform:translateY(8px); }
.vod-card.enter.show{ opacity:1; transform:none; transition: opacity var(--anim-fast) ease, transform var(--anim) cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce){
  .vod-card.enter, .vod-card.enter.show{ opacity:1; transform:none; transition:none; }
}

/* Final responsive overrides (ensure they come after default) */
@media (max-width:1280px){ .vods-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:940px){  .vods-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){  .vods-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:360px){  .vods-grid{ grid-template-columns: 1fr; } }

/* VOD skeleton loading */
@keyframes skel-shimmer{
  0%{ background-position:-200% 0 }
  100%{ background-position:200% 0 }
}
.vod-card.skeleton{ pointer-events:none; user-select:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.vod-card.skeleton .vod-thumb{ padding:0; }
.vod-card.skeleton .skel{ position:relative; overflow:hidden; border-radius:.4rem; background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.06) 63%); background-size:200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; }
.vod-card.skeleton .skel-thumb{ width:100%; aspect-ratio:16/9; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.vod-card.skeleton .skel-line{ height:12px; margin:.45rem .6rem; border-radius:.3rem; }
.vod-card.skeleton .skel-line.short{ width:60%; }
.vod-card.skeleton .skel-line.tiny{ width:40%; height:10px; margin-bottom:.6rem; opacity:.9 }
.vod-card.skeleton .skel-line.wide{ width:85%; }
.vod-card.skeleton .vod-title, .vod-card.skeleton .vod-meta{ padding:0; }
@media (prefers-reduced-motion: reduce){ .vod-card.skeleton .skel{ animation:none } }

/* Removed appear fade-in classes for normal list */
@media (prefers-reduced-motion: reduce){
  .vod-card.appear, .vod-card.appear.show{ transition:none; opacity:1; transform:none; }
}