:root {
  color-scheme: dark;

  --font-ui: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-pixel: "Minecraft Seven", "Minecraft", "Monocraft", "Pixelify Sans", "Courier New", ui-monospace, monospace;

  --ink: #090c09;
  --ink-soft: #111711;
  --night: #0c1417;
  --night-blue: #14242a;
  --surface: #171d17;
  --surface-raised: #222a21;
  --surface-soft: #2b342a;
  --surface-deep: #0f140f;
  --surface-black: #090d09;

  --stone-100: #d3d6ce;
  --stone-300: #a7ada2;
  --stone-500: #777f74;
  --stone-700: #485046;
  --stone-800: #30372f;

  --grass-100: #c7f29e;
  --grass-300: #8fd45d;
  --grass-400: #70b84b;
  --grass-500: #4f9636;
  --grass-700: #2f6426;
  --grass-900: #183b18;

  --dirt-300: #a97856;
  --dirt-500: #79533b;
  --dirt-700: #533522;

  --water-300: #77b9e6;
  --water-500: #4389bf;
  --water-700: #285e91;

  --gold-300: #ffe27b;
  --gold-500: #e5b93e;
  --gold-700: #9e7620;

  --redstone-300: #f48b7f;
  --redstone-500: #d95043;
  --redstone-700: #853128;

  --nether-300: #ee8f76;
  --nether-500: #b54d3e;
  --end-300: #d9bee8;
  --end-500: #9572ae;

  --text: #f4f7ef;
  --muted: #b1bbae;
  --faint: #7f8c7c;
  --border: #3e493c;
  --border-bright: #606f5d;
  --shadow: rgba(0, 0, 0, 0.46);
  --shadow-deep: rgba(0, 0, 0, 0.7);

  --pixel-shadow-sm: 0 3px 0 var(--shadow-deep);
  --pixel-shadow: 0 5px 0 var(--shadow-deep);
  --pixel-shadow-lg: 0 8px 0 rgba(0, 0, 0, 0.42);

  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--grass-500) var(--surface-deep);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--night);
}

body,
button,
input,
select {
  font: inherit;
}

button,
input,
select {
  border-radius: 0;
}

