/* Craft-LAN Dashboard – Design angelehnt an craftattack.one:
   Monocraft für Überschriften, Bricolage Grotesque für Text, harte Pixel-Schatten, vollflächige Farbabschnitte. */

@font-face {
  font-family: "Monocraft";
  src: url("https://cdn.jsdelivr.net/gh/IdreesInc/Monocraft@4.2.1/dist/Monocraft-otf/Monocraft.otf") format("opentype");
  font-weight: 300 500;
  font-display: swap;
  size-adjust: 80%;
}
@font-face {
  font-family: "Monocraft";
  src: url("https://cdn.jsdelivr.net/gh/IdreesInc/Monocraft@4.2.1/dist/Monocraft-otf/weights/Monocraft-Bold.otf") format("opentype");
  font-weight: 600 900;
  font-display: swap;
  size-adjust: 80%;
}

:root {
  color-scheme: light;
  --ink: #16120f;
  --paper: #fff6e0;
  --white: #fff;
  --ender: #2d1c36;
  --ender-2: #4f1a6d;
  --twitch: #9146ff;
  --grass: #6fdc5a;
  --grass-dark: #4fb83f;
  --gold: #ffd23f;
  --lava: #ff9a2e;
  --redstone: #ff6452;
  --sky: #8ccdff;
  --diamond: #4be3d6;
  --amethyst: #c88ae6;
  --pink: #f0b6e4;
  --dirt: #8a5a3b;
  --muted: rgba(22, 18, 15, 0.62);
  --px: 4px;
  --outline: 0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink);
  --drop: var(--px) calc(var(--px) * 2) 0 0 var(--ink), calc(var(--px) * 2) var(--px) 0 0 var(--ink), calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--ink);
  --drop-lg: calc(var(--px) * 2) calc(var(--px) * 3) 0 0 var(--ink), calc(var(--px) * 3) calc(var(--px) * 2) 0 0 var(--ink), calc(var(--px) * 3) calc(var(--px) * 3) 0 0 var(--ink);
  --font-display: "Monocraft", ui-monospace, "Courier New", monospace;
  --font-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --space-block: clamp(48px, 8vw, 104px);
  --page-bg: var(--ender);
  --page-fg: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Typografie ---------- */
.eyebrow {
  font: 800 14px/1.5 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 12px;
}
.h-1 {
  font: 700 clamp(40px, 7vw, 76px)/0.95 var(--font-display);
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.h-2 {
  font: 700 clamp(30px, 4.6vw, 52px)/1 var(--font-display);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.h-3 { font: 700 22px/1.1 var(--font-display); margin: 0; }
.lead { font-size: 19px; max-width: 58ch; margin: 18px 0 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-display); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page-bg);
  color: var(--page-fg);
  border-bottom: var(--px) solid var(--ink);
  transition: background 0.25s;
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: baseline; gap: 0; text-decoration: none; font: 800 28px/1 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.brand-badge {
  font: 800 28px/1 var(--font-display);
  color: var(--amethyst);
  text-shadow: 2px 2px 0 var(--ender-2), 3px 3px 0 var(--ink);
  /* Der Schatten macht die Zahl optisch schwerer nach unten, daher ein Stück höher setzen */
  position: relative;
  top: -0.07em;
}
.brand-name { letter-spacing: 0.02em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  font: 700 18px/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 10px 10px;
}
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); text-decoration: none; }
.nav a.nav-admin { background: var(--gold); color: var(--ink); box-shadow: var(--outline); margin-left: 10px; }
.nav a.nav-admin[aria-current="page"] { background: var(--ink); color: var(--gold); }
.status-dot { display: inline-block; width: 10px; height: 10px; background: var(--muted); margin-right: 8px; box-shadow: 0 0 0 2px var(--ink); vertical-align: 1px; }
.status-dot.on { background: var(--grass); }
.status-dot.mid { background: var(--gold); }
.status-dot.off { background: var(--redstone); }
.menu-btn { display: none; margin-left: auto; background: var(--paper); color: var(--ink); border: 0; box-shadow: var(--outline); padding: 9px 12px; font: 800 14px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }

