:root{
    --bg: #1c1b1f;
    --bg-raised: #242229;
    --card: #2a282e;
    --card-notch: #1c1b1f;
    --ink: #f2efe9;
    --ink-dim: #a8a3ab;
    --line: #3a3740;
    --red: #c8393b;
    --green: #4eaf32;
    --blue: #4e6e8e;
    --purple: #8a6bab;
    --amber: #c99a3e;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:'Space Grotesk', system-ui, sans-serif;line-height:1.5;}
  a{color:inherit;}

  .stat-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--bg-raised);
  border:1px solid var(--line);
  color:var(--ink-dim);
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  padding:9px 12px;
  border-radius:2px;
  white-space:nowrap;
}
.stat-badge b{
  color:var(--amber);
  font-weight:700;
}

  /* ---- Header ---- */
  header{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);
    position:sticky;top:0;background:rgba(28,27,31,0.92);backdrop-filter:blur(6px);z-index:20;
    flex-wrap:wrap; gap:10px;
  }
  .logo{font-family:'Press Start 2P', monospace;font-size:12px;text-decoration:none;color:var(--ink);}
  .logo span{color:var(--red);}
  
  .header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wa-btn,
.add-btn,
.notepad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-dim);

  text-decoration: none;
  white-space: nowrap;

  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.add-btn,
.notepad-btn{
  font-size: 13px;
  font-weight: 600;
  padding:9px 14px;
}

.wa-btn{
  font-size: 13px;
  font-weight: 600;
  padding:11px 18px;
}

.add-btn svg,
.wa-btn svg,
.notepad-btn svg{
  width:17px;
  height:17px;
}

