:root{
      --bg:#0c1018;          /* deep space */
      --panel:#141a24;       /* panel canvas */
      --alt:#0a0e14;         /* darker */
      --ink:#e6f1ff;         /* ink */
      --muted:#9fb6d0;       /* muted ink */
      --accent:#5df2d6;      /* cyan */
      --accent-2:#ff7ad6;    /* pink */
      --accent-3:#ffdd57;    /* gold */
      --danger:#ff5b5b;      
      --shadow: 0 8px 0 #0a0e14, 0 12px 24px rgba(0,0,0,.55);
      --radius: 18px;
      --grid: clamp(240px, 33vw, 340px);
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--ink); background:var(--bg);
      font-family:"VT323", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing:.2px; font-size:20px;
      image-rendering: pixelated;
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" rx="3" ry="3" fill="%235df2d6"/><path d="M5 4h4v12H5zM10 8h4v8h-4zM15 12h4v4h-4z" fill="%230c1018"/></svg>') 2 2, auto;
      overflow-x:hidden;
    }
    .wrap{position:relative; isolation:isolate}
    canvas#stars{position:fixed; inset:0; z-index:-1;}

    header{
      position:sticky; top:0; z-index:50; backdrop-filter: blur(6px);
      background: linear-gradient(180deg, rgba(12,16,24,.75), rgba(12,16,24,.35));
      border-bottom: 2px solid #152033; box-shadow: var(--shadow);
    }
    .bar{max-width:1200px; margin:0 auto; display:flex; gap:18px; align-items:center; padding:18px 20px}
    .logo{
      display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
    }
    .logo-emoji{font-size:26px; filter: drop-shadow(0 2px 0 #000); width: 26px; height: 26px;}
    .title{
      font-family:"Press Start 2P", system-ui; font-size:14px; line-height:1.2; text-transform:uppercase; letter-spacing:1px;
      color:var(--accent);
      text-shadow: 0 0 8px rgba(93,242,214,.55);
    }
    .sub{font-size:16px; color:var(--muted)}

    .controls{margin-left:auto; display:flex; gap:12px; align-items:center}
    .search{
      position:relative; display:flex; align-items:center; gap:10px; min-width:240px;
      background:var(--panel); border:3px solid #1f2a3d; border-radius:10px; padding:10px 12px; box-shadow: var(--shadow);
    }
    .search input{
      background:transparent; border:0; outline:0; color:var(--ink); width:100%; font-size:18px;
    }
    .chip{border:2px solid #24324b; background:linear-gradient(180deg,#1a2231,#121826); padding:10px 12px; border-radius:10px; color:var(--muted)}

    main{max-width:1200px; margin:22px auto 120px; padding:0 20px}

    .hero{
      position:relative; border:4px solid #182338; border-radius:var(--radius);
      background:linear-gradient(180deg,#141a24 0,#0e141d 70%),
                 radial-gradient(1200px 400px at 0% 0%, rgba(93,242,214,.12), transparent 60%),
                 radial-gradient(800px 340px at 100% 0%, rgba(255,122,214,.08), transparent 60%);
      box-shadow: var(--shadow); overflow:hidden; padding:28px; margin-bottom:26px;
    }
    .scanlines::after{
      content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
      background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px);
      opacity:.3;
    }
    .hero h1{
      font-family:"Press Start 2P"; font-size: clamp(20px,3.3vw,36px); line-height:1.35; margin:0 0 10px;
      text-transform:uppercase; letter-spacing:1px; color:var(--accent-3);
      text-shadow: 0 0 10px rgba(255,221,87,.35), 0 0 2px #000;
    }
    .hero p{margin:0; color:var(--muted)}
    .hero .cta{
      margin-top:18px; display:flex; flex-wrap:wrap; gap:12px
    }
    .btn{
      display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--bg);
      background:linear-gradient(180deg, var(--accent), #3bd5bc); border:0; box-shadow: var(--shadow);
      border-radius:12px; padding:12px 16px; font-weight:700
    }
    .btn.alt{background:linear-gradient(180deg, #ff7ad6, #e458bd); color:#220818}

    .grid{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--grid), 1fr)); gap:16px;
    }
    .card{
      position:relative; border:4px solid #1e2a3e; border-radius:var(--radius); 
      background:linear-gradient(145deg,#141a26,#0e141c),
                 radial-gradient(circle at 20% 80%, rgba(93,242,214,.08), transparent 50%),
                 radial-gradient(circle at 80% 20%, rgba(255,122,214,.05), transparent 50%);
      padding:22px; box-shadow:var(--shadow); 
      transition: transform .12s steps(3, jump-both), filter .12s, box-shadow .12s;
      overflow:hidden; min-height:200px; display:flex; flex-direction:column;
    }
    .card::before{
      content:""; position:absolute; top:0; left:0; right:0; height:3px;
      background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
      opacity:.7;
    }
    .card:hover{ 
      transform: translateY(-6px) scale(1.02); filter: saturate(1.15) brightness(1.05);
      box-shadow: 0 12px 0 #0a0e14, 0 16px 32px rgba(0,0,0,.65);
      border-color: #2a3952;
    }
    .card-header{
      display:flex; align-items:center; gap:14px; margin-bottom:12px;
    }
    .card-icon{
      width:40px; height:40px; display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg, #1a2332, #0f1520); border:3px solid #24324b;
      border-radius:12px; font-size:32px; box-shadow: inset 0 2px 0 rgba(255,255,255,.1);
    }
    .card-icon img {
      width: 32px; height: 32px; border-radius:6px;
    }
    .card h3{ 
      margin:0; font-family:"Press Start 2P"; font-size:15px; color:var(--accent);
      text-shadow: 0 0 6px rgba(93,242,214,.3); line-height:1.3; flex:1;
    }
    .card p{
      color:var(--muted); margin:0 0 auto 0; line-height:1.4; font-size:18px;
    }
    .card-footer{
      display:flex; justify-content:space-between; align-items:flex-end; margin-top:16px; gap:12px;
    }
    .tagbar{ 
      display:flex; gap:6px; flex-wrap:wrap; flex:1;
    }
    .tag{ 
      border:2px solid #24324b; padding:4px 8px; border-radius:6px; 
      color:#8fa3c2; font-size:14px; background:rgba(36,50,75,.3);
      transition: all .08s steps(2, jump-both);
    }
    .card:hover .tag{
      border-color: #2d3f5a; color:#a5b8d4;
    }
    .go{ 
      border:0; border-radius:10px; 
      background:linear-gradient(135deg,#5df2d6,#37cbb2); 
      color:#07271f; padding:10px 14px; font-weight:800; text-decoration:none;
      font-family:"Press Start 2P"; font-size:12px; letter-spacing:.5px;
      box-shadow: 0 4px 0 #2a9d8a, 0 6px 12px rgba(0,0,0,.3);
      transition: all .08s steps(2, jump-both);
    }
    .go:hover{
      transform: translateY(-2px);
      box-shadow: 0 6px 0 #2a9d8a, 0 8px 16px rgba(0,0,0,.4);
    }
    .go:active{
      transform: translateY(1px);
      box-shadow: 0 2px 0 #2a9d8a, 0 3px 6px rgba(0,0,0,.3);
    }

    .empty{ display:none; text-align:center; color:var(--muted); margin:20px 0 }

    .dock{
      position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:40;
      display:flex; gap:12px; padding:10px; border-radius:16px; backdrop-filter: blur(6px);
      background:linear-gradient(180deg, rgba(20,26,36,.8), rgba(13,18,26,.6)); border:2px solid #1b263a;
      box-shadow:var(--shadow);
    }
    .dock a{ text-decoration:none; color:var(--ink); opacity:.85 }

    footer{ max-width:1200px; margin:70px auto 40px; padding:0 20px; color:var(--muted); text-align:center }
    footer a{ color:var(--accent)}

    /* pixel mascot */
    .mascot{ position:absolute; right:10px; top:10px; opacity:.9; filter: drop-shadow(0 3px 0 #0005)}

    @media (max-width:600px){
      .search{min-width:0; flex:1}
      .bar{gap:10px}
      .title{display:none}
      .hero{padding:18px}
      .card p{min-height:unset}
    }

    h2#apps {
      font-family: 'Press Start 2P';
      font-size: 18px;
      color: var(--accent-2);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin: 22px 6px;
    }

.card-thumbnail {
    margin-bottom: 15px;
}

.card-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}