@media (max-width: 900px) {
  .menu-btn { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    background: var(--page-bg);
    border-bottom: var(--px) solid var(--ink);
    padding: 8px var(--gutter) 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 10px; }
  .nav a.nav-admin { margin: 8px 0 0; text-align: center; }
}

/* ---------- Abschnitte ---------- */
.block { padding: var(--space-block) 0; position: relative; }
.block--tight { padding: 28px 0; }
.bg-paper { background: var(--paper); color: var(--ink); }
.bg-ender { background: var(--ender); color: var(--paper); }
.bg-ender2 { background: var(--ender-2); color: var(--paper); }
.bg-twitch { background: var(--twitch); color: var(--white); }
.bg-grass { background: var(--grass); color: var(--ink); }
.bg-gold { background: var(--gold); color: var(--ink); }
.bg-sky { background: var(--sky); color: var(--ink); }
.bg-diamond { background: var(--diamond); color: var(--ink); }
.bg-amethyst { background: var(--amethyst); color: var(--ink); }
.bg-pink { background: var(--pink); color: var(--ink); }
.bg-lava { background: var(--lava); color: var(--ink); }
.bg-redstone { background: var(--redstone); color: var(--ink); }
.bg-ink { background: var(--ink); color: var(--paper); }
.bg-dirt { background: var(--dirt); color: var(--paper); }
.bg-white { background: var(--white); color: var(--ink); }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.section-head p { margin: 10px 0 0; }

/* Grasskante zwischen Abschnitten */
.grass-edge {
  height: 16px;
  background-color: var(--dirt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' shape-rendering='crispEdges'%3E%3Crect width='32' height='16' fill='%238a5a3b'/%3E%3Crect width='32' height='8' fill='%236fdc5a'/%3E%3Crect y='8' width='4' height='4' fill='%236fdc5a'/%3E%3Crect x='12' y='8' width='8' height='4' fill='%236fdc5a'/%3E%3Crect x='24' y='8' width='4' height='4' fill='%236fdc5a'/%3E%3Crect x='8' y='4' width='4' height='4' fill='%234fb83f'/%3E%3Crect x='20' width='4' height='4' fill='%234fb83f'/%3E%3Crect x='28' y='4' width='4' height='4' fill='%234fb83f'/%3E%3Crect x='4' y='12' width='4' height='4' fill='%236b432b'/%3E%3Crect x='16' y='12' width='4' height='4' fill='%236b432b'/%3E%3C/svg%3E");
  background-size: 32px 16px;
  image-rendering: pixelated;
  border-top: var(--px) solid var(--ink);
}

/* Laufband */
.marquee {
  background: var(--ender-2);
  color: var(--paper);
  font: 700 20px/1.5 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: var(--px) solid var(--ink);
}
.marquee-track { display: inline-flex; animation: marquee var(--dur, 40s) linear infinite; }
.marquee-group { display: inline-flex; flex: none; }
.marquee-group span { padding-right: 34px; }
.marquee-group span::after { content: "✦"; padding-left: 34px; color: var(--gold); }
@keyframes marquee { to { transform: translateX(var(--shift, -50%)); } }

/* ---------- Bausteine ---------- */
/* :where() hält die Spezifität bei 0, damit .bg-*-Klassen die Farbe überschreiben */
:where(.box) { background: var(--white); color: var(--ink); }
.box {
  box-shadow: var(--outline), var(--drop);
  margin: var(--px) calc(var(--px) * 3) calc(var(--px) * 3) var(--px);
}
.box-pad { padding: 20px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  font: 700 18px/1.1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: var(--lava);
  color: var(--ink);
  border: 0;
  box-shadow: var(--outline), var(--drop);
  margin: var(--px) calc(var(--px) * 3) calc(var(--px) * 3) var(--px);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--outline), var(--drop-lg); }
.btn:active { transform: translate(var(--px), var(--px)); box-shadow: var(--outline); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--outline), var(--drop); }
.btn--white { background: var(--white); }
.btn--paper { background: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); box-shadow: 0 calc(var(--px) * -1) 0 0 var(--paper), 0 var(--px) 0 0 var(--paper), calc(var(--px) * -1) 0 0 0 var(--paper), var(--px) 0 0 0 var(--paper); }
.btn--grass { background: var(--grass); }
.btn--gold { background: var(--gold); }
.btn--red { background: var(--redstone); }
.btn--sm { font: 800 14px/1.1 var(--font-body); letter-spacing: 0.08em; padding: 9px 12px; }
.btn--confirm { background: var(--ink); color: var(--redstone); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 10px; align-items: center; margin-top: 26px; }

