:root {
  color-scheme: dark;

  --bg: #061014;
  --bg-2: #09161b;

  --panel: rgba(12, 26, 32, .92);
  --panel-2: #0e1e25;

  --line: #203640;
  --line-soft: rgba(255, 255, 255, .065);

  --text: #f5f9f9;
  --muted: #8ea1a9;

  --cyan: #2fe0cf;
  --cyan-2: #62f7c5;
  --cyan-soft: rgba(47, 224, 207, .10);

  --red: #ff6678;
  --red-soft: rgba(255, 102, 120, .10);

  --orange: #ff9d59;

  --shadow:
    0 24px 80px
    rgba(0, 0, 0, .24);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-width: 320px;
  min-height: 100vh;

  background: var(--bg);

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


button,
a {
  font: inherit;
}


a {
  color: inherit;
}


/* =========================================================
   BACKGROUND
========================================================= */

.grid-bg {
  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .55;

  background:

    radial-gradient(
      circle at 70% 8%,
      rgba(47, 224, 207, .11),
      transparent 34rem
    ),

    radial-gradient(
      circle at 10% 78%,
      rgba(255, 102, 120, .06),
      transparent 28rem
    ),

    linear-gradient(
      rgba(255, 255, 255, .022) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, .022) 1px,
      transparent 1px
    );

  background-size:
    auto,
    auto,
    52px 52px,
    52px 52px;
}


/* =========================================================
   HEADER
========================================================= */

.topbar {
  height: 76px;

  padding:
    0
    max(
      22px,
      calc(
        (
          100vw - 1240px
        ) / 2
      )
    );

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 28px;

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(
      5,
      14,
      18,
      .90
    );

  backdrop-filter:
    blur(15px);

  position: sticky;

  top: 0;

  z-index: 20;
}


.brand {
  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;
}


.brand-mark {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      135deg,
      var(--cyan),
      var(--cyan-2)
    );

  color: #031311;

  font-weight: 1000;

  transform:
    skew(-6deg);

  box-shadow:
    0 0 28px
    rgba(
      47,
      224,
      207,
      .12
    );
}


.brand b,
.brand small {
  display: block;
}


.brand b {
  letter-spacing: .08em;
}


.brand small {
  margin-top: 2px;

  color: var(--muted);

  font-size: .68rem;

  letter-spacing: .14em;
}


.topnav {
  display: flex;

  justify-content: center;

  gap: 8px;
}


.topnav a {
  text-decoration: none;

  color: var(--muted);

  font-size: .78rem;

  font-weight: 800;

  padding:
    9px 11px;

  border:
    1px solid
    transparent;

  transition:
    .18s ease;
}


.topnav a:hover {
  color: var(--text);

  border-color:
    var(--line);

  background:
    rgba(
      255,
      255,
      255,
      .025
    );
}


.live-chip {
  display: flex;

  align-items: center;

  gap: 9px;

  color: var(--cyan);

  border:
    1px solid
    rgba(
      47,
      224,
      207,
      .30
    );

  padding:
    10px 13px;

  background:
    var(--cyan-soft);

  font-size: .72rem;

  font-weight: 950;

  letter-spacing: .08em;

  white-space: nowrap;
}


.live-chip i,
.pulse-label i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 0 5px
    rgba(
      47,
      224,
      207,
      .11
    );
}


.live-chip.offline {
  color: var(--red);

  border-color:
    rgba(
      255,
      102,
      120,
      .35
    );

  background:
    var(--red-soft);
}


.live-chip.offline i {
  background: var(--red);

  box-shadow: none;
}


/* =========================================================
   MAIN
========================================================= */

main {
  width:
    min(
      1240px,
      calc(
        100% - 40px
      )
    );

  margin:
    0 auto;

  padding:
    40px 0 46px;

  position: relative;
}


/* =========================================================
   HERO
========================================================= */

.hero-shell {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1.45fr
    )
    minmax(
      320px,
      .75fr
    );

  gap: 22px;

  margin-bottom: 22px;
}


.hero-copy,
.server-overview-card,
.panel,
.live-raids-section {
  border:
    1px solid
    var(--line);

  background:
    var(--panel);

  box-shadow:
    var(--shadow);
}


