:root{--bg:#0d1117;--card:#161b22;--line:#30363d;--txt:#e6edf3;--mut:#8b949e;--acc:#f2b705;--ok:#2ea043}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.top{background:linear-gradient(180deg,#1b2230,#0d1117);border-bottom:1px solid var(--line);padding:22px 0 16px}
.top h1{margin:0;font-size:28px;letter-spacing:.5px}.top h1 span{color:var(--acc)}
.sub{margin:4px 0 0;color:var(--mut);font-size:13px}
.tools{display:flex;gap:10px;margin:18px 0 12px;flex-wrap:wrap}
.tools input,.tools select{background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px}
.tools input{flex:1;min-width:200px}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.tabs button{flex:0 0 auto;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;font-size:14px}
.tabs button[aria-pressed=true]{background:var(--acc);color:#111;border-color:var(--acc);font-weight:600}
.meta{color:var(--mut);font-size:12px;margin:8px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;content-visibility:auto;contain-intrinsic-size:260px}
.thumb{aspect-ratio:1/1;background:#21262d;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:28px;color:var(--mut)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.body{padding:10px}
.name{font-weight:600;font-size:14px;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prov{color:var(--mut);font-size:12px;margin:0 0 8px}
.rtp{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--mut)}
.rtp b{color:var(--ok);font-size:18px}
.bar{height:6px;background:#21262d;border-radius:99px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}
.vol{font-size:11px;color:var(--mut);margin-top:6px}
.empty{text-align:center;color:var(--mut);padding:40px 0}
.foot{color:var(--mut);font-size:12px;border-top:1px solid var(--line);margin-top:28px;padding-top:14px;padding-bottom:28px}
.rtp b.na{color:var(--mut)}
.more{display:block;margin:18px auto 0;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:10px 18px;cursor:pointer}
.card{cursor:pointer;transition:border-color .15s}.card:hover,.card:focus{border-color:var(--acc);outline:none}
.clk{font-size:11px;color:var(--acc);margin-top:6px}
.tools select:disabled{opacity:.5}

.players {
    font-size: 11px;
    color: var(--mut, #aaa);
    margin-top: 6px;
}

/* Header RTP MAPAN777 */
.brand-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.brand-logo {
    display: block;
    width: 150px;
    max-width: 42vw;
    height: 48px;
    object-fit: contain;
}

@media (max-width: 480px) {
    .brand-title {
        gap: 8px;
    }

    .brand-logo {
        width: 125px;
        height: 40px;
    }
}

/* Pola manual dan auto */
.pattern-box {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.pattern-title {
    color: var(--acc);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 7px;
}

.pattern-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
}

.pattern-input {
    min-width: 0;
    width: 100%;
    background: #0d1117;
    color: var(--txt);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 5px;
    font-size: 11px;
}

.pattern-controls button {
    background: #252d38;
    color: var(--txt);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.pattern-controls button:hover {
    border-color: var(--acc);
    color: var(--acc);
}

.pattern-result {
    margin-top: 7px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #202a20;
    color: #75d889;
    font-size: 11px;
    text-align: center;
}

.feature-list {
    margin-top: 9px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.feature-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.feature-status + .feature-status {
    margin-top: 5px;
}

.feature-status b {
    color: #22c55e;
    white-space: nowrap;
}

.feature-status b i {
    font-style: normal;
    font-size: 14px;
    margin-right: 3px;
}

/* ===== POPUP POLA MAPAN777 - RESPONSIVE ===== */
.pattern-launch {
  margin-top: 12px;
}

.pattern-toggle {
  width: 100%;
  min-height: 38px;
  border: 1px solid #b88b18;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b2c0b, #17130a);
  color: #f2c94c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}

.pattern-toggle:hover,
.pattern-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, #72520c, #302307);
  border-color: #f2c94c;
}

.pattern-toggle:active {
  transform: scale(.98);
}

.pattern-panel {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid #6d541d;
  border-radius: 10px;
  background: linear-gradient(145deg, #211b0e, #11151b);
  animation: patternReveal .18s ease-out;
}

.pattern-panel[hidden] {
  display: none !important;
}

@keyframes patternReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.feature-panel {
  margin-bottom: 11px;
  padding: 9px;
  border: 1px solid #55451e;
  border-radius: 8px;
  background: rgba(0, 0, 0, .2);
}

.feature-heading {
  margin-bottom: 8px;
  color: #f2c94c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.feature-status {
  min-width: 0;
  min-height: 58px;
  padding: 8px 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid #343b43;
  border-radius: 7px;
  background: #171d24;
  text-align: center;
  font-size: 10px;
}

.feature-status span {
  color: #e6edf3;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.feature-status b {
  font-size: 10px;
  white-space: nowrap;
}

.feature-status b.is-active {
  color: #35d477;
}

.feature-status b.is-inactive {
  color: #ff6464;
}

.pattern-box {
  margin: 0;
  padding: 0;
  border: 0;
}

.pattern-title {
  margin: 0 0 8px;
  color: #f2c94c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-align: center;
}

.pattern-rows {
  display: grid;
  gap: 6px;
}

.pattern-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 37px;
  padding: 7px 10px;
  border: 1px solid #343b43;
  border-radius: 7px;
  background: #171d24;
  color: #dce3eb;
  font-size: 11px;
}

.pattern-row span {
  color: #aeb8c4;
  font-weight: 600;
}

.pattern-row b {
  color: #f2c94c;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pattern-note {
  margin-top: 3px;
  color: #8b949e;
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

@media (min-width: 768px) {
  .pattern-panel {
    padding: 12px;
  }

  .feature-status {
    min-height: 64px;
    font-size: 11px;
  }

  .pattern-row {
    min-height: 40px;
    font-size: 12px;
  }

  .pattern-row b {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .pattern-panel {
    padding: 8px;
  }

  .feature-panel {
    padding: 7px;
  }

  .feature-grid {
    gap: 5px;
  }

  .feature-status {
    min-height: 55px;
    padding: 6px 3px;
    font-size: 9px;
  }

  .feature-status b {
    font-size: 9px;
  }

  .pattern-row {
    min-height: 35px;
    padding: 6px 8px;
  }
}