button,
select {
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.72;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
tr:focus-visible,
a:focus-visible {
  outline: 3px solid var(--grass-300);
  outline-offset: 3px;
}

::selection {
  color: #0b1309;
  background: var(--grass-300);
}

::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

::-webkit-scrollbar-track {
  border-left: 2px solid #090c09;
  background: var(--surface-deep);
}

::-webkit-scrollbar-thumb {
  border: 2px solid #090c09;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 30%, transparent 30% 100%),
    var(--grass-500);
}

::-webkit-scrollbar-corner {
  background: var(--surface-deep);
}

a {
  color: inherit;
  text-decoration: none;
}

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

h1,
h2,
h3,
.brand strong,
.metric-value,
.table-stat,
.detail-stat strong,
.rank-label strong,
.world-status-card strong,
.button,
.connection-badge,
.count-badge,
.panel-chip {
  font-family: var(--font-pixel);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

h1 {
  max-width: 13ch;
  margin-bottom: 1rem;
  font-size: clamp(2.65rem, 6vw, 5.8rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.075em;
  text-shadow:
    0 3px 0 #263222,
    0 6px 0 rgba(0, 0, 0, 0.58);
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 900;
  letter-spacing: -0.035em;
}

h3 {
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 900;
}

code {
  color: var(--grass-100);
  font-family: var(--font-pixel);
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 999;
  border: 2px solid #080b08;
  padding: 0.7rem 0.85rem;
  color: #10170d;
  background: var(--grass-300);
  box-shadow: var(--pixel-shadow-sm);
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  font-weight: 900;
  transform: translateY(-180%);
  transition: transform 130ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------- */
/* World backdrop                                                             */
/* -------------------------------------------------------------------------- */

.world-backdrop {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, #101d24 0%, #182a2d 38%, #152118 72%, #0b0f0b 100%);
  background-size: 32px 32px, 32px 32px, auto;
}

.world-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(137, 199, 238, 0.16), transparent 27rem),
    radial-gradient(circle at 84% 9%, rgba(143, 212, 93, 0.11), transparent 30rem),
    linear-gradient(180deg, transparent 0 65%, rgba(0, 0, 0, 0.34) 100%);
}

.sky-stars {
  position: absolute;
  inset: 0 0 auto 0;
  height: 37rem;
  opacity: 0.42;
  background-image:
    radial-gradient(circle, #d9edf5 0 1px, transparent 1.5px),
    radial-gradient(circle, #d9edf5 0 1px, transparent 1.5px),
    radial-gradient(circle, #9cc5d4 0 1px, transparent 1.5px);
  background-position: 20px 30px, 130px 90px, 70px 145px;
  background-size: 180px 180px, 260px 260px, 210px 210px;
}

.cloud {
  position: absolute;
  height: 1.7rem;
  opacity: 0.13;
  background: #d6e4e5;
  box-shadow:
    1.7rem 0 0 #d6e4e5,
    3.4rem 0 0 #d6e4e5,
    5.1rem 0 0 #d6e4e5,
    1.7rem -1.7rem 0 #d6e4e5,
    3.4rem -1.7rem 0 #d6e4e5,
    3.4rem 1.7rem 0 #d6e4e5;
}

.cloud-one {
  top: 9rem;
  left: 8vw;
  transform: scale(1.12);
}

.cloud-two {
  top: 14rem;
  right: 15vw;
  transform: scale(0.78);
}

.mountain {
  position: absolute;
  right: -8vw;
  bottom: 7rem;
  width: 66vw;
  height: 23rem;
  opacity: 0.2;
  clip-path: polygon(
    0 100%,
    0 72%,
    8% 72%,
    8% 60%,
    17% 60%,
    17% 45%,
    25% 45%,
    25% 29%,
    34% 29%,
    34% 43%,
    45% 43%,
    45% 18%,
    54% 18%,
    54% 34%,
    65% 34%,
    65% 53%,
    75% 53%,
    75% 42%,
    84% 42%,
    84% 63%,
    93% 63%,
    93% 73%,
    100% 73%,
    100% 100%
  );
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, var(--stone-500) 0 38%, #44503f 38% 62%, var(--dirt-700) 62% 100%);
}

.mountain-back {
  right: auto;
  left: -12vw;
  bottom: 5rem;
  width: 72vw;
  opacity: 0.1;
  transform: scaleX(-1) scaleY(0.82);
}

.world-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7.5rem;
  opacity: 0.38;
  border-top: 0.65rem solid var(--grass-500);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.08) 75%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.08) 75%),
    var(--dirt-700);
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
}

/* -------------------------------------------------------------------------- */
/* Header, brand and actions                                                   */
/* -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 4px solid #080b08;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 18px),
    rgba(13, 18, 13, 0.91);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

.header-inner,
.page-shell {
  width: min(1480px, calc(100% - 2rem));
  margin-inline: auto;
}

.header-inner {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.9rem;
}

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

.brand strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 #000;
  white-space: nowrap;
}

.brand-kicker,
.eyebrow,
.card-label,
.status-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--grass-300);
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.brand-kicker {
  margin-bottom: 0.15rem;
  color: var(--muted);
  font-size: 0.56rem;
}

.brand-cube {
  position: relative;
  display: block;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.52));
}

.brand-cube span {
  position: absolute;
  display: block;
}

.brand-cube-front {
  right: 0.16rem;
  bottom: 0;
  width: 1.8rem;
  height: 1.72rem;
  border: 2px solid #101610;
  background:
    linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, 0.16) 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, 0.14) 45% 55%, transparent 55%),
    var(--dirt-500);
}

.brand-cube-side {
  bottom: 0.22rem;
  left: 0.08rem;
  width: 0.82rem;
  height: 1.68rem;
  border: 2px solid #101610;
  border-right: 0;
  background: var(--dirt-700);
  transform: skewY(-29deg);
}

.brand-cube-top {
  top: 0.18rem;
  right: 0.18rem;
  width: 1.8rem;
  height: 0.85rem;
  border: 2px solid #101610;
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 25%, transparent 25% 50%, rgba(0, 0, 0, 0.12) 50% 75%, transparent 75%),
    var(--grass-400);
  transform: skewY(-27deg);
  transform-origin: right bottom;
}

.header-actions,
.players-toolbar,
.heading-row,
.profile-title-row,
.section-title-row,
.vital-heading,
.panel-title-group,
.status-card-topline,
.status-card-main {
  display: flex;
  align-items: center;
}

.header-actions {
  flex: 0 0 auto;
  gap: 0.7rem;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 2px solid #090c09;
  padding: 0.68rem 0.95rem;
  color: var(--text);
  background: var(--surface-raised);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.12),
    inset -2px -2px 0 rgba(0, 0, 0, 0.34),
    var(--pixel-shadow-sm);
  font-size: 0.71rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75);
  transition: filter 110ms ease, transform 110ms ease, box-shadow 110ms ease;
}

.button::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.button:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.button:active:not(:disabled),
.button.is-busy {
  transform: translateY(3px);
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.22),
    inset -2px -2px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 #050705;
}

.button-primary {
  color: #0d160a;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 25%, transparent 25% 100%),
    var(--grass-400);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.button-secondary {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 22%, transparent 22% 100%),
    var(--surface-soft);
}

.button-ghost {
  color: var(--muted);
  background: var(--surface-deep);
}

.spinner {
  width: 0.92rem;
  height: 0.92rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 680ms steps(8, end) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.connection-badge,
.dimension-badge,
.count-badge,
.panel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 2px solid #090c09;
  padding: 0.42rem 0.58rem;
  color: var(--muted);
  background: var(--surface-deep);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.06),
    inset -1px -1px 0 rgba(0, 0, 0, 0.35);
  font-size: 0.63rem;
  font-weight: 900;
  white-space: nowrap;
}

.status-dot,
.footer-dot,
.status-pulse {
  width: 0.56rem;
  height: 0.56rem;
  flex: 0 0 auto;
  background: var(--faint);
  box-shadow: 0 0 0 3px rgba(127, 140, 124, 0.14);
}

.connection-badge.is-online {
  color: var(--grass-100);
}

.connection-badge.is-online .status-dot {
  background: var(--grass-300);
  box-shadow:
    0 0 0 3px rgba(143, 212, 93, 0.16),
    0 0 12px rgba(143, 212, 93, 0.72);
}

.connection-badge.is-warning {
  color: var(--gold-300);
}

.connection-badge.is-warning .status-dot {
  background: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(229, 185, 62, 0.16);
}

.connection-badge.is-offline {
  color: var(--redstone-300);
}

.connection-badge.is-offline .status-dot {
  background: var(--redstone-500);
  box-shadow: 0 0 0 3px rgba(217, 80, 67, 0.16);
}

.connection-badge.is-loading .status-dot {
  animation: pulse 1s steps(2, end) infinite;
}

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

/* -------------------------------------------------------------------------- */
/* Hero and scanner status                                                    */
/* -------------------------------------------------------------------------- */

.page-shell {
  position: relative;
  padding: 2.7rem 0 1.8rem;
}

.world-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(21rem, 0.65fr);
  align-items: end;
  gap: clamp(1.4rem, 4vw, 4.5rem);
  margin: 1.5rem 0 2.2rem;
}

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