.tag {
  display: inline-block;
  font: 800 12px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 7px 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
  margin: 2px;
  white-space: nowrap;
}
.tag--grass { background: var(--grass); }
.tag--gold { background: var(--gold); }
.tag--amethyst { background: var(--amethyst); }
.tag--sky { background: var(--sky); }
.tag--ink { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--paper); }
.tag--online { background: var(--grass); }
/* Blinker: nur an/aus (step-end), ohne Zwischenstufe */
.tag--online::before, .live-dot::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  background: var(--redstone);
  box-shadow: 0 0 0 2px var(--ink);
  vertical-align: 0;
  animation: live-blink 1.2s step-end infinite;
}
.live-dot::before { width: 0.55em; height: 0.55em; margin-right: 0.5em; vertical-align: 0.06em; }
.tag--online::before { background: var(--white); }
@keyframes live-blink { 50% { background: #8f857c; } }

.adv { font: 700 14px/1.2 var(--font-body); background: var(--grass); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); padding: 3px 6px 2px; margin: 0 4px; white-space: nowrap; display: inline-block; }
.adv--goal { background: var(--sky); }
.adv--challenge { background: var(--amethyst); }

/* Köpfe aus dem Skin (Gesicht + Hut-Ebene) */
.head {
  --size: 32px;
  --s: calc(var(--size) / 8);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--size);
  height: var(--size);
  background-color: #c9bca8;
  background-image: var(--skin);
  background-size: calc(var(--s) * 64) calc(var(--s) * 64);
  background-position: calc(var(--s) * -8) calc(var(--s) * -8);
  image-rendering: pixelated;
  box-shadow: 0 0 0 2px var(--ink);
}
.head::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--skin);
  background-size: inherit;
  background-position: calc(var(--s) * -40) calc(var(--s) * -8);
  image-rendering: pixelated;
}
.head--20 { --size: 20px; }
.head--24 { --size: 24px; }
.head--40 { --size: 40px; }
.head--48 { --size: 48px; }
.head--64 { --size: 64px; }