.hero-copy {
  padding: 42px;

  min-height: 330px;

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.hero-copy::after {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: -160px;
  top: -160px;

  border:
    1px solid
    rgba(
      47,
      224,
      207,
      .18
    );

  transform:
    rotate(45deg);
}


.eyebrow,
.raid-eyebrow {
  margin:
    0 0 10px;

  font-size: .72rem;

  font-weight: 950;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.eyebrow {
  color: var(--cyan);
}


.raid-eyebrow {
  color: var(--red);
}


h1,
h2,
p {
  margin-top: 0;
}


h1 {
  margin-bottom: 15px;

  font-size:
    clamp(
      2.7rem,
      6vw,
      5.5rem
    );

  line-height: .90;

  letter-spacing: -.06em;

  max-width: 800px;
}


h1 span {
  color: var(--cyan);
}


.hero-subtitle {
  color: var(--muted);

  line-height: 1.65;

  font-size: 1rem;

  max-width: 650px;
}


.server-badges {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 4px;
}


.server-badges span {
  border:
    1px solid
    rgba(
      47,
      224,
      207,
      .20
    );

  background:
    rgba(
      47,
      224,
      207,
      .065
    );

  color: #b9fff6;

  padding:
    7px 9px;

  font-size: .66rem;

  font-weight: 900;

  letter-spacing: .08em;
}


.hero-actions {
  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 25px;
}


.primary,
.secondary {
  border: 0;

  padding:
    13px 17px;

  font-weight: 950;

  letter-spacing: .05em;

  cursor: pointer;

  text-decoration: none;

  font-size: .78rem;
}


.primary {
  background:
    var(--cyan);

  color: #031311;
}


.secondary {
  background: transparent;

  color: var(--text);

  border:
    1px solid
    var(--line);
}


.primary:hover {
  filter:
    brightness(1.08);
}


.secondary:hover {
  border-color:
    rgba(
      47,
      224,
      207,
      .45
    );

  color:
    var(--cyan);
}


.last-update {
  color: var(--muted);

  font-size: .76rem;

  margin-left: 4px;
}


/* =========================================================
   SERVER OVERVIEW
========================================================= */

.server-overview-card {
  padding: 32px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;
}


.capacity-value {
  display: flex;

  align-items: baseline;

  gap: 12px;
}


.capacity-value strong {
  color: var(--cyan);

  font-size:
    clamp(
      4.3rem,
      8vw,
      7rem
    );

  line-height: .85;

  letter-spacing: -.08em;
}


.capacity-value span {
  color: #48616b;

  font-size: 2.4rem;
}


.capacity-value b {
  font-size: 2rem;
}


.capacity-label {
  color: var(--muted);

  font-size: .70rem;

  font-weight: 950;

  letter-spacing: .15em;

  margin:
    16px 0 18px;
}


.capacity-track {
  height: 7px;

  background: #182a31;

  overflow: hidden;
}


.capacity-track span {
  display: block;

  width: 0;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--cyan-2)
    );

  transition:
    width .45s ease;
}


.server-metrics {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  margin-top: 24px;

  border-top:
    1px solid
    var(--line-soft);
}


.server-metrics > div {
  padding:
    17px 12px 0;

  border-right:
    1px solid
    var(--line-soft);

  min-width: 0;
}


.server-metrics > div:first-child {
  padding-left: 0;
}


.server-metrics > div:last-child {
  border-right: 0;

  padding-right: 0;
}


.server-metrics small {
  display: block;

  color: var(--muted);

  font-size: .58rem;

  font-weight: 900;

  letter-spacing: .08em;

  margin-bottom: 7px;
}


.server-metrics strong {
  display: block;

  font-size: .88rem;

  overflow-wrap: anywhere;
}


/* =========================================================
   ERROR
========================================================= */

.notice {
  border:
    1px solid
    rgba(
      255,
      102,
      120,
      .42
    );

  background:
    rgba(
      255,
      102,
      120,
      .08
    );

  color: #ffc1ca;

  padding:
    14px 17px;

  margin-bottom: 22px;

  display: flex;

  gap: 12px;

  flex-wrap: wrap;
}


.notice b {
  font-size: .74rem;

  letter-spacing: .08em;
}


.notice[hidden] {
  display: none;
}


/* =========================================================
   LIVE RAIDS
========================================================= */

.live-raids-section {
  margin-bottom: 22px;

  padding: 28px;

  border-color:
    rgba(
      255,
      102,
      120,
      .36
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        255,
        102,
        120,
        .07
      ),
      rgba(
        12,
        26,
        32,
        .95
      ) 38%
    );

  position: relative;

  overflow: hidden;
}


.live-raids-section[hidden] {
  display: none;
}


.live-raids-section::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  right: -190px;
  top: -190px;

  border:
    1px solid
    rgba(
      255,
      102,
      120,
      .16
    );

  transform:
    rotate(45deg);

  pointer-events: none;
}


