/*
 * SOMC
 * Global Styles
 * Rose Pine
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --base: #191724;
  --surface: #1f1d2e;
  --overlay: #26233a;

  --muted: #6e6a86;
  --text: #e0def4;

  --love: #eb6f92;
  --gold: #f6c177;
  --pine: #31748f;
  --foam: #9ccfd8;
  --iris: #c4a7e7;
}

html {
  width: 100%;
  min-height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;

  background: var(--base);
  color: var(--text);

  font-family: "Courier New", monospace;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--love);
  color: var(--base);
}
/*
 * SOMC
 * Global Navigation
 */

/* =========================================
   NAVIGATION
========================================= */

.nav {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  height: 80px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 5%;

  border-bottom:
    1px solid
    rgba(224, 222, 244, 0.06);

  background:
    linear-gradient(
      to bottom,
      rgba(25, 23, 36, 0.35),
      transparent
    );
}


/* =========================================
   BRAND
========================================= */

.nav-brand {
  color: var(--text);

  font-family:
    Impact,
    "Arial Black",
    sans-serif;

  font-size: 26px;

  line-height: 1;

  letter-spacing: -0.04em;

  text-decoration: none;
}

.nav-brand span {
  color: var(--love);
}


/* =========================================
   LINKS
========================================= */

.nav-links {
  display: flex;
  align-items: center;

  gap: 32px;
}

.nav-links a {
  position: relative;

  color: var(--muted);

  font-size: 10px;
  font-weight: bold;

  letter-spacing: 0.12em;

  text-decoration: none;
  text-transform: uppercase;

  transition:
    color 0.2s ease;
}

.nav-links a:hover {
  color: var(--text);
}


/* =========================================
   LINK INDICATOR
========================================= */

.nav-links a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 1px;

  background: var(--love);

  box-shadow:
    0 0 8px
    rgba(235, 111, 146, 0.45);

  transition:
    width 0.2s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a.active {
  color: var(--text);
}

/* =========================================
   COPY BOX
========================================= */
#server-link {
    text-decoration: none;
    cursor: pointer;
    color: #e0def4;
}

#server-link .copy-icon {
    display: inline-block;
    margin-left: 3px;
    font-weight: bold;
    color: #eb6f92;
}

#server-link .copy-icon {
    color: #9ccfd8;
}


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

@media (max-width: 600px) {

  .nav {
    height: 70px;

    padding:
      0 6%;
  }

  .nav-brand {
    font-size: 23px;
  }

  .nav-links {
    gap: 18px;
  }

  .nav-links a {
    font-size: 9px;

    letter-spacing: 0.08em;
  }

}
/*
 * SOMC
 * Player Statistics
 * Rose Pine
 */


/* =========================================
   PAGE
========================================= */

.stats-page {
  overflow-x: hidden;
}

.stats-screen {
  position: relative;

  min-height: 100vh;

  display: flex;
  flex-direction: column;

  padding-top: 80px;

  background: var(--base);

  overflow: hidden;
}


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

.stats-grid {
  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: 0.12;

  background-image:
    linear-gradient(
      rgba(224, 222, 244, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(224, 222, 244, 0.035) 1px,
      transparent 1px
    );

  background-size: 32px 32px;
}

.stats-glow {
  position: fixed;

  width: 700px;
  height: 700px;

  top: 100px;
  left: 50%;

  transform: translateX(-50%);

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(196, 167, 231, 0.08) 0%,
      rgba(196, 167, 231, 0.025) 35%,
      transparent 70%
    );
}


/* =========================================
   CONTENT
========================================= */

.stats-content {
  position: relative;

  z-index: 2;

  width: 90%;
  max-width: 1800px;

  margin: 0 auto;

  padding: 48px 0 30px;

  flex: 1;
}


/* =========================================
   HEADING
========================================= */

.stats-heading {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 30px;

  margin-bottom: 30px;
}

