:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg-primary: #f4f6fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: rgba(255, 255, 255, 0.95);
  --text-primary: #11203b;
  --text-secondary: #4c5c7b;
  --text-tertiary: #54617b;
  --border-color: rgba(17, 34, 61, 0.08);
  --border-color-subtle: rgba(17, 34, 61, 0.06);
  --accent-color: #2f67ff;
  --accent-dark: #264ecc;
  --tag-bg: #eef3ff;
  --tag-color: #2e4c9d;
  --eyebrow-color: #4f67a1;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

:root.dark {
  color-scheme: dark;
  --bg-primary: #0a0e16;
  --bg-secondary: #141920;
  --bg-tertiary: rgba(20, 25, 32, 0.95);
  --text-primary: #e8edf5;
  --text-secondary: #a8b3c9;
  --text-tertiary: #8a95ae;
  --border-color: rgba(232, 237, 245, 0.12);
  --border-color-subtle: rgba(232, 237, 245, 0.06);
  --accent-color: #5a8fff;
  --accent-dark: #4a77ff;
  --tag-bg: #1a2540;
  --tag-color: #7fa3ff;
  --eyebrow-color: #8a9ac4;
  background:#0a0e16;
}

* {
  box-sizing: border-box;
}

html { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden; /* elemen dekoratif (tirai aurora, meteor) sengaja "bocor" dikit ke luar
                          buat efek visual — ini jaga biar gak jadi scroll horizontal beneran */
  max-width: 100%;
  background: radial-gradient(circle at top left, rgba(47, 114, 255, 0.14), transparent 36%),
    radial-gradient(circle at bottom right, rgba(79, 70, 229, 0.12), transparent 28%);
}

:root.dark body {
  background: radial-gradient(circle at top left, rgba(79, 127, 255, 0.08), transparent 36%),
    radial-gradient(circle at bottom right, rgba(79, 127, 255, 0.06), transparent 28%);
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 24px 48px;
  position: relative;
}

/* leave space at top so fixed theme toggle doesn't overlap content */
.site-shell {
  padding-top: 64px;
}

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 50px;
  padding: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

:root.dark .theme-toggle {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(79, 127, 255, 0.2);
}

:root.dark .theme-toggle:hover {
  box-shadow: 0 6px 20px rgba(79, 127, 255, 0.3);
}

.theme-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.theme-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-icon.active::before {
  opacity: 1;
}

.theme-icon.sun {
  background-image: url('sun logo.jpg');
  background-size: cover;
  filter: drop-shadow(0 2px 4px rgba(255, 180, 0, 0.2)) brightness(1.1) contrast(1.1);
}

.theme-icon.sun:hover {
  filter: drop-shadow(0 2px 8px rgba(255, 180, 0, 0.4)) brightness(1.2) contrast(1.2);
}

.theme-icon.moon {
  background-image: url('nightogbruh.jpg');
  background-size: cover;
  filter: drop-shadow(0 2px 4px rgba(100, 150, 255, 0.2)) brightness(0.95) contrast(1.1);
}

.theme-icon.moon:hover {
  filter: drop-shadow(0 2px 8px rgba(100, 150, 255, 0.4)) brightness(1.05) contrast(1.2);
}

.theme-icon.active {
  transform: scale(1.15) rotate(20deg);
  z-index: 10;
}

.theme-icon.inactive {
  opacity: 0.5;
  transform: scale(0.9);
}

.theme-icon.inactive:hover {
  opacity: 0.7;
  transform: scale(1);
}

.hero-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 40px 32px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.filter-bar {
  margin-bottom: 28px;
}

.filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-button {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--accent-color);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

:root.dark .filter-button {
  color: #7fa3ff;
}

.filter-button:hover,
.filter-button.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 127, 255, 0.3);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  color: var(--eyebrow-color);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  color: var(--text-primary);
}

.hero-text {
  margin: 18px 0 0;
  max-width: 680px;
  color: var(--text-secondary);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .game-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 520px)  { .game-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  min-height: 220px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--accent-color);
}

:root.dark .card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ── Background animation layer (sits behind the readable content) ── */
.card-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.7;
  filter: saturate(0.9) brightness(0.92);
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}

.card:hover .card-bg-layer {
  opacity: 1;
  filter: saturate(1.2) brightness(1.05);
}

/* ── Content wrapper: sits above background, scrim underneath keeps text readable ── */
.card-content {
  position: relative;
  z-index: 2;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
  background: linear-gradient(180deg, var(--bg-tertiary) 42%, rgba(255,255,255,0.08) 100%);
}
:root.dark .card-content {
  background: linear-gradient(180deg, var(--bg-tertiary) 42%, rgba(10,14,22,0.08) 100%);
}

