:root {
  --bg: #07060d;
  --panel: #12101c;
  --ink: #e8f6f8;
  --muted: #9eb8bc;
  --aqua: #2eb8b0;
  --aqua-deep: #1a8f9a;
  --line: rgba(46, 184, 176, 0.32);
  --danger: #2eb8b0;
  --online: #8fd18f;
  --offline: #b07a7a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  font-family: Outfit, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(circle at 12% 18%, rgba(46, 184, 176, 0.16), transparent 22%);
}

.stars {
  position: absolute;
  top: -2%;
  left: -2%;
  border-radius: 50%;
  background: #fff;
}

.stars::before,
.stars::after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  box-shadow: inherit;
}

.stars::before {
  opacity: 0.7;
  transform: translate(-820px, 110px);
}

.stars::after {
  opacity: 0.55;
  transform: translate(220px, 160px);
}

.stars-a {
  width: 1px;
  height: 1px;
  box-shadow:
    461px 96px #cfe3ff,
    1212px 446px #fff,
    744px 860px #cfe3ff,
    1370px 122px #fff,
    895px 617px #fff,
    330px 852px #fff,
    261px 582px #e7f4f6,
    730px 144px #e7f4f6,
    894px 494px #e7f4f6,
    1527px 376px #2eb8b0,
    1369px 727px #e7f4f6,
    95px 194px #e7f4f6,
    642px 48px #cfe3ff,
    1176px 637px #cfe3ff,
    1246px 145px #fff,
    1231px 68px #e7f4f6,
    1585px 1011px #cfe3ff,
    1368px 467px #e7f4f6,
    1154px 935px #cfe3ff,
    653px 194px #cfe3ff,
    863px 621px #fff,
    368px 0px #fff,
    1161px 489px #fff,
    1546px 909px #2eb8b0,
    538px 540px #cfe3ff,
    1476px 784px #cfe3ff,
    345px 894px #fff,
    1772px 1064px #fff,
    1593px 0px #fff,
    1593px 452px #fff,
    1008px 1093px #cfe3ff,
    1762px 191px #fff,
    712px 536px #fff,
    1725px 42px #e7f4f6,
    427px 23px #fff,
    264px 507px #cfe3ff,
    1242px 903px #fff,
    1725px 188px #fff,
    1025px 544px #e7f4f6,
    32px 351px #cfe3ff,
    383px 836px #fff,
    103px 328px #2eb8b0,
    1555px 352px #fff,
    1684px 467px #fff,
    1559px 256px #2eb8b0,
    1386px 822px #cfe3ff,
    592px 812px #e7f4f6,
    546px 214px #e7f4f6,
    342px 661px #2eb8b0,
    906px 450px #2eb8b0,
    750px 415px #fff,
    238px 820px #fff,
    1050px 197px #2eb8b0,
    468px 311px #fff,
    1107px 830px #fff,
    1640px 101px #cfe3ff,
    1060px 878px #2eb8b0,
    1173px 757px #e7f4f6,
    827px 1000px #e7f4f6,
    797px 954px #2eb8b0,
    18px 396px #cfe3ff,
    1149px 570px #fff,
    101px 806px #fff,
    892px 205px #e7f4f6,
    401px 76px #fff,
    717px 756px #fff,
    349px 306px #e7f4f6,
    1591px 1006px #e7f4f6,
    1676px 841px #2eb8b0,
    1058px 740px #cfe3ff,
    1284px 154px #fff,
    45px 274px #cfe3ff,
    414px 1074px #fff,
    628px 940px #fff,
    811px 102px #e7f4f6,
    323px 471px #e7f4f6,
    226px 67px #fff,
    225px 273px #e7f4f6,
    338px 138px #fff,
    539px 777px #2eb8b0,
    645px 515px #fff,
    1173px 860px #fff,
    459px 217px #2eb8b0,
    957px 185px #2eb8b0,
    366px 929px #fff,
    270px 476px #2eb8b0,
    1797px 826px #fff,
    124px 508px #e7f4f6,
    1105px 647px #cfe3ff,
    1302px 921px #fff,
    859px 1023px #fff,
    869px 1090px #fff,
    536px 879px #fff,
    1017px 1017px #fff,
    1440px 653px #cfe3ff,
    918px 1013px #fff,
    295px 41px #2eb8b0,
    1122px 331px #cfe3ff,
    750px 318px #fff,
    808px 41px #fff,
    278px 584px #fff,
    1252px 59px #fff,
    795px 792px #cfe3ff,
    68px 937px #e7f4f6,
    919px 476px #2eb8b0,
    189px 296px #cfe3ff,
    1294px 114px #e7f4f6,
    878px 615px #2eb8b0,
    774px 939px #e7f4f6,
    565px 72px #2eb8b0,
    683px 934px #2eb8b0,
    210px 452px #fff,
    1568px 114px #e7f4f6,
    1179px 75px #fff,
    989px 138px #fff,
    107px 124px #cfe3ff,
    230px 343px #fff,
    248px 803px #cfe3ff,
    949px 733px #cfe3ff,
    1009px 292px #fff,
    1094px 140px #e7f4f6,
    273px 724px #fff,
    1569px 433px #fff,
    781px 257px #fff,
    591px 70px #fff,
    837px 1031px #fff,
    1104px 407px #2eb8b0,
    1369px 204px #2eb8b0,
    1226px 265px #fff,
    1489px 648px #2eb8b0,
    757px 341px #cfe3ff,
    610px 51px #cfe3ff,
    984px 437px #fff,
    329px 205px #2eb8b0,
    1523px 763px #fff,
    1539px 890px #e7f4f6,
    1617px 68px #2eb8b0,
    970px 1042px #cfe3ff,
    827px 932px #cfe3ff,
    1619px 517px #fff,
    1590px 49px #2eb8b0,
    499px 15px #cfe3ff,
    588px 1088px #fff,
    169px 1010px #e7f4f6,
    1738px 473px #fff,
    39px 1006px #fff,
    1217px 909px #fff,
    815px 1021px #e7f4f6,
    28px 969px #fff,
    1698px 967px #fff,
    0px 711px #cfe3ff,
    90px 329px #fff,
    1645px 625px #2eb8b0,
    277px 581px #2eb8b0,
    1168px 885px #fff,
    338px 630px #e7f4f6,
    1280px 481px #cfe3ff,
    807px 245px #e7f4f6,
    1773px 473px #fff,
    499px 287px #fff;
  animation: twinkle-a 4.2s ease-in-out infinite, drift 140s linear infinite;
}

