/* KiritSMP Web-Oberflaeche im Stil der Ingame-Menues (Resource Pack "Bunt"):
   dunkle Menue-Flaeche mit dicker Kante, helle Titelleiste, Slot-Raster,
   kraeftige Knoepfe mit 3D-Lippe, Eck-Rahmen in Blau (Haupt) und Gold (Kategorie). */

@font-face{font-family:'Kirit Pixel';src:url('/assets/ui/pixelify-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Kirit Pixel';src:url('/assets/ui/pixelify-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --k-page:#0f1218; --k-panel:#1e2533; --k-panel2:#262e3f; --k-slot:#232b3b;
  --k-edge:#0b0d12; --k-line:#3a4459; --k-strip:#aeb6c4; --k-strip-d:#8a93a3; --k-ink:#16181e;
  --k-text:#e8edf5; --k-muted:#a3aec2; --k-dim:#73809a;
  --k-blue:#2f8fe6; --k-blue-d:#1b5ea6; --k-blue-l:#7cc0ff;
  --k-green:#3fc44f; --k-green-d:#27873a; --k-red:#e24b4b; --k-red-d:#a22f2f;
  --k-gold:#f2b632; --k-gold-d:#b27d10; --k-grey:#8791a3; --k-grey-d:#5a6272;
  --k-purple:#b45cf0; --k-purple-d:#7a35b0; --k-bronze:#d98a4e; --k-bronze-d:#9a5a28;
  --k-pixel:'Kirit Pixel','Courier New',monospace;
  --k-body:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.k{margin:0;color:var(--k-text);font-family:var(--k-body);font-size:16px;line-height:1.6;min-height:100vh;
  /* Himmel, Gras, Erde wie hinter einem offenen Menue, stark abgedunkelt */
  background:
    linear-gradient(rgba(12,15,21,.80),rgba(12,15,21,.86)),
    linear-gradient(180deg,#6f93c9 0,#86a7d8 52%,#4f7d3a 52%,#456f33 70%,#5b3f28 70%,#4a321f 100%) fixed;
  background-attachment:fixed}
body.k a{color:var(--k-blue-l);text-decoration:none}
body.k a:hover{color:#fff}
.k-wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.k-px{font-family:var(--k-pixel);letter-spacing:.5px}
img.k-item{image-rendering:pixelated;width:48px;height:48px}

/* ── Menue-Flaeche ─────────────────────────────────────────────── */
.k-panel{position:relative;background:rgba(30,37,51,.95);border:4px solid var(--k-edge);border-radius:8px;
  box-shadow:inset 0 0 0 2px #2d3649,0 10px 0 rgba(0,0,0,.25),0 18px 40px rgba(0,0,0,.45);padding:14px}
.k-title{font-family:var(--k-pixel);font-weight:700;font-size:20px;color:var(--k-ink);background:var(--k-strip);
  border-radius:5px;padding:6px 14px 8px;margin:0 0 14px;box-shadow:inset 0 -4px 0 var(--k-strip-d),inset 0 2px 0 rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:space-between;gap:10px;line-height:1.25}
.k-title small{font-size:14px;font-weight:400;color:#3b4252}
.k-foot{height:14px;background:var(--k-strip);border-radius:5px;margin-top:14px;box-shadow:inset 0 -4px 0 var(--k-strip-d)}
.k-body{padding:4px 6px}
.k-body p{color:var(--k-muted);margin:0 0 12px}
.k-body h2,.k-body h3{font-family:var(--k-pixel);color:#fff;margin:18px 0 8px;line-height:1.25}
.k-body h2{font-size:22px}.k-body h3{font-size:18px}
.k-body ul{color:var(--k-muted);padding-left:20px}
.k-body b,.k-body strong{color:var(--k-text)}

/* ── Slot-Raster ───────────────────────────────────────────────── */
.k-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px;background:var(--k-edge);
  border:3px solid var(--k-edge);border-radius:6px}
.k-slot{position:relative;background:var(--k-slot);border-radius:3px;padding:18px 16px 16px;min-height:132px;
  box-shadow:inset 0 0 0 1px var(--k-line);transition:background .12s}
.k-slot:hover{background:#2b3548}
.k-slot h3{font-family:var(--k-pixel);font-size:18px;color:#fff;margin:8px 0 4px;line-height:1.2}
.k-slot p{margin:0;font-size:14.5px;color:var(--k-muted)}
.k-slot .ico{font-size:30px;line-height:1;display:block}
/* Eck-Rahmen (Muster "Ecken"): vier Winkel, blau im Hauptmenue, gold in Kategorien */
.k-frame{--fc:var(--k-blue)}
.k-frame.gold{--fc:var(--k-gold)}
.k-frame::after{content:'';position:absolute;inset:5px;pointer-events:none;border-radius:2px;opacity:.95;
  background:
    linear-gradient(var(--fc),var(--fc)) left top/16px 3px no-repeat,linear-gradient(var(--fc),var(--fc)) left top/3px 16px no-repeat,
    linear-gradient(var(--fc),var(--fc)) right top/16px 3px no-repeat,linear-gradient(var(--fc),var(--fc)) right top/3px 16px no-repeat,
    linear-gradient(var(--fc),var(--fc)) left bottom/16px 3px no-repeat,linear-gradient(var(--fc),var(--fc)) left bottom/3px 16px no-repeat,
    linear-gradient(var(--fc),var(--fc)) right bottom/16px 3px no-repeat,linear-gradient(var(--fc),var(--fc)) right bottom/3px 16px no-repeat}

/* ── Knoepfe "Bunt" ────────────────────────────────────────────── */
.k-btn{--c:var(--k-blue);--d:var(--k-blue-d);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--k-pixel);font-weight:700;font-size:17px;line-height:1;color:#fff !important;text-shadow:0 2px 0 rgba(0,0,0,.35);
  background:var(--c);border:3px solid var(--k-edge);border-radius:9px;padding:11px 20px 15px;text-decoration:none;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.30),inset 0 -6px 0 var(--d);transition:transform .1s,filter .1s;user-select:none}
.k-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.k-btn:active{transform:translateY(2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.30),inset 0 -3px 0 var(--d)}
.k-btn.green{--c:var(--k-green);--d:var(--k-green-d)}
.k-btn.red{--c:var(--k-red);--d:var(--k-red-d)}
.k-btn.gold{--c:var(--k-gold);--d:var(--k-gold-d)}
.k-btn.grey{--c:var(--k-grey);--d:var(--k-grey-d)}
.k-btn.purple{--c:var(--k-purple);--d:var(--k-purple-d)}
.k-btn.small{font-size:14px;padding:7px 12px 11px;border-radius:7px}
.k-btn.wide{width:100%}
.k-btn[disabled],.k-btn.off{--c:var(--k-grey);--d:var(--k-grey-d);cursor:not-allowed;opacity:.75;transform:none}
.k-coin{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--k-gold);border:2px solid var(--k-gold-d);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}

/* ── Leiste oben (wie eine Hotbar) ─────────────────────────────── */
.k-nav{position:sticky;top:0;z-index:50;background:rgba(15,18,24,.92);border-bottom:4px solid var(--k-edge);
  box-shadow:0 2px 0 #2d3649}
.k-nav .k-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:10px;padding-bottom:10px}
.k-brand{font-family:var(--k-pixel);font-weight:700;font-size:24px;color:#fff !important;display:flex;align-items:center;gap:10px}
.k-brand i{width:22px;height:22px;background:var(--k-blue);border:3px solid var(--k-edge);border-radius:5px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -4px 0 var(--k-blue-d);display:inline-block}
.k-links{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.k-links a{font-family:var(--k-pixel);font-size:16px;color:var(--k-muted) !important;padding:7px 12px;border-radius:5px}
.k-links a:hover,.k-links a.on{background:var(--k-slot);color:#fff !important;box-shadow:inset 0 0 0 1px var(--k-line)}
.k-burger{display:none}
@media(max-width:820px){
  .k-burger{display:inline-flex}
  .k-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(15,18,24,.98);border-bottom:4px solid var(--k-edge);padding:8px 20px 14px}
  .k-links.open{display:flex}
  .k-links a{padding:12px 8px;border-bottom:1px solid #262e3f;font-size:18px}
}

/* ── Scoreboard "Banner" ───────────────────────────────────────── */
.k-board{border:4px solid var(--k-edge);border-radius:8px;overflow:hidden;background:var(--k-panel);min-width:230px}
.k-board .head{background:var(--k-blue);color:#fff;font-family:var(--k-pixel);font-weight:700;font-size:18px;text-align:center;
  padding:7px 10px 10px;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -5px 0 var(--k-blue-d);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.k-board .row{display:flex;justify-content:space-between;gap:18px;padding:7px 14px;font-family:var(--k-pixel);font-size:17px}
.k-board .row:nth-child(even){background:var(--k-panel2)}
.k-board .row span{color:var(--k-muted)}
.k-board .row b{color:#fff;font-weight:700}
.k-board .foot{background:var(--k-gold);color:var(--k-ink);font-family:var(--k-pixel);font-weight:700;text-align:center;font-size:15px;
  padding:5px 10px 8px;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 var(--k-gold-d)}

/* ── Kleinteile ────────────────────────────────────────────────── */
.k-tag{display:inline-block;font-family:var(--k-pixel);font-size:14px;color:var(--k-ink);background:var(--k-strip);
  border-radius:4px;padding:2px 9px 4px;box-shadow:inset 0 -3px 0 var(--k-strip-d)}
.k-tag.green{background:var(--k-green);color:#fff;box-shadow:inset 0 -3px 0 var(--k-green-d)}
.k-tag.gold{background:var(--k-gold);box-shadow:inset 0 -3px 0 var(--k-gold-d)}
.k-tag.bronze{background:var(--k-bronze);color:#fff;box-shadow:inset 0 -3px 0 var(--k-bronze-d)}
.k-input{font:inherit;font-family:var(--k-pixel);font-size:17px;color:#fff;background:#141922;border:3px solid var(--k-edge);
  border-radius:7px;padding:9px 12px;box-shadow:inset 0 3px 0 rgba(0,0,0,.4);outline:none;min-width:0}
.k-input:focus{box-shadow:inset 0 3px 0 rgba(0,0,0,.4),0 0 0 2px var(--k-blue)}
.k-list{list-style:none;margin:0;padding:0}
.k-list li{padding:8px 4px 8px 26px;border-bottom:2px solid #262e3f;position:relative;color:var(--k-muted);font-size:15px}
.k-list li:last-child{border-bottom:none}
.k-list li::before{content:'';position:absolute;left:4px;top:15px;width:9px;height:9px;background:var(--k-blue);border:2px solid var(--k-edge);border-radius:2px}
.k-table{width:100%;border-collapse:separate;border-spacing:0 3px;font-size:15px}
.k-table th{font-family:var(--k-pixel);font-weight:700;text-align:left;color:var(--k-ink);background:var(--k-strip);padding:5px 10px 7px}
.k-table th:first-child{border-radius:4px 0 0 4px}.k-table th:last-child{border-radius:0 4px 4px 0}
.k-table td{background:var(--k-slot);padding:8px 10px;box-shadow:inset 0 1px 0 var(--k-line),inset 0 -1px 0 var(--k-line)}
.k-table tr:nth-child(even) td{background:var(--k-panel2)}
.k-footer{margin-top:46px;background:rgba(15,18,24,.94);border-top:4px solid var(--k-edge);box-shadow:inset 0 2px 0 #2d3649;padding:34px 0 26px}
.k-footer .cols{display:flex;gap:34px;justify-content:space-between;flex-wrap:wrap}
.k-footer h4{font-family:var(--k-pixel);font-size:17px;color:#fff;margin:0 0 8px}
.k-footer a,.k-footer span{display:block;color:var(--k-muted) !important;font-size:14.5px;margin-bottom:6px}
.k-footer a:hover{color:#fff !important}
.k-footer .copy{color:var(--k-dim);font-size:13px;margin-top:22px;padding-top:16px;border-top:2px solid #262e3f;text-align:center}
.k-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140px);z-index:99;transition:transform .25s;
  font-family:var(--k-pixel);font-weight:700;color:#fff;background:var(--k-green);border:3px solid var(--k-edge);border-radius:9px;
  padding:9px 18px 13px;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -6px 0 var(--k-green-d)}
.k-toast.show{transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}