.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-left: 0.35rem solid var(--grass-400);
  padding-left: 0.65rem;
}

.hero-description {
  max-width: 49rem;
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-size: clamp(0.96rem, 1.8vw, 1.1rem);
  line-height: 1.7;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.hero-tags > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(96, 111, 93, 0.72);
  padding: 0.45rem 0.62rem;
  color: var(--muted);
  background: rgba(9, 13, 9, 0.56);
  font-size: 0.69rem;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.025);
}

.tag-icon {
  color: var(--grass-300);
  font-family: var(--font-pixel);
  font-size: 0.65rem;
}

.world-status-card {
  position: relative;
  overflow: hidden;
  border: 3px solid #090c09;
  padding: 1rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(145deg, rgba(112, 184, 75, 0.1), transparent 52%),
    var(--surface);
  background-size: 16px 16px, 16px 16px, auto, auto;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.09),
    inset -3px -3px 0 rgba(0, 0, 0, 0.32),
    var(--pixel-shadow-lg);
}

.world-status-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 5rem;
  opacity: 0.12;
  background:
    linear-gradient(45deg, transparent 0 48%, var(--grass-300) 48% 52%, transparent 52%),
    linear-gradient(-45deg, transparent 0 48%, var(--grass-300) 48% 52%, transparent 52%);
  background-size: 1rem 1rem;
  transform: translate(1.3rem, -1.3rem);
}

.status-card-topline {
  position: relative;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.7rem;
}

.status-card-topline .status-label {
  margin-bottom: 0;
}

.status-pulse {
  background: var(--grass-300);
  animation: pulse 1.2s steps(2, end) infinite;
}

.status-card-main {
  position: relative;
  gap: 0.95rem;
  min-height: 5.6rem;
  padding: 1rem 0;
}

.status-block {
  display: grid;
  width: 3.6rem;
  height: 3.6rem;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  border: 3px solid #080b08;
  background: var(--dirt-500);
  box-shadow:
    inset -7px -7px 0 rgba(0, 0, 0, 0.18),
    4px 4px 0 rgba(0, 0, 0, 0.48);
}

.status-block span:nth-child(1),
.status-block span:nth-child(3) {
  background: var(--grass-400);
}

.status-block span:nth-child(2) {
  background: var(--grass-500);
}

.status-block span:nth-child(4) {
  background: var(--dirt-700);
}

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

.world-status-card strong,
.world-path {
  display: block;
}

.world-status-card strong {
  margin-bottom: 0.42rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.world-path {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-pixel);
  font-size: 0.61rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-card-footer {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.72rem;
  color: var(--faint);
  font-size: 0.64rem;
  line-height: 1.5;
}

.status-card-footer > span {
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-bright);
  color: var(--grass-100);
  font-family: var(--font-pixel);
  font-size: 0.55rem;
}

/* -------------------------------------------------------------------------- */
/* Summary cards                                                              */
/* -------------------------------------------------------------------------- */

.summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.metric-card,
.panel {
  border: 3px solid #090c09;
  background: rgba(23, 29, 23, 0.96);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.07),
    inset -2px -2px 0 rgba(0, 0, 0, 0.28),
    var(--pixel-shadow);
}

.metric-card {
  --metric-accent: var(--grass-300);
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 8rem;
  align-items: flex-start;
  gap: 0.85rem;
  overflow: hidden;
  padding: 1rem;
  transition: filter 130ms ease, transform 130ms ease;
}