@media (max-width: 640px) {
  .card-content {
    background: linear-gradient(180deg, var(--bg-tertiary) 50%, rgba(255,255,255,0.82) 100%);
  }
  :root.dark .card-content {
    background: linear-gradient(180deg, var(--bg-tertiary) 50%, rgba(10,14,22,0.82) 100%);
  }
}

/* ── Hover highlight: title, button, description all brighten together ── */
.card:hover .card-title { color: var(--accent-color); }
.card:hover .card-button {
  background: var(--accent-dark);
  box-shadow: 0 4px 16px rgba(79, 127, 255, 0.5);
  transform: scale(1.03);
}
.card:hover .card-copy { color: var(--text-primary); }

/* ═══════ Per-game background SCENES — each fills the whole card, own palette ═══════ */
.bg-anim { position:absolute; inset:0; font-family:'JetBrains Mono', monospace; }

/* ── Hangman: dark gallows scene, figure wiggles like it's struggling ── */
.bg-hangman{
  background: linear-gradient(160deg, #2a1a3a 0%, #1a1028 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.gallows-scene{ transform:scale(2.2); margin-bottom:14px; }
.bg-hangman .gallows{
  font-size:13px; color:#c9b8e8; line-height:1.15; white-space:pre; text-align:center;
  animation: wiggle 0.9s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes wiggle{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }
.bg-hangman .hangman-word{ font-size:16px; font-weight:800; letter-spacing:6px; color:#f4c430; }
.bg-hangman .hangman-word span{ opacity:0.15; animation: revealLetter 4s infinite; }
@keyframes revealLetter{ 0%,15%{ opacity:0.15; } 20%,80%{ opacity:1; } 85%,100%{ opacity:0.15; } }

/* ── Coin flip: white-to-silver scene, big coin, dark halo behind it ── */
.bg-coin{
  background: linear-gradient(135deg, #ffffff 0%, #c8cdd4 55%, #8f97a3 100%);
  display:flex; align-items:center; justify-content:center;
}
.coin-halo{
  position:absolute; width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle, rgba(10,10,15,0.55) 0%, transparent 72%);
}
.coin-3d{
  width:78px; height:78px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 35% 30%, #fff8e0, #f4c430 60%, #a87a10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:800; color:#5a4200;
  animation: coinSpin 1.6s linear infinite;
}
@keyframes coinSpin{ 0%{ transform:rotateY(0deg); } 50%{ transform:rotateY(180deg) scale(0.8); } 100%{ transform:rotateY(360deg); } }

/* ── Square Invader: dark arcade scene, MANY squares marching left<->right, full width ── */
.bg-invader{
  background: linear-gradient(180deg, #14102a 0%, #1c1440 100%);
  display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.inv-track{ overflow:hidden; width:100%; }
.inv-row{ display:flex; gap:14px; width:max-content; animation: marchRight 6s linear infinite; }
.inv-row.reverse{ animation-direction:reverse; }
.sq{ border-radius:5px; flex-shrink:0; }
.sq.purple{ width:24px; height:24px; background:#a374ff; box-shadow:0 0 10px #a374ff88; }
.sq.blue{ width:22px; height:22px; background:#4d8bff; box-shadow:0 0 10px #4d8bff88; }
.sq.red{ width:20px; height:20px; background:#ff5470; box-shadow:0 0 10px #ff547088; }
.sq.white{ width:16px; height:16px; background:#f4f4f5; box-shadow:0 0 10px #f4f4f588; }
@keyframes marchRight{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
.inv-track.row2 .inv-row{ animation-duration:8s; }
.inv-track.row3 .inv-row{ animation-duration:4.5s; }

/* ── Quick Math: floating operators drifting up the whole card ── */
.bg-math{
  background: linear-gradient(160deg, #10233d 0%, #163a5c 100%);
  overflow:hidden;
}
.bg-math .float-sym{
  position:absolute; bottom:-30px; font-size:22px; font-weight:800; color:#5a8fff;
  opacity:0; animation: floatUp 5s ease-in infinite;
}
@keyframes floatUp{ 0%{ opacity:0; transform:translateY(0) rotate(0deg); } 15%{ opacity:0.65; } 85%{ opacity:0.5; } 100%{ opacity:0; transform:translateY(-180px) rotate(25deg); } }
.bg-math .eq{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:13px; font-weight:700; color:#dce8ff; background:rgba(0,0,0,0.25);
  padding:4px 10px; border-radius:8px; white-space:nowrap;
}
.bg-math .eq b{ color:#ffd23d; }

/* ── Math AI: digital rain scene, code/binary falling, "42" answer glowing ── */
.bg-code{
  background: linear-gradient(160deg, #071410 0%, #0d2318 100%);
  overflow:hidden;
}
.bg-code .rain-digit{
  position:absolute; top:-20px; font-size:13px; color:#39ff88; opacity:0;
  animation: digitFall 3.5s linear infinite;
}
@keyframes digitFall{ 0%{ opacity:0; transform:translateY(0); } 10%{ opacity:0.8; } 90%{ opacity:0.4; } 100%{ opacity:0; transform:translateY(200px); } }
.bg-code .code-line{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:14px; white-space:nowrap; background:rgba(0,0,0,0.35); padding:5px 12px; border-radius:8px;
}
.bg-code .code-line b{ color:#39ff88; text-shadow:0 0 10px #39ff8899; }

/* ── Scratch/Blocky: colorful blocks continuously cycling & snapping ── */
.bg-blocky{
  background: linear-gradient(160deg, #1c1c2e 0%, #12121e 100%);
  display:flex; align-items:center; justify-content:center; gap:0;
}
.bg-blocky .mini-block{ width:36px; height:24px; border-radius:6px; box-shadow:0 4px 0 rgba(0,0,0,0.3); }
.bg-blocky .bb1{ background:#ff7a45; animation:blockCycle 3s ease-in-out infinite; }
.bg-blocky .bb2{ background:#2f6fed; z-index:2; margin:0 -4px; animation:blockCycle 3s ease-in-out infinite; animation-delay:0.15s; }
.bg-blocky .bb3{ background:#ffc53d; z-index:1; margin:0 -4px; animation:blockCycle 3s ease-in-out infinite; animation-delay:0.3s; }
.bg-blocky .bb4{ background:#17c978; animation:blockCycle 3s ease-in-out infinite; animation-delay:0.45s; }
@keyframes blockCycle{ 0%,15%{ transform:translateY(0) scale(1); } 25%{ transform:translateY(-10px) scale(1.08); } 40%,100%{ transform:translateY(0) scale(1); } }

/* ── Sound / drumset: equalizer bars scene ── */
.bg-sound{
  background: linear-gradient(160deg, #241035 0%, #150a20 100%);
  display:flex; align-items:flex-end; justify-content:center; gap:7px; padding-bottom:20px;
}
.bg-sound .bar{ width:10px; background:linear-gradient(180deg,#ff3d81,#7b3fe4); border-radius:4px; animation:soundBar 0.9s ease-in-out infinite; }
@keyframes soundBar{ 0%,100%{ height:14px; } 50%{ height:58px; } }

.card-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-age-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.card-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-color);
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.card-age:hover {
  transform: scale(1.05);
}

.card-title {
  margin: 0;
  font-size: 1.35rem;
  color: var(--text-primary);
}

.card-copy {
  margin: 0;
  color: var(--text-tertiary);
  flex-grow: 1;
}

.card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--accent-color);
  color: #ffffff;
  font-weight: 700;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(79, 127, 255, 0.3);
}

.card-button:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 127, 255, 0.4);
}

.footer-note {
  margin-top: 36px;
  padding: 20px 24px;
  border-radius: 22px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color-subtle);
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

@media (max-width: 640px) {
  .site-shell {
    padding: 28px 18px 34px;
  }

  .hero-section {
    padding: 30px 24px;
  }

  .card {
    padding: 24px;
  }

  .theme-toggle {
    top: 12px;
    right: 12px;
    padding: 6px;
  }

  .theme-icon {
    width: 28px;
    height: 28px;
  }
}

/* Mobile-specific grid and spacing tweaks */
@media (max-width: 480px) {
  .site-shell {
    padding-top: 84px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .game-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hero-section {
    border-radius: 20px;
    padding: 20px;
  }

  .theme-toggle {
    top: 10px;
    right: 10px;
  }
}

/* Ensure filter nav wraps cleanly on small screens */
@media (max-width: 420px) {
  .filter-nav {
    gap: 8px;
  }
  .filter-button {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

@keyframes themeSwitch {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.8) rotate(180deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(79, 127, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(79, 127, 255, 0);
  }
}

.card {
  animation: fadeIn 0.3s ease-out;
}

.theme-icon.active {
  animation: themeSwitch 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover .theme-icon.active {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Device chip dark mode */
:root.dark .card-device {
  background: #1a2540 !important;
  color: #7fa3ff !important;
}

/* ── Filter Accordion ── */
.filter-accordion {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-group {
  position: relative;
}

.filter-group-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 44px; /* standar touch target minimum biar enak dipencet jari */
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-group-btn:hover,
.filter-group-btn.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  box-shadow: 0 4px 12px rgba(79,127,255,0.3);
}

.filter-arrow {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
  display: inline-block;
}

.filter-group-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 14px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  animation: fadeIn 0.18s ease;
}

.filter-group-panel.open {
  display: block;
}

:root.dark .filter-group-panel {
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.filter-group-panel .filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-group-panel .filter-button {
  padding: 7px 14px;
  font-size: 0.85rem;
}

/* Active filter indicator on group button */
.filter-group-btn.has-filter {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

@media (max-width: 480px) {
  .filter-accordion { gap: 8px; }
  .filter-group-btn { padding: 8px 14px; font-size: 0.82rem; min-height: 40px; }

  /* Panel dropdown biasa (nempel ke tombol) bisa kepotong kalau tombolnya deket tepi kanan
     layar sempit — jadi di HP, panel-nya "dilepas" dari posisi tombol dan ditaruh
     mengambang di tengah layar sebagai sheet, dijamin gak pernah kepotong sisi manapun. */
  .filter-group-panel {
    position: fixed;
    top: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 32px);
    max-width: 340px;
    min-width: 0;
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* Dark mode filter panel & buttons */
:root.dark .filter-group-panel {
  background: #1a2236;
  border-color: rgba(90, 143, 255, 0.2);
}

:root.dark .filter-group-btn {
  background: #141920;
  color: var(--text-primary);
  border-color: rgba(232, 237, 245, 0.15);
}

:root.dark .filter-button {
  background: #1a2236;
  color: #a8b3c9;
  border-color: rgba(232, 237, 245, 0.12);
}

:root.dark .filter-button:hover,
:root.dark .filter-button.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

:root.dark .filter-group-btn:hover,
:root.dark .filter-group-btn.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

:root.dark .filter-group-btn.has-filter {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: #1a2236;
}
/* ═══════════════════════════════════════════════════════════════
   EPIC LIVE BACKGROUNDS — ditulis ulang bersih, 1 definisi per class.
   Sebelumnya file ini punya .matrix-overload x5 dan .bg-mathai-matrix x5
   yang saling tabrakan (hasil tempelan berkali-kali) — itu penyebab
   biner di Math AI keliatan diam/berantakan (salah satu versi lama
   animasinya gak punya durasi waktu, jadi dianggap 0 detik = gak jalan).
   ═══════════════════════════════════════════════════════════════ */

.card {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--accent-color);
  box-shadow: 0 20px 40px rgba(47, 114, 255, 0.25);
}
.card-content { position: relative; z-index: 10; pointer-events: auto; }
.card-bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-anim { position: absolute; inset: 0; overflow: hidden; }

/* ───────────────────── HANGMAN: cyberpunk glitch ───────────────────── */
.bg-hangman-cyber { background: radial-gradient(circle at center, #1b0722 0%, #08020e 100%) !important; }
.glitch-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.2) 50%);
  background-size: 100% 4px;
}
.gallows-scene-epic { position:absolute; top:50%; left:26%; transform:translate(-50%,-50%) scale(2.3); filter: drop-shadow(0 0 6px #ff0055aa); }
.gallows-svg { width:100px; height:110px; overflow:visible; }
.gallows-svg line, .gallows-svg circle { fill:none; stroke:#ff3d81; stroke-width:2.5; stroke-linecap:round; }
.gallows-svg .g-base, .gallows-svg .g-post, .gallows-svg .g-beam, .gallows-svg .g-brace {
  stroke:#a374ff; filter: drop-shadow(0 0 3px #a374ff);
}
.gallows-svg .g-rope { stroke:#6b6b85; stroke-width:1.5; }
.gallows-svg .g-figure { transform-origin: 62px 22px; animation: figureSwing 2.4s ease-in-out infinite; }
.gallows-svg .g-head { fill:#08020e; stroke:#ff3d81; filter: drop-shadow(0 0 4px #ff3d81); }
.gallows-svg .g-body, .gallows-svg .g-limb { stroke:#ff3d81; filter: drop-shadow(0 0 4px #ff3d81); }
@keyframes figureSwing { 0%,100%{ transform:rotate(-7deg); } 50%{ transform:rotate(7deg); } }

.hangman-matrix-glitch { position:absolute; bottom:18%; right:6%; text-align:right; z-index:3; }
.glitch-txt {
  font-family:'Poppins',sans-serif; font-size:20px; font-weight:900; color:#fff;
  letter-spacing:3px; text-shadow:0 0 10px #a374ff; position:relative;
}
.glitch-txt::before, .glitch-txt::after {
  content: attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; background:transparent;
}
.glitch-txt::before { color:#ff0055; text-shadow:-2px 0 #ff0055; clip:rect(2px,340px,8px,0); animation: glitchAnim 4s infinite linear alternate-reverse; }
.glitch-txt::after  { color:#00f0ff; text-shadow: 2px 0 #00f0ff; clip:rect(10px,340px,16px,0); animation: glitchAnim2 3s infinite linear alternate-reverse; }
@keyframes glitchAnim  { 0%{ transform:translate(0); } 20%{ transform:translate(-2px,1px); } 40%{ transform:translate(-1px,-1px); } 60%{ transform:translate(1px,1px); } 80%{ transform:translate(2px,-1px); } 100%{ transform:translate(0); } }
@keyframes glitchAnim2 { 0%{ transform:translate(0); } 20%{ transform:translate(2px,-1px); } 40%{ transform:translate(1px,1px); } 60%{ transform:translate(-1px,-1px); } 80%{ transform:translate(-2px,1px); } 100%{ transform:translate(0); } }

.neon-sparks { position:absolute; inset:0; }
.neon-sparks span {
  position:absolute; width:var(--size); height:var(--size); background:#a374ff; border-radius:50%;
  box-shadow:0 0 8px #a374ff; opacity:0; animation: sparkRise 3.5s linear infinite;
}
@keyframes sparkRise { 0%{ opacity:0; transform:translateY(0); } 15%{ opacity:0.9; } 85%{ opacity:0.5; } 100%{ opacity:0; transform:translateY(-90px); } }

/* ───────────────────── COIN FLIP: money rain + gold coin ───────────────────── */
.bg-coin-luxury { background: radial-gradient(circle at top, #1a2030 0%, #070a0f 100%) !important; }
.money-rain-container { position:absolute; inset:0; overflow:hidden; z-index:1; }
.falling-bill, .falling-coin { position:absolute; top:-30px; opacity:0; pointer-events:none; }
.falling-bill { font-size:18px; animation: moneyFall linear infinite; }
.falling-coin { font-size:15px; color:#ffd700; text-shadow:0 0 5px #ffd700; animation: moneyFall linear infinite; }
@keyframes moneyFall { 0%{ transform:translateY(0) rotate(0deg); opacity:0; } 10%{ opacity:0.75; } 90%{ opacity:0.6; } 100%{ transform:translateY(230px) rotate(180deg); opacity:0; } }

.coin-epic-stage { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; z-index:3; perspective:800px; }
.coin-shadow-dynamic {
  position:absolute; width:70px; height:16px; border-radius:50%; bottom:22%;
  background:radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 75%);
  animation: shadowPulse 1.8s ease-in-out infinite;
}
@keyframes shadowPulse { 0%,100%{ transform:scale(1); opacity:0.6; } 50%{ transform:scale(0.7); opacity:0.3; } }
.coin-3d-ultra {
  width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff7cc, #ffd700 50%, #b8860b 90%);
  box-shadow:0 0 26px rgba(255,215,0,0.55), inset 0 0 10px rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:900; color:#513d08;
  animation: coinSpin3D 1.8s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes coinSpin3D { 0%{ transform:rotateY(0deg); } 50%{ transform:rotateY(180deg) scale(0.8); } 100%{ transform:rotateY(360deg); } }
.golden-shine-floor {
  position:absolute; bottom:0; left:0; right:0; height:35%;
  background:linear-gradient(0deg, rgba(255,215,0,0.15) 0%, transparent 100%);
}

/* ───────────────────── SQUARE INVADER: raid scene ───────────────────── */
.bg-invader-raid { background: radial-gradient(circle at center, #1a0b2e 0%, #070210 100%) !important; }
.raid-overlay {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.22) 50%);
  background-size: 100% 4px;
}
.invader-swarm { position:relative; width:100%; height:100%; }
.neon-square-raid { position:absolute; top:-30px; border-radius:6px; opacity:0; animation: raidDown linear infinite; }
.neon-square-raid.type-0 { width:18px; height:18px; background:#ff0055; box-shadow:0 0 12px #ff0055; }
.neon-square-raid.type-1 { width:24px; height:24px; background:#00ffcc; box-shadow:0 0 12px #00ffcc; }
.neon-square-raid.type-2 { width:14px; height:14px; background:#ffcc00; box-shadow:0 0 12px #ffcc00; }
.neon-square-raid.type-3 { width:28px; height:28px; background:#9900ff; box-shadow:0 0 12px #9900ff; }
@keyframes raidDown { 0%{ transform:translateY(0) rotate(0deg) scale(0.8); opacity:0; } 10%{ opacity:0.85; } 90%{ opacity:0.85; } 100%{ transform:translateY(240px) rotate(360deg) scale(1.1); opacity:0; } }
.warning-text {
  position:absolute; bottom:12px; left:14px; font-family:monospace; font-size:10px; color:#ff0055;
  letter-spacing:1.5px; font-weight:bold; background:rgba(255,0,85,0.12); padding:3px 8px; border-radius:4px;
  border:1px solid rgba(255,0,85,0.3); animation: raidAlert 1s ease-in-out infinite alternate; z-index:3; white-space:nowrap;
}
@keyframes raidAlert { 0%{ opacity:0.4; } 100%{ opacity:1; } }

/* ───────────────────── QUICK MATH & MATH AI: shared floaters + aurora wave text ───────────────────── */
.bg-quickmath-neon { background: linear-gradient(160deg, #061626 0%, #0d2947 100%) !important; }
.bg-mathai-matrix   { background: #020c08 !important; }

.math-glow-sym {
  position:absolute; bottom:-30px; font-size:20px; font-weight:900; color:#00ffcc;
  text-shadow:0 0 8px #00ffccaa; opacity:0; animation: mathFloatUp linear infinite;
}
.bg-mathai-matrix .math-glow-sym { color:#39ff88; text-shadow:0 0 8px #39ff88aa; }
@keyframes mathFloatUp { 0%{ transform:translateY(0) rotate(0deg); opacity:0; } 15%{ opacity:0.75; } 85%{ opacity:0.6; } 100%{ transform:translateY(-190px) rotate(160deg); opacity:0; } }

/* Binary digit streams (Math AI) — FIX: dulu animasinya "matrixDrop linear infinite" TANPA
   durasi waktu, jadi durasinya dianggap 0 detik = gak pernah keliatan jalan. Sekarang durasinya eksplisit. */
.binary-stream {
  position:absolute; top:-70px; font-family:'Courier New',monospace; font-size:11px; font-weight:bold;
  color:#39ff88; text-shadow:0 0 6px rgba(57,255,136,0.6); line-height:1.25; opacity:0;
  animation: binaryFalling 3s linear infinite;
}
.matrix-overload { font-size:13px; font-weight:900; color:#39ff88 !important; text-shadow:0 0 8px rgba(57,255,136,0.9); }
@keyframes binaryFalling { 0%{ transform:translateY(0); opacity:0; } 10%{ opacity:0.9; } 90%{ opacity:0.6; } 100%{ transform:translateY(230px); opacity:0; } }

.math-borealisis-container { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding:14px 0; pointer-events:none; }
.aurora-sinusoid-track { width:100%; overflow:hidden; white-space:nowrap; }
.aurora-sinusoid-track.path-top { transform: rotate(-2deg); }
.aurora-sinusoid-track.path-bottom { transform: rotate(2deg); }
.aurora-wave-text {
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
  letter-spacing:2px; color:#c7fff4; text-shadow:0 0 8px #00ffcc; opacity:0.75;
  animation: waveScroll 14s linear infinite;
}
.bg-mathai-matrix .aurora-wave-text { color:#9dffc2; text-shadow:0 0 8px #39ff88; }
@keyframes waveScroll { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

.ai-brain-pulse {
  position:absolute; bottom:14px; right:14px; font-size:10px; color:#39ff88; background:rgba(0,0,0,0.45);
  padding:4px 9px; border-radius:20px; border:1px solid #39ff8844; animation: pulseGlow 1.5s infinite alternate; z-index:3; white-space:nowrap;
}
@keyframes pulseGlow { 0%{ text-shadow:0 0 5px currentColor; filter:brightness(1); } 100%{ text-shadow:0 0 16px currentColor; filter:brightness(1.3); } }

/* ───────────────────── SCRATCH / CODE BLOCK: Uno-stack tower ───────────────────── */
.bg-codeblock-stack { background: radial-gradient(circle at bottom, #16162a 0%, #090911 100%) !important; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; perspective:600px; }
.uno-stacko-tower { display:flex; flex-direction:column-reverse; align-items:center; width:130px; position:relative; transform-style:preserve-3d; }
.uno-block {
  width:110px; height:22px; margin-bottom:2px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-family:monospace; font-size:10px; font-weight:900; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.6);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.25), 0 4px 6px rgba(0,0,0,0.4);
  opacity:0; transform: translateY(-160px) rotateX(80deg);
}
.ub-1 { background:#ff3b30; animation: unoBuildCollapse 5s infinite 0s; }
.ub-2 { background:#007aff; animation: unoBuildCollapse 5s infinite 0.25s; }
.ub-3 { background:#34c759; animation: unoBuildCollapse 5s infinite 0.5s; }
.ub-4 { background:#ffcc00; animation: unoBuildCollapse 5s infinite 0.75s; }
.ub-5 { background:#af52de; animation: unoBuildCollapse 5s infinite 1s; }
.ub-6 { background:#ff9500; animation: unoBuildCollapse 5s infinite 1.25s; }
@keyframes unoBuildCollapse {
  0%      { opacity:0; transform:translateY(-160px) scale(0.6); }
  8%,62%  { opacity:1; transform:translateY(0) rotate(0deg) translateX(0); }
  70%     { transform:translateY(0) rotate(10deg) translateX(6px); }
  76%     { transform:translateY(0) rotate(-14deg) translateX(-10px); }
  100%    { opacity:0; transform:translateY(150px) rotate(80deg) translateX(35px) scale(0.8); }
}

/* ───────────────────── DRUMSET: cyber equalizer ───────────────────── */
.bg-sound-cyber { background: linear-gradient(180deg, #18052c 0%, #0c0217 100%) !important; display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; }
.equalizer-container { display:flex; align-items:flex-end; gap:4px; height:70px; }
.eq-cyber-bar {
  width:7px; height:14px; background:linear-gradient(0deg,#7b3fe4,#ff3d81,#ffeb3b); border-radius:4px;
  box-shadow:0 0 8px #ff3d8188; animation: cyberBars 0.6s ease-in-out infinite alternate;
}
@keyframes cyberBars { 0%{ height:10px; filter:hue-rotate(0deg); } 100%{ height:64px; filter:hue-rotate(45deg); } }

/* ───────────────────── "J" signature footer (cosmic eclipse) ───────────────────── */
#epic-cosmic-floor-container {
  position:relative; width:100%; height:150px;
  background: linear-gradient(0deg, rgba(10,14,22,1) 0%, transparent 100%);
  display:flex; align-items:center; justify-content:center;
  margin-top:60px; padding-bottom:30px; overflow:visible;
}
.floor-aurora-curtain { position:absolute; bottom:0; width:100%; height:110px; opacity:0.3; filter:blur(26px); pointer-events:none; }
.floor-aurora-curtain.color-purple-yellow { background: radial-gradient(circle at 35% 100%, #7000ff 0%, #ffcc00 40%, transparent 70%); animation: masterAuroraWave 7s ease-in-out infinite alternate; }
.floor-aurora-curtain.color-white-green   { background: radial-gradient(circle at 65% 100%, #ffffff 0%, #39ff88 45%, transparent 75%); animation: masterAuroraWave 9s ease-in-out infinite alternate-reverse; opacity:0.22; }
@keyframes masterAuroraWave { 0%{ transform:translateX(-8%) scaleY(1); } 100%{ transform:translateX(8%) scaleY(1.15); } }

.signature-eclipse-stage { position:relative; width:88px; height:88px; display:flex; align-items:center; justify-content:center; perspective:900px; z-index:2; overflow:visible; }

.j-eclipse-letter {
  position:relative; font-family:'Poppins',sans-serif; font-size:38px; font-weight:900; z-index:3; user-select:none;
  animation: jBreathe 4s ease-in-out infinite;
  background: linear-gradient(90deg, #f4c430, #ff3d81, #7b3fe4, #2de2e6, #f4c430);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  animation: jBreathe 4s ease-in-out infinite, jColorShift 6s linear infinite;
}
:root.dark .j-eclipse-letter       { filter: drop-shadow(0 0 14px rgba(255,255,255,0.35)); }
:root:not(.dark) .j-eclipse-letter { filter: drop-shadow(0 0 10px rgba(0,0,0,0.2)); }
@keyframes jBreathe { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
@keyframes jColorShift { 0%{ background-position:0% 50%; } 100%{ background-position:300% 50%; } }

/* Cincin ala Saturnus — pita elips miring dengan gradasi warna berlapis (kayak celah Cassini) */
.saturn-ring-band {
  position:absolute; top:50%; left:50%; width:172px; height:172px; z-index:1;
  transform: translate(-50%,-50%) rotateX(78deg);
  border-radius:50%; pointer-events:none;
  background: radial-gradient(circle,
    transparent 0%, transparent 36%,
    rgba(244,196,48,0.85) 39%, rgba(244,228,193,0.7) 43%, rgba(139,111,71,0.6) 47%,
    transparent 49%, transparent 53%,
    rgba(123,63,228,0.75) 56%, rgba(45,226,230,0.55) 61%, rgba(255,61,129,0.5) 65%,
    transparent 68%, transparent 100%);
  animation: ringGlow 5s ease-in-out infinite;
}
@keyframes ringGlow { 0%,100%{ opacity:0.7; } 50%{ opacity:1; } }

/* Bayangan gerhana BENERAN lewat nutupin huruf J dari kiri ke kanan, muter terus */
.eclipse-core-shadow {
  position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
  background: radial-gradient(circle at 35% 35%, #2a2a2a 0%, #000 70%);
  border-radius:50%; z-index:4;
  box-shadow: 0 0 20px 4px rgba(0,0,0,0.9), inset -4px -4px 10px rgba(255,255,255,0.06);
  animation: eclipsePass 5s ease-in-out infinite;
}
@keyframes eclipsePass {
  0%   { transform: translateX(-60px); opacity:0; }
  12%  { opacity:1; }
  48%  { transform: translateX(0); }        /* totalitas: bayangan pas nutupin J penuh */
  52%  { transform: translateX(0); }
  88%  { opacity:1; }
  100% { transform: translateX(60px); opacity:0; }
}

/* Kilatan cahaya pas momen totalitas (bayangan pas di tengah) — bagian "payoff"-nya */
.signature-eclipse-stage::after {
  content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 70%);
  transform:translate(-50%,-50%); z-index:5; pointer-events:none;
  animation: totalityFlare 5s ease-in-out infinite;
}
@keyframes totalityFlare {
  0%,44%   { width:0; height:0; opacity:0; }
  50%      { width:70px; height:70px; opacity:0.85; }
  56%,100% { width:0; height:0; opacity:0; }
}

.saturn-3d-illusion-ring { position:absolute; width:100%; height:100%; transform:rotateX(75deg) rotateY(-20deg); transform-style:preserve-3d; z-index:4; }
.illusion-dot { position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%; margin:-2.5px; animation: stepIllusionOrbit 3s linear infinite; animation-delay:var(--delay); }
.illusion-dot:nth-child(odd)  { background:#fff; box-shadow:0 0 8px #fff, 0 0 15px #fff; }
.illusion-dot:nth-child(even) { background:#000; border:1px solid rgba(255,255,255,0.25); box-shadow:0 0 4px rgba(0,0,0,0.9); }
@keyframes stepIllusionOrbit {
  0%   { transform: rotateZ(var(--angle)) translateX(65px) rotateZ(calc(-1 * var(--angle))) scale(0.7); opacity:0.15; }
  50%  { opacity:1; transform: rotateZ(calc(var(--angle) + 180deg)) translateX(65px) rotateZ(calc(-1 * (var(--angle) + 180deg))) scale(1.2); }
  100% { transform: rotateZ(calc(var(--angle) + 360deg)) translateX(65px) rotateZ(calc(-1 * (var(--angle) + 360deg))) scale(0.7); opacity:0.15; }
}

.meteor-swarm-orbit { position:absolute; inset:-20px; z-index:6; pointer-events:none; }
.cosmic-meteor { position:absolute; width:3px; height:3px; background:#fff; border-radius:50%; box-shadow:0 0 10px #fff, 0 0 20px #00f0ff; animation: meteorDrift 4s ease-in-out infinite; }
.cosmic-meteor::before { content:''; position:absolute; top:0; right:0; width:24px; height:1.5px; background:linear-gradient(90deg, transparent, #00f0ff88); }
@keyframes meteorDrift { 0%,100%{ opacity:0.2; transform:translate(0,0); } 50%{ opacity:1; transform:translate(-6px,6px); } }

/* ═══════════════════════════ MOBILE RESPONSIVE ═══════════════════════════ */
@media (max-width: 640px) {
  .card { min-height: 190px; }
  .card-content { padding: 20px; min-height: 190px; }
  .card-title { font-size: 1.1rem; }

  /* Turunin ukuran & jumlah kesan visual di scene supaya gak sesak & gak berat di HP */
  .gallows-scene-epic { transform: translate(-50%,-50%) scale(1.5); left: 22%; }
  .glitch-txt { font-size: 15px; letter-spacing: 2px; }
  .hangman-matrix-glitch { bottom: 14%; right: 8%; }

  .coin-3d-ultra { width: 56px; height: 56px; font-size: 22px; }
  .falling-bill { font-size: 14px; }
  .falling-coin { font-size: 12px; }

  .neon-square-raid.type-0 { width: 13px; height: 13px; }
  .neon-square-raid.type-1 { width: 17px; height: 17px; }
  .neon-square-raid.type-2 { width: 10px; height: 10px; }
  .neon-square-raid.type-3 { width: 20px; height: 20px; }
  .warning-text { font-size: 9px; bottom: 8px; left: 8px; }

  .math-glow-sym { font-size: 15px; }
  .binary-stream { font-size: 9px; }
  .aurora-wave-text { font-size: 10px; }
  .ai-brain-pulse { font-size: 9px; bottom: 8px; right: 8px; padding: 3px 7px; }

  .uno-stacko-tower { width: 100px; transform: scale(0.8); }
  .uno-block { width: 90px; height: 19px; font-size: 9px; }

  .equalizer-container { height: 50px; gap: 3px; }
  .eq-cyber-bar { width: 5px; }

  #epic-cosmic-floor-container { height: 100px; margin-top: 30px; padding-bottom: 16px; }
  .signature-eclipse-stage { transform: scale(0.7); }
  .floor-aurora-curtain { filter: blur(16px); }
}

@media (max-width: 400px) {
  .card-content { padding: 16px; }
  .gallows-scene-epic { display: none; } /* di layar sangat sempit, prioritaskan teks tetap kebaca */
  .uno-stacko-tower { transform: scale(0.68); }
}

/* Non-negotiable: konten teks WAJIB selalu bisa diklik & kebaca, di atas animasi apapun */
.card-content, .card-content * { position: relative; }