.stars-b {
  width: 2px;
  height: 2px;
  box-shadow:
    1235px 603px #fff,
    1318px 882px #cfe3ff,
    89px 730px #fff,
    1707px 594px #e7f4f6,
    677px 157px #fff,
    840px 384px #cfe3ff,
    450px 468px #fff,
    418px 330px #fff,
    1146px 469px #fff,
    856px 7px #fff,
    1653px 245px #fff,
    536px 807px #fff,
    670px 372px #cfe3ff,
    1633px 925px #fff,
    1156px 232px #e7f4f6,
    70px 271px #e7f4f6,
    76px 734px #2eb8b0,
    380px 607px #fff,
    1125px 499px #fff,
    1598px 105px #fff,
    882px 631px #e7f4f6,
    1655px 33px #fff,
    259px 86px #fff,
    1610px 104px #fff,
    1596px 377px #e7f4f6,
    1740px 649px #fff,
    1159px 657px #fff,
    1616px 476px #fff,
    1157px 778px #2eb8b0,
    1795px 739px #fff,
    424px 532px #fff,
    1030px 458px #fff,
    1316px 795px #fff,
    332px 984px #fff,
    209px 162px #e7f4f6,
    1322px 356px #fff,
    1431px 723px #cfe3ff,
    285px 268px #fff,
    352px 651px #fff,
    572px 304px #fff,
    1162px 161px #fff,
    231px 725px #e7f4f6,
    1382px 345px #cfe3ff,
    571px 259px #cfe3ff,
    1635px 505px #2eb8b0,
    21px 859px #fff,
    1379px 998px #fff,
    832px 222px #fff,
    750px 84px #fff,
    1339px 414px #2eb8b0,
    228px 454px #fff,
    1544px 592px #2eb8b0,
    1372px 1086px #fff,
    1732px 1063px #fff,
    509px 525px #fff,
    1793px 274px #2eb8b0,
    1433px 201px #2eb8b0,
    1537px 607px #fff,
    1691px 202px #cfe3ff,
    704px 783px #e7f4f6,
    666px 25px #cfe3ff,
    182px 209px #2eb8b0,
    758px 55px #cfe3ff,
    1716px 274px #2eb8b0,
    1435px 883px #cfe3ff,
    671px 197px #2eb8b0,
    1066px 462px #2eb8b0,
    819px 1043px #fff,
    24px 300px #cfe3ff,
    139px 1010px #fff,
    1448px 408px #fff,
    1630px 651px #cfe3ff,
    131px 199px #fff,
    1078px 632px #fff,
    1556px 926px #cfe3ff,
    30px 62px #2eb8b0,
    769px 623px #fff,
    395px 878px #fff,
    1359px 1006px #fff,
    1338px 96px #cfe3ff,
    1732px 378px #fff,
    1017px 163px #cfe3ff,
    932px 980px #fff,
    1796px 329px #cfe3ff,
    785px 1092px #cfe3ff,
    1130px 649px #fff,
    467px 1096px #fff,
    201px 714px #fff,
    631px 643px #e7f4f6,
    1771px 165px #2eb8b0;
  animation: twinkle-b 5.8s ease-in-out infinite;
}