.metric-card:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.3rem;
  background: var(--metric-accent);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.metric-card[data-metric="players"] {
  --metric-accent: var(--grass-300);
}

.metric-card[data-metric="playtime"] {
  --metric-accent: var(--gold-500);
}

.metric-card[data-metric="deaths"] {
  --metric-accent: var(--stone-300);
}

.metric-card[data-metric="jumps"] {
  --metric-accent: #afd77e;
}

.metric-card[data-metric="distance"] {
  --metric-accent: var(--water-300);
}

.metric-card[data-metric="blocks"] {
  --metric-accent: var(--dirt-300);
}

.metric-icon {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #090c09;
  color: #11180f;
  background: var(--metric-accent);
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.18),
    inset -4px -4px 0 rgba(0, 0, 0, 0.22),
    3px 3px 0 rgba(0, 0, 0, 0.4);
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  font-weight: 900;
}

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

.metric-label,
.metric-note {
  display: block;
}

.metric-label {
  margin: 0.13rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.66rem;
}

.metric-value {
  display: block;
  overflow: hidden;
  margin-bottom: 0.4rem;
  color: var(--text);
  font-size: clamp(1.03rem, 2vw, 1.5rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.metric-note {
  color: var(--faint);
  font-size: 0.6rem;
}

.metric-corner {
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  width: 4.4rem;
  height: 4.4rem;
  opacity: 0.09;
  background:
    linear-gradient(90deg, transparent 44%, var(--metric-accent) 44% 56%, transparent 56%),
    linear-gradient(0deg, transparent 44%, var(--metric-accent) 44% 56%, transparent 56%);
  transform: rotate(45deg);
}

/* -------------------------------------------------------------------------- */
/* Panels                                                                     */
/* -------------------------------------------------------------------------- */

.panel {
  position: relative;
  margin-bottom: 1.1rem;
  overflow: hidden;
}

.panel-heading {
  display: flex;
  min-height: 5.6rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 3px solid #090c09;
  padding: 1rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, var(--surface-soft), var(--surface-raised));
  background-size: 16px 16px, 16px 16px, auto;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.panel-title-group {
  min-width: 0;
  gap: 0.8rem;
}

.panel-title-group > div {
  min-width: 0;
}

.panel-title-group .eyebrow {
  margin-bottom: 0.23rem;
}

.panel-icon {
  position: relative;
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 auto;
  border: 2px solid #090c09;
  background: var(--surface-deep);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.08),
    inset -3px -3px 0 rgba(0, 0, 0, 0.32),
    3px 3px 0 rgba(0, 0, 0, 0.36);
}

.player-panel-icon {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  padding: 0.35rem;
}

.player-panel-icon span {
  background: var(--grass-400);
}

.player-panel-icon span:nth-child(2) {
  background: var(--grass-500);
}

.player-panel-icon span:nth-child(3) {
  background: var(--dirt-500);
}

.player-panel-icon span:nth-child(4) {
  background: var(--dirt-700);
}

.profile-panel-icon span:nth-child(1) {
  position: absolute;
  top: 0.44rem;
  left: 0.85rem;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--grass-300);
}

.profile-panel-icon span:nth-child(2) {
  position: absolute;
  bottom: 0.42rem;
  left: 0.48rem;
  width: 1.7rem;
  height: 0.8rem;
  background: var(--grass-500);
}

.profile-panel-icon span:nth-child(3) {
  position: absolute;
  right: 0.27rem;
  bottom: 0.28rem;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--gold-500);
}

.block-panel-icon {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  padding: 0.35rem;
}

.block-panel-icon span:nth-child(1) {
  background: var(--stone-300);
}

.block-panel-icon span:nth-child(2) {
  background: var(--stone-500);
}

.block-panel-icon span:nth-child(3) {
  background: var(--dirt-500);
}

.block-panel-icon span:nth-child(4) {
  background: var(--stone-700);
}

.heading-row {
  gap: 0.55rem;
}

.count-badge,
.panel-chip {
  color: var(--text);
  background: var(--surface-deep);
}

.count-badge {
  min-width: 1.8rem;
  justify-content: center;
}

.panel-chip {
  color: var(--gold-300);
}

/* -------------------------------------------------------------------------- */
/* Player search, sort and table                                               */
/* -------------------------------------------------------------------------- */

.players-toolbar {
  gap: 0.7rem;
}

.search-box {
  position: relative;
  display: flex;
  width: min(25rem, 39vw);
  align-items: center;
}

.search-box input,
.sort-box select {
  min-height: 2.72rem;
  border: 2px solid #090c09;
  color: var(--text);
  background: var(--surface-deep);
  box-shadow:
    inset 3px 3px 0 rgba(0, 0, 0, 0.36),
    inset -2px -2px 0 rgba(255, 255, 255, 0.045);
}

.search-box input {
  width: 100%;
  padding: 0.66rem 2.45rem 0.66rem 2.35rem;
}

.search-box input::placeholder {
  color: var(--faint);
}