.add-btn:hover,
.wa-btn:hover,
.notepad-btn:hover{
  transform: translateY(-1px);
  color: var(--ink);
  border-color: var(--ink-dim);
  background: rgba(255,255,255,.03);
}

  /* ---- Hero ---- */
  .hero{padding:clamp(40px,8vw,80px) clamp(16px,4vw,48px) 32px;max-width:1100px;margin:0 auto;}
  .eyebrow{font-family:'JetBrains Mono', monospace;font-size:12px;color:var(--amber);text-transform:uppercase;letter-spacing:2px;margin-bottom:18px;}
  h1{font-family:'Press Start 2P', monospace;font-size:clamp(22px, 5vw, 40px);line-height:1.5;margin:0 0 20px;}
  h1 .accent{color:var(--red);}
  .hero p{max-width:560px;color:var(--ink-dim);font-size:16px;margin:0 0 28px;}

  .ticker-wrap{border:1px solid var(--line);background:var(--bg-raised);border-radius:2px;overflow:hidden;margin-bottom:8px;}
  .ticker-head{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);font-family:'JetBrains Mono', monospace;font-size:11px;color:var(--ink-dim);}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:6px;animation:blink 1.6s infinite;}
  @keyframes blink{50%{opacity:.25;}}
  .ticker{white-space:nowrap;overflow:hidden;padding:12px 0;}
  .ticker-track{display:inline-block;padding-left:100%;animation:scroll 22s linear infinite;font-family:'JetBrains Mono', monospace;font-size:13px;color:var(--ink);}
  .ticker-track b{color:var(--amber);}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
  @media (prefers-reduced-motion: reduce){.ticker-track{animation:none; padding-left:0;}}

    /* ---- Toolbar ---- */
  .toolbar{
    max-width:1100px;
    margin:0 auto;
    padding:12px clamp(16px,4vw,48px) 16px;
    border:1px solid var(--line);
    border-radius:2px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
  }
  
  #search{
    width:100%; /* Search ngambil 1 baris penuh */
    background:var(--bg-raised);
    border:1px solid var(--line);
    color:var(--ink);
    padding:12px 14px;
    border-radius:2px;
    font-family:'Space Grotesk', sans-serif;
    font-size:14px;
  }
  #search:focus{outline:2px solid var(--amber); outline-offset:1px;}

  /* Baris Chip (Kategori) */
  .chip-row{
    display:flex;
    gap:10px;
    flex-wrap:nowrap; /* GAK AKAN TURUN KE BAWAH */
    overflow-x:auto; /* BISA DIGESER KESAMPING */
    max-width:100%;
    padding-bottom:4px; /* Biar gak nabrak scrollbar */
    scrollbar-width:none; /* Firefox */
    -ms-overflow-style: none;  /* IE & Edge */
  }
  .chip-row::-webkit-scrollbar {
    display: none; /* Chrome & Safari */
  }

  .chip{
    flex-shrink:0; /* Ukuran chip gak menyusut */
    background:transparent;
    border:1px solid var(--line);
    color:var(--ink-dim);
    padding:10px 14px;
    border-radius:2px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    cursor:pointer;
    transition:all .15s ease;
    white-space:nowrap; /* Teks kategori gak pecah ke bawah */
  }
  .chip:hover{
    border-color:var(--ink-dim); 
    color:var(--ink);
  }
  .chip.active{
    background:rgba(201,154,62,.08);
    color:var(--amber);
    border-color:var(--amber);
  }
  .chip:focus-visible{
    outline:2px solid var(--amber); 
    outline-offset:2px;
  }
  /* ---- Grid & cards ---- */
  main{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 60px;}
  .grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:18px;align-items:start;}
  .card{background:var(--card);border:1px solid var(--line);border-radius:2px;position:relative;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;}
  .card::after{content:"";position:absolute;top:0;right:0;width:22px;height:22px;background:var(--card-notch);clip-path:polygon(100% 0, 0 0, 100% 100%);}
  .card-strip{height:6px;}
  .card-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:8px;}
  .tag{font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:2px;width:fit-content;color:#1c1b1f;font-weight:600;}
  .card h3{margin:4px 0 0;font-size:16px;font-weight:700;}
  .meta{font-family:'JetBrains Mono', monospace;font-size:11px;color:var(--ink-dim);display:flex;justify-content:space-between;}
  .card-actions{margin-top:auto;display:flex;gap:8px;padding-top:8px;}
  .btn{flex:1;text-align:center;padding:9px 10px;border-radius:2px;font-size:12px;font-weight:600;text-decoration:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;font-family:inherit;background:transparent;}
  .btn.primary{background:var(--bg-raised); color:var(--ink); border-color:var(--line);}
  .btn.primary:hover{color:var(--amber); border-color:var(--amber); background:rgba(201,154,62,.08);}
  .btn.danger{color:var(--red);border-color:var(--red);}
  .btn:hover{opacity:0.85;}

  .empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ink-dim);font-family:'JetBrains Mono', monospace;font-size:13px;}

  footer{border-top:1px solid var(--line);padding:32px clamp(16px,4vw,48px) 40px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;color:var(--ink-dim);font-size:13px;}
  footer a{text-decoration:underline; text-underline-offset:3px;}
  .foot-links{display:flex; gap:18px; flex-wrap:wrap;}

  .brand-quote,
.brand-reminder{

    max-width:680px;

    margin:48px auto 0;

    text-align:center;

    padding:0 20px;

}

.quote{

    font-family:"Space Grotesk",sans-serif;

    font-size:16px;

    line-height:1.8;

    color:var(--ink-dim);

    font-style:italic;

}

