/* Öffentliche Befehlsseite – ergänzt style.css und legal.css */
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e6f3ff;background:rgba(63,140,255,.14);border:1px solid rgba(100,160,255,.25);border-radius:6px;padding:1px 7px;font-size:.92em;white-space:nowrap}
.cmd{padding:16px 0;border-top:1px solid rgba(100,160,255,.18)}
.cmd:first-of-type{border-top:0;padding-top:4px}
.cmd h3{margin:0 0 6px;font-size:1.05rem}
.cmd h3 code{font-size:1em}
.cmd .req{font-style:normal;color:#8fc3ff}
.cmd .opt{font-style:normal;color:#8fa9d8}
.cmd-alias,.cmd-ex{color:#8fa9d8;font-size:.9rem;margin-top:8px}
.cmd-notes,.cmd-sub{margin:10px 0 0 18px}
.cmd-sub{list-style:none;margin-left:0;display:grid;gap:8px}
.cmd-sub li{display:grid;gap:3px}
.cmd-sub span{color:#b5c8ee;font-size:.93rem}
.cmd-rank{margin:0 0 8px;font-size:.88rem;color:#8fa9d8;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rank{color:var(--rank);border:1px solid var(--rank);border-radius:999px;padding:1px 10px;font-weight:600;font-size:.82rem;background:rgba(5,11,31,.6)}

/* Spielmodi: aufklappbare Abschnitte, Farben pro Modus über --c1/--c2 (befehle.json color/color2) */
.cmd-tools{display:grid;gap:14px;margin-bottom:26px}
.mode-chips{display:flex;flex-wrap:wrap;gap:8px}
.legal .mode-chip{color:var(--c1);text-decoration:none;border:1px solid color-mix(in srgb,var(--c1) 55%,transparent);background:color-mix(in srgb,var(--c1) 10%,rgba(5,11,31,.7));border-radius:999px;padding:5px 14px;font-weight:600;font-size:.85rem;transition:background .2s,color .2s,transform .2s}
.legal .mode-chip:hover,.legal .mode-chip:focus-visible{color:#050b1f;background:linear-gradient(90deg,var(--c1),var(--c2));transform:translateY(-2px)}
.cmd-search{display:flex;gap:10px}
.cmd-search[hidden]{display:none}
.cmd-search input{flex:1;min-width:0;font:inherit;color:#e6f3ff;background:rgba(6,14,40,.8);border:1px solid rgba(100,160,255,.3);border-radius:10px;padding:10px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.cmd-search input::placeholder{color:#6f87b8}
.cmd-search input:focus{border-color:#8fc3ff;box-shadow:0 0 0 3px rgba(63,140,255,.25)}
.cmd-toggle{flex:none;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.9rem;font-weight:600;color:#b5c8ee;background:rgba(6,14,40,.8);border:1px solid rgba(100,160,255,.3);border-radius:10px;padding:10px 16px;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,box-shadow .2s}
.cmd-toggle:hover{color:#fff;border-color:#8fc3ff}
.cmd-toggle:focus-visible{outline:none;border-color:#8fc3ff;box-shadow:0 0 0 3px rgba(63,140,255,.25)}
.cmd-toggle svg{width:16px;height:16px;fill:none;stroke:#8fc3ff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.cmd-toggle.is-open svg{transform:rotate(180deg)}
.legal .cmd-empty{color:#8fa9d8;margin:0}

.legal section.mode{padding:0;margin-bottom:16px;overflow:hidden;scroll-margin-top:90px;border-color:color-mix(in srgb,var(--c1) 35%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 9%,rgba(18,40,100,.45)),rgba(6,14,40,.85));position:relative}
.mode::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--c1),var(--c2))}
.mode summary{display:flex;align-items:center;gap:14px;padding:18px 24px 18px 28px;cursor:pointer;list-style:none;user-select:none}
.mode summary::-webkit-details-marker{display:none}
.mode summary:hover{background:color-mix(in srgb,var(--c1) 6%,transparent)}
.mode summary:focus-visible{outline:2px solid var(--c1);outline-offset:-2px}
.legal .mode h2{margin:0;flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.mode-hint{font-family:var(--body);font-size:.8rem;letter-spacing:0;color:#8fa9d8;-webkit-text-fill-color:#8fa9d8;font-weight:400}
.mode-count{flex:none;font-size:.78rem;font-weight:600;color:var(--c1);border:1px solid color-mix(in srgb,var(--c1) 45%,transparent);border-radius:999px;padding:2px 10px;white-space:nowrap}
.mode-chev{flex:none;width:22px;height:22px;fill:none;stroke:var(--c1);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.mode details[open] .mode-chev{transform:rotate(180deg)}
.mode-body{padding:0 28px 16px;border-top:1px solid color-mix(in srgb,var(--c1) 22%,transparent)}
.mode details[open] .mode-body{animation:modeIn .25s ease}
@keyframes modeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mode .cmd{border-top-color:color-mix(in srgb,var(--c1) 16%,transparent)}
.mode .cmd:first-child{border-top:0}
.mode .cmd h3 code{border-color:color-mix(in srgb,var(--c1) 35%,transparent);background:color-mix(in srgb,var(--c1) 12%,transparent)}
.mode .cmd .req{color:var(--c1)}
.cmd[hidden],.mode[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .mode-chev,.legal .mode-chip,.cmd-toggle svg{transition:none}
  .mode details[open] .mode-body{animation:none}
}

@media (max-width:760px){
  .cmd h3 code,.cmd-sub code,.cmd-ex code{white-space:normal;overflow-wrap:anywhere}
  .mode summary{padding:14px 14px 14px 18px;gap:10px}
  .legal .mode h2{font-size:1.15rem}
  .mode-body{padding:0 16px 12px 18px}
  .cmd-toggle{padding:10px 12px}
  .cmd-toggle span{display:none}
  .mode-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:2px 4px 4px}
  .mode-chips::-webkit-scrollbar{display:none}
  .mode-chip{flex:none}
  .legal .cmd-sub,.legal .cmd-notes{margin-left:0}
  .legal .cmd-notes{padding-left:18px}
}