:root{
  --bg:#0e0e10;
  --card:#1a1a1d;
  --text:#f5f5f7;
  --muted:#a0a0a5;
  --accent:#3ea6ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.title{font-size:28px;font-weight:800;letter-spacing:.3px}
.search{max-width:320px;flex:1;display:flex;gap:8px;margin-left:16px}
.search input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #2b2b30;background:#141416;color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #2b2b30;border-radius:14px;overflow:hidden;box-shadow:0 8px 16px rgba(0,0,0,.25);transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 22px rgba(0,0,0,.35)}
.card img{display:block;width:100%;/*aspect-ratio:16/11*/;object-fit:cover;background:#0b0b0c}
.card .meta{padding:10px 12px}
.card .name{font-weight:700;font-size:14px;line-height:1.2;margin-bottom:4px}
.card .sub{font-size:12px;color:var(--muted)}

.badge{padding:4px 8px;background:#111;border:1px solid #2b2b30;border-radius:999px;font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:8px;align-items:center}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:24px;z-index:1000}
.modal{width:min(1080px,96vw);height:min(720px,88vh);background:#0c0c0d;border:1px solid #2a2a2f;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #202027;background:#121214}
.modal-title{font-weight:700}
.modal-body{flex:1;position:relative;background:#000}
.modal-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.modal-actions{display:flex;gap:8px;align-items:center}

.btn{padding:8px 11px;border-radius:10px;border:1px solid #2b2b30;background:#18181b;color:var(--text);cursor:pointer}
.btn:hover{background:#1f1f24}
.btn.primary{background:var(--accent);border-color:#2e8bd6;color:#04182a}
.btn.primary:hover{filter:brightness(1.05)}

.scoreboard{padding:10px 14px;border-left:1px solid #202027;background:#0e0e10}
.scoreboard h4{margin:6px 0 8px 0}
.score-list{list-style:none;padding:0;margin:0;max-height:160px;overflow:auto}
.score-list li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed #2b2b30;font-size:13px}
.small{font-size:12px;color:var(--muted)}

.footer{margin-top:16px;color:var(--muted);font-size:12px;text-align:center;opacity:.9}