/* Hub game: gerbang daftar, kartu game baru, bingkai game, papan peringkat. */
.game-gate{display:flex;justify-content:center;padding:8px 0 28px}
.game-gate[hidden],.game-grid[hidden],.game-papan[hidden]{display:none!important}
.game-gate-card{max-width:560px;width:100%;text-align:center;background:var(--surface,#fff);border:1px solid var(--card-border,rgba(11,37,69,.1));border-radius:var(--radius-lg,18px);box-shadow:var(--shadow,0 8px 28px rgba(11,37,69,.1));padding:32px 24px}
.game-gate-card>i{font-size:2.2rem;color:var(--nav-category-bg,#ff6b00);margin-bottom:10px}
.game-gate-card h2{margin:0 0 8px;font-size:1.35rem;color:var(--ink,#152238)}
.game-gate-card p{margin:0 0 18px;color:var(--ink-muted,#5a6b85);line-height:1.6}
.game-gate-aksi{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.game-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;border:2px solid var(--nav-category-bg,#ff6b00);background:transparent;color:var(--nav-category-bg,#ff6b00);font:600 14px/1 inherit;cursor:pointer}
.game-btn--utama{background:var(--nav-category-bg,#ff6b00);color:#fff}
.game-btn:hover{filter:brightness(1.07)}
.game-thumb--memory{background:linear-gradient(145deg,#00a884,#0b7a63)!important}
.game-thumb--ttt{background:linear-gradient(145deg,#6c5ce7,#341f97)!important}
.game-thumb--puzzle{background:linear-gradient(145deg,#e74c3c,#f1c40f)!important}
.game-thumb--snake{background:linear-gradient(145deg,#00c2d1,#7b2ff7)!important}
.game-thumb--catur{background:linear-gradient(145deg,#0b2545,#1e5fcc)!important}
.game-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-muted,#5a6b85)}
.game-meta b{color:var(--ink,#152238)}
.game-frame{margin-top:6px;border-radius:14px;overflow:hidden;border:1px solid var(--card-border,rgba(11,37,69,.12))}
.game-frame iframe{display:block;width:100%;border:0;background:#0b141a}
/* Notifikasi "daftar dulu baru bisa main" -- kartu dengan ikon + aksen oren,
   bukan pil polos rata (flat) seperti sebelumnya. Slide-up + fade saat
   muncul, fade+scale-down halus saat hilang (dipicu class .game-toast--out
   dari JS sebelum elemen dihapus). */
.game-toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%) translateY(0) scale(1);
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(420px,calc(100vw - 32px));
  background:linear-gradient(165deg,#102a52,#0b2545);
  color:#fff;
  padding:14px 20px 14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,107,0,.35);
  font-size:14px;
  line-height:1.4;
  z-index:9999;
  box-shadow:0 10px 30px rgba(5,15,34,.35),0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06);
  animation:gameToastIn .38s cubic-bezier(.22,1,.36,1) both;
}
.game-toast.game-toast--out{animation:gameToastOut .28s ease forwards}
.game-toast::before{
  content:"\f06a";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:15px;
  color:#fff;
  background:linear-gradient(145deg,#ff8a3d,var(--nav-category-bg,#ff6b00));
  box-shadow:0 0 0 3px rgba(255,107,0,.18),0 4px 10px rgba(255,107,0,.35);
}
.game-toast span{flex:1;min-width:0}
@keyframes gameToastIn{
  0%{opacity:0;transform:translateX(-50%) translateY(14px) scale(.94)}
  60%{opacity:1;transform:translateX(-50%) translateY(-3px) scale(1.015)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes gameToastOut{
  0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.95)}
}
@media (prefers-reduced-motion: reduce){
  .game-toast,.game-toast.game-toast--out{animation:none}
}
.game-papan{margin-top:34px;background:var(--surface,#fff);border:1px solid var(--card-border,rgba(11,37,69,.1));border-radius:var(--radius-lg,18px);padding:22px;box-shadow:var(--shadow,0 8px 28px rgba(11,37,69,.08))}
.game-papan h2{margin:0 0 4px;font-size:1.25rem;color:var(--ink,#152238)}
.game-papan>p{margin:0 0 14px;color:var(--ink-muted,#5a6b85);font-size:14px}
.game-papan-tab{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.game-papan-tab button{min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--card-border,rgba(11,37,69,.15));background:var(--surface-alt,#f5f8fc);color:var(--ink,#152238);font:600 13px/1 inherit;cursor:pointer}
.game-papan-tab button.aktif{background:var(--nav-category-bg,#ff6b00);border-color:transparent;color:#fff}
.game-papan-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.game-papan-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface-alt,#f5f8fc);color:var(--ink,#152238)}
.game-papan-list li.saya{outline:2px solid var(--nav-category-bg,#ff6b00)}
.game-papan-list .no{width:28px;text-align:center;font-weight:700}
.game-papan-list .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.game-papan-list .sk{font-weight:700;font-variant-numeric:tabular-nums}
.game-papan-kosong{padding:16px;text-align:center;color:var(--ink-muted,#5a6b85);font-size:14px}