/* Layout */ .Top_Menu { background-color: #1F1E1C !important; } .Topbar { display: block; width: 100%; background-color: #282725 !important; } .menu-items { --max-width: 1280px; --min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 auto; padding: 0 16px; } .menu-links { display: flex !important; align-items: center; gap: 10px; } .logo-link, .logo-hamburger { display: inline-flex; align-items: center; } .logo-link { margin-right: 8px; } .logo-menu { width: auto; max-height: 48px; } .logo-menu-hamburger { width: auto; max-height: 42px; } .mobile-header, .hamburger, .menu-mobile { display: none; } .mobile-header, .menu-mobile { width: 100%; } .menu-mobile { position: fixed; top: 0; right: 0; z-index: 10000; display: block; width: min(360px, 88vw); height: 100vh; padding: 78px 16px 24px; background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.14), transparent 38%), linear-gradient(180deg, rgba(31, 30, 28, 0.98) 0%, rgba(11, 9, 6, 0.98) 100%); border-left: 1px solid rgba(212, 175, 55, 0.22); box-shadow: -18px 0 42px rgba(0, 0, 0, 0.55); overflow-y: auto; transform: translateX(105%); opacity: 0; pointer-events: none; transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .menu-mobile.active { transform: translateX(0); opacity: 1; pointer-events: auto; } .mobile-menu-backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .mobile-menu-backdrop.active { opacity: 1; pointer-events: auto; } body.mobile-menu-open { overflow: hidden; } .menu-mobile .boxMenuPanelMobile { display: block !important; margin: 0 !important; } .menu-mobile #ucpMenuLinks { display: flex; flex-direction: column; gap: 10px; } .menu-mobile .wiki__nav-item { position: relative; display: flex !important; align-items: center; gap: 12px; min-height: 56px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; background: rgba(255, 255, 255, 0.045); color: rgba(245, 236, 210, 0.84) !important; text-decoration: none !important; overflow: hidden; transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; } .menu-mobile .wiki__nav-item:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), transparent 70%); opacity: 0; transition: opacity 0.22s ease; } .menu-mobile .wiki__nav-item:hover { border-color: rgba(242, 202, 80, 0.38); background: rgba(212, 175, 55, 0.08); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); transform: translateX(-3px); } .menu-mobile .wiki__nav-item:hover:before { opacity: 1; } .menu-mobile .wiki__nav-item-icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid rgba(212, 175, 55, 0.24); border-radius: 12px; background: rgba(212, 175, 55, 0.08); color: #f2ca50; font-size: 17px; box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.05); } .menu-mobile .wiki__nav-item-info { position: relative; z-index: 1; min-width: 0; } .menu-mobile .wiki__nav-item-name { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif !important; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; color: #fff8e9; } .menu-mobile .wiki__nav-item-desc { margin-top: 3px; font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif !important; font-size: 11px; line-height: 1.35; color: rgba(245, 236, 210, 0.52); } .hamburger { position: relative; z-index: 10002; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(212, 175, 55, 0.28); border-radius: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.28); cursor: pointer; transition: all 0.25s ease; } .hamburger span { display: block; width: 19px; height: 2px; border-radius: 999px; background: #f2ca50; box-shadow: 0 0 8px rgba(242, 202, 80, 0.35); transition: transform 0.25s ease, opacity 0.25s ease; } .hamburger:hover { border-color: rgba(242, 202, 80, 0.55); background: rgba(212, 175, 55, 0.10); } .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .server-install { display: flex; align-items: center; } .server-install > div, .server-install-actions { display: flex !important; align-items: center; gap: 16px; } .server-install-actions { justify-content: space-between; } .topbar-container { --max-width: 1280px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin: 0 auto; padding: 0 16px; } .topbar-links { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; } /* Menu links */ .menu-link, .sub-menu-link, .discord-link, .community-text { display: flex; align-items: center; box-sizing: border-box; margin: 0; border: 0 solid rgba(212, 175, 55, 0.2); font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif !important; text-decoration: none !important; cursor: pointer; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); -webkit-font-smoothing: antialiased; } .menu-link { justify-content: center; gap: 6px; padding: 8px 0; color: rgba(241, 245, 249, 0.85) !important; font-size: 12px; font-weight: 500; letter-spacing: 0.9px; line-height: 18px; text-transform: uppercase; white-space: nowrap; } .sub-menu-link, .discord-link, .community-text { gap: 6px; padding: 8px 6px; color: rgba(241, 245, 249, 0.7) !important; font-size: 10px; font-weight: 400; letter-spacing: 0.3px; line-height: 16px; } .menu-link:hover, .sub-menu-link:hover, .discord-link:hover { color: rgba(203, 168, 54, 1) !important; text-decoration: none !important; } .update-menu-link { position: relative; color: #69cfff !important; text-shadow: 0 0 7px rgba(63, 191, 255, 0.26); } .update-menu-link i { color: #69cfff; filter: drop-shadow(0 0 5px rgba(63, 191, 255, 0.38)); } .update-menu-link span { position: relative; display: inline-block; color: #69cfff; } .update-menu-link span:after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; color: transparent; background: linear-gradient( 90deg, transparent 0%, transparent 32%, #bff2ff 44%, #ffffff 50%, #8fe4ff 56%, transparent 68%, transparent 100% ); background-size: 240% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 5px rgba(111, 218, 255, 0.85)); animation: update-menu-text-glow 2.8s ease-in-out infinite; pointer-events: none; } .update-menu-link:hover, .update-menu-link:hover span { color: #bfefff !important; text-shadow: 0 0 11px rgba(63, 191, 255, 0.58); } /* Buttons */ .button-login, .button-install, .button-static { display: inline-flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif !important; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none !important; transition: all 0.3s ease; } .button-login, .button-install { gap: 6px; padding: 9px 16px; border-radius: 4px; font-size: 10px; font-weight: 400; } .button-login { border: 1px solid rgba(212, 175, 55, 0.40); background: rgba(255, 255, 255, 0.03); color: #fff !important; } .button-login:hover { border-color: #d4af37; background: rgba(212, 175, 55, 0.10); box-shadow: 0 0 10px rgba(212, 175, 55, 0.20); color: #fff !important; } .button-install, .button-static { border: 1px solid #d4af37; background: #d4af37; color: #000 !important; } .button-install { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.40); animation: pulse-glow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .button-install:hover { filter: brightness(1.1); color: #000 !important; } .button-static { gap: 8px; padding: 12px 21px; border-radius: 5px; font-size: 12px; font-weight: 250; } .button-static:hover { background-color: #f6d355; color: black; text-decoration: none; } /* Language selector */ .server-stats > div, .language-switcher { display: flex !important; align-items: center; gap: 8px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; background: rgba(14, 14, 14, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .server-stats a { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin-right: 0 !important; border: 1px solid transparent; border-radius: 999px; background: transparent; overflow: hidden; opacity: 0.55; transition: all 0.2s ease; } .server-stats a:hover { border-color: rgba(242, 202, 80, 0.4); box-shadow: 0 0 12px rgba(212, 175, 55, 0.18); opacity: 1; transform: scale(1.08); } .server-stats img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; } /* Floating Discord */ .discord-float { position: fixed; right: 25px; bottom: 25px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(180, 190, 255, 0.35); border-radius: 50px; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.16) 40%, transparent 60%), linear-gradient(135deg, #7289da 0%, #5865f2 50%, #4752c4 100%); background-size: 260% 100%, 100% 100%; color: #fff; font-family: 'Segoe UI', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; text-shadow: 0 0 8px rgba(255, 255, 255, 0.18); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30), 0 0 12px rgba(88, 101, 242, 0.42), 0 0 28px rgba(88, 101, 242, 0.18); animation: discord-glow 2.8s ease-in-out infinite, discord-shine 4.5s ease-in-out infinite; transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, border-color 0.25s ease; } .discord-float svg { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35)); transition: filter 0.25s ease, transform 0.25s ease; } .discord-float:hover { border-color: rgba(220, 225, 255, 0.75); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38), 0 0 16px rgba(114, 137, 218, 0.85), 0 0 34px rgba(88, 101, 242, 0.65), 0 0 58px rgba(88, 101, 242, 0.32); filter: brightness(1.13); transform: translateY(-3px) scale(1.06); text-decoration: none; } .discord-float:hover svg { filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.75)); transform: scale(1.08); } @keyframes discord-glow { 0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30), 0 0 10px rgba(88, 101, 242, 0.35), 0 0 22px rgba(88, 101, 242, 0.14); } 50% { box-shadow: 0 7px 23px rgba(0, 0, 0, 0.34), 0 0 16px rgba(114, 137, 218, 0.62), 0 0 36px rgba(88, 101, 242, 0.28); } } @keyframes discord-shine { 0%, 65% { background-position: 150% 0, 0 0; } 100% { background-position: -80% 0, 0 0; } } /* Snow effect */ #snow-container { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; pointer-events: none; } .snowflake { position: absolute; top: -10px; color: white; font-size: 1em; opacity: 0.8; user-select: none; animation: fall linear infinite, sway ease-in-out infinite; } /* Flag counter */ #flagcounter-hidden { position: fixed; left: 0; bottom: 0; z-index: -1; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Animations */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.40); } 50% { box-shadow: 0 0 20px 5px rgba(212, 175, 55, 0.60); } } @keyframes update-menu-text-glow { 0% { background-position: 160% 0; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 90% { background-position: -60% 0; opacity: 0; } 100% { background-position: -60% 0; opacity: 0; } } @keyframes fall { 0% { top: -10px; } 100% { top: 110vh; } } @keyframes sway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } } /* Responsive */ @media (max-width: 1023px) { } @media (max-width: 767px) { .mobile-header { display: flex; align-items: center; justify-content: space-between; } .hamburger { display: inline-flex; align-items: center; justify-content: center; } .menu-links, .button-install { display: none !important; } .menu-mobile { display: block; } .menu-items { flex-wrap: wrap; align-items: center; gap: 8px; } .server-install { order: 2; margin-right: auto; margin-left: -15px; } .server-install > div, .server-install-actions { display: flex !important; align-items: center; justify-content: flex-start; gap: 10px; } .button-login { padding: 8px 12px; font-size: 10px; } .Topbar { width: 100%; } .topbar-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; min-height: 44px; padding: 0; } .topbar-links { display: flex !important; align-items: center !important; flex: 1; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; } .topbar-links::-webkit-scrollbar { display: none; } .topbar-links .sub-menu-link:nth-child(1), .topbar-links .sub-menu-link:nth-child(2) { display: none !important; } .sub-menu-link { flex: 0 0 auto; gap: 4px; padding: 6px 4px; font-size: 10px; } .server-stats { order: -1; flex-shrink: 0; margin-right: -15px; } .server-stats > div, .language-switcher { display: flex !important; align-items: center; gap: 4px; padding: 2px 4px; } .server-stats a { width: 24px; height: 24px; } } @media (max-width: 639px) { } /* Compact, open server information aligned with the heading. */ /* Move the entire mobile hero down 24px without increasing its total padding. */ @media(max-width:834px){.refinado.mobile-original.status-layout-5 .hero-main-content{padding:52px 20px 12px!important}} .refinado.mobile-original.status-layout-5 .hero-main-content p.text-base{text-align:justify;text-align-last:left} .refinado .modern-video-carousel .video-carousel-card:hover .video-play-button{background:#17120bc9!important;color:#ffe18a!important;border-color:#f1ce6a90;box-shadow:0 0 15px #f2ca501a!important} .status-regalia-showcase{width:100%;max-width:430px;margin:0 0 26px;text-align:left;font-family:"Segoe UI",Arial,sans-serif} .status-regalia{position:relative;isolation:isolate;display:grid;grid-template-columns:54px minmax(0,1fr);gap:18px;align-items:center;padding:0 0 18px;color:#efdfba;text-shadow:0 2px 8px #000b} .status-regalia:before{content:"";pointer-events:none;position:absolute;z-index:-1;inset:-16px -22px -6px -22px;background:radial-gradient(ellipse at 35% 48%,#090d0bc4,transparent 73%)} .status-regalia>.regalia-torch{transform:translateX(12px)} .status-regalia>.regalia-info{transform:translateX(45px);width:calc(100% - 45px)} .regalia-torch{position:relative;width:54px;height:80px;pointer-events:none} .regalia-torch svg{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 5px #0007)} .torch-energy-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .torch-energy-ready .torch-halo,.torch-energy-ready .torch-flame-outer,.torch-energy-ready .torch-flame-heart,.torch-energy-ready .torch-spark{display:none;animation:none} .torch-halo{opacity:.6;animation:torch-glow 2.6s ease-in-out infinite} .torch-flame-outer{opacity:.92;transform-origin:36px 53px;animation:torch-flow 2.3s ease-in-out infinite,torch-lift 1.7s ease-in-out infinite} .torch-flame-heart{transform-origin:36px 53px;animation:torch-heart 1.35s ease-in-out infinite} .torch-spark{--torch-drift:-6px;--torch-rise:-36px;opacity:0;filter:drop-shadow(0 0 1.3px #87efad);animation:torch-spark 2.6s linear infinite;animation-delay:-.3s} .torch-spark-two{--torch-drift:7px;--torch-rise:-45px;animation-delay:-1.25s;animation-duration:3.2s} .torch-spark-three{--torch-drift:-3px;--torch-rise:-33px;animation-delay:-1.9s;animation-duration:2.7s} .torch-spark-four{--torch-drift:9px;--torch-rise:-42px;animation-delay:-2.35s;animation-duration:3.5s} @keyframes torch-glow{0%,100%{opacity:.43}42%{opacity:.76}72%{opacity:.55}} @keyframes torch-flow{ 0%,100%{d:path("M36 54C18 54 19 41 25 32C28 27 29 22 27 17C34 21 35 27 34 32C42 25 43 15 41 7C53 19 47 30 50 37C53 43 48 54 36 54Z")} 40%{d:path("M36 54C19 54 20 40 27 34C31 30 29 26 29 23C36 26 34 31 35 34C43 25 46 14 38 3C54 16 45 30 48 36C54 44 47 54 36 54Z")} 72%{d:path("M36 54C16 54 20 41 23 30C25 24 27 18 24 12C35 18 38 26 35 32C39 25 40 18 44 14C49 25 49 32 52 38C53 46 48 54 36 54Z")} } @keyframes torch-lift{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(.95,1.07);opacity:1}} @keyframes torch-heart{0%,100%{opacity:.82;transform:scale(.9,.87)}38%{opacity:1;transform:scale(.81,1.19)}72%{opacity:.93;transform:scale(1.05,.98)}} @keyframes torch-spark{0%{opacity:0;transform:translate(0,0)}15%{opacity:.95}55%{opacity:.75}100%{opacity:0;transform:translate(var(--torch-drift),var(--torch-rise))}} .fx-paused .regalia-torch *{animation-play-state:paused!important} @media(prefers-reduced-motion:reduce){.regalia-torch *{animation:none!important}.torch-spark{display:none}} .regalia-info{min-width:0;padding-top:1px} .regalia-state{display:flex;align-items:center;gap:12px;color:#b2e9bf;font-size:9px;font-weight:600;line-height:1.3;letter-spacing:1.9px;text-transform:uppercase} .regalia-state:before{content:"";display:block;flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:#a4edb8;box-shadow:0 0 0 3px #7ed99f12,0 0 9px #80e9a45e} .regalia-signal{display:flex;align-items:flex-end;gap:2px;height:9px;opacity:.8} .regalia-signal i{width:2px;background:#91d7a6}.regalia-signal i:nth-child(1){height:3px}.regalia-signal i:nth-child(2){height:5px}.regalia-signal i:nth-child(3){height:7px}.regalia-signal i:nth-child(4){height:9px} .status-regalia[data-server-state="offline"] .regalia-state{color:#ffafa9} .status-regalia[data-server-state="offline"] .regalia-state:before{background:#ff716e;box-shadow:0 0 0 3px #ff5d6414,0 0 9px #ff505966} .status-regalia[data-server-state="offline"] .regalia-signal i{background:#ef7d7c} .status-regalia[data-server-state="offline"] .torch-rim-light{stroke:#ffb5a5} .status-regalia[data-server-state="offline"] #torch-emerald stop:nth-child(1){stop-color:#ffb4a1} .status-regalia[data-server-state="offline"] #torch-emerald stop:nth-child(2){stop-color:#ff625b} .status-regalia[data-server-state="offline"] #torch-emerald stop:nth-child(3){stop-color:#dc3047} .status-regalia[data-server-state="offline"] #torch-emerald stop:nth-child(4){stop-color:#f94d60} .status-regalia[data-server-state="offline"] #torch-heart stop:nth-child(1){stop-color:#ffe1cf} .status-regalia[data-server-state="offline"] #torch-heart stop:nth-child(2){stop-color:#ffc3b2} .status-regalia[data-server-state="offline"] #torch-heart stop:nth-child(3){stop-color:#fa7d7b} .status-regalia[data-server-state="offline"] #torch-aura stop{stop-color:#f85160} .status-regalia[data-server-state="offline"] .torch-spark{fill:#ffc8bc;filter:drop-shadow(0 0 1.3px #fa6d73)} .regalia-stats{display:flex;align-items:center;gap:28px;margin:9px 0 8px;max-width:320px} .regalia-population{display:flex;align-items:center;gap:11px;min-width:0} .refinado .regalia-population strong{font:400 26px/1.1 "Intro","Trebuchet MS",sans-serif;font-variant-numeric:tabular-nums;font-synthesis:none;letter-spacing:.4px;color:#faedcd} .regalia-population>span{font-size:10px;line-height:1.4;color:#d9d2bf;max-width:55px} .regalia-rate{position:relative;display:flex;align-items:center;gap:7px;padding-left:23px;white-space:nowrap} .regalia-rate:before{content:"";position:absolute;width:1px;height:25px;left:0;top:50%;transform:translateY(-50%);background:linear-gradient(transparent,#e8c77e65,transparent)} .regalia-rate strong{font:400 18px/1 "Intro","Trebuchet MS",sans-serif;color:#d8b776;font-synthesis:none} .regalia-rate>span{color:#b8a583;font-size:8px;letter-spacing:1.5px;text-transform:uppercase} .regalia-history{display:flex;align-items:center;gap:11px;font-size:9px;line-height:1.4;letter-spacing:.4px;color:#c5bda9} .regalia-history>i{display:block;width:3px;height:3px;transform:rotate(45deg);background:#c6a363} .regalia-rule{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;height:5px;pointer-events:none} .regalia-rule:before{content:"";flex:0 0 65px;height:1px;background:linear-gradient(90deg,transparent,#d7b77388)} .regalia-rule:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,#d7b77388,transparent)} .regalia-rule>span{display:block;width:4px;height:4px;transform:rotate(45deg);background:#ddc080;box-shadow:0 0 7px #dcb26a33} @media(max-width:1100px) and (min-width:835px){.regalia-stats{gap:14px}.regalia-rate{gap:5px;padding-left:14px}.regalia-population{gap:8px}.regalia-state{letter-spacing:1.2px}} @media(max-width:834px){.status-regalia-showcase{max-width:430px;margin:2px auto 28px}.regalia-stats{max-width:310px}} @media(max-width:560px){.status-regalia-showcase{max-width:360px}.status-regalia{grid-template-columns:43px minmax(0,1fr);gap:13px;padding-bottom:16px}.regalia-torch{width:43px;height:68px}.regalia-state{font-size:8px;letter-spacing:1.3px;gap:9px}.regalia-stats{gap:18px;margin-top:9px;margin-bottom:8px}.refinado .regalia-population strong{font-size:24px}.regalia-population{gap:8px}.regalia-population>span{font-size:9px;max-width:50px}.regalia-rate{padding-left:14px;gap:6px}.regalia-rate strong{font-size:15px}.regalia-rate>span{font-size:7px}.regalia-history{font-size:8px;gap:9px}.regalia-rule:before{flex-basis:51px}} /* Mobile drawer: scoped to the approved home, leaving desktop navigation intact. */ @media(max-width:834px){ .refinado.mobile-original .menu-mobile[data-modern-menu]{display:flex!important;flex-direction:column;width:min(376px,calc(100vw - 24px));height:100vh;height:100dvh;padding:0;z-index:10020;overflow:hidden;overscroll-behavior:contain;border:0;border-left:1px solid #d5b97a40;border-radius:0;background:radial-gradient(ellipse at 100% 0,#a17c2d16,transparent 43%),linear-gradient(155deg,#20201c,#131511 72%);box-shadow:-24px 0 70px #0009;transform:translateX(102%);opacity:0;visibility:hidden;transition:transform .32s cubic-bezier(.22,.8,.25,1),opacity .24s,visibility .32s;font-family:'Segoe UI',Arial,sans-serif} .refinado.mobile-original .menu-mobile[data-modern-menu].active{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto} .refinado.mobile-original .menu-mobile[data-modern-menu]{text-transform:none;letter-spacing:normal} .refinado.mobile-original .menu-mobile[data-modern-menu] .boxMenuPanelMobile{padding:0;background:none;border:0;box-shadow:none} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item-icon:before,.refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item-icon:after{display:none} .refinado.mobile-original .mobile-menu-backdrop{z-index:10010;background:linear-gradient(90deg,#080b0d77,#080b0dbb);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)} .refinado.mobile-menu-open .hamburger{visibility:hidden} .mobile-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:22px 22px 19px;padding-top:max(22px,env(safe-area-inset-top));border-bottom:1px solid #d3ba7c1c;position:relative} .mobile-drawer-header:after{content:'';position:absolute;bottom:-1px;left:22px;width:65px;height:1px;background:linear-gradient(90deg,#dcbd70,transparent)} .mobile-drawer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none!important} .mobile-drawer-brand img{display:block;width:145px!important;max-height:34px!important;height:auto;object-fit:contain;filter:drop-shadow(0 2px 8px #d7ad2920)} .mobile-drawer-brand span{font:500 8px/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:2.8px;color:#a89a7c;margin-left:2px} .mobile-drawer-close{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;padding:0;border:1px solid #d2bb7f28;border-radius:6px;background:#ffffff03;color:#dac799;transition:background .2s,border-color .2s} .mobile-drawer-close:hover,.mobile-drawer-close:focus-visible{background:#d3b56810;border-color:#d3b56877} .mobile-drawer-close svg{width:19px;height:19px} .mobile-drawer-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7c694133 transparent;padding:22px 20px 20px} .mobile-drawer-account{display:flex;align-items:center;gap:12px;padding:14px 13px;border:1px solid #c9aa6252;border-radius:7px;background:linear-gradient(105deg,#c8a35118,#b58d3b08);color:#f3e3b8!important;text-decoration:none!important;position:relative;box-shadow:inset 0 1px 0 #eace9510} .mobile-drawer-account>.drawer-account-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;background:#dec17f10;border-radius:5px;color:#e0c581} .mobile-drawer-account svg{width:19px;height:19px} .mobile-drawer-account>span:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0} .mobile-drawer-account strong{font-size:13px;font-weight:600;line-height:1.3} .mobile-drawer-account small{font-size:11px;line-height:1.4;color:#b7ae98;font-weight:400} .mobile-drawer-account>.drawer-arrow{margin-left:auto;width:14px;height:14px;flex:none;opacity:.7} .mobile-drawer-section-title{margin:22px 4px 11px;font:600 9px/1.4 'Segoe UI',Arial,sans-serif;letter-spacing:2px;color:#9c927d;text-transform:uppercase} .refinado.mobile-original .menu-mobile[data-modern-menu] #ucpMenuLinks{gap:5px} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item{min-height:52px;gap:12px;padding:9px 11px;border:1px solid transparent;border-radius:6px;background:transparent;box-shadow:none;transform:none;color:#eee7d9!important;overflow:visible;text-decoration:none!important} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item:before{display:none} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item:after{content:'';position:absolute;width:5px;height:5px;right:12px;top:calc(50% - 3px);border-right:1px solid #a79a7b88;border-top:1px solid #a79a7b88;transform:rotate(45deg)} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item:hover,.refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item:focus-visible{background:#d3b66d09;border-color:#d3b66d26;transform:none;box-shadow:none} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item[aria-current=page]{background:linear-gradient(90deg,#cfad5614,#cfad5603);border-color:#cfad5625} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item[aria-current=page]:before{display:block;inset:11px auto 11px -1px;width:2px;opacity:1;border-radius:2px;background:#d4b36a;box-shadow:0 0 10px #dab66035} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item-icon{flex:0 0 32px;width:32px;height:32px;background:transparent;border:0;border-radius:0;box-shadow:none;color:#bda773;font-size:18px} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item-icon svg{width:21px;height:21px} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item-icon i.ra{font-family:'rpg-awesome'!important;font-weight:400} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item-info{padding:0 14px 0 0;min-width:0} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item-name{font:500 14px/1.4 'Segoe UI',Arial,sans-serif;letter-spacing:.2px;text-transform:none;color:#e7e2d6} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item[aria-current=page] .wiki__nav-item-name{color:#f1d99d} .refinado.mobile-original .menu-mobile[data-modern-menu] .wiki__nav-item-desc{font:400 11px/1.45 'Segoe UI',Arial,sans-serif;color:#a39d8e;margin:3px 0 0;letter-spacing:0;text-transform:none;opacity:1} .mobile-drawer-community{display:flex;align-items:center;gap:12px;border-top:1px solid #d5b8781c;padding:16px 9px 0;margin-top:18px;text-decoration:none!important;color:#ccc7d9!important} .mobile-drawer-community>svg{width:23px;height:23px;flex:none;color:#b0a8cd} .mobile-drawer-community>span{display:flex;flex-direction:column;gap:4px} .mobile-drawer-community strong{font-size:12px;font-weight:500;line-height:1.4} .mobile-drawer-community small{font-size:10px;line-height:1.4;color:#92909b} .mobile-drawer-community:after{content:'↗';margin-left:auto;color:#a7a2b8;font-size:17px} .mobile-drawer-footer{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 22px;padding-bottom:max(15px,env(safe-area-inset-bottom));border-top:1px solid #cdb27b1c;background:#0d100c6e} .mobile-drawer-footer>span{font-size:10px;color:#a59c89;letter-spacing:.4px} .refinado.mobile-original .mobile-drawer-footer .language-switcher{gap:5px;background:none;border:0;border-radius:0;padding:0} .refinado.mobile-original .mobile-drawer-footer .language-switcher a{display:grid;place-items:center;width:33px;height:33px;border:1px solid transparent!important;border-radius:5px;background:none;opacity:.65} .refinado.mobile-original .mobile-drawer-footer .language-switcher a[aria-current=true]{border-color:#cfad6255!important;background:#cfad6210;opacity:1} .refinado.mobile-original .mobile-drawer-footer .language-switcher a:hover{opacity:1} .refinado.mobile-original .mobile-drawer-footer .language-switcher img{display:block;width:22px;height:22px;filter:none;transform:none} } @media(min-width:835px){.refinado .menu-mobile[data-modern-menu]{display:none!important}} @media(prefers-reduced-motion:reduce){.refinado .menu-mobile[data-modern-menu],.refinado .mobile-menu-backdrop{transition:none!important}} :root { --mk-gold: #d4af37; --mk-gold-bright: #f2ca50; --mk-gold-soft: #e8c97a; --mk-ivory: #f5ecd2; --mk-text: #f5ecd2; } .hero-main-section { overflow: hidden; } .hero-main-video { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; z-index: 0; } .hero-video-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(212, 175, 55, 0.08), transparent 60%), linear-gradient(180deg, rgba(00, 00, 00, 0.42) 0%, rgba(10, 8, 5, 0.38) 100%); z-index: 1; pointer-events: none; } .hero-main-content { position: relative; z-index: 2; } .hero-register-button-wrap { display: flex; align-items: center; justify-content: flex-start; margin-top: 28px; } .hero-register-button { padding: 14px 26px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 700 !important; color: #000 !important; text-decoration: none !important; } .hero-register-button:hover { color: #000 !important; text-decoration: none !important; } @media (max-width: 834px) { .hero-register-button-wrap { justify-content: center; } } /* ===================== CAROUSEL VIDEOS ===================== */ .carousel-ornament-adjust { margin-top: 30px !important; margin-bottom: 8px !important; } .carousel-description { font-family: 'Space Grotesk', sans-serif !important; font-size: 15px !important; line-height: 1.75 !important; color: rgba(245, 236, 210, 0.78) !important; font-weight: 400 !important; } .modern-video-carousel { position: relative; width: 100%; max-width: 1200px; margin: 10px auto 0; display: flex; align-items: center; box-sizing: border-box; padding: 0 56px; overflow: hidden !important; } .modern-video-carousel .swiper-container { width: 100%; overflow: hidden !important; padding-top: 18px; padding-bottom: 18px; } .modern-video-carousel .swiper-wrapper { overflow: visible !important; } .modern-video-carousel .swiper-slide { display: flex; flex-direction: column; box-sizing: border-box; overflow: visible !important; padding-top: 6px; padding-bottom: 6px; } .video-carousel-card { position: relative; border-radius: 16px; overflow: hidden; background: rgba(18, 14, 8, 0.55); border: 1px solid rgba(212, 175, 55, 0.18); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.03); transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease; } .video-carousel-card:hover { transform: translateY(-6px); border-color: rgba(242, 202, 80, 0.55); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.25); } .video-carousel-link { position: relative; display: block; text-decoration: none !important; overflow: hidden; border-radius: 16px; } .video-carousel-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.20) 45%, rgba(15, 11, 6, 0.85) 100%); z-index: 1; transition: background 0.35s ease; } .video-carousel-card:hover .video-carousel-link::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(15, 11, 6, 0.75) 100%); } .video-carousel-link .carousel-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 16px; border: 0 !important; box-shadow: none !important; transition: transform 0.5s ease, filter 0.5s ease; } .video-carousel-card:hover .carousel-thumb { transform: scale(1.06); filter: brightness(1.08); } .video-play-button { position: absolute; left: 50%; top: 50%; z-index: 3; width: 54px; height: 54px; border-radius: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 5, 0.72); color: #f2ca50; border: 1px solid rgba(242, 202, 80, 0.35); box-shadow: 0 0 18px rgba(0, 0, 0, 0.65), 0 0 18px rgba(212, 175, 55, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease; } .video-play-button i { font-size: 16px; margin-left: 3px; color: #f2ca50; text-shadow: 0 0 10px rgba(242, 202, 80, 0.70); } .video-carousel-card:hover .video-play-button { transform: translate(-50%, -50%) scale(1.10); background: rgba(10, 8, 5, 0.88); border-color: rgba(242, 202, 80, 0.75); box-shadow: 0 0 22px rgba(0, 0, 0, 0.75), 0 0 28px rgba(242, 202, 80, 0.35); } .video-platform-badge { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(18, 14, 8, 0.72); border: 1px solid rgba(212, 175, 55, 0.28); color: rgba(245, 236, 210, 0.92); font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .video-platform-badge i { color: var(--mk-gold-bright); } .modern-video-carousel .swiper-button-next, .modern-video-carousel .swiper-button-prev { width: 32px !important; height: 48px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; top: 50% !important; margin-top: 0 !important; transform: translateY(-50%) !important; transition: opacity 0.25s ease, transform 0.25s ease; opacity: 0.75; z-index: 20; } .modern-video-carousel .swiper-button-prev { left: 10px !important; } .modern-video-carousel .swiper-button-next { right: 10px !important; } .modern-video-carousel .swiper-button-next:hover, .modern-video-carousel .swiper-button-prev:hover { opacity: 1; transform: translateY(-50%) scale(1.12) !important; } .modern-video-carousel .swiper-button-next::after, .modern-video-carousel .swiper-button-prev::after { font-size: 28px !important; font-weight: 900 !important; color: #f2ca50 !important; text-shadow: 0 0 8px rgba(242, 202, 80, 0.65), 0 2px 8px rgba(0, 0, 0, 0.85); transition: color 0.25s ease, text-shadow 0.25s ease; } .modern-video-carousel .swiper-button-next:hover::after, .modern-video-carousel .swiper-button-prev:hover::after { color: #fff5d4 !important; text-shadow: 0 0 14px rgba(242, 202, 80, 0.95), 0 2px 10px rgba(0, 0, 0, 0.9); } .carousel-button-install-wrap { display: flex; align-items: center; justify-content: center; margin-top: 32px; } .carousel-button-install { padding: 14px 26px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 700 !important; color: #000 !important; text-decoration: none !important; } .carousel-button-install:hover { color: #000 !important; text-decoration: none !important; } /* ===================== HERO SERVER STATUS ===================== */ .hero-right { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; } .server-orb { position: relative; width: 192px; height: 192px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .server-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.20); animation: spin-slow 10s linear infinite; } .server-orb-ring.ring-dashed { inset: 8px; border-style: dashed; border-color: rgba(212, 175, 55, 0.30); animation: spin-slow-reverse 15s linear infinite; } .server-orb-static { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.10); } .server-orb-static.inner { inset: 16px; border-color: rgba(255, 255, 255, 0.05); } .server-card { width: 144px; height: 144px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(212, 175, 55, 0.10); } .server-card h4 { font-family: "Cinzel", serif; font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 4px; } .server-card p { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.60; margin-bottom: 8px; color: #ffffff; } .text-primary-rate { color: #f2ca50 !important; } .text-light-title { color: rgba(255, 255, 255, 0.72); } .server-status { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; border: 1px solid transparent; white-space: nowrap; } .server-status.online { background: rgba(74, 222, 128, 0.20); color: #4ade80; border-color: rgba(74, 222, 128, 0.30); } .server-status.offline { background: rgba(248, 113, 113, 0.20); color: #f87171; border-color: rgba(248, 113, 113, 0.30); } /* ===================== CONTENT CREATOR SECTION ===================== */ .middleContent { padding: 56px 0 !important; overflow: visible; } .middleContent .container_wiki { overflow: visible; } .middleContent .container_wiki > .flex-1 > h2 { text-align: center; font-size: 34px !important; margin: 0 auto !important; } .middleContent .call h4 { font-family: 'Space Grotesk', sans-serif !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--mk-text) !important; font-weight: 400 !important; } .middleContent .call h4 + h4 { margin-top: 18px !important; } .content-left-adjust { margin-top: -45px; } .content-ornament-adjust { margin-top: 30px !important; margin-bottom: 8px !important; } .mk-section-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px auto 8px; } .mk-section-ornament .line { height: 1px; width: 120px; background: linear-gradient(90deg, transparent, var(--mk-gold) 50%, transparent); } .mk-section-ornament .diamond { width: 8px; height: 8px; transform: rotate(45deg); background: var(--mk-gold-bright); box-shadow: 0 0 14px rgba(242, 202, 80, 0.7); } .mk-section-ornament .diamond.small { width: 5px; height: 5px; opacity: 0.6; } .mk-content-perks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .mk-content-perks .perk { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(212, 175, 55, 0.08); border: 1px solid rgba(212, 175, 55, 0.25); color: var(--mk-ivory); font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .mk-content-perks .perk i { color: var(--mk-gold-bright); } .video-button-install-wrap { display: flex; align-items: center; justify-content: flex-start; margin-top: 28px; } .video-button-install { padding: 14px 26px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 700 !important; color: #000 !important; text-decoration: none !important; } .video-button-install:hover { color: #000 !important; text-decoration: none !important; } /* ===================== WIKI SECTION ===================== */ .wiki-ornament-adjust { margin-top: 30px !important; margin-bottom: 8px !important; } .wiki-description { font-family: 'Space Grotesk', sans-serif !important; font-size: 15px !important; line-height: 1.75 !important; color: rgba(245, 236, 210, 0.78) !important; font-weight: 400 !important; } .wiki .boxWiki { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.18); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.03); transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease; } .wiki .boxWiki::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(15, 11, 6, 0.85) 100%); transition: background 0.4s ease; z-index: 1; } .wiki .boxWiki:hover { transform: translateY(-6px); border-color: rgba(242, 202, 80, 0.55); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.25); } .wiki .boxWiki:hover::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.40) 60%, rgba(15, 11, 6, 0.75) 100%); } .wiki .boxWiki .gradient-bg-wiki { position: relative; z-index: 2; padding: 18px 16px !important; background: transparent !important; } .wiki .boxWiki h3 { font-family: 'Cinzel', serif !important; font-size: 18px !important; letter-spacing: 0.12em !important; color: #fff5d4 !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); margin-bottom: 4px !important; } .wiki .boxWiki p { font-family: 'Space Grotesk', sans-serif !important; font-size: 10.5px !important; letter-spacing: 0.22em !important; color: var(--mk-gold-bright) !important; opacity: 0.85; } .wiki-button-install-wrap { display: flex; align-items: center; justify-content: center; margin-top: 32px; } .wiki-button-install { padding: 14px 26px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 700 !important; color: #000 !important; text-decoration: none !important; } .wiki-button-install:hover { color: #000 !important; text-decoration: none !important; } /* ===================== LEGACY BUTTON SUPPORT ===================== */ .mk-btn-wrap { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .btn-v2-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0a0805 !important; background: var(--mk-gold); border: 1px solid var(--mk-gold); text-decoration: none !important; box-shadow: 0 0 28px rgba(212, 175, 55, 0.35); transition: filter 0.25s ease, transform 0.25s ease; width: auto !important; flex: 0 0 auto; } .btn-v2-primary:hover { filter: brightness(1.12); transform: translateY(-2px); color: #0a0805 !important; text-decoration: none !important; box-shadow: 0 0 40px rgba(212, 175, 55, 0.55); } /* ===================== ANIMATIONS ===================== */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin-slow-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } /* ===================== RESPONSIVE ===================== */ @media (max-width: 834px) { .top-relative { width: 350px; } .decorativeText { top: 5px; text-align: center; font-size: 40px; left: 0; right: 0; margin-left: auto; margin-right: auto; padding-right: 30px; } .decorativeText2 { margin-top: 2px; text-align: center; font-size: 20px; padding-right: 55px; } p.text-base { margin-top: -15px; text-align: justify; max-width: var(--max-width-values); } .text-base { text-align: justify; font-size: 14px; max-width: 100%; padding-right: 55px; } .header__info-buttons-register { display: none; } .hero-right { order: -1; width: auto; margin: -10px auto 45px auto !important; padding-left: 0; padding-right: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px; flex-wrap: nowrap; } .server-orb { width: 150px; height: 150px; margin: 0; } .server-card { width: 118px; height: 118px; padding: 10px; } .server-card h4 { font-size: 20px; } .server-card p { font-size: 8px; margin-bottom: 6px; letter-spacing: 0.12em; } .server-status { font-size: 8px; padding: 3px 8px; } .modern-video-carousel { padding: 0 44px; } .content-left-adjust { margin-top: 0; } .video-button-install-wrap { justify-content: center; } } @media (max-width: 480px) { .hero-right { order: -1; width: 100%; margin: -40px auto 45px auto !important; gap: 8px; flex-wrap: nowrap; justify-content: center; } .hero-right .server-orb { display: flex !important; } .hero-right .server-orb-beta { display: none !important; } .hero-right .server-orb-main { width: 170px; height: 170px; margin: 0 auto; } .hero-right .server-orb-main .server-card { width: 132px; height: 132px; padding: 10px; } .hero-right .server-orb-main .server-card h4 { font-size: 22px; } .hero-right .server-orb-main .server-card p { font-size: 8px; letter-spacing: 0.10em; margin-bottom: 6px; } .hero-right .server-orb-main .server-status { font-size: 8px; padding: 3px 8px; } .modern-video-carousel { padding: 0 38px; } .video-play-button { width: 46px; height: 46px; } .video-platform-badge { font-size: 8px; padding: 6px 10px; } .modern-video-carousel .swiper-button-next, .modern-video-carousel .swiper-button-prev { width: 26px !important; height: 42px !important; } .modern-video-carousel .swiper-button-next::after, .modern-video-carousel .swiper-button-prev::after { font-size: 22px !important; } } .mySwiper:not(.swiper-container-initialized) .swiper-wrapper { display: flex; gap: 20px; } .mySwiper:not(.swiper-container-initialized) .swiper-slide { flex: 0 0 calc(25% - 15px); max-width: calc(25% - 15px); } .mySwiper:not(.swiper-container-initialized) .video-carousel-card { width: 100%; } .mySwiper:not(.swiper-container-initialized) .carousel-thumb { width: 100%; height: auto; display: block; } @media (max-width: 1024px) { .mySwiper:not(.swiper-container-initialized) .swiper-slide { flex: 0 0 calc(33.333% - 14px); max-width: calc(33.333% - 14px); } } @media (max-width: 768px) { .mySwiper:not(.swiper-container-initialized) .swiper-slide { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); } } @media (max-width: 640px) { .mySwiper:not(.swiper-container-initialized) .swiper-slide { flex: 0 0 100%; max-width: 100%; } } :root{--mk-gold:#cfad75;--mk-gold-bright:#e8c994;--mk-gold-soft:#d4b781;--mk-ivory:#eee7db;--mk-text:#ccc7be} html{scroll-behavior:smooth}.refinado{background:#111216;color:#eee7db;font-family:"Segoe UI",Arial,sans-serif!important;-webkit-font-smoothing:antialiased}.refinado [hidden]{display:none!important} .refinado p,.refinado .menu-link,.refinado .sub-menu-link,.refinado .button-static,.refinado .button-install,.refinado .button-login,.refinado .carousel-description,.refinado .wiki-description,.refinado .middleContent .call h4{font-family:"Segoe UI",Arial,sans-serif!important} .refinado .Top_Menu{background:#191a1df5;border-bottom:1px solid #ffffff09}.refinado .Topbar{background:#202124;border-bottom:1px solid #ffffff0c}.refinado .menu-link{font-size:11px;font-weight:500;letter-spacing:.45px;color:#d8d5cf!important}.refinado .menu-link i{font-size:12px;color:#a5a4a0}.refinado .menu-link:hover,.refinado .sub-menu-link:hover{color:#ecd2a6!important}.refinado .sub-menu-link{font-size:10px;letter-spacing:.2px}.refinado .topbar-container{min-height:43px}.refinado .logo-menu{max-height:44px}.refinado .button-login,.refinado .button-install{min-height:42px;border-radius:5px;font-size:10px;letter-spacing:.7px}.refinado .button-install,.refinado .button-static{background:linear-gradient(110deg,#e2c18b,#c9a164);border:1px solid #e5c58b90;color:#241b0e!important;box-shadow:0 5px 20px #0002;animation:none;font-weight:600}.refinado .button-static{min-height:45px;border-radius:5px;letter-spacing:1px;font-size:11px;padding:12px 22px}.refinado .button-install:hover,.refinado .button-static:hover{background:#e8c995;box-shadow:0 7px 22px #0003;transform:translateY(-1px)}.refinado .button-login{background:#ffffff03;border-color:#d4b68138;color:#e6dece!important}.refinado .language-switcher{gap:8px;background:#13151970;border:1px solid #ffffff09;border-radius:6px;padding:5px 8px}.refinado .language-switcher img{width:24px;height:17px;border-radius:3px;object-fit:cover;box-shadow:none}.refinado .language-switcher a{border:0;box-shadow:none}.refinado .update-menu-link span:after{animation:none;background:none}.refinado .update-menu-link,.refinado .update-menu-link span{color:#a9d5e8!important;text-shadow:none} .refinado .hero-main-section{min-height:600px;height:auto!important;max-height:none!important}.refinado .hero-main-content{max-width:1440px;padding:56px 64px;margin-top:0;gap:36px;align-items:center}.refinado .hero-main-content>.flex-col{margin-left:0!important;max-width:650px;min-width:0;flex:1 1 58%}.refinado .hero-main-video{object-position:center 25%}.refinado .hero-video-overlay{background:linear-gradient(90deg,#080b10c9 0%,#080b1077 43%,#080b101a 73%),linear-gradient(0deg,#101216bd 0%,transparent 50%,#090d1622)}.refinado .pattern{opacity:.12}.refinado .top-relative{width:auto}.refinado .decorativeText{position:relative!important;margin:0;top:auto!important;font-family:Arial,sans-serif;font-size:clamp(74px,7.6vw,116px);font-weight:800;line-height:1;letter-spacing:-5px;color:transparent;-webkit-text-stroke:1px #e3d8bb93;text-shadow:none}.refinado .decorativeText2{font-family:Georgia,serif;margin:0 0 0 3px;line-height:1.2;font-size:clamp(29px,3vw,43px);font-weight:500;letter-spacing:-1.2px;color:#ead1a2;text-shadow:0 2px 15px #0007}.refinado .hero-main-content p.text-base{font-size:14px;line-height:1.85;color:#d8d5cf;font-weight:400;margin-top:18px;margin-bottom:0;text-align:left;text-shadow:0 1px 8px #0008}.refinado .hero-main-content p.text-base>br:first-child{display:none}.refinado .hero-register-button-wrap{margin-top:25px}.refinado .hero-right{margin-right:0!important;gap:20px;flex:0 1 38%;flex-wrap:nowrap;align-self:center}.refinado .server-orb{width:166px;height:166px}.refinado .server-card{width:138px;height:138px;background:#111419c4;border-color:#d4b68130;box-shadow:0 12px 35px #0004}.refinado .server-card h4{font-family:Georgia,serif;font-size:25px;font-weight:600}.refinado .text-primary-rate{color:#e4c38a!important}.refinado .server-card p{font-size:9px;opacity:.8;letter-spacing:1.3px}.refinado .server-orb-ring{animation:none;border-color:#d4b68125}.refinado .server-orb-ring.ring-dashed{animation:none;border-color:#d4b68117}.refinado .server-orb-static{border-color:#ffffff07}.refinado .server-orb-static.inner{border-color:transparent}.refinado .server-status{font-family:"Segoe UI",Arial,sans-serif;letter-spacing:.7px;font-weight:600;font-size:9px;padding:5px 11px}.refinado .server-status.online{color:#80edac;background:#1f73442e;border-color:#6fe69a42;box-shadow:0 0 13px #50d78b0e}.refinado .server-status.offline{color:#ee919a;background:#7b27352e;border-color:#ec7f8b33} .refinado .title-container .subtitle,.refinado .middleContent .container_wiki>.flex-1>h2,.refinado .wiki h2{font-family:Georgia,serif!important;font-size:28px!important;font-weight:400!important;letter-spacing:.5px;color:#e7cfaa!important;text-shadow:none}.refinado .carousel-description{font-size:13px!important;color:#a9a7a2!important;margin-top:10px}.refinado .mk-section-ornament{gap:10px;opacity:.7}.refinado .mk-section-ornament .diamond{width:5px;height:5px;box-shadow:none;background:#d4b681}.refinado .mk-section-ornament .diamond.small{width:3px;height:3px}.refinado .mk-section-ornament .line{width:85px}.refinado .top_separator{height:1px;opacity:.5;background:linear-gradient(90deg,transparent,#a18b6133,transparent)} .refinado .modern-video-carousel{max-width:1240px;padding:0 48px;margin-top:18px}.refinado .modern-video-carousel .swiper-container{overflow-x:auto!important;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 0}.refinado .modern-video-carousel .swiper-container::-webkit-scrollbar{display:none}.refinado .modern-video-carousel .swiper-wrapper{display:flex!important;transform:none!important;gap:18px;transition:none!important;height:auto;box-sizing:border-box}.refinado .modern-video-carousel .swiper-slide{width:auto!important;flex:0 0 calc((100% - 54px)/4);margin:0!important;scroll-snap-align:start;height:auto}.refinado .video-carousel-card{border-radius:7px;border:1px solid #c0ac852b;box-shadow:none;overflow:hidden}.refinado .video-carousel-card:before,.refinado .video-carousel-card:after{display:none}.refinado .carousel-thumb{width:100%;height:auto!important;aspect-ratio:16/9;object-fit:cover;filter:brightness(.87)}.refinado .video-carousel-card:hover{transform:translateY(-2px);border-color:#cbb17d80;box-shadow:0 10px 28px #0004}.refinado .video-play-button{width:42px;height:42px;background:#171a20b8;border:1px solid #d5bb8980;box-shadow:none;color:#ead4ad;font-size:14px}.refinado .video-platform-badge{font-family:"Segoe UI",Arial,sans-serif;font-size:8px;border-radius:4px;background:#101319bd;border:1px solid #ffffff18;letter-spacing:.8px}.refinado .modern-video-carousel .swiper-button-prev,.refinado .modern-video-carousel .swiper-button-next{border-radius:5px;width:32px;height:38px;background:#c6aa7710;border:1px solid #c6aa7733;box-shadow:none;color:#d5bc91;margin-top:-19px}.refinado .modern-video-carousel .swiper-button-prev{left:0}.refinado .modern-video-carousel .swiper-button-next{right:0}.refinado .modern-video-carousel .swiper-button-prev:after,.refinado .modern-video-carousel .swiper-button-next:after{font-size:14px;color:#d9c39f}.refinado .modern-video-carousel button:disabled{opacity:.25;cursor:default} .refinado .middleContent{background:#16171b!important;padding:44px 0!important}.refinado .middleContent .call h4,.refinado .wiki-description{font-size:14px!important;line-height:1.9!important;font-weight:400!important;color:#c1bdb5!important}.refinado .middleContent .container_wiki{max-width:1320px}.refinado .content-left-adjust{margin-top:0;padding-right:40px}.refinado .middleContent .gifarea{align-self:center;overflow:hidden;border-radius:8px;border:1px solid #d4b68126;background:#0e1014;box-shadow:0 16px 45px #0003;margin-bottom:0;min-height:0}.refinado .gifarea video{width:100%;height:auto!important;aspect-ratio:16/9;object-fit:cover}.refinado .detailGifArea{display:none}.refinado .mk-content-perks .perk{font-family:"Segoe UI",Arial,sans-serif;font-size:10px;letter-spacing:.8px;background:#d4b68108;border-color:#d4b68125;border-radius:5px;font-weight:400}.refinado .mk-content-perks .perk i{color:#cfb17c}.refinado .wiki{padding-top:40px;padding-bottom:40px}.refinado .wiki .boxWiki{border-radius:7px;border-color:#d4b68130;box-shadow:none}.refinado .wiki .boxWiki:hover{box-shadow:0 10px 30px #0004;border-color:#d4b68170}.refinado .wiki .boxWiki h3{font-family:Georgia,serif!important;font-size:21px;font-weight:400}.refinado .wiki .boxWiki p{font-size:10px;letter-spacing:.4px}.refinado .discord-float{background:#595e9c;border:1px solid #a7a8dd45;box-shadow:0 6px 25px #0004;animation:none;font-family:"Segoe UI",Arial,sans-serif;font-size:11px;padding:11px 17px;border-radius:7px}.refinado .discord-float:after,.refinado .discord-float:before{animation:none;box-shadow:none}.preview-caption{padding:12px 24px;margin:0!important;text-align:center;font:10px "Segoe UI",sans-serif!important;color:#777b85;background:#131418}.refinado a:focus-visible,.refinado button:focus-visible,.refinado [tabindex]:focus-visible{outline:2px solid #e9c995;outline-offset:3px}.refinado button{cursor:pointer}.refinado .swiper-button-prev:focus-visible,.refinado .swiper-button-next:focus-visible{outline-offset:-3px} @media(max-width:1100px){.refinado .hero-main-content{padding:48px 40px;gap:20px}.refinado .hero-right{gap:8px}.refinado .server-orb{width:140px;height:140px}.refinado .server-card{width:120px;height:120px}.refinado .decorativeText{font-size:78px}.refinado .decorativeText2{font-size:31px}.refinado .hero-main-content p.text-base{font-size:13px}.refinado .modern-video-carousel .swiper-slide{flex-basis:calc((100% - 36px)/3)}} @media(max-width:834px){.refinado .hero-main-section{min-height:0!important}.refinado .hero-main-content{flex-direction:column!important;padding:52px 24px 36px!important;gap:28px}.refinado .hero-main-content>.flex-col{width:100%;max-width:620px;padding:0!important;flex:auto}.refinado .top-relative{width:100%;text-align:center}.refinado .decorativeText{font-size:clamp(58px,12vw,85px)!important;letter-spacing:-3px;padding:0!important;margin:0!important;line-height:1.1;left:auto;right:auto}.refinado .decorativeText2{font-size:clamp(23px,4.6vw,34px)!important;letter-spacing:-.6px;padding:0!important;margin:4px 0 0!important;text-align:center}.refinado .hero-main-content p.text-base{margin-top:22px!important;line-height:1.85;font-size:13px;text-align:left}.refinado .hero-video-overlay{background:linear-gradient(0deg,#101216ee,#0b0e16a1 90%)}.refinado .hero-main-video{object-position:66% top}.refinado .hero-right{margin:0!important;gap:18px;flex:0 0 auto;width:auto}.refinado .server-orb{width:145px!important;height:145px!important}.refinado .server-card{width:125px!important;height:125px!important}.refinado .hero-right .server-card h4{font-size:24px!important}.refinado .server-card p{font-size:9px!important}.refinado .server-status{font-size:9px!important}.refinado .modern-video-carousel{padding:0 34px}.refinado .modern-video-carousel .swiper-slide{flex-basis:78%}.refinado .modern-video-carousel .swiper-wrapper{gap:12px}.refinado .modern-video-carousel .swiper-button-prev,.refinado .modern-video-carousel .swiper-button-next{width:27px;height:36px}.refinado .title-container .subtitle,.refinado .middleContent .container_wiki>.flex-1>h2,.refinado .wiki h2{font-size:23px!important;line-height:1.4}.refinado .middleContent .container_wiki>.flex{flex-direction:column!important}.refinado .content-left-adjust{padding-right:0}.refinado .middleContent .gifarea{width:100%;margin-top:28px;flex:auto}.refinado .wiki-description,.refinado .middleContent .call h4{font-size:13px!important}.refinado .discord-float{right:14px;bottom:14px;padding:10px 13px}.refinado .language-switcher img{width:22px;height:16px}.refinado .menu-mobile{background:#1b1c21;border-left-color:#d4b68130}.refinado .hamburger{position:relative;z-index:10001}.refinado .wiki>.flex{flex-wrap:wrap;gap:12px;margin-left:16px;margin-right:16px}.refinado .wiki .boxWiki{margin:0!important;width:min(320px,100%)} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.refinado *{animation:none!important;transition:none!important}} /* Preserve the original gold, imagery and fantasy identity. */ :root{--mk-gold:#d4af37;--mk-gold-bright:#f2ca50;--mk-gold-soft:#e8c97a;--mk-ivory:#f5ecd2;--mk-text:#eee4ce} .refinado{background:#12110f;color:#f5ecd2} .refinado .Top_Menu{background:linear-gradient(180deg,#24211e,#1c1b19)!important;border-bottom:1px solid #d4af3726;box-shadow:0 6px 30px #0002} .refinado .Topbar{background:#282623!important;border-bottom:1px solid #d4af372b} .refinado .menu-link{position:relative;color:#f1ece1!important;font-size:12px;font-weight:600;letter-spacing:.55px} .refinado .menu-link i{color:#c6c1b5;transition:color .25s,transform .25s} .refinado .menu-link:after{content:"";position:absolute;bottom:2px;height:1px;left:20%;right:20%;background:linear-gradient(90deg,transparent,#f6cf59,transparent);transform:scaleX(0);transition:transform .28s} .refinado .menu-link:hover:after,.refinado .menu-link:focus-visible:after{transform:scaleX(1)} .refinado .menu-link:hover,.refinado .sub-menu-link:hover{color:#ffdc6f!important} .refinado .menu-link:hover i{color:#f2ca50;transform:translateY(-2px)} .refinado .sub-menu-link{color:#d8d4cb!important;font-weight:700} .refinado .sub-menu-link span{font-weight:700} .refinado .update-menu-link,.refinado .update-menu-link span{color:#7bdaff!important;text-shadow:0 0 12px #35bff83d} .refinado .update-menu-link i{color:#7bdaff;filter:drop-shadow(0 0 5px #4dcaff66)} .refinado .update-menu-link span:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;background:linear-gradient(90deg,transparent 0%,transparent 32%,#bff2ff 44%,#fff 50%,#8fe4ff 56%,transparent 68%,transparent 100%);background-size:240% 100%;background-position:160% 0;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 5px #6fd9ffd9);animation:update-menu-text-glow 2.8s ease-in-out infinite;pointer-events:none} .refinado .logo-menu,.refinado .logo-menu-hamburger{filter:drop-shadow(0 2px 8px #c79b2820);transition:filter .3s} .refinado .logo-link:hover img{filter:drop-shadow(0 0 10px #efc25460)} .refinado .language-switcher{background:#1917137a;border-color:#e1ba3d18;border-radius:18px} .refinado .language-switcher img{width:26px;height:26px;border-radius:50%;transition:transform .22s,filter .22s;filter:saturate(1.12)} .refinado .language-switcher a:hover img{transform:translateY(-2px);filter:saturate(1.2) drop-shadow(0 0 5px #e5bc4259)} /* A warmer, clearer opening with restrained depth and embers. */ .refinado .hero-main-section{isolation:isolate;background:#13110d} .refinado .hero-main-video{filter:saturate(1.08) contrast(1.025);transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0) scale(1.025);transition:transform .7s cubic-bezier(.2,.65,.3,1)} .refinado .hero-video-overlay{background:linear-gradient(90deg,#07090c70 0%,#080a0d30 44%,#080a0d05 75%),linear-gradient(0deg,#11100fe0 0%,#0a090617 26%,#08080736 100%);z-index:1} .refinado .hero-main-content{z-index:3} .refinado .pattern{opacity:.16} .refinado .decorativeText{font-size:clamp(82px,8.2vw,120px);-webkit-text-stroke:1.1px #f5ebd0b5;text-shadow:0 0 28px #dcad2c0c;letter-spacing:-4px;filter:drop-shadow(0 2px 5px #0004)} .refinado .decorativeText2{font-weight:700;color:#f5d568;background:linear-gradient(105deg,#fff0ae 5%,#f5cf57 48%,#e3ae33 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 7px #0009);font-size:clamp(31px,3.25vw,46px);letter-spacing:-1.1px} .refinado .hero-main-content p.text-base{color:#f3eee3;font-size:15px;line-height:1.8;text-shadow:0 2px 7px #000b} .hero-embers{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none;contain:strict} .hero-embers span{position:absolute;bottom:-12px;left:var(--x);width:var(--size);height:var(--size);border-radius:50%;background:#ffcf68;box-shadow:0 0 6px #f6a42b,0 0 12px #f2a02355;opacity:0;animation:ember-rise var(--duration) linear var(--delay) infinite} @keyframes ember-rise{0%{transform:translate3d(0,0,0);opacity:0}14%{opacity:.66}68%{opacity:.32}100%{transform:translate3d(var(--drift),-470px,0);opacity:0}} /* Buttons retain the vivid gold of the current site. */ .refinado .button-static,.refinado .button-install{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#f0cb59,#dfb63d 52%,#c99b28);border:1px solid #f3cf6d;color:#211806!important;box-shadow:inset 0 1px 0 #fff4c963,0 4px 18px #c7961524;font-weight:700;transition:transform .25s,box-shadow .25s,filter .25s} .refinado .button-login,.refinado .button-install{min-height:auto;padding:9px 16px;border-radius:4px;font-size:10px;line-height:15px;font-weight:700;letter-spacing:1.2px;gap:6px} .refinado .button-install{animation:pulse-glow 3s cubic-bezier(.4,0,.6,1) infinite} .refinado .button-static:before,.refinado .button-install:before{content:"";position:absolute;inset:-60% auto -60% -80%;width:45%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,#fff8dd85,transparent);pointer-events:none;transition:left .65s cubic-bezier(.2,.6,.4,1)} .refinado .button-static:hover,.refinado .button-install:hover{background:linear-gradient(115deg,#f9d96d,#e8bf43 58%,#d4a72e);filter:brightness(1.04);transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff4c98c,0 8px 26px #d9a32338} .refinado .button-static:hover:before,.refinado .button-install:hover:before,.refinado .button-static:focus-visible:before,.refinado .button-install:focus-visible:before{left:150%} .refinado .hero-register-button-wrap .button-static:before{animation:gold-sweep 8s ease-in-out 2s infinite} @keyframes gold-sweep{0%,68%{left:-80%}83%,100%{left:150%}} .refinado .button-login{background:#d4af3707;border-color:#d4af3759;color:#f3e5bd!important;transition:background .25s,box-shadow .25s,border-color .25s} .refinado .button-login:hover{background:#d4af3712;border-color:#f2ca50;box-shadow:0 0 18px #d4af3721} /* Existing circular server indicators, with a precise animated rim. */ .refinado .server-card{background:radial-gradient(ellipse at 50% 5%,#8e67221c,transparent 68%),#100e0be0;border-color:#d4af3740;box-shadow:inset 0 1px 0 #f9df8c12,0 10px 28px #0006;transition:border-color .3s,box-shadow .3s} .refinado .server-card:hover{border-color:#f2ca5080;box-shadow:0 0 24px #e1b4391c,0 10px 28px #0006} .refinado .server-orb-ring{border:1px solid #d4af3733;border-top-color:#f1ce6785;border-right-color:#d4af3759;animation:orbit-gold 20s linear infinite;box-shadow:0 0 12px #d4af370a} .refinado .server-orb-ring.ring-dashed{border-style:dashed;border-color:#d4af373d;animation:orbit-gold 34s linear infinite reverse} .refinado .server-orb-static{border-color:#f2ca5014} .refinado .server-orb-static.inner{border-color:#d4af371a} @keyframes orbit-gold{to{transform:rotate(360deg)}} .refinado .text-primary-rate{color:#f6d36b!important;text-shadow:0 0 16px #e7bd3545} .refinado .text-light-title{color:#eee9df} .refinado .server-card p{color:#f4eddb;opacity:.85} .refinado .server-status.online{color:#93ffc0;border-color:#6cf3a957;background:linear-gradient(180deg,#258a534d,#114a2c85);box-shadow:0 0 15px #41df8530,inset 0 1px 0 #96ffd91a} .refinado .server-status.online:before{content:"";width:5px;height:5px;border-radius:50%;background:#8dffb9;box-shadow:0 0 7px #5bfd9b;flex-shrink:0;margin-right:6px;animation:online-breathe 4s ease-in-out infinite} .refinado .server-status.offline{color:#ffabb1;border-color:#ee6c7952;background:linear-gradient(180deg,#872c3a4f,#47182080);box-shadow:0 0 12px #e15c7012} @keyframes online-breathe{50%{opacity:.55;box-shadow:0 0 3px #5bfd9b}} /* Original section order and imagery, with richer presentation. */ .refinado .topContent{background:url("/images/background-8.jpg") repeat -9px -561px!important} .refinado .title-container .subtitle,.refinado .middleContent .container_wiki>.flex-1>h2,.refinado .wiki h2{color:#f2d27b!important;font-weight:600!important;text-shadow:0 2px 18px #c48c1817;font-size:30px!important;letter-spacing:.55px} .refinado .carousel-description{color:#d1c5ac!important;font-size:14px!important} .refinado .mk-section-ornament{opacity:.95} .refinado .mk-section-ornament .diamond{background:#f2ca50;box-shadow:0 0 10px #f4c5484d} .refinado .mk-section-ornament .line{width:100px;background:linear-gradient(90deg,transparent,#c9a43f85,transparent)} .refinado .top_separator{opacity:1;background:linear-gradient(90deg,transparent,#d4af3740,transparent)} .refinado .middleContent{background:url("/images/bg_repeat_2.png") repeat 100%!important} .refinado .middleContent .call h4,.refinado .wiki-description{color:#e4d9c3!important;font-size:15px!important} .refinado .mk-content-perks .perk{color:#f0dfbb;border-color:#d4af373e;background:#d4af370d;transition:transform .25s,border-color .25s,background .25s} .refinado .mk-content-perks .perk:hover{transform:translateY(-2px);background:#d4af371a;border-color:#d4af3766} .refinado .mk-content-perks .perk i{color:#f2ca50} .refinado .middleContent .gifarea{border-color:#d4af3740;box-shadow:0 18px 45px #0005,0 0 30px #d4af370a;transition:border-color .35s,box-shadow .35s} .refinado .middleContent .gifarea:hover{border-color:#f2ca506b;box-shadow:0 20px 45px #0005,0 0 30px #d4af3717} .refinado .video-carousel-card,.refinado .wiki .boxWiki{position:relative;border-color:#d4af3745;transition:transform .32s cubic-bezier(.2,.65,.3,1),box-shadow .32s,border-color .32s;transform-style:preserve-3d} .refinado .carousel-thumb{filter:brightness(1) saturate(1.05);transition:transform .5s,filter .35s} .refinado .video-play-button{background:#17120bc9!important;color:#ffe18a!important;border-color:#f1ce6a90;box-shadow:0 0 15px #f2ca501a!important;transition:transform .3s,background .3s,color .3s,box-shadow .3s} .refinado .video-carousel-card:hover .video-play-button{background:#ebc24a!important;color:#231a09!important;box-shadow:0 0 24px #e6b42b5c!important;transform:translate(-50%,-50%) scale(1.1)} .refinado .video-platform-badge{color:#f4e2b6;border-color:#e4b94750;background:#15120de3} .refinado .modern-video-carousel .swiper-button-prev,.refinado .modern-video-carousel .swiper-button-next{background:#d4af370d!important;border-color:#d4af3740!important;color:#f2ca50!important;box-shadow:none!important;transition:background .25s,border-color .25s} .refinado .modern-video-carousel .swiper-button-prev:hover,.refinado .modern-video-carousel .swiper-button-next:hover{background:#d4af3724!important;border-color:#f2ca50!important} .refinado .modern-video-carousel .swiper-button-prev:after,.refinado .modern-video-carousel .swiper-button-next:after{color:#f5d574!important} .refinado .wiki .boxWiki h3{color:#fff1c6!important;font-weight:600} .refinado .wiki .boxWiki p{color:#e4d5b5} .fx-card-light{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;border-radius:inherit;background:radial-gradient(280px circle at var(--light-x,50%) var(--light-y,50%),#ffeab41f,transparent 65%);box-shadow:inset 0 0 0 1px #ffe4a52b;transition:opacity .3s} .fx-surface:hover>.fx-card-light{opacity:1} .refinado .discord-float{background:linear-gradient(120deg,#626fe1,#5864ce);border-color:#9da7ff78;box-shadow:0 5px 25px #5664de3d;transition:transform .25s,box-shadow .25s} .refinado .discord-float:hover{transform:translateY(-3px);box-shadow:0 8px 28px #6877f15c} .fx-reveal-pending{opacity:0;transform:translateY(16px)} .fx-reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.3,1)} .fx-paused .hero-embers span,.fx-paused .server-orb-ring,.fx-paused .server-status.online:before,.fx-paused .hero-register-button-wrap .button-static:before{animation-play-state:paused!important} @media(hover:hover) and (pointer:fine){.refinado .video-carousel-card:hover,.refinado .wiki .boxWiki:hover{transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:#f2ca5099;box-shadow:0 14px 32px #0006,0 0 22px #d4af3712}.refinado .video-carousel-card:hover .carousel-thumb{transform:scale(1.045);filter:brightness(1.08) saturate(1.08)}} @media(max-width:1100px){.refinado .hero-main-content p.text-base{font-size:14px}.refinado .hero-main-content{padding-top:48px;padding-bottom:48px}.refinado .decorativeText{font-size:83px}} @media(max-width:834px){.refinado .hero-video-overlay{background:linear-gradient(0deg,#13100fdd,#0b0e1675 90%)}.refinado .hero-main-video{transform:none}.refinado .hero-main-content p.text-base{font-size:14px;line-height:1.85}.refinado .hero-embers span:nth-child(n+7){display:none}.refinado .title-container .subtitle,.refinado .middleContent .container_wiki>.flex-1>h2,.refinado .wiki h2{font-size:24px!important}.refinado .middleContent .call h4,.refinado .wiki-description{font-size:14px!important}.refinado .server-status{font-size:9px!important}} @media(max-width:600px){.refinado .discord-float{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:12px;right:14px;bottom:14px}.refinado .discord-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.refinado .discord-float svg{margin:0;width:22px;height:22px}} @media(prefers-reduced-motion:reduce){.refinado *,.refinado *:before,.refinado *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-embers{display:none}.fx-reveal-pending{opacity:1;transform:none}.refinado .hero-main-video,.refinado .fx-surface:hover{transform:none!important}} /* One main-server showcase. The count comes from the saved public page. */ .refinado .hero-right.hero-server-showcase{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:0 1 326px;min-width:0;width:100%;max-width:326px;margin:0 0 0 auto!important;order:0;padding:0} .refinado .realm-card{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;width:100%;padding:20px 24px 18px;border:1px solid #e9cc7d38;border-radius:20px;background:radial-gradient(ellipse at 100% 0,#bc8b2714,transparent 65%),linear-gradient(140deg,#111913b8,#1715108c);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 12px 32px #0003,inset 0 1px 0 #fff4c910;color:#f5ecd2;font-family:"Segoe UI",Arial,sans-serif;transition:border-color .35s,box-shadow .35s} .refinado .realm-card:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0 70%,#65e7a00b,transparent 65%)} .refinado .realm-card:hover{border-color:#e9cc7d65;box-shadow:0 14px 35px #0004,0 0 24px #d7ac2c0c,inset 0 1px 0 #fff4c919} /* The shimmer stays on the contour, preserving the background and legibility. */ @supports (mask-composite:exclude) or (-webkit-mask-composite:xor){.realm-card:after{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;z-index:4;background:linear-gradient(115deg,transparent 32%,#d7c18520 43%,#fff1bc99 49%,#8ce9ba70 53%,transparent 64%);background-size:300% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:realm-contour 11s ease-in-out infinite}} .realm-card>.fx-card-light{background:radial-gradient(170px circle at var(--light-x,50%) var(--light-y,50%),#ffe6ae12,transparent 75%);box-shadow:none;transition:opacity .45s} .realm-header{display:flex;justify-content:space-between;align-items:center;gap:12px} .realm-kicker{font-size:9px;letter-spacing:2.6px;font-weight:700;color:#ceb67a} .realm-online{display:inline-flex;align-items:center;gap:8px;color:#a0f4be;font-size:10px;font-weight:600;white-space:nowrap} .realm-dot{position:relative;display:block;width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#85ffae;box-shadow:0 0 8px #5beb8f85} .realm-dot:after{content:"";position:absolute;inset:-4px;border:1px solid #79f5a763;border-radius:50%;animation:realm-beacon 4.8s ease-in-out infinite} .realm-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:18px} .refinado .realm-heading h2{margin:0;color:#fff3d2;font-family:Georgia,serif;font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.6px} .realm-identity-meta{display:flex;align-items:center;gap:11px;margin-top:8px} .realm-rate{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border:1px solid #dfbd5b40;border-radius:9px;background:#e8be3f09;color:#ebc96b;font-size:10px;font-weight:700;line-height:1.3;letter-spacing:.3px} .realm-population{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:right} .refinado .realm-count{display:block;font-family:"Intro","Trebuchet MS",sans-serif;font-size:30px;font-weight:400;font-synthesis:none;line-height:1.15;letter-spacing:.3px;font-variant-numeric:lining-nums tabular-nums;color:#f2e8cf;text-shadow:0 1px 8px #0004} .realm-label{font-size:8px;font-weight:500;letter-spacing:.9px;color:#ded8c8;line-height:1.5} .realm-signal{display:flex;align-items:flex-end;gap:3px;height:19px;flex:none} .realm-signal i{display:block;width:3px;border-radius:2px;background:linear-gradient(0deg,#51c88265,#9bf5b9);box-shadow:0 0 9px #6aed9a16;transform-origin:bottom;animation:realm-signal-light 4.8s ease-in-out infinite} .realm-signal i:nth-child(1){height:5px}.realm-signal i:nth-child(2){height:8px;animation-delay:.18s}.realm-signal i:nth-child(3){height:11px;animation-delay:.36s}.realm-signal i:nth-child(4){height:15px;animation-delay:.54s}.realm-signal i:nth-child(5){height:19px;animation-delay:.72s} .realm-rule{position:relative;height:1px;margin:17px 0 12px;overflow:hidden;background:linear-gradient(90deg,#d6bf782e,#d6bf781a,transparent)} .realm-footer{display:flex;justify-content:space-between;gap:12px;color:#d4ccba;font-size:10px;line-height:1.5} .realm-footer>span{display:inline-flex;gap:8px;align-items:center} .realm-footer i{font-size:11px;color:#d9bd78} .refinado .realm-caption{margin:0;color:#eadcc5a8;font:10px/1.6 "Segoe UI",Arial,sans-serif;letter-spacing:.2px;text-align:center;text-shadow:0 2px 8px #000} .realm-caption span{color:#e9d4a1} .fx-paused .realm-card:after,.fx-paused .realm-dot:after,.fx-paused .realm-signal i{animation-play-state:paused!important} @keyframes realm-contour{0%,12%{background-position:150% 50%;opacity:0}24%{opacity:.8}58%{opacity:.8}78%,100%{background-position:-50% 50%;opacity:0}} @keyframes realm-beacon{0%,100%{transform:scale(.8);opacity:.22}50%{transform:scale(1.2);opacity:.65}} @keyframes realm-signal-light{0%,100%{opacity:.6;transform:scaleY(.78)}50%{opacity:1;transform:scaleY(1)}} @media(max-width:1100px) and (min-width:835px){.refinado .hero-right.hero-server-showcase{flex-basis:306px}.refinado .realm-card{padding-inline:21px}} @media(max-width:834px){.refinado .hero-right.hero-server-showcase{flex:0 0 auto;width:100%;max-width:326px;order:0;margin:8px auto 0!important;gap:12px}} @media(max-width:380px){.refinado .realm-card{padding-inline:20px}.realm-body{gap:12px}.refinado .realm-heading h2{font-size:23px}} @media(prefers-reduced-motion:reduce){.realm-card:after,.realm-dot:after,.realm-signal i{animation:none!important}.realm-card:after{display:none}} /* Independent options; the approved page is not changed by this file. */ .refinado .hero-right.status-alternative{display:flex;flex-direction:column;justify-content:center;align-items:stretch;flex:0 1 336px;max-width:336px;min-width:0;width:100%;gap:12px;margin:0 0 0 auto!important;padding:0;order:0;font-family:"Segoe UI",Arial,sans-serif;color:#eee4cb} .refinado .status-alternative h2{font:400 24px/1.2 Georgia,serif;letter-spacing:-.4px;color:#fff0cb;margin:0} .status-eyebrow{display:block;font-size:8px;font-weight:600;letter-spacing:2.6px;color:#cbb885;line-height:1.4} .status-online{display:inline-flex;align-items:center;gap:7px;font-size:10px;line-height:1.5;white-space:nowrap;color:#a7f1c2;font-weight:500} .status-online>i{display:block;width:5px;height:5px;border-radius:50%;background:#8af0ae;box-shadow:0 0 8px #73e6a27a;animation:status-alt-breathe 4.5s ease-in-out infinite} .status-rate{display:inline-flex;padding:3px 6px;vertical-align:middle;border:1px solid #dac17b33;border-radius:5px;background:#ddb95608;color:#e6c877;font:600 9px/1 "Segoe UI",sans-serif;letter-spacing:.2px} .refinado .status-number{font:400 28px/1.15 "Intro","Trebuchet MS",sans-serif;font-variant-numeric:tabular-nums;font-synthesis:none;letter-spacing:.2px;color:#f6ecd4;white-space:nowrap} .status-small-label{font-size:9px;line-height:1.5;letter-spacing:.25px;color:#d2cbba} .refinado .status-footnote{font:10px/1.6 "Segoe UI",Arial,sans-serif;color:#dbcbaaaf;text-align:center;margin:0;text-shadow:0 1px 6px #000} .status-surface{position:relative;isolation:isolate;overflow:hidden} .status-surface:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(170px circle at var(--status-light-x,50%) var(--status-light-y,50%),#ffe9b414,transparent 75%);opacity:0;transition:opacity .4s} @media(hover:hover) and (pointer:fine){.status-surface:hover:after{opacity:1}} /* 01 — compact horizontal ribbon. */ .status-ribbon{border:1px solid #ddc48b30;border-radius:11px;background:linear-gradient(100deg,#141611b8,#17130e70);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 10px 28px #0002;padding:17px 21px 12px} .status-ribbon-accent{position:absolute;inset:16px auto 16px 0;width:2px;background:linear-gradient(0deg,transparent,#70dba580,transparent)} .status-ribbon-accent:after{content:"";position:absolute;inset:-45% 0 auto;height:45%;background:linear-gradient(0deg,transparent,#cdf8d2,transparent);animation:status-ribbon-trace 7s ease-in-out infinite} .status-ribbon-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center} .status-ribbon h2{margin-top:7px!important;display:flex;gap:8px;align-items:center} .status-ribbon-count{display:grid;justify-items:end;gap:3px;border-left:1px solid #dac17b24;padding-left:18px} .status-ribbon-count .status-online{font-size:9px} .status-ribbon-count .status-number{font-size:26px} .status-ribbon-count .status-small-label{font-size:8px} .status-ribbon-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:9px;border-top:1px solid #d6bf7819;color:#d5c9b2;font-size:9px;line-height:1.4} .status-ribbon-footer b{font-weight:400;color:#ba9e65;margin:0 7px} .status-mini-signal{display:flex;gap:3px;align-items:flex-end;height:11px} .status-mini-signal i{width:2px;border-radius:2px;background:#8cdbac;animation:status-alt-breathe 4s ease-in-out infinite} .status-mini-signal i:nth-child(1){height:3px}.status-mini-signal i:nth-child(2){height:6px;animation-delay:.2s}.status-mini-signal i:nth-child(3){height:9px;animation-delay:.4s}.status-mini-signal i:nth-child(4){height:11px;animation-delay:.6s} /* 02 — open composition, with no enclosing panel. */ .refinado .hero-right.status-alternative-2{flex-basis:282px;max-width:282px} .status-open{position:relative;isolation:isolate;padding:11px 18px;text-shadow:0 2px 8px #000b} .status-open:before{content:"";position:absolute;inset:-10px -18px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#0a0d0bb0,transparent 73%)} .status-open header{display:flex;align-items:center;gap:16px;margin-bottom:20px} .status-open-line{height:1px;flex:1;background:linear-gradient(90deg,#7fca9c55,transparent);position:relative;overflow:hidden} .status-open-line:after{content:"";position:absolute;inset:0 auto 0 -50%;width:50%;background:linear-gradient(90deg,transparent,#bdedc7,transparent);animation:status-open-trace 8s ease-in-out infinite} .status-open-title{display:flex;align-items:center;gap:10px;margin-top:5px} .refinado .status-open-title h2{font-size:26px} .status-open-count{display:flex;align-items:center;gap:12px;margin-top:18px;padding-left:1px} .status-open-players-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;color:#cdb77b;font-size:13px;border:1px solid #dac17b28;border-radius:50%;background:#0b100b35} .status-open-count .status-small-label{line-height:1.35} .status-open footer{display:flex;align-items:center;gap:12px;margin-top:19px;color:#ddd0b8;font-size:10px} .status-open-diamond{width:3px;height:3px;background:#c9ac69;transform:rotate(45deg)} .refinado .status-open .status-footnote{margin-top:14px;text-align:left;font-size:9px} /* 03 — small heraldic emblem, with restrained edge lighting. */ .status-emblem{padding:18px 21px 13px;border-top:1px solid #e1c48230;border-bottom:1px solid #e1c48230;border-radius:4px;background:linear-gradient(90deg,#1315109c,#13151072 70%,#13151026);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .status-emblem-main{display:flex;align-items:center;gap:19px} .status-crest{position:relative;width:65px;height:82px;flex:0 0 65px;filter:drop-shadow(0 3px 11px #0006)} .status-crest svg{width:100%;height:100%;overflow:visible} .status-crest-fill{fill:#1d211947} .status-crest-outline{stroke:#c8aa663d;stroke-width:1} .status-crest-inner{stroke:#d6b97726;stroke-width:.7} .status-crest-glint{stroke:#f0d489;stroke-width:1.2;stroke-dasharray:14 86;animation:status-crest-trace 12s linear infinite} .status-crest-castle{stroke:#d4be85;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round} .status-crest-spark{fill:#e8d393;opacity:.7} .status-crest-dot{position:absolute;width:5px;height:5px;bottom:4px;left:calc(50% - 2px);border-radius:50%;background:#95eab2;box-shadow:0 0 7px #8bf2b28c;animation:status-alt-breathe 4.5s ease-in-out infinite} .status-emblem-info{flex:1;min-width:0} .status-emblem-info .status-online{font-size:9px} .status-emblem-info .status-eyebrow{margin-top:9px;font-size:7px;letter-spacing:2px} .refinado .status-emblem-info h2{display:flex;align-items:center;gap:9px;margin-top:4px;font-size:23px} .status-emblem-count{display:flex;align-items:center;gap:9px;margin-top:8px} .status-emblem-count .status-number{font-size:26px} .status-emblem-count .status-small-label{font-size:8px;max-width:52px;line-height:1.3} .status-emblem footer{display:flex;justify-content:space-between;gap:12px;margin-top:15px;padding-top:10px;border-top:1px solid #d4bd7d19;font-size:9px;color:#d2c5ae} .status-emblem footer i{color:#baa677;margin-right:5px} /* 04 — the emblem finish with the current two-column information layout. */ .status-emblem-arranged{padding:20px 21px 15px} .status-emblem-arranged .realm-body{gap:12px;margin-top:18px} .status-emblem-arranged .status-online{font-size:9px} .status-emblem-identity{display:flex;align-items:center;gap:10px;min-width:0} .status-emblem-identity .status-crest{width:38px;height:50px;flex:0 0 38px} .status-emblem-identity .status-crest-dot{width:4px;height:4px;bottom:1px} .refinado .status-emblem-identity h2{font-size:23px;white-space:nowrap} .status-emblem-identity .realm-identity-meta{gap:10px;margin-top:8px} .status-emblem-arranged .realm-population{gap:5px} .status-emblem-arranged .realm-label{font-size:7px;letter-spacing:.5px;white-space:nowrap} .status-emblem-arranged footer{margin-top:17px;padding-top:12px} /* Comparison controls only; the standalone options have no toolbar. */ .comparison-bar{position:relative;z-index:10002;background:#121714;color:#eee6d3;border-bottom:1px solid #d4bd7d30;font:12px/1.4 "Segoe UI",Arial,sans-serif;padding:13px 24px} .comparison-bar-inner{display:flex;gap:24px;align-items:center;justify-content:space-between;max-width:1400px;margin:auto} .comparison-bar-title{display:flex;flex-direction:column;gap:3px}.comparison-bar-title strong{font-size:12px;font-weight:600;color:#f0dfb1}.comparison-bar-title span{font-size:10px;color:#b1b4a8} .comparison-buttons{display:flex;gap:6px;flex-wrap:wrap} .comparison-buttons button{border:1px solid #d7c2842c;border-radius:6px;color:#d3cbbb;background:#ffffff04;padding:8px 12px;font:600 11px/1.2 "Segoe UI",Arial,sans-serif;transition:background .2s,color .2s,border-color .2s} .comparison-buttons button[aria-pressed=true]{background:#d8ba7130;border-color:#e4c57c90;color:#ffe6a1} .comparison-buttons button:hover{border-color:#d9c48888}.comparison-buttons button:focus-visible,.comparison-open:focus-visible{outline:2px solid #ebce8a;outline-offset:3px} .comparison-open{color:#dfcd9c!important;white-space:nowrap;font-size:11px;text-decoration:none!important} .comparison-open span{margin-left:7px} .fx-paused .status-online>i,.fx-paused .status-ribbon-accent:after,.fx-paused .status-open-line:after,.fx-paused .status-mini-signal i,.fx-paused .status-crest-glint,.fx-paused .status-crest-dot{animation-play-state:paused!important} @keyframes status-alt-breathe{0%,100%{opacity:.6}50%{opacity:1}} @keyframes status-ribbon-trace{0%,15%{top:-45%;opacity:0}30%{opacity:.8}70%,100%{top:110%;opacity:0}} @keyframes status-open-trace{0%,20%{left:-50%;opacity:0}35%{opacity:.8}75%,100%{left:110%;opacity:0}} @keyframes status-crest-trace{to{stroke-dashoffset:-100}} @media(max-width:1100px) and (min-width:835px){.refinado .hero-right.status-alternative{flex-basis:308px;max-width:308px}.status-ribbon{padding-inline:17px}.status-ribbon-main{gap:10px}.status-ribbon-count{padding-left:12px}.refinado .status-ribbon h2{font-size:22px;gap:6px}.status-emblem{padding-inline:17px}.status-emblem-main{gap:13px}.refinado .status-emblem-info h2{font-size:21px;gap:7px}.refinado .hero-right.status-alternative-2{flex-basis:268px;max-width:268px}} @media(max-width:834px){.refinado .hero-right.status-alternative{flex:0 0 auto;order:0;margin:8px auto 0!important;max-width:336px;width:100%}.refinado .hero-right.status-alternative-2{max-width:282px}.comparison-bar{padding:11px 14px}.comparison-bar-inner{gap:10px;flex-wrap:wrap;justify-content:center}.comparison-bar-title{width:100%;text-align:center}.comparison-bar-title span{display:none}.comparison-buttons{justify-content:center}.comparison-buttons button{padding:7px 9px;font-size:10px}.comparison-open{font-size:10px}} @media(max-width:380px){.status-ribbon{padding-inline:17px}.status-ribbon-main{gap:10px}.refinado .status-ribbon h2{font-size:21px;gap:5px}.status-ribbon-count{padding-left:11px}.status-emblem{padding-inline:16px}.status-emblem-main{gap:13px}.status-crest{width:58px;flex-basis:58px}.refinado .status-emblem-info h2{font-size:21px;gap:7px}} @media(max-width:1100px) and (min-width:835px),(max-width:380px){.status-emblem-arranged .realm-body{gap:10px}.status-emblem-identity{gap:8px}.status-emblem-identity .status-crest{width:34px;flex-basis:34px;height:46px}.refinado .status-emblem-identity h2{font-size:21px}.status-emblem-arranged .status-number{font-size:26px}} @media(prefers-reduced-motion:reduce){.status-alternative *,.status-alternative *:before,.status-alternative *:after{animation:none!important;transition:none!important}.status-ribbon-accent:after,.status-open-line:after{display:none}.status-crest-glint{stroke-dasharray:none;opacity:.35}.status-surface:after{display:none}} /* Mobile behavior from pages/index.php and layout.php, scoped to option 4. */ @media(max-width:834px){ .refinado.mobile-original .hero-main-section{height:auto!important;min-height:600px!important;max-height:none!important} .refinado.mobile-original .hero-main-video{object-position:center 25%;filter:none;transform:none;transition:none} .refinado.mobile-original .hero-video-overlay{background:radial-gradient(ellipse at top,rgba(212,175,55,.08),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.42),rgba(10,8,5,.38))} .refinado.mobile-original .hero-main-content{flex-direction:column!important;align-items:center;margin-top:0;padding:28px 20px 36px!important;gap:30px} .refinado.mobile-original .hero-main-content>.flex-col{width:100%;max-width:620px;flex:0 0 auto;margin:0!important;padding:0!important} .refinado.mobile-original .hero-right.status-alternative{order:-1;flex:0 0 auto;width:100%;max-width:326px;margin:0 auto!important;gap:9px} .refinado.mobile-original .status-emblem-arranged{padding:16px 18px 13px} .refinado.mobile-original .status-emblem-arranged .realm-body{margin-top:14px} .refinado.mobile-original .status-emblem-arranged footer{margin-top:14px;padding-top:10px} .refinado.mobile-original .status-footnote{font-size:9px} .refinado.mobile-original .top-relative{width:100%;text-align:center} .refinado.mobile-original .decorativeText{position:relative!important;top:auto!important;left:auto;right:auto;font-size:40px!important;line-height:1.1;letter-spacing:-1.5px;padding:0!important;margin:0!important} .refinado.mobile-original .decorativeText2{font-family:'TCAdministerRR-Bold',Georgia,serif;font-size:20px!important;line-height:1.3;letter-spacing:0;text-align:center;padding:0!important;margin:7px 0 0!important} .refinado.mobile-original .hero-main-content p.text-base{width:100%;max-width:100%;padding:0;margin:20px 0 0!important;font-size:14px;line-height:1.65;text-align:justify} .refinado.mobile-original .hero-register-button-wrap{justify-content:center;margin-top:28px} .refinado.mobile-original .hero-embers{display:none} .refinado.mobile-original .modern-video-carousel{padding:0 44px} .refinado.mobile-original .modern-video-carousel .swiper-wrapper{gap:20px} .refinado.mobile-original .modern-video-carousel .swiper-slide{flex:0 0 calc((100% - 20px)/2);max-width:calc((100% - 20px)/2)} .refinado.mobile-original .mobile-header{display:flex;align-items:center;justify-content:space-between} .refinado.mobile-original .menu-links,.refinado.mobile-original .logo-link,.refinado.mobile-original .button-install{display:none!important} .refinado.mobile-original .menu-items{flex-direction:column;align-items:flex-start;gap:8px} .refinado.mobile-original .server-install{order:2;margin-right:auto;margin-left:-15px} .refinado.mobile-original .server-install-actions{display:flex!important;align-items:center;justify-content:flex-start;gap:10px} .refinado.mobile-original .hamburger{display:inline-flex;align-items:center;justify-content:center} .refinado.mobile-original .button-login{padding:8px 12px;font-size:10px} .refinado.mobile-original .topbar-container{min-height:44px} .refinado.mobile-original .language-switcher img{width:24px;height:24px} .refinado.mobile-original .menu-mobile{background:radial-gradient(circle at top right,rgba(212,175,55,.14),transparent 38%),linear-gradient(180deg,rgba(31,30,28,.98),rgba(11,9,6,.98));border-left-color:rgba(212,175,55,.22)} .refinado.mobile-original .menu-mobile .wiki__nav-item-icon i{font-family:'Font Awesome 5 Free';font-weight:900;font-style:normal} .refinado.mobile-original .menu-mobile .ra-castle-emblem:before{content:'\f015'} .refinado.mobile-original .menu-mobile .ra-scroll-unfurled:before{content:'\f1ea'} .refinado.mobile-original .menu-mobile .ra-book:before{content:'\f02d'} .refinado.mobile-original .menu-mobile .ra-load:before{content:'\f019'} .refinado.mobile-original .menu-mobile .ra-burning-book:before{content:'\f234'} .refinado.mobile-original .menu-mobile .ra-bat-sword:before{content:'\f091'} } @media(max-width:767px){ .refinado.mobile-original .modern-video-carousel .swiper-slide{flex-basis:100%;max-width:100%} } @media(max-width:480px){ .refinado.mobile-original .modern-video-carousel{padding:0 38px} .refinado.mobile-original .modern-video-carousel .swiper-button-prev,.refinado.mobile-original .modern-video-carousel .swiper-button-next{width:26px!important;height:42px!important} } /* The server strip replaces the large AMERIKA word in the left column. */ .refinado.status-layout-5 .hero-main-content>.flex-col{flex:0 1 650px;width:100%;max-width:650px} .refinado.status-layout-5 .decorativeText{display:none} .refinado.status-layout-5 .decorativeText2{margin:0!important;text-align:left} .status-inline-showcase{width:100%;margin:0 0 25px;font-family:'Segoe UI',Arial,sans-serif;text-align:left} .status-inline-bar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center;gap:23px;padding:14px 22px;border-radius:4px;background:linear-gradient(90deg,#131510a8,#1315106e 70%,#13151030)} .status-inline-identity{display:flex;align-items:center;gap:14px;min-width:0} .status-inline-identity .status-crest{width:39px;height:49px;flex:0 0 39px} .status-inline-identity .status-crest-dot{width:4px;height:4px;bottom:1px} .status-inline-server{display:flex;flex-direction:column;gap:9px} .status-inline-server .status-online{font-size:11px} .status-inline-rate{display:flex;align-items:center;gap:12px} .status-inline-population{display:flex;align-items:center;gap:11px;padding-left:23px;border-left:1px solid #dac17b25} .refinado .status-inline-population .status-number{font-size:28px} .status-inline-population .status-small-label{font-size:9px;line-height:1.4;max-width:58px} .status-inline-history{display:flex;flex-direction:column;gap:9px;color:#d2c5ae;font-size:9px;line-height:1.3;white-space:nowrap} .status-inline-history span{display:flex;align-items:center;gap:7px} .status-inline-history i{color:#baa677;width:12px;text-align:center} @media(min-width:835px) and (max-width:1100px){.refinado.status-layout-5 .hero-main-content>.flex-col{max-width:55%}.status-inline-bar{grid-template-columns:minmax(0,1fr) auto;gap:13px;padding:13px 16px}.status-inline-history{grid-column:1/-1;flex-direction:row;justify-content:space-between;border-top:1px solid #dac17b20;padding-top:9px;gap:12px}.status-inline-population{padding-left:13px}.status-inline-identity{gap:10px}.status-inline-server .status-online{font-size:10px}.refinado.status-layout-5 .decorativeText2{font-size:32px}} @media(max-width:834px){ .refinado.mobile-original.status-layout-5 .hero-main-content{justify-content:flex-start;gap:0} .refinado.mobile-original.status-layout-5 .hero-main-content>.flex-col{flex:0 0 auto;max-width:620px} .refinado.mobile-original.status-layout-5 .decorativeText2{text-align:center;margin:0!important} .status-inline-showcase{margin-bottom:29px} .status-inline-bar{padding:13px 16px;gap:16px} .status-inline-server .status-online{font-size:10px} .status-inline-population{padding-left:16px} } @media(max-width:560px){ .status-inline-bar{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 14px 10px} .status-inline-identity{gap:10px} .status-inline-identity .status-crest{width:33px;height:43px;flex-basis:33px} .status-inline-server{gap:7px} .status-inline-server .status-online{font-size:9px;gap:6px} .status-inline-population{flex-direction:column;align-items:flex-end;gap:3px;padding-left:12px} .refinado .status-inline-population .status-number{font-size:26px} .status-inline-population .status-small-label{max-width:none;font-size:8px} .status-inline-history{grid-column:1/-1;flex-direction:row;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid #dac17b20;font-size:8px} } .baium-energy-plane{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0) scale(1.025);transition:transform .7s cubic-bezier(.2,.65,.3,1)} .baium-energy-plane svg{position:absolute;overflow:visible;pointer-events:none} body:not(.status-layout-5) .baium-energy-plane{display:none} .baium-energy-glow{mix-blend-mode:screen} @media(max-width:834px){.baium-energy-plane{transform:none;transition:none}} @media(prefers-reduced-motion:reduce){.baium-energy-plane{display:none!important;transform:none;transition:none}} /* Shared footer copied from layout.php */ .amerika-footer { position: relative; border-top: 1px solid rgba(212, 175, 55, 0.22); background: radial-gradient(ellipse at top, rgba(212, 175, 55, 0.06), transparent 60%), linear-gradient(180deg, rgba(20, 16, 10, 0.55) 0%, rgba(10, 8, 5, 0.92) 100%) !important; font-family: 'Space Grotesk', Arial, sans-serif; color: rgba(245, 236, 210, 0.78); } .amerika-footer-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; } .amerika-footer-grid { display: grid; grid-template-columns: minmax(460px, 1fr) auto; align-items: start; gap: 80px; padding: 64px 0; } .amerika-footer-brand .brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; text-decoration: none !important; } .amerika-footer-logo { display: block; width: auto; max-height: 48px; filter: drop-shadow(0 4px 14px rgba(212, 175, 55, 0.25)); } .amerika-footer-brand p { max-width: 520px; margin-bottom: 16px; font-family: 'Space Grotesk', sans-serif !important; font-size: 14px; line-height: 1.7; color: rgba(245, 236, 210, 0.65); } .amerika-footer-socials { display: flex; gap: 8px; } .amerika-footer-social { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: rgba(245, 236, 210, 0.62) !important; font-size: 14px; text-decoration: none !important; transition: all 0.2s ease; } .amerika-footer-social:hover { border-color: rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.08); box-shadow: 0 0 14px rgba(212, 175, 55, 0.18); color: var(--mk-gold-bright) !important; } .amerika-footer-links { display: grid; grid-template-columns: repeat(3, 140px); justify-content: end; gap: 40px; } footer.amerika-footer .amerika-footer-col h4, .amerika-footer .amerika-footer-col h4 { margin-bottom: 14px !important; font-family: 'Cinzel', serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #f2ca50 !important; text-shadow: 0 0 10px rgba(242, 202, 80, 0.22) !important; } .amerika-footer-col ul { margin: 0; padding: 0; list-style: none; } .amerika-footer-col li { margin-bottom: 10px; } .amerika-footer-col a { font-family: 'Space Grotesk', sans-serif !important; font-size: 13px; color: rgba(245, 236, 210, 0.62) !important; text-decoration: none !important; transition: color 0.2s ease, text-shadow 0.2s ease; } .amerika-footer-col a:hover { color: var(--mk-gold-bright) !important; text-shadow: 0 0 10px rgba(242, 202, 80, 0.35); } .amerika-footer-bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 24px 0; border-top: 1px solid rgba(212, 175, 55, 0.18); background: linear-gradient(180deg, rgba(13, 10, 6, 0.96) 0%, rgba(10, 8, 5, 1) 100%) !important; text-align: left; } .amerika-footer-bottom p { margin: 0; font-family: 'Space Grotesk', sans-serif !important; font-size: 12px; letter-spacing: 0.04em; color: rgba(245, 236, 210, 0.55); } @media (max-width: 1023px) { .amerika-footer-grid { grid-template-columns: 1fr; gap: 40px; } .amerika-footer-links { grid-template-columns: repeat(3, 1fr); justify-content: start; gap: 24px; } .amerika-footer-brand p { max-width: 100%; } .amerika-footer-bottom { flex-direction: column; } } @media (max-width: 639px) { .amerika-footer-grid { padding: 48px 0; } .amerika-footer-links { grid-template-columns: 1fr; gap: 24px; } .amerika-footer-socials { justify-content: center; } .amerika-footer-bottom { flex-direction: column; text-align: center; } } .am-page .page{padding:0!important;max-width:none!important}.am-page article{min-height:0!important}.am-page main{display:block}.am-flash{padding:16px;margin-bottom:20px;border:1px solid #bd9c60;color:#ecd4a1;background:#30261e;border-radius:4px}.am-flash-error{border-color:#bc7767;color:#e3aca1}.am-page .rk-total:empty{display:none} .am-page .sg-owner img,.am-page .sg-table img{max-width:24px;max-height:16px;margin-right:6px;vertical-align:middle}.am-page .sg-territory img{width:23px;height:32px;object-fit:contain;margin:0 3px}.am-page .sg-territory .csg-flags{display:flex;flex-wrap:wrap;gap:4px} .am-video-modal{position:fixed;inset:0;margin:auto;width:min(500px,calc(100vw - 28px));height:min(820px,calc(100dvh - 32px));padding:40px 8px 8px;background:#19171c;border:1px solid #947749;border-radius:6px}.am-video-modal::backdrop{background:#000c}.am-video-modal iframe{width:100%;height:100%;border:0}.am-video-modal>button{position:absolute;right:12px;top:3px;color:#dfc18c;background:transparent;border:0;font-size:28px} #gallery-preview #gl-pagination a,#gallery-preview #gl-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;margin:3px;padding:5px 9px;border:1px solid #9b7c4555;color:#cdb47b}#gallery-preview #gl-pagination .current{background:#8e703333} #news-preview .nw-reading-layout.nw-reading-single{grid-template-columns:minmax(0,1fr)} #rankings-preview .rk-class td{padding:15px 21px;background:#b8964920;color:#dfc28a;font-weight:600;letter-spacing:.5px} #news-preview .nw-winners .nw-related-item{display:block;padding:19px 22px;border-bottom:1px solid #b99b6b33}#news-preview .nw-winners .nw-related-item h3{font-size:14px;line-height:1.6}