*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #4CAF50;--secondary-color: #8D6E63;--accent-color: #FF9800;--background-color: #2E2E2E;--surface-color: #3E3E3E;--text-primary: #FFFFFF;--text-secondary: #B0B0B0;--text-muted: #888888;--border-color: #555555;--success-color: #4CAF50;--warning-color: #FF9800;--error-color: #F44336;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--font-primary: "Roboto", sans-serif;--font-heading: "Press Start 2P", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 15px rgba(0, 0, 0, .2);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .25);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--transition-fast: .15s ease-in-out;--transition-normal: .3s ease-in-out;--transition-slow: .5s ease-in-out}html{scroll-behavior:smooth}body{font-family:var(--font-primary);background-color:var(--background-color);color:var(--text-primary);line-height:1.6;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.navbar{position:fixed;top:0;width:100%;background-color:#2e2e2ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;border-bottom:2px solid var(--primary-color);transition:var(--transition-normal)}.nav-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);display:flex;justify-content:space-between;align-items:center;height:70px}.nav-logo .logo-text{font-family:var(--font-heading);font-size:var(--font-size-lg);color:var(--primary-color);text-decoration:none;text-shadow:2px 2px 0px rgba(0,0,0,.5)}.nav-logo a{text-decoration:none}.nav-menu{display:flex;gap:var(--spacing-lg);list-style:none}.nav-link{color:var(--text-primary);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:var(--transition-fast);font-weight:500;position:relative}.nav-link:hover,.nav-link.active{color:var(--primary-color);background-color:#4caf501a;transform:translateY(-2px)}.nav-link.active:after{content:"";position:absolute;bottom:-2px;left:50%;transform:translate(-50%);width:20px;height:3px;background-color:var(--primary-color);border-radius:2px}.nav-toggle{display:none;flex-direction:column;cursor:pointer;gap:4px}.bar{width:25px;height:3px;background-color:var(--text-primary);transition:var(--transition-fast)}.hero{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-2}.hero-image{width:100%;height:100%;object-fit:cover;filter:brightness(.4)}.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#4caf504d,#2e2e2ecc);z-index:-1}.hero-content{text-align:center;z-index:1;max-width:800px;padding:0 var(--spacing-md)}.hero-title{font-family:var(--font-heading);font-size:clamp(2rem,5vw,4rem);margin-bottom:var(--spacing-lg);text-shadow:3px 3px 0px rgba(0,0,0,.8);color:var(--text-primary);line-height:1.2}.hero-subtitle{font-size:var(--font-size-xl);margin-bottom:var(--spacing-2xl);color:var(--text-secondary);max-width:600px;margin-left:auto;margin-right:auto}.hero-actions{display:flex;gap:var(--spacing-lg);justify-content:center;margin-bottom:var(--spacing-2xl);flex-wrap:wrap}.server-stats{display:flex;gap:var(--spacing-2xl);justify-content:center;margin-top:var(--spacing-2xl);flex-wrap:wrap}.stat{text-align:center;padding:var(--spacing-md);background-color:#ffffff1a;border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(76,175,80,.3);min-width:120px}.stat-number{display:block;font-family:var(--font-heading);font-size:var(--font-size-2xl);color:var(--primary-color);margin-bottom:var(--spacing-xs)}.stat-label{font-size:var(--font-size-sm);color:var(--text-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--radius-md);font-family:var(--font-primary);font-size:var(--font-size-base);font-weight:600;text-decoration:none;cursor:pointer;transition:var(--transition-normal);position:relative;overflow:hidden;box-shadow:var(--shadow-md)}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--primary-color) 0%,#45a049 100%);color:var(--text-primary);border:2px solid var(--primary-color)}.btn-primary:hover{background:linear-gradient(135deg,#45a049 0%,var(--primary-color) 100%)}.btn-secondary{background-color:transparent;color:var(--text-primary);border:2px solid var(--text-primary)}.btn-secondary:hover{background-color:var(--text-primary);color:var(--background-color)}.btn-large{padding:var(--spacing-lg) var(--spacing-2xl);font-size:var(--font-size-lg)}.join-btn,.btn:has(.server-ip){flex-direction:column;gap:var(--spacing-xs);min-width:200px}.server-ip{font-family:var(--font-heading);font-size:var(--font-size-sm);opacity:.9;background-color:#0000004d;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.features{padding:var(--spacing-3xl) 0;background-color:var(--surface-color)}.section-title{font-family:var(--font-heading);font-size:var(--font-size-3xl);text-align:center;margin-bottom:var(--spacing-2xl);color:var(--text-primary);text-shadow:2px 2px 0px rgba(0,0,0,.5)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl);margin-top:var(--spacing-2xl)}.feature-card{background-color:var(--background-color);padding:var(--spacing-xl);border-radius:var(--radius-lg);text-align:center;transition:var(--transition-normal);border:2px solid transparent;box-shadow:var(--shadow-md)}.feature-card:hover{transform:translateY(-8px);border-color:var(--primary-color);box-shadow:var(--shadow-xl)}.feature-icon{font-size:3rem;margin-bottom:var(--spacing-lg);display:block}.feature-title{font-family:var(--font-heading);font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--primary-color)}.feature-description{color:var(--text-secondary);line-height:1.8}.cta{padding:var(--spacing-3xl) 0;background:linear-gradient(135deg,var(--primary-color) 0%,#45a049 100%);text-align:center}.cta-content{max-width:600px;margin:0 auto}.cta-title{font-family:var(--font-heading);font-size:var(--font-size-3xl);margin-bottom:var(--spacing-lg);color:var(--text-primary);text-shadow:2px 2px 0px rgba(0,0,0,.5)}.cta-text{font-size:var(--font-size-xl);margin-bottom:var(--spacing-2xl);color:#ffffffe6}.page-header{padding:calc(70px + var(--spacing-3xl)) 0 var(--spacing-3xl) 0;background:linear-gradient(135deg,var(--surface-color) 0%,var(--background-color) 100%);text-align:center}.page-title{font-family:var(--font-heading);font-size:var(--font-size-4xl);margin-bottom:var(--spacing-md);color:var(--text-primary);text-shadow:2px 2px 0px rgba(0,0,0,.5)}.page-subtitle{font-size:var(--font-size-xl);color:var(--text-secondary);max-width:600px;margin:0 auto}.server-details{padding:var(--spacing-3xl) 0}.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--spacing-xl)}.detail-card{background-color:var(--surface-color);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.card-title{font-family:var(--font-heading);font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);color:var(--primary-color)}.detail-list{list-style:none;space-y:var(--spacing-md)}.detail-list li{padding:var(--spacing-sm) 0;border-bottom:1px solid var(--border-color);color:var(--text-secondary)}.detail-list li:last-child{border-bottom:none}.detail-list strong{color:var(--text-primary)}.connection-info{space-y:var(--spacing-lg)}.server-ip-display{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--background-color);border-radius:var(--radius-md);border:2px solid var(--primary-color);margin-bottom:var(--spacing-lg)}.ip-label{font-weight:600;color:var(--text-primary)}.ip-address{font-family:var(--font-heading);font-size:var(--font-size-lg);color:var(--primary-color);flex:1}.copy-btn{padding:var(--spacing-xs) var(--spacing-md);background-color:var(--primary-color);color:var(--text-primary);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm);font-weight:600;transition:var(--transition-fast)}.copy-btn:hover{background-color:#45a049;transform:scale(1.05)}.connection-steps h4{color:var(--text-primary);margin-bottom:var(--spacing-md)}.connection-steps ol{color:var(--text-secondary);padding-left:var(--spacing-lg)}.connection-steps li{margin-bottom:var(--spacing-sm);line-height:1.8}.game-modes{padding:var(--spacing-3xl) 0;background-color:var(--surface-color)}.modes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl);margin-top:var(--spacing-2xl)}.mode-card{background-color:var(--background-color);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:var(--transition-normal);box-shadow:var(--shadow-md)}.mode-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}.mode-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);flex-wrap:wrap;gap:var(--spacing-sm)}.mode-title{font-family:var(--font-heading);font-size:var(--font-size-xl);color:var(--primary-color)}.mode-tag{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase}.mode-tag.popular{background-color:var(--warning-color);color:var(--text-primary)}.mode-tag.competitive{background-color:var(--error-color);color:var(--text-primary)}.mode-tag.fun{background-color:var(--success-color);color:var(--text-primary)}.mode-tag:not(.popular):not(.competitive):not(.fun){background-color:var(--border-color);color:var(--text-primary)}.mode-description{color:var(--text-secondary);margin-bottom:var(--spacing-lg);line-height:1.8}.mode-features{list-style:none}.mode-features li{padding:var(--spacing-sm) 0;color:var(--text-secondary);position:relative;padding-left:var(--spacing-lg)}.mode-features li:before{content:"▶";position:absolute;left:0;color:var(--primary-color);font-size:var(--font-size-sm)}.server-rules{padding:var(--spacing-3xl) 0}.rules-intro{text-align:center;margin-bottom:var(--spacing-2xl)}.rules-intro p{font-size:var(--font-size-lg);color:var(--text-secondary);max-width:600px;margin:0 auto}.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl)}.rule-category{background-color:var(--surface-color);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.rule-title{font-family:var(--font-heading);font-size:var(--font-size-lg);color:var(--primary-color);margin-bottom:var(--spacing-lg);text-align:center}.rule-list{list-style:none}.rule-list li{padding:var(--spacing-sm) 0;color:var(--text-secondary);position:relative;padding-left:var(--spacing-lg);line-height:1.8;border-bottom:1px solid rgba(85,85,85,.3)}.rule-list li:last-child{border-bottom:none}.rule-list li:before{content:"•";position:absolute;left:0;color:var(--primary-color);font-weight:700;font-size:var(--font-size-lg)}.screenshots{padding:var(--spacing-3xl) 0;background-color:var(--surface-color)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-2xl)}.gallery-item{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;box-shadow:var(--shadow-md);transition:var(--transition-normal)}.gallery-item:hover{transform:scale(1.02);box-shadow:var(--shadow-xl)}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:var(--transition-normal)}.gallery-item:hover img{filter:brightness(.8)}.gallery-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);color:var(--text-primary);padding:var(--spacing-lg);transform:translateY(100%);transition:var(--transition-normal)}.gallery-item:hover .gallery-overlay{transform:translateY(0)}.gallery-overlay h4{font-family:var(--font-heading);font-size:var(--font-size-md);color:var(--primary-color)}.contact-options{padding:var(--spacing-3xl) 0}.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl)}.contact-card{background-color:var(--surface-color);padding:var(--spacing-2xl);border-radius:var(--radius-lg);text-align:center;border:1px solid var(--border-color);transition:var(--transition-normal);box-shadow:var(--shadow-md)}.contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}.contact-icon{font-size:3rem;margin-bottom:var(--spacing-lg)}.contact-title{font-family:var(--font-heading);font-size:var(--font-size-xl);margin-bottom:var(--spacing-md);color:var(--primary-color)}.contact-description{color:var(--text-secondary);margin-bottom:var(--spacing-lg);line-height:1.8}.social-links{display:flex;gap:var(--spacing-md);justify-content:center}.social-link{color:var(--text-primary);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--primary-color);border-radius:var(--radius-md);transition:var(--transition-fast);font-weight:500}.social-link:hover{background-color:var(--primary-color);color:var(--text-primary);transform:translateY(-2px)}.contact-form-section{padding:var(--spacing-3xl) 0;background-color:var(--surface-color)}.form-wrapper{display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing-3xl);max-width:1000px;margin:0 auto}.form-content{background-color:var(--background-color);padding:var(--spacing-2xl);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-lg)}.form-title{font-family:var(--font-heading);font-size:var(--font-size-2xl);margin-bottom:var(--spacing-md);color:var(--primary-color)}.form-subtitle{color:var(--text-secondary);margin-bottom:var(--spacing-2xl);line-height:1.8}.contact-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-label{color:var(--text-primary);font-weight:600;font-size:var(--font-size-sm)}.form-input,.form-select,.form-textarea{padding:var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--surface-color);color:var(--text-primary);font-family:var(--font-primary);font-size:var(--font-size-base);transition:var(--transition-fast)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4caf501a}.form-textarea{resize:vertical;min-height:120px}.form-note{margin-top:var(--spacing-lg);padding:var(--spacing-md);background-color:var(--warning-color);border-radius:var(--radius-md);color:var(--text-primary)}.contact-info{background-color:var(--background-color);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--border-color);height:fit-content}.info-title{font-family:var(--font-heading);font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);color:var(--primary-color)}.info-item{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}.info-item:last-of-type{border-bottom:none}.info-item strong{color:var(--text-primary);display:block;margin-bottom:var(--spacing-xs)}.server-ip-text{font-family:var(--font-heading);color:var(--primary-color)}.quick-links{margin-top:var(--spacing-xl)}.quick-links h4{color:var(--text-primary);margin-bottom:var(--spacing-md);font-family:var(--font-heading)}.quick-links ul{list-style:none}.quick-links li{margin-bottom:var(--spacing-sm)}.quick-links a{color:var(--text-secondary);text-decoration:none;transition:var(--transition-fast)}.quick-links a:hover{color:var(--primary-color)}.faq{padding:var(--spacing-3xl) 0}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--spacing-xl);margin-top:var(--spacing-2xl)}.faq-item{background-color:var(--surface-color);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:var(--transition-normal);box-shadow:var(--shadow-md)}.faq-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}.faq-question{font-family:var(--font-heading);font-size:var(--font-size-lg);color:var(--primary-color);margin-bottom:var(--spacing-md);line-height:1.4}.faq-answer{color:var(--text-secondary);line-height:1.8}.footer{background-color:var(--background-color);padding:var(--spacing-3xl) 0 var(--spacing-lg);border-top:2px solid var(--primary-color)}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.footer-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.footer-title{font-family:var(--font-heading);font-size:var(--font-size-lg);color:var(--primary-color);margin-bottom:var(--spacing-md)}.footer-text{color:var(--text-secondary);line-height:1.8}.footer-links{list-style:none}.footer-links li{margin-bottom:var(--spacing-sm)}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:var(--transition-fast)}.footer-links a:hover{color:var(--primary-color)}.footer-links a[href="/"],.footer-links a[href="/server-info.html"],.footer-links a[href="/contact.html"]{color:#f5f;font-family:var(--font-heading);font-size:var(--font-size-sm)}.footer-links a[href="/"]:hover,.footer-links a[href="/server-info.html"]:hover,.footer-links a[href="/contact.html"]:hover{color:#f5f;text-shadow:0 0 8px rgba(255,85,255,.5)}.server-ip-footer{font-family:var(--font-heading);color:var(--primary-color);font-size:var(--font-size-lg);background-color:var(--surface-color);padding:var(--spacing-sm);border-radius:var(--radius-sm);text-align:center;border:1px solid var(--border-color)}.footer-bottom{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid var(--border-color);color:var(--text-muted)}@media (max-width: 768px){.nav-menu{position:fixed;left:-100%;top:70px;flex-direction:column;background-color:#2e2e2efa;width:100%;text-align:center;transition:var(--transition-normal);padding:var(--spacing-lg) 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-menu.active{left:0}.nav-toggle{display:flex}.nav-toggle.active .bar:nth-child(2){opacity:0}.nav-toggle.active .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.active .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hero-title{font-size:var(--font-size-3xl)}.hero-subtitle{font-size:var(--font-size-lg)}.hero-actions{flex-direction:column;align-items:center}.server-stats{gap:var(--spacing-md)}.features-grid,.modes-grid,.rules-grid,.contact-grid,.faq-grid,.details-grid{grid-template-columns:1fr}.form-wrapper{grid-template-columns:1fr;gap:var(--spacing-xl)}.gallery-grid{grid-template-columns:1fr}.section-title{font-size:var(--font-size-2xl)}.page-title{font-size:var(--font-size-3xl)}.container{padding:0 var(--spacing-sm)}}@media (max-width: 480px){.hero-title{font-size:var(--font-size-2xl)}.btn{padding:var(--spacing-sm) var(--spacing-lg)}.btn-large{padding:var(--spacing-md) var(--spacing-xl)}.feature-card,.mode-card,.rule-category,.contact-card,.faq-item,.form-content,.contact-info{padding:var(--spacing-lg)}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}button:focus-visible,a:focus-visible,.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media print{.navbar,.hero,.cta,.footer{display:none}body{background:#fff;color:#000}.page-header{padding-top:var(--spacing-lg)}}