:root{
    --bg:#0b0d13; --surface:#141822; --surface-2:#1b2130; --border:#252c3c;
    --text:#e8ebf2; --muted:#8b93a7; --accent:#5b8cff; --accent-soft:rgba(91,140,255,.16);
    --c1:#4f7cff; --c2:#a855f7; --c3:#f59e0b; --c4:#34d399;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -18px rgba(0,0,0,.8);
  }
  html[data-theme="light"]{
    --bg:#f6f7fa; --surface:#ffffff; --surface-2:#f1f3f8; --border:#e2e6ef;
    --text:#161a22; --muted:#667085; --accent:#3b6fe0; --accent-soft:rgba(59,111,224,.12);
    --c1:#3b6fe0; --c2:#9333ea; --c3:#d97706; --c4:#059669;
    --shadow:0 1px 2px rgba(16,24,40,.06), 0 16px 36px -20px rgba(16,24,40,.3);
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font:15px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease;
  }
  a{color:inherit; text-decoration:none}
  button{font:inherit;color:inherit;cursor:pointer}

  .topbar{
    display:flex; align-items:center; gap:12px; padding:16px 24px;
    border-bottom:1px solid var(--border); background:var(--surface);
    position:sticky; top:0; z-index:20;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:680; letter-spacing:-.015em; font-size:16px}
  .brand .mark{
    width:24px;height:24px;border-radius:8px;
    background:linear-gradient(140deg,var(--c1),var(--c2));
    box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
  }
  .spacer{flex:1}
  .nav-link{color:var(--muted); font-size:13.5px; font-weight:520; padding:7px 11px; border-radius:9px; transition:.15s}
  .nav-link:hover{color:var(--text); background:var(--surface-2)}
  .icon-btn{
    width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
    background:transparent;border:1px solid transparent;color:var(--muted);transition:.15s;
  }
  .icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}

  .wrap{max-width:1120px; margin:0 auto; padding:0 24px}

  /* ---------- hero ---------- */
  .hero{padding:76px 0 52px; text-align:center; position:relative; overflow:hidden}
  .hero::before{
    content:""; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
    width:640px; height:340px; border-radius:50%; filter:blur(90px); opacity:.18;
    background:radial-gradient(circle,var(--c1),transparent 65%); pointer-events:none;
  }
  .eyebrow{
    display:inline-block; font-size:12px; font-weight:640; letter-spacing:.09em; text-transform:uppercase;
    color:var(--accent); background:var(--accent-soft); padding:5px 12px; border-radius:99px; margin-bottom:18px;
  }
  h1{
    font-size:clamp(34px,5.4vw,52px); line-height:1.08; letter-spacing:-.035em;
    margin:0 0 16px; font-weight:700; position:relative;
  }
  .hero p{max-width:520px; margin:0 auto 28px; color:var(--muted); font-size:16.5px; position:relative}
  .cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; position:relative}
  .btn{
    padding:11px 20px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
    font-size:14.5px; font-weight:580; transition:.16s; display:inline-flex; align-items:center; gap:7px;
  }
  .btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
  .btn.primary:hover{filter:brightness(1.08); color:#fff}

  /* ---------- section ---------- */
  .section-head{display:flex; align-items:baseline; gap:12px; margin:44px 0 18px}
  .section-head h2{font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0; font-weight:650}
  .section-head .line{flex:1; height:1px; background:var(--border)}

  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:16px}

  /* featured (playable) card — wide, art on the left */
  .card.featured{display:grid; grid-template-columns:340px 1fr; align-items:stretch}
  .card.featured .art{height:auto; min-height:216px; border-bottom:0; border-right:1px solid var(--border)}
  .card.featured .mini i{width:22px;height:22px;border-radius:7px}
  .card.featured .body{padding:28px 30px; gap:9px; justify-content:center}
  .card.featured h3{font-size:22px}
  .card.featured p{font-size:14.5px; max-width:52ch}
  .card.featured .meta{margin-top:0; padding-top:18px}
  @media(max-width:660px){
    .card.featured{grid-template-columns:1fr}
    .card.featured .art{border-right:0; border-bottom:1px solid var(--border); min-height:170px}
    .card.featured .body{padding:18px}
  }

  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:18px;
    overflow:hidden; display:flex; flex-direction:column; transition:.2s; position:relative;
  }
  .card.live:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow)}
  .card.soon{opacity:.72}
  .art{
    height:132px; display:grid; place-items:center; background:var(--surface-2);
    border-bottom:1px solid var(--border); position:relative; overflow:hidden;
  }
  .mini{display:grid; gap:4px}
  .mini i{width:16px;height:16px;border-radius:5px;background:var(--border);display:block;transition:.3s}
  .mini i.on1{background:var(--c1)} .mini i.on2{background:var(--c2)} .mini i.on3{background:var(--c3)}
  .card.soon .mini i.on1,.card.soon .mini i.on2,.card.soon .mini i.on3{opacity:.4}
  .card.live:hover .mini i.on1{box-shadow:0 0 12px -2px var(--c1)}
  .card.live:hover .mini i.on2{box-shadow:0 0 12px -2px var(--c2)}
  .card.live:hover .mini i.on3{box-shadow:0 0 12px -2px var(--c3)}
  .card.live:hover .mini i{transform:scale(1.06)}
  .body{padding:16px 17px 18px; flex:1; display:flex; flex-direction:column; gap:7px}
  .row{display:flex; align-items:center; gap:8px}
  .card h3{margin:0; font-size:16.5px; letter-spacing:-.015em; font-weight:640}
  .tag{
    font-size:10.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
    padding:3px 8px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
  }
  .tag.play{background:var(--accent-soft); border-color:transparent; color:var(--accent)}
  .card p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55}
  .meta{margin-top:auto; padding-top:12px; display:flex; gap:14px; font-size:12px; color:var(--muted)}
  .meta b{color:var(--text); font-weight:600}
  .stretch{position:absolute; inset:0; z-index:3}

  /* ---------- feature strip ---------- */
  .strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:44px 0 0}
  .feat{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px 16px}
  .feat .g{width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent);
           display:grid;place-items:center;font-size:13px;margin-bottom:9px}
  .feat h4{margin:0 0 3px; font-size:14px; font-weight:620}
  .feat p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.5}

  footer{margin-top:64px; border-top:1px solid var(--border); padding:24px 0 40px}
  footer .wrap{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
               font-size:13px; color:var(--muted)}