@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

:root{
  --green:#16864b;
  --green-2:#1daa62;
  --green-bright:#21b86b;
  --green-dark:#0d5732;
  --green-pale:#eaf8f0;
  --green-pale-2:#f4fbf7;
  --ink:#14251c;
  --muted:#64766b;
  --line:#e4eee8;
  --white:#fff;
  --shadow:0 18px 45px rgba(28,76,49,.09);
  --font:'Lexend',sans-serif;
  --display:'Lexend',sans-serif;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-60px;z-index:1000;padding:12px 16px;background:var(--green);color:#fff;border-radius:8px}
.skip-link:focus{top:12px}
.site-header{position:relative;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid #edf2ee}
.nav-wrap{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.brand-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#1db968,#0c7440);box-shadow:0 8px 20px rgba(22,134,75,.2);transform:rotate(-4deg)}
.brand-mark span{display:block;color:#fff;font:800 25px/1 var(--display);transform:rotate(4deg)}
.brand-name{display:grid;gap:0;line-height:1}
.brand-name strong{font:800 20px/1.1 var(--display);letter-spacing:-.8px;color:#173326}
.brand-name small{margin-top:4px;color:var(--green);font-size:9px;font-weight:800;letter-spacing:3.2px}
.main-nav{display:flex;align-items:center;justify-content:center;gap:34px;margin-left:auto}
.main-nav a,.nav-text-link{position:relative;color:#43564b;font-size:13px;font-weight:700;transition:color .2s ease}
.main-nav a:after{content:'';position:absolute;left:0;right:100%;bottom:-11px;height:2px;border-radius:4px;background:var(--green-2);transition:right .2s ease}
.main-nav a:hover,.main-nav a.active,.nav-text-link:hover{color:var(--green)}
.main-nav a:hover:after,.main-nav a.active:after{right:0}
.nav-actions{display:flex;align-items:center;gap:23px}
.nav-text-link span{color:var(--green)}
.menu-toggle{display:none;width:42px;height:42px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.menu-toggle span{display:block;width:19px;height:2px;margin:4px auto;border-radius:3px;background:var(--ink)}
.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;border:1px solid transparent;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:-.1px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.button:hover{transform:translateY(-2px)}
.button-green{color:#fff;background:linear-gradient(135deg,var(--green-2),var(--green));box-shadow:0 9px 22px rgba(22,134,75,.19)}
.button-green:hover{box-shadow:0 13px 28px rgba(22,134,75,.25)}
.button-small{min-height:43px;padding-inline:19px;font-size:12px}
.button-outline{color:var(--green-dark);background:rgba(255,255,255,.78);border-color:#a9dfbf}
.button-outline:hover{background:#fff;border-color:var(--green)}
.button-white{background:#fff;color:var(--green-dark);box-shadow:0 10px 24px rgba(4,54,28,.13)}

.hero{position:relative;isolation:isolate;min-height:440px;overflow:hidden;background:linear-gradient(110deg,#f6fcf8 0%,#f1faf5 42%,#d9f2e3 100%)}
.hero-art{position:absolute;z-index:-2;inset:0 0 0 34%;background-image:url('/assets/img/hero-world.jpg');background-size:cover;background-position:center 53%;}
.hero-wash{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#f7fcf9 0%,rgba(247,252,249,.97) 23%,rgba(247,252,249,.8) 39%,rgba(247,252,249,.15) 62%,rgba(247,252,249,0) 100%),linear-gradient(0deg,rgba(17,91,51,.12),transparent 45%)}
.hero-content{min-height:440px;display:flex;align-items:center;padding-top:36px;padding-bottom:68px}
.hero-copy{position:relative;z-index:2;width:min(560px,52%);padding:22px 0 0}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--green);font-size:10px;font-weight:800;letter-spacing:1.8px}
.eyebrow{padding:9px 14px;border:1px solid #d6eee0;border-radius:999px;background:rgba(255,255,255,.78);letter-spacing:1.2px}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 4px rgba(29,185,104,.12)}
h1,h2,h3,p{margin-top:0}
.hero h1{max-width:590px;margin:18px 0 16px;color:#172b20;font:800 clamp(43px,5.1vw,68px)/1.07 var(--display);letter-spacing:-3.6px}
.hero h1 span{color:var(--green);}
.hero-lead{max-width:465px;margin:0;color:#586d60;font-size:15px;line-height:1.8}
.hero-actions{display:flex;align-items:center;gap:12px;margin-top:25px;flex-wrap:wrap}
.hero-server-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.server-copy{display:inline-flex;align-items:center;gap:11px;padding:9px 13px;border:1px solid #dcece2;border-radius:13px;background:rgba(255,255,255,.84);box-shadow:0 5px 15px rgba(29,74,45,.05);text-align:left;color:var(--ink);cursor:pointer}
.copy-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--green-pale);color:var(--green);font-size:20px;font-weight:700}
.server-copy-text{display:grid;gap:2px}
.server-copy-text small{color:#84958b;font-size:8px;font-weight:800;letter-spacing:1.4px}
.server-copy-text strong{color:#213d2d;font:700 13px var(--display)}
.copy-label{margin-left:5px;color:var(--green);font-size:10px;font-weight:800}
.hero-live{display:inline-flex;align-items:center;gap:8px;color:#587064;font-size:11px;font-weight:700}
.status-dot{width:8px;height:8px;display:inline-block;flex:none;border-radius:50%;background:#c3a24c;box-shadow:0 0 0 4px rgba(195,162,76,.12)}
.status-dot.online,.status-pulse.online{background:#22b86b;box-shadow:0 0 0 4px rgba(34,184,107,.13)}
.copy-feedback{display:block;min-height:16px;margin-top:4px;color:var(--green);font-size:11px;font-weight:700}
.hero-bottom-wave{position:absolute;bottom:-1px;left:-4%;width:108%;height:55px;background:#fff;border-radius:50% 50% 0 0 / 46% 46% 0 0}

.quick-links{position:relative;z-index:3;margin-top:-31px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.quick-card{min-height:105px;display:flex;align-items:center;gap:16px;padding:17px 20px;border:1px solid #e7efe9;border-radius:18px;background:#fff;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.quick-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(28,76,49,.13)}
.quick-icon{width:62px;height:62px;display:grid;place-items:center;flex:none;border-radius:50%;background:linear-gradient(145deg,#e9f9ef,#d9f4e4);color:var(--green)}
.quick-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quick-copy{display:grid;gap:5px;min-width:0}
.quick-copy strong{color:#1b3426;font:800 15px var(--display)}
.quick-copy small{color:#718176;font-size:11px;line-height:1.5}
.quick-arrow{width:34px;height:34px;display:grid;place-items:center;flex:none;margin-left:auto;border-radius:50%;background:#edf9f1;color:var(--green);font-size:20px;transition:transform .2s ease}
.quick-card:hover .quick-arrow{transform:translateX(3px)}

.section{padding:88px 0}
.modes-section{padding-top:83px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:30px}
.section-heading h2,.rules-intro h2{margin:10px 0 0;color:#1b3024;font:800 clamp(32px,3.2vw,43px)/1.15 var(--display);letter-spacing:-1.9px}
.section-heading h2 span,.rules-intro h2 span{color:var(--green)}
.section-heading>p{max-width:410px;margin:0 0 4px;color:var(--muted);font-size:13px;line-height:1.8}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mode-card{overflow:hidden;border:1px solid #e5eee8;border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(26,75,47,.045);transition:transform .2s ease,box-shadow .2s ease}
.mode-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.mode-art{position:relative;height:178px;overflow:hidden;background:#dff4e7}
.mode-art-label{position:absolute;z-index:2;top:16px;left:18px;color:rgba(18,73,42,.72);font-size:8px;font-weight:800;letter-spacing:1.5px}
.mode-survival .mode-art{background:linear-gradient(180deg,#b8e8d0 0%,#e0f4dc 65%,#80c68a 66%,#5ba768 100%)}
.pixel-sun{position:absolute;top:43px;right:63px;width:40px;height:40px;border-radius:50%;background:#ffe7a0;box-shadow:0 0 0 14px rgba(255,231,160,.17)}
.pixel-hill{position:absolute;bottom:29px;width:250px;height:96px;background:#75bb83;clip-path:polygon(0 100%,32% 9%,52% 43%,73% 0,100% 100%)}
.hill-one{left:-28px}.hill-two{right:-72px;bottom:17px;background:#3b9360;transform:scale(1.15)}
.pixel-tree{position:absolute;bottom:32px;width:25px;height:60px;background:linear-gradient(90deg,#956b43 0 38%,#a97a4a 38% 62%,#805b39 62%);z-index:1}
.pixel-tree:before{content:'';position:absolute;left:-23px;top:-31px;width:71px;height:42px;background:#22834f;clip-path:polygon(29% 0,72% 0,72% 19%,100% 19%,100% 79%,80% 79%,80% 100%,18% 100%,18% 80%,0 80%,0 21%,29% 21%)}
.tree-one{left:18%}.tree-two{right:19%;transform:scale(.78);transform-origin:bottom}
.mode-lobby .mode-art{background:radial-gradient(circle at 50% 64%,#eafff1 0 9%,transparent 10%),linear-gradient(145deg,#d8f2e6,#a8dfc2)}
.lobby-orb{position:absolute;border:1px solid rgba(28,143,82,.18);border-radius:50%;transform:rotate(-25deg)}
.orb-one{width:240px;height:110px;left:50%;top:45px;translate:-50% 0}.orb-two{width:300px;height:143px;left:50%;top:29px;translate:-50% 0;transform:rotate(25deg)}
.lobby-platform{position:absolute;left:50%;bottom:25px;width:190px;height:42px;translate:-50% 0;background:linear-gradient(145deg,#36ae71,#16864b);clip-path:polygon(50% 0,100% 43%,50% 100%,0 43%);filter:drop-shadow(0 12px 8px rgba(22,134,75,.18))}
.lobby-platform:after{content:'';position:absolute;inset:18px 0 0;background:#11713f;clip-path:polygon(0 0,50% 60%,100% 0,100% 100%,50% 100%,0 100%)}
.lobby-crystal{position:absolute;left:50%;top:57px;translate:-50% 0;color:#14965a;font-size:70px;text-shadow:0 9px 23px rgba(14,127,67,.2)}
.mode-next .mode-art{background:linear-gradient(135deg,#f0faf3,#d8f2e2)}
.next-glow{position:absolute;left:50%;top:50%;width:145px;height:145px;translate:-50% -40%;border:1px solid #a7dfba;border-radius:50%;box-shadow:0 0 0 17px rgba(36,168,94,.06),0 0 0 34px rgba(36,168,94,.04)}
.next-cube{position:absolute;left:50%;top:49%;translate:-50% -48%;width:62px;height:62px;display:grid;place-items:center;border:1px solid #a1dcb7;border-radius:17px;background:linear-gradient(145deg,#fff,#dff4e7);color:var(--green);font:800 34px var(--display);box-shadow:0 15px 28px rgba(31,131,74,.12);transform:rotate(8deg)}
.next-spark{position:absolute;color:#65bd85}.spark-one{top:48px;left:27%}.spark-two{right:24%;bottom:35px;font-size:22px}
.mode-content{padding:20px 21px 22px}
.mode-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mode-content h3{margin:0;color:#1d3427;font:800 19px var(--display);letter-spacing:-.4px}
.mode-tag{padding:6px 9px;border-radius:99px;background:#e9f8ef;color:var(--green);font-size:8px;font-weight:800;letter-spacing:.9px;white-space:nowrap}
.tag-soft{background:#f0f5f1;color:#728177}
.mode-content p{min-height:59px;margin:11px 0 15px;color:#718176;font-size:12px;line-height:1.7}
.mode-content>a{color:var(--green);font-size:11px;font-weight:800}
.mode-content>a span{margin-left:5px;transition:margin .2s ease}
.mode-content>a:hover span{margin-left:10px}

.news-section{padding-top:15px;background:linear-gradient(180deg,#fff 0%,#f9fcfa 100%)}
.news-heading{margin-bottom:27px}
.news-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.68fr);gap:22px;align-items:stretch}
.news-list{display:grid;gap:13px;align-content:start}
.news-card{min-height:136px;display:flex;align-items:center;gap:19px;padding:21px;border:1px solid #e5eee8;border-radius:17px;background:#fff;box-shadow:0 8px 25px rgba(26,75,47,.04)}
.news-card-icon{width:51px;height:51px;display:grid;place-items:center;flex:none;border-radius:15px;background:var(--green-pale);color:var(--green);font-size:24px}
.news-card-copy{min-width:0}
.news-meta{display:flex;align-items:center;gap:12px;color:var(--green);font-size:8px;font-weight:800;letter-spacing:1.3px}
.news-meta time{color:#94a197;font-size:9px;font-weight:600;letter-spacing:0}
.news-card h3{margin:8px 0 5px;color:#1a3023;font:800 17px var(--display)}
.news-card p{margin:0;color:#718176;font-size:11px;line-height:1.65}
.status-panel{display:flex;flex-direction:column;min-height:100%;padding:24px;border:1px solid #d9f0e2;border-radius:19px;background:radial-gradient(circle at 100% 0,rgba(166,230,190,.24),transparent 43%),linear-gradient(145deg,#f1fbf5,#e5f7ec)}
.status-panel-heading{display:flex;align-items:center;gap:10px;padding-bottom:18px;border-bottom:1px solid rgba(37,132,75,.12)}
.status-pulse{width:10px;height:10px;flex:none;border-radius:50%;background:#c3a24c;box-shadow:0 0 0 5px rgba(195,162,76,.12)}
.status-panel-heading div{display:grid;gap:2px}
.status-panel-heading small{color:#73a184;font-size:8px;font-weight:800;letter-spacing:1.5px}
.status-panel-heading h3{margin:0;color:#1b3927;font:800 17px var(--display)}
.status-label{margin-left:auto;color:#789081;font-size:10px;font-weight:800}
.status-main{display:flex;align-items:center;gap:14px;padding:22px 0 18px}
.status-players{color:#16864b;font:800 41px/1 var(--display);letter-spacing:-2px}
.status-main>span{display:grid;gap:4px}
.status-main b{color:#234532;font-size:12px}
.status-main small{color:#7d9284;font-size:10px}
.status-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0 20px;border-top:1px solid rgba(37,132,75,.12)}
.status-details div{display:grid;gap:5px}
.status-details span{color:#8aa192;font-size:9px;font-weight:700}
.status-details strong{color:#315640;font-size:11px}
.status-copy{width:100%;margin-top:auto;min-height:43px;font-size:11px}
.status-updated{margin-top:11px;color:#9aaa9e;font-size:9px;text-align:center}

.community-section{padding:20px 0 88px;background:#f9fcfa}
.community-panel{position:relative;overflow:hidden;min-height:250px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:35px;padding:40px 55px;border-radius:24px;background:linear-gradient(115deg,#147b47,#1ca45e 60%,#29b96c);box-shadow:0 18px 40px rgba(22,134,75,.19);color:#fff}
.community-panel:before,.community-panel:after{content:'';position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%;pointer-events:none}
.community-panel:before{width:340px;height:340px;left:-120px;top:-200px;box-shadow:0 0 0 35px rgba(255,255,255,.03),0 0 0 70px rgba(255,255,255,.025)}
.community-panel:after{width:260px;height:260px;right:60px;bottom:-200px;box-shadow:0 0 0 35px rgba(255,255,255,.04)}
.community-decoration{position:relative;z-index:1;width:125px;height:125px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transform:rotate(-7deg)}
.community-decoration span{color:#fff;font:800 42px var(--display);transform:rotate(7deg);text-shadow:0 5px 15px rgba(0,0,0,.1)}
.community-copy,.community-action{position:relative;z-index:1}
.community-copy .section-kicker{color:#c9f2d8}
.community-copy h2{margin:10px 0 9px;color:#fff;font:800 clamp(31px,3.5vw,43px)/1.12 var(--display);letter-spacing:-1.8px}
.community-copy h2 span{color:#cbf6d9}
.community-copy p{max-width:460px;margin:0;color:rgba(255,255,255,.8);font-size:12px;line-height:1.75}
.community-action{display:grid;justify-items:start;gap:10px}
.community-action .button{min-width:185px}
.community-action small{color:rgba(255,255,255,.76);font-size:9px}

.rules-section{padding-top:5px;padding-bottom:90px;background:#f9fcfa}
.rules-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.rules-intro h2{font-size:40px}
.rules-intro p{max-width:320px;margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.8}
.rule-list{display:grid;grid-template-columns:1fr 1fr;gap:0 23px}
.rule-list>div{min-height:63px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #e5eee8}
.rule-list>div b{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:9px;background:#e9f7ef;color:var(--green);font:800 10px var(--display)}
.rule-list>div span{color:#53675a;font-size:11px;line-height:1.5}
.rules-note{grid-column:1/-1;margin:14px 0 0;color:#8a9a8f;font-size:10px;line-height:1.7}
.site-footer{background:#fff;border-top:1px solid #e7eee9}
.footer-main{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-main>p{margin:0;color:#839188;font-size:11px}
.back-top{color:var(--green);font-size:11px;font-weight:800}
.footer-bottom{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #edf2ee;color:#93a097;font-size:9px}
.is-copied{border-color:#55c487!important;background:#f0fbf4!important}

@media(max-width:980px){
  .main-nav{gap:20px}.nav-actions{gap:14px}.hero-art{left:30%;background-position:55% center}.hero-copy{width:58%}.quick-card{gap:12px;padding:15px}.quick-icon{width:53px;height:53px}.quick-copy strong{font-size:13px}.quick-copy small{font-size:10px}.mode-grid{gap:14px}.community-panel{grid-template-columns:110px 1fr auto;gap:25px;padding-inline:35px}.community-decoration{width:100px;height:100px}.rules-wrap{gap:35px}
}
@media(max-width:720px){
  .container{width:calc(100% - 36px)}
  .nav-wrap{min-height:72px;gap:12px}.brand-mark{width:39px;height:39px;border-radius:12px}.brand-name strong{font-size:18px}.menu-toggle{display:block;margin-left:auto}.nav-actions{gap:0}.nav-actions .nav-text-link{display:none}.nav-actions .button{min-height:39px;padding-inline:13px;font-size:10px}
  .main-nav{position:absolute;top:72px;left:0;right:0;display:none;align-items:stretch;gap:0;padding:8px 18px 17px;border-bottom:1px solid var(--line);background:#fff;box-shadow:0 14px 24px rgba(16,50,30,.08)}
  .main-nav.open{display:grid}.main-nav a{padding:13px 7px;border-bottom:1px solid #eff4f0;font-size:13px}.main-nav a:after{display:none}
  .hero{min-height:610px}.hero-art{inset:235px 0 0 0;background-position:center center;background-size:cover}.hero-wash{background:linear-gradient(180deg,#f7fcf9 0%,rgba(247,252,249,.97) 35%,rgba(247,252,249,.6) 55%,rgba(247,252,249,.02) 100%),linear-gradient(0deg,rgba(255,255,255,.45),transparent 45%)}
  .hero-content{min-height:610px;align-items:flex-start;padding-top:44px;padding-bottom:70px}.hero-copy{width:100%;padding:0}.eyebrow{font-size:8px;letter-spacing:1px}.hero h1{font-size:clamp(43px,12vw,58px);letter-spacing:-2.8px;margin-top:16px}.hero-lead{max-width:440px;font-size:13px}.hero-actions{gap:9px;margin-top:20px}.button{min-height:44px;padding-inline:17px;font-size:11px}.hero-server-row{gap:11px;margin-top:17px}.server-copy{padding:7px 9px}.server-copy-text strong{font-size:11px}.copy-label{font-size:9px}.hero-live{font-size:9px}.hero-bottom-wave{height:35px}
  .quick-links{margin-top:-16px}.quick-grid{grid-template-columns:1fr;gap:10px}.quick-card{min-height:80px;padding:12px 15px;border-radius:15px}.quick-icon{width:48px;height:48px}.quick-copy strong{font-size:13px}.quick-copy small{font-size:10px}
  .section{padding:65px 0}.modes-section{padding-top:65px}.section-heading{display:block;margin-bottom:22px}.section-heading h2,.rules-intro h2{font-size:34px}.section-heading>p{margin-top:12px;font-size:12px}.mode-grid{grid-template-columns:1fr;gap:13px}.mode-art{height:165px}.mode-content p{min-height:0}
  .news-section{padding-top:5px}.news-layout{grid-template-columns:1fr;gap:15px}.news-card{padding:16px;gap:13px}.news-card-icon{width:43px;height:43px}.news-card h3{font-size:15px}.news-card p{font-size:10px}.status-panel{min-height:0;padding:21px}
  .community-section{padding:10px 0 65px}.community-panel{grid-template-columns:1fr;gap:19px;padding:28px 23px;border-radius:19px}.community-decoration{width:72px;height:72px;border-radius:22px}.community-decoration span{font-size:28px}.community-copy h2{font-size:35px}.community-action{justify-items:start}
  .rules-section{padding-top:0;padding-bottom:65px}.rules-wrap{grid-template-columns:1fr;gap:23px}.rules-intro h2{font-size:35px}.rule-list{grid-template-columns:1fr}.rules-note{grid-column:auto}
  .footer-main{align-items:flex-start;flex-direction:column;padding:24px 0;gap:12px}.footer-main>p{font-size:10px}.footer-bottom{align-items:flex-start;flex-direction:column;justify-content:center;padding:13px 0;gap:7px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}


/* Account, login and role system */
.nav-logout{display:inline-flex;margin:0}
.logout-link{padding:0;border:0;background:transparent;cursor:pointer;font:inherit}
.nav-rank{display:inline-flex;align-items:center;margin-left:5px;padding:3px 7px;border-radius:99px;font-size:8px;font-weight:800;letter-spacing:.5px;vertical-align:middle}
.rank-default{background:#edf2ef;color:#617168}
.rank-staff{background:#e8f2ff;color:#2866a8}
.rank-admin{background:#fff0d7;color:#9a6410}
.auth-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#f5fbf7 0%,#fff 45%,#f7fbf8 100%)}
.auth-page .site-header{width:100%}
.auth-page .nav-wrap{min-height:78px}
.auth-main{width:100%;flex:1;display:grid;place-items:center;padding:52px 24px 62px}
.auth-card,.account-card{width:min(100%,470px);padding:38px;border:1px solid #e2eee6;border-radius:24px;background:#fff;box-shadow:0 22px 65px rgba(27,82,49,.09)}
.auth-card-wide{width:min(100%,520px)}
.auth-emblem{width:54px;height:54px;display:grid;place-items:center;margin-bottom:23px;border-radius:17px;background:linear-gradient(145deg,#1eae63,#117743);box-shadow:0 9px 22px rgba(22,134,75,.19);color:#fff;font:800 29px var(--display);transform:rotate(-4deg)}
.auth-card h1,.account-card h1{margin:10px 0 9px;color:#183225;font:800 clamp(29px,5vw,38px)/1.14 var(--display);letter-spacing:-1.5px}
.auth-card h1 span,.account-card h1 span{color:var(--green)}
.auth-intro{margin:0 0 25px;color:#708176;font-size:13px;line-height:1.75}
.auth-form{display:grid;gap:10px}
.auth-form label{margin-top:5px;color:#314d3b;font-size:11px;font-weight:800}
.auth-form input,.role-form select{width:100%;min-height:47px;padding:0 13px;border:1px solid #dce9e0;border-radius:11px;outline:none;background:#fbfdfb;color:#1e3427;font:500 13px var(--font);transition:border-color .18s,box-shadow .18s}
.auth-form input:focus,.role-form select:focus{border-color:#51b87b;box-shadow:0 0 0 4px rgba(29,185,104,.1)}
.field-hint{margin-top:-5px;color:#87968c;font-size:10px;line-height:1.5}
.auth-submit{width:100%;margin-top:12px}
.auth-switch{margin:22px 0 0;color:#738278;text-align:center;font-size:12px}
.auth-switch a,.auth-back{color:var(--green);font-weight:800}
.auth-back{display:block;margin-top:22px;text-align:center;font-size:11px}
.form-error,.form-success{margin:0 0 18px;padding:12px 14px;border:1px solid;border-radius:11px;font-size:12px;line-height:1.6}
.form-error{border-color:#f2d0cd;background:#fff5f4;color:#a63c34}
.form-success{border-color:#ccebd7;background:#f2fbf5;color:#197744}
.auth-footer{padding:18px 24px;border-top:1px solid #e8f0ea;color:#91a096;text-align:center;font-size:10px}
.account-main{align-items:start;padding-top:62px}
.account-card{width:min(100%,900px)}
.account-details{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:27px 0;padding:20px;border:1px solid #e8f0ea;border-radius:16px;background:#fbfdfb}
.account-details>div{display:grid;gap:7px;min-width:0}
.account-details small{color:#89988f;font-size:10px;font-weight:700}
.account-details strong{overflow-wrap:anywhere;color:#294534;font-size:13px}
.rank-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;font-size:10px;font-weight:800}
.rank-badge.rank-default{background:#edf2ef;color:#617168}
.rank-badge.rank-staff{background:#e8f2ff;color:#2866a8}
.rank-badge.rank-admin{background:#fff0d7;color:#9a6410}
.account-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.account-action-card{position:relative;display:grid;gap:8px;min-height:125px;padding:18px;border:1px solid #e5eee8;border-radius:15px;background:#fff;transition:transform .18s,box-shadow .18s}
.account-action-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.action-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#e9f8ef;color:var(--green);font-size:18px}
.account-action-card strong{color:#234331;font:800 13px var(--display)}
.account-action-card small{color:#7d8d83;font-size:10px}
.action-arrow{position:absolute;right:17px;top:23px;color:var(--green);font-size:18px}
.rank-explainer,.staff-notice{margin-top:24px;padding:17px 19px;border:1px solid #dcefe3;border-radius:14px;background:#f4fbf6}
.rank-explainer strong,.staff-notice strong{color:#1e6b3e;font:800 12px var(--display)}
.rank-explainer p,.staff-notice p{margin:7px 0 0;color:#718278;font-size:11px;line-height:1.7}
.account-nav{display:flex;align-items:center;gap:22px}
.account-nav form{margin:0}
.logout-link{color:#63756a}
.admin-main{align-items:start;padding-top:48px}
.admin-card{width:min(100%,1120px)}
.rank-legend{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.user-table-wrap{overflow-x:auto;border:1px solid #e5eee8;border-radius:14px}
.user-table{width:100%;border-collapse:collapse;text-align:left;font-size:11px}
.user-table th{padding:13px 14px;background:#f5faf6;color:#718278;font-size:9px;letter-spacing:.7px;text-transform:uppercase;white-space:nowrap}
.user-table td{padding:13px 14px;border-top:1px solid #edf2ee;color:#52675a;vertical-align:middle}
.user-table td:first-child{min-width:155px}
.user-table td:first-child strong,.user-table td:first-child small{display:block}
.user-table td:first-child strong{color:#284533;font-size:11px}
.user-table td:first-child small{margin-top:4px;color:#93a097;font-size:9px}
.role-form{display:flex;align-items:center;gap:7px;min-width:190px}
.role-form select{min-height:36px;padding:0 8px;font-size:10px}
.role-form .button{min-height:36px;padding-inline:12px;font-size:10px}
.admin-warning{margin:17px 0 0;color:#8a968e;font-size:10px;line-height:1.6}
@media(max-width:720px){
  .nav-actions .nav-auth-link{display:inline-flex;font-size:10px}
  .nav-actions .nav-discord-link,.nav-logout{display:none}
  .nav-actions .button{font-size:10px}
  .auth-main{padding:30px 17px 42px}
  .auth-card,.account-card{padding:25px 20px;border-radius:19px}
  .auth-card h1,.account-card h1{font-size:30px}
  .account-details{grid-template-columns:1fr;gap:14px;padding:16px}
  .account-actions{grid-template-columns:1fr}
  .account-action-card{min-height:95px}
  .account-nav{gap:12px}
}