.section-head {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding-bottom: 20px;

  border-bottom:
    1px solid
    var(--line-soft);
}


.section-head h2 {
  margin: 0;

  font-size: 1.55rem;
}


.raid-live-status {
  display: flex;

  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(
      255,
      102,
      120,
      .34
    );

  background:
    rgba(
      255,
      102,
      120,
      .08
    );

  color: #ff9aaa;

  padding:
    10px 12px;

  font-size: .69rem;

  font-weight: 950;

  letter-spacing: .08em;
}


.raid-live-status i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--red);

  box-shadow:
    0 0 0 5px
    rgba(
      255,
      102,
      120,
      .11
    );
}


.live-raids-list {
  display: grid;

  gap: 16px;
}


.raid-card +
.raid-card {
  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      .09
    );

  margin-top: 10px;
}


.raid-matchup {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 28px;

  padding:
    28px 0;
}


.raid-side {
  display: flex;

  flex-direction: column;

  gap: 7px;
}


.raid-side small {
  color: var(--muted);

  font-size: .64rem;

  font-weight: 900;

  letter-spacing: .13em;
}


.raid-side strong {
  font-size:
    clamp(
      1.5rem,
      3vw,
      2.35rem
    );

  line-height: 1;
}


.raid-side span {
  color: var(--muted);

  font-size: .84rem;
}


.attacker-side strong {
  color: var(--red);
}


.defender-side {
  text-align: right;
}


.defender-side strong {
  color: var(--cyan);
}


.raid-vs {
  color: #5c747e;

  font-weight: 1000;

  font-size: .78rem;

  letter-spacing: .13em;
}


.raid-stats {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  border-top:
    1px solid
    var(--line-soft);

  border-bottom:
    1px solid
    var(--line-soft);
}


.raid-stats > div {
  padding:
    17px 15px;

  border-right:
    1px solid
    var(--line-soft);
}


.raid-stats > div:first-child {
  padding-left: 0;
}


.raid-stats > div:last-child {
  border-right: 0;
}


.raid-stats small {
  display: block;

  color: var(--muted);

  font-size: .60rem;

  font-weight: 900;

  letter-spacing: .09em;

  margin-bottom: 7px;
}


.raid-stats strong {
  font-size: .98rem;
}


.raid-methods {
  padding-top: 20px;
}


.raid-method-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        235px,
        1fr
      )
    );

  gap: 10px;
}


.raid-method {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 13px;

  border:
    1px solid
    var(--line);

  background:
    rgba(
      4,
      13,
      17,
      .48
    );
}


.method-icon {
  width: 42px;
  height: 42px;

  flex:
    0 0 42px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--line);

  background:
    var(--panel-2);

  font-size: .56rem;

  font-weight: 1000;

  letter-spacing: .06em;
}


.weapon-icon {
  color: var(--orange);
}


.pal-icon {
  color: var(--cyan);
}


.raid-method b,
.raid-method small {
  display: block;
}


.raid-method small {
  color: var(--muted);

  margin-top: 4px;

  font-size: .73rem;
}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard {
  display: grid;

  grid-template-columns:
    minmax(
      300px,
      .72fr
    )
    minmax(
      0,
      1.28fr
    );

  gap: 22px;

  align-items: start;
}


.panel {
  padding: 27px;

  min-height: 0;
}


.activity-panel {
  min-height: 350px;
}


.panel-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    var(--line);
}


.panel-head h2 {
  margin: 0;

  font-size: 1.35rem;
}


.count-badge {
  min-width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  color: var(--cyan);

  border:
    1px solid
    rgba(
      47,
      224,
      207,
      .26
    );

  background:
    var(--cyan-soft);

  font-weight: 950;
}


/* =========================================================
   PLAYERS + COMBAT
========================================================= */

.player-list,
.activity-list {
  display: grid;
}


.activity-list {
  max-height: 470px;

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    var(--line)
    transparent;
}


.player-row,
.activity-row {
  display: grid;

  align-items: center;

  gap: 12px;

  min-height: 72px;

  border-bottom:
    1px solid
    rgba(
      32,
      54,
      64,
      .70
    );
}


.player-row {
  grid-template-columns:
    40px
    minmax(
      0,
      1fr
    )
    auto
    auto;
}


.activity-row {
  grid-template-columns:
    40px
    minmax(
      0,
      1fr
    )
    auto;
}


.player-avatar,
.event-icon {
  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  background:
    var(--panel-2);

  border:
    1px solid
    var(--line);

  font-weight: 1000;

  font-size: .72rem;
}


