/* mozuki Community Panel - Spiele-Sektion
   Ergaenzungsschicht ueber dem Vite-Build, geladen aus index.php.
   Muster wie mozuki-cinematic-motion.css. Alle Klassen mit mzk- praefixiert,
   damit nichts mit dem Bundle kollidiert. Farben und Schriften kommen aus
   den Variablen der Seite. */
.mzk-on{--mzk-ok:#3ddc90;--mzk-warn:#f7b64b;--mzk-no:#ff5f56;--mzk-dim:#5d7186;--mzk-off:#33455a;--mzk-hair:#0e2340}
.mzk-on .mzk-wrap{width:var(--container);margin-inline:auto}
.mzk-on .mzk-narrow{max-width:1160px}
.mzk-lead{color:var(--text-muted);margin-top:1.1rem;max-width:44rem;font-size:1.05rem}
.mzk-lead b{color:var(--text);font-weight:600}

.mzk-tally{max-width:1160px;display:flex;flex-wrap:wrap;margin-top:2rem;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mzk-tally>div{flex:1 1 150px;padding:1rem 1.2rem;border-right:1px solid var(--line);background:var(--bg-elevated)}
.mzk-tally>div:last-child{border-right:0}
.mzk-tally b{display:block;font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--accent-bright)}
.mzk-tally span{font-size:.8rem;color:var(--text-muted)}

.mzk-controls{max-width:1160px;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:2.4rem}
.mzk-search{flex:1 1 240px;max-width:320px}
.mzk-search input{width:100%;padding:.7rem .9rem;background:var(--bg-elevated);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;font-size:.9rem}
.mzk-search input::placeholder{color:var(--mzk-dim)}
.mzk-search input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--accent)}
.mzk-cats{display:flex;flex-wrap:wrap;gap:.4rem}
.mzk-cat{font-family:Consolas,monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .85rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-muted);cursor:pointer}
.mzk-cat:hover{color:var(--text);border-color:var(--accent)}
.mzk-cat:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mzk-cat[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.mzk-count{margin-left:auto;font-family:Consolas,monospace;font-size:.72rem;color:var(--mzk-dim);letter-spacing:.08em}

.mzk-grid{max-width:1160px;display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:6px;margin-top:1.1rem}
.mzk-chip{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.62rem .8rem;border:1px solid var(--mzk-hair);border-radius:9px;background:var(--bg-elevated);color:var(--text-muted);font:inherit;font-size:.86rem;cursor:pointer;min-width:0}
.mzk-chip:hover{border-color:var(--accent);color:var(--text)}
.mzk-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mzk-chip[aria-pressed="true"]{border-color:var(--accent);background:#08284d;color:#fff;font-weight:600}
.mzk-chip i{width:6px;height:6px;border-radius:50%;flex:none;font-style:normal}
.mzk-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mzk-empty{padding:1.4rem 0;color:var(--mzk-dim);font-size:.9rem}

.mzk-detail{max-width:1160px;margin-top:1.4rem;border:1px solid var(--line);border-radius:14px;background:var(--bg-elevated);padding:clamp(1.2rem,2.4vw,2rem)}
.mzk-dhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.mzk-dhead h3{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1;text-transform:uppercase;letter-spacing:.01em;margin:0}
.mzk-dhead .mzk-cat-txt{font-size:.82rem;color:var(--text-muted)}
.mzk-badge{margin-left:auto;font-family:Consolas,monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.34rem .7rem;border-radius:999px;border:1px solid}

.mzk-caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;margin-top:.4rem}
.mzk-cap{display:flex;align-items:baseline;gap:.7rem;padding:.62rem 0;border-bottom:1px solid var(--mzk-hair)}
.mzk-cap-n{font-size:.9rem;flex:none}
.mzk-cap-d{flex:1;border-bottom:1px dotted #17365e;transform:translateY(-3px)}
.mzk-cap-s{font-family:Consolas,monospace;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;flex:none}
.mzk-s-ok{color:var(--mzk-ok)}
.mzk-s-warn{color:var(--mzk-warn)}
.mzk-s-dim{color:var(--mzk-dim)}
.mzk-s-off{color:var(--mzk-off)}
.mzk-s-no{color:var(--mzk-no);text-decoration:line-through;text-decoration-thickness:1px}
.mzk-note{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--text-muted)}
.mzk-note b{color:var(--text);font-weight:600}

.mzk-shots{margin-top:clamp(56px,7vw,88px)}
.mzk-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.mzk-tab{font-family:Consolas,monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-muted);cursor:pointer}
.mzk-tab:hover{color:var(--text);border-color:var(--accent)}
.mzk-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mzk-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.mzk-frame{margin:1.2rem 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#020a14;box-shadow:0 30px 80px -40px #000}
.mzk-framebar{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid var(--line);background:var(--bg-elevated)}
.mzk-framebar u{width:9px;height:9px;border-radius:50%;background:#1d3550;display:inline-block}
.mzk-framebar span{margin-left:.5rem;font-family:Consolas,monospace;font-size:.68rem;color:var(--mzk-dim);letter-spacing:.06em}
.mzk-frame img{display:block;width:100%;height:auto}
.mzk-shotcap{margin-top:.9rem;font-size:.82rem;color:var(--text-muted)}

@media(max-width:760px){
  .mzk-tally>div{flex:1 1 45%}
  .mzk-tally>div:nth-child(2){border-right:0}
  .mzk-tally>div:nth-child(1),.mzk-tally>div:nth-child(2){border-bottom:1px solid var(--line)}
  .mzk-count{margin-left:0;width:100%}
  .mzk-caps{grid-template-columns:1fr}
  .mzk-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}