html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #c8a536 #0b1118;
}
html::-webkit-scrollbar { width: 11px; height: 11px; }
html::-webkit-scrollbar-track { background: #0b1118; border-left: 1px solid #ffffff06; }
html::-webkit-scrollbar-thumb {
  border: 3px solid #0b1118;
  border-radius: 12px;
  background: linear-gradient(180deg, #f3d264, #ad8527);
}
html::-webkit-scrollbar-thumb:hover { background: #f2d05b; }
html::-webkit-scrollbar-corner { background: #0b1118; }
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-width: auto; scrollbar-color: auto; }
}
:root { --header-height: 76px; }
.header, body:has(.home-intro) .header { position: fixed; inset: 0 0 auto; z-index: 60; background: transparent; border: 0; }
#main { padding-top: var(--header-height); }
body:has(.home-intro) #main { padding-top: 0; }
.header-inner {
  height: var(--header-height);
  margin-top: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: height .34s cubic-bezier(.2,.8,.2,1), margin-top .34s, padding .34s, background .3s, border-color .3s, box-shadow .3s;
}
.header.is-scrolled .header-inner {
  height: 60px;
  margin-top: 10px;
  padding: 0 18px;
  background: linear-gradient(120deg, #101820ed, #090f16f5);
  border-color: #c8d3e21c;
  box-shadow: 0 10px 35px #0005;
  backdrop-filter: blur(14px);
}
.header.is-scrolled .brand > .server-emblem { width: 44px; height: 44px; }
.header .mobile-nav { width: min(600px, calc(100% - 36px)); margin: 8px auto 0; background: #0c141df5; border: 1px solid #ffffff1a; border-radius: 12px; box-shadow: 0 12px 30px #0005; }
.header .desktop-nav a { text-shadow: 0 2px 10px #0008; }
.header .desktop-nav a.active::after { top: calc(50% + 16px); bottom: auto; }
.header .brand { gap: 0; }
.header .profile-button { background: #080e15d9; transition: background .2s; }
.header .profile-button:hover { background: #101821ed; }
.header .brand > .server-emblem { width: 62px; height: 62px; transition: width .34s cubic-bezier(.2,.8,.2,1), height .34s cubic-bezier(.2,.8,.2,1); }
.home-intro .hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: clamp(180px, 26vh, 280px);
  z-index: 0;
  background: linear-gradient(180deg, #070c12ed 0%, #070c12b8 28%, #070c1259 62%, transparent 100%);
  pointer-events: none;
}
.hero-title img {
  filter: brightness(.94) saturate(.82) sepia(.12) contrast(.96) drop-shadow(0 3px 5px #070a0d80);
}
@media (min-width: 761px) {
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .header .brand { justify-self: start; }
  .header-actions { justify-self: end; }
}
@media (min-width: 1360px) and (max-width: 1599px) {
  .hero-copy .hero-title { width: min(39vw, 580px); }
}
@media (min-width: 1600px) {
  .hero-copy .hero-title { width: 590px; }
}
.hero-inner .activity-panel {
  background: linear-gradient(145deg, #0a111ac7, #080e15d9);
  border-color: #d8e2ee33;
  box-shadow: 0 12px 32px #0003;
  backdrop-filter: none;
}
.activity-panel .live-label { display: flex; gap: 7px; font-size: 10px; font-weight: 600; color: #7af193; white-space: nowrap; }
.activity-panel .live-label .live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  background: #58e57a;
  animation: online-breathe 2.6s ease-in-out infinite;
}
.activity-panel .live-label .live-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid #69ec8b;
  border-radius: 50%;
  animation: online-ring 2.6s ease-out infinite;
}
.player-count { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.activity-panel[data-server-state="offline"] .live-label { color: #efa1a1; }
.activity-panel[data-server-state="offline"] .live-dot { background: #e47575; }
.activity-panel:is([data-server-state="loading"], [data-server-state="unknown"], [data-server-state="disabled"]) .live-label { color: #d6c18c; }
.activity-panel:is([data-server-state="loading"], [data-server-state="unknown"], [data-server-state="disabled"]) .live-dot { background: #cbb16c; }
.activity-panel[data-server-state]:not([data-server-state="online"]) .live-label .live-dot { animation: none; box-shadow: none; }
.activity-panel[data-server-state]:not([data-server-state="online"]) .live-dot::after { display: none; }
.news-list { display: grid; gap: 28px; }
.news-list .article-card { width: 100%; }
.article-art.article-image { background: none; position: relative; overflow: hidden; }
.article-image img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.article-meta time { color: var(--muted); font-size: 10px; }
.news-back { justify-self: start; }
.empty-news { color: var(--muted); font-size: 12px; line-height: 1.8; padding: 16px 0; }

@property --discord-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hero-buttons .discord-button,
.hero-buttons .discord-button:hover,
.hero-buttons .discord-button:active {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: none;
  background: #10161df2;
  color: #f5edd7;
  border: 1px solid #c3a23d70;
  box-shadow: 0 0 18px #d4a83112;
  transition: background .2s, box-shadow .2s;
}
.hero-buttons .discord-button:hover { background: #201f18; box-shadow: 0 0 23px #e9bb2c26; }
.discord-button::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--discord-angle), #c59f2820 0deg 245deg, #d8aa3c 280deg, #fff3c4 305deg, #ffd84f 325deg, #c59f2820 355deg);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: discord-border-orbit var(--discord-neon-duration, 6.5s) linear infinite;
  pointer-events: none;
}
.discord-button-icon { display: inline-flex; align-items: center; }
.discord-button .discord-button-icon .icon { width: 19px; height: 19px; color: #ffda3d; transform-origin: center; }
.discord-button:focus-visible { outline: 2px solid #ffe6a0; outline-offset: 4px; }
.discord-button:is(:hover, :focus-visible) .discord-button-icon .icon {
  animation: discord-icon-greet .75s cubic-bezier(.2, .8, .3, 1);
}
.discord-button .discord-button-icon circle { transform-box: fill-box; transform-origin: center; }
.discord-button:is(:hover, :focus-visible) .discord-button-icon circle:last-of-type {
  animation: discord-icon-wink .75s ease;
}
@keyframes discord-border-orbit { to { --discord-angle: 360deg; } }
@keyframes discord-icon-greet {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  22% { transform: translateY(-3px) rotate(-10deg) scale(1.1); }
  45% { transform: translateY(-2px) rotate(8deg) scale(1.13); }
  72% { transform: translateY(1px) rotate(-4deg) scale(1.03, .97); }
}
@keyframes discord-icon-wink {
  0%, 38%, 76%, 100% { transform: scaleY(1); }
  50%, 62% { transform: scaleY(.12); }
}
.hero-particles { animation: sparks-enter 1.7s ease-out both; }
.hero-particles span,
.hero-particles span:nth-child(n) {
  background: #ffe451;
  box-shadow: 0 0 2px #8e5900, 0 0 8px #ffd21dd9, 0 0 18px #ffbd3f70;
}

/* The scene settles first; the title, copy and controls follow in sequence. */
.hero-sequence, .hero-panel-entry { animation: none; }
.scene-preparing .hero-sequence, .scene-preparing .hero-panel-entry { opacity: 0; }
.scene-ready .hero-sequence {
  animation: hero-content-enter .95s cubic-bezier(.16, 1, .3, 1) var(--entrance-delay, 0ms) both;
}
.scene-ready .hero-panel-entry {
  animation: activity-enter 1.05s cubic-bezier(.16, 1, .3, 1) .5s both;
}
.hero.scene-ready .hero-art { animation: panorama-enter 1.8s cubic-bezier(.16, 1, .3, 1) both; }
.reveal-waiting, .shop-banner.reveal-waiting {
  translate: 0 24px;
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms), translate .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms), transform .2s, border-color .2s, box-shadow .2s;
}
.reveal-waiting.is-visible, .shop-banner.reveal-waiting.is-visible,
.reveal-waiting:focus-within { translate: 0 0; }

/* A slightly smaller panorama fades into the page on every edge. */
.page-hero {
  --subpage-height: clamp(280px, 20vw, 360px);
  display: flex;
  align-items: center;
  min-height: var(--subpage-height);
  padding: 40px 0;
  background: transparent;
  border-bottom: 0;
}
.page-hero::before {
  --panorama-opacity: .85;
  inset: 0 0 0 auto;
  width: calc(var(--subpage-height) * 3);
  opacity: var(--panorama-opacity);
  background-image: url('assets/hero-minecraft.png');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 89%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 69%, transparent);
  mask-composite: intersect;
  animation: subpage-panorama-enter 1.3s ease-out both;
}
.page-hero::after {
  content: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { max-width: 620px; font-size: clamp(30px, 3vw, 44px); }
.page-hero p { max-width: 500px; color: #c4cdda; }
.page-hero .breadcrumbs { margin-bottom: 20px; }

@keyframes hero-content-enter {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes activity-enter {
  from { opacity: 0; translate: 22px 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes panorama-enter {
  from { opacity: .15; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes subpage-panorama-enter { from { opacity: 0; } to { opacity: var(--panorama-opacity); } }
@keyframes sparks-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes online-breathe {
  0%, 100% { opacity: .7; box-shadow: 0 0 5px #4ce37840; }
  45% { opacity: 1; box-shadow: 0 0 11px #4ce3788c; }
}
@keyframes online-ring {
  0% { transform: scale(.65); opacity: 0; }
  15% { opacity: .5; }
  75%, 100% { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 760px) {
  :root { --header-height: 72px; }
  .header .brand > .server-emblem { width: 58px; height: 58px; }
  .header.is-scrolled .header-inner { height: 56px; margin-top: 6px; padding: 0 10px; }
  .header.is-scrolled .brand > .server-emblem { width: 42px; height: 42px; }
  .hero-particles span:nth-child(-n + 24) { display: block; }
  .hero-particles span:nth-child(n + 25) { display: none; }
  .page-hero { --subpage-height: 280px; padding: 34px 0; }
  .page-hero::before {
    --panorama-opacity: .35;
    mask-image: linear-gradient(90deg, transparent, #000 28%, #000 89%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 60%, transparent);
  }
  .page-hero h1 { max-width: 85%; }
  .page-hero p { max-width: 85%; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header-inner, .header .brand > .server-emblem { transition: none; }
  .hero.scene-ready .hero-art, .scene-ready .hero-sequence, .scene-ready .hero-panel-entry,
  .page-hero::before, .hero-particles { animation: none; }
  .scene-preparing .hero-sequence, .scene-preparing .hero-panel-entry { opacity: 1; }
  .reveal-waiting, .shop-banner.reveal-waiting { transition: none; translate: none; }
  .activity-panel .live-label .live-dot, .activity-panel .live-label .live-dot::after { animation: none; }
  .activity-panel .live-label .live-dot::after { display: none; }
  .discord-button::before { animation: none; }
  .discord-button:is(:hover, :focus-visible) .discord-button-icon .icon,
  .discord-button:is(:hover, :focus-visible) .discord-button-icon circle:last-of-type { animation: none; }
}