/* ═══════════════════════════════════════════════════
   KOMENDY — lekki Dark Fantasy + pęknięte tło
   ═══════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap");

.lbn-cmd {
  --bg-deep: #1a1614;
  --ink: #e8dcc0;
  --ink-soft: #cbb892;
  --muted: #8a7a5e;
  --gold: #d4af37;
  --gold-bright: #ffd700;
  --gold-dark: #8a6a1a;
  --copper: #b87333;
  --radius: 2px;
  /* statyczne pęknięcia (SVG) — bez animacji */
  --crack:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='200' viewBox='0 0 280 200'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.35' stroke-width='1'%3E%3Cpath d='M12 18 L48 52 L40 90 L78 120'/%3E%3Cpath d='M48 52 L95 40 L130 70'/%3E%3Cpath d='M220 12 L245 55 L230 95 L255 140'/%3E%3Cpath d='M245 55 L200 80'/%3E%3Cpath d='M30 170 L70 145 L110 175 L150 150'/%3E%3Cpath d='M180 185 L210 155 L250 180'/%3E%3C/g%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='0.12' stroke-width='0.8'%3E%3Cpath d='M14 20 L50 54 L42 92'/%3E%3Cpath d='M222 14 L247 57 L232 97'/%3E%3Cpath d='M32 172 L72 147 L112 177'/%3E%3C/g%3E%3C/svg%3E");

  box-sizing: border-box;
  color: var(--ink);
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.45;
  padding: 2px 0 8px;
}

.lbn-cmd *,
.lbn-cmd *::before,
.lbn-cmd *::after {
  box-sizing: border-box;
}

.cmd-sheet {
  position: relative;
  border-radius: var(--radius);
  padding: 16px 12px 12px;
  background-color: var(--bg-deep);
  background-image:
    var(--crack),
    linear-gradient(165deg, #2a2018 0%, #1f1814 50%, #161210 100%);
  background-size: 280px 200px, auto;
  background-repeat: repeat, no-repeat;
  border: 3px solid var(--gold-dark);
  outline: 1px solid rgba(212, 175, 55, 0.4);
  outline-offset: -7px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

/* delikatne pęknięcie w rogach */
.cmd-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  background-image:
    linear-gradient(135deg, transparent 46%, rgba(0, 0, 0, 0.45) 47%, transparent 48%),
    linear-gradient(40deg, transparent 62%, rgba(0, 0, 0, 0.35) 63%, transparent 64%),
    linear-gradient(200deg, transparent 70%, rgba(212, 175, 55, 0.08) 71%, transparent 72%),
    linear-gradient(320deg, transparent 55%, rgba(0, 0, 0, 0.4) 56%, transparent 57%);
  background-size: 120px 90px, 160px 110px, 140px 100px, 100px 80px;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
}

.cmd-sheet::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 1;
  border: 1px solid rgba(212, 175, 55, 0.25);
}

.cmd-ornament {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 4;
  pointer-events: none;
  border-color: rgba(255, 215, 0, 0.65);
  border-style: solid;
  opacity: 0.75;
}

.cmd-ornament--tl { top: 5px; left: 5px; border-width: 2px 0 0 2px; }
.cmd-ornament--tr { top: 5px; right: 5px; border-width: 2px 2px 0 0; }
.cmd-ornament--bl { bottom: 5px; left: 5px; border-width: 0 0 2px 2px; }
.cmd-ornament--br { bottom: 5px; right: 5px; border-width: 0 2px 2px 0; }

.cmd-inner {
  position: relative;
  z-index: 2;
}

/* Hero */
.cmd-hero {
  position: relative;
  text-align: center;
  padding: 10px 8px 14px;
  margin-bottom: 10px;
  border: 2px solid var(--gold-dark);
  background:
    var(--crack),
    linear-gradient(180deg, #32261a, #1c1510);
  background-size: 220px 160px, auto;
  overflow: hidden;
}

.cmd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg, transparent 48%, rgba(0, 0, 0, 0.5) 49%, transparent 50%),
    linear-gradient(15deg, transparent 72%, rgba(0, 0, 0, 0.35) 73%, transparent 74%);
  background-size: 90px 70px, 110px 60px;
  background-position: 8% 20%, 88% 70%;
  background-repeat: no-repeat;
  opacity: 0.7;
}

.cmd-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}

.cmd-title {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-family: "Cinzel", serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f0e2b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.cmd-lead {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 460px;
  font-size: 13px;
  color: var(--ink-soft);
}

.cmd-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.cmd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--gold-dark);
  background: rgba(0, 0, 0, 0.35);
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.cmd-pill strong {
  color: var(--gold-bright);
  font-weight: 800;
}

/* Tabs */
.cmd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  justify-content: center;
}

