*{margin:0;padding:0;box-sizing:border-box;font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif}
:root{--bg:#14121c;--panel:#1e1b2b;--line:#2c2940;--fg:#eee;--muted:#8a879a;--accent:#a0d1a4}
html,body{background:var(--bg);color:var(--fg)}
a{color:inherit;text-decoration:none}
body{min-height:100vh}
h2{font-size:1.05rem;font-weight:800;letter-spacing:.3px}

/* ===== hub ===== */
.wrap{max-width:1680px;margin:0 auto;padding:18px 16px 60px}
.head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.logo{font-size:1.7rem;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(90deg,#a0d1a4,#7fd1ff,#c79bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.count{font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:3px 10px;white-space:nowrap}
#q{flex:1;min-width:200px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--fg);padding:11px 15px;font-size:.95rem;outline:none}
#q:focus{border-color:#7fd1ff}

.discord-btn{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  background:#5865f2;color:#fff;border-radius:8px;padding:9px 12px;
  font-size:.85rem;font-weight:700;white-space:nowrap}
.discord-btn:hover{background:#4752c4}
.discord-btn svg{flex-shrink:0}

footer a{color:#7fd1ff}
footer a:hover{text-decoration:underline}

/* rail | content | rail — rails appear only when there's room to spare, and
   the rail track is `auto` so an empty/unfilled rail collapses to nothing */
.layout{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.col{min-width:0}
.rail{display:none}
@media (min-width:1200px){
  .layout{grid-template-columns:auto minmax(0,1fr) auto}
  .rail{display:block}
  .rail-sticky{width:160px}
}
@media (min-width:1550px){
  .rail-sticky{width:300px}
}
.rail-sticky{position:sticky;top:14px;min-height:0}
.rail-sticky ins{display:block}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.card{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--line);
  transition:transform .12s,box-shadow .12s;background:#222}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(127,209,255,.25)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
.card .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2.3rem;font-weight:800;color:rgba(255,255,255,.9);text-shadow:0 2px 8px rgba(0,0,0,.4)}
.card .name{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:.82rem;font-weight:700;
  background:linear-gradient(transparent,rgba(0,0,0,.88));color:#fff;z-index:2}
.msg{color:var(--muted);padding:50px 4px;text-align:center;grid-column:1/-1}

/* in-grid ad strip */
.gridad{grid-column:1/-1;margin:6px 0;text-align:center;min-height:0;overflow:hidden}
.gridad ins{display:block}

footer{color:var(--muted);font-size:.8rem;text-align:center;padding:30px 10px 10px}

/* ===== CDN reachability banner ===== */
.cdnwarn{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:#4a3410;color:#ffd98a;border-bottom:1px solid #6b4d18;padding:10px 16px;
  font-size:.82rem;text-align:center}
.cdnwarn[hidden]{display:none}
.cdnwarn button{background:#6b4d18;color:#ffe9b8;border:0;border-radius:7px;padding:5px 12px;
  font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap}
.cdnwarn button:hover{background:#82601f}
.cdnwarn button:disabled{opacity:.6;cursor:default}
.cdnfilter{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:#ffd98a;white-space:nowrap;cursor:pointer}
.cdnfilter input{width:15px;height:15px;accent-color:#ffd98a}

/* ===== ad slots ===== */
.adband{max-width:970px;margin:14px auto 4px;min-height:0;overflow:hidden;text-align:center}
.adband ins{display:block}
.mplex{max-width:1100px;margin:26px auto 0}
.mplex ins{display:block}
/* an ad that came back empty (e.g. before AdSense approves the site) takes no space */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.adband:has(ins[data-ad-status="unfilled"]),
.mplex:has(ins[data-ad-status="unfilled"]),
.gridad:has(ins[data-ad-status="unfilled"]),
.rail-sticky:has(ins[data-ad-status="unfilled"]){display:none}

/* ===== player ===== */
.playbody{display:flex;flex-direction:column;min-height:100vh}
.pbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.pbar .back,.pbar button{background:#2a2740;color:var(--fg);border:0;border-radius:8px;padding:9px 14px;
  font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap}
.pbar .back:hover,.pbar button:hover{background:#3a3658}
.pbar b{flex:1;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pstage{display:grid;grid-template-columns:1fr;gap:16px;padding:16px;align-items:start;
  max-width:1680px;width:100%;margin:0 auto}
.pstage .rail-side{display:none}
@media (min-width:1200px){
  .pstage{grid-template-columns:auto minmax(0,1fr) auto}
  .pstage .rail-side{display:block}
}
.pmain{min-width:0}
.frame-wrap{position:relative;width:100%;max-width:1100px;margin:0 auto;
  aspect-ratio:16/10;background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
@media (max-width:700px){.frame-wrap{aspect-ratio:auto;height:68vh}}
.frame-wrap:fullscreen{max-width:none;border:0;border-radius:0;aspect-ratio:auto;height:auto}
#frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);pointer-events:none}

.more{max-width:1400px;width:100%;margin:10px auto 50px;padding:0 16px}
.more h2{margin:0 0 12px}
.mgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}