.search-icon {
  position: absolute;
  left: 0.78rem;
  z-index: 1;
  color: var(--grass-300);
  font-family: var(--font-pixel);
  font-size: 1rem;
  pointer-events: none;
}

.clear-search {
  position: absolute;
  right: 0.42rem;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  font-weight: 900;
}

.clear-search:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.sort-box {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.select-wrap {
  position: relative;
  display: block;
}

.sort-box select {
  min-width: 9.8rem;
  appearance: none;
  padding: 0.58rem 2rem 0.58rem 0.7rem;
}

.select-arrow {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  color: var(--grass-300);
  font-family: var(--font-pixel);
  font-size: 0.48rem;
  pointer-events: none;
  transform: translateY(-50%);
}

.table-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 3rem;
  border-bottom: 2px solid #090c09;
  padding: 0.7rem 1rem;
  color: var(--muted);
  background: rgba(15, 20, 15, 0.86);
}

.table-loading[hidden] {
  display: none;
}

.table-loading span {
  width: 0.48rem;
  height: 0.48rem;
  background: var(--grass-300);
  box-shadow: 1px 1px 0 #000;
  animation: loading-dots 850ms steps(2, end) infinite alternate;
}

.table-loading span:nth-child(2) {
  animation-delay: 140ms;
}

.table-loading span:nth-child(3) {
  animation-delay: 280ms;
}

.table-loading strong {
  margin-left: 0.35rem;
  font-family: var(--font-pixel);
  font-size: 0.61rem;
  font-weight: 900;
}

@keyframes loading-dots {
  to {
    opacity: 0.2;
    transform: translateY(-4px);
  }
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  background:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    var(--surface);
  background-size: 16px 16px, 16px 16px, auto;
}

table {
  width: 100%;
  min-width: 68rem;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid rgba(62, 73, 60, 0.78);
  padding: 0.88rem 1rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--faint);
  background: #101610;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.42);
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

tbody tr {
  cursor: pointer;
  transition: background 100ms ease, box-shadow 100ms ease, filter 100ms ease;
}

tbody tr:hover {
  background: rgba(112, 184, 75, 0.075);
}

tbody tr:active {
  filter: brightness(1.08);
}

tbody tr.selected {
  background:
    linear-gradient(90deg, rgba(143, 212, 93, 0.18), rgba(143, 212, 93, 0.045) 42%, transparent),
    rgba(31, 41, 30, 0.76);
  box-shadow: inset 5px 0 0 var(--grass-300);
}

tbody tr.selected td {
  border-bottom-color: rgba(143, 212, 93, 0.22);
}

.player-cell {
  display: flex;
  min-width: 16rem;
  align-items: center;
  gap: 0.75rem;
}

.player-avatar,
.profile-avatar {
  display: grid;
  place-items: center;
  border: 3px solid #080b08;
  color: #0d190b;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 24%, transparent 24% 100%),
    var(--grass-300);
  box-shadow:
    inset -6px -6px 0 rgba(0, 0, 0, 0.18),
    3px 3px 0 rgba(0, 0, 0, 0.48);
  font-family: var(--font-pixel);
  font-weight: 900;
  image-rendering: pixelated;
}

.player-avatar {
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  font-size: 0.82rem;
}

.player-identity {
  min-width: 0;
  flex: 1;
}

.player-identity strong,
.player-identity small,
.table-primary,
.table-secondary {
  display: block;
}

.player-identity strong {
  overflow: hidden;
  margin-bottom: 0.2rem;
  color: var(--text);
  font-size: 0.82rem;
  text-overflow: ellipsis;
}

.player-identity small,
.table-secondary {
  max-width: 15rem;
  overflow: hidden;
  color: var(--faint);
  font-family: var(--font-pixel);
  font-size: 0.56rem;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.player-row-caret {
  color: var(--faint);
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity 100ms ease, transform 100ms ease;
}

tbody tr:hover .player-row-caret,
tbody tr.selected .player-row-caret {
  opacity: 1;
  transform: translateX(0);
}

.table-primary {
  margin-bottom: 0.18rem;
  color: var(--text);
  font-size: 0.76rem;
}

.table-stat {
  color: var(--stone-100);
  font-size: 0.7rem;
  font-weight: 900;
}

.dimension-badge {
  padding: 0.34rem 0.5rem;
  text-transform: none;
}

.dimension-overworld {
  color: var(--grass-100);
  background: rgba(47, 100, 38, 0.34);
}

.dimension-nether {
  color: var(--nether-300);
  background: rgba(133, 49, 40, 0.36);
}

.dimension-end {
  color: var(--end-300);
  background: rgba(84, 58, 103, 0.38);
}

.dimension-custom {
  color: var(--water-300);
  background: rgba(40, 94, 145, 0.28);
}

.dimension-unknown {
  color: var(--muted);
  background: rgba(72, 80, 70, 0.32);
}

.coordinate-preview {
  margin-top: 0.33rem;
}

.empty-row {
  cursor: default;
}

.empty-row:hover {
  background: transparent;
}

.empty-cell {
  height: 12rem;
  color: var(--muted);
  text-align: center;
  white-space: normal;
}

.empty-cell::before {
  content: none !important;
}

.empty-cell > * {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

.empty-icon {
  display: grid !important;
  width: 2.4rem !important;
  height: 2.4rem;
  margin-bottom: 0.75rem;
  place-items: center;
  border: 2px solid #080b08;
  color: #11180f;
  background: var(--stone-300);
  box-shadow: var(--pixel-shadow-sm);
  font-family: var(--font-pixel);
  font-weight: 900;
}

.empty-cell strong {
  margin-bottom: 0.4rem;
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 0.78rem;
}

.empty-cell button {
  margin-top: 1rem;
}

.error-cell .empty-icon {
  color: #fff;
  background: var(--redstone-500);
}

/* -------------------------------------------------------------------------- */
/* Player detail and world ranking                                             */
/* -------------------------------------------------------------------------- */

.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(21rem, 0.68fr);
  align-items: start;
  gap: 1.1rem;
}

.dashboard-columns .panel {
  min-width: 0;
}

.player-empty,
.empty-state {
  color: var(--muted);
}

.player-empty {
  display: grid;
  min-height: 34rem;
  place-items: center;
  align-content: center;
  padding: 2rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(112, 184, 75, 0.08), transparent 16rem),
    linear-gradient(rgba(255, 255, 255, 0.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.013) 1px, transparent 1px);
  background-size: auto, 16px 16px, 16px 16px;
}

