:root{--bg:#121416;--bg2:#1e2124;--card:rgba(30,33,36,.85);--line:#2d3237;--text:#ffffff;--muted:#9aa1a8;--acc:#44d62c;--acc-glow:rgba(68,214,44,.25);--ok:#44d62c;--bad:#ef4f4f;--warn:#e8b33c;--info:#4a9eff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 30%,var(--bg2) 0%,var(--bg) 70%) fixed;background-color:var(--bg);color:var(--text);font:15px/1.5 "Montserrat",system-ui,sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:.2em 0 .6em;font-weight:900;text-transform:uppercase;letter-spacing:2px}h1 span.g{color:var(--acc)}h2{font-size:1rem;margin:0 0 .7em;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.3rem 1.2rem;background:rgba(14,15,17,.9);border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--acc-glow)}
.brand{display:flex;align-items:center;gap:.4rem;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;color:var(--text)}.brand:hover{text-decoration:none}.brand img{height:58px;margin:-6px -4px;filter:drop-shadow(0 0 8px var(--acc-glow))}.brand span{color:var(--acc)}
.top nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;font-weight:700;font-size:.9rem}.top nav a{color:var(--text)}.top nav a:hover{color:var(--acc);text-decoration:none}
main{max-width:1200px;margin:0 auto;padding:1.2rem 16px 3rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1rem;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.card.narrow{max-width:420px;margin:3rem auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.card.server{color:var(--text);display:block;transition:border-color .2s,box-shadow .2s,transform .2s}.card.server:hover{border-color:var(--acc);box-shadow:0 0 18px var(--acc-glow);transform:translateY(-2px);text-decoration:none}
.row{display:flex;align-items:center;gap:.7rem}.row.wrap{flex-wrap:wrap}.row h1,.row h2{margin:0}
.head{margin-bottom:.8rem;flex-wrap:wrap}
.muted{color:var(--muted)}.small{font-size:.85rem}.r{text-align:right}.nowrap{white-space:nowrap}.break{word-break:break-all}
label{display:block;margin:.6rem 0;color:var(--muted);font-size:.9rem}label input{display:block;width:100%;margin-top:.25rem}
label.check{display:flex;align-items:center;gap:.35rem;margin:0}label.check input{width:auto;margin:0}
input,select,textarea{background:#0f1114;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:.45rem .6rem;font:inherit;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
.btn{display:inline-block;font-weight:700;background:#2a2e36;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:.45rem .9rem;font:inherit;cursor:pointer}
.btn:hover{background:#343944;text-decoration:none}.btn:disabled{opacity:.5;cursor:wait}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#121416}.btn.primary:hover{box-shadow:0 0 12px var(--acc);filter:brightness(1.05)}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)}.btn.danger:hover{background:var(--bad);color:#fff}
.btn.tiny{padding:.15rem .5rem;font-size:.85rem}
button.link{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:0}
form.inline{display:inline}
.actions{display:flex;gap:.6rem;flex-wrap:wrap}
.badge{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.8rem;background:#2a2e36;color:var(--muted)}
.badge.on,.badge.ok{background:rgba(68,214,44,.15);color:var(--ok);box-shadow:0 0 8px var(--acc-glow)}.badge.off,.badge.fehler,.badge.abgebrochen{background:rgba(239,79,79,.15);color:var(--bad)}
.badge.maint,.badge.laeuft{background:rgba(232,179,60,.15);color:var(--warn)}
.stats{font-size:.85rem}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow-x:auto}
.tabs a{padding:.5rem .9rem;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}.tabs a.on{color:var(--text);border-color:var(--acc)}
.flash{padding:.6rem .9rem;border-radius:8px;margin-bottom:1rem;border:1px solid}
.flash.ok{border-color:var(--ok);background:rgba(68,214,44,.08)}.flash.error{border-color:var(--bad);background:rgba(239,79,79,.08)}.flash.info{border-color:var(--info);background:rgba(74,158,255,.08)}
pre.log{background:#0a0b0d;border:1px solid var(--line);border-radius:6px;padding:.7rem;margin:.8rem 0;overflow:auto;white-space:pre-wrap;word-break:break-all;font:12.5px/1.4 ui-monospace,Menlo,Consolas,monospace}
pre.log.tall{height:65vh}pre.log.small{max-height:40vh}
textarea.editor{width:100%;height:65vh;margin:.8rem 0;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;white-space:pre;tab-size:4}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}th{color:var(--muted);font-weight:500;font-size:.85rem}
.card{overflow-x:auto}
table.perms td,table.perms th{text-align:center}table.perms td:first-child,table.perms th:first-child{text-align:left}
.crumbs{margin-bottom:.8rem;word-break:break-all}.tools{margin-bottom:.4rem;gap:1.2rem}
#conform input{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace}
@media (max-width:600px){.top{padding:.6rem 16px}th:nth-child(3),td:nth-child(3){display:none}}

/* Login im Stil der Startseite */
.login-wrap{text-align:center;max-width:420px;margin:2rem auto;animation:fadeIn 1s ease-out}
.login-wrap .logo{width:100%;max-width:300px;filter:drop-shadow(0 0 15px rgba(68,214,44,.2));margin-bottom:-1rem}
.login-wrap .card{text-align:left;margin:0}
.login-wrap h1{text-align:center;font-size:1.8rem}
.glowbar{height:3px;border-radius:2px;background:#333;overflow:hidden;margin:1.2rem 0 0}.glowbar div{height:100%;width:40%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:loading 2.5s infinite ease-in-out}
.footer{text-align:center;color:#666;font-size:.8rem;margin-top:2rem}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes loading{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.login-wrap,.glowbar div{animation:none}}
@media (max-width:600px){.brand b{display:none}.brand img{height:48px}}
table.pl td,table.pl th{padding:.35rem .5rem}
details summary{cursor:pointer;font-weight:700;padding:.3rem 0}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:.4rem 0}.chip{background:#2a2e36;border:1px solid var(--line);border-radius:99px;padding:.1rem .6rem;font-size:.85rem}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--acc);box-shadow:0 0 14px var(--acc-glow);padding:.6rem 1rem;border-radius:8px;z-index:10;max-width:90vw}
.card.create{display:block;color:var(--text);border-style:dashed;border-color:var(--acc);text-align:center}.card.create:hover{box-shadow:0 0 18px var(--acc-glow);text-decoration:none}
.gamepick{margin-bottom:1rem}label.card.game{display:block;cursor:pointer;margin:0;color:var(--text)}label.card.game input{position:absolute;opacity:0}
label.card.game.sel{border-color:var(--acc);box-shadow:0 0 16px var(--acc-glow)}label.card.game:hover{border-color:var(--acc)}
.warn{color:var(--warn)}code.addr{font-size:1.15rem;color:var(--acc);background:#0a0b0d;padding:.3rem .6rem;border-radius:6px}
.danger-zone summary{color:var(--bad)}
[hidden]{display:none !important}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 1rem;align-items:end}
.settings-grid label.check{margin:.9rem 0}
fieldset.gamesettings{border:1px solid var(--line);border-radius:8px;padding:.4rem 1rem .6rem;margin:1rem 0}
fieldset.gamesettings legend{font-weight:700;padding:0 .4rem}
.flash.warnbox{border-color:var(--warn);background:rgba(232,179,60,.08);justify-content:space-between}
/* Kacheln mit Spielbild: Bild rechts eingeblendet, nach links in die Karte auslaufend */
.card.server[style*="--img"],label.card.game[style*="--img"]{position:relative;overflow:hidden;isolation:isolate;min-height:120px}
.card.server[style*="--img"]::before,label.card.game[style*="--img"]::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(24,27,30,.97) 30%,rgba(24,27,30,.75) 60%,rgba(24,27,30,.35)),var(--img) right center/cover no-repeat;
  transition:transform .4s ease,filter .4s ease;filter:saturate(.85)}
.card.server[style*="--img"]:hover::before,label.card.game[style*="--img"]:hover::before,label.card.game.sel::before{transform:scale(1.06);filter:saturate(1.1)}
label.card.game[style*="--img"]{display:flex;flex-direction:column;justify-content:flex-end;min-height:150px}
@media (prefers-reduced-motion:reduce){.card.server::before,label.card.game::before{transition:none}}
/* Statusuebersicht */
.status-list{display:grid;gap:.8rem}
.card.status-row{position:relative;overflow:hidden;isolation:isolate;margin:0}
.card.status-row[style*="--img"]::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(24,27,30,.97) 60%,rgba(24,27,30,.9) 72%,rgba(24,27,30,.45)),var(--img) right 35%/auto 115% no-repeat}
.card.status-row[style*="mc_dragon"]::before{background-position:center,right 35% !important}
.status-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.status-head h2{margin:0 0 .3rem}
code.small-addr{font-size:.9rem;padding:.15rem .5rem}
.histbar{display:flex;gap:2px;margin:.9rem 0 .7rem;height:22px}
.histbar span{flex:1;border-radius:2px;background:#3a3f46}
.histbar .ok{background:var(--ok);box-shadow:0 0 6px var(--acc-glow)}.histbar .part{background:var(--warn)}.histbar .bad{background:var(--bad)}
.status-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.6rem}
.status-stats div{display:flex;flex-direction:column}.status-stats b{font-size:1.1rem}.status-stats span{color:var(--muted);font-size:.78rem}
@media (max-width:600px){.histbar{height:16px;gap:1px}}
/* Netz-Hintergrund (Startseite, Status) */
canvas.netbg{position:fixed;inset:0;z-index:0;pointer-events:none}
body:has(canvas.netbg) .top,body:has(canvas.netbg) main{position:relative;z-index:1}
/* Discord-Uebersicht */
aside.discord{position:fixed;top:84px;right:0;z-index:5;display:flex;align-items:flex-start;max-height:calc(100vh - 100px);pointer-events:none}
aside.discord>*{pointer-events:auto}
.dc-tab{display:flex;align-items:center;gap:.45rem;writing-mode:vertical-rl;transform:rotate(180deg);background:#5865f2;color:#fff;border:0;border-radius:0 8px 8px 0;
  padding:.8rem .45rem;font:700 .8rem Montserrat,sans-serif;cursor:pointer;box-shadow:0 0 14px rgba(88,101,242,.4)}
.dc-tab:hover{filter:brightness(1.1)}
.dc-logo{width:18px;height:18px;transform:rotate(90deg);background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127 96'%3E%3Cpath fill='%23fff' d='M107.7 8.1A105 105 0 0 0 81.5 0a72 72 0 0 0-3.4 6.8 97.7 97.7 0 0 0-29.1 0A72 72 0 0 0 45.6 0a105.9 105.9 0 0 0-26.3 8.1C2.8 32.6-1.7 56.6.6 80.2a105.7 105.7 0 0 0 32.2 16.2 77.7 77.7 0 0 0 6.9-11.1 68.4 68.4 0 0 1-10.9-5.2c.9-.7 1.8-1.4 2.6-2.1a75.6 75.6 0 0 0 64.3 0l2.6 2.1a68.7 68.7 0 0 1-10.9 5.2 77 77 0 0 0 6.9 11.1 105.3 105.3 0 0 0 32.2-16.2c2.7-27.4-4.7-51.2-19.8-72.1ZM42.5 65.7c-6.3 0-11.5-5.7-11.5-12.8s5-12.8 11.5-12.8S54 45.9 54 52.9s-5.1 12.8-11.5 12.8Zm42.4 0c-6.3 0-11.5-5.7-11.5-12.8s5-12.8 11.5-12.8 11.5 5.8 11.4 12.8-5 12.8-11.4 12.8Z'/%3E%3C/svg%3E")}
.dc-body{display:none;width:260px;max-height:calc(100vh - 100px);overflow-y:auto;background:rgba(24,27,30,.94);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-right:0;border-radius:10px 0 0 10px;padding:.9rem;box-shadow:0 6px 24px rgba(0,0,0,.4)}
aside.discord.open .dc-body{display:block}
aside.discord.open .dc-tab{order:-1}
.dc-head{display:flex;gap:.6rem;align-items:center;margin-bottom:.7rem}.dc-head img{width:42px;height:42px;border-radius:12px}
.dc-head b{display:block;font-size:.95rem}.dc-head span{font-size:.78rem;color:var(--muted)}
.dc-join{display:block;text-align:center;background:#5865f2;border-color:#5865f2;color:#fff;margin-bottom:.4rem}.dc-join:hover{box-shadow:0 0 12px rgba(88,101,242,.6)}
aside.discord h3{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:.9rem 0 .4rem}
aside.discord ul{list-style:none;margin:0;padding:0}
aside.discord li{display:flex;align-items:center;gap:.5rem;padding:.22rem 0;font-size:.84rem;min-width:0}
.dc-av{position:relative;flex:none}.dc-av img,.dc-noav{width:26px;height:26px;border-radius:50%;display:block;background:#3a3f46}
.dc-av .st{position:absolute;right:-2px;bottom:-2px;border:2px solid #1c1f23}
.st{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3ba55d;margin-right:.3rem;vertical-align:middle}
.dc-av .st{margin:0}.st.idle{background:#faa61a}.st.dnd{background:#ed4245}
.dc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dc-name small{display:block;color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis}
.dc-voice{font-size:.84rem;margin-bottom:.4rem}.dc-voice ul{padding-left:.6rem;margin-top:.2rem}
@media (max-width:700px){aside.discord{top:auto;bottom:16px}.dc-body{width:min(260px,80vw);max-height:60vh}}
.footer a{color:#888}.footer a:hover{color:var(--acc)}
.legal{max-width:760px}.legal h2{margin-top:1.4rem}.legal p{margin:.3rem 0 .8rem;line-height:1.6}
/* Login mit Bild */
.login-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,420px);gap:2.5rem;align-items:center;margin:1.5rem auto;max-width:1200px}
.login-split .login-wrap{margin:0;max-width:none}
.login-art img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 30px rgba(68,214,44,.18));animation:fadeIn 1.2s ease-out}
@media (max-width:899px){.login-split{grid-template-columns:1fr;gap:1rem;margin-top:.5rem}.login-art img{max-width:520px;margin:0 auto}}
/* Fehlerseite */
.error-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center;max-width:1000px;margin:2rem auto}
.error-art{width:100%;height:auto;filter:drop-shadow(0 0 24px rgba(68,214,44,.15))}
@media (max-width:760px){.error-split{grid-template-columns:1fr}.error-art{max-width:420px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.login-art img{animation:none}}
/* Drachen-Bild: Kopf nicht oben abschneiden */
.card[style*="mc_dragon"]::before{background-position:center,right 35% !important}
/* Varo: freigestellte Figur rechts statt Hintergrundfoto, mit gruenem Schein dahinter */
.card[style*="varo_knight"]::before{background:
  radial-gradient(ellipse 160px 120% at calc(100% - 80px) 55%,rgba(68,214,44,.28),transparent 70%),
  var(--img) right 8px bottom -14px/auto 118% no-repeat !important;filter:none !important}
.card[style*="varo_knight"]:hover::before{transform:scale(1.04) translateY(-2px)}
/* Drache_Dev: freigestellter Feuer-Drache mit orangem Schein */
.card[style*="dev_fire"]::before{background:
  radial-gradient(ellipse 160px 120% at calc(100% - 80px) 55%,rgba(255,140,40,.26),transparent 70%),
  var(--img) right 8px bottom -14px/auto 118% no-repeat !important;filter:none !important}
.card[style*="dev_fire"]:hover::before{transform:scale(1.04) translateY(-2px)}
/* Drache: freigestellter Koenigs-Drache mit goldenem Schein */
.card[style*="drache_king"]::before{background:
  radial-gradient(ellipse 160px 120% at calc(100% - 80px) 55%,rgba(255,200,60,.24),transparent 70%),
  var(--img) right 8px bottom -14px/auto 118% no-repeat !important;filter:none !important}
.card[style*="drache_king"]:hover::before{transform:scale(1.04) translateY(-2px)}
/* ---- Lesbarkeit auf Bildkacheln ---- */
.badge{font-weight:700;border:1px solid transparent;white-space:nowrap}
.badge.on,.badge.ok{background:#163a11;color:#8dff6a;border-color:rgba(68,214,44,.55);box-shadow:none}
.badge.off,.badge.fehler,.badge.abgebrochen{background:#4a1616;color:#ffb3b3;border-color:rgba(239,79,79,.6)}
.badge.maint,.badge.laeuft{background:#45360d;color:#ffe08a;border-color:rgba(232,179,60,.6)}
.card[style*="--img"] h2,.card[style*="--img"] .muted,.card[style*="--img"] .stats,.card[style*="--img"] code,
.status-row h2,.status-stats b{text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.6)}
.card[style*="--img"] .muted,.card[style*="--img"] .stats{color:#b4bcc5}
.card.server .row{align-items:flex-start;justify-content:space-between}
.card.server .row h2{word-break:break-word}
/* Freigestellte Figuren: nach links in die Karte ausblenden, damit der Text frei bleibt */
.card.cutout::before{-webkit-mask-image:linear-gradient(90deg,transparent 28%,rgba(0,0,0,.25) 48%,#000 72%);
  mask-image:linear-gradient(90deg,transparent 28%,rgba(0,0,0,.25) 48%,#000 72%)}
/* Statusseite: Figur als Avatar neben dem Namen statt hinter den Werten */
.status-head .status-title{flex:1;min-width:0}
.status-avatar{width:64px;height:64px;object-fit:contain;flex:none;margin:-6px 0 -6px -4px;
  filter:drop-shadow(0 0 10px rgba(68,214,44,.35))}
.status-row.has-avatar .status-head{align-items:center}
.status-row.has-avatar .badge{align-self:flex-start}
@media (max-width:600px){.status-avatar{width:52px;height:52px}}
/* DayZ: Drache in der Truhe mit warmem Holz-Schein */
.card[style*="dayz_chest"]::before{background:
  radial-gradient(ellipse 170px 120% at calc(100% - 90px) 55%,rgba(220,150,60,.24),transparent 70%),
  var(--img) right 8px bottom -10px/auto 108% no-repeat !important;filter:none !important}
.card[style*="dayz_chest"]:hover::before{transform:scale(1.04) translateY(-2px)}
/* The Isle: rennender Drache mit Dschungel-Schein */
.card[style*="isle_runner"]::before{background:
  radial-gradient(ellipse 170px 120% at calc(100% - 90px) 55%,rgba(60,200,140,.24),transparent 70%),
  var(--img) right 8px bottom -10px/auto 112% no-repeat !important;filter:none !important}
.card[style*="isle_runner"]:hover::before{transform:scale(1.04) translate(3px,-2px)}
/* Valheim: XP-Drache mit eisblauem Schein */
.card[style*="valheim_xp"]::before{background:
  radial-gradient(ellipse 170px 120% at calc(100% - 90px) 55%,rgba(90,170,255,.24),transparent 70%),
  var(--img) right 8px bottom -10px/auto 110% no-repeat !important;filter:none !important}
.card[style*="valheim_xp"]:hover::before{transform:scale(1.04) translateY(-2px)}