.stars-c {
  width: 3px;
  height: 3px;
  background: #2eb8b0;
  box-shadow:
    855px 774px #2eb8b0,
    372px 464px #7adfd4,
    1538px 630px #7adfd4,
    65px 832px #2eb8b0,
    456px 54px #7adfd4,
    1337px 715px #2eb8b0,
    1419px 568px #fff,
    1771px 191px #2eb8b0,
    619px 764px #cfe3ff,
    30px 100px #cfe3ff,
    1769px 1098px #7adfd4,
    1699px 966px #fff,
    1154px 591px #7adfd4,
    442px 423px #2eb8b0,
    1343px 110px #fff,
    872px 961px #7adfd4,
    1380px 583px #2eb8b0,
    1572px 337px #2eb8b0,
    1463px 540px #7adfd4,
    13px 948px #7adfd4,
    1309px 921px #2eb8b0,
    1310px 58px #cfe3ff,
    1260px 340px #fff,
    785px 111px #fff,
    1178px 596px #fff,
    1430px 261px #fff,
    450px 945px #cfe3ff,
    569px 275px #7adfd4,
    768px 120px #7adfd4,
    511px 144px #2eb8b0,
    1104px 697px #7adfd4,
    1752px 570px #7adfd4,
    1627px 19px #fff,
    492px 862px #7adfd4,
    915px 363px #2eb8b0,
    647px 240px #cfe3ff;
  animation: twinkle-c 2.8s ease-in-out infinite;
}

@keyframes twinkle-a {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes twinkle-b {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes twinkle-c {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@keyframes drift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-70px);
  }
}

.blue-breath {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

.blue-breath-tr {
  width: min(78vw, 820px);
  height: min(78vw, 820px);
  top: -22%;
  right: -16%;
  background: radial-gradient(
    circle,
    rgba(120, 180, 255, 0.7) 0%,
    rgba(70, 130, 255, 0.22) 42%,
    transparent 70%
  );
  animation: breathe 2.6s ease-in-out infinite;
}

.blue-breath-bl {
  width: min(56vw, 560px);
  height: min(56vw, 560px);
  bottom: -24%;
  left: -14%;
  background: radial-gradient(circle, rgba(80, 150, 255, 0.45) 0%, transparent 70%);
  animation: breathe 3.4s ease-in-out infinite reverse;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.78);
  }
  50% {
    opacity: 1;
    transform: scale(1.22);
  }
}

.page {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 36px 22px 56px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.logo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: #161320;
  border: 1px solid var(--line);
}