/* Pixel-Icons */
.pi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; shape-rendering: crispEdges; }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: end; }
.hero-copy { padding-bottom: 64px; }
.logo { margin: 6px 0 0; font: 800 clamp(96px, 15vw, 190px)/0.86 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.logo span { display: block; }
.logo .l1 { color: var(--gold); text-shadow: 0 4px 0 var(--lava), 0 8px 0 #d5641c, 4px 12px 0 var(--ink), 8px 12px 0 var(--ink); }
.logo .l2 { color: var(--amethyst); text-shadow: 0 4px 0 #9a58c0, 0 8px 0 var(--ender-2), 4px 12px 0 var(--ink), 8px 12px 0 var(--ink); }
.hero-figs { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2vw, 24px); min-height: 300px; padding-top: 40px; }
.hero-figs .fig { --S: 8px; }
.hero-figs .fig:nth-child(even) { margin-bottom: 22px; }
.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-hero { padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); border-bottom: var(--px) solid var(--ink); }
.page-hero .lead { max-width: 62ch; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }

@media (max-width: 860px) {
  .hero-grid, .page-hero-grid, .split-2 { grid-template-columns: 1fr; }
  .hero-figs .fig { --S: 6px; }
  .hero-copy { padding-bottom: 8px; }
  .hero-figs { min-height: 220px; padding-top: 8px; }
}

/* ---------- 3D-Skinfiguren (reines CSS) ---------- */
.fig {
  --S: 6px;
  position: relative;
  width: calc(var(--S) * 16);
  height: calc(var(--S) * 32);
  perspective: 1400px;
  flex: none;
}
.fig-rot {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(var(--ry, -28deg));
}
.fig .part, .fig .cube { position: absolute; transform-style: preserve-3d; }
.fig .cube { inset: 0; }
.fig .face {
  position: absolute;
  background-image: var(--skin);
  background-size: calc(var(--S) * 64) calc(var(--S) * 64);
  image-rendering: pixelated;
  backface-visibility: hidden;
}
.fig .over { transform: scale3d(1.08, 1.06, 1.12); }
.fig .part.p-head .over { transform: scale3d(1.125, 1.125, 1.125); }
.fig .part.p-head { transform-origin: 50% 100% 0; }
.fig .part.p-armR, .fig .part.p-armL { transform-origin: 50% calc(var(--S) * 2) 0; }
.fig .part.p-legR, .fig .part.p-legL { transform-origin: 50% 0 0; }
.fig-shadow { position: absolute; left: 10%; right: 10%; bottom: calc(var(--S) * -1.5); height: calc(var(--S) * 2); background: rgba(0, 0, 0, 0.25); border-radius: 50%; filter: blur(2px); }
.nametag {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -6px);
  background: rgba(22, 18, 15, 0.55);
  color: var(--white);
  font: 700 18px/1 var(--font-display);
  padding: 4px 6px 3px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .pose-walk .p-armR { animation: swing 0.9s ease-in-out infinite alternate; }
  .pose-walk .p-armL { animation: swing 0.9s ease-in-out infinite alternate-reverse; }
  .pose-walk .p-legR { animation: swing 0.9s ease-in-out infinite alternate-reverse; }
  .pose-walk .p-legL { animation: swing 0.9s ease-in-out infinite alternate; }
  .pose-wave .p-armR { animation: wave 0.7s ease-in-out infinite alternate; }
  .pose-wave .p-head { animation: nod 1.4s ease-in-out infinite alternate; }
  .pose-cheer .p-armR { transform: rotateZ(155deg); }
  .pose-cheer .p-armL { transform: rotateZ(-155deg); }
  .pose-cheer .fig-rot { animation: hop 0.8s ease-in-out infinite; }
  .pose-idle .p-armR { animation: idleR 2.4s ease-in-out infinite alternate; }
  .pose-idle .p-armL { animation: idleL 2.4s ease-in-out infinite alternate; }
  .pose-idle .p-head { animation: look 4s ease-in-out infinite alternate; }
  .pose-spin .fig-rot { animation: spin 12s linear infinite; }
  .pose-spin .p-armR { animation: idleR 2.4s ease-in-out infinite alternate; }
  .pose-spin .p-armL { animation: idleL 2.4s ease-in-out infinite alternate; }
  .card:hover .fig .p-armR { animation: wave 0.5s ease-in-out infinite alternate; }
  .marquee-track { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
@keyframes swing { from { transform: rotateX(32deg); } to { transform: rotateX(-32deg); } }
@keyframes wave { from { transform: rotateZ(140deg); } to { transform: rotateZ(170deg); } }
@keyframes nod { from { transform: rotateX(-6deg); } to { transform: rotateX(8deg); } }
@keyframes hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--S) * -3); } }
@keyframes idleR { from { transform: rotateZ(3deg); } to { transform: rotateZ(8deg); } }
@keyframes idleL { from { transform: rotateZ(-3deg); } to { transform: rotateZ(-8deg); } }
@keyframes look { from { transform: rotateY(-14deg); } to { transform: rotateY(14deg); } }
@keyframes spin { from { transform: rotateX(-12deg) rotateY(0deg); } to { transform: rotateX(-12deg) rotateY(360deg); } }