.stats-eyebrow {
  display: block;

  margin-bottom: 8px;

  color: var(--love);

  font-size: 10px;
  font-weight: bold;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stats-heading h1 {
  color: var(--text);

  font-family:
    Impact,
    "Arial Black",
    sans-serif;

  font-size: clamp(32px, 5vw, 54px);

  font-weight: normal;

  letter-spacing: -0.03em;
}

.stats-heading p {
  margin-top: 8px;

  color: var(--muted);

  font-size: 11px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.stats-meta {
  display: flex;
  flex-direction: column;

  align-items: flex-end;

  gap: 5px;

  color: var(--muted);

  font-size: 9px;
  font-weight: bold;

  letter-spacing: 0.12em;
}


/* =========================================
   CONTROLS
========================================= */

.stats-controls {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;
}

.stats-search {
  flex: 1;

  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;

  height: 42px;

  padding: 0 14px;

  border:
    1px solid
    rgba(224, 222, 244, 0.10);

  background: rgba(31, 29, 46, 0.7);

  color: var(--love);
}

.stats-search > span {
  color: var(--love);

  font-weight: bold;
}

.stats-search input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--text);

  font-family: inherit;
  font-size: 11px;

  letter-spacing: 0.04em;
}

.stats-search input::placeholder {
  color: var(--muted);
}

.stats-button {
  height: 42px;

  padding: 0 16px;

  border:
    1px solid
    rgba(224, 222, 244, 0.10);

  background: var(--surface);

  color: var(--foam);

  font-family: inherit;

  font-size: 10px;
  font-weight: bold;

  letter-spacing: 0.1em;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.stats-button:hover {
  border-color: var(--love);

  background: var(--overlay);

  color: var(--text);
}


/* =========================================
   TABLE
========================================= */

.stats-table-wrapper {
  position: relative;

  width: 100%;

  max-height: 65vh;

  overflow: auto;

  border:
    1px solid
    rgba(224, 222, 244, 0.10);

  background:
    rgba(31, 29, 46, 0.82);

  scrollbar-color:
    var(--muted)
    var(--surface);

  scrollbar-width: thin;
}

.stats-table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.stats-table-wrapper::-webkit-scrollbar-track {
  background: var(--surface);
}

.stats-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--muted);
}

.stats-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--iris);
}

#stats-table {
  width: max-content;

  min-width: 100%;

  border-collapse: collapse;

  color: var(--text);

  font-size: 10px;
}

#stats-table th {
  position: sticky;

  top: 0;

  z-index: 5;

  padding: 13px 16px;

  border-bottom:
    1px solid
    rgba(224, 222, 244, 0.12);

  background: var(--overlay);

  color: var(--foam);

  font-size: 9px;
  font-weight: bold;

  letter-spacing: 0.1em;

  text-align: right;

  text-transform: uppercase;

  white-space: nowrap;

  cursor: pointer;

  user-select: none;
}

#stats-table th:hover {
  color: var(--love);
}

#stats-table td {
  padding: 10px 16px;

  border-bottom:
    1px solid
    rgba(224, 222, 244, 0.055);

  color: var(--text);

  text-align: right;

  white-space: nowrap;
}

#stats-table tbody tr {
  transition:
    background 0.15s ease;
}

#stats-table tbody tr:hover {
  background:
    rgba(196, 167, 231, 0.055);
}


/* =========================================
   PLAYER COLUMN
========================================= */

#stats-table th:first-child,
#stats-table td:first-child {
  position: sticky;

  left: 0;

  z-index: 4;

  text-align: left;
}

#stats-table th:first-child {
  z-index: 7;

  background: var(--overlay);
}

#stats-table td:first-child {
  background: var(--surface);

  color: var(--text);

  font-weight: bold;
}

#stats-table tbody tr:hover td:first-child {
  background:
    #252238;
}

.player-cell {
  display: flex;

  align-items: center;

  gap: 10px;
}

.player-head {
  width: 24px;
  height: 24px;

  image-rendering: pixelated;

  border:
    1px solid
    rgba(224, 222, 244, 0.08);
}


/* =========================================
   SORT INDICATOR
========================================= */