.brand-kicker {
  margin: 0 0 6px;
  color: var(--aqua);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

h1,
h2,
h3,
.owner-name {
  font-family: Cinzel, serif;
  font-weight: 700;
  margin: 0;
}

h1 {
  font-size: clamp(1.15rem, 3.4vw, 2.05rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
}

h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}

h3 {
  font-size: 1.15rem;
  color: var(--aqua);
  margin: 28px 0 12px;
}

.status-pill {
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--aqua);
  color: var(--danger);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill.is-open {
  border-color: var(--online);
  color: var(--online);
  box-shadow: 0 0 10px rgba(143, 209, 143, 0.35);
}

.connect-bar {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(220px, 1.3fr);
  gap: 12px;
  margin: 22px 0 0;
}

.countdown {
  margin: 12px 0 0;
  padding: 18px 16px 20px;
  text-align: center;
}

.countdown-when {
  margin: 4px 0 16px;
  color: var(--aqua);
  font-family: Cinzel, serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(46, 184, 176, 0.45);
}

.countdown-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.countdown-unit {
  padding: 8px 4px;
  background: rgba(46, 184, 176, 0.08);
  border: 1px solid var(--line);
}

.countdown-num {
  display: block;
  color: var(--ink);
  font-family: Cinzel, serif;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}

.countdown-label {
  display: block;
  margin-top: 4px;
  color: var(--aqua);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.countdown-live {
  margin: 8px 0 0;
  color: var(--aqua);
  font-family: Cinzel, serif;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

.countdown[data-state="live"] .countdown-row {
  display: none;
}

.live-count,
.ip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

.live-count {
  justify-content: flex-start;
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.live-count[data-state="online"] .live-dot {
  background: var(--online);
  box-shadow: 0 0 10px var(--online);
}

.live-count[data-state="offline"] .live-dot {
  background: var(--offline);
}

.live-count[data-state="checking"] .live-dot {
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

.live-value {
  margin: 4px 0 0;
  font-size: 1.1rem;
  color: var(--ink);
}

.tabs {
  display: flex;
  position: relative;
  gap: 6px;
  margin: 22px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.tab.is-active {
  color: var(--aqua);
}

.tab-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 48px;
  background: var(--aqua);
  box-shadow: 0 0 8px rgba(46, 184, 176, 0.55);
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.panels {
  position: relative;
  overflow: hidden;
}

.panel {
  display: none;
  padding: 28px 26px 32px;
}

.panel.is-active,
.panel.is-leaving {
  display: block;
}

.panel.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}

.panel.enter-right {
  animation: tab-in-right 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.panel.enter-left {
  animation: tab-in-left 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.panel.leave-left {
  animation: tab-out-left 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.panel.leave-right {
  animation: tab-out-right 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tab-in-right {
  from {
    transform: translateX(46%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes tab-in-left {
  from {
    transform: translateX(-46%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes tab-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-46%);
    opacity: 0;
  }
}

@keyframes tab-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(46%);
    opacity: 0;
  }
}

.panel,
.live-count,
.ip-row,
.countdown {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
}

.panel::after,
.live-count::after,
.ip-row::after,
.countdown::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240%;
  aspect-ratio: 1;
  background: conic-gradient(
    #4da3ff,
    #7c6bff,
    #ff4d7d,
    #7af0ff,
    #3ee0c4,
    #4da3ff
  );
  animation: led-spin 2.2s linear infinite;
  z-index: 0;
}

.panel::before,
.live-count::before,
.ip-row::before,
.countdown::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #14121f;
  z-index: 1;
}

.panel > *,
.live-count > *,
.ip-row > *,
.countdown > * {
  position: relative;
  z-index: 2;
}

@keyframes led-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.coming-soon {
  margin: 56px 0;
  color: #ff1f1f;
  font-family: Cinzel, serif;
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-shadow: 0 0 16px rgba(255, 31, 31, 0.65);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--aqua-deep);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
}

.lead {
  font-size: 1.12rem;
  line-height: 1.55;
  color: #e7f4f6;
}

p {
  line-height: 1.6;
  color: var(--muted);
}

.ip-label {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aqua);
}

.owner-name {
  margin: 4px 0 0;
  font-size: 1.25rem;
  color: var(--ink);
}

.ip-value,
.js-ip {
  color: var(--aqua);
  font-weight: 600;
  user-select: all;
  text-shadow: 0 0 10px rgba(46, 184, 176, 0.55);
}

.ip-value {
  margin: 4px 0 0;
  font-size: 1.25rem;
}

.ip-bedrock {
  margin-top: 12px;
}

code.js-ip,
.commands code {
  background: rgba(46, 184, 176, 0.14);
  border: 1px solid rgba(46, 184, 176, 0.4);
  color: var(--aqua);
}

.copy-btn,
.discord-btn,
.vote-btn {
  display: inline-block;
  background: var(--aqua);
  color: #042226;
  border: 0;
  font: 600 0.95rem Outfit, sans-serif;
  padding: 12px 18px;
  text-decoration: none;
  cursor: pointer;
}

.copy-btn:hover,
.discord-btn:hover,
.vote-btn:hover {
  background: #7adfd4;
}

.copy-btn.is-copied {
  background: #c9e2b3;
}

.copy-btn-inline {
  margin-top: 8px;
}

.hint,
.muted,
.legal {
  font-size: 0.92rem;
}

.features,
.steps,
.rules,
.commands {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}

.features li,
.steps li,
.rules li,
.commands li {
  margin: 10px 0;
}

#faq h3 {
  margin: 22px 0 8px;
  font-size: 1.05rem;
}

.features strong,
.rules strong {
  display: block;
  color: var(--ink);
  font-family: Cinzel, serif;
  margin-bottom: 2px;
}

.owner-card,
.staff-card {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.staff-card:first-of-type {
  margin-top: 18px;
}

a {
  color: var(--aqua);
}

code {
  color: var(--ink);
  background: #1c1828;
  padding: 2px 6px;
}

footer {
  margin-top: 28px;
  color: var(--muted);
}

.forever {
  margin: 28px 0 8px;
  color: var(--aqua);
  font-family: Cinzel, serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 0 12px rgba(46, 184, 176, 0.45);
}

footer .forever {
  margin: 0 0 10px;
}

@media (max-width: 700px) {
  .connect-bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ip-row {
    flex-direction: column;
    align-items: flex-start;
  }
}