.player-empty h3 {
  margin: 1.65rem 0 0.55rem;
  color: var(--text);
  font-size: 0.95rem;
}

.player-empty p {
  max-width: 31rem;
  margin-bottom: 0;
  line-height: 1.65;
}

.pixel-pickaxe {
  position: relative;
  width: 6rem;
  height: 6rem;
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, 0.4));
  transform: rotate(-38deg);
}

.pickaxe-head,
.pickaxe-handle {
  position: absolute;
  display: block;
}

.pickaxe-head {
  top: 0.85rem;
  left: 0.2rem;
  width: 5.25rem;
  height: 1.35rem;
  border: 0.36rem solid #333b32;
  border-bottom: 0;
  background: var(--stone-300);
  box-shadow: inset -9px -5px 0 rgba(0, 0, 0, 0.2);
}

.pickaxe-handle {
  top: 1.8rem;
  left: 2.45rem;
  width: 0.82rem;
  height: 4rem;
  background: var(--dirt-300);
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0.23);
}

.player-detail {
  padding: 1rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 16px 16px;
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding: 0.2rem 0 1rem;
}

.profile-avatar {
  width: 4.75rem;
  height: 4.75rem;
  flex: 0 0 auto;
  font-size: 1.45rem;
}

.profile-identity {
  min-width: 0;
}

.profile-title-row {
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.42rem;
}

.profile-title-row h3 {
  font-size: 1.18rem;
}

.profile-identity code,
.profile-saved {
  display: block;
}

.profile-identity code {
  margin-bottom: 0.36rem;
  font-size: 0.62rem;
}

.profile-saved {
  color: var(--muted);
  font-size: 0.69rem;
}

.location-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  border: 3px solid #090c09;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(67, 137, 191, 0.13), transparent 58%),
    var(--surface-deep);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.055),
    inset -2px -2px 0 rgba(0, 0, 0, 0.3),
    0 4px 0 rgba(0, 0, 0, 0.38);
}

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

.location-card strong,
.location-card .location-copy > span:last-child {
  display: block;
}

.location-card strong {
  overflow: hidden;
  margin-bottom: 0.38rem;
  font-family: var(--font-pixel);
  font-size: clamp(0.95rem, 2vw, 1.28rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-card .location-copy > span:last-child {
  color: var(--faint);
  font-size: 0.64rem;
}

.coordinate-cubes {
  display: flex;
  flex: 0 0 auto;
  gap: 0.3rem;
}

.coordinate-cubes span {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 2px solid #080b08;
  color: #0f1711;
  background: var(--water-300);
  box-shadow:
    inset -5px -5px 0 rgba(0, 0, 0, 0.18),
    3px 3px 0 rgba(0, 0, 0, 0.44);
  font-family: var(--font-pixel);
  font-size: 0.66rem;
  font-weight: 900;
}

.coordinate-cubes span:nth-child(2) {
  background: var(--grass-300);
}

.coordinate-cubes span:nth-child(3) {
  background: var(--redstone-300);
}

.vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.vital-card {
  border: 3px solid #090c09;
  padding: 0.9rem;
  background: var(--surface-raised);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.065),
    inset -2px -2px 0 rgba(0, 0, 0, 0.3),
    0 3px 0 rgba(0, 0, 0, 0.38);
}

.vital-heading {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.68rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.vital-heading strong {
  color: var(--text);
  font-size: 0.82rem;
}

.health-card .vital-heading span span {
  color: var(--redstone-300);
}

.xp-card .vital-heading span span {
  color: var(--grass-300);
}

.vital-bar {
  height: 0.82rem;
  margin-bottom: 0.58rem;
  border: 3px solid #090c09;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 8px, transparent 8px 10px),
    #2d1614;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.34);
}

.vital-bar span {
  display: block;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 8px, transparent 8px 10px),
    var(--redstone-500);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.vital-card small {
  color: var(--faint);
  font-size: 0.58rem;
  line-height: 1.4;
}

.xp-orbs {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 0.82rem;
  margin-bottom: 0.58rem;
}

.xp-orbs span {
  width: 0.76rem;
  height: 0.76rem;
  border: 2px solid #121c0e;
  background: var(--grass-300);
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.2);
  transform: rotate(45deg);
}

.xp-orbs span:nth-child(2),
.xp-orbs span:nth-child(4),
.xp-orbs span:nth-child(6) {
  opacity: 0.63;
  transform: rotate(45deg) scale(0.74);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.75rem;
}

.detail-stat {
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  gap: 0.18rem 0.58rem;
  border: 2px solid #090c09;
  padding: 0.78rem;
  background: rgba(15, 20, 15, 0.8);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.05),
    inset -2px -2px 0 rgba(0, 0, 0, 0.28);
}

