/* RESET */
body {
  color: #fff;
  background: none;
}

/* BACKGROUND GLOBAL */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(31,31,35,0.85), rgba(15,15,15,0.95)),
    url("https://i.redd.it/946pcwwaf1df1.png") center / cover no-repeat;
  z-index: -1;
}


/* NAVBAR */
.navbar { background:#18181b; padding:15px 30px; display:flex; justify-content:space-between; align-items:center; }
.navbar h1 { color:#9146ff; }
.navbar ul { list-style:none; display:flex; gap:20px; }
.navbar a { color:white; text-decoration:none; font-weight:bold; }
.navbar a:hover { color:#9146ff; }

html, body {
    overflow-x: hidden;
}

/* Notificação Test */
#raid-notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 250px;
    z-index: 10000;
    font-family: 'Cinzel', serif;
}

.raid-notification {
    background: rgba(25, 25, 30, 0.95);
    border: 2px solid #9146ff;
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 10px;
    color: #fff;
    box-shadow: 0 0 10px #9146ff;
    transform: translateX(100%);
    animation: slideIn 0.5s forwards, fadeOut 0.5s 3s forwards;
}

@keyframes slideIn {
    to { transform: translateX(0); }
}

@keyframes fadeOut {
    to { opacity: 0; }
}


/* HERO */
.hero { text-align:center; padding:50px 20px; }
#status { margin-top:10px; font-size:1.3rem; }


/* Nome do titulo twitch - kick */
.platform {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.platform:hover {
    transform: scale(1.05);
    transition: 0.2s ease;
}

/* TWITCH */
.platform.twitch {
    color: #fff;
    background: linear-gradient(135deg, #9146FF, #772CE8);
    box-shadow: 0 0 12px rgba(145, 70, 255, 0.6);
}

/* KICK */
.platform.kick {
    color: #0b1f0b;
    background: linear-gradient(135deg, #00ff6a, #00c853);
    box-shadow: 0 0 12px rgba(0, 255, 106, 0.6);
}


/* SOCIAL CARD */
.social-card {
    margin: 20px auto;
    padding: 15px;
    max-width: 500px;
    background: linear-gradient(135deg, #1f1b2e, #141124);
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(145, 70, 255, 0.25);
    text-align: center;
}

.hero {
    margin-bottom: 2px; /* controla a distância para a secção seguinte */
    padding-bottom: 0;
}

#status {
    margin: 0; /* remove margem automática do <p> */
}

.social-title {
    margin-bottom: 16px;
    font-size: 1.4rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* ICON GRID */
.social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.social-icons a {
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    transition: 0.25s ease;
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

/* HOVER BASE */
.social-icons a:hover {
    transform: scale(1.08);
}

/* PLATFORM COLORS */
.social-icons .twitch:hover {
    background: linear-gradient(135deg, #9146FF, #772CE8);
    box-shadow: 0 0 15px rgba(145,70,255,0.8);
}

.social-icons .kick:hover {
    background: linear-gradient(135deg, #00ff6a, #00c853);
    color: #0b1f0b;
    box-shadow: 0 0 15px rgba(0,255,106,0.8);
}

.social-icons .youtube:hover {
    background: linear-gradient(135deg, #ff0000, #cc0000);
    box-shadow: 0 0 15px rgba(255,0,0,0.7);
}

.social-icons .x:hover {
    background: linear-gradient(135deg, #111, #333);
}

.social-icons .tiktok:hover {
    background: linear-gradient(135deg, #00f2ea, #ff0050);
}

.social-icons .instagram:hover {
    background: linear-gradient(135deg, #f72585, #7209b7);
}

.social-icons .discord:hover {
    background: linear-gradient(135deg, #5865F2, #404EED);
    box-shadow: 0 0 15px rgba(88,101,242,0.8);
}


/* SOCIALS */
.socials { margin-top:20px; }
.socials a {
    margin: 0 8px;
    text-decoration: none;
    color: #ccc;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    transition: 0.3s;
}
.socials a:hover {
    color: #fff;
    background: #9146ff;
}

/* LIVES / PATROCINADORES */
.lives { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; padding:40px; }
.live-card {
    background:#1f1f23;
    padding:15px;
    border-radius:12px;
    transition:0.3s;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    text-align:center;
}
.live-card:hover { transform:translateY(-4px); box-shadow:0 0 20px rgba(145,70,255,0.4); }
.live-card iframe { width:100%; height:300px; border-radius:10px; }

/* LOGOS DOS PATROCINADORES MAIORES */
.live-card img {
    width: 90%;       /* maior largura */
    max-height: 280px; /* maior altura */
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* TEXTOS DAS CARTAS */
.live-card h3 { margin-top:10px; font-size:1rem; color:#fff; }
.live-card p { font-size:0.9rem; color:#fff; }

/* CATARSE */
.catarse { background: transparent; padding:50px 20px; text-align:center; }
.catarse p { max-width:600px; margin:20px auto; color:#ccc; }
.btn { display:inline-block; padding:14px 32px; background:#ff5a5f; color:white; text-decoration:none; border-radius:30px; font-weight:bold; transition:0.3s; }
.btn:hover { transform:scale(1.05); opacity:0.85; }

/* CATARSE BANNER */
.catarse-banner { width: 100%; max-width: 600px; margin: 20px auto; display: block; border-radius: 12px; box-shadow: 0 0 15px rgba(145,70,255,0.4); }

/* SUB GOAL */
.subgoal { text-align:center; padding:40px; }
.bar { width:60%; margin:15px auto; height:20px; background:#333; border-radius:20px; overflow:hidden; }
.progress { height:100%; width:0%; background: linear-gradient(90deg,#9146ff,#ff5a5f); transition:width 1s ease; }

/* FOLLOWERS */
.followers { text-align:center; padding:20px; font-size:1.2rem; }

/* Off e ON */
#status {
    font-weight: bold;
    font-size: 1.2rem;
}

/* ONLINE */
#status.online {
    color: #4dff4d;
    text-shadow: 0 0 10px #4dff4d;
    animation: pulseGreen 1.5s infinite;
}

/* OFFLINE */
#status.offline {
    color: #ff4d4d;
    animation: pulseRed 2s infinite;
}

/* Animações */
@keyframes pulseGreen {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pulseRed {
    0%   { opacity: 1; }
    50%  { opacity: 0.6; }
    100% { opacity: 1; }
}



/* LOADING SCREEN */
#loading-screen {
    position:fixed;
    inset:0;
    background:#0f0f0f;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

/* HAMSTER ANIMADO */
.wheel-and-hamster {
  --dur: 1s;
  position: relative;
  width: 12em;
  height: 12em;
  font-size: 14px;
}
.wheel,
.hamster,
.hamster div,
.spoke { position: absolute; }
.wheel,
.spoke { border-radius: 50%; top:0; left:0; width:100%; height:100%; }
.wheel { background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%); z-index:2; }
.hamster { animation: hamster var(--dur) ease-in-out infinite; top:50%; left:calc(50% - 3.5em); width:7em; height:3.75em; transform:rotate(4deg) translate(-0.8em,1.85em); transform-origin:50% 0; z-index:1; }
.hamster__head { animation: hamsterHead var(--dur) ease-in-out infinite; background: hsl(30,90%,55%); border-radius:70% 30% 0 100% / 40% 25% 25% 60%; box-shadow:0 -0.25em 0 hsl(30,90%,80%) inset,0.75em -1.55em 0 hsl(30,90%,90%) inset; top:0; left:-2em; width:2.75em; height:2.5em; transform-origin:100% 50%; }
.hamster__ear { animation: hamsterEar var(--dur) ease-in-out infinite; background: hsl(0,90%,85%); border-radius:50%; box-shadow:-0.25em 0 hsl(30,90%,55%) inset; top:-0.25em; right:-0.25em; width:0.75em; height:0.75em; transform-origin:50% 75%; }
.hamster__eye { animation: hamsterEye var(--dur) linear infinite; background-color:hsl(0,0%,0%); border-radius:50%; top:0.375em; left:1.25em; width:0.5em; height:0.5em; }
.hamster__nose { background: hsl(0,90%,75%); border-radius:35% 65% 85% 15% / 70% 50% 50% 30%; top:0.75em; left:0; width:0.2em; height:0.25em; }
.hamster__body { animation: hamsterBody var(--dur) ease-in-out infinite; background: hsl(30,90%,90%); border-radius:50% 30% 50% 30% / 15% 60% 40% 40%; box-shadow:0.1em 0.75em 0 hsl(30,90%,55%) inset,0.15em -0.5em 0 hsl(30,90%,80%) inset; top:0.25em; left:2em; width:4.5em; height:3em; transform-origin:17% 50%; transform-style: preserve-3d; }
.hamster__limb--fr, .hamster__limb--fl { clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); top:2em; left:0.5em; width:1em; height:1.5em; transform-origin:50% 0; }
.hamster__limb--fr { animation: hamsterFRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%); transform:rotate(15deg) translateZ(-1px); }
.hamster__limb--fl { animation: hamsterFLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%); transform:rotate(15deg); }
.hamster__limb--br, .hamster__limb--bl { border-radius:0.75em 0.75em 0 0; clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%); top:1em; left:2.8em; width:1.5em; height:2.5em; transform-origin:50% 30%; }
.hamster__limb--br { animation: hamsterBRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%); transform: rotate(-25deg) translateZ(-1px); }
.hamster__limb--bl { animation: hamsterBLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%); transform:rotate(-25deg); }
.hamster__tail { animation: hamsterTail var(--dur) linear infinite; background: hsl(0,90%,85%); border-radius:0.25em 50% 50% 0.25em; box-shadow:0 -0.2em 0 hsl(0,90%,75%) inset; top:1.5em; right:-0.5em; width:1em; height:0.5em; transform: rotate(30deg) translateZ(-1px); transform-origin:0.25em 0.25em; }
.spoke { animation: spoke var(--dur) linear infinite; background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%), linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat; }

/* ANIMAÇÕES */
@keyframes hamster { from,to {transform:rotate(4deg) translate(-0.8em,1.85em);} 50% {transform:rotate(0) translate(-0.8em,1.85em);} }
@keyframes hamsterHead { from,25%,50%,75%,to{transform:rotate(0);}12.5%,37.5%,62.5%,87.5%{transform:rotate(8deg);} }
@keyframes hamsterEye { from,90%,to{transform:scaleY(1);}95%{transform:scaleY(0);} }
@keyframes hamsterEar { from,25%,50%,75%,to{transform:rotate(0);}12.5%,37.5%,62.5%,87.5%{transform:rotate(12deg);} }
@keyframes hamsterBody { from,25%,50%,75%,to{transform:rotate(0);}12.5%,37.5%,62.5%,87.5%{transform:rotate(-2deg);} }
@keyframes hamsterFRLimb { from,25%,50%,75%,to{transform:rotate(50deg) translateZ(-1px);}12.5%,37.5%,62.5%,87.5%{transform:rotate(-30deg) translateZ(-1px);} }
@keyframes hamsterFLLimb { from,25%,50%,75%,to{transform:rotate(-30deg);}12.5%,37.5%,62.5%,87.5%{transform:rotate(50deg);} }
@keyframes hamsterBRLimb { from,25%,50%,75%,to{transform:rotate(-60deg) translateZ(-1px);}12.5%,37.5%,62.5%,87.5%{transform:rotate(20deg) translateZ(-1px);} }
@keyframes hamsterBLLimb { from,25%,50%,75%,to{transform:rotate(20deg);}12.5%,37.5%,62.5%,87.5%{transform:rotate(-60deg);} }
@keyframes hamsterTail { from,25%,50%,75%,to{transform:rotate(30deg) translateZ(-1px);}12.5%,37.5%,62.5%,87.5%{transform:rotate(10deg) translateZ(-1px);} }
@keyframes spoke { from{transform:rotate(0);} to{transform:rotate(-1turn);} }