:root{
  --bg:#fff7ea;
  --bg2:#f4e6d2;
  --panel:rgba(255,255,255,.58);
  --panel-strong:rgba(255,255,255,.78);
  --text:#2d2118;
  --muted:#6b5747;
  --line:rgba(112,78,48,.18);
  --accent:#ffb347;
  --accent2:#f47c38;
  --danger:#e9625f;
  --shadow:0 24px 70px rgba(117,70,24,.16);
  --radius:24px;
}

:root.dark{
  --bg:#0b1118;
  --bg2:#111a25;
  --panel:rgba(21,28,39,.72);
  --panel-strong:rgba(28,37,51,.84);
  --text:#edf3ff;
  --muted:#9fb0c8;
  --line:rgba(255,255,255,.08);
  --accent:#ffb347;
  --accent2:#ff8c42;
  --danger:#ff6b6b;
  --shadow:0 24px 70px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 20% 4%,rgba(255,203,114,.62),transparent 34%),
    radial-gradient(circle at 82% 12%,rgba(255,244,209,.88),transparent 34%),
    linear-gradient(135deg,#fff8ec 0%,#f5e1c4 50%,#f9efe1 100%);
  transition:background .35s ease,color .35s ease;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.6),transparent 36%,rgba(255,185,87,.13));
}
:root.dark body{
  background:
    radial-gradient(circle at 20% 4%,rgba(255,179,71,.08),transparent 35%),
    radial-gradient(circle at 80% 10%,rgba(255,140,66,.05),transparent 30%),
    linear-gradient(135deg,#0b1118 0%,#101827 50%,#17212e 100%);
}
:root.dark body:before{background:linear-gradient(120deg,rgba(255,179,71,.06),transparent 36%,rgba(255,185,87,.08))}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
:root.dark .noise{opacity:.08;mix-blend-mode:screen}

a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(56px,10vw,118px);line-height:.9;margin-bottom:22px;letter-spacing:-.075em}
h2{font-size:clamp(34px,5vw,64px);line-height:1;margin-bottom:22px;letter-spacing:-.05em}
h3{font-size:21px;margin-bottom:10px}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px clamp(18px,4vw,56px);
  backdrop-filter:blur(18px);
  background:rgba(255,247,234,.74);
  border-bottom:1px solid rgba(127,92,54,.16);
  transition:background .35s ease,border-color .35s ease;
}
:root.dark .site-header{background:rgba(11,17,24,.82);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:.02em}
.brand img{width:42px;height:42px;filter:drop-shadow(0 8px 18px rgba(244,124,56,.32))}
.header-actions{display:flex;align-items:center;gap:18px;margin-left:auto}
.nav{display:flex;gap:22px;color:#7f6b57;font-size:15px}
:root.dark .nav{color:#b4c1d5}
.nav a:hover{color:var(--text)}
.nav-toggle{display:none;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer}
.theme-toggle{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;font-size:18px;transition:transform .2s ease,background .35s ease,color .35s ease,border-color .35s ease}
.theme-toggle:hover{transform:translateY(-2px)}

.section{padding:96px clamp(18px,5vw,80px);max-width:1240px;margin:0 auto}
.grid{display:grid;gap:42px}
.two-cols{grid-template-columns:1fr 1fr;align-items:center}
.hero{min-height:calc(100vh - 76px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:48px;align-items:center}
.eyebrow{margin:0 0 12px;color:#d46a28;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
:root.dark .eyebrow{color:#ffbd6a}
.lead{font-size:clamp(18px,2vw,24px);color:#5f4d3f;max-width:760px}
:root.dark .lead{color:#c9d6eb}
.muted,.card p,.footer,.rules-list,.download-card p,.note{color:var(--muted)}

.hero-actions,.download-actions{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0}
.download-actions{margin:22px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-weight:800;border:1px solid var(--line);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3)}
.btn.small{padding:10px 16px;font-size:14px}
.primary{background:linear-gradient(135deg,#ff9f2e,#ffd36e);color:#3c1f08;box-shadow:0 14px 28px rgba(255,159,46,.22)}
.secondary,.ghost{background:rgba(255,255,255,.54)}
:root.dark .secondary,:root.dark .ghost{background:rgba(24,32,44,.72);color:#edf3ff}

.server-card,.card,.stats,.join-panel,.link-card,.download-card,.note,.download-template{
  border:1px solid rgba(116,79,46,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,250,241,.58));
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  backdrop-filter:blur(16px);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
:root.dark .server-card,:root.dark .card,:root.dark .stats,:root.dark .join-panel,:root.dark .link-card,:root.dark .download-card,:root.dark .note,:root.dark .download-template{
  background:linear-gradient(180deg,rgba(24,32,44,.92),rgba(18,24,34,.84));
  border-color:rgba(255,255,255,.06);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.server-card{display:flex;align-items:center;gap:14px;padding:18px;max-width:430px}
.server-card p{margin:2px 0 0;color:var(--muted)}
.status-dot{width:12px;height:12px;border-radius:50%;display:inline-block;transition:all .3s ease;flex:0 0 auto}
.status-dot.online{background:#65d17a;box-shadow:0 0 5px #65d17a,0 0 15px #65d17a,0 0 25px #22c55e}
.status-dot.checking{background:#fbbf24;animation:pulse 1.5s infinite}
.status-dot.offline{background:#ef4444;box-shadow:0 0 10px #ef4444}

.hero-visual{position:relative;min-height:560px;display:grid;place-items:center}
.logo-stage{position:relative;width:min(460px,82vw);aspect-ratio:1;display:grid;place-items:center}
.hero-logo{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 32px 42px rgba(111,61,20,.24)) drop-shadow(0 0 44px rgba(255,170,52,.44));animation:logoDrift 7s ease-in-out infinite}
:root.dark .hero-logo{filter:drop-shadow(0 0 24px rgba(255,179,71,.35)) drop-shadow(0 0 60px rgba(255,140,66,.25))}
.aurora{position:absolute;border-radius:50%;filter:blur(22px);opacity:.72;animation:softPulse 6s ease-in-out infinite}
.aurora-one{inset:11%;background:radial-gradient(circle,rgba(255,185,75,.64),transparent 62%)}
.aurora-two{inset:22%;background:radial-gradient(circle,rgba(255,244,202,.74),transparent 58%);animation-delay:-2s}
.spark{position:absolute;width:10px;height:10px;border-radius:4px;background:#ffad37;box-shadow:0 0 20px #ffad37;opacity:.76;animation:ember 5.5s ease-in-out infinite}
.spark-one{left:10%;top:24%}
.spark-two{right:12%;top:44%;animation-delay:-1.6s}
.spark-three{left:36%;bottom:12%;animation-delay:-3s}
.floating-label{position:absolute;right:34px;bottom:78px;padding:10px 16px;border:1px solid rgba(142,85,32,.2);border-radius:999px;background:rgba(255,255,255,.56);font-weight:900;color:#8f431a;box-shadow:0 14px 35px rgba(117,70,24,.12)}
:root.dark .floating-label{background:rgba(24,32,44,.72);color:#ffbd6a;border-color:rgba(255,179,71,.22)}
.portal,.cube{display:none}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;background:rgba(116,79,46,.14)}
:root.dark .stats{background:rgba(255,255,255,.08)}
.stats div{padding:28px;background:rgba(255,250,241,.74)}
:root.dark .stats div{background:rgba(18,24,34,.84)}
.stats strong{display:block;font-size:26px;color:#3a2818}
.stats span{display:block;color:#5b4635;font-size:14px;font-weight:650}
:root.dark .stats strong{color:#edf3ff}
:root.dark .stats span{color:#b8c6dc}

.section-head{max-width:720px;margin-bottom:28px}
.section-head.with-action{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:24px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{padding:26px}
.join-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:center;padding:42px}
.ip-list{display:grid;gap:12px}
.copy-row{width:100%;text-align:left;display:grid;gap:4px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.5);color:var(--text);padding:18px;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.copy-row:hover{background:rgba(255,255,255,.78)}
:root.dark .copy-row{background:rgba(255,255,255,.06);color:#edf3ff}
:root.dark .copy-row:hover{background:rgba(255,255,255,.1)}
.copy-row span,.copy-row small{color:var(--muted)}
.copy-row strong{font-size:18px}

.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.download-card{padding:24px;position:relative;overflow:hidden}
.download-card:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at top right,rgba(255,174,67,.24),transparent 38%);pointer-events:none}
:root.dark .download-card:before{background:radial-gradient(circle at top right,rgba(255,179,71,.14),transparent 38%)}
.download-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.download-icon{font-size:34px;filter:drop-shadow(0 8px 15px rgba(255,159,46,.18))}
.download-icon-head{width:48px;height:48px;image-rendering:pixelated;border-radius:8px}
.pill{padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:#c95d23;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,179,71,.14)}
:root.dark .pill{color:#ffbd6a;background:rgba(255,179,71,.12)}
.note{margin-top:18px;padding:18px}
.note code{color:#a95022}
:root.dark .note code{color:#ffd9a3}
.download-template{margin-top:32px;padding:28px}
.download-template pre{overflow:auto;white-space:pre-wrap;padding:18px;border-radius:16px;background:rgba(75,43,17,.06);border:1px solid var(--line);color:#4c3423}
:root.dark .download-template pre{background:rgba(0,0,0,.28);color:#ffd9a3}

.links-section{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.link-card{padding:28px}
.link-card span{color:var(--accent2);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.12em}
.link-card strong{display:block;margin-top:8px;font-size:22px}
.footer{display:flex;justify-content:space-between;gap:16px;padding:34px clamp(18px,4vw,56px);border-top:1px solid rgba(116,79,46,.16);color:var(--muted)}
:root.dark .footer{border-top-color:rgba(255,255,255,.08)}
.footer p{margin:0}
:root.dark .stats{background:rgba(255,255,255,.08)!important}:root.dark .stats div{background:rgba(24,32,44,.92)!important}:root.dark .stats strong{color:#edf3ff!important}:root.dark .stats span{color:#8f9fb8!important;font-weight:600!important}

@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}100%{transform:scale(1);opacity:1}}
@keyframes logoDrift{0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}50%{transform:translateY(-16px) rotate(2deg) scale(1.025)}}
@keyframes softPulse{0%,100%{transform:scale(.96);opacity:.54}50%{transform:scale(1.08);opacity:.86}}
@keyframes ember{0%,100%{transform:translate3d(0,0,0) scale(.85);opacity:.36}50%{transform:translate3d(18px,-22px,0) scale(1.15);opacity:.92}}

@media(max-width:1000px){
  .download-grid,.cards{grid-template-columns:repeat(2,1fr)}
  .hero,.two-cols,.join-panel{grid-template-columns:1fr}
  .hero-visual{min-height:320px}
}

@media(max-width:760px){
  .site-header{padding:14px 18px}
  .header-actions{gap:12px}
  .nav{display:none;position:absolute;right:18px;top:70px;flex-direction:column;background:#fff7ea;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
  :root.dark .nav{background:#101827}
  .nav.open{display:flex}
  .nav-toggle{display:block}
  .section{padding:70px 18px}
  .hero{padding-top:48px}
  .download-grid,.cards,.links-section{grid-template-columns:1fr}
  .section-head.with-action{display:block}
  .footer{flex-direction:column}
  h1{font-size:64px}
  .hero-visual{min-height:300px}
  .logo-stage{width:min(330px,90vw)}
  .floating-label{right:18px;bottom:28px}
}

/* StoneLight Stats page */
.stats-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:32px;align-items:end;padding-top:120px;padding-bottom:36px}.stats-hero h1{font-size:clamp(46px,8vw,92px)}.stats-mini-card,.stats-panel{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-strong),rgba(255,250,241,.58));box-shadow:var(--shadow);border-radius:var(--radius);backdrop-filter:blur(16px)}.stats-mini-card{display:flex;align-items:center;gap:16px;padding:22px}.stats-mini-card p{margin:4px 0 0;color:var(--muted)}.stats-dashboard{display:grid;grid-template-columns:1fr;gap:22px;padding-top:36px}.stats-panel{padding:28px}.section-head.compact{margin-bottom:18px}.section-head.compact h2,.stats-panel-head h2{font-size:clamp(28px,4vw,46px);margin-bottom:0}.stats-panel-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px}.server-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.server-metrics div{padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.44)}.server-metrics strong{display:block;font-size:28px;color:#3a2818;line-height:1}.server-metrics span{color:#6a5443;font-size:13px;font-weight:700}.online-list-wrap h3{margin-bottom:12px}.online-players{display:flex;gap:10px;flex-wrap:wrap}.player-chip{display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.46);font-weight:800}.player-chip img{width:32px;height:32px;border-radius:8px;image-rendering:pixelated}.range-tabs{display:flex;gap:8px;flex-wrap:wrap}.range-tab{border:1px solid var(--line);background:rgba(255,255,255,.48);color:var(--text);padding:10px 14px;border-radius:999px;font-weight:900;cursor:pointer}.range-tab.active,.range-tab:hover{background:linear-gradient(135deg,#ff9f2e,#ffd36e);color:#3c1f08}.chart-wrap{position:relative;width:100%;min-height:360px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.35);padding:16px}.chart-wrap canvas{width:100%;height:360px;display:block}.chart-note{color:var(--muted);margin:14px 0 0}.top-players{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.top-player{display:grid;grid-template-columns:36px 48px 1fr;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.44)}.top-player .rank{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,179,71,.2);font-weight:900;color:#a95022}.top-player img{width:48px;height:48px;border-radius:12px;image-rendering:pixelated}.top-player strong{display:block;color:#3a2818}.top-player span:last-child{color:#6a5443;font-weight:700;font-size:14px}:root.dark .stats-mini-card,:root.dark .stats-panel{background:linear-gradient(180deg,rgba(24,32,44,.92),rgba(18,24,34,.84));border-color:rgba(255,255,255,.08)}:root.dark .server-metrics div,:root.dark .player-chip,:root.dark .range-tab,:root.dark .chart-wrap,:root.dark .top-player{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}:root.dark .server-metrics strong,:root.dark .top-player strong{color:#edf3ff}:root.dark .server-metrics span,:root.dark .top-player span:last-child{color:#9fb0c8}:root.dark .top-player .rank{background:rgba(255,179,71,.14);color:#ffbd6a}@media(max-width:900px){.stats-hero{grid-template-columns:1fr}.server-metrics{grid-template-columns:repeat(2,1fr)}.stats-panel-head{display:block}.range-tabs{margin-top:16px}.top-players{grid-template-columns:1fr}}@media(max-width:560px){.server-metrics{grid-template-columns:1fr}.top-player{grid-template-columns:32px 42px 1fr}.top-player img{width:42px;height:42px}.chart-wrap{padding:8px}.chart-wrap canvas{height:300px}}

/* Stats layout v2: status, online + chart, paginated top */
.stats-dashboard{display:grid;grid-template-columns:1fr;gap:22px;padding-top:36px}.stats-two-col{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.35fr);gap:22px;align-items:stretch}.online-panel,.chart-panel{min-height:100%}.online-panel .online-players{align-content:start}.chart-wrap{min-height:300px}.chart-wrap canvas{height:300px}.top-panel .top-players{display:grid;grid-template-columns:1fr;gap:10px}.top-player{grid-template-columns:44px 48px minmax(0,1fr);padding:12px 14px}.top-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.top-page-btn{border:1px solid var(--line);background:rgba(255,255,255,.48);color:var(--text);padding:9px 13px;border-radius:999px;font-weight:900;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.top-page-btn:hover{transform:translateY(-1px);border-color:rgba(255,179,71,.55)}.top-page-btn.active{background:linear-gradient(135deg,#ff9f2e,#ffd36e);color:#3c1f08}.top-page-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.top-page-info{color:var(--muted);font-size:13px;font-weight:800;padding:0 4px}:root.dark .top-page-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:#edf3ff}:root.dark .top-page-btn.active{background:linear-gradient(135deg,#ff9f2e,#ffd36e);color:#3c1f08}.server-overview-panel .stats-panel-head{margin-bottom:16px}.server-overview-panel .chart-note{margin:0;color:var(--muted);max-width:360px;text-align:right}@media(max-width:980px){.stats-two-col{grid-template-columns:1fr}.server-overview-panel .stats-panel-head{display:block}.server-overview-panel .chart-note{text-align:left;margin-top:10px}.chart-wrap{min-height:280px}.chart-wrap canvas{height:280px}}@media(max-width:560px){.top-pagination{justify-content:flex-start}.top-page-info{width:100%;padding:0}.chart-wrap{min-height:250px}.chart-wrap canvas{height:250px}}

/* StoneLight stats hybrid live layout */
.stats-dashboard{display:grid;grid-template-columns:1fr;gap:22px;padding-top:36px}.stats-live-row{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(420px,1.35fr);gap:22px}.server-metrics{grid-template-columns:repeat(6,1fr)}.stats-panel-head .btn{margin-bottom:6px}.metric-ping.ping-good{color:#1f9d55}.metric-ping.ping-mid{color:#d97706}.metric-ping.ping-bad{color:#dc2626}.chart-wrap{min-height:300px}.chart-wrap canvas{height:300px}.online-panel .online-players{align-content:flex-start}.top-players{grid-template-columns:repeat(2,1fr)}.top-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}.top-page-info{font-weight:900;color:var(--muted)}.range-tab:disabled{opacity:.45;cursor:not-allowed;transform:none}@media(max-width:1040px){.stats-live-row{grid-template-columns:1fr}.server-metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.server-metrics{grid-template-columns:1fr 1fr}.top-players{grid-template-columns:1fr}.chart-wrap canvas{height:260px}.chart-wrap{min-height:260px}}@media(max-width:420px){.server-metrics{grid-template-columns:1fr}}
