/* ===== Laptop-first Level Selector ===== */
#mathLevelsPage .levels-page{
  min-height:calc(100vh - 72px)!important;
  padding:24px 22px 32px!important;
  overflow:hidden!important;
}
#mathLevelsPage .page-head{
  max-width:1160px!important;
  margin:0 auto 18px!important;
}
#mathLevelsPage .page-head h1{font-size:clamp(1.55rem,2vw,2rem)!important}
#mathLevelsPage .level-grid{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:14px!important;
  width:min(1160px,100%)!important;
  max-width:1160px!important;
  margin:0 auto!important;
  padding:2px 2px 12px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x proximity!important;
}
#mathLevelsPage .level-grid>.level-card{
  flex:0 0 218px!important;
  width:218px!important;
  min-width:218px!important;
  min-height:322px!important;
  height:322px!important;
  padding:20px!important;
  border-radius:22px!important;
  scroll-snap-align:start!important;
}
#mathLevelsPage .level-card h2{
  margin:15px 0 8px!important;
  font-size:1.12rem!important;
  line-height:1.25!important;
}
#mathLevelsPage .level-card p{
  min-height:72px!important;
  font-size:.82rem!important;
  line-height:1.45!important;
}
#mathLevelsPage .game-preview{
  height:72px!important;
  margin:12px 0!important;
  font-size:2rem!important;
  border-radius:14px!important;
}
#mathLevelsPage .level-number{
  width:45px!important;height:45px!important;border-radius:14px!important;font-size:1.08rem!important;
}
#mathLevelsPage .level-grid .btn{
  width:100%!important;
  min-height:42px!important;
  padding:9px 12px!important;
  font-size:.82rem!important;
}
#mathLevelsPage .level-grid::-webkit-scrollbar{height:8px}
#mathLevelsPage .level-grid::-webkit-scrollbar-thumb{background:#e5e0d9;border-radius:99px}
#mathLevelsPage .level-grid::-webkit-scrollbar-track{background:#efe9e1;border-radius:99px}

/* ===== Level 1 desktop/laptop game ===== */
#snakeGamePage .game-page{
  min-height:calc(100vh - 72px)!important;
  padding:14px 18px 24px!important;
  overflow:hidden!important;
}
#snakeGamePage .page-head{
  max-width:1000px!important;
  margin:0 auto 10px!important;
  gap:10px!important;
}
#snakeGamePage .page-head h1{font-size:1.45rem!important}
#snakeGamePage .page-head p{font-size:.82rem!important;margin-top:3px!important}
#snakeGamePage .game-layout{
  grid-template-columns:minmax(0,500px) minmax(285px,325px)!important;
  width:min(100%,850px)!important;
  gap:14px!important;
  margin:8px auto 0!important;
}
#snakeGamePage .board-shell{
  width:100%!important;
  max-width:500px!important;
  padding:8px!important;
  border-width:4px!important;
  border-radius:15px!important;
}
#snakeGamePage .game-panel{
  padding:14px!important;
  border-radius:18px!important;
}
#snakeGamePage .game-panel h2{font-size:1.1rem!important;margin-bottom:7px!important}
#snakeGamePage .game-panel>p{font-size:.78rem!important;line-height:1.4!important}
#snakeGamePage .score-row{gap:8px!important;margin:9px 0!important}
#snakeGamePage .mini-stat{padding:8px!important}
#snakeGamePage .mini-stat small{font-size:.65rem!important}
#snakeGamePage .mini-stat strong{font-size:.9rem!important}
#snakeGamePage .question-box{padding:10px!important;margin-top:8px!important}
#snakeGamePage .question-text{font-size:1.05rem!important;padding:9px!important}
#snakeGamePage .answer-area{gap:7px!important}
#snakeGamePage .answer-area input,#snakeGamePage .check-answer{height:38px!important}
#snakeGamePage .game-message{padding:8px!important;font-size:.75rem!important;margin-top:7px!important}
#snakeGamePage .dice-wrapper{margin-top:9px!important;gap:9px!important}
#snakeGamePage .dice{
  width:58px!important;height:58px!important;padding:7px!important;
  border-width:3px!important;border-radius:12px!important;
  box-shadow:0 3px 0 #ba9d7f,0 7px 12px rgba(42,42,41,.14)!important;
}
#snakeGamePage .dice-dot{
  width:8px!important;height:8px!important;
  box-shadow:none!important;
}
#snakeGamePage .dice-wrapper .btn{
  min-height:38px!important;padding:8px 12px!important;font-size:.78rem!important;
}
#snakeGamePage .cell{padding:3px!important;font-size:.62rem!important}

/* Outcome bubble must always be centered above the game. */
#levelOutcomeModal{
  position:fixed!important;inset:0!important;
  z-index:99999!important;
  display:grid!important;place-items:center!important;
  padding:18px!important;
  background:rgba(42,42,41,.66)!important;
}
#levelOutcomeModal.hidden{display:none!important}
#levelOutcomeModal .level-outcome-card{
  width:min(470px,92vw)!important;
  max-height:calc(100vh - 36px)!important;
  overflow:auto!important;
  padding:24px!important;
  border-radius:24px!important;
}
#levelOutcomeModal .level-outcome-icon{font-size:2.9rem!important}
#levelOutcomeModal .level-outcome-card h2{font-size:1.45rem!important}
#levelOutcomeModal .level-outcome-card p{font-size:.9rem!important;line-height:1.5!important}
#levelOutcomeModal .level-outcome-actions .btn{min-width:170px!important}

/* Prototype strip is retired: Level 4/5 now use the real games. */
#mathPrototypeStrip{display:none!important}