.detail-stat-icon {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  grid-row: span 2;
  place-items: center;
  color: #11180f;
  background: var(--grass-300);
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  font-weight: 900;
}

.detail-stat span:not(.detail-stat-icon) {
  overflow: hidden;
  color: var(--faint);
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-stat strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wide-stat {
  grid-column: span 2;
}

.detail-section {
  margin-top: 1.25rem;
  border-top: 2px solid #090c09;
  padding-top: 1rem;
}

.section-title-row {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.section-title-row .card-label {
  margin-bottom: 0.22rem;
}

.section-title-row > strong {
  color: var(--muted);
  font-size: 0.68rem;
}

.rank-list {
  min-width: 0;
  padding: 0;
}

.rank-list-world {
  padding: 1rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 16px 16px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  margin-bottom: 0.82rem;
}

.rank-row:last-child {
  margin-bottom: 0;
}

.rank-number {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #090c09;
  color: var(--muted);
  background: var(--surface-deep);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.05),
    2px 2px 0 rgba(0, 0, 0, 0.32);
  font-family: var(--font-pixel);
  font-size: 0.57rem;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.rank-row:nth-child(1) .rank-number {
  color: #231b07;
  background: var(--gold-500);
}

.rank-row:nth-child(2) .rank-number {
  color: #171a16;
  background: var(--stone-300);
}

.rank-row:nth-child(3) .rank-number {
  color: #1e1108;
  background: var(--dirt-300);
}

.rank-main {
  min-width: 0;
  flex: 1;
}

.rank-label {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.36rem;
  font-size: 0.68rem;
}

.rank-label span {
  overflow: hidden;
  color: var(--stone-100);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-label strong {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.58rem;
}

.bar {
  height: 0.54rem;
  overflow: hidden;
  border: 2px solid #090c09;
  background: #0b0e0b;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.bar span {
  display: block;
  height: 100%;
  min-width: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 7px, transparent 7px 9px),
    var(--grass-400);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.compact-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  border: 2px dashed var(--border);
  padding: 1rem;
  text-align: center;
}

.compact-empty > span {
  color: var(--grass-300);
  font-family: var(--font-pixel);
}

/* -------------------------------------------------------------------------- */
/* Skeletons, errors, toast and footer                                         */
/* -------------------------------------------------------------------------- */

.metric-skeleton,
.rank-skeleton,
.detail-loading-card,
.detail-loading-grid span {
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
}

.metric-skeleton::before,
.rank-skeleton::before,
.detail-loading-card::before,
.detail-loading-grid span::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.075), transparent);
  animation: shimmer 1.15s steps(12, end) infinite;
}

@keyframes shimmer {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(350%);
  }
}

.rank-skeleton {
  height: 2.55rem;
  margin-bottom: 0.72rem;
  border: 2px solid #090c09;
}

.player-detail-loading {
  min-height: 32rem;
  padding: 1rem;
}

.detail-loading-card {
  height: 8.7rem;
  margin-bottom: 0.8rem;
  border: 2px solid #090c09;
}

.detail-loading-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
}

.detail-loading-grid span {
  height: 5.3rem;
  border: 2px solid #090c09;
}

.error-box {
  display: grid;
  min-height: 20rem;
  place-items: center;
  align-content: center;
  gap: 0.65rem;
  margin: 1rem;
  border: 3px solid #090c09;
  padding: 1.3rem;
  color: var(--redstone-300);
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    #2b1816;
  background-size: 16px 16px, 16px 16px, auto;
  box-shadow: inset 0 0 0 2px var(--redstone-700);
  text-align: center;
}

.error-box strong {
  color: #ffd4cf;
  font-family: var(--font-pixel);
  font-size: 0.8rem;
}

