/* ===== Revisi final sesuai spesifikasi pengguna ===== */
#mathLevelsPage .level-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
  max-width:1240px!important;
  overflow:visible!important;
}
#mathLevelsPage .level-card{
  min-width:0!important;
  min-height:330px!important;
  padding:18px!important;
}
#mathLevelsPage .level-card h2{
  font-size:1.05rem!important;
  line-height:1.25!important;
  margin:15px 0 8px!important;
}
#mathLevelsPage .level-card p{
  min-height:66px!important;
  font-size:.78rem!important;
  line-height:1.5!important;
}
#mathLevelsPage .game-preview{
  height:76px!important;
  margin:12px 0!important;
}
#mathLevelsPage .level-card .btn{
  width:100%!important;
  min-height:40px!important;
  font-size:.78rem!important;
}
#mathPrototypeStrip{display:none!important}

/* Timer bersama: tampil seperti timer Level 1/Ular Tangga */
.cerdas-level-timer{
  position:fixed;
  top:84px;
  right:24px;
  z-index:200;
  display:none;
  align-items:center;
  gap:9px;
  padding:10px 15px;
  border:2px solid #e5e0d9;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 28px rgba(58,57,54,.14);
  color:#2a2a29;
  font-weight:900;
}
.cerdas-level-timer.active{display:flex}
.cerdas-level-timer .timer-number{
  min-width:54px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  font-size:1.05rem;
}
.cerdas-level-timer.warning{border-color:#f59e0b;background:#fff8e7;color:#b45309}
.cerdas-level-timer.danger{border-color:#ef4444;background:#fff0f0;color:#b91c1c}
.game-inline-timer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding:10px 13px;border-radius:14px;
  background:#f6f3ee;border:1px solid #efe9e1;font-weight:900;
}
.game-inline-timer strong{font-variant-numeric:tabular-nums;color:#1e1f1f}
.game-inline-timer.warning{background:#fff8e7;border-color:#f7c45a}
.game-inline-timer.warning strong{color:#b45309}
.game-inline-timer.danger{background:#fff0f0;border-color:#f0a1a1}
.game-inline-timer.danger strong{color:#b91c1c}

/* Level 2: tepat 8 kartu, 2 baris x 4 kolom */
#memoryBoard.memory-2x4{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(120px,1fr))!important;
  max-width:760px!important;
  margin:0 auto!important;
  gap:14px!important;
}
#memoryBoard.memory-2x4 .memory-card{
  min-height:0!important;
  height:150px!important;
  aspect-ratio:auto!important;
}
#memoryBoard.memory-2x4 .memory-back{
  padding:10px!important;
  text-align:center!important;
  font-size:clamp(.9rem,2vw,1.25rem)!important;
  line-height:1.2!important;
}

/* Level 3: TTS lebih menyerupai TTS cetak */
#crosswordGamePage .crossword-board-wrap{
  background:#f6f3ee!important;
  border:2px solid #d4ccc1!important;
  border-radius:20px!important;
  padding:18px!important;
}
#crosswordGamePage .crossword-board{
  width:min(100%,560px)!important;
  aspect-ratio:1/1!important;
  margin:auto!important;
  border:3px solid #2a2a29!important;
  box-shadow:0 10px 24px rgba(58,57,54,.08)!important;
}
#crosswordGamePage .crossword-cell.block{background:#2a2a29!important}
#crosswordGamePage .crossword-cell:not(.block){background:#fff!important}
#crosswordGamePage .crossword-cell input{font-size:1.1rem!important;font-weight:1000!important;text-align:center!important}
#crosswordGamePage .crossword-cell.active{background:#efe9e1!important}
#crosswordGamePage .crossword-cell.correct{background:#e8faef!important}
#crosswordGamePage .crossword-cell.wrong{background:#fff0f0!important}

/* Level 4: labirin visual lebih game-like */
#mathMazePage .maze-shell{
  grid-template-columns:minmax(0,650px) minmax(300px,360px)!important;
  max-width:1080px!important;
}
#mathMazePage .maze-card{
  border-radius:26px!important;
  background:#2a2a29!important;
  box-shadow:0 18px 42px rgba(42,42,41,.22)!important;
}
#mathMazePage .maze-grid.real-maze{
  max-width:620px!important;
  border:5px solid #84817d!important;
  border-radius:14px!important;
  background:#1e1f1f!important;
}
#mathMazePage .maze-cell.path{background:#fffef7!important}
#mathMazePage .maze-cell.wall{background:#3a3936!important}
#mathMazePage .maze-cell.player{background:#a9e7ff!important}
#mathMazePage .maze-cell.goal{
  background:linear-gradient(135deg,#ffe48a,#ffb703)!important;
  box-shadow:inset 0 0 0 3px #fff!important;
  font-size:1.35rem!important;
}
#mathMazePage .maze-cell.trap-hidden{background:#fffef7!important}
#mathMazePage .maze-cell.trap{
  background:linear-gradient(135deg,#ffe5b8,#ff9f43)!important;
  box-shadow:inset 0 0 0 3px #f97316!important;
  animation:trapPulse 1s ease-in-out infinite alternate;
}
#mathMazePage .maze-cell.bonus-path{background:#dcfce7!important}
@keyframes trapPulse{from{filter:brightness(1)}to{filter:brightness(1.08)}}
#mathMazePage .maze-question .trap-title{
  color:#b45309;font-weight:1000;
}
#mathMazePage .maze-question .bonus-note{
  margin-top:10px;padding:9px 11px;border-radius:11px;background:#eaf9ef;color:#16713c;font-weight:900;
}
#mathMazePage .maze-question button{
  margin:6px 5px 0 0;padding:10px 13px;border-radius:11px;
  background:#fff;border:2px solid #efe9e1;color:#3a3936;font-weight:1000;
}
#mathMazePage .maze-question button:hover{border-color:#1e1f1f;background:#f6f3ee}
#mathMazePage .maze-question .trap-answer-wrong{margin-top:9px;color:#b4232b;font-weight:900}

/* Level 5: brankas lebih realistis */
#safeCrackerPage .safe-card{
  max-width:760px!important;margin:auto!important;
  border-radius:28px!important;
}
#safeCrackerPage .safe-door{
  min-height:180px!important;
  border-radius:24px!important;
}
#safeCrackerPage .safe-digit{
  min-width:58px!important;height:70px!important;
  font-size:2rem!important;
}
#safeCrackerPage .safe-keypad button{
  min-height:52px!important;font-size:1.05rem!important;font-weight:1000!important;
}

@media(max-width:1100px){
  #mathLevelsPage .level-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  #mathLevelsPage .level-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #memoryBoard.memory-2x4{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
  #memoryBoard.memory-2x4 .memory-card{height:105px!important}
  .cerdas-level-timer{top:76px;right:10px;padding:8px 11px}
}
@media(max-width:520px){
  #mathLevelsPage .level-grid{grid-template-columns:1fr!important}
}