/* Arcade Play – Geräte-Datenbank (Beitrags-Variante)
   Alle Regeln sind unter #arcade-db gescoped, damit sie nicht mit den
   Klassen .card / .chip / .grid des Haupt-Stylesheets kollidieren.
   Schriften und Farben kommen aus template.css; zur Sicherheit hier erneut. */

#arcade-db{
  --db-amber:#f6b93b; --db-red:#ec5340; --db-cyan:#5fd3e0;
  --db-bg:#15172b; --db-bg2:#1d2040; --db-panel:#23264a; --db-line:#353a6b;
  --db-fg:#f2eadb; --db-muted:#a9abc9;
  --db-display:'Bungee','Impact',system-ui,sans-serif;
  --db-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --db-mono:'VT323',ui-monospace,'Courier New',monospace;
  max-width:1120px;margin-inline:auto;color:var(--db-fg);
}
#arcade-db *{box-sizing:border-box}
#arcade-db .db-intro{max-width:65ch;color:var(--db-fg);margin:0 0 4px}
#arcade-db .db-intro .muted{color:var(--db-muted)}

/* Barrierefreies Verstecken von Labels – behebt zugleich die Ausrichtung
   von Suchfeld und Sortieren, weil keine sichtbare Beschriftung mehr
   unterschiedliche Höhen erzeugt. */
#arcade-db .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#arcade-db .controls{position:sticky;top:0;z-index:20;background:var(--db-bg);border-block:1px solid var(--db-line);padding-block:14px;margin-top:20px}
#arcade-db .searchrow{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
#arcade-db .search{flex:1 1 auto;min-width:0;display:flex}
#arcade-db .search input{width:100%;background:var(--db-panel);border:1px solid var(--db-line);border-radius:4px;color:var(--db-fg);font-family:var(--db-body);font-size:17px;padding:11px 14px;margin:0;line-height:1.3;height:48px}
#arcade-db .search input::placeholder{color:var(--db-muted)}
#arcade-db .sort{flex:0 0 auto;display:flex}
#arcade-db .sort select{background:var(--db-panel);border:1px solid var(--db-line);border-radius:4px;color:var(--db-fg);font-family:var(--db-body);font-size:16px;padding:11px 14px;margin:0;line-height:1.3;height:48px}
@media (max-width:560px){#arcade-db .search{flex-basis:100%}#arcade-db .sort{flex:1 1 100%}#arcade-db .sort select{width:100%}}

#arcade-db .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#arcade-db .chip{font-family:var(--db-mono);font-size:19px;letter-spacing:.03em;text-transform:uppercase;background:transparent;color:var(--db-muted);border:1px solid var(--db-line);border-radius:4px;padding:3px 12px;cursor:pointer;line-height:1.5}
#arcade-db .chip[aria-pressed="true"]{background:var(--db-amber);color:#15172b;border-color:var(--db-amber)}
#arcade-db .count{margin-top:12px;font-family:var(--db-mono);font-size:19px;color:var(--db-muted);letter-spacing:.03em}

#arcade-db .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px;padding-block:24px 48px}
#arcade-db .card{text-align:left;background:var(--db-panel);border:1px solid var(--db-line);border-radius:4px;padding:16px;cursor:pointer;color:var(--db-fg);font:inherit;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:none}
#arcade-db .card:hover{border-color:var(--db-amber)}
#arcade-db .card .cname{font-weight:600;font-size:18px;line-height:1.25;min-width:0;overflow-wrap:anywhere;font-family:var(--db-body)}
#arcade-db .card .cmeta{color:var(--db-muted);font-size:15px;min-width:0}
#arcade-db .card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#arcade-db .card-ic{flex:0 0 auto;width:44px;height:44px;display:flex}
#arcade-db .card-ic svg{width:44px;height:44px;image-rendering:pixelated}
#arcade-db .badge{align-self:flex-start;font-family:var(--db-mono);font-size:16px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--db-line);border-radius:3px;padding:0 7px;color:var(--db-fg);background:transparent}
#arcade-db .badge.automat{color:var(--db-amber);border-color:var(--db-amber)}
#arcade-db .badge.flipper{color:var(--db-red);border-color:var(--db-red)}
#arcade-db .badge.konsole{color:var(--db-cyan);border-color:var(--db-cyan)}
#arcade-db .badge.computer{color:#8fd68a;border-color:#8fd68a}
#arcade-db .badge.system{color:#c89bff;border-color:#c89bff}
#arcade-db .badge.platine{color:var(--db-muted);border-color:var(--db-line)}
#arcade-db .empty{padding:40px 0;color:var(--db-muted)}

/* Detail-Dialog */
#arcade-db .dlg{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(11,12,24,.9)}
#arcade-db .dlg[hidden]{display:none}
#arcade-db .dlg-box{background:var(--db-bg2);border:1px solid var(--db-line);border-radius:6px;max-width:620px;width:100%;max-height:86vh;overflow:auto;padding:24px}
#arcade-db .dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#arcade-db .dlg-title{display:flex;align-items:flex-start;gap:14px;min-width:0}
#arcade-db .dlg-ic{flex:0 0 auto;width:64px;height:64px;display:flex;margin-top:2px}
#arcade-db .dlg-ic svg{width:64px;height:64px;image-rendering:pixelated}
#arcade-db .dlg-box h2{font-family:var(--db-display);font-size:clamp(1.3rem,4vw,1.8rem);line-height:1.1;margin:0;color:var(--db-fg)}
#arcade-db .dlg-alt{color:var(--db-muted);font-size:15px;margin:6px 0 0}
#arcade-db .dlg-close{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--db-line);background:var(--db-panel);color:var(--db-fg);border-radius:4px;font-family:var(--db-mono);font-size:24px;line-height:1;cursor:pointer}
#arcade-db .dlg-close:hover{background:var(--db-amber);color:#15172b;border-color:var(--db-amber)}
#arcade-db .spec{width:100%;border-collapse:collapse;margin:18px 0;font-variant-numeric:tabular-nums}
#arcade-db .spec th,#arcade-db .spec td{text-align:left;vertical-align:top;padding:8px 0;border-bottom:1px solid var(--db-line);font-size:16px}
#arcade-db .spec th{width:40%;color:var(--db-muted);font-weight:400;font-family:var(--db-mono);font-size:18px;letter-spacing:.03em;padding-right:14px}
#arcade-db .dlg-desc{margin:4px 0 0;max-width:60ch}
@media (prefers-reduced-motion:reduce){#arcade-db *{scroll-behavior:auto}}

/* Zuruecksetzen-Button */
#arcade-db .db-reset{flex:0 0 auto;height:48px;padding:0 16px;background:transparent;color:var(--db-fg);border:1px solid var(--db-line);border-radius:4px;font-family:var(--db-mono);font-size:17px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;line-height:1}
#arcade-db .db-reset:hover{border-color:var(--db-amber);color:var(--db-amber)}
#arcade-db .db-reset[hidden]{display:none}
@media (max-width:560px){#arcade-db .db-reset{flex:1 1 100%}}