.player-avatar,
.hit-icon {
  color: var(--cyan);
}


.kill-icon {
  color: var(--red);
}


.player-name b,
.player-name small,
.event-copy b,
.event-copy small {
  display: block;
}


.player-name small,
.event-copy small {
  color: var(--muted);

  font-size: .75rem;

  margin-top: 4px;
}


.event-copy {
  min-width: 0;
}


.event-copy b {
  overflow-wrap: anywhere;
}


.player-stat {
  text-align: right;

  min-width: 58px;
}


.player-stat small {
  display: block;

  color: var(--muted);

  font-size: .57rem;

  font-weight: 900;
}


.player-stat b {
  font-size: .82rem;
}


.pulse-label {
  color: var(--cyan);

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: .68rem;

  font-weight: 900;
}


.damage {
  color: var(--orange);

  font-size: .72rem;

  font-weight: 950;

  white-space: nowrap;
}


/* =========================================================
   EMPTY STATES
========================================================= */

.empty-state {
  min-height: 170px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  gap: 8px;

  color: var(--muted);

  line-height: 1.5;

  padding: 28px;
}


.empty-state b {
  color: var(--text);
}


.error-text {
  color: #ffc1ca;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  margin-top: 22px;

  padding:
    18px 2px 0;

  border-top:
    1px solid
    var(--line);

  display: flex;

  justify-content: space-between;

  gap: 20px;

  color: var(--muted);

  font-size: .72rem;
}


.site-footer span:first-child {
  color: var(--text);

  font-weight: 900;

  letter-spacing: .08em;
}


/* =========================================================
   TOAST
========================================================= */

.toast {
  position: fixed;

  right: 22px;
  bottom: 22px;

  padding:
    13px 17px;

  color: #031311;

  background:
    var(--cyan);

  font-weight: 900;

  transform:
    translateY(120px);

  opacity: 0;

  transition: .25s;

  z-index: 30;
}


.toast.show {
  transform:
    translateY(0);

  opacity: 1;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

  .topnav {
    display: none;
  }


  .topbar {
    grid-template-columns:
      1fr
      auto;
  }


  .hero-shell,
  .dashboard {
    grid-template-columns:
      1fr;
  }


  .server-overview-card {
    min-height: 240px;
  }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 700px) {

  main {
    width:
      min(
        100% - 24px,
        1240px
      );

    padding-top: 20px;
  }


  .hero-copy,
  .server-overview-card,
  .panel,
  .live-raids-section {
    padding: 22px;
  }


  .hero-copy {
    min-height: 290px;
  }


  h1 {
    font-size:
      clamp(
        2.5rem,
        15vw,
        4.3rem
      );
  }


  .raid-matchup {
    grid-template-columns:
      1fr;

    gap: 13px;
  }


  .raid-vs {
    display: none;
  }


  .defender-side {
    text-align: left;
  }


  .raid-stats {
    grid-template-columns:
      1fr
      1fr;
  }


  .raid-stats > div:nth-child(2) {
    border-right: 0;
  }


  .server-metrics {
    grid-template-columns:
      1fr
      1fr;
  }


  .server-metrics > div:nth-child(2) {
    border-right: 0;
  }


  .server-metrics > div:last-child {
    grid-column:
      1 / -1;

    border-top:
      1px solid
      var(--line-soft);

    margin-top: 12px;

    padding-top: 12px;
  }


  .site-footer {
    flex-direction: column;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .topbar {
    height: 66px;

    padding:
      0 14px;
  }


  .brand small {
    display: none;
  }


  .brand-mark {
    width: 38px;
    height: 38px;
  }


  .live-chip {
    font-size: .62rem;

    padding: 9px;
  }


  .hero-actions {
    align-items: stretch;
  }


  .primary,
  .secondary {
    text-align: center;

    flex:
      1 1 auto;
  }


  .last-update {
    width: 100%;

    margin:
      4px 0 0;
  }


  .raid-stats {
    grid-template-columns:
      1fr;
  }


  .raid-stats > div,
  .raid-stats > div:first-child {
    padding:
      13px 0;

    border-right: 0;

    border-bottom:
      1px solid
      var(--line-soft);
  }


  .raid-stats > div:last-child {
    border-bottom: 0;
  }


  .player-row {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      )
      auto;
  }


  .player-stat:last-child {
    display: none;
  }


  .activity-row {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      );

    padding:
      10px 0;
  }


  .damage {
    grid-column: 2;
  }

}