/* reset + base */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #06080f;
      color: #e0eaff;
      font-family: 'Rajdhani', sans-serif;
      overflow-x: hidden;
      min-height: 100vh;
    }
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
      pointer-events: none;
      z-index: 9999;
    }
    canvas#stars {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    header {
      position: relative;
      z-index: 10;
      text-align: center;
      padding: 50px 20px 30px;
    }
    .title {
      font-family: 'Orbitron', monospace;
      font-size: clamp(2rem, 7vw, 5.5rem);
      font-weight: 900;
      letter-spacing: .1em;
      background: linear-gradient(90deg, #00ffcc, #ffffff, #ff006e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .sub {
      font-family: 'Orbitron', monospace;
      font-size: .8rem;
      color: #00ffcc;
      letter-spacing: .4em;
      margin-top: 10px;
      opacity: .8;
    }
    .hbar {
      display: inline-flex;
      gap: 40px;
      margin-top: 24px;
      padding: 12px 30px;
      background: rgba(0,255,204,0.04);
      border: 1px solid rgba(0,255,204,0.15);
      border-radius: 4px;
    }
    .hval {
      font-family: 'Orbitron', monospace;
      font-size: 1.2rem;
      color: #00ffcc;
      font-weight: 700;
    }
    .hlbl {
      font-size: .6rem;
      letter-spacing: 2px;
      color: #4a5580;
      text-transform: uppercase;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 18px;
      padding: 24px 32px 60px;
      position: relative;
      z-index: 10;
      max-width: 1500px;
      margin: 0 auto;
    }
    @media (max-width: 600px) {
      .grid {
        padding: 12px;
        gap: 12px;
      }
    }
    .card {
      background: #0f1525;
      border: 1px solid #1a2540;
      border-radius: 8px;
      overflow: hidden;
      transition: transform .2s, box-shadow .2s, border-color .2s;
    }
    .card:hover {
      transform: translateY(-5px);
      border-color: #00ffcc;
      box-shadow: 0 0 28px rgba(0,255,204,0.18), 0 18px 40px rgba(0,0,0,.5);
    }
    .prev {
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.5rem;
      overflow: hidden;
    }
    .cbody {
      padding: 14px 16px;
    }
    .cname {
      font-family: 'Orbitron', monospace;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: 1px;
    }
    .cdesc {
      font-size: .78rem;
      color: #4a5580;
      margin-top: 4px;
      line-height: 1.4;
    }
    .cmeta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }
    .ctag {
      font-size: .58rem;
      letter-spacing: 1px;
      padding: 3px 8px;
      border-radius: 3px;
      text-transform: uppercase;
      font-weight: 700;
    }
    .chi {
      font-family: 'Orbitron', monospace;
      font-size: .68rem;
      color: #ffcc00;
    }
    .pbtn {
      width: 100%;
      padding: 11px;
      background: transparent;
      border: 1px solid #00ffcc;
      color: #00ffcc;
      font-family: 'Orbitron', monospace;
      font-size: .7rem;
      letter-spacing: 2px;
      cursor: pointer;
      margin-top: 10px;
      border-radius: 4px;
      transition: all .15s;
    }
    .pbtn:hover {
      background: #00ffcc;
      color: #000;
    }
    .t-classic {
      background: rgba(255,204,0,.12);
      color: #ffcc00;
      border: 1px solid rgba(255,204,0,.3);
    }
    .t-action {
      background: rgba(255,0,110,.12);
      color: #ff006e;
      border: 1px solid rgba(255,0,110,.3);
    }
    .t-puzzle {
      background: rgba(0,255,204,.08);
      color: #00ffcc;
      border: 1px solid rgba(0,255,204,.2);
    }
    .t-strategy {
      background: rgba(124,0,255,.12);
      color: #b060ff;
      border: 1px solid rgba(124,0,255,.3);
    }
    .t-arcade {
      background: rgba(255,136,0,.12);
      color: #ff8800;
      border: 1px solid rgba(255,136,0,.3);
    }
    .p1 { background: linear-gradient(135deg, #001a10, #003020); }
    .p2 { background: linear-gradient(135deg, #0a001a, #1a0040); }
    .p3 { background: linear-gradient(135deg, #00101a, #002030); }
    .p4 { background: linear-gradient(135deg, #000d1a, #001535); }
    .p5 { background: linear-gradient(135deg, #1a0010, #300020); }
    .p6 { background: linear-gradient(135deg, #0a0a1a, #151530); }
    .p7 { background: linear-gradient(135deg, #1a0800, #301500); }
    .p8 { background: linear-gradient(135deg, #0a1000, #152000); }
    .p9 { background: linear-gradient(135deg, #1a0015, #2a0025); }
    .p10 { background: linear-gradient(135deg, #001015, #002030); }
    .p11 { background: linear-gradient(135deg, #101000, #201500); }
    .p12 { background: linear-gradient(135deg, #000a10, #001520); }
    .p13 { background: linear-gradient(135deg, #0a001a, #150030); }
    .p14 { background: linear-gradient(135deg, #001510, #002a20); }
    .p15 { background: linear-gradient(135deg, #1a0000, #300010); }
    
    #ov {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.92);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
    }
    #ov.open {
      display: flex;
    }
    #modal {
      background: #0f1525;
      border: 1px solid #00ffcc;
      border-radius: 8px;
      width: min(96vw, 860px);
      max-height: 94vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 50px rgba(0,255,204,.13);
    }
    #mhead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid #1a2540;
      background: #0a0e1a;
    }
    #mtitle {
      font-family: 'Orbitron', monospace;
      font-size: .9rem;
      color: #00ffcc;
      letter-spacing: 2px;
    }
    #mclose {
      background: none;
      border: 1px solid #ff006e;
      color: #ff006e;
      width: 30px;
      height: 30px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      transition: all .15s;
    }
    #mclose:hover {
      background: #ff006e;
      color: #fff;
    }
    #mbody {
      flex: 1;
      overflow-y: auto;
      padding: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    #mscore {
      font-family: 'Orbitron', monospace;
      font-size: 1rem;
      color: #ffcc00;
      letter-spacing: 2px;
    }
    #gcw {
      display: flex;
      justify-content: center;
    }
    #mctrl {
      font-size: .72rem;
      color: #4a5580;
      letter-spacing: .8px;
      text-align: center;
      line-height: 1.8;
    }
    .brow {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .gb {
      padding: 9px 22px;
      border-radius: 4px;
      font-family: 'Orbitron', monospace;
      font-size: .68rem;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all .15s;
      border: 1px solid;
    }
    .gb.p {
      background: #00ffcc;
      color: #000;
      border-color: #00ffcc;
    }
    .gb.s {
      background: transparent;
      color: #00ffcc;
      border-color: #00ffcc;
    }
    .gb:hover {
      opacity: .8;
    }
    canvas {
      display: block;
      max-width: 100%;
    }