/* ---------- Chips (Gerade online) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 14px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--outline), var(--drop);
  margin: var(--px) calc(var(--px) * 3) calc(var(--px) * 3) var(--px);
  font: 700 16px/1 var(--font-body);
  text-decoration: none;
}
.chip:hover { background: var(--paper); }
.chip .head { --size: 24px; box-shadow: none; }

/* ---------- Kacheln ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 14px; }
.tile { padding: 20px 20px 18px; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.tile-value { font: 700 clamp(30px, 4vw, 44px)/1 var(--font-display); }
.tile-label { font: 800 13px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; }
.tile-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 6px; }
  .tile { min-height: 110px; padding: 14px 12px; }
  .tile-value { font-size: clamp(20px, 6.4vw, 30px); }
  .tile-label { font-size: 12px; letter-spacing: 0.06em; }
}

/* ---------- Spielerkarten ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 14px; }
.card { display: flex; flex-direction: column; text-decoration: none; position: relative; }
.card-stage { position: relative; height: 210px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; overflow: hidden; border-bottom: var(--px) solid var(--ink); }
.card-stage .head { position: absolute; left: 10px; bottom: 10px; --size: 32px; box-shadow: 0 0 0 3px var(--ink); }
.card-stage .fig { --S: 5px; margin-bottom: 4px; }
.card-badge { position: absolute; top: 10px; right: 10px; }
.card-body { padding: 12px 10px 14px; text-align: center; background: var(--white); }
.card-name { font: 800 17px/1.2 var(--font-body); overflow-wrap: anywhere; }
.card-meta { margin-top: 8px; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }

/* ---------- Bestenlisten ---------- */
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px 18px; }
.board { padding: 18px 18px 14px; }
.board-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.board-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 26px; }
.board-title { font: 700 23px/1.1 var(--font-display); }
.board-sub { font-size: 14px; opacity: 0.75; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li { display: grid; grid-template-columns: 28px 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 2px solid rgba(22, 18, 15, 0.12); }
.rank-list li:first-child { border-top: 0; }
.rank-list a { text-decoration: none; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list a:hover { text-decoration: underline; }
.rank { font: 800 14px/1 var(--font-body); text-align: center; width: 26px; padding: 6px 0 5px; }
.rank.top { background: var(--ink); color: var(--paper); }
.rank-val { font: 700 15px/1 var(--font-body); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bg-ender .rank-list li, .bg-dirt .rank-list li { border-color: rgba(255, 246, 224, 0.16); }
.bg-ender .rank.top, .bg-dirt .rank.top { background: var(--gold); color: var(--ink); }
.bg-ender .board-icon, .bg-dirt .board-icon { background: var(--paper); color: var(--ink); }
.empty { padding: 14px 0 6px; font-size: 15px; opacity: 0.75; }

/* ---------- Events ---------- */
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px 14px; }
.event { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--paper); margin: 0; }
.event .head { --size: 32px; }
.event-text { flex: 1; min-width: 0; line-height: 1.45; }
.event-text a { font-weight: 700; }
.event-time { font-size: 13px; color: var(--muted); }
.event--new { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--gold); } }
@media (max-width: 520px) { .events { grid-template-columns: 1fr; } }

/* ---------- Verbinden ---------- */
.connect { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 14px; }
.connect .box { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.addr { display: flex; align-items: stretch; gap: 0; margin-top: 4px; }
.addr code { flex: 1; min-width: 0; font: 700 19px/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; background: var(--paper); padding: 12px 10px; box-shadow: inset 0 0 0 2px var(--ink); overflow-x: auto; white-space: nowrap; }
.addr button { border: 0; background: var(--ink); color: var(--paper); font: 800 13px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; padding: 0 12px; cursor: pointer; }
.addr button:hover { background: var(--ender-2); }
.connect .note { margin: auto 0 0; padding-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.connect .note b, .connect .note a { color: var(--ink); font-weight: 700; }

/* ---------- Karte ---------- */
.map-frame { position: relative; height: calc(100vh - 64px - 150px); min-height: 460px; background: var(--ender); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-offline { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--paper); padding: 24px; background: repeating-linear-gradient(45deg, var(--ender), var(--ender) 16px, #33203d 16px, #33203d 32px); }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; padding: 12px; flex-wrap: wrap; }
.search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink); padding: 0 12px; }
.search input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 0; outline: none; }
.toggle { display: inline-flex; gap: 8px; align-items: center; font: 800 13px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 12px; box-shadow: inset 0 0 0 3px var(--ink); cursor: pointer; user-select: none; }
.toggle input { appearance: none; width: 14px; height: 14px; margin: 0; box-shadow: 0 0 0 2px var(--ink); background: var(--white); cursor: pointer; }
.toggle input:checked { background: var(--grass); }
.count { font: 800 14px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; padding: 0 6px; }

/* ---------- Spielerseite ---------- */
.player-hero-fig { display: flex; justify-content: center; padding: 30px 30px 10px; cursor: grab; touch-action: pan-y; }
.player-hero-fig .fig { --S: 10px; }
.player-hero-fig:active { cursor: grabbing; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 18px; align-items: start; }
.split--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.adv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adv-list li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 8px 0; border-top: 2px solid rgba(22, 18, 15, 0.12); }
.adv-list li:first-child { border-top: 0; }
.adv-list .adv-desc { font-size: 14px; color: var(--muted); }

