:root{ --elit-gul:#FFD700; --elit-bla:#1E90FF; --tw:#9146FF; --yt:#FF0033; --kk:#53FC18; --ds:#5865F2; }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; color:#fff; font-family:'Poppins', Arial, sans-serif; background:linear-gradient(270deg,#0e0e10,#1a1b1f,#23252b); background-size:400% 400%; min-height:100vh; overflow-x:hidden; }

/* Levande bakgrund */
.live-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.live-bg iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; transform:scale(1.05); filter:blur(10px) brightness(.55); }
.bg-overlay{ position:fixed; inset:0; z-index:1; background:rgba(0,0,0,.55); pointer-events:none; }

main{ display:flex; flex-direction:column; align-items:center; gap:2rem; padding:2rem; position:relative; z-index:2; }

/* Logga + rubrik */
.top-brand{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.top-brand a{ text-decoration:none; display:inline-block; transition:transform .35s ease, filter .35s ease; }
.logo{ width:160px; height:auto; filter: drop-shadow(0 0 10px rgba(255,215,0,.35)); transition:transform .35s ease, filter .35s ease; }
.logo:hover{ transform: scale(1.12) rotate(1.5deg); filter: drop-shadow(0 0 22px rgba(255,215,0,.9)) drop-shadow(0 0 38px rgba(30,144,255,.7)); }
.hero-title{ margin:.6rem 0 0; font-size:1.9rem; color:var(--elit-gul); text-shadow:0 0 12px rgba(255,215,0,.6); }

/* Grid/kort */
.grid{ width:100%; max-width:1100px; display:grid; gap:1.2rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:700px){ .grid{ grid-template-columns:1fr;} }
.grid + .grid{ margin-top: 1rem; }

.platform-card{ background:rgba(30,31,34,.9); border-radius:18px; padding:1.4rem; text-align:center; border:2px solid rgba(255,215,0,.2); box-shadow:0 0 25px rgba(255,215,0,.25); backdrop-filter:blur(8px); transition:.3s ease; position:relative; overflow:hidden; }
.platform-card:hover{ transform:translateY(-5px); box-shadow:0 0 40px rgba(255,215,0,.5); }

/* Dölj rubrikerna över knapparna */
.platform-title{ display:none !important; }

/* LIVE-badge */
.live-badge{ position:absolute; top:10px; left:12px; background: linear-gradient(90deg, #ff2a2a, #ff6b6b); color:#fff; font-weight:800; font-size:.75rem; letter-spacing:.5px; padding:.28rem .6rem; border-radius:999px; box-shadow:0 0 16px rgba(255,42,42,.65); display:none; align-items:center; gap:.35rem; z-index:2; }
.live-dot{ width:8px; height:8px; border-radius:999px; background:#fff; animation:pulseDot 1.2s infinite ease-in-out; }
@keyframes pulseDot { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.4); opacity:.7; } }

/* Knappar */
.btn{ display:inline-block; margin-top:.9rem; padding:.85rem 1.6rem; border-radius:999px; color:#fff; font-weight:700; text-decoration:none; letter-spacing:.4px; transition:.25s ease; }
.btn:hover{ transform:scale(1.06); }
.btn-discord{ background:linear-gradient(90deg,var(--elit-gul),var(--elit-bla)); box-shadow:0 0 20px rgba(255,215,0,.6); }
.btn-twitch{ background:linear-gradient(90deg,var(--tw),#6a4cff); box-shadow:0 0 20px rgba(145,70,255,.6); }
.btn-kick{ background:linear-gradient(90deg,var(--kk),#36d100); color:#0b0b0b; box-shadow:0 0 20px rgba(83,252,24,.6); }
.btn-youtube{ background:linear-gradient(90deg,var(--yt),#ff4d4d); box-shadow:0 0 20px rgba(255,0,51,.6); }
.btn-insta{ background: linear-gradient(90deg,#F58529,#FEDA77,#DD2A7B,#8134AF,#515BD4); box-shadow: 0 0 20px rgba(221,42,123,.55); }
.btn-insta:hover{ transform:scale(1.06); box-shadow:0 0 28px rgba(221,42,123,.85); }
.btn-x{ background: linear-gradient(90deg,#111,#222); box-shadow: 0 0 20px rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); }
.btn-x:hover{ transform:scale(1.06); box-shadow:0 0 28px rgba(255,255,255,.35); }

/* Embedram */
.embed{ margin-top:.9rem; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#0f0f10; }
.embed iframe, .embed > div{ width:100%; height:315px; border:0; display:block; }
.embed--discord iframe{ width:100%; height:315px; border:0; border-radius:14px; }

/* Fallbackblock */
.twitch-fallback{ width:100%; height:315px; display:flex; align-items:center; justify-content:center; flex-direction:column; background: radial-gradient(120% 180% at 50% 0%, rgba(145,70,255,.25), rgba(0,0,0,.6)); color:#d7cfff; border-radius:14px; }