/* One dedicated setting per activity; shared controls remain consistent. */
.world-icon{display:none} /* Let the dedicated scene and its characters remain unobstructed. */
.activity[data-game=memory]{background-image:url("assets/play-memory.jpg");background-position:center}
.activity[data-game=shapes]{background-image:url("assets/play-shapes.jpg");background-position:center}
.activity[data-game=shapes] .activity-stage{background:#f5fbefed}
.world-words .world-scene img{filter:none;object-position:center}
.world-autonomy .world-scene img,.world-numbers .world-scene img{object-position:center}
/* Keep instructions, board and actions on one axis at every breakpoint. */
.activity[data-game]{background-size:cover}
.activity-bar,.activity-bottom{flex-shrink:0}
.activity-content{width:min(100%,1120px);min-width:0;flex:0 0 auto}
.activity-stage{width:min(100%,900px);margin:16px auto 0}
.activity-progress{min-width:0}
.activity-progress>span{max-width:100%;min-width:0;overflow-wrap:break-word}
.activity-actions{flex-wrap:wrap}
@media(min-width:701px) and (max-height:800px){
  .activity-bar{padding-top:12px;padding-bottom:10px}
  .activity-content{margin-top:6px}
  .activity-content h2{margin-top:8px;font-size:28px;padding:7px 18px}
  .activity-stage{min-height:250px}
  .shapes-stage{gap:16px;padding:14px}
  .memory-stage{padding:14px;gap:14px}
  .memory-piece{height:112px}
}
@media(max-width:700px){
  .activity-content{padding-inline:12px}
  .activity-stage{width:100%;margin:12px auto 0}
  .section-title{flex-wrap:wrap}
  .section-title>div{min-width:0}
  .listen-catalogue{max-width:100%}
}
@media(max-width:600px){
  .activity[data-game=memory]{background-position:right bottom}
  .activity[data-game=shapes]{background-position:left bottom}
}