<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Game Modern, Aman dan Stabil - Panduan Main Nyaman di MacauGG</title>
<meta name="description" content="Panduan lengkap ciri game modern yang aman dan stabil di MacauGG: uji ingatan warna, latihan ketajaman warna, cek kemampuan perangkat, plus panel data live HK, Toto Macau, dan SDY.">
<meta name="keywords" content="game modern, game aman, game stabil, macaugg, live hk, toto macau, sdy live, uji perangkat, permainan peramban">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
<meta name="author" content="MacauGG">
<meta name="language" content="Indonesian">
<link rel="canonical" href="https://naturalremediescures.com/">
<meta property="og:type" content="article">
<meta property="og:url" content="https://naturalremediescures.com/">
<meta property="og:title" content="Game Modern, Aman dan Stabil - Panduan Main Nyaman di MacauGG">
<meta property="og:description" content="Tiga alat interaktif untuk menguji ingatan, ketajaman warna, dan kesiapan perangkat, ditambah panel data live HK, Toto Macau, dan SDY.">
<meta property="og:image" content="https://naturalremediescures.com/asset/game-modern.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="MacauGG">
<meta property="og:locale" content="id_ID">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Game Modern, Aman dan Stabil - MacauGG">
<meta name="twitter:description" content="Uji ingatan warna, ketajaman warna, dan kesiapan perangkat langsung di peramban. Tanpa unduhan, tanpa kirim data.">
<meta name="twitter:image" content="https://naturalremediescures.com/asset/game-modern.jpg">
<meta name="theme-color" content="#ff3b6b">
<meta name="color-scheme" content="light">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="MacauGG">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%23ff3b6b'/><rect x='7' y='11' width='7' height='7' rx='2' fill='%23ffd60a'/><rect x='18' y='11' width='7' height='7' rx='2' fill='%2306d6a0'/><rect x='7' y='20' width='18' height='4' rx='2' fill='%23fff'/></svg>">
<style>
*,*::before,*::after{box-sizing:border-box}
:root{
  --krem:#fff6e9; --krem2:#ffeed8; --tinta:#1c1233; --abu:#5b5170;
  --koral:#ff3b6b; --jingga:#ff9500; --lemon:#ffd60a; --mint:#06d6a0; --langit:#3a86ff; --anggur:#8338ec;
  --garis:#1c1233; --tebal:3px; --bayang:6px 6px 0 var(--garis); --bayang-kecil:4px 4px 0 var(--garis);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--krem);color:var(--tinta);
  font-family:"Trebuchet MS",Verdana,Segoe UI,system-ui,sans-serif;
  font-size:16px;line-height:1.72;overflow-x:hidden;position:relative;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--anggur)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,6.2vw,3.3rem);font-weight:900}
