/* RESET */
@import url("https://fonts.cdnfonts.com/css/panton");
* { margin:0; padding:0; box-sizing:border-box; }
:root { --bg:#07070b; --muted:#94a3b8; --accent:#7c3aed; --accent-2:#5b21b6; --white:#f7f7ff; --card:#0f1220; --border:#2b2f45; }
body { font-family: "Panton", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#e6eef8; background: linear-gradient(180deg, rgba(5,5,10,0.8), rgba(7,7,11,0.8)), url('HomePage/img/logo.png') center/cover fixed no-repeat; background-blend-mode: overlay; min-height:100vh; }
.progress-bar-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.1); z-index: 110; }
#progress-bar { width: 0; height: 100%; background: linear-gradient(90deg, #7c3aed, #5b21b6); transition: width 0.2s ease; }
.navbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 22px; border-bottom: 1px solid rgba(255,255,255,0.12); background: rgba(4,4,10,0.82); position:sticky; top:4px; z-index:100; backdrop-filter: blur(8px); }
.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-logo img { width:42px; filter: drop-shadow(0 0 6px #6b21a8); }
.nav-logo span { color: #a855f7; font-weight:700; font-size:1.12rem; }
.nav-links { display:flex; align-items:center; gap:10px; list-style:none; }
.nav-links li a { color:#e5e5ff; text-decoration:none; padding:8px 12px; border-radius:999px; font-weight:600; transition:0.2s; }
.nav-links li a:hover, .nav-links li a.active { background: rgba(124, 58, 237, 0.22); color:#fff; }
.btn-ghost { border:1px solid rgba(255,255,255,0.3); padding:8px 14px; border-radius:999px; color:#f0f0ff; }
main { margin-top:12px; }
.hero { position: relative; overflow: hidden; padding: 100px 20px 80px; text-align:center; color: #f2f4ff; min-height: 60vh; display:flex; align-items:center; }
.hero::before { content: ""; position: absolute; inset:0; background-image: url('HomePage/img/logo.png'); background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(3px) brightness(0.7) saturate(120%); opacity: 0.45; transform: scale(1.03); z-index: 0; }
.hero::after { content: ""; position: absolute; inset:0; background: linear-gradient(rgba(7,7,11,0.4), rgba(7,7,11,0.35)); z-index: 1; }
.hero-inner { position: relative; z-index: 2; max-width: 880px; margin:auto; }
.hero-title { font-size:clamp(2.8rem, 8vw, 4.2rem); letter-spacing:-0.025em; margin-bottom:12px; opacity:0; animation: heroIn 0.8s ease forwards 0.2s; }
.hero-text { max-width: 760px; margin:0 auto 24px; color: rgba(236,236,255,0.8); font-size:1.15rem; opacity:0; animation: heroIn 0.8s ease forwards 0.5s; }
.hero-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; opacity:0; animation: heroIn 0.8s ease forwards 0.8s; }
.btn { display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:10px; padding:12px 22px; font-weight:700; text-decoration:none; cursor:pointer; transition:all 0.2s ease; }
.btn-primary, .btn-secondary { animation: buttonPop 1.2s ease infinite alternate 1s; }
.card { background: rgba(16, 18, 32, 0.8); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow: 0 6px 25px rgba(0,0,0,0.2); transition: transform 0.22s ease, border-color 0.22s ease; animation: cardAppear 0.7s ease forwards; opacity:0; transform: translateY(10px); }
.card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,0.65); }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes buttonPop {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes cardAppear {
  to { opacity: 1; transform: translateY(0); }
}
.btn-primary { background: linear-gradient(135deg,#7c3aed,#5b21b6); color:#fff; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-secondary { background: rgba(255,255,255,0.1); color:#fff; }
.btn-secondary:hover { background: rgba(255,255,255,0.19); }
.section-title { font-size: clamp(1.85rem, 5vw, 2.4rem); text-align:center; margin-bottom:20px; }
.container { width:min(1140px, 92vw); margin:0 auto; }
.about, .status, .community { padding:40px 0; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.card { background: rgba(16, 18, 32, 0.8); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow: 0 6px 25px rgba(0,0,0,0.2); transition: transform 0.22s ease, border-color 0.22s ease; }
.card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,0.65); }
.card h3 { margin-bottom:8px; }
.card p { color: rgba(225,225,252,0.8); line-height:1.6; }

.announcements-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 16px; padding: 0; margin: 0; }
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #5e2a80;
    color: #f2f2ff;
    border: 1px solid #8b63d3;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.live-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 10px rgba(255,77,77,0.7);
    animation: pulseRed 1.1s infinite ease-in-out;
}

@keyframes pulseRed {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.announcement-card { background: rgba(16, 18, 32, 0.86); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow: 0 8px 28px rgba(0,0,0,0.25); transition: transform 0.22s ease, border-color 0.22s ease; }
.announcement-card:hover { transform: translateY(-5px); border-color: rgba(124,58,237,0.65); }
.announcement-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.announcement-body { padding: 16px; }
.announcement-category { display:inline-block; padding:4px 10px; border-radius:999px; background: rgba(124,58,237,0.2); color: #d8c9ff; font-size:0.78rem; margin-bottom:8px; }
.announcement-body h3 { margin:8px 0 10px; font-size:1.2rem; }
.announcement-body h4 { margin: 0 0 10px; color: #c7d1f9; font-size:0.97rem; }
.announcement-body p { color: rgba(225,225,252,0.88); line-height:1.5; margin-bottom: 10px; }
.announcement-body a { color: #b1c3ff; text-decoration: none; font-weight: 600; }
.announcement-body a:hover { color: #fff; }

.announcement-category.category-avventure { background: rgba(54, 211, 227, 0.22); color: #81e6d9; border-color: rgba(56,189,248,0.4); }
.announcement-category.category-news { background: rgba(251, 191, 36, 0.22); color: #f6e05e; border-color: rgba(234, 179, 8, 0.45); }
.announcement-category.category-eventi { background: rgba(236, 72, 153, 0.22); color: #f9a8d4; border-color: rgba(236, 72, 153, 0.45); }
.announcement-category.category-annunci { background: rgba(124, 58, 237, 0.22); color: #d8c9ff; border-color: rgba(124, 58, 237, 0.45); }
.announcement-category.category-offerte { background: rgba(34,197,94,0.22); color: #86efac; border-color: rgba(34,197,94,0.45); }
.announcement-category { border:1px solid rgba(255,255,255,0.15);}

.status-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:10px; align-items:center; margin:0 auto 14px; max-width:950px; }
.status-item { color:#e5e5f0; font-weight:600; }
.status-item .ip { color:#fff; font-weight:700; }
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:0.83rem; font-weight:700; }
.status-badge.online { color:#8cf7c1; background: rgba(34,197,94,0.2); border:1px solid rgba(34,197,94,0.8); }
.status-badge.offline { color:#ffd5d5; background: rgba(239,68,68,0.2); border:1px solid rgba(239,68,68,0.8); }
.status-badge.pending { color:#bbd8ff; background: rgba(59,130,246,0.2); border:1px solid rgba(59,130,246,0.8); }
.status-btn, .copy-btn { border:1px solid rgba(255,255,255,0.15); background: rgba(12,13,22,0.95); color: #e7eaf3; padding:10px 14px; border-radius:10px; cursor:pointer; }
.status-btn:hover, .copy-btn:hover { background: rgba(19,21,36,0.95); }
.note { margin-top:10px; color: rgba(218,221,242,0.74); }
.community { background: rgba(10,10,17,0.7); }
.community-text { text-align:center; color: rgba(230,232,255,0.86); max-width:760px; margin:0 auto 18px; }
.footer { padding:18px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.footer-inner { width:min(1140px,92vw); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; color:rgba(215,215,235,0.78); }
.footer-inner a { color: rgba(215,215,235,0.82); text-decoration:none; }
.footer-inner a:hover { text-decoration:underline; }
.hero-extra { margin-top: 18px; display: inline-flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; color: #d9e4ff; font-weight: 600; }
.hero-extra .badge { background: rgba(124,58,237,0.25); border: 1px solid rgba(124,58,237,0.6); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; }
.hero-extra .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hero-extra .status-dot.online { background: #34d399; }
.hero-extra .ip-tag { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 5px 10px; font-size: 0.9rem; }

.showcase { padding: 60px 0; background: rgba(14,15,24,0.8); }
.showcase .container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.showcase-text h2 { color: #fff; margin-bottom: 14px; font-size: clamp(2rem, 5vw, 2.6rem); }
.showcase-text p { margin-bottom: 16px; color: rgba(220,220,255,0.9); }
.copy-box { display: inline-flex; gap: 12px; align-items: center; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); padding: 10px 14px; border-radius: 10px; }
.copy-box span { color: #e5e5ff; font-weight: 700; }
.btn-copy { background: #8570ff; }
.showcase-image img { width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); object-fit: cover; }

.features { padding: 60px 0; }
.features .section-title { margin-bottom: 24px; }

.discord-banner { padding: 48px 0; background: linear-gradient(135deg, #2157ff, #5c36f9); color: #fff; text-align: center; }
.discord-banner h2 { margin-bottom: 10px; }
.discord-banner p { margin-bottom: 18px; color: rgba(255,255,255,0.9); }
.btn-wide { min-width: 210px; }

@media (max-width: 900px) {
    .showcase .container { grid-template-columns: 1fr; }
    .hero-extra { justify-content: center; }
}

.gallery-alt { padding: 70px 0; }
.gallery-alt .section-title { margin-bottom: 26px; }
.gallery-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin-bottom: 40px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.gallery-row.visible { opacity: 1; transform: translateY(0); }
.gallery-row.reverse { direction: rtl; }
.gallery-row.reverse .gallery-text, .gallery-row.reverse .gallery-image { direction: ltr; }
.gallery-text h3 { margin-bottom: 10px; font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
.gallery-text p { color: rgba(230,232,255,0.86); line-height:1.6; }
.gallery-image img { width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,0.15); object-fit: cover; }

@media (max-width: 900px) {
    .gallery-row { grid-template-columns: 1fr; }
    .gallery-row.reverse { direction: ltr; }
}
.gallery-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin-bottom: 40px; }
.gallery-row.reverse { direction: rtl; }
.gallery-row.reverse .gallery-text, .gallery-row.reverse .gallery-image { direction: ltr; }
.gallery-text h3 { margin-bottom: 10px; font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
.gallery-text p { color: rgba(230,232,255,0.86); line-height:1.6; }
.gallery-image img { width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,0.15); object-fit: cover; }

@media (max-width: 900px) {
    .gallery-row { grid-template-columns: 1fr; }
    .gallery-row.reverse { direction: ltr; }
}

@media (max-width: 760px) {
    .hero { padding: 72px 16px 56px; background-attachment: scroll; }
    .hero-title { font-size: 2.4rem; }
    .status-panel { grid-template-columns:1fr; }
    .hero-actions { justify-content: center; }
    .copy-box { width: 100%; justify-content: space-between; }
}

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(120%); background: rgba(5,9,20,0.9); color: #e8f6ff; border: 1px solid rgba(140, 182, 255, 0.6); padding: 10px 12px; border-radius: 12px; font-weight: 600; z-index: 999; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(8px); }
.toast--show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast-logo { width: 32px; height: 32px; border-radius: 50%; background: url('/HomePage/img/logo.png') center/cover no-repeat; animation: shake-logo 0.6s ease-in-out infinite alternate; }
.toast-content { display: flex; flex-direction: column; gap:  2px; }
.toast-title { font-size: 0.85rem; font-weight: 700; color: #dce8ff; }
.toast-message { font-size: 0.82rem; color: #a2c6ff; }

@keyframes shake-logo {
  0% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-2deg); }
  50% { transform: translateX(2px) rotate(2deg); }
  75% { transform: translateX(-1px) rotate(-1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}