@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- dunkle Basis --- */
  --bg-0:#07080d;
  --bg-1:#0c0e16;
  --bg-2:#12141f;
  --surface:#161826;
  --surface-2:#1d2032;
  --border:#2a2d42;
  --border-soft:#22243660;

  --text:#eef0fb;
  --text-dim:#a6a9c4;
  --text-faint:#767a99;

  /* --- Akzente: dunkel + hellblau --- */
  --violet:#1c4f7c;
  --violet-2:#3f8fd6;
  --cyan:#7cd4ff;
  --pink:#7cd4ff;

  /* --- Minecraft-Restakzente --- */
  --mc-gold:#ffd133;
  --mc-gold-deep:#d69a12;
  --mc-green:#5fbf3e;
  --mc-green-dark:#3f8a29;
  --mc-dirt:#8a5a2b;

  --ok:#3ecf6e;
  --danger:#f8556f;
  --warn:#ffb547;

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-key:16px;
  --maxw:1080px;

  /* weiche, "gepolsterte" Timing-Kurve fuer alle Interaktionen */
  --ease-key: cubic-bezier(.25,.85,.35,1);

  /* Minecraft-Bevel (fuer die Switch-Buttons/Anmelden-Button) */
  --mc-bevel-light:#fff6c9;
  --mc-bevel-dark:#8a6400;
  --mc-bevel-light-grey:#4a4d63;
  --mc-bevel-dark-grey:#0a0b12;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  font-size:16px;
  color:var(--text);
  background-image:
    url('wallpaper-tile.png'),
    radial-gradient(1000px 480px at 15% -10%, #1c4f7c26, transparent 60%),
    radial-gradient(800px 440px at 100% 0%, #7cd4ff14, transparent 55%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 128px 128px, auto, auto;
  background-color: var(--bg-0);
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img.pixel, .pixel {
  image-rendering: -webkit-optimize-contrast; /* Safari / iOS */
  image-rendering: -moz-crisp-edges;         /* Legacy Firefox */
  image-rendering: crisp-edges;              /* Modern Standard */
  image-rendering: pixelated;                /* Chromium / Edge */
}

svg.icon{ width:16px; height:16px; flex-shrink:0; display:inline-block; vertical-align:middle; }

h1,h2,h3{ font-family:'Inter', sans-serif; font-weight:800; letter-spacing:-0.015em; color:var(--text); }
h1{font-size:clamp(28px,4vw,42px); line-height:1.15; margin:0 0 16px;}
h2{font-size:clamp(19px,2.4vw,24px); margin:32px 0 16px;}
h3{font-size:16.5px; margin:0 0 8px;}
p, li{font-size:15.5px; color:var(--text-dim);}
.lead{font-size:17.5px; color:var(--text-dim);}
a{color:var(--cyan); text-decoration:none; transition:color .12s var(--ease-key);}
a:hover{color:#fff;}

.eyebrow, .cmd-tag, .brand-word, .badge, .tag, .role{
  font-family:'Press Start 2P', monospace;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}

/* ---------- header ---------- */
/* ---------- header ---------- */
header.site-header .bar {
  width: 100%;
  max-width: 100%; /* Begrenzung komplett sprengen */
  margin: 0;       /* Zentrierung aufheben */
  padding: 12px 20px;
  display: flex; 
  align-items: center; 
  gap: 16px; 
  flex-wrap: nowrap; /* WICHTIG: Kein Zeilenumbruch im Header! */
}

/* Nav-Padding minimal anpassen, damit es selbst auf kleineren Monitoren nicht quetscht */
nav.mainnav a,
nav.mainnav summary {
  white-space: nowrap;
  padding: 10px 8px 12px; /* leicht reduziert (vorher 12px 12px 14px) */
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:#fff; text-decoration:none;
}
.brand img{
  width:32px; height:32px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface);
  padding:2px;
}
.brand-word{font-size:12px; letter-spacing:.02em; background:linear-gradient(90deg,var(--violet-2),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.brand:hover .brand-word{filter:brightness(1.2);}

/* ---------- Navigation: "Switch"-Buttons im Minecraft-Stil ---------- */
nav.mainnav {
  display: flex; 
  flex-wrap: wrap; 
  gap: 2px; 
  margin-left: 6px;
  flex: 1; /* Holt sich den gesamten restlichen Platz zwischen Logo und Login! */
  justify-content: center; /* Zentriert die Nav-Elemente im freien Bereich (oder 'flex-start', falls linksbündig) */
}
nav.mainnav a{
  position:relative;
  font-family:'Press Start 2P', monospace;
  font-size:9px;
  color:var(--text-dim);
  text-decoration:none;
  padding:12px 12px 14px;
  border-radius:var(--radius-sm);
  transition:color .18s var(--ease-key), background-color .18s var(--ease-key);
}
nav.mainnav a:hover{color:#fff; background:var(--surface);}
nav.mainnav a::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:6px;
  height:3px;
  background-image:repeating-linear-gradient(90deg, var(--mc-gold) 0 3px, transparent 3px 6px);
  background-size:6px 3px;
  image-rendering:pixelated;
  opacity:0;
  transition:opacity .15s var(--ease-key);
}
nav.mainnav a:hover::after{ opacity:.45; }
nav.mainnav a.active{
  color:#fff;
  background:var(--surface-2);
}
nav.mainnav a.active::after{ opacity:1; }
nav.mainnav details{position:relative;}
nav.mainnav summary{
  list-style:none; cursor:pointer;
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Press Start 2P', monospace;
  font-size:9px; color:var(--text-dim);
  padding:12px 12px 14px; border-radius:var(--radius-sm);
  transition:color .18s var(--ease-key), background-color .18s var(--ease-key);
}
nav.mainnav summary:hover{color:#fff; background:var(--surface);}
nav.mainnav summary::-webkit-details-marker{display:none;}
nav.mainnav summary::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:6px;
  height:3px;
  background-image:repeating-linear-gradient(90deg, var(--mc-gold) 0 3px, transparent 3px 6px);
  background-size:6px 3px;
  image-rendering:pixelated;
  opacity:0;
  transition:opacity .15s var(--ease-key);
}
nav.mainnav summary:hover::after,
nav.mainnav details[open] summary::after{ opacity:.9; }
nav.mainnav summary .chevron{
  width:9px; height:9px;
  transition:transform .18s var(--ease-key);
}
nav.mainnav details[open] summary .chevron{ transform:rotate(180deg); }
nav.mainnav .dropdown{
  position:absolute; top:120%; left:0; z-index:20;
  display:flex; flex-direction:column; min-width:200px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:6px;
  box-shadow:0 20px 44px -14px #000b;
}
nav.mainnav .dropdown a{
  font-family:'Press Start 2P', monospace;
  color:var(--text-dim); border-radius:var(--radius-sm);
  padding:12px 11px; font-size:8.5px;
}
nav.mainnav .dropdown a::after{ left:8px; right:8px; bottom:5px; }
nav.mainnav .dropdown a:hover{background:var(--surface); color:#fff;}

/* ---------- account slot ---------- */
.account-slot{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
}
.account-chip{
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
  color:#fff;
  font-size:13.5px; font-weight:600;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 16px 5px 5px;
  box-shadow:0 4px 14px -6px #000a;
  transition:border-color .18s var(--ease-key), transform .18s var(--ease-key), box-shadow .18s var(--ease-key);
}
.account-chip:hover{ border-color:var(--cyan); transform:translateY(-1px); box-shadow:0 8px 18px -6px #000c; }
.account-chip:active{ transform:translateY(0) scale(.98); }
.account-head{
  width:26px; height:26px;
  border-radius:50%;
  display:block;
}
.account-skeleton{
  width:120px; height:36px; border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  opacity:.6;
}
.account-slot .account-logout{ font-size:13px; padding:9px 16px; border-radius:999px; }

/* Anmelden-Button: bewusst im Minecraft-GUI-Stil (Pixel-Font + Bevel-Kanten,
   scharfe Ecken), als kleiner "Retro"-Akzent inmitten des sonst weichen
   Designs. Die gelbe Pixel-Linie wandert beim Hover unter den Text, wie bei
   den Nav-"Switch"-Buttons. */
.account-login{
  font-family:'Press Start 2P', monospace !important;
  font-size:9px !important;
  color:#3a2600 !important;
  background:var(--mc-gold) !important;
  border-radius:4px !important;
  padding:11px 14px !important;
  box-shadow:none !important;
  border-top:3px solid var(--mc-bevel-light);
  border-left:3px solid var(--mc-bevel-light);
  border-right:3px solid var(--mc-bevel-dark);
  border-bottom:3px solid var(--mc-bevel-dark);
  position:relative;
  transition:transform .06s linear, filter .12s ease;
}
.account-login:hover{ filter:brightness(1.05); color:#3a2600 !important; transform:none; }
.account-login:active{
  transform:translateY(2px);
  border-top-width:2px; border-left-width:2px;
  border-bottom-width:1px; border-right-width:1px;
}
.account-login::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:-6px;
  height:3px;
  background-image:repeating-linear-gradient(90deg, var(--mc-gold) 0 3px, transparent 3px 6px);
  background-size:6px 3px;
  image-rendering:pixelated;
  opacity:0;
  transition:opacity .15s var(--ease-key);
}
.account-login:hover::after{ opacity:.9; }

/* =========================================================
   BUTTONS – weich & smooth: sanfter Schatten, leichtes Anheben
   bei Hover, sanftes Eindruecken bei Klick. Minecraft-Akzente
   bleiben gezielt den Switch-Buttons/dem Anmelden-Button vorbehalten.
   ========================================================= */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter', sans-serif;
  font-size:14px; font-weight:700;
  text-decoration:none;
  color:#04121e;
  background:var(--cyan);
  border:none;
  border-radius:999px;
  padding:13px 22px;
  cursor:pointer;
  box-shadow:0 8px 20px -8px #7cd4ff66, 0 2px 6px -2px #0006;
  transition:transform .22s var(--ease-key), box-shadow .22s var(--ease-key), filter .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px #7cd4ff77, 0 4px 10px -3px #0007; filter:brightness(1.05); color:#04121e; }
.btn:active{
  transform:translateY(0) scale(.97);
  box-shadow:0 4px 12px -6px #7cd4ff55, 0 1px 4px -1px #0006;
}
.btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.btn.secondary{
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--border);
  box-shadow:0 6px 16px -8px #0008;
}
.btn.secondary:hover{ background:#242739; color:#fff; box-shadow:0 10px 22px -8px #000a; }

.btn.gold{
  background:linear-gradient(180deg, #ffdd66, var(--mc-gold));
  color:#3a2600;
  box-shadow:0 8px 20px -8px #ffb54766, 0 2px 6px -2px #0006;
}
.btn.gold:hover{ box-shadow:0 14px 28px -10px #ffb54777, 0 4px 10px -3px #0007; }

.btn svg.icon{ opacity:.92; }

/* ---------- hero ---------- */
.hero{
  text-align:center;
  padding:72px 20px 60px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(560px 280px at 50% 0%, #1c4f7c2c, transparent 72%);
  pointer-events:none;
}
.hero .brandmark {
  width: 150px;          /* Oder 128px für noch mehr Präsenz im Hero */
  height: 150px;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 20px;  /* Proportional etwas abgerundeter */
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px;         /* Bitten mehr Breathing-Room fürs Logo */
  margin-bottom: 24px;  /* Etwas mehr Gap zum nachfolgenden Text */
}
.hero h1{ position:relative; }
.hero .highlight{
  background:linear-gradient(90deg,var(--violet-2),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ font-size:17.5px; max-width:620px; margin:0 auto 26px; color:var(--text-dim); position:relative; }

/* IP-Box: passt sich dem weichen Button-Stil an */
.ipbox{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  margin:0 auto 24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:11px 10px 11px 20px;
  font-family:'JetBrains Mono', monospace;
  font-size:14.5px; color:#fff; letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 8px 20px -10px #000a;
  transition:transform .2s var(--ease-key), box-shadow .2s var(--ease-key), border-color .2s var(--ease-key);
}
.ipbox:hover{ border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 12px 26px -10px #000c; }
.ipbox:active{ transform:translateY(0) scale(.98); }
.ipbox .copy-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--cyan); color:#04121e;
  transition:background-color .15s ease;
}
.ipbox.copied{ border-color:var(--ok); }
.ipbox.copied .copy-icon{ background:var(--ok); }
.ipbox .copy-hint{
  font-family:'Inter', sans-serif; font-size:11px; color:var(--text-faint);
  margin-left:2px;
}

.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative;}

/* ---------- Spielmodus-Artwork (Duell/Bau/Bergbau-Bilder) ---------- */
.mode-art{
  display:flex; justify-content:center;
  margin:-6px 0 22px;
}
.mode-art img{
  width:100%; max-width:620px; height:auto;
  filter:drop-shadow(0 10px 26px #7cd4ff2e) drop-shadow(0 24px 48px #000a);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 48%, black 55%, transparent 97%);
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 48%, black 55%, transparent 97%);
}

/* ---------- panels / cards ---------- */
main{padding:40px 0 68px;}

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px 28px;
  margin-bottom:22px;
  box-shadow:0 14px 34px -20px #000c;
}
.panel.dark{
  background:linear-gradient(160deg, #14192c, #0e121c);
  border-color:#28324a;
}
.panel.dark h2{ color:var(--mc-gold); }

.grid{display:grid; gap:16px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:820px){ .grid.cols-3{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .grid.cols-3, .grid.cols-2{grid-template-columns:1fr;} }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px;
  display:flex; flex-direction:column; gap:9px;
  box-shadow:0 10px 24px -18px #000c;
  transition:transform .22s var(--ease-key), border-color .22s var(--ease-key), box-shadow .22s var(--ease-key);
}
.card:hover{ transform:translateY(-4px); border-color:var(--cyan); box-shadow:0 18px 34px -16px #000d; }
.card h3{margin:0;}
.card p{margin:0;}
.card .tag, .tag{
  align-self:flex-start;
  font-size:8.5px; line-height:1.4;
  border-radius:4px;
  background:var(--mc-green-dark); color:#fff;
  padding:6px 8px;
}

/* ---------- status ---------- */
.badge{font-size:8.5px; padding:7px 10px; border-radius:4px; color:#fff; display:inline-block;}
.badge.online{background:var(--ok); color:#06210f;}
.badge.offline{background:var(--danger);}
.badge.maint{background:var(--warn); color:#3a2600;}

.status-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 0; border-bottom:1px solid var(--border-soft);
  flex-wrap:wrap;
}
.status-row:last-child{border-bottom:none;}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:9px; box-shadow:0 0 8px currentColor;}
.dot.on{background:var(--ok); color:var(--ok);}
.dot.off{background:var(--danger); color:var(--danger);}
.dot.warn{background:var(--warn); color:var(--warn);}

/* ---------- Aktive Wartungen / Störungen (nur gelb umrandet, nicht ausgefüllt) ---------- */
.alert-active{
  background:transparent;
  border:2px solid var(--mc-gold);
  border-radius:var(--radius-md);
  padding:20px 22px;
  margin:0 0 22px;
  color:var(--text);
  box-shadow:0 12px 28px -10px #ffd13344, 0 4px 12px -4px #0008;
  animation:activePulse 2.2s ease-in-out infinite;
}
.alert-active-head{
  display:flex; align-items:center; gap:10px;
  font-family:'Press Start 2P', monospace;
  font-size:11px; letter-spacing:.02em;
  color:var(--mc-gold);
  margin-bottom:12px;
}
.alert-active-head .alert-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  background:transparent;
  border:2px solid var(--mc-gold);
  color:var(--mc-gold);
  font-size:17px; line-height:1;
}
.alert-active-item{
  background:transparent;
  border:1px solid var(--mc-gold);
  border-radius:var(--radius-sm);
  padding:12px 14px; margin-bottom:10px;
}
.alert-active-item:last-child{margin-bottom:0;}
.alert-active-item strong{color:#fff; display:block; font-size:15.5px; margin-bottom:2px;}
.alert-active-item p{color:var(--text-dim); margin:0; font-size:14.5px;}
.alert-active-item .kind-tag{
  display:inline-block;
  font-family:'Press Start 2P', monospace; font-size:7.5px;
  border-radius:4px; padding:5px 7px; margin-bottom:7px;
  border:1px solid var(--mc-gold);
  background:transparent; color:var(--mc-gold);
}
.alert-active-item .kind-tag.stoerung{ background:transparent; border-color:var(--danger); color:var(--danger); }
.alert-active-item .kind-tag.wartung{ background:transparent; border-color:var(--mc-gold); color:var(--mc-gold); }
@keyframes activePulse{
  0%, 100%{ box-shadow:0 12px 28px -10px #ffd13366, 0 4px 12px -4px #0008; }
  50%{ box-shadow:0 12px 34px -8px #ffd133aa, 0 4px 12px -4px #0008; }
}
@media (prefers-reduced-motion: reduce){
  .alert-active{ animation:none; }
}

/* ---------- Wartungsmodus laut Plugin (rot umrandet) ---------- */
.alert-maint{
  background:transparent;
  border:2px solid var(--danger);
  border-radius:var(--radius-md);
  padding:20px 22px;
  margin:0 0 22px;
  color:var(--text);
  box-shadow:0 12px 28px -10px #f8556f44, 0 4px 12px -4px #0008;
}
.alert-maint-head{
  display:flex; align-items:center; gap:10px;
  font-family:'Press Start 2P', monospace;
  font-size:11px; letter-spacing:.02em;
  color:var(--danger);
  margin-bottom:12px;
}
.alert-maint-head .alert-icon, .alert-maint .alert-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  background:transparent;
  border:2px solid var(--danger);
  color:var(--danger);
  font-size:17px; line-height:1;
}
.alert-maint p{color:var(--text-dim); margin:0 0 8px;}
.alert-maint p b{color:#fff;}
.alert-maint-src{font-size:13px; color:var(--text-faint);}
.alert-maint code{background:var(--surface-2);}

/* ---------- Alles ok (grün umrandet) ---------- */
.alert-ok{
  display:flex; align-items:center; gap:12px;
  background:transparent;
  border:2px solid var(--ok);
  border-radius:var(--radius-md);
  padding:16px 20px;
  margin:0 0 22px;
  color:var(--text);
}
.alert-ok .alert-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--ok);
  color:var(--ok);
  font-size:16px;
}
.alert-ok b{color:var(--ok);}

/* ---------- Live-Status ---------- */
.live-tag{
  font-family:'Press Start 2P', monospace;
  font-size:7.5px; vertical-align:middle;
  border:1px solid var(--cyan); color:var(--cyan);
  border-radius:4px; padding:5px 7px; margin-left:8px;
}
.live-tag-manual{ border-color:var(--text-faint); color:var(--text-faint); }
.live-summary{
  display:grid; gap:12px;
  grid-template-columns:repeat(4, 1fr);
}
@media (max-width:700px){ .live-summary{grid-template-columns:1fr 1fr;} }
.live-stat{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 14px;
}
.live-stat .stat-value{font-size:17px;}
.live-updated{margin:14px 0 0; font-size:13.5px;}
.live-motd{font-size:13.5px; overflow-wrap:anywhere;}
.link-btn{
  background:none; border:none; padding:0;
  color:var(--cyan); cursor:pointer; font-size:inherit; font-family:inherit;
  text-decoration:underline; text-underline-offset:2px;
}
.link-btn:hover{color:#fff;}
.link-btn:disabled{opacity:.5; cursor:wait;}
.live-card h3{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.live-card p svg.icon{width:15px; height:15px;}
.maint-note{color:var(--danger); font-size:13.5px; margin:0; display:flex; align-items:center; gap:7px;}
.maint-note svg.icon{width:14px; height:14px;}
.alert-active-head .alert-icon svg.icon,
.alert-maint-head .alert-icon svg.icon,
.alert-ok .alert-icon svg.icon{width:18px; height:18px;}
.web-meta{font-size:12.5px; margin-left:8px;}
.sub-head{font-size:15px; margin:20px 0 10px; color:var(--text-dim); font-weight:700;}

/* ---------- rules ---------- */
.rule-list{list-style:none; margin:0; padding:0;}
.rule-list li{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--cyan);
  border-radius:var(--radius-sm);
  padding:13px 15px; margin-bottom:9px;
  color:var(--text-dim);
}
.rule-list li b{color:#fff;}
.rule-list.strafen li{border-left-color:var(--danger);}

table{width:100%; border-collapse:collapse; margin:14px 0; overflow:hidden; border-radius:var(--radius-md);}
th,td{border-bottom:1px solid var(--border-soft); padding:11px 13px; text-align:left; font-size:14.5px; color:var(--text-dim);}
th{background:var(--surface-2); color:#fff; font-family:'Inter'; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
tr:hover td{background:#ffffff05;}

/* ---------- commands ---------- */
.cmd{
  background:#0a0b12; color:#7CFC9A;
  padding:13px 15px; margin:9px 0;
  font-family:'JetBrains Mono', monospace; font-size:14.5px;
  border:1px solid var(--border);
  border-left:3px solid var(--mc-gold);
  border-radius:var(--radius-sm);
  overflow-x:auto;
}
.cmd-tag{font-size:8px; background:var(--mc-green-dark); color:#fff; border-radius:4px; padding:5px 7px; margin-right:8px;}

/* ---------- team ---------- */
.team-card{text-align:center;}
.team-card .avatar{
  width:54px; height:54px; margin:0 auto 10px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
}
.role{font-size:8px; color:#3a2600; background:var(--mc-gold); border-radius:4px; display:inline-block; padding:5px 8px; margin-top:4px;}

/* ---------- footer ---------- */
footer{
  background:var(--bg-1);
  color:var(--text-dim);
  border-top:1px solid var(--border-soft);
  padding:30px 0;
}
footer .wrap{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;}
footer a{color:var(--text-dim);}
footer a:hover{color:var(--cyan);}
footer small{color:var(--text-faint); font-size:13px;}
footer small.powered-by{font-size:11px; opacity:.7;}
footer nav{display:flex; gap:16px; flex-wrap:wrap; font-size:14px;}

/* ---------- misc ---------- */
.muted{color:var(--text-faint);}
.center{text-align:center;}
.section-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  margin:32px 0;
  border:none;
}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:700px){ .two-col{grid-template-columns:1fr;} }

.breadcrumb{font-size:13.5px; margin-bottom:16px; color:var(--text-faint);}
.breadcrumb a{color:var(--text-faint);}
.breadcrumb a:hover{color:var(--cyan);}

code{
  background:var(--surface-2); color:var(--mc-gold);
  border-radius:5px; padding:2px 6px;
  font-family:'JetBrains Mono', monospace; font-size:.92em;
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}

/* Eingabefelder im selben cleanen Stil (siehe Anmelden-Seite) */
input[type="text"]{
  transition:border-color .12s var(--ease-key), box-shadow .12s var(--ease-key);
}
input[type="text"]:focus{
  outline:none;
  border-color:var(--cyan) !important;
  box-shadow:0 0 0 3px #7cd4ff26;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-scroll-behavior:auto; scroll-behavior:auto;}
  .card, .btn, .ipbox, nav.mainnav a{transition:none;}
}

@media (max-width:600px){
  .hero{padding:48px 16px 40px;}
  .ipbox{font-size:12.5px; padding:9px 8px 9px 16px;}
  header.site-header .bar{flex-direction:column; align-items:flex-start;}
  nav.mainnav{width:100%; margin-left:0;}
  .account-slot{width:100%; margin-left:0; justify-content:flex-start;}
}

/* =============================================================
   PROFIL & BELOHNUNGEN
   ============================================================= */
.profile-hero{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.profile-head{
  width:84px; height:84px;
  object-fit:cover;
  border-radius:18px;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  border:1px solid var(--border);
}
.profile-hero-info{ min-width:0; }
.rank-tag{ background:var(--mc-gold); color:#3a2600; }

.stat-card{ flex-direction:row; align-items:center; gap:14px; }
.stat-card.stat-card-badge{ padding:22px 20px; }
.stat-icon{
  width:44px; height:44px; object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 6px 10px #0007);
}
.stat-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); display:block; margin-bottom:4px; }
.stat-value{ font-size:20px; font-weight:800; color:var(--text); }

/* ---- tägliche Belohnung ---- */
.reward-panel{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.reward-panel-text{ flex:1 1 320px; min-width:260px; }
.reward-art{
  width:120px; height:120px; object-fit:contain;
  filter:drop-shadow(0 14px 22px #0009);
  flex-shrink:0;
}
.reward-status{ margin:12px 0 0; font-size:14px; color:var(--text-dim); min-height:1.4em; }

/* ---- Glücksrad ---- */
.wheel-panel{ text-align:center; }
.wheel-area{
  display:flex; align-items:center; justify-content:center; gap:40px;
  flex-wrap:wrap; margin-top:20px;
}
.wheel-wrap{
  position:relative; width:260px; height:260px; flex-shrink:0;
}
.wheel{
  width:100%; height:100%; border-radius:50%;
  border:6px solid var(--mc-gold);
  box-shadow:0 0 0 3px #0009, 0 20px 40px -16px #000c, inset 0 0 24px #00000055;
  position:relative;
  overflow:hidden; /* verhindert, dass Labels je über den Radrand hinausragen */
  transform:rotate(0deg);
  transition:transform 4.2s cubic-bezier(.18,.86,.15,1);
}
.wheel-label{
  position:absolute;
  transform:translate(-50%, -50%) rotate(0deg);
  display:block;
  font-size:11px; font-weight:800; color:#fff;
  text-shadow:0 1px 3px #000c, 0 0 4px #0009;
  white-space:nowrap;
  text-align:center;
  pointer-events:none;
  /* transition wird zusätzlich per JS synchron zur Rad-Rotation gesetzt,
     damit der Text während & nach jedem Dreh garantiert waagerecht bleibt. */
}
.wheel-glow-ring{
  position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(closest-side, transparent 78%, #ffd13355 88%, transparent 92%);
  opacity:0; pointer-events:none; z-index:0;
}
.wheel-wrap.spinning .wheel-glow-ring{
  opacity:1;
  animation:wheelGlowPulse 1.1s ease-in-out infinite;
}
.wheel-wrap.spinning .wheel{
  box-shadow:0 0 0 3px #0009, 0 0 46px 4px #ffd13399, 0 20px 40px -16px #000c, inset 0 0 24px #00000055;
}
@keyframes wheelGlowPulse{
  0%, 100%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.06); opacity:1; }
}
.wheel-pointer{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:0; height:0; z-index:2;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:20px solid var(--cyan);
  filter:drop-shadow(0 4px 6px #000a);
}
.wheel-controls{ display:flex; flex-direction:column; gap:12px; min-width:220px; }
.wheel-controls .btn{ width:100%; justify-content:center; }
.wheel-controls .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ---- Ergebnis-Overlay ---- */
.prize-modal{
  position:fixed; inset:0; z-index:80;
  background:#05060ccc;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.prize-modal[hidden]{ display:none; }
.prize-modal-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px; max-width:360px; width:100%;
  text-align:center;
  box-shadow:0 30px 60px -20px #000d;
}
.prize-modal-icon{
  width:96px; height:96px; object-fit:contain; margin:0 auto 16px;
  filter:drop-shadow(0 14px 20px #0009);
}
.prize-modal-card h3{ margin:0 0 8px; color:var(--mc-gold); }
.prize-modal-card p{ color:var(--text-dim); margin:0 0 22px; }

@media (max-width:600px){
  .wheel-wrap{ width:220px; height:220px; }
  .reward-panel{ flex-direction:column; text-align:center; }
}

/* =============================================================
   PROFIL – Einflug-Animationen ("epische" Seiten-Eröffnung)
   ============================================================= */
#profil-content > .reveal-item{
  animation:profilRevealUp .6s var(--ease-key) both;
}
#profil-content > .reveal-item:nth-of-type(1){ animation-delay:.02s; }
#profil-content > .reveal-item:nth-of-type(2){ animation-delay:.10s; }
#profil-content > .reveal-item:nth-of-type(3){ animation-delay:.18s; }
#profil-content > .reveal-item:nth-of-type(4){ animation-delay:.26s; }
#profil-content > .reveal-item:nth-of-type(5){ animation-delay:.34s; }
@keyframes profilRevealUp{
  from{ opacity:0; transform:translateY(22px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  #profil-content > .reveal-item{ animation:none; }
}

/* Kopf-Avatar: sanft pulsierender "Legendary Glow"-Ring */
.profile-head-wrap{ position:relative; flex-shrink:0; }
.profile-head-wrap::before{
  content:"";
  position:absolute; inset:-6px; border-radius:22px;
  background:conic-gradient(from 0deg, var(--cyan), var(--violet-2), var(--mc-gold), var(--cyan));
  opacity:.55; filter:blur(6px);
  animation:profileGlowSpin 6s linear infinite;
  z-index:0;
}
.profile-head-wrap .profile-head{ position:relative; z-index:1; }
@keyframes profileGlowSpin{ to{ transform:rotate(360deg); } }

/* Tages-Truhe: leichtes Schweben, Schütteln beim Abholen, Aufblitzen beim Öffnen */
.reward-art-wrap{ flex-shrink:0; }
.reward-art{ animation:chestFloat 3.2s ease-in-out infinite; }
@keyframes chestFloat{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-6px) rotate(-2deg); }
}
.reward-art.shaking{ animation:chestShake .5s ease-in-out infinite; }
@keyframes chestShake{
  0%, 100%{ transform:translate(0,0) rotate(0deg); }
  20%{ transform:translate(-3px,0) rotate(-4deg); }
  40%{ transform:translate(3px,0) rotate(4deg); }
  60%{ transform:translate(-3px,0) rotate(-3deg); }
  80%{ transform:translate(3px,0) rotate(3deg); }
}
.reward-art.chest-open{
  animation:chestOpenPop .5s var(--ease-key);
  filter:drop-shadow(0 14px 22px #0009) drop-shadow(0 0 22px #ffd13399);
}
@keyframes chestOpenPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18) rotate(-4deg); }
  100%{ transform:scale(1); }
}

/* =============================================================
   MYSTERY BOX
   ============================================================= */
.mystery-panel{ text-align:center; }
.mystery-area{
  display:flex; align-items:center; justify-content:center; gap:40px;
  flex-wrap:wrap; margin-top:20px;
}
.mystery-box-wrap{
  position:relative; width:160px; height:160px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.mystery-box-img{
  width:120px; height:120px; object-fit:contain; position:relative; z-index:1;
  filter:drop-shadow(0 16px 24px #0009);
  animation:mysteryFloat 3.6s ease-in-out infinite;
}
@keyframes mysteryFloat{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-7px) rotate(2deg); }
}
.mystery-box-glow{
  position:absolute; inset:6px; border-radius:50%;
  background:radial-gradient(closest-side, #b06bff55, transparent 72%);
  animation:mysteryGlowPulse 2.4s ease-in-out infinite;
  z-index:0;
}
@keyframes mysteryGlowPulse{
  0%, 100%{ opacity:.5; transform:scale(.94); }
  50%{ opacity:1; transform:scale(1.08); }
}
.mystery-box-wrap.shaking .mystery-box-img{
  animation:chestShake .35s ease-in-out infinite;
}
.mystery-box-wrap.shaking .mystery-box-glow{
  animation:mysteryGlowPulse .35s ease-in-out infinite;
  background:radial-gradient(closest-side, #ffd13399, transparent 72%);
}
.mystery-box-wrap.bursting .mystery-box-img{
  animation:chestOpenPop .5s var(--ease-key);
}
.mystery-box-wrap.bursting .mystery-box-glow{
  animation:mysteryBurstFlash .5s ease-out;
  background:radial-gradient(closest-side, #fff, #ffd133 40%, transparent 74%);
}
@keyframes mysteryBurstFlash{
  0%{ opacity:0; transform:scale(.6); }
  40%{ opacity:1; transform:scale(1.5); }
  100%{ opacity:0; transform:scale(2.1); }
}
.mystery-controls{ display:flex; flex-direction:column; gap:12px; min-width:220px; align-items:center; }
.mystery-controls .btn{ width:100%; justify-content:center; }
.mystery-controls .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* Seltenheits-Badge im Mystery-Modal */
.mystery-rarity-tag{
  display:inline-block; margin:0 auto 12px; padding:5px 14px;
  border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:#1a1420;
  box-shadow:0 6px 16px -6px #0009;
}
.mystery-modal-card{
  border:1px solid color-mix(in srgb, var(--rarity-color, var(--mc-gold)) 55%, var(--border));
  box-shadow:0 30px 60px -20px #000d, 0 0 40px -10px color-mix(in srgb, var(--rarity-color, var(--mc-gold)) 60%, transparent);
}

/* Pop-in-Animation fürs Ergebnis-Overlay (Rad + Mystery Box), spielt bei
   jedem Öffnen erneut ab (Klasse wird per JS mit Reflow neu getriggert). */
.prize-modal-card.pop-in{ animation:prizePopIn .45s var(--ease-key); }
.prize-modal-icon{ animation:prizeIconPop .5s var(--ease-key) .05s both; }
@keyframes prizePopIn{
  0%{ opacity:0; transform:scale(.75) translateY(14px); }
  60%{ opacity:1; transform:scale(1.04) translateY(-2px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes prizeIconPop{
  0%{ opacity:0; transform:scale(.4) rotate(-12deg); }
  70%{ opacity:1; transform:scale(1.12) rotate(4deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}

/* Kurzer Bildschirm-Flash bei einem Jackpot/Gratis-Rang */
body.jackpot-flash::after{
  content:"";
  position:fixed; inset:0; z-index:90; pointer-events:none;
  background:radial-gradient(circle at 50% 30%, #ffd13355, transparent 70%);
  animation:jackpotFlash .9s ease-out;
}
@keyframes jackpotFlash{
  0%{ opacity:0; }
  15%{ opacity:1; }
  100%{ opacity:0; }
}

/* =============================================================
   KONFETTI-PARTIKEL (für Tages-Belohnung, Rad- & Mystery-Box-Gewinne)
   ============================================================= */
#confetti-layer{
  position:fixed; inset:0; z-index:85; pointer-events:none; overflow:hidden;
}
.confetti-piece{
  position:absolute;
  border-radius:2px;
  opacity:.95;
  animation-name:confettiFall;
  animation-timing-function:cubic-bezier(.15,.6,.4,1);
  animation-fill-mode:forwards;
  will-change:transform, opacity;
}
@keyframes confettiFall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  100%{ transform:translate(var(--drift,0), 78vh) rotate(var(--rot,180deg)); opacity:0; }
}

@media (max-width:600px){
  .mystery-box-wrap{ width:130px; height:130px; }
  .mystery-box-img{ width:96px; height:96px; }
}