/* zones.css — зонирование экрана с цветным бордюром.
   Две зоны, раскладка зависит от ориентации:
   - портрет: горизонтальный раздел (зона A сверху, B снизу)
   - ландшафт: вертикальный раздел (зона A слева, B справа)
   Зоны пустые, поверх фона (#stage). Бордюры разных цветов. */

#zones{
  position:fixed;
  top:env(safe-area-inset-top, 0px);
  left:0;
  width:100vw;
  height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  pointer-events:none;     /* зоны не перехватывают тач фона */
  display:flex;
  z-index:5;
  box-sizing:border-box;
}

/* общий вид зоны: без бордюра */
.zone{
  position:relative;
  pointer-events:auto;
  box-sizing:border-box;
  min-width:0;
  min-height:0;
  overflow:visible;
}

/* цвета бордюров убраны по запросу */

/* ---- ПОРТРЕТ: верх/низ ---- */
#zones.layout-portrait{
  flex-direction:column;
}
#zones.layout-portrait .zone{
  width:100%;
  height:50%;
}

/* ---- ЛАНДШАФТ: лево/право ---- */
#zones.layout-landscape{
  flex-direction:row;
}
#zones.layout-landscape .zone{
  width:50%;
  height:100%;
}