/* =====================================================================
   Minecraft-Design: kantige Pixel-Optik wie die Spieloberfläche.
   Texturen aus dem PrismarineJS-Asset-Archiv, Schrift „Pixelify Sans“.
   Wird nach style.css geladen und überschreibt dessen Grundoptik.
   ===================================================================== */
:root {
    --bg: #111113;
    --card: #2b2b2e;
    --card2: #1f1f22;
    --line: #000;
    --text: #f2f2f2;
    --muted: #a9a9b0;
    --accent: #5fbf3a;
    --accent-d: #3c8527;
    --danger: #e24a4a;
    --warn: #ffd85e;
    --diamond: #4be6dc;
    --radius: 0;
    --mc-font: 'Pixelify Sans', ui-monospace, Consolas, monospace;
    --bevel-up: inset 2px 2px 0 rgba(255, 255, 255, .09), inset -2px -2px 0 rgba(0, 0, 0, .5);
    --bevel-down: inset 2px 2px 0 rgba(0, 0, 0, .55), inset -2px -2px 0 rgba(255, 255, 255, .06);
}
body {
    image-rendering: pixelated;
    background:
        linear-gradient(rgba(12, 12, 14, .86), rgba(12, 12, 14, .93)),
        url("https://cdn.jsdelivr.net/gh/PrismarineJS/minecraft-assets@master/data/26.1/blocks/deepslate.png") 0 0 / 64px 64px,
        #111113;
    background-attachment: fixed;
}
h1, h2, h3, h4, .brand, .tabs button, .btn, .status, .clock, .count, .sb-title, .st-rank > b,
.ov-card .coords, .pd-head h2, .lm-pop-title, .lm-label, .toast, .badge, .chr-stats b, .st-kpi b, .inv-count, .mc-chat {
    font-family: var(--mc-font);
}
h2 { font-size: 17px; font-weight: 600; letter-spacing: .02em; text-shadow: 2px 2px 0 #000; }
h3 { color: var(--warn); font-size: 14px; letter-spacing: .06em; text-shadow: 2px 2px 0 #3d2e00; font-weight: 600; }
code { background: #000; border: 1px solid #444; border-radius: 0; color: #9fd49f; }
a { color: var(--diamond); }

/* Kopfzeile: Erde mit Grasrand */
.topbar {
    background:
        linear-gradient(rgba(25, 14, 6, .45), rgba(25, 14, 6, .72)),
        url("https://cdn.jsdelivr.net/gh/PrismarineJS/minecraft-assets@master/data/26.1/blocks/dirt.png") 0 0 / 48px 48px,
        #5a3d24;
    border-top: 8px solid #5aa63a;
    border-bottom: 3px solid #000;
    box-shadow: inset 0 3px 0 #79c64f, 0 4px 0 rgba(0, 0, 0, .4);
    padding: 10px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; color: #fff; text-shadow: 3px 3px 0 #3f3f3f; }
.brand-icon {
    width: 30px; height: 30px; flex: none; border: 2px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
    background: url("https://cdn.jsdelivr.net/gh/PrismarineJS/minecraft-assets@master/data/26.1/blocks/grass_block_side.png") center / cover, #5aa63a;
}
.brand-icon.big { width: 64px; height: 64px; margin: 0 auto 4px; border-width: 3px; }
.status { font-size: 14px; color: #e8e8e8; text-shadow: 1px 1px 0 #000; }
.status .dot { border-radius: 0; width: 10px; height: 10px; border: 2px solid #000; }
.status.on .dot { background: #80ff20; box-shadow: 0 0 8px #80ff20; }
.status.off .dot { background: var(--danger); }
.clock { color: #f5e6c8; text-shadow: 1px 1px 0 #000; font-size: 14px; }

/* Flächen wie Minecraft-Fenster (erhaben) */
.card {
    background: rgba(43, 43, 46, .95); border: 2px solid #000; border-radius: 0;
    box-shadow: var(--bevel-up), 0 4px 0 rgba(0, 0, 0, .35);
}
/* Innere Kästen wie eingelassene Felder (vertieft) */
.ov-card, .sb-card, .kit, .item, .st-box, .st-rank, .rule, .sch-row, .chr-card, .inv-detail, .ench-row,
.sb-slot, .quick-row, .st-head {
    background: var(--card2); border: 2px solid #000; border-radius: 0; box-shadow: var(--bevel-down);
}
.ov-card, .chr-card, .st-head { border-left: 6px solid var(--pc, var(--accent)); }
.ov-card:hover, .chr-card:hover { border-color: #fff; border-left-color: var(--pc, var(--accent)); }
.kit:hover, .item:hover { border-color: #fff; }
.sb-card.on { box-shadow: var(--bevel-down), inset 0 0 0 2px var(--accent); }
.st-kpi, .chr-stats div { background: #000; border: 1px solid #333; border-radius: 0; }
.ov-map-wrap, .map-frame-wrap, .log, .en-preview { border: 2px solid #000; border-radius: 0; box-shadow: var(--bevel-down); }
.lm-coords { border-radius: 0; border: 2px solid #000; font-family: var(--mc-font); }

/* Knöpfe im Minecraft-Stil */
.btn {
    border-radius: 0; border: 2px solid #000; color: #fff; background: #6f6f6f;
    box-shadow: inset 2px 2px 0 #a9a9a9, inset -2px -3px 0 #4a4a4a;
    text-shadow: 2px 2px 0 #3f3f3f; font-size: 14px; font-weight: 500; letter-spacing: .02em; padding: 6px 14px;
}
.btn:hover { background: #7e86b8; box-shadow: inset 2px 2px 0 #b8c0f0, inset -2px -3px 0 #4b5185; border-color: #fff; }
.btn:active { transform: translateY(1px); box-shadow: inset 2px 2px 0 #4a4a4a, inset -2px -2px 0 #9a9a9a; }
.btn.small { font-size: 12px; padding: 3px 9px; }
.btn.primary, .btn.active {
    background: #3c8527; color: #fff; border-color: #000; font-weight: 600;
    box-shadow: inset 2px 2px 0 #6cc349, inset -2px -3px 0 #1d4d13;
}
.btn.primary:hover, .btn.active:hover { background: #4a9d32; border-color: #fff; box-shadow: inset 2px 2px 0 #84d862, inset -2px -3px 0 #24601a; }
.btn.danger { background: #8e2b2b; color: #fff; box-shadow: inset 2px 2px 0 #c95454, inset -2px -3px 0 #511515; }
.btn.danger:hover { background: #a83434; border-color: #fff; box-shadow: inset 2px 2px 0 #e06a6a, inset -2px -3px 0 #5c1818; }
.btn.ghost { background: #3a3a3d; box-shadow: inset 2px 2px 0 #5a5a5e, inset -2px -2px 0 #222; }
.btn.ghost:hover { background: #4b4b55; }

/* Eingabefelder wie das Minecraft-Textfeld */
input, select, textarea { border-radius: 0; background: #000; border: 2px solid #a0a0a0; color: #fff; }
input:focus, select:focus, textarea:focus { border-color: #fff; }
label { color: #c7c7cc; }

/* Reiter wie im Kreativ-Inventar */
.tabs { gap: 3px; }
.tabs button {
    background: #232326; border: 2px solid #000; border-radius: 0; color: #bdbdc3; padding: 7px 13px; font-size: 14px;
    box-shadow: var(--bevel-up); text-shadow: 1px 1px 0 #000;
}
.tabs button:hover { color: #fff; background: #303035; }
.tabs button.active {
    background: #3c8527; color: #fff; border-color: #000;
    box-shadow: inset 2px 2px 0 #6cc349, inset -2px -3px 0 #1d4d13; text-shadow: 2px 2px 0 #1d4d13;
}

/* Spielerliste */
.player-list li { border-radius: 0; border: 2px solid transparent; }
.player-list li:hover { background: #3a3a3e; }
.player-list li.sel { background: #1f3517; border-color: #000; box-shadow: inset 0 0 0 2px var(--accent); }
.head { border-radius: 0; border: 2px solid #000; }
.pl-sub { color: #9bd48a; }

/* Leben/Hunger als Segmente wie im Spiel */
.bar .track { border-radius: 0; height: 9px; background: #000; border: 1px solid #333; }
.bar .fill { border-radius: 0; background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .6) 9px 10px); }
.bar.hp .fill { background-color: #e0313b !important; }
.bar.food .fill { background-color: #c6782a !important; }
.st-bar, .st-bar span { border-radius: 0; }

/* Inventar: klassische graue Plätze */
.inv-slot {
    border-radius: 0; background: #8b8b8b; border: 0; color: #222;
    box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff;
}
.inv-slot:hover:not(.empty) { background: #a5a5a5; border: 0; }
.inv-slot.empty { background: #8b8b8b; opacity: .85; }
.inv-slot.ench { border: 0; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff, inset 0 0 14px rgba(160, 80, 255, .75); }
.inv-slot.sel { outline: 3px solid #fff; outline-offset: -1px; }
.inv-slot.picked { box-shadow: inset 0 0 0 3px var(--accent); }
.inv-name { color: #1a1a1a; font-weight: 600; }
.inv-ph { color: #5e5e5e; }
.inv-count { font-size: 14px; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
.inv-dur { border-radius: 0; background: #000; }
.chip { border-radius: 0; background: #2a1f45; color: #d6c4ff; border: 1px solid #000; }

/* Schalter eckig */
.switch span { border-radius: 0; border: 2px solid #000; background: #555; }
.switch span::before { border-radius: 0; background: #ddd; box-shadow: inset -2px -2px 0 #888; top: 1px; left: 1px; }
.switch input:checked + span { background: var(--accent-d); }

/* Meldungen wie die Erfolgs-Einblendung im Spiel */
.toast {
    border-radius: 0; background: #212121; border: 3px solid #000;
    box-shadow: inset 2px 2px 0 #555, inset -2px -2px 0 #111, 0 6px 0 rgba(0, 0, 0, .4);
    color: #fff; font-size: 15px; padding: 10px 16px; text-shadow: 1px 1px 0 #000;
}
.toast::before { content: "✔ "; color: #80ff20; }
.toast.err { border-left-color: #000; }
.toast.err::before { content: "✖ "; color: #ff5555; }

/* Sonstiges */
.badge { border-radius: 0; border: 1px solid #000; background: #000; color: #ccc; }
.badge.on { color: #80ff20; border-color: #80ff20; }
.qr-badge { border-radius: 0; background: #0b2a06; color: #80ff20; border: 1px solid #000; }
.alert { border-radius: 0; background: #3a0f0f; border: 2px solid #000; box-shadow: inset 0 0 0 2px #a83232; }
.log { background: #000; }
.log .l-cmd { color: #80ff20; }
.mc-chat { border-radius: 0; font-size: 14px; }
.ov-compass { font-family: var(--mc-font); color: #fff; text-shadow: 1px 1px 0 #000; }
.leaflet-popup-content-wrapper { border-radius: 0; border: 2px solid #000; box-shadow: var(--bevel-up), 0 4px 0 rgba(0, 0, 0, .4); }
.leaflet-bar, .leaflet-bar a { border-radius: 0 !important; font-family: var(--mc-font); }
.lm-color { border-radius: 0; border: 2px solid #000; }
.lm-color.on { box-shadow: 0 0 0 2px #fff; }
.lm-head { border-radius: 0; }
.chr-track, .chr-seg { border-radius: 0; }
.st-rank > b { color: var(--warn); text-shadow: 1px 1px 0 #3d2e00; }
.login-card { gap: 14px; }
.login-card h1 { text-align: center; font-size: 24px; text-shadow: 3px 3px 0 #3f3f3f; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #6f6f6f; border: 2px solid #000; box-shadow: inset 2px 2px 0 #a9a9a9, inset -2px -2px 0 #4a4a4a; }

/* Kopfzeile auf schmalen Bildschirmen: Name + Abmelden oben, Status darunter */
@media (max-width: 820px) {
    .topbar { flex-wrap: wrap; gap: 6px 12px; }
    .brand { font-size: 17px; flex: 1; min-width: 0; }
    .brand-icon { width: 24px; height: 24px; }
    .topbar .btn { order: 2; }
    .status { order: 3; width: 100%; font-size: 13px; }
}

/* Navigation: Gruppen mit Item-Symbol, darunter die Unterpunkte */
.nav { display: flex; flex-direction: column; gap: 0; }
.nav-groups { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.nav-groups button {
    display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; cursor: pointer;
    font: 600 15px var(--mc-font); color: #d6d6db; background: #232326; border: 2px solid #000; border-radius: 0;
    box-shadow: var(--bevel-up); text-shadow: 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-groups button img { width: 24px; height: 24px; image-rendering: pixelated; flex: none; filter: drop-shadow(1px 1px 0 #000); }
.nav-groups button:hover { background: #303035; color: #fff; }
.nav-groups button.active {
    background: rgba(43, 43, 46, .95); color: #fff; border-bottom-color: transparent; position: relative; z-index: 1;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.09), inset 0 3px 0 var(--accent); margin-bottom: -2px; padding-bottom: 11px;
}
.nav .tabs {
    background: rgba(43, 43, 46, .95); border: 2px solid #000; padding: 6px; gap: 4px; box-shadow: var(--bevel-up);
}
.nav .tabs.single { display: none; }
.nav .tabs button { font-size: 13px; padding: 5px 12px; background: #1b1b1e; box-shadow: var(--bevel-down); }
.nav .tabs button.active { background: #3c8527; box-shadow: inset 2px 2px 0 #6cc349, inset -2px -3px 0 #1d4d13; }
@media (max-width: 820px) {
    .nav-groups { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
    .nav-groups button { flex-direction: column; gap: 3px; font-size: 11px; padding: 6px 2px; }
    .nav-groups button.active { padding-bottom: 8px; }
}
.nav-short { display: none; }
@media (max-width: 820px) { .nav-long { display: none; } .nav-short { display: inline; } }

/* Schwebende Konsole + Knopf unten rechts */
.console {
    position: fixed; right: 16px; bottom: 86px; z-index: 1100; width: min(580px, calc(100vw - 32px));
    box-shadow: var(--bevel-up), 0 8px 0 rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .6);
}
.console .card-head { margin-bottom: 8px; }
.console .card-head .btn-row { margin: 0; }
.console h2 { display: flex; align-items: center; gap: 8px; }
.console-ico { width: 22px; height: 22px; border: 2px solid #000; }
.console .log { height: min(300px, 45vh); }
.console-fab {
    position: fixed; right: 16px; bottom: 16px; z-index: 1101; width: 58px; height: 58px; padding: 0; cursor: pointer;
    background: #6f6f6f; border: 3px solid #000; border-radius: 0;
    box-shadow: inset 3px 3px 0 #a9a9a9, inset -3px -4px 0 #4a4a4a, 0 5px 0 rgba(0, 0, 0, .45);
    display: flex; align-items: center; justify-content: center;
}
.console-fab img { width: 34px; height: 34px; image-rendering: pixelated; border: 2px solid #000; }
.console-fab:hover { background: #7e86b8; border-color: #fff; box-shadow: inset 3px 3px 0 #b8c0f0, inset -3px -4px 0 #4b5185, 0 5px 0 rgba(0, 0, 0, .45); }
.console-fab:active { transform: translateY(2px); }
.console-fab.open { background: #3c8527; box-shadow: inset 3px 3px 0 #6cc349, inset -3px -4px 0 #1d4d13, 0 5px 0 rgba(0, 0, 0, .45); }
.console-badge {
    position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px;
    font: 700 12px/18px var(--mc-font); color: #fff; background: #3c8527; border: 2px solid #000; text-shadow: 1px 1px 0 #000;
}
.console-badge.err { background: #a83232; }
body { padding-bottom: 80px; }
@media (max-width: 820px) { .console { right: 8px; bottom: 80px; width: calc(100vw - 16px); } .console-fab { right: 10px; bottom: 10px; } }

/* Plugins */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pl-card { background: var(--card2); border: 2px solid #000; box-shadow: var(--bevel-down); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pl-card-head { display: flex; gap: 8px; align-items: center; width: 100%; }
.pl-card-head b { font: 600 16px var(--mc-font); flex: 1; text-shadow: 2px 2px 0 #000; }
.pl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pl-head h2 { display: flex; align-items: center; gap: 8px; }
.pl-box { background: var(--card2); border: 2px solid #000; box-shadow: var(--bevel-down); padding: 10px 12px; margin-bottom: 10px; }
.pl-box h3 { margin-top: 0; }
.pl-filter { margin-bottom: 8px; }
.pl-cmds { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.pl-cmd { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid #000; }
.pl-cmd-info { display: flex; flex-direction: column; min-width: 0; }
.pl-cmd-info code { align-self: flex-start; }
.pl-cmd input { padding: 4px 6px; font-size: 12px; }
.pl-editor { width: 100%; min-height: 360px; font: 12px/1.45 ui-monospace, Consolas, monospace; tab-size: 2; white-space: pre; margin-bottom: 6px; }
.pl-bp { max-width: 520px; margin-bottom: 6px; }
@media (max-width: 820px) { .pl-cmd { grid-template-columns: 1fr; } }

/* Chunky + AxGraves */
.ck-progress { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ck-task { background: #000; border: 1px solid #333; padding: 8px 10px; }
.ck-head { display: flex; justify-content: space-between; font-family: var(--mc-font); margin-bottom: 5px; }
.ck-bar { height: 14px; background: #1a1a1a; border: 2px solid #000; box-shadow: inset 1px 1px 0 #000; margin-bottom: 4px; }
.ck-bar span { display: block; height: 100%; background: #80ff20; box-shadow: inset 0 -3px 0 #3f8a1f, inset 0 2px 0 #c8ff9a; transition: width .6s; }
.axg-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-bottom: 10px; }
.axg-list { background: #000; border: 1px solid #333; padding: 8px; font: 12px ui-monospace, Consolas, monospace; white-space: pre-wrap; margin-top: 8px; }

/* Anmelden: „Angemeldet bleiben“ */
.login-card label.remember { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.login-card label.remember input { width: auto; margin: 0; }

/* Konsole auf dem Handy: nie breiter/höher als der Bildschirm, kein Zoom beim Tippen */
.console { display: flex; flex-direction: column; max-height: calc(100dvh - 100px); }
.console[hidden] { display: none; }
.console .log { flex: 1 1 auto; min-height: 90px; overflow-x: hidden; overflow-wrap: anywhere; }
.console .card-head h2 { min-width: 0; }
.console-input input { flex: 1 1 auto; min-width: 0; }
.console-input .btn { flex: none; }
@media (max-width: 820px) {
    /* iPhone vergrößert die Seite beim Antippen von Feldern unter 16 px Schrift */
    input, select, textarea { font-size: 16px; }
    .console .card-head .btn-row { flex-wrap: nowrap; }
}

/* Tabellen mit .stack: auf dem Handy jede Zeile als eigener Block, Knöpfe darunter (nichts ragt aus der Box) */
@media (max-width: 820px) {
    .table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
    .table.stack tr:has(th) { display: none; }
    .table.stack tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
    .table.stack td { padding: 2px 0; border: 0; overflow-wrap: anywhere; }
    .table.stack td:first-child { font-weight: 600; }
    .table.stack td.act, .table.stack td.bk-act { text-align: left; white-space: normal; padding-top: 6px; }
    .table.stack td.act .btn, .table.stack td.bk-act .btn { margin: 2px 4px 2px 0; }
}

/* Adminmodus-Schalter oben (nur für Admins sichtbar) */
.admin-toggle { display: inline-flex; align-items: center; gap: 6px; background: #4a4a4a; color: #e8e8e8; }
.admin-toggle .at-dot { width: 10px; height: 10px; border: 2px solid #000; background: #8a8a8a; }
.admin-toggle.on { background: #a83232; color: #fff; }
.admin-toggle.on .at-dot { background: #ffd85e; box-shadow: 0 0 6px #ffd85e; }
@media (max-width: 820px) { .admin-toggle .at-state { display: none; } }