/* ==========================================================================
   css/apps/gd-demon-list.css
   Split from app.html (build 2026.10.08.9-beta), original lines 8071-8114.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* GD Demon List app */
.gd-wrap { max-width:1100px; margin:0 auto; padding:22px 22px 60px; }
.gd-hero { text-align:center; padding:14px 0 22px; }
.gd-logo { max-width:340px; width:70%; height:auto; margin:0 auto; display:block; }
.gd-logo-fallback { font-size:30px; font-weight:800; color:var(--text-primary); }
.gd-hero-sub { font-size:12.5px; color:var(--text-muted); margin-top:8px; }
.gd-cols { display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
@media (max-width:840px) { .gd-cols { grid-template-columns:1fr; } }
.gd-col-head { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); padding:0 2px 10px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.gd-list-blurb { font-weight:600; letter-spacing:0; text-transform:none; opacity:.75; font-size:11px; }
/* Demonlist tier filter (Main / Extended / Legacy) */
.gd-filter { display:flex; gap:6px; margin:0 0 12px; flex-wrap:wrap; }
.gd-filter-btn { background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .12s, color .12s, border-color .12s; }
.gd-filter-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.gd-filter-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.gd-demon { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; cursor:pointer; overflow:hidden; transition:border-color .12s; }
.gd-demon:hover { border-color:var(--border-strong); }
.gd-demon.open { border-color:var(--accent); }
.gd-demon-row { display:flex; align-items:center; gap:12px; padding:10px 14px; }
.gd-pos { font-size:15px; font-weight:800; color:var(--text-secondary); min-width:42px; font-variant-numeric:tabular-nums; }
.gd-pos.top { color:#e6b34a; }
.gd-thumb { width:80px; height:45px; object-fit:cover; border-radius:6px; flex-shrink:0; background:#000; }
.gd-thumb-none { background:var(--bg-elevated); }
.gd-demon-info { flex:1; min-width:0; }
.gd-demon-name { font-size:14.5px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd-demon-by { font-size:12px; color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd-yt { color:#ff4141; flex-shrink:0; display:flex; opacity:.85; }
.gd-yt:hover { opacity:1; }
.gd-demon-detail:not(:empty) { padding:4px 14px 14px; border-top:1px solid var(--border); }
.gd-detail-loading { font-size:13px; color:var(--text-muted); padding:10px 0; }
.gd-embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; margin:10px 0; background:#000; }
.gd-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.gd-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.gd-detail-grid > div { display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--text-secondary); }
.gd-detail-k { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.gd-records { margin-top:12px; }
.gd-victor { display:inline-block; background:var(--bg-elevated); border:1px solid var(--border); border-radius:999px; padding:3px 10px; font-size:12px; color:var(--text-secondary); margin:0 5px 5px 0; }
.gd-side { position:sticky; top:8px; }
.gd-player { display:flex; align-items:center; gap:10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin-bottom:6px; }
.gd-rank { font-size:13px; font-weight:800; color:var(--text-secondary); min-width:38px; font-variant-numeric:tabular-nums; }
.gd-rank.top { color:#e6b34a; }
.gd-player-name { flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd-score { font-size:12.5px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.gd-more { text-align:center; font-size:12px; color:var(--text-muted); padding:12px 0; }