/* SifirQuest Task Sync #5N — RC29 / v0765
   SCOPE: Realm x4 > Crystal Rescue > MOBILE ONLY.

   Root cause confirmed from the previously accepted Task #18.10 RC10:
   Realm4 JS/anchor contract assumes mobile indexes:
     row 1 = 0,1,2
     row 2 = 3,4,5
   i.e. 3 columns x 2 rows.

   A later 2 columns x 3 rows layout breaks CAST_HEAL target geometry.
   This file restores the accepted 3x2 mobile contract and is deliberately
   loaded AFTER crystal-v0756-ui-restore.css so browser cache/stale rules
   cannot reintroduce the 2x3 layout.

   No desktop/tablet, sync, backend, Avatar Engine, cast frames, rewards,
   Realm x3, Prism Path, Shard Gate or Boss behavior changes.
*/

@media (max-width:720px){
  html body #app .quad-rescue-stage .quad-crystal-zone{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    top:4%!important;
    bottom:4%!important;
    column-gap:5px!important;
    row-gap:6px!important;
    align-content:stretch!important;
  }

  html body #app .quad-rescue-stage .quad-crystal-pod{
    min-width:0!important;
    min-height:0!important;
    border-radius:18px!important;
  }

  html body #app .quad-rescue-stage .quad-crystal-cage{
    width:40px!important;
    height:46px!important;
  }

  html body #app .quad-rescue-stage .quad-crystal-cage>span{
    font-size:27px!important;
  }

  html body #app .quad-rescue-stage .quad-crystal-cage>i{
    height:48px!important;
    width:3px!important;
  }

  html body #app .quad-rescue-stage .quad-crystal-lock{
    bottom:4px!important;
    font-size:12px!important;
  }
}

@media (max-width:430px){
  html body #app .quad-rescue-stage .quad-crystal-zone{
    column-gap:4px!important;
    row-gap:4px!important;
  }

  html body #app .quad-rescue-stage .quad-crystal-cage{
    width:36px!important;
    height:42px!important;
  }

  html body #app .quad-rescue-stage .quad-crystal-cage>span{
    font-size:24px!important;
  }

  html body #app .quad-rescue-stage .quad-crystal-cage>i{
    height:44px!important;
  }
}