.error-icon {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 2px solid #090c09;
  color: #fff;
  background: var(--redstone-500);
  box-shadow: var(--pixel-shadow-sm);
  font-family: var(--font-pixel);
  font-weight: 900;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0 0.3rem;
  color: var(--faint);
  font-size: 0.63rem;
}

.site-footer span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-dot {
  background: var(--grass-400);
}

.toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  display: grid;
  width: min(25rem, calc(100% - 2rem));
  gap: 0.65rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  border: 3px solid #090c09;
  padding: 0.82rem;
  color: var(--text);
  background: var(--surface-raised);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.08),
    inset -2px -2px 0 rgba(0, 0, 0, 0.3),
    var(--pixel-shadow);
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-error {
  color: #ffd4cf;
  background: #2b1816;
}

.toast-icon {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #090c09;
  color: #0d160a;
  background: var(--grass-300);
  font-family: var(--font-pixel);
  font-size: 0.64rem;
  font-weight: 900;
}

.toast-error .toast-icon {
  color: #fff;
  background: var(--redstone-500);
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1220px) {
  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .blocks-panel .rank-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
  }
}

@media (max-width: 920px) {
  .world-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .world-status-card {
    max-width: none;
  }

  .players-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .players-toolbar {
    width: 100%;
  }

  .search-box {
    width: 100%;
    flex: 1;
  }

  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wide-stat {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .header-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.75rem 0 0.85rem;
  }

  .header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .connection-badge {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .page-shell {
    padding-top: 1.35rem;
  }

  .world-hero {
    margin-top: 0.6rem;
  }

  .hero-tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-tags > span:last-child {
    grid-column: 1 / -1;
  }

  .players-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sort-box,
  .select-wrap,
  .sort-box select {
    width: 100%;
  }

  .sort-box {
    align-items: stretch;
    flex-direction: column;
  }

  table {
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }

  tbody {
    padding: 0.65rem;
  }

  tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 0.7rem;
    border: 2px solid #090c09;
    background: rgba(15, 20, 15, 0.88);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.04),
      0 3px 0 rgba(0, 0, 0, 0.36);
  }

  tbody tr:last-child {
    margin-bottom: 0;
  }

  tbody tr.selected {
    box-shadow:
      inset 5px 0 0 var(--grass-300),
      0 3px 0 rgba(0, 0, 0, 0.36);
  }

  td {
    position: relative;
    min-width: 0;
    border-bottom: 1px solid rgba(62, 73, 60, 0.62);
    padding: 0.8rem;
    white-space: normal;
  }

  td::before {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--faint);
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  td:nth-child(1) {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.025);
  }

  td:nth-child(1)::before {
    content: none;
  }

  td:nth-child(2)::before {
    content: "Last saved";
  }

  td:nth-child(3)::before {
    content: "Last location";
  }

  td:nth-child(4)::before {
    content: "Playtime";
  }

  td:nth-child(5)::before {
    content: "Deaths";
  }

  td:nth-child(6)::before {
    content: "Distance";
  }

  td:nth-child(7)::before {
    content: "Blocks";
  }

  .player-cell {
    min-width: 0;
  }

  .empty-row {
    display: block;
    border: 0;
    box-shadow: none;
  }

  .empty-cell {
    display: block;
    height: auto;
    min-height: 11rem;
    padding: 2rem 1rem;
  }

  .detail-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-heading .button {
    width: 100%;
  }

  .vitals-grid {
    grid-template-columns: 1fr;
  }

  .blocks-panel .rank-list {
    display: block;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .header-inner,
  .page-shell {
    width: min(100% - 1rem, 1480px);
  }

  .brand strong {
    font-size: 0.86rem;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .metric-card {
    min-height: 7.25rem;
    gap: 0.62rem;
    padding: 0.82rem;
  }

  .metric-icon {
    width: 2.05rem;
    height: 2.05rem;
  }

  .metric-value {
    font-size: 1rem;
  }

  .world-status-card,
  .panel-heading,
  .player-detail,
  .rank-list-world {
    padding: 0.8rem;
  }

  .panel-heading {
    min-height: auto;
  }

  .panel-title-group {
    gap: 0.65rem;
  }

  .panel-icon {
    width: 2.35rem;
    height: 2.35rem;
  }

  .hero-tags {
    grid-template-columns: 1fr;
  }

  .hero-tags > span:last-child {
    grid-column: auto;
  }

  .profile-hero,
  .location-card {
    align-items: flex-start;
  }

  .profile-avatar {
    width: 4rem;
    height: 4rem;
  }

  .coordinate-cubes {
    display: none;
  }

  .detail-grid,
  .detail-loading-grid {
    grid-template-columns: 1fr;
  }

  .wide-stat {
    grid-column: auto;
  }

}

@media (max-width: 340px) {
  tbody tr {
    grid-template-columns: 1fr;
  }

  td:nth-child(1) {
    grid-column: auto;
  }
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .header-actions {
    grid-template-columns: 1fr;
  }

  .connection-badge {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #d0d7cd;
    --faint: #aab4a7;
    --border: #778274;
    --border-bright: #9ba598;
  }
}