/* FREETOPLAY // ORBITAL UI 2027 — layered visual system */
:root{--ft-bg:#080b0a;--ft-panel:#101613;--ft-panel-2:#141c17;--ft-line:rgba(194,255,66,.16);--ft-lime:#c2ff42;--ft-lime-2:#a5e92b;--ft-text:#f4f7f1;--ft-muted:#9ba69d;--ft-radius:20px;--ft-shadow:0 22px 70px rgba(0,0,0,.35)}
html{scroll-behavior:smooth;scroll-padding-top:100px;background:var(--ft-bg)}
body{background:radial-gradient(ellipse at 80% -10%,rgba(194,255,66,.09),transparent 38%),radial-gradient(ellipse at 0% 36%,rgba(44,90,57,.16),transparent 34%),var(--ft-bg)!important;color:var(--ft-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;overflow-x:clip}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 85%)}
::selection{background:var(--ft-lime);color:#10150d}
a{color:inherit;transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease}
button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;height:auto}
.navbar{position:sticky!important;top:12px!important;z-index:1000!important;width:min(1320px,calc(100% - 32px))!important;margin:12px auto 0!important;padding:12px 16px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:18px!important;background:rgba(10,14,11,.82)!important;backdrop-filter:blur(22px) saturate(145%);box-shadow:0 12px 45px rgba(0,0,0,.25)}
.logo-box{gap:12px!important}.logo-icon{font-size:0!important;display:block!important;width:146px!important;height:42px!important;flex:0 0 146px;background:url('../freetoplay.png') center/contain no-repeat!important;border-radius:0!important;box-shadow:none!important}.logo-text strong{letter-spacing:.12em!important;font-size:14px!important}.logo-text span{color:var(--ft-muted)!important;font-size:11px!important;letter-spacing:.03em}
.nav-links{gap:5px!important}.nav-links>a{padding:9px 12px!important;border-radius:10px!important;color:#c4cdc5!important;font-size:13px!important;font-weight:650!important}.nav-links>a:hover,.nav-links>a:focus-visible{background:rgba(194,255,66,.09)!important;color:var(--ft-lime)!important;transform:translateY(-1px)}.nav-links .admin-panel-btn,.nav-links .nav-discord,.nav-links .nav-club{border:1px solid var(--ft-line)!important;color:var(--ft-lime)!important;background:rgba(194,255,66,.07)!important}
.online-pill{border:1px solid rgba(194,255,66,.2)!important;background:rgba(194,255,66,.06)!important;color:#d8e5d7!important;border-radius:999px!important;padding:7px 11px!important;font-size:11px!important}.online-pill .dot,.green-dot,.hero-proof-dot{box-shadow:0 0 0 4px rgba(194,255,66,.1);background:var(--ft-lime)!important}
.hero{position:relative!important;width:min(1240px,calc(100% - 36px))!important;margin:54px auto 36px!important;padding:clamp(28px,5vw,70px)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:30px!important;overflow:hidden;background:linear-gradient(120deg,rgba(20,29,22,.96),rgba(10,14,11,.83))!important;box-shadow:var(--ft-shadow)}.hero:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(var(--ft-lime),transparent 85%);z-index:0}.hero:after{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-210px;border-radius:50%;border:1px solid rgba(194,255,66,.13);box-shadow:0 0 0 45px rgba(194,255,66,.025),0 0 0 90px rgba(194,255,66,.018);pointer-events:none}.hero-content,.hero-middle{position:relative;z-index:1}.hero h1,.hero-title{letter-spacing:-.055em!important;line-height:1.03!important;font-weight:850!important}.hero h1 strong,.hero h1 span,.section-title span{color:var(--ft-lime)!important}.hero p{color:#aeb9b0!important;max-width:700px}.hero-logo{max-width:min(420px,85%)!important;filter:drop-shadow(0 12px 35px rgba(0,0,0,.35))}
.buttons a,.btn,button[type=submit],input[type=submit]{border-radius:12px!important;font-weight:750!important;transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important}.btn-primary,.buttons .btn:first-child,.nav-discord{background:var(--ft-lime)!important;color:#11170b!important;border:1px solid var(--ft-lime)!important;box-shadow:0 8px 25px rgba(194,255,66,.12)}.btn-primary:hover,.buttons a:hover,.btn:hover,button[type=submit]:hover,input[type=submit]:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.section{width:min(1240px,calc(100% - 36px))!important;margin:42px auto!important;padding:clamp(22px,3.5vw,42px)!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(17,23,19,.82),rgba(11,15,12,.9))!important;box-shadow:0 15px 55px rgba(0,0,0,.12)}.section-title{font-size:clamp(25px,3vw,38px)!important;letter-spacing:-.04em!important;font-weight:820!important}.section-desc{color:var(--ft-muted)!important;max-width:760px}
.server-grid,.admin-grid,.ft26-hub-grid,.club-update-grid{gap:18px!important}.server-card,.card,.ft26-hub-card,.nl-step,.changelog-card,.discord-box,.discord-panel,.admin-card,.club-update-item{background:linear-gradient(150deg,rgba(25,34,28,.95),rgba(14,19,16,.96))!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:18px!important;box-shadow:0 10px 34px rgba(0,0,0,.18)!important;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;overflow:hidden}.server-card:hover,.card:hover,.ft26-hub-card:hover,.nl-step:hover,.changelog-card:hover,.admin-card:hover{transform:translateY(-4px);border-color:rgba(194,255,66,.38)!important;box-shadow:0 18px 44px rgba(0,0,0,.28)!important}.server-card h2,.server-card h3,.card h2,.card h3{letter-spacing:-.025em}.badge,.ft26-hub-tag,.nl-kicker,.ft26-eyebrow{border-radius:999px!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-size:10px!important;font-weight:800!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{max-width:100%;background:#0a100c!important;color:var(--ft-text)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:11px!important;padding:11px 13px!important;outline:none;box-shadow:none!important}input:focus,select:focus,textarea:focus{border-color:rgba(194,255,66,.7)!important;box-shadow:0 0 0 3px rgba(194,255,66,.1)!important}label{color:#cbd4cc}table{width:100%;border-collapse:separate!important;border-spacing:0!important;border-radius:14px;overflow:hidden}th{background:rgba(194,255,66,.08)!important;color:#e8f4dc!important;font-size:12px;text-transform:uppercase;letter-spacing:.06em}td,th{padding:12px 14px!important;border-bottom:1px solid rgba(255,255,255,.07)!important}tr:hover td{background:rgba(255,255,255,.025)}
.admin-container,.admin-wrap,.club-container,.club-wrap,.container,.page-container{max-width:1240px!important;width:calc(100% - 36px)!important;margin-left:auto!important;margin-right:auto!important}.admin-header,.club-header,.panel-header{border-radius:20px!important;border:1px solid rgba(255,255,255,.09)!important;background:linear-gradient(120deg,#151e17,#0c110e)!important;padding:24px!important}.admin-nav a,.tabs a,.tab-link{border-radius:10px!important}.mobile-menu{background:#0d130f!important;border-left:1px solid var(--ft-line)!important;box-shadow:-20px 0 60px rgba(0,0,0,.4)!important}.mobile-menu a{border-radius:10px!important}.mobile-menu-btn,.mobile-menu-close{border-radius:10px!important;border:1px solid var(--ft-line)!important;color:var(--ft-lime)!important;background:rgba(194,255,66,.08)!important}
footer,.footer{border-top:1px solid rgba(255,255,255,.08)!important;color:var(--ft-muted)!important}
/* Loading screen */
#ft-orbital-loader{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;background:#070a08;opacity:1;visibility:visible;transition:opacity .45s ease,visibility .45s ease}#ft-orbital-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}#ft-orbital-loader .ft-loader-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(194,255,66,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(194,255,66,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at center,black,transparent 70%)}#ft-orbital-loader .ft-loader-core{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;width:min(330px,80vw);text-align:center}#ft-orbital-loader img{width:245px;max-width:75vw;filter:drop-shadow(0 0 26px rgba(194,255,66,.14));animation:ft-logo-breathe 1.7s ease-in-out infinite}#ft-orbital-loader .ft-loader-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#a5b29f;font-weight:800}#ft-orbital-loader .ft-loader-track{height:3px;width:100%;overflow:hidden;border-radius:99px;background:#202820}#ft-orbital-loader .ft-loader-bar{display:block;height:100%;width:35%;background:var(--ft-lime);box-shadow:0 0 20px rgba(194,255,66,.55);animation:ft-loader-run 1.15s ease-in-out infinite alternate}#ft-orbital-loader .ft-loader-version{color:#667267;font-size:10px;letter-spacing:.12em}@keyframes ft-loader-run{from{transform:translateX(-10%);width:22%}to{transform:translateX(270%);width:48%}}@keyframes ft-logo-breathe{0%,100%{transform:translateY(0);opacity:.88}50%{transform:translateY(-5px);opacity:1}}
.ft-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}.ft-reveal.ft-visible{opacity:1;transform:none}.ft-back-top{position:fixed;right:22px;bottom:22px;z-index:500;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;border:1px solid var(--ft-line);background:rgba(12,18,13,.88);color:var(--ft-lime);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s}.ft-back-top.is-visible{opacity:1;pointer-events:auto;transform:none}.ft-back-top:hover{background:var(--ft-lime);color:#11170b}
@media(max-width:1000px){.navbar{width:calc(100% - 22px)!important;top:8px!important;margin-top:8px!important}.nav-links{gap:2px!important}.nav-links>a{padding:8px 9px!important;font-size:12px!important}.hero{margin-top:28px!important}}
@media(max-width:760px){.navbar{min-height:62px!important;padding:9px 12px!important;border-radius:15px!important}.logo-icon{width:120px!important;height:36px!important;flex-basis:120px}.logo-text{display:none!important}.hero{width:calc(100% - 22px)!important;margin:22px auto!important;padding:28px 22px!important;border-radius:22px!important}.hero h1,.hero-title{font-size:clamp(34px,10vw,52px)!important}.section{width:calc(100% - 22px)!important;margin:22px auto!important;padding:22px 16px!important;border-radius:20px!important}.section-title{font-size:27px!important}.server-grid,.admin-grid,.ft26-hub-grid,.club-update-grid{grid-template-columns:1fr!important}.card,.server-card,.ft26-hub-card{min-width:0!important}.buttons{flex-wrap:wrap!important}.buttons a,.buttons .btn{width:100%;text-align:center}.admin-container,.admin-wrap,.club-container,.club-wrap,.container,.page-container{width:calc(100% - 22px)!important}.table-wrap,.table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{min-width:560px}.ft-back-top{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.ft-reveal{opacity:1;transform:none}#ft-orbital-loader img{animation:none}}


/* NAVBAR HOTFIX — prevent logo, tagline and navigation collisions */
.navbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  column-gap:18px!important;
  row-gap:10px!important;
  min-height:68px!important;
  height:auto!important;
  box-sizing:border-box!important;
}
.navbar .logo-box{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  min-width:190px!important;
  max-width:240px!important;
  width:auto!important;
  gap:10px!important;
  z-index:2!important;
}
.navbar .logo-icon{
  flex:0 0 46px!important;
  width:46px!important;
  min-width:46px!important;
  height:38px!important;
  background-size:contain!important;
}
.navbar .logo-text{
  position:static!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  max-width:165px!important;
  overflow:visible!important;
  line-height:1.2!important;
}
.navbar .logo-text strong{
  display:block!important;
  white-space:nowrap!important;
  font-size:clamp(12px,1vw,16px)!important;
  letter-spacing:.09em!important;
  line-height:1.2!important;
}
.navbar .logo-text span{
  display:block!important;
  white-space:normal!important;
  font-size:10px!important;
  line-height:1.25!important;
}
.navbar .nav-links{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex:1 1 700px!important;
  min-width:0!important;
  width:auto!important;
  max-width:100%!important;
  flex-wrap:wrap!important;
  gap:4px!important;
  overflow:visible!important;
}
.navbar .online-pill{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  flex:0 1 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  white-space:nowrap!important;
  margin:0 3px 0 0!important;
  max-width:100%!important;
  font-size:11px!important;
  line-height:1.2!important;
  padding:8px 10px!important;
}
.navbar .nav-links>a{
  position:relative!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  padding:8px 9px!important;
  font-size:12px!important;
  line-height:1.2!important;
  margin:0!important;
}
@media(max-width:1100px){
  .navbar{column-gap:12px!important}
  .navbar .logo-box{min-width:175px!important}
  .navbar .nav-links{flex-basis:600px!important;gap:2px!important}
  .navbar .nav-links>a{padding:7px 7px!important;font-size:11px!important}
}
@media(max-width:760px){
  .navbar{
    display:flex!important;
    flex-wrap:nowrap!important;
    min-height:60px!important;
    padding:9px 12px!important;
    column-gap:10px!important;
  }
  .navbar .logo-box{min-width:0!important;max-width:calc(100% - 56px)!important}
  .navbar .logo-icon{flex-basis:38px!important;width:38px!important;min-width:38px!important;height:34px!important}
  .navbar .logo-text{max-width:180px!important}
  .navbar .logo-text strong{font-size:13px!important}
  .navbar .logo-text span{font-size:9px!important}
  .navbar .nav-links{display:none!important}
  .navbar .mobile-menu-btn{display:flex!important;flex:0 0 42px!important;margin-left:auto!important;position:relative!important;z-index:5!important}
}