h2{font-size:clamp(1.4rem,4.2vw,2.15rem);font-weight:900}
h3{font-size:clamp(1.08rem,2.9vw,1.35rem);font-weight:800}
p{margin:0 0 1em}
/* ---------- konfeti latar ---------- */
.konfeti{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.kp{position:absolute;top:-8%;width:14px;height:14px;border:2px solid var(--garis);border-radius:3px;opacity:.55;animation:jatuh linear infinite}
.kp:nth-child(even){border-radius:50%}
@keyframes jatuh{
  0%{transform:translate3d(0,-10vh,0) rotate(0deg)}
  100%{transform:translate3d(26px,112vh,0) rotate(540deg)}
}
.pita{position:fixed;left:0;right:0;top:0;height:7px;z-index:60;
  background:repeating-linear-gradient(90deg,var(--koral) 0 40px,var(--jingga) 40px 80px,var(--lemon) 80px 120px,var(--mint) 120px 160px,var(--langit) 160px 200px,var(--anggur) 200px 240px)}
/* ---------- kerangka ---------- */
.bungkus{position:relative;z-index:1;width:min(1120px,94vw);margin:0 auto}
header.atas{position:sticky;top:7px;z-index:50;background:var(--krem);border-bottom:var(--tebal) solid var(--garis)}
.nav{display:flex;align-items:center;gap:12px;padding:12px 0;flex-wrap:wrap}
.merek{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.12rem;letter-spacing:-.03em}
.logo{width:38px;height:38px;border:var(--tebal) solid var(--garis);border-radius:11px;background:var(--koral);
  display:grid;place-items:center;box-shadow:var(--bayang-kecil);flex:none}
.logo span{display:block;width:15px;height:15px;background:var(--lemon);border:2px solid var(--garis);border-radius:4px}
.menu{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.menu a{font-size:.82rem;font-weight:800;text-decoration:none;color:var(--tinta);
  padding:6px 11px;border:2px solid var(--garis);border-radius:99px;background:#fff}
.menu a:hover{background:var(--lemon)}
/* ---------- tombol ---------- */
.tbl{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:900;font-size:.95rem;
  padding:12px 22px;border:var(--tebal) solid var(--garis);border-radius:13px;background:#fff;color:var(--tinta);
  cursor:pointer;text-decoration:none;box-shadow:var(--bayang);transition:transform .1s,box-shadow .1s}
.tbl:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--garis)}
.tbl:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--garis)}
.tbl.koral{background:var(--koral);color:#fff}
.tbl.mint{background:var(--mint)}
.tbl.lemon{background:var(--lemon)}
.tbl.langit{background:var(--langit);color:#fff}
.tbl.kecil{padding:8px 15px;font-size:.84rem;border-radius:10px;box-shadow:var(--bayang-kecil)}
.tbl[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--bayang-kecil)}
/* ---------- kartu ---------- */
.kartu{background:#fff;border:var(--tebal) solid var(--garis);border-radius:18px;padding:22px;box-shadow:var(--bayang)}
.chip{display:inline-block;font-size:.71rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border:2px solid var(--garis);border-radius:99px;background:#fff;margin:0 6px 6px 0}
.chip.k{background:var(--koral);color:#fff}.chip.j{background:var(--jingga)}
.chip.l{background:var(--lemon)}.chip.m{background:var(--mint)}
.chip.s{background:var(--langit);color:#fff}.chip.a{background:var(--anggur);color:#fff}
/* ---------- hero ---------- */
.hero{padding:44px 0 30px;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.hero p.lead{font-size:1.05rem;color:var(--abu);max-width:56ch}
.aksi{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.kabinet{background:var(--anggur);border:var(--tebal) solid var(--garis);border-radius:22px;padding:18px;box-shadow:8px 8px 0 var(--garis)}
.layar{background:#120a24;border:var(--tebal) solid var(--garis);border-radius:12px;height:168px;
  display:flex;align-items:flex-end;gap:7px;padding:12px;overflow:hidden}
.bar{flex:1;border:2px solid var(--garis);border-radius:5px 5px 0 0;animation:naik 2.4s ease-in-out infinite alternate}
.bar:nth-child(1){background:var(--koral);height:40%;animation-delay:0s}
.bar:nth-child(2){background:var(--jingga);height:70%;animation-delay:.2s}
.bar:nth-child(3){background:var(--lemon);height:52%;animation-delay:.4s}
.bar:nth-child(4){background:var(--mint);height:88%;animation-delay:.6s}
.bar:nth-child(5){background:var(--langit);height:60%;animation-delay:.8s}
.bar:nth-child(6){background:#fff;height:34%;animation-delay:1s}
@keyframes naik{from{transform:scaleY(.55);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.knop{display:flex;gap:9px;margin-top:14px;align-items:center}
.knop i{width:20px;height:20px;border:2px solid var(--garis);border-radius:50%;display:block}
.knop i:nth-child(1){background:var(--koral)}.knop i:nth-child(2){background:var(--lemon)}.knop i:nth-child(3){background:var(--mint)}
.knop b{margin-left:auto;font-size:.74rem;font-weight:900;color:#fff;letter-spacing:.1em;text-transform:uppercase}
/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0 12px}
.bento .kartu{padding:20px}
.ikon{width:46px;height:46px;border:var(--tebal) solid var(--garis);border-radius:13px;display:grid;place-items:center;
  font-size:1.3rem;font-weight:900;margin-bottom:12px;box-shadow:var(--bayang-kecil)}
.i1{background:var(--jingga)}.i2{background:var(--mint)}.i3{background:var(--langit);color:#fff}
/* ---------- bagian ---------- */
section{padding:34px 0;position:relative;z-index:1}
.judul-bagian{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.nomor{width:42px;height:42px;flex:none;border:var(--tebal) solid var(--garis);border-radius:12px;background:var(--lemon);
  display:grid;place-items:center;font-weight:900;font-size:1.05rem;box-shadow:var(--bayang-kecil)}
.sub{color:var(--abu);max-width:62ch;margin-bottom:20px}
/* ---------- game 1 : urutan warna ---------- */
.mem-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.papan{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:340px;margin:0 auto}
.pad{aspect-ratio:1;border:var(--tebal) solid var(--garis);border-radius:16px;cursor:pointer;
  box-shadow:var(--bayang);transition:filter .12s,transform .1s;filter:brightness(.72) saturate(.8)}
.pad:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--garis)}
.pad.nyala{filter:brightness(1.25) saturate(1.3);transform:translate(3px,3px);box-shadow:3px 3px 0 var(--garis)}
.pad.p0{background:var(--koral)}.pad.p1{background:var(--lemon)}
.pad.p2{background:var(--mint)}.pad.p3{background:var(--langit)}
.papan.kunci .pad{cursor:not-allowed}
.skor-baris{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.skor{flex:1;min-width:96px;border:2px solid var(--garis);border-radius:12px;padding:10px 12px;background:var(--krem2)}
.skor b{display:block;font-size:1.5rem;font-weight:900;line-height:1.1}
.skor span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--abu)}
.kabar{border:var(--tebal) solid var(--garis);border-radius:13px;padding:13px 15px;font-weight:800;
  background:var(--krem2);min-height:56px;display:flex;align-items:center}
.kabar.baik{background:var(--mint)}
.kabar.buruk{background:var(--koral);color:#fff}
.kabar.tunggu{background:var(--lemon)}
/* ---------- game 2 : beda warna ---------- */
.warna-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px}
.petak{display:grid;gap:8px;width:min(100%,360px);margin:0 auto;aspect-ratio:1}
.ubin{border:2px solid var(--garis);border-radius:10px;cursor:pointer;transition:transform .09s}
.ubin:hover{transform:scale(.94)}
.ubin.tandai{outline:4px solid var(--tinta);outline-offset:2px}
.ubin.mati{cursor:default}
.tangga{display:flex;gap:4px;margin:14px 0}
.tangga i{flex:1;height:12px;border:2px solid var(--garis);border-radius:4px;background:#fff;display:block}
.tangga i.isi{background:var(--anggur)}
/* ---------- cek perangkat ---------- */
.periksa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.baris{display:flex;align-items:center;gap:11px;border:2px solid var(--garis);border-radius:12px;padding:11px 13px;background:#fff}
.tanda{width:28px;height:28px;flex:none;border:2px solid var(--garis);border-radius:8px;display:grid;place-items:center;font-weight:900;font-size:.85rem}
.tanda.ok{background:var(--mint)}
.tanda.mid{background:var(--lemon)}
.tanda.no{background:var(--koral);color:#fff}
.baris div{min-width:0}
.baris strong{display:block;font-size:.79rem;text-transform:uppercase;letter-spacing:.05em;color:var(--abu)}
.baris span{font-weight:800;font-size:.97rem;word-break:break-word}
/* ---------- panel saluran ---------- */
.remot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:var(--tebal) solid var(--garis);
  border-radius:16px;padding:14px 16px;background:var(--anggur);color:#fff;box-shadow:var(--bayang)}
.remot .layar-kecil{flex:1;min-width:180px;background:#120a24;border:2px solid var(--garis);border-radius:10px;padding:9px 13px}
.remot .layar-kecil b{display:block;font-size:1.02rem;font-weight:900;color:var(--lemon)}
.remot .layar-kecil small{font-size:.74rem;color:#cbbde6;letter-spacing:.05em}
.putar{width:46px;height:46px;flex:none;border:var(--tebal) solid var(--garis);border-radius:12px;background:var(--lemon);
  font-size:1.1rem;font-weight:900;cursor:pointer;box-shadow:var(--bayang-kecil);color:var(--tinta)}
.putar:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--garis)}
.titik{display:flex;gap:6px}
.titik i{width:11px;height:11px;border:2px solid var(--garis);border-radius:50%;background:#fff;display:block}
.titik i.aktif{background:var(--koral)}
.kotak-panel{margin-top:16px;border:var(--tebal) solid var(--garis);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--bayang)}
.kosong{padding:46px 22px;text-align:center;color:var(--abu);font-weight:800}
.bingkai{width:100%;height:600px;border:0;display:block}
/* ---------- artikel ---------- */
.artikel{max-width:74ch}
.artikel h3{margin-top:26px}
.artikel ul{padding-left:22px;margin:0 0 1em}
.artikel li{margin-bottom:.45em}
.sorot{border-left:8px solid var(--jingga);background:var(--krem2);border-radius:0 13px 13px 0;padding:14px 18px;margin:0 0 1.2em}
.gulir{overflow-x:auto;border:var(--tebal) solid var(--garis);border-radius:14px;box-shadow:var(--bayang);background:#fff}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:.93rem}
th,td{padding:11px 14px;text-align:left;border-bottom:2px solid var(--garis)}
thead th{background:var(--anggur);color:#fff;font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
tbody tr:nth-child(even){background:var(--krem2)}
tbody tr:last-child td{border-bottom:0}
/* ---------- faq ---------- */
.faq details{border:var(--tebal) solid var(--garis);border-radius:14px;background:#fff;margin-bottom:12px;box-shadow:var(--bayang-kecil)}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:900;list-style:none;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";flex:none;width:26px;height:26px;border:2px solid var(--garis);border-radius:8px;
  background:var(--lemon);display:grid;place-items:center;font-weight:900}
.faq details[open] summary::before{content:"-";background:var(--koral);color:#fff}
.faq details[open] summary{background:var(--krem2);border-bottom:var(--tebal) solid var(--garis)}
.faq-a{padding:15px 18px;color:var(--abu)}
/* ---------- catatan & footer ---------- */
.catatan{border:var(--tebal) dashed var(--garis);border-radius:14px;padding:16px 18px;background:var(--krem2);font-size:.9rem;color:var(--abu)}
footer{border-top:var(--tebal) solid var(--garis);background:var(--tinta);color:#e6def7;margin-top:34px;padding:30px 0}
footer .bungkus{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--lemon)}
footer small{color:#a397c4}
/* ---------- responsif ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:30px}
  .bento{grid-template-columns:1fr}
  .mem-wrap,.warna-wrap{grid-template-columns:1fr}
  .periksa{grid-template-columns:1fr}
  .bingkai{height:520px}
}
@media (max-width:560px){
  body{font-size:15px}
  .kartu{padding:17px;border-radius:15px}
  .menu{width:100%;margin-left:0}
  .menu a{font-size:.76rem;padding:5px 9px}
  .layar{height:130px}
  .aksi .tbl{width:100%;justify-content:center}
  .bingkai{height:460px}
  .remot{gap:10px}
  .remot .layar-kecil{order:-1;width:100%;flex:1 0 100%}
  .skor b{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}
</style>
</head>
<body>

<div class="pita"></div>
<div class="konfeti" aria-hidden="true">
  <span class="kp" style="left:4%;background:#ff3b6b;animation-duration:15s;animation-delay:0s"></span>
  <span class="kp" style="left:12%;background:#ffd60a;animation-duration:19s;animation-delay:2s"></span>
  <span class="kp" style="left:21%;background:#06d6a0;animation-duration:13s;animation-delay:4s"></span>
  <span class="kp" style="left:29%;background:#3a86ff;animation-duration:21s;animation-delay:1s"></span>
  <span class="kp" style="left:37%;background:#8338ec;animation-duration:16s;animation-delay:6s"></span>
  <span class="kp" style="left:45%;background:#ff9500;animation-duration:18s;animation-delay:3s"></span>
  <span class="kp" style="left:54%;background:#ff3b6b;animation-duration:14s;animation-delay:7s"></span>
  <span class="kp" style="left:62%;background:#06d6a0;animation-duration:20s;animation-delay:5s"></span>
  <span class="kp" style="left:70%;background:#ffd60a;animation-duration:17s;animation-delay:9s"></span>
  <span class="kp" style="left:78%;background:#3a86ff;animation-duration:22s;animation-delay:2.5s"></span>
  <span class="kp" style="left:86%;background:#8338ec;animation-duration:15s;animation-delay:8s"></span>
  <span class="kp" style="left:94%;background:#ff9500;animation-duration:19s;animation-delay:4.5s"></span>
</div>

<header class="atas">
  <div class="bungkus nav">
    <div class="merek"><span class="logo"><span></span></span> MacauGG Arcade</div>
    <nav class="menu">
      <a href="#ingatan">Urutan Warna</a>
      <a href="#ketajaman">Beda Warna</a>
      <a href="#perangkat">Cek Perangkat</a>
      <a href="#panel">Panel Data</a>
      <a href="#tanya">FAQ</a>
    </nav>
  </div>
</header>

<main>

<div class="bungkus">
  <section class="hero">
    <div>
      <span class="chip k">Game Modern</span><span class="chip m">Aman</span><span class="chip s">Stabil</span>
      <h1>Game Modern, Aman dan Stabil</h1>
      <p class="lead">Tiga kata itu sering dipakai sebagai hiasan iklan. Halaman ini menerjemahkannya jadi hal yang bisa Anda uji sendiri sekarang juga: dua permainan yang berjalan penuh di peramban, dan satu alat yang membaca kemampuan perangkat Anda apa adanya. Tidak ada pemasangan aplikasi, tidak ada data yang dikirim keluar.</p>
      <div class="aksi">
        <a class="tbl koral" href="#ingatan">Coba Permainannya</a>
        <a class="tbl lemon" href="#panel">Buka Panel Data</a>
      </div>
    </div>
    <div class="kabinet">
      <div class="layar" aria-hidden="true">
        <span class="bar"></span><span class="bar"></span><span class="bar"></span>
        <span class="bar"></span><span class="bar"></span><span class="bar"></span>
      </div>
      <div class="knop"><i></i><i></i><i></i><b>Siap Main</b></div>
    </div>
  </section>

  <section class="bento" aria-label="Tiga pilar">
    <div class="kartu">
      <div class="ikon i1">M</div>
      <h3>Modern</h3>
      <p>Berjalan langsung di peramban dengan HTML5. Tidak ada plugin usang, tidak ada berkas pemasangan, dan tata letaknya menyesuaikan diri dari layar ponsel sempit sampai monitor lebar.</p>
    </div>
    <div class="kartu">
      <div class="ikon i2">A</div>
      <h3>Aman</h3>
      <p>Semua perhitungan di halaman ini terjadi di perangkat Anda. Tidak ada formulir masuk, tidak ada permintaan izin kamera atau lokasi, dan tidak ada berkas yang diminta untuk diunduh.</p>
    </div>
    <div class="kartu">
      <div class="ikon i3">S</div>
      <h3>Stabil</h3>
      <p>Ukuran kestabilan bukan seberapa cepat sekali muat, melainkan seberapa kecil naik turunnya saat dipakai lama. Panel data pun baru dibuat ketika Anda memintanya.</p>
    </div>
  </section>

  <!-- ============ GAME 1 ============ -->
  <section id="ingatan">
    <div class="judul-bagian"><span class="nomor">01</span><h2>Urutan Warna</h2></div>
    <p class="sub">Empat ubin menyala satu per satu, lalu Anda mengulanginya. Setiap ronde menambah satu ubin di ujung urutan. Terdengar sepele di ronde ketiga, dan berubah drastis mulai ronde keenam.</p>
    <div class="kartu">
      <div class="mem-wrap">
        <div>
          <div class="papan kunci" id="papan">
            <div class="pad p0" id="pad0" role="button" tabindex="0" aria-label="Ubin merah"></div>
            <div class="pad p1" id="pad1" role="button" tabindex="0" aria-label="Ubin kuning"></div>
            <div class="pad p2" id="pad2" role="button" tabindex="0" aria-label="Ubin hijau"></div>
            <div class="pad p3" id="pad3" role="button" tabindex="0" aria-label="Ubin biru"></div>
          </div>
        </div>
        <div>
          <div class="skor-baris">
            <div class="skor"><b id="mRonde">0</b><span>Ronde</span></div>
            <div class="skor"><b id="mPanjang">0</b><span>Panjang urutan</span></div>
            <div class="skor"><b id="mRekor">0</b><span>Rekor sesi</span></div>
          </div>
          <div class="kabar" id="mKabar">Tekan Mulai, lalu perhatikan urutan nyalanya.</div>
          <div class="aksi">
            <button class="tbl koral" id="mMulai" type="button">Mulai</button>
            <button class="tbl kecil" id="mUlang" type="button">Putar Ulang Urutan</button>
          </div>
          <p style="margin-top:16px;font-size:.9rem;color:#5b5170">Peluang menebak urutan sepanjang ini tanpa mengingatnya sama sekali: <strong id="mPeluang">-</strong></p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ GAME 2 ============ -->
  <section id="ketajaman">
    <div class="judul-bagian"><span class="nomor">02</span><h2>Beda Warna</h2></div>
    <p class="sub">Satu ubin di dalam petak punya warna yang sedikit berbeda dari sisanya. Tugas Anda menemukannya. Tiap level petaknya makin rapat dan selisih warnanya makin tipis, sampai tinggal empat persen di level terakhir.</p>
    <div class="kartu">
      <div class="warna-wrap">
        <div>
          <div class="petak" id="petak"></div>
        </div>
        <div>
          <div class="skor-baris">
            <div class="skor"><b id="wLevel">1</b><span>Level</span></div>
            <div class="skor"><b id="wUbin">9</b><span>Jumlah ubin</span></div>
            <div class="skor"><b id="wSelisih">31%</b><span>Selisih terang</span></div>
            <div class="skor"><b id="wSalah">0</b><span>Salah tunjuk</span></div>
          </div>
          <div class="tangga" id="tangga" aria-hidden="true"></div>
          <div class="kabar" id="wKabar">Tekan Mulai untuk membuka petak pertama.</div>
          <div class="aksi">
            <button class="tbl mint" id="wMulai" type="button">Mulai</button>
            <button class="tbl kecil" id="wReset" type="button">Ulang dari Level 1</button>
          </div>
          <p style="margin-top:16px;font-size:.9rem;color:#5b5170">Kalau sepuluh level ini ditembus dengan menunjuk asal, peluangnya satu banding 21,7 triliun. Jadi kalau Anda lolos, itu memang mata Anda yang bekerja.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ CEK PERANGKAT ============ -->
  <section id="perangkat">
    <div class="judul-bagian"><span class="nomor">03</span><h2>Cek Perangkat</h2></div>
    <p class="sub">Alat ini membaca kemampuan peramban Anda apa adanya lewat antarmuka standar. Yang tidak dilaporkan peramban akan ditulis apa adanya sebagai tidak tersedia, bukan dikarang.</p>
    <div class="kartu">
      <div class="periksa" id="periksa"></div>
      <div class="aksi">
        <button class="tbl langit" id="pCek" type="button">Periksa Sekarang</button>
        <button class="tbl kecil" id="pUlangi" type="button">Baca Ulang</button>
      </div>
      <div class="kabar" id="pRingkas" style="margin-top:16px">Belum diperiksa.</div>
    </div>
  </section>

  <!-- ============ PANEL DATA ============ -->
  <section id="panel">
    <div class="judul-bagian"><span class="nomor">04</span><h2>Panel Data</h2></div>
    <p class="sub">Tiga saluran data, satu bingkai. Tekan panah untuk berpindah saluran, tekan Buka untuk memuatnya. Panel lama ditutup lebih dulu supaya hanya ada satu bingkai aktif di halaman.</p>
    <div class="remot">
      <button class="putar" id="sPrev" type="button" aria-label="Saluran sebelumnya">&#9668;</button>
      <div class="layar-kecil">
        <b id="sNama">CH 1 &middot; Live HK</b>
        <small id="sKet">Tekan Buka untuk memuat saluran ini</small>
      </div>
      <button class="putar" id="sNext" type="button" aria-label="Saluran berikutnya">&#9658;</button>
      <div class="titik" id="sTitik" aria-hidden="true"><i class="aktif"></i><i></i><i></i></div>
      <button class="tbl lemon kecil" id="sBuka" type="button">Buka</button>
    </div>
    <div class="kotak-panel" id="sKotak">
      <div class="kosong">Belum ada panel yang dimuat. Halaman ini sengaja dimulai tanpa satu pun bingkai pihak ketiga.</div>
    </div>
    <p style="margin-top:14px;font-size:.88rem;color:#5b5170">Panel disediakan oleh mingos.net. Kecepatan tampilnya bergantung pada layanan tersebut, bukan pada halaman ini.</p>
  </section>

  <!-- ============ ARTIKEL ============ -->
  <section id="bacaan">
    <div class="judul-bagian"><span class="nomor">05</span><h2>Apa Sebenarnya Arti Modern, Aman, dan Stabil</h2></div>
    <div class="artikel">
      <p style="margin-bottom:.6em">
        <span class="chip j">Tanpa Pemasangan</span><span class="chip l">Nol Kiriman Data</span><span class="chip a">Berjalan Lokal</span>
      </p>
      <p>Tiga kata itu dipakai begitu sering sampai kehilangan arti. Padahal ketiganya punya makna teknis yang cukup jelas, dan sebagian besar bisa Anda periksa sendiri tanpa alat khusus. Bagian ini menguraikan apa yang sebetulnya sedang dijanjikan ketika sebuah permainan disebut modern, aman, atau stabil.</p>

      <h3>Modern berarti berjalan di peramban, bukan di plugin</h3>
      <p>Selama lebih dari satu dasawarsa, permainan di web bergantung pada plugin pihak ketiga yang harus dipasang terpisah. Plugin itu sudah lama dihentikan dukungannya, dan permainan yang masih meminta pemasangan tambahan hari ini adalah tanda peringatan, bukan tanda kecanggihan.</p>
      <p>Permainan modern memakai kemampuan bawaan peramban: elemen Canvas untuk menggambar, CSS untuk animasi ringan, dan JavaScript standar untuk logikanya. Dua permainan di halaman ini dibangun persis dengan cara itu. Tidak ada pustaka luar yang perlu diunduh, tidak ada berkas tambahan, dan seluruh isinya berada dalam satu berkas.</p>
      <ul>
        <li><strong>Menyesuaikan layar.</strong> Petak dan ubin memakai satuan relatif, sehingga bentuknya tetap persegi baik di ponsel selebar 360 piksel maupun di monitor lebar.</li>
        <li><strong>Menghormati pengaturan perangkat.</strong> Bila sistem Anda diatur untuk mengurangi gerakan, seluruh animasi di halaman ini otomatis berhenti.</li>
        <li><strong>Bisa dipakai lewat papan ketik.</strong> Empat ubin pada permainan pertama dapat ditekan dengan tombol Enter atau spasi, bukan hanya sentuhan.</li>
      </ul>

      <h3>Aman berarti tidak ada yang keluar dari perangkat Anda</h3>
      <p>Kata aman punya banyak lapisan, tetapi lapisan paling dasar untuk sebuah halaman permainan adalah pertanyaan sederhana: apa yang dikirim keluar. Jawabannya di sini nol. Skor, ronde, level, dan hasil pemeriksaan perangkat hanya hidup di dalam memori tab yang sedang terbuka, dan lenyap begitu tab ditutup.</p>
      <div class="sorot"><strong>Tanda yang perlu dicurigai:</strong> halaman permainan yang meminta unduhan berkas pemasangan, meminta izin lokasi tanpa alasan yang berhubungan dengan permainannya, atau menampilkan kolom kata sandi padahal Anda tidak sedang berniat masuk ke akun mana pun.</div>
      <p>Lapisan berikutnya adalah kejujuran hasil. Pada permainan kedua, posisi ubin yang berbeda ditentukan sesaat sebelum petak digambar dan tidak pernah dipindahkan setelah Anda mulai mencari. Tidak ada mekanisme yang memindahkan jawaban ketika Anda hampir menemukannya. Ini terdengar sepele, tetapi justru di titik seperti inilah permainan yang tidak jujur biasanya bekerja.</p>

      <h3>Stabil diukur dari sebarannya, bukan dari puncaknya</h3>
      <p>Orang biasanya menilai kelancaran dari kesan sekali muat. Ukuran yang lebih berguna adalah seberapa konsisten pengalamannya selama dipakai lama. Sebuah halaman yang rata rata cepat tetapi tersendat setiap dua puluh detik terasa jauh lebih buruk daripada halaman yang sedikit lebih lambat tetapi tidak pernah tersendat sama sekali.</p>
      <p>Karena itu bagian Cek Perangkat tidak berhenti pada ukuran layar. Ia juga membaca jumlah inti prosesor, perkiraan memori, dan jenis sambungan yang dilaporkan peramban, lalu menyimpulkan apakah perangkat Anda kemungkinan besar sanggup menjalankan animasi berat tanpa patah patah.</p>

      <h3>Kenapa ronde keenam terasa seperti tembok</h3>
      <p>Pada permainan pertama, panjang urutan bertambah satu tiap ronde, tetapi jumlah kemungkinan urutan berlipat empat. Inilah sebabnya kesulitannya tidak terasa naik perlahan, melainkan menabrak dinding di suatu titik. Tabel di bawah menunjukkan angkanya.</p>
      <div class="gulir">
        <table>
          <thead>
            <tr><th>Panjang urutan</th><th>Jumlah kemungkinan</th><th>Peluang tebak asal benar</th></tr>
          </thead>
          <tbody>
            <tr><td>3 ubin</td><td>64</td><td>1,5625%</td></tr>
            <tr><td>4 ubin</td><td>256</td><td>0,3906%</td></tr>
            <tr><td>5 ubin</td><td>1.024</td><td>0,0977%</td></tr>
            <tr><td>6 ubin</td><td>4.096</td><td>0,0244%</td></tr>
            <tr><td>7 ubin</td><td>16.384</td><td>0,0061%</td></tr>
            <tr><td>8 ubin</td><td>65.536</td><td>0,0015%</td></tr>
            <tr><td>10 ubin</td><td>1.048.576</td><td>0,000095%</td></tr>
          </tbody>
        </table>
      </div>
      <p>Batas ingatan jangka pendek manusia sering dikutip sebagai tujuh butir informasi, angka klasik dari penelitian tahun 1956. Penelitian yang lebih baru menaksirnya lebih rendah, sekitar empat butir bila tidak ada latihan pengulangan. Kalau Anda mentok di ronde lima sampai tujuh, itu justru angka yang wajar sekali, bukan tanda ada yang salah.</p>

      <h3>Cara memakai halaman ini sebagai patokan</h3>
      <p>Sebelum masuk ke permainan mana pun, jalankan Cek Perangkat sekali. Bila alat itu melaporkan sambungan lambat atau memori kecil, Anda sudah tahu bahwa tersendat yang muncul nanti kemungkinan berasal dari perangkat, bukan dari layanannya. Sebaliknya, bila perangkat Anda dilaporkan sanggup tetapi tampilan tetap patah patah di tempat lain, penyebabnya ada di sisi seberang.</p>
      <p>Dua permainan di sini bisa dipakai sebagai pembanding sederhana. Keduanya ringan dan sepenuhnya lokal. Kalau keduanya berjalan mulus di perangkat Anda tetapi sesuatu yang lain tersendat, perbedaannya bukan pada perangkat.</p>
    </div>
  </section>

  <!-- ============ FAQ ============ -->
  <section id="tanya">
    <div class="judul-bagian"><span class="nomor">06</span><h2>Pertanyaan yang Sering Muncul</h2></div>
    <div class="faq">
      <details>
        <summary>Apa yang bikin sebuah game disebut modern?</summary>
        <div class="faq-a">Game modern berjalan langsung di peramban tanpa perlu memasang aplikasi tambahan, memakai HTML5 dan Canvas, menyesuaikan diri dengan ukuran layar, serta menghormati pengaturan perangkat seperti mode hemat gerak. Tidak ada unduhan berkas dan tidak ada plugin usang yang harus dipasang lebih dulu.</div>
      </details>
      <details>
        <summary>Apa arti stabil untuk sebuah game di peramban?</summary>
        <div class="faq-a">Stabil berarti kecepatan gambar tetap rata, tidak ada patah patah saat digulir, dan keadaan permainan tidak hilang ketika tab berpindah. Ukurannya bukan seberapa cepat sekali muat, melainkan seberapa kecil naik turunnya selama dipakai lama.</div>
      </details>
      <details>
        <summary>Bagaimana cara cepat memeriksa perangkat sebelum main?</summary>
        <div class="faq-a">Buka bagian Cek Perangkat di halaman ini. Alat itu membaca lebar layar, kerapatan piksel, jumlah inti prosesor, jenis sambungan, dukungan sentuh, serta ketersediaan WebGL, lalu menyimpulkan apakah perangkat sanggup menjalankan animasi berat.</div>
      </details>
      <details>
        <summary>Apakah dua permainan di halaman ini menyimpan data saya?</summary>
        <div class="faq-a">Tidak. Kedua permainan berjalan sepenuhnya di peramban Anda. Skor, ronde, dan level hanya disimpan di dalam memori halaman, hilang begitu tab ditutup, dan tidak pernah dikirim ke server mana pun.</div>
      </details>
      <details>
        <summary>Kenapa urutan warna terasa makin sulit setelah ronde kelima?</summary>
        <div class="faq-a">Karena beban ingatan tumbuh berlipat, bukan bertambah satu per satu. Menebak urutan sepanjang lima ubin secara asal hanya berpeluang 1 dari 1.024, sedangkan sepanjang delapan ubin turun menjadi 1 dari 65.536. Setiap ronde baru mengalikan ruang kemungkinan dengan empat.</div>
      </details>
      <details>
        <summary>Apakah panel data di halaman ini otomatis termuat?</summary>
        <div class="faq-a">Tidak. Panel hanya dibuat setelah Anda menekan tombol Buka. Halaman dimuat tanpa satu pun bingkai pihak ketiga, sehingga pemuatan awal tetap ringan, dan berpindah saluran akan menutup panel sebelumnya lalu membuka yang baru.</div>
      </details>
    </div>
  </section>

  <section>
    <div class="catatan">
      <strong>Catatan jujur.</strong> Dua permainan di halaman ini adalah uji ingatan dan uji ketajaman warna, bukan permainan berhadiah dan tidak terhubung ke akun mana pun. Tidak ada kolom kata sandi, tidak ada formulir, dan tidak ada satu pun angka yang dikirim keluar dari perangkat Anda. Hasil Cek Perangkat dibaca dari antarmuka standar peramban dan akan menulis tidak tersedia bila peramban Anda memang tidak melaporkannya. Panel data berasal dari mingos.net dan hanya dimuat setelah Anda menekan tombolnya sendiri.

<ul>
<li><a href="https://codimd.carpentries.org/s/ovPJc8tOq">MACAUGG Platform Digital 2026</a></li>
<li><a href="https://md.chaospott.de/s/AAzJfG95kW">Wadah Permainan MACAUGG Terbaru</a></li>
<li><a href="https://pads.zapf.in/s/xfSoqqeDBa">MACAUGG Layanan Daring Resmi</a></li>
</ul>
    </div>
  </section>

</div>
</main>

<footer>
  <div class="bungkus">
    <div>
      <div class="merek" style="color:#fff"><span class="logo"><span></span></span> MacauGG Arcade</div>
      <small>Halaman informasi. Konten hiburan dan edukasi, 21 tahun ke atas.</small>
    </div>
    <div>
      <small>&copy; 2026 MacauGG &middot; <a href="#ingatan">Urutan Warna</a> &middot; <a href="#ketajaman">Beda Warna</a> &middot; <a href="#perangkat">Cek Perangkat</a></small>
    </div>
  </div>
</footer>

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Article","headline":"Game Modern, Aman dan Stabil - Panduan Main Nyaman di MacauGG","description":"Panduan menerjemahkan istilah game modern, aman, dan stabil menjadi hal yang bisa diuji sendiri lewat uji ingatan warna, uji ketajaman warna, dan pemeriksaan kemampuan perangkat.","image":"https://naturalremediescures.com/asset/game-modern.jpg","inLanguage":"id-ID","datePublished":"2026-09-05","dateModified":"2026-09-05","articleSection":"Panduan Permainan","keywords":"game modern, game aman, game stabil, uji perangkat, live hk, toto macau, sdy live","wordCount":1180,"author":{"@type":"Organization","@id":"https://naturalremediescures.com/#org","name":"MacauGG","url":"https://naturalremediescures.com/"},"publisher":{"@id":"https://naturalremediescures.com/#org"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://naturalremediescures.com/"}}
</script>

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"FAQPage","inLanguage":"id-ID","mainEntity":[
{"@type":"Question","name":"Apa yang bikin sebuah game disebut modern?","acceptedAnswer":{"@type":"Answer","text":"Game modern berjalan langsung di peramban tanpa perlu memasang aplikasi tambahan, memakai HTML5 dan Canvas, menyesuaikan diri dengan ukuran layar, serta menghormati pengaturan perangkat seperti mode hemat gerak. Tidak ada unduhan berkas dan tidak ada plugin usang yang harus dipasang lebih dulu."}},
{"@type":"Question","name":"Apa arti stabil untuk sebuah game di peramban?","acceptedAnswer":{"@type":"Answer","text":"Stabil berarti kecepatan gambar tetap rata, tidak ada patah patah saat digulir, dan keadaan permainan tidak hilang ketika tab berpindah. Ukurannya bukan seberapa cepat sekali muat, melainkan seberapa kecil naik turunnya selama dipakai lama."}},
{"@type":"Question","name":"Bagaimana cara cepat memeriksa perangkat sebelum main?","acceptedAnswer":{"@type":"Answer","text":"Buka bagian Cek Perangkat di halaman ini. Alat itu membaca lebar layar, kerapatan piksel, jumlah inti prosesor, jenis sambungan, dukungan sentuh, serta ketersediaan WebGL, lalu menyimpulkan apakah perangkat sanggup menjalankan animasi berat."}},
{"@type":"Question","name":"Apakah dua permainan di halaman ini menyimpan data saya?","acceptedAnswer":{"@type":"Answer","text":"Tidak. Kedua permainan berjalan sepenuhnya di peramban Anda. Skor, ronde, dan level hanya disimpan di dalam memori halaman, hilang begitu tab ditutup, dan tidak pernah dikirim ke server mana pun."}},
{"@type":"Question","name":"Kenapa urutan warna terasa makin sulit setelah ronde kelima?","acceptedAnswer":{"@type":"Answer","text":"Karena beban ingatan tumbuh berlipat, bukan bertambah satu per satu. Menebak urutan sepanjang lima ubin secara asal hanya berpeluang 1 dari 1.024, sedangkan sepanjang delapan ubin turun menjadi 1 dari 65.536. Setiap ronde baru mengalikan ruang kemungkinan dengan empat."}},
{"@type":"Question","name":"Apakah panel data di halaman ini otomatis termuat?","acceptedAnswer":{"@type":"Answer","text":"Tidak. Panel hanya dibuat setelah Anda menekan tombol Buka. Halaman dimuat tanpa satu pun bingkai pihak ketiga, sehingga pemuatan awal tetap ringan, dan berpindah saluran akan menutup panel sebelumnya lalu membuka yang baru."}}
]}
</script>

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Product","name":"Paket Uji Permainan MacauGG","description":"Kumpulan tiga alat berbasis peramban: uji ingatan urutan warna sepuluh ronde, uji ketajaman warna sepuluh level, dan pemeriksa kemampuan perangkat. Seluruhnya berjalan lokal tanpa mengirim data.","image":"https://naturalremediescures.com/asset/game-modern.jpg","category":"Permainan Peramban","brand":{"@id":"https://naturalremediescures.com/#org"},"audience":{"@type":"PeopleAudience","suggestedMinAge":21},"isFamilyFriendly":false,"offers":{"@type":"Offer","price":"0","priceCurrency":"IDR","availability":"https://schema.org/InStock","url":"https://naturalremediescures.com/","priceValidUntil":"2027-09-05","seller":{"@id":"https://naturalremediescures.com/#org"}},"additionalProperty":[
{"@type":"PropertyValue","name":"Jumlah alat","value":"3"},
{"@type":"PropertyValue","name":"Ronde uji ingatan","value":"10"},
{"@type":"PropertyValue","name":"Level uji ketajaman warna","value":"10"},
{"@type":"PropertyValue","name":"Saluran panel data","value":"3"},
{"@type":"PropertyValue","name":"Pemasangan aplikasi","value":"Tidak diperlukan"},
{"@type":"PropertyValue","name":"Pengiriman data ke server","value":"Tidak ada"}
]}
</script>

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[
{"@type":"ListItem","position":1,"name":"Beranda","item":"https://naturalremediescures.com/"},
{"@type":"ListItem","position":2,"name":"Panduan Permainan","item":"https://naturalremediescures.com/#bacaan"},
{"@type":"ListItem","position":3,"name":"Game Modern, Aman dan Stabil","item":"https://naturalremediescures.com/#ingatan"}
]}
</script>

<script>
(function () {
  function el(id) { return document.getElementById(id); }
  function tulis(id, isi) { var n = el(id); if (n) n.textContent = isi; }
  function kabar(id, teks, jenis) {
    var n = el(id); if (!n) return;
    n.className = 'kabar' + (jenis ? ' ' + jenis : '');
    n.textContent = teks;
  }
  function angka(n) { return n.toLocaleString('id-ID'); }

  /* ============================================================
     01 - URUTAN WARNA
     ============================================================ */
  var MAKS_RONDE = 10;
  var urut = [], langkah = 0, rekor = 0, terima = false, sedangPutar = false;
  var jamPutar = [];

  function persenTebak(panjang) {
    if (panjang < 1) return '-';
    var kemungkinan = Math.pow(4, panjang);
    var p = 100 / kemungkinan;
    var teks = (p >= 0.001 ? p.toFixed(4) : p.toFixed(6)).replace('.', ',') + '%';
    return teks + ' (1 dari ' + angka(kemungkinan) + ')';
  }

  function bersihJam() {
    for (var i = 0; i < jamPutar.length; i++) { clearTimeout(jamPutar[i]); }
    jamPutar = [];
  }

  function nyala(i, lama) {
    var p = el('pad' + i); if (!p) return;
    p.className = 'pad p' + i + ' nyala';
    jamPutar.push(setTimeout(function () { p.className = 'pad p' + i; }, lama));
  }

  function putarUrutan() {
    if (sedangPutar || !urut.length) return;
    sedangPutar = true; terima = false;
    bersihJam();
    var papan = el('papan'); if (papan) papan.className = 'papan kunci';
    kabar('mKabar', 'Perhatikan urutannya...', 'tunggu');
    var jeda = Math.max(280, 640 - urut.length * 34);
    var hidup = Math.max(200, jeda - 110);
    for (var i = 0; i < urut.length; i++) {
      (function (idx) {
        jamPutar.push(setTimeout(function () { nyala(urut[idx], hidup); }, idx * jeda + 420));
      })(i);
    }
    jamPutar.push(setTimeout(function () {
      sedangPutar = false; terima = true; langkah = 0;
      if (papan) papan.className = 'papan';
      kabar('mKabar', 'Giliran Anda. Tekan ' + urut.length + ' ubin sesuai urutan tadi.');
    }, urut.length * jeda + 520));
  }

  function rondeBaru() {
    urut.push(Math.floor(Math.random() * 4));
    tulis('mRonde', urut.length);
    tulis('mPanjang', urut.length);
    tulis('mPeluang', persenTebak(urut.length));
    putarUrutan();
  }

  function kalah(benar) {
    terima = false; sedangPutar = false; bersihJam();
    var papan = el('papan'); if (papan) papan.className = 'papan kunci';
    if (urut.length - 1 > rekor) { rekor = urut.length - 1; tulis('mRekor', rekor); }
    var nama = ['merah', 'kuning', 'hijau', 'biru'];
    kabar('mKabar', 'Meleset. Ubin yang benar: ' + nama[benar] + '. Anda tuntas sampai ronde ' + (urut.length - 1) + '.', 'buruk');
    var b = el('mMulai'); if (b) b.textContent = 'Mulai Lagi';
    urut = []; langkah = 0;
  }

  function tekanPad(i) {
    if (!terima) return;
    nyala(i, 190);
    if (i !== urut[langkah]) { kalah(urut[langkah]); return; }
    langkah++;
    if (langkah < urut.length) {
      kabar('mKabar', 'Benar ' + langkah + ' dari ' + urut.length + '. Lanjut.');
      return;
    }
    terima = false;
    if (urut.length > rekor) { rekor = urut.length; tulis('mRekor', rekor); }
    if (urut.length >= MAKS_RONDE) {
      kabar('mKabar', 'Tuntas sepuluh ronde. Peluang menebak urutan sepanjang itu tanpa mengingat: 1 dari 1.048.576.', 'baik');
      var b = el('mMulai'); if (b) b.textContent = 'Main Lagi';
      urut = [];
      return;
    }
    kabar('mKabar', 'Ronde ' + urut.length + ' tuntas. Bersiap untuk ronde berikutnya.', 'baik');
    setTimeout(rondeBaru, 950);
  }

  for (var pi = 0; pi < 4; pi++) {
    (function (i) {
      var p = el('pad' + i); if (!p) return;
      p.addEventListener('click', function () { tekanPad(i); });
      p.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); tekanPad(i); }
      });
    })(pi);
  }

  var mMulai = el('mMulai');
  if (mMulai) mMulai.addEventListener('click', function () {
    bersihJam();
    urut = []; langkah = 0; sedangPutar = false; terima = false;
    tulis('mRonde', 0); tulis('mPanjang', 0);
    this.textContent = 'Ulang dari Awal';
    rondeBaru();
  });

  var mUlang = el('mUlang');
  if (mUlang) mUlang.addEventListener('click', function () {
    if (!urut.length) { kabar('mKabar', 'Belum ada urutan. Tekan Mulai lebih dulu.'); return; }
    putarUrutan();
  });

  /* ============================================================
     02 - BEDA WARNA
     ============================================================ */
  var MAKS_LEVEL = 10;
  var lv = 1, salahTunjuk = 0, mainWarna = false;

  function sisiPetak(level) { return Math.min(6, 2 + Math.floor((level + 1) / 2)); }
  function selisih(level) { return Math.max(4, 34 - level * 3); }

  function gambarTangga() {
    var t = el('tangga'); if (!t) return;
    var isi = '';
    for (var i = 1; i <= MAKS_LEVEL; i++) { isi += '<i class="' + (i < lv ? 'isi' : '') + '"></i>'; }
    t.innerHTML = isi;
  }

  function bangunPetak() {
    var kotak = el('petak'); if (!kotak) return;
    var sisi = sisiPetak(lv), beda = selisih(lv), jml = sisi * sisi;
    var hue = Math.floor(Math.random() * 360);
    var sat = 62 + Math.floor(Math.random() * 20);
    var arah = Math.random() < 0.5 ? -1 : 1;
    var dasar = arah > 0 ? 40 : 66;
    var target = dasar + arah * beda;
    var jawab = Math.floor(Math.random() * jml);

    kotak.style.gridTemplateColumns = 'repeat(' + sisi + ',1fr)';
    kotak.innerHTML = '';
    for (var i = 0; i < jml; i++) {
      var u = document.createElement('div');
      u.className = 'ubin';
      u.style.background = 'hsl(' + hue + ',' + sat + '%,' + (i === jawab ? target : dasar) + '%)';
      (function (idx) {
        u.addEventListener('click', function () { pilihUbin(idx, jawab, this); });
      })(i);
      kotak.appendChild(u);
    }
    tulis('wLevel', lv);
    tulis('wUbin', jml);
    tulis('wSelisih', beda + '%');
    gambarTangga();
  }

  function matikanPetak() {
    var kotak = el('petak'); if (!kotak) return;
    var anak = kotak.children;
    for (var i = 0; i < anak.length; i++) { anak[i].className = 'ubin mati'; }
  }

  function pilihUbin(idx, jawab, simpul) {
    if (!mainWarna) { kabar('wKabar', 'Tekan Mulai dulu untuk membuka petaknya.'); return; }
    if (idx !== jawab) {
      salahTunjuk++;
      tulis('wSalah', salahTunjuk);
      kabar('wKabar', 'Bukan yang itu. Coba lihat lagi, selisihnya ' + selisih(lv) + ' persen.', 'buruk');
      return;
    }
    simpul.className = 'ubin tandai';
    if (lv >= MAKS_LEVEL) {
      mainWarna = false;
      matikanPetak();
      kabar('wKabar', 'Sepuluh level tuntas dengan ' + salahTunjuk + ' kali salah tunjuk. Selisih terakhir cuma 4 persen.', 'baik');
      return;
    }
    kabar('wKabar', 'Ketemu. Naik ke level ' + (lv + 1) + ', selisihnya menyusut jadi ' + selisih(lv + 1) + ' persen.', 'baik');
    lv++;
    setTimeout(bangunPetak, 620);
  }

  var wMulai = el('wMulai');
  if (wMulai) wMulai.addEventListener('click', function () {
    mainWarna = true;
    if (lv > MAKS_LEVEL) lv = 1;
    bangunPetak();
    kabar('wKabar', 'Cari satu ubin yang warnanya berbeda, lalu tekan.');
  });

  var wReset = el('wReset');
  if (wReset) wReset.addEventListener('click', function () {
    lv = 1; salahTunjuk = 0; mainWarna = true;
    tulis('wSalah', 0);
    bangunPetak();
    kabar('wKabar', 'Diulang dari level 1. Selisih terangnya 31 persen.');
  });

  gambarTangga();

  /* ============================================================
     03 - CEK PERANGKAT
     ============================================================ */
  function adaWebGL() {
    try {
      var c = document.createElement('canvas');
      return !!(c.getContext('webgl') || c.getContext('experimental-webgl'));
    } catch (e) { return false; }
  }

  function bacaPerangkat() {
    var hasil = [], skor = 0, maksSkor = 0;

    function tambah(nama, nilai, mutu) {
      hasil.push({ nama: nama, nilai: nilai, mutu: mutu });
      if (mutu !== 'mid') { maksSkor++; if (mutu === 'ok') skor++; }
      else { maksSkor++; skor += 0.5; }
    }

    var lebar = window.innerWidth || document.documentElement.clientWidth;
    var tinggi = window.innerHeight || document.documentElement.clientHeight;
    tambah('Ukuran tampilan', lebar + ' x ' + tinggi + ' piksel', lebar >= 360 ? 'ok' : 'mid');

    var dpr = window.devicePixelRatio || 1;
    tambah('Kerapatan piksel', dpr.toFixed(2).replace('.', ',') + 'x', dpr >= 2 ? 'ok' : 'mid');

    var inti = navigator.hardwareConcurrency;
    tambah('Inti prosesor', inti ? inti + ' inti' : 'Tidak dilaporkan peramban',
      !inti ? 'mid' : (inti >= 4 ? 'ok' : 'no'));

    var mem = navigator.deviceMemory;
    tambah('Perkiraan memori', mem ? mem + ' GB' : 'Tidak dilaporkan peramban',
      !mem ? 'mid' : (mem >= 4 ? 'ok' : 'no'));

    var kon = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    if (kon && kon.effectiveType) {
      var jenis = kon.effectiveType;
      var turun = kon.downlink ? ' (' + kon.downlink + ' Mbps)' : '';
      tambah('Jenis sambungan', jenis + turun, (jenis === '4g') ? 'ok' : 'no');
    } else {
      tambah('Jenis sambungan', 'Tidak dilaporkan peramban', 'mid');
    }

    var sentuh = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
    tambah('Dukungan sentuh', sentuh ? 'Ada, ' + (navigator.maxTouchPoints || 1) + ' titik' : 'Tidak ada, pakai tetikus', 'ok');

    tambah('Akselerasi WebGL', adaWebGL() ? 'Tersedia' : 'Tidak tersedia', adaWebGL() ? 'ok' : 'no');

    var aman = location.protocol === 'https:';
    tambah('Sambungan terenkripsi', aman ? 'Ya, HTTPS' : 'Belum, ' + location.protocol, aman ? 'ok' : 'no');

    var hemat = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    tambah('Mode hemat gerak', hemat ? 'Aktif, animasi dimatikan' : 'Tidak aktif', 'ok');

    var daring = navigator.onLine !== false;
    tambah('Status jaringan', daring ? 'Tersambung' : 'Terputus', daring ? 'ok' : 'no');

    var kotak = el('periksa');
    if (kotak) {
      kotak.innerHTML = '';
      for (var i = 0; i < hasil.length; i++) {
        var b = document.createElement('div');
        b.className = 'baris';
        var t = document.createElement('span');
        t.className = 'tanda ' + hasil[i].mutu;
        t.textContent = hasil[i].mutu === 'ok' ? '+' : (hasil[i].mutu === 'mid' ? '?' : '!');
        var d = document.createElement('div');
        var s1 = document.createElement('strong'); s1.textContent = hasil[i].nama;
        var s2 = document.createElement('span'); s2.textContent = hasil[i].nilai;
        d.appendChild(s1); d.appendChild(s2);
        b.appendChild(t); b.appendChild(d);
        kotak.appendChild(b);
      }
    }

    var persen = Math.round(skor / maksSkor * 100);
    var simpul, jenisKabar;
    if (persen >= 75) { simpul = 'Perangkat ini sanggup menjalankan animasi berat tanpa masalah.'; jenisKabar = 'baik'; }
    else if (persen >= 50) { simpul = 'Perangkat ini cukup untuk tampilan biasa. Animasi berat mungkin terasa berat.'; jenisKabar = 'tunggu'; }
    else { simpul = 'Perangkat atau sambungan ini terbatas. Kurangi animasi dan tab lain yang terbuka.'; jenisKabar = 'buruk'; }
    kabar('pRingkas', 'Skor kesiapan ' + persen + ' persen. ' + simpul, jenisKabar);
  }

  var pCek = el('pCek'); if (pCek) pCek.addEventListener('click', bacaPerangkat);
  var pUlangi = el('pUlangi'); if (pUlangi) pUlangi.addEventListener('click', bacaPerangkat);

  /* ============================================================
     04 - PANEL SALURAN
     ============================================================ */
  var saluran = [
    { nama: 'Live HK', ket: 'Keluaran Hongkong secara langsung', url: 'https://mingos.net/data-hk/live-hk/' },
    { nama: 'Toto Macau', ket: 'Panel keluaran Toto Macau', url: 'https://mingos.net/data-hk/toto-macau/' },
    { nama: 'SDY Live', ket: 'Keluaran Sydney secara langsung', url: 'https://mingos.net/data-hk/sdy-live/' }
  ];
  var ch = 0;

  function gambarRemot() {
    tulis('sNama', 'CH ' + (ch + 1) + ' · ' + saluran[ch].nama);
    tulis('sKet', saluran[ch].ket);
    var t = el('sTitik');
    if (t) {
      var isi = '';
      for (var i = 0; i < saluran.length; i++) { isi += '<i class="' + (i === ch ? 'aktif' : '') + '"></i>'; }
      t.innerHTML = isi;
    }
  }

  function tutupPanel() {
    var kotak = el('sKotak'); if (!kotak) return;
    kotak.innerHTML = '<div class="kosong">Panel ditutup. Pilih saluran lalu tekan Buka.</div>';
    var b = el('sBuka'); if (b) b.textContent = 'Buka';
  }

  function bukaPanel() {
    var kotak = el('sKotak'); if (!kotak) return;
    kotak.innerHTML = '<div class="kosong">Memuat CH ' + (ch + 1) + ' · ' + saluran[ch].nama + '...</div>';
    var f = document.createElement('iframe');
    f.className = 'bingkai';
    f.src = saluran[ch].url;
    f.loading = 'lazy';
    f.referrerPolicy = 'no-referrer';
    f.title = 'Panel ' + saluran[ch].nama;
    f.setAttribute('allowfullscreen', '');
    f.addEventListener('load', function () {
      var s = kotak.querySelector('.kosong');
      if (s && s.parentNode) s.parentNode.removeChild(s);
    });
    kotak.appendChild(f);
    var b = el('sBuka'); if (b) b.textContent = 'Tutup';
  }

  function panelTerbuka() {
    var kotak = el('sKotak');
    return !!(kotak && kotak.querySelector('iframe'));
  }

  function pindah(arah) {
    var tadinyaBuka = panelTerbuka();
    ch = (ch + arah + saluran.length) % saluran.length;
    gambarRemot();
    if (tadinyaBuka) { bukaPanel(); }
  }

  var sPrev = el('sPrev'); if (sPrev) sPrev.addEventListener('click', function () { pindah(-1); });
  var sNext = el('sNext'); if (sNext) sNext.addEventListener('click', function () { pindah(1); });
  var sBuka = el('sBuka'); if (sBuka) sBuka.addEventListener('click', function () {
    if (panelTerbuka()) { tutupPanel(); } else { bukaPanel(); }
  });

  gambarRemot();
})();
</script>

</body>
</html>