.quote-author{

    display:block;

    margin-top:18px;

    font-size:14px;

    font-weight:700;

    color:var(--amber);

    letter-spacing:.5px;

}

  /* ---- Game info modal ---- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(12,11,14,0.72);
    backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    padding:24px; z-index:100;
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal-card{
    background:var(--card); border:1px solid var(--line); border-radius:2px;
    width:100%; max-width:420px; max-height:85vh; overflow-y:auto;
    position:relative;
    transform:scale(0.9); opacity:0;
    transition:transform .22s cubic-bezier(.2,.8,.3,1.2), opacity .18s ease;
  }
  .modal-overlay.open .modal-card{ transform:scale(1); opacity:1; }
  .modal-close{
    position:absolute; top:10px; right:10px; z-index:2;
    background:rgba(28,27,31,0.8); border:1px solid var(--line); color:var(--ink);
    width:30px; height:30px; border-radius:2px; font-size:18px; line-height:1;
    cursor:pointer;
  }
  .modal-cover{
    height:140px; background:linear-gradient(135deg, var(--bg-raised), var(--card));
    background-size:cover; background-position:center;
  }
  .modal-body{ padding:20px; display:flex; flex-direction:column; gap:10px; }
  .modal-info{ display:flex; flex-wrap:wrap; gap:6px; }
  .info-pill{
    font-family:'JetBrains Mono', monospace;
    font-size:11px; color:var(--ink-dim);
    background:var(--bg-raised); border:1px solid var(--line);
    padding:4px 9px; border-radius:2px;
  }

  .modal-downloads{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
  .modal-cta{ margin-top:0; flex:none; }

  /* ---- Typography buat deskripsi hasil parsing markdown ---- */
  .md-body{ font-size:13px; color:var(--ink-dim); line-height:1.7; }

  .md-body p{ margin:0 0 14px; }
  .md-body p:last-child{ margin-bottom:0; }

  .md-body h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:16px; font-weight:700; color:var(--ink);
    margin:24px 0 10px;
    padding-bottom:8px;
    border-bottom:1px solid var(--line);
  }
  .md-body h3:first-child{ margin-top:0; }

  .md-body h4{
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--amber); font-weight:700;
    margin:22px 0 10px;
  }
  .md-body h4:first-child{ margin-top:0; }

  .md-body h5{
    font-size:13px; font-weight:700; color:var(--ink);
    margin:16px 0 8px;
  }
  .md-body h5:first-child{ margin-top:0; }

  .md-body strong{ color:var(--ink); font-weight:700; }
  .md-body em{ font-style:italic; }
  .md-body del{ color:var(--ink-dim); opacity:.6; }

  .md-body code{
    font-family:'JetBrains Mono', monospace;
    font-size:12px; background:var(--bg-raised); border:1px solid var(--line);
    padding:2px 6px; border-radius:2px; color:var(--amber);
  }

  .md-body a{ color:var(--amber); text-decoration:underline; text-underline-offset:2px; }

  .md-body ul, .md-body ol{
    margin:0 0 14px; padding-left:20px;
    display:flex; flex-direction:column; gap:6px;
  }
  .md-body li{ line-height:1.6; }

  .md-body blockquote{
    margin:0 0 14px; padding:10px 14px;
    border-left:2px solid var(--amber);
    background:var(--bg-raised);
    color:var(--ink-dim); font-style:italic;
  }

/* ---- Welcome modal ---- */
body.modal-open{
  overflow:hidden;
}

.welcome-overlay{
  z-index:120;
}
.welcome-card{
  max-width:620px;
}
.welcome-body{
  gap:12px;
  padding:clamp(22px,5vw,38px);
}
.welcome-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:2px;
  color:var(--amber);
}
.welcome-body h2{
  margin:0;
  font-size:clamp(20px,4vw,30px);
}
.welcome-body h3{
  margin:12px 0 -2px;
  font-size:17px;
  color:var(--ink);
}
.welcome-body p{
  margin:0;
  color:var(--ink-dim);
  font-size:14px;
  line-height:1.7;
}
.session-choice{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:8px;
  color:var(--ink-dim);
  font-size:13px;
  cursor:pointer;
}
.session-choice input{
  accent-color:var(--amber);
  margin-top:4px;
}
.welcome-continue{
  width:100%;
  margin-top:4px;
  flex:none;
}