*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg1:#4f46e5;--bg2:#3730a3;--bg3:#0f172a;
  --surface:rgba(255,255,255,.06);--border:rgba(255,255,255,.16);
  --text:#ffffff;--text-dim:rgba(255,255,255,.8);
  --ring:#ffffff;--shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;--radius-sm:12px;--safe-bottom:env(safe-area-inset-bottom,0)
}
body.theme-green{--bg1:#16a34a;--bg2:#166534;--bg3:#052e16}
body.theme-blue{--bg1:#4f46e5;--bg2:#3730a3;--bg3:#0f172a}
body.theme-pink{--bg1:#db2777;--bg2:#9d174d;--bg3:#3b0a22}
body.theme-white{--bg1:#f8fafc;--bg2:#e2e8f0;--bg3:#cbd5e1;--text:#0f172a;--text-dim:#334155;--surface:rgba(0,0,0,.06);--border:rgba(0,0,0,.12);--ring:#0f172a}
body.theme-orange{--bg1:#f97316;--bg2:#9a3412;--bg3:#431407}
body.theme-black{--bg1:#111827;--bg2:#0b1220;--bg3:#000}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:linear-gradient(180deg,var(--bg1),var(--bg2) 40%,var(--bg3));min-height:100dvh;overflow-x:hidden}
.container{width:min(1120px,calc(100vw - 32px));margin-inline:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;gap:10px;align-items:center}
.logo-img{width:36px;height:36px;border-radius:12px;display:block;background:rgba(255,255,255,.14)}
.brand-name{letter-spacing:.5px;font-size:20px}
.btn{border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:9px 14px;border-radius:999px;color:inherit;cursor:pointer;transition:transform .12s ease,background .2s ease,border-color .2s ease;display:inline-block}
.btn:hover{transform:translateY(-1.5px);background:rgba(255,255,255,.12)}
.btn-primary{background:#fff;color:#0f172a;border-color:transparent}
.hero{padding:18px 0 28px;text-align:center}
.title{margin:8px 0 8px;font-weight:800;line-height:1.1;font-size:clamp(28px,6vw,52px);background:linear-gradient(180deg,#fff,#ffffffb3);-webkit-background-clip:text;background-clip:text;color:transparent}
body.theme-white .title{background:none;color:var(--text)}
.subtitle{max-width:720px;margin:0 auto;color:var(--text-dim)}
.themes{display:flex;gap:10px;justify-content:center;margin:18px 0}
.sw{width:28px;height:28px;border-radius:999px;border:2px solid rgba(255,255,255,.35);cursor:pointer;box-shadow:var(--shadow)}
.sw[data-t="green"]{background:linear-gradient(135deg,#22c55e,#166534)}
.sw[data-t="blue"]{background:linear-gradient(135deg,#60a5fa,#3730a3)}
.sw[data-t="pink"]{background:linear-gradient(135deg,#fb7185,#9d174d)}
.sw[data-t="white"]{background:linear-gradient(135deg,#ffffff,#cbd5e1);border-color:rgba(0,0,0,.35)}
.sw[data-t="orange"]{background:linear-gradient(135deg,#fb923c,#9a3412)}
.sw[data-t="black"]{background:linear-gradient(135deg,#111827,#000)}
.theme-label{font-size:12px;color:var(--text-dim)}
.cats{padding:10px 0 80px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(1,1fr)}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);overflow:hidden;transition:transform .15s ease}
.card:hover{transform:translateY(-3px)}
.card h3{margin:6px 0 6px;font-size:20px}
.card p{margin:0;color:var(--text-dim)}
.ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.15);margin-right:10px;font-size:0}
.row-head{display:flex;align-items:center;margin-bottom:6px}
.go{margin-top:12px;display:inline-flex;gap:10px;align-items:center}
.go .btn{padding:10px 14px}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;background:var(--surface);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:6px calc(16px + env(safe-area-inset-left)) calc(6px + var(--safe-bottom)) calc(16px + env(safe-area-inset-right))}
.bottom-nav .row{display:flex;max-width:800px;margin:0 auto;gap:10px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:12px;color:var(--text-dim)}
.tab:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.tab.active{color:var(--text);background:rgba(255,255,255,.08)}
.tab svg{width:20px;height:20px}
@media(max-width:720px){.bottom-nav{display:block}}
@media(max-width:720px){.cats{padding-bottom:120px}}
footer{padding:24px 0 40px;color:var(--text-dim)}
footer .ftr{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ftr-links{display:flex;gap:16px}
.noscript{max-width:1120px;margin:12px auto;background:#111827;color:#fff;padding:12px 16px;border-radius:12px}

/* =========================
   Animated Logos (CSS-only)
   ========================= */
.logo{position:relative;display:inline-block;width:26px;height:26px;color:var(--text)}
.logo *, .logo::before, .logo::after{box-sizing:border-box}
.bottom-nav .logo{width:20px;height:20px}

/* Reduce Motion: hormati preferensi pengguna */
@media (prefers-reduced-motion: reduce){
  .logo, .logo *{animation:none !important; transition:none !important}
}

/* ——— GAME: controller mini (denyut halus) ——— */
.logo-game::before{
  content:""; position:absolute; inset:2px; border:2px solid currentColor; border-radius:8px; opacity:.95;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.logo-game .dpad{position:absolute;left:5px;top:8px;width:10px;height:10px}
.logo-game .dpad::before,
.logo-game .dpad::after{
  content:""; position:absolute; background:currentColor; border-radius:2px; opacity:.95
}
.logo-game .dpad::before{width:10px;height:4px;left:0;top:3px}
.logo-game .dpad::after{width:4px;height:10px;left:3px;top:0}
/* pelankan & kecilkan denyut */
.logo-game .btn{position:absolute;width:6px;height:6px;border:2px solid currentColor;border-radius:50%;opacity:.95}
.logo-game .btn.a{ right:6px; top:7px;  animation:pulseSoft 4.2s infinite cubic-bezier(.2,.8,.2,1) }
.logo-game .btn.b{ right:2px; top:12px; animation:pulseSoft 4.2s .8s infinite cubic-bezier(.2,.8,.2,1) }
@keyframes pulseSoft{
  0%,100%{ transform:scale(1) }
  45%    { transform:scale(.94) }
}

/* ——— FUN: wajah senyum (kedip lebih jarang) ——— */
.logo-fun::before{
  content:""; position:absolute; inset:2px; border:2px solid currentColor; border-radius:50%; opacity:.95
}
.logo-fun .eye{position:absolute;width:3px;height:6px;background:currentColor;border-radius:2px;top:8px;transform-origin:center 75%;
  animation:blinkSoft 5.4s infinite}
.logo-fun .eye.left{left:8px}
.logo-fun .eye.right{right:8px;animation-delay:.2s}
@keyframes blinkSoft{
  0%,96%,100%{transform:scaleY(1)}
  97%,99%{transform:scaleY(.25)}
}
.logo-fun .smile{
  position:absolute;left:7px;right:7px;bottom:6px;height:10px;border:2px solid currentColor;
  border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;
  border-bottom-left-radius:40px;border-bottom-right-radius:40px;opacity:.95
}

/* ——— SKILL: keyboard (tekanan lebih lembut) ——— */
.logo-skill::before{
  content:""; position:absolute; inset:2px; border:2px solid currentColor; border-radius:6px; opacity:.95
}
.logo-skill .key{
  position:absolute; bottom:6px; width:6px; height:6px; border:2px solid currentColor; border-radius:3px;
  animation:pressSoft 2.4s infinite
}
.logo-skill .k1{left:6px}
.logo-skill .k2{left:12px; animation-delay:.22s}
.logo-skill .k3{left:18px; animation-delay:.44s}
@keyframes pressSoft{
  0%,60%,100%{transform:translateY(0); background:transparent}
  30%{transform:translateY(.6px); background:currentColor}
}
.logo-skill .caret{
  position:absolute; width:2px; height:8px; top:6px; left:7px; background:currentColor;
  animation:caret 1.1s steps(1) infinite
}
@keyframes caret{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* =========================
   Category Accents & Animations (containers)
   ========================= */

/* dekorasi pseudo-element di belakang */
.card{ isolation:isolate }

/* konten kartu di atas dekorasi */
.card .row-head, .card p, .card .go { position:relative; z-index:1 }

/* basis dekorasi */
.card[data-cat]{
  --acc1:#fff;
  --acc2:#fff;
}

.card[data-cat]::before,
.card[data-cat]::after{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--radius);
  pointer-events:none;
  z-index:0;
}

/* glow lembut sesuai kategori */
.card[data-cat]::before{
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  filter: blur(18px);
  opacity:.28;
  transform: translateZ(0);
  transition: opacity .25s ease;
}
.card[data-cat]:hover::before{ opacity:.4 }

/* default: layer animasi tipis (per kategori override) */
.card[data-cat]::after{ opacity:.18 }

/* elemen internal ikut aksen */
.card[data-cat] .ic{
  background: color-mix(in oklab, var(--acc1) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--acc2) 42%, var(--border));
}
.card[data-cat] .go .btn{
  border-color: color-mix(in oklab, var(--acc2) 36%, var(--border));
}
.card[data-cat]:hover .go .btn{
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  color:#0f172a;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .card[data-cat]::after{ animation:none !important; mask:none !important; -webkit-mask:none !important }
  .card[data-cat]::before{ filter:none; opacity:.22 }
}

/* —— GAME: halo drift lembut + sheen saat hover —— */
.card[data-cat="game"]{ --acc1:#22d3ee; --acc2:#10b981 }
.card[data-cat="game"]::after{
  background:
    radial-gradient(40% 60% at var(--x,50%) var(--y,45%),
      color-mix(in oklab, var(--acc1) 26%, transparent) 0 32%,
      transparent 46%),
    linear-gradient(180deg, transparent 0 60%, color-mix(in oklab, var(--acc2) 10%, transparent));
  background-repeat:no-repeat;
  opacity:.18;
  transform: translateZ(0);
  animation: gameDrift 14s ease-in-out infinite alternate;
  transition: opacity .3s ease;
}
.card[data-cat="game"]:hover::after{
  mask-image: linear-gradient(115deg, transparent 35%, #000 50%, transparent 65%);
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 50%, transparent 65%);
  background-blend-mode: screen;
  animation: gameDrift 14s ease-in-out infinite alternate, gameSheen 1.2s ease-out 1;
  opacity:.26;
}
@keyframes gameDrift{
  0%   { filter:saturate(100%) }
  100% { filter:saturate(110%) }
}
@keyframes gameSheen{
  0%   { background-position: -140% 0, 0 0 }
  100% { background-position:  220% 0, 0 0 }
}

/* —— FUN: bintik lembut pelan + sheen saat hover —— */
.card[data-cat="fun"]{ --acc1:#f472b6; --acc2:#facc15 }
.card[data-cat="fun"]::after{
  background:
    radial-gradient(10px 10px at 18% 115%, color-mix(in oklab, var(--acc1) 42%, transparent), transparent 60%),
    radial-gradient(8px 8px   at 78% 120%, color-mix(in oklab, var(--acc2) 42%, transparent), transparent 60%),
    radial-gradient(12px 12px at 52% 125%, color-mix(in oklab, var(--acc1) 32%, transparent), transparent 60%);
  background-repeat:no-repeat;
  animation: funFloatSoft 10s ease-in-out infinite alternate;
}
.card[data-cat="fun"]:hover::after{
  mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%);
  animation: funFloatSoft 10s ease-in-out infinite alternate, funSheen 1.1s ease-out 1;
}
@keyframes funFloatSoft{
  0%  { background-position:18% 115%, 78% 120%, 52% 125% }
  100%{ background-position:16% 100%, 76% 102%, 50% 105% }
}
@keyframes funSheen{
  0%   { background-position: -120% 0, 0 0, 0 0 }
  100% { background-position:  180% 0, 0 0, 0 0 }
}

/* —— SKILL: grid halus (statis), sweep hanya saat hover —— */
.card[data-cat="skill"]{ --acc1:#8b5cf6; --acc2:#22c55e }
.card[data-cat="skill"]::after{
  background:
    linear-gradient(90deg, transparent 0 44%, color-mix(in oklab, var(--acc1) 22%, transparent) 45%, transparent 46%),
    linear-gradient(0deg,  transparent 0 44%, color-mix(in oklab, var(--acc1) 22%, transparent) 45%, transparent 46%);
  background-size: 20px 100%, 100% 20px;
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  opacity:.16;
}
.card[data-cat="skill"]:hover::after{
  background:
    linear-gradient(90deg, transparent 0 44%, color-mix(in oklab, var(--acc1) 22%, transparent) 45%, transparent 46%),
    linear-gradient(0deg,  transparent 0 44%, color-mix(in oklab, var(--acc1) 22%, transparent) 45%, transparent 46%),
    linear-gradient(180deg, transparent, color-mix(in oklab, var(--acc2) 35%, transparent), transparent);
  background-size: 20px 100%, 100% 20px, 100% 220%;
  background-position: 0 0, 0 0, 0 -220%;
  background-repeat: repeat, repeat, no-repeat;
  animation: skillSweepSoft 5s linear 1;
  opacity:.22;
}
@keyframes skillSweepSoft{
  0%  { background-position: 0 0, 0 0, 0 -220% }
  100%{ background-position: 0 0, 0 0, 0  220% }
}

/* ===== Bottom-nav ikut aksen ===== */
.bottom-nav .tab[data-cat]{
  border:1px solid transparent;
  transition: background .25s ease, color .2s ease, border-color .2s ease;
}
.bottom-nav .tab[data-cat="game"]{ --acc1:#22d3ee; --acc2:#10b981 }
.bottom-nav .tab[data-cat="fun"] { --acc1:#f472b6; --acc2:#facc15 }
.bottom-nav .tab[data-cat="skill"]{ --acc1:#8b5cf6; --acc2:#22c55e }

.bottom-nav .tab[data-cat]:hover,
.bottom-nav .tab[data-cat]:focus-visible{
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  color:#0f172a;
  border-color: color-mix(in oklab, var(--acc2) 50%, var(--border));
}
.bottom-nav .tab[data-cat] .logo{ color: currentColor }