/* ---------- Server / Admin ---------- */
.login { max-width: 440px; padding: 26px; }
.login form { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.field { flex: 1 1 200px; background: var(--paper); border: 0; box-shadow: inset 0 0 0 3px var(--ink); padding: 12px; outline: none; font: 600 17px/1 var(--font-body); }
.field:focus { box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 3px var(--gold); }
.form-error { color: #b3261e; font-weight: 600; margin: 10px 0 0; min-height: 1.4em; }

.control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px; }
.state-big { font: 700 clamp(28px, 4vw, 40px)/1 var(--font-display); text-transform: uppercase; display: flex; align-items: center; gap: 14px; }
.state-big .status-dot { width: 18px; height: 18px; margin: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 15px; }
.facts b { font: 800 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; margin-right: 6px; }
.control .btn-row { margin: 0; justify-content: flex-end; }
@media (max-width: 760px) { .control { grid-template-columns: 1fr; } .control .btn-row { justify-content: flex-start; } }
.notice { padding: 14px 16px; background: var(--gold); box-shadow: var(--outline); margin: 18px var(--px) 0; font-size: 15px; }

.res { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.res-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.res-value { font: 700 30px/1 var(--font-display); }
.res-sub { font-size: 14px; color: var(--muted); }
.meter { height: 12px; background: #ece3cf; box-shadow: inset 0 0 0 2px var(--ink); position: relative; }
.meter i { position: absolute; left: 2px; top: 2px; bottom: 2px; background: var(--grass); max-width: calc(100% - 4px); transition: width 0.4s; }
.meter i.warn { background: var(--gold); }
.meter i.crit { background: var(--redstone); }
.spark { width: 100%; height: 56px; display: block; overflow: visible; }
.spark-wrap { position: relative; }
.spark-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--ink); color: var(--paper); font: 600 13px/1.2 var(--font-body); padding: 5px 7px; white-space: nowrap; pointer-events: none; }
.res-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 22px; }
.res-fact { padding: 12px 14px; background: var(--paper); box-shadow: var(--outline); margin: var(--px); }
.res-fact span { display: block; font: 800 12px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.res-fact strong { font: 700 22px/1.3 var(--font-display); }

.terminal { background: var(--ink); color: #e8e1d3; box-shadow: 0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink), var(--drop); margin: var(--px) calc(var(--px) * 3) calc(var(--px) * 3) var(--px); }
.term-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #2a231d; font: 800 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; flex-wrap: wrap; }
.term-bar .btn { margin-block: 2px 6px; }
.term-out { height: 440px; overflow-y: auto; padding: 12px 14px; font: 400 14px/1.55 var(--font-code); white-space: pre-wrap; word-break: break-word; scrollbar-color: #5a4d40 transparent; }
.term-out .l-warn { color: var(--gold); }
.term-out .l-error { color: var(--redstone); }
.term-out .l-cmd { color: var(--diamond); }
.term-out .l-dash { color: var(--amethyst); }
.term-out .l-rcon { color: #b7f0a9; }
.term-out .l-time { color: #8d8172; }
.term-in { display: flex; align-items: center; gap: 10px; padding: 10px 14px 14px; border-top: 2px solid #3a3029; }
.term-in label { font: 700 18px/1 var(--font-display); color: var(--grass); }
.term-in input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--paper); font: 400 15px/1.4 var(--font-code); padding: 8px 0; }
.term-in .btn { margin-block: 0 8px; }
.quick { display: flex; flex-wrap: wrap; gap: 4px 2px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ender); color: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 28px; padding: 48px 0 56px; }
.footer-grid nav { display: grid; gap: 8px; align-content: start; }
.footer-grid nav a { font-weight: 600; }
.footer-small { font-size: 14px; opacity: 0.75; margin: 6px 0 0; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; font: 700 15px/1.3 var(--font-body); box-shadow: 0 0 0 3px var(--paper), 0 0 0 7px var(--ink); max-width: calc(100vw - 32px); }
.toast.err { background: var(--redstone); color: var(--ink); }