.cmd-tab {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--gold-dark);
  background: #2a2018;
  color: var(--ink-soft);
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 11px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cmd-tab:hover {
  border-color: var(--gold);
  color: #f2e6c0;
}

.cmd-tab.is-active {
  border-color: var(--gold);
  color: #fff4c8;
  background: #3a2c18;
}

.cmd-tab__count {
  display: inline-block;
  margin-left: 4px;
  min-width: 1.4em;
  padding: 0 4px;
  border: 1px solid rgba(138, 106, 26, 0.55);
  background: rgba(0, 0, 0, 0.35);
  font-size: 10px;
  color: var(--gold);
}

.cmd-tab.is-active .cmd-tab__count {
  color: var(--gold-bright);
}

/* Search */
.cmd-search-wrap {
  margin-bottom: 12px;
}

.cmd-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--gold-dark);
  background: rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.cmd-search::placeholder {
  color: var(--muted);
}

.cmd-search:focus {
  border-color: var(--gold);
}

/* Panels */
.cmd-panel {
  display: none;
}

.cmd-panel.is-active {
  display: block;
}

.cmd-list {
  display: grid;
  gap: 6px;
}

.cmd-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  border: 1px solid rgba(138, 106, 26, 0.4);
  background: rgba(28, 22, 16, 0.92);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

/* lekkie pęknięcie na wybranych wierszach */
.cmd-row:nth-child(3n)::before,
.cmd-row:nth-child(5n)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background:
    linear-gradient(118deg, transparent 58%, rgba(0, 0, 0, 0.45) 59%, transparent 60%),
    linear-gradient(28deg, transparent 78%, rgba(212, 175, 55, 0.07) 79%, transparent 80%);
  background-size: 70px 50px, 90px 40px;
  background-position: 100% 0, 0 100%;
  background-repeat: no-repeat;
}

.cmd-row:hover {
  border-color: var(--gold);
}

.cmd-row.is-hidden {
  display: none;
}

.cmd-row__cmd {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cmd-code {
  display: inline-block;
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(0, 0, 0, 0.4);
  font-family: "Cinzel", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  user-select: all;
}

.cmd-tag {
  display: inline-block;
  width: fit-content;
  padding: 1px 6px;
  border: 1px solid rgba(138, 106, 26, 0.45);
  font-family: "Cinzel", serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cmd-tag--info { color: #9ec8e0; border-color: rgba(100, 150, 180, 0.45); }
.cmd-tag--sys { color: #b8e6b8; border-color: rgba(111, 191, 115, 0.4); }
.cmd-tag--reborn { color: #e07080; border-color: rgba(180, 60, 70, 0.45); }
.cmd-tag--pvp { color: #f0a070; border-color: rgba(200, 100, 50, 0.45); }
.cmd-tag--house { color: #d0b878; border-color: rgba(180, 140, 60, 0.45); }
.cmd-tag--shop { color: #c9a0e0; border-color: rgba(150, 100, 180, 0.4); }

.cmd-row__body {
  min-width: 0;
}

.cmd-row__desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.cmd-row__desc em {
  color: var(--gold);
  font-style: normal;
  font-weight: 600;
}

.cmd-row__desc a {
  color: var(--gold-bright);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 168, 74, 0.45);
}

.cmd-row__desc a:hover {
  color: #ffd080;
}

.cmd-row__ex {
  margin: 6px 0 0;
  padding: 5px 8px;
  border-left: 2px solid var(--gold-dark);
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px;
  color: var(--muted);
}

.cmd-row__ex code {
  color: var(--gold-bright);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  background: #000000;
}

.cmd-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  image-rendering: pixelated;
}

.cmd-empty {
  display: none;
  text-align: center;
  padding: 22px 12px;
  border: 1px dashed rgba(138, 106, 26, 0.5);
  color: var(--muted);
  font-style: italic;
}

.cmd-empty.is-visible {
  display: block;
}

.cmd-foot {
  position: relative;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--gold-dark);
  background:
    var(--crack),
    linear-gradient(180deg, #2a2018, #1a1410);
  background-size: 200px 140px, auto;
  overflow: hidden;
}

.cmd-foot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg, transparent 40%, rgba(0, 0, 0, 0.4) 41%, transparent 42%);
  background-size: 100px 60px;
  background-position: 70% 30%;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.cmd-foot-link {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--gold-dark);
  background: rgba(0, 0, 0, 0.3);
  color: var(--gold);
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cmd-foot-link:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

@media (max-width: 620px) {
  .cmd-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cmd-title {
    font-size: 18px;
  }

  .cmd-tab {
    font-size: 10px;
    padding: 6px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-tab,
  .cmd-search,
  .cmd-row,
  .cmd-foot-link {
    transition: none;
  }
}