.sort-indicator {
  margin-left: 6px;

  color: var(--love);
}


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

#stats-loading {
  padding: 50px;

  color: var(--muted);

  font-size: 10px;

  letter-spacing: 0.12em;

  text-align: center;
}

#stats-error {
  padding: 30px;

  color: var(--love);

  font-size: 11px;

  text-align: center;
}


/* =========================================
   COLUMN MODAL
========================================= */

.columns-modal {
  position: fixed;

  inset: 0;

  z-index: 200;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    rgba(25, 23, 36, 0.78);

  backdrop-filter: blur(4px);
}

.columns-modal[hidden] {
  display: none;
}

.columns-panel {
  width: min(600px, 100%);

  max-height: 80vh;

  overflow: hidden;

  border:
    1px solid
    rgba(224, 222, 244, 0.12);

  background: var(--surface);

  box-shadow:
    0 20px 80px
    rgba(0, 0, 0, 0.45);
}

.columns-panel-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 20px;

  border-bottom:
    1px solid
    rgba(224, 222, 244, 0.08);
}

.columns-panel-header h2 {
  color: var(--text);

  font-family:
    Impact,
    "Arial Black",
    sans-serif;

  font-size: 26px;

  font-weight: normal;
}

.columns-close {
  width: 32px;
  height: 32px;

  border:
    1px solid
    rgba(224, 222, 244, 0.10);

  background: transparent;

  color: var(--muted);

  font-family: inherit;

  font-size: 20px;

  cursor: pointer;
}

.columns-close:hover {
  color: var(--love);

  border-color: var(--love);
}

.column-options {
  max-height: calc(80vh - 110px);

  overflow-y: auto;

  padding: 12px;
}

.column-option {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px;

  color: var(--text);

  font-size: 10px;

  letter-spacing: 0.04em;

  cursor: pointer;
}

.column-option:hover {
  background: var(--overlay);
}

.column-option input {
  width: 14px;
  height: 14px;

  accent-color: var(--love);

  cursor: pointer;
}


/* =========================================
   COLUMN SEARCH
========================================= */

.column-search {
  display: flex;
  align-items: center;

  width: 100%;

  margin-bottom: 14px;

  border: 1px solid rgba(224, 222, 244, 0.10);

  background: rgba(25, 23, 36, 0.65);

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.column-search > span {
  flex: 0 0 auto;

  padding-left: 12px;

  color: var(--love);

  font-size: 12px;
  font-weight: bold;
}

.column-search input {
  width: 100%;

  padding: 11px 12px 11px 8px;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--text);

  font-family: "Courier New", monospace;

  font-size: 11px;
  letter-spacing: 0.04em;

  text-transform: uppercase;
}

.column-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.column-search:focus-within {
  border-color: rgba(235, 111, 146, 0.45);

  background: rgba(38, 35, 58, 0.8);

  box-shadow:
    0 0 0 1px rgba(235, 111, 146, 0.08),
    0 0 16px rgba(235, 111, 146, 0.05);
}


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

.map-footer {
  position: relative;

  z-index: 2;

  width: 90%;
  max-width: 1800px;

  margin: 0 auto;

  padding: 24px 0;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-top:
    1px solid
    rgba(224, 222, 244, 0.06);

  color: var(--muted);

  font-size: 9px;
  font-weight: bold;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.map-footer a {
  color: inherit;

  text-decoration: none;

  transition:
    color 0.2s ease;
}

.map-footer a:hover {
  color: var(--love);
}


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

@media (max-width: 700px) {

  .stats-screen {
    padding-top: 70px;
  }

  .stats-content {
    width: 88%;

    padding-top: 35px;
  }

  .stats-heading {
    display: block;
  }

  .stats-meta {
    align-items: flex-start;

    margin-top: 15px;
  }

  .stats-controls {
    flex-direction: column;

    align-items: stretch;
  }

  .stats-button {
    width: 100%;
  }

  .stats-table-wrapper {
    max-height: 60vh;
  }

  .map-footer {
    width: 88%;
  }

}