:root {
  --bg:      #0d1117;
  --bg2:     #161b22;
  --bg3:     #1c2230;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.14);
  --text:    #e6edf3;
  --muted:   #8b949e;
  --yellow:  #ffd700;
  --green:   #39d353;
  --blue:    #58a6ff;
  --red:     #ff4757;
  --purple:  #a78bfa;
  --orange:  #ff7043;
  --cyan:    #00d4ff;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; line-height:1.6; }

/* -- HEADER -- */
header { position:sticky; top:0; z-index:100; background:rgba(13,17,23,0.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); height:60px; }
.hdr { max-width:1280px; margin:0 auto; padding:0 1.5rem; height:100%; display:flex; align-items:center; gap:1.5rem; }
.logo { display:flex; align-items:center; gap:0.6rem; text-decoration:none; flex-shrink:0; }
.logo-box { background:var(--yellow); color:#0d1117; font-family:'Press Start 2P',monospace; font-size:0.5rem; padding:0.35rem 0.5rem; border-radius:3px; line-height:1; }
.logo-name { font-family:'Press Start 2P',monospace; font-size:0.65rem; color:var(--text); line-height:1.4; }
.logo-name em { color:var(--yellow); font-style:normal; }
nav { display:flex; align-items:center; gap:0.1rem; margin-left:auto; }
nav a { font-size:0.84rem; font-weight:500; color:var(--muted); text-decoration:none; padding:0.38rem 0.75rem; border-radius:5px; transition:all .15s; }
nav a:hover, nav a.active { color:var(--text); background:rgba(255,255,255,.06); }
.nav-rand { background:var(--yellow); color:#0d1117 !important; font-weight:700; margin-left:.3rem; }
.nav-rand:hover { background:#ffe333 !important; }
.hdr-search { position:relative; display:flex; align-items:center; }
.hdr-search input { background:var(--bg2); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.83rem; padding:.38rem 2.2rem .38rem .8rem; width:190px; outline:none; transition:border-color .2s,width .25s; }
.hdr-search input:focus { border-color:var(--yellow); width:240px; }
.hdr-search input::placeholder { color:var(--muted); }
.hdr-search svg { position:absolute; right:.6rem; width:14px; color:var(--muted); pointer-events:none; }
.ham { display:none; flex-direction:column; gap:5px; width:36px; height:36px; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:6px; cursor:pointer; padding:0 9px; margin-left:auto; flex-shrink:0; transition:border-color .15s; justify-content:center; }
.ham:hover { border-color:var(--yellow); }
.ham span { height:2px; background:var(--text); border-radius:2px; transition:all .22s; display:block; }
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.drawer { display:none; position:fixed; top:60px; left:0; right:0; background:rgba(13,17,23,.97); backdrop-filter:blur(18px); border-bottom:1px solid var(--border); z-index:99; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s,transform .18s; }
.drawer.open { opacity:1; transform:translateY(0); pointer-events:all; }
.drawer-in { max-width:1280px; margin:0 auto; padding:.9rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.25rem; }
.drawer-in a { display:flex; align-items:center; color:var(--muted); text-decoration:none; font-size:.95rem; font-weight:500; padding:.65rem .75rem; border-radius:7px; transition:all .12s; }
.drawer-in a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.drawer-cta { background:var(--yellow) !important; color:#0d1117 !important; font-weight:700; font-family:'Press Start 2P',monospace; font-size:.55rem; justify-content:center; border-radius:7px; margin-top:.4rem; }
.drawer-div { height:1px; background:var(--border); margin:.4rem .75rem; }

/* -- BREADCRUMB -- */
.bc-bar { border-bottom:1px solid var(--border); padding:.45rem 1.5rem; }
.bc { max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--muted); }
.bc a { color:var(--muted); text-decoration:none; }
.bc a:hover { color:var(--yellow); }
.bc .sep { color:var(--border2); }

/* -- HERO -- */
.hero { border-bottom:1px solid var(--border); padding:2.5rem 1.5rem 2.25rem; background:radial-gradient(ellipse 70% 60% at 50% -10%, rgba(255,215,0,.06) 0%, transparent 70%); }
.hero-in { max-width:1280px; margin:0 auto; text-align:center; }
.hero-tag { font-family:'Press Start 2P',monospace; font-size:.48rem; color:var(--yellow); letter-spacing:.14em; margin-bottom:.9rem; }
.hero-title { font-family:'Press Start 2P',monospace; font-size:clamp(.9rem,2.5vw,1.4rem); color:var(--text); line-height:1.7; margin-bottom:.7rem; }
.hero-title em { color:var(--yellow); font-style:normal; }
.hero-sub { font-size:.92rem; color:var(--muted); max-width:520px; margin:0 auto 1.5rem; }

/* -- MAIN CONTENT -- */
.page { max-width:1280px; margin:0 auto; padding:2.5rem 1.5rem 5rem; display:grid; grid-template-columns:1fr 270px; gap:2rem; align-items:start; }
.main-col { display:flex; flex-direction:column; gap:2.5rem; min-width:0; }

/* -- SIDEBAR -- */
.sidebar { position:sticky; top:76px; display:flex; flex-direction:column; gap:1rem; }
.sb { background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.sb-hd { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-bottom:1px solid var(--border); }
.sb-pip { width:6px; height:6px; border-radius:1px; flex-shrink:0; }
.sb-hd h3 { font-family:'Press Start 2P',monospace; font-size:.46rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.sb-bd { padding:.65rem .75rem; }

.sb-search { display:flex; gap:.35rem; }
.sb-search input { flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:5px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.83rem; padding:.45rem .65rem; outline:none; transition:border-color .15s; }
.sb-search input:focus { border-color:var(--yellow); }
.sb-search input::placeholder { color:rgba(255,255,255,.2); }
.sb-search button { background:var(--yellow); color:#0d1117; border:none; border-radius:5px; padding:.45rem .65rem; cursor:pointer; font-family:'Press Start 2P',monospace; font-size:.4rem; font-weight:700; transition:background .12s; flex-shrink:0; }
.sb-search button:hover { background:#ffe333; }

.glist { list-style:none; }
.glist a { display:flex; align-items:center; justify-content:space-between; padding:.38rem .5rem; border-radius:4px; color:var(--muted); text-decoration:none; font-size:.81rem; transition:all .12s; }
.glist a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.gl-l { display:flex; align-items:center; gap:.45rem; }
.gl-ct { font-family:'DM Mono',monospace; font-size:.7rem; color:rgba(255,255,255,.2); }

.sb-az { display:flex; flex-wrap:wrap; gap:3px; }
.sb-az a { width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-family:'Press Start 2P',monospace; font-size:.42rem; color:var(--muted); text-decoration:none; border:1px solid var(--border); border-radius:3px; transition:all .12s; }
.sb-az a:hover { color:#0d1117; background:var(--yellow); border-color:var(--yellow); }

.sb-year-groups { display:flex; flex-direction:column; gap:.65rem; }
.sb-yr-lbl { font-family:'Press Start 2P',monospace; font-size:.4rem; color:var(--yellow); letter-spacing:.08em; margin-bottom:.3rem; }
.sb-yr-chips { display:flex; flex-wrap:wrap; gap:3px; }
.sb-yr-chips a { font-family:'DM Mono',monospace; font-size:.7rem; color:var(--muted); text-decoration:none; padding:.18rem .48rem; border:1px solid var(--border); border-radius:3px; transition:all .12s; }
.sb-yr-chips a:hover { color:#0d1117; background:var(--yellow); border-color:var(--yellow); }

.login-form { display:flex; flex-direction:column; gap:.55rem; }
.lf { display:flex; flex-direction:column; gap:.25rem; }
.lf label { font-size:.7rem; color:var(--muted); font-weight:500; }
.lf input { background:var(--bg); border:1px solid var(--border); border-radius:5px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.83rem; padding:.45rem .65rem; outline:none; width:100%; transition:border-color .15s; }
.lf input:focus { border-color:var(--yellow); }
.lf input::placeholder { color:rgba(255,255,255,.2); }
.login-btn { background:var(--yellow); color:#0d1117; font-family:'Press Start 2P',monospace; font-size:.48rem; padding:.6rem; border:none; border-radius:5px; cursor:pointer; width:100%; font-weight:700; letter-spacing:.06em; box-shadow:0 3px 0 rgba(180,140,0,.45); transition:all .12s; }
.login-btn:hover { transform:translateY(-1px); }
.lf-links { display:flex; justify-content:space-between; }
.lf-links a { font-size:.73rem; color:var(--blue); text-decoration:none; }
.lf-links a:hover { color:var(--yellow); }

.live-list { display:flex; flex-direction:column; gap:.2rem; }
.live-row { display:flex; align-items:center; gap:.55rem; padding:.4rem .5rem; border-radius:6px; text-decoration:none; transition:background .12s; }
.live-row:hover { background:rgba(255,255,255,.05); }
.live-thumb { width:30px; height:30px; border-radius:5px; background:var(--bg3); overflow:hidden; flex-shrink:0; border:1px solid var(--border); }
.live-thumb img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.live-info { flex:1; min-width:0; }
.live-n { font-size:.77rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-c { font-size:.66rem; color:var(--muted); }
.live-dot { width:6px; height:6px; background:var(--green); border-radius:50%; flex-shrink:0; box-shadow:0 0 5px var(--green); animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.2} }

/* -- SECTION HEADER -- */
.section-hd {
  display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem;
}
.section-pip { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.section-hd h2 { font-family:'Press Start 2P',monospace; font-size:.65rem; color:var(--text); letter-spacing:.08em; }
.section-hd .section-count { font-family:'DM Mono',monospace; font-size:.75rem; color:var(--muted); margin-left:auto; }

/* -- A-Z GRID -- */
.az-section { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
.az-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(52px, 1fr));
  gap:.5rem;
}
.az-grid a {
  display:flex; align-items:center; justify-content:center;
  height:52px;
  font-family:'Press Start 2P',monospace;
  font-size:1.20rem;
  color:var(--muted);
  text-decoration:none;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:7px;
  transition:all .15s;
  letter-spacing:.05em;
}
.az-grid a:hover { color:#0d1117; background:var(--yellow); border-color:var(--yellow); transform:translateY(-2px); box-shadow:0 4px 12px rgba(255,215,0,.2); }
.az-grid a.num { color:rgba(255,255,255,.3); font-size:.5rem; }
.az-grid a.num:hover { color:#0d1117; }

/* -- GENRE GRID -- */
.genre-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:.6rem;
}
.genre-card {
  display:flex; align-items:center; gap:.85rem;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:9px;
  padding:.75rem 1rem;
  text-decoration:none;
  transition:all .15s;
}
.genre-card:hover { border-color:var(--border2); background:var(--bg3); transform:translateY(-1px); }
.genre-card:hover .genre-name { color:var(--yellow); }
.genre-icon { font-size:1.2rem; flex-shrink:0; width:28px; text-align:center; }
.genre-name { font-size:.88rem; font-weight:600; color:var(--text); transition:color .12s; }
.genre-count { font-family:'DM Mono',monospace; font-size:.72rem; color:var(--muted); margin-left:auto; flex-shrink:0; }

/* Special highlighted genre cards */
.genre-card.featured {
  border-color:rgba(255,215,0,.15);
  background:rgba(255,215,0,.04);
}
.genre-card.featured:hover { border-color:rgba(255,215,0,.35); }

/* -- QUICKLINKS ROW -- */
.quicklinks {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:.6rem;
}
.ql-card {
  display:flex; align-items:center; gap:.85rem;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:9px;
  padding:.75rem 1rem;
  text-decoration:none;
  transition:all .15s;
}
.ql-card:hover { border-color:var(--border2); background:var(--bg3); transform:translateY(-1px); }
.ql-card:hover .ql-name { color:var(--yellow); }
.ql-icon { font-size:1.1rem; flex-shrink:0; width:26px; text-align:center; }
.ql-name { font-size:.88rem; font-weight:600; color:var(--text); transition:color .12s; }
.ql-desc { font-size:.75rem; color:var(--muted); margin-top:.05rem; }

/* -- YEAR SECTION -- */
.year-section { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:1.5rem; }
.decade-block { margin-bottom:1.25rem; }
.decade-block:last-child { margin-bottom:0; }
.decade-label { font-family:'Press Start 2P',monospace; font-size:.44rem; color:var(--yellow); letter-spacing:.1em; margin-bottom:.6rem; }
.year-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.year-chips a {
  font-family:'DM Mono',monospace; font-size:.8rem;
  color:var(--muted); text-decoration:none;
  background:var(--bg3); border:1px solid var(--border);
  padding:.28rem .65rem; border-radius:5px;
  transition:all .12s;
}
.year-chips a:hover { color:#0d1117; background:var(--yellow); border-color:var(--yellow); }
.year-chips a.approx { color:rgba(255,255,255,.25); font-style:italic; }
.year-chips a.approx:hover { color:#0d1117; }

/* -- LANGUAGE SECTION -- */
.lang-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:.5rem;
}
.lang-card {
  display:flex; align-items:center; gap:.65rem;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:7px; padding:.55rem .85rem;
  text-decoration:none; transition:all .12s;
  font-size:.85rem; color:var(--muted); font-weight:500;
}
.lang-card:hover { color:var(--text); border-color:var(--border2); background:var(--bg3); }
.lang-card:hover .lang-name { color:var(--yellow); }
.lang-flag { font-size:1rem; flex-shrink:0; }
.lang-name { transition:color .12s; }

/* -- FOOTER -- */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:2rem 1.5rem; }
.ftr { max-width:1280px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.ftr-logo { font-family:'Press Start 2P',monospace; font-size:.62rem; color:var(--muted); }
.ftr-logo em { color:var(--yellow); font-style:normal; }
.ftr-links { display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; }
.ftr-links a { font-size:.8rem; color:var(--muted); text-decoration:none; transition:color .12s; }
.ftr-links a:hover { color:var(--text); }
.ftr-copy { font-size:.72rem; color:rgba(255,255,255,.15); font-family:'DM Mono',monospace; text-align:center; }

/* -- RESPONSIVE -- */
@media(max-width:1024px) {
  .page { grid-template-columns:1fr 240px; gap:1.5rem; }
}
@media(max-width:768px) {
  .page { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .genre-grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
  .quicklinks { grid-template-columns:1fr 1fr; }
  .lang-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  .hero { padding:1.75rem 1rem 1.5rem; }
}
@media(max-width:640px) {
  .ham { display:flex; }
  .drawer { display:block; }
  nav, .hdr-search { display:none; }
  .page { padding:1.5rem 1rem 4rem; gap:2rem; }
  .az-grid { grid-template-columns:repeat(auto-fill, minmax(42px, 1fr)); }
  .az-grid a { height:44px; font-size:.5rem; }
  .genre-grid { grid-template-columns:1fr 1fr; gap:.45rem; }
  .genre-count { display:none; }
  .quicklinks { grid-template-columns:1fr; }
  .lang-grid { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
}